/*
  Jardim UI — motor visual central (design system)
  ---------------------------------------------------------------
  Entrega: 1007-visual-engine-views-bugfix

  Este arquivo e a fonte unica de verdade de cor/tipografia/componentes
  do Jardim Desapego. E carregado por ultimo dentro de <head> (ver
  helpers/ui.php::ui_head()), depois de jardim-premium-base.css e do
  <style> inline legado — por isso os valores de --brand-*/--accent/
  --jd-oliva/--jd-cafe/--jd-dourado abaixo TOMAM PRECEDENCIA sobre as
  definicoes antigas em qualquer pagina que passe por ui_head(), sem
  precisar reescrever cada view (cascata de :root, mesma especificidade,
  ultima declaracao vence).

  Views com <style> proprio DEPOIS de </head> (ex.: venda_checkout.php,
  menu_loja.php) tem seus proprios blocos :root editados separadamente
  para citar os MESMOS valores abaixo — ver relatorio/PADRAO-VISUAL.md.

  Convencao de nomes: tudo prefixado com --jde- (Jardim Design Engine)
  e classes .jd-*  (mesma convencao ja usada em telas novas como o PDV
  checkout, para nao introduzir uma segunda familia de nomes).
*/

:root {
  /* ---------- Paleta base ---------- */
  --jde-verde:        #2F6B3E;  /* acao positiva, mais vivo que o antigo oliva apagado */
  --jde-verde-600:    #275A34;
  --jde-verde-700:    #1F4728;
  --jde-verde-bg:     #E8F3EA;
  --jde-verde-line:   #BFE0C8;

  --jde-mel:          #C7902F;  /* dourado/mel — destaque, marca */
  --jde-mel-600:      #B27F27;
  --jde-mel-700:      #97691E;
  --jde-mel-bg:       #FDF3E1;
  --jde-mel-line:     #EBD3A0;

  --jde-marrom:       #6B4A32;  /* marrom medio — usar com moderacao, nunca como fundo grande */
  --jde-marrom-escuro:#2B2118;  /* so para titulos/enfase pontual, nao para blocos grandes */

  --jde-creme:        #FBF7EF;  /* fundo geral, limpo */
  --jde-bege:         #F3EADA;  /* fundo secundario/hover */
  --jde-card:         #FFFFFF;
  --jde-card-soft:    #FFFCF6;
  --jde-line:         #EAD9C4;
  --jde-texto:        #2B2118;
  --jde-texto-suave:  #6D5D53;
  --jde-texto-fraco:  #9A8A7C;

  --jde-vermelho:     #B3382A;  /* alerta suave, nao "sangue" */
  --jde-vermelho-bg:  #FBEAE6;
  --jde-vermelho-line:#F1C3B8;

  --jde-ambar:        #96660F;  /* pendente/aviso */
  --jde-ambar-bg:     #FFF3DD;
  --jde-ambar-line:   #F0D8A8;

  --jde-azul:         #2A5C82;  /* info/neutro-frio, usado com moderacao */
  --jde-azul-bg:      #EAF2F8;
  --jde-azul-line:    #CBDFEC;

  --jde-radius:       14px;
  --jde-radius-lg:    20px;
  --jde-shadow:       0 10px 28px rgba(43, 33, 24, .08);
  --jde-shadow-soft:  0 4px 14px rgba(43, 33, 24, .06);
  --jde-transition:   all .16s ease-in-out;

  /* ---------- Compat: sobrescreve tokens legados para toda pagina que
     passa por ui_head() herdar a paleta nova automaticamente ---------- */
  --brand-primary:     var(--jde-mel);
  --brand-primary-600: var(--jde-mel-600);
  --brand-primary-700: var(--jde-mel-700);
  --brand-accent:      var(--jde-mel-bg);
  --brand-gold:        var(--jde-mel);
  --ink:   var(--jde-texto);
  --muted: var(--jde-texto-suave);
  --line:  var(--jde-line);
  --bg:    var(--jde-creme);
  --card:  var(--jde-card);
  --accent: var(--jde-verde);
  --radius: var(--jde-radius);
  --shadow: var(--jde-shadow-soft);

  --jd-creme:    var(--jde-creme);
  --jd-bege:     var(--jde-bege);
  --jd-oliva:    var(--jde-verde);
  --jd-cafe:     var(--jde-marrom-escuro);
  --jd-caramelo: var(--jde-mel-600);
  --jd-dourado:  var(--jde-mel);
  --jd-card:     var(--jde-card-soft);
  --jd-line:     rgba(43, 33, 24, .12);
  --jd-shadow-soft: var(--jde-shadow-soft);
}

/* =====================================================================
   Base
   ===================================================================== */
body {
  background: linear-gradient(180deg, #fdfbf6 0%, var(--jde-creme) 100%);
  color: var(--jde-texto);
}

a { color: var(--jde-mel-600); }
a:hover { color: var(--jde-mel-700); }

/* Botao Bootstrap primario herda a paleta nova automaticamente via --brand-*,
   mas reforcamos contraste do texto (o tema antigo usava #111 sobre dourado
   claro, que ficava “lavado”). */
.btn-primary { color: #fff !important; }
.btn-primary:hover, .btn-primary:focus { color: #fff !important; }

/* =====================================================================
   .jd-page-header — cabecalho padrao de tela
   ===================================================================== */
.jd-page-header {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.jd-page-header .jd-kicker {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--jde-mel-700);
  margin-bottom: 4px;
}
.jd-page-header h1,
.jd-page-header .jd-title {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--jde-texto);
  margin: 0;
  line-height: 1.15;
}
.jd-page-header .jd-sub {
  color: var(--jde-texto-suave);
  font-size: .92rem;
  margin-top: 6px;
  max-width: 620px;
}
.jd-page-header .jd-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* =====================================================================
   .jd-grid — grade responsiva utilitaria
   ===================================================================== */
.jd-grid { display: grid; gap: 12px; }
.jd-grid-2 { grid-template-columns: repeat(2, 1fr); }
.jd-grid-3 { grid-template-columns: repeat(3, 1fr); }
.jd-grid-4 { grid-template-columns: repeat(4, 1fr); }
.jd-grid-auto { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
@media (max-width: 980px) {
  .jd-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .jd-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .jd-grid-2, .jd-grid-3, .jd-grid-4 { grid-template-columns: 1fr; }
}

/* =====================================================================
   .jd-card — card generico
   ===================================================================== */
.jd-card {
  background: var(--jde-card);
  border: 1px solid var(--jde-line);
  border-radius: var(--jde-radius);
  padding: 16px;
  box-shadow: var(--jde-shadow-soft);
  transition: var(--jde-transition);
}
.jd-card.jd-card-soft { background: var(--jde-card-soft); }
.jd-card > h4, .jd-card > .jd-card-title {
  margin: 0 0 10px;
  font-weight: 900;
  color: var(--jde-texto);
  font-size: 15px;
}

/* =====================================================================
   .jd-kpi — card de indicador (KPI) — numero grande, rotulo, tendencia
   ===================================================================== */
.jd-kpi {
  background: var(--jde-card);
  border: 1px solid var(--jde-line);
  border-radius: var(--jde-radius);
  padding: 16px;
  box-shadow: var(--jde-shadow-soft);
  transition: var(--jde-transition);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.jd-kpi:hover { transform: translateY(-2px); box-shadow: var(--jde-shadow); }
.jd-kpi .jd-kpi-label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 800;
  color: var(--jde-texto-suave);
}
.jd-kpi .jd-kpi-value {
  font-size: 1.9rem;
  font-weight: 900;
  color: var(--jde-texto);
  line-height: 1.1;
}
.jd-kpi .jd-kpi-sub { font-size: 12px; color: var(--jde-texto-fraco); }
.jd-kpi.jd-kpi-accent { border-left: 4px solid var(--jde-mel); }
.jd-kpi.jd-kpi-success { border-left: 4px solid var(--jde-verde); }
.jd-kpi.jd-kpi-success .jd-kpi-value { color: var(--jde-verde-700); }
.jd-kpi.jd-kpi-warning { border-left: 4px solid var(--jde-ambar); }

/* =====================================================================
   Botoes — .jd-button (novos) + compat com .jd-btn (ja usado no PDV)
   ===================================================================== */
.jd-button, .jd-btn {
  border: 1px solid var(--jde-line);
  background: #fff;
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 800;
  font-size: .92rem;
  color: var(--jde-texto);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: var(--jde-transition);
  min-height: 44px;
}
.jd-button:hover, .jd-btn:hover { background: var(--jde-bege); color: var(--jde-texto); }

.jd-button-primary, .jd-btn-main, .jd-btn.primary {
  background: linear-gradient(135deg, var(--jde-verde), var(--jde-verde-700));
  border-color: var(--jde-verde-700);
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(47, 107, 62, .22);
}
.jd-button-primary:hover, .jd-btn-main:hover, .jd-btn.primary:hover {
  filter: brightness(1.05);
  color: #fff !important;
}

.jd-button-secondary, .jd-btn.secondary {
  background: linear-gradient(135deg, var(--jde-mel), var(--jde-mel-700));
  border-color: var(--jde-mel-700);
  color: #fff !important;
}
.jd-button-secondary:hover, .jd-btn.secondary:hover { filter: brightness(1.05); color: #fff !important; }

.jd-button-danger {
  background: #fff;
  border-color: var(--jde-vermelho-line);
  color: var(--jde-vermelho);
}
.jd-button-danger:hover { background: var(--jde-vermelho-bg); }

.jd-button:disabled, .jd-btn:disabled { opacity: .55; cursor: not-allowed; }

/* =====================================================================
   Badges de status — .jd-badge-*
   ===================================================================== */
.jd-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 11.5px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.jd-badge-success   { background: var(--jde-verde-bg);    border-color: var(--jde-verde-line);    color: var(--jde-verde-700); }
.jd-badge-warning    { background: var(--jde-ambar-bg);    border-color: var(--jde-ambar-line);    color: var(--jde-ambar); }
.jd-badge-danger     { background: var(--jde-vermelho-bg); border-color: var(--jde-vermelho-line); color: var(--jde-vermelho); }
.jd-badge-pending    { background: var(--jde-ambar-bg);    border-color: var(--jde-ambar-line);    color: var(--jde-ambar); }
.jd-badge-approved   { background: var(--jde-verde-bg);    border-color: var(--jde-verde-line);    color: var(--jde-verde-700); }
.jd-badge-rejected   { background: var(--jde-vermelho-bg); border-color: var(--jde-vermelho-line); color: var(--jde-vermelho); }
.jd-badge-cancelled  { background: #F1ECE4; border-color: var(--jde-line); color: var(--jde-texto-suave); }
.jd-badge-refunded   { background: var(--jde-azul-bg);     border-color: var(--jde-azul-line);     color: var(--jde-azul); }
.jd-badge-neutral    { background: #F1ECE4; border-color: var(--jde-line); color: var(--jde-texto-suave); }

/* =====================================================================
   Tabelas — .jd-table
   ===================================================================== */
.jd-table-wrap { overflow-x: auto; border-radius: var(--jde-radius); }
.jd-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.jd-table th, .jd-table td { padding: 10px 10px; border-bottom: 1px solid var(--jde-line); text-align: left; vertical-align: middle; }
.jd-table th {
  color: var(--jde-texto-suave);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 800;
  background: var(--jde-bege);
  position: sticky;
  top: 0;
}
.jd-table tbody tr:hover { background: var(--jde-mel-bg); }
.jd-table .jd-code { font-family: 'Consolas', monospace; font-size: 12px; word-break: break-word; color: var(--jde-marrom); }
.jd-table .jd-empty-row td { text-align: center; color: var(--jde-texto-fraco); padding: 24px 10px; }

/* =====================================================================
   Formularios — .jd-form
   ===================================================================== */
.jd-form { display: grid; gap: 12px; }
.jd-form label, .jd-field-label {
  display: grid;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--jde-texto-suave);
}
.jd-form input, .jd-form select, .jd-form textarea,
.jd-input, .jd-select, .jd-textarea {
  width: 100%;
  border: 1px solid var(--jde-line);
  border-radius: 11px;
  padding: 10px 12px;
  background: #fff;
  color: var(--jde-texto);
  font-size: .95rem;
  transition: var(--jde-transition);
}
.jd-form input:focus, .jd-form select:focus, .jd-form textarea:focus,
.jd-input:focus, .jd-select:focus, .jd-textarea:focus {
  outline: none;
  border-color: var(--jde-mel);
  box-shadow: 0 0 0 3px var(--jde-mel-bg);
}
.jd-field-hint { font-weight: 400; font-size: 11px; color: var(--jde-texto-fraco); }

/* =====================================================================
   Alertas — .jd-alert (base ja usada no PDV; reforcado aqui para toda
   a aplicacao herdar o mesmo visual)
   ===================================================================== */
.jd-alert {
  border-radius: var(--jde-radius);
  padding: 12px 14px;
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: 12px;
  border: 1px solid var(--jde-line);
  background: #fff;
  color: var(--jde-texto);
}
.jd-alert.ok, .jd-alert-success   { background: var(--jde-verde-bg);    border-color: var(--jde-verde-line);    color: var(--jde-verde-700); }
.jd-alert.warn, .jd-alert-warning { background: var(--jde-ambar-bg);    border-color: var(--jde-ambar-line);    color: var(--jde-ambar); }
.jd-alert.danger, .jd-alert-danger{ background: var(--jde-vermelho-bg); border-color: var(--jde-vermelho-line); color: var(--jde-vermelho); }
.jd-alert.info, .jd-alert-info    { background: var(--jde-azul-bg);     border-color: var(--jde-azul-line);     color: var(--jde-azul); }

/* =====================================================================
   Estado vazio — .jd-empty
   ===================================================================== */
.jd-empty {
  text-align: center;
  padding: 36px 18px;
  color: var(--jde-texto-fraco);
}
.jd-empty .jd-empty-icon { font-size: 2rem; margin-bottom: 8px; opacity: .6; }
.jd-empty .jd-empty-title { font-weight: 800; color: var(--jde-texto-suave); margin-bottom: 4px; }
.jd-empty .jd-empty-action { margin-top: 12px; }

/* =====================================================================
   Utilitarios de status para telas financeiras (PratikCard / Payment Core)
   ===================================================================== */
.jd-env-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 900; }
.jd-env-badge.sandbox    { background: var(--jde-azul-bg); border: 1px solid var(--jde-azul-line); color: var(--jde-azul); }
.jd-env-badge.production { background: var(--jde-vermelho-bg); border: 1px solid var(--jde-vermelho-line); color: var(--jde-vermelho); }
.jd-token-chip { font-family: 'Consolas', monospace; font-size: 12px; background: var(--jde-bege); border: 1px solid var(--jde-line); border-radius: 8px; padding: 2px 8px; color: var(--jde-marrom); }

/* =====================================================================
   Scroll de tabela mais discreto
   ===================================================================== */
.jd-table-wrap::-webkit-scrollbar { height: 8px; }
.jd-table-wrap::-webkit-scrollbar-thumb { background: var(--jde-line); border-radius: 8px; }

@media (max-width: 680px) {
  .jd-page-header { align-items: flex-start; }
  .jd-kpi .jd-kpi-value { font-size: 1.5rem; }
}

/* =====================================================================
   Biblioteca "tz-" — linguagem Tesla-minimalista da Central da Loja
   (redesign 2026-07). Cards com sub-cards, numeros grandes, superficie
   limpa. Compartilhada por todas as views redesenhadas da loja.
   ===================================================================== */
:root{
  --tz-bg:#F7F3EA; --tz-card:#FFFFFF; --tz-sub:#FAF6EE;
  --tz-line:#E9DFCC; --tz-line-soft:#F1EADD;
  --tz-text:#241B12; --tz-muted:#7A6A57; --tz-faint:#A6957F;
  --tz-green:#2F6B3E; --tz-green-2:#1F4728;
  --tz-gold:#C7902F; --tz-gold-2:#97691E;
  --tz-red:#B3382A; --tz-red-bg:#FBEDEA;
  --tz-radius:22px; --tz-radius-sub:16px;
}
body.tz-page{margin:0!important;background:var(--tz-bg)!important;color:var(--tz-text)!important;-webkit-font-smoothing:antialiased}
.tz-wrap{width:min(1280px,calc(100% - 32px));margin:0 auto;padding:22px 0 56px}
@media (prefers-reduced-motion: no-preference){
  .tz-in{opacity:0;transform:translateY(10px);animation:tzIn .5s ease forwards}
  .tz-in:nth-child(2){animation-delay:.05s}
  .tz-in:nth-child(3){animation-delay:.1s}
  .tz-in:nth-child(4){animation-delay:.15s}
  .tz-in:nth-child(5){animation-delay:.2s}
  @keyframes tzIn{to{opacity:1;transform:none}}
}
.tz-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.tz-top h1{margin:0;font-size:1.35rem;font-weight:800;letter-spacing:-.03em}
.tz-top .tz-top-sub{margin:3px 0 0;font-size:.74rem;font-weight:600;color:var(--tz-muted)}
.tz-top-actions{display:flex;gap:8px;flex-wrap:wrap}
.tz-card{background:var(--tz-card);border:1px solid var(--tz-line);border-radius:var(--tz-radius);overflow:hidden}
.tz-card-pad{padding:22px}
.tz-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.tz-card-head h3{margin:0;font-size:.98rem;font-weight:800;letter-spacing:-.01em}
.tz-link{font-size:.72rem;font-weight:800;color:var(--tz-green);white-space:nowrap;text-decoration:none;transition:opacity .15s ease}
.tz-link:hover{opacity:.7;color:var(--tz-green)}
.tz-sub-card{background:var(--tz-sub);border:1px solid var(--tz-line-soft);border-radius:var(--tz-radius-sub);padding:16px;transition:border-color .2s ease, transform .2s ease}
a.tz-sub-card{text-decoration:none;color:inherit;display:block}
a.tz-sub-card:hover{border-color:var(--tz-gold);transform:translateY(-2px)}
.tz-eyebrow{display:block;font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--tz-faint)}
.tz-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 22px;border-radius:14px;font-size:.84rem;font-weight:800;border:1px solid var(--tz-line);background:#fff;color:var(--tz-text);cursor:pointer;text-decoration:none;transition:all .2s ease}
.tz-btn:hover{transform:translateY(-1px);border-color:var(--tz-gold);color:var(--tz-text)}
.tz-btn.primary{background:var(--tz-green);border-color:var(--tz-green);color:#fff}
.tz-btn.primary:hover{background:var(--tz-green-2);border-color:var(--tz-green-2);color:#fff}
.tz-btn.gold{background:var(--tz-gold);border-color:var(--tz-gold);color:#fff}
.tz-btn.gold:hover{background:var(--tz-gold-2);color:#fff}
.tz-btn.danger{background:var(--tz-red);border-color:var(--tz-red);color:#fff}
.tz-btn.danger:hover{filter:brightness(1.08);color:#fff}
.tz-btn.sm{min-height:36px;padding:7px 14px;font-size:.74rem;border-radius:11px}
.tz-quick{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.tz-quick a{display:inline-flex;align-items:center;min-height:42px;padding:9px 18px;border-radius:999px;background:#fff;border:1px solid var(--tz-line);font-size:.78rem;font-weight:800;color:var(--tz-text);text-decoration:none;transition:all .2s ease}
.tz-quick a:hover{border-color:var(--tz-green);color:var(--tz-green);transform:translateY(-1px)}
.tz-quick a.destak{background:var(--tz-green);border-color:var(--tz-green);color:#fff}
.tz-quick a.gold{background:var(--tz-gold);border-color:var(--tz-gold);color:#fff}
.tz-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tz-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tz-grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tz-big{padding:20px}
.tz-big .valor{display:block;margin:10px 0 2px;font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;letter-spacing:-.045em;line-height:1}
.tz-big .meta{display:flex;gap:14px;margin-top:10px;font-size:.7rem;color:var(--tz-muted);font-weight:600;flex-wrap:wrap}
.tz-big .meta b{color:var(--tz-text)}
.tz-big.venda .valor,.tz-big.ok .valor{color:var(--tz-green)}
.tz-big.compra .valor,.tz-big.gold .valor{color:var(--tz-gold-2)}
.tz-big.alerta .valor{color:var(--tz-red)}
.tz-mini{background:var(--tz-sub);border:1px solid var(--tz-line-soft);border-radius:12px;padding:12px}
.tz-mini b{display:block;margin-top:5px;font-size:.92rem;font-weight:800;letter-spacing:-.01em}
.tz-table-wrap{overflow-x:auto;border-radius:var(--tz-radius-sub)}
.tz-table{width:100%;border-collapse:collapse;font-size:.8rem}
.tz-table th{text-align:left;padding:10px 12px;font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--tz-faint);border-bottom:1px solid var(--tz-line)}
.tz-table td{padding:12px;border-bottom:1px solid var(--tz-line-soft);font-weight:600}
.tz-table tbody tr{transition:background .15s ease}
.tz-table tbody tr:hover{background:var(--tz-sub)}
.tz-table tbody tr:last-child td{border-bottom:0}
.tz-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:.64rem;font-weight:800}
.tz-badge.ok{background:rgba(47,107,62,.1);color:var(--tz-green)}
.tz-badge.warn{background:rgba(199,144,47,.13);color:var(--tz-gold-2)}
.tz-badge.danger{background:var(--tz-red-bg);color:var(--tz-red)}
.tz-badge.neutro{background:#F1ECE4;color:var(--tz-muted)}
.tz-form{display:grid;gap:12px}
.tz-form label{display:grid;gap:5px;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--tz-muted)}
.tz-input,.tz-select,.tz-textarea{width:100%;border:1px solid var(--tz-line);background:#fff;border-radius:12px;min-height:44px;padding:10px 13px;font-size:.85rem;font-weight:600;color:var(--tz-text);outline:none;transition:border-color .15s ease, box-shadow .15s ease;font-family:inherit}
.tz-input:focus,.tz-select:focus,.tz-textarea:focus{border-color:var(--tz-gold);box-shadow:0 0 0 4px rgba(199,144,47,.12)}
.tz-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 2px;border-bottom:1px solid var(--tz-line-soft);text-decoration:none;color:inherit;border-radius:8px;transition:background .15s ease}
.tz-row:last-child{border-bottom:0}
.tz-row:hover{background:#fff}
.tz-hora{font-size:.66rem;font-weight:800;color:var(--tz-faint)}
.tz-row-main strong{display:block;font-size:.78rem;font-weight:700;line-height:1.25}
.tz-row-main span{display:block;margin-top:2px;font-size:.66rem;color:var(--tz-muted);font-weight:600}
.tz-row-val{font-size:.8rem;font-weight:800;white-space:nowrap}
.tz-tag{display:inline-flex;padding:2px 8px;border-radius:999px;background:rgba(47,107,62,.08);color:var(--tz-green);font-size:.6rem;font-weight:800;margin-left:6px;vertical-align:middle}
.tz-pend{padding:11px 12px;border-radius:12px;border:1px solid var(--tz-line-soft);background:var(--tz-sub);margin-bottom:8px;border-left:3px solid var(--tz-gold)}
.tz-pend.danger{border-left-color:var(--tz-red);background:var(--tz-red-bg)}
.tz-pend.ok{border-left-color:var(--tz-green)}
.tz-pend strong{display:block;font-size:.76rem;font-weight:800}
.tz-pend span{display:block;margin-top:2px;font-size:.68rem;color:var(--tz-muted);line-height:1.4}
.tz-empty{padding:18px 12px;border-radius:12px;background:var(--tz-sub);border:1px dashed var(--tz-line);text-align:center}
.tz-empty strong{display:block;font-size:.76rem;font-weight:800}
.tz-empty span{display:block;margin-top:3px;font-size:.68rem;color:var(--tz-muted)}
.tz-empty a{display:inline-flex;margin-top:8px;font-size:.68rem;font-weight:800;color:var(--tz-green);text-decoration:none}
.tz-bar{height:6px;border-radius:99px;background:var(--tz-line-soft);overflow:hidden}
.tz-bar i{display:block;height:100%;border-radius:99px;background:var(--tz-green)}
.tz-bar.gold i{background:var(--tz-gold)}
@media (max-width:1040px){.tz-grid-4{grid-template-columns:1fr 1fr}}
@media (max-width:760px){
  .tz-grid-2,.tz-grid-3{grid-template-columns:1fr}
  .tz-grid-4{grid-template-columns:1fr 1fr}
  .tz-card-pad{padding:16px}
  .tz-quick{display:grid;grid-template-columns:1fr 1fr}
  .tz-quick a{justify-content:center}
}
