/* TRIMODEL 2 — paleta institucional Tricostura.
   azul_escuro #003C78 · azul_medio #4696CC · azul_noite #001232
   bege #E8CBB3 · caramelo #CC946C · amarelo #F0DB97 · vinho #985454 · creme #FAF5EE */
:root{
  --azul:#003C78; --azul-medio:#4696CC; --noite:#001232;
  --bege:#E8CBB3; --caramelo:#CC946C; --amarelo:#F0DB97; --vinho:#985454;
  --creme:#FAF5EE; --branco:#fff;
  --ink:#001232; --ink-2:#3D4A61; --ink-3:#75706A; --rule:#E4D9CB;
  --sombra:0 1px 2px rgba(0,18,50,.06), 0 4px 14px rgba(0,18,50,.05);
  --raio:10px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--creme);color:var(--ink);
  font:15px/1.5 "Segoe UI",system-ui,-apple-system,sans-serif}
a{color:var(--azul)}

/* ---------------------------------------------------------------- topo */
.topo{display:flex;align-items:center;gap:22px;padding:12px 24px;
  background:var(--azul);color:var(--creme);box-shadow:var(--sombra)}
.topo .marca{font-weight:700;letter-spacing:.06em;font-size:18px;color:var(--creme);text-decoration:none}
.topo .marca span{color:var(--amarelo)}
.topo nav a{color:var(--creme);text-decoration:none;font-size:14px;opacity:.9}
.topo nav a:hover{opacity:1;text-decoration:underline}
.topo .fase{margin-left:auto;font-size:11.5px;background:rgba(255,255,255,.15);
  padding:3px 10px;border-radius:999px}
main{max-width:1180px;margin:26px auto 60px;padding:0 20px}
h1{font-family:"Palatino Linotype",Palatino,Georgia,serif;font-size:26px;
  color:var(--azul);margin:0 0 12px;font-weight:600}
h2{font-family:"Palatino Linotype",Palatino,Georgia,serif;color:var(--azul);margin:0 0 4px}
.intro{color:var(--ink-2);max-width:70ch}

/* --------------------------------------------------------------- home */
.placar{list-style:none;display:flex;flex-wrap:wrap;gap:12px;padding:0;margin:20px 0}
.placar li{background:var(--branco);border:1px solid var(--rule);border-radius:var(--raio);
  padding:12px 18px;box-shadow:var(--sombra);font-size:13px;color:var(--ink-2)}
.placar .n{display:block;font-size:24px;font-weight:650;color:var(--azul);
  font-variant-numeric:tabular-nums}
.placar li.pendente{background:var(--amarelo);border-color:var(--caramelo)}
.placar li.pendente .n{color:#7a6516}
.cta{display:inline-block;background:var(--azul);color:#fff;text-decoration:none;
  padding:9px 20px;border-radius:8px;font-weight:600}
.cta:hover{background:var(--azul-medio)}

/* ------------------------------------------------------------ filtros */
.filtros{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;
  background:var(--branco);border:1px solid var(--rule);border-radius:var(--raio);
  padding:16px 18px;box-shadow:var(--sombra);margin-bottom:20px}
.campo{display:flex;flex-direction:column;gap:3px}
.campo.cresce{flex:1;min-width:180px}
.campo label{font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-3)}
input,select{font:14px "Segoe UI",sans-serif;color:var(--ink);background:var(--branco);
  border:1px solid var(--rule);border-radius:7px;padding:7px 10px;min-width:130px}
input:focus,select:focus{outline:2px solid var(--azul-medio);outline-offset:1px}
.check{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink-2)}
.acoes{display:flex;align-items:center;gap:12px;margin-left:auto}
button[type=submit]{background:var(--azul);color:#fff;border:0;border-radius:7px;
  padding:8px 20px;font-weight:600;cursor:pointer}
button[type=submit]:hover{background:var(--azul-medio)}
.limpar{font-size:13px;color:var(--ink-3)}
.htmx-indicator{opacity:0;font-size:12.5px;color:var(--azul-medio);transition:opacity .2s}
.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{opacity:1}

/* -------------------------------------------------------------- cards */
.contagem{font-size:13.5px;color:var(--ink-2);margin:0 0 14px}
.contagem strong{color:var(--azul);font-variant-numeric:tabular-nums}
.cards{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.card{background:var(--branco);border:1px solid var(--rule);border-radius:var(--raio);
  overflow:hidden;box-shadow:var(--sombra);display:flex;flex-direction:column}
.card .foto{border:0;padding:0;background:var(--bege);cursor:pointer;position:relative;
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;width:100%}
.card .foto img{width:100%;height:100%;object-fit:cover;display:block}
.card .foto:hover img{opacity:.88}
.sem-foto{font-size:11.5px;color:#7c6a55;letter-spacing:.04em}
.contador-fotos{position:absolute;right:6px;bottom:6px;background:rgba(0,18,50,.75);
  color:#fff;font-size:10.5px;padding:2px 7px;border-radius:999px}
.card .meta{padding:10px 12px 12px;display:flex;flex-direction:column;gap:2px}
.card .codigo{font-size:16px;color:var(--azul);font-variant-numeric:tabular-nums}
.card .prod{font-size:11.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.card .cores{font-size:11.5px;color:var(--caramelo);font-weight:600}
.card .cli{font-size:12px;color:var(--ink-2)}
.card .desc{font-size:12px;color:var(--ink-2);margin:6px 0 0;line-height:1.4}
.card.sigiloso{border-color:var(--caramelo);background:#fdf8f2}

.paginacao{display:flex;gap:14px;justify-content:center;margin:26px 0 0}
.paginacao a{cursor:pointer;background:var(--branco);border:1px solid var(--rule);
  border-radius:7px;padding:7px 16px;text-decoration:none;font-size:13.5px}
.paginacao a:hover{border-color:var(--azul-medio)}

.aviso{background:var(--branco);border:1px solid var(--rule);border-left:3px solid var(--azul-medio);
  border-radius:0 8px 8px 0;padding:12px 16px;color:var(--ink-2);font-size:14px}
.aviso.erro{border-left-color:var(--vinho);color:var(--vinho);background:#fdf5f5}

/* -------------------------------------------------------------- modal */
/* BLOQUEANTE CORRIGIDO (review 2026-07-29): `display:flex` de autor vence a
   regra [hidden]{display:none} do navegador, entao o modal ficava SEMPRE
   renderizado e o .modal-fundo (inset:0) cobria a viewport inteira capturando
   todos os cliques — o app parecia morto. Por isso o default aqui e `none` e o
   flex so vale quando o atributo hidden NAO esta presente. */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:20}
.modal:not([hidden]){display:flex}
.modal-fundo{position:absolute;inset:0;background:rgba(0,18,50,.55)}
/* trava a rolagem do fundo enquanto o dialogo esta aberto */
body.modal-aberto{overflow:hidden}
.modal-caixa{position:relative;background:var(--creme);border-radius:12px;padding:24px 26px;
  max-width:820px;width:calc(100% - 40px);max-height:86vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.fechar{position:absolute;top:10px;right:12px;background:none;border:0;font-size:20px;
  color:var(--ink-3);cursor:pointer;line-height:1}
.modal .sub{font-size:12.5px;color:var(--ink-3);text-transform:uppercase;
  letter-spacing:.05em;margin:0 0 14px}
.galeria{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.galeria img{width:104px;height:104px;object-fit:cover;border-radius:8px;
  border:1px solid var(--rule);display:block}
.galeria a:hover img{outline:2px solid var(--azul-medio)}
.ficha{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;font-size:14px}
.ficha dt{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-3);padding-top:3px}
.ficha dd{margin:0;color:var(--ink)}
.ficha dd.texto{white-space:pre-wrap;line-height:1.5}

/* ------------------------------------------- pagina do modelo / erro / foco */
.volta{font-size:13.5px;margin:0 0 14px}
.ficha-pagina{background:var(--branco);border:1px solid var(--rule);
  border-radius:var(--raio);padding:24px 26px;box-shadow:var(--sombra);position:relative}
.ficha-pagina .fechar{display:none}
.pagina-erro{text-align:center;padding:50px 20px}
.pagina-erro .codigo-erro{font-family:"Palatino Linotype",Palatino,Georgia,serif;
  font-size:64px;color:var(--bege);margin:0;line-height:1;font-weight:700}
.pagina-erro h1{margin:6px 0 10px}
.pagina-erro .intro{margin:0 auto 20px;max-width:46ch}
:focus-visible{outline:2px solid var(--azul-medio);outline-offset:2px}
.modal-caixa:focus{outline:none}
@media (prefers-reduced-motion: reduce){*{transition:none !important}}