@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=DM+Mono:wght@400;500&display=swap');

:root{
  /* Claro (padrão): a estrutura é escura e o conteúdo é claro. O branco não
     domina a tela, e o número continua no fundo mais legível que existe. */
  --bg:oklch(0.925 0.006 250);
  --surface:oklch(0.995 0.002 250);
  --panel:oklch(0.955 0.005 250);
  --panel-2:oklch(0.94 0.006 250);
  --line:oklch(0.87 0.008 250);
  --line-soft:oklch(0.925 0.006 250);
  --line-field:oklch(0.635 0.014 255);

  --ink:oklch(0.255 0.012 260);
  --ink-2:oklch(0.475 0.014 260);
  --ink-3:oklch(0.495 0.014 260);

  --accent:oklch(0.44 0.13 250);
  --accent-hi:oklch(0.52 0.14 250);
  --on-accent:oklch(0.99 0.003 250);

  /* estrutura: barra lateral e cabeçalho de tabela */
  --nav:oklch(0.26 0.035 262);
  --nav-2:oklch(0.31 0.04 262);
  --nav-3:oklch(0.37 0.06 262);
  --nav-line:oklch(0.33 0.04 262);
  --on-nav:oklch(0.86 0.02 262);
  --on-nav-2:oklch(0.70 0.03 262);
  --on-nav-hi:oklch(0.99 0.004 262);

  --pos:oklch(0.46 0.09 155);   --pos-bg:oklch(0.955 0.03 155);   --pos-bar:oklch(0.62 0.07 155);
  --neg:oklch(0.505 0.13 27);   --neg-bg:oklch(0.962 0.025 27);   --neg-bar:oklch(0.65 0.1 27);
  --neg-line:oklch(0.87 0.05 27);
  --neg-on-nav:oklch(0.76 0.14 25);   /* vermelho sobre a barra escura */
  --warn:oklch(0.50 0.1 75);    --warn-bg:oklch(0.965 0.04 85);

  --sbw:220px;
  --r:8px; --r-s:6px;
  --pad:28px;
  --ease:cubic-bezier(.22,1,.36,1);
  --dur:.16s;
  --shadow:0 1px 2px oklch(0.2 0.02 260 / .07);
  --shadow-pop:0 14px 34px -12px oklch(0.2 0.02 260 / .3), 0 2px 6px oklch(0.2 0.02 260 / .08);
  --scrim:oklch(0.2 0.02 260 / .55);
}

/* Escuro: mesma estrutura, para quem prefere trabalhar no grafite. */
:root[data-theme="dark"]{
  --bg:oklch(0.19 0.012 265);
  --surface:oklch(0.235 0.014 265);
  --panel:oklch(0.215 0.014 265);
  --panel-2:oklch(0.27 0.016 265);
  --line:oklch(0.325 0.016 265);
  --line-soft:oklch(0.285 0.014 265);
  --line-field:oklch(0.56 0.022 265);

  --ink:oklch(0.965 0.005 265);
  --ink-2:oklch(0.80 0.012 265);
  --ink-3:oklch(0.735 0.014 265);

  --accent:oklch(0.78 0.13 195);
  --accent-hi:oklch(0.85 0.11 195);
  --on-accent:oklch(0.19 0.03 230);

  --nav:oklch(0.215 0.014 265);
  --nav-2:oklch(0.27 0.016 265);
  --nav-3:oklch(0.33 0.03 250);
  --nav-line:oklch(0.31 0.016 265);
  --on-nav:oklch(0.85 0.012 265);
  --on-nav-2:oklch(0.72 0.014 265);
  --on-nav-hi:oklch(0.98 0.005 265);

  --pos:oklch(0.82 0.16 158);  --pos-bg:oklch(0.31 0.06 158);  --pos-bar:oklch(0.66 0.13 165);
  --neg:oklch(0.75 0.15 25);   --neg-bg:oklch(0.315 0.07 25);  --neg-bar:oklch(0.6 0.15 25);
  --neg-line:oklch(0.42 0.09 25);
  --neg-on-nav:oklch(0.75 0.15 25);
  --warn:oklch(0.85 0.12 85);  --warn-bg:oklch(0.32 0.055 85);

  --shadow:0 1px 2px oklch(0 0 0 / .45);
  --shadow-pop:0 18px 42px -14px oklch(0 0 0 / .72), 0 2px 8px oklch(0 0 0 / .4);
  --scrim:oklch(0.12 0.01 265 / .66);
}


*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Nunito Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.011em;line-height:1.25}
h1{font-size:22px}
h2{font-size:15px}

.mono,.num,td.mono,td.num{
  font-family:'DM Mono',ui-monospace,monospace;
  font-variant-numeric:tabular-nums; font-size:13px;
}
.num,td.num{text-align:left}

/* rótulo curto em caixa alta — nunca cresce, nunca vira frase */
.lbl,.hint,.navsec,.chip,.kpi .lbl,.cob .f,.sidebar .foot .who{
  font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3);
}

::selection{background:color-mix(in oklch, var(--accent) 25%, var(--surface));color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}

/* ── Blocos ────────────────────────────────────────────────────────────── */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);overflow:hidden;
}
.cardhead{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 16px;border-bottom:1px solid var(--line-soft);
}

/* aviso de conta que não fecha — o único bloco que pode gritar */
.alerta{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--neg-bg);border:1px solid var(--neg-line);border-radius:var(--r);
  padding:14px 16px;margin-bottom:22px;
}
.alerta .ic{color:var(--neg);flex:none;margin-top:1px}
.alerta h2{color:var(--neg);font-size:14px;margin-bottom:3px}
.alerta p{margin:0;font-size:13px;color:var(--ink-2)}

/* ── Botões ────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:34px;padding:0 13px;border-radius:var(--r-s);cursor:pointer;
  background:var(--accent);color:var(--on-accent);border:1px solid var(--accent);
  font-family:inherit;font-size:13.5px;font-weight:600;white-space:nowrap;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.btn:hover{background:var(--accent-hi);border-color:var(--accent-hi);text-decoration:none}
.btn:active{transform:translateY(.5px)}
.btn.ghost{background:var(--surface);color:var(--ink-2);border-color:var(--line-field)}
.btn.ghost:hover{background:var(--panel);color:var(--ink);border-color:var(--ink-3)}
.btn.gold{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.danger{background:var(--surface);color:var(--neg);border-color:var(--neg-line)}
.btn.danger:hover{background:var(--neg-bg)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.lnk{
  background:none;border:none;padding:0;color:var(--accent);cursor:pointer;
  font-family:inherit;font-size:13px;text-decoration:underline;text-underline-offset:2px;
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ── Shell mobile ──────────────────────────────────────────────────────── */
body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
.top{
  position:sticky;top:0;z-index:30;background:var(--nav);color:var(--on-nav-hi);
  padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.top h1{font-size:17px;color:var(--on-nav-hi)}
.top .sub{font-size:12px;color:var(--on-nav-2)}
.top button{background:none;border:1px solid var(--nav-line);color:var(--on-nav);border-radius:var(--r-s);height:32px;padding:0 10px;font-family:inherit;font-size:12px}
.tabs{
  position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;
  background:var(--nav);border-top:1px solid var(--nav-line);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.tabs[hidden]{display:none}
.tabs a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 0 8px;color:var(--on-nav-2);font-size:11px;font-weight:600;letter-spacing:.02em}
.tabs a svg{width:20px;height:20px}
.tabs a.active{color:var(--on-nav-hi)}
.tabs a:hover{text-decoration:none}
.wrap{padding:16px 16px 24px;max-width:720px;margin:0 auto}
.stack{display:grid;gap:12px}
.hint{font-size:13px;color:var(--ink-3)}
.offline{background:var(--warn-bg);color:var(--warn);font-size:12px;font-weight:600;padding:6px 16px;text-align:center}
.offline[hidden]{display:none}

/* lista de pontos (Hoje, Roteiro) */
.ponto{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line-soft);color:var(--ink)}
.ponto:last-child{border-bottom:none}
.ponto:hover{text-decoration:none;background:var(--panel)}
.ponto .n{flex:1;min-width:0}
.ponto .n b{display:block;font-size:15px;font-weight:600}
.ponto .n small{display:block;font-size:12px;color:var(--ink-3);margin-top:1px}
.ponto .check{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line-field);flex:none;display:grid;place-items:center;font-size:12px}
.ponto.visitado .check{background:var(--pos);border-color:var(--pos);color:var(--on-accent)}
.ponto.visitado .n b{color:var(--ink-3);text-decoration:line-through}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:var(--panel);color:var(--ink-3)}
.pill.sim{color:var(--pos);background:var(--pos-bg)}
.pill.nao{color:var(--neg);background:var(--neg-bg)}
.pill.verificar{color:var(--warn);background:var(--warn-bg)}

/* dia (Roteiro) */
details.dia>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:13px 16px;font-weight:700;font-size:15px}
details.dia>summary::-webkit-details-marker{display:none}
details.dia>summary small{font-weight:500;color:var(--ink-3);font-size:12px}
details.dia[open]>summary{border-bottom:1px solid var(--line-soft)}
.logistica{padding:10px 16px;font-size:13px;color:var(--ink-2);border-top:1px solid var(--line-soft);display:grid;gap:4px}

/* ficha */
.ficha h1{font-size:22px;margin-bottom:4px}
.meta{display:flex;flex-wrap:wrap;gap:6px}
.passagem{padding:12px 14px;border-top:1px solid var(--line-soft)}
.passagem .ref{font-family:'DM Mono',monospace;font-size:12px;color:var(--ink-3);margin-bottom:6px}
.passagem p{margin:0;font-size:15px;line-height:1.65}
.acoes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn{height:44px;font-size:14px}
textarea.nota{width:100%;min-height:88px;padding:10px 12px;border:1px solid var(--line-field);border-radius:var(--r-s);background:var(--surface);color:var(--ink);font-family:inherit;font-size:14px;resize:vertical}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;padding:12px 14px;font-size:13px}
.kv .lbl{align-self:center}
.kv.um{grid-template-columns:1fr}

/* lembretes */
.form{display:grid;gap:10px;padding:14px}
.form input,.form textarea{width:100%;height:44px;padding:0 12px;border:1px solid var(--line-field);border-radius:var(--r-s);background:var(--surface);color:var(--ink);font-family:inherit;font-size:14px}
.form textarea{height:auto;min-height:72px;padding:10px 12px}
.erro{color:var(--neg);font-size:12px;min-height:16px}
.lembrete{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-bottom:1px solid var(--line-soft)}
.lembrete:last-child{border-bottom:none}
.lembrete .q{font-family:'DM Mono',monospace;font-size:12px;color:var(--ink-3);white-space:nowrap}
.lembrete .t{flex:1;font-size:14px}
.lembrete.enviado .t{color:var(--ink-3)}

/* login */
.login{min-height:70vh;display:grid;place-items:center;padding:24px}
.login .card{width:100%;max-width:360px;padding:22px;display:grid;gap:8px}
.login input{width:100%;height:48px;text-align:center;font-family:'DM Mono',monospace;font-size:22px;letter-spacing:.3em;text-transform:uppercase;border:1px solid var(--line-field);border-radius:var(--r-s);background:var(--surface);color:var(--ink)}

/* mapa */
#mapa{height:calc(100vh - 64px - 52px - 47px - env(safe-area-inset-bottom,0px));width:100%}
.mapa-filtros{display:flex;gap:6px;padding:8px 12px;overflow-x:auto;background:var(--surface);border-bottom:1px solid var(--line)}
.mapa-filtros button{flex:none;height:30px;padding:0 10px;border-radius:999px;border:1px solid var(--line-field);background:var(--surface);color:var(--ink-2);font-family:inherit;font-size:12px;font-weight:600}
.mapa-filtros button.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

@media (prefers-reduced-motion: reduce){ *{transition-duration:0s!important} }