/* ======================================================================
   Portal de Transparencia — identidad visual
   A partir del diseño entregado el 19/10/2026 (transparencia.html).

   Qué cubre: la franja superior, el encabezado, la portada de inicio, las
   tarjetas de acceso y el pie. El resto de las pantallas sigue con
   Bootstrap; lo único que heredan de aquí es la tipografía y los colores
   de marca, que se redefinen al final de este archivo.

   Rendición de Cuentas tiene su propio sistema en rendicion-cuentas.css y
   no se toca: todo lo de aquí va bajo clases con prefijo propio.
   ====================================================================== */

:root {
    --azul-1: #0A2C72;
    --azul-2: #061D55;
    --azul-3: #03123B;
    --cian: #3FC1E0;
    --cian-2: #1EA7E0;
    --rosa: #E5157E;
    --rosa-2: #B80F63;
    --p-fondo: #F4F7FC;
    --p-borde: #E1E7F1;
    --p-texto: #0B1A4A;
    --p-texto-suave: #55627F;
}

body {
    font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-weight: 500;
    line-height: 1.55;
    color: var(--p-texto);
    background: var(--p-fondo);
}

/* ──────────────────────────────────────────────────────────────────────
   Footer pegajoso.

   Queda al fondo cuando la página es corta y se desplaza con el contenido
   cuando es larga, así nunca tapa la última fila. El flex-shrink:0 es
   indispensable: app.css pone body en flex column con height:100%, y sin
   él un contenido más alto que la ventana se comprimiría.
   ────────────────────────────────────────────────────────────────────── */
#app {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    min-height: 100vh;
}

main.site-main { flex: 1 0 auto; }
footer.site-footer { flex-shrink: 0; width: 100%; }

/* ── Rejilla base ──────────────────────────────────────────────────── */
.portal-wrap {
    width: min(1280px, 100% - 3rem);
    margin-inline: auto;
}

.portal-saltar {
    position: absolute;
    left: 1rem;
    top: -60px;
    z-index: 100;
    padding: .6rem 1rem;
    border-radius: 8px;
    background: #fff;
    color: var(--azul-2);
    font-weight: 700;
    text-decoration: none;
}

.portal-saltar:focus { top: 1rem; }

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

/* ── Franja superior ───────────────────────────────────────────────── */
.portal-franja {
    background: linear-gradient(90deg, var(--rosa-2), var(--rosa) 50%, var(--rosa-2));
    color: #fff;
    text-align: center;
    font-size: .88rem;
    font-weight: 600;
    padding: .45rem 1rem;
    padding-top: calc(.45rem + env(safe-area-inset-top, 0px));
}

/* ── Encabezado ────────────────────────────────────────────────────── */
.portal-encabezado {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: linear-gradient(90deg, var(--azul-3), var(--azul-2) 45%, var(--azul-1));
    color: #fff;
    box-shadow: 0 2px 14px rgba(3, 18, 59, .3);
}

.portal-encabezado .portal-wrap {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: 88px;
}

.portal-marca img {
    height: 58px;
    width: auto;
    display: block;
}

.portal-menu {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .3rem;
}

.portal-menu > a,
.portal-menu .portal-enlace {
    position: relative;
    padding: .6rem .8rem;
    text-decoration: none;
    font-weight: 600;
    font-size: .92rem;
    color: rgba(255, 255, 255, .9);
    white-space: nowrap;
    border-radius: 8px;
    cursor: pointer;
    background: none;
    border: 0;
}

.portal-menu > a:hover,
.portal-menu .portal-enlace:hover {
    color: #fff;
    background: rgba(255, 255, 255, .08);
}

.portal-menu .activo { color: #fff; }

.portal-menu .activo::after {
    content: "";
    position: absolute;
    left: .8rem;
    right: .8rem;
    bottom: .1rem;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--cian) 0 50%, var(--rosa) 50% 100%);
}

.portal-acceso {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    height: 46px;
    padding: 0 1.2rem;
    margin-left: 1rem;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .25);
}

.portal-acceso:hover {
    background: rgba(255, 255, 255, .16);
    border-color: var(--cian);
    color: #fff;
}

.portal-acceso svg { width: 20px; height: 20px; }

.portal-btn-menu {
    display: none;
    margin-left: auto;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    place-items: center;
}

.portal-btn-menu svg { width: 28px; height: 28px; }

/* El menú de administración conserva el desplegable de Bootstrap, pero
   con los colores del encabezado nuevo. */
.portal-menu .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.portal-menu .dropdown-menu {
    min-width: 230px;
    border: 1px solid var(--p-borde);
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(3, 18, 59, .22);
    padding: .4rem;
}

.portal-menu .dropdown-item {
    border-radius: 8px;
    font-weight: 600;
    font-size: .9rem;
    padding: .55rem .7rem;
    cursor: pointer;
}

/* ── Portada ───────────────────────────────────────────────────────── */
.portada {
    position: relative;
    overflow: hidden;
    background: #fff;
    border-bottom: 1px solid var(--p-borde);
}

.portada::before {
    content: "";
    position: absolute;
    left: -60px;
    top: -40px;
    width: 260px;
    height: 380px;
    opacity: .06;
    pointer-events: none;
    background: repeating-linear-gradient(135deg, var(--azul-1) 0 18px, transparent 18px 40px);
}

.portada .portal-wrap {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 2rem;
    min-height: 340px;
}

.portada-txt { padding: 2.5rem 0; }

.portada h1 {
    margin: 0;
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 900;
    line-height: .98;
    letter-spacing: -.02em;
    color: var(--azul-2);
}

.portada h1 span { display: block; color: var(--rosa); }

.portada .inst {
    margin: .7rem 0 0;
    font-size: clamp(1.15rem, 2vw, 1.55rem);
    font-weight: 600;
    color: var(--azul-1);
}

.portada .barra { display: flex; gap: 5px; margin: 1.2rem 0; }
.portada .barra i { height: 5px; border-radius: 3px; }
.portada .barra i:first-child { width: 48px; background: var(--cian-2); }
.portada .barra i:last-child { width: 32px; background: var(--rosa); }

.portada p.lead {
    margin: 0;
    max-width: 40ch;
    font-size: 1.12rem;
    font-weight: 500;
    color: var(--p-texto-suave);
}

.portada-foto {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 50%;
}

.portada-foto .img {
    position: absolute;
    inset: 0;
    background: url("../img/portada.webp") center 40% / cover no-repeat;
    border-radius: 340px 0 0 340px / 100% 0 0 100%;
}

.portada-foto::before {
    content: "";
    position: absolute;
    inset: 0 0 0 -14px;
    border-radius: 360px 0 0 360px / 100% 0 0 100%;
    background: linear-gradient(180deg, var(--cian-2), var(--rosa));
}

.portada-foto::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 340px 0 0 340px / 100% 0 0 100%;
    background: linear-gradient(90deg, rgba(10, 44, 114, .25), transparent 40%);
}

/* ── Tarjetas de acceso ────────────────────────────────────────────── */
.portal-inicio { padding: 2rem 0 3rem; }

.accesos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
}

.tarjeta {
    display: grid;
    grid-template-columns: auto 1px minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.3rem;
    padding: 1.3rem 1.5rem;
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border: 1px solid var(--p-borde);
    box-shadow: 0 6px 18px rgba(6, 29, 85, .05);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}

/* Sólo las tarjetas que llevan a algún sitio se comportan como enlace.
   Las demás son informativas: sin elevación al pasar el cursor y sin
   flecha, para no prometer una navegación que no existe. */
a.tarjeta:hover {
    transform: translateY(-3px);
    border-color: rgba(30, 167, 224, .5);
    box-shadow: 0 16px 34px rgba(6, 29, 85, .12);
}

.tarjeta.ancha {
    grid-column: 1 / -1;
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.t-icono {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    box-shadow: 0 10px 22px rgba(6, 29, 85, .2);
}

.t-icono svg { width: 40px; height: 40px; }
.ancha .t-icono { width: 70px; height: 70px; }
.ancha .t-icono svg { width: 34px; height: 34px; }

.t-azul { background: radial-gradient(circle at 30% 25%, #1E4FA8, var(--azul-2)); }
.t-rosa { background: radial-gradient(circle at 30% 25%, #F0368E, var(--rosa-2)); }

.t-sep { width: 1px; height: 72px; background: var(--p-borde); }

.tarjeta h2 {
    margin: 0 0 .3rem;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--azul-2);
}

.tarjeta p {
    margin: 0;
    color: var(--p-texto-suave);
    font-size: .95rem;
}

.t-ir {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #EEF2F8;
    color: var(--azul-2);
    transition: background .15s, color .15s, transform .15s;
}

.t-ir svg { width: 20px; height: 20px; }

a.tarjeta:hover .t-ir {
    background: var(--rosa);
    color: #fff;
    transform: translateX(2px);
}

/* ── Pie ───────────────────────────────────────────────────────────── */
.portal-pie {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, var(--azul-3), var(--azul-2) 50%, var(--azul-1));
    color: rgba(255, 255, 255, .9);
    text-align: center;
    padding: 1.8rem 1rem calc(1.8rem + env(safe-area-inset-bottom, 0px));
    font-size: .9rem;
}

.portal-pie::before {
    content: "";
    position: absolute;
    left: -30px;
    bottom: -40px;
    width: 260px;
    height: 160px;
    opacity: .14;
    pointer-events: none;
    background: repeating-linear-gradient(45deg, var(--cian) 0 14px, transparent 14px 34px);
}

.portal-pie p { position: relative; margin: .2rem 0; }

.portal-pie .barra-pie {
    display: block;
    width: 110px;
    height: 4px;
    margin: .9rem auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--cian-2) 0 50%, var(--rosa) 50% 100%);
}

/* ── Adaptación a pantallas estrechas ──────────────────────────────── */
@media (max-width: 1180px) {
    .portal-btn-menu { display: grid; }
    .portal-menu { display: none; }

    .portal-menu.abierto {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        position: absolute;
        left: 1rem;
        right: 1rem;
        top: calc(100% + .5rem);
        padding: .8rem;
        border-radius: 14px;
        background: var(--azul-2);
        border: 1px solid rgba(63, 193, 224, .35);
        box-shadow: 0 20px 50px rgba(3, 18, 59, .4);
        z-index: 1031;
    }

    .portal-menu.abierto > a,
    .portal-menu.abierto .portal-enlace { padding: .8rem .9rem; }

    .portal-menu.abierto .activo::after { left: .9rem; right: auto; width: 40px; }
    .portal-menu.abierto .portal-acceso { margin: .5rem 0 0; justify-content: center; }
    .portal-menu.abierto .dropdown { margin-top: .4rem; }
    .portal-encabezado .portal-wrap { position: relative; }
}

@media (max-width: 900px) {
    .portada .portal-wrap { grid-template-columns: 1fr; min-height: 0; }

    .portada-foto {
        position: relative;
        width: auto;
        height: 220px;
        margin: 0 -1.5rem;
    }

    .portada-foto .img,
    .portada-foto::after { border-radius: 0; }
    .portada-foto::before { inset: -8px 0 0; border-radius: 0; }
    .portada-txt { padding: 2rem 0 1.5rem; }
    .accesos { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .portal-wrap { width: calc(100% - 2rem); }
    .portal-marca img { height: 48px; }
    .portada-foto { margin: 0 -1rem; height: 180px; }

    .tarjeta,
    .tarjeta.ancha { grid-template-columns: auto minmax(0, 1fr); gap: 1rem; padding: 1.1rem; }

    .t-sep,
    .t-ir { display: none; }

    .t-icono,
    .ancha .t-icono { width: 56px; height: 56px; }

    .t-icono svg,
    .ancha .t-icono svg { width: 28px; height: 28px; }

    .tarjeta h2 { font-size: 1.05rem; }
    .tarjeta p { font-size: .88rem; }
}

@media (prefers-reduced-motion: reduce) {
    .tarjeta,
    .t-ir { transition: none; }
}

/* ──────────────────────────────────────────────────────────────────────
   Margen lateral de las pantallas interiores.

   app.css anula con !important el relleno de .container y .container-fluid
   («Eliminar márgenes de contenedores Bootstrap»), y gana incluso a las
   páginas que escriben px-4, porque ahí la especificidad empata y decide
   el orden de carga. El resultado es texto pegado al borde de la pantalla.

   Antes lo tapaba un px-3 en <main>. Se arregla aquí, en la raíz, con el
   mismo margen que usa .portal-wrap, para que todo el portal respire
   igual. Rendición de Cuentas no usa contenedores de Bootstrap, así que
   su diseño propio no se ve afectado.
   ────────────────────────────────────────────────────────────────────── */
main.site-main .container,
main.site-main .container-fluid {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

/* .container es el contenedor centrado y acotado de Bootstrap; app.css le
   quitó el tope y en un monitor ancho las pantallas de lectura
   (Bienvenida, Comité, Avisos de Privacidad) estiraban el texto de lado a
   lado. Se le devuelve el tope de la portada. .container-fluid se queda a
   ancho completo, que es para lo que lo usan las tablas. */
main.site-main > .container {
    max-width: 1280px !important;
    margin-inline: auto !important;
}

@media (max-width: 560px) {
    main.site-main .container,
    main.site-main .container-fluid {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* ──────────────────────────────────────────────────────────────────────
   Colores de marca.

   El resto del portal usa estas clases de Bootstrap desde antes. Se
   redefinen aquí para que las pantallas interiores sigan la paleta nueva
   en lugar de quedarse con el azul anterior (#13286b) junto a un
   encabezado que ya cambió.
   ────────────────────────────────────────────────────────────────────── */
.bg-cobach-blue { background-color: var(--azul-2) !important; }
.bg-cobach-red { background-color: var(--rosa-2) !important; }
.bg-cobach-light { background-color: var(--p-fondo) !important; }
.text-cobach-blue { color: var(--azul-2) !important; }