/* ============================================= */
/* PAE Component: Modal (Contenedor Principal)  */
/* ============================================= */
:root {
    --pae-z-index-modal: 1000;
}

/* --- Estilos del Overlay/Backdrop --- */
.pae-modal::backdrop {
    background-color: var(--pae-color-overlay-dark);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity var(--pae-transition-base);
}

.pae-modal[open]::backdrop {
    opacity: 1;
}

/* --- Estructura Principal del Modal --- */
.pae-modal {
    font-family: var(--pae-font-family-base);
    color: var(--pae-color-text-primary);
    background-color: var(--pae-color-surface);
    border: none;
    border-radius: var(--pae-border-radius-xxl);
    box-shadow: var(--pae-shadow-md);
    padding: 0;
    width: 90%;
    max-width: 500px;
    z-index: var(--pae-z-index-modal);
    /* === LÍNEA AÑADIDA PARA FORZAR EL CENTRADO === */
    margin: auto;
    /* Animación de entrada */
    opacity: 0;
    transform: scale(0.95) translateY(10px);
    transition: opacity var(--pae-transition-duration) ease-in-out, transform var(--pae-transition-duration) ease-in-out;
}

    .pae-modal[open] {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

.pae-modal__dialog {
    position: relative;
    /* ... otros estilos como width, background, etc. ... */
}


/* --- Modificadores de Tamaño --- */
.pae-modal--sm {
    max-width: 380px;
}

.pae-modal--md {
    max-width: 500px;
}

.pae-modal--lg {
    max-width: 800px;
}

.pae-modal--xl {
    max-width: 1200px;
}

.pae-modal--full {
    max-width: 100vw;
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    margin: 0;
}



/* --- Modificadores de Estado (Ejemplo para Errores) --- */
.pae-modal--error .pae-modal__header {
    background-color: var(--pae-color-primary);
    color: var(--pae-color-surface);
}

.pae-modal--error .pae-modal__close-button {
    color: var(--pae-color-surface);
}

/* --- Elementos Internos del Modal --- */
.pae-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--pae-spacing-md) var(--pae-spacing-lg) var(--pae-spacing-sm) var(--pae-spacing-lg);
    /*border-bottom: 1px solid var(--pae-color-border);*/
    font-size: var(--pae-font-size-h1);
    padding-right: 3rem; /* Espacio para que el título no quede debajo del botón de cierre */
}

.pae-modal__title {
    font-weight: var(--pae-font-weight-bold);
    margin: 0;
    line-height: 1.4;
    width: 100%;
}


.pae-modal__close-button {
    position: absolute;
    top: var(--pae-spacing-md);
    right: var(--pae-spacing-md);
    z-index: 10;
    background:var(--pae-color-surface);
    border: none;
    outline: none;
    padding: var(--pae-spacing-sm) var(--pae-spacing-md);
    margin: calc(var(--pae-spacing-sm) * -1);
    cursor: pointer;
    color: var(--pae-color-text-secondary);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--pae-transition-fast);
    font-size: var(--pae-font-size-h1);
}

    .pae-modal__close-button:hover{
        background-color: var(--pae-color-neutral-150);
        color: var(--pae-color-text-primary);
    }
    .pae-modal__close-button:focus-visible {
        border: none;
    }




/* El contenido principal */
.pae-modal__content {
    padding: 0 var(--pae-spacing-lg) var(--pae-spacing-lg);
}

/*
.pae-modal__content {
    padding: var(--pae-spacing-md);
}*/

.pae-modal--fullscreen .pae-modal__content {
    height: calc(100% - 140px);
    max-height: none;
}

.pae-modal__content iframe {
    width: 100%;
    height: 100%;
    min-height: 70vh;
    border: none;
}

.pae-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--pae-spacing-sm);
    padding: var(--pae-spacing-md) var(--pae-spacing-md);
    border-top: 1px solid var(--pae-color-border);
    background-color: var(--pae-color-neutral-100);
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

.pae-modal__body {
    /* Permite el scroll si el contenido es más alto que el modal */
    overflow-y: auto;
    max-height: 80vh; /* Límite de altura para evitar modales demasiado largos */
}