/* ==========================================================================
   Gestão de Frotas — folha de estilo única
   Sóbria e densa, pensada para uso diário em desktop. Tema escuro por
   omissão, claro por atributo data-tema no <html>.
   ========================================================================== */

:root {
  --bg-0:#0f1115; --bg-1:#161a21; --bg-2:#1d222b; --bg-3:#262c38;
  --fg-0:#e6e8ec; --fg-1:#9aa3b2; --fg-2:#6e7585;
  --borda:#2a3140; --borda-forte:#394254;
  --acento:#5b8cff; --acento-2:#3d6fe8; --acento-fraco:#5b8cff22;
  --verde:#2ecc71; --ambar:#f1c40f; --vermelho:#e74c3c; --azul:#5b8cff;
  --roxo:#a78bfa; --cinza:#6e7585;
  --sombra:0 6px 24px rgba(0,0,0,.35);
  --r:6px; --r-g:10px;
  color-scheme: dark;
}

html[data-tema="claro"] {
  --bg-0:#f4f6f9; --bg-1:#ffffff; --bg-2:#f0f2f6; --bg-3:#e4e8ef;
  --fg-0:#171a20; --fg-1:#5b6472; --fg-2:#8a93a3;
  --borda:#dfe3ea; --borda-forte:#c6ccd8;
  --acento:#2f62d8; --acento-2:#254fb5; --acento-fraco:#2f62d81a;
  --sombra:0 6px 20px rgba(20,26,40,.10);
  color-scheme: light;
}

* { box-sizing:border-box; }
html, body { height:100%; }
body {
  margin:0; background:var(--bg-0); color:var(--fg-0);
  font:13px/1.5 Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--acento); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3,h4 { margin:0; font-weight:600; letter-spacing:-.01em; }
h1 { font-size:19px; } h2 { font-size:15px; } h3 { font-size:13px; }
p { margin:0 0 .6em; }
code, .mono { font-family:ui-monospace, "Cascadia Mono", Consolas, monospace; }

/* --- Estrutura ----------------------------------------------------------- */
.app { display:grid; grid-template-columns:212px 1fr; min-height:100vh; }

.lateral {
  background:var(--bg-1); border-right:1px solid var(--borda);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.marca { padding:16px 16px 12px; display:flex; align-items:center; gap:9px; }
.marca b { font-size:13.5px; letter-spacing:-.01em; }
.marca small { display:block; color:var(--fg-2); font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; }
.marca-ico {
  width:26px; height:26px; border-radius:7px; flex:0 0 auto;
  background:linear-gradient(135deg, var(--acento), var(--roxo));
  display:grid; place-items:center; color:#fff;
}
.menu { padding:6px 8px; overflow-y:auto; flex:1; }
.menu a {
  display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:var(--r);
  color:var(--fg-1); font-size:12.5px; margin-bottom:1px;
}
.menu a:hover { background:var(--bg-2); color:var(--fg-0); text-decoration:none; }
.menu a.ativo { background:var(--acento-fraco); color:var(--fg-0); font-weight:500; }
.menu a.ativo .ico { color:var(--acento); }
.menu .conta { margin-left:auto; background:var(--bg-3); color:var(--fg-1);
  border-radius:20px; padding:1px 6px; font-size:10.5px; font-variant-numeric:tabular-nums; }
.menu a.ativo .conta, .menu .conta.critico { background:var(--vermelho); color:#fff; }
.menu-sep { margin:12px 9px 5px; font-size:10px; text-transform:uppercase;
  letter-spacing:.09em; color:var(--fg-2); }
.rodape-lateral { padding:10px; border-top:1px solid var(--borda); font-size:11.5px; color:var(--fg-2); }
.rodape-lateral .linha { display:flex; align-items:center; gap:8px; }
.rodape-lateral b { color:var(--fg-1); font-weight:500; }

.principal { display:flex; flex-direction:column; min-width:0; }
.topo {
  height:48px; border-bottom:1px solid var(--borda); background:var(--bg-1);
  display:flex; align-items:center; gap:12px; padding:0 16px;
  position:sticky; top:0; z-index:20;
}
.conteudo { padding:16px; flex:1; min-width:0; }

/* --- Pesquisa global ------------------------------------------------------ */
.pesquisa { position:relative; flex:1; max-width:440px; }
.pesquisa input {
  width:100%; height:30px; padding:0 10px 0 30px; border-radius:var(--r);
  background:var(--bg-2); border:1px solid var(--borda); color:var(--fg-0); font-size:12.5px;
}
.pesquisa .ico { position:absolute; left:9px; top:7px; color:var(--fg-2); pointer-events:none; }
.pesquisa-res {
  position:absolute; top:34px; left:0; right:0; background:var(--bg-1);
  border:1px solid var(--borda-forte); border-radius:var(--r-g); box-shadow:var(--sombra);
  max-height:60vh; overflow:auto; z-index:60; display:none;
}
.pesquisa-res.aberto { display:block; }
.pesquisa-res a { display:block; padding:8px 11px; border-bottom:1px solid var(--borda); color:var(--fg-0); }
.pesquisa-res a:last-child { border-bottom:0; }
.pesquisa-res a:hover, .pesquisa-res a.sel { background:var(--bg-2); text-decoration:none; }
.pesquisa-res .t { font-size:12.5px; font-weight:500; }
.pesquisa-res .s { font-size:11.5px; color:var(--fg-2); }
.pesquisa-res .k { float:right; font-size:10px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--fg-2); }

/* --- Cabeçalho de página -------------------------------------------------- */
.cabecalho { display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.cabecalho .titulo { min-width:0; }
.cabecalho h1 { display:flex; align-items:center; gap:9px; }
.cabecalho .sub { color:var(--fg-1); font-size:12.5px; margin-top:3px; }
.cabecalho .acoes { margin-left:auto; display:flex; gap:7px; flex-wrap:wrap; }
.migalhas { font-size:11.5px; color:var(--fg-2); margin-bottom:5px; }
.migalhas a { color:var(--fg-1); }

/* --- Botões --------------------------------------------------------------- */
.botao {
  display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 11px;
  border-radius:var(--r); border:1px solid var(--borda-forte); background:var(--bg-2);
  color:var(--fg-0); font-size:12.5px; font-weight:500; cursor:pointer;
  font-family:inherit; white-space:nowrap; text-decoration:none;
}
.botao:hover { background:var(--bg-3); text-decoration:none; }
.botao.primario { background:var(--acento); border-color:var(--acento); color:#fff; }
.botao.primario:hover { background:var(--acento-2); border-color:var(--acento-2); }
.botao.perigo { background:transparent; border-color:var(--vermelho); color:var(--vermelho); }
.botao.perigo:hover { background:var(--vermelho); color:#fff; }
.botao.pequeno { height:25px; padding:0 8px; font-size:11.5px; }
.botao.ativo { background:var(--acento-fraco); border-color:var(--acento); color:var(--fg-0); }
.botao[disabled], .botao.desativado { opacity:.45; pointer-events:none; }
.botao-ico { width:28px; padding:0; justify-content:center; }
.botao-ico.lixo:hover { background:var(--vermelho); border-color:var(--vermelho); color:#fff; }

/* --- Cartões e painéis ---------------------------------------------------- */
.cartao {
  background:var(--bg-1); border:1px solid var(--borda); border-radius:var(--r-g);
  margin-bottom:14px; overflow:hidden;
}
.cartao > header {
  display:flex; align-items:center; gap:9px; padding:10px 13px;
  border-bottom:1px solid var(--borda); background:var(--bg-1);
}
.cartao > header h2 { font-size:12.5px; }
.cartao > header .acoes { margin-left:auto; display:flex; gap:6px; }
.cartao .corpo { padding:13px; }
.cartao .corpo.sem-padding { padding:0; }

.grelha { display:grid; gap:14px; }
.g2 { grid-template-columns:repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns:repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns:repeat(4, minmax(0,1fr)); }
.g-2-1 { grid-template-columns:2fr 1fr; }
/* Os pontos de rutura estão todos reunidos na secção "Responsivo", no fim. */

/* --- Indicadores ---------------------------------------------------------- */
.indicador {
  background:var(--bg-1); border:1px solid var(--borda); border-radius:var(--r-g);
  padding:12px 13px; display:flex; flex-direction:column; gap:3px; height:100%;
}
.ind-link { color:inherit; }
.ind-link:hover .indicador { border-color:var(--borda-forte); }
.ind-rotulo { font-size:11px; color:var(--fg-1); text-transform:uppercase; letter-spacing:.06em; }
.ind-valor { font-size:24px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.ind-nota { font-size:11.5px; color:var(--fg-2); }
.ind-verde .ind-valor{color:var(--verde);} .ind-vermelho .ind-valor{color:var(--vermelho);}
.ind-ambar .ind-valor{color:var(--ambar);} .ind-azul .ind-valor{color:var(--acento);}

/* --- Tabelas -------------------------------------------------------------- */
.tabela-envolve { overflow-x:auto; }
table.tabela { width:100%; border-collapse:collapse; font-size:12.5px; }
table.tabela th, table.tabela td { padding:7px 11px; text-align:left; border-bottom:1px solid var(--borda); }
table.tabela th {
  font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--fg-2);
  font-weight:600; white-space:nowrap; background:var(--bg-1); position:sticky; top:0; z-index:1;
}
table.tabela th a { color:inherit; }
table.tabela th .ord { margin-left:4px; color:var(--acento); }
table.tabela tbody tr:hover { background:var(--bg-2); }
table.tabela td.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
table.tabela td.acoes { text-align:right; white-space:nowrap; }
table.tabela tr.clicavel { cursor:pointer; }
table.tabela .principal-cel { font-weight:500; }
table.tabela tfoot td { font-weight:600; border-top:2px solid var(--borda-forte); border-bottom:0; }
.vazio { padding:34px 16px; text-align:center; color:var(--fg-2); }
.vazio .ico { opacity:.4; margin-bottom:8px; }

.paginacao { display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:11.5px; }
.paginacao .paginas { margin-left:auto; display:flex; gap:4px; align-items:center; }

/* --- Filtros -------------------------------------------------------------- */
.filtros {
  display:flex; gap:7px; flex-wrap:wrap; align-items:flex-end;
  padding:11px 13px; border-bottom:1px solid var(--borda); background:var(--bg-1);
}
.filtros .campo { margin:0; min-width:132px; }
.filtros .campo label { font-size:10px; }
.filtros input, .filtros select { height:28px; }
.filtros .espaco { flex:1; }

/* --- Formulários ---------------------------------------------------------- */
.campo { margin-bottom:11px; display:flex; flex-direction:column; gap:4px; position:relative; }
.campo label { font-size:11px; color:var(--fg-1); font-weight:500; }
.campo label i { color:var(--vermelho); font-style:normal; }
.campo input, .campo select, .campo textarea {
  width:100%; background:var(--bg-2); border:1px solid var(--borda); color:var(--fg-0);
  border-radius:var(--r); padding:0 9px; height:31px; font:inherit; font-size:12.5px;
}
.campo textarea { height:auto; padding:7px 9px; resize:vertical; line-height:1.5; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline:none; border-color:var(--acento); box-shadow:0 0 0 3px var(--acento-fraco);
}
.campo input.tem-sufixo { padding-right:44px; }
.campo .sufixo { position:absolute; right:9px; top:26px; color:var(--fg-2); font-size:11.5px; }
.campo .ajuda { font-size:11px; color:var(--fg-2); margin:0; }
.campo.tem-erro input, .campo.tem-erro select, .campo.tem-erro textarea { border-color:var(--vermelho); }
.erro-campo { font-size:11px; color:var(--vermelho); margin:0; }
.campo-check { flex-direction:row; align-items:center; }
label.check { display:flex; align-items:center; gap:7px; cursor:pointer; font-size:12.5px; color:var(--fg-0); }
label.check input { width:15px; height:15px; accent-color:var(--acento); }
.campo-2 { grid-column:span 2; } .campo-3 { grid-column:span 3; } .campo-4 { grid-column:span 4; }
.form-grelha { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:0 12px; }
.form-seccao { grid-column:1/-1; margin:13px 0 7px; padding-top:11px; border-top:1px solid var(--borda);
  font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--fg-2); font-weight:600; }
.form-seccao:first-child { border-top:0; margin-top:0; padding-top:0; }
.form-rodape { display:flex; gap:8px; padding:12px 13px; border-top:1px solid var(--borda);
  background:var(--bg-1); position:sticky; bottom:0; }
.form-rodape .espaco { flex:1; }

/* --- Etiquetas ------------------------------------------------------------ */
.etq {
  display:inline-flex; align-items:center; gap:5px; padding:2px 7px; border-radius:20px;
  font-size:11px; font-weight:500; white-space:nowrap; border:1px solid transparent;
}
.etq::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.etq-verde{color:var(--verde);background:#2ecc7118;border-color:#2ecc7133;}
.etq-azul{color:var(--azul);background:#5b8cff18;border-color:#5b8cff33;}
.etq-ambar{color:var(--ambar);background:#f1c40f18;border-color:#f1c40f33;}
.etq-vermelho{color:var(--vermelho);background:#e74c3c18;border-color:#e74c3c33;}
.etq-roxo{color:var(--roxo);background:#a78bfa18;border-color:#a78bfa33;}
.etq-cinza{color:var(--fg-1);background:var(--bg-3);border-color:var(--borda);}
.ponto { display:inline-block; width:8px; height:8px; border-radius:50%; }
.ponto-verde{background:var(--verde);} .ponto-azul{background:var(--azul);}
.ponto-ambar{background:var(--ambar);} .ponto-vermelho{background:var(--vermelho);}
.ponto-roxo{background:var(--roxo);} .ponto-cinza{background:var(--cinza);}

.legenda { display:flex; gap:12px; flex-wrap:wrap; font-size:11.5px; color:var(--fg-1); }
.legenda span { display:flex; align-items:center; gap:5px; }

/* --- Mensagens ------------------------------------------------------------ */
.mensagens { position:fixed; top:56px; right:16px; z-index:200; display:flex;
  flex-direction:column; gap:8px; max-width:400px; }
.msg { padding:10px 13px; border-radius:var(--r-g); background:var(--bg-1);
  border:1px solid var(--borda-forte); box-shadow:var(--sombra); font-size:12.5px;
  display:flex; gap:9px; align-items:flex-start; animation:entra .18s ease-out; }
.msg-ok { border-left:3px solid var(--verde); }
.msg-erro { border-left:3px solid var(--vermelho); }
.msg-aviso { border-left:3px solid var(--ambar); }
.msg button { background:none; border:0; color:var(--fg-2); cursor:pointer; margin-left:auto; padding:0; }
@keyframes entra { from{opacity:0;transform:translateY(-6px);} to{opacity:1;transform:none;} }

.aviso-caixa { padding:11px 13px; border-radius:var(--r-g); font-size:12.5px;
  border:1px solid var(--borda-forte); background:var(--bg-2); margin-bottom:13px; }
.aviso-caixa.bloqueio { border-color:#e74c3c55; background:#e74c3c14; }
.aviso-caixa.atencao { border-color:#f1c40f55; background:#f1c40f12; }
.aviso-caixa h3 { margin-bottom:5px; display:flex; align-items:center; gap:7px; }
.aviso-caixa ul { margin:6px 0 0; padding-left:19px; }

/* --- Separadores ---------------------------------------------------------- */
.abas { display:flex; gap:2px; border-bottom:1px solid var(--borda); margin-bottom:14px;
  overflow-x:auto; }
.abas a {
  padding:8px 12px; font-size:12px; color:var(--fg-1); border-bottom:2px solid transparent;
  white-space:nowrap; text-transform:uppercase; letter-spacing:.05em; font-weight:500;
}
.abas a:hover { color:var(--fg-0); text-decoration:none; }
.abas a.ativo { color:var(--fg-0); border-bottom-color:var(--acento); }
.abas .conta { margin-left:5px; color:var(--fg-2); font-size:11px; }

/* --- Lista de definições -------------------------------------------------- */
.defs { display:grid; grid-template-columns:auto 1fr; gap:7px 16px; font-size:12.5px; align-items:baseline; }
.defs dt { color:var(--fg-2); font-size:11.5px; }
.defs dd { margin:0; }
.defs .full { grid-column:1/-1; }

/* --- Barras --------------------------------------------------------------- */
.barra { height:6px; border-radius:3px; background:var(--bg-3); overflow:hidden; min-width:60px; }
.barra span { display:block; height:100%; border-radius:3px; }
.barra-azul{background:var(--azul);} .barra-verde{background:var(--verde);}
.barra-ambar{background:var(--ambar);} .barra-vermelho{background:var(--vermelho);}

/* --- Anexos e galeria ----------------------------------------------------- */
.zona-largar {
  border:1.5px dashed var(--borda-forte); border-radius:var(--r-g); padding:18px;
  text-align:center; color:var(--fg-2); font-size:12.5px; cursor:pointer;
}
.zona-largar.sobre { border-color:var(--acento); background:var(--acento-fraco); color:var(--fg-0); }
.lista-anexos { display:flex; flex-direction:column; gap:1px; }
.anexo-linha { display:flex; align-items:center; gap:10px; padding:8px 11px; border-bottom:1px solid var(--borda); }
.anexo-linha:hover { background:var(--bg-2); }
.anexo-linha .nome { font-size:12.5px; font-weight:500; }
.anexo-linha .meta { font-size:11px; color:var(--fg-2); }
.anexo-linha .fim { margin-left:auto; display:flex; align-items:center; gap:7px; }
.anexo-versao { font-size:10.5px; color:var(--fg-2); background:var(--bg-3); padding:1px 5px; border-radius:4px; }

.galeria { display:grid; grid-template-columns:repeat(auto-fill, minmax(158px, 1fr)); gap:9px; }
.galeria figure { margin:0; border:1px solid var(--borda); border-radius:var(--r-g);
  overflow:hidden; background:var(--bg-2); position:relative; }
.galeria img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.galeria figcaption { padding:6px 8px; font-size:11px; color:var(--fg-1);
  display:flex; align-items:center; gap:6px; }
.galeria .marca-atual { position:absolute; top:6px; left:6px; background:var(--acento);
  color:#fff; font-size:10px; padding:1px 6px; border-radius:20px; }
.visor { position:fixed; inset:0; background:#000c; display:none; place-items:center; z-index:300; }
.visor.aberto { display:grid; }
.visor img { max-width:92vw; max-height:88vh; border-radius:var(--r-g); }
.visor .fechar { position:absolute; top:16px; right:20px; color:#fff; background:none;
  border:0; cursor:pointer; }

/* --- Diagrama de danos ---------------------------------------------------- */
.diagrama { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:10px; }
.diagrama .zona { background:var(--bg-2); border:1px solid var(--borda); border-radius:var(--r-g);
  padding:8px; position:relative; }
.diagrama .zona h4 { font-size:11px; color:var(--fg-1); margin-bottom:5px; text-align:center;
  text-transform:uppercase; letter-spacing:.05em; }
.diagrama .tela { position:relative; cursor:crosshair; }
.diagrama svg { width:100%; display:block; }
.diagrama .marca-dano {
  position:absolute; width:17px; height:17px; margin:-8.5px 0 0 -8.5px; border-radius:50%;
  border:2px solid #fff; display:grid; place-items:center; font-size:9px; color:#fff;
  font-weight:700; cursor:pointer; box-shadow:0 1px 4px #0008;
}
.dano-ligeiro{background:var(--cinza);} .dano-moderado{background:var(--ambar);color:#222;}
.dano-grave{background:var(--vermelho);}
/* Tem de ganhar a ".diagrama .marca-dano" acima, que também define box-shadow */
.diagrama .marca-dano.dano-novo { box-shadow:0 0 0 3px #e74c3c88, 0 1px 4px #0008; }

/* Cada dano marcado no diagrama tem a sua linha de detalhe por baixo */
.linha-dano { margin-bottom:8px; border-color:var(--borda-forte); }
.linha-dano[data-dano-novo="1"] { border-left:3px solid var(--vermelho); }

/* --- Assinatura ----------------------------------------------------------- */
.assinatura { border:1px solid var(--borda); border-radius:var(--r-g); background:#fff; }
.assinatura canvas { width:100%; height:120px; display:block; touch-action:none; cursor:crosshair; }
.assinatura-barra { display:flex; align-items:center; gap:8px; padding:6px 9px;
  border-top:1px solid var(--borda); background:var(--bg-1); font-size:11.5px; color:var(--fg-2); }

/* --- Linha temporal (Gantt) ----------------------------------------------- */
.gantt { overflow-x:auto; }
.gantt table { border-collapse:collapse; width:100%; min-width:760px; font-size:12px; }
.gantt th { font-size:10px; color:var(--fg-2); font-weight:600; text-transform:uppercase;
  letter-spacing:.05em; padding:5px 6px; border-bottom:1px solid var(--borda); text-align:center; }
.gantt th.veiculo, .gantt td.veiculo { text-align:left; width:150px; white-space:nowrap;
  position:sticky; left:0; background:var(--bg-1); z-index:2; border-right:1px solid var(--borda); }
.gantt td { border-bottom:1px solid var(--borda); padding:0; height:29px; position:relative; }
.gantt .faixa { position:absolute; height:15px; top:7px; border-radius:3px; font-size:10px;
  color:#fff; padding:0 5px; line-height:15px; overflow:hidden; white-space:nowrap; }
.gantt .faixa-contrato{background:var(--azul);} .gantt .faixa-manutencao{background:var(--ambar);color:#222;}
.gantt .faixa-sinistro{background:var(--vermelho);}
.gantt .hoje { position:absolute; top:0; bottom:0; width:1px; background:var(--acento); z-index:3; }
.gantt .celula-mes { border-left:1px solid var(--borda); }

/* --- Gráficos ------------------------------------------------------------- */
.grafico { width:100%; }
.grafico svg { width:100%; height:auto; display:block; overflow:visible; }
.grafico .eixo { stroke:var(--borda); stroke-width:1; }
.grafico .grelha-linha { stroke:var(--borda); stroke-width:1; stroke-dasharray:2 4; }
.grafico text { fill:var(--fg-2); font-size:10px; }
.grafico .serie { fill:none; stroke:var(--acento); stroke-width:2; }
.grafico .area { fill:var(--acento-fraco); }
.grafico .col-receita { fill:var(--verde); } .grafico .col-custo { fill:var(--vermelho); }

/* --- Diversos ------------------------------------------------------------- */
.txt-faint { color:var(--fg-2); }
.txt-mudo { color:var(--fg-1); }
.txt-peq { font-size:11.5px; }
.num { font-variant-numeric:tabular-nums; }
.mat { font-family:ui-monospace, Consolas, monospace; font-weight:600; letter-spacing:.03em; }
.pilha { display:flex; flex-direction:column; gap:2px; }
.linha-flex { display:flex; align-items:center; gap:8px; }
.separador { height:1px; background:var(--borda); margin:12px 0; }
hr { border:0; border-top:1px solid var(--borda); margin:14px 0; }

/* --- Entrada / instalação ------------------------------------------------- */
.centro-ecra { min-height:100vh; display:grid; place-items:center; padding:20px; }
.cartao-auth { width:100%; max-width:400px; background:var(--bg-1); border:1px solid var(--borda);
  border-radius:14px; padding:26px; box-shadow:var(--sombra); }
.cartao-auth .marca { padding:0 0 18px; }

/* ==========================================================================
   RESPONSIVO
   Três patamares: ecrã largo (omissão), tablet (≤1180 / ≤900) e telemóvel
   (≤640). No telemóvel a navegação passa a gaveta e as tabelas deixam de ser
   tabelas — cada linha vira um cartão com os rótulos vindos do cabeçalho.
   ========================================================================== */

/* Botão da gaveta: só existe abaixo de 900px */
.abrir-menu { display:none; }
.fundo-lateral { display:none; }

@media (max-width:1180px) {
  .g4 { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .g3, .g-2-1 { grid-template-columns:1fr; }
}

/* --- Tablet e telemóvel: navegação em gaveta ------------------------------ */
@media (max-width:900px) {
  .app { grid-template-columns:1fr; }

  .lateral {
    position:fixed; top:0; bottom:0; left:0; width:264px; height:100dvh;
    transform:translateX(-100%); transition:transform .22s ease;
    z-index:120; box-shadow:var(--sombra);
  }
  .lateral.aberta { transform:none; }
  .fundo-lateral { position:fixed; inset:0; background:#000a; z-index:110; }
  .fundo-lateral.visivel { display:block; }
  body.menu-aberto { overflow:hidden; }

  .abrir-menu { display:inline-flex; }
  .menu a { padding:10px 11px; font-size:13.5px; }     /* alvos de toque maiores */

  .form-grelha { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .campo-3, .campo-4 { grid-column:span 2; }
  .g2 { grid-template-columns:1fr; }
}

/* --- Telemóvel ------------------------------------------------------------ */
@media (max-width:640px) {
  .conteudo { padding:11px; }
  .topo { padding:0 11px; gap:8px; }
  .pesquisa { max-width:none; }
  .pesquisa-res { position:fixed; left:8px; right:8px; top:52px; }

  .cabecalho { gap:9px; }
  .cabecalho h1 { font-size:17px; }
  .cabecalho .acoes { margin-left:0; width:100%; }
  .cabecalho .acoes .botao { flex:1 1 auto; justify-content:center; }

  .grelha { gap:11px; }
  .g4 { grid-template-columns:repeat(2, minmax(0,1fr)); }  /* indicadores a pares */
  .g2, .g3, .g-2-1 { grid-template-columns:1fr; }
  .form-grelha { grid-template-columns:1fr; }
  .campo-2, .campo-3, .campo-4 { grid-column:span 1; }

  .ind-valor { font-size:20px; }
  .indicador { padding:10px 11px; }

  /* 16px evita que o iOS faça zoom ao focar um campo */
  .campo input, .campo select, .campo textarea { font-size:16px; height:38px; }
  .campo textarea { height:auto; }
  .campo .sufixo { top:31px; }
  .botao { height:36px; padding:0 13px; }
  .botao.pequeno { height:30px; }
  .botao-ico { width:36px; }
  label.check input { width:19px; height:19px; }

  .filtros { padding:10px; gap:8px; }
  .filtros .campo { min-width:0; flex:1 1 100%; }
  .filtros .espaco { display:none; }
  .filtros .botao { width:100%; justify-content:center; }

  /* --- Tabelas viram cartões ---------------------------------------------
     O data-rotulo é preenchido por app.js a partir do <thead>, por isso
     nenhuma vista precisa de mudar. */
  .tabela-envolve { overflow-x:visible; }
  table.tabela, table.tabela tbody, table.tabela tfoot,
  table.tabela tr, table.tabela td { display:block; width:auto; }
  table.tabela thead { display:none; }
  table.tabela tr {
    border:1px solid var(--borda); border-radius:var(--r-g);
    margin:9px; padding:3px 0; background:var(--bg-1);
  }
  table.tabela tbody tr:hover { background:var(--bg-1); }
  table.tabela td {
    border:0; padding:5px 11px; display:flex; gap:10px; align-items:baseline;
    text-align:left; white-space:normal;
  }
  table.tabela td::before {
    content:attr(data-rotulo); flex:0 0 42%; min-width:0;
    color:var(--fg-2); font-size:10.5px; text-transform:uppercase;
    letter-spacing:.05em; font-weight:600;
  }
  table.tabela td.celula-titulo {
    display:block; font-size:14px; font-weight:600; padding:8px 11px 7px;
    border-bottom:1px solid var(--borda); margin-bottom:3px;
  }
  table.tabela td.celula-titulo::before { display:none; }
  table.tabela td.num { justify-content:flex-start; }
  table.tabela td.acoes { justify-content:flex-end; padding-top:8px; }
  table.tabela td.acoes::before { display:none; }
  table.tabela td.vazia-telemovel { display:none; }
  table.tabela tfoot td { border-top:0; }
  table.tabela tfoot tr { background:var(--bg-2); }
  .vazio { padding:24px 12px; }

  /* Galeria, diagrama e linha temporal */
  .galeria { grid-template-columns:repeat(2, minmax(0,1fr)); gap:7px; }
  .diagrama { grid-template-columns:1fr; }
  .gantt th.veiculo, .gantt td.veiculo { width:104px; font-size:11px; }
  .assinatura canvas { height:150px; }

  .paginacao { justify-content:center; }
  .paginacao .paginas { margin-left:0; width:100%; justify-content:center; }

  .mensagens { top:auto; bottom:10px; left:10px; right:10px; max-width:none; }
  .defs { grid-template-columns:1fr; gap:1px 0; }
  .defs dt { margin-top:7px; }
  .cartao > header { padding:9px 11px; flex-wrap:wrap; }
  .cartao .corpo { padding:11px; }
  .abas a { padding:9px 11px; }
  .anexo-linha { padding:9px 11px; }
}

/* Ecrãs muito estreitos: os indicadores também passam a um por linha */
@media (max-width:400px) {
  .g4 { grid-template-columns:1fr; }
  .galeria { grid-template-columns:1fr; }
}

/* --- Impressão ------------------------------------------------------------ */
@media print {
  @page { size:A4; margin:14mm; }
  body { background:#fff; color:#000; font-size:11px; }
  .lateral, .topo, .acoes, .form-rodape, .mensagens, .filtros, .paginacao,
  .fundo-lateral, .abrir-menu, .nao-imprimir { display:none !important; }
  .app { display:block; }
  .conteudo { padding:0; }
  .cartao { border:1px solid #bbb; box-shadow:none; break-inside:avoid; margin-bottom:8mm; }
  .cartao > header { background:#f2f2f2; }
  table.tabela th { background:#f2f2f2; color:#000; }
  .etq { border:1px solid #999; color:#000 !important; background:#fff !important; }
  a { color:#000; text-decoration:none; }
  .quebra-pagina { break-before:page; }
  .so-impressao { display:block !important; }
}
.so-impressao { display:none; }

/* --- Barras de deslocamento ----------------------------------------------- */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--bg-3); border-radius:6px; border:2px solid var(--bg-0); }
::-webkit-scrollbar-thumb:hover { background:var(--borda-forte); }