/* =========================================================
   BANCA — capa universal móvil (última en cargar)
   Cubre: pantallas, modales, overlays, inputs, tablas
   Demo + Luis — Android Chrome / iOS Safari
   ========================================================= */

/* ---------- 1) Contenedores: no cortar contenido ---------- */
@media (max-width: 900px) {
    .banca-wrap,
    .banca-wrap .banca-contenido,
    .banca-wrap .ppb-shell,
    .banca-wrap .cg-shell,
    .banca-wrap .pr-shell,
    .banca-wrap .usuarios-wrap,
    .banca-wrap .ganador-wrap,
    .banca-wrap .ganador-pro-wrap,
    .banca-wrap .rest-wrap,
    .banca-wrap .cf-root,
    .banca-wrap .cfxn-wrap,
    .banca-wrap .su-shell,
    .banca-wrap .venta-admin-wrap,
    .banca-wrap .listas-card,
    .banca-wrap .noticias-admin,
    .banca-wrap .ap-wrap,
    .banca-wrap .cb-shell,
    .banca-wrap .card,
    .banca-wrap .recibir-qr-root,
    .cfd-root {
        overflow-x: visible !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Tablas / listas anchas: scroll horizontal */
    .banca-wrap .tabla,
    .banca-wrap [class*="table-wrap"],
    .banca-wrap [class*="tabla-scroll"],
    .banca-wrap [class*="-hist-wrap"],
    .banca-wrap [class*="-scroll"]:not([class*="overlay"]):not([class*="body-scroll"]),
    .banca-wrap .cb-table-wrap,
    .banca-wrap .cb-grid-scroll,
    .banca-wrap .suma-body-scroll,
    .banca-wrap .dif-scroll,
    .cfd-table-wrap,
    .cfd-tickets-scroll {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-x: contain;
        max-width: 100% !important;
    }
}

/* ---------- 2) TODOS los inputs / selects / textareas ---------- */
@media (max-width: 900px) {
    .banca-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
    .banca-wrap select,
    .banca-wrap textarea,
    .banca-wrap .input,
    .banca-wrap .inp,
    .banca-wrap .cb-select,
    .banca-wrap .cb-date,
    .banca-wrap .cb-vend-input,
    .banca-wrap .cb-combo-input,
    .banca-wrap .pr-input,
    .banca-wrap .ap-input,
    .banca-wrap .bn-input,
    .banca-wrap [class*="-input"]:not([class*="btn"]),
    .banca-wrap [class*="modal-input"],
    .cfd-root input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    .cfd-root select,
    .cfd-root textarea {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 44px !important;
        font-size: 16px !important;
        line-height: 1.25 !important;
        box-sizing: border-box !important;
        -webkit-appearance: none;
        appearance: none;
    }

    .banca-wrap input[type="checkbox"],
    .banca-wrap input[type="radio"] {
        min-height: 22px !important;
        min-width: 22px !important;
        width: auto !important;
    }

    .banca-wrap label,
    .banca-wrap .cb-label,
    .banca-wrap .pr-modal-label,
    .banca-wrap .campo label {
        display: block;
        max-width: 100%;
        word-break: break-word;
    }

    /* Filas de formulario → columna */
    .banca-wrap .form-row,
    .banca-wrap .cb-filters-row,
    .banca-wrap .cb-filters-grid,
    .banca-wrap .pr-modal-grid,
    .banca-wrap .pr-filters,
    .banca-wrap .filtros,
    .banca-wrap .filtros-row,
    .banca-wrap .ganador-pro-form-row,
    .banca-wrap .rest-filtros-row,
    .banca-wrap .cf-filters-row,
    .banca-wrap .cfxn-filters {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .banca-wrap .cb-field,
    .banca-wrap .cb-field-juego,
    .banca-wrap .cb-field-fecha,
    .banca-wrap .cb-field-vend,
    .banca-wrap .cb-field-sorteos,
    .banca-wrap .pr-field,
    .banca-wrap .ap-field,
    .banca-wrap .campo,
    .banca-wrap .form-group {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

/* ---------- 3) Modales (sin romper cb-modal-lista / cg-modal pantalla completa) ---------- */
@media (max-width: 900px) {
    /* Backdrops */
    .banca-wrap [class*="backdrop"],
    .banca-wrap [class*="overlay"]:not(.submenu-overlay):not(.cb-modal-overlay):not(.cb-modal-overlay-hist):not(.cg-modal-overlay),
    .modal-overlay,
    .modal-suma-overlay,
    .modal-dif-overlay,
    .modal-ingreso-overlay,
    .modal-suma-overlay-l2,
    .venta-modal-backdrop,
    .cb-modal-overlay,
    .cb-modal-overlay-hist,
    .cg-modal-overlay,
    .sl-alert-backdrop,
    .admin-confirm-backdrop,
    .cfxn-modal-backdrop,
    .ganador-pro-modal-backdrop,
    .ganador-historial-backdrop,
    .rest-floating-modal-backdrop,
    .rifas-modal-backdrop,
    .bn-modal-backdrop {
        position: fixed !important;
        inset: 0 !important;
        z-index: 25000 !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* Modales pantalla completa (Consulta Sorteos / Totales lista) */
    .cb-modal-lista,
    .cb-modal-hist,
    .cb-modal-resumen-hist,
    .cg-modal {
        position: fixed !important;
        inset: 8px !important;
        top: 8px !important;
        left: 8px !important;
        right: 8px !important;
        bottom: 8px !important;
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        max-height: calc(100dvh - 16px) !important;
        margin: 0 !important;
        transform: none !important;
        z-index: 25010 !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box !important;
        display: block !important;
    }

    .cb-modal-overlay,
    .cb-modal-overlay-hist {
        z-index: 25000 !important;
        touch-action: none;
    }

    .cb-modal-lista {
        z-index: 25010 !important;
        touch-action: pan-y;
    }

    /* Diálogos centrados */
    .modal-lista,
    .modal-suma,
    .modal-suma-xl,
    .modal-dif,
    .modal-dif-xl,
    .modal-ingreso,
    .venta-modal,
    .modal-cambios-lista,
    .pr-modal,
    .pr-modal-lg,
    .pr-modal-hist,
    .ap-modal,
    .ap-modal-lg,
    .ganador-pro-modal,
    .ganador-historial-modal,
    .rest-floating-modal,
    .bn-modal-box,
    .cb-modal,
    .cfxn-modal,
    .cfxn-modal-ticket,
    .rifas-modal,
    .rifas-modal-lg,
    .admin-confirm-modal,
    .sl-alert-modal,
    .modal-historial {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        width: min(100%, calc(100vw - 20px)) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: min(92dvh, calc(100dvh - 24px)) !important;
        margin: 0 !important;
        padding: 14px 12px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        z-index: 25010 !important;
        box-sizing: border-box !important;
        border-radius: 16px !important;
    }

    .modal-lista {
        top: 8px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: calc(100vw - 12px) !important;
        max-width: calc(100vw - 12px) !important;
        height: auto !important;
        max-height: min(92dvh, calc(100dvh - 16px)) !important;
    }

    .sl-alert-modal {
        max-height: min(88dvh, calc(100dvh - 32px)) !important;
    }

    .banca-wrap .modal-actions,
    .banca-wrap .pr-modal-actions,
    .banca-wrap .ap-modal-actions,
    .banca-wrap .sl-alert-actions,
    .banca-wrap .admin-confirm-actions,
    .banca-wrap .modal-cambios-footer,
    .banca-wrap .cb-modal-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .banca-wrap .modal-actions .btn,
    .banca-wrap .pr-modal-actions .btn,
    .banca-wrap .pr-modal-actions button,
    .banca-wrap .sl-alert-btn,
    .banca-wrap .admin-confirm-actions button,
    .banca-wrap .modal-cambios-btn,
    .banca-wrap .cb-modal-actions button,
    .banca-wrap .ganador-pro-main-btn {
        width: 100% !important;
        min-height: 44px !important;
    }

    .banca-wrap .modal-close,
    .modal-close {
        min-width: 44px !important;
        min-height: 44px !important;
        touch-action: manipulation;
    }
}

/* ---------- 4) Botones táctiles ---------- */
@media (max-width: 900px) {
    .banca-wrap .btn,
    .banca-wrap button.tab-btn,
    .banca-wrap .submenu-item,
    .banca-wrap .ap-subtab,
    .banca-wrap .pr-tab,
    .banca-wrap .cb-tab,
    .banca-wrap .ganador-pro-tab,
    .cfd-root .cfd-topbar-btn {
        min-height: 44px;
        touch-action: manipulation;
    }

    .banca-wrap img,
    .banca-wrap svg {
        max-width: 100%;
        height: auto;
    }
}

/* ---------- 5) Consulta sorteos (cb) dentro de banca ---------- */
@media (max-width: 900px) {
    .banca-wrap .cb-shell {
        padding: 10px !important;
    }

    .banca-wrap .cb-combo-panel,
    .banca-wrap .cb-dropdown,
    .banca-wrap .cb-vend-panel {
        max-width: calc(100vw - 24px) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .banca-wrap .cb-row,
    .banca-wrap .cb-table-head,
    .banca-wrap .cb-grid-row {
        min-width: 680px;
    }
}

/* ---------- 6) Listas: modales suma / diferencias ---------- */
@media (max-width: 900px) {
    .modal-suma-xl,
    .modal-dif-xl {
        width: calc(100vw - 12px) !important;
        max-width: calc(100vw - 12px) !important;
    }

    .modal-suma .suma-body-scroll,
    .modal-dif .dif-scroll {
        max-height: 55dvh !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* ---------- 7) Pantallas muy pequeñas ---------- */
@media (max-width: 400px) {
    .banca-wrap {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .banca-wrap .banca-tabs {
        gap: 6px !important;
    }

    .banca-wrap .tab-btn {
        font-size: 0.82rem !important;
        padding: 8px 6px !important;
    }
}