/* =============================================================================
   LICENCAS AMBIENTAIS DE GOIAS (SEMAD)  -  /licencas-go/index
   -----------------------------------------------------------------------------
   Carregado DEPOIS de css/header.css e css/solis2-base.css, de onde vem as
   cores (--marca, --marca-esc, --fundo, --borda...), as fontes (Inter para o
   texto, Outfit para os titulos), o container .area, o "olho" (.olho), os
   botoes (.btn) e o cartao de link (.cartao-servico).

   O que fica aqui:
     1. o topo claro (fundo branco) com os numeros e o FORMULARIO (campos,
        pilulas, chave);
     2. o panorama (cartoes dos 4 graficos) e o bloco "Conheca tambem";
     3. os resultados: cabecalho, paginacao, cartao de licenca, resumo das
        atividades e o aviso de lista vazia;
     4. a nota de origem dos dados;
     6. a PAGINA DE UMA LICENCA (documento.php): cartoes de dados, documentos,
        mapa e a coluna lateral (classes doc-*).

   Regra da casa: nada se DESLOCA quando o mouse passa por cima - o retorno
   visual e feito so com cor, borda e sombra.
   ============================================================================= */

body.lic-pagina { background: var(--fundo); }

/* Texto que so o leitor de tela "ve". */
.so-leitor {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Cores das tres situacoes. Cada cartao/etiqueta usa var(--sit) e var(--sit-claro)
   sem precisar saber qual situacao e. */
.sit-aprovada    { --sit: #15803d; --sit-claro: #dcfce7; }
.sit-protocolada { --sit: #0369a1; --sit-claro: #e0f2fe; }
.sit-tca         { --sit: #b45309; --sit-claro: #fdf0d5; }

/* =============================================================================
   1. TOPO CLARO (fundo branco)
   -----------------------------------------------------------------------------
   Sobre o branco, todo texto usa as cores da marca/do texto do site, nunca
   branco ou azul claro: titulo em --marca-esc, textos de apoio em --texto-sec
   e os destaques (olho, icones, links) em --marca. Todas passam no contraste
   minimo de leitura (WCAG AA) sobre #fff.
   ============================================================================= */
.lic-topo {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #fff;
    color: var(--texto);
    padding: 40px 0 54px;
    border-bottom: 1px solid var(--borda);
}
/* As curvas de nivel (stroke="currentColor") eram brancas sobre o azul; sobre o
   branco viram azul da marca bem suave, so uma textura de fundo. */
.lic-topo .fundo-topo { color: var(--marca); opacity: .22; }
.lic-topo-conteudo { position: relative; }

/* Trilha "Inicio / Licencas SEMAD" */
.lic-trilha {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: .84rem;
    color: var(--texto-sec);
    margin-bottom: 26px;
}
.lic-trilha a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--marca-esc);
    border-bottom: 1px solid rgba(36, 54, 95, .3);
    padding-bottom: 1px;
    transition: border-color .16s ease, color .16s ease;
}
.lic-trilha a:hover { color: var(--marca); border-bottom-color: var(--marca); }
.lic-trilha .sep   { opacity: .6; }
.lic-trilha .atual { color: var(--marca-esc); font-weight: 600; }

.lic-topo .olho { color: var(--marca); margin-bottom: 8px; }

body.solis2 .lic-topo h1 {
    color: var(--marca-esc);
    font-size: clamp(1.75rem, 3.8vw, 2.7rem);
    font-weight: 800;
    letter-spacing: -.02em;
    max-width: 22ch;
}

.lic-topo-sub {
    max-width: 64ch;
    margin-top: 10px;
    font-size: 1.02rem;
    color: var(--texto-sec);
}
.lic-topo-sub b { color: var(--texto); }

/* Os numeros: "51.663 publicacoes · 21.529 aprovadas · ..." */
.lic-numeros {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}
.lic-numeros li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: #eef2f9;
    border: 1px solid #d6dfef;
    font-size: .86rem;
    color: var(--texto);
}
.lic-numeros li .ico { color: var(--marca); }
.lic-numeros strong {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 1.02rem;
    color: var(--marca-esc);
}

/* ---- o formulario (cartao dentro do topo) --------------------------------- */
/* Como o fundo tambem e branco, o cartao se destaca pela borda e pela sombra. */
.lic-form {
    margin-top: 28px;
    padding: 22px 24px 20px;
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 22px;
    box-shadow: 0 22px 44px -24px rgba(15, 23, 42, .32);
    color: var(--texto);
}

.lic-form-campos {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 14px;
}

.lic-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.lic-campo-rotulo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--texto-sec);
}
.lic-campo-rotulo small { font-weight: 500; text-transform: none; letter-spacing: 0; }
.lic-campo-rotulo .ico { color: var(--marca); }

.lic-campo input {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid #cdd8e8;
    border-radius: 13px;
    background: #fff;
    font: inherit;
    font-size: 1rem;
    color: var(--texto);
    transition: border-color .16s ease, box-shadow .16s ease;
}
.lic-campo input::placeholder { color: #94a3b8; }
.lic-campo input:focus {
    outline: 0;
    border-color: var(--marca);
    box-shadow: 0 0 0 4px rgba(65, 97, 174, .16);
}
.lic-campo-principal input { font-size: 1.06rem; }

/* Filtros: tres grupos de "pilulas" (botoes de escolha unica) */
.lic-filtros {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 14px 28px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px dashed var(--borda);
}

.lic-filtro { margin: 0; padding: 0; border: 0; min-width: 0; }
.lic-filtro legend {
    padding: 0;
    margin-bottom: 8px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--texto-sec);
}

.lic-pilulas { display: flex; flex-wrap: wrap; gap: 6px; }

.lic-pilula { position: relative; cursor: pointer; }
/* O botao de radio fica invisivel, mas continua funcionando (e acessivel). */
.lic-pilula input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}
.lic-pilula span {
    display: inline-flex;
    align-items: center;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid #cdd8e8;
    background: #fff;
    font-size: .86rem;
    font-weight: 600;
    color: var(--texto);
    line-height: 1.2;
    white-space: nowrap;
    transition: background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.lic-pilula:hover span { border-color: var(--marca); color: var(--marca-esc); }
.lic-pilula input:checked + span {
    background: var(--marca);
    border-color: var(--marca);
    color: #fff;
}
/* Situacao marcada ganha a cor dela (verde, azul, laranja). */
.lic-pilula.sit-aprovada input:checked + span,
.lic-pilula.sit-protocolada input:checked + span,
.lic-pilula.sit-tca input:checked + span {
    background: var(--sit);
    border-color: var(--sit);
}
.lic-pilula input:focus-visible + span {
    outline: 3px solid #f59e0b;
    outline-offset: 2px;
}

/* Pe do formulario: a chave "Ocultar D2.1" e os botoes */
.lic-form-pe {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed var(--borda);
}

.lic-chave {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: .92rem;
    color: var(--texto);
    cursor: pointer;
}
.lic-chave input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.lic-chave-trilho {
    position: relative;
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: #cbd5e1;
    flex: 0 0 auto;
    transition: background .16s ease;
}
.lic-chave-trilho::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .35);
    transition: left .16s ease;
}
.lic-chave input:checked + .lic-chave-trilho { background: var(--marca); }
.lic-chave input:checked + .lic-chave-trilho::after { left: 21px; }
.lic-chave input:focus-visible + .lic-chave-trilho { outline: 3px solid #f59e0b; outline-offset: 2px; }

.lic-form-botoes { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.lic-form-botoes .btn { padding: 12px 24px; border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.lic-limpar {
    font-size: .92rem;
    font-weight: 600;
    color: var(--texto-sec);
    border-bottom: 1px solid transparent;
    transition: color .16s ease, border-color .16s ease;
}
.lic-limpar:hover { color: var(--marca-esc); border-bottom-color: var(--marca-esc); }

/* =============================================================================
   2. CORPO
   ============================================================================= */
.lic-corpo { padding: 44px 0 80px; }

.lic-secao-cabeca {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 22px;
}
body.solis2 .lic-secao-cabeca h2 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); }
.lic-secao-cabeca .secao-sub { margin-top: 6px; font-size: .96rem; }

/* ---- os 4 graficos ------------------------------------------------------- */
.lic-graficos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.lic-grafico {
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 20px 22px 18px;
    box-shadow: var(--sombra);
    min-width: 0;
}
body.solis2 .lic-grafico h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 1.05rem;
    margin: 0;
}
.lic-grafico h3 .ico { color: var(--marca); flex: 0 0 auto; }
.lic-grafico > p {
    margin: 4px 0 14px;
    font-size: .86rem;
    color: var(--texto-sec);
}
/* A caixa tem altura fixa: o Chart.js preenche o espaco (responsive +
   maintainAspectRatio:false no licencas.js). */
.lic-grafico-caixa { position: relative; height: 290px; }
.lic-grafico-rosca { height: 320px; }

/* ---- "Conheca tambem": anuncio + links ------------------------------------ */
.lic-conheca {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    margin-top: 40px;
}

/* O anuncio vem de class/Publicidade.php com o visual antigo (borda escura,
   margens com !important). Aqui ele vira um cartao como os outros. */
.lic-conheca-anuncio .publicidade {
    max-width: none;
    margin: 0 !important;
    border: 1px solid var(--borda) !important;
    border-radius: var(--raio);
    overflow: hidden;
    box-shadow: var(--sombra);
    line-height: 0;
    background: #fff;
}
.lic-conheca-anuncio .publicidade > a > img { width: 100%; display: block; }
.lic-conheca-anuncio .publicidade > span {
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(15, 23, 42, .65);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background .16s ease;
}
.lic-conheca-anuncio .publicidade > span:hover { background: rgba(15, 23, 42, .9); }
.lic-conheca-anuncio:empty { display: none; }

.lic-conheca-links { display: grid; gap: 10px; }
.lic-conheca-links .olho { margin-bottom: 2px; }
.lic-conheca-links .cartao-servico { padding: 13px 16px; }

/* =============================================================================
   3. RESULTADOS
   ============================================================================= */
.lic-resultado-cabeca {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-bottom: 18px;
    scroll-margin-top: calc(var(--altura-topo, 68px) + 16px);
}
body.solis2 .lic-resultado-cabeca h2 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); }
.lic-resultado-filtros { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.lic-resultado-pagina {
    margin: 0;
    font-size: .9rem;
    color: var(--texto-sec);
    font-variant-numeric: tabular-nums;
}

/* Etiquetas (as "pilulas" de informacao) */
.etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.etiqueta-data, .etiqueta-tipo {
    background: #f1f5f9;
    color: var(--texto-sec);
    font-variant-numeric: tabular-nums;
}
.etiqueta-tipo { letter-spacing: .04em; }
.etiqueta-sit { background: var(--sit-claro, #e6ecf9); color: var(--sit, var(--marca)); }
.etiqueta-filtro { background: #fff; border: 1px solid var(--borda); color: var(--texto-sec); white-space: normal; }
.etiqueta-filtro b { color: var(--marca-esc); font-weight: 700; }

/* Paginacao */
.lic-paginas {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0 0 16px;
}
.lic-lista + .lic-paginas { margin: 18px 0 0; }
.lic-pg, .lic-pg-seta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border-radius: 11px;
    border: 1px solid var(--borda);
    background: #fff;
    font-size: .9rem;
    font-weight: 600;
    color: var(--texto);
    font-variant-numeric: tabular-nums;
    transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.lic-pg:hover, .lic-pg-seta:hover { border-color: var(--marca); color: var(--marca-esc); }
.lic-pg.atual { background: var(--marca); border-color: var(--marca); color: #fff; }
.lic-pg-seta.desativada { color: #b6c2d4; cursor: default; }
.lic-pg-seta.desativada:hover { border-color: var(--borda); color: #b6c2d4; }
.lic-pg-reticencias { padding: 0 4px; color: var(--texto-sec); }

/* O cartao de uma licenca */
.lic-lista { display: grid; gap: 10px; }

.lic-item {
    position: relative;
    background: #fff;
    border: 1px solid var(--borda);
    border-left: 4px solid var(--sit, var(--marca));
    border-radius: 14px;
    padding: 14px 18px 12px 18px;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.lic-item:hover, .lic-item:focus-within {
    border-color: var(--sit, var(--marca));
    box-shadow: var(--sombra);
}

.lic-item-cabeca { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }

body.solis2 .lic-item-titulo {
    margin: 8px 0 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--marca-esc);
}
.lic-item-titulo a { color: var(--marca-esc); transition: color .16s ease; }
.lic-item-titulo a:hover { color: var(--marca); }

.lic-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 6px 0 0;
    font-size: .84rem;
    color: var(--texto-sec);
    font-variant-numeric: tabular-nums;
}
.lic-item-meta span { display: inline-flex; align-items: center; gap: 4px; }
.lic-item-meta b { font-weight: 600; color: var(--texto); }

.lic-atividades {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: grid;
    gap: 5px;
}
.lic-atividades li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .9rem;
    line-height: 1.45;
    color: var(--texto);
}
.lic-atividades b {
    flex: 0 0 auto;
    margin-top: 1px;
    padding: 1px 8px;
    border-radius: 7px;
    background: var(--sit-claro, #e6ecf9);
    color: var(--sit, var(--marca));
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .03em;
    font-variant-numeric: tabular-nums;
}

.lic-item-rodape {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px dashed var(--borda);
    font-size: .84rem;
}
.lic-item-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    color: var(--texto-sec);
    transition: color .16s ease;
}
.lic-item-link:hover { color: var(--marca-esc); }
.lic-item-link.destaque { margin-left: auto; color: var(--marca); }
.lic-item-link.destaque:hover { color: var(--marca-esc); }

/* ---- resumo das atividades das aprovadas ---------------------------------- */
.lic-atividades-resumo { margin-top: 44px; }

.lic-cartoes-atividade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
}
.lic-cartao-atividade {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 14px;
    padding: 14px 16px;
    min-width: 0;
}
.lic-cod {
    align-self: flex-start;
    padding: 2px 9px;
    border-radius: 7px;
    background: #dcfce7;
    color: #15803d;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .03em;
}
.lic-cartao-atividade p {
    margin: 0;
    font-size: .86rem;
    line-height: 1.45;
    color: var(--texto-sec);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.lic-cartao-atividade strong {
    margin-top: auto;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 1.35rem;
    color: var(--marca-esc);
    font-variant-numeric: tabular-nums;
}
.lic-cartao-atividade strong small {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: .8rem;
    font-weight: 500;
    color: var(--texto-sec);
}

.lic-mais-atividades { margin-top: 12px; }
.lic-mais-atividades > summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid var(--borda);
    background: #fff;
    font-size: .9rem;
    font-weight: 600;
    color: var(--marca);
    cursor: pointer;
    list-style: none;
    transition: border-color .16s ease, background .16s ease;
}
.lic-mais-atividades > summary::-webkit-details-marker { display: none; }
.lic-mais-atividades > summary::before { content: "+"; font-weight: 700; }
.lic-mais-atividades[open] > summary::before { content: "–"; }
.lic-mais-atividades > summary:hover { border-color: var(--marca); background: #eef2f9; }
.lic-mais-atividades[open] > summary { margin-bottom: 12px; }

/* Aviso de lista vazia */
.lic-vazio {
    padding: 30px 24px;
    background: #fff;
    border: 1px dashed #cdd8e8;
    border-radius: 14px;
    text-align: center;
    color: var(--texto-sec);
}
.lic-vazio p + p { margin-top: 6px; }
.lic-vazio a { color: var(--marca); font-weight: 600; }

/* =============================================================================
   4. NOTA DE ORIGEM DOS DADOS
   ============================================================================= */
.lic-nota {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 44px;
    padding: 16px 20px;
    border-radius: 14px;
    background: #eef2f9;
    border: 1px solid #d9e2f2;
    color: var(--texto);
    font-size: .9rem;
    line-height: 1.55;
}
.lic-nota .ico { color: var(--marca); flex: 0 0 auto; margin-top: 1px; }
.lic-nota p { margin: 0; }
.lic-nota a { color: var(--marca); font-weight: 600; word-break: break-all; }
.lic-nota a .ico { display: inline; vertical-align: -2px; }

/* =============================================================================
   6. PAGINA DE UMA LICENCA (documento.php)
   ============================================================================= */
.doc-topo { padding-bottom: 46px; }

/* Status do portal, dentro das pilulas do topo: fundo bem claro da cor do
   status e o texto (inclusive o <strong>) na versao escura da mesma cor. */
.doc-numeros li.st-ok     { background: #dcfce7; border-color: #86efac; color: #15803d; }
.doc-numeros li.st-alerta { background: #fef3c7; border-color: #fcd34d; color: #b45309; }
.doc-numeros li.st-ruim,
.doc-numeros li.doc-vencida { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }
.doc-numeros li.st-ok strong,
.doc-numeros li.st-alerta strong,
.doc-numeros li.st-ruim strong,
.doc-numeros li.doc-vencida strong,
.doc-numeros li.st-ok .ico,
.doc-numeros li.st-alerta .ico,
.doc-numeros li.st-ruim .ico,
.doc-numeros li.doc-vencida .ico { color: inherit; }

.doc-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}
.doc-acoes .btn { padding: 12px 22px; font-size: .94rem; }
/* O botao de contorno (.btn-linha) e branco no solis2-base.css, feito para o
   topo azul; sobre o branco ele ganha o contorno e o texto na cor da marca. */
.lic-topo .btn-linha {
    background: #fff;
    border-color: var(--marca);
    color: var(--marca-esc);
}
.lic-topo .btn-linha:hover {
    background: #e6ecf9;
    border-color: var(--marca-esc);
    color: var(--marca-esc);
}

/* Grade: conteudo + coluna lateral */
.doc-grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    align-items: start;
}
.doc-principal { display: grid; gap: 16px; min-width: 0; }
.doc-lateral {
    display: grid;
    gap: 16px;
    position: sticky;
    top: calc(var(--altura-topo, 68px) + 16px);
}

.doc-cartao {
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 20px 22px;
    box-shadow: var(--sombra);
    min-width: 0;
}
body.solis2 .doc-cartao h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-size: 1.1rem;
}
.doc-cartao h2 .ico { color: var(--marca); flex: 0 0 auto; }
.doc-cartao h2 small {
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--f-claro, #e6ecf9);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: .76rem;
    font-weight: 700;
    color: var(--marca);
    font-variant-numeric: tabular-nums;
}

/* Lista "rotulo em cima, valor embaixo" */
.doc-dados {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    margin: 0;
}
.doc-dados > div {
    display: grid;
    gap: 3px;
    padding: 10px 13px;
    background: #f8fafc;
    border-radius: 10px;
    min-width: 0;
}
.doc-dados dt {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--texto-sec);
}
.doc-dados dd {
    margin: 0;
    font-size: .95rem;
    font-weight: 500;
    color: var(--texto);
    overflow-wrap: anywhere;
}
.doc-dados dd small { font-weight: 400; color: var(--texto-sec); }

.doc-status-inline {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: #f1f5f9;
    color: var(--texto);
    font-size: .86rem;
    font-weight: 600;
}
.doc-status-inline.st-ok     { background: #dcfce7; color: #15803d; }
.doc-status-inline.st-alerta { background: #fef3c7; color: #b45309; }
.doc-status-inline.st-ruim   { background: #fee2e2; color: #b91c1c; }
.doc-aviso {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #fee2e2;
    color: #b91c1c;
    font-size: .74rem;
    font-weight: 700;
}

.doc-explica { margin: -6px 0 12px; font-size: .86rem; color: var(--texto-sec); }
.doc-vazio {
    margin: 0;
    padding: 14px;
    background: #f8fafc;
    border: 1px dashed #cdd8e8;
    border-radius: 10px;
    color: var(--texto-sec);
    font-size: .9rem;
}

/* Atividades: reaproveita .lic-atividades, com um pouco mais de ar */
.doc-atividades li { padding: 8px 10px; border-radius: 10px; background: #f8fafc; }

/* Documentos */
.doc-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.doc-docs li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--borda);
    border-radius: 12px;
}
.doc-doc-icone {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--f-claro, #e6ecf9);
    color: var(--marca);
    flex: 0 0 auto;
}
.doc-doc-texto { display: grid; gap: 2px; min-width: 0; flex: 1 1 200px; }
.doc-doc-texto strong { font-size: .95rem; color: var(--marca-esc); }
.doc-doc-texto small  { font-size: .8rem; color: var(--texto-sec); }
.doc-doc-links { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.doc-botao {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--marca);
    color: #fff;
    font-size: .84rem;
    font-weight: 700;
    white-space: nowrap;
    transition: background .16s ease, border-color .16s ease;
}
.doc-botao:hover { background: var(--marca-esc); }
.doc-botao.secundario { background: #fff; color: var(--marca); border: 1px solid var(--borda); }
.doc-botao.secundario:hover { background: #eef2f9; border-color: var(--marca); }

/* Feicoes do mapa */
.doc-feicoes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.doc-feicoes a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f8fafc;
    font-size: .9rem;
    font-weight: 500;
    color: var(--texto);
    transition: background .16s ease, color .16s ease;
}
.doc-feicoes a:hover { background: #eef2f9; color: var(--marca-esc); }
.doc-feicoes a > .ico:first-child { color: var(--marca); flex: 0 0 auto; }
.doc-feicoes a > span { flex: 1; min-width: 0; }
.doc-feicoes a > .ico:last-child { color: var(--texto-sec); flex: 0 0 auto; }

/* Coluna lateral: outras publicacoes do titular */
.doc-outras { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.doc-outras li {
    display: grid;
    gap: 4px;
    padding: 9px 12px;
    border: 1px solid var(--borda);
    border-left: 3px solid var(--sit, var(--marca));
    border-radius: 10px;
}
.doc-outras li.atual { background: #f8fafc; }
.doc-outra-topo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: .78rem;
    color: var(--texto-sec);
}
.doc-outra-topo time { margin-left: auto; font-variant-numeric: tabular-nums; }
.doc-outras a,
.doc-outra-num {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--marca-esc);
    font-variant-numeric: tabular-nums;
}
.doc-outras a:hover { color: var(--marca); }
.doc-outra-num small { font-weight: 500; color: var(--texto-sec); }
/* Codigos das atividades da publicacao (a "licenca tirada": D2.1, A3.4...) */
.doc-outra-cods {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
.doc-outra-cods b {
    padding: 1px 8px;
    border-radius: 7px;
    background: var(--sit-claro, #e6ecf9);
    color: var(--sit, var(--marca));
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .03em;
    font-variant-numeric: tabular-nums;
    cursor: help;
}
.doc-outra-cods small { font-size: .74rem; color: var(--texto-sec); }

.doc-ver-todas {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--marca);
}
.doc-ver-todas:hover { color: var(--marca-esc); }

.doc-pagina .lic-nota { margin-top: 24px; }

@media (max-width: 960px) {
    .doc-grade { grid-template-columns: 1fr; }
    .doc-lateral { position: static; }
}
@media (max-width: 720px) {
    .doc-topo { padding-bottom: 32px; }
    .doc-acoes .btn { width: 100%; justify-content: center; }
    .doc-cartao { padding: 16px 14px; }
    .doc-dados { grid-template-columns: 1fr; }
    .doc-doc-links { margin-left: 0; width: 100%; }
}
@media print {
    .doc-acoes, .doc-lateral { display: none !important; }
    .doc-grade { grid-template-columns: 1fr; }
}

/* =============================================================================
   5. TELAS MENORES
   ============================================================================= */
@media (max-width: 960px) {
    .lic-graficos { grid-template-columns: 1fr; }
    .lic-conheca  { grid-template-columns: 1fr; }
    .lic-filtros  { grid-template-columns: 1fr; gap: 14px; }
}

@media (max-width: 720px) {
    .lic-topo { padding: 28px 0 40px; }
    .lic-trilha { margin-bottom: 18px; }
    .lic-form { padding: 16px 16px 14px; border-radius: 18px; }
    .lic-form-campos { grid-template-columns: 1fr; }
    .lic-form-botoes { width: 100%; }
    .lic-form-botoes .btn { flex: 1; justify-content: center; }
    .lic-corpo { padding: 32px 0 60px; }
    .lic-grafico { padding: 16px 14px 14px; }
    .lic-grafico-caixa { height: 250px; }
    .lic-grafico-rosca { height: 300px; }
    .lic-item { padding: 12px 14px 10px 14px; }
    .lic-item-link.destaque { margin-left: 0; }
}

@media (max-width: 420px) {
    .lic-pilula span { padding: 6px 11px; font-size: .82rem; }
    .lic-pg, .lic-pg-seta { min-width: 34px; height: 34px; }
}

/* =============================================================================
   IMPRESSAO: sem curvas de fundo, sem formulario e sem anuncio
   ============================================================================= */
@media print {
    .lic-topo { background: #fff !important; color: #000 !important; padding: 0 0 12px; border-bottom: 0; }
    .lic-topo .fundo-topo, .lic-form, .lic-conheca, .lic-paginas, #whatsapp { display: none !important; }
    body.solis2 .lic-topo h1, .lic-topo-sub, .lic-numeros li, .lic-trilha, .lic-trilha a { color: #000 !important; }
    .lic-item, .lic-grafico, .lic-cartao-atividade { box-shadow: none; break-inside: avoid; }
}