/*
|--------------------------------------------------------------------------
| Plugin Comunicaciones TinyMCE
| Estilos de componentes editoriales
|--------------------------------------------------------------------------
*/


/* =========================================================
   CAJAS INFORMATIVAS
   ========================================================= */

.componente.caja {

    padding: 20px 25px;

    margin: 30px 0;

    border-radius: 8px;

    font-size: 16px;

    line-height: 1.6;

}


.componente.caja h4 {

    margin-top: 0;

    margin-bottom: 12px;

    font-size: 1.25rem;

}


/* Información */

.caja.info {

    background: #eef6ff;

    border-left: 6px solid #0d6efd;

}


/* Advertencia */

.caja.warning {

    background: #fff8df;

    border-left: 6px solid #ffc107;

}


/* Éxito */

.caja.success {

    background: #eaf7ee;

    border-left: 6px solid #198754;

}


/* Error */

.caja.danger {

    background: #fdeaea;

    border-left: 6px solid #dc3545;

}


/* Nota */

.caja.secondary {

    background: #f4f4f4;

    border-left: 6px solid #6c757d;

}



/* =========================================================
   CITA DESTACADA
   ========================================================= */


.cita-destacada {


    margin: 35px 20px;

    padding: 25px 35px;

    background: #f8f9fa;

    border-left: 8px solid #0055a5;

    font-size: 1.2rem;

    font-style: italic;


}


.cita-destacada footer {


    margin-top:15px;

    font-size:.95rem;

    font-style:normal;

    color:#555;


}



/* =========================================================
   DECLARACIÓN
   ========================================================= */


.declaracion {


    margin:35px 20px;

    padding:25px;

    background:#fafafa;

    border-left:5px solid #003366;


}


.declaracion footer {

    margin-top:15px;

    color:#555;

}



/* =========================================================
   DESTACADO INSTITUCIONAL
   ========================================================= */


.destacado-institucional {


    background:#003366;

    color:white;

    padding:30px;

    margin:35px 0;

    border-radius:10px;


}


.destacado-institucional h3 {

    margin-top:0;

}



/* =========================================================
   BOTÓN INSTITUCIONAL
   ========================================================= */


.boton-contenedor {

    text-align:center;

    margin:30px 0;


}


.boton-institucional {


    display:inline-block;

    background:#0055a5;

    color:white;

    padding:12px 30px;

    border-radius:6px;

    text-decoration:none;

    font-weight:bold;


}


.boton-institucional:hover {


    background:#003366;


}



/* =========================================================
   LISTA DESTACADA
   ========================================================= */


.lista-destacada {


    background:#f5f8fb;

    padding:20px 35px;

    margin:30px 0;

    border-left:5px solid #0055a5;


}


.lista-destacada li {


    margin-bottom:10px;


}



/* =========================================================
   CONTACTO
   ========================================================= */


.contacto {


    background:#f8f9fa;

    border:1px solid #ddd;

    padding:20px;

    margin:30px 0;

    border-radius:8px;


}



/* =========================================================
   EVENTO
   ========================================================= */


.evento {


    background:#eef6ff;

    border-radius:8px;

    padding:25px;

    margin:30px 0;


}


.evento h3 {


    color:#003366;

    margin-top:0;


}



/* =========================================================
   DOCUMENTO
   ========================================================= */


.documento {


    display:flex;

    align-items:center;

    gap:10px;

    padding:15px 20px;

    margin:25px 0;

    background:#f5f5f5;

    border-radius:6px;


}


.documento a {


    color:#0055a5;

    font-weight:bold;

}



/* =========================================================
   SEPARADOR
   ========================================================= */


.separador-noticia {


    border:0;

    border-top:3px solid #ddd;

    width:60%;

    margin:45px auto;


}



/* =========================================================
   VISTA EN EDITOR TINYMCE
   ========================================================= */


.tox-edit-area iframe {


    background:white;


}


/*
|--------------------------------------------------------------------------
| Compatibilidad contenido público
|--------------------------------------------------------------------------
*/


.componente img,
.destacado-institucional img,
.evento img {

    max-width:100%;

    height:auto;

}