/**
 * winx.css - Estructura de ventanas y modales del sistema Tecko
 * 
 * ESTRUCTURA (responsabilidad principal):
 * - Ventanas modales (dialog, alert, warn)
 * - Sistema de toasts (notificaciones)
 * - Botones de ventana
 * - Animaciones de ventanas y toasts
 * - Dimensiones, anchos, tamaños
 * - Cursor grab/grabbing para ventanas arrastrables
 */

/* ============================================
   VARIABLES CSS
   ============================================ */
/* Oscuro tipo Monokai (fondo #272822, bordes #3e3d32, texto #f8f8f2): menos azul y menos contraste. */
:root {
    --bg-modal-overlay: rgba(0, 0, 0, 0.5);
    --bg-modal: #272822;
    --bg-modal-header: rgba(255, 255, 255, 0.06);
    --bg-modal-footer: rgba(255, 255, 255, 0.04);
    --text-modal-header: #f8f8f2;
    --text-modal-close: #a59f85;
    --border-modal: #3e3d32;
    --text-danger: #ef4444;
    --bg-btn-danger: rgba(239, 68, 68, 0.15);
    --border-btn-danger: rgba(239, 68, 68, 0.3);
    --scrollbar-thumb: rgba(117, 113, 94, 0.6);
}

[data-theme="light"] {
    --bg-modal-overlay: rgba(15, 23, 42, 0.35);
    --bg-modal: #ffffff;
    --bg-modal-header: rgba(15, 23, 42, 0.06);
    --bg-modal-footer: rgba(15, 23, 42, 0.03);
    --text-modal-header: #0f172a;
    --text-modal-close: #64748b;
    --border-modal: #e2e8f0;
    --scrollbar-thumb: rgba(100, 116, 139, 0.45);
}

/* ============================================
   OVERLAY
   ============================================ */
.winx-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-modal-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
    animation: winxFadeIn 0.2s ease;
}

/* winx.dialog es una ventana flotante, no modal: deja seleccionar e interactuar con el fondo.
   winx.warn y winx.alert conservan el overlay modal oscuro y bloqueante. */
.winx-overlay.winx-dialog-overlay {
    background: transparent;
    pointer-events: none;
}
.winx-overlay.winx-dialog-overlay > .winx {
    pointer-events: auto;
}

/* ============================================
   VENTANAS MODALES - ESTRUCTURA BASE
   ============================================ */
.winx {
    background: var(--bg-modal);
    border: 1px solid var(--border-modal);
    border-radius: 12px;
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    overflow: hidden;
    animation: winxSlideUp 0.3s ease;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    z-index: 505;
}

/* ============================================
   TAMAÑOS DE VENTANA
   ============================================ */
.winx-sm { max-width: 420px !important; }
.winx-md { max-width: 600px; }
.winx-lg { max-width: 900px; }
.winx-xl { max-width: 1200px; }

/* Tamaños en cm */
.winx-5cm { width: 5cm; min-width: 5cm; }
.winx-10cm { width: 10cm; min-width: 10cm; }
.winx-15cm { width: 15cm; min-width: 15cm; }

/* ============================================
   HEADER DE VENTANA - DRAG
   ============================================ */
.winx-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    /* Misma cabecera que las ventanas del terminal: 6 + 30 (botones) + 6 px. */
    padding: 6px 8px 6px 14px;
    border-bottom: 1px solid var(--bg-modal-header);
    cursor: grab;
    flex-shrink: 0;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.winx-header:active {
    cursor: grabbing;
}
.winx-header h3 {
    font-size: 13px;
    color: var(--text-modal-header);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.winx-icon {
    font-size: 1.1em;
}

/* ============================================
   BOTÓN CERRAR DE VENTANA
   ============================================ */
.winx-close {
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-modal-close);
    font-size: 1.1em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, background 0.2s;
    flex-shrink: 0;
}
.winx-close:hover {
    background: #dc2626;
    color: #fff;
}

/* Todos los diálogos, alertas y confirmaciones tienen cierre rápido en el header. */
.winx-close .icon {
    width:18px !important;
    height:18px !important;
    min-width:18px !important;
    min-height:18px !important;
}
.winx-alert .winx-close,
.winx-warn .winx-close {
    width:30px;
    height:30px;
    border:none;
    background:transparent;
    padding:0;
}
.winx-alert .winx-close:hover,
.winx-warn .winx-close:hover {
    background: #dc2626;
    color: #fff;
}

/* ============================================
   BODY Y FOOTER
   ============================================ */
.winx-body {
    padding: 20px;
    color: var(--text-modal-header);
    line-height: 1.5;
}

.winx-body p {
    margin: 0 0 12px 0;
}
.winx-body p:last-child {
    margin-bottom: 0;
}

/* Reusable form controls owned by winx, not by individual modules. */
.winx-body .form-field { margin-bottom: 16px; }
.winx-body .form-field:last-child { margin-bottom: 0; }
.winx-body .form-field label {
    display: block;
    margin-bottom: 6px;
    color: var(--text-muted, #a59f85);
    font-size: 13px;
    font-weight: 500;
}
.winx-body .modal-input,
.winx-body .modal-select {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    background: var(--cfg-surface, #1e1f1c);
    border: 1px solid var(--border-modal, #3e3d32);
    border-radius: 8px;
    color: var(--text-primary, #f8f8f2);
    font-size: 14px;
    outline: none;
}
.winx-body .modal-input:focus,
.winx-body .modal-select:focus {
    border-color: var(--text-muted, #75715e);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--text-muted, #75715e) 25%, transparent);
}

[data-theme="light"] .winx-body .form-field label {
    color: #475569;
}
[data-theme="light"] .winx-body .modal-input,
[data-theme="light"] .winx-body .modal-select {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #0f172a;
}
[data-theme="light"] .winx-body .modal-input::placeholder {
    color: #94a3b8;
}

.winx-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: nowrap;
    align-items: center;
    flex-shrink: 0;
    padding: 14px 20px;
    border-top: 1px solid var(--bg-modal-header);
    background: var(--bg-modal);
    border-radius: 0 0 12px 12px;
}

/* ============================================
   SCROLLABLE VENTANA
   ============================================ */
.winx-scrollable {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}
.winx-scrollable .winx-header {
    flex-shrink: 0;
}
.winx-scrollable .winx-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    min-height: 0;
}
.winx-scrollable .winx-footer {
    position: sticky;
    bottom: 0;
    z-index: 10;
    padding: 14px 20px;
    border-top: 1px solid var(--border-modal);
    background: var(--bg-modal);
    backdrop-filter: none;
    border-radius: 0 0 12px 12px;
}

/* ============================================
   BOTONES EN FOOTER
   ============================================ */
.winx-footer .winx-btn {
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid transparent;
    font-weight: 500;
}
.winx-footer .winx-btn:hover {
    transform: translateY(-1px);
}
.winx-footer .winx-btn:active {
    transform: translateY(0);
}
.winx-footer .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
}
.winx-footer .btn-primary { background: #6366f1; color: #fff; }
.winx-footer .btn-primary:hover { background: #818cf8; }
.winx-footer .btn-secondary { background: var(--bg-hover, #3e3d32); color: var(--text-primary, #f8f8f2); border-color: var(--border, #49483e); }
.winx-footer .btn-secondary:hover { background: var(--border, #49483e); }
.winx-footer .btn-danger { background: #ef4444; color: #fff; }
.winx-footer .btn-danger:hover { background: #dc2626; }
.winx-btn-secondary {
    background: var(--bg-hover, #3e3d32);
    color: var(--text-primary, #f8f8f2);
    border-color: var(--border, #49483e) !important;
}
.winx-btn-secondary:hover { background: var(--border, #49483e); }
.winx-btn-primary {
    background: #6366f1;
    color: #fff;
    border-color: #6366f1 !important;
}
.winx-btn-primary:hover { background: #818cf8; }
.winx-btn-danger {
    background: #ef4444;
    color: #fff;
    border-color: #ef4444 !important;
}
.winx-btn-danger:hover { background: #dc2626; }
.winx-btn-success {
    background: #22c55e;
    color: #fff;
    border-color: #22c55e !important;
}
.winx-btn-warning {
    background: #f59e0b;
    color: #111827;
    border-color: #f59e0b !important;
}
.winx-btn-info {
    background: #3b82f6;
    color: #fff;
    border-color: #3b82f6 !important;
}

/* ============================================
   TOAST CONTAINER - CENTRADO INFERIOR
   ============================================ */
.winx-toast-container {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
    width:min(350px,calc(100vw - 24px));
    max-width:calc(100vw - 24px);
    box-sizing:border-box;
}

/* ============================================
   TOAST ELEMENTS
   ============================================ */
.winx-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    padding:7px 10px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 700;
    pointer-events: auto;
    cursor: default;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    animation: winxToastSlideIn 0.3s ease;
    transition: all 0.2s ease;
}

.winx-toast:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

/* Toast icon */
.winx-toast-icon {
    font-size: 1.2em;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

/* Toast message */
.winx-toast-msg {
    flex:1 1 auto;
    min-width:0;
    font-size:1em;
    line-height:1.25;
    white-space:normal;
    overflow-wrap:anywhere;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
}

/* Close button - hidden by default, shown on hover */
.winx-toast-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.2em;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 8px;
    display: none;
    transition: all 0.2s;
    line-height: 1;
    flex-shrink: 0;
    border-radius: 4px;
}
.winx-toast-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
}

/* Show close button on hover */
.winx-toast:hover .winx-toast-close {
    display: block;
}

/* Toast types */
.winx-toast-success {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.9), rgba(22, 163, 74, 0.95));
    color: #fff;
    border: 1px solid rgba(34, 197, 94, 0.5);
}
.winx-toast-error {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(220, 38, 38, 0.95));
    color: #fff;
    border: 1px solid rgba(239, 68, 68, 0.5);
}
.winx-toast-warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.9), rgba(217, 119, 6, 0.95));
    color: #fff;
    border: 1px solid rgba(245, 158, 11, 0.5);
}
.winx-toast-info {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(37, 99, 235, 0.95));
    color: #fff;
    border: 1px solid rgba(59, 130, 246, 0.5);
}

/* Toast hide animation */
.winx-toast.hiding {
    animation: winxToastSlideOut 0.3s ease forwards;
}

/* ============================================
   ANIMACIONES
   ============================================ */
@keyframes winxFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes winxSlideUp {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes winxToastSlideIn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes winxToastSlideOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(30px); }
}

/* ============================================
   RESPONSIVE MOVIL - VENTANAS Y FORMULARIOS
   ============================================ */
@media (max-width: 768px) {
    .winx-overlay {
        padding: 8px;
        box-sizing: border-box;
    }
    .winx,
    .winx-sm,
    .winx-md,
    .winx-lg,
    .winx-xl,
    .winx-5cm,
    .winx-10cm,
    .winx-15cm {
        width: calc(100vw - 16px) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
        margin: 0 !important;
    }
    .winx-scrollable { max-height: calc(100dvh - 16px) !important; }
    .winx-body {
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 16px;
    }
    .winx-body input,
    .winx-body select,
    .winx-body textarea {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .winx-footer {
        padding: 12px 16px;
        flex-wrap: wrap;
    }
    /* Regla global móvil: con teclado abierto ningún footer Winx ocupa pantalla útil. */
    body.tecko-keyboard-open .winx-overlay .winx-footer {
        display:none !important;
    }
}

/* Dialogos a pantalla completa en movil. Alert y warn conservan su formato compacto. */
@media (max-width: 768px) {
    .winx.winx-dialog {
        position: fixed;
        inset: 0;
        width: 100vw !important;
        height: 100dvh !important;
        min-width: 100vw !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .winx.winx-dialog .winx-header,
    .winx.winx-dialog .winx-footer {
        border-radius: 0;
    }

    .winx.winx-dialog .winx-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }
}

/* Dialogos a pantalla completa: el body aprovecha todo el ancho en movil */
@media (max-width: 768px) {
    .winx.winx-dialog .winx-body {
        padding-left: 0;
        padding-right: 0;
    }

    /* Las fichas de aplicación ocupan toda el área útil, pero respetan el header general de Tecko. */
    .winx-overlay.winx-app-form-overlay {
        inset: 60px 0 0 0;
        padding: 0;
        align-items: stretch;
        justify-content: stretch;
        overflow:hidden;
        overscroll-behavior:none;
    }
    .winx.winx-dialog.winx-app-form {
        inset: 60px 0 0 0 !important;
        width: 100vw !important;
        transform:none !important;
        animation:winxFadeIn .16s ease;
        min-width: 100vw !important;
        height: calc(100dvh - 60px) !important;
        min-height: calc(100dvh - 60px) !important;
        max-height: calc(100dvh - 60px) !important;
    }
    .winx.winx-dialog.winx-app-form .winx-footer {
        min-height: 0;
        padding: 0;
        border-top: 0;
        background: transparent;
    }
}

/* Confirmaciones breves: las tres decisiones deben caber en una sola línea en móvil. */
@media (max-width: 768px) {
    .winx-warn .winx-footer {
        gap: 7px;
        padding: 12px 14px;
    }
    .winx-warn .winx-footer .winx-btn,
    .winx-warn .winx-footer .btn {
        padding: 8px 10px;
    }
}

@media(max-width:760px){
    .winx-toast-container{
        bottom:calc(98px + env(safe-area-inset-bottom));
    }
}

/* ============================================
   BOTONES SIEMPRE EN UNA LÍNEA
   El texto de un botón nunca se parte: si no caben todos, el botón entero pasa a
   la fila siguiente. Así el icono no se descoloca ni desborda, sobre todo en móvil.
   ============================================ */
.winx-footer { flex-wrap: wrap; row-gap: 8px; }
.winx .winx-btn,
.winx .btn,
.winx button.btn {
    white-space: nowrap !important;
    min-width: 0;
    max-width: 100%;
}
.winx .winx-btn .icon,
.winx .btn .icon { flex: 0 0 auto; }
@media (max-width: 768px) {
    .winx-footer .winx-btn,
    .winx-footer .btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* Botones que no caben en una fila: rejilla de dos columnas iguales (50 % / 50 %)
   y, si son impares, el último ocupa toda la fila. winx.js decide cuándo aplicarla. */
.winx-footer.winx-footer-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.winx-footer.winx-footer-grid > * {
    width: 100%;
    min-width: 0;
    margin: 0;
    justify-content: center;
    box-sizing: border-box;
}
.winx-footer.winx-footer-grid > .winx-footer-span { grid-column: 1 / -1; }
.winx-footer .btn-primary.is-danger{background:#dc2626}.winx-footer .btn-primary.is-danger:hover{background:#b91c1c}

/* ============================================
   VENTANAS CON TAMAÑO: botones de cabecera, tiradores, maximizar y minimizar
   ============================================ */
.winx { position: relative; }
.winx-overlay[hidden] { display: none; }
.winx-header h3 { min-width: 0; }
.winx-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    margin-left: 12px;
}
.winx-action {
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-modal-close);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.2s, background 0.2s;
}
.winx-action:hover {
    background: var(--bg-modal-header);
    color: var(--text-modal-header);
}
.winx-action .icon { width: 15px; height: 15px; flex: 0 0 15px; }

.winx-moving, .winx-moving * { cursor: grabbing !important; user-select: none !important; }
.winx-resizing, .winx-resizing * { user-select: none !important; }
/* Mientras se arrastra, un iframe del cuerpo no se queda con el puntero. */
.winx-moving .winx-body, .winx-resizing .winx-body { pointer-events: none; }

/* Las esquinas miden 20 px: con la ventana redondeada, la punta queda recortada y el
   tirador tiene que llegar a la parte visible. */
.winx-grip { position: absolute; z-index: 20; touch-action: none; }
.winx-grip[data-winx-resize="n"] { top: 0; left: 20px; right: 20px; height: 5px; cursor: ns-resize; }
.winx-grip[data-winx-resize="s"] { bottom: 0; left: 20px; right: 20px; height: 6px; cursor: ns-resize; }
.winx-grip[data-winx-resize="e"] { right: 0; top: 20px; bottom: 20px; width: 6px; cursor: ew-resize; }
.winx-grip[data-winx-resize="w"] { left: 0; top: 20px; bottom: 20px; width: 6px; cursor: ew-resize; }
.winx-grip[data-winx-resize="ne"] { top: 0; right: 0; width: 20px; height: 20px; cursor: nesw-resize; }
.winx-grip[data-winx-resize="sw"] { bottom: 0; left: 0; width: 20px; height: 20px; cursor: nesw-resize; }
.winx-grip[data-winx-resize="nw"] { top: 0; left: 0; width: 20px; height: 20px; cursor: nwse-resize; }
.winx-grip[data-winx-resize="se"] { bottom: 0; right: 0; width: 20px; height: 20px; cursor: nwse-resize; }
.winx-grip[data-winx-resize="se"]::after {
    content: "";
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--text-modal-close);
    border-bottom: 2px solid var(--text-modal-close);
    border-radius: 0 0 3px 0;
    opacity: .6;
}

/* Con alto propio (redimensionada o maximizada) el cuerpo ocupa lo que queda y hace scroll. */
.winx-sized .winx-body,
.winx-maximized .winx-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}
.winx.winx-maximized {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    border: 0;
    border-radius: 0 !important;
}
.winx-maximized .winx-header { cursor: default; }
.winx-maximized .winx-footer { border-radius: 0 !important; }
.winx-maximized .winx-grip { display: none; }

/* Ventanas minimizadas: una pastilla por ventana, abajo a la derecha. */
.winx-dock {
    position: fixed;
    z-index: 2147483000;
    right: 16px;
    bottom: 16px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    max-width: calc(100vw - 32px);
}
.winx-dock[hidden] { display: none; }
/* Las barras se arrastran (desde el hueco o desde una pastilla) a otra parte de la pantalla. */
.winx-dock-movable { touch-action: none; cursor: grab; padding: 4px; border-radius: 999px; }
.winx-dock-moving, .winx-dock-moving button { cursor: grabbing; user-select: none; }
.winx-dock-moving { opacity: .92; }
.winx-dock button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 220px;
    padding: 7px 12px;
    border: 1px solid var(--border-modal);
    border-radius: 999px;
    background: var(--bg-modal);
    color: var(--text-modal-header);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.winx-dock button:hover { border-color: var(--text-modal-close); }
.winx-dock button .icon { width: 15px; height: 15px; flex: 0 0 auto; }
.winx-dock button span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* En móvil los diálogos ya ocupan toda la pantalla: no hay tamaño que cambiar. */
@media (max-width: 768px) {
    .winx-grip, .winx-action[data-winx-max] { display: none; }
    .winx-dock { bottom: calc(16px + env(safe-area-inset-bottom)); }
}


/* ============================================
   winx.mobile — ventana específica móvil
   ============================================ */
.winx-overlay.winx-mobile-overlay {
    padding:0 !important;
    align-items:stretch;
    justify-content:stretch;
}
.winx.winx-mobile {
    position:fixed;
    inset:0;
    width:100vw !important;
    min-width:100vw !important;
    height:100dvh !important;
    max-width:none !important;
    max-height:none !important;
    margin:0 !important;
    border:0;
    border-radius:0;
    box-shadow:none;
}
.winx.winx-mobile .winx-header {
    cursor:default;
    gap:6px;
    padding-top:max(8px,env(safe-area-inset-top));
    padding-left:max(16px,env(safe-area-inset-left));
    padding-right:max(6px,env(safe-area-inset-right));
    border-radius:0;
}
.winx.winx-mobile .winx-header h3 {
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.winx.winx-mobile .winx-header .winx-close {
    flex:0 0 auto;
    width:44px;
    height:44px;
    margin:0;
    display:grid;
    place-items:center;
}
.winx.winx-mobile .winx-body {
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding:16px max(16px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
}
.winx.winx-mobile .winx-footer {
    flex-shrink:0;
    padding:12px max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
    border-radius:0;
}


/* winx.mobile: misma cabecera que Configuración. */
@media(max-width:768px){
    .winx.winx-mobile .winx-header{min-height:58px;box-sizing:border-box;padding:0 max(6px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));border-radius:0}
    .winx.winx-mobile .winx-header h3{font-size:calc(17px * var(--ia-text-scale,1));font-weight:500;line-height:1.3}
    .winx.winx-mobile .winx-header .winx-close{
        width:30px!important;
        height:30px!important;
        flex:0 0 30px!important;
    }
    .winx.winx-mobile .winx-header .winx-close .icon{
        width:18px!important;
        height:18px!important;
        min-width:18px!important;
        min-height:18px!important;
    }
}


/* ============================================
   REGLA SAGRADA MÓVIL · acciones de winx.mobile
   1 acción = botón redondo con su icono. 2+ = menú redondo de tres puntos.
   ============================================ */
.winx.winx-mobile .winx-footer.winx-footer-fab{
    position:absolute;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));
    z-index:5;display:block;width:auto;padding:0;border:0!important;background:transparent;box-shadow:none;
}
.winx.winx-mobile.winx-has-fab .winx-body{padding-bottom:96px}
.winx-footer-fab.winx-fab-empty{display:none!important}
.winx-fab-toggle{
    position:relative;z-index:4;display:grid;place-items:center;width:56px;height:56px;padding:0;border:0;
    border-radius:50%;background:var(--btn-primary,#0d6efd);color:#fff;box-shadow:0 7px 20px rgba(0,0,0,.24);
    cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
    transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease;
}
.winx-fab-toggle .icon{width:24px;height:24px;transition:transform .24s cubic-bezier(.2,.8,.2,1)}
.winx-footer-fab.is-open .winx-fab-toggle{transform:rotate(90deg) scale(1.06);box-shadow:0 9px 24px rgba(0,0,0,.28)}
.winx-fab-items{position:absolute;right:0;bottom:66px;z-index:4;display:flex;flex-direction:column;align-items:flex-end;gap:8px;visibility:hidden;pointer-events:none}
.winx.winx-mobile .winx-fab-items>.btn,.winx.winx-mobile .winx-fab-items>.winx-btn{
    width:auto;min-height:42px;padding:8px 14px;border-radius:21px!important;white-space:nowrap;
    box-shadow:0 4px 14px rgba(0,0,0,.17);opacity:0;transform:translateY(12px) scale(.88);
    transition:opacity .16s ease,transform .2s cubic-bezier(.2,.8,.2,1);
}
.winx-footer-fab.is-open .winx-fab-items{visibility:visible;pointer-events:auto}
.winx.winx-mobile .winx-footer-fab.is-open .winx-fab-items>.btn,.winx.winx-mobile .winx-footer-fab.is-open .winx-fab-items>.winx-btn{opacity:1;transform:none}
.winx-fab-shield{display:none;position:fixed;inset:0;z-index:2;background:rgba(0,0,0,.18);touch-action:none}
.winx-footer-fab.is-open .winx-fab-shield{display:block}
.winx-footer-fab.winx-fab-single .winx-fab-toggle,.winx-footer-fab.winx-fab-single .winx-fab-shield{display:none!important}
.winx-footer-fab.winx-fab-single .winx-fab-items{position:static;visibility:visible;pointer-events:auto}
.winx.winx-mobile .winx-footer-fab.winx-fab-single .winx-fab-items>.btn,.winx.winx-mobile .winx-footer-fab.winx-fab-single .winx-fab-items>.winx-btn{
    width:56px;height:56px;min-height:56px;padding:0;border-radius:50%!important;opacity:1;transform:none;box-shadow:0 7px 20px rgba(0,0,0,.24)
}
.winx-footer-fab.winx-fab-single .winx-button-label{display:none}
.winx-footer-fab.winx-fab-single .winx-fab-items>*>.icon{width:24px;height:24px;flex-basis:24px}
@media(prefers-reduced-motion:reduce){.winx-fab-toggle,.winx-fab-toggle .icon,.winx-fab-items>*{transition:none!important}}