/* Gestão da Qualidade · design "Upview Apple" (tokens copiados de /opt/hub/web/src/styles/globals.css). */
/* ── 01 · Tokens claros ────────────────────────────────────────────────────── */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* Fundos */
  --bg-window:      #F2F2F7;
  --surface:        #FFFFFF;
  --surface-2:      #F7F7FA;
  --surface-3:      #F2F2F7;
  --surface-elev:   #FFFFFF;

  /* Texto */
  --ink:            #000000;
  --ink-2:          rgba(60,60,67,0.78);
  --ink-3:          rgba(60,60,67,0.55);
  --ink-4:          rgba(60,60,67,0.29);

  /* Separadores e preenchimentos */
  --rule:           rgba(60,60,67,0.12);
  --rule-2:         rgba(60,60,67,0.18);
  --rule-strong:    rgba(60,60,67,0.29);
  --fill:           rgba(120,120,128,0.20);
  --fill-2:         rgba(120,120,128,0.16);
  --fill-3:         rgba(118,118,128,0.12);
  --hover:          rgba(120,120,128,0.08);
  --selected:       rgba(120,120,128,0.12);
  --seg-selected:   #FFFFFF;

  /* Acento (ciano da Apple). accent nunca como texto: use accent-ink. */
  --accent:         #00C0E8;
  --accent-ink:     #0074A0;
  --accent-soft:    rgba(0,192,232,0.12);
  --accent-solid:   #007EAE;
  --on-accent-solid:#FFFFFF;

  /* Vidro */
  --glass:          rgba(255,255,255,0.66);
  --glass-thick:    rgba(250,250,252,0.84);
  --glass-edge:     rgba(255,255,255,0.75);
  --glass-rim:      rgba(0,0,0,0.08);
  --sidebar-bg:     rgba(246,246,250,0.78);
  --titlebar-bg:    rgba(250,250,252,0.72);
  --scrim:          rgba(0,0,0,0.30);

  /* Famílias semânticas: base (texto/fundo sólido), soft (tint), ink (texto no tint) */
  --success:        #008932;  --success-soft: rgba(52,199,89,0.12);   --success-ink: #007E2E;
  --warn:           #A16A00;  --warn-soft:    rgba(255,204,0,0.16);   --warn-ink:    #8F5E00;
  --danger:         #E9152D;  --danger-soft:  rgba(255,56,60,0.12);   --danger-ink:  #D21328;
  --cold:           #6C6C70;  --cold-soft:    rgba(142,142,147,0.12); --cold-ink:    #636366;
  --violet:         #B02FC2;  --violet-soft:  rgba(203,48,224,0.12);  --violet-ink:  #A92DBA;
  --magenta:        #E7124D;  --magenta-soft: rgba(255,45,85,0.12);   --magenta-ink: #D01045;
  --orange:         #C55300;  --orange-soft:  rgba(255,141,40,0.12);  --orange-ink:  #B54C00;
  --sky:            #564ADE;  --sky-soft:     rgba(97,85,245,0.12);   --sky-ink:     #564ADE;
  --mint:           #008575;  --mint-soft:    rgba(0,200,179,0.12);   --mint-ink:    #007A6C;

  /* Cores do sistema (gráfico, ícone, ponto) */
  --sys-red:#FF383C; --sys-orange:#FF8D28; --sys-yellow:#FFCC00; --sys-green:#34C759;
  --sys-mint:#00C8B3; --sys-teal:#00C3D0; --sys-cyan:#00C0E8; --sys-blue:#0088FF;
  --sys-indigo:#6155F5; --sys-purple:#CB30E0; --sys-pink:#FF2D55; --sys-brown:#AC7F5E; --sys-gray:#8E8E93;
  --cat-1:#0088FF; --cat-2:#FF8D28; --cat-3:#00C3D0; --cat-4:#CB30E0; --cat-5:#AC7F5E; --cat-6:#FF2D55; --cat-x:#AEAEB2;
  --brand-whatsapp: #25D366;

  /* Sombras: só em elemento flutuante; cartão quase nada */
  --shadow-card:    0 0.5px 1px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.03);
  --shadow-pop:     0 0 0 0.5px rgba(0,0,0,0.06), 0 10px 30px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
  --shadow-glass:   0 8px 28px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.06);
  --shadow-modal:   0 0 0 0.5px rgba(0,0,0,0.08), 0 24px 60px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.08);
}

/* ── 02 · Tokens escuros ───────────────────────────────────────────────────── */
[data-theme="dark"] {
  color-scheme: dark;

  --bg-window:      #000000;
  --surface:        #1C1C1E;
  --surface-2:      #242426;
  --surface-3:      #2C2C2E;
  --surface-elev:   #2C2C2E;

  --ink:            #FFFFFF;
  --ink-2:          rgba(235,235,245,0.72);
  --ink-3:          rgba(235,235,245,0.50);
  --ink-4:          rgba(235,235,245,0.25);

  --rule:           rgba(84,84,88,0.40);
  --rule-2:         rgba(84,84,88,0.55);
  --rule-strong:    rgba(84,84,88,0.70);
  --fill:           rgba(120,120,128,0.36);
  --fill-2:         rgba(120,120,128,0.32);
  --fill-3:         rgba(118,118,128,0.24);
  --hover:          rgba(120,120,128,0.16);
  --selected:       rgba(120,120,128,0.24);
  --seg-selected:   #636366;

  --accent:         #3CD3FE;
  --accent-ink:     #6DD9FF;
  --accent-soft:    rgba(60,211,254,0.18);
  --accent-solid:   #007EAE;
  --on-accent-solid:#FFFFFF;

  --glass:          rgba(44,44,46,0.62);
  --glass-thick:    rgba(34,34,36,0.80);
  --glass-edge:     rgba(255,255,255,0.14);
  --glass-rim:      rgba(0,0,0,0.5);
  --sidebar-bg:     rgba(30,30,32,0.72);
  --titlebar-bg:    rgba(28,28,30,0.72);
  --scrim:          rgba(0,0,0,0.55);

  --success:        #30D158;  --success-soft: rgba(48,209,88,0.20);   --success-ink: #4AD968;
  --warn:           #FFD600;  --warn-soft:    rgba(255,214,0,0.18);   --warn-ink:    #FEDF43;
  --danger:         #FF4245;  --danger-soft:  rgba(255,66,69,0.20);   --danger-ink:  #FF6165;
  --cold:           #8E8E93;  --cold-soft:    rgba(142,142,147,0.22); --cold-ink:    #AEAEB2;
  --violet:         #DB34F2;  --violet-soft:  rgba(219,52,242,0.20);  --violet-ink:  #EA8DFF;
  --magenta:        #FF375F;  --magenta-soft: rgba(255,55,95,0.20);   --magenta-ink: #FF8AC4;
  --orange:         #FF9230;  --orange-soft:  rgba(255,146,48,0.20);  --orange-ink:  #FFA056;
  --sky:            #6D7CFF;  --sky-soft:     rgba(109,124,255,0.22); --sky-ink:     #A7AAFF;
  --mint:           #00DAC3;  --mint-soft:    rgba(0,218,195,0.20);   --mint-ink:    #54DFCB;

  --sys-red:#FF4245; --sys-orange:#FF9230; --sys-yellow:#FFD600; --sys-green:#30D158;
  --sys-mint:#00DAC3; --sys-teal:#00D2E0; --sys-cyan:#3CD3FE; --sys-blue:#0091FF;
  --sys-indigo:#6D7CFF; --sys-purple:#DB34F2; --sys-pink:#FF375F; --sys-brown:#B78A66; --sys-gray:#8E8E93;
  --cat-1:#0091FF; --cat-2:#FF9230; --cat-3:#00D2E0; --cat-4:#DB34F2; --cat-5:#B78A66; --cat-6:#FF375F; --cat-x:#636366;

  --shadow-card:    none;
  --shadow-pop:     0 0 0 0.5px rgba(255,255,255,0.08), 0 12px 36px rgba(0,0,0,0.55);
  --shadow-glass:   0 10px 32px rgba(0,0,0,0.45), 0 1px 3px rgba(0,0,0,0.35);
  --shadow-modal:   0 0 0 0.5px rgba(255,255,255,0.10), 0 28px 70px rgba(0,0,0,0.65);
}

/* ── 02b · Forma, medida, tipo e movimento (iguais nos dois temas) ─────────── */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --r-xs: 4px; --r-control: 7px; --r-card: 12px; --r-panel: 16px;
  --r-window: 18px; --r-sheet: 20px; --r-capsule: 999px;

  --ctl-mini: 22px; --ctl-sm: 28px; --ctl-md: 32px; --ctl-lg: 38px; --hit-min: 44px;

  --blur-glass: saturate(180%) blur(24px);
  --blur-thick: saturate(160%) blur(36px);

  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --dur: 260ms;

  /* Escala do macOS com um passo a mais (desktop) */
  --t-large: 27px;  --t-title1: 23px; --t-title2: 18px; --t-title3: 16px;
  --t-headline: 14px; --t-body: 14px; --t-callout: 13px; --t-subhead: 12px;
  --t-footnote: 11px; --t-caption: 11px;
}
/* Celular: escala do iOS, os mesmos tokens mudam sozinhos */
@media (max-width: 767px) {
  :root {
    --t-large: 34px;  --t-title1: 28px; --t-title2: 22px; --t-title3: 20px;
    --t-headline: 17px; --t-body: 17px; --t-callout: 16px; --t-subhead: 15px;
    --t-footnote: 13px; --t-caption: 12px;
  }
}

/* ── 02c · Acessibilidade: o sistema troca os tokens, componente não trata ─── */
@media (prefers-reduced-transparency: reduce) {
  :root, [data-theme="light"] {
    --glass: #FFFFFF; --glass-thick: #FAFAFC; --sidebar-bg: #F6F6FA; --titlebar-bg: #FAFAFC;
  }
  [data-theme="dark"] {
    --glass: #2C2C2E; --glass-thick: #222224; --sidebar-bg: #1E1E20; --titlebar-bg: #1C1C1E;
  }
}
@media (prefers-contrast: more) {
  :root, [data-theme="light"] {
    --ink-2: rgba(60,60,67,0.92); --ink-3: rgba(60,60,67,0.78);
    --rule: rgba(60,60,67,0.29); --rule-2: rgba(60,60,67,0.36); --rule-strong: rgba(60,60,67,0.5);
  }
  [data-theme="dark"] {
    --ink-2: rgba(235,235,245,0.86); --ink-3: rgba(235,235,245,0.72);
    --rule: rgba(84,84,88,0.7); --rule-2: rgba(84,84,88,0.8); --rule-strong: rgba(84,84,88,0.95);
  }
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}


/* ── Base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg-window); color: var(--ink); font-family: var(--font-sans);
  font-size: var(--t-body); line-height: 1.4; -webkit-font-smoothing: antialiased; touch-action: manipulation;
}
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; line-height: 1.2; text-wrap: balance; }
h1 { font-size: var(--t-large); font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: var(--t-title1); font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: var(--t-title3); font-weight: 600; }
p { margin: 0; }
a { color: var(--accent-ink); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: var(--r-control); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.small { font-size: var(--t-subhead); }
.legenda { font-size: var(--t-subhead); color: var(--ink-2); font-weight: 600; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.grow { flex: 1 1 auto; min-width: 0; }

/* ── Controles ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--ctl-md);
  padding: 0 14px; border: 0; border-radius: var(--r-control); background: var(--fill-3); color: var(--ink);
  font-size: var(--t-callout); font-weight: 500; cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: filter var(--dur) var(--ease-spring), background var(--dur) var(--ease-spring);
}
.btn:hover:not(:disabled) { filter: brightness(0.96); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.primary { background: var(--accent-solid); color: var(--on-accent-solid); font-weight: 600; }
.btn.ghost { background: transparent; color: var(--accent-ink); }
.btn.ghost:hover:not(:disabled) { background: var(--hover); filter: none; }
.btn.danger { background: var(--danger-soft); color: var(--danger-ink); }
.btn.success { background: var(--success-soft); color: var(--success-ink); }
.btn.sm { height: var(--ctl-sm); padding: 0 10px; font-size: var(--t-subhead); }
.btn.lg { height: var(--ctl-lg); padding: 0 22px; border-radius: var(--r-capsule); font-size: var(--t-body); }
.btn.tall { height: auto; min-height: var(--ctl-md); padding: 7px 14px; flex-direction: column; gap: 1px; white-space: normal; text-align: center; }
.btn.tall small { font-weight: 400; opacity: 0.85; font-size: var(--t-footnote); }

.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field > label, .field > .legenda { font-size: var(--t-subhead); color: var(--ink-2); font-weight: 600; }
.input {
  width: 100%; min-height: var(--ctl-md); padding: 6px 10px; border: 0; border-radius: var(--r-control);
  background: var(--fill-3); color: var(--ink); font-size: var(--t-callout);
}
.input:focus { outline: 3px solid var(--accent-soft); background: var(--surface); box-shadow: 0 0 0 1px var(--accent); }
.input:disabled { color: var(--ink-2); cursor: not-allowed; }
textarea.input { min-height: 88px; resize: vertical; line-height: 1.4; }
select.input { appearance: none; padding-right: 28px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 14px) 52%, calc(100% - 9px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-callout); cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: var(--accent-solid); }
@media (max-width: 767px) { .input { font-size: 16px; } }

.seg { display: inline-flex; padding: 2px; gap: 2px; background: var(--fill-3); border-radius: var(--r-control); }
.seg button { border: 0; background: transparent; height: 26px; padding: 0 12px; border-radius: 5px; cursor: pointer; font-size: var(--t-subhead); font-weight: 500; color: var(--ink-2); }
.seg button[aria-pressed="true"] { background: var(--seg-selected); color: var(--ink); box-shadow: var(--shadow-card); }

/* ── Chips e status ───────────────────────────────────────────────────────── */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--r-capsule); font-size: var(--t-footnote); font-weight: 600; white-space: nowrap; background: var(--cold-soft); color: var(--cold-ink); }
.chip.danger, .chip.Pendente { background: var(--danger-soft); color: var(--danger-ink); }
.chip.warn, .chip.Em { background: var(--warn-soft); color: var(--warn-ink); }
.chip.success, .chip.Concluido { background: var(--success-soft); color: var(--success-ink); }
.chip.accent { background: var(--accent-soft); color: var(--accent-ink); }
.late { color: var(--danger-ink); font-weight: 600; }

/* ── Shell: navegação é vidro, conteúdo é sólido ──────────────────────────── */
.topo {
  position: sticky; top: 0; z-index: 10; padding-top: env(safe-area-inset-top);
  background: var(--titlebar-bg); -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass);
  box-shadow: 0 0.5px 0 var(--rule);
}
.topo-in { max-width: 1320px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 52px; }
.marca { display: flex; align-items: center; gap: 10px; min-width: 0; }
.marca-icone { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--accent-solid); color: var(--on-accent-solid); font-weight: 700; font-size: 12px; flex: none; }
.marca b { display: block; font-size: var(--t-headline); }
.marca small { display: block; font-size: var(--t-footnote); color: var(--ink-2); }
.topo-acoes { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.busca { display: flex; gap: 6px; align-items: center; }
.busca .input { width: 150px; }
.quem { display: flex; flex-direction: column; text-align: right; line-height: 1.2; }
.quem small { color: var(--ink-2); font-size: var(--t-footnote); }
.abas { max-width: 1320px; margin: 0 auto; padding: 0 16px 8px; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.abas::-webkit-scrollbar { display: none; }
.aba { border: 0; background: transparent; height: 30px; padding: 0 12px; border-radius: var(--r-capsule); cursor: pointer; color: var(--ink-2); font-size: var(--t-callout); font-weight: 500; white-space: nowrap; }
.aba:hover { background: var(--hover); color: var(--ink); }
.aba[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.aba .conta { margin-left: 6px; display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; }
@media (max-width: 767px) {
  .quem { display: none; }
  .topo-acoes { margin-left: 0; width: 100%; flex-wrap: nowrap; }
  .busca { flex: 1; min-width: 0; }
  .busca label { display: none; }
  .busca .input { flex: 1; width: auto; min-width: 0; }
  .marca { flex: 1; }
}
td.codigo { white-space: nowrap; }

main { max-width: 1320px; margin: 0 auto; padding: 20px 16px 64px; display: flex; flex-direction: column; gap: 16px; }
.cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cabeca p { max-width: 75ch; margin-top: 4px; color: var(--ink-2); }
.card { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.pad { padding: 16px; }
.pad-lg { padding: 20px; }
.aviso-bloco { font-size: var(--t-callout); color: var(--ink-2); background: var(--fill-3); padding: 8px 12px; border-radius: var(--r-control); }
.aviso-bloco.warn { background: var(--warn-soft); color: var(--warn-ink); }
.aviso-bloco.danger { background: var(--danger-soft); color: var(--danger-ink); }
.aviso-bloco.success { background: var(--success-soft); color: var(--success-ink); }
.vazio { padding: 32px 16px; text-align: center; color: var(--ink-2); }
.divisor { border-top: 0.5px solid var(--rule); }

/* ── Indicadores ──────────────────────────────────────────────────────────── */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.kpi { padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.kpi .legenda { font-weight: 500; }
.kpi b { font-size: var(--t-large); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.kpi.danger b { color: var(--danger-ink); } .kpi.warn b { color: var(--warn-ink); } .kpi.success b { color: var(--success-ink); }
.grade2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 860px) { .grade2 { grid-template-columns: 1fr; } }
.barras { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.barra { display: grid; grid-template-columns: minmax(120px, 220px) 1fr 40px; gap: 10px; align-items: center; font-size: var(--t-callout); }
.trilho { height: 10px; border-radius: 5px; background: var(--fill-3); overflow: hidden; display: flex; }
.trilho i { display: block; height: 100%; }
.legenda-cores { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; font-size: var(--t-subhead); color: var(--ink-2); }
.ponto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
@media (max-width: 560px) { .barra { grid-template-columns: 1fr 40px; } .barra .trilho { grid-column: 1 / -1; grid-row: 2; } }

/* ── Tabelas ──────────────────────────────────────────────────────────────── */
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; padding: 14px 16px; }
.filtros .field { flex: 1 1 150px; }
.filtros .field.largo { flex: 2 1 240px; }
.tabela-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: var(--t-callout); }
th { text-align: left; font-size: var(--t-subhead); color: var(--ink-2); font-weight: 600; padding: 10px 12px; white-space: nowrap; border-bottom: 0.5px solid var(--rule); }
td { padding: 10px 12px; border-bottom: 0.5px solid var(--rule); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tr.clicavel { cursor: pointer; }
tr.clicavel:hover td { background: var(--hover); }
tr.st td:first-child { box-shadow: inset 4px 0 0 var(--ink-4); }
tr.st-Pendente td { background: var(--danger-soft); } tr.st-Pendente td:first-child { box-shadow: inset 4px 0 0 var(--danger); }
tr.st-Em td { background: var(--warn-soft); } tr.st-Em td:first-child { box-shadow: inset 4px 0 0 var(--warn); }
tr.st-Concluido td { background: var(--success-soft); } tr.st-Concluido td:first-child { box-shadow: inset 4px 0 0 var(--success); }
tr.clicavel.st-Pendente:hover td, tr.clicavel.st-Em:hover td, tr.clicavel.st-Concluido:hover td { filter: brightness(0.97); }
.relato-celula { max-width: 340px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.matriz td, .matriz th { text-align: center; }
.matriz td:first-child, .matriz th:first-child { text-align: left; }
.matriz th { white-space: normal; min-width: 86px; vertical-align: bottom; }

/* ── Triagem ──────────────────────────────────────────────────────────────── */
.fila { display: flex; flex-direction: column; gap: 12px; }
.cartao { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 16px; }
.cartao.alerta { box-shadow: inset 4px 0 0 var(--danger), var(--shadow-card); }
.cartao.limpo { box-shadow: inset 4px 0 0 var(--success), var(--shadow-card); }
.cartao-acoes { display: flex; flex-direction: column; gap: 8px; width: 240px; }
@media (max-width: 720px) { .cartao { grid-template-columns: 1fr; } .cartao-acoes { width: auto; } }
.citacao { padding: 8px 12px; background: var(--fill-3); border-radius: var(--r-control); font-size: var(--t-callout); max-width: 75ch; white-space: pre-wrap; }

/* ── Painel lateral (folha) ───────────────────────────────────────────────── */
.veu { position: fixed; inset: 0; background: var(--scrim); z-index: 30; }
.folha {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(640px, 100%); z-index: 31; display: flex; flex-direction: column;
  background: var(--surface); box-shadow: var(--shadow-modal); padding-top: env(safe-area-inset-top);
}
@media (min-width: 680px) { .folha { top: 8px; right: 8px; bottom: 8px; border-radius: var(--r-sheet); overflow: hidden; } }
@media (prefers-reduced-motion: no-preference) { .folha { animation: entra var(--dur) var(--ease-spring); } @keyframes entra { from { transform: translateX(28px); opacity: 0.6; } } }
.folha-topo { padding: 16px 20px; display: flex; gap: 12px; align-items: flex-start; box-shadow: 0 0.5px 0 var(--rule); }
.folha-corpo { padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; flex: 1; overscroll-behavior: contain; }
.folha-pe { padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; box-shadow: 0 -0.5px 0 var(--rule); }
.codigo-grande { font-family: var(--font-mono); font-size: var(--t-title2); font-weight: 600; }
.form-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grade .inteiro { grid-column: 1 / -1; }
@media (max-width: 560px) { .form-grade { grid-template-columns: 1fr; } }
.status-botoes { display: flex; gap: 6px; flex-wrap: wrap; }
.status-btn { height: var(--ctl-md); padding: 0 14px; border: 0; border-radius: var(--r-control); background: var(--fill-3); color: var(--ink-2); font-weight: 600; cursor: pointer; }
.status-btn:disabled { cursor: not-allowed; opacity: 0.55; }
.status-btn.Pendente[aria-pressed="true"] { background: var(--danger-soft); color: var(--danger-ink); box-shadow: inset 0 0 0 1.5px var(--danger); }
.status-btn.Em[aria-pressed="true"] { background: var(--warn-soft); color: var(--warn-ink); box-shadow: inset 0 0 0 1.5px var(--warn); }
.status-btn.Concluido[aria-pressed="true"] { background: var(--success-soft); color: var(--success-ink); box-shadow: inset 0 0 0 1.5px var(--success); }
.respostas { width: 100%; font-size: var(--t-callout); }
.respostas td { padding: 7px 8px; }
.respostas td:last-child { text-align: right; font-weight: 600; }
.respostas tr.ruim td:last-child { color: var(--danger-ink); }
.linha-tempo { display: flex; flex-direction: column; border-left: 2px solid var(--rule-2); margin-left: 6px; }
.lt-item { position: relative; padding: 0 0 14px 16px; white-space: pre-wrap; }
.lt-item::before { content: ""; position: absolute; left: -7px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2.5px var(--accent); }
.lt-meta { font-size: var(--t-subhead); color: var(--ink-2); white-space: normal; }
.sucesso { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 16px; border-radius: var(--r-card); background: var(--success-soft); }

/* ── Aviso flutuante para a Qualidade ─────────────────────────────────────── */
.popup {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 29; width: min(400px, calc(100% - 32px));
  max-height: 70vh; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
  border-radius: var(--r-panel); background: var(--glass-thick); -webkit-backdrop-filter: var(--blur-thick); backdrop-filter: var(--blur-thick);
  box-shadow: var(--shadow-modal), inset 4px 0 0 var(--danger);
}
.popup-item { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; box-shadow: 0 -0.5px 0 var(--rule); }
@media (prefers-reduced-motion: no-preference) { .popup { animation: sobe var(--dur) var(--ease-spring); } @keyframes sobe { from { transform: translateY(12px); opacity: 0; } } }
.toast {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 50; max-width: calc(100% - 32px);
  padding: 10px 16px; border-radius: var(--r-capsule); background: var(--glass-thick); -webkit-backdrop-filter: var(--blur-thick); backdrop-filter: var(--blur-thick);
  box-shadow: var(--shadow-pop); font-size: var(--t-callout); font-weight: 500;
}

/* ── Modal ────────────────────────────────────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; padding: 16px; background: var(--scrim); }
.modal-caixa { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--surface); border-radius: var(--r-sheet); box-shadow: var(--shadow-modal); padding: 20px; display: flex; flex-direction: column; gap: 14px; }

/* ── Entrada ──────────────────────────────────────────────────────────────── */
.entrada { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; }
.entrada-caixa { width: min(440px, 100%); padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.entrada-caixa .marca-icone { width: 44px; height: 44px; border-radius: 12px; font-size: 15px; }
.erro { color: var(--danger-ink); font-size: var(--t-callout); min-height: 1.2em; }
.lista-opcoes { display: flex; flex-direction: column; gap: 6px; }
.opcao { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: 0; border-radius: var(--r-control); background: var(--fill-3); cursor: pointer; text-align: left; font-weight: 500; }
.opcao:hover { background: var(--fill-2); }

/* ── Configurações: editor de pesquisa ────────────────────────────────────── */
.pergunta { padding: 14px; border-radius: var(--r-card); background: var(--surface-2); display: flex; flex-direction: column; gap: 10px; }
.regra { display: grid; grid-template-columns: 130px 1fr 1.4fr 1fr auto auto; gap: 8px; align-items: center; }
@media (max-width: 900px) { .regra { grid-template-columns: 1fr 1fr; } }
.colunas4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 720px) { .colunas4 { grid-template-columns: 1fr 1fr; } }
.sub-abas { display: flex; gap: 4px; flex-wrap: wrap; }

.popup-mini { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 29; height: var(--ctl-lg); padding: 0 16px; border: 0; border-radius: var(--r-capsule); background: var(--danger); color: #fff; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-pop); }

/* ── Formulário público da pesquisa (o que o paciente vê) ─────────────────── */
.pq { max-width: 640px; padding: 24px 16px calc(48px + env(safe-area-inset-bottom)); gap: 14px; }
.pq-topo { display: flex; flex-direction: column; gap: 6px; padding: 4px 4px 8px; }
.pq-topo .legenda { color: var(--accent-ink); }
.pq-q { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.pq-q > label, .pq-q > .pq-rot { font-weight: 600; font-size: var(--t-headline); line-height: 1.35; }
.pq-q .obrig { color: var(--danger-ink); margin-left: 2px; }
.pq-q.erro-q { box-shadow: inset 0 0 0 2px var(--danger), var(--shadow-card); }
.notas { display: grid; gap: 6px; }
.notas.n5 { grid-template-columns: repeat(5, 1fr); }
.notas.n11 { grid-template-columns: repeat(11, 1fr); }
@media (max-width: 480px) { .notas.n11 { grid-template-columns: repeat(6, 1fr); } }
.nota, .pilula { min-height: var(--hit-min); border: 0; border-radius: var(--r-control); background: var(--fill-3); color: var(--ink); font-weight: 600; font-size: var(--t-body); cursor: pointer; }
.nota[aria-pressed="true"], .pilula[aria-pressed="true"] { background: var(--accent-solid); color: var(--on-accent-solid); }
.extremos { display: flex; justify-content: space-between; font-size: var(--t-footnote); color: var(--ink-3); }
.pilulas { display: flex; flex-wrap: wrap; gap: 8px; }
.pilula { padding: 0 18px; border-radius: var(--r-capsule); font-weight: 500; }
.pq .armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pq-fim { padding: 32px 20px; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.pq-fim .marca-icone { width: 52px; height: 52px; border-radius: 26px; font-size: 24px; background: var(--success); }