/* =====================================================
   AVISOS INSTITUCIONALES
   Diseño general
   ===================================================== */


/* =====================================================
   1. ESPACIO DEL AVISO EN EL HEADER
   ===================================================== */

/*
 * Reserva solamente el espacio de la pastilla.
 *
 * El contenido desplegado no modifica la distribución
 * del resto de los elementos del header.
 */

.header-aviso-institucional {

    position: relative;

    flex: 0 0 210px;

    width: 210px;
    min-width: 210px;
    max-width: 210px;

    height: 42px;

    margin: 0 18px;

}


/* =====================================================
   2. CONTENEDOR PRINCIPAL
   ===================================================== */

.cfte-avisos {

    position: absolute;

    top: 0;
    left: 0;

    width: 210px;

    box-sizing: border-box;

    z-index: 1000;

}


/* =====================================================
   3. BARRA SUPERIOR
   ===================================================== */

/*
 * La barra permanece fija al abrir y cerrar.
 *
 * Se divide en dos zonas:
 *
 * izquierda → icono + título + contador
 * derecha   → botón + / -
 */

.cfte-avisos-control {

    position: relative;

    width: 210px;
    height: 42px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        30px;

    align-items: center;

    padding: 0 7px 0 13px;

    background: #F4F7FB;

    border: 1px solid #DCE6F0;

    border-radius: 13px;

    box-shadow:
        0 5px 16px rgba(23,55,94,.08);

    box-sizing: border-box;

    z-index: 5;

}


/* =====================================================
   4. TÍTULO DE LA BARRA
   ===================================================== */

.cfte-avisos-minimizado {

    min-width: 0;

    display: flex;

    align-items: center;

    gap: 5px;

    color: #17375E;

    font-size: 12px;

    font-weight: 700;

    white-space: nowrap;

    overflow: hidden;

}


/*
 * Icono de megáfono.
 */

.cfte-avisos-minimizado > i {

    flex-shrink: 0;

    color: #0075A9;

    font-size: 13px;

}


/* =====================================================
   5. CONTADOR
   ===================================================== */

.cfte-avisos-contador {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    min-width: 20px;
    height: 20px;

    padding: 0 5px;

    margin-left: 1px;

    border-radius: 50px;

    background: #DF5929;

    color: #FFFFFF;

    font-size: 10px;

    font-weight: 800;

    line-height: 1;

    box-sizing: border-box;

    box-shadow:
        0 2px 7px rgba(223,89,41,.25);

}


/* =====================================================
   6. BOTÓN + / -
   ===================================================== */

.cfte-avisos-toggle {

    width: 30px;
    height: 30px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 30px;

    margin-left: 5px;

    padding: 0;

    border: none;

    border-radius: 9px;

    background: transparent;

    color: #17375E;

    cursor: pointer;

    font-size: 13px;

    box-sizing: border-box;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;

}


.cfte-avisos-toggle:hover {

    background: #E4F0F6;

    color: #0075A9;

    transform: scale(1.06);

}


/*
 * Animación del icono + / -
 */

.cfte-avisos-toggle i {

    transition:
        transform .25s ease;

}


/* =====================================================
   7. CONTENIDO DESPLEGABLE
   ===================================================== */

.cfte-avisos-contenido {

    width: 360px;

    margin-top: 0;

    background: #FFFFFF;

    border: 1px solid #DCE6F0;

    border-top: none;

    border-radius: 0 0 15px 15px;

    box-shadow:
        0 14px 32px rgba(23,55,94,.14);

    box-sizing: border-box;

    overflow: hidden;

    transform-origin: top center;

    animation:
        avisosDesplegar .28s ease;

}


/* =====================================================
   8. ANIMACIÓN DE APERTURA
   ===================================================== */

@keyframes avisosDesplegar {

    from {

        opacity: 0;

        transform:
            translateY(-8px)
            scaleY(.96);

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scaleY(1);

    }

}


/* =====================================================
   9. AVISO INDIVIDUAL
   ===================================================== */

.cfte-aviso {

    position: relative;

    width: 100%;

    padding: 14px 18px 14px 18px;

    background: #FFFFFF;

    border-left: none;

    box-sizing: border-box;

    transition:
        background .2s ease,
        transform .2s ease;

}


/*
 * Línea azul institucional muy sutil.
 */

.cfte-aviso::before {

    content: "";

    position: absolute;

    top: 12px;
    bottom: 12px;

    left: 0;

    width: 3px;

    border-radius: 0 4px 4px 0;

    background: #0075A9;

}


/*
 * Hover sobre el aviso.
 */

.cfte-aviso:hover {

    background: #F8FBFD;

}


/* =====================================================
   10. ICONO DEL AVISO
   ===================================================== */

/*
 * El icono se crea mediante CSS para no tener que
 * modificar el HTML actual.
 */

.cfte-aviso h3 {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;

    margin: 0 0 5px 0;

    font-size: 14px;

    line-height: 1.25;

    color: #17375E;

    font-weight: 800;

}


/*
 * Círculo con icono de documento.
 */

.cfte-aviso h3::before {

    content: "\f15c";

    width: 28px;
    height: 28px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 28px;

    border-radius: 9px;

    background: #E8F3F8;

    color: #0075A9;

    font-family:
        "Font Awesome 6 Free";

    font-weight: 900;

    font-size: 13px;

}


/* =====================================================
   11. ETIQUETAS DE TIPO
   ===================================================== */

/*
 * Cada aviso muestra visualmente su categoría.
 */

.cfte-aviso h3::after {

    content: "Información";

    display: inline-flex;

    align-items: center;

    padding: 4px 8px;

    margin-left: auto;

    border-radius: 50px;

    background: #E8F3F8;

    color: #0075A9;

    font-size: 10px;

    font-weight: 700;

    line-height: 1;

}


/* Importante */

.cfte-aviso-importante h3::after {

    content: "Importante";

    background: #FFF4DD;

    color: #A66A00;

}


/* Urgente */

.cfte-aviso-urgente h3::after {

    content: "Urgente";

    background: #FDEAEA;

    color: #C62828;

}


/* Mantención */

.cfte-aviso-mantencion h3::after {

    content: "Mantención";

    background: #EEF0F2;

    color: #6F7271;

}


/* =====================================================
   12. TEXTO DEL AVISO
   ===================================================== */

.cfte-aviso-texto {

    padding-left: 35px;

    font-size: 12px;

    line-height: 1.45;

    color: #5B6673;

}


.cfte-aviso-texto p {

    margin: 0;

}


/* =====================================================
   13. ENLACES DENTRO DEL AVISO
   ===================================================== */

.cfte-aviso-texto a {

    color: #0075A9;

    font-weight: 600;

    text-decoration: underline;

    transition:
        color .2s ease;

}


.cfte-aviso-texto a:hover {

    color: #005D87;

}


/* =====================================================
   14. TIPOS DE AVISO
   ===================================================== */

/*
 * La línea lateral utiliza ahora únicamente colores
 * institucionales o neutros. Ya no se utiliza amarillo.
 */

.cfte-aviso-info::before {

    background: #0075A9;

}


.cfte-aviso-importante::before {

    background: #DF5929;

}


.cfte-aviso-urgente::before {

    background: #DF5929;

}


.cfte-aviso-mantencion::before {

    background: #6F7271;

}


/* =====================================================
   15. SEPARACIÓN ENTRE AVISOS
   ===================================================== */

.cfte-aviso + .cfte-aviso {

    border-top: 1px solid #E8EDF3;

}


/* =====================================================
   16. AVISOS ADICIONALES OCULTOS
   ===================================================== */

.cfte-aviso-oculto {

    display: none;

}


/* =====================================================
   17. BOTÓN "VER MÁS"
   ===================================================== */

.cfte-avisos-mas {

    width: 100%;

    padding: 0;

    border-top: 1px solid #E1E8EF;

    background: #F8FAFC;

    text-align: center;

    box-sizing: border-box;

}


.cfte-avisos-mas-boton {

    width: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 6px;

    padding: 9px 12px;

    border: none;

    background: transparent;

    color: #0075A9;

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease;

}


.cfte-avisos-mas-boton:hover {

    background: #EEF6FA;

    color: #005D87;

}


/* =====================================================
   18. ESTADO MINIMIZADO
   ===================================================== */

.cfte-avisos.minimizado
.cfte-avisos-contenido {

    display: none;

}


/* =====================================================
   19. RESPONSIVE - TABLET
   ===================================================== */

@media (max-width:1024px) {

    .header-aviso-institucional {

        flex: 0 0 190px;

        width: 190px;
        min-width: 190px;
        max-width: 190px;

        margin: 0 8px;

    }


    .cfte-avisos,
    .cfte-avisos-control {

        width: 190px;

    }


    .cfte-avisos-contenido {

        width: 320px;

    }

}


/* =====================================================
   20. RESPONSIVE - TABLET PEQUEÑA
   ===================================================== */

@media (max-width:768px) {

    .header-aviso-institucional {

        flex: 0 0 180px;

        width: 180px;
        min-width: 180px;
        max-width: 180px;

        margin: 0 6px;

    }


    .cfte-avisos,
    .cfte-avisos-control {

        width: 180px;

    }


    .cfte-avisos-contenido {

        width:
            min(
                320px,
                calc(100vw - 24px)
            );

    }

}


/* =====================================================
   21. RESPONSIVE - CELULAR
   ===================================================== */

@media (max-width:480px) {

    .header-aviso-institucional {

        flex: 0 0 165px;

        width: 165px;
        min-width: 165px;
        max-width: 165px;

        margin: 0 4px;

    }


    .cfte-avisos,
    .cfte-avisos-control {

        width: 165px;

    }


    .cfte-avisos-minimizado {

        gap: 4px;

        font-size: 11px;

    }


    .cfte-avisos-minimizado > i {

        font-size: 12px;

    }


    .cfte-avisos-contador {

        min-width: 19px;
        height: 19px;

        font-size: 10px;

    }


    .cfte-avisos-toggle {

        width: 28px;
        height: 28px;

        flex-basis: 28px;

    }


    .cfte-avisos-contenido {

        width:
            min(
                300px,
                calc(100vw - 16px)
            );

    }


    .cfte-aviso {

        padding: 12px 14px;

    }


    .cfte-aviso h3 {

        font-size: 13px;

    }


    .cfte-aviso h3::before {

        width: 26px;
        height: 26px;

        flex-basis: 26px;

    }


    .cfte-aviso-texto {

        padding-left: 33px;

        font-size: 11px;

    }

}

/* =====================================================
   AVISOS - MODO COMPACTO
   ===================================================== */

/*
 * Cuando el header ya no tiene suficiente espacio,
 * el aviso se convierte en un botón únicamente con
 * el icono del megáfono.
 */

@media (max-width:1600px) {

    .header-aviso-institucional {

        flex: 0 0 44px;

        width: 44px;
        min-width: 44px;
        max-width: 44px;

        height: 44px;

        margin: 0 6px;

    }


    /*
     * El contenedor mantiene exactamente el tamaño
     * del botón.
     */

    .cfte-avisos {

        width: 44px;

    }


    /*
     * Botón compacto.
     */

    .cfte-avisos-control {

        width: 44px;
        height: 44px;

        display: flex;

        align-items: center;
        justify-content: center;

        padding: 0;

        border-radius: 12px;

    }


    /*
     * Solo mostramos el icono del megáfono.
     */

    .cfte-avisos-minimizado {

        width: 44px;
        height: 44px;

        display: flex;

        align-items: center;
        justify-content: center;

        padding: 0;

        margin: 0;

        cursor: pointer;

    }


    /*
     * Icono del megáfono.
     */

    .cfte-avisos-minimizado > i {

        font-size: 16px;

        color: #0075A9;

        transition:
            transform .25s ease,
            color .25s ease;

    }


    /*
     * Ocultamos el texto y el contador.
     */

    .cfte-avisos-minimizado {

        font-size: 0;

    }


    .cfte-avisos-minimizado > i {

        font-size: 16px;

    }


    .cfte-avisos-contador {

        display: none;

    }


    /*
     * El + / - original desaparece visualmente.
     *
     * El propio icono del aviso será el botón.
     */

    .cfte-avisos-toggle {

        display: none;

    }


    /*
     * Efecto hover del botón.
     */

    .cfte-avisos-minimizado:hover {

        background: #E7F1F6;

    }


    .cfte-avisos-minimizado:hover > i {

        color: #005D87;

        transform: scale(1.1);

    }


    /*
     * Cuando se despliega, el contenido aparece debajo
     * del botón sin alterar el resto del header.
     */

    .cfte-avisos-contenido {

        width:
            min(
                360px,
                calc(100vw - 20px)
            );

        margin-top: 0;

    }

}

/*=====================================
AVISOS - CELULAR
=====================================*/

@media (max-width:768px){

    /*---------------------------------
      ESPACIO DEL BOTÓN
    ---------------------------------*/

    .header-aviso-institucional{

        position:relative;

        flex:0 0 46px;

        width:46px;
        min-width:46px;
        max-width:46px;

        height:46px;

        margin:0;

    }


    /*---------------------------------
      CONTENEDOR PRINCIPAL
    ---------------------------------*/

    .cfte-avisos{

        position:relative;

        top:auto;
        left:auto;

        width:46px;

        z-index:99999;

    }


    /*---------------------------------
      BOTÓN
    ---------------------------------*/

    .cfte-avisos-control{

        width:46px;
        height:46px;

        padding:0;

        display:flex;

        align-items:center;
        justify-content:center;

        border-radius:14px;

    }


    .cfte-avisos-minimizado{

        width:46px;
        height:46px;

        display:flex;

        align-items:center;
        justify-content:center;

        padding:0;
        margin:0;

        font-size:0;

        cursor:pointer;

    }


    .cfte-avisos-minimizado > i{

        font-size:18px;

        color:#0075A9;

    }


    .cfte-avisos-contador{

        display:none;

    }


    /*---------------------------------
      PANEL DESPLEGADO
    ---------------------------------*/

    .cfte-avisos:not(.minimizado)
    .cfte-avisos-contenido{

        position:fixed;

        top:calc(
            var(--wp-admin--admin-bar--height, 46px)
            + 74px
            + 8px
            + 46px
        );

        right:8px;

        width:min(
            360px,
            calc(100vw - 16px)
        );

        min-width:0;
        max-width:calc(100vw - 16px);

        max-height:calc(100vh - 190px);

        overflow-y:auto;
        overflow-x:hidden;

        background:#FFFFFF;

        border:1px solid #DCE6F0;

        border-radius:18px;

        box-shadow:
            0 14px 32px rgba(23,55,94,.14);

        z-index:99999;

    }


    /*---------------------------------
      AVISOS
    ---------------------------------*/

    .cfte-avisos:not(.minimizado)
    .cfte-aviso{

        width:100%;
        min-width:0;

        padding:14px 16px;

    }


    .cfte-avisos:not(.minimizado)
    .cfte-aviso h3{

        font-size:13px;

    }


    .cfte-avisos:not(.minimizado)
    .cfte-aviso-texto{

        padding-left:33px;

        font-size:11px;

    }


    /*---------------------------------
      VER MÁS
    ---------------------------------*/

    .cfte-avisos:not(.minimizado)
    .cfte-avisos-mas{

        width:100%;

    }

}

/*=====================================
AVISOS - AJUSTE HEADER MÓVIL
=====================================*/

@media (max-width:768px){

    .header-aviso-institucional{

        flex:0 0 46px;

        width:46px;
        min-width:46px;
        max-width:46px;

        margin:0;

    }


    .header-notifications{

        flex:0 0 48px;

    }


    .header-divider{

        flex:0 0 1px;

    }

}

/*=====================================
AVISOS - CORRECCIÓN DEFINITIVA MÓVIL
=====================================*/

@media (max-width:768px){

    /*---------------------------------
      ESPACIO FIJO DEL AVISO
    ---------------------------------*/

    .header-aviso-institucional{

        flex:0 0 46px !important;

        width:46px !important;
        min-width:46px !important;
        max-width:46px !important;

        height:46px !important;

        margin:0 !important;

        position:relative !important;

    }


    /*---------------------------------
      CONTENEDOR PRINCIPAL
    ---------------------------------*/

    .cfte-avisos{

          position:relative !important;

          top:auto !important;
          left:auto !important;
          right:auto !important;

          width:46px !important;
          min-width:46px !important;
          max-width:46px !important;

          height:46px !important;

          z-index:3000 !important;

      }


    /*---------------------------------
      BARRA DEL AVISO
    ---------------------------------*/

    .cfte-avisos-control{

        position:relative !important;

        width:46px !important;
        min-width:46px !important;

        height:46px !important;

        display:flex !important;

        align-items:center !important;
        justify-content:center !important;

        padding:0 !important;
        margin:0 !important;

        border-radius:14px !important;

        box-sizing:border-box !important;

        z-index:100001 !important;

    }


    /*---------------------------------
      ICONO
    ---------------------------------*/

    .cfte-avisos-minimizado{

        width:46px !important;
        height:46px !important;

        display:flex !important;

        align-items:center !important;
        justify-content:center !important;

        padding:0 !important;
        margin:0 !important;

        font-size:0 !important;

        overflow:visible !important;

    }


    .cfte-avisos-minimizado > i{

        display:block !important;

        font-size:18px !important;

        flex-shrink:0 !important;

        color:#0075A9 !important;

    }


    /*---------------------------------
      CONTADOR
    ---------------------------------*/

    .cfte-avisos-contador{

        display:none !important;

    }


    /*---------------------------------
      BOTÓN INVISIBLE QUE RECIBE EL CLICK
    ---------------------------------*/

    .cfte-avisos-toggle{

        position:absolute !important;

        inset:0 !important;

        width:46px !important;
        height:46px !important;

        margin:0 !important;
        padding:0 !important;

        display:block !important;

        border:none !important;

        background:transparent !important;

        color:transparent !important;

        z-index:100002 !important;

    }


    .cfte-avisos-toggle i{

        display:none !important;

    }


    /*---------------------------------
      PANEL DE AVISOS
    ---------------------------------*/

    .cfte-avisos:not(.minimizado)
    .cfte-avisos-contenido{

        position:fixed !important;

        top:calc(
            var(--wp-admin--admin-bar--height, 0px)
            + 74px
            + 8px
        ) !important;

        right:8px !important;
        left:auto !important;

        width:min(
            360px,
            calc(100vw - 16px)
        ) !important;

        min-width:0 !important;
        max-width:calc(100vw - 16px) !important;

        max-height:calc(100vh - 190px) !important;

        overflow-y:auto !important;
        overflow-x:hidden !important;

        z-index:100000 !important;

        box-sizing:border-box !important;

    }

}

/*=====================================
CONTENEDOR DEL AVISO
=====================================*/

.header-aviso-wrapper{

    flex:0 0 auto;

    width:46px;
    min-width:46px;

    height:46px;

    display:flex;

    align-items:center;
    justify-content:center;

    position:relative;

    z-index:3000;

}

.header-aviso-wrapper
.header-aviso-institucional{

    flex:0 0 46px !important;

    width:46px !important;
    min-width:46px !important;
    max-width:46px !important;

    height:46px !important;

    margin:0 !important;

}

/*=====================================
AVISOS - SIN AVISOS
=====================================*/

.cfte-avisos-sin-avisos{

    display:flex;

    flex-direction:column;

    align-items:center;
    justify-content:center;

    gap:10px;

    min-height:140px;

    padding:25px 20px;

    text-align:center;

    background:#FFFFFF;

    color:#6F7271;

    font-size:13px;

    line-height:1.4;

    box-sizing:border-box;

}


.cfte-avisos-sin-avisos i{

    width:42px;
    height:42px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#E8F3F8;

    color:#0075A9;

    font-size:20px;

}


.cfte-avisos-sin-avisos span{

    max-width:260px;

}