/* ============================================================================
 * dialogs.css — Sistema estandar de modales/dialogs de la plataforma.
 *
 * Diseño: Glass morphism + Material Design 3.
 * - Backdrop con blur + dim
 * - Card con border-radius 16px
 * - Header sticky, body scrolleable, footer con flex
 * - Sizes: sm 320 / md 640 / lg 800 / xl 1080
 * - Variants: default / danger / warning / success (acentos en el accent border)
 * - HTML estructura:
 *   <div id="modal" class="modal-overlay hidden" data-modal-size="md" data-modal-variant="default">
 *       <div class="modal-backdrop" onclick="close"></div>
 *       <div class="modal-card">
 *           <header class="modal-header">
 *               <h3 class="modal-title">
 *                   <span class="material-symbols-rounded modal-title-icon">icon</span>
 *                   Title
 *               </h3>
 *               <button class="modal-close" aria-label="Cerrar">
 *                   <span class="material-symbols-rounded">close</span>
 *               </button>
 *           </header>
 *           <div class="modal-body">...content...</div>
 *           <footer class="modal-footer">
 *               <button class="btn-secondary">Cancel</button>
 *               <button class="btn-primary">OK</button>
 *           </footer>
 *       </div>
 *   </div>
 * ============================================================================ */

/* === Design tokens === */
:root {
    --modal-z: 1000;
    --modal-backdrop-bg: rgba(15, 23, 42, 0.4);
    --modal-backdrop-blur: blur(4px);
    --modal-card-bg: var(--md-sys-color-surface-container-lowest);
    --modal-card-border: 1px solid var(--md-sys-color-outline-variant);
    --modal-card-radius: 16px;
    --modal-card-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
    --modal-padding: 1.5rem;
    --modal-header-padding-y: 1rem;
    --modal-footer-padding-y: 1rem;
    --modal-max-height: 90vh;
    --modal-title-icon-size: 1.25rem;
    --modal-color-default: var(--md-sys-color-primary);
    --modal-color-danger: #dc2626;
    --modal-color-warning: #d97706;
    --modal-color-success: #16a34a;
}

/* === Overlay (full-screen backdrop + card) === */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--modal-z);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: modal-fade-in 0.15s ease-out;
}
.modal-overlay.hidden {
    display: none;
}

@keyframes modal-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* === Backdrop (click-to-close) === */
.modal-backdrop {
    position: absolute;
    inset: 0;
    background: var(--modal-backdrop-bg);
    backdrop-filter: var(--modal-backdrop-blur);
    -webkit-backdrop-filter: var(--modal-backdrop-blur);
}

/* === Card (the actual modal content) === */
.modal-card {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 640px;
    width: 100%;
    max-height: var(--modal-max-height);
    background: var(--modal-card-bg);
    border: var(--modal-card-border);
    border-radius: var(--modal-card-radius);
    box-shadow: var(--modal-card-shadow);
    overflow: hidden;
    animation: modal-pop-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modal-pop-in {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* === Sizes === */
.modal-overlay[data-modal-size="sm"] .modal-card { max-width: 420px; }
.modal-overlay[data-modal-size="md"] .modal-card { max-width: 640px; }
.modal-overlay[data-modal-size="lg"] .modal-card { max-width: 800px; }
.modal-overlay[data-modal-size="xl"] .modal-card { max-width: 1080px; }

/* === Variants (accent color en el border-left) === */
.modal-overlay[data-modal-variant="danger"]  .modal-card { border-left: 4px solid var(--modal-color-danger); }
.modal-overlay[data-modal-variant="warning"] .modal-card { border-left: 4px solid var(--modal-color-warning); }
.modal-overlay[data-modal-variant="success"] .modal-card { border-left: 4px solid var(--modal-color-success); }

/* === Header === */
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: var(--modal-header-padding-y) var(--modal-padding);
    border-bottom: var(--modal-card-border);
    flex-shrink: 0;
    background: var(--modal-card-bg);
}
.modal-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
    line-height: 1.3;
}
.modal-title-icon {
    font-size: var(--modal-title-icon-size);
    color: var(--modal-color-default);
}
.modal-overlay[data-modal-variant="danger"]  .modal-title-icon { color: var(--modal-color-danger); }
.modal-overlay[data-modal-variant="warning"] .modal-title-icon { color: var(--modal-color-warning); }
.modal-overlay[data-modal-variant="success"] .modal-title-icon { color: var(--modal-color-success); }

/* === Close button === */
.modal-close {
    background: transparent;
    border: none;
    color: var(--md-sys-color-on-surface-variant);
    cursor: pointer;
    padding: 0.4rem;
    margin: -0.4rem;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.modal-close:hover {
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
}
.modal-close .material-symbols-rounded {
    font-size: 1.25rem;
}

/* === Body === */
.modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--modal-padding);
    color: var(--md-sys-color-on-surface);
    font-size: 0.92rem;
    line-height: 1.5;
    /* Scrollbar styling for Webkit */
    scrollbar-width: thin;
    scrollbar-color: var(--md-sys-color-outline) transparent;
}
.modal-body::-webkit-scrollbar {
    width: 8px;
}
.modal-body::-webkit-scrollbar-thumb {
    background: var(--md-sys-color-outline-variant);
    border-radius: 4px;
}
.modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.modal-message {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--md-sys-color-on-surface);
}

/* === Footer === */
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: var(--modal-footer-padding-y) var(--modal-padding);
    border-top: var(--modal-card-border);
    flex-shrink: 0;
    background: var(--modal-card-bg);
}
.modal-footer .btn-secondary,
.modal-footer .btn-primary,
.modal-footer .btn-danger {
    margin: 0;
}

/* === Buttons (use existing system classes; just alignment) === */
.modal-footer > button {
    min-width: 80px;
}

/* === Disabled backdrop click (e.g. for forced modals) === */
.modal-overlay.no-dismiss .modal-backdrop {
    pointer-events: none;
}
.modal-overlay.no-dismiss .modal-close {
    display: none;
}

/* === Loading state === */
.modal-overlay[data-modal-loading="true"] .modal-card {
    pointer-events: none;
    opacity: 0.7;
}
.modal-overlay[data-modal-loading="true"]::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 32px; height: 32px;
    margin: -16px 0 0 -16px;
    border: 3px solid var(--md-sys-color-outline-variant);
    border-top-color: var(--md-sys-color-primary);
    border-radius: 50%;
    animation: modal-spin 0.8s linear infinite;
}
@keyframes modal-spin { to { transform: rotate(360deg); } }

/* === Mobile === */
@media (max-width: 640px) {
    .modal-overlay[data-modal-size="xl"] .modal-card,
    .modal-overlay[data-modal-size="lg"] .modal-card,
    .modal-overlay[data-modal-size="md"] .modal-card {
        max-width: 100%;
    }
    .modal-overlay {
        padding: 0.5rem;
    }
}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
    .modal-overlay,
    .modal-card {
        animation: none !important;
    }
}

/* === Backwards compatibility (legacy classes used elsewhere) === */
/* Old .modal-content.glass etc. are kept in template files where
   they were already used. This stylesheet only defines the new
   system. To migrate, see individual template migrations. */