/* ═══════════════════════════════════════════════════════════════════
   FRONT-END VITAL VIDA — padroes.css
   ═══════════════════════════════════════════════════════════════════

   Base CSS do projeto. Mobile-first.
   Cresce conforme novas telas vão sendo adicionadas.

   Ordem das seções:
     1. Tokens (:root)
     2. Reset
     3. Tipografia base
     4. Componentes — Topbar
     5. Componentes — Card
     6. Componentes — Form (inputs, labels)
     7. Componentes — Botões
     8. Layout — Login
     9. Layout — Home placeholder
    10. Responsivo (min-width media queries)
   ═══════════════════════════════════════════════════════════════════ */


/* ────────────────────────────────────────────────────────
   1. TOKENS — V2 (Jun/2026)
   Identidade: verde-clínica (o 💚 do bot) + dourado do logo.
   ──────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Fundo & superfícies — claro neutro com leve frescor verde */
  --bg:           #f5f8f6;
  --surface:      #ffffff;
  --surface-2:    #edf3ef;
  --line:         #dfe8e2;
  --line-strong:  #c3d2c8;

  /* Texto (4 níveis) — verde-carvão */
  --ink:          #13201a;
  --ink-2:        #3f5147;
  --ink-3:        #6c7f74;
  --ink-faint:    #9baba1;

  /* Acento principal — verde-clínica */
  --accent:        #0e8a5f;
  --accent-strong: #0b6e4c;
  --accent-deep:   #0c2f23;   /* topbar, blocos de destaque */
  --accent-soft:   rgba(14, 138, 95, 0.10);
  --grad-accent:   linear-gradient(135deg, #11996a 0%, #0b6e4c 100%);

  /* Acento secundário — dourado do logo */
  --gold:         #c79a3c;
  --gold-soft:    rgba(199, 154, 60, 0.14);

  /* Semânticas — mais vivas */
  --ok:           #15803d;
  --ok-soft:      rgba(21, 128, 61, 0.10);
  --erro:         #c0392b;
  --erro-soft:    rgba(192, 57, 43, 0.10);
  --info:         #1d6fb8;
  --info-soft:    rgba(29, 111, 184, 0.10);
  --alerta:       #b45309;
  --alerta-soft:  rgba(180, 83, 9, 0.12);

  /* Tipografia — Sora (títulos) + Inter (texto) + JetBrains Mono (dados) */
  --font-display: 'Sora', 'Inter', -apple-system, system-ui, sans-serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Raios */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 14px;

  /* Gaps */
  --gap-xs:  4px;
  --gap-sm:  8px;
  --gap:     16px;
  --gap-lg:  24px;
  --gap-xl:  32px;

  /* Sombras */
  --shadow-soft:   0 1px 2px rgba(19,32,26,0.04), 0 4px 14px rgba(19,32,26,0.06);
  --shadow-strong: 0 2px 4px rgba(19,32,26,0.06), 0 14px 28px rgba(19,32,26,0.10);

  /* Anel de foco (teclado) */
  --focus-ring: 0 0 0 3px rgba(14,138,95,0.28);
}


/* ────────────────────────────────────────────────────────
   2. RESET
   ──────────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;

  /* Fade-in suave depois que os fetches criticos carregam.
     JS adiciona a classe 'pronto' quando o conteudo da pagina esta pronto.
     Failsafe: <script inline> em cada pagina libera apos 1500ms se algo falhar. */
  opacity: 0;
  transition: opacity 220ms ease-out;
}

body.pronto {
  opacity: 1;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

code, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: var(--r-sm);
}


/* ────────────────────────────────────────────────────────
   3. TIPOGRAFIA BASE
   ──────────────────────────────────────────────────────── */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

h1 { font-size: 28px; letter-spacing: -0.02em; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
h4 { font-size: 14px; }

p {
  color: var(--ink-2);
}


/* ────────────────────────────────────────────────────────
   4. TOPBAR
   ──────────────────────────────────────────────────────── */

.topbar {
  background: var(--accent-deep);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Filete verde de marca — brilho tecnológico discreto */
@keyframes topbar-varredura {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
.topbar::after {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(17,153,106,0.10) 0%, #11996a 35%,
    #5fd9a8 50%, #11996a 65%, rgba(17,153,106,0.10) 100%);
  background-size: 200% 100%;
  animation: topbar-varredura 7s linear infinite;
}

.topbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--gap);
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
}

.brand-icon {
  /* chip branco atrás da logo: cores originais visíveis no topbar escuro */
  width: 30px;
  height: 30px;
  padding: 4px;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 9px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

.brand-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #ffffff;
}

.brand-name span {
  color: #5fd9a8;   /* verde-menta da família da marca */
  font-weight: 600;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--gap);
}

/* Marca em chip branco + status (V2) */
.brand-chip {
  width: 34px; height: 34px;
  background: #ffffff;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  flex: 0 0 34px;
}
.brand-chip .brand-icon {
  width: 24px; height: 24px;
  filter: none !important;
  background: transparent;
  padding: 0;
  box-shadow: none;
  border-radius: 0;
}
.ia-pill {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 10px;
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  color: #d9f3e7;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: 4px 11px;
  text-transform: uppercase;
}
.ia-pill i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #2ee6a8;
  box-shadow: 0 0 8px rgba(46,230,168,.9);
  animation: v2-pulso 1.6s ease-in-out infinite;
}
@media (max-width: 520px) { .ia-pill { display: none; } }

.topbar .btn-ghost {
  color: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.25);
}

.topbar .btn-ghost:hover {
  background: rgba(255,255,255,0.10);
  color: #ffffff;
}


/* ────────────────────────────────────────────────────────
   5. CARD
   ──────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-soft);
  padding: var(--gap);
}

.card-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--gap-xs);
}

.card-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: var(--gap-sm);
}

.card-text {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
}


/* ────────────────────────────────────────────────────────
   6. FORM
   ──────────────────────────────────────────────────────── */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.field-input {
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  padding: 0 14px;
  height: 44px;
  font-size: 16px;          /* 16px evita zoom automático no iOS */
  color: var(--ink);
  transition: border-color 150ms, box-shadow 150ms;
}

.field-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.field-input::placeholder {
  color: var(--ink-3);
}


/* ────────────────────────────────────────────────────────
   7. BOTÕES
   ──────────────────────────────────────────────────────── */

.btn-primary {
  background: var(--grad-accent);
  color: #ffffff;
  border-radius: var(--r);
  font-weight: 600;
  font-size: 14px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 20px;
  box-shadow: 0 1px 2px rgba(11,110,76,0.25);
  transition: filter 150ms, transform 150ms, box-shadow 150ms;
}

.btn-primary:hover {
  filter: brightness(1.07);
  box-shadow: 0 3px 10px rgba(11,110,76,0.30);
}

.btn-primary:active {
  transform: scale(0.98);
}

.btn-primary:focus-visible,
.btn-ghost:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn-ghost {
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  font-weight: 500;
  font-size: 13px;
  min-height: 36px;
  padding: 0 14px;
  transition: background 150ms, color 150ms;
}

.btn-ghost:hover {
  background: var(--surface-2);
  color: var(--ink);
}


/* ────────────────────────────────────────────────────────
   8. LAYOUT — LOGIN
   ──────────────────────────────────────────────────────── */

.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--gap);
}

.login-shell {
  width: 100%;
  max-width: 440px;
}

.login-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-strong);
  padding: 32px 28px 20px;
}

.login-header {
  text-align: center;
  margin-bottom: 28px;
}

.login-title {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: var(--gap-xs);
}

.login-subtitle {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.login-submit {
  margin-top: var(--gap-sm);
  width: 100%;
}

.login-erro {
  background: var(--erro-soft);
  color: var(--erro);
  font-size: 13px;
  padding: 10px 14px;
  border-radius: var(--r);
  border-left: 3px solid var(--erro);
}

.login-footer {
  border-top: 1px solid var(--line);
  margin-top: 24px;
  padding-top: 16px;
  display: flex;
  justify-content: center;
}

.login-mark {
  width: 44px;
  height: 44px;
  opacity: 0.6;
}


/* ────────────────────────────────────────────────────────
   9. LAYOUT — HOME UNIVERSAL
   ──────────────────────────────────────────────────────── */

.page-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--gap-lg) var(--gap);
}

/* ── Saudação ───────────────────────────────────────── */

.saudacao {
  margin-bottom: var(--gap-lg);
}

.saudacao-titulo {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: var(--gap-xs);
}

.saudacao-subtitulo {
  color: var(--ink-3);
  font-size: 15px;
}

/* ── Busca universal ─────────────────────────────────── */

.busca-shell {
  margin-bottom: var(--gap-xl);
}

.busca-caixa {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
  display: flex;
  align-items: center;
  padding: 0 14px;
  transition: border-color 150ms, box-shadow 150ms;
}

.busca-caixa:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-soft);
}

.busca-icone {
  width: 18px;
  height: 18px;
  color: var(--ink-3);
  flex-shrink: 0;
}

.busca-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  height: 52px;
  padding: 0 12px;
  font-size: 16px;
  color: var(--ink);
}

.busca-input::placeholder {
  color: var(--ink-3);
}

.busca-dica {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: var(--gap-sm);
  text-align: center;
}

/* ── 4 cards de números ──────────────────────────────── */

.numeros-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  margin-bottom: var(--gap-xl);
}

.numero-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-soft);
  padding: var(--gap);
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 150ms, box-shadow 150ms, border-color 150ms;
  position: relative;
}

.numero-card:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-strong);
  border-color: var(--line-strong);
}

.numero-card.numero-card-alerta {
  border-left: 3px solid var(--erro);
}

/* Icone no canto superior direito do card */
.numero-card-icone {
  position: absolute;
  top: var(--gap);
  right: var(--gap);
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.numero-card-icone svg {
  width: 18px;
  height: 18px;
}

.numero-card-icone-erro {
  background: var(--erro-soft);
  color: var(--erro);
}

.numero-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
  padding-right: 40px;  /* espaço pro icone */
}

/* Numero + sufixo "hoje" na mesma linha */
.numero-valor-linha {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}

.numero-valor {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
}

.numero-valor-sufixo {
  font-size: 13px;
  color: var(--ink-3);
  font-weight: 400;
}

.numero-comparativo {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
}

.numero-card-alerta .numero-comparativo {
  color: var(--erro);
  font-weight: 500;
}

/* ── Grade de gráficos ───────────────────────────────── */

.graficos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  margin-bottom: var(--gap-xl);
}

.grafico-card {
  padding: var(--gap-lg);
}

.grafico-wrap {
  position: relative;
  height: 280px;
  margin-top: var(--gap);
}

.grafico-vazio {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--ink-3);
  font-size: 13px;
  padding: var(--gap);
}

/* Garante que [hidden] vence o display: flex acima */
.grafico-vazio[hidden] {
  display: none !important;
}

/* ── Ferramentas ─────────────────────────────────────── */

.ferramentas {
  margin-bottom: var(--gap-xl);
}

.ferramentas-titulo {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: var(--gap);
  color: var(--ink-2);
}

.ferramentas-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}

.ferramenta-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-soft);
  padding: var(--gap-lg);
  text-decoration: none;
  color: inherit;
  display: flex;              /* card vira coluna: o .ferramenta-stats */
  flex-direction: column;     /* gruda embaixo via margin-top:auto, e  */
  transition: transform 150ms, box-shadow 150ms, border-color 150ms;
}                             /* o grid já estica todos pra mesma altura */

.ferramenta-card:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-strong);
  border-color: var(--accent);
}

.ferramenta-card-vazia {
  border-style: dashed;
  border-color: var(--line-strong);
  background: transparent;
  box-shadow: none;
  opacity: 0.7;
  cursor: default;
}

.ferramenta-card-vazia:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--line-strong);
}

.ferramenta-icone {
  width: 32px;
  height: 32px;
  color: var(--accent);
  margin-bottom: var(--gap);
}

.ferramenta-icone svg {
  width: 100%;
  height: 100%;
}

.ferramenta-titulo {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: var(--gap-xs);
  color: var(--ink);
}

.ferramenta-desc {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
}

.ferramenta-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--gap-sm);
}

.ferramenta-stats {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  margin-top: auto;            /* gruda no rodapé do card */
  padding-top: var(--gap);
  border-top: 1px solid var(--line);
}
/* o conteúdo acima dos stats precisa de respiro fixo */
.ferramenta-desc { margin-bottom: var(--gap); }

/* ── Sub-telas (cards menores, na página do painel) ──── */

.subtelas-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-sm);
}

.subtela-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-soft);
  padding: var(--gap);
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 150ms, box-shadow 150ms, border-color 150ms;
}

.subtela-card:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-strong);
  border-color: var(--line-strong);
}

.subtela-card-icone {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--gap-sm);
}

.subtela-card-icone svg {
  width: 20px;
  height: 20px;
}

.subtela-card-icone-accent {
  background: var(--accent-soft);
  color: var(--accent);
}

.subtela-card-icone-info {
  background: var(--info-soft);
  color: var(--info);
}

.subtela-card-icone-erro {
  background: var(--erro-soft);
  color: var(--erro);
}

.subtela-card-titulo {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}

.subtela-card-desc {
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.4;
}


/* ────────────────────────────────────────────────────────
   10. RESPONSIVO — desktop e tablet
   ──────────────────────────────────────────────────────── */

@media (min-width: 600px) {

  .numeros-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ferramentas-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .subtelas-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {

  body { font-size: 14px; }

  .topbar-inner {
    height: 64px;
  }

  .brand-icon {
    width: 28px;
    height: 28px;
  }

  .login-card {
    padding: 40px 36px 24px;
  }

  .login-title {
    font-size: 28px;
  }

  .saudacao-titulo {
    font-size: 36px;
  }

  .graficos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {

  .numeros-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .saudacao-titulo {
    font-size: 40px;
  }

  .graficos-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .ferramentas-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .subtelas-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ════════════════════════════════════════════════════════
   12. CARD GRANDE DE HISTÓRICO (na home do painel)
   ════════════════════════════════════════════════════════ */

.historico-section {
  margin-bottom: var(--gap-xl);
}

.historico-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-soft);
  padding: var(--gap-lg);
  text-decoration: none;
  color: inherit;
  transition: transform 150ms, box-shadow 150ms, border-color 150ms;
}

.historico-card:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-strong);
  border-color: var(--accent);
}

.historico-header {
  display: flex;
  align-items: flex-start;
  gap: var(--gap);
  margin-bottom: var(--gap-sm);
}

.historico-icone {
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.historico-icone svg {
  width: 22px;
  height: 22px;
}

.historico-titulo-bloco {
  flex: 1;
  min-width: 0;
}

.historico-titulo {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 2px;
}

.historico-desc {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
  margin-bottom: var(--gap);
}

.historico-preview {
  background: var(--surface-2);
  border-radius: var(--r-sm);
  padding: var(--gap-sm);
  margin-bottom: var(--gap-sm);
  min-height: 60px;
}

.historico-preview-loading,
.historico-preview-vazio {
  color: var(--ink-3);
  font-size: 12px;
  text-align: center;
  padding: var(--gap-sm);
}

.historico-preview-item {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  padding: 6px 4px;
  border-bottom: 1px solid var(--line);
}

.historico-preview-item:last-child {
  border-bottom: none;
}

.historico-preview-icone {
  width: 26px;
  height: 26px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--accent-soft);
  color: var(--accent);
}

.historico-preview-icone svg {
  width: 14px;
  height: 14px;
}

.historico-preview-icone-erro          { background: var(--erro-soft); color: var(--erro); }
.historico-preview-icone-transferencia { background: var(--info-soft); color: var(--info); }
.historico-preview-icone-desmarcacao   { background: var(--info-soft); color: var(--info); }

.historico-preview-conteudo {
  flex: 1;
  min-width: 0;
}

.historico-preview-desc {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.historico-preview-quando {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
  margin-top: 2px;
}

.historico-cta {
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  text-align: right;
}

/* ════════════════════════════════════════════════════════
   13. TIMELINE (sub-tela de histórico)
   ════════════════════════════════════════════════════════ */

.timeline {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

.timeline-item {
  display: flex;
  gap: var(--gap);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-soft);
  padding: var(--gap);
}

.timeline-item-erro {
  border-left: 3px solid var(--erro);
}

.timeline-item-reagendamento {
  border-left: 3px solid var(--accent);
}

.timeline-icone {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.timeline-icone svg {
  width: 18px;
  height: 18px;
}

.timeline-icone-erro          { background: var(--erro-soft); color: var(--erro); }
.timeline-icone-transferencia { background: var(--info-soft); color: var(--info); }
.timeline-icone-desmarcacao   { background: var(--info-soft); color: var(--info); }

.timeline-conteudo {
  flex: 1;
  min-width: 0;
}

.timeline-titulo {
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 4px;
  line-height: 1.4;
}

.timeline-detalhes {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
  margin-bottom: 6px;
}

.timeline-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  text-transform: uppercase;
}

/* ════════════════════════════════════════════════════════
   11. SUB-TELAS DO PAINEL (Agendamentos, Desmarcações, etc.)
   ════════════════════════════════════════════════════════ */

/* ── Header da sub-tela (breadcrumb + título) ─────────── */

.subtela-header {
  margin-bottom: var(--gap-lg);
}

.breadcrumb {
  margin-bottom: var(--gap-sm);
}

/* .breadcrumb-link e .subtela-titulo: specs movidas pra seção 16
   (Tela padrão) — aqui ficam só os aliases lá definidos. */

.subtela-contagem {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
}

/* ── Barra de filtros ─────────────────────────────────── */

.filtros-bar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-soft);
  padding: var(--gap);
  margin-bottom: var(--gap);
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

.filtros-grupo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filtros-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.filtros-pillgroup {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filtro-pill {
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 150ms, border-color 150ms, color 150ms;
  min-height: 32px;
}

.filtro-pill:hover {
  background: var(--surface-2);
}

.filtro-pill.ativo {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

.filtros-select {
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  min-height: 36px;
  padding: 0 32px 0 12px;
  font-size: 13px;
  color: var(--ink);
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a7570' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  cursor: pointer;
}

.filtros-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.filtros-reset {
  background: transparent;
  border: none;
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  align-self: flex-start;
  min-height: 32px;
  padding: 0 6px;
}

.filtros-reset:hover {
  text-decoration: underline;
}

/* ── Lista — Mobile (cards verticais) ─────────────────── */

.lista-items {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

.lista-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-soft);
  padding: var(--gap);
  cursor: pointer;
  transition: border-color 150ms, transform 150ms;
}

.lista-item:hover {
  border-color: var(--line-strong);
  transform: translateY(-1px);
}

.lista-item-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--gap-sm);
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.lista-item-titulo {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.lista-item-quando {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
}

.lista-item-meta {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
}

.lista-item-meta strong {
  font-weight: 500;
  color: var(--ink);
}

.lista-item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--gap-sm);
}

/* ── Tags semânticas ──────────────────────────────────── */

.tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
}

.tag-ok       { background: var(--ok-soft);     color: var(--ok); }
.tag-erro     { background: var(--erro-soft);   color: var(--erro); }
.tag-info     { background: var(--info-soft);   color: var(--info); }
.tag-accent   { background: var(--accent-soft); color: var(--accent); }
.tag-neutra   { background: var(--surface-2);   color: var(--ink-3); }

/* ── Lista vazia ─────────────────────────────────────── */

.lista-vazia {
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r);
  padding: var(--gap-xl);
  text-align: center;
  color: var(--ink-3);
}

.lista-vazia-titulo {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: var(--gap-xs);
}

.lista-vazia-desc {
  font-size: 13px;
  color: var(--ink-3);
}

/* ── Erros: grupo por tipo ────────────────────────────── */

.erro-grupo {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--erro);
  border-radius: var(--r);
  box-shadow: var(--shadow-soft);
  margin-bottom: var(--gap-sm);
}

.erro-grupo-header {
  padding: var(--gap);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap);
}

.erro-grupo-info {
  flex: 1;
  min-width: 0;
}

.erro-grupo-tipo {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--erro);
  word-break: break-word;
  margin-bottom: 4px;
}

.erro-grupo-msg {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.4;
}

.erro-grupo-stats {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  text-align: right;
  flex-shrink: 0;
}

.erro-grupo-contagem {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1;
  margin-bottom: 4px;
}

.erro-grupo-ocorrencias {
  border-top: 1px solid var(--line);
  padding: var(--gap-sm) var(--gap);
  display: none;
}

.erro-grupo.expandido .erro-grupo-ocorrencias {
  display: block;
}

.erro-ocorrencia {
  padding: var(--gap-sm) 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.erro-ocorrencia:last-child {
  border-bottom: none;
}

.erro-ocorrencia-quando {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  margin-bottom: 4px;
}

.erro-ocorrencia-contexto {
  color: var(--ink-2);
  word-break: break-word;
}

/* ── Tabela (desktop apenas) ──────────────────────────── */

.tabela-wrap {
  display: none;
}

/* ── Responsivo das sub-telas ─────────────────────────── */

@media (min-width: 600px) {
  .filtros-bar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
  }
  .filtros-grupo {
    flex: 1;
    min-width: 140px;
  }

  /* Variante: cada grupo em sua própria linha (pra quando tem muitos botões num grupo).
     Usada na sub-tela de Histórico onde "Mostrar" tem 6 botões que não cabem na mesma linha. */
  .filtros-bar.filtros-bar-empilhada {
    flex-direction: column;
    align-items: stretch;
  }
  .filtros-bar.filtros-bar-empilhada .filtros-grupo {
    flex-basis: 100%;
    min-width: 0;
  }
}

@media (min-width: 900px) {
  /* Desktop: usa tabela em vez de cards */
  .lista-items {
    display: none;
  }

  /* Exceção: .lista-items-sempre mantém cards visíveis no desktop também */
  /* (usado em sub-telas onde card é mais legível que tabela — ex: reagendamentos antes→depois) */
  .lista-items.lista-items-sempre {
    display: flex;
  }

  .tabela-wrap {
    display: block;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
  }

  .tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
  }

  .tabela thead {
    background: var(--surface-2);
  }

  .tabela th {
    text-align: left;
    padding: 12px 14px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    white-space: nowrap;
    border-bottom: 1px solid var(--line);
  }

  .tabela td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    color: var(--ink-2);
    vertical-align: top;
  }

  .tabela tbody tr {
    cursor: pointer;
    transition: background 150ms;
  }

  .tabela tbody tr:hover {
    background: var(--surface-2);
  }

  .tabela tbody tr:last-child td {
    border-bottom: none;
  }

  .tabela-mono {
    font-family: var(--font-mono);
    color: var(--ink-2);
  }

  .tabela-paciente {
    color: var(--ink);
    font-weight: 500;
  }
}


/* ────────────────────────────────────────────────────────
   14. V2 — DESIGN SYSTEM (Jun/2026)
   Primitivas novas compartilhadas entre as telas.
   ──────────────────────────────────────────────────────── */

/* ── Animações ─────────────────────────────────────────── */
@keyframes v2-subir {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes v2-pop {
  0%   { transform: scale(0.96); opacity: 0; }
  100% { transform: scale(1);    opacity: 1; }
}
@keyframes v2-brilho {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
@keyframes v2-pulso {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

.v2-entra      { animation: v2-subir 280ms ease-out both; }
.v2-entra-pop  { animation: v2-pop 220ms ease-out both; }

/* ── Skeleton (carregando) ─────────────────────────────── */
.skel {
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--surface-2) 25%, #e4ece7 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: v2-brilho 1.2s linear infinite;
  color: transparent !important;
  pointer-events: none;
  min-height: 14px;
}

/* ── Chips (o que o bot captou, filtros) ───────────────── */
.v2-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--grad-accent);
  border-radius: 999px;
  padding: 6px 14px 6px 10px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(11,110,76,0.30);
}
.v2-chip .chip-rotulo {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.95);
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
  padding: 2px 8px;
}

/* ── Badges semânticas ─────────────────────────────────── */
.v2-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
}
.v2-badge.ok     { color: #fff; background: linear-gradient(135deg, #16a34a, #15803d); }
.v2-badge.alerta { color: #fff; background: linear-gradient(135deg, #d97706, #b45309); }
.v2-badge.erro   { color: #fff; background: linear-gradient(135deg, #dc2626, #b91c1c); }
.v2-badge.info   { color: #fff; background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.v2-badge.gold   { color: #3d2c08; background: linear-gradient(135deg, #e9c265, #c79a3c); }
.v2-badge.suave-ok     { color: var(--ok);     background: rgba(21,128,61,0.14); }
.v2-badge.suave-alerta { color: var(--alerta); background: rgba(180,83,9,0.16); }
.v2-badge.suave-erro   { color: var(--erro);   background: rgba(192,57,43,0.14); }

/* ── Medidor de certeza (alta/média/baixa) ─────────────── */
.v2-certeza { display: inline-flex; align-items: center; gap: 8px; }
.v2-certeza .barras { display: inline-flex; gap: 3px; align-items: flex-end; }
.v2-certeza .barras i {
  width: 5px; border-radius: 2px;
  background: var(--line-strong);
  transition: background 200ms;
}
.v2-certeza .barras i:nth-child(1) { height: 7px; }
.v2-certeza .barras i:nth-child(2) { height: 11px; }
.v2-certeza .barras i:nth-child(3) { height: 15px; }
.v2-certeza.alta  .barras i { background: var(--ok); }
.v2-certeza.media .barras i:nth-child(-n+2) { background: var(--alerta); }
.v2-certeza.baixa .barras i:nth-child(1) { background: var(--erro); }
.v2-certeza .rotulo { font-size: 12px; font-weight: 600; }
.v2-certeza.alta  .rotulo { color: var(--ok); }
.v2-certeza.media .rotulo { color: var(--alerta); }
.v2-certeza.baixa .rotulo { color: var(--erro); }

/* ── Mock de conversa WhatsApp (kit completo) ──────────── */
.wa-phone {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(19,32,26,0.18), 0 2px 6px rgba(19,32,26,0.10);
  border: 1px solid rgba(19,32,26,0.08);
  background: #efe7dd;
  display: flex;
  flex-direction: column;
}
.wa-header {
  background: #008069;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
}
.wa-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #0c2f23;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex: 0 0 34px;
}
.wa-header .wa-nome { font-weight: 600; font-size: 14px; line-height: 1.15; }
.wa-header .wa-status { font-size: 11px; opacity: .85; }
.wa-body {
  flex: 1;
  padding: 14px 12px 16px;
  background:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,0.018) 0 2px, transparent 2px),
    radial-gradient(circle at 70% 60%, rgba(0,0,0,0.018) 0 2px, transparent 2px),
    #efe7dd;
  background-size: 90px 90px, 110px 110px, auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wa-dia {
  align-self: center;
  background: #fff;
  color: #54656f;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 8px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.08);
}
.wa-sys {
  align-self: center;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 10px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.08);
  max-width: 92%;
  line-height: 1.4;
  background: #fdf3cf;
  color: #5c4a12;
}
.wa-sys.verde    { background: #d5f5e5; color: #0b5c3f; }
.wa-sys.vermelho { background: #fde2de; color: #8a2317; }
.wa-sys.ambar    { background: #fdeccf; color: #7a4408; }
.wa-msg {
  position: relative;
  max-width: 82%;
  border-radius: 10px;
  padding: 7px 9px 8px;
  font-size: 13.5px;
  line-height: 1.42;
  color: #111b21;
  box-shadow: 0 1px 1px rgba(0,0,0,0.10);
  white-space: pre-wrap;
  word-break: break-word;
  animation: v2-subir 260ms ease-out both;
}
.wa-msg .wa-meta {
  float: right;
  margin: 6px -2px -4px 8px;
  font-size: 10px;
  color: #8696a0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  user-select: none;
}
.wa-msg.bot {
  align-self: flex-start;
  background: #ffffff;
  border-top-left-radius: 2px;
}
.wa-msg.bot::before {
  content: '';
  position: absolute;
  left: -7px; top: 0;
  border: 7px solid transparent;
  border-top-color: #ffffff;
  border-right-color: #ffffff;
  border-left-width: 0;
}
.wa-msg.paciente {
  align-self: flex-end;
  background: #d9fdd3;
  border-top-right-radius: 2px;
}
.wa-msg.paciente::before {
  content: '';
  position: absolute;
  right: -7px; top: 0;
  border: 7px solid transparent;
  border-top-color: #d9fdd3;
  border-left-color: #d9fdd3;
  border-right-width: 0;
}
.wa-check { color: #53bdeb; font-size: 11px; letter-spacing: -2px; }
.wa-digitando {
  align-self: flex-start;
  background: #ffffff;
  border-radius: 10px;
  border-top-left-radius: 2px;
  padding: 11px 14px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.10);
  display: inline-flex;
  gap: 4px;
  animation: v2-subir 200ms ease-out both;
}
.wa-digitando i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #9aa7af;
  animation: v2-pulso 1s ease-in-out infinite;
}
.wa-digitando i:nth-child(2) { animation-delay: .18s; }
.wa-digitando i:nth-child(3) { animation-delay: .36s; }

/* compat: classes antigas simples ainda usáveis */
.wa-fundo {
  background: #efe7dd;
  border-radius: var(--r-lg);
  padding: 16px 14px;
}
.wa-bolha {
  background: #ffffff;
  border-radius: 10px;
  border-top-left-radius: 2px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.12);
  padding: 9px 12px;
  max-width: 560px;
  font-size: 13.5px;
  line-height: 1.45;
  color: #111b21;
  white-space: pre-wrap;
  word-break: break-word;
}
.wa-bolha + .wa-bolha { margin-top: 8px; }
.wa-hora {
  display: block;
  text-align: right;
  font-size: 10px;
  color: #8696a0;
  margin-top: 3px;
}

/* ── Faixa informativa leiga ("o que esta tela faz") ───── */
.info-strip {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--r);
  padding: 12px 16px;
  font-size: 13px;
  color: var(--ink-2);
}
.info-strip svg { flex: 0 0 18px; margin-top: 1px; color: var(--gold); }

/* ── Controle segmentado (alternar modos) ──────────────── */
.v2-seg {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.v2-seg button {
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 7px 16px;
  font: 500 13px var(--font-sans);
  color: var(--ink-3);
  transition: background 150ms, color 150ms, box-shadow 150ms;
}
.v2-seg button.ativo {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(19,32,26,0.12);
}
.v2-seg button:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ── Acessibilidade: foco e movimento reduzido ─────────── */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ────────────────────────────────────────────────────────
   15. V2 — MICRO-FEEDBACK (Jun/2026)
   Entradas escalonadas, flash de atualização, status ao vivo,
   estados vazios e carregamento.
   ──────────────────────────────────────────────────────── */

/* Entrada escalonada pra grades/listas/tabelas */
.v2-stagger > * { animation: v2-subir .32s ease-out both; }
.v2-stagger > *:nth-child(1) { animation-delay: .02s; }
.v2-stagger > *:nth-child(2) { animation-delay: .07s; }
.v2-stagger > *:nth-child(3) { animation-delay: .12s; }
.v2-stagger > *:nth-child(4) { animation-delay: .17s; }
.v2-stagger > *:nth-child(5) { animation-delay: .22s; }
.v2-stagger > *:nth-child(6) { animation-delay: .27s; }
.v2-stagger > *:nth-child(n+7) { animation-delay: .32s; }

/* Flash verde quando um valor/linha acabou de atualizar */
@keyframes v2-blink {
  0%   { background-color: rgba(95,217,168,0.40); }
  100% { background-color: transparent; }
}
.v2-atualizou { animation: v2-blink 900ms ease-out; border-radius: 6px; }

/* Selo "ao vivo" (dashboards) */
.v2-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 4px 12px;
}
.v2-live i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 7px rgba(14,138,95,.8);
  animation: v2-pulso 1.6s ease-in-out infinite;
}
/* variante pausada (âmbar, ponto parado) — única spec de "ao vivo" do painel */
.v2-live.pausado {
  color: var(--alerta);
  background: var(--alerta-soft);
}
.v2-live.pausado i {
  background: var(--alerta);
  box-shadow: none;
  animation: none;
}

/* Estado vazio amigável */
.v2-vazio-box {
  text-align: center;
  padding: 34px 18px;
  color: var(--ink-3);
  font-size: 13.5px;
}
.v2-vazio-box svg { width: 34px; height: 34px; color: var(--line-strong); margin-bottom: 8px; }

/* Hub/ferramentas: seta que desliza no hover */
.ferramenta-card { position: relative; overflow: hidden; }
.ferramenta-card::after {
  content: '→';
  position: absolute;
  right: 18px; bottom: 14px;
  font-size: 18px;
  color: var(--accent);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .2s, transform .2s;
}
.ferramenta-card:hover::after { opacity: 1; transform: translateX(0); }

/* Modais: entrada suave (páginas que usam .modal-overlay/.modal) */
.modal-overlay { animation: v2-fade .18s ease-out both; }
.modal { animation: v2-pop .22s ease-out both; }
@keyframes v2-fade { from { opacity: 0; } to { opacity: 1; } }

/* Linhas de tabela: hover sutil universal */
.tabela tbody tr, .regras-tabela tbody tr, .lote-tab tbody tr {
  transition: background 120ms;
}
.tabela tbody tr:hover { background: var(--bg); }


/* ────────────────────────────────────────────────────────
   16. TELA PADRÃO (Jun/2026)
   Spec ÚNICA de header de tela: voltar, título, subtítulo,
   nota explicativa e espaçamentos. As classes antigas
   (.breadcrumb-link, .subtela-titulo, .info-card) são
   ALIASES desta spec — páginas legadas herdam o visual novo
   sem precisar de mudança de markup.

   Markup canônico:
     <a class="voltar-global" href="...">
       <svg ...><path d="M15 18l-6-6 6-6"/></svg> Voltar
     </a>
     <div class="topo-tela">
       <h1 class="titulo-tela">Nome da tela</h1>
       [elemento opcional à direita]
     </div>
     <p class="subtitulo-tela">Uma linha do que a tela faz.</p>
     <div class="nota-card">…</div>   (opcional)
   ──────────────────────────────────────────────────────── */

/* ── Voltar (uma spec; .breadcrumb-link é alias) ───────── */
.voltar-global,
.breadcrumb-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
  text-decoration: none;
  margin-bottom: 14px;
  transition: color 150ms;
}
.voltar-global svg,
.breadcrumb-link svg {
  width: 14px;
  height: 14px;
  transition: transform 150ms;
}
.voltar-global:hover,
.breadcrumb-link:hover {
  color: var(--accent-strong);
  text-decoration: none;
}
.voltar-global:hover svg,
.breadcrumb-link:hover svg {
  transform: translateX(-2px);
}
.voltar-global:focus-visible,
.breadcrumb-link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-sm);
}
/* wrapper legado <nav class="breadcrumb"> não soma margem extra */
.breadcrumb { margin-bottom: 0; }
.subtela-header { margin-bottom: var(--gap-lg); }

/* ── Linha do título (título + elemento à direita) ────── */
.topo-tela {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap);
  flex-wrap: wrap;
  margin-bottom: 6px;
}

/* ── Título de tela (uma spec; .subtela-titulo é alias) ── */
.titulo-tela,
.subtela-titulo {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--gap-sm);
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .titulo-tela,
  .subtela-titulo { font-size: 28px; }
}

/* ── Subtítulo (uma linha, leigo) ──────────────────────── */
.subtitulo-tela,
.subtitulo {
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0 0 18px 0;
}

/* ── Nota explicativa (.info-card legado é alias) ──────── */
.nota-card,
.info-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--info);
  border-radius: var(--r);
  padding: 13px 16px;
  margin-bottom: 24px;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
}
.nota-card svg,
.info-card svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; color: var(--info); }
.nota-card strong,
.info-card strong,
.nota-card .info-card-corpo strong,
.info-card .info-card-corpo strong { color: var(--ink); }
.info-card-corpo { font-size: 13px; color: var(--ink-2); line-height: 1.5; }

/* ── Cabeçalho de seção dentro da tela ─────────────────── */
.secao-rotulo {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 28px 0 4px;
}
.secao-rotulo:first-of-type { margin-top: 0; }
.secao-rotulo-desc {
  font-size: 13px;
  color: var(--ink-3);
  margin: 0 0 14px;
  line-height: 1.5;
}

/* ── Resumo da tela (mini stat-cards sob o header) ─────── */
.tela-stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.tela-stat {
  flex: 1 1 130px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 10px 14px;
  min-width: 0;
}
.tela-stat .num {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.15;
}
.tela-stat .lbl {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 2px;
}
.tela-stat.ok .num     { color: var(--ok); }
.tela-stat.erro .num   { color: var(--erro); }
.tela-stat.alerta .num { color: var(--alerta); }
.tela-stat.acao {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: none;
  padding: 0;
}

/* ────────────────────────────────────────────────────────
   17. VV-COMBO (Jun/2026)
   Dropdown de catálogo (vv-combo.js). Substitui datalist e
   select nativos em listas longas (médicos, convênios,
   especialidades). O painel é anexado ao <body>.
   ──────────────────────────────────────────────────────── */
.vv-combo-painel {
  position: absolute;
  z-index: 300;
  max-height: 280px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  box-shadow: var(--shadow-strong);
  padding: 4px;
  animation: v2-pop 140ms ease-out both;
}
.vv-combo-item {
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  color: var(--ink-2);
  cursor: pointer;
  line-height: 1.35;
}
.vv-combo-item b {
  color: var(--accent-strong);
  font-weight: 700;
}
.vv-combo-item:hover,
.vv-combo-item.sel {
  background: var(--accent-soft);
  color: var(--ink);
}
.vv-combo-grupo {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 8px 12px 4px;
}
.vv-combo-grupo:not(:first-child) {
  border-top: 1px solid var(--line);
  margin-top: 4px;
}
.vv-combo-vazio,
.vv-combo-mais {
  padding: 9px 12px;
  font-size: 12px;
  color: var(--ink-3);
}
.vv-combo-mais {
  border-top: 1px solid var(--line);
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
}


/* ────────────────────────────────────────────────────────
   18. VV-UI (Jun/2026)
   Toast e confirmação da marca (vv-ui.js). Substituem
   alert()/confirm() nativos e os toasts copiados por página.
   ──────────────────────────────────────────────────────── */
.vv-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 8px);
  background: var(--ink);
  color: var(--bg);
  padding: 11px 20px;
  border-radius: var(--r);
  font-size: 14px;
  box-shadow: var(--shadow-strong);
  opacity: 0;
  transition: opacity .2s, transform .2s;
  pointer-events: none;
  z-index: 1000;
  max-width: calc(100vw - 32px);
}
.vv-toast.mostra { opacity: 1; transform: translate(-50%, 0); }
.vv-toast.erro { background: var(--erro); }
.vv-toast.ok   { background: var(--accent-strong); }

.vv-conf-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12, 47, 35, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 900;
  animation: v2-fade .15s ease-out both;
}
.vv-conf {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-strong);
  padding: 22px;
  width: 100%;
  max-width: 420px;
  animation: v2-pop .18s ease-out both;
}
.vv-conf-titulo {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 6px;
}
.vv-conf-texto {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0 0 18px;
}
.vv-conf-aviso {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--alerta-soft);
  border-left: 3px solid var(--alerta);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0 0 18px;
}
.vv-conf-aviso svg { flex: 0 0 16px; margin-top: 1px; color: var(--alerta); }
.vv-conf-acoes {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.vv-conf .btn-confirmar-perigo {
  background: var(--erro);
  color: #fff;
  border: 0;
  padding: 10px 20px;
  border-radius: var(--r);
  font: 600 14px var(--font-sans);
  cursor: pointer;
}
.vv-conf .btn-confirmar-perigo:hover { filter: brightness(0.94); }


.btn-primary .pendente-dot {
  display: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ffd66e;
  box-shadow: 0 0 6px rgba(255,214,110,.9);
  margin-left: 8px;
}
.btn-primary.pendente .pendente-dot { display: inline-block; }



/* ────────────────────────────────────────────────────────
   19. MOBILE (Jun/2026)
   Utilitários do passe de portabilidade. Tabelas de edição
   (retornos, preços, idades) NÃO cabem espremidas em 380px —
   rolam na horizontal preservando os inputs utilizáveis.
   ──────────────────────────────────────────────────────── */
.tabela-rolavel {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tabela-rolavel > table {
  width: 100%;
}
@media (max-width: 640px) {
  .tabela-rolavel > table {
    /* min-width por página via style no <table>; default seguro: */
    min-width: 560px;
  }
  /* dica visual de que rola */
  .tabela-rolavel {
    background:
      linear-gradient(90deg, var(--surface) 30%, transparent),
      linear-gradient(270deg, var(--surface) 30%, transparent) 100% 0,
      radial-gradient(farthest-side at 0 50%, rgba(19,32,26,.12), transparent),
      radial-gradient(farthest-side at 100% 50%, rgba(19,32,26,.12), transparent) 100% 0;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
  }
}