/* Gestor Jurídico PA — folha de estilo única (vem dos esboços aprovados em 03/11/2026).
   Ordem: tokens, base, moldura, cabeçalho de página, componentes, telas. */

/* --- 1. Tokens ----------------------------------------------------------- */
:root {
    --verde:        #1A5639;   /* verde do papel timbrado */
    --verde-escuro: #244C2E;
    --verde-claro:  #e6f0ea;
    --verde-texto:  #1A5639;

    --fundo:        #f4f6f5;
    --superficie:   #ffffff;
    --superficie-2: #f8faf9;
    --borda:        #dfe5e2;
    --borda-forte:  #c6d0cb;

    --texto:        #26302b;
    --texto-medio:  #5e6b65;
    --texto-fraco:  #8e9a94;

    --prazo:        #c62828;   /* vermelho de prazo, como no DataJuri */
    --prazo-bg:     #fdecec;
    --aviso:        #a86a00;   --aviso-bg: #fff4dc;
    --info:         #1f5f99;   --info-bg:  #e7f0fa;
    --ok:           #2e7d4f;   --ok-bg:    #e3f3e9;

    --raio: 6px;
    --menu-l: 208px;
    --sombra: 0 1px 2px rgba(20, 40, 30, .06);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
        --verde: #4fae7f; --verde-escuro: #3d8f66; --verde-claro: #1d3328; --verde-texto: #7fcfa5;
        --fundo: #121715; --superficie: #1a201d; --superficie-2: #1f2622;
        --borda: #2c3631; --borda-forte: #3a4640;
        --texto: #e3e9e6; --texto-medio: #a7b3ad; --texto-fraco: #78857f;
        --prazo: #ff7b72; --prazo-bg: #3a1f1f; --aviso: #e0a84a; --aviso-bg: #362b17;
        --info: #79b0e8; --info-bg: #182a3b; --ok: #6cc596; --ok-bg: #18301f;
        --sombra: none;
    }
}
:root[data-tema="escuro"] {
    --verde: #4fae7f; --verde-escuro: #3d8f66; --verde-claro: #1d3328; --verde-texto: #7fcfa5;
    --fundo: #121715; --superficie: #1a201d; --superficie-2: #1f2622;
    --borda: #2c3631; --borda-forte: #3a4640;
    --texto: #e3e9e6; --texto-medio: #a7b3ad; --texto-fraco: #78857f;
    --prazo: #ff7b72; --prazo-bg: #3a1f1f; --aviso: #e0a84a; --aviso-bg: #362b17;
    --info: #79b0e8; --info-bg: #182a3b; --ok: #6cc596; --ok-bg: #18301f;
    --sombra: none;
}

/* --- 2. Base ------------------------------------------------------------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
    font-family: "Open Sans", system-ui, sans-serif;
    font-size: 14px; line-height: 1.5;
    color: var(--texto); background: var(--fundo);
}
a { color: var(--verde-texto); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.25rem; font-weight: 600; margin: 0; }
h2 { font-size: 1rem; font-weight: 600; margin: 0; }
.fraco { color: var(--texto-fraco); }
.medio { color: var(--texto-medio); }
.mono  { font-variant-numeric: tabular-nums; }
svg.icone { flex: 0 0 auto; vertical-align: -.2em; }
svg.i  { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7;
         stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

/* --- 3. Moldura ---------------------------------------------------------- */
.moldura { display: grid; grid-template-columns: var(--menu-l) minmax(0, 1fr); min-height: 100vh; }
.menu {
    background: var(--superficie); border-right: 1px solid var(--borda);
    display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.menu .marca { color: var(--texto); text-decoration: none; display: flex; align-items: center; gap: 10px; padding: 16px 18px;
               border-bottom: 1px solid var(--borda); }
.menu .marca .simbolo { width: 34px; height: 34px; border-radius: 6px; background: url(marca.png) no-repeat -53px 0 / 142px auto; flex: 0 0 auto; }
.menu .marca b { font-size: .82rem; letter-spacing: .06em; line-height: 1.2; }
.menu nav { padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.menu nav a {
    display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--raio);
    color: var(--texto-medio); font-weight: 500;
}
.menu nav a:hover { background: var(--superficie-2); text-decoration: none; color: var(--texto); }
.menu nav a.ativo { background: var(--verde-claro); color: var(--verde-texto); font-weight: 600; }
.menu nav a .cont { margin-left: auto; font-size: .72rem; background: var(--prazo); color: #fff;
                    border-radius: 10px; padding: 0 7px; font-weight: 600; }
.menu nav .pe { margin-top: auto; border-top: 1px solid var(--borda); padding-top: 8px; }

.topo {
    display: flex; align-items: center; gap: 12px; padding: 10px 24px;
    background: var(--superficie); border-bottom: 1px solid var(--borda); position: sticky; top: 0; z-index: 5;
}
.busca { flex: 1; max-width: 560px; display: flex; align-items: center; gap: 8px;
         border: 1px solid var(--borda); border-radius: var(--raio); padding: 6px 10px; background: var(--superficie-2); }
.busca input { border: 0; outline: 0; background: transparent; flex: 1; font: inherit; color: var(--texto); }
.busca kbd, kbd { font-family: inherit; font-size: .72rem; border: 1px solid var(--borda-forte);
                  border-radius: 4px; padding: 0 5px; color: var(--texto-medio); }
.topo .usuario { margin-left: auto; display: flex; align-items: center; gap: 14px; color: var(--texto-medio); }
.botao-icone { background: none; border: 0; color: var(--texto-medio); cursor: pointer; padding: 6px;
               border-radius: var(--raio); display: inline-flex; }
.botao-icone:hover { background: var(--superficie-2); color: var(--texto); }

.area { padding: 18px 24px 40px; }
.trilha { font-size: .8rem; color: var(--texto-fraco); margin-bottom: 6px; }
.trilha a { color: var(--texto-medio); }

/* --- 4. Cabeçalho de página: título à esquerda, ação principal à direita --- */
.cabecalho { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.cabecalho .sub { color: var(--texto-medio); font-size: .85rem; }
.cabecalho .acoes { margin-left: auto; display: flex; gap: 8px; }

details.ajuda { margin: 0 0 14px; color: var(--texto-medio); font-size: .85rem; }
details.ajuda summary { cursor: pointer; list-style: none; display: inline-flex; gap: 6px; align-items: center; }
details.ajuda summary::-webkit-details-marker { display: none; }
details.ajuda[open] p { margin: 6px 0 0; padding: 8px 12px; border-left: 3px solid var(--verde);
                        background: var(--superficie); border-radius: 0 var(--raio) var(--raio) 0; max-width: 760px; }

/* --- 5. Componentes ------------------------------------------------------ */
.btn {
    display: inline-flex; align-items: center; gap: 6px; font: inherit; font-weight: 600; font-size: .86rem;
    padding: 7px 14px; border-radius: var(--raio); border: 1px solid var(--borda-forte);
    background: var(--superficie); color: var(--texto); cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--superficie-2); text-decoration: none; }
.btn.primario { background: var(--verde); border-color: var(--verde); color: #fff; }
.btn.primario:hover { background: var(--verde-escuro); }
.btn.perigo { color: var(--prazo); }
.btn.pequeno { padding: 3px 9px; font-size: .8rem; }

.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); }
.cartao > header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--borda); }
.cartao > header .rot { font-size: .72rem; color: var(--texto-fraco); display: block; }
.cartao > header .acoes { margin-left: auto; display: flex; gap: 2px; }
.cartao > .corpo { padding: 14px; }

table.tab { width: 100%; border-collapse: collapse; }
.tab th { text-align: left; font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
          color: var(--texto-medio); padding: 7px 10px; background: var(--superficie-2); border-bottom: 1px solid var(--borda); }
.tab td { padding: 7px 10px; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tab tr:hover td { background: var(--superficie-2); }
.tab .vazio td { color: var(--texto-fraco); font-style: italic; border: 0; }

.bola { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.bola.prazo { background: var(--prazo); } .bola.outro { background: var(--ok); }
a.prazo, .prazo-txt { color: var(--prazo); }

.etq { display: inline-block; font-size: .72rem; font-weight: 600; padding: 1px 8px; border-radius: 10px;
       background: var(--superficie-2); color: var(--texto-medio); border: 1px solid var(--borda); }
.etq.verde { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.etq.vermelha { background: var(--prazo-bg); color: var(--prazo); border-color: transparent; }
.etq.amarela { background: var(--aviso-bg); color: var(--aviso); border-color: transparent; }
.etq.azul { background: var(--info-bg); color: var(--info); border-color: transparent; }

.paginacao { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 8px 12px;
             color: var(--texto-medio); font-size: .82rem; border-top: 1px solid var(--borda); margin-top: auto; }

.filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.campo { display: flex; flex-direction: column; gap: 4px; }
.campo label { font-size: .8rem; font-weight: 600; color: var(--texto-medio); }
.campo label .obr { color: var(--prazo); }
.campo .dica { font-size: .75rem; color: var(--texto-fraco); }
input.ent, select.ent, textarea.ent {
    font: inherit; color: var(--texto); background: var(--superficie); border: 1px solid var(--borda-forte);
    border-radius: var(--raio); padding: 7px 10px; width: 100%;
}
.grade { display: grid; gap: 14px; }
.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)); }

.abas { display: flex; gap: 2px; border-bottom: 1px solid var(--borda); margin-bottom: 14px; overflow-x: auto; }
.abas a { padding: 8px 14px; color: var(--texto-medio); border-bottom: 2px solid transparent; white-space: nowrap; font-weight: 500; }
.abas a.ativa { color: var(--verde-texto); border-color: var(--verde); font-weight: 600; }
.abas a:hover { text-decoration: none; color: var(--texto); }
.abas .n { font-size: .72rem; color: var(--texto-fraco); margin-left: 4px; }

.indicadores { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.indicador { display: block; padding: 10px 14px; background: var(--superficie); border: 1px solid var(--borda);
             border-radius: var(--raio); color: var(--texto); }
.indicador:hover { border-color: var(--verde); text-decoration: none; }
.indicador b { display: block; font-size: 1.4rem; font-weight: 600; }
.indicador span { font-size: .78rem; color: var(--texto-medio); }
.indicador.alerta b { color: var(--prazo); }

.dialogo-fundo { position: fixed; inset: 0; background: rgba(10, 20, 15, .45); display: grid; place-items: center; z-index: 20; }
.dialogo { width: min(520px, calc(100vw - 32px)); background: var(--superficie); border-radius: 10px;
           box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.dialogo header { padding: 14px 18px; border-bottom: 1px solid var(--borda); display: flex; align-items: center; }
.dialogo .corpo { padding: 16px 18px; }
.dialogo footer { padding: 12px 18px; border-top: 1px solid var(--borda); display: flex; justify-content: flex-end; gap: 8px; }


/* --- 6. Telas ------------------------------------------------------------ */
.quadros { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.quadros .cartao { display: flex; flex-direction: column; min-height: 300px; }

.linha-tempo { list-style: none; margin: 0; padding: 0; }
.linha-tempo li { position: relative; padding: 0 0 14px 22px; border-left: 2px solid var(--borda); margin-left: 6px; }
.linha-tempo li::before { content: ""; position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%;
                          background: var(--superficie); border: 2px solid var(--verde); }
.linha-tempo li.pub::before { border-color: var(--info); }
.linha-tempo li.prz::before { border-color: var(--prazo); }
.linha-tempo time { font-size: .78rem; color: var(--texto-fraco); }

.ficha-topo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 12px 14px; margin-bottom: 14px; }
.ficha-topo dt { font-size: .72rem; color: var(--texto-fraco); }
.ficha-topo dd { margin: 0; font-weight: 600; }

.recorte { font-family: Georgia, "Times New Roman", serif; font-size: .95rem; line-height: 1.65; white-space: pre-line; }
.tratar { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px; }
.barra-decisao { position: sticky; bottom: 0; display: flex; gap: 8px; padding: 12px 14px; background: var(--superficie);
                 border-top: 1px solid var(--borda); }

.qualificacao { padding: 12px 14px; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--raio);
                font-family: Georgia, "Times New Roman", serif; line-height: 1.6; }

.urgente { animation: pulso 1.8s ease-out infinite; }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(198, 40, 40, .45); } 100% { box-shadow: 0 0 0 9px rgba(198, 40, 40, 0); } }

/* --- 7. Responsivo ------------------------------------------------------- */
@media (max-width: 1100px) {
    .indicadores { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tratar { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
    .moldura { grid-template-columns: minmax(0, 1fr); }
    .menu { position: static; height: auto; flex-direction: row; overflow-x: auto; }
    .menu .marca { border: 0; }
    .menu nav { flex-direction: row; padding: 6px; }
    .menu nav .pe { margin: 0; border: 0; padding: 0; }
    .menu nav a span.r { display: none; }
    .quadros, .g2, .g3, .g4, .ficha-topo { grid-template-columns: minmax(0, 1fr); }
    .indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .area, .topo { padding-left: 16px; padding-right: 16px; }
    .tab-rola { overflow-x: auto; }
    .cartao { overflow-x: auto; }
    .topo .usuario span { display: none; }
    .nome-usuario { display: none; }
    .busca { min-width: 0; }
    .topo .usuario { gap: 4px; }
    .menu { max-width: 100vw; }
    .menu .marca b { display: none; }
    .cabecalho { flex-wrap: wrap; }
    .cabecalho .acoes { margin-left: 0; }
}

/* --- 8. Sistema (além dos esboços) ---------------------------------------- */
.principal { min-width: 0; }
.em-linha { display: inline; margin: 0; }
.nome-usuario { color: var(--texto-medio); font-weight: 500; }
.busca input:disabled { cursor: not-allowed; }
.centro { text-align: center; }
.pequeno { font-size: .85rem; }
.largo { width: 100%; justify-content: center; padding: 9px 14px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.primario kbd { color: #fff; border-color: rgba(255,255,255,.5); }
.dialogo header .botao-icone { margin-left: auto; }

.faixa-ambiente { background: #f2c94c; color: #3a2c00; text-align: center; font-weight: 600; font-size: .78rem;
                  letter-spacing: .06em; padding: 3px 8px; position: relative; z-index: 30; }

.alerta { padding: 9px 14px; border-radius: var(--raio); margin-bottom: 12px; font-size: .9rem; border: 1px solid transparent; }
.alerta.sucesso { background: var(--ok-bg); color: var(--ok); }
.alerta.erro    { background: var(--prazo-bg); color: var(--prazo); }
.alerta.aviso   { background: var(--aviso-bg); color: var(--aviso); }
.alerta.sumindo { transition: opacity .4s; opacity: 0; }

.pagina-solta { min-height: 100vh; }
.solta { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.solta > .cartao, .solta > form.cartao { width: min(420px, 100%); padding: 28px; gap: 14px; }
.solta form.cartao { width: min(560px, 100%); }
.marca-grande { display: block; height: 96px; margin: 0 auto; }
.nome-sistema { text-align: center; color: var(--texto-medio); font-size: .85rem; margin-top: -6px; }
.solta h1 { text-align: center; }
.solta h2 { margin-top: 6px; }

.formulario-estreito { max-width: 520px; }
.rotulo-linha { width: 160px; }
.vazio-modulo { text-align: center; padding: 40px 20px; color: var(--texto-medio); }
.vazio-modulo svg { color: var(--verde-texto); }
.detalhe-erro { white-space: pre-wrap; font-size: .8rem; background: var(--superficie-2); padding: 8px; border-radius: var(--raio); }

/* Roteiro do primeiro acesso: um balão por vez, sobre o elemento em destaque. */
.roteiro { position: fixed; inset: 0; background: rgba(10, 20, 15, .35); z-index: 40; }
.roteiro .balao { position: fixed; width: min(340px, calc(100vw - 32px)); background: var(--superficie); color: var(--texto);
                  border-radius: 10px; padding: 16px 18px; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.roteiro .balao h2 { margin: 2px 0 6px; }
.roteiro .balao p { margin: 0 0 12px; color: var(--texto-medio); }
.roteiro .balao footer { display: flex; justify-content: space-between; }
.roteiro .passo { font-size: .75rem; color: var(--texto-fraco); }
.destaque-roteiro { position: relative; z-index: 41; box-shadow: 0 0 0 4px var(--verde), 0 0 0 9999px rgba(10,20,15,.0);
                    border-radius: var(--raio); background: var(--superficie); }
.cartao.corpo { padding: 14px; }
.solta > .cartao.corpo, .solta > form.cartao.corpo { padding: 28px; }