/* ============================================================================
   PORTAL DE ASOCIADOS - Cascaron comun de las vistas rediseniadas
   2026-08-02 - David Caicedo
   ----------------------------------------------------------------------------
   Hero azul, breadcrumb de vidrio y neutralizacion de los contenedores
   heredados ( .registro-nube / fieldset ). Lo comparten el home
   ( css/bienvenida.css ) y el formulario de cotizacion ( css/cotizar.css ).

   Se activa con la clase body.portal-page, que cada vista enciende al cargar y
   js/panel.js apaga al navegar. Fuera de esas vistas no aplica nada.

   Nota: los tokens conservan el prefijo --home-* por historia; son los colores
   de marca del portal ( tbl_confport, via --portal-c1 / --portal-c2 ).
   ========================================================================== */

/* ------------------------------------------------------------------ Tokens */
body.portal-page {
    --home-c1: var(--portal-c1, #005e90);
    --home-c2: var(--portal-c2, #005e90);

    --home-700: color-mix(in srgb, var(--home-c1) 80%, #000);
    --home-500: var(--home-c1);
    --home-300: color-mix(in srgb, var(--home-c2) 70%, #fff);
    --home-glow: color-mix(in srgb, var(--home-c1) 40%, #8fd4ff);
    --home-deep: color-mix(in srgb, var(--home-c1) 55%, #000);
    --home-accent: color-mix(in srgb, var(--home-c1) 45%, #7cc4ff);

    --ink: #16324a;
    --muted: #5d7285;
    --page-bg: #f7f9fc;
    --card-bg: #ffffff;
    --line: #e5ecf3;

    --ease-spring: cubic-bezier(.34, 1.3, .64, 1);
    --ease-smooth: cubic-bezier(.4, 0, .2, 1);
    --shadow-card: 0 4px 20px rgba(22, 50, 74, .07);
    --shadow-card-hover: 0 18px 44px rgba(22, 50, 74, .16);

    /* Superficie del hero: identica a la del navbar */
    --home-hero-bg:
        radial-gradient(520px 460px at 12% -70px, var(--home-glow) 0%, transparent 60%),
        radial-gradient(420px 380px at 92% 300px, var(--home-deep) 0%, transparent 60%),
        linear-gradient(120deg, var(--home-700) 0%, var(--home-500) 45%, var(--home-300) 100%);

    /* Cuanto sube el hero para quedar detras del breadcrumb y del navbar */
    --home-hero-up: 210px;

    background: var(--page-bg) !important;
    color: var(--ink);
}

@supports not (color: color-mix(in srgb, #000, #fff)) {
    body.portal-page {
        --home-700: var(--home-c1);
        --home-300: var(--home-c2);
        --home-glow: rgba(255, 255, 255, .30);
        --home-deep: rgba(0, 0, 0, .25);
        --home-accent: var(--home-c2);
    }
}

/* La barra pasa a compartir exactamente la superficie del hero ( sus orbes
   propios sobran porque ya vienen en el degradado de abajo ).                */
body.portal-page .navbar-glass-wrap {
    background: var(--home-hero-bg);
    background-attachment: fixed;
}

body.portal-page .navbar-glass-bg {
    display: none;
}

/* ------------------------------------------------- Contenedores de la pagina
   El home va sobre fondo claro: se le quita el "papel" blanco que envuelve
   todas las vistas ( .registro-nube + fieldset ) para que el hero se vea.    */
body.portal-page .registro-nube {
    margin-top: 0;
    padding: 0 !important;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    /* el portal centra todo con align="center"; el home va alineado a la izquierda */
    text-align: left;
}

body.portal-page .registro-nube > .row {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 40px);
}

body.portal-page form > fieldset,
body.portal-page #seccioSaludo {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none;
}

body.portal-page #panel_central {
    padding-left: 0;
    padding-right: 0;
    text-align: left;
}

body.portal-page #panel_central .container {
    width: 100%;
    max-width: 1180px;
    padding-left: clamp(16px, 4vw, 40px);
    padding-right: clamp(16px, 4vw, 40px);
}

body.portal-page #panel_central .container > .row {
    margin-left: 0;
    margin-right: 0;
}

body.portal-page #panel_central .col-1-5 {
    display: none;
}

/* Los <br> sueltos que separaban los bloques sobran: el espaciado lo dan los
   margenes de las nuevas secciones. */
body.portal-page #panel_central .col-lg-11 > br {
    display: none;
}

body.portal-page #panel_central .col-md-12,
body.portal-page #panel_central .col-lg-11,
body.portal-page #panel_central .container-fluid {
    width: 100%;
    max-width: 100%;
    float: none;
    padding-left: 0;
    padding-right: 0;
    text-align: left;
}

/* ============================================================= Breadcrumb ==
   Pildora de vidrio dentro del hero. El separador "/" de Bootstrap se
   reemplaza por un chevron de Font Awesome.                                  */
body.portal-page #miga_panel.breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    width: auto;
    max-width: 100%;
    flex-wrap: wrap;
    margin: 0 0 22px;
    padding: 6px 8px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(255, 255, 255, .14) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

body.portal-page #miga_panel.breadcrumb > li {
    display: flex;
    align-items: center;
}

body.portal-page #miga_panel.breadcrumb > li + li::before {
    content: "\f105";
    /* fa-angle-right */
    font-family: FontAwesome;
    padding: 0 3px;
    font-size: 14px;
    color: rgba(255, 255, 255, .45);
}

body.portal-page #miga_panel.breadcrumb > li > a {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, .82) !important;
    transition: background .18s ease, color .18s ease;
}

body.portal-page #miga_panel.breadcrumb > li > a:hover,
body.portal-page #miga_panel.breadcrumb > li > a:focus {
    background: rgba(255, 255, 255, .16);
    color: #fff !important;
    text-decoration: none;
}

/* Nivel actual: pildora blanca */
body.portal-page #miga_panel.breadcrumb > li > a.active,
body.portal-page #miga_panel.breadcrumb > li:last-child > a.miga-link {
    background: rgba(255, 255, 255, .92);
    color: var(--home-700) !important;
    box-shadow: 0 2px 8px rgba(10, 35, 60, .20);
}

/* ================================================================== Hero == */
body.portal-page .portal-hero {
    position: relative;
    padding-bottom: 30px;
    color: #fff;
}

/* Banda de color a sangre completa; sube por detras del breadcrumb y del
   navbar, y baja lo suficiente para que la primera tarjeta se le superponga. */
body.portal-page .portal-hero::before {
    content: "";
    position: absolute;
    top: calc(var(--home-hero-up) * -1);
    bottom: -110px;
    left: calc(50% - 50vw);
    width: 100vw;
    z-index: -1;
    background: var(--home-hero-bg);
    background-attachment: fixed;
    pointer-events: none;
}

body.portal-page .portal-hello {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0;
    font-size: clamp(26px, 3.6vw, 38px);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: #fff;
}

body.portal-page .portal-wave {
    display: inline-block;
    transform-origin: 70% 70%;
    animation: portal-wave 2.2s ease-in-out 1;
}

@keyframes portal-wave {
    0%, 100% { transform: rotate(0); }
    15% { transform: rotate(16deg); }
    30% { transform: rotate(-8deg); }
    45% { transform: rotate(14deg); }
    60% { transform: rotate(-4deg); }
    75% { transform: rotate(10deg); }
}

body.portal-page .portal-hello-sub {
    max-width: 580px;
    margin: 8px 0 0;
    font-size: 15.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .85);
}


/* ================================================================ Celular == */
@media (max-width: 767px) {

    body.portal-page {
        --home-hero-up: 190px;
    }

    body.portal-page #panel_central .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    body.portal-page .portal-hello {
        font-size: 24px;
    }

    body.portal-page .portal-hero::before {
        bottom: -90px;
    }
}

/* ====================================================== Movimiento reducido */
@media (prefers-reduced-motion: reduce) {

    body.portal-page .portal-wave {
        animation: none;
    }
}