/* ==========================================================================
   Documentos Digitais — folha de estilo da aplicação
   Sem framework externo: a CSP é default-src 'self' e não permite CDN.
   ========================================================================== */

:root {
    --cor-fundo: #f4f6fa;
    --cor-superficie: #ffffff;
    --cor-borda: #e3e8ef;
    --cor-borda-forte: #cbd5e1;

    --cor-texto: #16202e;
    --cor-texto-suave: #5a6a80;
    --cor-texto-fraco: #8b98ab;

    /* Cores extraídas do próprio logo: azul da marca e navy do subtítulo. */
    --cor-primaria: #0261ad;
    --cor-primaria-escura: #014b87;
    --cor-primaria-clara: #e3f0fa;
    --cor-marca-navy: #002754;

    --cor-sucesso: #0f8a4a;
    --cor-sucesso-clara: #e3f6ec;
    --cor-aviso: #b26a00;
    --cor-aviso-clara: #fdf1dc;
    --cor-perigo: #c62828;
    --cor-perigo-clara: #fdeaea;
    --cor-info: #0b6f92;
    --cor-info-clara: #e2f3fa;
    --cor-neutra: #4a5568;
    --cor-neutra-clara: #eef1f5;

    --raio: 10px;
    --raio-pequeno: 6px;
    --sombra: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 12px rgba(16, 24, 40, .06);
    --sombra-forte: 0 10px 32px rgba(16, 24, 40, .12);

    --menu-largura: 244px;
    --topo-altura: 64px;

    --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fonte-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--fonte);
    font-size: 15px;
    line-height: 1.55;
    color: var(--cor-texto);
    background: var(--cor-fundo);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: 1.3; font-weight: 650; }
p { margin: 0; }
a { color: var(--cor-primaria); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: var(--fonte-mono); font-size: .9em; }

:focus-visible {
    outline: 3px solid var(--cor-primaria);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Acessibilidade ---------------------------------------------------------- */

.so-leitor {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.pular-para-conteudo {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: .75rem 1.25rem;
    background: var(--cor-primaria);
    color: #fff;
    border-radius: 0 0 var(--raio) 0;
}
.pular-para-conteudo:focus { left: 0; }

/* ==========================================================================
   Login e páginas de erro
   ========================================================================== */

.tela-auth {
    background: linear-gradient(160deg, #e6f1fa 0%, #f2f6fa 45%, #f7f9fb 100%);
    min-height: 100vh;
}

.auth-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    gap: 1.25rem;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: 14px;
    box-shadow: var(--sombra-forte);
    padding: 2rem;
}

.auth-marca {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--cor-borda);
    text-align: center;
}

/* O logo é o lockup horizontal (3:1). A altura é derivada da largura para
   não haver salto de layout enquanto a imagem carrega. */
.auth-logo {
    width: 100%;
    max-width: 290px;
    height: auto;
    aspect-ratio: 3 / 1;
    object-fit: contain;
}

.auth-sub {
    font-size: .82rem;
    color: var(--cor-texto-fraco);
    letter-spacing: .01em;
}

.auth-titulo { font-size: 1.4rem; margin-bottom: .35rem; }
.auth-descricao { color: var(--cor-texto-suave); font-size: .92rem; margin-bottom: 1.5rem; }

.auth-rodape { font-size: .8rem; color: var(--cor-texto-fraco); }

.erro-card { text-align: center; }
.erro-marca { width: 76px; height: 76px; margin-bottom: .75rem; }
.erro-codigo {
    font-size: 3.25rem;
    font-weight: 700;
    color: var(--cor-primaria);
    line-height: 1;
    margin-bottom: .5rem;
}

/* ==========================================================================
   Formulários
   ========================================================================== */

.campo { margin-bottom: 1.15rem; }

.campo-rotulo {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: .4rem;
    color: var(--cor-texto);
}

.campo-controle {
    width: 100%;
    padding: .65rem .8rem;
    font: inherit;
    font-size: .95rem;
    color: var(--cor-texto);
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda-forte);
    border-radius: var(--raio-pequeno);
    transition: border-color .15s, box-shadow .15s;
}

.campo-controle:focus {
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px var(--cor-primaria-clara);
    outline: none;
}

.campo-invalido { border-color: var(--cor-perigo); }
.campo-invalido:focus { box-shadow: 0 0 0 3px var(--cor-perigo-clara); }

.campo-erro {
    margin-top: .35rem;
    font-size: .82rem;
    color: var(--cor-perigo);
}

.campo-senha { position: relative; }
.campo-senha .campo-controle { padding-right: 2.75rem; }

.botao-olho {
    position: absolute;
    right: .35rem; top: 50%;
    transform: translateY(-50%);
    display: grid; place-items: center;
    width: 2.1rem; height: 2.1rem;
    padding: 0;
    border: 0;
    background: none;
    border-radius: var(--raio-pequeno);
    color: var(--cor-texto-fraco);
    cursor: pointer;
}
.botao-olho:hover { color: var(--cor-texto); background: var(--cor-neutra-clara); }
.botao-olho svg { width: 18px; height: 18px; }
.botao-olho[aria-pressed="true"] { color: var(--cor-primaria); }

/* ==========================================================================
   Botões
   ========================================================================== */

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .6rem 1.1rem;
    font: inherit;
    font-size: .92rem;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: var(--raio-pequeno);
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s, border-color .15s, color .15s;
}
.botao:hover { text-decoration: none; }
.botao:disabled { opacity: .6; cursor: not-allowed; }
.botao svg { width: 17px; height: 17px; flex: 0 0 17px; }

.botao-primario { background: var(--cor-primaria); color: #fff; }
.botao-primario:hover:not(:disabled) { background: var(--cor-primaria-escura); }

.botao-discreto {
    background: var(--cor-superficie);
    color: var(--cor-texto);
    border-color: var(--cor-borda-forte);
}
.botao-discreto:hover:not(:disabled) { background: var(--cor-neutra-clara); }

.botao-bloco { width: 100%; }
.botao-pequeno { padding: .38rem .7rem; font-size: .85rem; }

/* ==========================================================================
   Alertas
   ========================================================================== */

.alertas { display: grid; gap: .6rem; margin-bottom: 1.25rem; }

.alerta {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .75rem .9rem;
    border: 1px solid transparent;
    border-radius: var(--raio-pequeno);
    font-size: .9rem;
}
.alerta-icone { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; }

.alerta-sucesso { background: var(--cor-sucesso-clara); border-color: #b7e4ca; color: #0b5c33; }
.alerta-erro    { background: var(--cor-perigo-clara);  border-color: #f4c2c2; color: #8f1f1f; }
.alerta-aviso   { background: var(--cor-aviso-clara);   border-color: #f0d7a8; color: #7d4b00; }
.alerta-info    { background: var(--cor-info-clara);    border-color: #b6dced; color: #084f68; }

.alerta-fechar {
    margin-left: auto;
    background: none;
    border: 0;
    font-size: 1.2rem;
    line-height: 1;
    color: inherit;
    opacity: .6;
    cursor: pointer;
}
.alerta-fechar:hover { opacity: 1; }

/* ==========================================================================
   Layout do painel
   ========================================================================== */

.layout { display: flex; min-height: 100vh; }

.menu {
    width: var(--menu-largura);
    flex: 0 0 var(--menu-largura);
    background: var(--cor-superficie);
    border-right: 1px solid var(--cor-borda);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.menu-marca {
    display: flex;
    align-items: center;
    height: var(--topo-altura);
    padding: 0 1rem;
    border-bottom: 1px solid var(--cor-borda);
}
.menu-marca:hover { text-decoration: none; }

.menu-logo {
    width: 100%;
    max-width: 176px;
    height: auto;
    aspect-ratio: 3 / 1;
    object-fit: contain;
}

.menu-nav { padding: .85rem .65rem; display: grid; gap: .15rem; }

.menu-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .6rem .75rem;
    border-radius: var(--raio-pequeno);
    color: var(--cor-texto-suave);
    font-size: .92rem;
    font-weight: 550;
}
.menu-item:hover { background: var(--cor-neutra-clara); color: var(--cor-texto); text-decoration: none; }
.menu-item svg { width: 18px; height: 18px; flex: 0 0 18px; }

.menu-item-ativo {
    background: var(--cor-primaria-clara);
    color: var(--cor-primaria-escura);
}

.conteudo-area { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topo {
    height: var(--topo-altura);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.5rem;
    background: var(--cor-superficie);
    border-bottom: 1px solid var(--cor-borda);
    position: sticky;
    top: 0;
    z-index: 20;
}

.topo-titulo { font-size: 1.05rem; font-weight: 650; color: var(--cor-marca-navy); }

.topo-usuario {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .7rem;
}

.avatar {
    width: 34px; height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--cor-primaria-clara);
    color: var(--cor-primaria-escura);
    font-size: .78rem;
    font-weight: 700;
}

.topo-usuario-dados { display: flex; flex-direction: column; line-height: 1.25; }
.topo-usuario-nome { font-size: .87rem; font-weight: 600; }
.topo-usuario-perfil { font-size: .75rem; color: var(--cor-texto-fraco); }

.form-sair { margin: 0; }

.botao-menu {
    display: none;
    padding: .4rem;
    background: none;
    border: 1px solid var(--cor-borda-forte);
    border-radius: var(--raio-pequeno);
    cursor: pointer;
    color: var(--cor-texto);
}
.botao-menu svg { width: 20px; height: 20px; display: block; }

.conteudo { padding: 1.5rem; flex: 1; }

.migalha {
    font-size: .85rem;
    color: var(--cor-texto-fraco);
    margin-bottom: 1rem;
    display: flex;
    gap: .4rem;
}

/* ==========================================================================
   Cartões do painel
   ========================================================================== */

.cartoes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.cartao {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-left: 4px solid var(--cor-neutra);
    border-radius: var(--raio);
    padding: 1.1rem 1.2rem;
    box-shadow: var(--sombra);
    display: flex;
    flex-direction: column;
    gap: .15rem;
    color: inherit;
}
.cartao:hover { text-decoration: none; box-shadow: var(--sombra-forte); }

.cartao-numero { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.cartao-texto  { font-size: .85rem; color: var(--cor-texto-suave); }

.cartao-warning { border-left-color: var(--cor-aviso); }
.cartao-success { border-left-color: var(--cor-sucesso); }
.cartao-danger  { border-left-color: var(--cor-perigo); }
.cartao-dark    { border-left-color: var(--cor-neutra); }
.cartao-secondary { border-left-color: var(--cor-borda-forte); }

/* ==========================================================================
   Seções, filtros e chips
   ========================================================================== */

.painel-secao {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.painel-secao-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--cor-borda);
}
.painel-secao-topo h2 { font-size: 1rem; }

.filtros {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.filtros-form {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    align-items: center;
}

.filtros-busca {
    position: relative;
    flex: 1 1 300px;
    min-width: 220px;
    display: flex;
    align-items: center;
}
.filtros-busca svg {
    position: absolute;
    left: .65rem;
    width: 17px; height: 17px;
    color: var(--cor-texto-fraco);
    pointer-events: none;
}
.filtros-busca input {
    width: 100%;
    padding: .55rem .8rem .55rem 2.2rem;
    font: inherit;
    font-size: .9rem;
    border: 1px solid var(--cor-borda-forte);
    border-radius: var(--raio-pequeno);
}
.filtros-busca input:focus {
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px var(--cor-primaria-clara);
    outline: none;
}

.filtros-periodo {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    color: var(--cor-texto-suave);
}
.filtros-periodo input {
    padding: .5rem .6rem;
    font: inherit;
    font-size: .88rem;
    border: 1px solid var(--cor-borda-forte);
    border-radius: var(--raio-pequeno);
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px solid var(--cor-borda);
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .32rem .7rem;
    font-size: .84rem;
    font-weight: 550;
    color: var(--cor-texto-suave);
    background: var(--cor-neutra-clara);
    border: 1px solid transparent;
    border-radius: 999px;
}
.chip:hover { text-decoration: none; background: #e4e8ee; color: var(--cor-texto); }

.chip-ativo {
    background: var(--cor-primaria-clara);
    border-color: #b3d4ec;
    color: var(--cor-primaria-escura);
}

.chip-contagem {
    font-size: .75rem;
    font-weight: 700;
    padding: 0 .38rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .75);
}

/* ==========================================================================
   Tabela
   ========================================================================== */

.tabela-envolucro {
    overflow-x: auto;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
}

.tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }

.tabela th {
    text-align: left;
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--cor-texto-fraco);
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--cor-borda);
    white-space: nowrap;
    background: #fafbfd;
}

.tabela td {
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--cor-borda);
    vertical-align: middle;
}

.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: #fafbfd; }

.coluna-acoes { text-align: right; white-space: nowrap; }

.doc-titulo { display: block; font-weight: 600; color: var(--cor-texto); }
a.doc-titulo:hover { color: var(--cor-primaria); }
.doc-meta { display: block; font-size: .79rem; color: var(--cor-texto-fraco); margin-top: .1rem; }

.texto-fraco { color: var(--cor-texto-fraco); font-size: .85rem; }

/* Badges ------------------------------------------------------------------ */

.badge {
    display: inline-block;
    padding: .22rem .6rem;
    font-size: .78rem;
    font-weight: 600;
    border-radius: 999px;
    white-space: nowrap;
}

.badge-success   { background: var(--cor-sucesso-clara); color: #0b5c33; }
.badge-warning   { background: var(--cor-aviso-clara);   color: #7d4b00; }
.badge-danger    { background: var(--cor-perigo-clara);  color: #8f1f1f; }
.badge-info      { background: var(--cor-info-clara);    color: #084f68; }
.badge-primary   { background: var(--cor-primaria-clara); color: var(--cor-primaria-escura); }
.badge-secondary { background: var(--cor-neutra-clara);  color: var(--cor-neutra); }
.badge-dark      { background: #e2e5ea;                  color: #2c3542; }
.badge-light     { background: #f1f3f6;                  color: var(--cor-texto-fraco); }

/* Progresso de assinaturas ------------------------------------------------ */

.progresso { display: flex; align-items: center; gap: .55rem; min-width: 110px; }

.progresso-barra {
    flex: 1;
    height: 6px;
    background: var(--cor-neutra-clara);
    border-radius: 999px;
    overflow: hidden;
}
.progresso-barra span {
    display: block;
    height: 100%;
    background: var(--cor-sucesso);
    border-radius: 999px;
}

.progresso-texto {
    font-size: .8rem;
    font-weight: 600;
    color: var(--cor-texto-suave);
    white-space: nowrap;
}

/* Prazo ------------------------------------------------------------------- */

.prazo { font-size: .84rem; font-weight: 600; }
.prazo-vencido { color: var(--cor-perigo); }
.prazo-alerta  { color: var(--cor-aviso); }

/* ==========================================================================
   Ficha, listas, estado vazio e paginação
   ========================================================================== */

.ficha {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1rem 1.5rem;
    margin: 0;
    padding: 1.25rem;
}
.ficha dt { font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--cor-texto-fraco); font-weight: 700; }
.ficha dd { margin: .2rem 0 0; font-size: .92rem; }

.lista-simples { list-style: none; margin: 0; padding: 0; }
.lista-simples li {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .8rem 1.25rem;
    border-bottom: 1px solid var(--cor-borda);
}
.lista-simples li:last-child { border-bottom: 0; }
.lista-simples li > a { flex: 1; min-width: 0; color: inherit; }
.lista-simples li > a:hover { text-decoration: none; }
.lista-titulo { display: block; font-weight: 600; }
.lista-meta { display: block; font-size: .79rem; color: var(--cor-texto-fraco); }

.vazio {
    text-align: center;
    padding: 3rem 1.5rem;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
}
.vazio-icone { width: 52px; height: 52px; color: var(--cor-borda-forte); margin-bottom: .9rem; }
.vazio-titulo { font-size: 1.05rem; margin-bottom: .35rem; }
.vazio-descricao { color: var(--cor-texto-suave); font-size: .9rem; max-width: 46ch; margin: 0 auto 1.25rem; }

.paginacao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.paginacao-resumo { font-size: .85rem; color: var(--cor-texto-fraco); margin-top: 1rem; }
.paginacao .paginacao-resumo { margin-top: 0; }

.paginacao-lista {
    display: flex;
    gap: .25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.paginacao-lista a,
.paginacao-lista span {
    display: grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    padding: 0 .5rem;
    font-size: .88rem;
    font-weight: 600;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pequeno);
    background: var(--cor-superficie);
    color: var(--cor-texto-suave);
}
.paginacao-lista a:hover { background: var(--cor-neutra-clara); text-decoration: none; color: var(--cor-texto); }

.paginacao-atual {
    background: var(--cor-primaria) !important;
    border-color: var(--cor-primaria) !important;
    color: #fff !important;
}

.paginacao-desativado { opacity: .45; }

/* ==========================================================================
   Responsivo
   ========================================================================== */

@media (max-width: 991px) {
    .menu {
        position: fixed;
        z-index: 40;
        left: 0; top: 0;
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: var(--sombra-forte);
    }
    .menu.menu-aberto { transform: translateX(0); }

    .botao-menu { display: block; }
}

@media (max-width: 575px) {
    .conteudo { padding: 1rem; }
    .topo { padding: 0 1rem; }
    .so-desktop { display: none; }
    .topo-usuario-dados { display: none; }
    .filtros-periodo { width: 100%; }
    .filtros-periodo input { flex: 1; min-width: 0; }
    .auth-card { padding: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ==========================================================================
   Integração
   ========================================================================== */

.acoes-barra {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    padding: 0 1.25rem 1.25rem;
}
.acoes-barra form { margin: 0; }

.nota-secao {
    margin: 0 1.25rem 1.25rem;
    padding: .75rem .9rem;
    font-size: .87rem;
    color: #7d4b00;
    background: var(--cor-aviso-clara);
    border: 1px solid #f0d7a8;
    border-radius: var(--raio-pequeno);
}

/* URL de webhook e hashes: quebram em qualquer largura */
.quebra {
    word-break: break-all;
    overflow-wrap: anywhere;
}

/* Nomes longos de signatário não podem esticar a tabela */
.celula-truncada {
    display: inline-block;
    max-width: 26ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* ==========================================================================
   Organização: pastas, formulários e classificação
   ========================================================================== */

.secao-corpo { padding: 1.25rem; }

.form-linha {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: flex-end;
    padding: 1.25rem;
}

.form-campo { flex: 1 1 200px; min-width: 0; }
.form-campo-largo { flex: 2 1 320px; }
.form-campo-estreito { flex: 0 0 110px; }

.campo-dica { margin-top: .3rem; font-size: .78rem; color: var(--cor-texto-fraco); }

.campo-cor {
    width: 100%;
    height: 40px;
    padding: 2px;
    border: 1px solid var(--cor-borda-forte);
    border-radius: var(--raio-pequeno);
    background: var(--cor-superficie);
    cursor: pointer;
}

.grade-campos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
}
.grade-campos-form { padding: 1.25rem; }

textarea.campo-controle { resize: vertical; min-height: 76px; font-family: inherit; }

/* Árvore de pastas --------------------------------------------------------- */

.arvore { list-style: none; margin: 0; padding: 0; }

.arvore-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem 1.25rem;
    padding-left: calc(1.25rem + (var(--nivel, 0) * 1.5rem));
    border-bottom: 1px solid var(--cor-borda);
}
.arvore-item:last-child { border-bottom: 0; }
.arvore-item:hover { background: #fafbfd; }

.arvore-cor {
    width: 10px; height: 10px;
    flex: 0 0 10px;
    border-radius: 3px;
}

.arvore-nome { font-weight: 600; color: var(--cor-texto); }
.arvore-nome:hover { color: var(--cor-primaria); }

.arvore-contagem {
    margin-left: auto;
    font-size: .8rem;
    color: var(--cor-texto-fraco);
    white-space: nowrap;
}

.arvore-acoes summary { list-style: none; cursor: pointer; }
.arvore-acoes summary::-webkit-details-marker { display: none; }

.arvore-painel {
    position: absolute;
    right: 1.25rem;
    z-index: 10;
    display: grid;
    gap: 1rem;
    margin-top: .4rem;
    padding: 1rem;
    min-width: 250px;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda-forte);
    border-radius: var(--raio);
    box-shadow: var(--sombra-forte);
}
.arvore-painel form { display: grid; gap: .35rem; }

/* Classificação ------------------------------------------------------------ */

.form-classificar { display: grid; gap: 1rem; }

.campo-tags { border: 0; margin: 0; padding: 0; }
.campo-tags legend { padding: 0; margin-bottom: .5rem; }

.tags-lista { display: flex; flex-wrap: wrap; gap: .5rem; }

.tag-opcao {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .65rem;
    font-size: .85rem;
    border: 1px solid var(--cor-borda-forte);
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
}
.tag-opcao:hover { background: var(--cor-neutra-clara); }
.tag-opcao input { margin: 0; }

.tag-cor { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* Lote --------------------------------------------------------------------- */

.lote {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    margin-bottom: 1.25rem;
}

.lote > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .9rem 1.25rem;
    cursor: pointer;
    font-size: .92rem;
}
.lote[open] > summary { border-bottom: 1px solid var(--cor-borda); }

.lote-titulo { font-weight: 650; }
.lote-corpo { padding: 1.25rem; }

.lote-rodape {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: .5rem;
    border-top: 1px solid var(--cor-borda);
}
.lote-alvo { font-size: .88rem; color: var(--cor-texto-suave); }

.chips-organizar { border-top: 0; padding-top: 0; margin-top: .75rem; }

.botao-perigo { color: var(--cor-perigo); border-color: #f0c4c4; }
.botao-perigo:hover:not(:disabled) { background: var(--cor-perigo-clara); }

/* ==========================================================================
   Usuários e perfil
   ========================================================================== */

.form-inline { display: inline-block; margin: 0; }

.form-sair-auth { margin-top: 1.25rem; text-align: center; }

.botao-link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: .85rem;
    color: var(--cor-texto-fraco);
    text-decoration: underline;
    cursor: pointer;
}
.botao-link:hover { color: var(--cor-texto); }

.topo-usuario-dados a { color: inherit; }
.topo-usuario-dados a:hover { color: var(--cor-primaria); text-decoration: none; }

/* ==========================================================================
   Substituição dos atributos style= inline
   --------------------------------------------------------------------------
   A CSP é `style-src 'self' 'nonce-...'` e nonce NÃO vale para atributo
   style="": o navegador bloqueia todos eles. Tudo que era inline virou
   classe (valor fixo) ou seletor de atributo (valor discreto). O que é de
   fato dinâmico — a cor escolhida pelo usuário — é aplicado por JavaScript,
   que não passa pelo style-src.
   ========================================================================== */

.form-campo-espacado { padding: 0 1.25rem; }
.form-campo-rodape   { display: flex; align-items: flex-end; }
.nota-secao-solta    { margin: 0 0 1.25rem; }

/* Recuo da árvore de pastas por nível */
.arvore-item[data-nivel="0"] { padding-left: 1.25rem; }
.arvore-item[data-nivel="1"] { padding-left: 2.75rem; }
.arvore-item[data-nivel="2"] { padding-left: 4.25rem; }
.arvore-item[data-nivel="3"] { padding-left: 5.75rem; }
.arvore-item[data-nivel="4"] { padding-left: 7.25rem; }
.arvore-item[data-nivel="5"] { padding-left: 8.75rem; }
.arvore-item[data-nivel="6"] { padding-left: 10.25rem; }

/* Progresso em passos de 5% — funciona sem JavaScript */
.progresso-barra span[data-progresso="0"]   { width: 0; }
.progresso-barra span[data-progresso="5"]   { width: 5%; }
.progresso-barra span[data-progresso="10"]  { width: 10%; }
.progresso-barra span[data-progresso="15"]  { width: 15%; }
.progresso-barra span[data-progresso="20"]  { width: 20%; }
.progresso-barra span[data-progresso="25"]  { width: 25%; }
.progresso-barra span[data-progresso="30"]  { width: 30%; }
.progresso-barra span[data-progresso="35"]  { width: 35%; }
.progresso-barra span[data-progresso="40"]  { width: 40%; }
.progresso-barra span[data-progresso="45"]  { width: 45%; }
.progresso-barra span[data-progresso="50"]  { width: 50%; }
.progresso-barra span[data-progresso="55"]  { width: 55%; }
.progresso-barra span[data-progresso="60"]  { width: 60%; }
.progresso-barra span[data-progresso="65"]  { width: 65%; }
.progresso-barra span[data-progresso="70"]  { width: 70%; }
.progresso-barra span[data-progresso="75"]  { width: 75%; }
.progresso-barra span[data-progresso="80"]  { width: 80%; }
.progresso-barra span[data-progresso="85"]  { width: 85%; }
.progresso-barra span[data-progresso="90"]  { width: 90%; }
.progresso-barra span[data-progresso="95"]  { width: 95%; }
.progresso-barra span[data-progresso="100"] { width: 100%; }

/* Sem JavaScript a cor fica neutra, para o elemento não sumir */
.arvore-cor, .tag-cor { background: var(--cor-borda-forte); }

/* O painel de ações precisa de ancestral posicionado, senão se ancora na
   página inteira e aparece longe da linha da pasta. */
.arvore-acoes { position: relative; }

/* ==========================================================================
   Responsivo dos componentes acrescentados depois
   --------------------------------------------------------------------------
   Estes blocos vêm no FIM de propósito: os componentes de organização,
   usuários e classificação foram escritos depois dos @media originais, e
   uma media query anterior não sobrescreve regra de mesma especificidade
   declarada mais adiante.
   ========================================================================== */

@media (max-width: 767px) {
    /* Painel de ações da pasta: absoluto numa tela estreita escapa da
       viewport. Passa a fluir abaixo da linha. */
    .arvore-painel {
        position: static;
        min-width: 0;
        width: 100%;
        margin-top: .6rem;
        box-shadow: none;
    }

    .arvore-item {
        flex-wrap: wrap;
        row-gap: .4rem;
    }

    .arvore-acoes { width: 100%; }
    .arvore-contagem { margin-left: 0; }

    /* Recuo menor: 10rem de indentação em 360px não sobra espaço p/ o nome */
    .arvore-item[data-nivel="1"] { padding-left: 2rem; }
    .arvore-item[data-nivel="2"] { padding-left: 2.75rem; }
    .arvore-item[data-nivel="3"] { padding-left: 3.5rem; }
    .arvore-item[data-nivel="4"] { padding-left: 4.25rem; }
    .arvore-item[data-nivel="5"] { padding-left: 5rem; }
    .arvore-item[data-nivel="6"] { padding-left: 5.75rem; }

    .form-linha,
    .grade-campos-form,
    .lote-corpo,
    .secao-corpo { padding-left: 1rem; padding-right: 1rem; }

    .form-campo,
    .form-campo-largo,
    .form-campo-estreito { flex: 1 1 100%; }

    .form-campo-rodape { align-items: stretch; }
    .form-campo-rodape .botao { width: 100%; }

    .lote > summary { flex-direction: column; align-items: flex-start; gap: .25rem; }
    .lote-rodape { flex-direction: column; align-items: stretch; }
    .lote-rodape .botao { width: 100%; }

    .coluna-acoes { white-space: normal; }
    .celula-truncada { max-width: 16ch; }
}

@media (max-width: 575px) {
    .acoes-barra { flex-direction: column; align-items: stretch; }
    .acoes-barra .botao { width: 100%; justify-content: center; }
    .acoes-barra form { width: 100%; }

    .filtros-form .botao { width: 100%; }
    .ficha { padding: 1rem; }
    .arvore-item { padding-right: 1rem; }
}

/* Nada pode empurrar a página para os lados — a rolagem horizontal fica
   contida no componente que a exige (tabela), nunca no corpo. */
html, body { max-width: 100%; overflow-x: clip; }

/* ==========================================================================
   Envio para assinatura
   ========================================================================== */

.modelos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.modelo {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: 1.1rem;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    color: inherit;
    min-height: 116px;
}
.modelo:hover {
    text-decoration: none;
    border-color: var(--cor-primaria);
    box-shadow: var(--sombra-forte);
}

.modelo-icone { width: 24px; height: 24px; color: var(--cor-primaria); }
.modelo-nome  { font-weight: 600; font-size: .92rem; line-height: 1.35; }
.modelo-pasta { font-size: .78rem; color: var(--cor-texto-fraco); margin-top: auto; }

.signatario {
    border: 0;
    border-top: 1px solid var(--cor-borda);
    margin: 0;
    padding: 0 0 .5rem;
}
.signatario:first-of-type { border-top: 0; }

.signatario-papel {
    padding: 1rem 1.25rem 0;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--cor-primaria);
}

@media (max-width: 575px) {
    .modelos { grid-template-columns: 1fr; }
}