/**
 * Modales en móvil — bottom sheet unificado (carga al final para ganar cascada).
 */
@media (max-width: 900px) {
    .modal {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 0;
    }

    .modal-content,
    .modal-content.glass-panel,
    .modal-content.vacantes-discord-modal__box,
    .trivia-modal__box,
    #modal-crear-evento .modal-content,
    #modal-modificar-evento .modal-content,
    #modal-eliminar-evento .modal-content,
    #modal-novedades .modal-content,
    #modal-dj-del-mes .modal-content,
    #modal-actualizar-web .modal-content,
    #modal-crear-evento .modal-content.eventos-modal__box--create,
    #modal-eliminar-evento .modal-content.eventos-modal__box,
    #modal-agregar-equipo .modal-content,
    #modal-eliminar-equipo .modal-content,
    #modal-agregar-alianza .modal-content,
    #modal-modificar-alianza .modal-content,
    #modal-eliminar-alianza .modal-content,
    #modal-solicitar-alianza .modal-content,
    #modal-detalle-alianza .modal-content,
    #modal-rol-chat .modal-content,
    #modal-config-staff .modal-content {
        position: fixed !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: min(92dvh, 92vh) !important;
        margin: 0 !important;
        border-radius: 18px 18px 0 0 !important;
        padding: 14px 14px max(18px, env(safe-area-inset-bottom)) !important;
        padding-top: max(12px, env(safe-area-inset-top)) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
    }

    .eventos-modal--create .modal-content,
    .eventos-modal--create .modal-content.eventos-modal__box--create {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .eventos-modal__box--create,
    #modal-novedades .eventos-modal__box--create,
    #modal-dj-del-mes .eventos-modal__box--create {
        padding: 1rem 1rem 1.25rem !important;
    }

    .modal-content > .close,
    .trivia-modal__box > .close {
        top: 8px !important;
        right: 8px !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        font-size: 1.35rem !important;
    }

    .eventos-create-shell {
        gap: 0.85rem;
    }

    .eventos-create-preview {
        order: -1;
        padding: 0.65rem;
    }

    .eventos-create-preview__stage {
        min-height: 140px;
        max-height: min(28vh, 200px);
        overflow: hidden;
    }

    .eventos-create-preview__stage .eventos-card {
        max-width: 100%;
        transform: scale(0.92);
        transform-origin: top center;
    }

    .eventos-editor-toolbar {
        flex-wrap: wrap;
        gap: 4px;
        padding: 6px;
    }

    .eventos-editor-btn {
        min-width: 36px;
        min-height: 36px;
    }

    .eventos-editor-body {
        min-height: 96px;
        max-height: min(30vh, 180px);
        font-size: 16px;
        line-height: 1.45;
    }

    .eventos-field__input,
    .eventos-field__input.eventos-rich-text,
    .vibra-field-select,
    .trivia-form input,
    .trivia-form textarea,
    .trivia-form select,
    #modal-agregar-alianza .vibra-field-input,
    #modal-modificar-alianza .vibra-field-input {
        font-size: 16px;
    }

    .eventos-form-dates {
        grid-template-columns: 1fr !important;
    }

    .eventos-submit,
    .eventos-submit--create,
    .trivia-submit,
    .trivia-form button[type="submit"] {
        min-height: 48px;
        width: 100%;
    }

    .trivia-modal__title,
    .eventos-modal-title {
        font-size: 1.2rem !important;
        padding-right: 2.5rem;
        text-align: left !important;
    }

    .trivia-modal__lead,
    .eventos-modal-lead {
        font-size: 0.82rem;
        line-height: 1.4;
    }

    .trivia-form,
    .eventos-create-fields {
        gap: 0.75rem;
    }

    .modal-content h2 {
        font-size: 1.15rem;
        text-align: left;
    }

    .modal-content--config-staff,
    .modal-content--alliance-detail {
        max-height: min(88dvh, 88vh) !important;
    }

    #novedad-patch-preview .vibra-novedad-patch {
        transform: none;
        max-height: min(24vh, 180px);
        overflow: hidden;
    }
}

@media (max-width: 480px) {
    .eventos-create-preview__stage {
        min-height: 120px;
        max-height: 160px;
    }

    .eventos-modal-kicker {
        font-size: 0.62rem;
    }
}