/* A APLICAÇÃO DO TRACKTOR — a casca (barra lateral, topo, página) e os
   componentes que os ecrãs usam. Vem do protótipo (tracktor/prototipo/), com os
   mesmos nomes de classes, para os ecrãs de cada fase se construírem por cima
   dele sem desenhar outra vez. As cores estão todas no marca-cores.css. */

h1,h2,h3,h4{margin:0; font-weight:500; letter-spacing:-.015em; text-wrap:balance}
p{margin:0}
a{color:var(--azul-ink); text-underline-offset:3px}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer}
.ic{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; flex:none}
.ic.sm{width:15px; height:15px}
.ic.xs{width:13px; height:13px}
.muted{color:var(--muted)}

/* ---------- a casca ---------- */
.app{display:grid; grid-template-columns:252px minmax(0,1fr); min-height:100svh}
.lado{position:sticky; top:0; height:100svh; overflow-y:auto; background:var(--surface);
  border-right:1px solid var(--line); padding:18px 14px 16px; display:flex; flex-direction:column; gap:18px; z-index:40}
.marca{display:flex; align-items:center; gap:11px; padding:2px 6px; text-decoration:none; color:inherit}
.marca img{width:38px; height:38px; border-radius:11px; box-shadow:0 6px 14px -6px rgba(0,119,240,.6)}
.marca span{display:flex; flex-direction:column; line-height:1.15}
.marca small{font-size:11.5px; color:var(--muted)}
.marca b{font-weight:500; font-size:17px; letter-spacing:-.02em}

.unidade{width:100%; display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--r-dentro);
  border:1px solid var(--line); background:var(--surface-2); text-align:left; position:relative}
.unidade:hover{border-color:var(--line-strong)}
.unidade .sig{width:28px; height:28px; border-radius:8px; background:var(--azul-soft); color:var(--azul-ink);
  display:grid; place-items:center; font-size:11.5px; font-weight:500; flex:none}
.unidade .t{display:flex; flex-direction:column; min-width:0; flex:1; line-height:1.25}
.unidade small{font-size:11.5px; color:var(--muted)}
.unidade b{font-weight:500; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.unidade select{position:absolute; inset:0; opacity:0; cursor:pointer; width:100%}
.unidade:focus-within{box-shadow:var(--ring)}

.nav{display:flex; flex-direction:column; gap:2px}
.nav-lbl{font-size:11.5px; color:var(--muted); padding:10px 10px 4px}
.nav a{display:flex; align-items:center; gap:11px; padding:8px 10px; border-radius:var(--r-campo); color:var(--ink-2);
  text-decoration:none; font-size:14px; transition:background .15s}
.nav a:hover{background:var(--sunken)}
.nav a[aria-current="page"]{background:var(--azul-soft); color:var(--azul-ink); font-weight:500}
.nav a .fase{margin-left:auto; font-size:11px; color:var(--muted); font-weight:400}

.lado-pe{margin-top:auto; display:flex; flex-direction:column; gap:8px}
.eu{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--r-dentro); background:var(--surface-2);
  border:1px solid var(--line)}
.eu .t{min-width:0; flex:1; line-height:1.3}
.eu b{font-weight:500; font-size:13.5px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.eu small{font-size:12px; color:var(--muted)}

.principal{min-width:0; display:flex; flex-direction:column}
.topo{position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:12px; padding:12px 28px;
  background:color-mix(in srgb, var(--canvas) 88%, transparent); backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line); min-height:63px}
.topo .menu{display:none}
.topo-dir{margin-left:auto; display:flex; align-items:center; gap:8px}
.icone-btn{width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--surface);
  display:grid; place-items:center; color:var(--ink-2); flex:none}
.icone-btn:hover{border-color:var(--line-strong)}
.avatar{width:36px; height:36px; border-radius:50%; background:var(--azul-soft-2); color:var(--azul-ink); display:grid;
  place-items:center; font-weight:500; font-size:13px; flex:none; overflow:hidden}
.avatar.sm{width:30px; height:30px; font-size:12px}
.avatar img{width:100%; height:100%; object-fit:cover}

.pagina{padding:26px 28px 64px; width:100%; max-width:1280px; margin:0 auto; display:flex; flex-direction:column; gap:22px}
.pagina-h{display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap}
.pagina-h h1{font-size:clamp(24px,2.6vw,30px); letter-spacing:-.025em; line-height:1.2}
.pagina-h p{color:var(--muted); margin-top:4px; max-width:62ch}
.pagina-h .acts{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}

/* ---------- componentes ---------- */
.btn{height:40px; padding:0 18px; border-radius:var(--r-pilula); border:1px solid var(--line); background:var(--surface);
  color:var(--ink); font-size:13.5px; font-weight:500; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  white-space:nowrap; transition:background .15s, border-color .15s, transform .1s; text-decoration:none}
.btn:hover{border-color:var(--line-strong); background:var(--surface-2)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.6; cursor:not-allowed}
.btn.primario{background:var(--cta); border-color:transparent; color:#fff; box-shadow:var(--cta-shadow)}
.btn.primario:hover{background:var(--cta-hover)}
.btn.calmo{border-color:transparent; background:none; color:var(--azul-ink); padding:0 10px}
.btn.calmo:hover{background:var(--azul-soft)}
.btn.perigo{color:var(--vermelho-ink)}
.btn.sm{height:32px; padding:0 13px; font-size:12.5px}

.pill{display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 10px; border-radius:var(--r-pilula);
  font-size:12px; font-weight:500; white-space:nowrap; background:var(--sunken); color:var(--ink-2)}
.pill.azul{background:var(--azul-soft); color:var(--azul-ink)}
.pill.verde{background:var(--verde-soft); color:var(--verde-ink)}
.pill.ambar{background:var(--ambar-soft); color:var(--ambar-ink)}
.pill.vermelho{background:var(--vermelho-soft); color:var(--vermelho-ink)}
.pill.solido{background:var(--azul-500); color:#fff}

.cartao{background:var(--card-bg); border:1px solid var(--line); border-radius:var(--r-cartao); box-shadow:var(--shadow-1); min-width:0}
.cartao-h{display:flex; align-items:flex-start; gap:12px; padding:18px 22px 0}
.cartao-h h2{font-size:16.5px}
.cartao-h p{font-size:12.5px; color:var(--muted); margin-top:2px}
.cartao-h .acts{margin-left:auto}
.cartao-b{padding:16px 22px 20px}
.cartao-b.rente{padding:12px 0 4px}

.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 12px; border-radius:var(--r-pilula);
  border:1px solid var(--line); background:var(--surface); font-size:13px; color:var(--ink-2)}
.chip[aria-pressed="true"]{border-color:var(--azul-500); background:var(--azul-soft); color:var(--azul-ink)}

.campo{display:flex; flex-direction:column; gap:6px; min-width:0}
.campo > span, .campo > label{font-size:13px; font-weight:500; color:var(--ink-2)}
.campo small{font-size:12px; color:var(--muted)}
.campo input:not([type=radio]):not([type=checkbox]), .campo select{width:100%; min-height:42px; border-radius:var(--r-campo); border:1px solid var(--line-strong);
  background:var(--surface); padding:9px 12px; font-size:14px}
.campo input:not([type=radio]):not([type=checkbox]):focus, .campo select:focus{outline:none; border-color:var(--azul-500); box-shadow:var(--ring)}
@media(pointer:coarse){ .campo input:not([type=radio]):not([type=checkbox]), .campo select{font-size:16px} }
.linha{display:flex; gap:12px; flex-wrap:wrap}
.linha > *{flex:1 1 200px}

.tabela-w{overflow-x:auto}
table.tabela{width:100%; border-collapse:collapse; font-size:13.5px}
.tabela th{text-align:left; font-weight:500; font-size:12px; color:var(--muted); padding:10px 14px; border-bottom:1px solid var(--line);
  white-space:nowrap; background:var(--surface-2)}
.tabela td{padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:middle}
.tabela tr:last-child td{border-bottom:0}
.tabela td.c, .tabela th.c{text-align:center}
.tabela .nome{display:flex; align-items:center; gap:10px; min-width:220px}
.tabela .nome b{font-weight:500; display:block}
.tabela .nome small{color:var(--muted); font-size:12px}

.aviso{display:flex; gap:10px; padding:12px 14px; border-radius:var(--r-dentro); font-size:13.5px; line-height:1.5; align-items:flex-start}
.aviso.azul{background:var(--azul-soft); color:var(--azul-ink)}
.aviso.ambar{background:var(--ambar-soft); color:var(--ambar-ink)}
.aviso.vermelho{background:var(--vermelho-soft); color:var(--vermelho-ink)}
.aviso b{font-weight:500}
.aviso .ic{margin-top:2px}

/* Um ecrã ainda por construir diz o que vai fazer e quando. */
.em-breve{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:22px; align-items:start}
.em-breve ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; font-size:14px}
.em-breve li{display:flex; gap:10px; align-items:flex-start}
.em-breve li .ic{color:var(--azul-500); margin-top:2px}
.passos{display:flex; flex-direction:column}
.passo{display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:12px; align-items:center; padding:11px 22px; border-top:1px solid var(--line); font-size:13.5px}
.passo:first-child{border-top:0}
.passo .n{font-variant-numeric:tabular-nums; color:var(--muted); font-size:12.5px}

.espera{display:flex; align-items:center; gap:10px; color:var(--muted); padding:28px 22px; font-size:14px}
.espera .roda{width:18px; height:18px; border-width:2.5px; opacity:.5}

/* ---------- diálogo ---------- */
.veu{position:fixed; inset:0; background:rgba(8,14,26,.42); z-index:80}
.dialogo-w{position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:20px; overflow-y:auto}
.dialogo{background:var(--surface); border-radius:var(--r-dialogo); box-shadow:var(--shadow-pop); width:min(540px,100%);
  max-height:calc(100svh - 40px); display:flex; flex-direction:column; position:relative; z-index:91}
.dialogo-h{display:flex; align-items:flex-start; gap:12px; padding:20px 24px 12px}
.dialogo-h h2{font-size:21px; letter-spacing:-.02em}
.dialogo-h p{color:var(--muted); font-size:13.5px; margin-top:4px}
.dialogo-h .icone-btn{margin-left:auto}
.dialogo-b{padding:6px 24px 20px; overflow-y:auto; display:flex; flex-direction:column; gap:16px}
.dialogo-f{padding:14px 24px; border-top:1px solid var(--line); display:flex; gap:8px; justify-content:flex-end; align-items:center; flex-wrap:wrap}
.dialogo-f .dica{margin-right:auto; font-size:12.5px; color:var(--muted)}
.erro{background:var(--vermelho-soft); color:var(--vermelho-ink); border-radius:var(--r-dentro); padding:10px 12px; font-size:13.5px}

.toast{position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:120; background:var(--ink); color:var(--surface);
  border-radius:var(--r-pilula); padding:11px 18px; font-size:13.5px; box-shadow:var(--shadow-pop); max-width:calc(100% - 32px)}
.toast.mau{background:var(--vermelho); color:#fff}

/* ---------- sem acesso ---------- */
.fechado{min-height:100svh; display:grid; place-items:center; padding:24px; background:var(--canvas)}
.fechado .cartao{max-width:460px; padding:30px 28px; text-align:center; display:flex; flex-direction:column; gap:12px; align-items:center}
.fechado img{width:52px; height:52px; border-radius:14px}
.fechado h1{font-size:22px}
.fechado p{color:var(--muted)}

/* ---------- responsivo ---------- */
@media (max-width:1100px){ .em-breve{grid-template-columns:minmax(0,1fr)} }
@media (max-width:960px){
  .app{grid-template-columns:minmax(0,1fr)}
  .lado{position:fixed; left:0; top:0; bottom:0; width:280px; transform:translateX(-102%); transition:transform .28s var(--ease); box-shadow:var(--shadow-pop)}
  .app.nav-aberta .lado{transform:none}
  .app.nav-aberta .nav-veu{display:block}
  .nav-veu{display:none; position:fixed; inset:0; background:rgba(8,14,26,.42); z-index:35}
  .topo .menu{display:grid}
  .topo{padding:10px 16px; padding-top:calc(10px + env(safe-area-inset-top, 0px))}
  .pagina{padding:18px 16px 56px}
}
@media (min-width:961px){ .nav-veu{display:none} }
@media (max-width:640px){
  .cartao-h{padding:16px 16px 0}
  .cartao-b{padding:14px 16px 16px}
  .passo{padding:11px 16px}
  .dialogo-h, .dialogo-b, .dialogo-f{padding-left:18px; padding-right:18px}
}