/* =====================================================================
 *  KRIGS — COMPONENTES OFICIAIS DA PLATAFORMA
 *  Documento 04 (Design System) e Documento 05 (Biblioteca de Componentes).
 *
 *  Depende de krigs-tokens.css, que deve ser carregado ANTES deste.
 *  Copie sem alterar valores. Nenhuma cor literal aqui — so variaveis.
 * ===================================================================== */

/* ---------------------------------------------------------- base ---- */
*{ box-sizing:border-box; margin:0; padding:0 }
body{
  font-family:var(--fonte); font-size:15px; line-height:1.45;
  color:var(--texto); background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--azul-2); text-decoration:none }
a:hover{ text-decoration:underline }

h1{ font-size:23px; font-weight:700; margin:0 0 4px }
h2{ font-size:18px; font-weight:700; margin:0 0 12px }
h3{ font-size:15px; font-weight:700 }
.sub{ color:var(--cinza); margin:0 0 20px }

.conteudo{ max-width:1100px; margin:0 auto; padding:22px 18px }

/* Foco visivel: obrigatorio em tudo que recebe foco (Documento 07). */
:focus-visible{ outline:3px solid var(--azul-claro); outline-offset:2px }

/* Texto so para leitor de tela. */
.sr-apenas{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Link de pular para o conteudo: primeiro elemento tabulavel da pagina. */
.pular-link{
  position:absolute; left:-9999px; top:0; z-index:9999;
  background:var(--branco); color:var(--azul); padding:10px 16px;
  border-radius:var(--raio-sm); box-shadow:var(--sombra-lg); font-weight:600;
}
.pular-link:focus{ left:12px; top:12px }

/* -------------------------------------------------------- botoes ---- */
.btn{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--azul-2); color:#fff; border:0;
  padding:10px 16px; border-radius:var(--raio-sm);
  font-family:inherit; font-size:14px; font-weight:600; line-height:1; cursor:pointer;
}
.btn:hover{ background:var(--azul); text-decoration:none }
.btn.sec{ background:var(--branco); color:var(--azul-2); border:1px solid #c5d4ec }
.btn.sec:hover{ background:#f1f6ff }
.btn.verde{ background:var(--verde) }   .btn.verde:hover{ background:#1b5e20 }
.btn.perigo{ background:var(--vermelho) } .btn.perigo:hover{ background:#9a1f1f }
.btn.peq{ padding:6px 11px; font-size:13px }
.btn.bloco{ width:100%; justify-content:center; padding:13px }
.btn[disabled]{ opacity:.5; cursor:not-allowed }

/* -------------------------------------------------------- campos ---- */
.form-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px }
.campo{ display:flex; flex-direction:column; gap:5px; margin-bottom:2px }
.campo.full{ grid-column:1/-1 }
.campo label{ font-size:13px; font-weight:600; color:#39424f }
.campo input,.campo select,.campo textarea{
  padding:10px 12px; border:1px solid #cfd6df; border-radius:var(--raio-sm);
  font-size:15px; font-family:inherit; background:var(--branco); width:100%;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:0; border-color:var(--azul-2); box-shadow:0 0 0 3px var(--azul-claro);
}
.campo .dica{ font-size:12px; color:var(--cinza-2) }
/* Inválido so destaca APOS a interacao: nao acusa erro em campo intocado. */
.campo input:user-invalid,.campo select:user-invalid,.campo textarea:user-invalid,
.campo input.invalido,.campo select.invalido,.campo textarea.invalido{
  border-color:var(--vermelho); box-shadow:0 0 0 3px var(--vermelho-claro);
}
.campo .msg-erro{ font-size:12px; color:var(--vermelho); min-height:16px }
.form-acoes{ display:flex; gap:10px; margin-top:18px; flex-wrap:wrap }

/* ------------------------------------------------------- tabelas ---- */
.tabela-wrap{
  overflow-x:auto; border:1px solid var(--linha);
  border-radius:var(--raio); background:var(--branco);
}
table.dados{ width:100%; border-collapse:collapse; font-size:14px }
table.dados th,table.dados td{
  padding:11px 13px; text-align:left;
  border-bottom:1px solid var(--linha); vertical-align:middle;
}
table.dados th{
  background:#f7f9fc; color:#48515d; font-size:12px;
  text-transform:uppercase; letter-spacing:.4px; font-weight:600;
}
table.dados tr:last-child td{ border-bottom:0 }
table.dados tr:hover td{ background:#fafcff }

/* Alinhamento por tipo de dado — vale em toda a plataforma. */
.col-desc{ text-align:left }
.col-cod { text-align:center; white-space:nowrap }
.col-data{ text-align:left;   white-space:nowrap }
.num     { text-align:right;  font-variant-numeric:tabular-nums }

tr.linha-total{
  font-weight:800; background:#dbe4f2;
  border-top:2px solid var(--azul); border-bottom:2px solid var(--azul);
}
tr.linha-total .lt-qtd{ font-weight:600; color:var(--cinza); font-size:12px; margin-left:8px }

/* -------------------------------------------- cartoes e numeros ---- */
.card{
  background:var(--branco); border:1px solid var(--linha);
  border-radius:var(--raio); box-shadow:var(--sombra);
  padding:20px; margin-bottom:18px;
}
.card .cab{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:12px; border-bottom:1px solid var(--linha); margin-bottom:14px;
}

.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px }
.stat{
  background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio);
  box-shadow:var(--sombra); padding:16px 18px;
}
.stat .num{ font-size:30px; font-weight:800; color:var(--azul) }
.stat .lbl{ color:var(--cinza); font-size:13px; text-transform:uppercase; letter-spacing:.4px }
/* A barra lateral indica a NATUREZA do numero. */
.stat.financeiro{ border-left:4px solid var(--azul) }
.stat.quantidade{ border-left:4px solid var(--verde) }  .stat.quantidade .num{ color:var(--verde) }
.stat.alerta    { border-left:4px solid var(--laranja) } .stat.alerta .num{ color:var(--laranja) }

/* ---------------------------------------------------------- selos ---- */
.badge{ display:inline-block; padding:3px 10px; border-radius:var(--raio-pill);
        font-size:12px; font-weight:700 }
.badge.verde   { background:var(--verde-claro);    color:var(--verde) }
.badge.amarelo { background:var(--amarelo-claro);  color:#9a6b00 }
.badge.vermelho{ background:var(--vermelho-claro); color:var(--vermelho) }
.badge.cinza   { background:#eceff3;               color:var(--cinza) }
.badge.inativo { background:#f0f0f0;               color:#999 }

/* -------------------------------------------------------- alertas ---- */
.alerta{ padding:12px 16px; border-radius:var(--raio-sm); margin-bottom:16px;
         font-weight:500; border:1px solid }
.alerta.ok  { background:var(--verde-claro);    border-color:#bfe3c0; color:#1b5e20 }
.alerta.erro{ background:var(--vermelho-claro); border-color:#f3c2bd; color:#922 }

/* ---------------------------------------------------- estado vazio ---- */
.vazio{ text-align:center; padding:42px 20px; color:var(--cinza-2) }
.vazio .ico{ margin-bottom:8px; line-height:1; color:var(--cinza-2) }
.vazio h3{ margin:0 0 6px; color:var(--texto) }

/* ----------------------------------------------- aviso temporario ---- */
.toast-wrap{ position:fixed; right:18px; bottom:18px; display:flex;
             flex-direction:column; gap:10px; z-index:9999 }
.toast{ background:var(--texto); color:#fff; padding:12px 16px;
        border-radius:11px; box-shadow:var(--sombra-lg);
        font-size:13.5px; max-width:340px }
.toast.alerta{ background:var(--vermelho) }

/* ------------------------------------------------------ modal ---- */
/* Use o elemento <dialog>: foco preso, Esc, fundo inerte e retorno de
 * foco vem do navegador. Substituir por <div> obriga a reimplementar
 * cinco comportamentos a mao. */
dialog.modal{
  border:0; padding:0; border-radius:16px; width:560px; max-width:94vw;
  box-shadow:var(--sombra-lg); background:var(--branco); color:var(--texto);
}
dialog.modal::backdrop{ background:rgba(16,24,40,.5) }
dialog.modal .cab{ display:flex; justify-content:space-between; align-items:center;
                   padding:18px 22px; border-bottom:1px solid var(--linha) }
dialog.modal .corpo{ padding:22px }
dialog.modal .rodape{ padding:16px 22px; border-top:1px solid var(--linha);
                      display:flex; justify-content:flex-end; gap:10px }

/* ------------------------------------------------------- icones ---- */
.ico-svg{ flex:none; vertical-align:-.18em }
.btn .ico-svg{ margin-right:-1px }
h2 .ico-svg,h3 .ico-svg{ vertical-align:-.2em; margin-right:6px; color:var(--cinza) }

/* =====================================================================
 *  RESPONSIVIDADE — a escada oficial: 1100 / 860 / 820 / 560
 * ===================================================================== */

@media (max-width:1100px){
  .cards-2{ grid-template-columns:1fr }
}

@media (max-width:860px){
  .form-grid{ grid-template-columns:1fr }
  .conteudo{ padding:14px }
}

/* Tabela vira cartao. Cada celula precisa de data-rotulo — o observador
 * do Documento 07 preenche sozinho. */
@media (max-width:820px){
  table.resp{ border:0; min-width:0 }
  table.resp thead{ display:none }
  table.resp,table.resp tbody,table.resp tfoot,table.resp tr,table.resp td{
    display:block; width:100%;
  }
  table.resp tr{
    border:1px solid var(--linha); border-radius:12px;
    margin-bottom:10px; padding:4px 12px; background:var(--branco);
  }
  table.resp tfoot tr{ background:var(--bg); font-weight:700 }
  table.resp td{
    display:flex; justify-content:space-between; align-items:baseline; gap:14px;
    border:0; border-bottom:1px dashed var(--linha); padding:8px 0; text-align:right;
  }
  table.resp td::before{
    content:attr(data-rotulo); font-weight:600; color:var(--cinza);
    text-align:left; flex:none; max-width:48%;
  }
  table.resp tr td:last-child{ border-bottom:0 }
  table.resp td[data-rotulo=""]{ justify-content:flex-end }
  table.resp td:empty{ display:none }
  .tabela-wrap:has(table.resp){ border:0; background:transparent }
}

@media (max-width:560px){
  /* Abaixo de 16px o navegador do celular da zoom sozinho ao focar. */
  input,select,textarea{ font-size:16px }
  .cards{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  table.dados{ font-size:12px }
  table.dados th,table.dados td{ padding:8px 9px }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important }
}

/* =====================================================================
 *  IMPRESSAO — Documento 11
 * ===================================================================== */

@page{ size:A4 portrait; margin:12mm 10mm; margin-bottom:16mm }

@media print{
  html,body{ height:auto !important; background:#fff !important; color:#000 !important }
  body{ font-size:10pt; line-height:1.35 }

  .no-print,.topo,.nav,.rodape,.toast-wrap,.filtros,.barra-busca,
  .pular-link,.acoes-col,.acoes-linha,button,.btn,input,select,textarea{
    display:none !important;
  }
  .conteudo{ max-width:none !important; margin:0 !important; padding:0 !important }
  .rel-cabecalho{ display:block !important }

  .card,.stat{
    box-shadow:none !important; border:1px solid #bbb !important;
    border-radius:6px !important; margin-bottom:10px !important;
    background:#fff !important; break-inside:avoid;
  }
  .tabela-wrap{ overflow:visible !important; border:0 !important; border-radius:0 !important }

  table.dados{
    width:100% !important; min-width:0 !important;
    border-collapse:collapse !important; font-size:8.5pt !important; table-layout:auto;
  }
  thead{ display:table-header-group }
  tfoot{ display:table-footer-group }
  tr{ break-inside:avoid; page-break-inside:avoid }
  table.dados th,table.dados td{
    border:1px solid #999 !important; padding:3px 5px !important;
    word-break:break-word; overflow-wrap:anywhere;
  }
  table.dados th{
    background:#e8eef7 !important; color:#0d3f8f !important;
    font-size:7.5pt !important; text-transform:none; letter-spacing:-.1px;
    white-space:nowrap !important;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  table.dados th.col-desc{ white-space:normal !important }
  tfoot tr,tr.linha-total{
    background:#dbe4f2 !important; font-weight:700;
    border-top:2px solid #0d47a1 !important;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  tr.linha-total td{
    padding:6px 5px !important; font-size:9pt !important;
    border-top:2px solid #0d47a1 !important; border-bottom:2px solid #0d47a1 !important;
  }

  th.col-cod,td.col-cod  { width:22mm }
  th.col-data,td.col-data{ width:24mm }
  th.num,td.num          { width:14mm; white-space:nowrap }
  th.col-desc,td.col-desc{ width:auto; min-width:60mm; white-space:normal }

  /* A tabela em cartao volta a ser tabela no papel. */
  table.resp,table.resp tbody,table.resp tfoot,table.resp tr{ display:revert !important }
  table.resp thead{ display:table-header-group !important }
  table.resp td{ display:table-cell !important; text-align:left !important;
                 border:1px solid #999 !important }
  table.resp td::before{ content:none !important }

  /* Selo precisa ser legivel em preto e branco. */
  .badge{ background:#fff !important; color:#000 !important;
          border:1px solid #999 !important; border-radius:4px !important;
          padding:1px 4px !important; font-weight:600 }

  a{ color:#000 !important; text-decoration:none !important }
  h1,h2,h3,h4{ break-after:avoid; page-break-after:avoid }

  .rel-cabecalho .rc-topo{ display:flex; justify-content:space-between; align-items:center;
    border-bottom:1.5px solid #0d47a1; padding-bottom:4px; margin-bottom:6px }
  .rel-cabecalho .rc-logo{ height:9mm; width:auto; flex:none }
  .rel-cabecalho h1{ font-size:12.5pt; margin:0; color:#0d47a1; line-height:1.1 }
  .rel-cabecalho .rc-sub{ font-size:8.5pt; color:#444; line-height:1.25 }
  .rel-cabecalho .rc-dir{ text-align:right; font-size:7.5pt; color:#444; line-height:1.3 }

  .rel-rodape{
    display:flex !important; position:fixed; left:0; right:0; bottom:0;
    justify-content:space-between; align-items:center; gap:10px;
    border-top:1px solid #bbb; padding-top:3px;
    font-size:7pt; color:#555; background:#fff;
  }
}