/* Linha gráfica TKS (claude/linha-grafica-tks.md, aprovada a 06-11-2026) */
:root{ --bg:#ffffff; --fg:#111111; --muted:#6b6b6b; --line:#d6d6d6; --line-soft:#e4e4e4; --error:#b3261e; --ok:#1e6b34; }
@media (prefers-color-scheme: dark){
  :root{ --bg:#0d0d0d; --fg:#f2f2f2; --muted:#9a9a9a; --line:#3a3a3a; --line-soft:#262626; --error:#f2b8b5; --ok:#a6d9b3; }
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg); color:var(--fg); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; -webkit-font-smoothing:antialiased}
main{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px 16px 96px}
.card{width:100%; max-width:320px; display:flex; flex-direction:column; align-items:center; gap:clamp(56px,12vh,96px)}
.brand{display:flex; flex-direction:column; align-items:center; gap:12px; text-decoration:none; color:var(--fg)}
.mark{font-size:32px; font-weight:800; letter-spacing:.28em; line-height:1; margin-right:-.28em}
.rule{width:24px; height:1px; background:var(--fg); opacity:.5}
.tag{font-size:10px; letter-spacing:.36em; text-transform:uppercase; color:var(--muted); margin-right:-.36em}
form{width:100%; display:flex; flex-direction:column; gap:24px}
.field{display:flex; flex-direction:column; gap:8px}
label{font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted)}
input,select{width:100%; height:44px; padding:0 2px; background:transparent; color:var(--fg); border:0; border-bottom:1px solid var(--line);
  border-radius:0; font:inherit; font-size:16px; outline:none; transition:border-color .15s ease}
select{-webkit-appearance:none; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 10px) 20px,calc(100% - 5px) 20px; background-size:5px 5px; background-repeat:no-repeat}
select option{color:#111; background:#fff}
input:focus,select:focus{border-bottom-color:var(--fg)}
.codigo input{letter-spacing:.5em; text-align:center; font-size:20px}
.actions{display:flex; flex-direction:column; align-items:center; gap:16px; margin-top:40px}
.btn{display:inline-flex; align-items:center; justify-content:center; min-width:132px; min-height:44px; padding:0 24px; background:transparent;
  color:var(--fg); border:1px solid var(--fg); border-radius:2px; cursor:pointer; font:inherit; font-size:11px; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; text-decoration:none; transition:background .15s ease,color .15s ease}
.btn:hover{background:var(--fg); color:var(--bg)}
.btn:focus-visible,a:focus-visible{outline:2px solid var(--fg); outline-offset:4px}
.help{font-size:11px; color:var(--muted); text-align:center; line-height:1.5}
.help a{color:var(--muted)} .help a:hover{color:var(--fg)}
.msg{min-height:16px; font-size:12px; text-align:center; color:var(--error)}
.msg.ok{color:var(--ok)}
.qr{display:flex; flex-direction:column; align-items:center; gap:12px}
.qr img{width:176px; height:176px; background:#fff; padding:8px}
footer{padding:20px 16px; border-top:1px solid var(--line-soft); display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:center; font-size:11px; color:var(--muted)}
footer a{color:var(--muted)} footer a:hover{color:var(--fg)}
/* Área interna */
.topo{display:flex; align-items:center; gap:24px; padding:0 16px; height:56px; border-bottom:1px solid var(--line-soft)}
.topo .mark{font-size:16px; text-decoration:none; color:var(--fg)}
.abas{display:flex; gap:20px; flex:1; overflow-x:auto; scrollbar-width:none}
.abas a{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); text-decoration:none; padding:20px 0 18px; border-bottom:1px solid transparent; white-space:nowrap}
.abas a:hover{color:var(--fg)} .abas a[aria-current]{color:var(--fg); border-bottom-color:var(--fg)}
.eu{display:flex; align-items:center; gap:12px}
.eu form{width:auto; flex-direction:row}
.pessoa{display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--fg); font-size:13px}
.avatar{flex:none; width:32px; height:32px; border-radius:50%; border:1px solid var(--line); display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--fg)}
.avatar.grande{width:64px; height:64px; font-size:20px}
.btn-sm{min-width:0; min-height:32px; padding:0 14px; font-size:10px}
.btn-ghost{border-color:var(--line); color:var(--muted)} .btn-ghost:hover{border-color:var(--fg)}
.conteudo{flex:1; width:100%; max-width:1040px; margin:0 auto; padding:40px 16px 64px; display:flex; flex-direction:column; gap:32px}
.titulo{font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); font-weight:500; margin-bottom:12px}
h1.titulo{margin:0}
.cabeca .titulo{margin-bottom:8px}
.ola{font-size:28px; font-weight:600; letter-spacing:-.01em; line-height:1.2}
.sub{font-size:13px; color:var(--muted); margin-top:6px}
.grelha{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); border-top:1px solid var(--line-soft); border-left:1px solid var(--line-soft)}
.grelha div{padding:24px 16px; display:flex; flex-direction:column; gap:8px; border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft)}
.grelha b{font-size:13px; font-weight:600} .grelha span{font-size:11px; color:var(--muted)}
.numeros{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft)}
.numeros a{background:var(--bg); padding:20px 16px; display:flex; flex-direction:column; gap:6px; text-decoration:none; color:var(--fg)}
.numeros a:hover{background:var(--line-soft)}
.numeros b{font-size:28px; font-weight:600} .numeros span{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.numeros a.alerta b{color:var(--error)}
.lembrete{font-size:13px; padding:14px 16px; border:1px solid var(--line); } .lembrete a{color:var(--fg)}
.barra{display:flex; justify-content:space-between; align-items:center; gap:16px}
.bloco{border:1px solid var(--line); padding:16px}
.filtros{flex-direction:row; flex-wrap:wrap; gap:16px}
.filtros input{flex:1 1 240px; width:auto} .filtros select{flex:1 1 160px; width:auto; max-width:240px}
.linhas{list-style:none; border-top:1px solid var(--line-soft)}
.linhas li{border-bottom:1px solid var(--line-soft)}
.linha{display:grid; grid-template-columns:32px minmax(0,2fr) minmax(0,1.2fr) minmax(0,1.2fr) minmax(0,1fr); gap:16px; align-items:center; padding:12px 4px; text-decoration:none; color:var(--fg); font-size:13px}
a.linha:hover{background:var(--line-soft)}
.bloco .linha{grid-template-columns:32px minmax(0,1fr) auto}
.quem{display:flex; flex-direction:column; gap:2px; min-width:0}
.quem b{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.quem small,.col{color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dir{text-align:right; overflow:visible}
.acoes{display:flex; gap:8px; width:auto; flex-direction:row}
.estado{font-style:normal; font-size:10px; letter-spacing:.12em; text-transform:uppercase; border:1px solid var(--line); padding:3px 6px; color:var(--muted)}
.estado.off{color:var(--error); border-color:currentColor}
.vazio{padding:24px 4px; color:var(--muted); font-size:13px}
.voltar{font-size:12px; color:var(--muted); text-decoration:none; margin-bottom:-16px} .voltar:hover{color:var(--fg)}
.ficha-topo{display:flex; align-items:center; gap:20px; flex-wrap:wrap}
.ficha-topo > div:nth-child(2){flex:1; min-width:200px}
.convite input{margin-top:8px; font-size:13px}
.convite p{font-size:13px}
.seccoes{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--line-soft); border-left:1px solid var(--line-soft)}
.seccoes section{padding:20px 16px; border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft)}
.seccoes .larga{grid-column:1/-1}
dl{display:grid; grid-template-columns:minmax(120px,40%) 1fr; gap:10px 16px; font-size:13px}
dt{color:var(--muted)} dd{overflow-wrap:anywhere} dd a{color:var(--fg)}
.texto{font-size:13px; line-height:1.6}
.registo{list-style:none; display:flex; flex-direction:column; gap:8px; font-size:12px}
.registo li{display:flex; gap:12px} .registo time{color:var(--muted); min-width:96px} .registo small{color:var(--muted)}
.form-ficha{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 32px; max-width:720px}
.form-ficha .larga{grid-column:1/-1}
.form-ficha small{font-size:11px; color:var(--muted)} .form-ficha small.erro{color:var(--error)}
.form-ficha textarea{width:100%; padding:8px 2px; background:transparent; color:var(--fg); border:0; border-bottom:1px solid var(--line); font:inherit; font-size:15px; outline:none; resize:vertical}
.form-ficha textarea:focus{border-bottom-color:var(--fg)}
.form-ficha .check{flex-direction:row; align-items:center; gap:12px} .form-ficha .check input{width:18px; height:18px}
.form-ficha #id_marcas{display:flex; flex-wrap:wrap; gap:8px 24px; padding-top:8px} .form-ficha #id_marcas label{display:flex; align-items:center; gap:8px; font-size:13px; letter-spacing:0; text-transform:none; color:var(--fg)}
.form-ficha #id_marcas input{width:16px; height:16px; accent-color:var(--fg)} .form-ficha .check input{accent-color:var(--fg)}
.form-ficha .check small{flex-basis:100%}
.form-ficha .check{flex-wrap:wrap}
input:disabled,select:disabled{opacity:.5}
.esq{align-items:flex-start; text-align:left}
.avisos{display:flex; flex-direction:column; gap:8px}
.aviso{font-size:13px; padding:12px 16px; border:1px solid var(--line)} .aviso.success{color:var(--ok)} .aviso.error{color:var(--error)}
@media (max-width:720px){
  .topo{gap:16px} .pessoa .nome{display:none}
  .linha{grid-template-columns:32px minmax(0,1fr) auto} .linha .col:not(.dir){display:none}
  .seccoes,.form-ficha{grid-template-columns:1fr}
  .ola{font-size:22px}
}
.cadeado{letter-spacing:.12em; color:var(--muted); opacity:.8}
.linha-acao{margin-top:16px; width:auto; align-items:flex-start}
.form-pedido{flex-direction:row; flex-wrap:wrap; align-items:flex-end; gap:16px; margin-top:12px}
.form-pedido .field{flex:1 1 200px}