:root {
    /* ajustes rápidos */
    --winx-dialog-max-width: none;
    --winx-dialog-side: 0;
    --winx-dialog-padding: 5px;
    --winx-footer-gap: 5px;
    --winx-close-color: black;
}

/*****************************************************************************************************/
/* NORMALIZACIÓN MÓVIL: FOOTERS (alert / warn / dialog)                                              */
/* objetivo: mismo padding lateral + misma separación de botones + sin márgenes heredados            */
/*****************************************************************************************************/

/* footer base: pisa winx.css (padding 10px + márgenes 5px) */
[class*="winx-footer"] {
    margin: 0 auto !important;
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center !important;

    /* el padding real que quieres que se vea igual */
    padding: var(--winx-dialog-padding) !important;

    /* evita bordes/estilos que visualmente cambian la altura */
    box-sizing: border-box;
    gap: var(--winx-footer-gap);
}

/* elimina los márgenes heredados de winx.css en hijos del footer */
[class*="winx-footer"] > * {
    margin: 0 !important;
}

/* contenedor de botones: que ocupe todo y no meta padding diferente */
.buttons-container {
    display: flex;
    width: 100%;
    padding: 5px !important;          /* pisa el padding 0.5em del winx.css si aplica */
    margin: 0 !important;
    gap: var(--winx-footer-gap);
    box-sizing: border-box;
}

/* si hay dos botones (space-between), el padding lateral lo da el footer, no el container */
.buttons-container.space-between-buttons {
    justify-content: space-between;
    padding: 5px !important;
}

/* centrado */
.buttons-container.center-buttons {
    justify-content: center;
    padding: 5px !important;
}

/* asegúrate de que los botones no añaden margen raro */
.buttons-container .btn,
.buttons-container button {
    margin: 0 !important;
}

/*****************************************************************************************************/
/* ESTILOS WINX PARA VENTANA DIALOG DESDE EL MÓVIL (FULLSCREEN REAL)                                 */
/*****************************************************************************************************/

.winx-content.dialog {
    margin: 0;
    border: none;
    border-radius: 0;
    width: 100%;
    max-width: 100%;
    padding-left: var(--winx-dialog-side);
    padding-right: var(--winx-dialog-side);
}

/* modo fullscreen activado desde JS con la clase winx-fullscreen-mobile */
.my-winx.winx.dialog {
    position: fixed;
    inset: 0;
    margin: 0;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.winx-fullscreen-mobile {
    width: 100vw !important;
    height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;

    max-width: none;
    max-height: none;

    display: flex;
    flex-direction: column;

    border-radius: 0;
    border: 0;
    box-shadow: none;

    margin: 0;
}

/* cabecera arriba fija */
.winx-fullscreen-mobile .winx-header-dialog {
    flex: 0 0 auto;
    border-radius: 0;
}

/* body ajustable con scroll si es necesario */
.winx-fullscreen-mobile .winx-body-dialog {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--winx-dialog-padding);
}

/* footer pegado abajo visible siempre */
.winx-fullscreen-mobile .winx-footer-dialog {
    flex: 0 0 auto;
    width: 100%;
    border-radius: 0;

    /* mantiene el mismo padding lateral que alert y warn */
    padding: var(--winx-dialog-padding) !important;
    padding-bottom: max(var(--winx-dialog-padding), env(safe-area-inset-bottom)) !important;

    display: flex !important;
    justify-content: center !important;
    box-sizing: border-box;
    gap: var(--winx-footer-gap);
}

/*****************************************************************************************************/
/* GENERAL: cuerpo en dialog (móvil)                                                                 */
/*****************************************************************************************************/

.winx-content.dialog [class*="winx-body"] {
    padding: var(--winx-dialog-padding);
    max-height: max-content;
}

/*****************************************************************************************************/
/* ALERT (móvil)                                                                                    */
/*****************************************************************************************************/

.winx-content.modal-alert.winx-move {
    width: 99%;
    background: #000000d4;
    border: 1px solid black;
    border-radius: 0;
    color: white;
    backdrop-filter: blur(1px) brightness(0.8) contrast(1.2);
}

.winx-header-alert {
    border: 0;
    background: none;
    color: red;
}

button.winx-close.alert.window-close {
    color: white;
}

.winx-footer-alert {
    border: 0;
    background: none;
}

.winx-body-alert {
    background: none;
    color: white;
}

div#modal-alert {
    position: absolute;
    top: 50%;
    display: inline-flex !important;
    width: 100%;
    justify-content: space-evenly;
}

/*****************************************************************************************************/
/* WARN (móvil)                                                                                     */
/*****************************************************************************************************/

.winx-content.modal-warn.winx-move {
    width: 99%;
    background: #0000007a;
    border: 1px solid black;
    border-radius: 10px;
    color: white;
    backdrop-filter: blur(1px) brightness(0.8) contrast(1.2);
}

.winx-header-warn {
    border: 0;
    background: none;
    color: yellow;
}

button.winx-close.warn.window-close {
    color: white;
}

.winx-footer-warn {
    border: 0;
    background: none;
}

.winx-body-warn {
    background: none;
    color: white;
}

/*****************************************************************************************************/
/* Menos animaciones si el usuario lo prefiere                                                      */
/*****************************************************************************************************/

@media (prefers-reduced-motion: reduce) {
    .winx-content.dialog,
    .winx-header-dialog,
    .winx-footer-dialog {
        transition: none !important;
        animation: none !important;
    }
}