@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
:root {
  --pri: #1E4E8C; --pri-esc: #163A6B; --pri-cla: #2563B0; --sec: #5BB8E8; --dest: #F59E0B;
  --txt: #1E293B; --txt2: #64748B; --borda: #E2E8F0; --fundo: #F1F5F9; --card: #FFFFFF;
  --ok: #16A34A; --alerta: #D97706; --erro: #DC2626; --raio: 12px; --sombra: 0 1px 2px rgba(15,23,42,.06), 0 4px 14px rgba(15,23,42,.06);
  --marca-dagua: url('/assets/img/fundo-login.jpg'); --opac-dagua: .07;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: Inter, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; color: var(--txt); background: var(--fundo); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
a { color: var(--pri-cla); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.2; }

/* ---------- login ---------- */
.login-pagina { min-height: 100vh; background: #0b2448 var(--fundo-login, url('/assets/img/fundo-login.jpg')) right center / cover no-repeat; position: relative; }
.login-pagina::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,28,58,.55) 0%, rgba(8,28,58,.25) 38%, rgba(8,28,58,0) 60%); pointer-events: none; }
.login-caixa { position: absolute; left: clamp(16px, 12.5vw, 260px); top: 50%; transform: translateY(-46%); width: min(345px, calc(100vw - 32px)); z-index: 1;
  background: rgba(255,255,255,.96); border-radius: 18px; padding: 28px 28px 22px; box-shadow: 0 20px 60px rgba(0,0,0,.35); backdrop-filter: blur(6px); }
.login-caixa .logo { display: block; max-width: 220px; max-height: 64px; margin: 0 auto 6px; }
.login-caixa .sub { text-align: center; color: var(--txt2); font-size: 13px; margin-bottom: 18px; }
.login-caixa h2 { font-size: 18px; margin-bottom: 14px; }
.login-caixa .links { display: flex; justify-content: space-between; margin-top: 14px; font-size: 13px; }
.login-rodape { position: absolute; left: clamp(16px, 12.5vw, 260px); bottom: 18px; color: rgba(255,255,255,.75); font-size: 12px; z-index: 1; }
@media (max-width: 760px) {
  .login-pagina { background-position: 72% center; }
  .login-caixa { left: 50%; transform: translate(-50%, -50%); }
  .login-rodape { left: 0; right: 0; text-align: center; }
}

/* ---------- estrutura ---------- */
.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.lateral { background: linear-gradient(180deg, var(--pri-esc), var(--pri)); color: #fff; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; z-index: 30; }
.lateral .topo { padding: 18px 18px 12px; border-bottom: 1px solid rgba(255,255,255,.12); }
.lateral .topo img { max-width: 180px; max-height: 44px; display: block; }
.lateral .topo small { display: block; color: rgba(255,255,255,.7); margin-top: 6px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.lateral nav { padding: 10px 10px 20px; flex: 1; }
.lateral .secao { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.55); padding: 14px 10px 6px; }
.lateral a.item { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.88); padding: 9px 10px; border-radius: 9px; font-weight: 500; }
.lateral a.item:hover { background: rgba(255,255,255,.09); color: #fff; }
.lateral a.item.ativo { background: #fff; color: var(--pri-esc); }
.lateral a.item svg { width: 18px; height: 18px; flex: none; }
.lateral .badge { margin-left: auto; background: var(--dest); color: #1E293B; border-radius: 99px; font-size: 11px; padding: 0 7px; font-weight: 700; }
.lateral .usuario { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.12); font-size: 12.5px; }
.lateral .usuario b { display: block; }
.lateral .usuario a { color: rgba(255,255,255,.75); margin-right: 10px; }

.principal { position: relative; min-width: 0; }
.principal::before { content: ''; position: fixed; inset: 0 0 0 248px; background: var(--marca-dagua) center / cover no-repeat; opacity: var(--opac-dagua); pointer-events: none; z-index: 0; filter: saturate(.8); }
.barra { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 12px 24px; background: rgba(241,245,249,.86); backdrop-filter: blur(8px); border-bottom: 1px solid var(--borda); }
.barra .menu-btn { display: none; }
.barra h1 { font-size: 19px; font-weight: 700; flex: 1; }
.busca-global { position: relative; width: min(420px, 40vw); }
.busca-global input { width: 100%; padding: 9px 12px 9px 34px; border: 1px solid var(--borda); border-radius: 10px; background: #fff; }
.busca-global svg { position: absolute; left: 10px; top: 10px; width: 16px; height: 16px; color: var(--txt2); }
.busca-res { position: absolute; top: 42px; left: 0; right: 0; background: #fff; border-radius: 10px; box-shadow: var(--sombra); border: 1px solid var(--borda); max-height: 380px; overflow: auto; }
.busca-res a { display: block; padding: 8px 12px; color: var(--txt); border-bottom: 1px solid var(--borda); }
.busca-res a:hover { background: var(--fundo); }
.busca-res small { color: var(--txt2); }
.conteudo { position: relative; z-index: 1; padding: 22px 24px 60px; max-width: 1400px; }

@media (max-width: 980px) {
  .app { grid-template-columns: 1fr; }
  .lateral { position: fixed; left: -260px; width: 248px; transition: left .2s; }
  .lateral.aberta { left: 0; box-shadow: 0 0 40px rgba(0,0,0,.35); }
  .principal::before { inset: 0; }
  .barra .menu-btn { display: inline-flex; }
  .busca-global { width: 100%; }
  .barra { flex-wrap: wrap; padding: 10px 14px; }
  .conteudo { padding: 16px 14px 60px; }
}

/* ---------- componentes ---------- */
.card { background: var(--card); border-radius: var(--raio); box-shadow: var(--sombra); border: 1px solid rgba(226,232,240,.8); padding: 18px; }
.card + .card { margin-top: 16px; }
.grade > .card + .card { margin-top: 0; }
.card h3 { font-size: 15px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.grade { display: grid; gap: 16px; }
.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)); }
@media (max-width: 1100px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }
.kpi { display: flex; flex-direction: column; gap: 2px; cursor: pointer; transition: transform .12s; }
.kpi:hover { transform: translateY(-2px); }
.kpi .v { font-size: 26px; font-weight: 800; color: var(--pri-esc); }
.kpi .r { color: var(--txt2); font-size: 12.5px; font-weight: 500; }
.kpi.alerta .v { color: var(--erro); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid transparent; border-radius: 10px; padding: 8px 14px; font-weight: 600; cursor: pointer; background: var(--pri); color: #fff; white-space: nowrap; transition: background .15s, transform .05s; }
.btn:hover { background: var(--pri-esc); } .btn:active { transform: translateY(1px); }
.btn.sec { background: #fff; color: var(--pri-esc); border-color: var(--borda); } .btn.sec:hover { background: var(--fundo); }
.btn.dest { background: var(--dest); color: #1E293B; } .btn.dest:hover { filter: brightness(.95); }
.btn.perigo { background: #fff; color: var(--erro); border-color: #FECACA; } .btn.perigo:hover { background: #FEF2F2; }
.btn.ok { background: var(--ok); } .btn.ok:hover { filter: brightness(.93); }
.btn.peq { padding: 5px 10px; font-size: 12.5px; border-radius: 8px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.acoes.dir { justify-content: flex-end; }
.topo-pag { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }

label.campo { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: #334155; }
label.campo.obrig > span::after { content: ' *'; color: var(--erro); }
input.ctl, select.ctl, textarea.ctl { width: 100%; padding: 9px 11px; border: 1px solid #CBD5E1; border-radius: 9px; background: #fff; font-weight: 400; font-size: 14px; }
input.ctl:focus, select.ctl:focus, textarea.ctl:focus { outline: 2px solid color-mix(in srgb, var(--pri) 30%, transparent); border-color: var(--pri); }
textarea.ctl { min-height: 80px; resize: vertical; }
input.ctl[readonly] { background: #F8FAFC; color: var(--txt2); }
.form-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px 14px; }
.form-grade .largo { grid-column: 1 / -1; }
.form-grupo { margin-top: 14px; font-size: 12px; font-weight: 700; color: var(--pri); text-transform: uppercase; letter-spacing: .06em; grid-column: 1 / -1; border-top: 1px solid var(--borda); padding-top: 12px; }
.check { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 13.5px; cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: var(--pri); }

.tabela-wrap { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.t th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--txt2); padding: 9px 10px; border-bottom: 1px solid var(--borda); white-space: nowrap; background: #F8FAFC; }
table.t td { padding: 9px 10px; border-bottom: 1px solid #EEF2F6; vertical-align: middle; }
table.t tr.clic { cursor: pointer; } table.t tr.clic:hover td { background: #F8FAFC; }
table.t td.num, table.t th.num { text-align: right; white-space: nowrap; }
.vazio { text-align: center; color: var(--txt2); padding: 28px; }
.paginacao { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; color: var(--txt2); font-size: 13px; }

.tag { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 700; white-space: nowrap; background: #E2E8F0; color: #334155; }
.tag.azul { background: #DBEAFE; color: #1E40AF; } .tag.verde { background: #DCFCE7; color: #166534; } .tag.amarelo { background: #FEF3C7; color: #92400E; }
.tag.vermelho { background: #FEE2E2; color: #991B1B; } .tag.cinza { background: #F1F5F9; color: #475569; } .tag.roxo { background: #EDE9FE; color: #5B21B6; }

.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); margin-bottom: 16px; overflow-x: auto; }
.abas button { border: 0; background: none; padding: 10px 14px; font-weight: 600; color: var(--txt2); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.abas button.ativa { color: var(--pri); border-bottom-color: var(--pri); }

.linha-tempo { list-style: none; padding: 0; margin: 0; }
.linha-tempo li { padding: 8px 0 8px 18px; border-left: 2px solid var(--borda); position: relative; font-size: 13px; }
.linha-tempo li::before { content: ''; position: absolute; left: -6px; top: 13px; width: 10px; height: 10px; border-radius: 50%; background: var(--sec); }
.linha-tempo small { color: var(--txt2); display: block; }

.info-lista { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13.5px; }
.info-lista dt { color: var(--txt2); } .info-lista dd { margin: 0; font-weight: 500; }
.total-box { background: #F8FAFC; border: 1px dashed #CBD5E1; border-radius: 10px; padding: 12px; text-align: right; }
.total-box b { font-size: 20px; color: var(--pri-esc); }
.aviso { padding: 10px 14px; border-radius: 10px; background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E; font-size: 13px; margin-bottom: 12px; }
.aviso.info { background: #EFF6FF; border-color: #BFDBFE; color: #1E40AF; } .aviso.erro { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }
.muted { color: var(--txt2); }

/* ---------- modal e toast ---------- */
.modal-fundo { position: fixed; inset: 0; background: rgba(15,23,42,.45); display: flex; align-items: flex-start; justify-content: center; padding: 5vh 12px; z-index: 100; overflow-y: auto; }
.modal { background: #fff; border-radius: 16px; width: min(720px, 100%); box-shadow: 0 30px 80px rgba(0,0,0,.3); }
.modal.largo { width: min(1040px, 100%); } .modal.peq { width: min(460px, 100%); }
.modal header { padding: 16px 20px; border-bottom: 1px solid var(--borda); display: flex; justify-content: space-between; align-items: center; }
.modal header h3 { font-size: 16px; }
.modal header button { border: 0; background: none; font-size: 22px; cursor: pointer; color: var(--txt2); line-height: 1; }
.modal .corpo { padding: 18px 20px; }
.modal footer { padding: 14px 20px; border-top: 1px solid var(--borda); display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 200; }
.toast { background: #1E293B; color: #fff; padding: 11px 16px; border-radius: 10px; box-shadow: var(--sombra); max-width: 380px; font-size: 13.5px; animation: ent .2s; }
.toast.erro { background: var(--erro); } .toast.ok { background: var(--ok); }
@keyframes ent { from { opacity: 0; transform: translateY(8px); } }
.carregando { padding: 40px; text-align: center; color: var(--txt2); }
.autocomplete { position: relative; }
.autocomplete .lista { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border: 1px solid var(--borda); border-radius: 10px; box-shadow: var(--sombra); z-index: 50; max-height: 280px; overflow: auto; }
.autocomplete .lista div { padding: 8px 11px; cursor: pointer; border-bottom: 1px solid #F1F5F9; font-size: 13.5px; }
.autocomplete .lista div:hover, .autocomplete .lista div.sel { background: #EFF6FF; }
.autocomplete .lista small { color: var(--txt2); display: block; }
.foto-equip { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; background: #F1F5F9; }
.qr { display: block; margin: 10px auto; max-width: 260px; }
.matriz td, .matriz th { text-align: center; } .matriz td:first-child, .matriz th:first-child { text-align: left; }
.cor-amostra { display: inline-block; width: 18px; height: 18px; border-radius: 5px; vertical-align: middle; border: 1px solid var(--borda); }
@media print { .lateral, .barra, .acoes, .btn { display: none !important; } .app { display: block; } .principal::before { display: none; } }