/*
 * Estilos compartidos de Boleta de pago (identidad San Isidro / SIGET).
 *
 * Los tokens --c-* son los de la diseñadora (María José Farías Collini,
 * export siget-home-v2.html del rediseño de SIGET). No cambiar sus valores
 * acá: si cambia la paleta, cambia en el diseño.
 * Las páginas usan los alias semánticos de abajo (--primary, --muted, …).
 */

:root {
    /* ── Tokens de diseño SIGET ── */
    --c-sidebar: #1a4a2e;
    --c-sidebar-deep: #122e1d;
    --c-brand: #205c40;
    --c-mid: #2d6b47;
    --c-lime: #8dc63f;
    --c-lime-lt: #d4edbd;
    --c-lime-50: #f0f9e4;
    --c-amber: #e8a020;
    --c-amber-lt: #fdf3dd;
    --c-red: #c0392b;
    --c-red-lt: #fde8e6;
    --c-blue: #1d6fa4;
    --c-blue-lt: #e2f0fb;
    --c-purple: #6c3483;
    --c-purple-lt: #f3e8fb;
    --c-ink: #0f1f15;
    --c-ink7: #374840;
    --c-ink4: #6b7d72;
    --c-ink2: #a8bab0;
    --c-paper: #f4f7f4;
    --c-white: #ffffff;
    --c-border: #dde8e1;
    --c-bord2: #b5ccba;
    --sh: 0 1px 3px rgba(15, 31, 21, .06), 0 1px 8px rgba(15, 31, 21, .04);
    --shm: 0 4px 12px rgba(15, 31, 21, .09), 0 1px 4px rgba(15, 31, 21, .05);
    --shl: 0 8px 28px rgba(15, 31, 21, .12);

    /* ── Alias semánticos que usan las páginas ── */
    --bg: var(--c-paper);
    --card: var(--c-white);
    --text: var(--c-ink);
    --text-2: var(--c-ink7);
    --muted: var(--c-ink4);
    --past: var(--c-ink2);
    --border: var(--c-border);
    --border-2: var(--c-bord2);
    --primary: var(--c-brand);
    --primary2: var(--c-sidebar);
    --primary-mid: var(--c-mid);
    --primary-soft: var(--c-lime-50);
    --ok-bg: var(--c-lime-50);
    --ok-text: var(--c-sidebar);
    --warn-bg: var(--c-amber-lt);
    --warn-text: #7a4f08;          /* ámbar oscurecido: el --c-amber no da contraste como texto */
    --info-bg: var(--c-blue-lt);
    --info-text: var(--c-blue);
    --shadow-sm: var(--shm);
    --shadow: var(--shl);
    --radius: 16px;

    /* Alias del inicio (index.php) */
    --verde-inst: var(--c-brand);
    --verde: var(--c-brand);
    --verde-osc: var(--c-sidebar);
    --verde-claro: var(--c-lime-50);
}

/* ── Base ── */
body {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

/* ── Cabecera: volver al inicio ── */
.volver-inicio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 999px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.volver-inicio:hover,
.volver-inicio:focus-visible {
    background: rgba(255, 255, 255, .14);
    outline: none;
}

/* ── Cabecera de las páginas internas: barra fina + título sobre fondo claro ── */
.barra-sitio { background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-sidebar) 100%); }
.barra-sitio .container { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; }
.barra-sitio img { height: 40px; width: auto; display: block; }
.encabezado { text-align: center; padding: 28px 0 20px; }
.encabezado h1 {
    margin: 0;
    color: var(--c-sidebar);
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 800;
    letter-spacing: -.2px;
    line-height: 1.2;
}
.encabezado p { margin: 8px auto 0; max-width: 640px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.encabezado .titulo { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0; }
.encabezado .titulo .icono {
    width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%;
    background: var(--c-lime-50); display: flex; align-items: center; justify-content: center;
}
.encabezado .titulo .icono svg { width: 24px; height: 24px; stroke: var(--c-brand); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 560px) {
    .barra-sitio img { height: 34px; }
    .encabezado { padding: 20px 0 14px; }
    .encabezado .titulo .icono { display: none; }
}

/* ── Logo + nombre del sitio en la barra de las páginas internas, como en el inicio (22/10/2026) ── */
.barra-sitio .marca, .barra-consulta .marca { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.barra-sitio .marca .seccion, .barra-consulta .marca .seccion {
    padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .35);
    color: #fff; font-size: 16px; font-weight: 700; letter-spacing: -.1px; white-space: nowrap;
}
@media (max-width: 560px) {
    .barra-sitio .marca, .barra-consulta .marca { gap: 10px; }
    .barra-sitio .marca .seccion, .barra-consulta .marca .seccion { padding-left: 10px; font-size: 14px; }
}
/* consulta en celular: dos botones a la derecha, no entra el nombre */
@media (max-width: 430px) { .barra-consulta .marca .seccion { display: none; } }