/* =========================================================
   Módulo Banca — móvil / tablet (Android Chrome, iOS Safari)
   Reglas globales (sin scoped). Cargar después de *.razor.css
   ========================================================= */

/* ---------- Base: contenedor adaptable ---------- */
.banca-wrap,
.banca-contenido {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: clip;
}

.banca-contenido {
    overflow-x: visible;
}

.banca-wrap * {
    box-sizing: border-box;
}

/* Flex/grid hijos no desbordan en móvil */
.banca-wrap .banca-contenido > *,
.banca-wrap [class$="-wrap"],
.banca-wrap [class$="-shell"],
.banca-wrap [class$="-root"],
.banca-wrap .card,
.banca-wrap .listas-card {
    min-width: 0;
    max-width: 100%;
}

/* Contenedores con tablas anchas: scroll horizontal táctil */
.banca-wrap .tabla,
.banca-wrap .tabla-usuarios,
.banca-wrap .tabla-sorteos,
.banca-wrap .bn-table-wrap,
.banca-wrap .cs-table-wrap,
.banca-wrap .cb-table-wrap,
.banca-wrap .cb-grid-scroll,
.banca-wrap .hist-table-wrap,
.banca-wrap .usuarios-tabla-scroll,
.banca-wrap .cg-table-wrap,
.banca-wrap .pr-table-wrap,
.banca-wrap .su-table-wrap,
.banca-wrap .ap-hist-wrap,
.banca-wrap .pr-hist-wrap,
.banca-wrap .rifas-tabla-wrap,
.banca-wrap .rifa-hist-mini-wrap,
.banca-wrap .suma-body-scroll,
.banca-wrap .dif-scroll,
.banca-wrap .venta-admin-table-scroll,
.banca-wrap [class*="table-wrap"],
.banca-wrap [class*="-hist-wrap"] {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
}

/* Anular overflow:hidden de componentes scoped en móvil */
@media (max-width: 900px) {
    .banca-wrap .banca-contenido,
    .banca-wrap .cg-shell,
    .banca-wrap .pr-shell,
    .banca-wrap .usuarios-wrap,
    .banca-wrap .ganador-wrap,
    .banca-wrap .rest-wrap,
    .banca-wrap .cf-root,
    .banca-wrap .cfxn-wrap,
    .banca-wrap .su-shell,
    .banca-wrap .ppb-shell,
    .banca-wrap .venta-admin-wrap,
    .banca-wrap .listas-card,
    .banca-wrap .noticias-admin,
    .banca-wrap .ap-wrap {
        overflow-x: visible !important;
        max-width: 100%;
    }
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
    .banca-wrap .kpi-grid,
    .banca-wrap .ppb-featured-grid,
    .banca-wrap .ppb-lcr-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .banca-wrap .ganador-pro-board-selectores {
        grid-template-columns: 1fr !important;
        justify-content: stretch !important;
    }

    .banca-wrap .ganador-pro-column {
        max-width: 100% !important;
    }

    .banca-wrap .noticias-layout {
        grid-template-columns: 1fr !important;
    }

    .banca-wrap .noticias-left,
    .banca-wrap .noticias-right {
        min-width: 0 !important;
        width: 100% !important;
    }
}

/* ---------- Móvil (principal) ---------- */
@media (max-width: 768px) {
    .banca-wrap {
        padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 16px max(10px, env(safe-area-inset-left)) !important;
    }

    .banca-wrap .banca-tabs {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        position: relative;
        z-index: 30;
    }

    .banca-wrap .cerrar-sesion {
        grid-column: 1 / -1 !important;
    }

    .banca-wrap .tab-dropdown {
        position: static !important;
        display: block !important;
        width: 100% !important;
    }

    .banca-wrap .submenu-config,
    .banca-wrap .submenu-config-mobile-safe {
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        margin-top: 6px !important;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.15) !important;
    }

    .banca-wrap .submenu-overlay {
        display: none !important;
    }

    .banca-wrap .tab-btn,
    .banca-wrap .cerrar-sesion,
    .banca-wrap .submenu-item {
        min-height: 44px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(18, 58, 108, 0.12);
    }

    /* Tablas: filas con ancho mínimo dentro del scroll */
    .banca-wrap .tabla-sorteos .tabla-header,
    .banca-wrap .tabla-sorteos .tabla-body .fila,
    .banca-wrap .tabla-us-sorteos-grid,
    .banca-wrap .tabla-us-sorteos-grid-simple,
    .banca-wrap .tabla-us-sorteos-grid-monazos,
    .banca-wrap .tabla-us-sorteos-grid-tiempos {
        min-width: 640px;
    }

    .banca-wrap .tabla-usuarios .tabla-header,
    .banca-wrap .tabla-usuarios .tabla-body .fila {
        min-width: 680px;
    }

    .banca-wrap .cg-table-inner,
    .banca-wrap .cg-row,
    .banca-wrap .pr-table-inner,
    .banca-wrap .pr-row,
    .banca-wrap .cb-row,
    .banca-wrap .cb-table-head {
        min-width: 720px;
    }

    .banca-wrap .cb-shell,
    .banca-wrap .cb-top,
    .banca-wrap .cb-filters {
        max-width: 100%;
        min-width: 0;
    }

    /* Grids → una columna */
    .banca-wrap .ganador-pro-board,
    .banca-wrap .ganador-pro-board-selectores,
    .banca-wrap .historial-grid,
    .banca-wrap .kpi-grid,
    .banca-wrap .ppb-featured-grid,
    .banca-wrap .ppb-lcr-grid,
    .banca-wrap .rest-wrap .filtros,
    .banca-wrap .filtros,
    .banca-wrap .noticias-layout,
    .banca-wrap .fila-destinatarios,
    .banca-wrap .buscador-lateral {
        grid-template-columns: 1fr !important;
    }

    .banca-wrap .fecha-barra,
    .banca-wrap .fecha-top .fecha-barra,
    .banca-wrap .bn-filtros,
    .banca-wrap .ganador-pro-tabs-row,
    .banca-wrap .listas-fecha-bar,
    .banca-wrap .listas-juego-bar,
    .banca-wrap .cg-toolbar,
    .banca-wrap .cg-filters-row,
    .banca-wrap .pr-filters {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .banca-wrap .fecha-box,
    .banca-wrap .bn-filter,
    .banca-wrap .bn-filter-date,
    .banca-wrap .ganador-pro-date-inline,
    .banca-wrap .listas-fecha-control,
    .banca-wrap .listas-juego-control,
    .banca-wrap .cg-vendedor-wrap,
    .banca-wrap .cg-date-wrap {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .banca-wrap .ganador-pro-tabs {
        width: 100%;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .banca-wrap .ganador-pro-tab-historial {
        grid-column: 1 / -1 !important;
    }

    .banca-wrap .bn-grid {
        grid-template-columns: repeat(5, minmax(52px, 1fr)) !important;
        gap: 8px !important;
    }

    .banca-wrap .bn-select,
    .banca-wrap .bn-filtros select,
    .banca-wrap .input,
    .banca-wrap select,
    .banca-wrap textarea {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        font-size: 16px !important;
    }

    /* Modales: caben en pantalla + scroll interno */
    .banca-wrap .ganador-pro-modal,
    .banca-wrap .ganador-historial-modal,
    .banca-wrap .rest-floating-modal,
    .banca-wrap .bn-modal-box,
    .banca-wrap .modal-historial,
    .banca-wrap .cfxn-modal,
    .banca-wrap .rifas-modal,
    .banca-wrap [class*="modal-box"] {
        width: min(100%, calc(100vw - 20px)) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: min(92dvh, calc(100vh - 24px)) !important;
        margin: 0 auto;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .banca-wrap .ganador-pro-modal-backdrop,
    .banca-wrap .ganador-historial-backdrop,
    .banca-wrap .rest-floating-modal-backdrop,
    .banca-wrap .cfxn-modal-backdrop {
        padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
        align-items: flex-start !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .banca-wrap .form-row {
        grid-template-columns: 1fr !important;
    }

    .banca-wrap .btn,
    .banca-wrap .ganador-pro-main-btn {
        max-width: 100%;
    }

    .banca-wrap .acciones {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .banca-wrap .acciones .btn {
        width: 100% !important;
        min-height: 44px;
    }

    .banca-wrap .ap-subtabs,
    .banca-wrap .pr-tabs-wrap {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .banca-wrap .ap-subtab,
    .banca-wrap .pr-tab {
        width: 100% !important;
        min-height: 44px;
    }

    .banca-wrap .ppb-shell {
        padding: 10px !important;
        border-radius: 16px !important;
    }

    .banca-wrap .ppb-hero {
        padding: 14px !important;
    }

    .banca-wrap .kpi-valor {
        font-size: 1.6rem !important;
        word-break: break-word;
    }

    .banca-wrap .enc-metric-value {
        font-size: 14px !important;
    }

    .banca-wrap .toast-ok,
    .banca-wrap .toast-error {
        min-width: 0 !important;
        width: min(420px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
    }

    /* Listas: rejillas densas */
    .banca-wrap .listas-card .bn-grid-total,
    .banca-wrap .listas-totales-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .banca-wrap .listas-card [style*="grid-template-columns: repeat(15"] {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    /* Venta administrativa: panel lateral abajo */
    .banca-wrap .venta-admin-body {
        flex-direction: column !important;
    }

    .banca-wrap .venta-admin-side,
    .banca-wrap .venta-admin-panel {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .banca-wrap .venta-admin-grid {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Calendario flatpickr en pantalla pequeña */
    .flatpickr-calendar {
        width: min(100vw - 16px, 330px) !important;
        max-width: calc(100vw - 16px) !important;
    }
}

@media (max-width: 480px) {
    .banca-wrap .banca-tabs {
        grid-template-columns: 1fr !important;
    }

    .banca-wrap .bn-grid {
        grid-template-columns: repeat(4, minmax(48px, 1fr)) !important;
    }

    .banca-wrap .ganador-pro-tabs {
        grid-template-columns: 1fr !important;
    }

    .banca-wrap .ppb-title {
        font-size: 1.25rem !important;
    }

    .banca-wrap .enc-der {
        grid-template-columns: 1fr !important;
    }

    .banca-wrap .listas-card .bn-grid-total,
    .banca-wrap .listas-totales-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 900px) and (orientation: landscape) {
    .banca-wrap .ppb-featured-grid,
    .banca-wrap .kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .banca-wrap .banca-tabs {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* =========================================================
   Consulta factura detallada (ruta fuera de .banca-wrap)
   ========================================================= */
.cfd-root {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: clip;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

@media (max-width: 768px) {
    .cfd-root {
        padding: max(8px, env(safe-area-inset-top)) 10px 16px;
    }

    .cfd-topbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .cfd-topbar-actions {
        flex-direction: column !important;
        width: 100% !important;
    }

    .cfd-topbar-btn {
        width: 100% !important;
        min-height: 44px;
    }

    .cfd-hero,
    .cfd-section,
    .cfd-filters,
    .cfd-grid-filters {
        max-width: 100%;
        min-width: 0;
    }

    .cfd-filters,
    .cfd-grid-filters {
        grid-template-columns: 1fr !important;
    }

    .cfd-table-wrap,
    .cfd-tickets-scroll {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    .cfd-row,
    .cfd-table-head {
        min-width: 640px;
    }

    .cfd-ticket-shell,
    .cfd-ticket-wrap {
        max-width: 100% !important;
        overflow-x: auto !important;
    }

    .cfd-root input,
    .cfd-root select,
    .cfd-root textarea,
    .cfd-root button {
        font-size: 16px;
        min-height: 44px;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .cfd-h1 {
        font-size: 1.2rem !important;
        line-height: 1.25 !important;
    }
}