/* =============================================================================
   dm-modal.css
   Sistema de modales propio del Manual de Marca, sin conflictos con AdminLTE.
   Todas las reglas tienen specificidad alta (.dm-modal*) y usan !important
   donde compitan con AdminLTE/Bootstrap legacy. No depende de SweetAlert2.
   Fecha: 2026-05-08
============================================================================= */

.dm-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100000 !important;
    background: radial-gradient(ellipse at center, rgba(6,22,41,0.78) 0%, rgba(6,22,41,0.92) 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease !important;
    perspective: 1400px !important;
    pointer-events: none !important;
}
.dm-modal-overlay.dm-modal-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.dm-modal {
    width: 100% !important;
    max-width: 480px !important;
    max-height: 92vh !important;
    overflow: hidden !important;
    background: #FFFFFF !important;
    border-radius: 12px !important;
    box-shadow:
        0 60px 80px -30px rgba(6,22,41,0.55),
        0 30px 60px rgba(6,22,41,0.30),
        0 0 0 1px rgba(201,169,110,0.20) inset !important;
    transform: translateY(20px) scale(.96) !important;
    transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s !important;
    display: flex !important;
    flex-direction: column !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    color: #0A0F1A !important;
    pointer-events: auto !important;
}
.dm-modal-overlay.dm-modal-open .dm-modal {
    transform: translateY(0) scale(1) !important;
}
.dm-modal.dm-modal-lg { max-width: 640px !important; }
.dm-modal.dm-modal-sm { max-width: 380px !important; }

/* Header */
.dm-modal-header {
    padding: 20px 24px 14px !important;
    background: linear-gradient(135deg, #061629 0%, #0E2B4A 55%, #3FA5AE 100%) !important;
    color: #fff !important;
    position: relative;
    overflow: hidden;
}
.dm-modal-header::after {
    content: "";
    position: absolute;
    right: -90px; top: -90px;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: rgba(201,169,110,0.10);
}
.dm-modal-header .dm-modal-eyebrow {
    font-family: 'JetBrains Mono', 'Courier New', monospace !important;
    font-size: 9px !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: #6FCBD4 !important;
    margin-bottom: 4px !important;
    position: relative; z-index: 1;
}
.dm-modal-header .dm-modal-title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-style: italic !important;
    font-weight: 600 !important;
    font-size: 24px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    color: #fff !important;
    position: relative; z-index: 1;
}

/* Variantes por tipo */
.dm-modal[data-type="success"] .dm-modal-header { background: linear-gradient(135deg, #1B4D38 0%, #2F7D5B 60%, #5BC892 100%) !important; }
.dm-modal[data-type="success"] .dm-modal-header .dm-modal-eyebrow { color: #DDF1E6 !important; }
.dm-modal[data-type="error"]   .dm-modal-header { background: linear-gradient(135deg, #5C0F0F 0%, #B53A3A 60%, #E07474 100%) !important; }
.dm-modal[data-type="error"]   .dm-modal-header .dm-modal-eyebrow { color: #FDEDED !important; }
.dm-modal[data-type="warning"] .dm-modal-header { background: linear-gradient(135deg, #6B5615 0%, #B57F1A 60%, #C9A96E 100%) !important; }
.dm-modal[data-type="warning"] .dm-modal-header .dm-modal-eyebrow { color: #FBF1DE !important; }
.dm-modal[data-type="info"]    .dm-modal-header { background: linear-gradient(135deg, #0E2B4A 0%, #3FA5AE 100%) !important; }

/* Close button */
.dm-modal-close {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    background: rgba(255,255,255,0.10) !important;
    border: 1px solid rgba(255,255,255,0.20) !important;
    color: #fff !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    z-index: 2;
    transition: all .15s !important;
    padding: 0 !important;
    line-height: 1 !important;
}
.dm-modal-close:hover {
    background: #B53A3A !important;
    border-color: #B53A3A !important;
    transform: rotate(90deg) !important;
}

/* Icon */
.dm-modal-icon {
    width: 64px;
    height: 64px;
    margin: 18px auto -8px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 32px !important;
    background: #F8FAFC;
    color: #0E2B4A;
    border: 3px solid #E0F4F6;
    box-shadow: 0 8px 24px rgba(14,43,74,0.15);
    flex: 0 0 auto;
}
.dm-modal[data-type="success"] .dm-modal-icon { background: #DDF1E6; color: #2F7D5B; border-color: #5BC892; }
.dm-modal[data-type="error"]   .dm-modal-icon { background: #FDEDED; color: #B53A3A; border-color: #E07474; }
.dm-modal[data-type="warning"] .dm-modal-icon { background: #FBF1DE; color: #B57F1A; border-color: #C9A96E; }
.dm-modal[data-type="question"] .dm-modal-icon { background: #E0F4F6; color: #3FA5AE; border-color: #6FCBD4; }
.dm-modal[data-type="info"]    .dm-modal-icon { background: #E0F4F6; color: #0E2B4A; border-color: #6FCBD4; }

/* Body */
.dm-modal-body {
    padding: 22px 28px 8px !important;
    overflow-y: auto !important;
    max-height: 60vh !important;
    text-align: center !important;
    line-height: 1.6 !important;
    font-size: 15px !important;
    color: #0A0F1A !important;
}
.dm-modal-body.dm-modal-body-left { text-align: left !important; }
.dm-modal-body p { margin: 8px 0 !important; }
.dm-modal-body strong {
    background: rgba(201,169,110,0.18);
    color: #A88742;
    padding: 1px 7px;
    border-radius: 3px;
    font-weight: 600 !important;
}
.dm-modal-body .dm-modal-sub {
    display: block;
    margin-top: 10px;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase !important;
    color: #6B6F78 !important;
}
.dm-modal-body code {
    font-family: 'JetBrains Mono', monospace !important;
    background: #F8FAFC !important;
    color: #0E2B4A !important;
    padding: 1px 6px !important;
    border-radius: 3px !important;
    font-size: 13px !important;
}

/* Input dentro del modal (para prompts) */
.dm-modal-body .dm-modal-input {
    width: 100% !important;
    padding: 10px 14px !important;
    margin-top: 14px !important;
    border: 1.5px solid #E0F4F6 !important;
    border-radius: 6px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    color: #0A0F1A !important;
    outline: none !important;
    background: #fff !important;
    transition: border-color .15s, box-shadow .15s !important;
}
.dm-modal-body .dm-modal-input:focus {
    border-color: #3FA5AE !important;
    box-shadow: 0 0 0 3px rgba(111,203,212,0.18) !important;
}

/* Loader */
.dm-modal-loader {
    width: 40px !important;
    height: 40px !important;
    border: 3px solid #E0F4F6 !important;
    border-top-color: #3FA5AE !important;
    border-radius: 50% !important;
    animation: dm-modal-spin 0.9s linear infinite !important;
    margin: 18px auto 6px !important;
}
@keyframes dm-modal-spin { to { transform: rotate(360deg); } }

/* Footer / actions */
.dm-modal-footer {
    padding: 18px 28px 22px !important;
    display: flex !important;
    gap: 10px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}
.dm-modal-btn {
    all: unset !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 11px 22px !important;
    border-radius: 6px !important;
    font-family: 'JetBrains Mono', 'Courier New', monospace !important;
    font-size: 11px !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    border: 1.5px solid transparent !important;
    transition: transform .12s ease, box-shadow .12s ease, background .15s ease !important;
    text-align: center !important;
    pointer-events: auto !important;
    user-select: none !important;
    min-width: 100px !important;
}
.dm-modal-btn:hover { transform: translateY(-1px) !important; }
.dm-modal-btn:active { transform: translateY(0) !important; }
.dm-modal-btn:focus-visible {
    outline: 3px solid rgba(111,203,212,0.50) !important;
    outline-offset: 2px !important;
}
.dm-modal-btn[disabled],
.dm-modal-btn.is-loading {
    opacity: 0.6 !important;
    cursor: wait !important;
    transform: none !important;
}

.dm-modal-btn.dm-btn-primary {
    background: #0E2B4A !important;
    color: #fff !important;
    border-color: #0E2B4A !important;
    box-shadow: 0 4px 14px rgba(14,43,74,0.20) !important;
}
.dm-modal-btn.dm-btn-primary:hover { background: #1E4670 !important; }

.dm-modal-btn.dm-btn-success {
    background: #2F7D5B !important;
    color: #fff !important;
    border-color: #2F7D5B !important;
    box-shadow: 0 4px 14px rgba(47,125,91,0.25) !important;
}
.dm-modal-btn.dm-btn-success:hover { background: #1B4D38 !important; }

.dm-modal-btn.dm-btn-danger {
    background: #B53A3A !important;
    color: #fff !important;
    border-color: #B53A3A !important;
    box-shadow: 0 4px 14px rgba(181,58,58,0.25) !important;
}
.dm-modal-btn.dm-btn-danger:hover { background: #8E2A2A !important; }

.dm-modal-btn.dm-btn-warn {
    background: #B57F1A !important;
    color: #fff !important;
    border-color: #B57F1A !important;
}
.dm-modal-btn.dm-btn-warn:hover { background: #8C5F12 !important; }

.dm-modal-btn.dm-btn-gold {
    background: #C9A96E !important;
    color: #061629 !important;
    border-color: #C9A96E !important;
    box-shadow: 0 4px 14px rgba(201,169,110,0.30) !important;
}
.dm-modal-btn.dm-btn-gold:hover { background: #A88742 !important; color: #fff !important; }

.dm-modal-btn.dm-btn-ghost {
    background: transparent !important;
    color: #0E2B4A !important;
    border-color: #E0F4F6 !important;
}
.dm-modal-btn.dm-btn-ghost:hover { background: #E0F4F6 !important; }

/* Spinner inline en boton */
.dm-modal-btn .dm-modal-spinner {
    width: 13px !important;
    height: 13px !important;
    border: 2px solid currentColor !important;
    border-top-color: transparent !important;
    border-radius: 50% !important;
    animation: dm-modal-spin 0.8s linear infinite !important;
    display: none;
}
.dm-modal-btn.is-loading .dm-modal-spinner { display: inline-block !important; }
.dm-modal-btn.is-loading .dm-modal-btn-label { opacity: 0.7 !important; }

/* =====================  TOAST  ===================== */
.dm-toast-stack {
    position: fixed !important;
    top: 18px !important;
    right: 18px !important;
    z-index: 100001 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    pointer-events: none !important;
    max-width: calc(100vw - 36px) !important;
}
.dm-toast {
    background: #fff !important;
    color: #0A0F1A !important;
    border-radius: 8px !important;
    padding: 14px 18px !important;
    min-width: 280px !important;
    max-width: 380px !important;
    box-shadow: 0 18px 40px rgba(6,22,41,0.20), 0 0 0 1px #E0F4F6 inset !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    pointer-events: auto !important;
    font-family: 'Inter', sans-serif !important;
    transform: translateX(120%);
    opacity: 0;
    transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s ease !important;
    border-left: 4px solid #3FA5AE !important;
    position: relative !important;
    overflow: hidden !important;
}
.dm-toast.dm-toast-show { transform: translateX(0); opacity: 1; }
.dm-toast.dm-toast-hide { transform: translateX(120%); opacity: 0; }

.dm-toast[data-type="success"] { border-left-color: #2F7D5B !important; }
.dm-toast[data-type="error"]   { border-left-color: #B53A3A !important; }
.dm-toast[data-type="warning"] { border-left-color: #B57F1A !important; }
.dm-toast[data-type="info"]    { border-left-color: #3FA5AE !important; }

.dm-toast-icon {
    flex: 0 0 auto;
    font-size: 22px !important;
    color: #3FA5AE !important;
}
.dm-toast[data-type="success"] .dm-toast-icon { color: #2F7D5B !important; }
.dm-toast[data-type="error"]   .dm-toast-icon { color: #B53A3A !important; }
.dm-toast[data-type="warning"] .dm-toast-icon { color: #B57F1A !important; }

.dm-toast-content { flex: 1; min-width: 0; }
.dm-toast-title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-style: italic !important;
    font-weight: 600 !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
    color: #0E2B4A !important;
    margin-bottom: 2px !important;
}
.dm-toast-text {
    font-size: 13px !important;
    color: #6B6F78 !important;
    line-height: 1.5 !important;
    word-break: break-word;
}

.dm-toast-progress {
    position: absolute !important;
    left: 0; bottom: 0;
    height: 3px !important;
    background: rgba(63,165,174,0.30) !important;
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    transition: width linear !important;
    width: 100%;
}
.dm-toast[data-type="success"] .dm-toast-progress { background: rgba(47,125,91,0.30) !important; }
.dm-toast[data-type="error"]   .dm-toast-progress { background: rgba(181,58,58,0.30) !important; }
.dm-toast[data-type="warning"] .dm-toast-progress { background: rgba(181,127,26,0.30) !important; }

.dm-toast-close {
    flex: 0 0 auto !important;
    background: transparent !important;
    border: 0 !important;
    color: #6B6F78 !important;
    cursor: pointer !important;
    font-size: 14px !important;
    padding: 4px !important;
    line-height: 1 !important;
}
.dm-toast-close:hover { color: #0E2B4A !important; }

/* Print: oculta modales y toasts */
@media print {
    .dm-modal-overlay,
    .dm-toast-stack { display: none !important; }
}

/* Mobile */
@media (max-width: 540px) {
    .dm-modal-overlay { padding: 12px !important; }
    .dm-modal-header { padding: 18px 20px 12px !important; }
    .dm-modal-header .dm-modal-title { font-size: 22px !important; }
    .dm-modal-body { padding: 18px 20px 6px !important; font-size: 14px !important; }
    .dm-modal-footer { padding: 14px 20px 18px !important; flex-direction: column-reverse !important; }
    .dm-modal-btn { width: 100% !important; }
    .dm-toast { min-width: auto !important; max-width: calc(100vw - 36px) !important; }
}