/*
 * ═══════════════════════════════════════════════════════════════════════════
 *  MODAL UNIFIED — Pretium Solar
 *  Sistema único de modales compatible con modo oscuro y claro.
 *  Usar SOLO estas clases. No mezclar con inline styles.
 *
 *  Estructura HTML esperada:
 *  ┌─ .modal-overlay  (backdrop + flex container)
 *  │  └─ .modal-box   (tarjeta del modal)
 *  │     ├─ .modal-header   (título + botón cerrar)
 *  │     ├─ .modal-body     (contenido, formularios)
 *  │     └─ .modal-footer   (botones de acción)
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ─── VARIABLES — Dark (default) ──────────────────────────────────────────── */
:root {
    /* Overlay / backdrop */
    --mu-overlay-bg:          rgba(0, 0, 0, 0.78);

    /* Caja del modal */
    --mu-box-bg:              #1a1a1a;
    --mu-box-bg2:             #222222;
    --mu-box-border:          rgba(255, 140, 0, 0.22);
    --mu-box-shadow:          0 24px 64px rgba(0, 0, 0, 0.6);
    --mu-box-radius:          16px;

    /* Header */
    --mu-header-bg:           linear-gradient(135deg, #1e1e1e 0%, #2a2a2a 100%);
    --mu-header-border:       rgba(255, 140, 0, 0.18);
    --mu-header-text:         #ffffff;
    --mu-header-icon:         #ff8c00;

    /* Texto */
    --mu-text:                #e2e8f0;
    --mu-text-muted:          rgba(255, 255, 255, 0.45);
    --mu-label:               rgba(255, 255, 255, 0.55);

    /* Inputs */
    --mu-input-bg:            #252525;
    --mu-input-border:        rgba(255, 255, 255, 0.1);
    --mu-input-border-focus:  #ff8c00;
    --mu-input-text:          #e2e8f0;
    --mu-input-placeholder:   rgba(255, 255, 255, 0.28);
    --mu-input-shadow-focus:  rgba(255, 140, 0, 0.18);

    /* Footer */
    --mu-footer-bg:           rgba(0, 0, 0, 0.18);
    --mu-footer-border:       rgba(255, 140, 0, 0.12);

    /* Botón primario */
    --mu-btn-primary-bg:      linear-gradient(135deg, #ff8c00, #cc6a00);
    --mu-btn-primary-text:    #ffffff;
    --mu-btn-primary-shadow:  rgba(255, 140, 0, 0.35);

    /* Botón secundario */
    --mu-btn-cancel-bg:       rgba(255, 255, 255, 0.07);
    --mu-btn-cancel-border:   rgba(255, 255, 255, 0.12);
    --mu-btn-cancel-text:     rgba(255, 255, 255, 0.7);

    /* Botón peligro */
    --mu-btn-danger-bg:       #e74c3c;
    --mu-btn-danger-border:   #c0392b;
    --mu-btn-danger-text:     #ffffff;

    /* Badge/tag */
    --mu-badge-bg:            rgba(255, 140, 0, 0.12);
    --mu-badge-text:          #ff8c00;
    --mu-badge-border:        rgba(255, 140, 0, 0.28);

    /* Divider */
    --mu-divider:             rgba(255, 255, 255, 0.07);

    /* Scrollbar */
    --mu-scroll-track:        #1a1a1a;
    --mu-scroll-thumb:        #3a3a3a;
    --mu-scroll-thumb-hover:  #ff8c00;

    /* Close button */
    --mu-close-color:         rgba(255, 255, 255, 0.35);
    --mu-close-hover-bg:      rgba(239, 68, 68, 0.15);
    --mu-close-hover-color:   #f87171;
    --mu-close-hover-border:  rgba(239, 68, 68, 0.3);
}

/* ─── VARIABLES — Light mode ───────────────────────────────────────────────── */
html[data-theme="light"] {
    --mu-overlay-bg:          rgba(0, 0, 0, 0.45);

    --mu-box-bg:              #ffffff;
    --mu-box-bg2:             #f8fafd;
    --mu-box-border:          #d0d5e0;
    --mu-box-shadow:          0 24px 64px rgba(0, 0, 0, 0.18);
    --mu-box-radius:          16px;

    --mu-header-bg:           linear-gradient(135deg, #ffffff 0%, #f5f7fc 100%);
    --mu-header-border:       #dde1ea;
    --mu-header-text:         #1a1a2e;
    --mu-header-icon:         #ff8c00;

    --mu-text:                #1a1a2e;
    --mu-text-muted:          #6b7280;
    --mu-label:               #4b5563;

    --mu-input-bg:            #f5f7fb;
    --mu-input-border:        #c8cdd8;
    --mu-input-border-focus:  #c96800;
    --mu-input-text:          #1a1a2e;
    --mu-input-placeholder:   rgba(26, 26, 46, 0.35);
    --mu-input-shadow-focus:  rgba(201, 104, 0, 0.15);

    --mu-footer-bg:           #f0f3f8;
    --mu-footer-border:       #dde1ea;

    --mu-btn-primary-bg:      linear-gradient(135deg, #ff8c00, #cc6a00);
    --mu-btn-primary-text:    #ffffff;
    --mu-btn-primary-shadow:  rgba(255, 140, 0, 0.28);

    --mu-btn-cancel-bg:       #eef1f6;
    --mu-btn-cancel-border:   #c8cdd8;
    --mu-btn-cancel-text:     #374151;

    --mu-btn-danger-bg:       #e74c3c;
    --mu-btn-danger-border:   #c0392b;
    --mu-btn-danger-text:     #ffffff;

    --mu-badge-bg:            rgba(255, 140, 0, 0.1);
    --mu-badge-text:          #c96800;
    --mu-badge-border:        rgba(201, 104, 0, 0.3);

    --mu-divider:             #e5e7eb;

    --mu-scroll-track:        #f0f3f8;
    --mu-scroll-thumb:        #c8cdd8;
    --mu-scroll-thumb-hover:  #ff8c00;

    --mu-close-color:         rgba(26, 26, 46, 0.35);
    --mu-close-hover-bg:      rgba(239, 68, 68, 0.08);
    --mu-close-hover-color:   #dc2626;
    --mu-close-hover-border:  rgba(239, 68, 68, 0.25);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BACKDROP / OVERLAY
   ═══════════════════════════════════════════════════════════════════════════ */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--mu-overlay-bg);
    z-index: 9990;
    align-items: center;
    justify-content: center;
    padding: 16px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    animation: muFadeIn .2s ease;
}
.modal-overlay.open,
.modal-overlay.active,
.modal-overlay.show {
    display: flex;
}

/* Backdrop legacy (div separado) */
.modal-background {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--mu-overlay-bg);
    z-index: 9990;
    backdrop-filter: blur(5px);
}
.modal-background.show,
.modal-background.open {
    display: block;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CAJA PRINCIPAL DEL MODAL
   ═══════════════════════════════════════════════════════════════════════════ */
.modal-box,
.modal.pretium-modal,
.crm-modal {
    background: var(--mu-box-bg);
    border: 1px solid var(--mu-box-border);
    border-radius: var(--mu-box-radius);
    box-shadow: var(--mu-box-shadow);
    color: var(--mu-text);
    display: flex;
    flex-direction: column;
    max-height: 92vh;
    width: 95%;
    max-width: 640px;
    overflow: hidden;
    position: relative;
    animation: muSlideUp .25s cubic-bezier(.34,1.56,.64,1);
}
.modal-box.size-sm  { max-width: 420px; }
.modal-box.size-md  { max-width: 640px; }
.modal-box.size-lg  { max-width: 860px; }
.modal-box.size-xl  { max-width: 1100px; }

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER DEL MODAL
   ═══════════════════════════════════════════════════════════════════════════ */
.modal-header {
    background: var(--mu-header-bg);
    border-bottom: 1px solid var(--mu-header-border);
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.modal-header-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 140, 0, 0.15);
    border: 1px solid rgba(255, 140, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
    color: var(--mu-header-icon);
}
.modal-header-title {
    flex: 1;
    font-size: 15px;
    font-weight: 700;
    color: var(--mu-header-text);
    margin: 0;
    line-height: 1.3;
}
.modal-header-subtitle {
    font-size: 11px;
    color: var(--mu-text-muted);
    margin: 2px 0 0;
}
/* Compatibilidad con h2/h3 directos dentro del header */
.modal-header h2,
.modal-header h3 {
    flex: 1;
    font-size: 15px;
    font-weight: 700;
    color: var(--mu-header-text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.modal-header h2 i,
.modal-header h3 i {
    color: var(--mu-header-icon);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOTÓN CERRAR
   ═══════════════════════════════════════════════════════════════════════════ */
.modal-close,
.cerrar-modal,
button.modal-close-btn {
    background: none;
    border: 1px solid transparent;
    color: var(--mu-close-color);
    font-size: 15px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all .2s;
    padding: 0;
    line-height: 1;
}
.modal-close:hover,
.cerrar-modal:hover,
button.modal-close-btn:hover {
    background: var(--mu-close-hover-bg);
    border-color: var(--mu-close-hover-border);
    color: var(--mu-close-hover-color);
    transform: rotate(90deg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CUERPO DEL MODAL
   ═══════════════════════════════════════════════════════════════════════════ */
.modal-body {
    padding: 20px 22px;
    overflow-y: auto;
    flex: 1;
    color: var(--mu-text);
    scrollbar-width: thin;
    scrollbar-color: var(--mu-scroll-thumb) var(--mu-scroll-track);
}
.modal-body::-webkit-scrollbar        { width: 5px; }
.modal-body::-webkit-scrollbar-track  { background: var(--mu-scroll-track); }
.modal-body::-webkit-scrollbar-thumb  { background: var(--mu-scroll-thumb); border-radius: 3px; }
.modal-body::-webkit-scrollbar-thumb:hover { background: var(--mu-scroll-thumb-hover); }

/* Sección dentro del body */
.modal-section {
    margin-bottom: 20px;
}
.modal-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--mu-text-muted);
    margin: 0 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--mu-divider);
}

/* Divider */
.modal-divider {
    height: 1px;
    background: var(--mu-divider);
    margin: 16px 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORMULARIOS DENTRO DEL MODAL
   ═══════════════════════════════════════════════════════════════════════════ */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.form-grid.cols-1 { grid-template-columns: 1fr; }
.form-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }

.form-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.form-field.full,
.form-field.col-span-2 {
    grid-column: 1 / -1;
}

.form-field label,
.modal-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--mu-label);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin: 0;
}

.form-field input,
.form-field select,
.form-field textarea,
.modal-input {
    background: var(--mu-input-bg);
    border: 1.5px solid var(--mu-input-border);
    border-radius: 8px;
    color: var(--mu-input-text);
    font-size: 13px;
    font-family: inherit;
    padding: 9px 12px;
    width: 100%;
    box-sizing: border-box;
    transition: border-color .2s, box-shadow .2s;
    appearance: none;
    -webkit-appearance: none;
}

.form-field input::placeholder,
.form-field textarea::placeholder,
.modal-input::placeholder {
    color: var(--mu-input-placeholder);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
.modal-input:focus {
    outline: none;
    border-color: var(--mu-input-border-focus);
    box-shadow: 0 0 0 3px var(--mu-input-shadow-focus);
}

.form-field select option {
    background: var(--mu-input-bg);
    color: var(--mu-input-text);
}

.form-field textarea {
    resize: vertical;
    min-height: 80px;
}

/* Campo con icono */
.form-field.has-icon {
    position: relative;
}
.form-field.has-icon input {
    padding-left: 36px;
}
.form-field.has-icon .field-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mu-text-muted);
    font-size: 13px;
    pointer-events: none;
}

/* Hint / helper text */
.form-field .field-hint {
    font-size: 10.5px;
    color: var(--mu-text-muted);
    margin: 0;
}
.form-field .field-error {
    font-size: 10.5px;
    color: #f87171;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER DEL MODAL
   ═══════════════════════════════════════════════════════════════════════════ */
.modal-footer,
.mover-botones {
    background: var(--mu-footer-bg);
    border-top: 1px solid var(--mu-footer-border);
    padding: 14px 22px;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
    flex-shrink: 0;
}
.modal-footer.space-between { justify-content: space-between; }

/* ═══════════════════════════════════════════════════════════════════════════
   BOTONES DEL MODAL
   ═══════════════════════════════════════════════════════════════════════════ */
.mu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 20px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid var(--mu-btn-cancel-border, rgba(255,255,255,.12));
    transition: all .2s;
    white-space: nowrap;
    min-width: 90px;
    /* Neutralizar el color global de button en interface.css */
    background: var(--mu-btn-cancel-bg, rgba(255,255,255,.07)) !important;
    color: var(--mu-btn-cancel-text, rgba(255,255,255,.75)) !important;
}
.mu-btn:hover:not(:disabled) {
    opacity: .82;
}
.mu-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none !important;
}

/* Primario */
.mu-btn.primary,
.mu-btn-primary {
    background: var(--mu-btn-primary-bg) !important;
    color: var(--mu-btn-primary-text) !important;
    border-color: transparent !important;
}
.mu-btn.primary:hover:not(:disabled),
.mu-btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--mu-btn-primary-shadow);
    opacity: 1;
}

/* Cancelar / secundario */
.mu-btn.cancel,
.mu-btn-cancel {
    background: var(--mu-btn-cancel-bg) !important;
    border-color: var(--mu-btn-cancel-border) !important;
    color: var(--mu-btn-cancel-text) !important;
}
.mu-btn.cancel:hover:not(:disabled),
.mu-btn-cancel:hover:not(:disabled) {
    opacity: .8;
}

/* Peligro */
.mu-btn.danger,
.mu-btn-danger {
    background: var(--mu-btn-danger-bg) !important;
    border-color: var(--mu-btn-danger-border) !important;
    color: var(--mu-btn-danger-text) !important;
}
.mu-btn.danger:hover:not(:disabled),
.mu-btn-danger:hover:not(:disabled) {
    filter: brightness(1.15);
    opacity: 1;
}

/* Icono solamente */
.mu-btn.icon-only {
    width: 34px;
    height: 34px;
    min-width: unset;
    padding: 0;
    border-radius: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BADGES Y TAGS DENTRO DEL MODAL
   ═══════════════════════════════════════════════════════════════════════════ */
.mu-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    background: var(--mu-badge-bg);
    color: var(--mu-badge-text);
    border: 1px solid var(--mu-badge-border);
    text-transform: uppercase;
    letter-spacing: .4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INFO BOX / ALERTAS DENTRO DEL MODAL
   ═══════════════════════════════════════════════════════════════════════════ */
.mu-info-box {
    background: rgba(255, 140, 0, 0.08);
    border: 1px solid rgba(255, 140, 0, 0.2);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 12.5px;
    color: var(--mu-text);
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 12px 0;
}
.mu-info-box i { color: #ff8c00; font-size: 14px; flex-shrink: 0; margin-top: 1px; }

.mu-alert-success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 12.5px;
    color: var(--mu-text);
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 12px 0;
}
.mu-alert-success i { color: #22c55e; flex-shrink: 0; }

.mu-alert-danger {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 12.5px;
    color: var(--mu-text);
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 12px 0;
}
.mu-alert-danger i { color: #ef4444; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   MODAL DE CONFIRMACIÓN (genérico)
   ═══════════════════════════════════════════════════════════════════════════ */
.mu-confirm-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 26px;
}
.mu-confirm-icon.warning {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 2px solid rgba(245, 158, 11, 0.3);
}
.mu-confirm-icon.danger {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 2px solid rgba(239, 68, 68, 0.3);
}
.mu-confirm-icon.success {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    border: 2px solid rgba(34, 197, 94, 0.3);
}
.mu-confirm-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--mu-text);
    text-align: center;
    margin: 0 0 8px;
}
.mu-confirm-desc {
    font-size: 13px;
    color: var(--mu-text-muted);
    text-align: center;
    line-height: 1.6;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMACIONES
   ═══════════════════════════════════════════════════════════════════════════ */
@keyframes muFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes muSlideUp {
    from { opacity: 0; transform: translateY(20px) scale(.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVO
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .modal-overlay { padding: 0; align-items: flex-end; }
    .modal-box, .modal.pretium-modal, .crm-modal {
        width: 100%;
        max-width: 100%;
        border-radius: 16px 16px 0 0;
        max-height: 96vh;
        animation: muSlideUp .3s cubic-bezier(.34,1.56,.64,1);
    }
    .form-grid { grid-template-columns: 1fr !important; }
    .modal-footer, .mover-botones { flex-wrap: wrap; }
    .mu-btn { flex: 1; min-width: 120px; }
}