/* ==========================================================================
   Tema GP Gestão Check — camada sobre styles.css
   Base: docs/brand-kit-gp (cores medidas do logo e das telas de login).
   Remapeia os tokens do sistema e refina estrutura + telas aprovadas.
   ========================================================================== */
:root {
  /* marca (kit) */
  --gp-green: #86B625;       /* verde do logo — indicadores, marca */
  --gp-green-cta: #8ABE03;   /* verde ação — botão principal */
  --gp-green-hover: #7AA803;
  --gp-green-deep: #5B7A14;  /* verde texto sobre claro (contraste AA) */
  --gp-black: #1A1A18;       /* "P" do logo */
  --gp-gray: #615F63;        /* "CHECK" */
  --gp-off: #FAFAF7;
  --gp-mist: #F5F6F1;
  --gp-soft: #EFF4E4;
  --gp-night: #0B100A;
  --gp-night-2: #1D250F;
  --gp-line: #E2E7D8;

  /* tokens do sistema remapeados */
  --primary: var(--gp-black);
  --primary-dark: var(--gp-night);
  --primary-light: #33362E;
  --accent: var(--gp-green);
  --accent-dark: var(--gp-green-deep);
  --accent-light: var(--gp-soft);
  --cream: var(--gp-mist);
  --success: var(--gp-green-deep);
  --success-bg: var(--gp-soft);
  --danger: #C73232;         /* "correção" do kit (#D93A3A) escurecido p/ texto AA */
  --danger-bg: #FBECEA;
  --warning: #8A6500;        /* "pendente" do kit (#E9A800) como texto AA */
  --warning-bg: #FDF3D6;
  --info: var(--gp-gray);
  --info-bg: var(--gp-mist);
  --gray-50: #FAFAF7;
  --gray-100: #F2F4EC;
  --gray-200: #E2E7D8;
  --gray-300: #CED4C3;
  --gray-400: #8F9488;
  --gray-500: #615F63;
  --gray-600: #4C4C48;
  --gray-700: #33332F;
  --gray-800: #1A1A18;
  --gray-900: #0B100A;
  --bg: var(--gp-off);
  --display: "Poppins", system-ui, sans-serif;
  --radius: 12px;            /* campos e botões (kit) */
  --radius-lg: 20px;         /* cards (kit: 24px; 20px p/ telas densas) */
  --shadow: 0 1px 2px rgba(26,26,24,.05);
  --shadow-md: 0 1px 2px rgba(26,26,24,.05), 0 12px 32px -18px rgba(26,26,24,.18);
  --focus: 0 0 0 4px rgba(134,182,37,.22);
}

/* ── Tema: tokens semânticos. Claro aqui; o escuro redefine abaixo ───────── */
:root {
  --ink: #1A1A18; --surface: #fff; --surface-2: #F5F6F1; --soft: #EFF4E4; --line: #E2E7D8; --muted: #615F63;
  --verde-txt: #5B7A14; --campo: #fff;
  --violeta: #6d28d9; --violeta-bg: #ede9fe; --violeta-line: #c4b5fd; --laranja: #c2410c; --laranja-bg: #fff7ed;
  --b-warn: #F0C98A; --b-danger: #F0A0A0; --b-ok: #A7DCC4;
  /* menu lateral */
  --nav-bg: #fff; --nav-glow: rgba(134,182,37,.16); --nav-line: #E2E7D8; --nav-fg: #4C4C48; --nav-sec: #6C7164;
  --nav-hover: #F5F6F1; --nav-active-bg: #EFF4E4; --nav-active-fg: #1A1A18; --foot-bg: #F7F8F3;
  --icbtn-bg: #EEF0E8; --icbtn-fg: #4C4C48; --icbtn-hover-bg: #FBECEA; --icbtn-hover-fg: #C73232;
  --anel: #6FA82A; --tip-bg: #1A1A18; --tip-fg: #fff;
}
html[data-tema="escuro"] {
  color-scheme: dark;
  --ink: #E8EEDF; --surface: #151B13; --surface-2: #1B2218; --bg: #0E130D; --soft: #1F2A16; --line: #2A3322; --muted: #A3AD99;
  --verde-txt: #A8D64F; --campo: #0F140E;
  --gray-50: #11160F; --gray-100: #181F16; --gray-200: #262F22; --gray-300: #353F30; --gray-400: #8A9481;
  --gray-500: #A3AD99; --gray-600: #BBC4B1; --gray-700: #D3DACB; --gray-800: #E8EEDF; --gray-900: #F4F8EE;
  /* superfícies de marca (cabeçalhos com texto branco): escuras, mas distintas do fundo da página */
  --primary: #2B3524; --primary-dark: #222B1C; --primary-light: #3A4630;
  --success: #A8D64F; --success-bg: rgba(134,182,37,.16); --danger: #F2938C; --danger-bg: rgba(214,69,69,.16);
  --warning: #F2C14E; --warning-bg: rgba(233,168,0,.16); --info: #BBC4B1; --info-bg: #1B2218;
  --accent: #86B625; --accent-dark: #B9E769; --accent-light: rgba(134,182,37,.14); --cream: #1B2218;
  --violeta: #C4B5FD; --violeta-bg: rgba(139,92,246,.18); --violeta-line: rgba(139,92,246,.42);
  --laranja: #FDBA74; --laranja-bg: rgba(234,88,12,.16);
  --b-warn: rgba(233,168,0,.38); --b-danger: rgba(214,69,69,.45); --b-ok: rgba(134,182,37,.42);
  --shadow: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 1px 2px rgba(0,0,0,.4), 0 14px 34px -18px rgba(0,0,0,.75);
  --focus: 0 0 0 4px rgba(134,182,37,.32);
  --nav-bg: #0B100A; --nav-glow: rgba(134,182,37,.26); --nav-line: rgba(241,246,234,.08); --nav-fg: rgba(241,246,234,.74); --nav-sec: rgba(241,246,234,.5);
  --nav-hover: rgba(241,246,234,.06); --nav-active-bg: rgba(134,182,37,.16); --nav-active-fg: #fff; --foot-bg: rgba(241,246,234,.05);
  --icbtn-bg: rgba(241,246,234,.07); --icbtn-fg: rgba(241,246,234,.8); --icbtn-hover-bg: #D64545; --icbtn-hover-fg: #fff;
  --anel: #8ABE03; --tip-bg: #F1F6EA; --tip-fg: #1A1A18;
}

body { font-family: "Inter", system-ui, sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=email], select, textarea { background: var(--campo); color: var(--gray-800); border-color: var(--gray-300); }
::placeholder { color: var(--gray-400); }
h1, h2, h3, .card-title, .section-title { font-family: var(--display); }
.tnum, td, .money { font-variant-numeric: tabular-nums; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 8px; }
input:focus, select:focus, textarea:focus { border-color: var(--gp-green); box-shadow: var(--focus); }
a, .comprov-link { color: var(--verde-txt); }

/* ── Botões ─────────────────────────────────────────────────────────────── */
/* Verde ação com texto escuro: branco sobre #8ABE03 fica em 2,1:1 (reprova AA). */
.btn { border-radius: var(--radius); font-family: var(--display); font-weight: 600; transition: background-color .15s, border-color .15s, color .15s; }
.btn:hover { filter: none; }
.btn-primary, .btn-success { background: var(--gp-green-cta); color: var(--gp-night); }
.btn-primary:hover, .btn-success:hover { background: var(--gp-green-hover); }
.btn-ghost { border: 1.5px solid var(--line); color: var(--ink); background: var(--surface); }
.btn-ghost:hover { border-color: var(--gp-green); color: var(--verde-txt); }
.btn-danger { background: var(--danger); color: #fff; }

/* ── Menu lateral (claro) — aprovado em mockup/sidebar-gp.html ──────────── */
#page-app { --sidebar-w: 250px; }
@media (min-width: 769px) { #page-app.sb-collapsed { --sidebar-w: 76px; } }
.sidebar {
  width: var(--sidebar-w); height: 100vh; position: fixed; top: 0; left: 0; z-index: 100;
  display: flex; flex-direction: column; flex-shrink: 0; color: var(--nav-fg);
  background: radial-gradient(120% 50% at 50% -8%, var(--nav-glow) 0%, transparent 70%), var(--nav-bg);
  border-right: 1px solid var(--nav-line);
  transition: width .22s cubic-bezier(.2,.8,.2,1), transform .28s cubic-bezier(.4,0,.2,1);
}
.main { transition: margin-left .22s cubic-bezier(.2,.8,.2,1); }

.sidebar-brand { flex: none; padding: 18px 22px 12px; text-align: center; border-bottom: 1px solid var(--nav-line); }
.sb-full img { width: 92px; height: auto; margin: 0 auto; display: block; }
.sb-mono { display: none; }
.sb-mono img { width: 38px; height: auto; margin: 0 auto; display: block; }
.sb-sub { display: flex; align-items: center; gap: 7px; width: 92px; margin: 3px auto 0; }
.sb-sub i { flex: 1; height: 1.5px; border-radius: 2px; background: var(--gp-green); }
.sb-sub span { font: 500 10px/1 "Poppins", sans-serif; letter-spacing: .42em; margin-right: -.42em; color: var(--ink); }

.sidebar-nav { flex: 1; min-height: 0; padding: 8px 12px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--nav-line) transparent; display: block; }
.nav-sec { font: 600 12px/1 "Inter", sans-serif; color: var(--nav-sec); padding: 14px 13px 6px; }
.nav-sec:first-child { padding-top: 6px; }
.nav-item {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 11px;
  border: 0; background: none; border-radius: 11px; cursor: pointer; text-align: left; margin: 0;
  font: 500 14px/1.2 "Inter", sans-serif; color: var(--nav-fg); transition: background-color .15s, color .15s;
}
.nav-item svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: 1; }
.nav-item:hover { background: var(--nav-hover); color: var(--nav-active-fg); }
.nav-item.active { background: var(--nav-active-bg); color: var(--nav-active-fg); font-weight: 600; }
.nav-item.active svg { color: var(--verde-txt); }
.nav-item.active::before { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3.5px; border-radius: 0 4px 4px 0; background: var(--gp-green-cta); }
.nav-item:focus-visible, #btn-logout:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--nav-bg), 0 0 0 4px var(--anel); }
.nav-item .lab { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.nav-badge { margin-left: auto; flex: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; font: 700 12px/22px "Inter", sans-serif; text-align: center; font-variant-numeric: tabular-nums; }
.nav-badge[hidden] { display: none; }
.nav-badge.ok { background: var(--gp-green-cta); color: var(--gp-night); }
.nav-badge.erro { background: #C73232; color: #fff; }

/* botão redondo na borda do menu */
.sb-collapse {
  position: absolute; top: 28px; right: -15px; z-index: 6; width: 30px; height: 30px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  box-shadow: 0 6px 14px -6px rgba(11,16,10,.45); transition: background-color .15s, color .15s;
}
.sb-collapse:hover { background: var(--gp-green-cta); color: var(--gp-night); border-color: var(--gp-green-cta); }
.sb-collapse:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--gp-green-cta); }
.sb-collapse svg { width: 16px; height: 16px; transition: transform .22s; }

.sidebar-footer { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px; margin: 4px 8px 8px; border: 0; border-radius: 16px; background: var(--foot-bg); }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--gp-green); color: var(--gp-night); font: 700 15px/1 "Poppins", sans-serif; display: grid; place-items: center; flex: none; }
.sb-user { flex: 1; min-width: 0; }
.sb-user b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user small { display: block; font-size: 12px; color: var(--nav-sec); margin-top: 2px; }
#btn-logout { width: 40px; height: 40px; flex: none; padding: 0; display: grid; place-items: center; border: 0; border-radius: 12px; background: var(--icbtn-bg); color: var(--icbtn-fg); cursor: pointer; transition: background-color .15s, color .15s; }
#btn-logout svg { width: 20px; height: 20px; }
#btn-logout:hover { background: var(--icbtn-hover-bg); color: var(--icbtn-hover-fg); }

/* recolhido (só em telas grandes: no celular o menu é a gaveta) */
@media (min-width: 769px) {
  #page-app.sb-collapsed .sidebar-brand { padding: 20px 0 14px; }
  #page-app.sb-collapsed .sb-full { display: none; }
  #page-app.sb-collapsed .sb-mono { display: block; }
  #page-app.sb-collapsed .sidebar-nav { overflow: visible; }
  #page-app.sb-collapsed .nav-sec { height: 1px; padding: 0; margin: 12px 14px; background: var(--nav-line); font-size: 0; }
  #page-app.sb-collapsed .nav-sec:first-child { display: none; }
  #page-app.sb-collapsed .nav-item { justify-content: center; padding: 0; }
  #page-app.sb-collapsed .nav-item .lab { display: none; }
  #page-app.sb-collapsed .nav-badge { position: absolute; top: 3px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; line-height: 18px; border-radius: 9px; box-shadow: 0 0 0 2px var(--nav-bg); }
  #page-app.sb-collapsed .sb-collapse svg { transform: rotate(180deg); }
  #page-app.sb-collapsed .sidebar-footer { flex-direction: column; padding: 10px 0; }
  #page-app.sb-collapsed .sb-user { display: none; }
  #page-app.sb-collapsed .nav-item:hover::after, #page-app.sb-collapsed .nav-item:focus-visible::after {
    content: attr(data-tip); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); z-index: 5;
    background: var(--tip-bg); color: var(--tip-fg); padding: 8px 12px; border-radius: 10px; font: 500 13px "Inter", sans-serif; white-space: nowrap;
    box-shadow: 0 10px 24px -10px rgba(0,0,0,.5);
  }
}
/* telas baixas: no recolhido a lista rola e a dica fica por conta do title nativo */
@media (min-width: 769px) and (max-height: 780px) {
  #page-app.sb-collapsed .sidebar-nav { overflow-y: auto; }
  #page-app.sb-collapsed .nav-item:hover::after, #page-app.sb-collapsed .nav-item:focus-visible::after { content: none; }
}
@media (max-width: 768px) { .sb-collapse { display: none; } }
@media (prefers-reduced-motion: reduce) { .sidebar, .main, .sb-collapse svg, .nav-item { transition: none; } }

.topbar { background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.topbar h2 { color: var(--ink); font-weight: 700; }
.topbar-sub { color: var(--muted); }
.tb-chip { background: var(--surface); border-color: var(--line); color: var(--ink); }
.tb-bell { background: var(--surface); border-color: var(--line); }
.tb-bell::after { background: var(--gp-green); border-color: var(--surface); }

/* cards genéricos */
.card { border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.card-title, .section-title { color: var(--ink); }
th { background: var(--surface-2); color: var(--muted); letter-spacing: .02em; text-transform: none; font-size: 12px; }
tbody tr:hover { background: var(--surface-2); }

/* badges / severidade */
.badge { font-weight: 600; }
.badge-ok { background: var(--soft); color: var(--verde-txt); }
.sev-info { background: var(--surface-2); color: var(--muted); }
.modal { border-radius: var(--radius-lg); }
.modal h3 { font-family: var(--display); }
.modal-backdrop { background: rgba(11,16,10,.55); }

/* ==========================================================================
   TELA PILOTO — detalhe do caixa (.cxd)
   ========================================================================== */
.cxd .cxd-back, .cxd .cxd-daynav button { border: 1.5px solid var(--line); border-radius: 12px; color: var(--ink); }
.cxd .cxd-back:hover, .cxd .cxd-daynav button:hover:not(:disabled) { border-color: var(--gp-green); color: var(--verde-txt); }

/* Cabeçalho do caixa: claro, com o medidor de conciliação (anel do "G" + check). */
.cxd .cxd-head {
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  border-radius: 24px; padding: 22px 26px; gap: 22px; box-shadow: var(--shadow-md);
}
.cxd .cxd-head .hico { display: none; }
.cxd .cxd-head .htitle { font-family: var(--display); font-size: 24px; font-weight: 700; letter-spacing: -.015em; gap: 12px; }
.cxd .cxd-head .canal { background: var(--ink); color: var(--surface); font-family: var(--display); font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 8px; letter-spacing: 0; }
.cxd .cxd-head .hsub { color: var(--muted); font-size: 13px; gap: 18px; margin-top: 6px; }
.cxd .cxd-head .hsub b { color: var(--ink); }
.cxd .cxd-head .hstatus { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.cxd .hstatus .pill { background: var(--surface-2); color: var(--ink); }
.cxd .hstatus .pill.ok { background: var(--soft); color: var(--verde-txt); }

.gp-meter { display: flex; align-items: center; gap: 14px; padding-left: 22px; border-left: 1px solid var(--line); }
.gp-meter svg { width: 68px; height: 68px; flex: none; }
.gp-meter .trk { stroke: var(--soft); }
.gp-meter .arc { stroke: var(--gp-green); transition: stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1); }
.gp-meter .chk { stroke: var(--line); transition: stroke .3s; }
.gp-meter.full .chk { stroke: var(--gp-green); }
.gp-meter .n { font-family: var(--display); font-size: 22px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.gp-meter .n small { font-size: 14px; font-weight: 600; color: var(--muted); }
.gp-meter .l { font-size: 12.5px; color: var(--muted); margin-top: 4px; max-width: 15ch; line-height: 1.3; }
@media (prefers-reduced-motion: reduce) { .gp-meter .arc, .gp-meter .chk { transition: none; } }

/* cards da conferência */
.cxd .card { border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); padding: 20px 22px; }
.cxd .section-title, .cxd .card-title { font-size: 15px; color: var(--ink); font-weight: 600; }
.cxd .section-title svg { color: var(--gp-green); }
.cxd .section-title span[style*="font-weight:400"] { color: var(--muted) !important; font-family: "Inter", sans-serif; }
.cxd thead th { background: transparent; color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none; border-bottom: 1px solid var(--line); }
.cxd tbody td { border-bottom: 1px solid var(--surface-2); color: var(--ink); }
.cxd tbody tr:hover { background: var(--bg); }

/* resumo do relatório: livro-caixa */
.cxd .recon { border: 1px solid var(--line); border-radius: 16px; background: var(--bg); }
.cxd .recon .rh { font-family: var(--display); font-size: 12.5px; font-weight: 600; color: var(--muted); margin: 2px 0 6px; }
.cxd .recon .fl { padding: 5px 0; font-size: 13.5px; }
.cxd .recon .fl .op { color: var(--muted); }
.cxd .recon .fl.eq { border-top: 1px solid var(--line); }
.cxd .recon .fl.eq .v, .cxd .recon .fl.eq .tnum { color: var(--ink); }
.cxd .recon .mut { color: var(--muted); }
.cxd .recon-warn { color: var(--warning); background: var(--warning-bg); border-radius: 12px; padding: 10px 14px; }
.cxd .divbar { border-radius: 14px; }
.cxd .divbar.ok { background: var(--soft); }
.cxd .divbar.ok .lab, .cxd .divbar.ok .val { color: var(--verde-txt); }

/* colapsáveis (grupos de recebimentos, alertas) */
.cxd details { border: 1px solid var(--line); border-radius: 14px; }
.cxd summary { background: var(--surface); }
.cxd summary:hover { background: var(--bg); }
.cxd details[open] > summary { border-bottom: 1px solid var(--surface-2); }

/* barra de progresso dos recebimentos */
.cxd .mini-track { background: var(--soft) !important; }

/* relatório da IA */
.cxd .ia-report { border-radius: 20px; border-color: var(--line); }
.cxd .ia-report.ok .ia-report-header { background: linear-gradient(180deg, var(--soft), var(--surface)); }
/* ação secundária: o único verde cheio da tela é "Marcar como Conferido" */
.cxd .ia-confirm { background: var(--surface); color: var(--verde-txt); border: 1.5px solid var(--gp-green); border-radius: 10px; }
.cxd .ia-confirm:hover { background: var(--soft); }
.cxd .ia-dismiss { background: var(--surface); border: 1.5px solid var(--line); color: var(--muted); padding: 6px 12px; }
.cxd .ia-dismiss:hover { border-color: var(--muted); color: var(--ink); background: var(--surface); }

/* ações do conferente */
.cxd .analysis-side .btn-success { justify-content: center; }
.cxd .analysis-side .btn-ghost { background: var(--surface); }

/* documentos */
.cxd .doc-viewer { background: var(--surface-2); border-radius: 16px; }
.cxd .doc-thumb { border-color: var(--line); border-radius: 12px; }
.cxd .doc-thumb:hover { border-color: var(--gp-green); }
.ico-inline { width: 15px; height: 15px; vertical-align: -3px; flex: none; }
.cxd .doc-thumb .doc-icon { color: var(--verde-txt); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--soft); }

@media (max-width: 900px) {
  .cxd .cxd-head { flex-wrap: wrap; }
  .cxd .cxd-head .hstatus { margin-left: 0; width: 100%; justify-content: space-between; }
  .gp-meter { border-left: 0; padding-left: 0; }
}

/* card de erro da IA e ícone do veredito */
.ia-erro { border: 1px solid #F1C9C5 !important; background: var(--danger-bg) !important; border-radius: 20px; }
.ia-ico { display: grid; place-items: center; }
.ia-ico .ico-inline { width: 22px; height: 22px; }

/* logo do menu: versão positiva no claro, negativa no escuro */
.sidebar .lg-escuro { display: none; }
html[data-tema="escuro"] .sidebar .lg-escuro { display: block; }
html[data-tema="escuro"] .sidebar .lg-claro { display: none; }
html[data-tema="escuro"] .sb-full img.lg-escuro { filter: drop-shadow(0 6px 22px rgba(134,182,37,.28)); }
.sb-sub span { color: var(--nav-active-fg); }
html:not([data-tema="escuro"]) .sb-sub span { color: #1A1A18; }

/* botão de tema (topo) */
.tb-theme { width: 38px; height: 38px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); cursor: pointer; display: grid; place-items: center; transition: color .15s, border-color .15s, background-color .15s; }
.tb-theme:hover { color: var(--ink); border-color: var(--gray-300); }
.tb-theme:focus-visible { outline: none; box-shadow: var(--focus); }
.tb-theme svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tb-theme .i-sol { display: none; }
html[data-tema="escuro"] .tb-theme .i-lua { display: none; }
html[data-tema="escuro"] .tb-theme .i-sol { display: block; }

/* botões brancos sobre cabeçalhos de marca continuam brancos nos dois temas */
.btn-white, .cdash .btn-white, .lnf .btn-white { background: #fff; color: #1A1A18; }

/* ===== TODOS OS CAIXAS / FILA — escopado em .cxl ===== */
:root {
  --faint: #8A8E80;
  --st-ok: #1F6B45; --st-ok-bg: #E3F4EA; --st-wait: #8A5A00; --st-wait-bg: #FFF1D6;
  --st-an: #4C4C48; --st-an-bg: #EEF0E8; --st-inv: #B42323; --st-inv-bg: #FCE8E8;
}
html[data-tema="escuro"] {
  --faint: #7C8672;
  --st-ok: #A8D64F; --st-ok-bg: rgba(134,182,37,.16); --st-wait: #F2C14E; --st-wait-bg: rgba(233,168,0,.16);
  --st-an: #BBC4B1; --st-an-bg: #1B2218; --st-inv: #F2938C; --st-inv-bg: rgba(214,69,69,.16);
}
.cxl { container-type: inline-size; container-name: tela; }
.cxl .tnum { font-variant-numeric: tabular-nums; }

/* faixa de totais = filtro rápido por status */
.cxl .chips { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.cxl .chip { flex: 1 1 150px; min-width: 140px; display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 13px 16px 12px; border: 1px solid var(--line); background: var(--surface); border-radius: 14px; cursor: pointer; font: inherit; color: var(--ink); box-shadow: var(--shadow); transition: border-color .15s, background-color .15s; }
.cxl .chip:hover { border-color: var(--accent); }
.cxl .chip:focus-visible { outline: none; box-shadow: var(--focus); }
.cxl .chip .l { display: flex; align-items: center; gap: 7px; font: 600 12.5px "Inter", sans-serif; color: var(--muted); }
.cxl .chip .d { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.cxl .chip .n { font: 700 26px/1.05 "Poppins", sans-serif; letter-spacing: -.01em; }
.cxl .chip .p { font-size: 12px; color: var(--faint); }
.cxl .chip[aria-pressed="true"] { border-color: var(--accent); background: var(--soft); box-shadow: inset 0 0 0 1px var(--accent); }
.cxl .chip[aria-pressed="true"] .l { color: var(--ink); }

/* barra de filtros */
.cxl .toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; padding: 0; background: none; border: 0; box-shadow: none; }
.cxl .search { position: relative; display: flex; align-items: center; }
.cxl .search > svg { position: absolute; left: 13px; width: 17px; height: 17px; color: var(--faint); pointer-events: none; z-index: 1; }
.cxl .search input[type=text], .cxl .toolbar input[type=date] { height: 42px; border: 1px solid var(--line); background: var(--campo); color: var(--ink); border-radius: 12px; font: 500 14px "Inter", sans-serif; padding: 0 14px; }
.cxl .search input[type=text] { width: 100%; padding-left: 40px; }
.cxl .search input::placeholder { color: var(--faint); }
.cxl .toolbar input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); }
.cxl .daterange { display: flex; align-items: center; gap: 8px; color: var(--faint); font-size: 13px; }
.cxl .daterange input { width: 152px; }
.cxl .btn-clear { height: 42px; padding: 0 16px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 12px; font: 600 13.5px "Inter", sans-serif; cursor: pointer; }
.cxl .btn-clear:hover { color: var(--ink); border-color: var(--accent); }

/* painel + tabela */
.cxl .panel { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.cxl .ch { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.cxl .ch .t { font: 600 15px "Poppins", sans-serif; display: flex; align-items: center; gap: 10px; color: var(--ink); }
.cxl .count { font: 500 13px "Inter", sans-serif; color: var(--muted); background: none; border: 0; padding: 0; }
.cxl .filtro-ativo { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px "Inter", sans-serif; color: var(--verde-txt); background: var(--soft); border-radius: 999px; padding: 4px 6px 4px 11px; }
.cxl .filtro-ativo button { width: 20px; height: 20px; border-radius: 50%; border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; }
.cxl .filtro-ativo button:hover { background: var(--line); }
.cxl .tbl-wrap { overflow-x: auto; }
.cxl table { width: 100%; border-collapse: collapse; }
.cxl thead th { text-align: left; font: 600 12px "Inter", sans-serif; letter-spacing: 0; text-transform: none; color: var(--faint); padding: 11px 22px; border-bottom: 1px solid var(--line); background: var(--surface-2); white-space: nowrap; }
.cxl .r-al { text-align: right; }
.cxl tbody td { padding: 14px 22px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink); white-space: nowrap; vertical-align: middle; }
.cxl tbody tr { cursor: pointer; transition: background-color .12s; }
.cxl tbody tr:hover { background: var(--surface-2); }
.cxl tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.cxl tbody tr:last-child td { border-bottom: 0; }
.cxl td.id { font-weight: 600; color: var(--muted); width: 1%; }
.cxl td.lj b { display: block; font-weight: 600; color: var(--ink); }
.cxl td.lj small { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.cxl .meta-m { display: none; }
.cxl .pill { display: inline-flex; align-items: center; gap: 6px; font: 600 12px "Inter", sans-serif; padding: 4px 11px 4px 9px; border-radius: 999px; }
.cxl .pill .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.cxl .pill.ok { background: var(--st-ok-bg); color: var(--st-ok); }
.cxl .pill.wait { background: var(--st-wait-bg); color: var(--st-wait); }
.cxl .pill.an { background: var(--st-an-bg); color: var(--st-an); }
.cxl .pill.ia { background: var(--violeta-bg); color: var(--violeta); }
.cxl .pill.inv { background: var(--st-inv-bg); color: var(--st-inv); }
.cxl .pill.reab { background: var(--laranja-bg); color: var(--laranja); }
.cxl .alerta { display: inline-flex; align-items: center; gap: 6px; font: 600 13px "Inter", sans-serif; color: var(--st-wait); }
.cxl .alerta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cxl .zero { color: var(--faint); }
.cxl .semfech { font-size: 13px; color: var(--faint); font-style: normal; }
.cxl .acao { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 10px; font: 600 13px "Inter", sans-serif; cursor: pointer; border: 1px solid transparent; }
.cxl .acao.primaria { background: var(--accent); color: #1A1A18; }
.cxl .acao.primaria:hover { background: #9BCB2E; }
.cxl .acao.sec { background: transparent; border-color: var(--line); color: var(--ink); }
.cxl .acao.sec:hover { border-color: var(--accent); }
.cxl .acao:focus-visible { outline: none; box-shadow: var(--focus); }
.cxl .acao svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cxl .foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 22px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.cxl .foot b { color: var(--ink); font-weight: 600; }
.cxl .pg { display: flex; gap: 6px; align-items: center; }
.cxl .pg button { min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 10px; font: 600 13px "Inter", sans-serif; cursor: pointer; }
.cxl .pg button:hover:not(:disabled) { border-color: var(--accent); color: var(--ink); }
.cxl .pg button.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.cxl .pg button:disabled { opacity: .45; cursor: default; }
.cxl .pg .dots { padding: 0 2px; color: var(--faint); }
.cxl .vazio { padding: 54px 20px 58px; text-align: center; }
.cxl .vazio svg { width: 40px; height: 40px; stroke: var(--faint); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cxl .vazio h4 { font: 600 16px "Poppins", sans-serif; margin: 12px 0 6px; }
.cxl .vazio p { color: var(--muted); font-size: 14px; margin-bottom: 16px; }
.cxl .empty { padding: 34px 20px; text-align: center; color: var(--muted); font-size: 13px; }

/* conteúdo estreito (por largura do conteúdo, não da janela): linhas viram cartões */
@container tela (max-width: 760px) {
  .cxl .chips { display: grid; grid-template-columns: repeat(2, 1fr); }
  .cxl .chip { min-width: 0; }
  .cxl .daterange { width: 100%; } .cxl .daterange input { flex: 1; width: auto; }
  .cxl .ch { padding: 14px 16px; }
  .cxl table, .cxl tbody, .cxl tr, .cxl td { display: block; }
  .cxl thead { display: none; }
  .cxl tbody tr { padding: 14px 16px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; }
  .cxl tbody td { padding: 0; border: 0; }
  .cxl tbody tr:hover td:first-child { box-shadow: none; }
  .cxl td.id { grid-column: 2; grid-row: 1; text-align: right; width: auto; font-size: 13px; }
  .cxl td.lj { grid-column: 1; grid-row: 1; }
  .cxl td.cx, .cxl td.dt2, .cxl td.fc { display: none; }
  .cxl td.st { grid-column: 1; grid-row: 2; margin-top: 6px; }
  .cxl td.al { grid-column: 2; grid-row: 2; text-align: right; margin-top: 6px; }
  .cxl td.vl { grid-column: 1; grid-row: 3; font: 700 17px "Poppins", sans-serif; margin-top: 8px; text-align: left; }
  .cxl td.vl .semfech { font: 500 12.5px "Inter", sans-serif; }
  .cxl td.ac { grid-column: 2; grid-row: 3; margin-top: 6px; }
  .cxl .meta-m { display: block; font-size: 12px; color: var(--faint); margin-top: 2px; }
  .cxl .foot { padding: 12px 16px; }
}

/* celular: a data some do topo para o título caber (a data já aparece nas telas) */
@media (max-width: 768px) {
  .tb-chip { display: none; }
  .topbar-head { min-width: 0; flex: 1; }
}

/* ===== IMPORTAÇÕES — aviso de saúde, resultado e detalhe do erro (em .cxl) ===== */
.cxl .svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.cxl .saude { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); margin-bottom: 14px; flex-wrap: wrap; }
.cxl .saude .ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.cxl .saude .ic svg { width: 19px; height: 19px; }
.cxl .saude.em-dia .ic { background: var(--st-ok-bg); color: var(--st-ok); }
.cxl .saude.atraso { border-color: var(--b-warn); }
.cxl .saude.atraso .ic { background: var(--st-wait-bg); color: var(--st-wait); }
.cxl .saude .tx { flex: 1; min-width: 220px; }
.cxl .saude .tx b { display: block; font: 600 15px "Poppins", sans-serif; }
.cxl .saude .tx span { font-size: 13px; color: var(--muted); }
.cxl .saude .meta { font-size: 13px; color: var(--muted); text-align: right; }
.cxl .saude .meta b { color: var(--ink); font-weight: 600; }
.cxl .ch .dica { flex-basis: 100%; font-size: 13px; color: var(--muted); margin: -4px 0 0; }
.cxl tr.lin.erro td:first-child, .cxl tr.lin.erro:hover td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.cxl tr.lin.aberta td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.cxl .quando b { display: block; font-weight: 500; }
.cxl .quando small { font-size: 12px; color: var(--faint); }
.cxl .res { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.cxl .res b { font-weight: 600; }
.cxl .res.bom { color: var(--st-ok); } .cxl .res.aten { color: var(--st-wait); } .cxl .res.mau { color: var(--st-inv); }
.cxl .acao.peq { height: 30px; padding: 0 11px; font-size: 12.5px; }
.cxl .chev { width: 16px; height: 16px; stroke: var(--faint); fill: none; stroke-width: 2; stroke-linecap: round; transition: rotate .15s; vertical-align: -3px; margin-right: 4px; }
.cxl tr.aberta .chev { rotate: 90deg; }
.cxl tr.det > td { padding: 0; background: var(--surface-2); white-space: normal; }
.cxl tr.det:hover { background: var(--surface-2); cursor: default; }
.cxl .det-in { padding: 16px 22px 18px; display: grid; gap: 12px; box-shadow: inset 3px 0 0 var(--danger); }
.cxl .det-in h5 { font: 600 13px "Inter", sans-serif; color: var(--st-inv); display: flex; align-items: center; gap: 7px; }
.cxl .erros { list-style: none; padding: 0; display: grid; gap: 6px; }
.cxl .erros li { display: flex; gap: 10px; align-items: baseline; font-size: 13.5px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; }
.cxl .erros code { font: 600 12px ui-monospace, "SF Mono", monospace; color: var(--st-inv); background: var(--st-inv-bg); border-radius: 6px; padding: 2px 7px; white-space: nowrap; }
.cxl .como { font-size: 13px; color: var(--muted); line-height: 1.5; max-width: 78ch; }
.cxl .como b { color: var(--ink); font-weight: 600; }
.cxl .det-ac { display: flex; gap: 8px; flex-wrap: wrap; }
@container tela (max-width: 760px) {
  .cxl .saude .meta { text-align: left; flex-basis: 100%; }
  .cxl tr.lin { min-width: 0; }
  .cxl tr.lin td:first-child, .cxl tr.lin:hover td:first-child { box-shadow: none !important; }
  .cxl tr.lin.erro { box-shadow: inset 3px 0 0 var(--danger); }
  .cxl tbody td { white-space: normal; min-width: 0; }
  .cxl .quando b, .cxl .quando small { display: inline; font-weight: 400; }
  .cxl .quando small::before { content: ' · '; }
  .cxl td.qd { grid-column: 1 / -1; grid-row: 2; font-size: 12.5px; color: var(--faint); }
  .cxl td.rs { grid-column: 2; grid-row: 3; margin-top: 6px; justify-self: end; text-align: right; }
  .cxl .res { justify-content: flex-end; flex-wrap: wrap; }
  .cxl td.ac { grid-column: 1 / -1; grid-row: 4; margin-top: 8px; text-align: left; }
  .cxl tr.det { display: block; } .cxl tr.det > td { display: block; } .cxl .det-in { padding: 14px 16px; }
}
:root { --b-warn: #F0C98A; }
@container tela (max-width: 760px) {
  .cxl td.st, .cxl td.rs { margin-top: 10px; }
}

/* ===== MEIOS DE PAGAMENTO (em .cxl) e formulário (.mm, dentro do modal genérico) ===== */
.cxl .intro { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.cxl .intro p { color: var(--muted); font-size: 14px; line-height: 1.5; max-width: 74ch; }
.cxl .intro p b { color: var(--ink); font-weight: 600; }
.cxl .nova { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--accent); color: #1A1A18; font: 600 14px "Inter", sans-serif; cursor: pointer; }
.cxl .nova:hover { background: #9BCB2E; } .cxl .nova:focus-visible { outline: none; box-shadow: var(--focus); }
.cxl .pend { border: 1px solid var(--b-warn); background: var(--surface); border-radius: 14px; box-shadow: var(--shadow); margin-bottom: 14px; overflow: hidden; }
.cxl .pend-h { display: flex; gap: 12px; align-items: center; padding: 14px 18px; background: var(--st-wait-bg); }
.cxl .pend-h .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--st-wait); background: var(--surface); flex: none; }
.cxl .pend-h .ic svg { width: 18px; height: 18px; }
.cxl .pend-h b { display: block; font: 600 14.5px "Poppins", sans-serif; color: var(--ink); }
.cxl .pend-h span { font-size: 13px; color: var(--muted); }
.cxl .pend ul { list-style: none; padding: 0; margin: 0; }
.cxl .pend li { display: flex; align-items: center; gap: 14px; padding: 11px 18px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.cxl .pend li code { font: 600 13px ui-monospace, "SF Mono", monospace; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 4px 9px; }
.cxl .pend li .qt { color: var(--muted); font-size: 13px; flex: 1; min-width: 180px; }
.cxl td.rot b { font-weight: 600; letter-spacing: .01em; }
.cxl tr.inativa td { color: var(--faint); } .cxl tr.inativa td.rot b { color: var(--muted); font-weight: 500; }
.cxl .cn { display: inline-flex; align-items: center; font: 600 12px "Inter", sans-serif; padding: 4px 11px; border-radius: 999px; background: var(--st-an-bg); color: var(--st-an); }
.cxl .cn.tef { background: var(--soft); color: var(--verde-txt); } .cxl .cn.pos { background: var(--violeta-bg); color: var(--violeta); } .cxl .cn.pix { background: var(--laranja-bg); color: var(--laranja); }
@container tela (max-width: 760px) {
  .cxl .nova { width: 100%; justify-content: center; }
  .cxl .pend-h, .cxl .pend li { padding-left: 14px; padding-right: 14px; }
  .cxl td.rot { grid-column: 1; } .cxl td.cn2 { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; color: var(--muted); font-size: 13px; }
  .cxl td.bd, .cxl td.tp, .cxl td.fx, .cxl td.us { display: none; }
  .cxl tbody tr.lin:has(td.rot) td.st { grid-column: 2; grid-row: 1; justify-self: end; margin-top: 0; }
  .cxl .cn2 .meta-m { display: inline; }
}
.mm { display: grid; gap: 16px; }
.mm .campo label, .mm .campo .lb { display: block; font: 600 13px "Inter", sans-serif; margin-bottom: 6px; color: var(--ink); }
.mm .campo label i { color: var(--danger); font-style: normal; }
.mm .campo small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 6px; line-height: 1.45; }
.mm .campo input:not([type=radio]), .mm .campo select { width: 100%; height: 42px; border: 1px solid var(--line); background: var(--campo); color: var(--ink); border-radius: 12px; font: 500 14px "Inter", sans-serif; padding: 0 14px; }
.mm .campo input:focus, .mm .campo select:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); }
.mm .campo input[disabled] { background: var(--surface-2); color: var(--muted); }
.mm .seg3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mm .seg3 label { margin: 0; position: relative; }
.mm .seg3 input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.mm .seg3 span { display: flex; align-items: center; justify-content: center; height: 42px; border: 1px solid var(--line); border-radius: 12px; font: 600 13.5px "Inter", sans-serif; color: var(--muted); background: var(--campo); }
.mm .seg3 input:checked + span { border-color: var(--accent); background: var(--soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent); }
.mm .seg3 input:focus-visible + span { box-shadow: var(--focus); }
.mm .duas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mm .faixa-in { display: flex; align-items: center; gap: 8px; } .mm .faixa-in span { color: var(--faint); font-size: 13px; }
.mm .campo.erro input { border-color: var(--danger); }
.mm .campo .msg { display: none; color: var(--danger); font-size: 12.5px; margin-top: 6px; } .mm .campo.erro .msg { display: block; }
.mm .previa { display: flex; gap: 10px; align-items: flex-start; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.mm .previa b { color: var(--ink); font-weight: 600; } .mm .previa svg { margin-top: 2px; color: var(--verde-txt); width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; flex: none; }
.mm .sw { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.mm .sw b { display: block; font: 600 13.5px "Inter", sans-serif; } .mm .sw span { font-size: 12.5px; color: var(--muted); }
.mm .sw input { appearance: none; width: 44px; height: 26px; border-radius: 999px; background: var(--gray-300); position: relative; cursor: pointer; flex: none; border: 0; transition: background-color .15s; }
.mm .sw input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: translate .15s; }
.mm .sw input:checked { background: var(--accent); } .mm .sw input:checked::after { translate: 18px 0; }
.mm .sw input:focus-visible { outline: none; box-shadow: var(--focus); }
@media (max-width: 520px) { .mm .duas { grid-template-columns: 1fr; } }

/* modalidade cadastrada automaticamente (a revisar) */
.cxl .tag-auto { display: inline-flex; align-items: center; margin-left: 8px; padding: 2px 9px; border-radius: 999px; font: 600 11.5px "Inter", sans-serif; letter-spacing: 0; background: var(--st-wait-bg); color: var(--st-wait); vertical-align: 1px; }
.cxl td.rot { white-space: normal; min-width: 180px; max-width: 320px; }