/* ===== Brand 2025 — Azul #00006B + Branco (AA) ===== */
/* Base fixa (não muda com o tema) */
:root{
  --brand:#00006B; --brand-dark:#000051; --brand-soft: rgba(0,0,107,.10);
  --ok:#10b981; --warn:#f59e0b; --err:#ef4444;
  --radius:16px; --gap:14px;
  --shadow: 0 18px 40px rgba(10,20,50,.08);
  --shadow-sm: 0 10px 26px rgba(10,20,50,.06);
  --font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans";
}

/* Paletas controladas SOMENTE por data-theme */
html[data-theme="light"]{
  --bg:#f3f5f9; --surface:#ffffff; --text:#0b1220; --muted:#6b7280; --border:#e5e7ee;
  --pill-bg: rgba(0,0,107,.10); --pill-border: rgba(0,0,107,.22); --pill-text: var(--brand);
  --link:#00006B;
}
html[data-theme="dark"]{
  --bg:#0b0f1a; --surface:#111827; --text:#e6ebf5; --muted:#a1a8b3; --border:#1f2937;
  --pill-bg: rgba(0,0,107,.40); --pill-border: rgba(255,255,255,.18); --pill-text:#fff;
  --link:#9db4ff;
}

/* ===== Reset/estrutura ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:var(--font); color:var(--text);
  background:
    radial-gradient(1100px 600px at 0% -10%, var(--brand-soft), transparent 50%),
    radial-gradient(900px 500px at 100% -10%, rgba(0,0,107,.06), transparent 55%),
    var(--bg);
}
.container{max-width:1000px;margin:0 auto;padding:16px}
.main{padding-top:clamp(20px,4vh,48px)}
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:clamp(16px,2.2vw,24px);
}

/* ===== Appbar ===== */
.appbar{
  position:sticky; top:0; z-index:30; border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, rgba(0,0,107,.06), rgba(0,0,107,0) 60%), var(--surface);
  backdrop-filter:saturate(160%) blur(8px);
}
.appbar .bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 16px; max-width:1000px; margin:0 auto;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px}
.brand .pill{
  display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:9999px;
  background:var(--pill-bg); color:var(--pill-text); border:1px solid var(--pill-border);
}
.brand .dot{width:10px;height:10px;border-radius:999px;background:var(--brand);}
.appbar .btn{border-radius:12px;padding:10px 14px}

/* ===== Tipografia ===== */
h1{margin:0 0 8px;font-size:clamp(22px,3.2vw,28px)}
h2{margin:0 0 8px;font-size:clamp(18px,3vw,22px)}
h3{margin:12px 0 8px;font-size:14px;color:var(--muted)}
.muted{color:var(--muted)}

/* ===== Form ===== */
label{display:block;font-size:12px;color:var(--muted);margin:0 0 6px}
input,select,textarea{
  width:100%; padding:12px 14px; border-radius:14px; background:#fff; color:var(--text);
  border:1px solid var(--border); outline:none; transition: box-shadow .15s, border .15s, transform .05s;
}
input:focus,select:focus,textarea:focus{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(0,0,107,.20) }
::placeholder{color:#9aa3af}

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  padding:12px 16px; border-radius:14px; border:1px solid var(--brand);
  background:var(--brand); color:#fff; font-weight:800; letter-spacing:.2px;
  box-shadow:var(--shadow-sm); transition: transform .05s, filter .15s, opacity .15s;
}
.btn:hover{filter:brightness(1.02)} .btn:active{transform:translateY(1px)}
.btn.secondary{ background:#fff; color:var(--brand); border-color:var(--brand) }
.btn.ghost{ background:transparent; color:var(--text); border:1px solid var(--border) }
.btn.icon{ width:42px; height:42px; padding:0; border-radius:12px; display:inline-flex; align-items:center; justify-content:center }
.btn.icon svg{ width:20px; height:20px; fill: currentColor; display:block }
.btn[disabled], .btn.disabled{opacity:.55;cursor:not-allowed}
/* ícones dentro de botões (exceto botões .icon do header) */
.btn:not(.icon) svg{
  width:20px; height:20px; display:inline-block;
  margin-right:6px; fill:currentColor;
}


/* ===== Helpers ===== */
.row{display:grid;gap:var(--gap);grid-template-columns:1fr}
@media (min-width:640px){.row-2{grid-template-columns:1fr 1fr}.row-3{grid-template-columns:1fr 1fr 1fr}}
.actions{display:flex;flex-wrap:wrap;gap:var(--gap)}
.center{text-align:center}.right{justify-content:flex-end}

/* Badges/avisos */
.badge{display:inline-block;padding:6px 10px;border-radius:999px;font-size:12px;border:1px solid var(--border);background:#fff;color:var(--text)}
.badge.ok{background:rgba(16,185,129,.14);border-color:rgba(16,185,129,.35);color:#059669}
.badge.warn{background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.35);color:#b45309}
.badge.err{background:rgba(239,68,68,.16);border-color:rgba(239,68,68,.40);color:#b91c1c}
html[data-theme="dark"] .badge:not(.ok):not(.warn):not(.err){
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: var(--text);
}
.notice{padding:10px 12px;border-radius:12px;border:1px dashed var(--border);background:rgba(0,0,107,.05)}

/* Status em tempo real */
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;background:#9ca3af;vertical-align:middle}
.dot.online{background:var(--ok); box-shadow:0 0 0 0 rgba(16,185,129,.65); animation:pulse 1.5s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.65)}70%{box-shadow:0 0 0 12px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}

/* ===== Tables ===== */
.table-wrap{width:100%;overflow:auto}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:12px;border-bottom:1px solid var(--border);font-size:14px}
.table thead th{position:sticky;top:0;background:var(--surface);z-index:1}
.table tr:hover td{background:rgba(0,0,107,.03)}
html[data-theme="dark"] .table tr:hover td{ background: rgba(255,255,255,.05) }

/* Mobile: linhas viram cards */
@media (max-width:760px){
  .table thead{display:none}
  .table, .table tbody, .table tr, .table td{display:block;width:100%}
  .table tr{background:#fff;border:1px solid var(--border);border-radius:14px;padding:10px;margin-bottom:12px;box-shadow:var(--shadow-sm)}
  .table td{border:0;padding:8px 0}
  .table td::before{content:attr(data-label);display:block;font-size:12px;color:var(--muted);margin-bottom:2px}
}

/* ===== Links ===== */
a{color:var(--link);text-decoration:none} a:hover{text-decoration:underline}

/* ===== Ponto: ação destacada + mobile FAB ===== */
.btn-enter{ background:#16a34a; border-color:#16a34a; color:#fff }
.btn-exit{  background:#dc2626; border-color:#dc2626; color:#fff }
.badge-enter{ background:rgba(22,163,74,.14); border:1px solid rgba(22,163,74,.38); color:#166534 }
.badge-exit{  background:rgba(220,38,38,.16);  border:1px solid rgba(220,38,38,.40); color:#b91c1c }
.action-card{ border:2px solid var(--border); box-shadow:var(--shadow) }
.action-card .status-line{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:4px 0 12px }
.action-card .status-line strong{ font-size:15px }
.action-button .btn{ min-height:54px; font-size:17px; font-weight:800 }

/* FAB (flutuante) – escondido por padrão no desktop */
.fabbar{ display:none }

/* Mobile */
@media (max-width:640px){
  .inline-action{ display:none }
  .fabbar{
    display:flex;                  /* agora com dois botões lado a lado */
    gap:12px;
    position:fixed; left:0; right:0; bottom:0;
    background:var(--surface); border-top:1px solid var(--border);
    box-shadow:var(--shadow-sm); padding:12px; z-index:50;
  }
  .fabbar .btn{ flex:1; min-height:56px; font-size:18px; border-radius:16px }
  .fabbar .btn.main{ flex:2 }      /* dá mais peso ao principal */
  body{ padding-bottom:92px }
}

@media (max-width:640px){
  .fabbar:has(.btn.icon):not(:has(.btn.main)){ justify-content:center; }
}


/* ícones dentro de botões (inline e FAB) */
.btn:not(.icon) svg{
  width:20px; height:20px; display:inline-block; margin-right:6px; fill:currentColor;
}

/* Safe area (iOS) */
@supports (padding: env(safe-area-inset-bottom)){
  @media (max-width:640px){
    .fabbar{ padding-bottom: calc(12px + env(safe-area-inset-bottom)) }
    body{ padding-bottom: calc(92px + env(safe-area-inset-bottom)) }
  }
}


/* ===== Transições suaves (tema) ===== */
body, .card, .appbar, .table td, .table th, input, select, textarea, .btn, .badge, .notice {
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* Mapa e info */
.mapbox{ width:100%; height:320px; border-radius:14px; overflow:hidden; border:1px solid var(--border); background:#e5e7eb }
@media (max-width:640px){ .mapbox{ height:260px } }

.info-block{ margin-top:12px }
.info-row{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.sep{ height:1px; background:var(--border); margin:10px 0 }
.grid-two{ display:grid; gap:14px; grid-template-columns:1fr 1fr }
@media (max-width:640px){ .grid-two{ grid-template-columns:1fr } }

/* Leaflet container ocupa toda a caixa */
#mapBox{ width:100%; height:100% }


/* Lembrar CPF - layout */
.remember{
  display:flex; align-items:center; gap:8px; margin-top:8px;
}
.remember input{
  width:18px; height:18px; accent-color: var(--brand);
}
.remember label{
  margin:0; color:var(--muted); font-size:13px; cursor:pointer;
}

/* Mobile: botões ocupam a largura sem quebrar */
@media (max-width:640px){
  form .actions .btn{ flex:1 }
}


/* ===== Header robusto (mobile-first) ===== */

/* evita Safari “engordar” fonte e quebrar header */
html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* barra com espaço pro notch */
.appbar{ padding-top: env(safe-area-inset-top, 0); }
.appbar .bar{
  display:flex; align-items:center; gap:12px;
  max-width:1000px; margin:0 auto; padding:10px 16px;
}

/* brand cresce, nav usa o resto */
.brand{ flex:1 1 auto; min-width:0 }   /* min-width:0 permite encolher corretamente */

/* ações com rolagem horizontal quando apertado */
.nav-actions{
  flex:0 1 auto;
  display:flex; align-items:center; gap:10px;
  overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
  padding:2px; max-width:100%;
  scrollbar-width:none;
}
.nav-actions::-webkit-scrollbar{ display:none }

/* tamanho consistente dos botões no header */
.appbar .btn{ height:40px; min-height:40px; padding:8px 12px; line-height:1; white-space:nowrap }
.appbar .btn.icon{ width:40px; height:40px; padding:0 }

/* pílula da marca reduz em telas pequenas */
@media (max-width: 520px){
  .appbar .bar{ gap:8px; padding:8px 12px }
  .brand .pill{ padding:4px 8px; font-size:13px }
  .appbar .btn{ height:36px; min-height:36px; padding:8px 10px; font-size:14px }
  .appbar .btn.icon{ width:36px; height:36px }
}

/* muito estreito: prioriza botões, mantém rolagem */
@media (max-width: 380px){
  .brand .pill{ max-width:50vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
}


/* Header sempre acima do mapa/controles */
.appbar{ z-index: 3000; }            /* era ~30 */

/* (opcional) abaixa um pouco os controles do Leaflet */
.leaflet-top, .leaflet-bottom{ z-index: 500; }

/* garante contexto pro card do mapa (safari) */
.card{ position: relative; }

/* Dark mode: campos brancos com texto escuro (corrige contraste) */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background:#fff;           /* mantém campo branco */
  color:#0b1220;             /* preto/azul-escuro */
  border-color:#334155;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(0,0,107,.25);
}

/* Dropdown do select (suporte do navegador pode variar) */
html[data-theme="dark"] select option{
  background:#fff;
  color:#0b1220;
}

/* Placeholder legível no dark com campo branco */
html[data-theme="dark"] ::placeholder{ color:#6b7280; }