/* =============================================================================
   assets/20_rl_relatorio.css
   Estilos do módulo Gerador de Relatório. Tudo escopado pelo root .rl-app.
   ========================================================================== */

/* Todo token que este arquivo lê nasce aqui — paleta, escala, raios, sombras e
   dimensões. Nada é herdado do 00_base.css, cujo conjunto publicado é fechado.
   Assim o pacote pode ser arrancado da casca sem perder a aparência. */
.rl-app {
    --rl-c-tinta: #16202b;
    --rl-c-tinta-suave: #6c757d;
    --rl-c-superficie: #ffffff;
    --rl-c-superficie-suave: #f8f9fa;
    --rl-c-borda: #dee2e6;
    --rl-c-acento: #2563eb;
    --rl-c-perigo: #dc3545;

    --rl-e-1: 4px;
    --rl-e-2: 8px;
    --rl-e-3: 16px;

    --rl-r-sm: 8px;
    --rl-r-md: 12px;

    --rl-s-1: 0 2px 10px rgba(22, 32, 43, 0.08);

    --rl-t-pequeno: 0.875rem;

    --rl-largura-max: 1600px;
    --rl-altura-mapa: 45vh;
    --rl-altura-album: 58vh;
    --rl-altura-foto: 100px;
    --rl-altura-barra: 18px;
    --rl-logo: 45px;
}

.rl-app .rl-container {
    max-width: var(--rl-largura-max);
}

/* --- Cartões e seções ---------------------------------------------------- */

.rl-app .rl-card {
    border: 0;
    border-radius: var(--rl-r-md);
    box-shadow: var(--rl-s-1);
    background-color: var(--rl-c-superficie);
}

.rl-app .rl-secao {
    margin-bottom: var(--rl-e-3);
}

.rl-app .rl-secao__titulo {
    margin-bottom: 0;
    font-weight: 700;
    color: var(--rl-c-tinta);
}

.rl-app .rl-secao__subtitulo {
    margin-top: var(--rl-e-1);
    font-size: var(--rl-t-pequeno);
    color: var(--rl-c-tinta-suave);
}

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

.rl-app .rl-cabecalho__logo {
    height: var(--rl-logo);
}

.rl-app .rl-cabecalho__titulo {
    font-weight: 700;
    font-size: var(--rl-t-pequeno);
    letter-spacing: 0.1em;
    color: var(--rl-c-acento);
}

.rl-app .rl-cabecalho__descricao {
    color: var(--rl-c-tinta-suave);
}

/* --- Formulário ---------------------------------------------------------- */

.rl-app .rl-campo__rotulo {
    font-weight: 600;
    margin-bottom: var(--rl-e-2);
}

.rl-app .rl-upload {
    padding: 22px 14px;
    text-align: center;
    cursor: pointer;
    border: 1px dashed var(--rl-c-borda);
    border-radius: var(--rl-r-md);
    background-color: var(--rl-c-superficie-suave);
}

.rl-app .rl-upload__texto {
    font-weight: 600;
}

.rl-app .rl-status {
    font-size: var(--rl-t-pequeno);
    color: var(--rl-c-tinta-suave);
    margin-top: var(--rl-e-2);
}

/* --- Mapa ---------------------------------------------------------------- */

.rl-app .rl-mapa {
    width: 100%;
    height: var(--rl-altura-mapa);
    border: 1px solid var(--rl-c-borda);
    border-radius: var(--rl-r-md);
    background-color: var(--rl-c-superficie);
}

/* --- Geração ------------------------------------------------------------- */

.rl-app .rl-progresso {
    height: var(--rl-altura-barra);
}

/* --- Álbum de fotos ------------------------------------------------------ */

.rl-app .rl-album {
    max-height: var(--rl-altura-album);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px;
}

.rl-app .rl-grupo__codigo {
    margin-bottom: 0;
    font-weight: 700;
}

.rl-app .rl-grupo__contagem {
    font-size: var(--rl-t-pequeno);
    color: var(--rl-c-tinta-suave);
}

.rl-app .rl-foto__link {
    display: block;
    text-decoration: none;
}

.rl-app .rl-foto {
    width: 100%;
    height: var(--rl-altura-foto);
    object-fit: cover;
    border: 1px solid var(--rl-c-borda);
    border-radius: var(--rl-r-sm);
    background-color: var(--rl-c-superficie-suave);
}

/* --- Avisos -------------------------------------------------------------- */

.rl-app .rl-aviso {
    color: var(--rl-c-tinta-suave);
}

.rl-app .rl-aviso--erro {
    color: var(--rl-c-perigo);
}