/* ===========================================================================
   Documentos — o visual da casa

   Eram treze telas com o CSS escrito dentro de cada uma (só a navegação por
   pastas tinha 1.500 linhas de estilo), cabeçalho em azul do AdminLTE, cartões
   de setor em `bg-purple`, `bg-orange` e `bg-olive`, e o Chart.js vindo de um
   CDN sem versão. Agora é uma folha só, com o desenho da agenda, de contratos e
   do quadro: cabeçalho com a faixa água → verde, abas, cartões com o raio e a
   sombra de `marca.css` — e, no telefone, lista no lugar de tabela.

   A cor de cada setor vem de `sharedocs/services/apresentacao.py`, pelas
   variáveis `--setor` e `--fundo-setor` postas no elemento.
   =========================================================================== */

/* As cores de formato carregam significado: é por elas que se reconhece de
   relance um PDF de uma planilha, como no Office. Só este módulo as usa. */
.docs-tela {
    --tipo-pdf: #c0392b;
    --tipo-texto: #2b5797;
    --tipo-planilha: #1e7145;
    --tipo-apresentacao: #c55a11;
    --tipo-imagem: #0f6b8c;
    --tipo-video: #6f52b8;
    --tipo-compactado: #5d6166;
    --tipo-outro: #8a8b8c;
    --agua-escura: #1a6d78;
    --realce: #f3faf8;

    margin: 0 auto;
    max-width: 1320px;
    padding: 1.1rem 1rem 2rem;
}

/* ---- Cabeçalho ----------------------------------------------------------- */

.docs-topo {
    align-items: center;
    background:
        radial-gradient(circle at 92% 15%, rgba(109, 182, 95, .14), transparent 24%),
        linear-gradient(118deg, var(--superficie) 0%, var(--realce) 100%);
    border: 1px solid var(--borda);
    border-radius: 1rem;
    box-shadow: var(--sombra);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.25rem;
    justify-content: space-between;
    margin-bottom: 1rem;
    overflow: hidden;
    padding: 1.3rem 1.5rem;
    position: relative;
}
.docs-topo::before {
    background: linear-gradient(90deg, var(--marca-agua), #47a987 52%, var(--marca-verde));
    content: "";
    height: 4px;
    inset: 0 0 auto;
    position: absolute;
}
.docs-topo__identidade { align-items: center; display: flex; gap: .9rem; min-width: 0; }
.docs-topo__icone {
    align-items: center;
    background: linear-gradient(145deg, var(--agua-escura), var(--setor, var(--marca-agua)));
    border: 3px solid rgba(255, 255, 255, .78);
    border-radius: var(--raio);
    box-shadow: 0 7px 18px rgba(33, 127, 140, .22);
    color: #fff;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1.15rem;
    height: 3.1rem;
    justify-content: center;
    transform: rotate(-2deg);
    width: 3.1rem;
}
.docs-topo__selo {
    color: var(--agua-escura);
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .105em;
    margin: 0 0 .2rem;
    text-transform: uppercase;
}
.docs-topo__titulo {
    font-size: clamp(1.3rem, 2vw, 1.8rem);
    font-weight: 750;
    letter-spacing: -.025em;
    margin: 0;
    overflow-wrap: anywhere;
}
.docs-topo__texto { color: var(--texto-suave); font-size: .9rem; margin: .2rem 0 0; }
.docs-topo__acoes { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---- Botões -------------------------------------------------------------- */

.docs-botao {
    align-items: center;
    background: var(--superficie);
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-medio);
    color: var(--texto);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 600;
    gap: .45rem;
    justify-content: center;
    min-height: var(--alvo-toque);
    padding: 0 1rem;
    text-decoration: none;
    white-space: nowrap;
}
.docs-botao:hover { border-color: var(--marca-agua); color: var(--agua-escura); text-decoration: none; }
.docs-botao:focus-visible { outline: 2px solid var(--marca-ciano); outline-offset: 2px; }
.docs-botao--forte { background: var(--marca-agua); border-color: var(--marca-agua); color: #fff; }
.docs-botao--forte:hover { background: var(--agua-escura); color: #fff; }
.docs-botao--perigo { border-color: #e8b4ad; color: var(--erro); }
.docs-botao--perigo:hover { background: var(--erro-fundo); border-color: var(--erro); color: var(--erro); }
.docs-botao--perigo-forte { background: var(--erro); border-color: var(--erro); color: #fff; }
.docs-botao--perigo-forte:hover { background: #a93226; color: #fff; }
.docs-botao--icone { padding: 0; width: var(--alvo-toque); }
.docs-botao[disabled] { cursor: not-allowed; opacity: .5; }

/* ---- Abas ---------------------------------------------------------------- */

/* Quebram em linhas no telefone, e não rolam de lado: aba fora da tela é aba
   que ninguém acha. */
.docs-abas { border-bottom: 1px solid var(--borda); display: flex; flex-wrap: wrap; gap: .25rem; margin: 0 0 1rem; }
.docs-aba {
    align-items: center;
    border-bottom: 3px solid transparent;
    color: var(--texto-suave);
    display: inline-flex;
    flex: 0 0 auto;
    font-weight: 600;
    gap: .45rem;
    min-height: var(--alvo-toque);
    padding: 0 .75rem;
    text-decoration: none;
}
.docs-aba:hover { color: var(--agua-escura); text-decoration: none; }
.docs-aba--ativa { border-bottom-color: var(--marca-agua); color: var(--texto); }

/* ---- Trilha (onde estou) ------------------------------------------------- */

.docs-trilha { align-items: center; display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin: 0 0 .9rem; }
.docs-trilha nav { min-width: 0; }
/* O "Voltar" é botão de verdade, do tamanho do dedo: a trilha sozinha é texto
   miúdo, e o povo acabava no botão do navegador. */
.docs-trilha .docs-voltar { color: var(--texto); flex: none; font-size: .92rem; padding: 0 .9rem; }
.docs-trilha .docs-voltar:hover { border-color: var(--agua-escura); text-decoration: none; }
.docs-trilha ol { align-items: center; display: flex; flex-wrap: wrap; gap: .15rem .35rem; list-style: none; margin: 0; padding: 0; }
.docs-trilha li { align-items: center; display: inline-flex; font-size: .88rem; gap: .35rem; min-width: 0; }
.docs-trilha li + li::before { color: var(--texto-fraco); content: "/"; }
.docs-trilha a { color: var(--agua-escura); font-weight: 600; text-decoration: none; }
.docs-trilha a:hover { text-decoration: underline; }
.docs-trilha [aria-current] { color: var(--texto); font-weight: 700; overflow-wrap: anywhere; }

/* ---- Cartões ------------------------------------------------------------- */

.docs-cartao {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    margin-bottom: 1rem;
    min-width: 0;
}
.docs-cartao__cabeca {
    align-items: center;
    border-bottom: 1px solid var(--borda);
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    justify-content: space-between;
    padding: .85rem 1.1rem;
}
.docs-cartao__titulo { font-size: 1rem; font-weight: 750; margin: 0; }
.docs-cartao__corpo { padding: 1rem 1.1rem; }
.docs-vazio { color: var(--texto-suave); padding: 2.2rem 1rem; text-align: center; }
.docs-vazio i { color: var(--texto-fraco); display: block; font-size: 1.8rem; margin-bottom: .6rem; }
.docs-vazio p { margin: 0 0 .9rem; }

/* ---- Busca --------------------------------------------------------------- */

.docs-busca { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.docs-busca__campo { flex: 1 1 18rem; position: relative; }
.docs-busca__campo i { color: var(--texto-fraco); left: 1rem; position: absolute; top: 50%; transform: translateY(-50%); }
.docs-busca__campo input {
    background: var(--superficie);
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-medio);
    font-size: 1rem;
    min-height: var(--alvo-toque);
    padding: 0 1rem 0 2.6rem;
    width: 100%;
}
.docs-busca__campo input:focus { border-color: var(--marca-agua); box-shadow: 0 0 0 3px rgba(32, 130, 144, .15); outline: 0; }
.docs-busca select { flex: 0 1 16rem; min-height: var(--alvo-toque); }

/* ---- Hub: setores -------------------------------------------------------- */

.docs-setores { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); margin-bottom: 1.2rem; }
.docs-setor {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    color: var(--texto);
    display: flex;
    flex-direction: column;
    gap: .7rem;
    min-width: 0;
    padding: 1rem 1.1rem;
    position: relative;
    text-decoration: none;
    transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.docs-setor::before {
    background: var(--setor, var(--marca-agua));
    border-radius: var(--raio) var(--raio) 0 0;
    content: "";
    height: 4px;
    inset: -1px -1px auto;
    position: absolute;
}
.docs-setor:hover { border-color: var(--setor, var(--marca-agua)); box-shadow: var(--sombra-alta); color: var(--texto); text-decoration: none; transform: translateY(-2px); }
.docs-setor:focus-visible { outline: 2px solid var(--marca-ciano); outline-offset: 2px; }
.docs-setor__topo { align-items: center; display: flex; gap: .75rem; min-width: 0; }
.docs-setor__icone {
    align-items: center;
    background: var(--fundo-setor, #e9f5f3);
    border-radius: var(--raio-medio);
    color: var(--setor, var(--marca-agua));
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1.05rem;
    height: 2.6rem;
    justify-content: center;
    width: 2.6rem;
}
.docs-setor__nome { font-size: 1rem; font-weight: 750; line-height: 1.25; margin: 0; overflow-wrap: anywhere; }
.docs-setor__descricao {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--texto-suave);
    display: -webkit-box;
    font-size: .86rem;
    margin: 0;
    overflow: hidden;
}
.docs-setor__numeros { color: var(--texto-suave); display: flex; flex-wrap: wrap; font-size: .82rem; gap: .25rem 1rem; margin-top: auto; }
.docs-setor__numeros strong { color: var(--texto); }
.docs-setor__selo {
    background: #ecf6e6;
    border-radius: var(--raio-pilula);
    color: #2d5c33;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;
    margin-left: auto;
    padding: .15rem .55rem;
    text-transform: uppercase;
}

/* ---- Lista de itens (pastas e documentos) -------------------------------- */

.docs-ferramentas { align-items: center; border-bottom: 1px solid var(--borda); display: flex; flex-wrap: wrap; gap: .5rem; padding: .7rem 1.1rem; }
.docs-ferramentas .docs-busca__campo { flex: 1 1 14rem; }
.docs-ferramentas .docs-busca__campo input { font-size: .92rem; min-height: 40px; }
.docs-ferramentas__lado { align-items: center; display: inline-flex; flex-wrap: wrap; gap: .4rem; margin-left: auto; }
.docs-rotulo { color: var(--texto-suave); font-size: .82rem; font-weight: 700; }

.docs-chip {
    align-items: center;
    background: var(--superficie);
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-pilula);
    color: var(--texto);
    display: inline-flex;
    font-size: .86rem;
    font-weight: 600;
    gap: .4rem;
    min-height: 38px;
    padding: 0 .85rem;
    text-decoration: none;
}
.docs-chip:hover { border-color: var(--marca-agua); text-decoration: none; }
.docs-chip--ativo { background: #16414a; border-color: #16414a; color: #fff; }
.docs-chip--ativo:hover { color: #fff; }

.docs-lista { list-style: none; margin: 0; padding: 0; }
.docs-item {
    align-items: center;
    border-top: 1px solid var(--borda);
    display: grid;
    gap: .25rem 1rem;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    padding: .65rem 1.1rem;
    position: relative;
}
.docs-item:first-child { border-top: 0; }
.docs-item:hover { background: #f8fbfa; }
.docs-item__icone {
    align-items: center;
    background: color-mix(in srgb, var(--cor-item, var(--tipo-outro)) 12%, #fff);
    border-radius: var(--raio-pequeno);
    color: var(--cor-item, var(--tipo-outro));
    display: inline-flex;
    font-size: 1.05rem;
    height: 2.5rem;
    justify-content: center;
    width: 2.5rem;
}
.docs-item__principal { min-width: 0; }
.docs-item__nome {
    color: var(--texto);
    display: block;
    font-weight: 650;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* O link cobre a linha inteira: o alvo de toque é a linha, e não o texto. */
.docs-item__nome::after { content: ""; inset: 0; position: absolute; }
.docs-item__nome:hover { color: var(--agua-escura); text-decoration: none; }
.docs-item__nome:focus-visible { outline: 0; }
.docs-item__nome:focus-visible::after { border-radius: var(--raio-pequeno); outline: 2px solid var(--marca-ciano); outline-offset: -3px; }
.docs-item__detalhe { color: var(--texto-suave); display: flex; flex-wrap: wrap; font-size: .8rem; gap: .1rem .8rem; }
.docs-item__meta { color: var(--texto-suave); font-size: .82rem; text-align: right; white-space: nowrap; }
.docs-item__acoes { display: flex; gap: .3rem; position: relative; z-index: 1; }
.docs-item__acoes .docs-botao { min-height: 38px; width: 38px; }

.docs-item--pasta { --cor-item: #c79a1f; }
.docs-tipo--pdf { --cor-item: var(--tipo-pdf); }
.docs-tipo--texto { --cor-item: var(--tipo-texto); }
.docs-tipo--planilha { --cor-item: var(--tipo-planilha); }
.docs-tipo--apresentacao { --cor-item: var(--tipo-apresentacao); }
.docs-tipo--imagem { --cor-item: var(--tipo-imagem); }
.docs-tipo--video { --cor-item: var(--tipo-video); }
.docs-tipo--compactado { --cor-item: var(--tipo-compactado); }
.docs-tipo--outro { --cor-item: var(--tipo-outro); }

.docs-selo {
    border-radius: var(--raio-pilula);
    display: inline-flex;
    font-size: .68rem;
    font-weight: 800;
    gap: .3rem;
    letter-spacing: .04em;
    padding: .15rem .55rem;
    text-transform: uppercase;
    white-space: nowrap;
}
.docs-selo--restrito { background: #fff4d6; color: #7a5806; }
.docs-selo--formato { background: color-mix(in srgb, var(--cor-item, var(--tipo-outro)) 12%, #fff); color: var(--cor-item, var(--tipo-outro)); }

.docs-secao-titulo {
    color: var(--texto-suave);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .06em;
    margin: 0;
    padding: .8rem 1.1rem .3rem;
    text-transform: uppercase;
}
.docs-sem-resultado { color: var(--texto-suave); display: none; padding: 1.5rem 1rem; text-align: center; }

/* ---- Ficha do documento -------------------------------------------------- */

.docs-ficha { align-items: start; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) 20rem; }
.docs-ficha__lado { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 1rem; }
.docs-ficha__lado .docs-cartao { margin: 0; }
.docs-dados { display: grid; gap: .8rem; margin: 0; }
.docs-dados dt { color: var(--texto-suave); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.docs-dados dd { font-size: .95rem; margin: .1rem 0 0; overflow-wrap: anywhere; }
.docs-descricao { color: var(--texto); margin: 0; white-space: pre-line; }
.docs-acoes-verticais { display: grid; gap: .5rem; }
.docs-relacionados .docs-item { padding: .55rem .9rem; grid-template-columns: auto minmax(0, 1fr); }
.docs-relacionados .docs-item__icone { height: 2rem; width: 2rem; font-size: .9rem; }

/* ---- Prévia -------------------------------------------------------------- */

.docs-previa { background: #eef1f3; border-radius: 0 0 var(--raio) var(--raio); min-height: 16rem; position: relative; }
.docs-previa:fullscreen { background: #1d2329; overflow: auto; padding: 1rem; }
.docs-previa__carregando { align-items: center; color: var(--texto-suave); display: flex; flex-direction: column; gap: .8rem; justify-content: center; min-height: 16rem; }
.docs-giro {
    animation: docs-giro .8s linear infinite;
    border: 3px solid var(--borda);
    border-radius: 50%;
    border-top-color: var(--marca-agua);
    height: 2.2rem;
    width: 2.2rem;
}
@keyframes docs-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .docs-giro { animation-duration: 3s; } }

.docs-paginas { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; }
.docs-pagina {
    align-self: center;
    aspect-ratio: 210 / 297;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
    max-width: 920px;
    position: relative;
    width: 100%;
}
.docs-pagina.docs-pagina--pronta { aspect-ratio: auto; }
.docs-pagina img { display: block; height: auto; width: 100%; }
.docs-pagina__numero {
    background: rgba(22, 45, 88, .78);
    border-radius: var(--raio-pilula);
    bottom: .5rem;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    padding: .1rem .55rem;
    position: absolute;
    right: .5rem;
}
.docs-previa__aviso { color: var(--texto-suave); font-size: .85rem; margin: 0; padding: 0 1rem 1rem; text-align: center; }

.docs-previa__midia { align-items: center; display: flex; justify-content: center; padding: 1rem; }
.docs-previa__midia img,
.docs-previa__midia video { background: #000; border-radius: var(--raio-pequeno); box-shadow: 0 2px 10px rgba(0, 0, 0, .12); max-height: 78vh; max-width: 100%; }
.docs-previa__midia img { background: repeating-conic-gradient(#f2f2f2 0 25%, #fff 0 50%) 0 0 / 20px 20px; }

.docs-previa__texto {
    background: #fff;
    font-family: var(--fonte-numero);
    font-size: .85rem;
    line-height: 1.55;
    margin: 0;
    max-height: 75vh;
    overflow: auto;
    padding: 1.1rem 1.2rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.docs-planilha__abas { background: #fff; border-bottom: 1px solid var(--borda); display: flex; gap: .25rem; overflow-x: auto; padding: .5rem .75rem 0; }
.docs-planilha__aba {
    background: transparent;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: var(--raio-pequeno) var(--raio-pequeno) 0 0;
    color: var(--texto-suave);
    cursor: pointer;
    flex: 0 0 auto;
    font-weight: 600;
    min-height: 40px;
    padding: 0 .9rem;
}
.docs-planilha__aba[aria-selected="true"] { background: #eef1f3; border-color: var(--borda); color: var(--tipo-planilha); }
.docs-planilha__caixa { background: #fff; max-height: 75vh; overflow: auto; }
.docs-planilha { border-collapse: collapse; font-size: .82rem; min-width: 100%; }
.docs-planilha th, .docs-planilha td { border: 1px solid #e3e6e9; padding: .3rem .55rem; white-space: nowrap; }
.docs-planilha thead th { background: #f4f6f7; color: var(--texto-suave); font-weight: 700; position: sticky; text-align: center; top: 0; z-index: 1; }
.docs-planilha tbody th { background: #f4f6f7; color: var(--texto-suave); font-weight: 600; left: 0; position: sticky; text-align: right; }

.docs-pacote { background: #fff; list-style: none; margin: 0; max-height: 70vh; overflow: auto; padding: .4rem 0; }
.docs-pacote li { align-items: center; display: flex; font-size: .88rem; gap: .6rem; padding: .35rem 1.1rem; }
.docs-pacote li span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.docs-pacote small { color: var(--texto-suave); white-space: nowrap; }

/* ---- Formulários --------------------------------------------------------- */

.docs-form { display: flex; flex-direction: column; gap: 1.1rem; padding: 1.2rem 1.3rem; }
.docs-form label, .docs-form legend { font-size: .85rem; font-weight: 700; margin: 0 0 .35rem; }
.docs-form .form-control { min-height: var(--alvo-toque); }
.docs-form textarea.form-control { min-height: 0; }
.docs-form__dupla { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.docs-form__ajuda { color: var(--texto-suave); font-size: .8rem; margin: .3rem 0 0; }
.docs-form__erro { color: var(--erro); font-size: .82rem; margin: .3rem 0 0; }
.docs-form__rodape { border-top: 1px solid var(--borda); display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; padding: 1rem 1.3rem; }

.docs-envio {
    align-items: center;
    background: var(--realce);
    border: 2px dashed #a9d3cf;
    border-radius: var(--raio);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    justify-content: center;
    margin: 0 !important;
    min-height: 9rem;
    padding: 1.2rem;
    position: relative;
    text-align: center;
    transition: border-color .12s ease, background .12s ease;
}
.docs-envio:hover, .docs-envio--sobre { background: #e6f4f1; border-color: var(--marca-agua); }
.docs-envio:focus-within { outline: 2px solid var(--marca-ciano); outline-offset: 2px; }
.docs-envio__icone { color: var(--marca-agua); font-size: 1.8rem; }
.docs-envio__titulo { font-size: 1rem; font-weight: 700; }
.docs-envio__ajuda { color: var(--texto-suave); font-size: .82rem; font-weight: 400; }
.docs-envio__escolhido { color: var(--agua-escura); font-weight: 700; overflow-wrap: anywhere; }
.docs-envio__arquivo { cursor: pointer; inset: 0; opacity: 0; position: absolute; width: 100%; }

.docs-opcao { align-items: flex-start; display: flex; gap: .7rem; }
.docs-opcao input { flex: 0 0 auto; height: 1.15rem; margin-top: .15rem; width: 1.15rem; }
.docs-opcao label { margin: 0; }
.docs-opcao .docs-form__ajuda { margin-top: .1rem; }

.docs-alerta { align-items: flex-start; border-radius: var(--raio-medio); display: flex; gap: .7rem; padding: .9rem 1rem; }
.docs-alerta i { margin-top: .2rem; }
.docs-alerta p { margin: 0; }
.docs-alerta--perigo { background: var(--erro-fundo); color: #8f2a20; }
.docs-alerta--info { background: #e5f2f7; color: #0f4f66; }

/* ---- Estatísticas -------------------------------------------------------- */

.docs-indicadores { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); margin-bottom: 1rem; }
.docs-indicador { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 1rem 1.1rem; }
.docs-indicador__rotulo { color: var(--texto-suave); font-size: .74rem; font-weight: 700; letter-spacing: .04em; margin: 0; text-transform: uppercase; }
.docs-indicador__valor { font-family: var(--fonte-numero); font-size: 1.7rem; font-weight: 700; margin: .2rem 0 0; }
.docs-graficos { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.docs-barras { display: grid; gap: .55rem; list-style: none; margin: 0; padding: 0; }
.docs-barra { align-items: center; display: grid; font-size: .85rem; gap: .6rem; grid-template-columns: minmax(6rem, 13rem) minmax(0, 1fr) 3rem; }
.docs-barra__rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs-barra__trilho { display: block; background: #eef1f3; border-radius: var(--raio-pilula); height: .7rem; overflow: hidden; }
.docs-barra__cheio { display: block; background: linear-gradient(90deg, var(--marca-agua), var(--marca-verde)); border-radius: inherit; height: 100%; }
.docs-barra__valor { font-family: var(--fonte-numero); font-weight: 700; text-align: right; }
.docs-colunas { align-items: flex-end; display: flex; gap: .4rem; height: 12rem; list-style: none; margin: 0; padding: 1.4rem 0 0; }
.docs-coluna { align-items: center; display: flex; flex: 1 1 0; flex-direction: column; gap: .3rem; height: 100%; justify-content: flex-end; min-width: 0; }
.docs-coluna__barra { display: block; background: linear-gradient(180deg, var(--marca-verde), var(--marca-agua)); border-radius: 6px 6px 0 0; min-height: 3px; position: relative; width: 100%; }
.docs-coluna__valor { font-size: .72rem; font-weight: 700; left: 50%; position: absolute; top: -1.2rem; transform: translateX(-50%); }
.docs-coluna__rotulo { color: var(--texto-suave); font-size: .68rem; white-space: nowrap; }

/* ---- Em lote ------------------------------------------------------------- */

.docs-lote__barra {
    align-items: center;
    background: var(--superficie);
    border-bottom: 1px solid var(--borda);
    border-radius: var(--raio) var(--raio) 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .7rem 1.1rem;
    position: sticky;
    top: 0;
    z-index: 2;
}
.docs-lote__marcar { align-items: center; cursor: pointer; display: inline-flex; gap: .6rem; margin: 0 auto 0 0; min-height: var(--alvo-toque); }
.docs-lote__marcar input { height: 1.2rem; width: 1.2rem; }
.docs-lote__contagem { font-weight: 700; }
.docs-lote__destino { align-items: center; display: inline-flex; gap: .4rem; }
.docs-lote__destino select { max-width: 16rem; min-height: var(--alvo-toque); }
.docs-item--marcavel { grid-template-columns: auto auto minmax(0, 1fr) auto; }
.docs-item--marcavel input { height: 1.2rem; position: relative; width: 1.2rem; z-index: 1; }
.docs-item--marcavel label { cursor: pointer; margin: 0; }
.docs-item--marcado { background: var(--realce); }

/* ---- Ajuda de permissões ------------------------------------------------- */

.docs-niveis { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.docs-nivel { border: 1px solid var(--borda); border-radius: var(--raio); border-top: 4px solid var(--marca-agua); padding: 1rem 1.1rem; }
.docs-nivel h3 { font-size: 1rem; font-weight: 750; margin: 0 0 .5rem; }
.docs-nivel ul { color: var(--texto-suave); font-size: .88rem; margin: 0; padding-left: 1.1rem; }
.docs-passos { margin: 0; padding-left: 1.2rem; }
.docs-passos li { margin-bottom: .35rem; }

/* ---- A janela da prévia, sobre as listas ---------------------------------- */
/* O olho de cada documento abre a prévia aqui, sem sair da lista. Cabeçalho
   fixo com o nome e os atalhos; só o corpo rola. */

.docs-janela {
    background: var(--superficie);
    border: 0;
    border-radius: var(--raio);
    box-shadow: var(--sombra-alta);
    color: var(--texto);
    display: none;
    flex-direction: column;
    height: min(92vh, 1100px);
    max-height: none;
    max-width: none;
    padding: 0;
    width: min(1100px, calc(100vw - 2rem));
}
.docs-janela[open] { display: flex; }
.docs-janela::backdrop { background: rgba(14, 22, 39, .62); }
.docs-janela__cabeca {
    align-items: center;
    border-bottom: 1px solid var(--borda);
    display: flex;
    gap: .75rem;
    padding: .7rem .9rem .7rem 1.2rem;
}
.docs-janela__titulo { flex: 1 1 auto; font-size: 1.05rem; font-weight: 700; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs-janela__acoes { display: flex; flex: 0 0 auto; gap: .4rem; }
.docs-janela__corpo { border-radius: 0 0 var(--raio) var(--raio); flex: 1 1 auto; min-height: 0; overflow: auto; }

/* ---- Telas menores ------------------------------------------------------- */

@media (max-width: 991.98px) {
    .docs-ficha { grid-template-columns: minmax(0, 1fr); }
    .docs-ficha__lado { position: static; }
    .docs-graficos { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767.98px) {
    .docs-tela { padding: .75rem .5rem 1.5rem; }
    .docs-topo { padding: 1rem; }
    .docs-topo__acoes { width: 100%; }
    .docs-topo__acoes .docs-botao { flex: 1 1 auto; }
    .docs-item { gap: .15rem .75rem; grid-template-columns: auto minmax(0, 1fr) auto; padding: .6rem .8rem; }
    .docs-item__meta { display: none; }
    .docs-item__nome { white-space: normal; }
    .docs-item--marcavel { grid-template-columns: auto auto minmax(0, 1fr); }
    .docs-ferramentas__lado { margin-left: 0; }
    .docs-form { padding: 1rem; }
    .docs-form__dupla { grid-template-columns: minmax(0, 1fr); }
    .docs-form__rodape .docs-botao { flex: 1 1 auto; }
    .docs-paginas { gap: .6rem; padding: .5rem; }
    .docs-barra { grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) 2.5rem; }
    .docs-lote__destino { width: 100%; }
    .docs-lote__destino select { flex: 1 1 auto; max-width: none; }
    .docs-janela { border-radius: 0; height: 100dvh; width: 100vw; }
    .docs-janela__corpo { border-radius: 0; }
    .docs-janela__rotulo { display: none; }
    .docs-janela [data-janela-ficha], .docs-janela [data-janela-baixar] { padding: 0; width: var(--alvo-toque); justify-content: center; }
}

/* ---- Impressão (estatísticas) -------------------------------------------- */

@media print {
    .main-sidebar, .main-header, .main-footer, .docs-abas, .docs-topo__acoes, .docs-voltar, .docs-nao-imprimir { display: none !important; }
    .content-wrapper { margin: 0 !important; }
    .docs-tela { max-width: none; padding: 0; }
    .docs-cartao, .docs-indicador, .docs-topo { box-shadow: none; break-inside: avoid; }
}