:root {
  /* Paleta de azuis */
  --blue-900: #0f2a5c;
  --blue-800: #14337a;
  --blue-700: #1e3a8a;
  --blue-600: #2563eb;
  --blue-500: #3b82f6;
  --blue-400: #60a5fa;
  --blue-300: #93c5fd;
  --blue-100: #dbeafe;
  --blue-50:  #eff6ff;

  --ink:      #0f172a;
  --ink-soft: #475569;
  /* Medido: 5.1:1 sobre branco e 4.8:1 sobre o fundo da página. O valor
     antigo (#94a3b8) tinha 2.6:1 e reprovava na WCAG AA. Texto de apoio
     precisa ser lido no sol, não sugerido. */
  --muted:    #616f83;
  /* Só para elementos decorativos que não carregam informação (setas, traços). */
  --muted-weak: #94a3b8;
  --line:     #e2e8f0;
  --bg:       #f4f7fb;
  --card:     #ffffff;

  --ok:       #16a34a;
  --ok-ink:   #15803d;   /* verde legível sobre fundo claro */
  --ok-bg:    #dcfce7;
  --warn:     #d97706;
  --warn-bg:  #fef3c7;
  --danger:   #dc2626;   /* preenchimentos e bordas */
  /* Vermelho para TEXTO sobre fundo claro: 5.3:1 contra --danger-bg,
     enquanto o #dc2626 dava só 4.0:1. */
  --danger-ink: #b91c1c;
  --danger-bg:#fee2e2;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06);
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06);

  /* ---------- Escala tipográfica (razão ~1.15, própria de UI densa) ----------
     Antes havia 14 tamanhos diferentes, incluindo meios-pixels (13.5, 14.5).
     Sete degraus dão hierarquia suficiente e eliminam o ruído. */
  --fs-2xs: 11px;   /* contadores, badges numéricos */
  --fs-xs:  12px;   /* rótulos, metadados */
  --fs-sm:  13px;   /* texto de apoio */
  --fs-md:  14px;   /* corpo padrão da interface */
  --fs-lg:  15px;   /* ênfase, nomes de rebocador */
  --fs-xl:  17px;   /* títulos de seção e modal */
  --fs-2xl: 23px;   /* título de página */
  --fs-3xl: 28px;   /* números de destaque */

  /* ---------- Espaçamento (base 4px) ---------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;

  /* ---------- Camadas (nomeadas, não números soltos) ---------- */
  --z-sticky:   20;
  --z-dropdown: 30;
  --z-drawer:   90;
  --z-scrim:    80;
  --z-modal:    100;
  --z-toast:    200;
  --z-gate:     300;
  --z-envbar:   400;
  --z-boot:     500;

  /* ---------- Movimento ----------
     Ferramenta de trabalho: a interação tem que parecer instantânea.
     Curva de saída exponencial, sem bounce. */
  --dur-fast: 120ms;
  --dur:      180ms;
  --dur-slow: 240ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);

  /* Alvo mínimo de toque (WCAG 2.5.5 / Apple HIG). */
  --tap: 44px;
}

* { box-sizing: border-box; }
/* Garante que o atributo `hidden` sempre esconda o elemento, mesmo quando
   uma regra de classe define `display` (senão modais/pills ficam visíveis). */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Shell ---------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 264px;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--blue-800) 0%, var(--blue-900) 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand { display: flex; align-items: center; gap: 12px; padding: 6px 8px 20px; }
.brand-logo {
  border-radius: 10px; background: #fff; padding: 5px 7px; flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
}
.brand-logo img { height: 34px; width: auto; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-title { font-weight: 700; font-size: 18px; letter-spacing: .3px; }
.brand-sub { font-size: 12px; color: var(--blue-300); }

.nav { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: 10px;
  color: #dbe6ff; text-decoration: none;
  font-size: var(--fs-md); font-weight: 500;
  transition: background .15s, color .15s;
}
.nav-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-item.active { background: var(--blue-600); color: #fff; box-shadow: 0 6px 18px rgba(37,99,235,.4); }
.nav-ico { font-size: 17px; width: 22px; text-align: center; }

.sidebar-footer { margin-top: auto; padding-top: 16px; }
.perfil-tag {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 12px; font-weight: 700;
  border-radius: 8px; padding: 6px 8px; margin-bottom: 8px;
}
.perfil-tag.gest { color: #bbf7d0; background: rgba(22,163,74,.2); border: 1px solid rgba(134,239,172,.4); }
.perfil-tag.trip { color: #dbe6ff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); }
.perfil-tag.forn { color: #fde68a; background: rgba(217,119,6,.22); border: 1px solid rgba(251,191,36,.4); }

/* Ações destrutivas: escondidas para quem não é administrador. */
body:not(.is-admin) .admin-only { display: none !important; }

/* ---------- Tela de seleção de perfil (gate) ---------- */
.role-gate {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px;
  background: linear-gradient(160deg, var(--blue-800) 0%, var(--blue-900) 100%);
}
.login-card {
  background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.35);
  width: 100%; max-width: 380px; padding: 26px 24px;
}
.login-brand { display: flex; justify-content: center; margin-bottom: 6px; }
.login-brand img { height: 60px; width: auto; }
.login-card h2 { text-align: center; margin: 10px 0 2px; font-size: 19px; }
.login-sub { text-align: center; font-size: 13px; color: var(--ink-soft); margin-bottom: 18px; }
.seg-roles { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px; }
.seg-role {
  display: flex; align-items: center; gap: 11px; padding: 12px 13px; border: 1.5px solid var(--line);
  border-radius: 11px; cursor: pointer; background: #fff; text-align: left; font: inherit;
  transition: border-color .15s, background .15s;
}
.seg-role:hover { background: var(--blue-50); }
.seg-role.sel { border-color: var(--blue-400); background: var(--blue-50); box-shadow: 0 0 0 2px var(--blue-100); }
.seg-role .em { font-size: 22px; }
.seg-role .st b { font-weight: 700; font-size: var(--fs-md); color: var(--ink); }
.seg-role .st span { display: block; font-size: var(--fs-xs); color: var(--ink-soft); }
.seg-role .chk { margin-left: auto; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); flex-shrink: 0; }
.seg-role.sel .chk { border-color: var(--blue-600); background: var(--blue-600); box-shadow: inset 0 0 0 3px #fff; }
.pw-wrap { margin-bottom: 14px; }
.pw-wrap label { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-soft); margin-bottom: 5px; }
.pw-wrap input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  font-size: 14px; font-family: inherit; background: #fff; color: var(--ink);
}
.pw-wrap input:focus { outline: none; border-color: var(--blue-400); box-shadow: 0 0 0 3px var(--blue-100); }
.pw-err { font-size: 12px; color: var(--danger); margin-top: 6px; font-weight: 600; }
.btn-enter {
  width: 100%; border: none; background: var(--blue-600); color: #fff; font: inherit; font-weight: 700;
  font-size: 15px; padding: 12px; border-radius: 11px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(37,99,235,.3);
}
.btn-enter:hover { background: var(--blue-700); }
.btn-enter:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* ---------- Main / Topbar ---------- */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  height: 62px; background: var(--card);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 14px;
  padding: 0 24px; position: sticky; top: 0; z-index: 20;
}
.topbar-title { font-weight: 700; font-size: 17px; }
.topbar-user {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-soft);
}
.user-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.hamburger { display: none; background: none; border: none; font-size: 22px; cursor: pointer; color: var(--ink); }

/* flex:1 empurra o rodapé para o fim mesmo quando a tela tem pouco conteúdo.
   O centramento com max-width fica num filho, senão o flex-item estica demais. */
.content { flex: 1; padding: 26px 26px 0; width: 100%; }
.content > * { max-width: 1200px; margin-left: auto; margin-right: auto; }

/* ---------- Elements ---------- */
.page-head { margin-bottom: 22px; }
.page-head h1 { margin: 0 0 4px; font-size: 23px; letter-spacing: -.3px; }
.page-head p { margin: 0; color: var(--ink-soft); font-size: 14px; }

.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px; }
.toolbar .spacer { flex: 1; }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.card-pad { padding: 18px; }

/* Grid de cards */
.grid { display: grid; gap: 16px; }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* Stat cards */
.stat { padding: 18px; }
.stat .k { font-size: 13px; color: var(--ink-soft); }
.stat .v { font-size: 28px; font-weight: 800; margin-top: 6px; color: var(--blue-700); }
.stat .v small { font-size: 13px; font-weight: 600; color: var(--muted); }

/* Rebocador card (tintas) */
.tug-card { display: flex; flex-direction: column; }
.tug-card .tug-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 16px; border-bottom: 1px solid var(--line);
}
.tug-name { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.tug-badge {
  background: var(--blue-50); color: var(--blue-700);
  font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
}
.tug-body { padding: 6px 8px 8px; }
.can-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 8px; border-radius: 8px;
}
.can-row:hover { background: var(--blue-50); }
.can-swatch { width: 26px; height: 26px; border-radius: 7px; border: 1px solid rgba(0,0,0,.1); flex-shrink: 0; }
.can-info { flex: 1; min-width: 0; }
.can-info .t { font-size: 14px; font-weight: 600; }
.can-info .s { font-size: 12px; color: var(--muted); }
.qty { display: flex; align-items: center; gap: 6px; }
.qty button {
  width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line);
  background: #fff; cursor: pointer; font-size: 15px; font-weight: 700; color: var(--blue-700);
  line-height: 1;
}
.qty button:hover { background: var(--blue-100); }
.qty .n { min-width: 26px; text-align: center; font-weight: 700; }
.empty-hint { padding: 16px; text-align: center; color: var(--muted); font-size: 13px; }

/* Tables */
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tbl th {
  text-align: left; padding: 12px 14px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .4px; color: var(--ink-soft); border-bottom: 1px solid var(--line);
  background: var(--blue-50);
}
table.tbl td { padding: 12px 14px; border-bottom: 1px solid var(--line); }
table.tbl tr:last-child td { border-bottom: none; }
table.tbl tr:hover td { background: #fafcff; }
.tbl-wrap { overflow-x: auto; }

/* Trajeto (origem → destino) nas lanchas */
.trajeto { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.trajeto .seta { color: var(--muted); font-weight: 700; }
.row-aberto td { background: #fffdf5; }
.lancha-acoes { text-align: right; white-space: nowrap; }
.lancha-acoes .btn-sm { margin-right: 4px; }
.ticket-resumo {
  background: var(--blue-50); border: 1px solid var(--blue-100);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 16px;
}
.ticket-resumo .trajeto { margin-top: 6px; }
.dur-preview {
  font-size: 24px; font-weight: 800; color: var(--blue-700);
  padding: 8px 14px; background: var(--blue-50); border-radius: 10px; display: inline-block;
}
.horas-badge { color: var(--blue-700); }

/* Menu de exportação */
.export-wrap { position: relative; }
.export-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  background: #fff; border: 1px solid var(--line); border-radius: 11px;
  box-shadow: var(--shadow); padding: 6px; min-width: 180px;
  display: flex; flex-direction: column; gap: 2px;
}
.export-menu button {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 12px; border: none; background: none; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--ink); border-radius: 8px; text-align: left;
}
.export-menu button:hover { background: var(--blue-50); color: var(--blue-700); }

.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.pill-blue { background: var(--blue-100); color: var(--blue-700); }
.pill-roxo { background: #ede9fe; color: #6d28d9; }

/* Fluxo Energia de Terra — escolha do tipo (passo 1) */
.step-hint {
  font-size: 12px; color: var(--muted); margin: 0 0 14px;
  font-weight: 600; letter-spacing: .3px; text-transform: uppercase;
}
.choices { display: flex; flex-direction: column; gap: 12px; }
.choice {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer;
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px; padding: 16px;
  color: inherit; font: inherit; transition: border-color .15s, background .15s, transform .05s;
}
.choice:hover { border-color: var(--blue-400); background: var(--blue-50); }
.choice:active { transform: translateY(1px); }
.choice .c-emoji { font-size: 26px; line-height: 1; }
.choice .c-main { display: flex; flex-direction: column; }
.choice .c-t { font-weight: 700; font-size: 15px; }
.choice .c-s { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.choice .c-arrow { margin-left: auto; color: var(--muted); font-size: 18px; }
.link-back {
  background: none; border: none; color: var(--blue-600); font-weight: 600;
  cursor: pointer; font-size: 14px; padding: 0; font-family: inherit;
}
.link-back:hover { text-decoration: underline; }

/* Painel da frota (Energia de Terra) — cartões grandes por rebocador */
.fleetA { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.cardA {
  background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--st-c, var(--muted));
  border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden;
}
.cardA .nome { text-align: center; font-weight: 800; font-size: var(--fs-sm); padding: 11px 8px 8px; letter-spacing: .2px; }
.cardA .foto { background: var(--blue-50); padding: 6px 10px; }
.cardA .tug-art { width: 100%; height: auto; display: block; }
.cardA .status {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 10px; padding: 7px 8px; border-radius: 9px;
  background: var(--st-bg, var(--line)); color: var(--st-c, var(--ink-soft));
  font-weight: 700; font-size: var(--fs-xs); text-align: center;
}
/* Cores por status */
.cardA.st-livre { --st-c: #64748b; --st-bg: rgba(100,116,139,.14); }
.cardA.st-terra { --st-c: #2563eb; --st-bg: rgba(37,99,235,.13); }
.cardA.st-cede  { --st-c: #ea580c; --st-bg: rgba(234,88,12,.14); }
.cardA.st-receb { --st-c: #16a34a; --st-bg: rgba(22,163,74,.14); }

/* Tablet: dois cartões por linha, ilustração mantida.
   Abaixo de 560px o painel deixa de ser grade e vira lista — ver a
   seção "Painel da frota no celular" no fim deste arquivo. */
@media (max-width: 780px) { .fleetA { grid-template-columns: repeat(2, 1fr); } }
.pill-ok { background: var(--ok-bg); color: var(--ok); }
.pill-warn { background: var(--warn-bg); color: var(--warn); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 10px; border: 1px solid transparent;
  font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: background .15s, box-shadow .15s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--blue-600); color: #fff; box-shadow: 0 4px 14px rgba(37,99,235,.3); }
.btn-primary:hover { background: var(--blue-700); }
.btn-ghost { background: transparent; color: var(--blue-100); border: 1px solid rgba(255,255,255,.18); }
.btn-ghost:hover { background: rgba(255,255,255,.1); color: #fff; }
.btn-soft { background: var(--blue-50); color: var(--blue-700); border: 1px solid var(--blue-100); }
.btn-soft:hover { background: var(--blue-100); }
.btn-danger-soft { background: var(--danger-bg); color: var(--danger); }
.btn-danger-soft:hover { background: #fecaca; }
.btn-block { width: 100%; justify-content: center; }
.btn-sm { padding: 6px 12px; font-size: 13px; border-radius: 8px; }
.icon-btn { background: none; border: none; cursor: pointer; font-size: 15px; color: var(--muted); padding: 6px; border-radius: 7px; }
.icon-btn:hover { background: var(--line); color: var(--ink); }

/* Forms */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; font-size: 14px; font-family: inherit; background: #fff; color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue-400); box-shadow: 0 0 0 3px var(--blue-100);
}
.field-row { display: flex; gap: 12px; }
.field-row > .field { flex: 1; }

/* Sub-tabs (inspeções) */
.subtabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.subtab {
  padding: 9px 16px; border-radius: 9px 9px 0 0; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--ink-soft);
  border: 1px solid transparent; border-bottom: none; background: none;
  position: relative; top: 1px;
}
.subtab:hover { color: var(--blue-700); background: var(--blue-50); }
.subtab.active { color: var(--blue-700); background: #fff; border-color: var(--line); }

/* Checklist */
.checklist { display: flex; flex-direction: column; gap: 8px; }
.check-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 15px; border: 1px solid var(--line); border-radius: 11px; background: #fff;
  transition: border-color .15s, background .15s;
}
.check-item.done { background: #f6fef9; border-color: var(--ok-bg); }
.check-item input[type=checkbox] { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--blue-600); cursor: pointer; flex-shrink: 0; }
.check-item .ctext { flex: 1; font-size: var(--fs-md); line-height: 1.45; }
.check-item.done .ctext { text-decoration: line-through; color: var(--muted); }
.check-item .cmeta { font-size: 12px; color: var(--muted); margin-top: 3px; }

.progress { height: 9px; background: var(--blue-100); border-radius: 999px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--blue-500), var(--blue-600)); border-radius: 999px; transition: width .3s; }

.pill-danger { background: var(--danger-bg); color: var(--danger); }

/* ---------- Inspeção de bordo (checklist OK / RUIM) ---------- */
.insp-summary-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.insp-title { font-weight: 700; font-size: 15px; }
.insp-sub { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.insp-badges { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.insp-badges .pill b { font-weight: 800; }

.insp-group { margin-bottom: 14px; overflow: hidden; }
.insp-group-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px; background: var(--blue-50); border-bottom: 1px solid var(--line);
  cursor: pointer; user-select: none;
}
.insp-group-head:hover { background: var(--blue-100); }
.insp-group-title { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .3px; color: var(--blue-800); }
.insp-group-hright { display: flex; align-items: center; gap: 12px; }
.insp-group-count { font-size: 12px; color: var(--ink-soft); font-weight: 600; white-space: nowrap; }
.insp-toggle {
  background: none; border: none; cursor: pointer; color: var(--blue-700);
  font-size: 13px; line-height: 1; padding: 4px; border-radius: 6px;
  transition: transform .15s; flex-shrink: 0;
}
.insp-toggle:hover { background: var(--blue-100); }
.insp-group.collapsed .insp-toggle { transform: rotate(-90deg); }
/* Tópico com todos os subtópicos OK: cabeçalho verde claro */
.insp-group.all-ok .insp-group-head { background: var(--ok-bg); border-bottom-color: #bbf7d0; }
.insp-group.all-ok .insp-group-head:hover { background: #bbf7d0; }
.insp-group.all-ok .insp-group-title,
.insp-group.all-ok .insp-toggle { color: #15803d; }
.insp-group.collapsed .insp-group-head { border-bottom: none; }
.insp-group.collapsed .insp-group-body { display: none; }
.insp-group-body { display: flex; flex-direction: column; }

.insp-row {
  display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--line); border-left: 3px solid transparent;
}
.insp-row:last-child { border-bottom: none; }
.insp-row.ok { border-left-color: var(--ok); background: #f6fef9; }
.insp-row.ruim { border-left-color: var(--danger); background: #fef6f6; }
.insp-num {
  width: 26px; height: 26px; border-radius: 7px; background: var(--blue-50); color: var(--blue-700);
  font-size: 12px; font-weight: 700; display: grid; place-items: center;
}
.insp-main { min-width: 0; }
.insp-text { font-size: 14px; line-height: 1.4; }
.insp-cmt-preview { font-size: 12px; color: var(--ink-soft); margin-top: 4px; word-break: break-word; }
.insp-actions { display: flex; gap: 6px; align-items: center; }
.st-btn {
  border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 5px 11px;
  font-size: 12px; font-weight: 700; cursor: pointer; color: var(--ink-soft); line-height: 1;
}
.st-btn:hover { background: var(--blue-50); }
.st-ok.on { background: var(--ok); border-color: var(--ok); color: #fff; }
.st-ruim.on { background: var(--danger); border-color: var(--danger); color: #fff; }
.st-cmt { font-size: 13px; padding: 5px 9px; }
.st-cmt.has { background: var(--blue-100); border-color: var(--blue-300); color: var(--blue-700); }
.st-foto { font-size: 13px; padding: 5px 9px; display: inline-flex; align-items: center; gap: 4px; }
.st-foto.has { background: var(--blue-100); border-color: var(--blue-300); color: var(--blue-700); }
.st-foto .foto-n {
  background: var(--blue-600); color: #fff; font-size: 10px; font-weight: 800;
  min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px;
  display: inline-grid; place-items: center; line-height: 1;
}
.insp-fotos {
  grid-column: 1 / -1; margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px;
}
.foto-thumb { position: relative; width: 72px; height: 72px; border-radius: 9px; overflow: hidden; border: 1px solid var(--line); }
.foto-thumb img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block; }
.foto-del {
  position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%;
  border: none; background: rgba(15,23,42,.72); color: #fff; font-size: 11px; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
}
.foto-del:hover { background: var(--danger); }
.insp-save { display: flex; justify-content: flex-end; margin-top: 18px; }
.insp-save .btn { min-width: 190px; justify-content: center; }

.insp-comment { grid-column: 1 / -1; margin-top: 8px; }
.insp-comment textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px;
  font-family: inherit; font-size: var(--fs-sm); resize: vertical; color: var(--ink);
}
.insp-comment textarea:focus { outline: none; border-color: var(--blue-400); box-shadow: 0 0 0 3px var(--blue-100); }

@media (max-width: 560px) {
  .insp-row { grid-template-columns: 28px 1fr; }
  .insp-actions { grid-column: 1 / -1; justify-content: flex-start; margin-top: 2px; }
}

/* Empty state */
.empty-state { text-align: center; padding: 60px 20px; color: var(--ink-soft); }
.empty-state .big { font-size: 42px; margin-bottom: 12px; }
.empty-state h3 { margin: 0 0 6px; color: var(--ink); }
.empty-state p { margin: 0 auto 18px; max-width: 380px; font-size: 14px; }

/* Modal */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(15,23,42,.5);
  display: grid; place-items: center; z-index: 100; padding: 20px;
  backdrop-filter: blur(2px);
}
/* O atributo `hidden` do HTML precisa vencer o `display: grid` acima,
   senão o modal fica sempre visível cobrindo a tela. */
.modal-backdrop[hidden] { display: none; }
.modal { background: #fff; border-radius: 16px; width: 100%; max-width: 480px; box-shadow: 0 20px 60px rgba(0,0,0,.3); overflow: hidden; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; font-size: 17px; }
.modal-close { background: none; border: none; font-size: 17px; cursor: pointer; color: var(--muted); }
.modal-close:hover { color: var(--ink); }
.modal-body { padding: 20px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }

/* Toast */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 11px;
  font-size: 14px; z-index: 200; box-shadow: 0 10px 30px rgba(0,0,0,.3);
  animation: toastIn .25s ease;
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

.list-manage { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.manage-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; }
.manage-row input { border: none; flex: 1; font-size: 14px; padding: 4px; }
.manage-row input:focus { outline: none; }

/* Responsive */
@media (max-width: 860px) {
  .sidebar {
    position: fixed; left: 0; top: 0; z-index: 90; transform: translateX(-100%);
    transition: transform .25s; box-shadow: 0 0 40px rgba(0,0,0,.3);
  }
  .sidebar.open { transform: translateX(0); }
  .hamburger { display: block; }
  .content { padding: 18px; }
}

/* ============================================================
   Tela de carregamento (boot) — enquanto conecta no Supabase
   ============================================================ */
.boot {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #0f172a, #1e3a8a);
}
.boot[hidden] { display: none; }
.boot-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 40px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
}
.boot-spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: #60a5fa;
  animation: boot-spin 0.8s linear infinite;
}
@keyframes boot-spin { to { transform: rotate(360deg); } }
.boot-msg {
  color: #e2e8f0;
  font-size: 14px;
  text-align: center;
  max-width: 260px;
  line-height: 1.5;
}
.boot-msg.erro { color: #fca5a5; }
.boot .btn-ghost { color: #e2e8f0; border-color: rgba(255, 255, 255, 0.25); }

/* ============================================================
   Faixa de ambiente — só aparece fora de produção
   ============================================================ */
.env-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: repeating-linear-gradient(
    45deg, #f59e0b, #f59e0b 12px, #d97706 12px, #d97706 24px
  );
  color: #1c1917;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
.env-bar[hidden] { display: none; }

/* Empurra a interface para baixo para a faixa não cobrir nada. */
body.has-env-bar .app-shell { padding-top: 28px; }
body.has-env-bar .sidebar { top: 28px; height: calc(100vh - 28px); }
body.has-env-bar .boot { top: 28px; }
body.has-env-bar .role-gate { top: 28px; }
body.has-env-bar .topbar { top: 28px; }

/* ============================================================
   PASSO DE DESIGN — acessibilidade, toque, foco e movimento
   ------------------------------------------------------------
   Esta seção corrige o que a auditoria encontrou. Fica no fim do
   arquivo de propósito: são ajustes sobre a base existente, e
   deixá-los agrupados torna óbvio o que mudou e por quê.
   ============================================================ */

/* ---------- 1. Foco visível ----------
   Antes, só os campos de formulário tinham foco. Quem navega por
   teclado ficava sem saber onde estava em botões, abas e menu. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--blue-600);
  outline-offset: 2px;
  border-radius: 6px;
}
/* Sobre o azul escuro da barra lateral, o anel azul some. */
.sidebar :where(a, button):focus-visible,
.role-gate .btn-enter:focus-visible {
  outline-color: #fff;
}
/* Não remover o anel de dentro dos inputs que já têm box-shadow. */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible,
.pw-wrap input:focus-visible { outline-offset: 0; }

/* ---------- 2. Alvos de toque ----------
   No celular estes controles tinham 20-26px. O mínimo utilizável é 44px.
   Aplicado só a ponteiro grosso: no desktop a densidade continua igual. */
@media (pointer: coarse) {
  .qty button       { width: var(--tap); height: var(--tap); font-size: var(--fs-xl); }
  .qty .n           { min-width: var(--sp-8); font-size: var(--fs-lg); }
  .st-btn           { min-height: var(--tap); padding: 0 var(--sp-3); }
  .st-cmt, .st-foto { min-height: var(--tap); min-width: var(--tap); justify-content: center; }
  .icon-btn         { min-width: var(--tap); min-height: var(--tap); }
  .modal-close      { min-width: var(--tap); min-height: var(--tap); }
  .foto-del         { width: 30px; height: 30px; top: 5px; right: 5px; font-size: var(--fs-sm); }
  .btn-sm           { min-height: 40px; }
  .subtab           { min-height: var(--tap); }
  .nav-item         { min-height: var(--tap); }
  .hamburger        { min-width: var(--tap); min-height: var(--tap); }
  /* Espaço entre alvos vizinhos, para reduzir toque errado. */
  .insp-actions     { gap: var(--sp-2); }
  .qty              { gap: var(--sp-2); }
}

/* ---------- 3. Estado sem depender de cor ----------
   A faixa lateral colorida saiu (borda de acento em um lado só é
   sempre acidental). O status agora aparece no número do item, que
   já ocupa uma posição fixa na linha, além do botão marcado. */
.insp-row { border-left: none; padding-left: var(--sp-4); }
.insp-row.ok   .insp-num { background: var(--ok-bg);     color: var(--ok-ink); }
.insp-row.ruim .insp-num { background: var(--danger-bg); color: var(--danger); }
.insp-row.ok   .insp-num::after,
.insp-row.ruim .insp-num::after { font-size: var(--fs-2xs); }

/* Texto riscado + cinza claro era ilegível duas vezes. */
.check-item.done .ctext { color: var(--ink-soft); }

/* ---------- 4. Rolagem horizontal das tabelas ----------
   Em telas estreitas as tabelas rolam de lado. Sem indicação visual,
   ninguém descobre que há colunas escondidas. */
.tbl-wrap {
  background:
    linear-gradient(to right, var(--card) 30%, rgba(255,255,255,0)) left / 40px 100% no-repeat,
    linear-gradient(to left,  var(--card) 30%, rgba(255,255,255,0)) right / 40px 100% no-repeat,
    linear-gradient(to right, rgba(15,23,42,.10), rgba(15,23,42,0)) left / 14px 100% no-repeat,
    linear-gradient(to left,  rgba(15,23,42,.10), rgba(15,23,42,0)) right / 14px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
table.tbl { min-width: 560px; }

/* ---------- 5. Altura real no celular ----------
   100vh inclui a barra do navegador móvel e corta o rodapé. */
.app-shell { min-height: 100dvh; }
.sidebar   { height: 100dvh; }

/* ---------- 6. Fundo escuro atrás do menu lateral ----------
   O menu abria por cima do conteúdo sem escurecer o fundo e sem
   jeito de fechar tocando fora. */
.scrim {
  position: fixed; inset: 0; z-index: var(--z-scrim);
  background: rgba(15, 23, 42, .5);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease-out);
}
body.nav-aberto .scrim { opacity: 1; pointer-events: auto; }
@media (min-width: 861px) { .scrim { display: none; } }

/* ---------- 7. Camadas nomeadas ---------- */
.topbar        { z-index: var(--z-sticky); }
.export-menu   { z-index: var(--z-dropdown); }
.sidebar       { z-index: var(--z-drawer); }
.modal-backdrop{ z-index: var(--z-modal); }
.toast         { z-index: var(--z-toast); }
.role-gate     { z-index: var(--z-gate); }
.env-bar       { z-index: var(--z-envbar); }
.boot          { z-index: var(--z-boot); }

/* ---------- 8. Movimento ----------
   Ferramenta de trabalho, não vitrine: curva de saída, duração curta.
   O que é acionado dezenas de vezes por dia (± das tintas, OK/RUIM da
   inspeção) continua sem animação nenhuma — de propósito. */
.sidebar      { transition: transform var(--dur-slow) var(--ease-out); }
.nav-item     { transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.btn, .choice, .seg-role, .check-item {
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.toast        { animation: toastIn var(--dur) var(--ease-out); }
.progress > span { transition: width var(--dur-slow) var(--ease-out); }
.insp-toggle  { transition: transform var(--dur-fast) var(--ease-out); }

/* ---------- 9. Movimento reduzido ----------
   Obrigatório, não opcional: há quem sinta enjoo com transições. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 10. Tipografia normalizada ----------
   Elimina os meios-pixels e encaixa tudo na escala. */
.nav-item        { font-size: var(--fs-md); }
.brand-title     { font-size: var(--fs-xl); }
.topbar-title    { font-size: var(--fs-xl); }
.page-head h1    { font-size: var(--fs-2xl); }
.page-head p     { font-size: var(--fs-md); }
.stat .v         { font-size: var(--fs-3xl); }
.tug-name        { font-size: var(--fs-lg); }
.seg-role .st b  { font-size: var(--fs-md); }
.seg-role .st span { font-size: var(--fs-xs); }
.check-item .ctext { font-size: var(--fs-md); }
.insp-comment textarea { font-size: var(--fs-md); }
.cardA .nome     { font-size: var(--fs-sm); }
.cardA .status   { font-size: var(--fs-xs); }
.pw-wrap label   { font-size: var(--fs-sm); }
.login-card h2   { font-size: var(--fs-xl); }

/* Números em colunas não devem dançar quando o valor muda. */
.qty .n, .stat .v, .dur-preview, .horas-badge, .insp-group-count, .st-foto .foto-n {
  font-variant-numeric: tabular-nums;
}

/* ---------- 11. Área segura (celular com notch) ---------- */
@supports (padding: max(0px)) {
  .content { padding-left: max(var(--sp-5), env(safe-area-inset-left));
             padding-right: max(var(--sp-5), env(safe-area-inset-right)); }
  .toast   { bottom: max(var(--sp-6), env(safe-area-inset-bottom)); }
  .sidebar { padding-bottom: max(var(--sp-5), env(safe-area-inset-bottom)); }
}

/* ---------- 12. Vermelho legível onde é TEXTO sobre fundo claro ---------- */
.pill-danger,
.btn-danger-soft,
.insp-row.ruim .insp-num,
.pw-err            { color: var(--danger-ink); }

/* ---------- 13. Zoom automático do iOS ----------
   O Safari amplia a página sozinho quando o campo focado tem fonte
   menor que 16px — a tripulação perde o contexto e precisa pinçar de
   volta. 16px no toque resolve; no desktop a densidade não muda. */
@media (pointer: coarse) {
  .field input, .field select, .field textarea,
  .pw-wrap input, .manage-row input, .insp-comment textarea {
    font-size: 16px;
    min-height: var(--tap);
  }
}

/* ============================================================
   Formulário de tintas — domínio fechado
   ------------------------------------------------------------
   Sete cores e dois volumes não pedem campo de texto: pedem
   escolha visível. Menos toques, e não existe grafia divergente.
   ============================================================ */

.field-lbl {
  display: block; font-size: var(--fs-sm); font-weight: 600;
  color: var(--ink-soft); margin-bottom: var(--sp-2);
}

/* ---------- Segmentado (categoria, volume) ---------- */
.seg-control {
  display: inline-flex; gap: var(--sp-1); padding: var(--sp-1);
  background: var(--bg); border: 1px solid var(--line); border-radius: 11px;
  flex-wrap: wrap;
}
.seg-opt { position: relative; cursor: pointer; }
.seg-opt input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.seg-opt > span {
  display: block; padding: 9px 16px; border-radius: 8px;
  font-size: var(--fs-md); font-weight: 600; color: var(--ink-soft);
  white-space: nowrap; transition: background var(--dur-fast) var(--ease-out),
                                   color var(--dur-fast) var(--ease-out);
}
.seg-opt:hover > span { color: var(--ink); background: rgba(37,99,235,.07); }
.seg-opt input:checked + span { background: var(--blue-600); color: #fff; }
.seg-opt input:focus-visible + span { outline: 2px solid var(--blue-600); outline-offset: 2px; }

/* ---------- Amostras de cor ---------- */
.swatches { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.swatch-opt { position: relative; cursor: pointer; }
.swatch-opt input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.swatch-opt > .swatch-chip,
.swatch-opt > .swatch-nome { pointer-events: none; }
.swatch-opt {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: var(--sp-2); border: 1.5px solid var(--line); border-radius: 11px;
  background: var(--card); min-width: 68px;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.swatch-opt:hover { background: var(--blue-50); }
.swatch-chip {
  width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid rgba(15,23,42,.14); display: block;
}
/* Branco sobre branco precisa de contorno próprio. */
.swatch-chip.is-claro { border-color: var(--muted); }
.swatch-nome { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-soft); }
.swatch-opt:has(input:checked) {
  border-color: var(--blue-600);
  background: var(--blue-50);
  box-shadow: 0 0 0 2px var(--blue-100);
}
.swatch-opt:has(input:checked) .swatch-nome { color: var(--blue-700); }
/* A seleção não fica só na cor da borda: ganha um "✓". */
.swatch-opt:has(input:checked) .swatch-chip::after {
  content: "✓"; display: grid; place-items: center; height: 100%;
  color: #fff; font-size: var(--fs-sm); font-weight: 800;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
.swatch-opt:has(input:checked) .swatch-chip.is-claro::after {
  color: var(--ink); text-shadow: none;
}
.swatch-opt:has(input:focus-visible) { outline: 2px solid var(--blue-600); outline-offset: 2px; }

/* ---------- Quantidade com ± ---------- */
.qty-input {
  display: flex; align-items: center; gap: var(--sp-1);
  border: 1px solid var(--line); border-radius: 10px; background: var(--card);
  padding: var(--sp-1);
}
.qty-input input {
  width: 100%; min-width: 0; border: none; text-align: center;
  font: inherit; font-size: var(--fs-lg); font-weight: 700; color: var(--ink);
  background: none; padding: 6px 0; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.qty-input input::-webkit-outer-spin-button,
.qty-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-input input:focus { outline: none; }
.qty-input:focus-within { border-color: var(--blue-400); box-shadow: 0 0 0 3px var(--blue-100); }
.qty-input button {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 8px;
  border: 1px solid var(--line); background: var(--card); cursor: pointer;
  font-size: var(--fs-xl); font-weight: 700; color: var(--blue-700); line-height: 1;
}
.qty-input button:hover { background: var(--blue-50); }

/* ---------- Resumo em linguagem natural ---------- */
.form-resumo {
  margin: var(--sp-4) 0 0; padding: var(--sp-3) var(--sp-4);
  background: var(--blue-50); border: 1px solid var(--blue-100);
  border-radius: 10px; font-size: var(--fs-sm); color: var(--blue-800);
  line-height: 1.5;
}

/* ---------- Amostra do Componente B na listagem ---------- */
.can-swatch.is-compb {
  display: grid; place-items: center;
  background: var(--blue-50); color: var(--blue-700);
  border-color: var(--blue-100);
  font-size: var(--fs-xs); font-weight: 800;
}
.can-swatch.is-claro { border-color: var(--muted); }

.stat-sub { font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }

@media (pointer: coarse) {
  .seg-opt > span   { padding: 12px 18px; }
  .swatch-opt       { min-width: var(--tap); padding: 10px; }
  .swatch-chip      { width: 34px; height: 34px; }
  .qty-input button { width: var(--tap); height: var(--tap); }
}

/* ============================================================
   Energia de terra — formulário de passo único
   ============================================================ */

/* Segmentado ocupando a largura toda: com duas opções longas, o
   inline quebra feio no celular. */
.seg-control.seg-block { display: flex; width: 100%; }
.seg-control.seg-block .seg-opt { flex: 1; }
.seg-control.seg-block .seg-opt > span { text-align: center; padding: 10px 8px; }

/* Compartilhamento: quem cede e quem recebe é uma relação com direção,
   então a tela mostra como fluxo, no mesmo padrão do trajeto das lanchas.
   Antes eram dois campos lado a lado com rótulos de alturas diferentes,
   que desalinhavam os selects e truncavam para "Embarcação...". */
.fluxo-energia {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: var(--sp-3);
}
.fluxo-energia .field { margin-bottom: 0; min-width: 0; }
.fluxo-seta {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--blue-600);
  padding-bottom: 10px;
  user-select: none;
}

/* No celular a seta gira e o fluxo empilha, em vez de espremer dois
   selects em 150px cada. */
@media (max-width: 480px) {
  .fluxo-energia { grid-template-columns: 1fr; gap: var(--sp-2); }
  .fluxo-energia .field { margin-bottom: 0; }
  .fluxo-seta { transform: rotate(90deg); padding: 0; justify-self: center; }
}

/* Selects com altura confortável e sem truncar o nome do rebocador. */
.field select { width: 100%; min-height: 42px; }

/* ============================================================
   Painel da frota no celular — cartões viram lista
   ------------------------------------------------------------
   Em uma coluna, cinco cartões ilustrados ocupavam cerca de três
   telas. O painel existe para responder "quem está conectado?" de
   relance, e a rolagem matava justamente isso. Abaixo de 560px a
   ilustração sai (é decorativa nesse tamanho) e cada rebocador vira
   uma linha: ponto de status, nome e situação. Os cinco cabem numa
   tela só. No tablet e no desktop nada muda.
   ============================================================ */
@media (max-width: 560px) {
  .fleetA {
    display: block;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }

  .cardA {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--sp-3);
    min-height: 54px;
    padding: 0 var(--sp-4);
    border: none;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
  }
  .cardA:last-child { border-bottom: none; }

  /* O ponto substitui a faixa colorida do topo do cartão. */
  .cardA::before {
    content: "";
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--st-c, var(--muted));
    flex-shrink: 0;
  }

  /* A ilustração é o que custava a rolagem. */
  .cardA .foto { display: none; }

  .cardA .nome {
    text-align: left;
    padding: 0;
    font-size: var(--fs-md);
    font-weight: 700;
    letter-spacing: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  .cardA .status {
    margin: 0;
    padding: 5px var(--sp-3);
    font-size: var(--fs-xs);
    border-radius: 999px;
    white-space: nowrap;
  }

  /* "Livre" é o estado normal e não precisa competir por atenção;
     o que importa ver é quem está conectado. */
  .cardA.st-livre .status { background: none; color: var(--muted); }
  .cardA.st-livre::before { background: var(--line); }
}

/* ============================================================
   Ícones
   ------------------------------------------------------------
   Todos vêm de js/icons.js, na mesma grade e com o mesmo traço.
   Herdam a cor de quem os contém, então seguem o tema sozinhos —
   coisa que emoji não faz.
   ============================================================ */
.ico {
  display: inline-block;
  vertical-align: -0.18em;   /* assenta na linha de base do texto ao lado */
  flex-shrink: 0;
}

/* Nos contêineres que antes dimensionavam emoji por font-size, o
   tamanho agora vem do próprio SVG. */
.nav-ico { font-size: 0; width: 22px; display: inline-flex; justify-content: center; }
.seg-role .em { display: inline-flex; align-items: center; color: var(--blue-600); }
.choice .c-emoji { display: inline-flex; align-items: center; color: var(--blue-600); }
.tug-name .ico { color: var(--blue-600); }
.trajeto .seta { display: inline-flex; align-items: center; color: var(--blue-600); font-weight: 400; }

/* Botões com ícone + texto: espaçamento uniforme. */
.btn .ico, .export-menu button .ico, .subtab .ico { margin-right: 2px; }

/* Estado vazio: o ícone entra grande, então não herda o traço fino. */
.empty-state .big .ico { color: var(--muted); stroke-width: 1.5; }

/* Ícone dentro do status da frota acompanha a cor do estado. */
.cardA .status .ico { color: inherit; }

/* Etiqueta de perfil na barra lateral. */
.perfil-tag .ico { vertical-align: -0.2em; }

/* Faixa de ambiente. */
.env-bar .ico { vertical-align: -0.22em; margin-right: 2px; }

/* ============================================================
   Cronograma
   ============================================================ */

.crono-bar {
  display: flex; align-items: center; gap: var(--sp-3);
  flex-wrap: wrap; margin-bottom: var(--sp-5);
}
.crono-bar .spacer { flex: 1; }
.crono-nav { display: flex; align-items: center; gap: var(--sp-2); }
.crono-titulo {
  font-size: var(--fs-lg); font-weight: 700; min-width: 172px; text-align: center;
}

.sec-h {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); margin: var(--sp-8) 0 var(--sp-3); flex-wrap: wrap;
}
.sec-h h2 { font-size: var(--fs-xl); margin: 0; }
.sec-h p { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--muted); }

/* ---------- Calendário do mês ---------- */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dow {
  font-size: var(--fs-xs); font-weight: 700; color: var(--muted);
  text-align: center; text-transform: uppercase; letter-spacing: .3px;
  padding-bottom: var(--sp-1);
}
.cal-dia {
  min-height: 96px; display: flex; flex-direction: column; gap: 4px;
  padding: 6px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); cursor: pointer; text-align: left; font: inherit;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.cal-dia:hover { border-color: var(--blue-400); background: var(--blue-50); }
.cal-dia.fora { background: var(--bg); }
.cal-dia.fora .cal-n { color: var(--muted-weak); }
.cal-dia.hoje { border-color: var(--blue-600); box-shadow: inset 0 0 0 1px var(--blue-600); }
.cal-n {
  font-size: var(--fs-sm); font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cal-dia.hoje .cal-n { color: var(--blue-700); }
.cal-itens { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-chip {
  font-size: var(--fs-2xs); line-height: 1.35; padding: 2px 6px; border-radius: 5px;
  background: var(--blue-50); color: var(--blue-800);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-chip b { font-variant-numeric: tabular-nums; }
.cal-chip.feito { background: var(--ok-bg); color: var(--ok-ink); text-decoration: line-through; }
.cal-mais { font-size: var(--fs-2xs); color: var(--muted); padding-left: 6px; }

/* ---------- Blocos por dia ---------- */
.dia-bloco { border-bottom: 1px solid var(--line); }
.dia-bloco:last-child { border-bottom: none; }
.dia-cab {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4) var(--sp-2);
  background: var(--bg);
}
.dia-bloco.hoje .dia-cab { background: var(--blue-50); }
.dia-nome { font-size: var(--fs-md); font-weight: 700; }
.dia-data { font-weight: 400; color: var(--muted); margin-left: 6px; font-size: var(--fs-sm); }
.dia-cont { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.dia-vazio { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); color: var(--muted); }
.dia-add {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: var(--sp-2) var(--sp-4); border: none; background: none; cursor: pointer;
  font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--blue-600);
}
.dia-add:hover { background: var(--blue-50); }

/* ---------- Linha de tarefa ---------- */
.tarefa {
  display: grid; grid-template-columns: auto 46px 1fr auto;
  align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  border-top: 1px solid var(--line);
}
.tarefa-check {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 7px;
  border: 1.5px solid var(--line); background: var(--card); cursor: pointer;
  display: grid; place-items: center; color: #fff; padding: 0;
}
.tarefa-check:hover { border-color: var(--blue-400); }
.tarefa.feita .tarefa-check { background: var(--ok); border-color: var(--ok); }
.tarefa-hora {
  font-size: var(--fs-sm); font-weight: 700; color: var(--blue-700);
  font-variant-numeric: tabular-nums; text-align: right;
}
.tarefa-hora:empty::before { content: "—"; color: var(--muted-weak); }
.tarefa-t { font-size: var(--fs-md); line-height: 1.4; }
.tarefa-s {
  font-size: var(--fs-xs); color: var(--muted); margin-top: 2px;
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.tarefa.feita .tarefa-t { text-decoration: line-through; color: var(--ink-soft); }
.tarefa.feita .tarefa-hora { color: var(--muted); }
.tarefa.atrasada .tarefa-hora { color: var(--danger-ink); }
.tarefa-atraso { color: var(--danger-ink); font-weight: 700; }
.tarefa-acoes { display: flex; gap: 2px; }

/* ---------- Pendências derivadas ---------- */
.pend {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-3);
  align-items: center; padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.pend:last-child { border-bottom: none; }
.pend-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; }
.pend-ico.alerta { background: var(--danger-bg); color: var(--danger-ink); }
.pend-ico.aviso  { background: var(--warn-bg);   color: #92400e; }
.pend-ico.info   { background: var(--blue-50);   color: var(--blue-700); }
.pend-txt .t { font-size: var(--fs-md); font-weight: 600; line-height: 1.4; }
.pend-txt .s { font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }
.pend-acao { white-space: nowrap; }

/* Segmentado que quebra em várias linhas (lista de rebocadores). */
.seg-control.seg-wrap { display: flex; flex-wrap: wrap; width: 100%; }
.lbl-opc { font-weight: 400; color: var(--muted); }

/* ---------- Celular ----------
   O calendário do mês não tem largura para texto: 7 colunas em 390px
   dão ~46px cada. Os chips viram pontos de verdade — antes eram uma
   barra de 5px com o fundo azul-claro do desktop, que sobre branco
   ficava invisível: só apareciam os números dos dias. */
@media (max-width: 720px) {

  /* ----- Barra de período: três linhas, cada uma com um trabalho ----- */
  .crono-bar { gap: var(--sp-2); }
  .crono-bar .spacer { display: none; }
  .crono-nav { width: 100%; display: grid; grid-template-columns: auto 1fr auto auto; gap: var(--sp-2); }
  .crono-titulo { min-width: 0; font-size: var(--fs-md); }
  .crono-bar .seg-control { width: 100%; }
  .crono-bar .seg-control .seg-opt { flex: 1; }
  .crono-bar [data-nova] { width: 100%; justify-content: center; }

  /* ----- Calendário ----- */
  .cal { gap: 3px; }
  .cal-dow { font-size: 10px; }
  .cal-dia {
    min-height: 52px; padding: 5px 2px 6px;
    align-items: center; gap: 5px;
  }
  .cal-n { font-size: var(--fs-xs); }

  /* Os pontos ficam lado a lado, não empilhados. */
  .cal-itens { flex-direction: row; justify-content: center; gap: 3px; flex-wrap: wrap; }
  .cal-chip {
    width: 6px; height: 6px; padding: 0; border-radius: 50%;
    background: var(--blue-600);
    color: transparent; overflow: hidden; text-indent: -99px;
    flex-shrink: 0;
  }
  .cal-chip.feito { background: var(--ok); text-decoration: none; }
  .cal-mais {
    display: block; padding: 0; font-size: 10px; font-weight: 700;
    color: var(--muted); line-height: 6px;
  }
  /* Dia com tarefa vencida ganha ponto vermelho. */
  .cal-dia.atrasado .cal-chip:not(.feito) { background: var(--danger); }

  /* ----- Linha de tarefa -----
     Quatro elementos em três colunas quebravam a grade e jogavam os
     botões para uma segunda linha quase vazia. Agora a caixa de marcar
     ocupa as duas linhas, a hora fica em destaque no topo e o título
     usa a largura toda. */
  .tarefa {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    row-gap: 2px;
    padding: var(--sp-3) var(--sp-4);
    align-items: center;
  }
  .tarefa-check { grid-area: 1 / 1 / 3 / 2; }
  .tarefa-hora  { grid-area: 1 / 2 / 2 / 3; text-align: left; font-size: var(--fs-xs); }
  .tarefa-acoes { grid-area: 1 / 3 / 2 / 4; }
  .tarefa-txt   { grid-area: 2 / 2 / 3 / 4; }
  /* Sem horário, a linha da hora não precisa ocupar espaço. */
  .tarefa-hora.vazia { display: none; }
  .tarefa:has(.tarefa-hora.vazia) .tarefa-txt { grid-row: 1 / 3; }

  /* ----- Indicadores em 2x2 (vale para todas as abas) -----
     Em coluna única, quatro cartões somam ~360px de rolagem antes do
     conteúdo. Lado a lado, cabem numa olhada. */
  .grid-4 { grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
  .grid-4 .stat { padding: var(--sp-3); }
  .grid-4 .stat .v { font-size: var(--fs-2xl); }
  .grid-4 .stat .k { font-size: var(--fs-xs); }
  .grid-4 .stat-sub { font-size: var(--fs-2xs); }

  /* ----- Pendências ----- */
  .pend { grid-template-columns: auto 1fr; }
  .pend-acao { grid-column: 1 / -1; justify-self: start; padding-left: 46px; }

  /* ----- Formulário: escolha de embarcação em grade ----- */
  .seg-control.seg-wrap { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-1); }
  .seg-control.seg-wrap .seg-opt > span { text-align: center; padding: 12px 6px; }
  .seg-control.seg-wrap .seg-opt:first-child { grid-column: 1 / -1; }
}

/* Telas bem estreitas: o rótulo do dia da semana atrapalha mais do que ajuda. */
@media (max-width: 380px) {
  .crono-nav { grid-template-columns: auto 1fr auto; }
  .crono-nav [data-hoje] { grid-column: 1 / -1; }
  .cal-dia { min-height: 46px; }
}

/* ============================================================
   Cronograma — filtro, atrasadas, séries e folha de ações
   ============================================================ */

/* ---------- Filtro por embarcação ---------- */
.filtro-reb {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--sp-4);
}
.chip-f {
  border: 1px solid var(--line); background: var(--card); cursor: pointer;
  font: inherit; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-soft);
  padding: 7px 13px; border-radius: 999px;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.chip-f:hover { background: var(--blue-50); border-color: var(--blue-400); }
.chip-f.on { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }

/* ---------- Atrasadas de outros períodos ----------
   Faixa fixa: o que ficou para trás não pode depender do período que
   a pessoa está olhando. */
.atrasadas-box { margin-bottom: var(--sp-5); border-color: #fecaca; }
.atrasadas-cab {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--danger-bg); color: var(--danger-ink);
  font-size: var(--fs-md);
  border-bottom: 1px solid #fecaca;
}
.atrasadas-lista .tarefa:first-child { border-top: none; }

/* ---------- Marca de série ---------- */
.tag-serie {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--fs-2xs); font-weight: 700;
  color: var(--blue-700); background: var(--blue-50);
  padding: 1px 7px; border-radius: 999px;
}

/* ---------- Tarefa cancelada ----------
   Fica registrada, mas recuada: aconteceu o planejamento, não a tarefa. */
.tarefa.cancelada .tarefa-t { text-decoration: line-through; color: var(--muted); }
.tarefa.cancelada .tarefa-hora { color: var(--muted-weak); }
.tarefa-cancel { color: var(--muted); font-weight: 700; }
.tarefa-check:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- Folha de ações ---------- */
.acoes-lista { display: flex; flex-direction: column; gap: var(--sp-1); }
.acao {
  display: flex; align-items: flex-start; gap: var(--sp-3); width: 100%;
  padding: var(--sp-3); border: 1px solid var(--line); border-radius: 11px;
  background: var(--card); cursor: pointer; font: inherit; text-align: left;
  color: var(--ink); min-height: var(--tap);
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.acao:hover { background: var(--blue-50); border-color: var(--blue-400); }
.acao > .ico { color: var(--blue-600); margin-top: 1px; }
.acao span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acao b { font-size: var(--fs-md); font-weight: 600; }
.acao small { font-size: var(--fs-xs); color: var(--muted); line-height: 1.4; }
.acao.perigo > .ico { color: var(--danger-ink); }
.acao.perigo:hover { background: var(--danger-bg); border-color: #fecaca; }

@media (max-width: 720px) {
  .filtro-reb { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .chip-f { white-space: nowrap; }
  .crono-bar #cronoExport { width: 100%; }
  .crono-bar #cronoExport .export-wrap,
  .crono-bar #cronoExport .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   Ditado de tarefas
   ============================================================ */
.ditado { text-align: center; }
.ditado-alvo {
  width: 88px; height: 88px; margin: var(--sp-2) auto var(--sp-4);
  border-radius: 50%; display: grid; place-items: center;
  background: var(--blue-50); color: var(--blue-600);
  border: 2px solid var(--blue-100);
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
/* Pulso enquanto ouve: é o único jeito de saber que o microfone está
   ligado, então aqui a animação carrega informação, não enfeite. */
.ditado-alvo.ouvindo {
  background: var(--blue-600); color: #fff; border-color: var(--blue-600);
  animation: ditadoPulso 1.6s var(--ease-out) infinite;
}
@keyframes ditadoPulso {
  0%   { box-shadow: 0 0 0 0 rgba(37, 99, 235, .45); }
  70%  { box-shadow: 0 0 0 18px rgba(37, 99, 235, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .ditado-alvo.ouvindo { animation: none; box-shadow: 0 0 0 6px var(--blue-100); }
}

.ditado-estado { font-size: var(--fs-md); font-weight: 600; margin: 0 0 var(--sp-2); }
.ditado-texto {
  min-height: 44px; margin: 0 0 var(--sp-4);
  font-size: var(--fs-lg); line-height: 1.45; color: var(--ink);
}
.ditado-texto:empty { min-height: 0; }
.ditado-exemplo {
  font-size: var(--fs-sm); color: var(--muted); line-height: 1.6;
  background: var(--bg); border-radius: 10px; padding: var(--sp-3);
  text-align: left;
}
.ditado-exemplo i { color: var(--ink-soft); }

/* Aviso no formulário: o que a fala preencheu. */
.ditado-aviso {
  display: flex; align-items: flex-start; gap: 6px;
  margin: 0 0 var(--sp-3); padding: var(--sp-2) var(--sp-3);
  background: var(--warn-bg); color: #92400e;
  border-radius: 10px; font-size: var(--fs-sm); line-height: 1.5;
}
.ditado-aviso .ico { margin-top: 2px; flex-shrink: 0; }

@media (max-width: 720px) {
  .crono-bar [data-ditar] { flex: 1; justify-content: center; }
}

/* ============================================================
   Caminhão Munck
   ============================================================ */

/* Marca de retorno no dia seguinte na coluna de hora. */
.dia-seguinte {
  font-size: var(--fs-2xs); font-weight: 700;
  color: var(--blue-700); background: var(--blue-50);
  padding: 1px 5px; border-radius: 5px; vertical-align: 1px;
}

/* Horas além do mínimo, embaixo do total de horas. */
.munck-extra { font-size: var(--fs-xs); color: var(--warn); font-weight: 600; margin-top: 2px; }

/* Conta do fechamento: o custo aparece antes de confirmar, porque
   é a informação que a pessoa precisa conferir com a nota. */
.munck-conta {
  margin: var(--sp-4) 0 0;
  border: 1px solid var(--line); border-radius: 11px; overflow: hidden;
}
.conta-linha {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm); border-bottom: 1px solid var(--line);
}
.conta-linha:last-child { border-bottom: none; }
.conta-linha span { color: var(--ink-soft); }
.conta-linha b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.conta-linha.fraca span, .conta-linha.fraca b { color: var(--muted); font-weight: 400; }
.conta-linha.total {
  background: var(--blue-50); font-size: var(--fs-md);
}
.conta-linha.total span { color: var(--blue-800); font-weight: 600; }
.conta-linha.total b { color: var(--blue-800); font-size: var(--fs-lg); }

/* Barra do filtro de mês (Lanchas e Munck) — mesma estrutura da barra
   de período do Cronograma, com respiro embaixo. */
.crono-bar.filtro-mes { margin-bottom: var(--sp-4); }

/* ============================================================
   Rodapé — assinatura, em todas as telas por vir do shell
   ============================================================ */
.app-footer {
  text-align: center;
  padding: var(--sp-5) var(--sp-4) calc(var(--sp-5) + env(safe-area-inset-bottom, 0px));
  font-size: var(--fs-xs);
  color: var(--muted);
  border-top: 1px solid var(--line);
  margin-top: var(--sp-6);
}
/* Login e carregamento são overlays fixos que já cobrem o rodapé.
   Só a impressão precisa escondê-lo de fato. */
@media print { .app-footer { display: none; } }

/* Crédito no cartão de login (redundante com o rodapé, a pedido). */
.login-credito {
  text-align: center;
  margin-top: 16px;
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* ============================================================
   Ponto Eletrônico
   ============================================================ */
.ponto-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.ponto-reg {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--line);
}
.ponto-reg.aberto { background: #fffdf5; }
.ponto-horas { display: flex; align-items: center; gap: 8px; font-size: var(--fs-md); }
.ponto-horas b { font-variant-numeric: tabular-nums; }
.ponto-horas .seta { color: var(--muted); display: inline-flex; }
.ponto-meta {
  grid-column: 1; font-size: var(--fs-xs); color: var(--muted); margin-top: 2px;
}
.ponto-meta b { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ponto-acoes { grid-column: 2; grid-row: 1 / 3; display: flex; align-items: center; gap: 2px; white-space: nowrap; }

@media (max-width: 720px) {
  .ponto-reg { grid-template-columns: 1fr; }
  .ponto-acoes { grid-column: 1; grid-row: auto; justify-content: flex-start; margin-top: var(--sp-1); }
}

/* ============================================================
   Toast com ação (ex.: Desfazer) e botão Check do Ponto
   ============================================================ */
.toast.toast-acao {
  display: flex; align-items: center; gap: var(--sp-4);
  padding-right: var(--sp-3);
}
.toast-btn {
  border: none; background: none; cursor: pointer;
  color: var(--blue-300); font: inherit; font-weight: 700; font-size: var(--fs-md);
  padding: 4px 4px; white-space: nowrap;
}
.toast-btn:hover { color: #fff; text-decoration: underline; }

/* Botão Check — verde, para destacar do Exportar e virar alvo grande. */
.btn-check {
  background: var(--ok-bg); color: var(--ok-ink); border: 1px solid #bbf7d0;
}
.btn-check:hover { background: #bbf7d0; }

@media (max-width: 720px) {
  /* No celular o Check ocupa a largura toda: é o alvo de toque principal. */
  .toolbar .btn-check { width: 100%; justify-content: center; order: 3; }
}