/* =========================================================
   ASECONAPDIS — PORTAL DE ASOCIADOS
   Hoja de estilos principal
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

:root {

    --color-fondo: #121212;

    --color-superficie: #1e1e1e;

    --color-superficie-secundaria: #252525;

    --color-primario: #ea5207;

    --color-primario-hover: #ff6818;

    --color-azul: #182951;

    --color-azul-claro: #2f5496;

    --color-texto: #ffffff;

    --color-texto-secundario: #d0d0d0;

    --color-texto-ayuda: #a8a8a8;

    --color-borde: #444444;

    --color-borde-suave: #333333;

    --color-exito: #2e7d32;

    --color-info: #2f5496;

    --radio: 8px;

    --sombra:
        0 4px 18px rgba(0, 0, 0, 0.35);

}


/* =========================================================
   REINICIO BÁSICO
   ========================================================= */

* {

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    background-color:
        var(--color-fondo);

    color:
        var(--color-texto);

    font-family:
        Tahoma,
        Arial,
        sans-serif;

    font-size:
        16px;

    line-height:
        1.5;

}


/* =========================================================
   ACCESIBILIDAD — ENLACE "SALTAR AL CONTENIDO"
   ========================================================= */

.skip-link {

    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;

}


/* =========================================================
   CONTENEDOR
   ========================================================= */

.portal-container {

    width: 100%;

    max-width:
        900px;

    margin:
        0 auto;

    padding-left:
        20px;

    padding-right:
        20px;

}


/* =========================================================
   ENCABEZADO
   ========================================================= */

.portal-header {

    background-color:
        var(--color-azul);

    border-bottom:
        3px solid var(--color-primario);

}


.portal-header .portal-container {

    display: flex;

    align-items: center;

    min-height:
        90px;

}


.brand {

    padding:
        15px 0;

}


.brand-name {

    font-size:
        28px;

    font-weight:
        bold;

    letter-spacing:
        0.5px;

}


.brand-subtitle {

    margin-top:
        2px;

    color:
        var(--color-texto-secundario);

    font-size:
        15px;

}


/* =========================================================
   CONTENIDO PRINCIPAL
   ========================================================= */

.portal-main {

    min-height:
        calc(100vh - 160px);

    padding-top:
        35px;

    padding-bottom:
        35px;

}


/* =========================================================
   TARJETA PRINCIPAL
   ========================================================= */

.access-card {

    background-color:
        var(--color-superficie);

    border:
        1px solid var(--color-borde);

    border-radius:
        var(--radio);

    box-shadow:
        var(--sombra);

    overflow:
        hidden;

}


.access-header {

    padding:
        28px 30px 24px;

    background-color:
        var(--color-azul);

    border-bottom:
        1px solid var(--color-borde);

}


.access-header h1 {

    margin:
        0 0 8px;

    font-size:
        25px;

    line-height:
        1.25;

}


.access-header p {

    margin:
        0;

    color:
        var(--color-texto-secundario);

}


.access-body {

    padding:
        30px;

}


/* =========================================================
   TÍTULOS DE SECCIÓN
   ========================================================= */

.section-title {

    margin:
        0 0 8px;

    font-size:
        22px;

    line-height:
        1.3;

}


.section-description {

    margin:
        0 0 24px;

    color:
        var(--color-texto-secundario);

}


/* =========================================================
   SECCIONES OCULTAS
   ========================================================= */

.seccion-oculta {

    display:
        none;

}


/* =========================================================
   FORMULARIOS
   ========================================================= */

.form-group {

    margin-bottom:
        20px;

}


.form-group label,
.campo-perfil label {

    display:
        block;

    margin-bottom:
        7px;

    font-weight:
        bold;

    color:
        var(--color-texto);

}


.form-input,
.campo-perfil input,
.campo-perfil select,
.campo-perfil textarea {

    width:
        100%;

    padding:
        11px 13px;

    background-color:
        #151515;

    color:
        var(--color-texto);

    border:
        1px solid var(--color-borde);

    border-radius:
        6px;

    font-family:
        Tahoma,
        Arial,
        sans-serif;

    font-size:
        16px;

    line-height:
        1.4;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;

}


.form-input:focus,
.campo-perfil input:focus,
.campo-perfil select:focus,
.campo-perfil textarea:focus {

    outline:
        none;

    border-color:
        var(--color-primario);

    box-shadow:
        0 0 0 2px rgba(234, 82, 7, 0.2);

}


.form-input::placeholder {

    color:
        #777777;

}


.form-help {

    margin-top:
        6px;

    color:
        var(--color-texto-ayuda);

    font-size:
        14px;

}


/* =========================================================
   PIN
   ========================================================= */

.pin-input {

    max-width:
        300px;

    letter-spacing:
        5px;

    text-align:
        center;

    font-weight:
        bold;

}


/* =========================================================
   BOTONES
   ========================================================= */

button {

    font-family:
        Tahoma,
        Arial,
        sans-serif;

}


.btn-primary,
.btn-secondary {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        46px;

    padding:
        10px 20px;

    border-radius:
        6px;

    font-size:
        16px;

    font-weight:
        bold;

    cursor:
        pointer;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        opacity 0.2s ease;

}


.btn-primary {

    background-color:
        var(--color-primario);

    color:
        #ffffff;

    border:
        1px solid var(--color-primario);

}


.btn-primary:hover {

    background-color:
        var(--color-primario-hover);

    border-color:
        var(--color-primario-hover);

}


.btn-secondary {

    margin-top:
        12px;

    background-color:
        transparent;

    color:
        var(--color-texto);

    border:
        1px solid var(--color-borde);

}


.btn-secondary:hover {

    background-color:
        var(--color-superficie-secundaria);

    border-color:
        #666666;

}


button:disabled {

    cursor:
        not-allowed;

    opacity:
        0.6;

}


/* =========================================================
   MENSAJES
   ========================================================= */

.form-message {

    min-height:
        24px;

    margin:
        12px 0;

}


.message-box {

    margin:
        0 0 22px;

    padding:
        16px 18px;

    border-left:
        4px solid;

    border-radius:
        5px;

}


.message-box p {

    margin:
        5px 0 0;

}


.message-title {

    font-weight:
        bold;

}


.message-success {

    background-color:
        rgba(46, 125, 50, 0.16);

    border-left-color:
        #4caf50;

}


.message-info {

    background-color:
        rgba(47, 84, 150, 0.18);

    border-left-color:
        #5d86d4;

}


/* =========================================================
   PERFIL DEL ASOCIADO — ACORDEÓN
   ========================================================= */

.perfil-acordeon {

    width:
        100%;

    margin-top:
        25px;

}


/* =========================================================
   ELEMENTO INDIVIDUAL DEL ACORDEÓN
   ========================================================= */

.acordeon-item {

    position:
        relative;

    margin-bottom:
        14px;

    background-color:
        #202020;

    border:
        1px solid #3f3f3f;

    border-radius:
        8px;

    overflow:
        hidden;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.25);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;

}


.acordeon-item:last-child {

    margin-bottom:
        0;

}


/* =========================================================
   FRANJA INSTITUCIONAL
   ========================================================= */

.acordeon-item::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        0;

    bottom:
        0;

    width:
        5px;

    background-color:
        var(--color-primario);

    z-index:
        2;

}


/* =========================================================
   ENCABEZADO DEL ACORDEÓN
   ========================================================= */

.acordeon-item h3 {

    margin:
        0;

}


.acordeon-boton {

    position:
        relative;

    width:
        100%;

    min-height:
        64px;

    padding:
        15px 18px 15px 23px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    background:
        linear-gradient(
            90deg,
            #252525 0%,
            #202020 100%
        );

    color:
        var(--color-texto);

    border:
        0;

    text-align:
        left;

    font-size:
        17px;

    font-weight:
        bold;

    cursor:
        pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease;

}


.acordeon-boton:hover {

    background:
        linear-gradient(
            90deg,
            #303030 0%,
            #252525 100%
        );

    color:
        #ffffff;

}


.acordeon-boton:focus {

    outline:
        2px solid var(--color-primario);

    outline-offset:
        -2px;

}


.acordeon-boton[aria-expanded="true"] {

    background:
        linear-gradient(
            90deg,
            var(--color-azul) 0%,
            #1d315f 100%
        );

    color:
        #ffffff;

}


/* =========================================================
   TEXTO DEL ACORDEÓN
   ========================================================= */

.acordeon-boton span:first-child {

    display:
        flex;

    align-items:
        center;

    min-width:
        0;

}


.acordeon-boton span:first-child::before {

    content:
        "";

    display:
        inline-block;

    width:
        7px;

    height:
        7px;

    margin-right:
        12px;

    background-color:
        var(--color-primario);

    border-radius:
        50%;

    flex:
        0 0 auto;

}


.acordeon-boton[aria-expanded="true"]
span:first-child::before {

    box-shadow:
        0 0 0 4px rgba(234, 82, 7, 0.16);

}


/* =========================================================
   ICONO + / −
   ========================================================= */

.acordeon-icono {

    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        32px;

    height:
        32px;

    background-color:
        transparent;

    color:
        var(--color-primario);

    border:
        1px solid var(--color-primario);

    border-radius:
        50%;

    font-size:
        21px;

    line-height:
        1;

    font-weight:
        normal;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;

}


.acordeon-boton:hover .acordeon-icono {

    background-color:
        var(--color-primario);

    color:
        #ffffff;

}


.acordeon-boton[aria-expanded="true"]
.acordeon-icono {

    background-color:
        var(--color-primario);

    color:
        #ffffff;

    transform:
        rotate(180deg);

}


/* =========================================================
   PANEL DEL ACORDEÓN
   ========================================================= */

.acordeon-panel {

    padding:
        24px 22px 22px;

    background:
        linear-gradient(
            180deg,
            #191919 0%,
            #171717 100%
        );

    border-top:
        1px solid #3d3d3d;

}


/* =========================================================
   CAMPOS DEL PERFIL
   ========================================================= */

.campo-perfil {

    margin-bottom:
        18px;

}


.campo-perfil:last-child {

    margin-bottom:
        0;

}


.campo-perfil input[readonly] {

    background-color:
        #252525;

    color:
        #bcbcbc;

    cursor:
        not-allowed;

}


.campo-perfil textarea {

    resize:
        vertical;

    min-height:
        90px;

}


.campo-perfil select {

    appearance:
        auto;

}


/* =========================================================
   CAMPOS PROTEGIDOS
   ========================================================= */

#panelDatosProtegidos .campo-perfil {

    position:
        relative;

}


#panelDatosProtegidos .campo-perfil input[readonly] {

    border-color:
        #3f4c68;

}


#panelDatosProtegidos .campo-perfil label {

    color:
        #e1e1e1;

}


/* =========================================================
   DATOS MODIFICABLES
   ========================================================= */

#panelDatosModificables .campo-perfil input:not([readonly]),
#panelDatosModificables .campo-perfil select,
#panelDatosModificables .campo-perfil textarea {

    border-color:
        #4a4a4a;

}


#panelDatosModificables .campo-perfil input:not([readonly]):hover,
#panelDatosModificables .campo-perfil select:hover,
#panelDatosModificables .campo-perfil textarea:hover {

    border-color:
        #666666;

}


/* =========================================================
   BENEFICIARIOS
   ========================================================= */

.beneficiario-bloque {

    position:
        relative;

    margin-bottom:
        22px;

    padding:
        20px 20px 18px;

    background:
        linear-gradient(
            135deg,
            #222222 0%,
            #1d1d1d 100%
        );

    border:
        1px solid #404040;

    border-left:
        4px solid var(--color-azul-claro);

    border-radius:
        7px;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.2);

}


.beneficiario-bloque:last-child {

    margin-bottom:
        0;

}


.beneficiario-bloque h4 {

    margin:
        0 0 20px;

    padding:
        0 0 11px;

    border-bottom:
        1px solid #414141;

    color:
        #ffffff;

    font-size:
        17px;

    line-height:
        1.3;

}


.beneficiario-bloque h4::before {

    content:
        "";

    display:
        inline-block;

    width:
        8px;

    height:
        8px;

    margin-right:
        9px;

    background-color:
    var(--color-primario);

    border-radius:
        50%;

}


/* =========================================================
   ACCIONES DEL PERFIL
   ========================================================= */

#mensaje-actualizacion {

    margin-top:
        24px;

}


#btnGuardarPerfil {

    margin-top:
        4px;

}


#btnCerrarSesion {

    margin-left:
        8px;

}


/* =========================================================
   AVISO DE SEGURIDAD
   ========================================================= */

.security-box {

    margin-top:
        30px;

    padding:
        18px 20px;

    background-color:
        #181818;

    border:
        1px solid var(--color-borde);

    border-left:
        4px solid var(--color-primario);

    border-radius:
        6px;

}


.security-title {

    margin-bottom:
        6px;

    font-weight:
        bold;

}


.security-text {

    color:
        var(--color-texto-secundario);

    font-size:
        14px;

}


/* =========================================================
   PIE DE PÁGINA
   ========================================================= */

.portal-footer {

    padding:
        25px 0;

    background-color:
        #101010;

    border-top:
        1px solid var(--color-borde);

    color:
        var(--color-texto-ayuda);

    text-align:
        center;

    font-size:
        13px;

}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 700px) {

    .portal-container {

        padding-left:
            15px;

        padding-right:
            15px;

    }


    .portal-main {

        padding-top:
            20px;

        padding-bottom:
            20px;

    }


    .access-header {

        padding:
            23px 20px 20px;

    }


    .access-header h1 {

        font-size:
            22px;

    }


    .access-body {

        padding:
            22px 20px;

    }


    .brand-name {

        font-size:
            24px;

    }


    .acordeon-item {

        margin-bottom:
            12px;

    }


    .acordeon-boton {

        min-height:
            58px;

        padding:
            13px 15px 13px 20px;

        font-size:
            16px;

    }


    .acordeon-panel {

        padding:
            20px 16px;

    }


    .beneficiario-bloque {

        padding:
            17px 15px;

    }

}


/* =========================================================
   RESPONSIVE — TELÉFONO
   ========================================================= */

@media (max-width: 480px) {

    body {

        font-size:
            15px;

    }


    .portal-header .portal-container {

        min-height:
            75px;

    }


    .brand-name {

        font-size:
            21px;

    }


    .brand-subtitle {

        font-size:
            13px;

    }


    .access-header h1 {

        font-size:
            20px;

    }


    .access-body {

        padding:
            20px 15px;

    }


    .section-title {

        font-size:
            20px;

    }


    .btn-primary,
    .btn-secondary {

        width:
            100%;

    }


    #btnCerrarSesion {

        margin-left:
            0;

    }


    .acordeon-item {

        border-radius:
            7px;

    }


    .acordeon-boton {

        min-height:
            56px;

        padding:
            12px 13px 12px 18px;

        font-size:
            15px;

    }


    .acordeon-boton span:first-child::before {

        width:
            6px;

        height:
            6px;

        margin-right:
            9px;

    }


    .acordeon-icono {

        width:
            28px;

        height:
            28px;

        font-size:
            18px;

    }


    .acordeon-panel {

        padding:
            18px 13px;

    }


    .beneficiario-bloque {

        padding:
            15px 12px;

    }


    .beneficiario-bloque h4 {

        font-size:
            16px;

    }

}


/* =========================================================
   FIN
   ========================================================= */