/* Diário Oficial de Itu — acervo. Visual: IBM Plex, azul institucional, modo claro e escuro. */
:root {
  --fundo: #f5f6f8; --papel: #ffffff; --papel-2: #fafbfc; --tinta: #0e1a2b; --sutil: #5b6675; --fraco: #8a93a1;
  --linha: #e2e6ec; --linha-2: #eef1f4; --campo: #cfd6df;
  --marca: #1d4f91; --marca-escura: #123a70; --marca-clara: #e8eef7; --barra: #9db4d4;
  --faixa: #0b1d36; --faixa-tinta: #c9d3e0; --faixa-sutil: #9fb0c6;
  --realce: #fff1a8; --ok: #1f7a3d; --erro: #b3261e;
  --extra-fundo: #fdf1e3; --extra: #8a4b0f; --neutro-fundo: #eef1f4; --neutro: #3d4756;
  --sombra: 0 1px 2px rgba(14, 26, 43, .04);
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: light;
  font-size: 16px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0f1621; --papel: #161f2c; --papel-2: #1b2533; --tinta: #e6ebf2; --sutil: #9aa6b6; --fraco: #737f90;
    --linha: #26324a; --linha-2: #1f2a3b; --campo: #34425a;
    --marca: #7fb0ea; --marca-escura: #a3c7f2; --marca-clara: #1c2d47; --barra: #3f5f8a;
    --faixa: #08111e; --faixa-tinta: #b5c1d1; --faixa-sutil: #8494aa;
    --realce: #5a4b00; --ok: #5fc27e; --erro: #ff8a80;
    --extra-fundo: #3a2812; --extra: #f0b060; --neutro-fundo: #222d3d; --neutro: #b9c3d0;
    --sombra: none;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--fundo); color: var(--tinta);
       font-family: 'IBM Plex Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.5;
       -webkit-font-smoothing: antialiased; }
a { color: var(--marca); text-decoration: none; }
a:hover { color: var(--marca-escura); text-decoration: underline; }
code, .mono { font-family: var(--mono); font-size: .9em; }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.pular { position: absolute; left: -9999px; }
.pular:focus { left: 1rem; top: .5rem; z-index: 10; background: var(--papel); padding: .4rem .8rem; border-radius: 6px; }

/* --- faixa, topo, rodapé --------------------------------------------------------- */
.faixa { background: var(--faixa); color: var(--faixa-tinta); font-size: 12px; letter-spacing: .02em; }
.faixa-dentro, .topo-dentro, .destaque-dentro, .rodape-dentro { max-width: 1280px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.faixa-dentro { display: flex; justify-content: space-between; gap: .25rem 1rem; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.faixa .mono { color: var(--faixa-sutil); font-size: 12px; }

.topo { background: var(--papel); border-bottom: 1px solid var(--linha); }
.topo-dentro { min-height: 68px; display: flex; align-items: stretch; gap: 8px 40px; flex-wrap: wrap; }
.marca { display: flex; align-items: center; gap: 12px; color: var(--tinta); }
.marca:hover { text-decoration: none; color: var(--tinta); }
.selo { width: 36px; height: 36px; border-radius: 6px; background: var(--marca); color: #fff; display: grid; place-items: center;
        font-weight: 600; font-size: 14px; letter-spacing: .04em; }
@media (prefers-color-scheme: dark) { .selo { background: #1d4f91; } }
.marca-texto { display: flex; flex-direction: column; line-height: 1.15; }
.marca-texto strong { font-weight: 600; font-size: 16px; }
.marca-texto small { font-size: 12px; color: var(--sutil); }
.abas { display: flex; gap: 4px; flex: 1; }
.abas a { display: flex; align-items: center; padding: 0 14px; font-size: 14px; color: var(--sutil);
          border-bottom: 2px solid transparent; }
.abas a:hover { color: var(--tinta); text-decoration: none; }
.abas a[aria-current] { color: var(--tinta); font-weight: 500; border-bottom-color: var(--marca); }
.conta { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.conta > a { color: var(--sutil); }
.conta > a:hover, .conta > a[aria-current] { color: var(--tinta); }
.divisor { width: 1px; height: 24px; background: var(--linha); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--marca-clara); color: var(--marca);
          display: grid; place-items: center; font-size: 13px; font-weight: 600; }
.conta-nome { display: flex; flex-direction: column; line-height: 1.2; font-size: 13px; font-weight: 500; }
.conta-nome button.link { font-size: 12px; font-weight: 400; color: var(--sutil); text-decoration: none; text-align: left; }
.conta-nome button.link:hover { color: var(--marca); text-decoration: underline; }

.rodape { border-top: 1px solid var(--linha); background: var(--papel); margin-top: auto; }
.rodape-dentro { padding-top: 20px; padding-bottom: 20px; display: flex; justify-content: space-between; gap: .5rem 1rem;
                 flex-wrap: wrap; font-size: 12.5px; color: var(--sutil); }

/* --- cabeçalho da página inicial ---------------------------------------------------- */
.destaque { background: var(--papel); border-bottom: 1px solid var(--linha); }
.destaque-dentro:first-child { padding-top: 40px; padding-bottom: 32px; }
.destaque h1 { margin: 0 0 6px; font-size: 28px; font-weight: 600; letter-spacing: -.01em; }
.subtitulo { margin: 0 0 24px; font-size: 15px; color: var(--sutil); }
.caixa-busca { display: flex; flex-wrap: wrap; border: 1px solid var(--campo); border-radius: 8px; background: var(--papel);
               box-shadow: var(--sombra); overflow: hidden; }
.caixa-busca:focus-within { border-color: var(--marca); }
.caixa-busca-campo { flex: 1 1 380px; display: flex; align-items: center; gap: 10px; padding: 0 16px; min-height: 52px; color: var(--sutil); }
.caixa-busca-campo input { flex: 1; border: 0; outline: 0; font-size: 15px; background: transparent; color: var(--tinta); min-width: 0; padding: 0; }
.caixa-busca select { border: 0; border-left: 1px solid var(--linha); border-radius: 0; padding: 0 16px; font-size: 14px;
                      background: var(--papel-2); min-height: 52px; outline: 0; }
.caixa-busca button { border: 0; border-radius: 0; padding: 0 28px; min-height: 52px; font-weight: 500; font-size: 14px; }
.dicas { display: flex; gap: 6px 18px; flex-wrap: wrap; margin-top: 12px; font-size: 12.5px; color: var(--sutil); align-items: center; }
.dicas code { background: var(--neutro-fundo); border: 1px solid var(--linha); border-radius: 4px; padding: 1px 6px; color: var(--tinta); margin-right: 4px; }
.destaque .alerta { margin-top: 0; }
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); border-top: 1px solid var(--linha); margin: 0; }
.numeros > div { padding: 18px 0 18px 24px; border-left: 1px solid var(--linha); display: flex; flex-direction: column; gap: 2px; }
.numeros > div:first-child { padding-left: 0; border-left: 0; }
.numeros dt { font-size: 12px; color: var(--sutil); text-transform: uppercase; letter-spacing: .06em; }
.numeros dd { margin: 0; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.numeros dd small { display: block; font-size: 12px; font-weight: 400; color: var(--sutil); }

/* --- layout do conteúdo --------------------------------------------------------------- */
main { width: 100%; max-width: 1280px; margin: 0 auto; padding: 32px; }
main.estreito { max-width: 460px; }
main.largo { max-width: none; padding: 1rem; }
main.com-lateral { display: flex; gap: 32px; align-items: flex-start; }
.lateral { flex: 0 0 200px; position: sticky; top: 24px; }
.principal { flex: 1 1 640px; min-width: 0; }
.meses { display: flex; flex-direction: column; gap: 2px; }
.meses .ano { font-size: 12px; color: var(--sutil); text-transform: uppercase; letter-spacing: .06em; margin: 14px 0 6px 12px; }
.meses a { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; font-size: 14px; color: var(--tinta);
           border-left: 2px solid transparent; border-radius: 0 6px 6px 0; }
.meses a:hover { background: var(--linha-2); text-decoration: none; }
.meses a[aria-current] { border-left-color: var(--marca); background: var(--marca-clara); color: var(--marca); font-weight: 600; }
.meses .mono { font-size: 12px; color: var(--sutil); font-weight: 400; }

.titulo-lista { display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; margin: 0 0 16px; }
.titulo-lista h2 { margin: 0; font-size: 20px; font-weight: 600; }
.titulo-lista h2::first-letter { text-transform: uppercase; }
.titulo-lista .sutil { font-size: 14px; }
.titulo-lista .direita { margin-left: auto; font-size: 13px; }
.mes + .mes { margin-top: 36px; }

/* grade de edições */
.grade { background: var(--papel); border: 1px solid var(--linha); border-radius: 8px; overflow: hidden; }
.grade-linha { display: grid; grid-template-columns: 84px 130px 96px minmax(90px, .8fr) minmax(210px, 1.6fr) 72px 118px;
               gap: 14px; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--linha-2); font-size: 14px;
               font-variant-numeric: tabular-nums; }
.grade-linha:last-child { border-bottom: 0; }
.grade-linha:not(.grade-cabecalho):hover { background: var(--papel-2); }
.grade-cabecalho { background: var(--papel-2); border-bottom-color: var(--linha); font-size: 11.5px; font-weight: 600; color: var(--sutil);
                   text-transform: uppercase; letter-spacing: .06em; padding-top: 12px; padding-bottom: 12px; }
.grade .num { text-align: right; }
.ed-num { font-weight: 600; font-size: 15px; }
.dia { color: var(--fraco); margin-left: 6px; }
.paginas { display: flex; align-items: center; gap: 10px; }
.paginas .mono { width: 28px; text-align: right; font-size: 13px; }
.barra { flex: 1; max-width: 120px; height: 4px; border-radius: 2px; background: var(--linha-2); }
.barra rect { fill: var(--barra); }
.texto-edicao { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.acoes { display: flex; justify-content: flex-end; gap: 6px; }
.botao-acao { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 10px; min-height: 32px;
              border: 1px solid var(--campo); border-radius: 6px; font-size: 13px; color: var(--tinta); }
.botao-acao.icone { width: 32px; padding: 0; }
.botao-acao:hover { border-color: var(--marca); color: var(--marca); text-decoration: none; }

/* pílulas e etiquetas */
.pilula { display: inline-block; font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 999px;
          background: var(--neutro-fundo); color: var(--neutro); }
.pilula.extra { background: var(--extra-fundo); color: var(--extra); }
.etiqueta { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--linha); color: var(--sutil); white-space: nowrap; }
.etiqueta.extra { color: var(--extra); border-color: currentColor; }
.etiqueta.ok { color: var(--ok); border-color: currentColor; }
.etiqueta.erro { color: var(--erro); border-color: currentColor; }
.etiqueta.andamento { color: var(--marca); border-color: currentColor; }
.etiqueta.portarias { color: var(--tinta); font-weight: 500; }
.etiqueta.vazia { opacity: .6; }
a.etiqueta:hover { text-decoration: none; border-color: var(--marca); color: var(--marca); }
.ocr { white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.ocr-botao { padding: 1px 8px; font-size: 12px; border-radius: 999px; border-color: var(--marca); color: var(--marca); background: transparent; }
.ocr-botao:hover { background: var(--marca); color: var(--papel); }

/* resultados de busca */
.resultados { list-style: none; padding: 0; margin: 0; }
.resultados li { background: var(--papel); border: 1px solid var(--linha); border-radius: 8px; padding: 14px 20px; margin-bottom: 10px; }
.resultados li > * + * { margin-left: 6px; }
.resultados .titulo { font-weight: 600; font-size: 15px; }
.resultados .sutil { font-size: 13px; }
.trecho { margin: 6px 0 0 !important; color: var(--tinta); font-size: 14px; }
mark { background: var(--realce); color: inherit; padding: 0 .1em; border-radius: 2px; }
.vazio { color: var(--sutil); }
.centro { text-align: center; padding: 48px 20px; margin: 0; }
.paginacao { display: flex; gap: .5rem; justify-content: center; margin: 1.25rem 0; }

/* --- componentes gerais (admin, login, edição) ----------------------------------------- */
h1 { font-size: 24px; font-weight: 600; margin: .2rem 0 .8rem; letter-spacing: -.01em; }
h2 { font-size: 18px; font-weight: 600; }
h3 { font-size: 15px; font-weight: 600; margin: 1.4rem 0 .6rem; }
.sutil { color: var(--sutil); }
.cartao { background: var(--papel); border: 1px solid var(--linha); border-radius: 8px; padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; overflow-x: auto; }
.cartao > h2:first-child { margin-top: 0; }
.formulario { display: grid; gap: .9rem; }
.formulario label { display: grid; gap: .3rem; font-weight: 500; font-size: 14px; }
input, select, button, .botao { font: inherit; }
input, select { padding: .5rem .65rem; border: 1px solid var(--campo); border-radius: 6px; background: var(--papel); color: var(--tinta); min-width: 0; }
input:focus, select:focus { outline: 2px solid var(--marca); outline-offset: -1px; border-color: var(--marca); }
input::placeholder { color: var(--fraco); }
button, .botao { display: inline-block; padding: .5rem .9rem; border-radius: 6px; border: 1px solid var(--campo);
                 background: var(--papel); color: var(--tinta); cursor: pointer; font-size: 14px; }
button:hover, .botao:hover { border-color: var(--marca); color: var(--marca); text-decoration: none; }
.primario, .botao.primario { background: var(--marca); border-color: var(--marca); color: #fff; font-weight: 500; }
.primario:hover, .botao.primario:hover { background: var(--marca-escura); border-color: var(--marca-escura); color: #fff; }
@media (prefers-color-scheme: dark) {
  .primario, .botao.primario { background: #1d4f91; border-color: #1d4f91; }
  .primario:hover, .botao.primario:hover { background: #2a63ad; border-color: #2a63ad; }
}
button.pequeno { padding: .1rem .55rem; font-size: 12px; }
button.link { background: none; border: 0; padding: 0; color: var(--marca); text-decoration: underline; cursor: pointer; font-size: inherit; }
form.inline { display: inline; }
.alerta { padding: .75rem 1rem; border-radius: 8px; background: var(--papel); border: 1px solid var(--linha); border-left: 4px solid var(--marca); }
.alerta p { margin: .3rem 0; }
.alerta.erro { border-left-color: var(--erro); }
.alerta.ok { border-left-color: var(--ok); }
.senha { font-size: 1.05rem; user-select: all; }
.segredo { font-family: var(--mono); word-break: break-all; user-select: all; background: var(--neutro-fundo); padding: 2px 6px; border-radius: 4px; }
.tabela { width: 100%; border-collapse: collapse; background: var(--papel); font-size: 14px; }
.tabela th, .tabela td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--linha-2); vertical-align: top; }
.tabela th { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--sutil); background: var(--papel-2); border-bottom-color: var(--linha); }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela .acoes { white-space: nowrap; text-align: right; display: table-cell; }
.tabela.compacta td { padding: .3rem .6rem; font-size: 13.5px; }
.tabela tr.revogado td { color: var(--fraco); }
.linha { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.check { display: inline-flex; gap: .3rem; align-items: center; }
.texto { white-space: pre-wrap; background: var(--papel); border: 1px solid var(--linha); border-radius: 8px; padding: 1rem;
         font-family: var(--mono); font-size: 13px; line-height: 1.55; overflow-x: auto; }

/* página da edição */
.edicao { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 1rem; height: calc(100vh - 11rem); min-height: 520px; }
.painel { overflow-y: auto; background: var(--papel); border: 1px solid var(--linha); border-radius: 8px; padding: 1rem 1.2rem; }
.painel .data { color: var(--sutil); margin-top: -.5rem; }
.ficha { display: grid; grid-template-columns: auto 1fr; gap: .3rem .75rem; font-size: 14px; }
.ficha dt { color: var(--sutil); }
.ficha dd { margin: 0; }
.hash { word-break: break-all; }
.botoes { display: flex; flex-wrap: wrap; gap: .4rem; }
.busca-edicao { display: flex; gap: .4rem; margin: 1rem 0 .4rem; }
.busca-edicao input { flex: 1; }
.ocorrencias { list-style: none; padding: 0; margin: 0; font-size: 13.5px; }
.ocorrencias li { border-top: 1px solid var(--linha-2); }
.ocorrencias li.atual { background: var(--marca-clara); }
.ocorrencias a { display: block; padding: .4rem .3rem; color: var(--tinta); }
.ocorrencias a:hover { text-decoration: none; background: var(--papel-2); }
.vizinhas { display: flex; justify-content: space-between; margin-top: 1rem; }
.visor { width: 100%; height: 100%; border: 1px solid var(--linha); border-radius: 8px; background: #fff; }
.portarias-lista h2 { font-size: 15px; margin: 1.2rem 0 .3rem; }
.portarias-lista ol { list-style: none; padding: 0; margin: 0; font-size: 13.5px; }
.portarias-lista li { border-top: 1px solid var(--linha-2); padding: .3rem .2rem; }
.portarias-lista li.atual { background: var(--marca-clara); }

/* --- telas estreitas ------------------------------------------------------------------------ */
@media (max-width: 1100px) {
  .grade-linha { grid-template-columns: 76px 1fr 96px 72px 112px; }
  .grade-linha > :nth-child(4), .grade-linha > :nth-child(6) { display: none; }
  .grade-cabecalho > :nth-child(5) { display: none; }
  .grade-linha:not(.grade-cabecalho) > .texto-edicao { grid-column: 1 / -1; order: 9; }
}
@media (max-width: 860px) {
  .faixa-dentro, .topo-dentro, .destaque-dentro, .rodape-dentro { padding-left: 16px; padding-right: 16px; }
  main { padding: 20px 16px; }
  main.com-lateral { flex-direction: column; gap: 16px; }
  .lateral { position: static; flex: none; width: 100%; }
  .meses { flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 4px; }
  .meses .ano { display: none; }
  .meses a { flex: none; gap: 8px; border-left: 0; border-bottom: 2px solid transparent; border-radius: 6px; }
  .meses a[aria-current] { border-bottom-color: var(--marca); }
  .topo-dentro { gap: 0 16px; padding-top: 10px; }
  .abas { order: 3; flex-basis: 100%; overflow-x: auto; min-height: 44px; margin: 0 -14px; }
  .conta { margin-left: auto; }
  .conta > a, .divisor { display: none; }
  .destaque-dentro:first-child { padding-top: 24px; padding-bottom: 20px; }
  .destaque h1 { font-size: 24px; }
  .caixa-busca select { flex: 1 1 50%; border-top: 1px solid var(--linha); }
  .caixa-busca select:first-of-type { border-left: 0; }
  .caixa-busca button { flex: 1 1 100%; }
  .numeros { grid-template-columns: repeat(2, 1fr); }
  .numeros > div, .numeros > div:first-child { padding: 12px 0; border-left: 0; border-top: 1px solid var(--linha); }
  .numeros > div:nth-child(-n+2) { border-top: 0; }
  .numeros dd { font-size: 18px; }
  .grade-cabecalho { display: none; }
  .grade-linha { grid-template-columns: auto 1fr auto; gap: 8px 12px; padding: 12px 16px; }
  .grade-linha > :nth-child(3) { justify-self: end; }
  .grade-linha > .acoes { grid-column: 1 / -1; order: 10; justify-content: flex-start; }
  .edicao { grid-template-columns: 1fr; height: auto; }
  .visor { height: 80vh; }
  .tabela .acoes { white-space: normal; }
}
.acoes-legis { margin-top: .8rem; }
.texto-edicao .ocr button.link { font-size: 12px; }