/* ARARA — Acompanhamento e Registro de Ações Regulatórias Ambientais
   Identidade visual (cores extraídas do logotipo oficial) e ajustes de layout. */
:root {
    --arara-verde: #15532e;        /* verde do wordmark ARARA */
    --arara-verde-escuro: #094c2b; /* verde da faixa do rodapé do timbrado */
    --arara-vermelho: #b71d1f;     /* traço vermelho de apoio */
    --arara-azul: #3a4151;         /* azul-grafite dos subtítulos */

    /* Re-tema do "success" do Bootstrap para o verde da marca */
    --bs-success: var(--arara-verde);
    --bs-success-rgb: 21, 83, 46;
    --bs-success-bg-subtle: #e4ece7;
    --bs-success-border-subtle: #b9cfc2;
    --bs-success-text-emphasis: #0e3a20;
}
.btn-success {
    --bs-btn-bg: #15532e;
    --bs-btn-border-color: #15532e;
    --bs-btn-hover-bg: #114528;
    --bs-btn-hover-border-color: #114528;
    --bs-btn-active-bg: #0e3a22;
    --bs-btn-active-border-color: #0e3a22;
    --bs-btn-disabled-bg: #15532e;
    --bs-btn-disabled-border-color: #15532e;
}
.btn-outline-success {
    --bs-btn-color: #15532e;
    --bs-btn-border-color: #15532e;
    --bs-btn-hover-bg: #15532e;
    --bs-btn-hover-border-color: #15532e;
    --bs-btn-active-bg: #15532e;
    --bs-btn-active-border-color: #15532e;
    --bs-btn-disabled-color: #15532e;
    --bs-btn-disabled-border-color: #15532e;
}

/* Barra superior e logotipo */
.navbar-arara {
    background-color: var(--arara-verde);
}
.logo-navbar {
    width: 34px;
    height: 34px;
    padding: 1px;
    border-radius: 50%;
    background: #fff;
    object-fit: contain;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .35);
}
.logo-login {
    max-width: 250px;
    width: 100%;
    height: auto;
}

.sidebar {
    min-height: calc(100vh - 58px);
}
@media (min-width: 992px) {
    .sidebar {
        position: sticky;
        top: 58px;
    }
}
.sidebar .list-group-item {
    border: 0;
    border-radius: 0;
    padding: .55rem 1rem;
}
.sidebar .list-group-item.active {
    background-color: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
    font-weight: 600;
    border-left: 3px solid var(--bs-success);
}
.sidebar .titulo-secao {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--bs-secondary-color);
    padding: .8rem 1rem .25rem;
}

/* Secoes colapsaveis da sidebar */
.sidebar .cabecalho-secao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: 0;
    text-align: left;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--bs-secondary-color);
    padding: .8rem 1rem .35rem;
}
.sidebar .cabecalho-secao:hover {
    color: var(--bs-emphasis-color);
}
.sidebar .cabecalho-secao:focus-visible {
    outline: 2px solid var(--bs-success);
    outline-offset: -2px;
}
.sidebar .chevron-secao {
    font-size: .7rem;
    transition: transform .18s ease;
}
.sidebar .secao-menu.fechada .chevron-secao {
    transform: rotate(-90deg);
}
.sidebar .itens-secao {
    overflow: hidden;
    /* Teto da animacao: cabe ~9 itens (a maior secao hoje tem 4) */
    max-height: 24rem;
}
.sidebar .secao-menu.fechada .itens-secao {
    max-height: 0;
}
.sidebar.sidebar-pronta .itens-secao {
    transition: max-height .25s ease;
}

/* Timeline das tramitacoes */
.timeline {
    border-left: 2px solid var(--bs-border-color);
    margin-left: .75rem;
    padding-left: 1.4rem;
}
.timeline-item {
    position: relative;
    padding-bottom: 1.1rem;
}
.timeline-item::before {
    content: "";
    position: absolute;
    left: -1.85rem;
    top: .3rem;
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    background: var(--bs-secondary);
}
.timeline-item.atual::before {
    background: var(--bs-success);
    box-shadow: 0 0 0 4px rgba(21, 83, 46, .25);
}
.timeline-item.estourado::before {
    background: var(--bs-danger);
}

.cartao-indicador .valor {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.1;
}
.tabela-compacta td, .tabela-compacta th {
    vertical-align: middle;
}

/* Base de Licenciamento: sigla com tooltip dentro do texto da documentacao */
.sigla-doc {
    border-bottom: 1px dotted var(--bs-secondary);
    cursor: help;
    font-weight: 600;
}
.linha-clicavel {
    cursor: pointer;
}

/* Agenda: cada evento do calendario mostra a providencia do dia em destaque e,
   abaixo, sobre o que ela e. O corte e por reticencias, nunca no meio da palavra. */
.evento-agenda {
    display: block;
    margin-bottom: .25rem;
    line-height: 1.15;
    color: inherit;
}
.evento-agenda:hover .evento-assunto {
    color: var(--bs-body-color);
}
.evento-acao,
.evento-assunto {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.evento-acao {
    font-size: .72rem;
    font-weight: 600;
}
.evento-assunto {
    font-size: .68rem;
    color: var(--bs-secondary-color);
    padding-left: 1.15rem;  /* alinha com o texto da acao, depois da bolinha */
}
.evento-agenda .badge {
    line-height: 1;
}

/* ============================================================
   Componentes do design system (Fase C). Valores vêm de tokens.css.
   ============================================================ */

/* Semáforo de prazo — componente único: cor + ícone + texto, nunca só cor */
.ar-prazo {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-1);
    padding: 2px var(--esp-2);
    border-radius: var(--raio-md);
    font-size: var(--texto-auxiliar);
    font-weight: var(--peso-medio);
    line-height: 1.4;
    white-space: nowrap;
}
.ar-prazo .bi { font-size: .9em; }
.ar-prazo--vermelho { background: var(--prazo-vencido-fundo); color: var(--prazo-vencido-texto); }
.ar-prazo--amarelo  { background: var(--prazo-atencao-fundo); color: var(--prazo-atencao-texto); }
.ar-prazo--verde    { background: var(--prazo-regular-fundo); color: var(--prazo-regular-texto); }
.ar-prazo--cinza    { background: var(--prazo-sem-fundo);     color: var(--prazo-sem-texto); }

/* Estado vazio — sempre com uma saída */
.ar-vazio {
    text-align: center;
    padding: var(--esp-8) var(--esp-4);
    color: var(--cor-texto-auxiliar);
}
.ar-vazio .bi {
    font-size: 1.75rem;
    display: block;
    margin-bottom: var(--esp-2);
    opacity: .5;
}
.ar-vazio p {
    margin-bottom: var(--esp-3);
    font-size: var(--texto-corpo);
}

/* Trilha de navegação */
.ar-trilha { margin-bottom: var(--esp-2); }
.ar-trilha ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-1);
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--texto-auxiliar);
}
.ar-trilha li + li::before {
    content: "›";
    margin-right: var(--esp-1);
    color: var(--cor-texto-auxiliar);
}
.ar-trilha a { color: var(--cor-texto-suave); text-decoration: none; }
.ar-trilha a:hover { text-decoration: underline; }
.ar-trilha [aria-current="page"] { color: var(--cor-texto); font-weight: var(--peso-medio); }

/* Impedimento — por que o registro está parado */
.ar-impedimento {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-1);
    padding: 2px var(--esp-2);
    border-radius: var(--raio-md);
    background: var(--atencao-fundo);
    color: var(--atencao-texto);
    font-size: var(--texto-auxiliar);
    font-weight: var(--peso-forte);
    white-space: nowrap;
}
.ar-impedimento-form > summary {
    cursor: pointer;
    font-size: var(--texto-label);
    color: var(--atencao-texto);
    font-weight: var(--peso-medio);
}