/* ============================================================
   MODALS — Override del sistema de diseño SGA UNAE
   Aplica sobre Bootstrap 3/5. No toca posicionamiento
   ni lógica de apertura/cierre — solo visual.
   ============================================================ */

.modal-backdrop,
.modal-backdrop.fade.in,
.modal-backdrop.show {
    background: rgba(21, 15, 45, 0.52) !important;
    opacity: 1 !important;
}

.modal-content {
    border: none !important;
    border-radius: var(--rd-r-lg) !important;
    box-shadow: var(--rd-shadow-lg) !important;
    overflow: hidden !important;
    background: var(--rd-paper) !important;
    font-family: var(--rd-sans) !important;
}

.modal-header {
    background: linear-gradient(180deg,
        var(--rd-primary-50, #FBF2F7) 0%,
        var(--rd-paper, #fff)         100%) !important;
    border-bottom: 1px solid var(--rd-ink-100, #F3F2F5) !important;
    padding: 18px 20px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

.modal-header h1,
.modal-header h2,
.modal-header h3,
.modal-header h4,
.modal-header h5 {
    font-family: var(--rd-sans) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--rd-ink-900, #15131A) !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    letter-spacing: -.01em !important;
}

/* Bootstrap 3: .close */
.modal-header .close {
    margin-left: auto !important;
    order: 99 !important;
    flex-shrink: 0 !important;
    float: none !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: var(--rd-r-sm) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    padding: 0 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    transition: background .12s, border-color .12s !important;
    cursor: pointer !important;
}
.modal-header .close span:not(.sr-only) {
    display: block !important;
    font-size: 20px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    color: var(--rd-ink-500, #7B7384) !important;
    opacity: 1 !important;
}
.modal-header .close:hover {
    background: var(--rd-ink-100, #F3F2F5) !important;
    border-color: var(--rd-ink-200, #E6E3EA) !important;
}
.modal-header .close:hover span:not(.sr-only) {
    color: var(--rd-ink-900, #15131A) !important;
}

/* Bootstrap 5: .btn-close */
.modal-header .btn-close {
    margin-left: auto !important;
    order: 99 !important;
    flex-shrink: 0 !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: var(--rd-r-sm) !important;
    padding: 0 !important;
    opacity: .6 !important;
    border: 1px solid transparent !important;
    transition: opacity .12s, background .12s, border-color .12s !important;
}
.modal-header .btn-close:hover {
    opacity: 1 !important;
    background-color: var(--rd-ink-100, #F3F2F5) !important;
    border-color: var(--rd-ink-200, #E6E3EA) !important;
}

.modal-body {
    padding: 20px !important;
    background: var(--rd-paper) !important;
    font-size: 13.5px !important;
    color: var(--rd-ink-800, #26222B) !important;
    line-height: 1.55 !important;
}

.modal-footer {
    background: var(--rd-paper) !important;
    border-top: 1px solid var(--rd-ink-100, #F3F2F5) !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}
.modal-footer .btn + .btn {
    margin-left: 0 !important;
}

/* Botones */
.modal .btn {
    font-family: var(--rd-sans) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    padding: 7px 16px !important;
    border-radius: var(--rd-r-sm) !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    transition: background .12s, border-color .12s, opacity .12s !important;
    line-height: 1.3 !important;
}
.modal .btn-primary {
    background: var(--rd-primary-600, #511642) !important;
    border-color: var(--rd-primary-700, #3F0F33) !important;
    color: #fff !important;
}
.modal .btn-primary:hover {
    background: var(--rd-primary-700, #3F0F33) !important;
    color: #fff !important;
    text-decoration: none !important;
}
.modal .btn-success {
    background: var(--rd-ok, #1F905C) !important;
    border-color: var(--rd-ok-dark, #177E48) !important;
    color: #fff !important;
}
.modal .btn-success:hover {
    background: var(--rd-ok-dark, #177E48) !important;
    color: #fff !important;
    text-decoration: none !important;
}
.modal .btn-info,
.modal .btn-cerrar {
    background: var(--rd-ink-50, #FAFAFB) !important;
    border-color: var(--rd-ink-200, #E6E3EA) !important;
    color: var(--rd-ink-700, #3D3744) !important;
}
.modal .btn-info:hover,
.modal .btn-cerrar:hover {
    background: var(--rd-ink-100, #F3F2F5) !important;
    border-color: var(--rd-ink-300, #CECAD3) !important;
    color: var(--rd-ink-900, #15131A) !important;
    text-decoration: none !important;
}
.modal .btn-danger {
    background: var(--rd-err, #D43838) !important;
    border-color: var(--rd-err-600, #AC2828) !important;
    color: #fff !important;
}
.modal .btn-danger:hover {
    background: var(--rd-err-600, #AC2828) !important;
    color: #fff !important;
    text-decoration: none !important;
}
.modal .btn-warning {
    background: var(--rd-warn, #F5A623) !important;
    border-color: var(--rd-warn-600, #C4811A) !important;
    color: #fff !important;
}
.modal .btn-warning:hover {
    background: var(--rd-warn-600, #C4811A) !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* Inputs / selects — excluye el <select> oculto de Select2 y sus inputs internos */
.modal-body select:not(.select2-hidden-accessible),
.modal-body input[type="text"]:not(.select2-search__field),
.modal-body input[type="email"],
.modal-body input[type="number"],
.modal-body input[type="password"],
.modal-body textarea {
    font-family: var(--rd-sans) !important;
    font-size: 13px !important;
    border: 1px solid var(--rd-ink-200, #E6E3EA) !important;
    border-radius: var(--rd-r-sm) !important;
    padding: 7px 12px !important;
    color: var(--rd-ink-900, #15131A) !important;
    background: var(--rd-paper) !important;
    transition: border-color .12s, box-shadow .12s !important;
}
/* Flecha custom en los <select> nativos del modal (consistente con los de página) */
.modal-body select:not(.select2-hidden-accessible):not([multiple]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%237B7384' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 12px 12px !important;
    padding-right: 30px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}
.modal-body select:not(.select2-hidden-accessible):focus,
.modal-body input:not(.select2-search__field):focus,
.modal-body textarea:focus {
    border-color: var(--rd-primary-400, #A7568A) !important;
    box-shadow: 0 0 0 3px var(--rd-primary-50, #FBF2F7) !important;
    outline: none !important;
}
.modal-body input:not(.select2-search__field):disabled,
.modal-body select:not(.select2-hidden-accessible):disabled,
.modal-body textarea:disabled,
.modal-body input:not(.select2-search__field)[readonly],
.modal-body select:not(.select2-hidden-accessible)[readonly],
.modal-body textarea[readonly] {
    background: var(--rd-ink-50, #FAFAFB) !important;
    color: var(--rd-ink-400, #A39DAC) !important;
    border-color: var(--rd-ink-100, #F3F2F5) !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

/* Time / date — ancho natural */
input[type="time"],
input[type="date"],
input[type="datetime-local"] {
    display: inline-block !important;
    width: auto !important;
    font-family: var(--rd-sans) !important;
    font-size: 13px !important;
    padding: 6px 8px !important;
    border: 1px solid var(--rd-ink-200, #E6E3EA) !important;
    border-radius: var(--rd-r-sm, 6px) !important;
    color: var(--rd-ink-900, #15131A) !important;
    background: var(--rd-paper) !important;
}
input[type="time"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus {
    border-color: var(--rd-primary-400, #A7568A) !important;
    box-shadow: 0 0 0 3px var(--rd-primary-50, #FBF2F7) !important;
    outline: none !important;
}

a.btn-link[id^="actualiza_"] {
    display: none !important;
}

#generic-modal #panel-footer {
    display: none !important;
}

@media (max-width: 576px) {
    .modal-dialog {
        margin: 12px !important;
        max-width: calc(100vw - 24px) !important;
    }
    .modal-header { padding: 14px 16px 12px !important; }
    .modal-body   { padding: 16px !important; }
    .modal-footer { padding: 10px 12px !important; }
}

/* ============================================================
   Correo HTML del sistema dentro del modal de mensaje (mailbox)
   — .mensaje-correo-html (envuelve {{ mensaje.contenido }} en
   templates/mailbox/vermensajein.html).
   El cuerpo es un email con su propio fondo MORADO (#4d1e3e) y tablas
   anidadas. Los estilos globales de table/td/th (typography.css:
   width/min-width:100%, border-bottom, padding, hover) estiran los
   recuadros blancos tapando el morado y agregan bordes. Lo envolvemos
   con el morado de marco GARANTIZADO y reseteamos esos globales (con
   min-width:0, que era la pieza que faltaba) SOLO aquí dentro.
   ============================================================ */
.mensaje-correo-html {
    background: #4d1e3e;
    border-radius: 8px;
    padding: 10px;
    overflow: auto;
    text-align: center;
    font-size: 12px;
}
/* Texto interno del correo un poco más chico. SIN !important para que los
   spacers del correo (que usan su propio font-size para crear espacio) no
   se rompan. */
.mensaje-correo-html td,
.mensaje-correo-html p,
.mensaje-correo-html div,
.mensaje-correo-html span,
.mensaje-correo-html b {
    font-size: 12px;
}
.mensaje-correo-html table {
    max-width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    background: transparent !important;
}
/* Íconos de redes sociales: centrados y con AIRE entre cada uno
   (no estirados al 100% como los cards, pero tampoco pegados). */
.mensaje-correo-html table[width="160"] {
    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.mensaje-correo-html table[width="160"] td {
    padding: 0 16px !important;
}
.mensaje-correo-html td,
.mensaje-correo-html th {
    border: 0 !important;
    padding: revert !important;
    vertical-align: revert !important;
    background: revert;
}
/* Hover SIN !important: así el blanco INLINE del correo gana y NO se
   pone morado al pasar el mouse; las celdas transparentes (los huecos)
   siguen mostrando el morado de fondo. */
.mensaje-correo-html tr:hover > td,
.mensaje-correo-html tr:hover > th {
    background: revert;
}
/* Sin bordes, sombras ni líneas dentro del correo (incluye tr y hr,
   que era de donde salían las líneas en el fondo blanco). */
.mensaje-correo-html table,
.mensaje-correo-html tr,
.mensaje-correo-html td,
.mensaje-correo-html th {
    border: 0 !important;
    box-shadow: none !important;
}
.mensaje-correo-html hr { display: none !important; }
/* Padding interno de los recuadros blancos del correo (más aire a los
   lados y arriba). El bottom va en 0: el correo ya trae su propio spacer
   abajo y, si no, se sumaban dos espacios (el "salto" doble). */
.mensaje-correo-html td[bgcolor="#ffffff"] {
    padding: 18px 26px 0 !important;
}
/* Robustez para CUALQUIER correo (no solo éste): imágenes que no
   desbordan, texto largo que corta, y tope de ancho del lienzo del
   correo para que quede centrado y cuadrado en modales anchos. */
.mensaje-correo-html img {
    max-width: 100% !important;
    height: auto !important;
}
.mensaje-correo-html td,
.mensaje-correo-html th {
    overflow-wrap: break-word;
    word-break: break-word;
}
.mensaje-correo-html > * {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
/* Cabecera del modal de mensaje (De / Destinatarios / Asunto): letra más
   chica. La lista de destinatarios puede ser enorme → se acota con scroll. */
#mensajemodaldinamico .modal-body label {
    font-size: 11px !important;
    margin-bottom: 2px !important;
}
#mensajemodaldinamico .mensaje-meta-val {
    font-size: 11px;
    color: var(--rd-ink-600);
    line-height: 1.4;
    max-height: 84px;
    overflow-y: auto;
}