/* _content/SistemaLoteriaDashboard/Components/Banca/Ahorro.razor.rz.scp.css */
/* =========================
   AHORRO - PRO (AJUSTE FINAL)
   - Buscar + ID a la par
   - Selector debajo de Buscar (mismo ancho)
   - Letras +3pt
   - Labels +4pt
   - Chip y saldo más grandes
   ========================= */

.ap-panel[b-xquylebwm1] {
    padding: 18px;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    border: 1px solid #dbe8fb;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
}

/* ===== Grid: izquierda (buscar+select) | derecha (id) ===== */
.ap-busqueda[b-xquylebwm1] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 90px; /* ✅ ID más angosto */
    gap: 14px; /* ✅ antes 35px, muy grande */
    align-items: start;
    max-width: 100%;
}

@media (max-width: 980px) {
    .ap-busqueda[b-xquylebwm1] {
        grid-template-columns: 1fr;
    }
}

/* Columna base */
.ap-col[b-xquylebwm1] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

    /* ===== Labels: +4 puntos ===== */
    .ap-col label[b-xquylebwm1] {
        font-size: 1.20rem; /* antes ~0.95rem */
        font-weight: 1000;
        color: #213b63;
        margin-bottom: -2px;
    }

/* label secundario "Vendedor" encima del select */
.ap-label-sub[b-xquylebwm1] {
    margin-top: 2px;
}

/* ===== Inputs: +3 puntos ===== */
.ap-input-sm[b-xquylebwm1] {
    height: 44px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid #cfe0f7;
    outline: none;
    background: #fff;
    font-weight: 900;
    font-size: 1.16rem;
    color: #14243a;
    /* ✅ sombra real */
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    /* ✅ CLAVE para que el ancho sí obedezca */
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

    .ap-input-sm[b-xquylebwm1]::placeholder {
        color: #6a7a92;
        font-weight: 800;
    }

    .ap-input-sm:focus[b-xquylebwm1] {
        border-color: #1a5fb4;
        box-shadow: 0 0 0 4px rgba(26,95,180,.18);
    }

/* ===== Select: mismo tamaño que input y NO gigante ===== */
.ap-select[b-xquylebwm1] {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #375e9a 50%), linear-gradient(135deg, #375e9a 50%, transparent 50%);
    background-position: calc(100% - 18px) 18px, calc(100% - 12px) 18px;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 34px;
}

/* Esto asegura que NO se estire por nada raro */
.ap-select-compact[b-xquylebwm1] {
    width: 100%; /* clave */
    max-width: 100%;
}

/* ID centrado */
.ap-input-id[b-xquylebwm1] {
    text-align: center;
}

/* ===== Chip vendedor seleccionado: más grande ===== */
.ap-seleccion[b-xquylebwm1] {
    margin: 14px 0 12px;
}

.ap-chip[b-xquylebwm1] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 999px;
    border: 1px solid #b7f0ce;
    background: #ecfdf5;
    color: #065f46;
    font-weight: 1100;
    font-size: 1.12rem; /* más grande */
    max-width: 100%;
}

.ap-chip-warn[b-xquylebwm1] {
    border-color: #fdba74;
    background: #fff7ed;
    color: #9a3412;
}

.ap-dot[b-xquylebwm1] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34,197,94,.15);
}

.ap-dot-warn[b-xquylebwm1] {
    background: #f97316;
    box-shadow: 0 0 0 4px rgba(249,115,22,.16);
}

.ap-sep[b-xquylebwm1] {
    opacity: .65;
}

/* ===== Botones ===== */
.ap-actions[b-xquylebwm1] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 12px 0 16px;
}

.ap-btn2[b-xquylebwm1] {
    height: 44px;
    padding: 0 16px;
    border-radius: 12px;
    font-weight: 1100;
    font-size: 1.12rem; /* +3pt */
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}

    .ap-btn2:disabled[b-xquylebwm1] {
        opacity: .55;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

    .ap-btn2:hover[b-xquylebwm1] {
        transform: translateY(-1px);
    }

.ap-btn2-primary[b-xquylebwm1] {
    background: linear-gradient(180deg, #1a5fb4, #144a8f);
    color: #fff;
    box-shadow: 0 10px 22px rgba(20,74,143,.22);
}

.ap-btn2-ghost[b-xquylebwm1] {
    background: #fff;
    color: #144a8f;
    border-color: #cfe0f7;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

/* ===== Saldo: panel más grande ===== */
.ap-saldo-card[b-xquylebwm1] {
    margin-top: 12px;
    padding: 18px;
    border-radius: 14px;
    border: 1px solid #dbe8fb;
    background: linear-gradient(180deg, #ffffff 0%, #f2f8ff 100%);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.10);
    max-width: 640px; /* más grande */
}

.ap-saldo-title[b-xquylebwm1] {
    font-weight: 1100;
    color: #153e75;
    font-size: 1.18rem; /* más grande */
    margin-bottom: 8px;
}

.ap-saldo-valor[b-xquylebwm1] {
    font-size: 2.15rem; /* más grande */
    font-weight: 1300;
    color: #0f2b4d;
}

.ap-saldo-sub[b-xquylebwm1] {
    margin-top: 8px;
    color: #52627a;
    font-weight: 1000;
    font-size: 1.10rem; /* +3pt */
}

/* ===== Modales (por si los usas aquí) ===== */
.ap-modal-backdrop[b-xquylebwm1] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 18px;
}

.ap-modal[b-xquylebwm1] {
    width: min(560px, 96vw);
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 18px 50px rgba(0,0,0,.28);
    border: 1px solid rgba(255,255,255,.35);
}

.ap-modal-title[b-xquylebwm1] {
    font-weight: 1200;
    font-size: 1.28rem;
    color: #153e75;
    margin-bottom: 8px;
}

.ap-modal-sub[b-xquylebwm1] {
    color: #1b2b45;
    font-weight: 1000;
    font-size: 1.12rem;
    margin-bottom: 12px;
}

.ap-modal-label[b-xquylebwm1] {
    font-weight: 1100;
    color: #304766;
    display: block;
    margin-bottom: 8px;
    font-size: 1.08rem;
}

.ap-modal-input[b-xquylebwm1] {
    height: 48px !important;
    font-size: 1.16rem !important;
    padding: 0 12px !important;
}

.ap-modal-actions[b-xquylebwm1] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Toast */
.toast-ok[b-xquylebwm1], .toast-error[b-xquylebwm1] {
    position: fixed;
    right: 18px;
    bottom: 18px;
    padding: 12px 14px;
    border-radius: 12px;
    font-weight: 1100;
    font-size: 1.08rem;
    z-index: 10000;
    box-shadow: 0 14px 34px rgba(0,0,0,.18);
}

.toast-ok[b-xquylebwm1] {
    background: #ecfdf5;
    border: 1px solid #86efac;
    color: #065f46;
}

.toast-error[b-xquylebwm1] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #7f1d1d;
}


/* =========================
   MODAL HISTÓRICO DE ABONOS (PRO)
   ========================= */

.ap-modal-hist[b-xquylebwm1] {
    width: min(940px, 96vw);
    max-height: min(78vh, 820px);
    overflow: hidden;
    border-radius: 18px;
    padding: 18px;
}

/* Subtítulo */
.ap-hist-sub[b-xquylebwm1] {
    margin-top: 6px;
    margin-bottom: 14px;
    font-size: 1.10rem;
    font-weight: 1000;
}

/* Marco con scroll para el contenido */
.ap-hist-wrap[b-xquylebwm1] {
    border: 1px solid #dbe8fb;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
    padding: 10px;
    max-height: calc(78vh - 190px);
    overflow: auto;
}

/* Tabla estilo tarjeta */
.ap-table[b-xquylebwm1] {
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

/* Cabecera tabla más grande y bonita */
.ap-table-head[b-xquylebwm1] {
    display: grid;
    grid-template-columns: 1.4fr 1fr .6fr;
    gap: 10px;
    padding: 14px 14px;
    background: linear-gradient(180deg, #eef6ff 0%, #ffffff 100%);
    color: #153e75;
    font-weight: 1200;
    font-size: 1.12rem;
    border-bottom: 1px solid #dbe8fb;
}

/* Filas más grandes */
.ap-table-row[b-xquylebwm1] {
    display: grid;
    grid-template-columns: 1.4fr 1fr .6fr;
    gap: 10px;
    padding: 14px 14px;
    border-top: 1px solid #eef2f7;
    font-weight: 1000;
    font-size: 1.10rem;
    color: #1b2b45;
}

    .ap-table-row:nth-child(even)[b-xquylebwm1] {
        background: #fbfdff;
    }

/* Columna monto destacada */
.ap-hist-monto[b-xquylebwm1] {
    font-weight: 1300;
    color: #0f2b4d;
}

/* Etiqueta tipo “pill” para el tipo (si tienes Tipo=Abono) */
.ap-pill[b-xquylebwm1] {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: .95rem;
    font-weight: 1200;
    border: 1px solid #cfe0f7;
    background: #f4f9ff;
    color: #144a8f;
}

/* Estado vacío */
.ap-table-empty[b-xquylebwm1] {
    padding: 18px;
    color: #52627a;
    font-weight: 1100;
    font-size: 1.10rem;
}

/* Scroll bonito (Chrome/Edge) */
.ap-hist-wrap[b-xquylebwm1]::-webkit-scrollbar {
    width: 10px;
}

.ap-hist-wrap[b-xquylebwm1]::-webkit-scrollbar-track {
    background: #f1f6ff;
    border-radius: 999px;
}

.ap-hist-wrap[b-xquylebwm1]::-webkit-scrollbar-thumb {
    background: #cfe0f7;
    border-radius: 999px;
}

    .ap-hist-wrap[b-xquylebwm1]::-webkit-scrollbar-thumb:hover {
        background: #b6d4fb;
    }

/* ===== Encabezado moderno del historial ===== */
.ap-hist-head[b-xquylebwm1] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 0 14px;
    flex-wrap: wrap;
}

.ap-hist-label[b-xquylebwm1] {
    font-weight: 1200;
    font-size: 1.12rem;
    color: #153e75;
    letter-spacing: .2px;
}

.ap-hist-chip[b-xquylebwm1] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    background: linear-gradient(180deg, #eef6ff 0%, #ffffff 100%);
    border: 1px solid #cfe0f7;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
    font-weight: 1200;
    font-size: 1.14rem;
    color: #0f2b4d;
}

.ap-hist-chip-id[b-xquylebwm1] {
    padding: 6px 10px;
    border-radius: 999px;
    background: #ecfdf5;
    border: 1px solid #b7f0ce;
    color: #065f46;
    font-weight: 1200;
    font-size: 1.04rem;
}
/* ===== Layout 3 columnas (Ahorros) ===== */

/* Column wrappers */
.ap-left[b-xquylebwm1], .ap-center[b-xquylebwm1], .ap-right[b-xquylebwm1] {
    min-width: 0;
}

/* Búsqueda “compacta” dentro del layout */
.ap-busqueda-single[b-xquylebwm1] {
    margin: 0;
}

/* Slot para el aviso naranja debajo de búsqueda */
.ap-warn-slot[b-xquylebwm1] {
    margin-top: 14px;
}

/* Centro: tarjeta que contiene panel verde + botones */
.ap-center-card[b-xquylebwm1] {
    padding: 12px;
    border-radius: 16px;
    border: 1px solid #dbe8fb;
    background: linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.10);
}

/* Acciones centradas */
.ap-actions-center[b-xquylebwm1] {
    justify-content: center;
}

/* Panel verde seleccionado MÁS grande */
.ap-chip-selected[b-xquylebwm1] {
    border: 1px solid #b7f0ce;
    background: #ecfdf5;
    color: #065f46;
}

.ap-chip-selected-xl[b-xquylebwm1] {
    padding: 8px 10px;
    border-radius: 999px;
    font-weight: 1400;
    font-size: 1.22rem;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    width: fit-content; /* ✅ no ocupa todo el ancho */
    max-width: 100%;
}

    .ap-chip-selected-xl b[b-xquylebwm1] {
        font-size: 1.32rem;
    }

/* Saldo a la derecha con tamaño grande (si ya existe, esto lo refuerza) */
.ap-saldo-card-right[b-xquylebwm1] {
    max-width: 100%;
}

.ap-saldo-title-lg[b-xquylebwm1] {
    font-size: 1.22rem;
}

.ap-saldo-valor-lg[b-xquylebwm1] {
    font-size: 2.25rem;
    font-weight: 1400;
}

/* ===== Layout 3 columnas (Ahorros) ===== */
.ap-layout[b-xquylebwm1] {
    display: grid;
    grid-template-columns: minmax(320px, 380px) minmax(320px, 1fr) minmax(260px, 320px);
    gap: 18px;
    align-items: start;
}

@media (max-width: 1100px) {
    .ap-layout[b-xquylebwm1] {
        grid-template-columns: 1fr;
    }
}

.ap-left[b-xquylebwm1], .ap-center[b-xquylebwm1], .ap-right[b-xquylebwm1] {
    min-width: 0;
}

/* Evita que el panel del centro se monte encima */
.ap-center-card[b-xquylebwm1] {
    overflow: hidden;
}

/* El chip verde debe romper línea y no salirse */
.ap-chip-wrap[b-xquylebwm1] {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Saldo SIEMPRE visible, pero “apagado” si no hay vendedor */
.ap-saldo-disabled[b-xquylebwm1] {
    opacity: .65;
}

/* Ajustes de títulos/valor más grandes */
.ap-saldo-title-lg[b-xquylebwm1] {
    font-size: 1.22rem;
}

.ap-saldo-valor-lg[b-xquylebwm1] {
    font-size: 2.25rem;
    font-weight: 1400;
}

/* Botón de resumen */
.ap-left-actions[b-xquylebwm1] {
    margin-top: 14px;
    display: flex;
}

.ap-btn2-wide[b-xquylebwm1] {
    width: 100%;
    justify-content: center;
}

/* Modal resumen grande */
.ap-modal-resumen[b-xquylebwm1] {
    width: min(980px, 96vw);
    max-height: min(82vh, 900px);
    overflow: hidden;
    border-radius: 18px;
    padding: 18px;
}

/* Tabla resumen columnas */
.ap-resumen-head[b-xquylebwm1],
.ap-resumen-row[b-xquylebwm1] {
    grid-template-columns: 90px 1fr 180px;
}

.ap-resumen-monto[b-xquylebwm1] {
    text-align: right;
}

/* Total al fondo */
.ap-resumen-total[b-xquylebwm1] {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid #dbe8fb;
    background: linear-gradient(180deg, #ffffff 0%, #f2f8ff 100%);
    display: flex;
    align-items: center;
    justify-content: flex-start; /* 🔥 ya no se separan */
    gap: 10px; /* 🔥 espacio corto entre texto y monto */
    font-weight: 1200;
    font-size: 1.18rem;
    color: #0f2b4d;
}

/* Resumen de ahorros: 5 columnas */
.ap-resumen-head[b-xquylebwm1],
.ap-resumen-row[b-xquylebwm1] {
    display: grid;
    grid-template-columns: 90px 1.4fr 180px 180px 220px;
    gap: 12px;
    align-items: center;
}

.ap-resumen-monto[b-xquylebwm1] {
    text-align: right;
}

.ap-btn2-xs[b-xquylebwm1] {
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 10px;
    line-height: 1;
}
/* _content/SistemaLoteriaDashboard/Components/Banca/AsignarGanadorTab.razor.rz.scp.css */
/* =========================================================
   GANADORES - DISEÑO NUEVO (CLARO / MODERNO / TIPO SISTEMA)
   - 3 tarjetas arriba en horizontal (responsive)
   - Historial abajo full ancho
   - Colores alineados con un sistema azul/limpio
   - Fix IMPORTANTÍSIMO: selects (texto y opciones visibles)
   ========================================================= */

/* =========================
   CONTENEDOR PRINCIPAL
   ========================= */
.ganador-wrap[b-ugsukpn7u5] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding: 16px 16px;
    /* Fondo claro tipo app */
    background: #f3f6fb;
    border-radius: 14px;
    border: 1px solid #dbe7ff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

/* Responsive: 2 columnas */
@media (max-width: 1100px) {
    .ganador-wrap[b-ugsukpn7u5] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Responsive: 1 columna */
@media (max-width: 760px) {
    .ganador-wrap[b-ugsukpn7u5] {
        grid-template-columns: 1fr;
    }
}

/* =========================
   TARJETAS PRINCIPALES (Asignar)
   ========================= */
.subcard[b-ugsukpn7u5] {
    position: relative;
    background: #ffffff;
    border: 1px solid #dbe7ff;
    border-radius: 16px;
    padding: 16px 16px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.07);
    overflow: hidden;
}

    /* Decoración MUY sutil (no infantil) */
    .subcard[b-ugsukpn7u5]::after {
        content: "";
        position: absolute;
        inset: -40px -60px auto auto;
        width: 180px;
        height: 180px;
        background: radial-gradient(circle, rgba(13,110,253,0.12), transparent 60%);
        pointer-events: none;
    }

    /* =========================
   TÍTULOS (más grandes y notorios)
   ========================= */
    .subcard .card-titulo[b-ugsukpn7u5] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        font-size: 1.22rem; /* ✅ MÁS GRANDE */
        font-weight: 950;
        color: #0b2a55;
        margin-bottom: 12px;
        letter-spacing: .2px;
        padding-bottom: 10px;
        border-bottom: 1px solid #e6efff;
    }

        /* Quitar emojis si existían */
        .subcard .card-titulo[b-ugsukpn7u5]::before {
            content: "";
            display: none;
        }

    /* =========================
   FORMULARIOS
   ========================= */
    .subcard .form-row[b-ugsukpn7u5] {
        margin-bottom: 12px;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

        .subcard .form-row label[b-ugsukpn7u5] {
            font-size: .92rem;
            font-weight: 800;
            color: #264a7a;
        }

    /* =========================
   INPUTS / SELECTS  (FIX VISIBILIDAD)
   ========================= */
    /* ✅ IMPORTANTE: esto aplica tanto a input como a select porque usas .input */
    .subcard .input[b-ugsukpn7u5] {
        font-size: 1rem;
        height: 44px;
        padding: 8px 12px;
        border-radius: 12px;
        border: 1px solid #cfe0ff;
        background: #f7fbff;
        color: #0f172a; /* ✅ TEXTO OSCURO (se ve) */
        line-height: 1.2;
        outline: none;
        transition: border-color .12s ease, box-shadow .12s ease, background .12s ease, transform .08s ease;
    }

        .subcard .input[b-ugsukpn7u5]::placeholder {
            color: rgba(15, 23, 42, 0.40);
        }

        /* ✅ Focus azul tipo sistema */
        .subcard .input:focus[b-ugsukpn7u5] {
            background: #ffffff;
            border-color: #2b78ff;
            box-shadow: 0 0 0 3px rgba(43,120,255,0.18);
        }

    /* ✅ FIX dropdown: que las OPCIONES también sean visibles */
    .subcard select.input[b-ugsukpn7u5] {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        /* Flecha */
        background-image: linear-gradient(45deg, transparent 50%, #1f4fa8 50%), linear-gradient(135deg, #1f4fa8 50%, transparent 50%), linear-gradient(to right, transparent, transparent);
        background-position: calc(100% - 18px) 18px, calc(100% - 12px) 18px, 0 0;
        background-size: 6px 6px, 6px 6px, 100% 100%;
        background-repeat: no-repeat;
        padding-right: 34px;
    }

        /* ✅ Mucho navegador no respeta option, pero esto ayuda en varios casos */
        .subcard select.input option[b-ugsukpn7u5] {
            color: #0f172a;
            background: #ffffff;
        }

        /* Si tu select tiene “lista muy larga”, esto evita look raro */
        .subcard select.input:focus[b-ugsukpn7u5] {
            border-color: #2b78ff;
        }

    /* =========================
   BOTONES
   ========================= */
    .subcard .btn[b-ugsukpn7u5] {
        background: linear-gradient(180deg, #2b78ff, #0b5ed7);
        color: #ffffff;
        font-size: .95rem;
        font-weight: 950;
        padding: 10px 14px;
        border-radius: 12px;
        border: 1px solid rgba(11,94,215,0.25);
        box-shadow: 0 14px 26px rgba(11,94,215,0.18);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
    }

        /* sin emoji */
        .subcard .btn[b-ugsukpn7u5]::before {
            content: "";
            display: none;
        }

        .subcard .btn:hover[b-ugsukpn7u5] {
            transform: translateY(-1px);
            filter: brightness(1.02);
            box-shadow: 0 18px 34px rgba(11,94,215,0.22);
        }

        .subcard .btn:active[b-ugsukpn7u5] {
            transform: translateY(0);
            box-shadow: 0 10px 22px rgba(11,94,215,0.16);
        }

        .subcard .btn:disabled[b-ugsukpn7u5] {
            opacity: .55;
            cursor: not-allowed;
            box-shadow: none;
        }

        /* Botón secundario (si existe .btn-secondary) */
        .subcard .btn.btn-secondary[b-ugsukpn7u5] {
            background: #eef5ff;
            color: #0b2a55;
            border: 1px solid #cfe0ff;
            box-shadow: none;
        }

            .subcard .btn.btn-secondary:hover[b-ugsukpn7u5] {
                background: #e6f0ff;
                box-shadow: 0 10px 18px rgba(15, 23, 42, 0.10);
            }

/* Contenedor acciones */
.form-actions[b-ugsukpn7u5] {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* =========================
   HISTORIAL (TARJETA ABAJO FULL ANCHO)
   ========================= */
.ganador-historial-card[b-ugsukpn7u5] {
    grid-column: 1 / -1;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #dbe7ff;
    padding: 14px 16px;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.07);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.ganador-historial-texto[b-ugsukpn7u5] {
    margin: 0;
    font-size: 0.95rem;
    color: #355b8c;
    font-weight: 650;
}

/* Botón historial moderno */
.ganador-historial-card .btn[b-ugsukpn7u5] {
    background: linear-gradient(180deg, #19c37d, #14a86a);
    color: #ffffff;
    font-size: .95rem;
    font-weight: 950;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid rgba(20,168,106,0.30);
    box-shadow: 0 14px 26px rgba(20,168,106,0.18);
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

    .ganador-historial-card .btn:hover[b-ugsukpn7u5] {
        transform: translateY(-1px);
        filter: brightness(1.02);
        box-shadow: 0 18px 34px rgba(20,168,106,0.22);
    }

    .ganador-historial-card .btn:active[b-ugsukpn7u5] {
        transform: translateY(0);
        box-shadow: 0 10px 22px rgba(20,168,106,0.16);
    }

/* =========================
   TABLAS (TOP + HISTORIAL) DENTRO DEL MODAL
   ========================= */
.ganador-tabla-hist[b-ugsukpn7u5] {
    display: grid;
    grid-template-columns: 1.4fr 1fr 0.8fr 1.6fr;
}

.ganador-fila-hist[b-ugsukpn7u5] {
    display: grid;
    grid-template-columns: 1.4fr 1fr 0.8fr 1.6fr;
    padding: 6px 0;
}

.ganador-tabla-estad[b-ugsukpn7u5] {
    display: grid;
    grid-template-columns: 0.9fr 0.7fr 1.4fr;
}

.ganador-fila-estad[b-ugsukpn7u5] {
    display: grid;
    grid-template-columns: 0.9fr 0.7fr 1.4fr;
    padding: 6px 0;
}

@media (max-width: 900px) {
    .ganador-tabla-hist[b-ugsukpn7u5],
    .ganador-fila-hist[b-ugsukpn7u5],
    .ganador-tabla-estad[b-ugsukpn7u5],
    .ganador-fila-estad[b-ugsukpn7u5] {
        grid-template-columns: 1.2fr 0.9fr 0.6fr 1.2fr;
    }
}

/* =========================
   MODAL HISTORIAL (alineado con sistema)
   ========================= */
.modal-backdrop[b-ugsukpn7u5] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.modal[b-ugsukpn7u5] {
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.40);
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-historial[b-ugsukpn7u5] {
    max-width: 1000px;
    width: 96%;
}

/* Header modal azul sistema */
.modal-header[b-ugsukpn7u5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 18px;
    border-bottom: 1px solid #dbe7ff;
    background: linear-gradient(90deg, #0b5ed7, #2b78ff);
}

.modal-title[b-ugsukpn7u5] {
    font-size: 1rem;
    font-weight: 950;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .modal-title[b-ugsukpn7u5]::before {
        content: "";
        display: none;
    }

.modal-close[b-ugsukpn7u5] {
    border: none;
    background: rgba(255,255,255,0.18);
    font-size: 1.15rem;
    cursor: pointer;
    color: #ffffff;
    padding: 6px 10px;
    border-radius: 12px;
    transition: background 0.12s ease, transform 0.12s ease, color 0.12s ease;
}

    .modal-close:hover[b-ugsukpn7u5] {
        background: rgba(255,255,255,0.28);
        transform: scale(1.03);
    }

/* Cuerpo del modal */
.modal-body[b-ugsukpn7u5] {
    padding: 14px 18px 10px;
    overflow-y: auto;
    background: #ffffff;
}

/* Acciones inferiores */
.modal-actions[b-ugsukpn7u5] {
    padding: 10px 18px 12px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    background: #f8fafc;
}

/* =========================
   GRID INTERNO DEL MODAL
   ========================= */
.historial-grid[b-ugsukpn7u5] {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.9fr);
    gap: 18px;
    align-items: flex-start;
}

@media (max-width: 820px) {
    .historial-grid[b-ugsukpn7u5] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =========================
   FILTROS MODAL
   ========================= */
.historial-filtros .form-row[b-ugsukpn7u5] {
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .historial-filtros .form-row label[b-ugsukpn7u5] {
        font-size: 0.92rem;
        font-weight: 800;
        color: #264a7a;
    }

.historial-filtros .input[b-ugsukpn7u5] {
    font-size: 1rem;
    height: 42px;
    padding: 7px 12px;
    border-radius: 10px;
    border: 1px solid #cfe0ff;
    background: #f7fbff;
    transition: all 0.14s ease;
    color: #0f172a;
}

    .historial-filtros .input:focus[b-ugsukpn7u5] {
        background: #ffffff;
        border-color: #2b78ff;
        box-shadow: 0 0 0 3px rgba(43,120,255,0.18);
        outline: none;
    }

.historial-rango[b-ugsukpn7u5] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.historial-rango-sep[b-ugsukpn7u5] {
    font-size: 0.86rem;
    color: #6b7280;
}

.historial-acciones[b-ugsukpn7u5] {
    display: flex;
    gap: 8px;
}

/* Botones dentro del modal */
.modal-body .btn[b-ugsukpn7u5] {
    font-size: 0.92rem;
    padding: 8px 14px;
    border-radius: 12px;
    font-weight: 950;
}

/* =========================
   RESULTADOS DEL MODAL
   ========================= */
.historial-resultados[b-ugsukpn7u5] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.historial-resumen[b-ugsukpn7u5] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #f1f6ff;
    border: 1px solid #dbe7ff;
}

.hist-res-item[b-ugsukpn7u5] {
    min-width: 160px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .hist-res-item .label[b-ugsukpn7u5] {
        font-size: 0.78rem;
        color: #4a6285;
    }

    .hist-res-item .valor[b-ugsukpn7u5] {
        font-size: 1.05rem;
        font-weight: 950;
        color: #0b2a55;
    }

.historial-tabla-top[b-ugsukpn7u5],
.historial-tabla-registros[b-ugsukpn7u5] {
    margin-top: 4px;
}

/* =========================
   CONSULTA POR NÚMERO (LADO IZQ.)
   ========================= */
.consulta-numero-card[b-ugsukpn7u5] {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #dbe7ff;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.06);
}

.consulta-titulo[b-ugsukpn7u5] {
    font-size: 0.98rem;
    font-weight: 950;
    color: #0b2a55;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .consulta-titulo[b-ugsukpn7u5]::before {
        content: "";
        display: none;
    }

.consulta-numero-info[b-ugsukpn7u5] {
    font-size: 0.84rem;
    color: #5b7295;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 4px 0 6px 0;
}

.consulta-numero-card .input[b-ugsukpn7u5] {
    font-size: 1rem;
    height: 42px;
    padding: 7px 12px;
    border-radius: 10px;
    border: 1px solid #cfe0ff;
    background: #f7fbff;
    color: #0f172a;
}

    .consulta-numero-card .input:focus[b-ugsukpn7u5] {
        background: #ffffff;
        border-color: #2b78ff;
        box-shadow: 0 0 0 3px rgba(43,120,255,0.18);
        outline: none;
    }

.consulta-error[b-ugsukpn7u5] {
    margin-top: 6px;
    font-size: 0.86rem;
    color: #b91c1c;
    font-weight: 850;
}

.consulta-numero-resumen[b-ugsukpn7u5] {
    margin-top: 6px;
    font-size: 0.92rem;
    color: #0f172a;
}

.consulta-numero-detalle-titulo[b-ugsukpn7u5] {
    margin-top: 6px;
    font-size: 0.88rem;
    font-weight: 900;
    color: #264a7a;
}

.consulta-numero-lista[b-ugsukpn7u5] {
    margin: 4px 0 0 0;
    padding-left: 18px;
    font-size: 0.88rem;
    color: #0f172a;
}
/* _content/SistemaLoteriaDashboard/Components/Banca/BloqueNumeros.razor.rz.scp.css */
.bn-card[b-wlv5ewggay] {
    background: #fff;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.bn-title[b-wlv5ewggay] {
    font-weight: 900;
    font-size: 1.25rem;
    color: #153e75;
}

.bn-sub[b-wlv5ewggay] {
    margin-top: 4px;
    color: #52627a;
    font-size: .98rem;
}

.bn-filtros[b-wlv5ewggay] {
    margin-top: 14px;
    display: flex;
    gap: 14px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.bn-filter label[b-wlv5ewggay] {
    display: block;
    font-weight: 800;
    color: #183b6b;
    margin-bottom: 6px;
    font-size: .95rem;
}

.bn-select[b-wlv5ewggay] {
    min-width: 220px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #d7e2f1;
    outline: none;
    font-weight: 700;
    color: #123;
    background: #f8fbff;
}

.bn-note[b-wlv5ewggay] {
    color: #425a79;
    font-size: .95rem;
    margin-left: auto;
    padding: 10px 12px;
    border: 1px dashed #cfe0f7;
    border-radius: 12px;
    background: #fbfdff;
}

.bn-grid[b-wlv5ewggay] {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(10, minmax(64px, 1fr));
    gap: 10px;
}

.bn-num[b-wlv5ewggay] {
    border: 1px solid #d7e2f1;
    background: linear-gradient(180deg,#ffffff,#f3f7ff);
    border-radius: 14px;
    padding: 10px 6px;
    cursor: pointer;
    position: relative;
    box-shadow: 0 6px 16px rgba(0,0,0,.06);
    transition: transform .08s ease;
}

    .bn-num:active[b-wlv5ewggay] {
        transform: scale(.98);
    }

.bn-n[b-wlv5ewggay] {
    font-size: 1.05rem;
    font-weight: 900;
    color: #153e75;
}

.bn-flag[b-wlv5ewggay] {
    font-size: .75rem;
    font-weight: 900;
    color: #c02828;
    margin-top: 4px;
    height: 12px;
}

.bn-bloq[b-wlv5ewggay] {
    border: 2px solid #c02828;
    background: linear-gradient(180deg,#fff6f6,#ffecec);
}

.bn-backdrop[b-wlv5ewggay] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 9998;
}

.bn-modal[b-wlv5ewggay] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    z-index: 9999;
}

.bn-modal-box[b-wlv5ewggay] {
    width: min(760px, 96vw);
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

.bn-mh[b-wlv5ewggay] {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e7eefb;
    background: #f6f9ff;
}

.bn-mt[b-wlv5ewggay] {
    font-weight: 900;
    color: #153e75;
    font-size: 1.1rem;
}

.bn-x[b-wlv5ewggay] {
    border: none;
    background: transparent;
    font-size: 1.2rem;
    font-weight: 900;
    cursor: pointer;
    color: #1b2b44;
}

.bn-mb[b-wlv5ewggay] {
    padding: 16px;
}

.bn-resumen[b-wlv5ewggay] {
    display: grid;
    gap: 6px;
    color: #123;
    font-weight: 700;
    margin-bottom: 12px;
}

.bn-det-title[b-wlv5ewggay] {
    font-weight: 900;
    color: #153e75;
    margin-bottom: 8px;
}

.bn-empty[b-wlv5ewggay] {
    padding: 12px;
    border-radius: 12px;
    background: #f8fbff;
    border: 1px solid #d7e2f1;
    color: #52627a;
    font-weight: 700;
}

.bn-table[b-wlv5ewggay] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid #d7e2f1;
}

    .bn-table th[b-wlv5ewggay] {
        text-align: left;
        background: #f0f6ff;
        color: #153e75;
        font-weight: 900;
        padding: 10px;
        border-bottom: 1px solid #d7e2f1;
    }

    .bn-table td[b-wlv5ewggay] {
        padding: 10px;
        border-bottom: 1px solid #edf2fb;
        font-weight: 700;
        color: #123;
    }

    .bn-table tr:last-child td[b-wlv5ewggay] {
        border-bottom: none;
    }

.bn-actions[b-wlv5ewggay] {
    margin-top: 14px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.bn-btn[b-wlv5ewggay] {
    border: none;
    border-radius: 12px;
    padding: 10px 14px;
    font-weight: 900;
    cursor: pointer;
}

.bn-btn-danger[b-wlv5ewggay] {
    background: #c02828;
    color: #fff;
}

.bn-btn-ok[b-wlv5ewggay] {
    background: #1f8a3b;
    color: #fff;
}

.bn-btn-sec[b-wlv5ewggay] {
    background: #eef3fb;
    color: #153e75;
    border: 1px solid #d7e2f1;
}

.bn-warn[b-wlv5ewggay] {
    margin-top: 12px;
    padding: 12px;
    border-radius: 12px;
    background: #fff7e8;
    border: 1px solid #ffe0a6;
    color: #6a4a00;
    font-weight: 800;
    font-size: .95rem;
}
/* _content/SistemaLoteriaDashboard/Components/Banca/ConsultaFacturasBanca.razor.rz.scp.css */
/* Components/Banca/ConsultaFacturasBanca.razor.css */

.cf-root[b-bnktaf3cdh] {
    width: 100%;
    padding: 14px;
}

/* ===== HEADER / HERO ===== */
.cf-hero[b-bnktaf3cdh] {
    background: linear-gradient(180deg, #0b3a74 0%, #0f4a92 55%, #1253a3 100%);
    border-radius: 16px;
    padding: 18px 18px;
    box-shadow: 0 10px 22px rgba(0,0,0,.18);
    margin-bottom: 14px;
    position: relative;
    overflow: hidden;
}

    .cf-hero[b-bnktaf3cdh]:before {
        content: "";
        position: absolute;
        inset: -40px -60px auto auto;
        width: 240px;
        height: 240px;
        background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), rgba(255,255,255,0));
        border-radius: 50%;
        transform: rotate(10deg);
        pointer-events: none;
    }

.cf-hero-title[b-bnktaf3cdh] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cf-h1[b-bnktaf3cdh] {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 900;
    letter-spacing: .2px;
    color: #fff;
}

.cf-h2[b-bnktaf3cdh] {
    font-size: .98rem;
    color: rgba(255,255,255,.85);
    font-weight: 600;
}

/* ===== FILTERS ===== */
.cf-filters[b-bnktaf3cdh] {
    background: #ffffff;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 18px rgba(0,0,0,.10);
    border: 1px solid rgba(15, 74, 146, .14);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

.cf-block[b-bnktaf3cdh] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 190px;
}

.cf-grow[b-bnktaf3cdh] {
    flex: 1 1 260px;
}

.cf-block-btn[b-bnktaf3cdh] {
    min-width: 160px;
    display: flex;
    justify-content: flex-end;
}

.cf-label[b-bnktaf3cdh] {
    font-size: .86rem;
    font-weight: 900;
    color: #153e75;
    letter-spacing: .2px;
}

/* Inputs */
.cf-input[b-bnktaf3cdh] {
    height: 42px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(18, 83, 163, .20);
    outline: none;
    font-size: .98rem;
    background: #fbfdff;
    color: #0f1b2d;
    transition: box-shadow .12s ease, border-color .12s ease, transform .10s ease;
}

    .cf-input:focus[b-bnktaf3cdh] {
        border-color: rgba(18, 83, 163, .55);
        box-shadow: 0 0 0 4px rgba(18, 83, 163, .14);
    }

.cf-select[b-bnktaf3cdh] {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #2b5fa5 50%), linear-gradient(135deg, #2b5fa5 50%, transparent 50%), linear-gradient(to right, rgba(18,83,163,.15), rgba(18,83,163,.15));
    background-position: calc(100% - 18px) 18px, calc(100% - 12px) 18px, calc(100% - 44px) 50%;
    background-size: 6px 6px, 6px 6px, 1px 60%;
    background-repeat: no-repeat;
    padding-right: 52px;
}

/* Radio group */
.cf-radio[b-bnktaf3cdh] {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    padding: 6px 8px;
    border-radius: 12px;
    background: #f5f9ff;
    border: 1px solid rgba(18, 83, 163, .14);
    height: 42px;
}

    .cf-radio label[b-bnktaf3cdh] {
        display: flex;
        align-items: center;
        gap: 6px;
        font-weight: 800;
        font-size: .92rem;
        color: #163b6c;
        cursor: pointer;
        user-select: none;
    }

    .cf-radio input[type="radio"][b-bnktaf3cdh] {
        width: 16px;
        height: 16px;
        accent-color: #1253a3;
    }

/* Buttons */
.cf-btn[b-bnktaf3cdh] {
    border: none;
    border-radius: 12px;
    height: 42px;
    padding: 0 16px;
    font-weight: 900;
    cursor: pointer;
    transition: transform .08s ease, box-shadow .12s ease, filter .12s ease;
}

    .cf-btn:active[b-bnktaf3cdh] {
        transform: translateY(1px);
    }

.cf-btn-blue[b-bnktaf3cdh] {
    background: linear-gradient(180deg, #1a66c7 0%, #1253a3 100%);
    color: #fff;
    box-shadow: 0 10px 18px rgba(18,83,163,.22);
}

    .cf-btn-blue:hover[b-bnktaf3cdh] {
        filter: brightness(1.03);
        box-shadow: 0 12px 22px rgba(18,83,163,.26);
    }

/* ===== VENDEDOR CARD ===== */
.cf-vendedor-card[b-bnktaf3cdh] {
    background: #ffffff;
    border-radius: 16px;
    padding: 14px;
    border: 1px solid rgba(18,83,163,.16);
    box-shadow: 0 8px 18px rgba(0,0,0,.08);
}

/* ===== ACTION CARDS ===== */
.cf-actions[b-bnktaf3cdh] {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.cf-card[b-bnktaf3cdh] {
    width: 100%;
    text-align: left;
    border: none;
    border-radius: 16px;
    padding: 14px;
    cursor: pointer;
    background: #ffffff;
    border: 1px solid rgba(18,83,163,.14);
    box-shadow: 0 8px 18px rgba(0,0,0,.08);
    transition: transform .10s ease, box-shadow .12s ease, border-color .12s ease, filter .12s ease;
}

    .cf-card:hover[b-bnktaf3cdh] {
        transform: translateY(-1px);
        border-color: rgba(18,83,163,.28);
        box-shadow: 0 12px 26px rgba(0,0,0,.12);
    }

    .cf-card:disabled[b-bnktaf3cdh] {
        opacity: .55;
        cursor: not-allowed;
        transform: none;
        filter: grayscale(.25);
    }

.cf-card-top[b-bnktaf3cdh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.cf-card-title[b-bnktaf3cdh] {
    font-weight: 950;
    color: #153e75;
    font-size: 1.05rem;
}

.cf-card-sub[b-bnktaf3cdh] {
    color: #223a5c;
    font-weight: 650;
    font-size: .95rem;
    opacity: .9;
}

.cf-card-pill[b-bnktaf3cdh] {
    background: #e9f2ff;
    color: #1253a3;
    border: 1px solid rgba(18,83,163,.16);
    font-weight: 900;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: .85rem;
}

/* ===== ERROR ===== */
.cf-error[b-bnktaf3cdh] {
    margin-top: 12px;
    background: #fff2f2;
    border: 1px solid rgba(220, 70, 70, .28);
    color: #7a1111;
    border-radius: 14px;
    padding: 12px 14px;
    font-weight: 900;
}

/* ===== Responsive ===== */
@media (max-width: 980px) {
    .cf-actions[b-bnktaf3cdh] {
        grid-template-columns: 1fr;
    }

    .cf-block[b-bnktaf3cdh] {
        min-width: 220px;
        flex: 1 1 220px;
    }

    .cf-block-btn[b-bnktaf3cdh] {
        width: 100%;
        justify-content: stretch;
    }

    .cf-btn[b-bnktaf3cdh] {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .cf-root[b-bnktaf3cdh] {
        padding: 10px;
    }

    .cf-h1[b-bnktaf3cdh] {
        font-size: 1.25rem;
    }

    .cf-h2[b-bnktaf3cdh] {
        font-size: .92rem;
    }

    .cf-input[b-bnktaf3cdh] {
        height: 40px;
    }

    .cf-radio[b-bnktaf3cdh] {
        height: auto;
        padding: 10px;
    }
}

/* =========================================================
   MODALES SOLO DESDE ConsultaFacturasBanca (Blazor CSS Isolation)
   OJO: en Blazor se usa ::deep (NO :deep)
   ========================================================= */

.cf-root[b-bnktaf3cdh]  .tb-backdrop,
.cf-root[b-bnktaf3cdh]  .rf-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(10, 18, 35, .55) !important;
    backdrop-filter: blur(6px) !important;
    z-index: 99990 !important;
}

.cf-root[b-bnktaf3cdh]  .tb-modal,
.cf-root[b-bnktaf3cdh]  .rf-modal,
.cf-root[b-bnktaf3cdh]  .tb-preview,
.cf-root[b-bnktaf3cdh]  .rf-preview {
    position: fixed !important;
    z-index: 99991 !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(1100px, calc(100vw - 24px)) !important;
    max-width: min(1100px, calc(100vw - 24px)) !important;
    max-height: calc(100vh - 24px) !important;
    border-radius: 18px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: 0 18px 55px rgba(0,0,0,.45) !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

.cf-root[b-bnktaf3cdh]  .tb-header,
.cf-root[b-bnktaf3cdh]  .rf-header {
    background: linear-gradient(180deg, #0b3a74 0%, #0f4a92 65%, #1253a3 100%) !important;
    color: #fff !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
}

.cf-root[b-bnktaf3cdh]  .tb-body,
.cf-root[b-bnktaf3cdh]  .rf-body,
.cf-root[b-bnktaf3cdh]  .tb-preview-body,
.cf-root[b-bnktaf3cdh]  .rf-preview-body {
    overflow: auto !important;
    max-height: calc(100vh - 170px) !important;
    background: #ffffff !important;
}

.cf-root[b-bnktaf3cdh]  .tb-close,
.cf-root[b-bnktaf3cdh]  .rf-close {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,.25) !important;
    background: rgba(255,255,255,.10) !important;
    color: #fff !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

/* Botones del modal (solo banca) */
.cf-root[b-bnktaf3cdh]  .tb-btn,
.cf-root[b-bnktaf3cdh]  .rf-btn,
.cf-root[b-bnktaf3cdh]  .tb-mini {
    border-radius: 12px !important;
    font-weight: 900 !important;
}

/* Preview: iframe que use todo el espacio */
.cf-root[b-bnktaf3cdh]  .tb-frame {
    width: 100% !important;
    height: calc(100vh - 240px) !important;
    border: 0 !important;
    background: #fff !important;
}
/* Variante más moderna */
.cf-select[b-bnktaf3cdh],
.cf-select option[b-bnktaf3cdh] {
    font-size: 1.1rem;
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
    font-weight: 600;
}

/* ===== SELECTOR DE SORTEOS - TEXTO MÁS GRUESO SIN CORTARSE ===== */
.cf-select[b-bnktaf3cdh] {
    font-size: 1.05rem; /* tamaño correcto */
    font-family: "Segoe UI", system-ui, sans-serif;
    font-weight: 600;
    line-height: 1.4; /* 🔴 CLAVE */
    padding: 10px 12px; /* 🔴 CLAVE */
    min-height: 42px; /* 🔴 CLAVE */

    display: flex;
    align-items: center;
}

    /* Opciones del dropdown */
    .cf-select option[b-bnktaf3cdh] {
        font-size: 1.05rem;
        font-family: "Segoe UI", system-ui, sans-serif;
        font-weight: 500;
        padding: 8px 10px;
    }
/* _content/SistemaLoteriaDashboard/Components/Banca/ConsultaFacturasxNumero.razor.rz.scp.css */
.cfxn-card[b-efx9p5oz1r] {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.cfxn-title[b-efx9p5oz1r] {
    font-weight: 950;
    font-size: 1.35rem;
    color: #153e75;
    margin-bottom: 12px;
}

.cfxn-wrap[b-efx9p5oz1r] {
    padding: 4px 2px 2px;
}

.cfxn-filtros[b-efx9p5oz1r] {
    display: grid;
    grid-template-columns: 170px 240px 240px 180px 180px 140px;
    gap: 12px;
    align-items: end;
    margin-bottom: 14px;
}

.cfxn-field[b-efx9p5oz1r] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.cfxn-lbl[b-efx9p5oz1r] {
    font-weight: 900;
    color: #153e75;
    font-size: 1rem;
}

.cfxn-select[b-efx9p5oz1r],
.cfxn-input[b-efx9p5oz1r] {
    border: 1px solid #d6e2f2;
    border-radius: 12px;
    padding: 10px 12px;
    outline: none;
    background: #fff;
    font-weight: 850;
    color: #10233b;
    font-size: 1.02rem;
}

    .cfxn-select:focus[b-efx9p5oz1r],
    .cfxn-input:focus[b-efx9p5oz1r] {
        border-color: #153e75;
        box-shadow: 0 0 0 4px rgba(21,62,117,.12);
    }

.cfxn-btn[b-efx9p5oz1r] {
    border: none;
    border-radius: 14px;
    height: 44px;
    padding: 0 16px;
    font-weight: 950;
    font-size: 1.02rem;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(180deg,#153e75,#0f2f5c);
    box-shadow: 0 12px 24px rgba(0,0,0,.12);
}

    .cfxn-btn:hover[b-efx9p5oz1r] {
        filter: brightness(1.04);
    }

.cfxn-btn-sec[b-efx9p5oz1r] {
    border: 1px solid #d6e2f2;
    border-radius: 14px;
    height: 44px;
    padding: 0 16px;
    font-weight: 950;
    font-size: 1.02rem;
    color: #153e75;
    cursor: pointer;
    background: #fff;
}

    .cfxn-btn-sec:hover[b-efx9p5oz1r] {
        background: #f3f7ff;
    }

.cfxn-error[b-efx9p5oz1r] {
    margin: 10px 0 12px;
    background: #ffe9e9;
    border: 1px solid #ffb7b7;
    color: #8a1111;
    padding: 12px 14px;
    border-radius: 14px;
    font-weight: 950;
    font-size: 1.02rem;
}

.cfxn-grid[b-efx9p5oz1r] {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 10px;
    margin-top: 6px;
}

.cfxn-num[b-efx9p5oz1r] {
    border: 1px solid #d7e2f1;
    background: linear-gradient(180deg,#ffffff,#f3f7ff);
    border-radius: 14px;
    padding: 12px 0;
    font-weight: 950;
    font-size: 1.08rem;
    color: #153e75;
    cursor: pointer;
    transition: transform .06s ease, box-shadow .06s ease;
}

    .cfxn-num:hover[b-efx9p5oz1r] {
        transform: translateY(-1px);
        box-shadow: 0 12px 22px rgba(0,0,0,.10);
    }

    .cfxn-num.sel[b-efx9p5oz1r] {
        background: linear-gradient(180deg,#153e75,#0f2f5c);
        color: #fff;
        border-color: #0f2f5c;
    }

.cfxn-info[b-efx9p5oz1r] {
    margin-top: 14px;
    padding: 14px;
    border-radius: 14px;
    background: #f6f8fb;
    border: 1px solid #e4eaf3;
    font-weight: 900;
    font-size: 1.05rem;
    color: #364a63;
}

/* ===== MODAL LISTA TICKETS ===== */

.cfxn-backdrop[b-efx9p5oz1r] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 9998;
}

.cfxn-modal[b-efx9p5oz1r] {
    position: fixed;
    inset: 0;
    margin: auto;
    width: min(1050px, 96vw);
    height: min(660px, 92vh);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0,0,0,.25);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cfxn-mh[b-efx9p5oz1r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #e7edf6;
    background: linear-gradient(180deg,#ffffff,#f7faff);
}

.cfxn-mt[b-efx9p5oz1r] {
    font-weight: 950;
    font-size: 1.12rem;
    color: #153e75;
}

.cfxn-pill[b-efx9p5oz1r] {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    background: #153e75;
    color: #fff;
    font-weight: 950;
}

.cfxn-x[b-efx9p5oz1r] {
    border: none;
    background: transparent;
    font-size: 1.25rem;
    font-weight: 950;
    cursor: pointer;
    color: #234;
}

.cfxn-mb[b-efx9p5oz1r] {
    padding: 12px 14px;
    overflow: auto;
    flex: 1;
}

.cfxn-head[b-efx9p5oz1r],
.cfxn-row[b-efx9p5oz1r] {
    display: grid;
    grid-template-columns: 130px 1fr 240px 170px 110px;
    gap: 12px;
    align-items: center;
}

.cfxn-head[b-efx9p5oz1r] {
    font-weight: 950;
    font-size: 1.02rem;
    color: #153e75;
    padding: 12px 12px;
    border-radius: 14px;
    background: #f3f7ff;
    border: 1px solid #e1eaf7;
    position: sticky;
    top: 0;
    z-index: 1;
}

.cfxn-row[b-efx9p5oz1r] {
    padding: 12px 12px;
    border-bottom: 1px solid #eef3fb;
    border-radius: 12px;
}

    .cfxn-row:hover[b-efx9p5oz1r] {
        background: #fafcff;
    }

.cfxn-cell[b-efx9p5oz1r] {
    font-weight: 850;
    font-size: 1.02rem;
    color: #123;
}

.cfxn-right[b-efx9p5oz1r] {
    text-align: right;
}

.cfxn-act[b-efx9p5oz1r] {
    display: flex;
    justify-content: flex-end;
}

.cfxn-mini[b-efx9p5oz1r] {
    border: 1px solid #d7e2f1;
    background: #fff;
    border-radius: 12px;
    padding: 9px 14px;
    font-weight: 950;
    font-size: 1.02rem;
    cursor: pointer;
    color: #153e75;
}

    .cfxn-mini:hover[b-efx9p5oz1r] {
        background: #f3f7ff;
    }

.cfxn-mf[b-efx9p5oz1r] {
    padding: 12px 14px;
    border-top: 1px solid #e7edf6;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: #fff;
}

/* ===== MODAL PREVIEW ===== */

.cfxn-preview[b-efx9p5oz1r] {
    position: fixed;
    inset: 0;
    margin: auto;
    width: min(1050px, 96vw);
    height: min(780px, 94vh);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0,0,0,.25);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cfxn-ph[b-efx9p5oz1r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid #e7edf6;
    background: linear-gradient(180deg,#ffffff,#f7faff);
}

.cfxn-pt[b-efx9p5oz1r] {
    font-weight: 950;
    font-size: 1.1rem;
    color: #153e75;
}

.cfxn-pb[b-efx9p5oz1r] {
    flex: 1;
    background: #fff;
}

.cfxn-frame[b-efx9p5oz1r] {
    width: 100%;
    height: 100%;
    border: 0;
}

.cfxn-pf[b-efx9p5oz1r] {
    padding: 12px 14px;
    border-top: 1px solid #e7edf6;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: #fff;
}

@media (max-width: 1100px) {
    .cfxn-filtros[b-efx9p5oz1r] {
        grid-template-columns: 1fr 1fr;
    }
}

.cfxn-modal-ticket[b-efx9p5oz1r] {
    width: min(920px, 96vw);
}

.cfxn-ticket-wrap[b-efx9p5oz1r] {
    display: flex;
    justify-content: center;
    padding: 12px 0;
}

.cfxn-ticket[b-efx9p5oz1r] {
    width: 380px; /* estilo 58mm aprox */
    background: #fff;
    color: #000;
    border: 1px solid #e6e8ef;
    border-radius: 12px;
    padding: 14px 14px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.t-h1[b-efx9p5oz1r] {
    font-size: 18px;
    font-weight: 900;
    text-align: center;
    margin-bottom: 4px;
}

.t-h2[b-efx9p5oz1r] {
    font-size: 12px;
    text-align: center;
    opacity: .85;
    margin-bottom: 10px;
}

.t-hr[b-efx9p5oz1r] {
    height: 1px;
    background: #111;
    opacity: .15;
    margin: 10px 0;
}

.t-row[b-efx9p5oz1r] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 14px;
}

.t-line[b-efx9p5oz1r] {
    padding: 4px 0;
}

.t-l[b-efx9p5oz1r] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.t-r[b-efx9p5oz1r] {
    font-weight: 800;
}

.t-total[b-efx9p5oz1r] {
    font-size: 16px;
}

.t-foot[b-efx9p5oz1r] {
    text-align: center;
    margin-top: 10px;
    font-size: 12px;
    opacity: .8;
}

.cfxn-imgbox[b-efx9p5oz1r] {
    margin-top: 14px;
    border: 1px solid #e6e8ef;
    border-radius: 14px;
    background: #fff;
    padding: 12px;
    display: flex;
    justify-content: center;
}

.cfxn-ticket-img[b-efx9p5oz1r] {
    width: min(760px, 95vw); /* ✅ grande para foto */
    height: auto;
    image-rendering: auto;
    border-radius: 10px;
}

.ticket-preview-box[b-efx9p5oz1r] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    background: #f8f8f8;
    border-radius: 14px;
}

    .ticket-preview-box img[b-efx9p5oz1r] {
        background: white;
        border: 2px solid #d0d0d0;
        border-radius: 12px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.18);
        padding: 8px;
    }
/* _content/SistemaLoteriaDashboard/Components/Banca/ConsultaSorteosBanca.razor.rz.scp.css */
/* =========================================================
   ConsultaSorteosBanca.razor.css
   DISEÑO TOTAL (prefijo cb-)
========================================================= */

/* =========================================================
   SHELL
========================================================= */
.cb-shell[b-ejjm2brifn] {
    background: radial-gradient(1200px 600px at 20% -10%, rgba(99,102,241,.18), transparent 60%), radial-gradient(900px 500px at 90% 0%, rgba(14,165,233,.14), transparent 55%), linear-gradient(180deg, #fbfcff 0%, #f3f7ff 100%);
    border: 1px solid rgba(148,163,184,.35);
    border-radius: 22px;
    box-shadow: 0 18px 40px rgba(15,23,42,.10);
    padding: 18px;
    box-sizing: border-box;
}

/* =========================================================
   HEADER
========================================================= */
.cb-header[b-ejjm2brifn] {
    border-radius: 20px;
    padding: 18px 18px;
    background: linear-gradient(135deg, #111827 0%, #1f2a44 45%, #0b1220 100%);
    box-shadow: 0 18px 36px rgba(0,0,0,.22);
    color: #fff;
    position: relative;
    overflow: hidden;
}

    .cb-header[b-ejjm2brifn]::after {
        content: "";
        position: absolute;
        inset: -40px;
        background: radial-gradient(600px 240px at 20% 20%, rgba(99,102,241,.35), transparent 60%), radial-gradient(500px 220px at 90% 30%, rgba(14,165,233,.30), transparent 55%);
        pointer-events: none;
    }

.cb-title[b-ejjm2brifn] {
    margin: 0;
    font-size: 1.65rem;
    font-weight: 1000;
    letter-spacing: .3px;
    position: relative;
    z-index: 1;
}

/* =========================================================
   FILTERS (5 columnas)
========================================================= */
.cb-filters[b-ejjm2brifn] {
    margin-top: 14px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(148,163,184,.35);
    border-radius: 20px;
    padding: 14px;
    box-shadow: 0 14px 26px rgba(15,23,42,.08);
    display: grid;
    grid-template-columns: 220px 170px 360px 360px auto; /* juego, fecha, vendedor, sorteos, acciones */
    gap: 14px;
    align-items: end;
}

@media (max-width: 1100px) {
    .cb-filters[b-ejjm2brifn] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 720px) {
    .cb-filters[b-ejjm2brifn] {
        grid-template-columns: 1fr;
    }
}

/* campo */
.cb-field[b-ejjm2brifn] {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.cb-label[b-ejjm2brifn] {
    font-size: .95rem;
    font-weight: 1000;
    color: #0f172a;
}

/* En desktop: evita que juego/fecha se estiren */
.cb-field-juego[b-ejjm2brifn] {
    max-width: 220px;
}

.cb-select-juego[b-ejjm2brifn] {
    max-width: 220px;
}

.cb-field-fecha[b-ejjm2brifn] {
    max-width: 170px;
}

.cb-field-vend[b-ejjm2brifn] {
    min-width: 0;
}

@media (max-width: 1100px) {
    .cb-field-juego[b-ejjm2brifn],
    .cb-select-juego[b-ejjm2brifn],
    .cb-field-fecha[b-ejjm2brifn],
    .cb-field-vend[b-ejjm2brifn] {
        max-width: 100%;
        width: 100%;
    }
}

/* inputs normales */
.cb-select[b-ejjm2brifn],
.cb-date[b-ejjm2brifn],
.cb-vend-input[b-ejjm2brifn] {
    width: 100%;
    border-radius: 16px;
    border: 1px solid rgba(148,163,184,.45);
    padding: 12px 12px;
    outline: none;
    background: #ffffff;
    font-weight: 950;
    color: #0b1220;
    transition: .15s ease;
    font-size: 1.05rem;
    box-shadow: 0 10px 18px rgba(15,23,42,.06);
    box-sizing: border-box;
}

    .cb-select:focus[b-ejjm2brifn],
    .cb-date:focus[b-ejjm2brifn],
    .cb-vend-input:focus[b-ejjm2brifn] {
        border-color: rgba(99,102,241,.85);
        box-shadow: 0 0 0 4px rgba(99,102,241,.18), 0 14px 24px rgba(15,23,42,.10);
    }

/* texto "Seleccionado" normal */
.cb-vend-hint[b-ejjm2brifn] {
    margin-top: 4px;
    font-size: .9rem;
    font-weight: 900;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* texto "Seleccionado" fuerte */
.cb-vend-hint-strong[b-ejjm2brifn] {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: linear-gradient(180deg, #e9f2ff, #ffffff);
    border: 1px solid rgba(59,130,246,.28);
    color: #0b3a78;
    font-size: 13.5px;
    font-weight: 950;
    box-shadow: 0 10px 18px rgba(15,23,42,.06);
}

/* =========================================================
   ACTIONS
========================================================= */
.cb-actions[b-ejjm2brifn] {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

@media (max-width: 1100px) {
    .cb-actions[b-ejjm2brifn] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .cb-actions .cb-btn[b-ejjm2brifn] {
        flex: 1 1 auto;
    }
}

.cb-btn[b-ejjm2brifn] {
    border: 0;
    border-radius: 16px;
    padding: 12px 14px;
    font-weight: 1000;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: transform .08s ease, box-shadow .15s ease, filter .15s ease, opacity .15s ease;
    font-size: 1.05rem;
    user-select: none;
}

    .cb-btn:active[b-ejjm2brifn] {
        transform: translateY(1px);
    }

    .cb-btn:disabled[b-ejjm2brifn] {
        opacity: .55;
        cursor: not-allowed;
        box-shadow: none;
    }

.cb-btn-icon[b-ejjm2brifn] {
    font-size: 1.1rem;
    line-height: 1;
}

.cb-btn-primary[b-ejjm2brifn] {
    color: #fff;
    background: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%);
    box-shadow: 0 16px 30px rgba(99,102,241,.22);
}

    .cb-btn-primary:hover[b-ejjm2brifn] {
        filter: brightness(1.02);
        box-shadow: 0 18px 34px rgba(99,102,241,.28);
    }

.cb-btn-soft[b-ejjm2brifn] {
    color: #0b1220;
    background: linear-gradient(180deg, #ffffff 0%, #f2f6ff 100%);
    border: 1px solid rgba(148,163,184,.35);
    box-shadow: 0 14px 22px rgba(15,23,42,.08);
}

    .cb-btn-soft:hover[b-ejjm2brifn] {
        filter: brightness(.99);
    }

/* =========================================================
   MESSAGES
========================================================= */
.cb-hint[b-ejjm2brifn] {
    margin-top: 14px;
    padding: 14px;
    border-radius: 18px;
    border: 1px dashed rgba(99,102,241,.45);
    background: linear-gradient(180deg, #ffffff 0%, #f4f7ff 100%);
    color: #0f172a;
    font-weight: 950;
    font-size: 1.02rem;
    box-shadow: 0 12px 20px rgba(15,23,42,.06);
}

.cb-alert[b-ejjm2brifn] {
    margin-top: 14px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(148,163,184,.35);
    background: #fff;
    box-shadow: 0 12px 22px rgba(15,23,42,.08);
}

.cb-alert-title[b-ejjm2brifn] {
    font-weight: 1000;
    color: #0b1220;
    margin-bottom: 6px;
    font-size: 1.05rem;
}

.cb-alert-msg[b-ejjm2brifn] {
    color: #1f2937;
    font-weight: 900;
    font-size: 1rem;
}

.cb-alert-danger[b-ejjm2brifn] {
    border-color: rgba(239,68,68,.35);
    background: linear-gradient(180deg, #fff5f5 0%, #ffffff 100%);
}

.cb-alert-soft[b-ejjm2brifn] {
    border-color: rgba(14,165,233,.25);
    background: linear-gradient(180deg, #f4fbff 0%, #ffffff 100%);
}

/* =========================================================
   SUMMARY CARD + TABLE
========================================================= */
.cb-card[b-ejjm2brifn] {
    margin-top: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
    border-radius: 22px;
    border: 1px solid rgba(148,163,184,.35);
    box-shadow: 0 18px 34px rgba(15,23,42,.10);
    padding: 14px;
}

.cb-card-top[b-ejjm2brifn] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.cb-card-title[b-ejjm2brifn] {
    font-weight: 1000;
    color: #0b1220;
    font-size: 1.25rem;
}

.cb-card-sub[b-ejjm2brifn] {
    margin-top: 4px;
    color: #475569;
    font-weight: 950;
    font-size: 1.02rem;
}

/* chips */
.cb-totals[b-ejjm2brifn] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: stretch;
}

.cb-total-chip[b-ejjm2brifn] {
    min-width: 155px;
    border-radius: 18px;
    padding: 10px 12px;
    border: 1px solid rgba(148,163,184,.35);
    background: radial-gradient(240px 80px at 20% 0%, rgba(99,102,241,.18), transparent 65%), linear-gradient(180deg, #ffffff 0%, #f4f7ff 100%);
    box-shadow: 0 12px 20px rgba(15,23,42,.07);
}

    .cb-total-chip .k[b-ejjm2brifn] {
        font-weight: 1000;
        font-size: .9rem;
        color: #475569;
        margin-bottom: 4px;
    }

    .cb-total-chip .v[b-ejjm2brifn] {
        font-weight: 1000;
        font-size: 1.3rem;
        color: #0b1220;
    }

.cb-total-chip-strong[b-ejjm2brifn] {
    border-color: rgba(14,165,233,.40);
    background: radial-gradient(240px 80px at 70% 0%, rgba(14,165,233,.20), transparent 65%), linear-gradient(180deg, #ffffff 0%, #f2fbff 100%);
}

/* main table */
.cb-table-wrap[b-ejjm2brifn] {
    margin-top: 12px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(148,163,184,.35);
    box-shadow: 0 14px 26px rgba(15,23,42,.08);
}

.cb-table[b-ejjm2brifn] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
}

    .cb-table thead th[b-ejjm2brifn] {
        padding: 12px 12px;
        font-weight: 1000;
        text-align: left;
        font-size: 1rem;
        color: #0b1220;
        background: linear-gradient(135deg, #eef2ff 0%, #e0f2fe 60%, #f8fafc 100%);
        border-bottom: 1px solid rgba(148,163,184,.35);
    }

    .cb-table tbody td[b-ejjm2brifn] {
        padding: 12px 12px;
        border-bottom: 1px solid rgba(226,232,240,.9);
        color: #0f172a;
        font-weight: 950;
        background: #fff;
        font-size: 1.02rem;
    }

    .cb-table tbody tr:nth-child(2n) td[b-ejjm2brifn] {
        background: #fbfdff;
    }

    .cb-table tbody tr:hover td[b-ejjm2brifn] {
        background: #f1f5ff;
    }

    .cb-table tfoot td[b-ejjm2brifn] {
        padding: 12px 12px;
        font-weight: 1000;
        background: #0b1220;
        color: #fff;
        border-top: 1px solid rgba(255,255,255,.15);
        font-size: 1.05rem;
    }

    .cb-table .num[b-ejjm2brifn] {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

.cb-name[b-ejjm2brifn] {
    font-weight: 1000;
    color: #0b1220;
}

.venta[b-ejjm2brifn] {
    color: #4f46e5;
}

.comi[b-ejjm2brifn] {
    color: #0f766e;
}

.prem[b-ejjm2brifn] {
    color: #b91c1c;
}

.saldo[b-ejjm2brifn] {
    color: #0b1220;
}

.saldo-neg[b-ejjm2brifn] {
    color: #dc2626 !important;
    font-weight: 950;
}

.saldo-pos[b-ejjm2brifn] {
    color: #15803d !important;
    font-weight: 950;
}

.total-label[b-ejjm2brifn] {
    font-weight: 1000;
}

/* ganador pill */
.cb-pill[b-ejjm2brifn] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffffff 0%, #f4f7ff 100%);
    border: 1px solid rgba(99,102,241,.25);
    color: #1f2937;
    font-weight: 1000;
    box-shadow: 0 10px 16px rgba(15,23,42,.08);
}

.cb-muted[b-ejjm2brifn] {
    color: #94a3b8;
    font-weight: 950;
}

/* bolitas */
.cb-bola[b-ejjm2brifn] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid rgba(0,0,0,.15);
}

.cb-bola-roja[b-ejjm2brifn] {
    background: #ef4444;
}

.cb-bola-blanca[b-ejjm2brifn] {
    background: #ffffff;
    border: 1px solid rgba(15,23,42,.25);
}

.cb-bola-mix[b-ejjm2brifn] {
    background: linear-gradient(135deg, #ef4444 0%, #ffffff 100%);
}

/* icon button lista */
.cb-icon[b-ejjm2brifn] {
    border: 1px solid rgba(148,163,184,.35);
    background: linear-gradient(180deg, #ffffff 0%, #f4f7ff 100%);
    color: #0b1220;
    border-radius: 14px;
    padding: 9px 10px;
    cursor: pointer;
    font-weight: 1000;
    transition: .15s ease;
    box-shadow: 0 10px 16px rgba(15,23,42,.08);
    font-size: 1rem;
}

    .cb-icon:hover[b-ejjm2brifn] {
        transform: translateY(-1px);
        background: #eef2ff;
    }

/* =========================================================
   MODAL LISTA (TIEMPOS / PARLEY)
========================================================= */
.cb-modal-overlay[b-ejjm2brifn] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 2300 !important;
}

/* Modal */
.cb-modal-lista[b-ejjm2brifn] {
    position: fixed;
    inset: 12px !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    background: radial-gradient(1200px 600px at 20% -10%, rgba(99,102,241,.18), transparent 60%), radial-gradient(900px 500px at 90% 0%, rgba(14,165,233,.14), transparent 55%), linear-gradient(180deg, #fbfcff 0%, #f3f7ff 100%);
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(15,23,42,.40);
    border: 1px solid rgba(148,163,184,.35);
    z-index: 2310 !important;
    padding: 18px 14px 16px;
    backdrop-filter: blur(10px);
    overflow: auto !important;
    box-sizing: border-box;
}

/* cerrar */
.cb-modal-close[b-ejjm2brifn] {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    font-size: 22px;
    font-weight: 900;
    cursor: pointer;
    color: #ef4444;
    z-index: 2400;
}

    .cb-modal-close:hover[b-ejjm2brifn] {
        filter: brightness(.9);
    }

.cb-modal-wrap[b-ejjm2brifn] {
    width: 100%;
    max-width: none;
    padding: 0;
    box-sizing: border-box;
}

/* =========================================================
   TOPBAR DEL MODAL
========================================================= */
.cb-modal-topbar[b-ejjm2brifn] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 12px;
    border-radius: 18px;
    background: rgba(255,255,255,.80);
    border: 1px solid rgba(15, 23, 42, .12);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .12);
    backdrop-filter: blur(10px);
    box-sizing: border-box;
}

.cb-modal-top-left[b-ejjm2brifn] {
    display: grid;
    gap: 6px;
}

.cb-modal-top-title[b-ejjm2brifn] {
    font-size: 24px;
    font-weight: 950;
    letter-spacing: .2px;
    color: #c2410c;
}

.cb-modal-sorteo[b-ejjm2brifn] {
    color: #0f172a;
    font-weight: 1000;
}

.cb-modal-top-total[b-ejjm2brifn] {
    font-size: 14px;
    font-weight: 900;
    color: #0f172a;
}

    .cb-modal-top-total .lbl[b-ejjm2brifn] {
        opacity: .75;
        margin-right: 6px;
    }

    .cb-modal-top-total .val[b-ejjm2brifn] {
        font-weight: 1000;
    }

/* chips del modal */
.cb-modal-top-chips[b-ejjm2brifn] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

    .cb-modal-top-chips .chip[b-ejjm2brifn] {
        min-width: 140px;
        padding: 10px 12px;
        border-radius: 16px;
        background: rgba(255,255,255,.90);
        border: 1px solid rgba(15,23,42,.10);
        box-shadow: 0 14px 28px rgba(15,23,42,.10);
        text-align: left;
    }

        .cb-modal-top-chips .chip .k[b-ejjm2brifn] {
            font-size: 12px;
            font-weight: 950;
            opacity: .65;
            letter-spacing: .2px;
        }

        .cb-modal-top-chips .chip .v[b-ejjm2brifn] {
            margin-top: 2px;
            font-size: 18px;
            font-weight: 950;
            letter-spacing: .2px;
        }

    .cb-modal-top-chips .chip-strong[b-ejjm2brifn] {
        border-color: rgba(34,197,94,.22);
        background: rgba(34,197,94,.10);
    }

/* =========================================================
   GANADOR (arriba del grid)
========================================================= */
.cb-fila-totales-normal[b-ejjm2brifn] {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .cb-fila-totales-normal .label[b-ejjm2brifn] {
        font-weight: 950;
        color: #0f172a;
    }

.cb-win-pill[b-ejjm2brifn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: 950;
    letter-spacing: .5px;
    line-height: 1;
    transform: translateZ(0);
}

    .cb-win-pill.cb-win-soft-red[b-ejjm2brifn] {
        font-size: 1.15rem;
        color: #8b1b1b;
        background: linear-gradient(180deg, #ffe9e9, #ffd0d0);
        border: 1px solid rgba(183, 28, 28, 0.28);
        box-shadow: 0 10px 22px rgba(183, 28, 28, 0.14);
        animation: cbWinGlow-b-ejjm2brifn 1.2s ease-in-out infinite alternate;
    }

@keyframes cbWinGlow-b-ejjm2brifn {
    from {
        transform: scale(1);
        filter: saturate(1);
    }

    to {
        transform: scale(1.04);
        filter: saturate(1.15);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cb-win-pill.cb-win-soft-red[b-ejjm2brifn] {
        animation: none !important;
    }
}

/* =========================================================
   LISTA TIEMPOS (00..99)
========================================================= */
.cb-modal-grid-zoom[b-ejjm2brifn] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

/* Cabecera y filas iguales */
.cb-fila-cabecera[b-ejjm2brifn],
.cb-fila-numeros[b-ejjm2brifn] {
    display: grid;
    grid-template-columns: repeat(5, 90px 95px);
    column-gap: 4px;
    row-gap: 4px;
    justify-content: center;
    align-items: center;
}

    /* ====== REVENTADO: MISMO ANCHO PARA MONTO y R ====== */
    .cb-fila-cabecera.cb-cabecera-reventado[b-ejjm2brifn],
    .cb-fila-numeros.cb-fila-reventado[b-ejjm2brifn] {
        grid-template-columns: repeat(5, 90px 95px 95px) !important; /* N° | Monto | R */
    }

    /* =========================================================
   REVENTADO: R MISMO ANCHO QUE MONTO (95px)
========================================================= */

    /* Grid reventado: N° | Monto | R  (R = 95px igual que Monto) */
    .cb-fila-cabecera.cb-cabecera-reventado[b-ejjm2brifn],
    .cb-fila-numeros.cb-fila-reventado[b-ejjm2brifn] {
        grid-template-columns: repeat(5, 90px 95px 95px) !important;
    }

/* Cabecera R: mismo tamaño visual que las otras */
.cb-cabecera-reventado .h-r[b-ejjm2brifn] {
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 13px;
    color: #fff;
    border-radius: 10px;
    background: linear-gradient(180deg, #ef4444, #dc2626);
}

/* Totales reventado: debe usar el MISMO grid que la tabla */
.cb-fila-totales-f.cb-totales-reventado[b-ejjm2brifn] {
    grid-template-columns: repeat(5, 90px 95px 95px) !important;
}


    /* headers */
    .cb-fila-cabecera .h-num[b-ejjm2brifn],
    .cb-fila-cabecera .h-monto[b-ejjm2brifn] {
        height: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 900;
        font-size: 13px;
        color: #fff;
        border-radius: 10px;
    }

    .cb-fila-cabecera .h-num[b-ejjm2brifn] {
        background: linear-gradient(180deg, #2563eb, #1d4ed8);
    }

    .cb-fila-cabecera .h-monto[b-ejjm2brifn] {
        background: linear-gradient(180deg, #16a34a, #15803d);
    }

.cb-celda-num[b-ejjm2brifn] {
    height: 26px;
    border-radius: 10px;
    border: 1px solid rgba(37,99,235,.22);
    /* azul suave tipo header */
    background: linear-gradient(180deg, rgba(37,99,235,.14), rgba(37,99,235,.08));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 950;
    /* texto azul fuerte */
    color: #1d4ed8;
}

.cb-celda-monto[b-ejjm2brifn] {
    height: 26px;
    border-radius: 10px;
    border: 1px solid rgba(22,163,74,.22);
    /* verde suave tipo header */
    background: linear-gradient(180deg, rgba(22,163,74,.14), rgba(22,163,74,.08));
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
    font-size: 13px;
    font-weight: 950;
    font-variant-numeric: tabular-nums;
    /* texto verde fuerte */
    color: #15803d;
}
/* ganador */
.cb-celda-num.ganador[b-ejjm2brifn] {
    background: linear-gradient(180deg, #fff0f0, #ffdede);
    border: 1px solid rgba(183,28,28,.35);
    color: #8b1b1b;
    font-weight: 950;
    box-shadow: 0 10px 22px rgba(183, 28, 28, 0.12);
    animation: cbCellPulse-b-ejjm2brifn 1.1s ease-in-out infinite alternate;
}

.cb-celda-monto.ganador-monto[b-ejjm2brifn] {
    background: linear-gradient(180deg, #fff7e7, #ffe0a8);
    border: 1px solid rgba(198, 130, 0, 0.35);
    color: #7a3c00;
    font-weight: 950;
    box-shadow: 0 10px 22px rgba(198, 130, 0, 0.12);
    animation: cbCellPulse-b-ejjm2brifn 1.1s ease-in-out infinite alternate;
}

@keyframes cbCellPulse-b-ejjm2brifn {
    from {
        transform: scale(1);
        filter: brightness(1);
    }

    to {
        transform: scale(1.05);
        filter: brightness(1.05);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cb-celda-num.ganador[b-ejjm2brifn],
    .cb-celda-monto.ganador-monto[b-ejjm2brifn] {
        animation: none !important;
    }
}

/* =========================================================
   TOTALES F1..F5
========================================================= */
.cb-fila-totales-f[b-ejjm2brifn] {
    width: fit-content;
    margin: 6px auto 0;
    display: grid;
    grid-template-columns: repeat(5, 90px 95px);
    column-gap: 4px;
    row-gap: 6px;
    justify-content: center;
    align-items: center;
}


    .cb-fila-totales-f .box[b-ejjm2brifn] {
        grid-column: span 2;
        border-radius: 12px;
        border: 1px dashed rgba(15,23,42,.25);
        background: rgba(226,232,240,.55);
        padding: 8px 10px;
        text-align: center;
        box-shadow: 0 10px 18px rgba(15,23,42,.06);
    }

        .cb-fila-totales-f .box:nth-child(1)[b-ejjm2brifn] {
            grid-column: 1 / 3;
        }

        .cb-fila-totales-f .box:nth-child(2)[b-ejjm2brifn] {
            grid-column: 3 / 5;
        }

        .cb-fila-totales-f .box:nth-child(3)[b-ejjm2brifn] {
            grid-column: 5 / 7;
        }

        .cb-fila-totales-f .box:nth-child(4)[b-ejjm2brifn] {
            grid-column: 7 / 9;
        }

        .cb-fila-totales-f .box:nth-child(5)[b-ejjm2brifn] {
            grid-column: 9 / 11;
        }

    .cb-fila-totales-f .label[b-ejjm2brifn] {
        font-size: 13px;
        font-weight: 950;
        color: #1d4ed8;
    }

    .cb-fila-totales-f .valor[b-ejjm2brifn] {
        margin-top: 4px;
        font-size: 16px;
        font-weight: 1000;
        color: #0b1220;
        font-variant-numeric: tabular-nums;
    }

/* =========================================================
   PARLEY EN MODAL
========================================================= */
.cb-lista-parley[b-ejjm2brifn] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

    .cb-lista-parley .cb-fila-cabecera.parley[b-ejjm2brifn],
    .cb-lista-parley .cb-fila-numeros.parley[b-ejjm2brifn] {
        display: grid;
        grid-template-columns: repeat(5, 90px 95px);
        column-gap: 4px;
        row-gap: 4px;
        justify-content: center;
        align-items: center;
    }

    .cb-lista-parley .cb-celda-num.parley[b-ejjm2brifn],
    .cb-lista-parley .cb-celda-monto.parley[b-ejjm2brifn] {
        font-size: 13px;
        font-weight: 900;
    }

/* =========================================================
   HISTÓRICOS MODAL
========================================================= */
.cb-modal-overlay-hist[b-ejjm2brifn] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 2200;
}

.cb-modal-hist[b-ejjm2brifn] {
    position: fixed;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    width: min(680px, calc(100vw - 28px));
    max-width: 680px;
    background: rgba(255,255,255,.96);
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(15,23,42,.40);
    border: 1px solid rgba(148,163,184,.35);
    z-index: 2210;
    padding: 22px 24px 20px;
    backdrop-filter: blur(10px);
    box-sizing: border-box;
}

.cb-hist-title .t1[b-ejjm2brifn] {
    font-size: 26px;
    font-weight: 950;
}

.cb-hist-title .t2[b-ejjm2brifn] {
    margin-top: 4px;
    color: #64748b;
    font-size: 15px;
    font-weight: 800;
}

.cb-hist-grid[b-ejjm2brifn] {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 14px;
    align-items: end;
}

.cb-hist-field label[b-ejjm2brifn] {
    display: block;
    font-size: 13px;
    color: #475569;
    margin-bottom: 6px;
    font-weight: 800;
}

.cb-hist-field input[b-ejjm2brifn] {
    height: 52px;
    border-radius: 14px;
    font-size: 18px;
    font-weight: 800;
    padding: 0 12px;
    border: 1px solid rgba(148,163,184,.55);
    outline: none;
    background: rgba(255,255,255,.92);
    box-sizing: border-box;
}

    .cb-hist-field input:focus[b-ejjm2brifn] {
        border-color: rgba(37, 99, 235, .55);
        box-shadow: 0 0 0 4px rgba(37,99,235,.14);
    }

.cb-hist-actions[b-ejjm2brifn] {
    display: flex;
    justify-content: flex-end;
}

.cb-hist-btn[b-ejjm2brifn] {
    height: 48px;
    border-radius: 14px;
    font-size: 17px;
    padding: 0 22px;
}

/* =========================================================
   RESUMEN HISTÓRICO FULL SCREEN
========================================================= */
.cb-modal-hist.cb-modal-hist-wide[b-ejjm2brifn] {
    inset: 12px !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden;
    border-radius: 18px;
    padding: 18px 18px 14px;
}

.cb-modal-resumen-hist[b-ejjm2brifn] {
    position: fixed !important;
    inset: 12px !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    overflow: hidden !important;
    border-radius: 18px !important;
}

.cb-modal-hist.cb-modal-hist-wide .cb-table-wrap[b-ejjm2brifn] {
    height: calc(100vh - 170px) !important;
    max-height: none !important;
    overflow: auto !important;
    border-radius: 14px;
    border: 1px solid rgba(148,163,184,.28);
    background: rgba(255,255,255,.72);
    box-shadow: inset 0 0 0 1px rgba(15,23,42,.03);
    padding: 0 !important;
    box-sizing: border-box;
    scrollbar-gutter: stable both-edges;
}

    /* scrollbars */
    .cb-modal-hist.cb-modal-hist-wide .cb-table-wrap[b-ejjm2brifn]::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    .cb-modal-hist.cb-modal-hist-wide .cb-table-wrap[b-ejjm2brifn]::-webkit-scrollbar-thumb {
        background: rgba(15,23,42,.22);
        border-radius: 999px;
        border: 2px solid rgba(255,255,255,.70);
    }

    .cb-modal-hist.cb-modal-hist-wide .cb-table-wrap[b-ejjm2brifn]::-webkit-scrollbar-track {
        background: rgba(15,23,42,.06);
        border-radius: 999px;
    }

/* alternado fuerte */
.cb-modal-hist-wide .cb-table tbody td[b-ejjm2brifn] {
    background: transparent !important;
}

.cb-modal-hist-wide .cb-table tbody tr:nth-child(odd) td[b-ejjm2brifn] {
    background: rgba(37, 99, 235, .18) !important;
}

.cb-modal-hist-wide .cb-table tbody tr:nth-child(even) td[b-ejjm2brifn] {
    background: rgba(37, 99, 235, .11) !important;
}

.cb-modal-hist-wide .cb-table tbody tr:hover td[b-ejjm2brifn] {
    background: rgba(59, 130, 246, .22) !important;
}

/* =========================================================
   FECHA MODAL
========================================================= */
.cb-fecha-modal[b-ejjm2brifn] {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 2600;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(148,163,184,.35);
    box-shadow: 0 14px 24px rgba(15,23,42,.12);
    font-weight: 900;
    color: #0b1220;
}

/* =========================================================
   Franja de seleccionados debajo
========================================================= */
.cb-selected-strip[b-ejjm2brifn] {
    grid-column: 1 / -1;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 16px;
    background: linear-gradient(180deg, #eef6ff 0%, #ffffff 100%);
    border: 1px solid rgba(59,130,246,.25);
    box-shadow: 0 12px 22px rgba(15,23,42,.08);
}

.cb-selected-pill[b-ejjm2brifn] {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    border-radius: 14px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(148,163,184,.30);
}

    .cb-selected-pill .k[b-ejjm2brifn] {
        font-weight: 950;
        color: #0b3a78;
        font-size: 13px;
    }

    .cb-selected-pill .v[b-ejjm2brifn] {
        font-weight: 1000;
        color: #0f172a;
        font-size: 13px;
        max-width: 520px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* =========================================================
   COMBO (input + flecha + panel)  ✅ SELECTOR FUNCIONAL
========================================================= */
.cb-combo[b-ejjm2brifn] {
    position: relative;
    width: 100%;
}

.cb-combo-input[b-ejjm2brifn] {
    width: 100%;
    height: 46px;
    border-radius: 16px;
    border: 1px solid rgba(148,163,184,.45);
    padding: 0 44px 0 12px; /* espacio flecha */
    outline: none;
    background: #fff;
    font-weight: 950;
    color: #0b1220;
    transition: .15s ease;
    font-size: 1.05rem;
    box-shadow: 0 10px 18px rgba(15,23,42,.06);
    box-sizing: border-box;
}

    .cb-combo-input[b-ejjm2brifn]::placeholder {
        color: rgba(15,23,42,.45);
        font-weight: 900;
    }

    .cb-combo-input:focus[b-ejjm2brifn] {
        border-color: rgba(99,102,241,.85);
        box-shadow: 0 0 0 4px rgba(99,102,241,.18), 0 14px 24px rgba(15,23,42,.10);
    }

.cb-combo-arrow[b-ejjm2brifn] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    height: 34px;
    width: 34px;
    border-radius: 12px;
    border: 1px solid rgba(148,163,184,.35);
    background: linear-gradient(180deg,#ffffff 0%,#f2f6ff 100%);
    box-shadow: 0 10px 16px rgba(15,23,42,.08);
    cursor: pointer;
    font-weight: 1000;
    z-index: 3;
}

    .cb-combo-arrow:hover[b-ejjm2brifn] {
        filter: brightness(.99);
    }

.cb-combo-backdrop[b-ejjm2brifn] {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 6500;
}

.cb-multi-panel-float[b-ejjm2brifn] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 7000;
    background: rgba(255,255,255,.98);
    border: 1px solid rgba(148,163,184,.40);
    border-radius: 16px;
    box-shadow: 0 26px 60px rgba(15,23,42,.18);
    backdrop-filter: blur(10px);
    padding: 10px;
}

.cb-multi-row[b-ejjm2brifn] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    font-weight: 900;
    color: #0f172a;
    transition: background .12s ease;
}

    .cb-multi-row:hover[b-ejjm2brifn] {
        background: rgba(14,165,233,.10);
    }

    .cb-multi-row input[type="checkbox"][b-ejjm2brifn] {
        width: 16px;
        height: 16px;
        accent-color: #4f46e5;
    }

.cb-multi-row-top[b-ejjm2brifn] {
    background: rgba(99,102,241,.08);
    border: 1px solid rgba(99,102,241,.18);
    margin: 0 6px 8px;
}

.cb-multi-list[b-ejjm2brifn] {
    max-height: 240px;
    overflow: auto;
    padding: 0 6px 6px;
}

    .cb-multi-list[b-ejjm2brifn]::-webkit-scrollbar {
        width: 10px;
    }

    .cb-multi-list[b-ejjm2brifn]::-webkit-scrollbar-thumb {
        background: rgba(15,23,42,.18);
        border-radius: 999px;
        border: 2px solid rgba(255,255,255,.75);
    }

    .cb-multi-list[b-ejjm2brifn]::-webkit-scrollbar-track {
        background: rgba(15,23,42,.06);
        border-radius: 999px;
    }


/* Celda R: IGUAL que .cb-celda-monto en tamaño, pero roja */
.cb-celda-monto-r[b-ejjm2brifn] {
    height: 26px;
    border-radius: 10px;
    border: 1px solid rgba(15,23,42,.18);
    background: rgba(255,229,229,.95); /* rojo suave */
    display: flex;
    align-items: center;
    justify-content: flex-end; /* igual que Monto */
    padding-right: 10px; /* igual que Monto */

    font-size: 13px; /* igual que Monto */
    font-weight: 900; /* igual que Monto */
    font-variant-numeric: tabular-nums;
    color: #7a0000;
}
/* Ganador en R */
.ganador-monto-r[b-ejjm2brifn] {
    background: #ffd0d0;
    border-color: #e35d5b;
    color: #7a0000;
}
/* =========================================================
   TOTALES REVENTADO: label bajo N° y montos bajo Monto / R
========================================================= */

/* El grid general ya está en 90/95/95 por grupo */
.cb-fila-totales-f.cb-totales-reventado[b-ejjm2brifn] {
    grid-template-columns: repeat(5, 90px 95px 95px) !important;
}

    /* Cada total (F1..F5) ocupa 3 columnas (N° + Monto + R) */
    .cb-fila-totales-f.cb-totales-reventado .box[b-ejjm2brifn] {
        grid-column: span 3 !important;
        /* mini-grid interno para alinear perfecto */
        display: grid;
        grid-template-columns: 90px 95px 95px;
        align-items: center;
        padding: 8px 10px;
        text-align: left; /* importante */
    }

        /* Posicionar cada box EXACTO debajo de su grupo */
        .cb-fila-totales-f.cb-totales-reventado .box:nth-child(1)[b-ejjm2brifn] {
            grid-column: 1 / 4;
        }

        .cb-fila-totales-f.cb-totales-reventado .box:nth-child(2)[b-ejjm2brifn] {
            grid-column: 4 / 7;
        }

        .cb-fila-totales-f.cb-totales-reventado .box:nth-child(3)[b-ejjm2brifn] {
            grid-column: 7 / 10;
        }

        .cb-fila-totales-f.cb-totales-reventado .box:nth-child(4)[b-ejjm2brifn] {
            grid-column: 10 / 13;
        }

        .cb-fila-totales-f.cb-totales-reventado .box:nth-child(5)[b-ejjm2brifn] {
            grid-column: 13 / 16;
        }

        /* “Total F1:” va debajo de la columna N° */
        .cb-fila-totales-f.cb-totales-reventado .box .label[b-ejjm2brifn] {
            grid-column: 1;
            justify-self: center; /* centrado bajo N° */
            text-align: center;
            margin: 0;
        }

        /* El contenedor de valores ya no debe “separar” raro */
        .cb-fila-totales-f.cb-totales-reventado .box .valor[b-ejjm2brifn] {
            grid-column: 2 / 4; /* ocupa Monto + R */
            display: contents; /* permite ubicar t-n / t-r por columnas */
            margin: 0;
        }

            /* Base debajo de Monto */
            .cb-fila-totales-f.cb-totales-reventado .box .valor .t-n[b-ejjm2brifn] {
                grid-column: 2;
                justify-self: center;
                text-align: center;
            }

            /* Reventado debajo de R */
            .cb-fila-totales-f.cb-totales-reventado .box .valor .t-r[b-ejjm2brifn] {
                grid-column: 3;
                justify-self: center;
                text-align: center;
            }
/* _content/SistemaLoteriaDashboard/Components/Banca/ConsultaTotalesBanca.razor.rz.scp.css */
/* =========================
   CONSULTAS TOTALES (CG)
   ========================= */

.cg-header[b-v8srgo288g] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 14px;
}

.cg-shell[b-v8srgo288g] {
    width: 100%;
    max-width: none;
    padding: 22px 26px 30px;
    box-sizing: border-box;
}

.cg-title[b-v8srgo288g] {
    margin: 0;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: .2px;
}

/* =========================
   FILTROS
   ========================= */
.cg-filters[b-v8srgo288g] {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    padding: 16px 16px;
    border-radius: 18px;
    background: rgba(255,255,255,.80);
    border: 1px solid rgba(15,23,42,.14); /* 🔥 un poco más oscuro */
    box-shadow: 0 18px 40px rgba(15,23,42,.12);
    backdrop-filter: blur(10px);
}

.cg-field[b-v8srgo288g] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 220px;
}

.cg-label[b-v8srgo288g] {
    font-size: 14px;
    font-weight: 900;
    opacity: .78;
    letter-spacing: .2px;
}

.cg-date[b-v8srgo288g] {
    height: 46px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid rgba(15,23,42,.20); /* 🔥 más oscuro */
    background: #fff;
    outline: none;
    font-size: 16px;
    font-weight: 800;
}

    .cg-date:focus[b-v8srgo288g] {
        border-color: rgba(37,99,235,.70);
        box-shadow: 0 0 0 4px rgba(37,99,235,.16);
    }

/* =========================
   BOTÓN VER
   ========================= */
.cg-btn[b-v8srgo288g] {
    height: 46px;
    padding: 0 18px;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    font-weight: 900;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(180deg,#2563eb,#1d4ed8);
    color: #fff;
    box-shadow: 0 16px 34px rgba(37,99,235,.25);
    transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
    white-space: nowrap;
}

    .cg-btn:hover[b-v8srgo288g] {
        transform: translateY(-1px);
        box-shadow: 0 20px 44px rgba(37,99,235,.28);
    }

    .cg-btn:disabled[b-v8srgo288g] {
        opacity: .65;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.cg-btn-ico[b-v8srgo288g] {
    font-size: 18px;
    filter: drop-shadow(0 8px 14px rgba(0,0,0,.18));
}

/* =========================
   MENSAJES
   ========================= */
.cg-hint[b-v8srgo288g] {
    margin-top: 14px;
    padding: 12px;
    border-radius: 14px;
    border: 1px dashed rgba(148,163,184,.65);
    background: rgba(2,132,199,.06);
}

.cg-alert[b-v8srgo288g] {
    margin-top: 14px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(148,163,184,.45);
    background: rgba(15,23,42,.03);
}

    .cg-alert .t[b-v8srgo288g] {
        font-weight: 900;
        margin-bottom: 4px;
    }

    .cg-alert .m[b-v8srgo288g] {
        opacity: .85;
    }

.cg-alert-danger[b-v8srgo288g] {
    border-color: rgba(239,68,68,.40);
    background: rgba(239,68,68,.08);
}

.cg-alert-soft[b-v8srgo288g] {
    border-color: rgba(148,163,184,.45);
    background: rgba(2,132,199,.04);
}

/* =========================
   MODAL FULL SCREEN
   ========================= */
.cg-modal-overlay[b-v8srgo288g] {
    position: fixed;
    inset: 0;
    background: rgba(2,6,23,.55);
    backdrop-filter: blur(6px);
    z-index: 5000;
}

.cg-modal[b-v8srgo288g] {
    position: fixed;
    inset: 18px;
    border-radius: 18px;
    background: rgba(255,255,255,.98);
    border: 1px solid rgba(148,163,184,.40);
    box-shadow: 0 30px 80px rgba(2,6,23,.35);
    z-index: 5100;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cg-close[b-v8srgo288g] {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(148,163,184,.45);
    background: rgba(255,255,255,.95);
    font-size: 22px;
    cursor: pointer;
}

/* =========================
   CABECERA MODAL + CHIPS
   ========================= */
.cg-modal-head[b-v8srgo288g] {
    padding: 18px 18px 10px 18px;
    border-bottom: 1px solid rgba(148,163,184,.45);
    background: linear-gradient(180deg, rgba(59,130,246,.12), rgba(15,23,42,.02));
}

.cg-modal-title[b-v8srgo288g] {
    font-size: 18px;
    font-weight: 950;
}

.cg-modal-sub[b-v8srgo288g] {
    margin-top: 4px;
    opacity: .85;
    font-weight: 800;
}

.cg-chips[b-v8srgo288g] {
    margin-top: 12px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.cg-chip[b-v8srgo288g] {
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(148,163,184,.45); /* 🔥 bordes más visibles */
    background: rgba(255,255,255,.92);
    box-shadow: 0 10px 25px rgba(15,23,42,.08);
    min-width: 150px;
}

    .cg-chip .k[b-v8srgo288g] {
        font-size: 12px;
        opacity: .80;
        font-weight: 900;
    }

    .cg-chip .v[b-v8srgo288g] {
        margin-top: 2px;
        font-size: 16px;
        font-weight: 950;
    }

/* chips suaves (Ahorro / Retiro / Dep) */
.cg-chip-soft[b-v8srgo288g] {
    background: rgba(2,132,199,.06);
}

/* chip fuerte (Saldo final) */
.cg-chip-strong[b-v8srgo288g] {
    background: linear-gradient(180deg, rgba(16,185,129,.18), rgba(15,23,42,.02));
    border-color: rgba(16,185,129,.35);
}

/* ✅ COLORES DE VALORES EN CHIPS (ARRIBA) */
.cg-chip-venta .v[b-v8srgo288g] {
    color: #1e40af;
}
/* azul */
.cg-chip-comi .v[b-v8srgo288g] {
    color: #0284c7;
}
/* celeste */
.cg-chip-prem .v[b-v8srgo288g] {
    color: #dc2626;
}
/* rojo */
.cg-chip-ahorro .v[b-v8srgo288g] {
    color: #7c3aed;
}
/* morado agradable */
.cg-chip-retiro .v[b-v8srgo288g] {
    color: #b45309;
}
/* ámbar/café */
.cg-chip-dep .v[b-v8srgo288g] {
    color: #0f766e;
}
/* teal */

/* ✅ SALDO FINAL ARRIBA (chip) - OSCURO */
.cg-chip-strong .v.saldo-pos[b-v8srgo288g] {
    color: #065f46;
}

.cg-chip-strong .v.saldo-neg[b-v8srgo288g] {
    color: #991b1b;
}

/* =========================
   TABLA
   ========================= */
.cg-table-wrap[b-v8srgo288g] {
    padding: 14px 18px 18px 18px;
    overflow: auto;
    height: 100%;
    border-top: 1px solid rgba(148,163,184,.45); /* 🔥 separador visible */
}

.cg-table[b-v8srgo288g] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 1100px;
    margin: 0;
}

    .cg-table thead th[b-v8srgo288g] {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #0f172a;
        color: #fff;
        font-weight: 950;
        font-size: 17px;
        padding: 15px 12px;
        border-bottom: 2px solid rgba(255,255,255,.14); /* 🔥 línea más marcada */
    }

    .cg-table th.num[b-v8srgo288g],
    .cg-table td.num[b-v8srgo288g] {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    .cg-table tbody td[b-v8srgo288g] {
        padding: 14px 12px;
        font-size: 18px;
        font-weight: 850;
        border-bottom: 1px solid rgba(148,163,184,.55); /* 🔥 bordes más oscuros */
        background: rgba(255,255,255,.78);
    }

    .cg-table tbody tr:nth-child(even) td[b-v8srgo288g] {
        background: rgba(248,250,252,.95);
    }

    .cg-table tbody tr:nth-child(odd) td[b-v8srgo288g] {
        background: rgba(37,99,235,.10);
    }

    .cg-table tbody tr:hover td[b-v8srgo288g] {
        background: rgba(59,130,246,.22) !important;
    }

    /* columnas de valores (como en consulta sorteos) */
    .cg-table td.venta[b-v8srgo288g] {
        color: #1e40af;
        font-weight: 950;
    }

    .cg-table td.comi[b-v8srgo288g] {
        color: #0284c7;
        font-weight: 950;
    }

    .cg-table td.prem[b-v8srgo288g] {
        color: #dc2626;
        font-weight: 950;
    }

    .cg-table td.soft[b-v8srgo288g] {
        color: #475569;
        opacity: .90;
        font-weight: 850;
    }
    /* gris bonito */

    /* =========================
   ✅ SALDOS
   ========================= */

    /* ✅ Saldo por día = CLARO
   - cubre ambos casos: (pos/neg) y (saldo-pos/saldo-neg)
*/
    .cg-table td.saldo.pos[b-v8srgo288g],
    .cg-table td.saldo.saldo-pos[b-v8srgo288g] {
        color: rgba(5,150,105,1); /* verde claro */
        font-weight: 950;
    }

    .cg-table td.saldo.neg[b-v8srgo288g],
    .cg-table td.saldo.saldo-neg[b-v8srgo288g] {
        color: rgba(220,38,38,1); /* rojo claro */
        font-weight: 950;
    }

    /* =========================
   FOOTER (TOTAL GENERAL)
   ========================= */
    .cg-table tfoot td[b-v8srgo288g] {
        padding: 14px 12px;
        font-weight: 950;
        font-size: 18px;
        background: linear-gradient(180deg, rgba(15,23,42,.22), rgba(15,23,42,.14));
        border-top: 2px solid rgba(15,23,42,.26);
    }

    .cg-table .total-label[b-v8srgo288g] {
        text-transform: uppercase;
        letter-spacing: .5px;
    }

    /* ✅ Saldo final del TOTAL GENERAL = OSCURO */
    .cg-table tfoot .saldo-pos[b-v8srgo288g] {
        color: #065f46;
        font-weight: 950;
    }

    .cg-table tfoot .saldo-neg[b-v8srgo288g] {
        color: #991b1b;
        font-weight: 950;
    }

.cg-cancelado[b-v8srgo288g] {
    margin-top: 4px;
    color: #dc2626;
    font-weight: 800;
    font-size: 12px;
    line-height: 1;
}

.prestamo-tomado .cg-cancelado[b-v8srgo288g] {
    white-space: nowrap;
}
/* _content/SistemaLoteriaDashboard/Components/Banca/ListasEditor.razor.rz.scp.css */
/* =========================================================
   ✅ REDISEÑO MODERNO LISTAS / EDITOR
   - Fuentes más grandes
   - Selects más compactos (NO tan anchos)
   - Botones más modernos y agradables
   - Sin tocar lógica / Razor
   ========================================================= */

/* ====== Tarjeta principal de Listas ====== */
.listas-card[b-s5r11w0vs9] {
    background: linear-gradient(180deg,#ffffff 0%, #fbfdff 100%);
    border: 1px solid rgba(15, 55, 120, .10);
    border-radius: 18px;
    padding: 22px 22px 20px;
    box-shadow: 0 14px 32px rgba(0,0,0,.08);
}

/* ====== Cabecera: título + badge ====== */
.listas-header[b-s5r11w0vs9] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.listas-titulos[b-s5r11w0vs9] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.listas-header .card-titulo[b-s5r11w0vs9] {
    margin-bottom: 0;
    font-size: 1.45rem; /* ✅ más grande */
    font-weight: 950;
    color: #0f2f6d;
    letter-spacing: .2px;
}

.listas-subtitulo[b-s5r11w0vs9] {
    font-size: 1.02rem; /* ✅ más grande */
    font-weight: 750;
    color: #5b6c86;
}

/* Badge a la derecha */
.listas-badge span[b-s5r11w0vs9] {
    display: inline-block;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 0.9rem; /* ✅ más grande */
    font-weight: 900;
    background: linear-gradient(180deg,#eaf4ff,#dceeff);
    color: #0d47a1;
    border: 1px solid rgba(13,71,161,.18);
    box-shadow: 0 8px 16px rgba(13,71,161,.10);
}

/* ====== BARRA DE FECHA (ARRIBA) ====== */
.listas-fecha-bar[b-s5r11w0vs9] {
    margin: 12px 0 16px;
    padding: 14px 16px;
    border-radius: 16px;
    background: linear-gradient(90deg, #f1f6ff, #e5f2ff);
    border: 1px solid rgba(13,71,161,.14);
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 10px 22px rgba(0,0,0,.06);
}

.listas-fecha-label[b-s5r11w0vs9] {
    font-size: 0.92rem; /* ✅ más grande */
    font-weight: 900;
    color: #123a6c;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.listas-fecha-control[b-s5r11w0vs9] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Input de fecha compacto */
.input-fecha-compact[b-s5r11w0vs9] {
    max-width: 210px; /* ✅ un poquito más grande pero compacto */
}

/* Texto bonito de fecha */
.fecha-legible[b-s5r11w0vs9] {
    font-size: 1.05rem; /* ✅ más grande */
    font-weight: 900;
    color: #1f2933;
    text-transform: capitalize;
}

/* ====== Filtros: usuario / sorteo / botones ====== */
.listas-filtros[b-s5r11w0vs9] {
    display: grid;
    grid-template-columns: 1.2fr 1.2fr 1.0fr; /* ✅ más balanceado */
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 14px;
}

/* Bloque de filtro (label + control + hint) */
.filtro[b-s5r11w0vs9] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .filtro > label[b-s5r11w0vs9] {
        font-size: 0.98rem; /* ✅ más grande */
        font-weight: 950;
        color: #123a6c;
    }

/* Hints debajo de los selects */
.hint[b-s5r11w0vs9] {
    font-size: 0.92rem; /* ✅ más grande */
    color: #7183a2;
    font-weight: 700;
}

/* ====== Inputs compactos solo dentro de esta tarjeta ====== */
.listas-card .input[b-s5r11w0vs9],
.listas-card select.input[b-s5r11w0vs9],
.listas-card .input-compact[b-s5r11w0vs9] {
    padding: 12px 14px; /* ✅ más cómodo */
    border-radius: 14px; /* ✅ más moderno */
    font-size: 1.05rem; /* ✅ más grande */
    font-weight: 850;
    border: 1px solid rgba(100,130,190,.40);
    background: linear-gradient(180deg,#ffffff,#f7fbff);
    box-shadow: 0 10px 18px rgba(0,0,0,.06);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

    .listas-card .input:focus[b-s5r11w0vs9],
    .listas-card select.input:focus[b-s5r11w0vs9],
    .listas-card .input-compact:focus[b-s5r11w0vs9] {
        border-color: #2b7cff;
        box-shadow: 0 0 0 4px rgba(43,124,255,.14), 0 12px 24px rgba(0,0,0,.08);
    }

/* ✅ Selects NO tan anchos (compactos y bonitos)
   IMPORTANTE: no rompemos tu layout, solo limitamos el ancho visual.
*/
.select-usuario[b-s5r11w0vs9],
.select-sorteo[b-s5r11w0vs9] {
    width: 100%;
    max-width: 420px; /* ✅ evita que se vean gigantes */
}

/* Si tu grid les da mucho espacio, esto los mantiene “compactos” */
.filtro select.select-usuario[b-s5r11w0vs9],
.filtro select.select-sorteo[b-s5r11w0vs9] {
    justify-self: start;
}

/* Contenedor de los dos botones (Modificar / Crear) */
.filtro-boton[b-s5r11w0vs9] {
    align-self: stretch;
}

/* ===== Grupo de botones ===== */
.grupo-botones-lista[b-s5r11w0vs9] {
    display: flex;
    gap: 10px;
}

/* Botones modernos del módulo */
.btn-lista[b-s5r11w0vs9] {
    flex: 1;
    min-width: 120px;
    height: 50px; /* ✅ más alto */
    justify-content: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.02rem; /* ✅ más grande */
    font-weight: 950;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.10);
    cursor: pointer;
    user-select: none;
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
    box-shadow: 0 12px 22px rgba(0,0,0,.10);
}

    .btn-lista:active[b-s5r11w0vs9] {
        transform: scale(.985);
    }

/* Botón principal y secundario dentro de este módulo */
.btn-modificar[b-s5r11w0vs9] {
    background: linear-gradient(180deg,#1f6fff 0%, #0f3f9b 100%);
    color: #fff;
    border-color: rgba(15,63,155,.35);
}

.btn-crear[b-s5r11w0vs9] {
    background: linear-gradient(180deg,#eef2ff 0%, #dfe8ff 100%);
    color: #123a6c;
    border-color: rgba(18,58,108,.18);
}

.btn-modificar:hover[b-s5r11w0vs9] {
    filter: brightness(1.05);
    box-shadow: 0 16px 30px rgba(15,63,155,.18);
}

.btn-crear:hover[b-s5r11w0vs9] {
    filter: brightness(1.03);
    box-shadow: 0 16px 30px rgba(18,58,108,.14);
}

/* ====== Placeholder del contenido de listas ====== */
.listas-contenido-placeholder[b-s5r11w0vs9] {
    margin-top: 10px;
    padding: 18px 20px;
    border-radius: 16px;
    border: 1px dashed rgba(13,71,161,.25);
    background: linear-gradient(180deg,#fbfdff,#f2f8ff);
    color: #5c6f8b;
    font-size: 1.02rem; /* ✅ más grande */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    box-shadow: 0 12px 22px rgba(0,0,0,.06);
}

.placeholder-icono[b-s5r11w0vs9] {
    font-size: 2rem; /* ✅ más grande */
    margin-bottom: 2px;
}

.placeholder-texto-principal[b-s5r11w0vs9] {
    font-weight: 950;
    color: #243b63;
    font-size: 1.05rem;
}

.placeholder-texto-secundario[b-s5r11w0vs9] {
    font-size: 0.98rem;
    color: #6b7a93;
    font-weight: 750;
}

/* ====== Responsivo ====== */
@media (max-width: 900px) {
    .listas-filtros[b-s5r11w0vs9] {
        grid-template-columns: 1fr 1fr;
    }

    .select-usuario[b-s5r11w0vs9],
    .select-sorteo[b-s5r11w0vs9] {
        max-width: none; /* en móvil sí al 100% */
    }
}

@media (max-width: 650px) {
    .listas-filtros[b-s5r11w0vs9] {
        grid-template-columns: 1fr;
    }

    .listas-fecha-control[b-s5r11w0vs9] {
        flex-direction: column;
        align-items: flex-start;
    }

    .grupo-botones-lista[b-s5r11w0vs9] {
        flex-direction: row;
    }

    .btn-lista[b-s5r11w0vs9] {
        width: 100%;
    }
}

/* ===== MODAL VER LISTA (escala dinámica) ===== */
.modal-overlay[b-s5r11w0vs9] {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,.55);
    z-index: 99998 !important;
}

/* ✅ Modal más moderno */
.modal-lista[b-s5r11w0vs9] {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 96vw !important;
    height: 90vh !important;
    background: linear-gradient(180deg,#f0f7ff,#eaf3fb);
    border: 1px solid rgba(13,71,161,.18);
    border-radius: 16px;
    padding: 12px 14px;
    padding-top: 0px;
    box-shadow: 0 18px 60px rgba(0,0,0,.28);
    z-index: 99999 !important;
    box-sizing: border-box;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

body.modal-open[b-s5r11w0vs9] {
    overflow: hidden !important;
}

/* Botón X moderno */
.modal-close[b-s5r11w0vs9] {
    border: none;
    background: linear-gradient(180deg,#ffecec,#ffd9d9);
    color: #b40000;
    cursor: pointer;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 20px;
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 2;
    box-shadow: 0 10px 18px rgba(180,0,0,.12);
}

    .modal-close:hover[b-s5r11w0vs9] {
        filter: brightness(1.03);
        background: linear-gradient(180deg,#ffdede,#ffcaca);
    }

/* CONTENEDOR ÚNICO DEL CONTENIDO DE LA LISTA */
#listaCanvas[b-s5r11w0vs9] {
    width: 100%;
    height: 100%;
    padding: 12px 22px 22px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

#contentLista[b-s5r11w0vs9] {
    display: inline-block;
}

/* ============================
   🧱 ESTRUCTURA MODO NORMAL
   ============================ */
.lista-unica-normal[b-s5r11w0vs9] {
    width: 100%;
    max-width: 1180px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 0;
}

/* ============================
   🧱 ESTRUCTURA MODO REVENTADO
   ============================ */
.lista-unica-rev[b-s5r11w0vs9] {
    width: 100%;
    max-width: 1380px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 0;
}

/* === TÍTULO Y FECHA === */
.fila-titulo[b-s5r11w0vs9] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

/* ✅ Título más grande */
.titulo-sorteo-modal[b-s5r11w0vs9] {
    font-weight: 950;
    font-size: 1.85rem;
    color: #c68200;
    letter-spacing: .2px;
}

.fecha-modal[b-s5r11w0vs9] {
    font-weight: 850;
    font-size: 1.1rem;
    color: #255;
}

/* === TOTALES GENERALES (arriba) === */
.fila-totales-normal[b-s5r11w0vs9],
.fila-totales-rev[b-s5r11w0vs9] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

    .fila-totales-normal .label[b-s5r11w0vs9],
    .fila-totales-rev .label[b-s5r11w0vs9] {
        font-weight: 950;
        font-size: 1.05rem;
        color: #04192e;
    }

    .fila-totales-normal .valor[b-s5r11w0vs9],
    .fila-totales-rev .valor[b-s5r11w0vs9] {
        font-weight: 950;
        font-size: 1.05rem;
        color: #b31523;
    }

    .fila-totales-rev .sep[b-s5r11w0vs9] {
        margin: 0 8px;
        opacity: .6;
    }

/* ============================
   🧮 REJILLA PRINCIPAL
   ============================ */

/* Modo NORMAL */
.lista-unica-normal .fila-cabecera[b-s5r11w0vs9],
.lista-unica-normal .fila-numeros[b-s5r11w0vs9],
.lista-unica-normal .fila-totales-f[b-s5r11w0vs9] {
    display: grid;
    grid-template-columns: repeat(5, 70px 110px);
    column-gap: 6px;
    row-gap: 6px;
    justify-content: center;
}

/* Modo REVENTADO */
.lista-unica-rev .fila-cabecera[b-s5r11w0vs9],
.lista-unica-rev .fila-numeros[b-s5r11w0vs9],
.lista-unica-rev .fila-totales-f-rev[b-s5r11w0vs9] {
    display: grid;
    grid-template-columns: repeat(5, 70px 110px 110px);
    column-gap: 6px;
    row-gap: 6px;
    justify-content: center;
}

/* ============================
   🎨 CABECERAS
   ============================ */
.h-num[b-s5r11w0vs9],
.h-monto[b-s5r11w0vs9],
.h-monto-rev[b-s5r11w0vs9] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px; /* ✅ más grande */
    font-weight: 950;
    border-radius: 10px;
    height: 26px; /* ✅ más alto */
    box-sizing: border-box;
    box-shadow: 0 10px 18px rgba(0,0,0,.10);
}

/* 🔵 CABECERA N° */
.h-num[b-s5r11w0vs9] {
    background: linear-gradient(180deg,#1e78ff,#0d47a1);
    color: white;
    border: 1px solid rgba(13,71,161,.45);
}

/* 🟢 CABECERA MONTO */
.h-monto[b-s5r11w0vs9] {
    background: linear-gradient(180deg,#46c27b,#2e8b57);
    color: white;
    border: 1px solid rgba(46,139,87,.45);
}

/* 🔴 CABECERA REVENTADO */
.h-monto-rev[b-s5r11w0vs9] {
    background: linear-gradient(180deg,#ff6b5f,#c0392b);
    color: white;
    border: 1px solid rgba(192,57,43,.45);
}

/* ============================
   🎨 CELDAS (N°, Monto, R)
   ============================ */
.celda-num[b-s5r11w0vs9],
.celda-monto[b-s5r11w0vs9],
.celda-monto-rev[b-s5r11w0vs9] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px; /* ✅ más grande */
    font-weight: 900;
    padding: 0 8px;
    border-radius: 12px;
    height: 28px; /* ✅ más alto */
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 10px 18px rgba(0,0,0,.08);
}

/* Número */
.celda-num[b-s5r11w0vs9] {
    background: linear-gradient(180deg,#e9f5ff,#dff0ff);
    color: #0a406e;
    border: 1px solid rgba(10,64,110,.22);
}

/* Monto normal */
.celda-monto[b-s5r11w0vs9] {
    background: linear-gradient(180deg,#ecfff3,#def7ea);
    color: #0a5c38;
    border: 1px solid rgba(10,92,56,.22);
}

/* Monto reventado */
.celda-monto-rev[b-s5r11w0vs9] {
    background: linear-gradient(180deg,#fff0f0,#fde3e3);
    color: #b02222;
    border: 1px solid rgba(176,34,34,.22);
}

/* Números prohibidos en rojo */
.celda-num.prohibido[b-s5r11w0vs9] {
    color: #d32f2f;
    font-size: 16px;
}

/* ============================
   TOTALES F1..F5 — MODO NORMAL
   ============================ */
.fila-totales-f[b-s5r11w0vs9] {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 6px;
    margin-top: 6px;
}

    .fila-totales-f .label[b-s5r11w0vs9],
    .fila-totales-f .valor[b-s5r11w0vs9] {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 30px;
        font-size: 15px; /* ✅ más grande */
        font-weight: 950;
        border-radius: 12px;
        box-sizing: border-box;
        padding: 0 8px;
        box-shadow: 0 10px 18px rgba(0,0,0,.08);
    }

    /* Label */
    .fila-totales-f .label[b-s5r11w0vs9] {
        background: linear-gradient(180deg,#eef8ff,#e5f3ff);
        color: #0c6aa6;
        border: 1px dashed rgba(12,106,166,.55);
        white-space: nowrap;
    }

    /* Monto */
    .fila-totales-f .valor[b-s5r11w0vs9] {
        background: linear-gradient(180deg,#f1fff5,#e6ffee);
        color: #0f7a3a;
        border: 1px dashed rgba(15,122,58,.55);
    }

/* ============================
   TOTALES F1..F5 — MODO REVENTADO
   ============================ */
.fila-totales-f-rev[b-s5r11w0vs9] {
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    gap: 6px;
    margin-top: 6px;
}

    .fila-totales-f-rev .label[b-s5r11w0vs9],
    .fila-totales-f-rev .valor-normal[b-s5r11w0vs9],
    .fila-totales-f-rev .valor-rev[b-s5r11w0vs9] {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 30px;
        font-size: 15px; /* ✅ más grande */
        font-weight: 950;
        border-radius: 12px;
        box-sizing: border-box;
        padding: 0 8px;
        box-shadow: 0 10px 18px rgba(0,0,0,.08);
    }

    .fila-totales-f-rev .label[b-s5r11w0vs9] {
        background: linear-gradient(180deg,#eef8ff,#e5f3ff);
        color: #0c6aa6;
        border: 1px dashed rgba(12,106,166,.55);
        white-space: nowrap;
    }

    .fila-totales-f-rev .valor-normal[b-s5r11w0vs9] {
        background: linear-gradient(180deg,#f1fff5,#e6ffee);
        color: #0f7a3a;
        border: 1px dashed rgba(15,122,58,.55);
    }

    .fila-totales-f-rev .valor-rev[b-s5r11w0vs9] {
        background: linear-gradient(180deg,#fff5f5,#ffe3e3);
        color: #c62828;
        border: 1px dashed rgba(198,40,40,.55);
    }

/* Asegurar que nada se desborde raro */
#listaCanvas > div[b-s5r11w0vs9] {
    min-width: 0;
    min-height: 0;
}

/* === Popup de error de venta (centrado en la pantalla) === */
.venta-modal-backdrop[b-s5r11w0vs9] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.50);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
}

.venta-modal[b-s5r11w0vs9] {
    background: linear-gradient(180deg,#ffffff,#fbfdff);
    border-radius: 18px;
    padding: 20px 22px 22px;
    max-width: 460px;
    width: 92%;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.35);
    animation: ventaModalIn-b-s5r11w0vs9 0.18s ease-out;
    text-align: left;
    border: 1px solid rgba(0,0,0,.10);
}

    .venta-modal h3[b-s5r11w0vs9] {
        margin: 0 0 10px 0;
        font-size: 1.25rem;
        font-weight: 950;
        color: #c62828;
    }

    .venta-modal p[b-s5r11w0vs9] {
        margin: 0 0 18px 0;
        line-height: 1.45;
        font-size: 1.05rem;
        white-space: pre-line;
        color: #333;
        font-weight: 650;
    }

    .venta-modal .btn.ok[b-s5r11w0vs9] {
        width: 100%;
        font-weight: 800;
        height: 48px;
        border-radius: 14px;
    }

@keyframes ventaModalIn-b-s5r11w0vs9 {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.input-monto-lista[b-s5r11w0vs9] {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    text-align: center;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    outline: none;
    padding: 0;
    margin: 0;
}

/* Al enfocar, que solo marque el borde de la celda */
.celda-monto:focus-within[b-s5r11w0vs9] {
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.35), 0 10px 18px rgba(0,0,0,.10);
}

.toast-modal-centro[b-s5r11w0vs9] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 18px 26px;
    border-radius: 14px;
    font-size: 1.35rem;
    font-weight: 900;
    color: white;
    text-align: center;
    z-index: 999999 !important;
    box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}

/* Ya existentes */
.toast-ok[b-s5r11w0vs9] {
    background: #28a745;
}

.toast-error[b-s5r11w0vs9] {
    background: #dc3545;
}

/* 🔷 Header del modal: nombre + totales + barra de botones */
.fila-header-modal[b-s5r11w0vs9] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 8px;
}

/* Bloque izquierdo (nombre + totales) */
.header-info[b-s5r11w0vs9] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Bloque derecho (botones) */
.header-acciones[b-s5r11w0vs9] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Barra de acciones en la parte superior del modal (derecha) */
.modal-lista-actions[b-s5r11w0vs9] {
    position: absolute;
    top: 10px;
    right: 55px;
    display: flex;
    gap: 10px;
    z-index: 3;
}

/* Botones Guardar / Ingresar ventas dentro del modal de listas */
.btn-guardar-lista[b-s5r11w0vs9],
.btn-ingresar-lista[b-s5r11w0vs9] {
    min-width: 120px;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid rgba(13,71,161,.35);
    background: rgba(255,255,255,.85);
    color: #0d47a1;
    font-size: 0.98rem; /* ✅ más grande */
    font-weight: 950;
    cursor: pointer;
    box-shadow: 0 12px 22px rgba(0,0,0,.10);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

    .btn-guardar-lista:hover[b-s5r11w0vs9],
    .btn-ingresar-lista:hover[b-s5r11w0vs9] {
        filter: brightness(1.03);
        transform: translateY(-1px);
        box-shadow: 0 16px 30px rgba(0,0,0,.12);
    }

/* ===== Modal pequeño para Ingresar ventas ===== */
.modal-ingreso-overlay[b-s5r11w0vs9] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.50);
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 20px 0 0 20px;
    z-index: 100000;
}

.modal-ingreso[b-s5r11w0vs9] {
    background: linear-gradient(180deg,#ffffff,#fbfdff);
    border-radius: 16px;
    padding: 14px 14px 12px;
    width: 360px;
    max-width: 95vw;
    box-shadow: 0 22px 70px rgba(0,0,0,0.35);
    animation: ventaModalIn-b-s5r11w0vs9 0.18s ease-out;
    border: 1px solid rgba(0,0,0,.10);
}

/* Modal de ingreso más delgado en modo NORMAL */
.modal-ingreso-normal[b-s5r11w0vs9] {
    width: 245px;
}

.modal-ingreso-rev[b-s5r11w0vs9] {
    width: 360px;
}

.modal-ingreso h3[b-s5r11w0vs9] {
    margin: 0 0 6px 0;
    font-size: 1.15rem;
    font-weight: 950;
    color: #0d47a1;
}

.texto-modal-ingreso[b-s5r11w0vs9] {
    margin: 0 0 10px 0;
    font-size: 1.0rem;
    color: #444;
    font-weight: 700;
}

/* Tabla de ingreso */
.tabla-ingreso[b-s5r11w0vs9] {
    display: grid;
    grid-template-columns: 80px 120px 120px;
    gap: 6px;
    margin-bottom: 6px;
}

    .tabla-ingreso.encabezado[b-s5r11w0vs9] {
        font-size: 0.9rem;
        font-weight: 950;
        text-transform: uppercase;
        color: #123a6c;
    }

        .tabla-ingreso.encabezado .col-num[b-s5r11w0vs9],
        .tabla-ingreso.encabezado .col-monto[b-s5r11w0vs9],
        .tabla-ingreso.encabezado .col-monto-r[b-s5r11w0vs9] {
            border-radius: 10px;
            border: 1px solid rgba(0,0,0,.10);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Encabezados (más modernos) */
        .tabla-ingreso.encabezado .col-num[b-s5r11w0vs9] {
            background: linear-gradient(180deg,#d8ecff,#c6e2ff);
            border-color: rgba(13,71,161,.28);
        }

        .tabla-ingreso.encabezado .col-monto[b-s5r11w0vs9] {
            background: linear-gradient(180deg,#d7f4e5,#c9eddc);
            border-color: rgba(15,122,58,.25);
        }

        .tabla-ingreso.encabezado .col-monto-r[b-s5r11w0vs9] {
            background: linear-gradient(180deg,#ffd1d1,#f7bebe);
            border-color: rgba(176,34,34,.25);
        }

/* ============================
   ✅ ALINEACIÓN PERFECTA CABECERA vs FILAS
   ============================ */
.modal-ingreso-normal .tabla-ingreso[b-s5r11w0vs9] {
    grid-template-columns: 80px 120px !important;
}

.modal-ingreso-rev .tabla-ingreso[b-s5r11w0vs9] {
    grid-template-columns: 80px 120px 120px !important;
}

.modal-ingreso-parley .tabla-ingreso[b-s5r11w0vs9] {
    grid-template-columns: 80px 80px 120px !important;
}

/* Parley ancho intermedio */
.modal-ingreso-parley[b-s5r11w0vs9] {
    width: 300px;
}

/* Cabeceras */
.tabla-ingreso.encabezado .col-num[b-s5r11w0vs9],
.tabla-ingreso.encabezado .col-monto[b-s5r11w0vs9],
.tabla-ingreso.encabezado .col-monto-r[b-s5r11w0vs9] {
    width: 100%;
    box-sizing: border-box;
    padding: 0 !important;
    height: 30px;
    line-height: 30px;
}

/* Inputs */
.tabla-ingreso.fila .ingreso-input[b-s5r11w0vs9] {
    height: 30px;
    box-sizing: border-box;
    margin: 0;
}

/* Fila normal */
.tabla-ingreso.fila .ingreso-input[b-s5r11w0vs9] {
    width: 100%;
    padding: 6px 8px;
    border-radius: 10px;
    border: 2px solid rgba(148,163,184,.85);
    font-size: 1.0rem; /* ✅ más grande */
    font-weight: 850;
    text-align: center;
    box-sizing: border-box;
    background: #f8fafc;
    transition: box-shadow .12s ease, border-color .12s ease, background .12s ease;
}

    .tabla-ingreso.fila .ingreso-input:focus[b-s5r11w0vs9] {
        outline: none;
        border-color: #0d47a1;
        background: #eef4ff;
        box-shadow: 0 0 0 3px rgba(13,71,161,0.20);
    }

/* Footer */
.footer-ingreso[b-s5r11w0vs9] {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    font-size: 1.0rem; /* ✅ más grande */
}

.footer-ingreso-botones[b-s5r11w0vs9] {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.footer-ingreso-total[b-s5r11w0vs9] {
    font-weight: 950;
    color: #0f5132;
}

/* Botones footer */
.footer-ingreso-botones .btn[b-s5r11w0vs9] {
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 950;
    cursor: pointer;
    border: 1px solid rgba(0,0,0,.12);
    box-shadow: 0 12px 22px rgba(0,0,0,.10);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

    .footer-ingreso-botones .btn:active[b-s5r11w0vs9] {
        transform: scale(.985);
    }

.footer-ingreso-botones .btn-primario[b-s5r11w0vs9] {
    background: linear-gradient(180deg,#1f6fff,#0f3f9b);
    color: #fff;
    border: 1px solid rgba(15,63,155,.30);
}

.footer-ingreso-botones .btn-secundario[b-s5r11w0vs9] {
    background: linear-gradient(180deg,#f2f4f8,#e6ebf5);
    color: #111827;
    border: 1px solid rgba(17,24,39,.12);
}

.footer-ingreso-botones .btn-primario:hover[b-s5r11w0vs9] {
    filter: brightness(1.05);
    box-shadow: 0 16px 30px rgba(15,63,155,.18);
}

.footer-ingreso-botones .btn-secundario:hover[b-s5r11w0vs9] {
    filter: brightness(1.02);
    box-shadow: 0 16px 30px rgba(0,0,0,.10);
}

/* ===========================
   ✅ FIX RAÍZ MODAL INGRESO
=========================== */
.modal-ingreso[b-s5r11w0vs9] {
    height: 520px;
    max-height: 520px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* ✅ El body scrollea vertical */
#ingresoBody[b-s5r11w0vs9] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    box-sizing: border-box;
}

    #ingresoBody .tabla-ingreso[b-s5r11w0vs9] {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

/* Columnas estables */
.modal-ingreso-rev .tabla-ingreso[b-s5r11w0vs9] {
    grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1fr);
}

.modal-ingreso-normal .tabla-ingreso[b-s5r11w0vs9] {
    grid-template-columns: 80px minmax(0, 1fr);
}

/* Inputs no empujan */
#ingresoBody .ingreso-input[b-s5r11w0vs9] {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

/* ===== Colores base un poco más oscuros ===== */
.tabla-ingreso.fila .ingreso-input[data-col="0"][b-s5r11w0vs9] {
    background: #d9ecff;
    border-color: #7aa7d9;
}

.tabla-ingreso.fila .ingreso-input[data-col="1"][b-s5r11w0vs9] {
    background: #d8f2e6;
    border-color: #7fb99a;
}

.tabla-ingreso.fila .ingreso-input[data-col="2"][b-s5r11w0vs9] {
    background: #ffdcdc;
    border-color: #d49a9a;
}

/* ===== Foco más intenso ===== */
.tabla-ingreso.fila .ingreso-input[data-col="0"]:focus[b-s5r11w0vs9] {
    background: #cfe5ff;
    border-color: #0d47a1;
    box-shadow: 0 0 0 3px rgba(13,71,161,0.22);
}

.tabla-ingreso.fila .ingreso-input[data-col="1"]:focus[b-s5r11w0vs9] {
    background: #cdeedd;
    border-color: #0f7a3a;
    box-shadow: 0 0 0 3px rgba(15,122,58,0.20);
}

.tabla-ingreso.fila .ingreso-input[data-col="2"]:focus[b-s5r11w0vs9] {
    background: #f9cccc;
    border-color: #b02222;
    box-shadow: 0 0 0 3px rgba(176,34,34,0.20);
}

/* ==================================================
   CABECERAS MÁS OSCURAS
   ================================================== */
.tabla-ingreso.encabezado .col-num[b-s5r11w0vs9] {
    background: #bcdcff;
    border-color: #0d47a1;
    color: #0a2e52;
}

.tabla-ingreso.encabezado .col-monto[b-s5r11w0vs9] {
    background: #bfe6cf;
    border-color: #0f7a3a;
    color: #0b4d2b;
}

.tabla-ingreso.encabezado .col-monto-r[b-s5r11w0vs9] {
    background: #f2bcbc;
    border-color: #b02222;
    color: #7f1d1d;
}

/* ✅ Selector de lista: compacto (NO ancho) y moderno */
.fila-lista-selector[b-s5r11w0vs9] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.label-lista[b-s5r11w0vs9] {
    font-weight: 950;
    color: #123a6c;
    font-size: 1.0rem; /* ✅ más grande */
}

/* ✅ clave: el select NO se ve gigante */
.select-lista[b-s5r11w0vs9] {
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(13,71,161,.22);
    font-weight: 950;
    font-size: 1.0rem; /* ✅ más grande */
    background: linear-gradient(180deg,#eef6ff,#e1f0ff);
    color: #0d47a1;
    outline: none;
    cursor: pointer;
    box-shadow: 0 12px 22px rgba(13,71,161,.10);
    width: auto; /* ✅ evita ancho full */
    max-width: 340px; /* ✅ compacto */
}

.titulo-sorteo-linea[b-s5r11w0vs9] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.fila-lista-selector[b-s5r11w0vs9] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* =========================
   Confirmación borrado
========================= */
.confirm-overlay[b-s5r11w0vs9] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.60);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.confirm-box[b-s5r11w0vs9] {
    width: min(560px, 95vw);
    background: linear-gradient(180deg,#ffffff,#fbfdff);
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 18px;
    box-shadow: 0 30px 90px rgba(0,0,0,.35);
    padding: 18px 18px 16px;
}

.confirm-title[b-s5r11w0vs9] {
    font-weight: 950;
    font-size: 1.2rem;
    color: #0f2f6d;
    margin-bottom: 10px;
}

.confirm-msg[b-s5r11w0vs9] {
    font-size: 1.05rem;
    line-height: 1.45;
    color: rgba(0,0,0,.78);
    margin-bottom: 14px;
    font-weight: 650;
}

.confirm-actions[b-s5r11w0vs9] {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* =========================
   BOTONES TOP (Guardar / Borrar / Nueva / Ingresar)
========================= */
.modal-lista-actions.toolbar-acciones[b-s5r11w0vs9] {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    padding: 10px 12px;
    border: 1px solid rgba(0,0,0,.08);
    background: rgba(255,255,255,.72);
    border-radius: 16px;
    backdrop-filter: blur(7px);
    box-shadow: 0 12px 22px rgba(0,0,0,.10);
}

    .modal-lista-actions.toolbar-acciones .btn[b-s5r11w0vs9] {
        appearance: none;
        border: 1px solid rgba(0,0,0,.12);
        background: #fff;
        color: #123a75;
        font-weight: 950;
        font-size: 0.98rem; /* ✅ más grande */
        line-height: 1;
        padding: 10px 14px;
        border-radius: 14px;
        box-shadow: 0 12px 22px rgba(0,0,0,.10);
        transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
        cursor: pointer;
        user-select: none;
    }

        .modal-lista-actions.toolbar-acciones .btn:hover[b-s5r11w0vs9] {
            transform: translateY(-1px);
            box-shadow: 0 16px 30px rgba(0,0,0,.12);
            border-color: rgba(0,0,0,.18);
        }

        .modal-lista-actions.toolbar-acciones .btn:active[b-s5r11w0vs9] {
            transform: translateY(0px);
            box-shadow: 0 12px 20px rgba(0,0,0,.10);
        }

        .modal-lista-actions.toolbar-acciones .btn:focus[b-s5r11w0vs9] {
            outline: none;
            box-shadow: 0 0 0 4px rgba(33,105,255,.16), 0 16px 30px rgba(0,0,0,.12);
        }

    /* Guardar */
    .modal-lista-actions.toolbar-acciones .btn-guardar-lista[b-s5r11w0vs9] {
        background: linear-gradient(180deg, #1e63d7 0%, #0f3f9b 100%);
        color: #fff;
        border-color: rgba(15,63,155,.35);
    }

    /* Ingresar ventas */
    .modal-lista-actions.toolbar-acciones .btn-ingresar-lista[b-s5r11w0vs9] {
        background: rgba(255,255,255,.88);
        color: #123a75;
        border-color: rgba(18,58,117,.28);
    }

    /* Borrar lista */
    .modal-lista-actions.toolbar-acciones .btn-borrar-lista[b-s5r11w0vs9] {
        background: linear-gradient(180deg, #ff5a5f 0%, #d81e2b 100%);
        color: #fff;
        border-color: rgba(216,30,43,.35);
    }

    /* Si “Nueva lista” es el 3er botón usando btn-guardar-lista */
    .modal-lista-actions.toolbar-acciones .btn-guardar-lista:nth-of-type(3)[b-s5r11w0vs9] {
        background: linear-gradient(180deg, #f2f5fb 0%, #e6edf8 100%);
        color: #123a75;
        border-color: rgba(21,62,117,.20);
    }

    /* Botón Info */
    .modal-lista-actions.toolbar-acciones .btn-info-lista[b-s5r11w0vs9] {
        font-size: 0.92rem;
        padding: 10px 12px;
        border-radius: 14px;
        border: 1px solid rgba(25,118,210,.28);
        background: rgba(25,118,210,.10);
        color: #0b4aa3;
        font-weight: 950;
    }

        .modal-lista-actions.toolbar-acciones .btn-info-lista:hover[b-s5r11w0vs9] {
            background: rgba(25,118,210,.16);
        }

/* ===== Modal info (centrado, moderno) ===== */
.info-box[b-s5r11w0vs9] {
    width: min(600px, 96vw);
    background: linear-gradient(180deg,#ffffff,#fbfdff);
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(0,0,0,.28);
    padding: 14px 14px 12px;
}

.info-head[b-s5r11w0vs9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.info-title[b-s5r11w0vs9] {
    font-weight: 950;
    font-size: 1.1rem;
    color: #153e75;
}

.info-close[b-s5r11w0vs9] {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,.12);
    background: #fff;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    box-shadow: 0 12px 22px rgba(0,0,0,.10);
}

.info-grid[b-s5r11w0vs9] {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 10px 12px;
    font-size: 1.0rem;
}

    .info-grid .k[b-s5r11w0vs9] {
        font-weight: 950;
        color: #2a4c7f;
        opacity: .92;
    }

    .info-grid .v[b-s5r11w0vs9] {
        color: #0f2f57;
        font-weight: 750;
    }

.info-sep[b-s5r11w0vs9] {
    grid-column: 1 / -1;
    border: none;
    height: 1px;
    background: rgba(0,0,0,.10);
    margin: 8px 0;
}

.info-actions[b-s5r11w0vs9] {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

/* ✅ Modal ingreso PARLEY: un poco más ancho */
.modal-ingreso.modal-ingreso-parley[b-s5r11w0vs9] {
    width: 280px;
}

/* ✅ PARLEY: 3 columnas (A + B + MONTO) */
.modal-ingreso-parley .tabla-ingreso[b-s5r11w0vs9] {
    grid-template-columns: 70px 70px minmax(0, 1fr) !important;
}

    .modal-ingreso-parley .tabla-ingreso.encabezado .col-monto[b-s5r11w0vs9] {
        white-space: nowrap;
    }

.admin-confirm-backdrop[b-s5r11w0vs9] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 9998;
}

.admin-confirm-modal[b-s5r11w0vs9] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 14px;
}

.admin-confirm-box[b-s5r11w0vs9] {
    width: min(560px, 95vw);
    background: #fff;
    border-radius: 16px;
    padding: 18px 18px 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,.35);
    border: 3px solid #ff3b30;
}

.admin-confirm-title[b-s5r11w0vs9] {
    font-weight: 1000;
    font-size: 1.2rem;
    color: #ff3b30;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: .3px;
}

.admin-confirm-text[b-s5r11w0vs9] {
    font-size: 1.05rem;
    color: #1b2b3a;
    background: #fff3f2;
    border: 2px solid #ffb3ae;
    padding: 12px;
    border-radius: 12px;
    margin-bottom: 12px;
    line-height: 1.35;
    font-weight: 800;
}

.admin-confirm-sub[b-s5r11w0vs9] {
    font-size: 0.98rem;
    color: #203246;
    margin-bottom: 8px;
    font-weight: 800;
}

.admin-confirm-input[b-s5r11w0vs9] {
    width: 100%;
    padding: 12px 12px;
    border-radius: 12px;
    border: 2px solid #cfd8dc;
    font-size: 1.05rem;
    outline: none;
    font-weight: 800;
}

    .admin-confirm-input:focus[b-s5r11w0vs9] {
        border-color: #ff3b30;
        box-shadow: 0 0 0 3px rgba(255,59,48,.18);
    }

.admin-confirm-error[b-s5r11w0vs9] {
    margin-top: 10px;
    background: #ffe9e8;
    border: 2px solid #ffb3ae;
    color: #b00020;
    padding: 10px;
    border-radius: 12px;
    font-weight: 900;
}

.admin-confirm-actions[b-s5r11w0vs9] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
}

.admin-btn[b-s5r11w0vs9] {
    border: 0;
    border-radius: 12px;
    padding: 10px 14px;
    font-weight: 900;
    cursor: pointer;
}

.admin-btn-sec[b-s5r11w0vs9] {
    background: #e9eef3;
    color: #223;
}

.admin-btn-danger[b-s5r11w0vs9] {
    background: #ff3b30;
    color: #fff;
}

.btn-modificar-lista[b-s5r11w0vs9] {
    width: 100%;
    padding: 16px 24px;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    border-radius: 14px;
    border: none;
    background: linear-gradient(135deg, #1565c0, #0d47a1);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
    transition: all 0.25s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-bottom: 4px solid #d32f2f;
}

    .btn-modificar-lista:hover[b-s5r11w0vs9] {
        background: linear-gradient(135deg, #1976d2, #0b3c91);
        transform: translateY(-2px);
        box-shadow: 0 12px 22px rgba(0, 0, 0, 0.35);
    }

    .btn-modificar-lista:active[b-s5r11w0vs9] {
        transform: scale(0.98);
    }

    .btn-modificar-lista:focus[b-s5r11w0vs9] {
        outline: 3px solid rgba(255, 193, 7, 0.7);
    }



/* =========================================================
   ✅ MODAL SUMA LISTAS (FULL SCREEN)
   - Ventana completa
   - Scroll interno
   - Tabla centrada y compacta (como imagen 1)
   - Soporta Normal y Reventado
   ========================================================= */

/* =========================
   OVERLAY SUMA
========================= */
.modal-suma-overlay[b-s5r11w0vs9] {
    position: fixed;
    inset: 0;
    z-index: 5200;
    background: rgba(0,0,0,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    overscroll-behavior: contain; /* evita scroll encadenado */
}

/* =========================
   CONTENEDOR MODAL SUMA
========================= */
.modal-suma[b-s5r11w0vs9] {
    background: #fff;
    border-radius: 18px;
    border: 1px solid #e6edf8;
    box-shadow: 0 18px 60px rgba(0,0,0,.18);
    overflow: hidden;
}

    /* FULL SCREEN real */
    .modal-suma.modal-suma-xl[b-s5r11w0vs9] {
        width: 99vw;
        height: 96vh;
        max-width: none;
        max-height: none;
        padding: 16px 18px;
        display: flex;
        flex-direction: column;
        overflow: hidden; /* scroll va adentro */
        border-radius: 18px;
        box-sizing: border-box;
    }

/* =========================
   TOPBAR (1 línea arriba)
========================= */
.suma-topbar[b-s5r11w0vs9] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e6edf8;
    border-radius: 14px;
    background: linear-gradient(180deg,#ffffff 0%, #f6f9ff 100%);
    box-shadow: 0 10px 30px rgba(25,55,110,.10);
    flex-wrap: wrap; /* si no cabe, baja bonito */
}

/* IZQ: título */
.suma-topbar-title[b-s5r11w0vs9] {
    flex: 0 0 auto;
}

/* Título (solo una vez, sin duplicado) */
.suma-title[b-s5r11w0vs9] {
    font-weight: 950;
    font-size: 1.18rem;
    color: #b13b14;
}

.suma-title-name[b-s5r11w0vs9] {
    color: #0f2f66;
}

/* CENTRO: chips */
.suma-topbar-meta[b-s5r11w0vs9] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 320px;
}

.chip[b-s5r11w0vs9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.10);
    background: #fff;
    box-shadow: 0 8px 18px rgba(0,0,0,.06);
    font-weight: 850;
    font-size: .95rem;
    color: #0f2f66;
    white-space: nowrap;
}

    .chip b[b-s5r11w0vs9] {
        font-weight: 950;
    }

.chip-normal[b-s5r11w0vs9] {
    background: #eef6ff;
    border-color: #cfe0ff;
}

.chip-rev[b-s5r11w0vs9] {
    background: #fff1f1;
    border-color: #ffd0d0;
    color: #a11414;
}

.chip-total[b-s5r11w0vs9] {
    background: #fff7e6;
    border-color: #ffd59a;
    color: #7a4a00;
}

.chip-ok[b-s5r11w0vs9] {
    background: #f3fff6;
    border-color: #bfe8c7;
    color: #0f7a2b;
}

.chip-danger[b-s5r11w0vs9] {
    background: #fff2f2;
    border-color: #ffbdbd;
    color: #b00020;
}

/* DERECHA: botones */
.suma-topbar-actions[b-s5r11w0vs9] {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn-suma[b-s5r11w0vs9] {
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 14px;
    padding: 10px 14px;
    font-weight: 950;
    font-size: .95rem;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(0,0,0,.10);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
    user-select: none;
    height: 42px;
}

    .btn-suma:active[b-s5r11w0vs9] {
        transform: scale(.985);
    }

.btn-suma-sec[b-s5r11w0vs9] {
    background: linear-gradient(180deg,#f2f4f8,#e6ebf5);
    color: #111827;
}

.btn-suma-primary[b-s5r11w0vs9] {
    background: linear-gradient(180deg,#1f6fff,#0f3f9b);
    color: #fff;
    border-color: rgba(15,63,155,.30);
}

.btn-suma-apply[b-s5r11w0vs9] {
    background: linear-gradient(180deg,#22c55e,#15803d);
    color: #fff;
    border-color: rgba(21,128,61,.30);
}

.btn-suma[disabled][b-s5r11w0vs9] {
    opacity: .55;
    cursor: not-allowed;
    filter: grayscale(.35);
}

/* =========================
   BODY (SCROLL INTERNO)
========================= */
.suma-body-scroll[b-s5r11w0vs9] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 10px 8px 12px;
    box-sizing: border-box;
    /* ✅ CLAVE: centramos el contenido (como #listaCanvas) */
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* =========================================================
   ✅ TABLA (COMO IMAGEN 1)
   - NO se estira
   - Se centra
   - Tiene max-width fijo según modo
   ========================================================= */

/* Contenedor tabla */
.modal-suma .lista-unica-normal[b-s5r11w0vs9] {
    width: 100%;
    max-width: 1180px; /* igual que tu modal lista normal */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 0;
}

.modal-suma .lista-unica-rev[b-s5r11w0vs9] {
    width: 100%;
    max-width: 1380px; /* igual que tu modal lista rev */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 0;
}

/* Rejilla NORMAL (10 columnas = 5 parejas N° + Monto) */
.modal-suma .lista-unica-normal .fila-cabecera[b-s5r11w0vs9],
.modal-suma .lista-unica-normal .fila-numeros[b-s5r11w0vs9],
.modal-suma .lista-unica-normal .fila-totales-f[b-s5r11w0vs9] {
    display: grid;
    grid-template-columns: repeat(5, 70px 110px);
    column-gap: 6px;
    row-gap: 6px;
    justify-content: center; /* ✅ centrado */
}

/* Rejilla REVENTADO (15 columnas = 5 ternas N° + Monto + R) */
.modal-suma .lista-unica-rev .fila-cabecera[b-s5r11w0vs9],
.modal-suma .lista-unica-rev .fila-numeros[b-s5r11w0vs9],
.modal-suma .lista-unica-rev .fila-totales-f-rev[b-s5r11w0vs9] {
    display: grid;
    grid-template-columns: repeat(5, 70px 110px 110px);
    column-gap: 6px;
    row-gap: 6px;
    justify-content: center; /* ✅ centrado */
}

/* =========================
   CABECERAS
========================= */
.h-num[b-s5r11w0vs9],
.h-monto[b-s5r11w0vs9],
.h-monto-rev[b-s5r11w0vs9] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 950;
    border-radius: 10px;
    height: 28px;
    box-sizing: border-box;
    box-shadow: 0 10px 18px rgba(0,0,0,.10);
}

.h-num[b-s5r11w0vs9] {
    background: linear-gradient(180deg,#1e78ff,#0d47a1);
    color: #fff;
    border: 1px solid rgba(13,71,161,.45);
}

.h-monto[b-s5r11w0vs9] {
    background: linear-gradient(180deg,#46c27b,#2e8b57);
    color: #fff;
    border: 1px solid rgba(46,139,87,.45);
}

.h-monto-rev[b-s5r11w0vs9] {
    background: linear-gradient(180deg,#ff6b5f,#c0392b);
    color: #fff;
    border: 1px solid rgba(192,57,43,.45);
}

/* =========================
   CELDAS (contraste mejorado)
========================= */
.celda-num[b-s5r11w0vs9],
.celda-monto[b-s5r11w0vs9],
.celda-monto-rev[b-s5r11w0vs9] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 900;
    padding: 0 8px;
    border-radius: 12px;
    height: 28px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 10px 18px rgba(0,0,0,.08);
}

/* Azul */
.celda-num[b-s5r11w0vs9] {
    background: linear-gradient(180deg,#d7ecff,#c9e3ff);
    color: #0a406e;
    border: 1px solid rgba(10,64,110,.28);
}

/* Verde */
.celda-monto[b-s5r11w0vs9] {
    background: linear-gradient(180deg,#d7f4e5,#c6edd9);
    color: #0a5c38;
    border: 1px solid rgba(10,92,56,.28);
}

/* Rojo */
.celda-monto-rev[b-s5r11w0vs9] {
    background: linear-gradient(180deg,#ffd3d3,#f7bebe);
    color: #b02222;
    border: 1px solid rgba(176,34,34,.28);
}

/* Input dentro de celda */
.input-monto-lista[b-s5r11w0vs9] {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    text-align: center;
    font-weight: 900;
    font-size: 15px;
    color: inherit;
    outline: none;
    padding: 0;
    margin: 0;
}

/* Foco */
.celda-monto:focus-within[b-s5r11w0vs9],
.celda-monto-rev:focus-within[b-s5r11w0vs9] {
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.35), 0 10px 18px rgba(0,0,0,.10);
}


/* =========================================================
   ✅ MODAL COMPARACIÓN / DIFERENCIAS (MEJORADO)
   - Bordes notorios
   - Secciones marcadas
   - Encabezado sticky en la tabla
   - Filas con separación real
   ========================================================= */

.modal-dif-overlay[b-s5r11w0vs9] {
    position: fixed;
    inset: 0;
    background: rgba(10, 20, 40, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    z-index: 6200;
    backdrop-filter: blur(2px);
}

/* Tarjeta principal */
.modal-dif[b-s5r11w0vs9] {
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    border-radius: 18px;
    border: 2px solid rgba(15, 47, 102, .18);
    box-shadow: 0 30px 90px rgba(0,0,0,.30), 0 0 0 8px rgba(255,255,255,.35);
    overflow: hidden;
}

/* Tamaño grande */
.modal-dif-xl[b-s5r11w0vs9] {
    width: min(1500px, 98vw);
    height: min(900px, 94vh);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
}

/* =========================
   HEADER (TOP)
========================= */
.dif-top[b-s5r11w0vs9] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    background: radial-gradient(1200px 220px at 10% 0%, rgba(31,111,255,.12), transparent 65%), radial-gradient(1200px 220px at 90% 0%, rgba(34,197,94,.10), transparent 60%), linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
    border: 2px solid rgba(15, 47, 102, .12);
    box-shadow: 0 12px 30px rgba(25,55,110,.12);
    margin-bottom: 12px;
}

.dif-title[b-s5r11w0vs9] {
    font-weight: 950;
    font-size: 1.35rem;
    color: #0f2f66;
    letter-spacing: .2px;
}

.dif-title-name[b-s5r11w0vs9] {
    color: #b13b14;
}

/* Sub-info como “chips” */
.dif-sub[b-s5r11w0vs9] {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: #2c4874;
    font-size: .98rem;
}

    .dif-sub > span[b-s5r11w0vs9],
    .dif-sub > div[b-s5r11w0vs9] {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 7px 10px;
        border-radius: 999px;
        background: #fff;
        border: 1px solid rgba(15,47,102,.14);
        box-shadow: 0 10px 18px rgba(0,0,0,.06);
        font-weight: 850;
    }

.dif-top-right[b-s5r11w0vs9] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    justify-content: flex-end;
}

    /* Si tus botones no tienen estilo, esto los mejora sin romper */
    .dif-top-right button[b-s5r11w0vs9] {
        border: 1px solid rgba(0,0,0,.14);
        border-radius: 12px;
        padding: 9px 12px;
        font-weight: 950;
        cursor: pointer;
        background: linear-gradient(180deg,#f2f4f8,#e6ebf5);
        box-shadow: 0 10px 20px rgba(0,0,0,.10);
        transition: transform .12s ease, box-shadow .12s ease;
        height: 40px;
    }

        .dif-top-right button:active[b-s5r11w0vs9] {
            transform: scale(.985);
        }

/* =========================
   BODY
========================= */
.dif-body[b-s5r11w0vs9] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 10px;
}

/* Mensaje vacío más visible */
.dif-empty[b-s5r11w0vs9] {
    padding: 16px;
    border: 2px dashed rgba(15,47,102,.25);
    border-radius: 14px;
    background: linear-gradient(180deg,#fbfdff,#f4f8ff);
    color: #0f2f66;
    font-weight: 900;
}

/* =========================
   TABLA (HEAD + SCROLL)
========================= */

/* Encabezado tabla */
.dif-grid-head[b-s5r11w0vs9] {
    display: grid;
    grid-template-columns: 70px 1fr 1fr 1fr;
    gap: 12px;
    font-weight: 950;
    color: #0f2f66;
    padding: 10px 12px;
    border: 2px solid rgba(15,47,102,.12);
    border-radius: 14px;
    background: linear-gradient(180deg,#ffffff,#f2f7ff);
    box-shadow: 0 10px 22px rgba(0,0,0,.06);
}

/* Scroll contenedor con borde real */
.dif-scroll[b-s5r11w0vs9] {
    border: 2px solid rgba(15,47,102,.12);
    border-radius: 14px;
    background: #fff;
    overflow: auto;
    flex: 1;
    min-height: 0;
    padding: 10px 12px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
}

/* Para que el head se “sienta” fijo visualmente */
.dif-grid-head[b-s5r11w0vs9] {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* Cada fila como tarjeta */
.dif-row[b-s5r11w0vs9] {
    display: grid;
    grid-template-columns: 70px 1fr 1fr 1fr;
    gap: 12px;
    align-items: center;
    padding: 10px 10px;
    margin: 8px 0;
    border-radius: 14px;
    background: linear-gradient(180deg,#ffffff,#fbfdff);
    border: 1px solid rgba(15,47,102,.12);
    box-shadow: 0 10px 20px rgba(0,0,0,.05);
}

    /* Alternado suave */
    .dif-row:nth-child(even)[b-s5r11w0vs9] {
        background: linear-gradient(180deg,#ffffff,#f6f9ff);
    }

/* Número más llamativo */
.dif-num[b-s5r11w0vs9] {
    font-weight: 950;
    color: #0f2f66;
    background: linear-gradient(180deg,#d7ecff,#c9e3ff);
    border: 1px solid rgba(10,64,110,.20);
    border-radius: 12px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 18px rgba(0,0,0,.06);
}

/* Columnas */
.dif-col[b-s5r11w0vs9] {
    color: #2c4874;
    font-weight: 850;
}

/* Input de corrección más “pro” */
.dif-input[b-s5r11w0vs9] {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid rgba(91,140,255,.25);
    border-radius: 12px;
    font-weight: 950;
    outline: none;
    background: linear-gradient(180deg,#ffffff,#f7fbff);
    box-shadow: 0 10px 18px rgba(0,0,0,.06);
}

    .dif-input:focus[b-s5r11w0vs9] {
        border-color: #5b8cff;
        box-shadow: 0 0 0 4px rgba(91,140,255,.18), 0 10px 18px rgba(0,0,0,.10);
    }

/* ===========================
   Modal alerta (centrado, moderno)
   Solo lo usa ModalSumaNav
   =========================== */
.suma-alert-overlay[b-s5r11w0vs9]{
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 35, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999; /* arriba de todo */
  padding: 18px;
}

.suma-alert-card[b-s5r11w0vs9]{
  width: min(520px, 96vw);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
  border: 1px solid rgba(0,0,0,.08);
  overflow: hidden;
  transform: translateY(0);
  animation: sumaAlertIn-b-s5r11w0vs9 .12s ease-out;
}

@keyframes sumaAlertIn-b-s5r11w0vs9{
  from { transform: translateY(10px); opacity: .6; }
  to   { transform: translateY(0); opacity: 1; }
}

.suma-alert-head[b-s5r11w0vs9]{
  padding: 14px 16px;
  background: linear-gradient(135deg, #ffefef, #fff);
  border-bottom: 1px solid rgba(0,0,0,.08);
  display: flex;
  gap: 10px;
  align-items: center;
}

.suma-alert-badge[b-s5r11w0vs9]{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: #fff;
  background: #e11d48; /* rojo moderno */
}

.suma-alert-title[b-s5r11w0vs9]{
  font-weight: 900;
  font-size: 1.02rem;
  color: #111827;
}

.suma-alert-body[b-s5r11w0vs9]{
  padding: 14px 16px 10px 16px;
  color: #334155;
  line-height: 1.35;
  font-size: .98rem;
  white-space: pre-line; /* respeta saltos de línea */
}

.suma-alert-actions[b-s5r11w0vs9]{
  padding: 12px 16px 16px 16px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.suma-alert-btn[b-s5r11w0vs9]{
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 800;
  cursor: pointer;
}

.suma-alert-btn-ok[b-s5r11w0vs9]{
  background: #2563eb;
  color: #fff;
}

.suma-alert-btn-ok:active[b-s5r11w0vs9]{
  transform: scale(.98);
}

/* =========================================
   MODAL CONFIRMAR CREACIÓN DE LISTA
   ========================================= */
.modal-backdrop-lista[b-s5r11w0vs9] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 20px;
}
.modal-confirm-lista[b-s5r11w0vs9] {
    position: relative;
    z-index: 100000;
    width: min(460px, 92vw);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid #d8e6fb;
    border-radius: 22px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.22);
    padding: 26px 24px 22px;
    text-align: center;
    animation: modalListaPop-b-s5r11w0vs9 0.18s ease-out;
}
.modal-confirm-icono[b-s5r11w0vs9] {
    font-size: 34px;
    line-height: 1;
    margin-bottom: 12px;
}

.modal-confirm-titulo[b-s5r11w0vs9] {
    font-size: 1.38rem;
    font-weight: 900;
    color: #123b7a;
    margin-bottom: 12px;
}

.modal-confirm-texto[b-s5r11w0vs9] {
    font-size: 1.08rem;
    line-height: 1.62;
    color: #334155;
    margin-bottom: 24px;
    white-space: pre-line;
}
.modal-confirm-botones[b-s5r11w0vs9] {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-modal-secundario[b-s5r11w0vs9],
.btn-modal-primario[b-s5r11w0vs9] {
    min-width: 130px;
    border: none;
    border-radius: 14px;
    padding: 12px 18px;
    font-size: 0.98rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.btn-modal-secundario[b-s5r11w0vs9] {
    background: #e8eef8;
    color: #23406f;
    box-shadow: 0 6px 16px rgba(36, 64, 111, 0.12);
}

.btn-modal-primario[b-s5r11w0vs9] {
    background: linear-gradient(180deg, #1f66c2 0%, #114ea5 100%);
    color: #fff;
    box-shadow: 0 10px 24px rgba(17, 78, 165, 0.28);
}

    .btn-modal-secundario:hover[b-s5r11w0vs9],
    .btn-modal-primario:hover[b-s5r11w0vs9] {
        transform: translateY(-1px);
    }

@keyframes modalListaPop-b-s5r11w0vs9 {
    from {
        opacity: 0;
        transform: scale(0.96);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.modal-confirm-texto-grande[b-s5r11w0vs9] {
    font-size: 1.16rem;
    line-height: 1.7;
}
/* _content/SistemaLoteriaDashboard/Components/Banca/Noticias.razor.rz.scp.css */
/* =========================
   CONTENEDOR PRINCIPAL
   - Más ancho
   - Mejor uso horizontal
   ========================= */
.noticias-admin[b-eqowyv7o49] {
    width: 100%;
    max-width: 1400px; /* ✅ más ancho */
    margin: 0;
    padding: 10px 10px 14px;
    box-sizing: border-box;
}

/* =========================
   LAYOUT 2 COLUMNAS (HORIZONTAL)
   - Izquierda: formulario
   - Derecha: historial
   ========================= */
.noticias-layout[b-eqowyv7o49] {
    display: grid;
    grid-template-columns: minmax(520px, 620px) minmax(520px, 1fr);
    gap: 18px;
    align-items: start;
    width: 100%;
}

/* Columna izquierda */
.noticias-left[b-eqowyv7o49] {
    min-width: 520px;
}

/* Columna derecha */
.noticias-right[b-eqowyv7o49] {
    min-width: 520px;
}

/* =========================
   FORMULARIO
   - Más grande y moderno
   ========================= */
.grid-form[b-eqowyv7o49] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Labels más grandes */
.campo label[b-eqowyv7o49] {
    font-weight: 900;
    color: #123a74;
    display: block;
    margin-bottom: 8px;
    font-size: 15px; /* ✅ más grande */
    letter-spacing: .2px;
}

/* Inputs más grandes */
.inp[b-eqowyv7o49] {
    width: 100%;
    height: 52px; /* ✅ más alto */
    border: 1px solid rgba(120, 150, 205, .85);
    border-radius: 12px;
    padding: 10px 14px;
    font-weight: 800;
    font-size: 16px; /* ✅ texto más grande */
    color: #123a74;
    background: linear-gradient(180deg, #ffffff, #f7fbff);
    box-sizing: border-box;
    outline: none;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

    .inp:focus[b-eqowyv7o49] {
        border-color: #2b7cff;
        box-shadow: 0 0 0 4px rgba(43,124,255,.15);
    }

    /* Textarea grande */
    .inp.area[b-eqowyv7o49] {
        min-height: 170px; /* ✅ más alto */
        height: auto;
        resize: vertical;
        font-weight: 700;
        line-height: 1.3;
    }

/* Acciones del form */
.acciones-form[b-eqowyv7o49] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding-top: 6px;
}

/* Botones más grandes */
.btn[b-eqowyv7o49] {
    height: 52px; /* ✅ más alto */
    border-radius: 12px;
    padding: 0 18px;
    font-weight: 900;
    font-size: 15px; /* ✅ más grande */
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}

    .btn:active[b-eqowyv7o49] {
        transform: scale(.98);
    }

.btn-prim[b-eqowyv7o49] {
    background: linear-gradient(90deg, #1565c0, #1e88e5);
    color: #fff;
    border: none;
    box-shadow: 0 10px 18px rgba(21,101,192,.18);
}

    .btn-prim:hover[b-eqowyv7o49] {
        box-shadow: 0 12px 22px rgba(21,101,192,.24);
    }

.btn-buscar[b-eqowyv7o49] {
    border: 1px solid rgba(43,124,255,.25);
    background: linear-gradient(180deg,#eef6ff,#e3f2fd);
    color: #0d47a1;
}

    .btn-buscar:hover[b-eqowyv7o49] {
        box-shadow: 0 10px 18px rgba(13,71,161,.10);
    }

.btn-danger[b-eqowyv7o49] {
    background: linear-gradient(180deg,#ffecec,#ffdede);
    color: #b71c1c;
    border: 1px solid #ffc4c9;
}

    .btn-danger:hover[b-eqowyv7o49] {
        box-shadow: 0 10px 18px rgba(183,28,28,.08);
    }

/* =========================
   DESTINATARIOS (HORIZONTAL REAL)
   - Evita que "se caigan" cosas encima
   - Todo se reparte a lo largo
   ========================= */
.fila-destinatarios[b-eqowyv7o49] {
    display: grid;
    grid-template-columns: minmax(320px, 380px) 1fr;
    gap: 12px;
    width: 100%;
    align-items: start;
}

/* Selector vendedores (ancho fijo pero flexible) */
.vendor-select-root[b-eqowyv7o49] {
    position: relative;
    width: 100%;
}

/* Botón selector */
.vendor-select-btn[b-eqowyv7o49] {
    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid rgba(120, 150, 205, .85);
    background: linear-gradient(180deg, #ffffff, #f7fbff);
    border-radius: 12px;
    padding: 8px 12px;
    cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

    .vendor-select-btn:hover[b-eqowyv7o49] {
        box-shadow: 0 10px 18px rgba(16, 60, 120, .10);
    }

.vs-left[b-eqowyv7o49] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.vs-title[b-eqowyv7o49] {
    font-weight: 900;
    font-size: 15px;
    color: #123a74;
    line-height: 1.05;
}

.vs-sub[b-eqowyv7o49] {
    font-weight: 800;
    font-size: 13px;
    color: #52627a;
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vs-arrow[b-eqowyv7o49] {
    font-weight: 900;
    color: #0d47a1;
    font-size: 14px;
}

/* Dropdown vendedores
   ✅ IMPORTANTE: que no se encime con historial
   -> Lo dejamos dentro del flujo visual y con buen z-index
*/
.vendor-dropdown[b-eqowyv7o49] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    z-index: 2000;
    background: #fff;
    border: 1px solid rgba(120, 150, 205, .9);
    border-radius: 14px;
    box-shadow: 0 14px 28px rgba(0,0,0,.14);
    padding: 10px;
    box-sizing: border-box;
}

/* Toolbar */
.vendor-toolbar[b-eqowyv7o49] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.chk[b-eqowyv7o49] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 900;
    color: #123a74;
    font-size: 14px;
}

/* Lista de vendedores */
.vendor-list[b-eqowyv7o49] {
    max-height: 320px; /* ✅ más alto */
    overflow: auto;
    border: 1px solid #c7d6ef;
    border-radius: 12px;
    background: linear-gradient(180deg,#ffffff,#fbfdff);
}

/* Fila vendedor */
.u-item[b-eqowyv7o49] {
    display: grid;
    grid-template-columns: 18px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 10px;
    border-bottom: 1px solid #edf2fb;
    font-weight: 800;
    color: #123a74;
    cursor: pointer;
}

    .u-item:last-child[b-eqowyv7o49] {
        border-bottom: none;
    }

    .u-item:hover[b-eqowyv7o49] {
        background: #f5f9ff;
    }

    .u-item input[b-eqowyv7o49] {
        margin: 0;
    }

    .u-item.sel[b-eqowyv7o49] {
        background: #eef6ff;
    }

    .u-item.focus[b-eqowyv7o49] {
        outline: 3px solid rgba(255,179,0,.35);
        outline-offset: -3px;
    }

.u-nombre[b-eqowyv7o49] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.u-id[b-eqowyv7o49] {
    font-size: 12px;
    font-weight: 900;
    color: #0d47a1;
    background: #eaf2ff;
    border: 1px solid #cfe0f5;
    border-radius: 999px;
    padding: 2px 10px;
}

/* Buscador lateral (derecha de destinatarios) */
.buscador-lateral[b-eqowyv7o49] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
    width: 100%;
    min-width: 0;
}

.inp.buscador[b-eqowyv7o49] {
    height: 52px;
}

/* Texto “no hay vendedores” */
.usuarios-vacio[b-eqowyv7o49] {
    padding: 12px;
    font-weight: 800;
    color: #52627a;
    font-size: 14px;
}

/* =========================
   HISTORIAL (derecha)
   - Más grande
   - Scroll estable
   ========================= */
.noticias-right .lista[b-eqowyv7o49] {
    max-height: calc(100vh - 210px);
    overflow: auto;
    padding-right: 8px;
    scrollbar-gutter: stable;
}

/* Título historial */
.lista-titulo[b-eqowyv7o49] {
    font-weight: 900;
    color: #123a74;
    margin-bottom: 12px;
    font-size: 16px;
}

/* Item noticia */
.item[b-eqowyv7o49] {
    background: linear-gradient(180deg,#ffffff,#f9fbff);
    border: 1px solid rgba(120, 150, 205, .9);
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 12px;
    box-shadow: 0 10px 18px rgba(20, 60, 120, .08);
}

/* Top: título + meta */
.top[b-eqowyv7o49] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: start;
}

.t[b-eqowyv7o49] {
    font-weight: 950;
    color: #123a74;
    font-size: 16px;
    line-height: 1.1;
}

/* badges */
.meta[b-eqowyv7o49] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.badge[b-eqowyv7o49] {
    font-size: 12px;
    font-weight: 900;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(43,124,255,.22);
    background: #e3f2fd;
    color: #0d47a1;
}

    .badge.ok[b-eqowyv7o49] {
        background: #e8f5e9;
        color: #1b5e20;
        border-color: rgba(27,94,32,.18);
    }

    .badge.priv[b-eqowyv7o49] {
        background: #fff3e0;
        color: #e65100;
        border-color: rgba(230,81,0,.18);
    }

/* Body */
.body[b-eqowyv7o49] {
    margin: 10px 0 8px;
    font-weight: 750;
    font-size: 14.5px;
    color: #334155;
    line-height: 1.3;
}

.dest[b-eqowyv7o49] {
    font-weight: 850;
    color: #52627a;
    font-size: 13.5px;
}

/* Acciones item */
.acciones-item[b-eqowyv7o49] {
    display: flex;
    justify-content: flex-end;
    padding-top: 8px;
}

/* Empty */
.empty[b-eqowyv7o49] {
    padding: 12px;
    font-weight: 800;
    color: #52627a;
}

/* =========================
   RESPONSIVE
   - Solo en pantallas pequeñas baja a vertical
   ========================= */
@media (max-width: 1200px) {
    .noticias-layout[b-eqowyv7o49] {
        grid-template-columns: 1fr;
    }

    .noticias-left[b-eqowyv7o49],
    .noticias-right[b-eqowyv7o49] {
        min-width: 0;
    }

    .fila-destinatarios[b-eqowyv7o49] {
        grid-template-columns: 1fr;
    }

    .buscador-lateral[b-eqowyv7o49] {
        grid-template-columns: 1fr;
    }

    .acciones-form[b-eqowyv7o49] {
        justify-content: stretch;
    }

    .btn[b-eqowyv7o49] {
        width: 100%;
    }

    .noticias-right .lista[b-eqowyv7o49] {
        max-height: none;
    }
}
/* _content/SistemaLoteriaDashboard/Components/Banca/PagosRetiros.razor.rz.scp.css */
/* =========================================================
   PAGOS Y RETIROS (PR) - CSS FINAL
   - Corrige: Desde/Hasta (pr-datebox / pr-datebtn)
   - Corrige: alineación Monto vs ₡ con TD flex
   - NO toca: columna Fecha de la tabla
   ========================================================= */

/* ========== SHELL / HEADER ========== */
.pr-shell[b-cxcwgmjmur] {
    padding: 14px;
}

.pr-head[b-cxcwgmjmur] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.pr-sub[b-cxcwgmjmur] {
    color: #52627a;
    font-size: .95rem;
}

/* ========== GRID PRINCIPAL ========== */
.pr-grid[b-cxcwgmjmur] {
    display: grid;
    grid-template-columns: 520px 1fr;
    gap: 14px;
    align-items: start;
}

@media (max-width:980px) {
    .pr-grid[b-cxcwgmjmur] {
        grid-template-columns: 1fr;
    }
}

/* ========== CARDS ========== */
.pr-card[b-cxcwgmjmur] {
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 6px 16px rgba(0,0,0,.06);
    margin-bottom: 14px;
}

.pr-left .pr-card[b-cxcwgmjmur] {
    padding: 18px;
    border-radius: 16px;
}

.pr-card-title[b-cxcwgmjmur] {
    font-weight: 900;
    color: #153e75;
    margin-bottom: 10px;
}

.pr-left .pr-card-title[b-cxcwgmjmur] {
    font-size: 1.15rem;
    margin-bottom: 12px;
}

/* ========== TABS ========== */
.pr-tabs[b-cxcwgmjmur] {
    display: flex;
    background: #f2f6ff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 12px;
}

.pr-tab[b-cxcwgmjmur] {
    flex: 1;
    border: 0;
    padding: 14px 14px;
    background: transparent;
    font-weight: 900;
    color: #2b3c55;
    cursor: pointer;
    font-size: 1.05rem;
}

    .pr-tab.active[b-cxcwgmjmur] {
        background: linear-gradient(90deg,#003366,#0066cc);
        color: #fff;
    }

/* ========== BUSCADOR / INPUTS ========== */
.pr-search-row[b-cxcwgmjmur] {
    display: flex;
    gap: 10px;
}

.pr-input[b-cxcwgmjmur], .pr-select[b-cxcwgmjmur], .pr-date[b-cxcwgmjmur] {
    width: 100%;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 12px;
    padding: 10px 12px;
    outline: none;
    font-size: .98rem;
}

.pr-left .pr-input[b-cxcwgmjmur],
.pr-left .pr-select[b-cxcwgmjmur] {
    padding: 14px 14px;
    font-size: 1.05rem;
    border-radius: 14px;
}

.pr-select-wrap[b-cxcwgmjmur] {
    margin-top: 10px;
}

/* ========== BOTONES ========== */
.pr-btn[b-cxcwgmjmur] {
    border: 0;
    border-radius: 12px;
    padding: 10px 12px;
    font-weight: 900;
    cursor: pointer;
    background: #dfeaff;
    color: #153e75;
}

.pr-left .pr-btn[b-cxcwgmjmur] {
    padding: 14px 14px;
    font-size: 1.05rem;
    border-radius: 14px;
}

.pr-btn:disabled[b-cxcwgmjmur] {
    opacity: .6;
    cursor: not-allowed;
}

.pr-btn-primary[b-cxcwgmjmur] {
    background: linear-gradient(90deg,#003366,#0066cc);
    color: #fff;
}

.pr-btn-soft[b-cxcwgmjmur] {
    background: #edf4ff;
    color: #153e75;
    border: 1px solid rgba(0,0,0,.08);
}

/* ========== FORM ========== */
.pr-form[b-cxcwgmjmur] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pr-field label[b-cxcwgmjmur] {
    display: block;
    font-size: .85rem;
    color: #52627a;
    font-weight: 800;
    margin-bottom: 6px;
}

/* ========== VENDEDOR INFO ========== */
.pr-vend-info[b-cxcwgmjmur] {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pr-vend-name[b-cxcwgmjmur] {
    font-weight: 950;
    color: #102a52;
    font-size: 1.15rem;
}

/* Saldo */
.pr-saldo-box[b-cxcwgmjmur] {
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.08);
    background: #f7fbff;
}

    .pr-saldo-box .k[b-cxcwgmjmur] {
        color: #52627a;
        font-weight: 900;
        font-size: .95rem;
    }

    .pr-saldo-box .v[b-cxcwgmjmur] {
        font-size: 1.8rem;
        font-weight: 1000;
    }

    .pr-saldo-box.pos .v[b-cxcwgmjmur] {
        color: #0b7a2a;
    }

    .pr-saldo-box.neg .v[b-cxcwgmjmur] {
        color: #b00020;
    }

/* ========== RANGO HISTORIAL (ARREGLADO) ========== */
.pr-range-wrap[b-cxcwgmjmur] {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 12px;
}

/* ✅ en vez de "auto auto auto", aquí va estable:
   2 columnas iguales + botón */
.pr-range[b-cxcwgmjmur] {
    width: fit-content;
    max-width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 12px;
    align-items: end;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.10);
    background: linear-gradient(180deg, rgba(0,102,204,.10), rgba(0,51,102,.04));
}

/* Input date del lado derecho */
.pr-right .pr-date[b-cxcwgmjmur] {
    height: 52px;
    padding: 0 14px;
    font-size: 1.05rem;
    font-weight: 900;
    border-radius: 14px;
}

/* ✅ ESTO FALTABA (Tus clases del Razor) */
.pr-datebox[b-cxcwgmjmur] {
    display: grid;
    grid-template-columns: 1fr 44px;
    gap: 8px;
    align-items: center;
}

.pr-datebtn[b-cxcwgmjmur] {
    height: 52px;
    width: 44px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.10);
    background: #fff;
    cursor: pointer;
    font-weight: 900;
    line-height: 1;
}

    .pr-datebtn:hover[b-cxcwgmjmur] {
        background: #edf4ff;
    }

/* ========== TABLA HISTORIAL ========== */
.pr-table-wrap[b-cxcwgmjmur] {
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    overflow: auto;
    max-height: 62vh;
}

/* ✅ mínimo ancho para que NO se aplaste; si no cabe, hay scroll */
.pr-table[b-cxcwgmjmur] {
    width: 100%;
    min-width: 1120px;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 1.02rem;
}

    /* ✅ MISMO padding base en TH/TD (esto da alineación real) */
    .pr-table thead th[b-cxcwgmjmur],
    .pr-table tbody td[b-cxcwgmjmur] {
        box-sizing: border-box;
        padding: 12px 16px;
    }

    /* Header */
    .pr-table thead th[b-cxcwgmjmur] {
        background: #0b2a4a;
        color: #fff;
        font-weight: 950;
        font-size: 1.02rem;
        border-bottom: 1px solid rgba(0,0,0,.08);
        position: sticky;
        top: 0;
        z-index: 2;
        text-align: left;
    }

    /* Filas */
    .pr-table tbody td[b-cxcwgmjmur] {
        font-size: 1.10rem;
        font-weight: 900;
        border-bottom: 1px solid rgba(0,0,0,.06);
        color: #2b3c55;
        background: #fff;
    }

    .pr-table tbody tr:nth-child(even) td[b-cxcwgmjmur] {
        background: #f7fbff;
    }

    .pr-table tbody tr:hover td[b-cxcwgmjmur] {
        background: #e8f2ff;
    }

    /* ========== COLUMNAS (Fecha NO tocar) ========== */
    /* FECHA (NO tocar) */
    .pr-table th:nth-child(1)[b-cxcwgmjmur],
    .pr-table td:nth-child(1)[b-cxcwgmjmur] {
        width: 240px;
        white-space: nowrap;
    }

    /* TIPO */
    .pr-table th:nth-child(2)[b-cxcwgmjmur],
    .pr-table td:nth-child(2)[b-cxcwgmjmur] {
        width: 170px;
        text-align: center;
        padding-left: 100px; /* lo empuja a la derecha */
    }

    /* ✅ MONTO: clave final
   - TH y TD mismo ancho + mismo padding-right
   - TH right, TD right, y TD es flex por pr-monto-cell */
    .pr-table th:nth-child(3)[b-cxcwgmjmur],
    .pr-table td:nth-child(3)[b-cxcwgmjmur] {
        width: 450px;
        text-align: left;
        padding-left: 300px; /* ✅ tu ajuste, pero ahora SÍ queda idéntico en TH y TD */
    }

    /* NOTA (aire a la derecha) */
    .pr-table th:nth-child(4)[b-cxcwgmjmur],
    .pr-table td:nth-child(4)[b-cxcwgmjmur] {
        width: auto;
        padding-left: 200px;
        min-width: 50px;

    }

/* ✅ Celda monto (valor + botón) */
.pr-monto-cell[b-cxcwgmjmur] {
    display: flex;
    justify-content: flex-end;
    align-items: left;
    gap: 10px;
    width: 100%;
}

/* números “pro” */
.pr-monto-val[b-cxcwgmjmur] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Nota */
.pr-table td.note[b-cxcwgmjmur] {
    color: #52627a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Botón editar */
.pr-mini[b-cxcwgmjmur] {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,.10);
    background: #fff;
    cursor: pointer;
    font-weight: 900;
    flex: 0 0 auto;
}


/* Badges */
.pr-badge[b-cxcwgmjmur] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 900;
    font-size: .85rem;
}

    .pr-badge.dep[b-cxcwgmjmur] {
        background: #eaf7ff;
        color: #0c4a6e;
        border: 1px solid rgba(0,0,0,.08);
    }

    .pr-badge.ret[b-cxcwgmjmur] {
        background: #fff0f0;
        color: #7a1111;
        border: 1px solid rgba(0,0,0,.08);
    }

/* ========== MODALES (igual que tenías) ========== */
.pr-modal-overlay[b-cxcwgmjmur] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 9999;
}

.pr-modal[b-cxcwgmjmur] {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: min(560px,94vw);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(0,0,0,.28);
    z-index: 10000;
    overflow: hidden;
}

.pr-modal-head[b-cxcwgmjmur] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px;
    background: linear-gradient(90deg,#003366,#0066cc);
    color: #fff;
}

    .pr-modal-head .t[b-cxcwgmjmur] {
        font-weight: 1000;
    }

    .pr-modal-head .x[b-cxcwgmjmur] {
        border: 0;
        background: transparent;
        color: #fff;
        font-size: 22px;
        cursor: pointer;
    }

.pr-modal-body[b-cxcwgmjmur] {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pr-row[b-cxcwgmjmur] {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 10px;
    align-items: center;
}

    .pr-row .k[b-cxcwgmjmur] {
        color: #52627a;
        font-weight: 900;
    }

    .pr-row .v[b-cxcwgmjmur] {
        font-weight: 900;
        color: #102a52;
    }

.pr-warn[b-cxcwgmjmur] {
    padding: 10px;
    border-radius: 12px;
    background: #fff7e6;
    border: 1px solid rgba(0,0,0,.08);
    color: #6b4e00;
    font-weight: 800;
}

.pr-confirm-text[b-cxcwgmjmur] {
    font-size: 1.02rem;
    color: #102a52;
}

.pr-modal-foot[b-cxcwgmjmur] {
    padding: 12px 14px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid rgba(0,0,0,.08);
}
/* ================================
   PR: Saldo anterior / actual (por fila)
   (Agregar al FINAL del CSS PR)
   ================================ */

.pr-monto-stack[b-cxcwgmjmur]{
    display:flex;
    flex-direction:column;
    gap:6px;
}

/* rojo: saldo antes */
.pr-saldo-antes[b-cxcwgmjmur]{
    font-size:.86rem;
    font-weight:900;
    color:#b00020;
}

/* verde: saldo después */
.pr-saldo-despues[b-cxcwgmjmur]{
    font-size:.86rem;
    font-weight:900;
    color:#0b7a2a;
}

/* =========================================================
   MODALES MÁS GRANDES + MONTO MÁS VISIBLE (Editar / Confirmar)
   Pegar al FINAL del CSS para que gane por cascada
   ========================================================= */

/* ✅ Modal general: más ancho y más padding */
.pr-modal[b-cxcwgmjmur] {
    width: min(780px, 95vw) !important;
    max-width: 95vw !important;
    padding: 0 !important;
    border-radius: 18px !important;
}

    /* ✅ Modal confirmación: un poco más ancho todavía */
    .pr-modal.pr-modal-confirm[b-cxcwgmjmur] {
        width: min(860px, 96vw) !important;
        max-width: 96vw !important;
    }

/* ✅ Cabecera del modal más grande */
.pr-modal-head[b-cxcwgmjmur] {
    padding: 18px 22px !important;
}

    .pr-modal-head .t[b-cxcwgmjmur] {
        font-size: 20px !important;
        font-weight: 800 !important;
    }

/* ✅ Cuerpo del modal: más espacio y letra más grande */
.pr-modal-body[b-cxcwgmjmur] {
    padding: 18px 22px 16px 22px !important;
    font-size: 16px !important;
}

    /* ✅ Filas dentro del modal (Vendedor / Tipo / Monto actual...) */
    .pr-modal-body .pr-row[b-cxcwgmjmur] {
        gap: 12px !important;
        padding: 10px 0 !important;
    }

        .pr-modal-body .pr-row .k[b-cxcwgmjmur] {
            font-size: 14px !important;
            opacity: .85 !important;
            font-weight: 700 !important;
        }

        .pr-modal-body .pr-row .v[b-cxcwgmjmur] {
            font-size: 18px !important;
            font-weight: 800 !important;
        }

/* ✅ Inputs del modal más grandes */
.pr-modal .pr-input[b-cxcwgmjmur] {
    font-size: 18px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
}

    /* ✅ “Monto nuevo” aún más grande y notorio
   (aplica a cualquier input dentro del modal, pero lo reforzamos abajo con clase) */
    .pr-modal .pr-input.pr-input-monto[b-cxcwgmjmur] {
        font-size: 24px !important;
        font-weight: 900 !important;
        letter-spacing: .3px !important;
        padding: 14px 16px !important;
    }

/* ✅ Bloque de advertencia */
.pr-modal .pr-warn[b-cxcwgmjmur] {
    margin-top: 12px !important;
    padding: 12px 14px !important;
    font-size: 15px !important;
}

/* ✅ Pie del modal: botones más grandes */
.pr-modal-foot[b-cxcwgmjmur] {
    padding: 14px 22px 18px 22px !important;
    gap: 12px !important;
}

    .pr-modal-foot .pr-btn[b-cxcwgmjmur] {
        font-size: 16px !important;
        padding: 12px 16px !important;
        border-radius: 12px !important;
    }

/* ✅ Texto de confirmación más grande */
.pr-confirm-text[b-cxcwgmjmur] {
    font-size: 18px !important;
    line-height: 1.4 !important;
}

/* ✅ Evita que el panel derecho estire la página */
.pr-card-historial[b-cxcwgmjmur] {
    height: calc(100vh - 170px); /* ajusta si tu header superior es más alto */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ✅ El scroll pasa a ser interno */
.pr-table-wrap[b-cxcwgmjmur] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0; /* CLAVE para que flex + overflow funcione */
}
/* =========================================================
   HISTORIAL: filas tipo "tarjeta" elegantes (Depósito/Retiro)
   ========================================================= */

.pr-table[b-cxcwgmjmur] {
    width: 100%;
    border-collapse: separate; /* clave para separar filas */
    border-spacing: 0 12px; /* espacio vertical entre movimientos */
}

    .pr-table thead th[b-cxcwgmjmur] {
        position: sticky; /* si el contenedor scrollea */
        top: 0;
        z-index: 2;
    }

    /* Cada movimiento (fila) se verá como bloque */
    .pr-table tbody tr.pr-rowline td[b-cxcwgmjmur] {
        background: #ffffff;
        border-top: 1px solid #e6eef8;
        border-bottom: 1px solid #e6eef8;
        padding-top: 12px;
        padding-bottom: 12px;
    }

        /* Bordes redondeados solo en extremos para que parezca tarjeta */
        .pr-table tbody tr.pr-rowline td:first-child[b-cxcwgmjmur] {
            border-left: 1px solid #e6eef8;
            border-top-left-radius: 12px;
            border-bottom-left-radius: 12px;
        }

        .pr-table tbody tr.pr-rowline td:last-child[b-cxcwgmjmur] {
            border-right: 1px solid #e6eef8;
            border-top-right-radius: 12px;
            border-bottom-right-radius: 12px;
        }

    /* Sombra suave al pasar el mouse para “intuitivo” */
    .pr-table tbody tr.pr-rowline:hover td[b-cxcwgmjmur] {
        box-shadow: 0 6px 16px rgba(0,0,0,0.06);
        border-color: #d7e6fb;
    }

/* Mejor separación visual dentro de la celda monto */
.pr-monto-stack[b-cxcwgmjmur] {
    gap: 6px;
}

/* Hacer más claro el saldo anterior / actual */
.pr-saldo-antes[b-cxcwgmjmur] {
    font-size: 12px;
    font-weight: 700;
    opacity: 0.95;
}

.pr-saldo-despues[b-cxcwgmjmur] {
    font-size: 12px;
    font-weight: 800;
    opacity: 0.95;
}

/* Monto principal un poco más importante visualmente */
.pr-monto-val[b-cxcwgmjmur] {
    font-size: 15px;
    font-weight: 800;
}

/* Rango compacto (sin panel grande) */
.pr-range-inline[b-cxcwgmjmur] {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 0;
    margin: 0 0 10px 0; /* pequeñito */
}

    .pr-range-inline .pr-field[b-cxcwgmjmur] {
        margin: 0;
    }

    .pr-range-inline label[b-cxcwgmjmur] {
        font-size: 12px;
        font-weight: 700;
        margin-bottom: 4px;
        opacity: .85;
    }

.pr-btn-range[b-cxcwgmjmur] {
    height: 38px; /* que calce con los date inputs */
    padding: 0 14px;
}

/* Letras más grandes dentro del historial */
.pr-saldo-antes[b-cxcwgmjmur] {
    font-size: 14px; /* antes 12 */
    font-weight: 800;
}

.pr-saldo-despues[b-cxcwgmjmur] {
    font-size: 14px; /* antes 12 */
    font-weight: 900;
}

.pr-monto-val[b-cxcwgmjmur] {
    font-size: 18px; /* antes 15 */
    font-weight: 900;
}

/* Si querés también agrandar el ₡monto y el botón edit para que se vea mejor */
.pr-mini-edit[b-cxcwgmjmur] {
    transform: scale(1.05);
}

.pr-mini-del[b-cxcwgmjmur] {
    margin-left: 6px;
    border: 1px solid rgba(217,48,37,.35);
    color: #d93025;
    background: #fff;
}

    .pr-mini-del:hover[b-cxcwgmjmur] {
        background: #fff1f1;
        border-color: #d93025;
    }
/* _content/SistemaLoteriaDashboard/Components/Banca/PantallaPrincipalBanca.razor.rz.scp.css */
/* =========================
   PantallaPrincipalBanca
   CSS SCOPED (solo este componente)
   ========================= */

.ppb-shell[b-sio1qvlbhu] {
    padding: 22px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(0,102,204,0.08), rgba(0,0,0,0) 55%);
}

.ppb-header[b-sio1qvlbhu] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 18px;
}

.ppb-title[b-sio1qvlbhu] {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: 0.2px;
    color: #0b2a4a;
}

.ppb-subtitle[b-sio1qvlbhu] {
    font-size: 14px;
    font-weight: 600;
    color: rgba(11, 42, 74, 0.70);
}

/* GRID RESPONSIVE */
.kpi-grid[b-sio1qvlbhu] {
    display: grid;
    grid-template-columns: repeat(3, minmax(240px, 1fr));
    gap: 16px;
}

/* Tarjeta base */
.kpi-card[b-sio1qvlbhu] {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    padding: 18px 18px 16px 18px;
    background: rgba(255,255,255,0.88);
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08), 0 1px 0 rgba(255,255,255,0.6) inset;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

    /* Efecto hover bonito */
    .kpi-card:hover[b-sio1qvlbhu] {
        transform: translateY(-3px);
        box-shadow: 0 16px 38px rgba(0,0,0,0.12), 0 1px 0 rgba(255,255,255,0.65) inset;
        border-color: rgba(0,102,204,0.22);
    }

    /* Línea brillo superior */
    .kpi-card[b-sio1qvlbhu]::before {
        content: "";
        position: absolute;
        left: -30%;
        top: -60%;
        width: 160%;
        height: 140%;
        background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.7), rgba(255,255,255,0) 55%);
        transform: rotate(8deg);
        pointer-events: none;
        opacity: 0.55;
    }

/* Título KPI */
.kpi-titulo[b-sio1qvlbhu] {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: rgba(11, 42, 74, 0.75);
    margin-bottom: 10px;
}

/* Valor KPI grande (pantalla principal) */
.kpi-valor[b-sio1qvlbhu] {
    font-size: 38px;
    line-height: 1.1;
    font-weight: 950;
    color: #0b2a4a;
}

/* Texto mini */
.kpi-mini[b-sio1qvlbhu] {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 650;
    color: rgba(11, 42, 74, 0.62);
}

/* Variantes por tarjeta (acento visual) */
.kpi-ventas[b-sio1qvlbhu] {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.14), rgba(255,255,255,0.88));
}

.kpi-premios[b-sio1qvlbhu] {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.18), rgba(255,255,255,0.88));
}

.kpi-tiquetes[b-sio1qvlbhu] {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.18), rgba(255,255,255,0.88));
}

.kpi-anulados[b-sio1qvlbhu] {
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.16), rgba(255,255,255,0.88));
}

.kpi-depositos[b-sio1qvlbhu] {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.16), rgba(255,255,255,0.88));
}

.kpi-balance[b-sio1qvlbhu] {
    background: linear-gradient(135deg, rgba(0, 188, 212, 0.16), rgba(255,255,255,0.88));
}

/* Panel vacío si lo sigues usando */
.panel-vacio[b-sio1qvlbhu] {
    height: 14px;
}

/* Responsive */
@media (max-width: 1100px) {
    .kpi-grid[b-sio1qvlbhu] {
        grid-template-columns: repeat(2, minmax(240px, 1fr));
    }

    .kpi-valor[b-sio1qvlbhu] {
        font-size: 34px;
    }
}

@media (max-width: 700px) {
    .ppb-shell[b-sio1qvlbhu] {
        padding: 16px;
    }

    .kpi-grid[b-sio1qvlbhu] {
        grid-template-columns: 1fr;
    }

    .ppb-title[b-sio1qvlbhu] {
        font-size: 22px;
    }

    .kpi-valor[b-sio1qvlbhu] {
        font-size: 32px;
    }
}

.kpi-card.kpi-neto[b-sio1qvlbhu] {
    background: linear-gradient(135deg, #eef2ff, #ecfeff);
    border: 1px solid rgba(15, 23, 42, 0.08);
    color: #0f172a;

    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);

    /* para que sea un poco más ancha, pero sin volverse banner */
    grid-column: span 1;
}

.kpi-card.kpi-neto .kpi-valor[b-sio1qvlbhu] {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #0f172a;
}

.kpi-card.kpi-neto .kpi-mini[b-sio1qvlbhu] {
    opacity: 0.75;
}


.kpi-futuras[b-sio1qvlbhu] {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.16), rgba(255,255,255,0.88));
}
/* _content/SistemaLoteriaDashboard/Components/Banca/Prestamos.razor.rz.scp.css */
.pr-panel[b-rq5f82bwbu] {
    padding: 18px;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    border: 1px solid #dbe8fb;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
}

.pr-tabs[b-rq5f82bwbu] {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.pr-tab[b-rq5f82bwbu] {
    height: 44px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid #cfe0f7;
    background: #fff;
    font-weight: 1100;
    font-size: 1.08rem;
    color: #144a8f;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(15,23,42,.06);
}

    .pr-tab.active[b-rq5f82bwbu] {
        background: linear-gradient(180deg, #1a5fb4, #144a8f);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 12px 22px rgba(20,74,143,.22);
    }

.pr-busqueda[b-rq5f82bwbu] {
    display: grid;
    grid-template-columns: 360px 180px;
    gap: 14px;
    align-items: start;
}

@media (max-width: 980px) {
    .pr-busqueda[b-rq5f82bwbu] {
        grid-template-columns: 1fr;
    }
}

.pr-col[b-rq5f82bwbu] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

    .pr-col label[b-rq5f82bwbu] {
        font-size: 1.12rem;
        font-weight: 1000;
        color: #213b63;
        margin-bottom: -2px;
    }

.pr-label-sub[b-rq5f82bwbu] {
    margin-top: 2px;
}

.pr-input-sm[b-rq5f82bwbu] {
    height: 44px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid #cfe0f7;
    outline: none;
    background: #fff;
    font-weight: 900;
    font-size: 1.12rem;
    color: #14243a;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

    .pr-input-sm:focus[b-rq5f82bwbu] {
        border-color: #1a5fb4;
        box-shadow: 0 0 0 4px rgba(26,95,180,.18);
    }

    .pr-input-sm[b-rq5f82bwbu]::placeholder {
        color: #6a7a92;
        font-weight: 800;
    }

.pr-select[b-rq5f82bwbu] {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #375e9a 50%), linear-gradient(135deg, #375e9a 50%, transparent 50%);
    background-position: calc(100% - 18px) 18px, calc(100% - 12px) 18px;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 34px;
}

/* ✅ IMPORTANTE: compactos (no exagerados) */
.pr-select-compact[b-rq5f82bwbu] {
    width: 100%;
    max-width: 360px;
}

.pr-input-id[b-rq5f82bwbu] {
    text-align: center;
}

.pr-seleccion[b-rq5f82bwbu] {
    margin: 18px 0 12px;
}

.pr-chip[b-rq5f82bwbu] {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border-radius: 999px;
    border: 1px solid #b7f0ce;
    background: #ecfdf5;
    color: #065f46;
    font-weight: 1100;
    font-size: 1.10rem;
    max-width: 100%;
}

/* ✅ Más grande y notorio (Vendedor/Persona seleccionada) */
.pr-chip-big[b-rq5f82bwbu] {
    padding: 16px 18px;
    font-size: 1.22rem;
    font-weight: 1300;
    box-shadow: 0 14px 26px rgba(34,197,94,.10);
}

    .pr-chip-big b[b-rq5f82bwbu] {
        font-size: 1.28rem;
        font-weight: 1500;
    }

.pr-chip-warn[b-rq5f82bwbu] {
    border-color: #fdba74;
    background: #fff7ed;
    color: #9a3412;
}

.pr-dot[b-rq5f82bwbu] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34,197,94,.15);
}

.pr-dot-warn[b-rq5f82bwbu] {
    background: #f97316;
    box-shadow: 0 0 0 4px rgba(249,115,22,.16);
}

.pr-sep[b-rq5f82bwbu] {
    opacity: .65;
}

.pr-actions[b-rq5f82bwbu] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 12px 0 16px;
}

.pr-btn[b-rq5f82bwbu] {
    height: 44px;
    padding: 0 16px;
    border-radius: 12px;
    font-weight: 1100;
    font-size: 1.08rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}

    .pr-btn:disabled[b-rq5f82bwbu] {
        opacity: .55;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

    .pr-btn:hover[b-rq5f82bwbu] {
        transform: translateY(-1px);
    }

.pr-btn-primary[b-rq5f82bwbu] {
    background: linear-gradient(180deg, #1a5fb4, #144a8f);
    color: #fff;
    box-shadow: 0 10px 22px rgba(20,74,143,.22);
}

.pr-btn-ghost[b-rq5f82bwbu] {
    background: #fff;
    color: #144a8f;
    border-color: #cfe0f7;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

/* Botón apilado debajo del input ID */
.pr-btn-stack[b-rq5f82bwbu] {
    margin-top: 10px;
}

.pr-saldo-card[b-rq5f82bwbu] {
    margin-top: 12px;
    padding: 18px;
    border-radius: 14px;
    border: 1px solid #dbe8fb;
    background: linear-gradient(180deg, #ffffff 0%, #f2f8ff 100%);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.10);
    max-width: 640px;
}

.pr-saldo-title[b-rq5f82bwbu] {
    font-weight: 1100;
    color: #153e75;
    font-size: 1.12rem;
    margin-bottom: 8px;
}

.pr-saldo-valor[b-rq5f82bwbu] {
    font-size: 2.05rem;
    font-weight: 1300;
    color: #0f2b4d;
}

.pr-saldo-sub[b-rq5f82bwbu] {
    margin-top: 8px;
    color: #52627a;
    font-weight: 1000;
    font-size: 1.05rem;
}

/* Interés */
.pr-interest[b-rq5f82bwbu] {
    margin-top: 14px;
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}

.pr-check[b-rq5f82bwbu] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 1100;
    color: #153e75;
    font-size: 1.05rem;
}

.pr-interest-box[b-rq5f82bwbu] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid #dbe8fb;
    background: #fff;
    box-shadow: 0 10px 22px rgba(15,23,42,.06);
}

    .pr-interest-box span[b-rq5f82bwbu] {
        font-weight: 1100;
        color: #1b2b45;
    }

    .pr-interest-box.disabled[b-rq5f82bwbu] {
        opacity: .55;
    }

/* Modals */
.pr-modal-backdrop[b-rq5f82bwbu] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 18px;
}

.pr-modal[b-rq5f82bwbu] {
    width: min(560px, 96vw);
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 18px 50px rgba(0,0,0,.28);
    border: 1px solid rgba(255,255,255,.35);
}

.pr-modal-lg[b-rq5f82bwbu] {
    width: min(700px,96vw);
}

.pr-modal-hist[b-rq5f82bwbu] {
    width: min(1200px, 96vw);
    max-width: none;
    overflow: hidden;
    border-radius: 18px;
    padding: 18px;
}

.pr-modal-title[b-rq5f82bwbu] {
    font-weight: 1200;
    font-size: 1.22rem;
    color: #153e75;
    margin-bottom: 8px;
}

.pr-modal-sub[b-rq5f82bwbu] {
    color: #1b2b45;
    font-weight: 1000;
    font-size: 1.06rem;
    margin-bottom: 12px;
}

.pr-modal-label[b-rq5f82bwbu] {
    font-weight: 1100;
    color: #304766;
    display: block;
    margin-bottom: 8px;
    font-size: 1.02rem;
}

.pr-modal-input[b-rq5f82bwbu] {
    height: 48px;
    font-size: 1.12rem;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid #cfe0f7;
    outline: none;
    width: 100%;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.pr-modal-actions[b-rq5f82bwbu] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 12px;
}

.pr-modal-grid[b-rq5f82bwbu] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 10px;
}

/* Historial table */
.pr-hist-head[b-rq5f82bwbu] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 0 14px;
    flex-wrap: wrap;
}

.pr-hist-head-split[b-rq5f82bwbu] {
    justify-content: space-between;
    width: 100%;
}

.pr-hist-left[b-rq5f82bwbu] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.pr-hist-right[b-rq5f82bwbu] {
    display: flex;
    align-items: center;
}

.pr-hist-label[b-rq5f82bwbu] {
    font-weight: 1200;
    font-size: 1.06rem;
    color: #153e75;
}

.pr-hist-chip[b-rq5f82bwbu] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    background: linear-gradient(180deg, #eef6ff 0%, #ffffff 100%);
    border: 1px solid #cfe0f7;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
    font-weight: 1200;
    font-size: 1.08rem;
    color: #0f2b4d;
}

.pr-hist-chip-id[b-rq5f82bwbu] {
    padding: 6px 10px;
    border-radius: 999px;
    background: #ecfdf5;
    border: 1px solid #b7f0ce;
    color: #065f46;
    font-weight: 1200;
    font-size: 1.00rem;
}

.pr-hist-totalbox[b-rq5f82bwbu] {
    text-align: right;
    padding: 10px 14px;
    border-radius: 16px;
    border: 1px solid #dbe8fb;
    background: linear-gradient(180deg, #ffffff 0%, #f2f8ff 100%);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
    min-width: 220px;
}

.pr-hist-total-title[b-rq5f82bwbu] {
    font-weight: 1100;
    color: #153e75;
    font-size: 1.02rem;
}

.pr-hist-total-amount[b-rq5f82bwbu] {
    font-weight: 1400;
    font-size: 1.45rem;
    color: #0f2b4d;
    line-height: 1.05;
}

.pr-hist-total-count[b-rq5f82bwbu] {
    margin-top: 2px;
    font-weight: 1000;
    font-size: 1.00rem;
    color: #52627a;
}

.pr-hist-wrap[b-rq5f82bwbu] {
    border: 1px solid #dbe8fb;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
    padding: 10px;
    max-height: calc(78vh - 190px);
    overflow: auto;
}

.pr-table[b-rq5f82bwbu] {
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.pr-table-head[b-rq5f82bwbu] {
    display: grid;
    grid-template-columns: 1.4fr 1fr .6fr;
    gap: 10px;
    padding: 14px 14px;
    background: linear-gradient(180deg, #eef6ff 0%, #ffffff 100%);
    color: #153e75;
    font-weight: 1200;
    font-size: 1.06rem;
    border-bottom: 1px solid #dbe8fb;
}

.pr-table-row[b-rq5f82bwbu] {
    display: grid;
    grid-template-columns: 1.4fr 1fr .6fr;
    gap: 10px;
    padding: 14px 14px;
    border-top: 1px solid #eef2f7;
    font-weight: 1000;
    font-size: 1.04rem;
    color: #1b2b45;
}

    .pr-table-row:nth-child(even)[b-rq5f82bwbu] {
        background: #fbfdff;
    }

.pr-hist-monto[b-rq5f82bwbu] {
    font-weight: 1300;
    color: #0f2b4d;
}

.pr-pill[b-rq5f82bwbu] {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: .95rem;
    font-weight: 1200;
    border: 1px solid #cfe0f7;
    background: #f4f9ff;
    color: #144a8f;
}

.pr-table-empty[b-rq5f82bwbu] {
    padding: 18px;
    color: #52627a;
    font-weight: 1100;
    font-size: 1.05rem;
}

.pr-chip-persona[b-rq5f82bwbu] {
    font-size: 19px;
    padding: 14px 16px;
}

    .pr-chip-persona b[b-rq5f82bwbu] {
        font-size: 21px;
    }
/* Layout 2 columnas (izquierda contenido / derecha saldo) */
.pr-layout[b-rq5f82bwbu] {
    display: grid;
    grid-template-columns: 520px 1fr;
    gap: 22px;
    align-items: start;
}

.pr-left[b-rq5f82bwbu] {
    min-width: 0;
}

.pr-right[b-rq5f82bwbu] {
    min-width: 0;
    display: flex;
    justify-content: flex-end;
}

/* Panel saldo en el área derecha */
.pr-saldo-card-right[b-rq5f82bwbu] {
    width: min(560px, 100%);
}

/* Más grande (3 puntos aprox) */
.pr-saldo-title[b-rq5f82bwbu] {
    font-size: 1.30rem;
}

.pr-saldo-valor[b-rq5f82bwbu] {
    font-size: 2.25rem;
}

/* ===== Layout 3 columnas: izquierda / centro / derecha ===== */
.pr-layout[b-rq5f82bwbu] {
    display: grid;
    grid-template-columns: 420px 1fr 360px;
    gap: 18px;
    align-items: start;
    margin-top: 8px;
}

@media (max-width: 1100px) {
    .pr-layout[b-rq5f82bwbu] {
        grid-template-columns: 1fr;
    }
}

/* Evita que el bloque interno use su grid viejo */
.pr-busqueda-single[b-rq5f82bwbu] {
    grid-template-columns: 1fr 140px;
    max-width: 100%;
}

/* Slot del aviso naranja, siempre debajo del selector */
.pr-warn-slot[b-rq5f82bwbu] {
    margin-top: 12px;
}

/* Centro: card que centra panel verde + botones */
.pr-center[b-rq5f82bwbu] {
    display: flex;
    justify-content: center;
}

.pr-center-card[b-rq5f82bwbu] {
    width: min(560px, 100%);
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
    padding-top: 6px;
}

/* Botones centrados */
.pr-actions-center[b-rq5f82bwbu] {
    justify-content: center;
}

/* Panel verde MÁS GRANDE */
.pr-chip-selected[b-rq5f82bwbu] {
    border-color: #b7f0ce;
    background: #ecfdf5;
    color: #065f46;
}

.pr-chip-selected-xl[b-rq5f82bwbu] {
    gap: 16px;
    padding: 18px 20px;
    font-size: 1.28rem;
    font-weight: 1500;
    box-shadow: 0 14px 30px rgba(34,197,94,.14);
}

    .pr-chip-selected-xl b[b-rq5f82bwbu] {
        font-size: 1.35rem;
    }

/* Saldo a la derecha (y más grande) */
.pr-saldo-card-right[b-rq5f82bwbu] {
    max-width: 100%;
}

.pr-saldo-title-lg[b-rq5f82bwbu] {
    font-size: 1.22rem;
}

.pr-saldo-valor-lg[b-rq5f82bwbu] {
    font-size: 2.35rem;
}

/* Botón ancho como en ahorros */
.pr-left-actions[b-rq5f82bwbu] {
    margin-top: 10px;
}

.pr-btn-wide[b-rq5f82bwbu] {
    width: 100%;
}

/* Modal resumen grande */
.pr-modal-resumen[b-rq5f82bwbu] {
    max-width: 1100px;
}

/* 5 columnas */
.pr-resumen-head[b-rq5f82bwbu],
.pr-resumen-row[b-rq5f82bwbu] {
    display: grid;
    grid-template-columns: 90px 1.4fr 180px 180px 220px;
    gap: 12px;
    align-items: center;
}

/* Alinear montos a la derecha */
.pr-resumen-right[b-rq5f82bwbu] {
    text-align: right;
}

/* Totales abajo: dos cajas */
.pr-resumen-totales[b-rq5f82bwbu] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 14px;
}

.pr-resumen-totalbox[b-rq5f82bwbu] {
    background: rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    gap: 10px; /* 🔥 separación corta entre texto y monto */
    justify-content: flex-start; /* 🔥 ya NO se van a los lados */
    align-items: center;
    font-size: 16px;
}

/* =========================
   MODAL RESUMEN (GRANDE)
   Aplica a vendedores y particulares
   ========================= */
.pr-modal.pr-modal-resumen[b-rq5f82bwbu] {
    width: 92vw; /* casi toda la pantalla */
    max-width: 1400px; /* grande en PC */
    min-width: 980px; /* evita que se haga pequeño */

    max-height: 85vh; /* alto máximo visible */
    overflow: auto; /* si algo se pasa, scroll dentro del modal */

    padding: 22px 24px;
    border-radius: 18px;
}
/* =========================
   TOTALES RESUMEN PRÉSTAMOS
   GRANDES Y PEGADOS
   ========================= */

.pr-resumen-totales[b-rq5f82bwbu] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
}

.pr-resumen-totalbox[b-rq5f82bwbu] {
    display: flex;
    align-items: baseline;
    gap: 10px; /* 🔥 separación corta entre texto y monto */
    justify-content: flex-start; /* 🔥 ya NO se van a los lados */
    padding: 16px 20px;
    border-radius: 14px;
    background: #f5f6f8;
    font-size: 18px;
    font-weight: 500;
}

    /* Texto: "Total saldo préstamos:" */
    .pr-resumen-totalbox span[b-rq5f82bwbu] {
        font-size: 18px;
        color: #374151;
        white-space: nowrap;
    }

    /* Monto ₡50 000 */
    .pr-resumen-totalbox b[b-rq5f82bwbu] {
        font-size: 28px; /* 🔥 MÁS GRANDE */
        font-weight: 700;
        color: #0f172a;
        white-space: nowrap;
    }
.pr-btn-mini[b-rq5f82bwbu] {
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 10px;
}
/* _content/SistemaLoteriaDashboard/Components/Banca/Restricciones.razor.rz.scp.css */
/* ===== Estructura base ===== */
.rest-wrap[b-gzngsi3ocj] {
    padding: 14px 18px;
}

.rest-card[b-gzngsi3ocj] {
    background: #fff;
    border: 1px solid #e6edf8;
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    margin-bottom: 16px;
}

.card-title[b-gzngsi3ocj] {
    font-weight: 900;
    color: #153e75;
    margin-bottom: 8px;
    font-size: 1.28rem;
}

.card-subtitle[b-gzngsi3ocj] {
    color: #4a5b78;
    font-size: 1.05rem;
    margin-bottom: 14px;
}

/* ===== Filtros (GRID FIJO) =====
   Fila 1: Fecha (arriba, NO gigante)
   Fila 2: Vendedores (izq) | Sorteos (der)
   Fila 3: Tipo (izq) | Tope/%/Base (der)
*/
.filtros[b-gzngsi3ocj] {
    display: grid;
    grid-template-columns: repeat(6, minmax(160px, 1fr));
    column-gap: 8px;
    row-gap: 12px;
    margin-bottom: 14px;
}

.campo[b-gzngsi3ocj] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .campo > label[b-gzngsi3ocj] {
        font-weight: 800;
        color: #244;
        font-size: 1.02rem;
    }

    .campo input[type="number"][b-gzngsi3ocj],
    .campo input[type="text"][b-gzngsi3ocj],
    .select-xl[b-gzngsi3ocj] {
        border: 1px solid #cfe0f5;
        border-radius: 10px;
        padding: 10px 12px;
        font-size: 1.08rem;
        line-height: 1.25;
        width: 100%;
        box-sizing: border-box;
        background: #fff;
    }

/* Radios */
.tipo .radios[b-gzngsi3ocj] {
    display: flex;
    gap: 16px;
    align-items: center;
    font-size: 1.06rem;
}

.radio[b-gzngsi3ocj] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Inputs con prefijo ₡ / % */
.input-money[b-gzngsi3ocj], .input-percent[b-gzngsi3ocj] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .input-money span[b-gzngsi3ocj], .input-percent span[b-gzngsi3ocj] {
        background: #eef5ff;
        border: 1px solid #cfe0f5;
        padding: 6px 8px;
        border-radius: 8px;
        font-weight: 800;
        color: #0a3c6b;
        font-size: 1.02rem;
    }

/* ===== InputDate tamaño (NORMAL como los selects) ===== */


    .campo input[type="date"][b-gzngsi3ocj]::-webkit-calendar-picker-indicator {
        cursor: pointer;
        opacity: .75;
    }

/* ===== POSICIONES EXACTAS ===== */

/* Fecha arriba: más angosta (sin renglón largo) */
.fecha-top[b-gzngsi3ocj] {
    grid-column: 1 / span 2; /* antes span 3 */
    grid-row: 1;
}

    /* Fecha: números más grandes (solo la fecha) */
    .fecha-top .select-xl[b-gzngsi3ocj],
    .fecha-top input[type="date"][b-gzngsi3ocj] {
        font-size: 1.30rem !important; /* sube tamaño */
        letter-spacing: .3px;
    }

/* Fila 2 */
.vendedor-fijo[b-gzngsi3ocj] {
    grid-column: 1 / span 3;
    grid-row: 2;
}

.sorteo-fijo[b-gzngsi3ocj] {
    grid-column: 4 / span 3;
    grid-row: 2;
}

/* Fila 3 */
/* Tipo (izq) */
.tipo-fijo[b-gzngsi3ocj] {
    grid-column: 1 / span 2; /* antes span 3 */
    grid-row: 3;
}

/* Textbox (Tope / % / Base) más pegados al tipo */
.slot-centro[b-gzngsi3ocj] {
    grid-column: 3 / span 4; /* antes empezaba en 4 */
    grid-row: 3;
}


/* Porcentaje: dos inputs a la par dentro del slot derecho */
.porc-grid[b-gzngsi3ocj] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
}

.porc-ayuda[b-gzngsi3ocj] {
    margin-top: 6px;
}



/* ===== MultiSelect (dropdown con checks) ===== */
.ms-root[b-gzngsi3ocj] {
    position: relative;
    width: 100%;
}



.ms-btn[b-gzngsi3ocj] {
    width: 100%;
    height: 56px;
    border: 1px solid #cfe0f5;
    border-radius: 10px;
    background: #fff;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    box-sizing: border-box;
    box-shadow: 0 2px 6px rgba(15,23,42,.06);
}

    .ms-btn:hover[b-gzngsi3ocj] {
        border-color: #98bdf0;
        background: #fbfdff;
    }

.ms-btn-text[b-gzngsi3ocj] {
    font-size: 1.15rem;
    font-weight: 800;
    color: #153e75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ms-caret[b-gzngsi3ocj] {
    color: #6b7a90;
    font-size: 1rem;
    font-weight: 900;
}

.ms-panel[b-gzngsi3ocj] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #d1d5db;
    box-shadow: 0 10px 24px rgba(15,23,42,.22);
    z-index: 1200;
    overflow: hidden;
}

.ms-top[b-gzngsi3ocj] {
    padding: 10px 12px;
    border-bottom: 1px solid #eef3fb;
    background: #f8fbff;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ms-check[b-gzngsi3ocj] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    color: #123a6c;
    font-size: 1.02rem;
}

    .ms-check input[b-gzngsi3ocj] {
        transform: scale(1.05);
    }

.ms-global[b-gzngsi3ocj] {
    color: #8a1c1c;
}

.ms-list[b-gzngsi3ocj] {
    max-height: 220px;
    overflow: auto;
    padding: 10px 12px;
    background: #fff;
}

.ms-item[b-gzngsi3ocj] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: background .12s ease;
}

    .ms-item:hover[b-gzngsi3ocj] {
        background: #f1f6ff;
    }

    .ms-item input[b-gzngsi3ocj] {
        transform: scale(1.05);
    }

.ms-item-text[b-gzngsi3ocj] {
    font-weight: 800;
    color: #153e75;
    font-size: 1.03rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ms-empty[b-gzngsi3ocj] {
    color: #567;
    font-style: italic;
    padding: 10px 6px;
}

.ms-footer[b-gzngsi3ocj] {
    padding: 10px 12px;
    border-top: 1px solid #eef3fb;
    background: #fbfdff;
    display: flex;
    justify-content: flex-end;
}

/* ===== Números (chips) ===== */
.numeros-editor[b-gzngsi3ocj] {
    margin-top: 16px;
}

.chips-input[b-gzngsi3ocj] {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

    .chips-input input[b-gzngsi3ocj] {
        min-width: 420px;
        font-size: 1.12rem;
        padding: 10px 12px;
        border-radius: 10px;
        border: 1px solid #cfe0f5;
    }

.chips-list[b-gzngsi3ocj] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.chip[b-gzngsi3ocj] {
    background: #eaf6ff;
    border: 1px solid #9ec5ea;
    color: #d32f2f;
    font-weight: 900;
    font-size: 1.20rem;
    padding: 6px 14px;
    border-radius: 999px;
    display: inline-flex;
    gap: 8px;
    align-items: center;
    line-height: 1.2;
}

    .chip .x[b-gzngsi3ocj] {
        border: none;
        background: transparent;
        font-size: 18px;
        cursor: pointer;
        line-height: 1;
        color: #064a7a;
    }

        .chip .x:hover[b-gzngsi3ocj] {
            opacity: .85;
        }

.ayuda[b-gzngsi3ocj] {
    color: #6b7a90;
    font-style: italic;
    font-size: 1.02rem;
}

    .ayuda.peque[b-gzngsi3ocj] {
        font-size: .95rem;
        font-style: italic;
    }

/* ===== Acciones ===== */
.acciones[b-gzngsi3ocj] {
    display: flex;
    gap: 12px;
    margin-top: 14px;
}

.btn[b-gzngsi3ocj] {
    border: 1px solid #cfe0f5;
    background: #fff;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 800;
    cursor: pointer;
    font-size: 1.02rem;
}

    .btn.ok[b-gzngsi3ocj] {
        background: #e7f9ef;
        border-color: #8fd0a8;
    }

    .btn.light[b-gzngsi3ocj] {
        background: #f6f7fb;
    }

    .btn.mini[b-gzngsi3ocj] {
        padding: 6px 10px;
        border-radius: 8px;
        font-size: 1rem;
    }

        .btn.mini.rojo[b-gzngsi3ocj] {
            border-color: #f0b3b3;
            background: #ffecec;
        }

/* =========================================================
   ✅ FIX DEFINITIVO: FECHA GRANDE (Chrome/Edge/Firefox)
   - Agranda números reales del <input type="date">
   - Evita la "línea" gigante: limita ancho y alinea a la izquierda
   ========================================================= */

/* La caja de fecha NO ocupa toda la fila visualmente */
.fecha-top[b-gzngsi3ocj] {
    grid-column: 1 / span 6; /* sigue arriba */
    grid-row: 1;
}

    /* Limitar ancho para que no se vea como un renglón infinito */
    .fecha-top .fecha-xl[b-gzngsi3ocj] {
        width: 420px !important; /* AJUSTA si quieres: 380 / 420 / 460 */
        max-width: 100% !important;
        justify-self: start;
    }

/* Tamaño de letra real del input */
.rest-card .fecha-top .fecha-xl[b-gzngsi3ocj] {
    height: 56px !important;
    padding: 10px 14px !important;
    font-size: 1.35rem !important; /* ✅ aquí crece */
    font-weight: 900 !important;
    color: #153e75 !important;
    border: 1px solid #cfe0f5 !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06) !important;
    box-sizing: border-box !important;
    line-height: 1.2 !important;
}

    /* ✅ Chrome/Edge: el texto visible vive en estos pseudoelementos */
    .rest-card .fecha-top .fecha-xl[b-gzngsi3ocj]::-webkit-datetime-edit {
        font-size: 1.35rem !important;
        font-weight: 900 !important;
    }

    .rest-card .fecha-top .fecha-xl[b-gzngsi3ocj]::-webkit-datetime-edit-day-field,
    .rest-card .fecha-top .fecha-xl[b-gzngsi3ocj]::-webkit-datetime-edit-month-field,
    .rest-card .fecha-top .fecha-xl[b-gzngsi3ocj]::-webkit-datetime-edit-year-field {
        font-size: 1.35rem !important;
        font-weight: 900 !important;
    }

    .rest-card .fecha-top .fecha-xl[b-gzngsi3ocj]::-webkit-datetime-edit-text {
        font-size: 1.35rem !important;
        font-weight: 900 !important;
    }

    /* Icono calendario */
    .rest-card .fecha-top .fecha-xl[b-gzngsi3ocj]::-webkit-calendar-picker-indicator {
        cursor: pointer;
        opacity: .80;
    }

/* =========================
   FECHA NUEVA (TEXT INPUT)
   - Se ve igual en TODOS los navegadores
   - No ocupa todo el ancho
   ========================= */

.fecha-top[b-gzngsi3ocj] {
    grid-column: 1 / span 6; /* sigue en la fila 1 */
    grid-row: 1;
}

.fecha-row[b-gzngsi3ocj] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: fit-content; /* ✅ evita que se estire */
    max-width: 100%;
}

.fecha-input[b-gzngsi3ocj] {
    width: 260px; /* ✅ ancho real (ajusta si quieres 240/280) */
    height: 56px;
    border: 1px solid #cfe0f5;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 1.35rem; /* ✅ números grandes */
    font-weight: 900;
    color: #153e75;
    background: #fff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
    box-sizing: border-box;
}

    .fecha-input[b-gzngsi3ocj]::placeholder {
        color: #8aa0bf;
        font-weight: 800;
    }

.fecha-hoy[b-gzngsi3ocj] {
    height: 56px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid #cfe0f5;
    background: #f6f7fb;
    font-weight: 900;
    color: #153e75;
    cursor: pointer;
}

    .fecha-hoy:hover[b-gzngsi3ocj] {
        background: #eef5ff;
        border-color: #98bdf0;
    }


/* =========================
   MODAL GUARDADO (CENTRADO)
   ========================= */

.rest-modal-backdrop[b-gzngsi3ocj] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 16px;
}

.rest-modal[b-gzngsi3ocj] {
    width: min(520px, 92vw);
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    box-shadow: 0 18px 60px rgba(0,0,0,.35);
    padding: 18px 18px 14px 18px;
}

.rest-modal-title[b-gzngsi3ocj] {
    font-size: 18px;
    font-weight: 900;
    color: #153e75;
    margin-bottom: 10px;
}

.rest-modal-msg[b-gzngsi3ocj] {
    white-space: pre-wrap;
    margin: 0 0 14px 0;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.6;
    background: #f0f7ff;
    border: 1px solid #cfe0f5;
    border-radius: 12px;
    padding: 16px 18px;
    max-height: 55vh;
    overflow: auto;
    color: #153e75;
}
/* _content/SistemaLoteriaDashboard/Components/Banca/SorteosTab.razor.rz.scp.css */
/* ===== Cards genéricas (SorteosTab) ===== */
.card[b-q61iu2hedu] {
    background: #fff;
    border: 1px solid #e6edf8;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

.card-titulo[b-q61iu2hedu] {
    font-weight: 900;
    font-size: 1.1rem;
    color: #153e75;
    margin-bottom: 12px;
}

/* Acciones dentro de la card de sorteos */
.acciones[b-q61iu2hedu] {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

/* Botones (mismo diseño que en Banca) */
.btn[b-q61iu2hedu] {
    background: #0d47a1;
    color: #fff;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    transition: .15s;
}

    .btn:hover[b-q61iu2hedu] {
        filter: brightness(.95);
    }

.btn-secondary[b-q61iu2hedu] {
    background: #6b84a8;
    color: #fff;
}

.btn-danger[b-q61iu2hedu] {
    background: #e53935;
    color: #fff;
}

.btn-small[b-q61iu2hedu] {
    padding: 6px 10px;
    font-weight: 600;
    border-radius: 7px;
}

.btn:disabled[b-q61iu2hedu] {
    opacity: .6;
    cursor: not-allowed;
}

/* Inputs / selects / textarea (estilo general de formulario) */
.input[b-q61iu2hedu],
select.input[b-q61iu2hedu],
textarea.input[b-q61iu2hedu] {
    padding: 10px 12px;
    border: 1px solid #e2e8f5;
    border-radius: 10px;
    outline: none;
    font: inherit;
    background: #fff;
    transition: box-shadow .15s, border-color .15s, transform .08s;
}

    .input:focus[b-q61iu2hedu],
    select.input:focus[b-q61iu2hedu],
    textarea.input:focus[b-q61iu2hedu] {
        box-shadow: 0 0 0 3px rgba(21,62,117,.12);
        border-color: #cfe0fb;
    }

    .input:hover[b-q61iu2hedu] {
        border-color: #cfd9ee;
    }

    .input:focus-visible[b-q61iu2hedu] {
        transform: translateY(-1px);
    }

/* Campos numéricos sin flechas */
input[type="number"].input[b-q61iu2hedu] {
    -moz-appearance: textfield;
}

    input[type="number"].input[b-q61iu2hedu]::-webkit-outer-spin-button,
    input[type="number"].input[b-q61iu2hedu]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

/* Filas de formulario (label + campo) */
.form-row[b-q61iu2hedu] {
    display: grid;
    grid-template-columns: 180px 1fr;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

    .form-row > label[b-q61iu2hedu] {
        font-weight: 700;
        color: #123a6c;
    }

/* Subcard donde se edita el sorteo */
.subcard[b-q61iu2hedu] {
    border: 1px solid #e6edf8;
    border-radius: 10px;
    padding: 12px;
    background: #fbfdff;
    box-shadow: 0 1px 4px rgba(0,0,0,.04) inset;
}

/* Texto de ayuda pequeño bajo el ID */
.help[b-q61iu2hedu] {
    font-size: 0.8rem;
    color: #6c7e97;
    margin-top: 4px;
}

/* Toggle Activo (switch) */
.switch[b-q61iu2hedu] {
    position: relative;
    width: 44px;
    height: 24px;
}

    .switch input[b-q61iu2hedu] {
        appearance: none;
        width: 44px;
        height: 24px;
        background: #cdd9ee;
        border-radius: 999px;
        outline: none;
        cursor: pointer;
        transition: background .2s;
    }

        .switch input:checked[b-q61iu2hedu] {
            background: #3b73ff;
        }

        .switch input[b-q61iu2hedu]::after {
            content: "";
            position: absolute;
            width: 18px;
            height: 18px;
            top: 3px;
            left: 3px;
            background: #fff;
            border-radius: 50%;
            transition: transform .2s;
            box-shadow: 0 1px 3px rgba(0,0,0,.25);
        }

        .switch input:checked[b-q61iu2hedu]::after {
            transform: translateX(20px);
        }

/* Tabla base (igual que en Banca) */
.tabla[b-q61iu2hedu] {
    border: 1px solid #e6edf8;
    border-radius: 10px;
    overflow: hidden;
}

.tabla-header[b-q61iu2hedu],
.tabla-body .fila[b-q61iu2hedu] {
    display: grid; /* columnas definidas por tabla-xxx */
    gap: 0;
}

.tabla-header[b-q61iu2hedu] {
    background: #f4f8ff;
    color: #123a6c;
    font-weight: 800;
    border-bottom: 1px solid #e6edf8;
}

    .tabla-header > div[b-q61iu2hedu],
    .tabla-body .fila > div[b-q61iu2hedu] {
        padding: 10px 12px;
        border-right: 1px solid #eef3fb;
    }

        .tabla-header > div:last-child[b-q61iu2hedu],
        .tabla-body .fila > div:last-child[b-q61iu2hedu] {
            border-right: none;
        }

.tabla-body .fila:nth-child(even)[b-q61iu2hedu] {
    background: #fcfeff;
}

/* Placeholder sin datos */
.fila-placeholder[b-q61iu2hedu] {
    padding: 16px;
    color: #6c7e97;
    font-style: italic;
}

/* === ESPECÍFICO: TABLA SORTEOS === */
.tabla-sorteos .tabla-header[b-q61iu2hedu],
.tabla-sorteos .tabla-body .fila[b-q61iu2hedu] {
    /* ID | Nombre | Hora cierre | Activo | Acciones */
    grid-template-columns: .6fr 2fr 1.2fr .8fr 1.2fr;
}

/* Responsive: formulario en una columna en pantallas pequeñas */
@media (max-width: 700px) {
    .form-row[b-q61iu2hedu] {
        grid-template-columns: 1fr;
    }
}

/* === Resaltar campos dentro de la card de Sorteos === */
.card .input[b-q61iu2hedu],
.card select.input[b-q61iu2hedu],
.card textarea.input[b-q61iu2hedu] {
    background: #f9fbff; /* fondo un poco más celeste */
    border-color: #d5e2fb; /* borde más marcado */
    box-shadow: inset 0 0 0 1px #e1e9f8;
}

    .card .input:focus[b-q61iu2hedu],
    .card select.input:focus[b-q61iu2hedu],
    .card textarea.input:focus[b-q61iu2hedu] {
        box-shadow: 0 0 0 3px rgba(21, 62, 117, .12), inset 0 0 0 1px #c7d7fb;
        border-color: #c1d4ff;
    }

/* ===== Estilo compacto moderno (ID, Nombre, Tipo) ===== */

/* Base compacta: comparte look con el select de tipo */
.input-compact[b-q61iu2hedu],
.tipo-sorteo-select[b-q61iu2hedu] {
    font-size: 1rem;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid #b9c6d2;
    background: #f8fbff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: 0.2s ease;
    font-weight: 600;
}

/* Ancho específico para el select de tipo (Normal/Reventado) */
.tipo-sorteo-select[b-q61iu2hedu] {
    width: 150px;
}

    /* Hover / focus compartidos */
    .input-compact:hover[b-q61iu2hedu],
    .tipo-sorteo-select:hover[b-q61iu2hedu] {
        border-color: #4a7bdc;
    }

    .input-compact:focus[b-q61iu2hedu],
    .tipo-sorteo-select:focus[b-q61iu2hedu] {
        outline: none;
        border-color: #2760ff;
        box-shadow: 0 0 4px rgba(39,96,255,0.35);
    }

/* Ancho compacto del ID */
.input-id-compact[b-q61iu2hedu] {
    width: 120px;
}

/* Ancho compacto del Nombre */
.input-nombre-compact[b-q61iu2hedu] {
    width: 260px;
    max-width: 100%;
}

/* ===== MODAL GENÉRICO (igual que en Usuarios) ===== */

.modal-backdrop[b-q61iu2hedu] {
    position: fixed;
    inset: 0; /* top/right/bottom/left:0 */
    background: rgba(6, 24, 61, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

/* Tamaño medio para el contenido del modal */
.modal-dialog.modal-md[b-q61iu2hedu] {
    background: #ffffff;
    border-radius: 14px;
    width: 520px;
    max-width: calc(100% - 40px);
    box-shadow: 0 18px 45px rgba(15, 35, 70, 0.35);
    overflow: hidden;
    animation: modalFadeIn-b-q61iu2hedu 0.18s ease-out;
}

/* Cabecera del modal */
.modal-header[b-q61iu2hedu] {
    padding: 12px 18px;
    border-bottom: 1px solid #e4ecfa;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .modal-header h3[b-q61iu2hedu] {
        margin: 0;
        font-size: 1.05rem;
        font-weight: 800;
        color: #153e75;
    }

/* Botón de cerrar (X) */
.modal-close[b-q61iu2hedu] {
    background: transparent;
    border: none;
    font-size: 1.2rem;
    font-weight: 800;
    cursor: pointer;
    color: #6b7a92;
    padding: 2px 6px;
    border-radius: 999px;
    transition: background 0.15s, color 0.15s;
}

    .modal-close:hover[b-q61iu2hedu] {
        background: rgba(21, 62, 117, 0.08);
        color: #10294f;
    }

/* Cuerpo del modal */
.modal-body[b-q61iu2hedu] {
    padding: 14px 18px 12px;
    max-height: 70vh;
    overflow-y: auto;
}

/* Pie del modal (botones) */
.modal-footer[b-q61iu2hedu] {
    padding: 10px 18px 14px;
    border-top: 1px solid #e4ecfa;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* Animación simple de aparición */
@keyframes modalFadeIn-b-q61iu2hedu {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Alertas dentro del modal (por si no existen aún aquí) */
.alerta[b-q61iu2hedu] {
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.9rem;
    line-height: 1.4;
}

.alerta-warning[b-q61iu2hedu] {
    background: #fff7e6;
    border: 1px solid #ffd48a;
    color: #8a5a11;
}
/* _content/SistemaLoteriaDashboard/Components/Banca/UsuariosTab.razor.rz.scp.css */
/* === EXISTENTE (no se toca la estructura) === */
.usuarios-wrap[b-1v4tgzl30n] {
}

/* acciones */
.acciones[b-1v4tgzl30n] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

    .acciones .acciones-derecha[b-1v4tgzl30n] {
        display: flex;
        gap: 8px;
        align-items: center;
    }

.input-buscar[b-1v4tgzl30n] {
    min-width: 220px;
}

/* subcard */
.subcard[b-1v4tgzl30n] {
    border: 1px solid #e6edf8;
    border-radius: 10px;
    padding: 12px;
    background: #fbfdff;
    box-shadow: 0 1px 4px rgba(0,0,0,.04) inset;
}

/* tabla usuarios (listado inferior) */
.tabla-usuarios .tabla-header[b-1v4tgzl30n],
.tabla-usuarios .tabla-body .fila[b-1v4tgzl30n] {
    display: grid;
    grid-template-columns: 1.2fr .8fr .9fr .5fr .9fr; /* Usuario | Rol | Tel | ID | Acciones */
}

/* ===== TABLA ASIGNACIÓN SORTEOS (HEADER + FILAS) ===== */

/* Base grid para que usemos nuestra plantilla compacta */
.tabla-usuarios-sorteos .tabla-header[b-1v4tgzl30n],
.tabla-usuarios-sorteos .tabla-body .fila[b-1v4tgzl30n] {
    display: grid;
}

/* GRILLA FLUIDA A TODO EL ANCHO (8 columnas) */
.tabla-usuarios-sorteos[b-1v4tgzl30n] {
    width: 100%;
}

    /* Header y filas con plantilla de 8 columnas que ocupa SIEMPRE el 100% */
    .tabla-usuarios-sorteos .tabla-header.tabla-us-sorteos-grid[b-1v4tgzl30n],
    .tabla-usuarios-sorteos .tabla-body .fila.tabla-us-sorteos-grid[b-1v4tgzl30n] {
        width: 100%;
        grid-template-columns: 0.6fr /* Asignado (switch) */
        2.4fr /* Sorteo */
        1.0fr /* Hora cierre */
        0.9fr /* Comisión */
        1.0fr /* Paga */
        1.0fr /* Paga calle */
        1.3fr /* Venta máx. número */
        0.9fr; /* Acciones (⚙) */
        gap: 0; /* usamos bordes como separadores */
    }

    /* Tipografía y header marcado */
    .tabla-usuarios-sorteos .tabla-header[b-1v4tgzl30n] {
        font-size: 1.05rem;
        font-weight: 800;
        line-height: 1.25;
        border-bottom: 2px solid #d2defa;
    }

    /* Filas: alineadas verticalmente al centro */
    .tabla-usuarios-sorteos .tabla-body .fila[b-1v4tgzl30n] {
        font-size: 1.08rem;
        line-height: 1.30;
        align-items: center;
    }

    /* Números: alineados a la derecha y con fuente tabular/monospace */
    .tabla-usuarios-sorteos .col-num[b-1v4tgzl30n],
    .tabla-usuarios-sorteos .col-cierre[b-1v4tgzl30n] {
        text-align: right;
        font-variant-numeric: tabular-nums;
        letter-spacing: 0.2px;
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    }

    /* Más aire para celdas */
    .tabla-usuarios-sorteos .tabla-header.tabla-us-sorteos-grid > div[b-1v4tgzl30n],
    .tabla-usuarios-sorteos .tabla-body .fila.tabla-us-sorteos-grid > div[b-1v4tgzl30n] {
        padding: 10px 12px;
    }

    /* Elipsis seguras para el nombre del sorteo */
    .tabla-usuarios-sorteos .col-sorteo[b-1v4tgzl30n] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

    /* Centro para switch y botón ⚙ */
    .tabla-usuarios-sorteos .col-asig[b-1v4tgzl30n],
    .tabla-usuarios-sorteos .col-acc[b-1v4tgzl30n] {
        text-align: center;
    }

    /* Botón acciones un poquito más visible */
    .tabla-usuarios-sorteos .btn-small[b-1v4tgzl30n] {
        padding: 8px 12px;
        font-size: 0.95rem;
        border-radius: 8px;
    }

    /* Switch apenas más grande en la tabla */
    .tabla-usuarios-sorteos .switch[b-1v4tgzl30n] {
        transform: scale(1.07);
        transform-origin: left center;
    }

    /* Separadores y bandas más visibles */
    .tabla-usuarios-sorteos .tabla-header > div[b-1v4tgzl30n],
    .tabla-usuarios-sorteos .tabla-body .fila > div[b-1v4tgzl30n] {
        border-right: 2px solid #d6e2fb;
    }

        .tabla-usuarios-sorteos .tabla-header > div:last-child[b-1v4tgzl30n],
        .tabla-usuarios-sorteos .tabla-body .fila > div:last-child[b-1v4tgzl30n] {
            border-right: none;
        }

    /* Borde inferior entre filas y bandas */
    .tabla-usuarios-sorteos .tabla-body .fila:nth-child(even)[b-1v4tgzl30n] {
        background: #f7faff;
    }

    /* Hover suave en filas */
    .tabla-usuarios-sorteos .tabla-body .fila:hover[b-1v4tgzl30n] {
        background: #e9f2ff;
    }

    /* Títulos centrados y con un pelín más de presencia */
    .tabla-usuarios-sorteos .tabla-header > div[b-1v4tgzl30n] {
        text-align: center;
        justify-content: center;
        align-items: center;
        display: flex;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        font-size: 0.8rem;
    }

/* Responsive: en pantallas medianas, el nombre de sorteo gana un poco más de espacio */
@media (max-width: 1200px) {
    .tabla-usuarios-sorteos .tabla-header.tabla-us-sorteos-grid[b-1v4tgzl30n],
    .tabla-usuarios-sorteos .tabla-body .fila.tabla-us-sorteos-grid[b-1v4tgzl30n] {
        grid-template-columns: 0.6fr /* Asignado */
        2.8fr /* Sorteo */
        0.9fr /* Hora cierre */
        0.9fr /* Comisión */
        1.0fr /* Paga */
        1.0fr /* Paga calle */
        1.1fr /* Venta máx. número */
        0.9fr; /* Acciones */
    }
}

/* utilidades ya conocidas */
.form-row[b-1v4tgzl30n] {
    display: grid;
    grid-template-columns: 180px 1fr;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

    .form-row > label[b-1v4tgzl30n] {
        font-weight: 700;
        color: #123a6c;
    }

.input[b-1v4tgzl30n],
select.input[b-1v4tgzl30n] {
    padding: 10px 12px;
    border: 1px solid #e2e8f5;
    border-radius: 10px;
    outline: none;
    font: inherit;
    background: #fff;
}

    .input:focus[b-1v4tgzl30n],
    select.input:focus[b-1v4tgzl30n] {
        box-shadow: 0 0 0 3px rgba(21,62,117,.12);
        border-color: #cfe0fb;
    }

.btn[b-1v4tgzl30n] {
    background: #0d47a1;
    color: #fff;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
}

    .btn:hover[b-1v4tgzl30n] {
        filter: brightness(.95);
    }

.btn-secondary[b-1v4tgzl30n] {
    background: #6b84a8;
    color: #fff;
}

.btn-danger[b-1v4tgzl30n] {
    background: #e53935;
    color: #fff;
}

.btn-small[b-1v4tgzl30n] {
    padding: 6px 10px;
    font-weight: 600;
    border-radius: 7px;
}

.pill[b-1v4tgzl30n] {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    background: #eef3ff;
    color: #264d99;
}

.divisor[b-1v4tgzl30n] {
    height: 1px;
    background: linear-gradient(90deg, transparent, #e8eefb, transparent);
    margin: 10px 0;
}

.form-actions[b-1v4tgzl30n] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 8px;
}

/* switch */
.switch[b-1v4tgzl30n] {
    position: relative;
    width: 44px;
    height: 24px;
}

    .switch input[b-1v4tgzl30n] {
        appearance: none;
        width: 44px;
        height: 24px;
        background: #cdd9ee;
        border-radius: 999px;
        cursor: pointer;
        transition: background .2s;
        outline: none;
        border: none;
    }

        .switch input:checked[b-1v4tgzl30n] {
            background: #3b73ff;
        }

        .switch input[b-1v4tgzl30n]::after {
            content: "";
            position: absolute;
            width: 18px;
            height: 18px;
            top: 3px;
            left: 3px;
            background: #fff;
            border-radius: 50%;
            transition: transform .2s;
            box-shadow: 0 1px 3px rgba(0,0,0,.25);
        }

        .switch input:checked[b-1v4tgzl30n]::after {
            transform: translateX(20px);
        }

/* modal base */
.modal-backdrop[b-1v4tgzl30n] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal[b-1v4tgzl30n] {
    width: min(640px, 95vw);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(0,0,0,.2);
    border: 1px solid #e6edf8;
    overflow: hidden;
    animation: pop-b-1v4tgzl30n .12s ease-out;
}

@keyframes pop-b-1v4tgzl30n {
    from {
        transform: scale(.98);
        opacity: .5;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.modal-header[b-1v4tgzl30n] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid #eef3fb;
    background: #f7fbff;
}

.modal-title[b-1v4tgzl30n] {
    font-weight: 900;
    color: #153e75;
}

.modal-close[b-1v4tgzl30n] {
    background: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
}

.modal-body[b-1v4tgzl30n] {
    padding: 14px;
}

.modal-actions[b-1v4tgzl30n] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 12px 14px;
    border-top: 1px solid #eef3fb;
    background: #fbfdff;
}

/* grupo asignación header */
.asignacion-actions[b-1v4tgzl30n] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin: 8px 0 10px;
}

    .asignacion-actions .left[b-1v4tgzl30n],
    .asignacion-actions .right[b-1v4tgzl30n] {
        display: flex;
        gap: 8px;
        align-items: center;
    }

/* tabla base genérica */
.tabla[b-1v4tgzl30n] {
    border: 1px solid #e6edf8;
    border-radius: 10px;
    overflow: hidden;
}

.tabla-header[b-1v4tgzl30n],
.tabla-body .fila[b-1v4tgzl30n] {
    display: grid;
    gap: 0;
}

.tabla-header[b-1v4tgzl30n] {
    background: #f4f8ff;
    color: #123a6c;
    font-weight: 800;
    border-bottom: 1px solid #e6edf8;
}

    .tabla-header > div[b-1v4tgzl30n],
    .tabla-body .fila > div[b-1v4tgzl30n] {
        padding: 10px 12px;
        border-right: 1px solid #eef3fb;
    }

        .tabla-body .fila > div:last-child[b-1v4tgzl30n],
        .tabla-header > div:last-child[b-1v4tgzl30n] {
            border-right: none;
        }

.tabla-body .fila:nth-child(even)[b-1v4tgzl30n] {
    background: #fcfeff;
}

.fila-placeholder[b-1v4tgzl30n] {
    padding: 16px;
    color: #6c7e97;
    font-style: italic;
}

/* responsivo genérico de form-row */
@media (max-width: 760px) {
    .form-row[b-1v4tgzl30n] {
        grid-template-columns: 1fr;
    }
}

/* ===== Modal Config (dos columnas) ===== */
.modal.modal-conf[b-1v4tgzl30n] {
    width: min(900px, 96vw);
}

.conf-modal-grid[b-1v4tgzl30n] {
    display: grid;
    grid-template-columns: 1.1fr 1.2fr; /* izquierda | derecha */
    gap: 14px;
}

.conf-card[b-1v4tgzl30n] {
    background: #fff;
    border: 1px solid #e6edf8;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

.conf-title[b-1v4tgzl30n] {
    font-weight: 900;
    color: #153e75;
    margin-bottom: 10px;
}

.conf-subtitle[b-1v4tgzl30n] {
    font-weight: 800;
    color: #1b4a8f;
    margin: 6px 0 8px 0;
}

/* variantes y utilidades usadas por los modales */
.rojo[b-1v4tgzl30n] {
    color: #e53935;
}

.conf-title.rojo[b-1v4tgzl30n] {
    color: #e53935;
}

.hint[b-1v4tgzl30n] {
    font-size: .86rem;
    color: #6c7e97;
    background: #f8fbff;
    border: 1px dashed #e2e8f5;
    padding: 6px 8px;
    border-radius: 8px;
}

.radio-group[b-1v4tgzl30n] {
    display: flex;
    align-items: center;
    gap: 16px;
}

    .radio-group label[b-1v4tgzl30n] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

@media (max-width: 820px) {
    .conf-modal-grid[b-1v4tgzl30n] {
        grid-template-columns: 1fr;
    }
}

/* Select con flecha SVG (como ya tenías) */
select.input[b-1v4tgzl30n] {
    appearance: none;
    background: #fff url("data:image/svg+xml;utf8,<svg fill='%23153e75' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 7l5 5 5-5H5z'/></svg>") no-repeat right 10px center;
    background-size: 14px;
    padding-right: 30px;
    font-weight: 600;
}

/* ===============================
   INPUTS MÁS VISIBLES (Usuarios)
   =============================== */

.usuarios-wrap .input[b-1v4tgzl30n],
.usuarios-wrap input.input[b-1v4tgzl30n],
.usuarios-wrap select.input[b-1v4tgzl30n] {
    background: #f7f9fc !important; /* Fondo más suave */
    border: 1.5px solid #b7c3d6 !important; /* Borde visible */
    padding: 8px 10px !important;
    border-radius: 8px !important;
    font-size: 0.95rem;
    transition: 0.15s ease-in-out;
    color: #1d2939;
}

    /* EFECTO al enfocar */
    .usuarios-wrap .input:focus[b-1v4tgzl30n],
    .usuarios-wrap input.input:focus[b-1v4tgzl30n],
    .usuarios-wrap select.input:focus[b-1v4tgzl30n] {
        background: #eef3fb !important;
        border-color: #3a6ff7 !important;
        outline: none !important;
        box-shadow: 0 0 0 2px rgba(58, 111, 247, 0.15);
    }

/* ==========================================
   INPUTS dentro de los MODALES (Grupo/Individual)
   ========================================== */

.modal-conf .input[b-1v4tgzl30n],
.modal-conf input.input[b-1v4tgzl30n],
.modal-conf select.input[b-1v4tgzl30n] {
    background: #f8fafc !important;
    border: 1.4px solid #b8c6dd !important;
    padding: 8px 10px !important;
    font-size: 0.95rem;
    border-radius: 7px;
    transition: 0.15s ease-in-out;
}

    .modal-conf .input:focus[b-1v4tgzl30n],
    .modal-conf input.input:focus[b-1v4tgzl30n],
    .modal-conf select.input:focus[b-1v4tgzl30n] {
        border-color: #4a7bff !important;
        background: #eef3fd !important;
        box-shadow: 0 0 0 2px rgba(74, 123, 255, 0.18);
        outline: none;
    }


.select-juego[b-1v4tgzl30n] {
    appearance: auto;
    -webkit-appearance: auto;
    -moz-appearance: auto;
    background-color: #fff;
}

/* =========================
   MODAL MONAZOS: 2 columnas (izq config / der horas)
   ========================= */
.monazo-grid-2col[b-1v4tgzl30n] {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 12px;
    align-items: start;
}

/* Si el zoom es alto / pantalla pequeña: baja a 1 columna para que no se corte */
@media (max-width: 980px) {
    .monazo-grid-2col[b-1v4tgzl30n] {
        grid-template-columns: 1fr;
    }
}

.monazo-card-right[b-1v4tgzl30n] {
    position: sticky;
    top: 12px; /* se queda visible al hacer scroll dentro del modal */
}
/* _content/SistemaLoteriaDashboard/Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-d4799dx4fl] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-d4799dx4fl] {
    flex: 1;
}

.sidebar[b-d4799dx4fl] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-d4799dx4fl] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-d4799dx4fl]  a, .top-row[b-d4799dx4fl]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-d4799dx4fl]  a:hover, .top-row[b-d4799dx4fl]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-d4799dx4fl]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-d4799dx4fl] {
        justify-content: space-between;
    }

    .top-row[b-d4799dx4fl]  a, .top-row[b-d4799dx4fl]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-d4799dx4fl] {
        flex-direction: row;
    }

    .sidebar[b-d4799dx4fl] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-d4799dx4fl] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-d4799dx4fl]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-d4799dx4fl], article[b-d4799dx4fl] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-d4799dx4fl] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-d4799dx4fl] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/SistemaLoteriaDashboard/Components/Shared/PanelNoticias.razor.rz.scp.css */
/* ===========================
   PANEL DE NOTICIAS (derecha)
   =========================== */
.panel-noticias[b-oltototfaa] {
    position: relative;
    width: 520px;
    background: #f7fbff;
    border: 2px solid #e0e6f1;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    height: auto;
    z-index: 10;
    margin-top: 0;
    margin-left: 0;
}

    .panel-noticias .header[b-oltototfaa] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 10px;
    }

        .panel-noticias .header h3[b-oltototfaa] {
            margin: 0;
            font-size: 1.25rem;
            font-weight: 900;
            color: #0d47a1;
            letter-spacing: .3px;
        }

    .panel-noticias .acciones[b-oltototfaa] {
        display: flex;
        gap: 8px;
    }

.btn-icono[b-oltototfaa] {
    border: 1px solid #c5d6f2;
    background: #e9f2ff;
    border-radius: 8px;
    padding: 6px 10px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s;
}

    .btn-icono:hover[b-oltototfaa] {
        background: #d9eaff;
    }

.noticias-scroll[b-oltototfaa] {
    max-height: 520px;
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-gutter: stable;
}

.noticia-card[b-oltototfaa] {
    background: #ffffff;
    border: 2px solid #e6edf8;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.04);
    transition: transform .15s ease, box-shadow .2s ease;
}

    .noticia-card:hover[b-oltototfaa] {
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    }

.noticia-top[b-oltototfaa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.noticia-titulo[b-oltototfaa] {
    font-weight: 900;
    font-size: 1.05rem;
    color: #153e75;
    margin: 0;
}

.badges[b-oltototfaa] {
    display: flex;
    gap: 6px;
    align-items: center;
}

.badge[b-oltototfaa] {
    padding: 3px 8px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
}

.badge-todos[b-oltototfaa] {
    background: #e8f5e9;
    color: #1b5e20;
    border: 1px solid #c8e6c9;
}

.badge-priv[b-oltototfaa] {
    background: #fff3e0;
    color: #e65100;
    border: 1px solid #ffe0b2;
}

.badge-fecha[b-oltototfaa] {
    background: #e3f2fd;
    color: #0d47a1;
    border: 1px solid #bbdefb;
}

/* ✅ Nuevo */
.badge-nuevo[b-oltototfaa] {
    margin-left: 8px;
    background: #e8f1ff;
    color: #0d47a1;
    border: 1px solid #bbdefb;
}

.noticia-body[b-oltototfaa] {
    color: #334155;
    line-height: 1.45;
    white-space: pre-wrap;
    margin-bottom: 8px;
}

.noticia-acciones[b-oltototfaa] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.btn-cerrar[b-oltototfaa] {
    background: #ffe5e5;
    color: #b71c1c;
    border: 1px solid #ffcdd2;
    border-radius: 8px;
    padding: 6px 10px;
    font-weight: 800;
    cursor: pointer;
    transition: .2s;
}

    .btn-cerrar:hover[b-oltototfaa] {
        background: #ffcccc;
    }

.noticia-leida[b-oltototfaa] {
    opacity: .55;
}

.noticia-no-leida[b-oltototfaa] {
    opacity: 1;
}
/* _content/SistemaLoteriaDashboard/Components/Ventas/BorrarTiqueteModal.razor.rz.scp.css */
body[b-xlhohak2zh] {
}
.rt-backdrop[b-xlhohak2zh] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 9998;
}

.rt-modal[b-xlhohak2zh] {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: min(1050px, 95vw);
    max-height: 92vh;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* ✅ borde más oscuro para que destaque */
    border: 1px solid #7ea6df;
}

.rt-header[b-xlhohak2zh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: #d8e7ff;
    /* ✅ borde más oscuro */
    border-bottom: 1px solid #7ea6df;
}

.rt-title[b-xlhohak2zh] {
    display: flex;
    gap: 10px;
    align-items: center;
}

.rt-icon[b-xlhohak2zh] {
    font-size: 22px;
}

.rt-h1[b-xlhohak2zh] {
    font-weight: 900;
    color: #0b3b91;
    font-size: 18px;
}

.rt-h2[b-xlhohak2zh] {
    font-weight: 700;
    color: #0b3b91;
    opacity: .85;
    font-size: 13px;
}

.rt-close[b-xlhohak2zh] {
    width: 34px;
    height: 34px;
    border: 1px solid #7ea6df; /* ✅ */
    border-radius: 10px;
    background: #ffffff;
    cursor: pointer;
    font-weight: 900;
}

.rt-tools[b-xlhohak2zh] {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    background: #f6f9ff;
    /* ✅ borde más oscuro */
    border-bottom: 1px solid #7ea6df;
    flex-wrap: wrap;
    align-items: flex-end;
}

.rt-field[b-xlhohak2zh] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .rt-field label[b-xlhohak2zh] {
        font-size: 12px;
        font-weight: 800;
        color: #153e75;
    }

/* ✅ Fecha más grande */
.rt-date .rt-input[b-xlhohak2zh] {
    height: 44px;
    font-size: 16px;
    font-weight: 800;
    padding: 0 12px;
}

/* ✅ inputs con borde más oscuro */
.rt-input[b-xlhohak2zh] {
    height: 38px;
    border: 1px solid #7ea6df;
    border-radius: 10px;
    padding: 0 10px;
    outline: none;
}

    .rt-input:focus[b-xlhohak2zh] {
        border-color: #1d6fe8;
        box-shadow: 0 0 0 3px rgba(29,111,232,.18);
    }

/* ✅ BUSCADOR: input pequeño y botón al lado */
.rt-buscar[b-xlhohak2zh] {
    flex: 1;
    min-width: 320px;
    display: flex;
    flex-direction: column;
}

.rt-buscar-row[b-xlhohak2zh] {
    display: flex;
    gap: 10px;
    align-items: center;
}

.rt-searchbox[b-xlhohak2zh] {
    flex: 0 1 420px; /* ✅ no tan grande */
    height: 34px; /* ✅ más pequeño */
    font-size: 13px;
    padding: 0 10px;
}

/* ✅ botón buscar cuadrado */
.rt-btn[b-xlhohak2zh] {
    height: 34px;
    width: 42px;
    border: 1px solid #0f55bf; /* borde para que se note */
    border-radius: 10px;
    background: #1d6fe8;
    color: #fff;
    font-weight: 900;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .rt-btn span[b-xlhohak2zh] {
        display: none; /* ✅ ocultamos texto si lo tienes */
    }

    .rt-btn i[b-xlhohak2zh], .rt-btn .rt-btn-ico[b-xlhohak2zh] {
        font-size: 16px; /* ✅ icono visible */
        line-height: 1;
    }

.rt-body[b-xlhohak2zh] {
    padding: 12px 16px;
    overflow: auto;
}

.rt-loading[b-xlhohak2zh], .rt-empty[b-xlhohak2zh] {
    padding: 18px;
    border: 1px dashed #7ea6df; /* ✅ */
    border-radius: 12px;
    background: #fbfdff;
    color: #153e75;
    font-weight: 800;
}

.rt-table[b-xlhohak2zh] {
    width: 100%;
}

/* ✅ filas con bordes más oscuros */
.rt-row[b-xlhohak2zh] {
    display: grid;
    grid-template-columns: 90px 80px 110px 110px 1.6fr 120px 60px;
    gap: 0;
    align-items: center;
    border: 1px solid #7ea6df; /* ✅ */
    border-radius: 10px;
    margin-bottom: 8px;
    overflow: hidden;
    cursor: pointer;
}

.rt-head[b-xlhohak2zh] {
    background: #1b73d1;
    color: #fff;
    font-weight: 900;
    cursor: default;
    border-color: #1b73d1;
}

.rt-row > div[b-xlhohak2zh] {
    padding: 10px 10px;
    background: #fff;
    border-right: 1px solid #d0def4; /* ✅ separadores un poquito más notables */
}

    .rt-row > div:last-child[b-xlhohak2zh] {
        border-right: none;
    }

.rt-head > div[b-xlhohak2zh] {
    background: transparent;
    border-right: 1px solid rgba(255,255,255,.25);
}

/* ✅ selección MUY visible */
/* ✅ SELECCIÓN CLARAMENTE VISIBLE */
.rt-row.rt-selected[b-xlhohak2zh] {
    background: #cfe0ff; /* fondo fuerte */
    border-color: #1d6fe8; /* borde azul intenso */
    box-shadow: inset 0 0 0 2px #1d6fe8, /* borde interno */
    0 4px 12px rgba(29,111,232,.35); /* sombra externa */
}

    /* ✅ Celdas internas también se resaltan */
    .rt-row.rt-selected > div[b-xlhohak2zh] {
        background: #e8f0ff !important;
        font-weight: 900;
        color: #0b3b91;
    }

    /* ✅ Barra lateral de selección */
    .rt-row.rt-selected[b-xlhohak2zh]::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 6px;
        background: #1d6fe8;
    }



/* ✅ hover para ver mejor el foco */
.rt-row:not(.rt-head):hover[b-xlhohak2zh] {
    outline: 2px solid rgba(29,111,232,.20);
}

.rt-col-print[b-xlhohak2zh] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.rt-print[b-xlhohak2zh] {
    width: 36px;
    height: 30px;
    border: 1px solid #1b8a35; /* ✅ */
    border-radius: 8px;
    background: #33b14a;
    color: #fff;
    cursor: pointer;
}

.rt-hide[b-xlhohak2zh] {
    display: none !important;
}

.rt-footer[b-xlhohak2zh] {
    padding: 12px 16px;
    border-top: 1px solid #7ea6df; /* ✅ */
    display: flex;
    justify-content: flex-end;
    background: #fff;
}

.rt-btn-sec[b-xlhohak2zh] {
    background: #e9f1ff;
    color: #0b3b91;
    border: 1px solid #7ea6df;
}

/* ✅ Buscador: número más grande + negrita */
.rt-searchbox[b-xlhohak2zh] {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .3px;
}

/* ✅ Botón buscar: más pequeño y cuadrado */
.rt-buscar-row .rt-btn[b-xlhohak2zh] {
    width: 38px;
    min-width: 38px;
    padding: 0;
}

/* ✅ Bordes más oscuros para que se noten */
.rt-row[b-xlhohak2zh] {
    border-color: #a9bddf;
    position: relative;
}

    .rt-row > div[b-xlhohak2zh] {
        border-right: 1px solid #a9bddf;
    }

        .rt-row > div:last-child[b-xlhohak2zh] {
            border-right: none;
        }

    .rt-row.rt-selected[b-xlhohak2zh]::before {
        pointer-events: none;
    }
}

.rt-del[b-xlhohak2zh] {
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 4px 6px;
}

    .rt-del:hover[b-xlhohak2zh] {
        transform: scale(1.08);
    }
/* _content/SistemaLoteriaDashboard/Components/Ventas/ConfiguracionPuesto.razor.rz.scp.css */
.cfg-wrap[b-5wbwpc1qlv] {
    padding: 18px;
}

.cfg-header[b-5wbwpc1qlv] {
    margin-bottom: 14px;
}

.cfg-title[b-5wbwpc1qlv] {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: .2px;
}

.cfg-sub[b-5wbwpc1qlv] {
    margin-top: 4px;
    font-size: 14px;
    opacity: .9;
}

.cfg-grid[b-5wbwpc1qlv] {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 14px;
    align-items: start;
}

.cfg-card[b-5wbwpc1qlv] {
    background: #ffffff;
    border: 1px solid #dbe3f1;
    border-radius: 14px;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.10);
    padding: 14px;
}

.cfg-card-title[b-5wbwpc1qlv] {
    font-size: 16px;
    font-weight: 900;
    margin-bottom: 10px;
}

.cfg-loading[b-5wbwpc1qlv] {
    font-weight: 800;
    opacity: .8;
}

.cfg-error[b-5wbwpc1qlv] {
    color: #b91c1c;
    font-weight: 900;
    background: #fee2e2;
    border: 1px solid #fecaca;
    padding: 10px;
    border-radius: 10px;
}

.cfg-form[b-5wbwpc1qlv] {
    display: grid;
    gap: 12px;
}

.cfg-field[b-5wbwpc1qlv] {
    display: grid;
    gap: 6px;
}

.cfg-label[b-5wbwpc1qlv] {
    font-size: 13px;
    font-weight: 900;
    opacity: .9;
}

.cfg-input[b-5wbwpc1qlv], .cfg-textarea[b-5wbwpc1qlv] {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 12px 12px;
    font-size: 16px;
    font-weight: 800;
    outline: none;
    background: #fbfdff;
}

.cfg-textarea[b-5wbwpc1qlv] {
    min-height: 110px;
    resize: vertical;
    line-height: 1.25;
}

    .cfg-input:focus[b-5wbwpc1qlv], .cfg-textarea:focus[b-5wbwpc1qlv] {
        border-color: #2563eb;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
    }

.cfg-hint[b-5wbwpc1qlv] {
    font-size: 12px;
    opacity: .8;
    font-weight: 700;
}

.cfg-actions[b-5wbwpc1qlv] {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 4px;
}

.cfg-btn[b-5wbwpc1qlv] {
    border: none;
    border-radius: 12px;
    padding: 11px 14px;
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
    background: #2563eb;
    color: #fff;
}

    .cfg-btn:disabled[b-5wbwpc1qlv] {
        opacity: .65;
        cursor: not-allowed;
    }

.cfg-ok[b-5wbwpc1qlv] {
    font-weight: 900;
    color: #0f766e;
}

/* ===== Preview ===== */
.cfg-preview[b-5wbwpc1qlv] {
    display: grid;
    gap: 10px;
    justify-items: center;
    padding: 6px 0;
}

.cfg-ticket-preview[b-5wbwpc1qlv] {
    padding: 8px;
    border-radius: 14px;
    border: 1px dashed #94a3b8;
    background: #f8fafc;
}

    /* IMPORTANTE: limitamos el estilo del ticket SOLO a esta página */
    .cfg-ticket-preview #pos-ticket[b-5wbwpc1qlv] {
        width: var(--posWidth, 260px);
        margin: 0 auto;
    }

/* responsive */
@media (max-width: 1100px) {
    .cfg-grid[b-5wbwpc1qlv] {
        grid-template-columns: 1fr;
    }
}
/* _content/SistemaLoteriaDashboard/Components/Ventas/ConsultaFacturas.razor.rz.scp.css */
/* =========================
   CONSULTA FACTURAS (CF) - HEADER COMO (CG) + UI MÁS GRANDE (+2px TODO)
   ========================= */

.cf-root[b-4qtll9qrpb] {
    padding: 22px 26px 30px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Header limpio tipo CG */
.cf-hero[b-4qtll9qrpb] {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin-top: 0;
}

.cf-hero-title[b-4qtll9qrpb] {
    display: flex;
    flex-direction: column;
    gap: 6px; /* +2 visual */
}

/* 🔹 TÍTULO */
.cf-h1[b-4qtll9qrpb] {
    margin: 0;
    font-size: 32px; /* 30 → 32 */
    font-weight: 900;
    letter-spacing: .2px;
}

/* 🔹 SUBTÍTULO */
.cf-h2[b-4qtll9qrpb] {
    margin: 0;
    font-size: 16px; /* 14 → 16 */
    font-weight: 800;
    opacity: .78;
    letter-spacing: .2px;
}

/* =========================
   FILTROS
   ========================= */

.cf-filters[b-4qtll9qrpb] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px; /* +2 visual */
    padding: 12px;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 14px;
    background: #fff;
    align-items: flex-start;
}

.cf-block[b-4qtll9qrpb] {
    display: flex;
    flex-direction: column;
    gap: 8px; /* 6 → 8 */
    min-width: 150px;
}

/* bloque botón */
.cf-block-btn[b-4qtll9qrpb] {
    display: flex;
    align-items: flex-end;
}

.cf-grow[b-4qtll9qrpb] {
    flex: 0 0 auto;
    min-width: 240px;
}

/* 🔹 LABELS */
.cf-label[b-4qtll9qrpb] {
    font-size: 14px; /* 12 → 14 */
    font-weight: 900;
    opacity: .85;
    letter-spacing: .2px;
}

/* 🔹 INPUTS / FECHAS */
.cf-input[b-4qtll9qrpb] {
    height: 44px; /* 42 → 44 */
    border: 1px solid rgba(0,0,0,.18);
    border-radius: 12px;
    padding: 0 14px; /* +2 */
    outline: none;
    font-size: 16px; /* 14 → 16 */
    font-weight: 800;
}

/* 🔹 SELECT */
.cf-select[b-4qtll9qrpb] {
    font-size: 16px; /* 14 → 16 */
    font-weight: 850;
}

    .cf-select option[b-4qtll9qrpb] {
        font-size: 18px; /* 16 → 18 */
        font-weight: 800;
    }

/* =========================
   BOTÓN BUSCAR
   ========================= */

.cf-btn[b-4qtll9qrpb] {
    height: 44px; /* 42 → 44 */
    border: none;
    border-radius: 12px;
    padding: 0 20px; /* +2 */
    font-size: 16px; /* NUEVO (+2 implícito) */
    font-weight: 950;
    cursor: pointer;
    background: linear-gradient(180deg, #0f172a, #0b1220);
    color: white;
    box-shadow: 0 14px 26px rgba(15,23,42,.18);
    transition: transform .12s ease, box-shadow .12s ease;
}

    .cf-btn:hover[b-4qtll9qrpb] {
        transform: translateY(-1px);
        box-shadow: 0 18px 34px rgba(15,23,42,.22);
    }

/* 🔵 azul */
.cf-btn-blue[b-4qtll9qrpb] {
    background: linear-gradient(180deg, #2563eb, #1d4ed8);
    box-shadow: 0 14px 30px rgba(37,99,235,.30);
}

    .cf-btn-blue:hover[b-4qtll9qrpb] {
        box-shadow: 0 18px 40px rgba(37,99,235,.35);
    }

/* ajuste vertical */
.cf-block button.cf-btn[b-4qtll9qrpb] {
    margin-top: 24px; /* 22 → 24 */
}

/* =========================
   RADIOS
   ========================= */

.cf-radio[b-4qtll9qrpb] {
    display: flex;
    gap: 16px; /* 14 → 16 */
    align-items: center;
    height: 44px; /* 42 → 44 */
}

    .cf-radio label[b-4qtll9qrpb] {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 850;
        font-size: 16px; /* 14 → 16 */
    }

.cf-disabled[b-4qtll9qrpb] {
    opacity: .5;
}

/* =========================
   CARDS
   ========================= */

.cf-actions[b-4qtll9qrpb] {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 14px; /* 12 → 14 */
}

@media (max-width: 1100px) {
    .cf-actions[b-4qtll9qrpb] {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }
}

@media (max-width: 640px) {
    .cf-actions[b-4qtll9qrpb] {
        grid-template-columns: 1fr;
    }
}

.cf-card[b-4qtll9qrpb] {
    text-align: left;
    padding: 16px; /* 14 → 16 */
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.12);
    background: #fff;
    cursor: pointer;
    transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease;
    box-shadow: 0 10px 22px rgba(15,23,42,.06);
}

    .cf-card:hover[b-4qtll9qrpb] {
        border-color: rgba(59,130,246,.28);
        box-shadow: 0 14px 30px rgba(59,130,246,.10);
    }

    .cf-card:active[b-4qtll9qrpb] {
        transform: scale(.99);
    }

    .cf-card:disabled[b-4qtll9qrpb] {
        opacity: .55;
        cursor: not-allowed;
    }

/* cabecera card */
.cf-card-top[b-4qtll9qrpb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* pill VER */
.cf-card-pill[b-4qtll9qrpb] {
    min-width: 56px; /* +2 */
    height: 30px; /* 28 → 30 */
    padding: 0 12px;
    border-radius: 999px;
    font-weight: 950;
    font-size: 14px; /* 12 → 14 */
    color: rgba(15,23,42,.85);
    background: linear-gradient(180deg, #ffffff, #f2f4f8);
    border: 1px solid rgba(15,23,42,.14);
}

/* títulos card */
.cf-card-title[b-4qtll9qrpb] {
    font-weight: 950;
    font-size: 18px; /* 16 → 18 */
    color: #0f172a;
}

.cf-card-sub[b-4qtll9qrpb] {
    font-size: 14px; /* 12 → 14 */
    opacity: .75;
    margin-top: 6px;
    font-weight: 750;
}

/* =========================
   ERROR
   ========================= */

.cf-error[b-4qtll9qrpb] {
    padding: 12px 14px; /* +2 */
    border-radius: 12px;
    background: #ffecec;
    border: 1px solid #ffbcbc;
    color: #8a0d0d;
    font-weight: 800;
    font-size: 16px; /* NUEVO */
}

/* =========================
   SELECT SORTEOS
   ========================= */

.cf-select[b-4qtll9qrpb] {
    width: 320px;
    max-width: 100%;
}
/* _content/SistemaLoteriaDashboard/Components/Ventas/ConsultaGeneral.razor.rz.scp.css */
/* =========================
   CONSULTAS TOTALES (CG)
   ========================= */

.cg-header[b-mynz86p08s] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 14px;
}

.cg-shell[b-mynz86p08s] {
    width: 100%;
    max-width: none;
    padding: 22px 26px 30px;
    box-sizing: border-box;
}

.cg-title[b-mynz86p08s] {
    margin: 0;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: .2px;
}

/* =========================
   FILTROS
   ========================= */
.cg-filters[b-mynz86p08s] {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    padding: 16px 16px;
    border-radius: 18px;
    background: rgba(255,255,255,.80);
    border: 1px solid rgba(15,23,42,.14); /* 🔥 un poco más oscuro */
    box-shadow: 0 18px 40px rgba(15,23,42,.12);
    backdrop-filter: blur(10px);
}

.cg-field[b-mynz86p08s] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 220px;
}

.cg-label[b-mynz86p08s] {
    font-size: 14px;
    font-weight: 900;
    opacity: .78;
    letter-spacing: .2px;
}

.cg-date[b-mynz86p08s] {
    height: 46px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid rgba(15,23,42,.20); /* 🔥 más oscuro */
    background: #fff;
    outline: none;
    font-size: 16px;
    font-weight: 800;
}

    .cg-date:focus[b-mynz86p08s] {
        border-color: rgba(37,99,235,.70);
        box-shadow: 0 0 0 4px rgba(37,99,235,.16);
    }

/* =========================
   BOTÓN VER
   ========================= */
.cg-btn[b-mynz86p08s] {
    height: 46px;
    padding: 0 18px;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    font-weight: 900;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(180deg,#2563eb,#1d4ed8);
    color: #fff;
    box-shadow: 0 16px 34px rgba(37,99,235,.25);
    transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
    white-space: nowrap;
}

    .cg-btn:hover[b-mynz86p08s] {
        transform: translateY(-1px);
        box-shadow: 0 20px 44px rgba(37,99,235,.28);
    }

    .cg-btn:disabled[b-mynz86p08s] {
        opacity: .65;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.cg-btn-ico[b-mynz86p08s] {
    font-size: 18px;
    filter: drop-shadow(0 8px 14px rgba(0,0,0,.18));
}

/* =========================
   MENSAJES
   ========================= */
.cg-hint[b-mynz86p08s] {
    margin-top: 14px;
    padding: 12px;
    border-radius: 14px;
    border: 1px dashed rgba(148,163,184,.65);
    background: rgba(2,132,199,.06);
}

.cg-alert[b-mynz86p08s] {
    margin-top: 14px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(148,163,184,.45);
    background: rgba(15,23,42,.03);
}

    .cg-alert .t[b-mynz86p08s] {
        font-weight: 900;
        margin-bottom: 4px;
    }

    .cg-alert .m[b-mynz86p08s] {
        opacity: .85;
    }

.cg-alert-danger[b-mynz86p08s] {
    border-color: rgba(239,68,68,.40);
    background: rgba(239,68,68,.08);
}

.cg-alert-soft[b-mynz86p08s] {
    border-color: rgba(148,163,184,.45);
    background: rgba(2,132,199,.04);
}

/* =========================
   MODAL FULL SCREEN
   ========================= */
.cg-modal-overlay[b-mynz86p08s] {
    position: fixed;
    inset: 0;
    background: rgba(2,6,23,.55);
    backdrop-filter: blur(6px);
    z-index: 5000;
}

.cg-modal[b-mynz86p08s] {
    position: fixed;
    inset: 18px;
    border-radius: 18px;
    background: rgba(255,255,255,.98);
    border: 1px solid rgba(148,163,184,.40);
    box-shadow: 0 30px 80px rgba(2,6,23,.35);
    z-index: 5100;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cg-close[b-mynz86p08s] {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(148,163,184,.45);
    background: rgba(255,255,255,.95);
    font-size: 22px;
    cursor: pointer;
}

/* =========================
   CABECERA MODAL + CHIPS
   ========================= */
.cg-modal-head[b-mynz86p08s] {
    padding: 18px 18px 10px 18px;
    border-bottom: 1px solid rgba(148,163,184,.45);
    background: linear-gradient(180deg, rgba(59,130,246,.12), rgba(15,23,42,.02));
}

.cg-modal-title[b-mynz86p08s] {
    font-size: 18px;
    font-weight: 950;
}

.cg-modal-sub[b-mynz86p08s] {
    margin-top: 4px;
    opacity: .85;
    font-weight: 800;
}

.cg-chips[b-mynz86p08s] {
    margin-top: 12px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.cg-chip[b-mynz86p08s] {
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(148,163,184,.45); /* 🔥 bordes más visibles */
    background: rgba(255,255,255,.92);
    box-shadow: 0 10px 25px rgba(15,23,42,.08);
    min-width: 150px;
}

    .cg-chip .k[b-mynz86p08s] {
        font-size: 12px;
        opacity: .80;
        font-weight: 900;
    }

    .cg-chip .v[b-mynz86p08s] {
        margin-top: 2px;
        font-size: 16px;
        font-weight: 950;
    }

/* chips suaves (Ahorro / Retiro / Dep) */
.cg-chip-soft[b-mynz86p08s] {
    background: rgba(2,132,199,.06);
}

/* chip fuerte (Saldo final) */
.cg-chip-strong[b-mynz86p08s] {
    background: linear-gradient(180deg, rgba(16,185,129,.18), rgba(15,23,42,.02));
    border-color: rgba(16,185,129,.35);
}

/* ✅ COLORES DE VALORES EN CHIPS (ARRIBA) */
.cg-chip-venta .v[b-mynz86p08s] {
    color: #1e40af;
}
/* azul */
.cg-chip-comi .v[b-mynz86p08s] {
    color: #0284c7;
}
/* celeste */
.cg-chip-prem .v[b-mynz86p08s] {
    color: #dc2626;
}
/* rojo */
.cg-chip-ahorro .v[b-mynz86p08s] {
    color: #7c3aed;
}
/* morado agradable */
.cg-chip-retiro .v[b-mynz86p08s] {
    color: #b45309;
}
/* ámbar/café */
.cg-chip-dep .v[b-mynz86p08s] {
    color: #0f766e;
}
/* teal */

/* ✅ SALDO FINAL ARRIBA (chip) - OSCURO */
.cg-chip-strong .v.saldo-pos[b-mynz86p08s] {
    color: #065f46;
}

.cg-chip-strong .v.saldo-neg[b-mynz86p08s] {
    color: #991b1b;
}

/* =========================
   TABLA
   ========================= */
.cg-table-wrap[b-mynz86p08s] {
    padding: 14px 18px 18px 18px;
    overflow: auto;
    height: 100%;
    border-top: 1px solid rgba(148,163,184,.45); /* 🔥 separador visible */
}

.cg-table[b-mynz86p08s] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 1100px;
    margin: 0;
}

    .cg-table thead th[b-mynz86p08s] {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #0f172a;
        color: #fff;
        font-weight: 950;
        font-size: 17px;
        padding: 15px 12px;
        border-bottom: 2px solid rgba(255,255,255,.14); /* 🔥 línea más marcada */
    }

    .cg-table th.num[b-mynz86p08s],
    .cg-table td.num[b-mynz86p08s] {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    .cg-table tbody td[b-mynz86p08s] {
        padding: 14px 12px;
        font-size: 18px;
        font-weight: 850;
        border-bottom: 1px solid rgba(148,163,184,.55); /* 🔥 bordes más oscuros */
        background: rgba(255,255,255,.78);
    }

    .cg-table tbody tr:nth-child(even) td[b-mynz86p08s] {
        background: rgba(248,250,252,.95);
    }

    .cg-table tbody tr:nth-child(odd) td[b-mynz86p08s] {
        background: rgba(37,99,235,.10);
    }

    .cg-table tbody tr:hover td[b-mynz86p08s] {
        background: rgba(59,130,246,.22) !important;
    }

    /* columnas de valores (como en consulta sorteos) */
    .cg-table td.venta[b-mynz86p08s] {
        color: #1e40af;
        font-weight: 950;
    }

    .cg-table td.comi[b-mynz86p08s] {
        color: #0284c7;
        font-weight: 950;
    }

    .cg-table td.prem[b-mynz86p08s] {
        color: #dc2626;
        font-weight: 950;
    }

    .cg-table td.soft[b-mynz86p08s] {
        color: #475569;
        opacity: .90;
        font-weight: 850;
    }
    /* gris bonito */

    /* =========================
   ✅ SALDOS
   ========================= */

    /* ✅ Saldo por día = CLARO
   - cubre ambos casos: (pos/neg) y (saldo-pos/saldo-neg)
*/
    .cg-table td.saldo.pos[b-mynz86p08s],
    .cg-table td.saldo.saldo-pos[b-mynz86p08s] {
        color: rgba(5,150,105,1); /* verde claro */
        font-weight: 950;
    }

    .cg-table td.saldo.neg[b-mynz86p08s],
    .cg-table td.saldo.saldo-neg[b-mynz86p08s] {
        color: rgba(220,38,38,1); /* rojo claro */
        font-weight: 950;
    }

    /* =========================
   FOOTER (TOTAL GENERAL)
   ========================= */
    .cg-table tfoot td[b-mynz86p08s] {
        padding: 14px 12px;
        font-weight: 950;
        font-size: 18px;
        background: linear-gradient(180deg, rgba(15,23,42,.22), rgba(15,23,42,.14));
        border-top: 2px solid rgba(15,23,42,.26);
    }

    .cg-table .total-label[b-mynz86p08s] {
        text-transform: uppercase;
        letter-spacing: .5px;
    }

    /* ✅ Saldo final del TOTAL GENERAL = OSCURO */
    .cg-table tfoot .saldo-pos[b-mynz86p08s] {
        color: #065f46;
        font-weight: 950;
    }

    .cg-table tfoot .saldo-neg[b-mynz86p08s] {
        color: #991b1b;
        font-weight: 950;
    }

.cg-cancelado[b-mynz86p08s] {
    margin-top: 4px;
    color: #dc2626;
    font-weight: 800;
    font-size: 12px;
    line-height: 1;
}

.prestamo-tomado .cg-cancelado[b-mynz86p08s] {
    white-space: nowrap;
}
/* _content/SistemaLoteriaDashboard/Components/Ventas/ConsultaSorteos.razor.rz.scp.css */
/* ======= LAYOUT FULL WIDTH + ZOOM FRIENDLY ======= */
.cs-shell[b-rhkq3vc24a] {
    width: 100%;
    max-width: none;
    padding: 22px 26px 30px;
    box-sizing: border-box;
}

/* ======= HEADER ======= */
.cs-header[b-rhkq3vc24a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.cs-title[b-rhkq3vc24a] {
    margin: 0;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: .2px;
}

.cs-subtitle[b-rhkq3vc24a] {
    display: none;
}

/* ======= FILTERS ======= */
.cs-filters[b-rhkq3vc24a] {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    padding: 16px 16px;
    border-radius: 18px;
    background: rgba(255,255,255,.80);
    border: 1px solid rgba(15, 23, 42, .12);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .12);
    backdrop-filter: blur(10px);
}

.cs-field[b-rhkq3vc24a] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 220px;
}

.cs-label[b-rhkq3vc24a] {
    font-size: 14px;
    font-weight: 900;
    opacity: .78;
    letter-spacing: .2px;
}

.cs-select[b-rhkq3vc24a], .cs-date[b-rhkq3vc24a] {
    height: 46px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, .18);
    background: #fff;
    outline: none;
    font-size: 16px;
    font-weight: 800;
}

    .cs-select:focus[b-rhkq3vc24a], .cs-date:focus[b-rhkq3vc24a] {
        border-color: rgba(37, 99, 235, .70);
        box-shadow: 0 0 0 4px rgba(37,99,235,.16);
    }

/* ======= BUTTONS ======= */
.cs-btn[b-rhkq3vc24a] {
    height: 46px;
    padding: 0 18px;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    font-weight: 900;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(180deg, #2563eb, #1d4ed8);
    color: #fff;
    box-shadow: 0 16px 34px rgba(37,99,235,.25);
    transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
    white-space: nowrap;
}

    .cs-btn:hover[b-rhkq3vc24a] {
        transform: translateY(-1px);
        box-shadow: 0 20px 44px rgba(37,99,235,.28);
    }

    .cs-btn:disabled[b-rhkq3vc24a] {
        opacity: .65;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.cs-btn-icon[b-rhkq3vc24a] {
    font-size: 18px;
    filter: drop-shadow(0 8px 14px rgba(0,0,0,.18));
}

/* Botón alternativo (Históricos) */
.cs-btn-alt[b-rhkq3vc24a] {
    background: linear-gradient(180deg, #0f172a, #111827);
    box-shadow: 0 16px 34px rgba(2, 6, 23, .22);
}

    .cs-btn-alt:hover[b-rhkq3vc24a] {
        box-shadow: 0 20px 44px rgba(2, 6, 23, .28);
    }

/* ======= INFO STATES ======= */
.cs-hint[b-rhkq3vc24a] {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px dashed rgba(15,23,42,.22);
    background: rgba(255,255,255,.62);
    font-size: 15px;
    font-weight: 700;
}

.cs-alert[b-rhkq3vc24a] {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(15,23,42,.12);
    background: rgba(255,255,255,.75);
}

.cs-alert-title[b-rhkq3vc24a] {
    font-weight: 900;
    margin-bottom: 4px;
    font-size: 16px;
}

.cs-alert-msg[b-rhkq3vc24a] {
    font-size: 14px;
    opacity: .88;
    font-weight: 700;
}

.cs-alert-danger[b-rhkq3vc24a] {
    border-color: rgba(239,68,68,.26);
    background: rgba(239,68,68,.08);
}

.cs-alert-soft[b-rhkq3vc24a] {
    background: rgba(59,130,246,.07);
    border-color: rgba(59,130,246,.20);
}

/* ======= CARD ======= */
.cs-card[b-rhkq3vc24a] {
    margin-top: 16px;
    border-radius: 20px;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(15, 23, 42, .10);
    box-shadow: 0 22px 52px rgba(15, 23, 42, .14);
    overflow: hidden;
}

.cs-card-top[b-rhkq3vc24a] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 16px 12px;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
    background: linear-gradient(180deg, rgba(248,250,252,.98), rgba(255,255,255,.76));
}

.cs-card-title[b-rhkq3vc24a] {
    font-weight: 950;
    font-size: 18px;
}

.cs-card-sub[b-rhkq3vc24a] {
    margin-top: 4px;
    font-size: 14px;
    opacity: .80;
    font-weight: 800;
}

/* Totals chips */
.cs-totals[b-rhkq3vc24a] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.cs-total-chip[b-rhkq3vc24a] {
    min-width: 150px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255,255,255,.90);
    border: 1px solid rgba(15,23,42,.10);
    box-shadow: 0 14px 28px rgba(15,23,42,.10);
    text-align: right;
}

    .cs-total-chip .k[b-rhkq3vc24a] {
        font-size: 12px;
        font-weight: 950;
        opacity: .65;
        letter-spacing: .2px;
    }

    .cs-total-chip .v[b-rhkq3vc24a] {
        margin-top: 2px;
        font-size: 18px;
        font-weight: 950;
        letter-spacing: .2px;
    }

.cs-total-chip-strong[b-rhkq3vc24a] {
    border-color: rgba(34,197,94,.22);
    background: rgba(34,197,94,.10);
}

/* ======= TABLE ======= */
.cs-table-wrap[b-rhkq3vc24a] {
    width: 100%;
    overflow: auto;
    box-sizing: border-box;
    padding: 0;
    scrollbar-gutter: stable both-edges;
}

.cs-table[b-rhkq3vc24a] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 980px;
    margin: 0;
}

    /* Cabecera */
    .cs-table thead th[b-rhkq3vc24a] {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #0f172a;
        color: #fff;
        font-weight: 950;
        font-size: 16px;
        padding: 14px 12px;
        border-bottom: 1px solid rgba(255,255,255,.12);
    }

        .cs-table thead th:first-child[b-rhkq3vc24a] {
            border-top-left-radius: 14px;
        }

        .cs-table thead th:last-child[b-rhkq3vc24a] {
            border-top-right-radius: 14px;
        }

    /* ✅ FILAS PRINCIPALES: más marcadas (fuerte + claro) */
    .cs-table tbody td[b-rhkq3vc24a] {
        padding: 14px 12px;
        font-size: 17px;
        font-weight: 800;
        border-bottom: 1px solid rgba(15,23,42,.14); /* ✅ más oscuro */
        background: transparent;
    }

    .cs-table tbody tr:nth-child(odd) td[b-rhkq3vc24a] {
        background: rgba(37, 99, 235, .16); /* ✅ más fuerte */
    }

    .cs-table tbody tr:nth-child(even) td[b-rhkq3vc24a] {
        background: rgba(37, 99, 235, .09); /* ✅ más claro */
    }

    /* Hover visible */
    .cs-table tbody tr:hover td[b-rhkq3vc24a] {
        background: rgba(59,130,246,.22) !important;
    }

    /* Footer */
    .cs-table tfoot td[b-rhkq3vc24a] {
        padding: 14px 12px;
        font-weight: 950;
        font-size: 17px;
        background: rgba(15, 23, 42, .16);
        border-top: 2px solid rgba(15, 23, 42, .22);
    }

.name .cs-name[b-rhkq3vc24a] {
    font-weight: 950;
    font-size: 15px;
}

.cs-mini[b-rhkq3vc24a] {
    display: none;
}

.num[b-rhkq3vc24a] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 950;
}

.venta[b-rhkq3vc24a] {
    opacity: .98;
}

.comi[b-rhkq3vc24a] {
    opacity: .95;
}

.prem[b-rhkq3vc24a] {
    opacity: .95;
}

.saldo[b-rhkq3vc24a] {
    color: #047857;
}

.win[b-rhkq3vc24a] {
    text-align: center;
    width: 170px;
}

.act[b-rhkq3vc24a] {
    text-align: center;
    width: 90px;
}

/* Ganador pill */
.cs-pill[b-rhkq3vc24a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* ✅ para bola al lado */
    min-width: 70px;
    height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 18px;
    letter-spacing: .8px;
    color: #7a0f14;
    background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.9), rgba(255,255,255,0) 55%), linear-gradient(180deg, #ffd6d6, #ff9a9a);
    border: 1px solid rgba(122,15,20,.25);
    box-shadow: 0 14px 26px rgba(220,38,38,.25), 0 8px 16px rgba(15,23,42,.12);
    position: relative;
    overflow: hidden;
    animation: csPulse-b-rhkq3vc24a 1.8s ease-in-out infinite;
}

    .cs-pill[b-rhkq3vc24a]::after {
        content: "";
        position: absolute;
        top: -40%;
        left: -60%;
        width: 45%;
        height: 180%;
        transform: rotate(18deg);
        background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.45), rgba(255,255,255,0));
        animation: csShine-b-rhkq3vc24a 3s ease-in-out infinite;
        pointer-events: none;
    }

@keyframes csPulse-b-rhkq3vc24a {
    0%,100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-1px) scale(1.04);
    }
}

@keyframes csShine-b-rhkq3vc24a {
    0% {
        left: -55%;
        opacity: 0;
    }

    15% {
        opacity: .85;
    }

    55% {
        opacity: .35;
    }

    100% {
        left: 120%;
        opacity: 0;
    }
}

.cs-muted[b-rhkq3vc24a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px dashed rgba(15,23,42,.25);
    background: rgba(15,23,42,.04);
    opacity: .7;
    font-weight: 900;
}

/* Icon button */
.cs-icon[b-rhkq3vc24a] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(15,23,42,.14);
    background: rgba(255,255,255,.90);
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
    font-size: 18px;
}

    .cs-icon:hover[b-rhkq3vc24a] {
        transform: translateY(-1px);
        box-shadow: 0 14px 28px rgba(15,23,42,.14);
    }

.total-label[b-rhkq3vc24a] {
    font-weight: 950;
}

/* ===========================
   ✅ BOLITA ROJA / BLANCA / MIX
   =========================== */
.cs-bola[b-rhkq3vc24a] {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    display: inline-block;
    flex: 0 0 16px;
    border: 1px solid rgba(15,23,42,.25);
    box-shadow: 0 10px 18px rgba(15,23,42,.18);
    position: relative;
    transform: translateZ(0);
    animation: bolaFloat-b-rhkq3vc24a 1.2s ease-in-out infinite;
}

    .cs-bola[b-rhkq3vc24a]::after {
        content: "";
        position: absolute;
        inset: 2px auto auto 3px;
        width: 6px;
        height: 6px;
        border-radius: 999px;
        background: rgba(255,255,255,.85);
        filter: blur(.2px);
    }

.cs-bola-roja[b-rhkq3vc24a] {
    background: radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,.15) 30%), linear-gradient(180deg, #ff4d4d, #b91c1c);
    border-color: rgba(185, 28, 28, .45);
}

.cs-bola-blanca[b-rhkq3vc24a] {
    background: radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,.25) 30%), linear-gradient(180deg, #ffffff, #e5e7eb);
    border-color: rgba(148,163,184,.55);
}

.cs-bola-mix[b-rhkq3vc24a] {
    background: linear-gradient(90deg, #b91c1c 0 50%, #e5e7eb 50% 100%);
    border-color: rgba(15,23,42,.28);
}

@keyframes bolaFloat-b-rhkq3vc24a {
    0%,100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-2px) scale(1.06);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cs-pill[b-rhkq3vc24a],
    .cs-bola[b-rhkq3vc24a] {
        animation: none !important;
    }
}

/* ================================
   GANADOR (ARRIBA) - SOLO MODAL LISTA
   ================================ */
#modalLista .cs-win-pill[b-rhkq3vc24a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* ✅ para la bola */
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: 950;
    letter-spacing: .5px;
    line-height: 1;
    transform: translateZ(0);
}

    #modalLista .cs-win-pill.cs-win-soft-red[b-rhkq3vc24a] {
        font-size: 1.15rem;
        color: #8b1b1b;
        background: linear-gradient(180deg, #ffe9e9, #ffd0d0);
        border: 1px solid rgba(183, 28, 28, 0.28);
        box-shadow: 0 10px 22px rgba(183, 28, 28, 0.14);
        animation: csWinGlow-b-rhkq3vc24a 1.2s ease-in-out infinite alternate;
    }

@keyframes csWinGlow-b-rhkq3vc24a {
    from {
        transform: scale(1);
        filter: saturate(1);
    }

    to {
        transform: scale(1.04);
        filter: saturate(1.15);
    }
}

@media (prefers-reduced-motion: reduce) {
    #modalLista .cs-win-pill.cs-win-soft-red[b-rhkq3vc24a] {
        animation: none !important;
    }
}

/* ==========================================
   GANADOR EN LISTA (00..99) - SOLO MODAL
   ========================================== */
#modalLista .celda-num.ganador[b-rhkq3vc24a] {
    background: linear-gradient(180deg, #fff0f0, #ffdede);
    border: 1px solid rgba(183,28,28,.35);
    color: #8b1b1b;
    font-weight: 950;
    font-size: 15px;
    box-shadow: 0 10px 22px rgba(183, 28, 28, 0.12);
    animation: csCellPulse-b-rhkq3vc24a 1.1s ease-in-out infinite alternate;
}

#modalLista .celda-monto.ganador-monto[b-rhkq3vc24a] {
    background: linear-gradient(180deg, #fff7e7, #ffe0a8);
    border: 1px solid rgba(198, 130, 0, 0.35);
    color: #7a3c00;
    font-weight: 950;
    font-size: 14px;
    box-shadow: 0 10px 22px rgba(198, 130, 0, 0.12);
    animation: csCellPulse-b-rhkq3vc24a 1.1s ease-in-out infinite alternate;
}

@keyframes csCellPulse-b-rhkq3vc24a {
    from {
        transform: scale(1);
        filter: brightness(1);
    }

    to {
        transform: scale(1.05);
        filter: brightness(1.05);
    }
}

@media (prefers-reduced-motion: reduce) {
    #modalLista .celda-num.ganador[b-rhkq3vc24a],
    #modalLista .celda-monto.ganador-monto[b-rhkq3vc24a] {
        animation: none !important;
    }
}

/* ===========================
   PARLEY EN MODAL
   =========================== */
.lista-unica-parley[b-rhkq3vc24a] {
    width: fit-content;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 auto;
}

    .lista-unica-parley .fila-cabecera.parley[b-rhkq3vc24a],
    .lista-unica-parley .fila-numeros.parley[b-rhkq3vc24a] {
        display: grid;
        grid-template-columns: repeat(5, 90px 95px);
        column-gap: 4px;
        row-gap: 4px;
        justify-content: center;
    }

    .lista-unica-parley .celda-num.parley[b-rhkq3vc24a] {
        font-size: 13px;
        font-weight: 900;
    }

    .lista-unica-parley .celda-num.ganador[b-rhkq3vc24a],
    .lista-unica-parley .celda-monto.ganador-monto[b-rhkq3vc24a] {
        animation: winnerPulse-b-rhkq3vc24a 1.2s ease-in-out infinite;
        border-color: rgba(220, 38, 38, .45);
        box-shadow: 0 10px 24px rgba(220, 38, 38, .18);
    }

@keyframes winnerPulse-b-rhkq3vc24a {
    0% {
        transform: translateY(0) scale(1);
        filter: saturate(1);
    }

    50% {
        transform: translateY(-1px) scale(1.03);
        filter: saturate(1.05);
    }

    100% {
        transform: translateY(0) scale(1);
        filter: saturate(1);
    }
}

/* ===========================
   Z-INDEX: MODALES
   =========================== */

/* overlay histórico */
.modal-overlay-hist[b-rhkq3vc24a] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 2200;
}

/* overlay lista (debe ir encima del histórico) */
.modal-overlay[b-rhkq3vc24a] {
    z-index: 2300 !important;
}

/* modal lista encima */
.modal-lista[b-rhkq3vc24a], #modalLista[b-rhkq3vc24a] {
    z-index: 2310 !important;
}

/* ===========================
   MODAL HISTÓRICOS (PEQUEÑO)
   =========================== */
.modal-hist[b-rhkq3vc24a] {
    position: fixed;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    width: min(680px, calc(100vw - 28px));
    max-width: 680px;
    background: rgba(255,255,255,.96);
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(15,23,42,.40);
    border: 1px solid rgba(148,163,184,.35);
    z-index: 2210;
    padding: 22px 24px 20px;
    backdrop-filter: blur(10px);
}

.hist-title .t1[b-rhkq3vc24a] {
    font-size: 26px;
    font-weight: 950;
}

.hist-title .t2[b-rhkq3vc24a] {
    margin-top: 4px;
    color: #64748b;
    font-size: 15px;
    font-weight: 800;
}

.hist-grid[b-rhkq3vc24a] {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 14px;
    align-items: end;
}

.hist-field label[b-rhkq3vc24a] {
    display: block;
    font-size: 13px;
    color: #475569;
    margin-bottom: 6px;
    font-weight: 800;
}

.hist-field input[b-rhkq3vc24a] {
    height: 52px;
    border-radius: 14px;
    font-size: 18px;
    font-weight: 800;
}

.hist-field select[b-rhkq3vc24a] {
    width: 100%;
    height: 48px;
    border-radius: 14px;
    border: 1px solid rgba(148,163,184,.55);
    padding: 0 12px;
    font-size: 17px;
    font-weight: 800;
    outline: none;
    background: rgba(255,255,255,.92);
}

    .hist-field input:focus[b-rhkq3vc24a],
    .hist-field select:focus[b-rhkq3vc24a] {
        border-color: rgba(37, 99, 235, .55);
        box-shadow: 0 0 0 4px rgba(37,99,235,.14);
    }

.hist-actions[b-rhkq3vc24a] {
    display: flex;
    justify-content: flex-end;
}

.modal-hist .hist-actions .cs-btn[b-rhkq3vc24a] {
    height: 48px;
    border-radius: 14px;
    font-size: 17px;
    padding: 0 22px;
}

/* ===== Barra título lista: izquierda + derecha ===== */
.titulo-bar[b-rhkq3vc24a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

    .titulo-bar .der[b-rhkq3vc24a] {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-end;
        align-items: center;
    }

    .titulo-bar .tag[b-rhkq3vc24a] {
        min-height: 34px;
        padding: 6px 12px;
        border-radius: 999px;
        background: linear-gradient(180deg, #f8fafc, #e2e8f0);
        border: 1px solid rgba(148,163,184,.45);
        font-size: 14px;
        font-weight: 900;
        color: #d48a00;
        box-shadow: 0 8px 18px rgba(15,23,42,.08);
    }

        .titulo-bar .tag b[b-rhkq3vc24a] {
            font-size: 16px;
            font-weight: 1000;
        }

    .titulo-bar .tag-neto[b-rhkq3vc24a] {
        background: linear-gradient(180deg, #ecfdf5, #d1fae5);
        border-color: rgba(16,185,129,.35);
    }
/* ===========================
   MODAL RESUMEN HISTÓRICO (FULL SCREEN)
   =========================== */
.modal-hist.modal-hist-wide[b-rhkq3vc24a] {
    inset: 12px !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden;
    border-radius: 18px;
    padding: 18px 18px 14px;
}

    /* tabla ocupa el espacio y NO se corre */
    .modal-hist.modal-hist-wide .cs-table-wrap[b-rhkq3vc24a] {
        height: calc(100vh - 170px) !important;
        max-height: none !important;
        overflow: auto !important;
        border-radius: 14px;
        border: 1px solid rgba(148,163,184,.28);
        background: rgba(255,255,255,.72);
        box-shadow: inset 0 0 0 1px rgba(15,23,42,.03);
        padding: 0 !important;
        scrollbar-gutter: stable both-edges;
    }

        /* scrollbar moderno */
        .modal-hist.modal-hist-wide .cs-table-wrap[b-rhkq3vc24a]::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }

        .modal-hist.modal-hist-wide .cs-table-wrap[b-rhkq3vc24a]::-webkit-scrollbar-thumb {
            background: rgba(15,23,42,.22);
            border-radius: 999px;
            border: 2px solid rgba(255,255,255,.70);
        }

        .modal-hist.modal-hist-wide .cs-table-wrap[b-rhkq3vc24a]::-webkit-scrollbar-track {
            background: rgba(15,23,42,.06);
            border-radius: 999px;
        }

    /* tabla premium */
    .modal-hist.modal-hist-wide .cs-table[b-rhkq3vc24a] {
        min-width: 980px;
        border-spacing: 0;
        margin: 0;
    }

        /* cabecera */
        .modal-hist.modal-hist-wide .cs-table thead th[b-rhkq3vc24a] {
            background: linear-gradient(180deg, #0f172a, #111827);
            font-size: 17px;
            padding: 15px 12px;
            letter-spacing: .2px;
            box-shadow: 0 8px 20px rgba(0,0,0,.18);
        }

        /* texto filas */
        .modal-hist.modal-hist-wide .cs-table tbody td[b-rhkq3vc24a] {
            font-size: 18px;
            padding: 14px 12px;
        }

    /* nombre sorteo */
    .modal-hist.modal-hist-wide .name .cs-name[b-rhkq3vc24a] {
        font-size: 16px;
    }

/* Saldo por fila (normal) */
.saldo-pos[b-rhkq3vc24a] {
    color: #047857;
    font-weight: 950;
}

.saldo-neg[b-rhkq3vc24a] {
    color: #dc2626;
    font-weight: 950;
}

/* Saldo del TOTAL (más oscuro) */
.cs-table tfoot .saldo-pos[b-rhkq3vc24a] {
    color: #065f46;
}

.cs-table tfoot .saldo-neg[b-rhkq3vc24a] {
    color: #991b1b;
}

/* ===== Botón cerrar ===== */
.modal-close[b-rhkq3vc24a] {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    font-size: 22px;
    font-weight: 900;
    cursor: pointer;
    color: #ef4444;
}

    .modal-close:hover[b-rhkq3vc24a] {
        filter: brightness(.9);
    }

/* ✅ FORZAR FULL SCREEN SOLO PARA "Resumen histórico" */
.modal-resumen-hist[b-rhkq3vc24a] {
    position: fixed !important;
    inset: 12px !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    overflow: hidden !important;
    border-radius: 18px !important;
}

    /* ✅ La tabla usa TODO el alto */
    .modal-resumen-hist .cs-table-wrap[b-rhkq3vc24a] {
        height: calc(100vh - 170px) !important;
        max-height: none !important;
        overflow: auto !important;
    }

/* ✅ HISTÓRICO: 2 TONOS alternados */
.modal-hist-wide .cs-table tbody td[b-rhkq3vc24a] {
    background: transparent !important;
}

.modal-hist-wide .cs-table tbody tr:nth-child(odd) td[b-rhkq3vc24a] {
    background: rgba(37, 99, 235, .18) !important;
}

.modal-hist-wide .cs-table tbody tr:nth-child(even) td[b-rhkq3vc24a] {
    background: rgba(37, 99, 235, .11) !important;
}

.modal-hist-wide .cs-table tbody tr:hover td[b-rhkq3vc24a] {
    background: rgba(59, 130, 246, .22) !important;
}

.hist-btn[b-rhkq3vc24a] {
    height: 52px;
    border-radius: 14px;
    font-size: 18px;
    padding: 0 24px;
    min-width: 110px;
}

.cs-sub[b-rhkq3vc24a] {
    font-size: .82rem;
    opacity: .75;
    margin-top: 2px;
    white-space: nowrap;
}

/* =========================
   TIEMPOS (Modal) - Reventado
   (ENCERRADO SOLO EN #modalLista para evitar duplicados)
========================= */

/* ===== Medidas exactas de la grilla (deben ser iguales en TODO) ===== */
#modalLista[b-rhkq3vc24a] {
    --w-num: 90px;
    --w-monto: 95px;
    --w-r: 95px;
    --gap-col: 4px;
}

#modalLista .fila-cabecera[b-rhkq3vc24a],
#modalLista .fila-numeros[b-rhkq3vc24a] {
    display: grid;
    grid-template-columns: repeat(5, 90px 95px);
    column-gap: 4px;
    row-gap: 4px;
    justify-content: center;
    align-items: center;
}

    /* ===== Reventado: MISMO ANCHO para cabecera + filas + totales ===== */
    #modalLista .fila-cabecera.cabecera-reventado[b-rhkq3vc24a],
    #modalLista .fila-numeros.fila-reventado[b-rhkq3vc24a],
    #modalLista .fila-totales-f.totales-reventado[b-rhkq3vc24a] {
        grid-template-columns: repeat(5, var(--w-num) var(--w-monto) var(--w-r)) !important;
        column-gap: var(--gap-col) !important;
        width: max-content !important;
        margin-left: auto !important;
        margin-right: auto !important;
        justify-content: center !important;
    }

    /* headers */
    #modalLista .fila-cabecera .h-num[b-rhkq3vc24a],
    #modalLista .fila-cabecera .h-monto[b-rhkq3vc24a],
    #modalLista .fila-cabecera .h-r[b-rhkq3vc24a] {
        height: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 900;
        font-size: 13px;
        color: #fff;
        border-radius: 10px;
    }

    #modalLista .fila-cabecera .h-num[b-rhkq3vc24a] {
        background: linear-gradient(180deg,#2563eb,#1d4ed8);
    }

    #modalLista .fila-cabecera .h-monto[b-rhkq3vc24a] {
        background: linear-gradient(180deg,#16a34a,#15803d);
    }

    #modalLista .fila-cabecera .h-r[b-rhkq3vc24a] {
        background: linear-gradient(180deg,#ef4444,#dc2626);
    }

/* celdas */
#modalLista .celda-num[b-rhkq3vc24a] {
    height: 26px;
    border-radius: 10px;
    border: 1px solid rgba(37,99,235,.22);
    background: linear-gradient(180deg, rgba(37,99,235,.14), rgba(37,99,235,.08));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 950;
    color: #1d4ed8;
}

#modalLista .celda-monto[b-rhkq3vc24a] {
    height: 26px;
    border-radius: 10px;
    border: 1px solid rgba(22,163,74,.22);
    background: linear-gradient(180deg, rgba(22,163,74,.14), rgba(22,163,74,.08));
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
    font-size: 13px;
    font-weight: 950;
    font-variant-numeric: tabular-nums;
    color: #15803d;
}

#modalLista .celda-monto-r[b-rhkq3vc24a] {
    height: 26px;
    border-radius: 10px;
    border: 1px solid rgba(220,38,38,.22);
    background: linear-gradient(180deg, rgba(239,68,68,.16), rgba(239,68,68,.08));
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
    font-size: 13px;
    font-weight: 950;
    font-variant-numeric: tabular-nums;
    color: #b91c1c;
}

/* ganador (en la grilla) */
#modalLista .celda-num.ganador[b-rhkq3vc24a] {
    background: linear-gradient(180deg,#fff0f0,#ffdede);
    border: 1px solid rgba(183,28,28,.35);
    color: #8b1b1b;
    font-weight: 950;
}

#modalLista .celda-monto.ganador-monto[b-rhkq3vc24a] {
    background: linear-gradient(180deg,#fff7e7,#ffe0a8);
    border: 1px solid rgba(198,130,0,.35);
    color: #7a3c00;
    font-weight: 950;
}

#modalLista .celda-monto-r.ganador-monto-r[b-rhkq3vc24a] {
    background: #ffd0d0;
    border-color: #e35d5b;
    color: #7a0000;
}

/* =========================
   Totales Normal
========================= */
#modalLista .fila-totales-f[b-rhkq3vc24a] {
    width: fit-content;
    margin: 6px auto 0;
    display: grid;
    grid-template-columns: repeat(5, 90px 95px);
    column-gap: 4px;
    row-gap: 6px;
    justify-content: center;
    align-items: center;
}

    #modalLista .fila-totales-f .label[b-rhkq3vc24a] {
        font-size: 13px;
        font-weight: 950;
        color: #1d4ed8;
    }

    #modalLista .fila-totales-f .valor[b-rhkq3vc24a] {
        margin-top: 4px;
        font-size: 16px;
        font-weight: 1000;
        color: #0b1220;
        font-variant-numeric: tabular-nums;
    }

    /* =========================
   Totales Reventado (ALINEADO A COLUMNAS)
========================= */
    #modalLista .fila-totales-f.totales-reventado[b-rhkq3vc24a] {
        display: grid;
        grid-template-columns: repeat(5, 90px 95px 95px) !important;
        /* ✅ igual que la grilla de arriba */
        column-gap: 4px;
        row-gap: 6px;
        align-items: center;
        /* ✅ CLAVE: que el ancho sea el mismo “tipo” de ancho que la grilla */
        width: max-content;
        margin: 10px auto 0;
        /* ✅ igual que .fila-numeros (centrado real) */
        justify-content: center;
    }

        /* label debajo de N° */
        #modalLista .fila-totales-f.totales-reventado .t-label[b-rhkq3vc24a] {
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            border: 1px dashed rgba(15,23,42,.25);
            background: rgba(226,232,240,.55);
            font-size: 13px;
            font-weight: 950;
            color: #1d4ed8;
        }

        /* valor base debajo de Monto */
        #modalLista .fila-totales-f.totales-reventado .t-base[b-rhkq3vc24a] {
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            border: 1px solid rgba(22,163,74,.22);
            background: linear-gradient(180deg, rgba(22,163,74,.14), rgba(22,163,74,.08));
            font-size: 16px;
            font-weight: 1000;
            color: #0b1220;
            font-variant-numeric: tabular-nums;
        }

        /* valor rev debajo de R */
        #modalLista .fila-totales-f.totales-reventado .t-rev[b-rhkq3vc24a] {
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            border: 1px solid rgba(220,38,38,.22);
            background: linear-gradient(180deg, rgba(239,68,68,.16), rgba(239,68,68,.08));
            font-size: 16px;
            font-weight: 1000;
            color: #0b1220;
            font-variant-numeric: tabular-nums;
        }

    /* ==========================================
   FIX DEFINITIVO: CENTRADO REAL DEL MODAL LISTA
   (evita corrimientos por padding/margins heredados)
========================================== */

    /* 1) Asegura que el modal esté realmente centrado */
    #modalLista.modal-lista[b-rhkq3vc24a] {
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        right: auto !important;
        bottom: auto !important;
    }

    /* 2) Quita cualquier empuje interno (padding/margin) que lo corra */
    #modalLista #listaCanvas[b-rhkq3vc24a],
    #modalLista .modal-grilla-lista[b-rhkq3vc24a] {
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* 3) ESTE ES EL PUNTO CLAVE:
      centramos TODO el contenido del modal usando layout del contenedor */
    #modalLista #contentLista[b-rhkq3vc24a] {
        width: 100% !important;
        max-width: 1280px !important;
        margin: 0 auto !important;
        padding: 0 10px 10px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* 4) La grilla (cabecera + filas + totales) se mantiene en su ancho real */
    #modalLista .fila-cabecera[b-rhkq3vc24a],
    #modalLista .fila-numeros[b-rhkq3vc24a],
    #modalLista .fila-totales-f[b-rhkq3vc24a] {
        width: fit-content !important;
        margin: 0 auto !important; /* ✅ centrado dentro del flex */
    }

    /* ==========================================
   FIX CENTRADO PROFESIONAL MODAL LISTA
   Normal + Reventado + Parley
========================================== */

    /* Bloque superior completo */
    #modalLista .fila-titulo[b-rhkq3vc24a] {
        width: 100%;
        max-width: 1280px;
        margin: 0 auto 10px auto !important;
        display: flex;
        justify-content: center;
    }

    /* Caja visual del título */
    #modalLista .titulo-sorteo-modal[b-rhkq3vc24a] {
        width: 100%;
        border-radius: 18px;
        background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(241,245,249,.92));
        border: 1px solid rgba(148,163,184,.35);
        box-shadow: 0 18px 34px rgba(15,23,42,.10);
        padding: 14px 16px;
        box-sizing: border-box;
    }

    /* Barra interna del título */
    #modalLista .titulo-bar[b-rhkq3vc24a] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        flex-wrap: wrap;
    }

        /* Texto izquierdo */
        #modalLista .titulo-bar .izq[b-rhkq3vc24a] {
            font-size: 19px;
            font-weight: 950;
            color: #c77d00;
            display: flex;
            align-items: center;
            gap: 6px;
        }

            #modalLista .titulo-bar .izq strong[b-rhkq3vc24a] {
                color: #c77d00;
                font-size: 20px;
                font-weight: 1000;
            }

        /* Chips derechos */
        #modalLista .titulo-bar .der[b-rhkq3vc24a] {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: flex-end;
            align-items: center;
        }

        #modalLista .titulo-bar .tag[b-rhkq3vc24a] {
            min-height: 34px;
            padding: 6px 12px;
            border-radius: 999px;
            background: linear-gradient(180deg, #f8fafc, #e2e8f0);
            border: 1px solid rgba(148,163,184,.45);
            font-size: 14px;
            font-weight: 900;
            color: #d48a00;
            box-shadow: 0 8px 18px rgba(15,23,42,.08);
        }

            #modalLista .titulo-bar .tag b[b-rhkq3vc24a] {
                font-size: 16px;
                font-weight: 1000;
            }

        #modalLista .titulo-bar .tag-neto[b-rhkq3vc24a] {
            background: linear-gradient(180deg, #ecfdf5, #d1fae5);
            border-color: rgba(16,185,129,.35);
        }

    /* Bloque de total y ganador */
    #modalLista .fila-totales-normal[b-rhkq3vc24a] {
        width: fit-content;
        max-width: 100%;
        margin: 2px auto 14px auto !important;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 10px;
        text-align: center;
    }

        #modalLista .fila-totales-normal .label[b-rhkq3vc24a] {
            font-size: 22px;
            font-weight: 1000;
            color: #0f172a;
        }

        #modalLista .fila-totales-normal .valor[b-rhkq3vc24a] {
            font-size: 28px;
            font-weight: 1000;
            color: #7a0000;
            line-height: 1;
        }

        #modalLista .fila-totales-normal .sep[b-rhkq3vc24a] {
            font-size: 20px;
            font-weight: 900;
            color: rgba(15,23,42,.45);
        }

    /* Área donde vive la tabla */
    #modalLista .modal-grilla-lista[b-rhkq3vc24a] {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }

    /* Parley también centrado */
    #modalLista .lista-unica-parley[b-rhkq3vc24a] {
        width: fit-content;
        max-width: 100%;
        margin: 0 auto !important;
    }

    /* Grillas tiempos centradas */
    #modalLista .fila-cabecera[b-rhkq3vc24a],
    #modalLista .fila-numeros[b-rhkq3vc24a],
    #modalLista .fila-totales-f[b-rhkq3vc24a] {
        margin-left: auto !important;
        margin-right: auto !important;
    }

/* Responsive */
@media (max-width: 1100px) {
    #modalLista .titulo-bar[b-rhkq3vc24a] {
        justify-content: center;
        text-align: center;
    }

        #modalLista .titulo-bar .izq[b-rhkq3vc24a] {
            justify-content: center;
            width: 100%;
        }

        #modalLista .titulo-bar .der[b-rhkq3vc24a] {
            justify-content: center;
            width: 100%;
        }
}

/* ==========================================
   REDISEÑO SUPERIOR DEL MODAL LISTA
========================================== */
#modalLista .fila-titulo[b-rhkq3vc24a] {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto 14px auto !important;
    display: flex;
    justify-content: center;
}

#modalLista .titulo-sorteo-modal[b-rhkq3vc24a] {
    width: 100%;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(241,245,249,.95));
    border: 1px solid rgba(148,163,184,.30);
    box-shadow: 0 18px 36px rgba(15,23,42,.10);
    padding: 14px 18px;
    box-sizing: border-box;
}

#modalLista .titulo-bar[b-rhkq3vc24a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

    #modalLista .titulo-bar .izq[b-rhkq3vc24a] {
        font-size: 22px;
        font-weight: 1000;
        color: #c77d00;
        display: flex;
        align-items: center;
        gap: 8px;
        line-height: 1.15;
    }

        #modalLista .titulo-bar .izq strong[b-rhkq3vc24a] {
            font-size: 24px;
            font-weight: 1000;
            color: #c77d00;
        }

    #modalLista .titulo-bar .der[b-rhkq3vc24a] {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: flex-end;
        align-items: center;
    }

    #modalLista .titulo-bar .tag[b-rhkq3vc24a] {
        min-height: 38px;
        padding: 7px 14px;
        border-radius: 999px;
        border: 1px solid rgba(148,163,184,.35);
        font-size: 14px;
        font-weight: 900;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        box-shadow: 0 8px 18px rgba(15,23,42,.08);
        color: #334155;
        background: linear-gradient(180deg, #ffffff, #f1f5f9);
    }

        #modalLista .titulo-bar .tag b[b-rhkq3vc24a] {
            font-size: 17px;
            font-weight: 1000;
        }

    #modalLista .titulo-bar .tag-soft-blue[b-rhkq3vc24a] {
        background: linear-gradient(180deg, #eff6ff, #dbeafe);
        border-color: rgba(59,130,246,.30);
        color: #1d4ed8;
    }

    #modalLista .titulo-bar .tag-soft-red[b-rhkq3vc24a] {
        background: linear-gradient(180deg, #fef2f2, #fee2e2);
        border-color: rgba(239,68,68,.30);
        color: #dc2626;
    }

    #modalLista .titulo-bar .tag-soft-gold[b-rhkq3vc24a] {
        background: linear-gradient(180deg, #fff7ed, #ffedd5);
        border-color: rgba(245,158,11,.30);
        color: #c2410c;
    }

    #modalLista .titulo-bar .tag-soft-amber[b-rhkq3vc24a] {
        background: linear-gradient(180deg, #fffbeb, #fef3c7);
        border-color: rgba(245,158,11,.28);
        color: #b45309;
    }

    #modalLista .titulo-bar .tag-soft-rose[b-rhkq3vc24a] {
        background: linear-gradient(180deg, #fff1f2, #ffe4e6);
        border-color: rgba(244,63,94,.25);
        color: #be123c;
    }

    #modalLista .titulo-bar .tag-neto[b-rhkq3vc24a] {
        background: linear-gradient(180deg, #ecfdf5, #d1fae5);
        border-color: rgba(16,185,129,.35);
        color: #047857;
    }

@media (max-width: 1100px) {
    #modalLista .titulo-bar[b-rhkq3vc24a] {
        justify-content: center;
        text-align: center;
    }

        #modalLista .titulo-bar .izq[b-rhkq3vc24a] {
            justify-content: center;
            width: 100%;
        }

        #modalLista .titulo-bar .der[b-rhkq3vc24a] {
            justify-content: center;
            width: 100%;
        }
}

#modalLista .modal-grilla-lista > .fila-cabecera.cabecera-reventado[b-rhkq3vc24a],
#modalLista .modal-grilla-lista > .fila-numeros.fila-reventado[b-rhkq3vc24a],
#modalLista .modal-grilla-lista > .fila-totales-f.totales-reventado[b-rhkq3vc24a] {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
/* _content/SistemaLoteriaDashboard/Components/Ventas/ConsultasTab.razor.rz.scp.css */
/* ============================= */
/*        CONSULTAS TAB          */
/*  CSS sincronizado con Razor   */
/* ============================= */

.consultas-root[b-lh0buzb5zo] {
    position: relative;
}

/* SUBMENÚ */
.consultas-dropdown[b-lh0buzb5zo] {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 6px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #dbe7ff;
    box-shadow: 0 14px 34px rgba(15,23,42,.22);
    min-width: 240px;
    padding: 6px;
    z-index: 1200;
    overflow: hidden;
}

.consultas-item[b-lh0buzb5zo] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: .9rem;
    color: #0f172a;
    text-align: left;
    font-family: inherit;
    border-radius: 12px;
    transition: background .12s ease, transform .12s ease;
}

.consultas-bullet[b-lh0buzb5zo] {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #eef6ff;
    color: #1d4ed8;
    font-size: 1.1rem;
    line-height: 1;
    box-shadow: inset 0 0 0 1px rgba(37,99,235,.18);
}

.consultas-texto[b-lh0buzb5zo] {
    flex: 1;
    font-weight: 800;
    color: #0b2a5b;
}

.consultas-item:hover[b-lh0buzb5zo] {
    background: #f2f7ff;
    transform: translateY(-1px);
}

.consultas-item:active[b-lh0buzb5zo] {
    transform: translateY(0);
}

/* MODAL */
.modal-overlay[b-lh0buzb5zo] {
    position: fixed;
    inset: 0;
    background: rgba(2,6,23,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    backdrop-filter: blur(3px);
}

.modal-consultas[b-lh0buzb5zo] {
    background: #fff;
    border-radius: 18px;
    max-width: 1050px;
    width: min(96%,1050px);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 28px 70px rgba(15,23,42,.55);
    padding: 16px 18px 16px;
    border: 1px solid rgba(148,163,184,.45);
}

/* Header */
.modal-header[b-lh0buzb5zo] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.modal-header-titulo[b-lh0buzb5zo] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.modal-header h3[b-lh0buzb5zo] {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 1000;
    color: #0b3b78;
    letter-spacing: .2px;
}

.modal-header-sub[b-lh0buzb5zo] {
    font-size: 1.02rem;
    line-height: 1.25rem;
    color: #64748b;
    max-width: 760px;
}

.modal-header-actions[b-lh0buzb5zo] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* POS selector */
.pos-size[b-lh0buzb5zo] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

    .pos-size label[b-lh0buzb5zo] {
        font-size: .74rem;
        font-weight: 900;
        color: #334155;
    }

.pos-size-select[b-lh0buzb5zo] {
    border-radius: 10px;
    border: 1px solid #cfe0ff;
    padding: 6px 8px;
    background: #fff;
    font-weight: 900;
    min-height: 34px;
}

/* Print button */
.btn-print[b-lh0buzb5zo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    cursor: pointer;
    padding: 9px 12px;
    border-radius: 999px;
    background: linear-gradient(90deg,#0b67c2,#2b8ef5);
    color: #fff;
    font-weight: 1000;
    font-size: .9rem;
    box-shadow: 0 10px 18px rgba(43,142,245,.30);
    transition: transform .12s ease, box-shadow .16s ease, filter .18s ease;
    min-height: 36px;
    min-width: 44px;
}

    .btn-print:hover[b-lh0buzb5zo] {
        transform: translateY(-1px);
        box-shadow: 0 14px 24px rgba(43,142,245,.38);
        filter: brightness(1.02);
    }

    .btn-print:active[b-lh0buzb5zo] {
        transform: translateY(0);
        box-shadow: 0 8px 16px rgba(43,142,245,.30);
    }

/* Close */
.modal-close[b-lh0buzb5zo] {
    border: none;
    background: #ffecec;
    color: #b40000;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    font-size: 22px;
    line-height: 1;
    display: grid;
    place-items: center;
    transition: background .12s ease, transform .12s ease;
    box-shadow: inset 0 0 0 1px rgba(180,0,0,.12);
}

    .modal-close:hover[b-lh0buzb5zo] {
        background: #ffd6d6;
        transform: translateY(-1px);
    }

    .modal-close:active[b-lh0buzb5zo] {
        transform: translateY(0);
    }

/* FILTROS */
.consulta-filtros[b-lh0buzb5zo] {
    border-radius: 16px;
    background: linear-gradient(180deg,#f7fbff,#f1f6ff);
    padding: 12px 12px 10px;
    margin-bottom: 12px;
    border: 1px solid #d7e6ff;
    box-shadow: 0 10px 18px rgba(15,23,42,.05);
}

.consulta-fila[b-lh0buzb5zo] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

.consulta-campo[b-lh0buzb5zo] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 180px;
}

    .consulta-campo label[b-lh0buzb5zo] {
        font-size: .98rem;
        font-weight: 1000;
        color: #1f2937;
        letter-spacing: .2px;
    }

.consulta-input[b-lh0buzb5zo] {
    border-radius: 14px;
    border: 1px solid #cfe0ff;
    font-family: inherit;
    min-height: 48px;
    height: 48px;
    line-height: 48px;
    font-size: 1.05rem;
    padding: 0 14px;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(226,232,240,.55);
    transition: box-shadow .12s ease, border-color .12s ease, transform .12s ease;
}

    .consulta-input:focus[b-lh0buzb5zo] {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 4px rgba(59,130,246,.18);
        transform: translateY(-1px);
    }

    .consulta-input[type="date"][b-lh0buzb5zo] {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background: #fff;
    }

.consulta-filtros select.input[b-lh0buzb5zo],
.consulta-filtros select.pos-size-select[b-lh0buzb5zo] {
    min-height: 48px;
    height: 48px;
    font-size: 1.05rem;
    padding: 12px 14px;
    border-radius: 14px;
    font-weight: 900;
}

.consulta-filtros select.input[b-lh0buzb5zo] {
    background: #fff;
    border: 1px solid #cfe0ff;
    box-shadow: inset 0 0 0 1px rgba(226,232,240,.55);
}

    .consulta-filtros select.input:focus[b-lh0buzb5zo],
    .consulta-filtros select.pos-size-select:focus[b-lh0buzb5zo] {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 4px rgba(59,130,246,.18);
        transform: translateY(-1px);
    }

.consulta-boton-buscar[b-lh0buzb5zo] {
    justify-content: flex-end;
    min-width: 220px;
}

.consulta-btn-buscar[b-lh0buzb5zo] {
    align-self: flex-start;
    background: linear-gradient(90deg,#0b67c2,#2b8ef5);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 12px 22px;
    cursor: pointer;
    font-weight: 900;
    font-size: 1.03rem;
    box-shadow: 0 10px 18px rgba(43,142,245,.30);
    transition: transform .12s ease, box-shadow .16s ease, filter .18s ease;
}

    .consulta-btn-buscar:hover[b-lh0buzb5zo] {
        transform: translateY(-1px);
        box-shadow: 0 14px 24px rgba(43,142,245,.38);
        filter: brightness(1.02);
    }

    .consulta-btn-buscar:active[b-lh0buzb5zo] {
        transform: translateY(0);
        box-shadow: 0 8px 16px rgba(43,142,245,.30);
    }

/* RESULTADOS */
.consulta-resultados[b-lh0buzb5zo] {
    flex: 1;
    overflow: hidden;
    margin-top: 6px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.consulta-empty[b-lh0buzb5zo] {
    padding: 20px 16px;
    font-size: 1.05rem;
    font-weight: 900;
    color: #334155;
}

/* SUPERBANNER */
.consulta-superbanner[b-lh0buzb5zo] {
    margin: 12px 12px 10px;
    border-radius: 18px;
    border: 1px solid #dbeafe;
    background: linear-gradient(180deg,#f8fbff,#eef6ff);
    padding: 14px 14px 12px;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 14px;
    box-shadow: 0 14px 24px rgba(15,23,42,.08);
}

.csb-left[b-lh0buzb5zo] {
    min-width: 240px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 14px;
    background: rgba(255,255,255,.55);
    border: 1px solid rgba(219,234,254,.8);
}

.csb-title[b-lh0buzb5zo] {
    font-weight: 1000;
    letter-spacing: .8px;
    color: #0b3b78;
    font-size: 1.05rem;
}

.csb-number[b-lh0buzb5zo] {
    font-weight: 1000;
    font-size: 3.1rem;
    line-height: 1;
    color: #0d47a1;
    text-shadow: 0 2px 0 rgba(0,0,0,.04);
}

.csb-bola[b-lh0buzb5zo] {
    font-weight: 1000;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: .86rem;
    border: 1px solid transparent;
    box-shadow: 0 8px 14px rgba(15,23,42,.08);
}

    .csb-bola.bola-blanca[b-lh0buzb5zo] {
        background: #fff;
        border-color: #cbd5e1;
        color: #0f172a;
    }

    .csb-bola.bola-roja[b-lh0buzb5zo] {
        background: #ffecec;
        border-color: #ffb4b4;
        color: #b40000;
    }

.csb-right[b-lh0buzb5zo] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    padding: 6px 4px;
}

.csb-line[b-lh0buzb5zo] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.csb-label[b-lh0buzb5zo] {
    font-size: .98rem;
    font-weight: 900;
    color: #334155;
}

.csb-value[b-lh0buzb5zo] {
    font-size: 1.18rem;
    font-weight: 1000;
    color: #0b2a5b;
}

.csb-pagos[b-lh0buzb5zo] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 2px;
}

.pago-chip[b-lh0buzb5zo] {
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 900;
    font-size: .9rem;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 10px 18px rgba(15,23,42,.08);
}

    .pago-chip.base[b-lh0buzb5zo] {
        background: #ecfeff;
        border-color: #a5f3fc;
        color: #155e75;
    }

    .pago-chip.rev[b-lh0buzb5zo] {
        background: #fff1f2;
        border-color: #fecdd3;
        color: #9f1239;
    }

.pago-sub[b-lh0buzb5zo] {
    font-weight: 900;
    opacity: .9;
    margin-left: 4px;
}

/* ============================ */
/* TABLA ÚNICA + THEAD STICKY   */
/* ============================ */

.consulta-tabla-wrap[b-lh0buzb5zo] {
    margin: 0 12px 12px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    box-shadow: 0 10px 18px rgba(15,23,42,.06);
    background: #fff;
    display: flex;
    flex-direction: column;
}

/* SOLO AQUÍ VA EL SCROLL */
.consulta-lineas-scroll[b-lh0buzb5zo] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;
}

/* Tabla única */
.consulta-tabla[b-lh0buzb5zo] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

    /* Header sticky */
    .consulta-tabla thead th[b-lh0buzb5zo] {
        position: sticky;
        top: 0;
        z-index: 5;
        background: linear-gradient(90deg,#0b67c2,#2b8ef5);
        color: #fff;
        padding: 12px 12px;
        text-align: left;
        white-space: nowrap;
        font-weight: 900;
        font-size: .92rem;
        letter-spacing: .2px;
    }

    /* Body */
    .consulta-tabla tbody td[b-lh0buzb5zo] {
        padding: 12px 12px;
        border-bottom: 1px solid #e2e8f0;
        text-align: left;
        white-space: nowrap;
        font-size: 1.12rem;
        font-variant-numeric: tabular-nums;
    }

    .consulta-tabla tbody tr:nth-child(even)[b-lh0buzb5zo] {
        background: #f8fafc;
    }

    .consulta-tabla tbody tr:hover[b-lh0buzb5zo] {
        background: #eaf2ff;
    }

/* Anchos por columna */
.col-no[b-lh0buzb5zo] {
    width: 12%;
}

.col-monto[b-lh0buzb5zo] {
    width: 38%;
}

.col-premio[b-lh0buzb5zo] {
    width: 25%;
}

.col-tiquete[b-lh0buzb5zo] {
    width: 25%;
}

/* Premio en negrita */
.consulta-tabla tbody td:nth-child(3)[b-lh0buzb5zo] {
    font-weight: 1000;
}

/* Etiqueta reventado */
.tag-rvta[b-lh0buzb5zo] {
    margin-left: 6px;
    font-weight: 800;
    opacity: .85;
}

/* TOTALES */
.consulta-totales[b-lh0buzb5zo] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
    align-items: center;
    padding: 12px 14px;
    margin: 0 12px 14px;
    background: linear-gradient(180deg,#fff7f7,#fff1f2);
    border: 1px solid #fecdd3;
    border-radius: 16px;
    box-shadow: 0 10px 18px rgba(15,23,42,.06);
}

.consulta-totales-label[b-lh0buzb5zo] {
    font-weight: 1000;
    font-size: 1.05rem;
    color: #7f1d1d;
    letter-spacing: .3px;
}

.consulta-totales-monto[b-lh0buzb5zo],
.consulta-totales-premio[b-lh0buzb5zo] {
    font-weight: 1000;
    font-size: 1.05rem;
    color: #b40000;
}

/* ✅ Botones de juego */
.consulta-juego-row[b-lh0buzb5zo] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.consulta-btn-juego[b-lh0buzb5zo] {
    border: 1px solid #d1d5db;
    background: #fff;
    border-radius: 10px;
    padding: 8px 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s ease;
}

    .consulta-btn-juego:hover[b-lh0buzb5zo] {
        transform: translateY(-1px);
        box-shadow: 0 8px 18px rgba(15,23,42,.10);
    }

    .consulta-btn-juego.activo[b-lh0buzb5zo] {
        background: #111827;
        color: #fff;
        border-color: #111827;
    }

@media (max-width:820px) {
    .consulta-superbanner[b-lh0buzb5zo] {
        flex-direction: column;
    }

    .csb-left[b-lh0buzb5zo] {
        width: 100%;
        min-width: 0;
    }

    .consulta-tabla-wrap[b-lh0buzb5zo] {
        margin: 0 8px 10px;
    }

    .consulta-totales[b-lh0buzb5zo] {
        margin: 0 8px 12px;
    }
}

@media (max-width:520px) {
    .consulta-juego-row[b-lh0buzb5zo] {
        flex-wrap: wrap;
    }

    .consulta-btn-juego[b-lh0buzb5zo] {
        flex: 1;
        min-width: 120px;
        justify-content: center;
    }
}

/* ========================= */
/* Ticket POS (solo print)   */
/* ========================= */

.pos-ticket[b-lh0buzb5zo] {
    display: none;
    width: var(--posWidth);
    max-width: var(--posWidth);
    box-sizing: border-box;
    font-family: "Courier New", Courier, "Lucida Console", Consolas, monospace;
    font-kerning: none;
    letter-spacing: 0;
    font-variant-ligatures: none;
    font-size: 12px;
    line-height: 1.25;
    padding: 6px 6px 10px;
    color: #000;
    background: #fff;
    transform-origin: top left;
}

    .pos-ticket *[b-lh0buzb5zo] {
        box-sizing: border-box;
        min-width: 0;
    }

    .pos-ticket.pos-fit[b-lh0buzb5zo] {
        transform: scale(var(--ptScale, 1));
    }

.pt-center[b-lh0buzb5zo] {
    text-align: center;
}

.pt-right[b-lh0buzb5zo] {
    text-align: right;
}

.pt-bold[b-lh0buzb5zo] {
    font-weight: 1000;
}

.pt-muted[b-lh0buzb5zo] {
    opacity: .75;
}

.pt-sep[b-lh0buzb5zo] {
    border-top: 1px dashed #000;
    margin: 8px 0;
}

    .pt-sep.thin[b-lh0buzb5zo] {
        border-top: 1px dotted #000;
        margin: 4px 0;
    }

.pt-line[b-lh0buzb5zo] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 2px 0;
}

    .pt-line > span[b-lh0buzb5zo] {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .pt-line.pt-total[b-lh0buzb5zo] {
        grid-template-columns: auto 1fr;
        gap: 8px;
    }

        .pt-line.pt-total > span[b-lh0buzb5zo] {
            overflow: visible;
            text-overflow: clip;
        }

            .pt-line.pt-total > span:first-child[b-lh0buzb5zo] {
                white-space: normal;
            }

            .pt-line.pt-total > span:last-child[b-lh0buzb5zo] {
                white-space: nowrap;
                justify-self: end;
                text-align: right;
            }

    .pt-line > span:last-child[b-lh0buzb5zo] {
        justify-self: end;
        text-align: right;
    }

.pt-head[b-lh0buzb5zo],
.pt-row[b-lh0buzb5zo] {
    display: grid;
    grid-template-columns: var(--pt-c1, 2ch) var(--pt-ct, 1ch) var(--pt-c2, 6ch) var(--pt-c3, 9ch) var(--pt-c4, 10ch);
    column-gap: 1ch;
    margin: 2px 0;
}

    .pt-head > div[b-lh0buzb5zo],
    .pt-row > div[b-lh0buzb5zo] {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-kerning: none;
        letter-spacing: 0;
        font-variant-ligatures: none;
    }

.pt-col[b-lh0buzb5zo] {
    justify-self: start;
    text-align: left;
}

.pt-tcol[b-lh0buzb5zo] {
    justify-self: center;
    text-align: center;
}

.pos-ticket.pos-tiempos[b-lh0buzb5zo] {
    --pt-c1: 2ch;
    --pt-ct: 1ch;
    --pt-c2: 6ch;
    --pt-c3: 9ch;
    --pt-c4: 10ch;
}

.pos-ticket.pos-parley[b-lh0buzb5zo] {
    --pt-c1: 5ch;
    --pt-ct: 1ch;
    --pt-c2: 6ch;
    --pt-c3: 9ch;
    --pt-c4: 10ch;
}

    .pos-ticket.pos-parley .pt-head[b-lh0buzb5zo],
    .pos-ticket.pos-parley .pt-row[b-lh0buzb5zo] {
        column-gap: .7ch;
    }


    {
    body.print-pos * {
        visibility: hidden !important;
    }

    body.print-pos #pos-ticket[b-lh0buzb5zo],
    body.print-pos #pos-ticket *[b-lh0buzb5zo] {
        visibility: visible !important;
    }

    body.print-pos #pos-ticket[b-lh0buzb5zo] {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        display: block !important;
    }
}

/* SOLO para la tabla de premiados (Monazos) */
.col-modo[b-lh0buzb5zo] {
    width: 170px; /* ajusta si quieres más/menos */
    white-space: nowrap;
}

/* Acciones de filtros: Buscar + Imprimir en una misma fila */
.consulta-acciones[b-lh0buzb5zo] {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* Variante del botón print para usarse dentro de filtros */
.btn-print-inline[b-lh0buzb5zo] {
    padding: 12px 18px;
    min-width: auto;
    border-radius: 999px;
    font-size: 1.03rem;
}

/* X fija en la esquina superior derecha del MODAL */
.modal-consultas[b-lh0buzb5zo] {
    position: relative; /* referencia para la X */
}

.modal-close-corner[b-lh0buzb5zo] {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 5;
}

/* _content/SistemaLoteriaDashboard/Components/Ventas/JalaTiquete.razor.rz.scp.css */
.rt-backdrop[b-cy1xlo4649] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 9998;
}

.rt-modal[b-cy1xlo4649] {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: min(1050px, 95vw);
    max-height: 92vh;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* ✅ borde más oscuro para que destaque */
    border: 1px solid #7ea6df;
}

.rt-header[b-cy1xlo4649] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: #d8e7ff;
    /* ✅ borde más oscuro */
    border-bottom: 1px solid #7ea6df;
}

.rt-title[b-cy1xlo4649] {
    display: flex;
    gap: 10px;
    align-items: center;
}

.rt-icon[b-cy1xlo4649] {
    font-size: 22px;
}

.rt-h1[b-cy1xlo4649] {
    font-weight: 900;
    color: #0b3b91;
    font-size: 18px;
}

.rt-h2[b-cy1xlo4649] {
    font-weight: 700;
    color: #0b3b91;
    opacity: .85;
    font-size: 13px;
}

.rt-close[b-cy1xlo4649] {
    width: 34px;
    height: 34px;
    border: 1px solid #7ea6df; /* ✅ */
    border-radius: 10px;
    background: #ffffff;
    cursor: pointer;
    font-weight: 900;
}

.rt-tools[b-cy1xlo4649] {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    background: #f6f9ff;
    /* ✅ borde más oscuro */
    border-bottom: 1px solid #7ea6df;
    flex-wrap: wrap;
    align-items: flex-end;
}

.rt-field[b-cy1xlo4649] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .rt-field label[b-cy1xlo4649] {
        font-size: 12px;
        font-weight: 800;
        color: #153e75;
    }

/* ✅ Fecha más grande */
.rt-date .rt-input[b-cy1xlo4649] {
    height: 44px;
    font-size: 16px;
    font-weight: 800;
    padding: 0 12px;
}

/* ✅ inputs con borde más oscuro */
.rt-input[b-cy1xlo4649] {
    height: 38px;
    border: 1px solid #7ea6df;
    border-radius: 10px;
    padding: 0 10px;
    outline: none;
}

    .rt-input:focus[b-cy1xlo4649] {
        border-color: #1d6fe8;
        box-shadow: 0 0 0 3px rgba(29,111,232,.18);
    }

/* ✅ BUSCADOR: input pequeño y botón al lado */
.rt-buscar[b-cy1xlo4649] {
    flex: 1;
    min-width: 320px;
    display: flex;
    flex-direction: column;
}

.rt-buscar-row[b-cy1xlo4649] {
    display: flex;
    gap: 10px;
    align-items: center;
}

.rt-searchbox[b-cy1xlo4649] {
    flex: 0 1 420px; /* ✅ no tan grande */
    height: 34px; /* ✅ más pequeño */
    font-size: 13px;
    padding: 0 10px;
}

/* ✅ botón buscar cuadrado */
.rt-btn[b-cy1xlo4649] {
    height: 34px;
    width: 42px;
    border: 1px solid #0f55bf; /* borde para que se note */
    border-radius: 10px;
    background: #1d6fe8;
    color: #fff;
    font-weight: 900;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .rt-btn span[b-cy1xlo4649] {
        display: none; /* ✅ ocultamos texto si lo tienes */
    }

    .rt-btn i[b-cy1xlo4649], .rt-btn .rt-btn-ico[b-cy1xlo4649] {
        font-size: 16px; /* ✅ icono visible */
        line-height: 1;
    }

.rt-body[b-cy1xlo4649] {
    padding: 12px 16px;
    overflow: auto;
}

.rt-loading[b-cy1xlo4649], .rt-empty[b-cy1xlo4649] {
    padding: 18px;
    border: 1px dashed #7ea6df; /* ✅ */
    border-radius: 12px;
    background: #fbfdff;
    color: #153e75;
    font-weight: 800;
}

.rt-table[b-cy1xlo4649] {
    width: 100%;
}

/* ✅ filas con bordes más oscuros */
.rt-row[b-cy1xlo4649] {
    display: grid;
    grid-template-columns: 90px 80px 110px 110px 1.6fr 120px 60px;
    gap: 0;
    align-items: center;
    border: 1px solid #7ea6df; /* ✅ */
    border-radius: 10px;
    margin-bottom: 8px;
    overflow: hidden;
    cursor: pointer;
}

.rt-head[b-cy1xlo4649] {
    background: #1b73d1;
    color: #fff;
    font-weight: 900;
    cursor: default;
    border-color: #1b73d1;
}

.rt-row > div[b-cy1xlo4649] {
    padding: 10px 10px;
    background: #fff;
    border-right: 1px solid #d0def4; /* ✅ separadores un poquito más notables */
}

    .rt-row > div:last-child[b-cy1xlo4649] {
        border-right: none;
    }

.rt-head > div[b-cy1xlo4649] {
    background: transparent;
    border-right: 1px solid rgba(255,255,255,.25);
}

/* ✅ selección MUY visible */
/* ✅ SELECCIÓN CLARAMENTE VISIBLE */
.rt-row.rt-selected[b-cy1xlo4649] {
    background: #cfe0ff; /* fondo fuerte */
    border-color: #1d6fe8; /* borde azul intenso */
    box-shadow: inset 0 0 0 2px #1d6fe8, /* borde interno */
    0 4px 12px rgba(29,111,232,.35); /* sombra externa */
}

    /* ✅ Celdas internas también se resaltan */
    .rt-row.rt-selected > div[b-cy1xlo4649] {
        background: #e8f0ff !important;
        font-weight: 900;
        color: #0b3b91;
    }

    /* ✅ Barra lateral de selección */
    .rt-row.rt-selected[b-cy1xlo4649]::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 6px;
        background: #1d6fe8;
    }



/* ✅ hover para ver mejor el foco */
.rt-row:not(.rt-head):hover[b-cy1xlo4649] {
    outline: 2px solid rgba(29,111,232,.20);
}

.rt-col-print[b-cy1xlo4649] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.rt-print[b-cy1xlo4649] {
    width: 36px;
    height: 30px;
    border: 1px solid #1b8a35; /* ✅ */
    border-radius: 8px;
    background: #33b14a;
    color: #fff;
    cursor: pointer;
}

.rt-hide[b-cy1xlo4649] {
    display: none !important;
}

.rt-footer[b-cy1xlo4649] {
    padding: 12px 16px;
    border-top: 1px solid #7ea6df; /* ✅ */
    display: flex;
    justify-content: flex-end;
    background: #fff;
}

.rt-btn-sec[b-cy1xlo4649] {
    background: #e9f1ff;
    color: #0b3b91;
    border: 1px solid #7ea6df;
}

/* ✅ Buscador: número más grande + negrita */
.rt-searchbox[b-cy1xlo4649] {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .3px;
}

/* ✅ Botón buscar: más pequeño y cuadrado */
.rt-buscar-row .rt-btn[b-cy1xlo4649] {
    width: 38px;
    min-width: 38px;
    padding: 0;
}

/* ✅ Bordes más oscuros para que se noten */
.rt-row[b-cy1xlo4649] {
    border-color: #a9bddf;
    position: relative;
}

    .rt-row > div[b-cy1xlo4649] {
        border-right: 1px solid #a9bddf;
    }

        .rt-row > div:last-child[b-cy1xlo4649] {
            border-right: none;
        }

    .rt-row.rt-selected[b-cy1xlo4649]::before {
        pointer-events: none;
    }
/* _content/SistemaLoteriaDashboard/Components/Ventas/ModalResumenFacturas.razor.rz.scp.css */
/* =========================
   RESUMEN (RF) - HEADER IGUAL AL RESTO + CUERPO MEJORADO
   ========================= */

/* ====== BACKDROP ====== */
.rf-backdrop[b-e4bzqzgh4q] {
    position: fixed;
    inset: 0;
    background: rgba(2,6,23,.62);
    backdrop-filter: blur(6px);
    z-index: 2500;
}

/* ====== MODAL ====== */
.rf-modal[b-e4bzqzgh4q] {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: min(1320px, 95vw);
    height: min(86vh, 860px);
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    border-radius: 24px;
    box-shadow: 0 30px 90px rgba(0,0,0,.34);
    border: 1px solid rgba(37,99,235,.18);
    z-index: 2600;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ====== HEADER (IGUAL QUE TB) ====== */
.rf-header[b-e4bzqzgh4q] {
    padding: 18px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(15,23,42,.14);
    background: linear-gradient(135deg, #0b1220, #122a57);
    color: #ffffff;
}

.rf-titlewrap[b-e4bzqzgh4q] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 380px;
}

.rf-h1[b-e4bzqzgh4q] {
    font-weight: 950;
    font-size: 26px;
    letter-spacing: .2px;
    color: #ffffff;
}

.rf-badgebar[b-e4bzqzgh4q] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.rf-badge[b-e4bzqzgh4q] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 14px;
    border: 1px solid rgba(255,255,255,.20);
    background: rgba(255,255,255,.10);
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(0,0,0,.18);
}

.rf-badge-sorteo[b-e4bzqzgh4q] {
    background: rgba(34,197,94,.14);
    border-color: rgba(34,197,94,.30);
}

.rf-badge-juego[b-e4bzqzgh4q] {
    background: rgba(59,130,246,.16);
    border-color: rgba(59,130,246,.34);
}

.rf-badge-fechas[b-e4bzqzgh4q] {
    background: rgba(251,191,36,.16);
    border-color: rgba(251,191,36,.34);
}

.rf-header-right[b-e4bzqzgh4q] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ====== CLOSE (IGUAL QUE TB) ====== */
.rf-close[b-e4bzqzgh4q] {
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.12);
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
    padding: 9px 12px;
    border-radius: 14px;
    box-shadow: 0 12px 24px rgba(0,0,0,.18);
    transition: transform .12s ease, box-shadow .12s ease;
}

    .rf-close:hover[b-e4bzqzgh4q] {
        transform: translateY(-1px);
        box-shadow: 0 16px 30px rgba(0,0,0,.24);
    }

/* ====== BODY ====== */
.rf-body[b-e4bzqzgh4q] {
    padding: 18px 18px;
    flex: 1;
    overflow: auto;
    background: radial-gradient(1200px 600px at 20% 0%, rgba(59,130,246,.10), transparent 60%), radial-gradient(900px 500px at 90% 30%, rgba(34,197,94,.10), transparent 60%), #f4f7ff;
}

    /* Scrollbar */
    .rf-body[b-e4bzqzgh4q]::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    .rf-body[b-e4bzqzgh4q]::-webkit-scrollbar-thumb {
        background: rgba(15,23,42,.22);
        border-radius: 12px;
    }

    .rf-body[b-e4bzqzgh4q]::-webkit-scrollbar-track {
        background: transparent;
    }

/* ====== GRID ====== */
.rf-grid[b-e4bzqzgh4q] {
    display: grid;
    grid-template-columns: repeat(3, minmax(240px, 1fr));
    gap: 14px;
}

/* responsivo */
@media (max-width: 1050px) {
    .rf-grid[b-e4bzqzgh4q] {
        grid-template-columns: repeat(2, minmax(240px, 1fr));
    }
}

@media (max-width: 720px) {
    .rf-grid[b-e4bzqzgh4q] {
        grid-template-columns: 1fr;
    }
}

/* ====== BOX / CARD ====== */
.rf-box[b-e4bzqzgh4q] {
    border: 1px solid rgba(15,23,42,.14);
    border-radius: 18px;
    padding: 16px 16px;
    background: linear-gradient(180deg, #ffffff, #fbfdff);
    box-shadow: 0 10px 24px rgba(15,23,42,.08);
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

    .rf-box:hover[b-e4bzqzgh4q] {
        transform: translateY(-1px);
        border-color: rgba(59,130,246,.30);
        box-shadow: 0 16px 34px rgba(59,130,246,.12);
    }

.rf-k[b-e4bzqzgh4q] {
    font-weight: 950;
    font-size: 12px;
    letter-spacing: .2px;
    color: rgba(15,23,42,.70);
    text-transform: uppercase;
}

.rf-v[b-e4bzqzgh4q] {
    font-weight: 950;
    font-size: 28px;
    margin-top: 8px;
    color: #0f172a;
}

/* ✅ subtexto (incluye borrados) */
.rf-sub[b-e4bzqzgh4q] {
    margin-top: 6px;
    font-weight: 900;
    font-size: 13px;
    color: rgba(15,23,42,.62);
}

/* ✅ para que Total vendido se vea más pro */
.rf-box-wide[b-e4bzqzgh4q] {
    grid-column: span 3;
}

@media (max-width: 1050px) {
    .rf-box-wide[b-e4bzqzgh4q] {
        grid-column: span 2;
    }
}

@media (max-width: 720px) {
    .rf-box-wide[b-e4bzqzgh4q] {
        grid-column: span 1;
    }
}

/* ====== FOOTER ====== */
.rf-footer[b-e4bzqzgh4q] {
    padding: 14px 18px;
    border-top: 1px solid rgba(15,23,42,.14);
    display: flex;
    justify-content: flex-end;
    background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.rf-btn[b-e4bzqzgh4q] {
    border: none;
    border-radius: 16px;
    padding: 12px 18px;
    font-weight: 950;
    font-size: 15px;
    cursor: pointer;
    background: linear-gradient(180deg, #0f172a, #0b1220);
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(15,23,42,.22);
    transition: transform .12s ease, box-shadow .12s ease;
}

    .rf-btn:hover[b-e4bzqzgh4q] {
        transform: translateY(-1px);
        box-shadow: 0 18px 34px rgba(15,23,42,.26);
    }

/* =========================
   ✅ TABS (Resumen / Impresos / WhatsApp)
   - Se integra al diseño RF (mismo look del modal)
   ========================= */

.rf-tabs[b-e4bzqzgh4q] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 0 14px 0;
    padding: 12px 12px;
    border: 1px solid rgba(15,23,42,.14);
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff, #fbfdff);
    box-shadow: 0 10px 24px rgba(15,23,42,.08);
}

.rf-tab[b-e4bzqzgh4q] {
    border: 1px solid rgba(15,23,42,.14);
    background: rgba(255,255,255,.92);
    color: #0f172a;
    font-weight: 950;
    font-size: 14px;
    padding: 10px 14px;
    border-radius: 14px;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
    box-shadow: 0 10px 18px rgba(15,23,42,.10);
}

    .rf-tab:hover[b-e4bzqzgh4q] {
        transform: translateY(-1px);
        border-color: rgba(59,130,246,.30);
        box-shadow: 0 16px 28px rgba(59,130,246,.14);
    }

    .rf-tab.active[b-e4bzqzgh4q] {
        background: linear-gradient(135deg, #0b1220, #122a57);
        color: #ffffff;
        border-color: rgba(255,255,255,.20);
        box-shadow: 0 18px 34px rgba(0,0,0,.22);
    }

@media (max-width: 720px) {
    .rf-tabs[b-e4bzqzgh4q] {
        padding: 10px 10px;
    }

    .rf-tab[b-e4bzqzgh4q] {
        width: 100%;
        text-align: center;
    }
}
/* _content/SistemaLoteriaDashboard/Components/Ventas/ModalTiquetesBorrados.razor.rz.scp.css */
/* ====== BACKDROP ====== */
.tb-backdrop[b-sqd923my0z] {
    position: fixed;
    inset: 0;
    background: rgba(2,6,23,.62);
    backdrop-filter: blur(6px);
    z-index: 2500;
}

/* ====== MODAL ====== */
.tb-modal[b-sqd923my0z] {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: min(1320px, 95vw);
    height: min(86vh, 860px);
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    border-radius: 24px;
    box-shadow: 0 30px 90px rgba(0,0,0,.34);
    border: 1px solid rgba(37,99,235,.18);
    z-index: 2600;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ====== HEADER ====== */
.tb-header[b-sqd923my0z] {
    padding: 18px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(15,23,42,.14);
    background: linear-gradient(135deg, #0b1220, #122a57);
    color: #ffffff;
}

.tb-titlewrap[b-sqd923my0z] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 380px;
}

.tb-h1[b-sqd923my0z] {
    font-weight: 950;
    font-size: 26px;
    letter-spacing: .2px;
    color: #ffffff;
}

.tb-h2[b-sqd923my0z] { /* ya no se usa, pero lo dejo por si algo */
    opacity: .92;
    font-size: 16px;
    margin-top: 4px;
    color: rgba(255,255,255,.86);
    font-weight: 700;
}

/* ====== BADGES (Sorteo / Juego / Fechas) ====== */
.tb-badgebar[b-sqd923my0z] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.tb-badge[b-sqd923my0z] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 14px;
    border: 1px solid rgba(255,255,255,.20);
    background: rgba(255,255,255,.10);
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(0,0,0,.18);
}

.tb-badge-sorteo[b-sqd923my0z] {
    background: rgba(34,197,94,.14);
    border-color: rgba(34,197,94,.30);
}

.tb-badge-juego[b-sqd923my0z] {
    background: rgba(59,130,246,.16);
    border-color: rgba(59,130,246,.34);
}

.tb-badge-fechas[b-sqd923my0z] {
    background: rgba(251,191,36,.16);
    border-color: rgba(251,191,36,.34);
}

/* ====== HEADER RIGHT ====== */
.tb-header-right[b-sqd923my0z] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ====== SEARCH BAR ====== */
.tb-search[b-sqd923my0z] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: 0 12px 24px rgba(0,0,0,.18);
}

.tb-search-label[b-sqd923my0z] {
    font-weight: 950;
    font-size: 14px;
    letter-spacing: .2px;
    padding: 7px 10px;
    border-radius: 12px;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.22);
    color: #ffffff;
}

.tb-search-btn[b-sqd923my0z] {
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.18);
    color: #ffffff;
    border-radius: 12px;
    padding: 9px 12px;
    font-weight: 950;
    font-size: 14px;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}

    .tb-search-btn:hover[b-sqd923my0z] {
        transform: translateY(-1px);
        box-shadow: 0 14px 26px rgba(0,0,0,.22);
    }

/* ====== CLOSE ====== */
.tb-close[b-sqd923my0z] {
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.12);
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
    padding: 9px 12px;
    border-radius: 14px;
    box-shadow: 0 12px 24px rgba(0,0,0,.18);
    transition: transform .12s ease, box-shadow .12s ease;
}

    .tb-close:hover[b-sqd923my0z] {
        transform: translateY(-1px);
        box-shadow: 0 16px 30px rgba(0,0,0,.24);
    }

/* ====== BODY ====== */
.tb-body[b-sqd923my0z] {
    padding: 18px 18px;
    flex: 1;
    overflow: auto;
    background: radial-gradient(1200px 600px at 20% 0%, rgba(59,130,246,.10), transparent 60%), radial-gradient(900px 500px at 90% 30%, rgba(34,197,94,.10), transparent 60%), #f4f7ff;
}

    /* Scrollbar */
    .tb-body[b-sqd923my0z]::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    .tb-body[b-sqd923my0z]::-webkit-scrollbar-thumb {
        background: rgba(15,23,42,.22);
        border-radius: 12px;
    }

    .tb-body[b-sqd923my0z]::-webkit-scrollbar-track {
        background: transparent;
    }

.tb-info[b-sqd923my0z] {
    padding: 14px;
    font-weight: 900;
    font-size: 18px;
    color: #0f172a;
    opacity: .95;
}

/* ====== TABLE WRAP ====== */
.tb-table[b-sqd923my0z] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ====== ROWS ====== */
.tb-row[b-sqd923my0z] {
    display: grid;
    grid-template-columns: 110px 160px 150px 150px 150px 210px 150px;
    gap: 12px;
    padding: 16px 16px;
    border-radius: 18px;
    border: 1px solid rgba(15,23,42,.16);
    background: linear-gradient(180deg, #ffffff, #fbfdff);
    box-shadow: 0 10px 24px rgba(15,23,42,.07);
    color: #0f172a;
    font-size: 16px;
    font-weight: 750;
}

    .tb-row:hover[b-sqd923my0z] {
        border-color: rgba(59,130,246,.35);
        box-shadow: 0 16px 34px rgba(59,130,246,.12);
    }

/* ====== HEADER ROW (sticky) ====== */
.tb-head[b-sqd923my0z] {
    background: linear-gradient(180deg, #e8f0ff, #f4f7ff);
    font-weight: 950;
    font-size: 15px;
    letter-spacing: .3px;
    position: sticky;
    top: 0;
    z-index: 2;
    border-color: rgba(59,130,246,.22);
}

/* ====== ACTIONS ====== */
.tb-actions[b-sqd923my0z] {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.tb-mini[b-sqd923my0z] {
    border: 1px solid rgba(15,23,42,.18);
    background: linear-gradient(180deg, #ffffff, #f6f7fb);
    border-radius: 14px;
    padding: 10px 14px;
    font-weight: 950;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(0,0,0,.10);
    transition: transform .12s ease, box-shadow .12s ease;
}

    .tb-mini:hover[b-sqd923my0z] {
        transform: translateY(-1px);
        box-shadow: 0 14px 26px rgba(0,0,0,.14);
    }

/* ====== FOOTER ====== */
.tb-footer[b-sqd923my0z] {
    padding: 14px 18px;
    border-top: 1px solid rgba(15,23,42,.14);
    display: flex;
    justify-content: flex-end;
    background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.tb-btn[b-sqd923my0z] {
    border: none;
    border-radius: 16px;
    padding: 12px 18px;
    font-weight: 950;
    font-size: 15px;
    cursor: pointer;
    background: linear-gradient(180deg, #0f172a, #0b1220);
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(15,23,42,.22);
    transition: transform .12s ease, box-shadow .12s ease;
}

    .tb-btn:hover[b-sqd923my0z] {
        transform: translateY(-1px);
        box-shadow: 0 18px 34px rgba(15,23,42,.26);
    }

.tb-btn-sec[b-sqd923my0z] {
    background: linear-gradient(180deg, #e5e7eb, #dfe3ea);
    color: #111827;
    box-shadow: none;
}

/* ====== PREVIEW MODAL ====== */
.tb-preview[b-sqd923my0z] {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: min(1100px, 95vw);
    height: min(86vh, 860px);
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 30px 90px rgba(0,0,0,.34);
    border: 1px solid rgba(59,130,246,.18);
    z-index: 2700;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tb-preview-header[b-sqd923my0z] {
    padding: 16px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(15,23,42,.12);
    background: linear-gradient(180deg, #ffffff, #fbfcff);
}

.tb-preview-title[b-sqd923my0z] {
    font-weight: 950;
    font-size: 18px;
    color: #0f172a;
}

.tb-preview-body[b-sqd923my0z] {
    flex: 1;
    overflow: hidden;
    background: #f4f7ff;
}

.tb-frame[b-sqd923my0z] {
    width: 100%;
    height: 100%;
    border: 0;
}

.tb-preview-footer[b-sqd923my0z] {
    padding: 14px 16px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid rgba(15,23,42,.12);
    background: #ffffff;
}

/* ====== INPUT BUSCAR TICKET ====== */
.tb-input-ticket[b-sqd923my0z] {
    width: 180px;
    height: 40px;
    background: #ffffff;
    color: #0f172a;
    font-weight: 900;
    font-size: 16px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.28);
    padding: 0 12px;
    outline: none;
}

    .tb-input-ticket[b-sqd923my0z]::placeholder {
        color: rgba(255,255,255,.72);
        font-weight: 800;
    }

/* en header oscuro, se ve mejor si el input es translúcido */
.tb-search .tb-input-ticket[b-sqd923my0z] {
    background: rgba(255,255,255,.12);
    color: #ffffff;
    border-color: rgba(255,255,255,.22);
}

    .tb-search .tb-input-ticket[b-sqd923my0z]::placeholder {
        color: rgba(255,255,255,.72);
    }

    .tb-search .tb-input-ticket:focus[b-sqd923my0z] {
        border-color: rgba(34,197,94,.55);
        box-shadow: 0 0 0 3px rgba(34,197,94,.18);
    }
/* _content/SistemaLoteriaDashboard/Components/Ventas/ReimpresionesFacturasModal.razor.rz.scp.css */
/* =========================
   REIMPRESIONES (RF) - MISMO DISEÑO QUE TB
   ========================= */

/* ====== BACKDROP ====== */
.rf-backdrop[b-sbbiaz5xg0] {
    position: fixed;
    inset: 0;
    background: rgba(2,6,23,.62);
    backdrop-filter: blur(6px);
    z-index: 4000;
}

/* ====== MODAL ====== */
.rf-modal[b-sbbiaz5xg0] {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: min(1320px, 95vw);
    height: min(86vh, 860px);
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    border-radius: 24px;
    box-shadow: 0 30px 90px rgba(0,0,0,.34);
    border: 1px solid rgba(37,99,235,.18);
    z-index: 4010;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Si tienes un modal preview interno */
.rf-preview[b-sbbiaz5xg0] {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: min(1100px, 95vw);
    height: min(86vh, 860px);
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 30px 90px rgba(0,0,0,.34);
    border: 1px solid rgba(59,130,246,.18);
    z-index: 4020;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ====== HEADER ====== */
.rf-header[b-sbbiaz5xg0] {
    padding: 18px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(15,23,42,.14);
    background: linear-gradient(135deg, #0b1220, #122a57);
    color: #ffffff;
}

.rf-title[b-sbbiaz5xg0] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 380px;
}

.rf-h1[b-sbbiaz5xg0] {
    font-weight: 950;
    font-size: 26px;
    letter-spacing: .2px;
    color: #ffffff;
}

.rf-h2[b-sbbiaz5xg0] {
    opacity: .92;
    font-size: 16px;
    margin-top: 4px;
    color: rgba(255,255,255,.86);
    font-weight: 700;
}

/* ====== BADGES (Sorteo / Juego / Fechas) ====== */
.rf-badgebar[b-sbbiaz5xg0] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.rf-badge[b-sbbiaz5xg0] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 14px;
    border: 1px solid rgba(255,255,255,.20);
    background: rgba(255,255,255,.10);
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(0,0,0,.18);
}

.rf-badge-sorteo[b-sbbiaz5xg0] {
    background: rgba(34,197,94,.14);
    border-color: rgba(34,197,94,.30);
}

.rf-badge-juego[b-sbbiaz5xg0] {
    background: rgba(59,130,246,.16);
    border-color: rgba(59,130,246,.34);
}

.rf-badge-fechas[b-sbbiaz5xg0] {
    background: rgba(251,191,36,.16);
    border-color: rgba(251,191,36,.34);
}

/* ====== HEADER RIGHT ====== */
.rf-header-right[b-sbbiaz5xg0] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ====== BOTÓN CERRAR ====== */
.rf-close[b-sbbiaz5xg0] {
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.12);
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
    padding: 9px 12px;
    border-radius: 14px;
    box-shadow: 0 12px 24px rgba(0,0,0,.18);
    transition: transform .12s ease, box-shadow .12s ease;
}

    .rf-close:hover[b-sbbiaz5xg0] {
        transform: translateY(-1px);
        box-shadow: 0 16px 30px rgba(0,0,0,.24);
    }

/* ====== TOOLBAR (si usas recargar) ====== */
.rf-toolbar[b-sbbiaz5xg0] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(15,23,42,.14);
    background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.rf-mini[b-sbbiaz5xg0] {
    border: 1px solid rgba(15,23,42,.18);
    background: linear-gradient(180deg, #ffffff, #f6f7fb);
    border-radius: 14px;
    padding: 10px 14px;
    font-weight: 950;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(0,0,0,.10);
    transition: transform .12s ease, box-shadow .12s ease;
}

    .rf-mini:hover[b-sbbiaz5xg0] {
        transform: translateY(-1px);
        box-shadow: 0 14px 26px rgba(0,0,0,.14);
    }

/* ====== BODY ====== */
.rf-body[b-sbbiaz5xg0] {
    padding: 18px 18px;
    overflow: auto;
    flex: 1;
    background: radial-gradient(1200px 600px at 20% 0%, rgba(59,130,246,.10), transparent 60%), radial-gradient(900px 500px at 90% 30%, rgba(34,197,94,.10), transparent 60%), #f4f7ff;
}

    .rf-body[b-sbbiaz5xg0]::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    .rf-body[b-sbbiaz5xg0]::-webkit-scrollbar-thumb {
        background: rgba(15,23,42,.22);
        border-radius: 12px;
    }

    .rf-body[b-sbbiaz5xg0]::-webkit-scrollbar-track {
        background: transparent;
    }

.rf-loading[b-sbbiaz5xg0],
.rf-empty[b-sbbiaz5xg0] {
    padding: 14px;
    font-weight: 900;
    font-size: 18px;
    color: #0f172a;
    opacity: .95;
    text-align: center;
}

/* ====== TABLE ====== */
.rf-table[b-sbbiaz5xg0] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rf-row[b-sbbiaz5xg0] {
    display: grid;
    /* ajusta columnas a tu contenido real */
    grid-template-columns: 140px 160px 220px 70px;
    align-items: center;
    gap: 12px;
    padding: 16px 16px;
    border-radius: 18px;
    border: 1px solid rgba(15,23,42,.16);
    background: linear-gradient(180deg, #ffffff, #fbfdff);
    box-shadow: 0 10px 24px rgba(15,23,42,.07);
    color: #0f172a;
    font-size: 16px;
    font-weight: 750;
}

    .rf-row:hover[b-sbbiaz5xg0] {
        border-color: rgba(59,130,246,.35);
        box-shadow: 0 16px 34px rgba(59,130,246,.12);
    }

.rf-head[b-sbbiaz5xg0] {
    background: linear-gradient(180deg, #e8f0ff, #f4f7ff);
    font-weight: 950;
    font-size: 15px;
    letter-spacing: .3px;
    position: sticky;
    top: 0;
    z-index: 2;
    border-color: rgba(59,130,246,.22);
    color: #0f172a;
}

.rf-ticket[b-sbbiaz5xg0] {
    font-weight: 950;
    color: #0f172a;
}

/* Acciones */
.rf-col-actions[b-sbbiaz5xg0] {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.rf-iconbtn[b-sbbiaz5xg0] {
    border: 1px solid rgba(15,23,42,.18);
    background: linear-gradient(180deg, #ffffff, #f6f7fb);
    border-radius: 14px;
    padding: 10px 14px;
    font-weight: 950;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(0,0,0,.10);
    transition: transform .12s ease, box-shadow .12s ease;
}

    .rf-iconbtn:hover[b-sbbiaz5xg0] {
        transform: translateY(-1px);
        box-shadow: 0 14px 26px rgba(0,0,0,.14);
    }

/* ====== FOOTER ====== */
.rf-footer[b-sbbiaz5xg0] {
    padding: 14px 18px;
    border-top: 1px solid rgba(15,23,42,.14);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.rf-btn[b-sbbiaz5xg0] {
    border: none;
    border-radius: 16px;
    padding: 12px 18px;
    font-weight: 950;
    font-size: 15px;
    cursor: pointer;
    background: linear-gradient(180deg, #0f172a, #0b1220);
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(15,23,42,.22);
    transition: transform .12s ease, box-shadow .12s ease;
}

    .rf-btn:hover[b-sbbiaz5xg0] {
        transform: translateY(-1px);
        box-shadow: 0 18px 34px rgba(15,23,42,.26);
    }

.rf-btn-sec[b-sbbiaz5xg0] {
    background: linear-gradient(180deg, #e5e7eb, #dfe3ea);
    color: #111827;
    box-shadow: none;
}

/* ====== IFRAME PREVIEW ====== */
.rf-iframe[b-sbbiaz5xg0] {
    width: 100%;
    height: 700px; /* ⬅ más alto */
    border: 0;
    /* 🔍 ZOOM visual del ticket */
    zoom: 1.90; /* ⬅ AUMENTA tamaño (1.25–1.5 recomendado) */
}

.rf-ticket-preview-wrap[b-sbbiaz5xg0] {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 18px;
}

.rf-ticket-preview[b-sbbiaz5xg0] {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0,0,0,.18);
    border: 1px solid rgba(15,23,42,.15);
    padding: 10px 8px;
}

/* _content/SistemaLoteriaDashboard/Components/Ventas/ReimpresionTiemposModal.razor.rz.scp.css */
.rt-backdrop[b-zgnwole1vp] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 9998;
}

.rt-modal[b-zgnwole1vp] {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: min(1050px, 95vw);
    max-height: 92vh;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* ✅ borde más oscuro para que destaque */
    border: 1px solid #7ea6df;
}

.rt-header[b-zgnwole1vp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: #d8e7ff;
    /* ✅ borde más oscuro */
    border-bottom: 1px solid #7ea6df;
}

.rt-title[b-zgnwole1vp] {
    display: flex;
    gap: 10px;
    align-items: center;
}

.rt-icon[b-zgnwole1vp] {
    font-size: 22px;
}

.rt-h1[b-zgnwole1vp] {
    font-weight: 900;
    color: #0b3b91;
    font-size: 18px;
}

.rt-h2[b-zgnwole1vp] {
    font-weight: 700;
    color: #0b3b91;
    opacity: .85;
    font-size: 13px;
}

.rt-close[b-zgnwole1vp] {
    width: 34px;
    height: 34px;
    border: 1px solid #7ea6df; /* ✅ */
    border-radius: 10px;
    background: #ffffff;
    cursor: pointer;
    font-weight: 900;
}

.rt-tools[b-zgnwole1vp] {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    background: #f6f9ff;
    /* ✅ borde más oscuro */
    border-bottom: 1px solid #7ea6df;
    flex-wrap: wrap;
    align-items: flex-end;
}

.rt-field[b-zgnwole1vp] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .rt-field label[b-zgnwole1vp] {
        font-size: 12px;
        font-weight: 800;
        color: #153e75;
    }

/* ✅ Fecha más grande */
.rt-date .rt-input[b-zgnwole1vp] {
    height: 44px;
    font-size: 16px;
    font-weight: 800;
    padding: 0 12px;
}

/* ✅ inputs con borde más oscuro */
.rt-input[b-zgnwole1vp] {
    height: 38px;
    border: 1px solid #7ea6df;
    border-radius: 10px;
    padding: 0 10px;
    outline: none;
}

    .rt-input:focus[b-zgnwole1vp] {
        border-color: #1d6fe8;
        box-shadow: 0 0 0 3px rgba(29,111,232,.18);
    }

/* ✅ BUSCADOR: input pequeño y botón al lado */
.rt-buscar[b-zgnwole1vp] {
    flex: 1;
    min-width: 320px;
    display: flex;
    flex-direction: column;
}

.rt-buscar-row[b-zgnwole1vp] {
    display: flex;
    gap: 10px;
    align-items: center;
}

.rt-searchbox[b-zgnwole1vp] {
    flex: 0 1 420px; /* ✅ no tan grande */
    height: 34px; /* ✅ más pequeño */
    font-size: 13px;
    padding: 0 10px;
}

/* ✅ botón buscar cuadrado */
.rt-btn[b-zgnwole1vp] {
    height: 34px;
    width: 42px;
    border: 1px solid #0f55bf; /* borde para que se note */
    border-radius: 10px;
    background: #1d6fe8;
    color: #fff;
    font-weight: 900;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .rt-btn span[b-zgnwole1vp] {
        display: none; /* ✅ ocultamos texto si lo tienes */
    }

    .rt-btn i[b-zgnwole1vp], .rt-btn .rt-btn-ico[b-zgnwole1vp] {
        font-size: 16px; /* ✅ icono visible */
        line-height: 1;
    }

.rt-body[b-zgnwole1vp] {
    padding: 12px 16px;
    overflow: auto;
}

.rt-loading[b-zgnwole1vp], .rt-empty[b-zgnwole1vp] {
    padding: 18px;
    border: 1px dashed #7ea6df; /* ✅ */
    border-radius: 12px;
    background: #fbfdff;
    color: #153e75;
    font-weight: 800;
}

.rt-table[b-zgnwole1vp] {
    width: 100%;
}

/* ✅ filas con bordes más oscuros */
.rt-row[b-zgnwole1vp] {
    display: grid;
    gap: 0;
    align-items: center;
    border: 1px solid #7ea6df; /* ✅ */
    border-radius: 10px;
    margin-bottom: 8px;
    overflow: hidden;
    cursor: pointer;
}

/* =========================================================
   ✅ COLUMNAS CORRECTAS según modo (SIN/CON REVENTADO)
   - rt-norm  = 5 columnas
   - rt-rvta  = 6 columnas
   ========================================================= */

/* SIN Reventado: #Ticket | Total Base | Tipo Sorteo | Fecha | Botón */
.rt-table.rt-norm .rt-row[b-zgnwole1vp] {
    grid-template-columns: 110px 140px 2.3fr 140px 44px;
}

/* CON Reventado: #Ticket | Total Base | Total Rvta | Tipo Sorteo | Fecha | Botón */
.rt-table.rt-rvta .rt-row[b-zgnwole1vp] {
    grid-template-columns: 110px 120px 120px 2.1fr 140px 44px;
}

    /* =========================================================
   ✅ Tipo Sorteo en 1 sola línea (sin brincos)
   ========================================================= */
    .rt-table.rt-norm .rt-row > div:nth-child(3)[b-zgnwole1vp],
    .rt-table.rt-rvta .rt-row > div:nth-child(4)[b-zgnwole1vp] {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Fecha también sin brincos */
    .rt-table.rt-norm .rt-row > div:nth-child(4)[b-zgnwole1vp],
    .rt-table.rt-rvta .rt-row > div:nth-child(5)[b-zgnwole1vp] {
        white-space: nowrap;
    }

/* =========================================================
   ✅ Última columna (botón imprimir) MUCHO más pequeña
   ========================================================= */
.rt-col-print[b-zgnwole1vp] {
    justify-content: center;
    align-items: center;
}

.rt-print[b-zgnwole1vp] {
    width: 28px;
    height: 26px;
    border-radius: 7px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

/* Un poco menos de padding en la última celda (para que no se vea “gorda”) */
.rt-row > div:last-child[b-zgnwole1vp] {
    padding: 6px 6px;
}

.rt-head[b-zgnwole1vp] {
    background: #1b73d1;
    color: #fff;
    font-weight: 900;
    cursor: default;
    border-color: #1b73d1;
}

.rt-row > div[b-zgnwole1vp] {
    padding: 10px 10px;
    background: #fff;
    border-right: 1px solid #d0def4; /* ✅ separadores un poquito más notables */
}

    .rt-row > div:last-child[b-zgnwole1vp] {
        border-right: none;
    }

.rt-head > div[b-zgnwole1vp] {
    background: transparent;
    border-right: 1px solid rgba(255,255,255,.25);
}

/* ✅ selección MUY visible */
/* ✅ SELECCIÓN CLARAMENTE VISIBLE */
.rt-row.rt-selected[b-zgnwole1vp] {
    background: #cfe0ff; /* fondo fuerte */
    border-color: #1d6fe8; /* borde azul intenso */
    box-shadow: inset 0 0 0 2px #1d6fe8, /* borde interno */
    0 4px 12px rgba(29,111,232,.35); /* sombra externa */
}

    /* ✅ Celdas internas también se resaltan */
    .rt-row.rt-selected > div[b-zgnwole1vp] {
        background: #e8f0ff !important;
        font-weight: 900;
        color: #0b3b91;
    }

    /* ✅ Barra lateral de selección */
    .rt-row.rt-selected[b-zgnwole1vp]::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 6px;
        background: #1d6fe8;
    }



/* ✅ hover para ver mejor el foco */
.rt-row:not(.rt-head):hover[b-zgnwole1vp] {
    outline: 2px solid rgba(29,111,232,.20);
}

.rt-col-print[b-zgnwole1vp] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.rt-print[b-zgnwole1vp] {
    width: 36px;
    height: 30px;
    border: 1px solid #1b8a35; /* ✅ */
    border-radius: 8px;
    background: #33b14a;
    color: #fff;
    cursor: pointer;
}

.rt-hide[b-zgnwole1vp] {
    display: none !important;
}

.rt-footer[b-zgnwole1vp] {
    padding: 12px 16px;
    border-top: 1px solid #7ea6df; /* ✅ */
    display: flex;
    justify-content: flex-end;
    background: #fff;
}

.rt-btn-sec[b-zgnwole1vp] {
    background: #e9f1ff;
    color: #0b3b91;
    border: 1px solid #7ea6df;
}

/* ✅ Buscador: número más grande + negrita */
.rt-searchbox[b-zgnwole1vp] {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .3px;
}

/* ✅ Botón buscar: más pequeño y cuadrado */
.rt-buscar-row .rt-btn[b-zgnwole1vp] {
    width: 38px;
    min-width: 38px;
    padding: 0;
}

/* ✅ Bordes más oscuros para que se noten */
.rt-row[b-zgnwole1vp] {
    border-color: #a9bddf;
    position: relative;
}

    .rt-row > div[b-zgnwole1vp] {
        border-right: 1px solid #a9bddf;
    }

        .rt-row > div:last-child[b-zgnwole1vp] {
            border-right: none;
        }

    .rt-row.rt-selected[b-zgnwole1vp]::before {
        pointer-events: none;
    }

/* _content/SistemaLoteriaDashboard/Components/Ventas/VentasMonazos.razor.rz.scp.css */
/* ==========================================================
   🧩 LAYOUT PRINCIPAL
   ========================================================== */
/* ==========================================================
   🧩 LAYOUT PRINCIPAL (3 COLUMNAS reales)
   ========================================================== */
:root[b-lhcb8y1bi1] {
    --ancho-prohibidos: 360px;
    --ancho-noticias: 360px;
    --ancho-izquierda: 700px;
}

.ventas-contenido[b-lhcb8y1bi1] {
    display: grid;
    grid-template-columns: minmax(640px, var(--ancho-izquierda)) minmax(280px, var(--ancho-prohibidos)) minmax(280px, var(--ancho-noticias));
    gap: 24px;
    align-items: start;
    max-width: 1400px;
    margin: 12px auto 0;
    padding: 0 20px; /* ✅ iguala con encabezado (que usa 20px) */
    width: 100%;
    box-sizing: border-box;
}


/* ==========================================================
   🧩 PANEL IZQUIERDO (VENTAS)
   ========================================================== */
.ventas-izquierda[b-lhcb8y1bi1] {
    flex: 1;
    min-width: 400px;
    max-width: 700px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    padding: 15px;
    box-sizing: border-box;
    min-height: 300px;
    margin: 0;
}

/* ====== LISTA (contenedor con scroll) ====== */
.ventas-lista[b-lhcb8y1bi1] {
    position: relative;
    border: 2px solid #e0e6f1;
    border-radius: 8px;
    background: #fff;
    max-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
    padding: 0;
}

/* ====== GRID UNIFICADO (cabecera + filas) ====== */
.tabla-lista[b-lhcb8y1bi1] {
    display: grid;
    grid-template-columns: 120px 170px 56px;
    width: 100%;
    row-gap: 0;
    justify-content: center;
    margin: 0 auto;
}

    /* Modo BASE con reventado: columnas flexibles para que no se salgan con zoom */
    .tabla-lista.reventado[b-lhcb8y1bi1] {
        grid-template-columns: minmax(90px, 1.1fr) /* N°  */
        minmax(120px, 1.4fr) /* Monto normal */
        minmax(120px, 1.4fr) /* Monto reventado */
        minmax(40px, 0.6fr); /* Botón X */
    }

/* Cabecera y filas comparten el MISMO grid */
.fila-cabecera[b-lhcb8y1bi1],
.fila-item[b-lhcb8y1bi1] {
    display: contents;
}

/* ====== CELDAS ====== */
.celda[b-lhcb8y1bi1] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
    padding: 10px 12px;
    min-height: 44px;
    font-weight: 800;
    font-size: 20px;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    border-bottom: 1px solid #e6ecf6;
}

    /* CABECERA (títulos centrados y más grandes) */
    .celda.titulo[b-lhcb8y1bi1] {
        position: sticky;
        top: 0;
        z-index: 10;
        background: #f7f9fc;
        border-bottom: 2px solid #e0e6f1;
        box-shadow: 0 1px 0 #e0e6f1;
        text-align: center;
        justify-content: center;
        align-items: center;
        font-weight: 900;
        font-size: 22px;
        color: #1c2b4d;
        height: 48px;
    }

        /* La celda de cabecera de la columna de la X (vacía pero sticky) */
        .celda.titulo.th-x[b-lhcb8y1bi1] {
            background: #f7f9fc;
            pointer-events: none;
        }

/* Celdas normales (centradas igual) */
.celda[b-lhcb8y1bi1],
.fila-item .numero[b-lhcb8y1bi1],
.fila-item .monto[b-lhcb8y1bi1] {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 800;
    font-size: 20px;
    height: 48px;
}

/* Guion perfectamente centrado entre Número y Monto */
.fila-item .celda.numero[b-lhcb8y1bi1]::after {
    content: "–";
    color: #76acfe;
    font-weight: 600;
    font-size: 20px;
    position: relative;
    left: 65%;
    transform: translateX(-50%);
    top: 25%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* ========== BOTÓN ELIMINAR (moderno y elegante) ========== */
.btn-eliminar[b-lhcb8y1bi1] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(180deg,#ff5c5c,#d93636);
    box-shadow: 0 6px 14px rgba(217,54,54,.25), inset 0 1px 0 rgba(255,255,255,.28);
    cursor: pointer;
    padding: 0;
    font-size: 0;
    line-height: 1;
    margin: auto;
    z-index: 1;
    transition: transform .12s ease, box-shadow .18s ease, filter .18s ease, background .18s ease;
}

    .btn-eliminar[b-lhcb8y1bi1]::before,
    .btn-eliminar[b-lhcb8y1bi1]::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 14px;
        height: 2px;
        background: #fff;
        border-radius: 2px;
        transform-origin: center;
        box-shadow: 0 0 1px rgba(0,0,0,.25);
    }

    .btn-eliminar[b-lhcb8y1bi1]::before {
        transform: translate(-50%,-50%) rotate(45deg);
    }

    .btn-eliminar[b-lhcb8y1bi1]::after {
        transform: translate(-50%,-50%) rotate(-45deg);
    }

    .btn-eliminar:hover[b-lhcb8y1bi1] {
        transform: translateY(-1px) scale(1.03);
        filter: saturate(1.06);
        box-shadow: 0 10px 20px rgba(217,54,54,.28), inset 0 1px 0 rgba(255,255,255,.32);
    }

    .btn-eliminar:active[b-lhcb8y1bi1] {
        transform: translateY(0) scale(.97);
        box-shadow: 0 4px 10px rgba(217,54,54,.22), inset 0 1px 0 rgba(255,255,255,.24);
    }

    .btn-eliminar:focus-visible[b-lhcb8y1bi1] {
        outline: 3px solid rgba(25,118,210,.35);
        outline-offset: 2px;
        box-shadow: 0 0 0 4px rgba(25,118,210,.15), 0 8px 18px rgba(217,54,54,.25), inset 0 1px 0 rgba(255,255,255,.28);
    }

@media (prefers-reduced-motion: reduce) {
    .btn-eliminar[b-lhcb8y1bi1] {
        transition: none;
    }
}

/* ====== SEPARADOR ====== */
.separador[b-lhcb8y1bi1] {
    border: none;
    border-top: 2px solid #d9e0ef;
    margin: 8px 0;
}

/* ====== CAMPOS DE ENTRADA ====== */
.input-linea[b-lhcb8y1bi1] {
    display: flex;
    gap: 10px;
    margin: 10px 0;
    justify-content: center;
    /* 👇 NUEVO: si con 3 cajas no cabe, que hagan otra fila
       en vez de salirse del panel al hacer zoom */
    flex-wrap: wrap;
    max-width: 100%;
}

.input-pequeno[b-lhcb8y1bi1] {
    padding: 12px;
    font-size: 24px;
    font-weight: 800;
    border: 2px solid #ccc;
    border-radius: 8px;
    text-align: center;
    transition: .2s;
    /* 👇 NUEVO: ancho base, pero puede encogerse si hace falta */
    flex: 1 1 120px;
    max-width: 210px;
}

    .input-pequeno:focus[b-lhcb8y1bi1] {
        border-color: #1e88e5;
        box-shadow: 0 0 5px rgba(30,136,229,.4);
        outline: none;
    }

.monto-corto[b-lhcb8y1bi1] {
    width: 120px;
}

.numero-corto[b-lhcb8y1bi1] {
    width: 120px;
}

/* ====== BOTÓN GUARDAR / IMPRIMIR ====== */
.btn-guardar[b-lhcb8y1bi1] {
    background: linear-gradient(90deg,#1976d2,#1e88e5);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px 22px;
    cursor: pointer;
    font-weight: 800;
    font-size: 16px;
    transition: .2s;
}

    .btn-guardar:hover[b-lhcb8y1bi1] {
        background: linear-gradient(90deg,#1565c0,#1976d2);
    }

/* ====== TOTAL ====== */
.total[b-lhcb8y1bi1] {
    font-size: 22px;
    font-weight: 800;
    text-align: right;
    color: #003c8f;
    margin-top: 10px;
}

@media (max-width:520px) {
    .tabla-lista[b-lhcb8y1bi1] {
        grid-template-columns: 100px 140px 46px;
    }

        .tabla-lista.reventado[b-lhcb8y1bi1] {
            grid-template-columns: minmax(70px, 1.1fr) /* N° */
            minmax(90px, 1.3fr) /* Monto */
            minmax(90px, 1.3fr) /* Monto R */
            minmax(34px, 0.5fr); /* X */
        }

    .celda[b-lhcb8y1bi1] {
        font-size: 18px;
    }
}

/* ===== Panel de Números Prohibidos con título rojo, fecha y ajuste dinámico ===== */
.numeros-prohibidos-panel[b-lhcb8y1bi1] {
    align-self: flex-start;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    padding: 16px 24px;
    border: 2px solid #c62828;
    text-align: center;
    display: inline-block;
    transition: all 0.3s ease;
    width: auto;
    height: auto;
    min-width: 240px;
}

    .numeros-prohibidos-panel h4[b-lhcb8y1bi1] {
        color: #c62828;
        font-weight: 800;
        font-size: 1.45em;
        margin: 0 0 8px 0;
    }

.np-fecha[b-lhcb8y1bi1] {
    font-size: 1.1em;
    font-weight: 700;
    color: #333;
    margin-top: 2px;
    margin-bottom: 10px;
    text-transform: capitalize;
}

.numeros-prohibidos[b-lhcb8y1bi1] {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

    .numeros-prohibidos li[b-lhcb8y1bi1] {
        color: #e53935;
        font-weight: 700;
        background: #ffebee;
        padding: 6px 12px;
        border-radius: 8px;
        min-width: 40px;
        text-align: center;
        font-size: 1.15em;
        transition: transform 0.2s ease, background 0.2s ease;
    }

        .numeros-prohibidos li:hover[b-lhcb8y1bi1] {
            background: #ffcdd2;
            transform: scale(1.08);
        }

/* ==========================================================
   🧩 ENCABEZADO
   ========================================================== */
.ventas-encabezado[b-lhcb8y1bi1] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 15px 25px 25px;
    background: linear-gradient(90deg, #f7f9fb, #e3f2fd);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin: 10px 20px 0;
}

.titulo-sorteo[b-lhcb8y1bi1] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    position: relative;
}

.sorteo-selector-titulo[b-lhcb8y1bi1] {
    position: relative;
    cursor: pointer;
    user-select: none;
    display: inline-block;
}

.sorteo-nombre[b-lhcb8y1bi1] {
    font-size: 2.2em;
    font-weight: 800;
    color: #004aad;
    letter-spacing: 1px;
    margin: 0;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.15);
    animation: colorCambio-b-lhcb8y1bi1 4s linear infinite;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s ease;
}

    .sorteo-nombre:hover[b-lhcb8y1bi1] {
        transform: scale(1.02);
    }

.flecha[b-lhcb8y1bi1] {
    font-size: 0.6em;
    margin-left: 6px;
    transition: transform 0.3s ease;
}

.sorteo-selector-titulo:hover .flecha[b-lhcb8y1bi1] {
    transform: rotate(180deg);
}

.menu-sorteos[b-lhcb8y1bi1] {
    position: absolute;
    top: 100%;
    left: 0;
    transform: none;
    width: 220px;
    background: #ffffff;
    border: 2px solid #cfd8dc;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    margin-top: 8px;
    padding: 6px 0;
    list-style: none;
    z-index: 20;
    animation: aparecerMenu-b-lhcb8y1bi1 0.2s ease-out forwards;
}

    .menu-sorteos li[b-lhcb8y1bi1] {
        font-weight: 700;
        color: #0d47a1;
        font-size: 1.1em;
        padding: 10px 16px;
        text-align: center;
        transition: all 0.2s ease;
        border-radius: 6px;
    }

        .menu-sorteos li:hover[b-lhcb8y1bi1] {
            background: #e3f2fd;
            color: #003c8f;
            transform: scale(1.03);
        }

        .menu-sorteos li.activo[b-lhcb8y1bi1] {
            background: #bbdefb;
            color: #0d47a1;
        }

@keyframes aparecerMenu-b-lhcb8y1bi1 {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes colorCambio-b-lhcb8y1bi1 {
    0% {
        color: #e53935;
    }

    25% {
        color: #f9a825;
    }

    50% {
        color: #1e88e5;
    }

    75% {
        color: #43a047;
    }

    100% {
        color: #e53935;
    }
}

.hora-info[b-lhcb8y1bi1] {
    font-size: 1.05em;
    color: #0d47a1;
    font-weight: 600;
}

    .hora-info strong[b-lhcb8y1bi1] {
        color: #1a237e;
    }

.hora-numero[b-lhcb8y1bi1] {
    font-size: 1.4em;
    font-weight: 700;
    color: #0d47a1;
}

/* === Fecha centrada === */
.fecha-centro[b-lhcb8y1bi1] {
    position: absolute;
    top: 85px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.fecha-texto[b-lhcb8y1bi1] {
    font-size: 1.35em;
    font-weight: 800;
    color: #2c3e50;
    text-transform: capitalize;
}

.hora-texto[b-lhcb8y1bi1] {
    font-size: 1.15em;
    font-weight: 700;
    color: #1565c0;
    letter-spacing: 1px;
}

/* ==========================================================
   🧩 BOTONES SECUNDARIOS
   ========================================================== */
.acciones-internas[b-lhcb8y1bi1] {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
}

.btn-secundario[b-lhcb8y1bi1] {
    background: linear-gradient(90deg, #e3f2fd, #bbdefb);
    color: #0d47a1;
    border: 1px solid #64b5f6;
    border-radius: 8px;
    padding: 8px 14px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    transition: 0.2s;
}

    .btn-secundario:hover[b-lhcb8y1bi1] {
        background: linear-gradient(90deg, #bbdefb, #90caf9);
    }

.btn-guardar:active[b-lhcb8y1bi1],
.menu-btn:active[b-lhcb8y1bi1] {
    transform: scale(0.97);
}

/* ===============================
   🎯 CONTADOR DE TIEMPO RESTANTE
   =============================== */
.ventas-encabezado .contador[b-lhcb8y1bi1],
.contador[b-lhcb8y1bi1] {
    font-size: 1.5em;
    font-weight: 800;
    color: #d32f2f;
    background: none;
    border-radius: 0;
    padding: 0;
    min-width: 85px;
    text-align: center;
    transition: all 0.3s ease;
}

    .ventas-encabezado .contador.critico[b-lhcb8y1bi1],
    .contador.critico[b-lhcb8y1bi1] {
        animation: parpadeoRojo-b-lhcb8y1bi1 1s infinite alternate ease-in-out;
    }

@keyframes parpadeoRojo-b-lhcb8y1bi1 {
    0% {
        color: #d32f2f;
        transform: scale(1);
    }

    50% {
        color: #ff0000;
        transform: scale(1.05);
    }

    100% {
        color: #b71c1c;
        transform: scale(1);
    }
}
/* ===========================
   PANEL DE NOTICIAS (derecha)
   =========================== */
.panel-noticias[b-lhcb8y1bi1] {
    position: relative;
    width: 100%; /* ✅ que use la columna, no 520px fijo */
    max-width: 100%;
    background: #f7fbff;
    border-radius: 12px;
    padding: 14px 16px;
    height: auto;
    z-index: 10;
    margin-top: 0; /* ✅ nada raro */
    margin-left: 0; /* ✅ nada de empujar */
    box-sizing: border-box;
}

    .panel-noticias .header[b-lhcb8y1bi1] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 10px;
    }

        .panel-noticias .header h3[b-lhcb8y1bi1] {
            margin: 0;
            font-size: 1.25rem;
            font-weight: 900;
            color: #0d47a1;
            letter-spacing: .3px;
        }

    .panel-noticias .acciones[b-lhcb8y1bi1] {
        display: flex;
        gap: 8px;
    }

.btn-icono[b-lhcb8y1bi1] {
    border: 1px solid #c5d6f2;
    background: #e9f2ff;
    border-radius: 8px;
    padding: 6px 10px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s;
}

    .btn-icono:hover[b-lhcb8y1bi1] {
        background: #d9eaff;
    }

.noticias-scroll[b-lhcb8y1bi1] {
    max-height: 520px;
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-gutter: stable;
}

.noticia-card[b-lhcb8y1bi1] {
    background: #ffffff;
    border: 2px solid #e6edf8;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.04);
    transition: transform .15s ease, box-shadow .2s ease;
}

    .noticia-card:hover[b-lhcb8y1bi1] {
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    }

.noticia-top[b-lhcb8y1bi1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.noticia-titulo[b-lhcb8y1bi1] {
    font-weight: 900;
    font-size: 1.05rem;
    color: #153e75;
    margin: 0;
}

.badges[b-lhcb8y1bi1] {
    display: flex;
    gap: 6px;
    align-items: center;
}

.badge[b-lhcb8y1bi1] {
    padding: 3px 8px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
}

.badge-todos[b-lhcb8y1bi1] {
    background: #e8f5e9;
    color: #1b5e20;
    border: 1px solid #c8e6c9;
}

.badge-priv[b-lhcb8y1bi1] {
    background: #fff3e0;
    color: #e65100;
    border: 1px solid #ffe0b2;
}

.badge-fecha[b-lhcb8y1bi1] {
    background: #e3f2fd;
    color: #0d47a1;
    border: 1px solid #bbdefb;
}

.noticia-body[b-lhcb8y1bi1] {
    color: #334155;
    line-height: 1.45;
    white-space: pre-wrap;
    margin-bottom: 8px;
}

.noticia-acciones[b-lhcb8y1bi1] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.btn-cerrar[b-lhcb8y1bi1] {
    background: #ffe5e5;
    color: #b71c1c;
    border: 1px solid #ffcdd2;
    border-radius: 8px;
    padding: 6px 10px;
    font-weight: 800;
    cursor: pointer;
    transition: .2s;
}

    .btn-cerrar:hover[b-lhcb8y1bi1] {
        background: #ffcccc;
    }

.noticia-leida[b-lhcb8y1bi1] {
    opacity: .55;
}

.col-prohibidos[b-lhcb8y1bi1] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

:root[b-lhcb8y1bi1] {
    --ancho-prohibidos: 360px;
}

.col-prohibidos .numeros-prohibidos-panel[b-lhcb8y1bi1] {
    width: var(--ancho-prohibidos);
}

.col-prohibidos .acciones-bajo-prohibidos[b-lhcb8y1bi1] {
    width: var(--ancho-prohibidos);
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 20px;
}

/* === Estado bloqueado (sorteo cerrado) === */
.bloqueado[b-lhcb8y1bi1] {
    opacity: 0.6;
    pointer-events: none;
    transition: opacity 0.3s ease;
    position: relative;
}

    .bloqueado[b-lhcb8y1bi1]::after {
        content: "SORTEO CERRADO";
        position: absolute;
        top: 40%;
        left: 0;
        right: 0;
        text-align: center;
        font-weight: bold;
        font-size: 1.1rem;
        color: #b40000;
        background: rgba(255,255,255,0.85);
        border: 2px solid #b40000;
        border-radius: 8px;
        padding: 8px;
        width: 60%;
        margin: 0 auto;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    }

/* ===== MODAL VER LISTA (escala dinámica) ===== */
.modal-overlay[b-lhcb8y1bi1] {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,.45);
    z-index: 99998 !important;
}

.modal-lista[b-lhcb8y1bi1] {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 96vw !important;
    height: 90vh !important;
    background: #eaf3fb;
    border: 1px solid #b6d0e8;
    border-radius: 10px;
    padding: 10px 12px;
    padding-top: 0px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    z-index: 99999 !important;
    box-sizing: border-box;
    /* 🔹 ANTES: overflow: hidden !important; */
    overflow-y: auto !important; /* scroll vertical si hace falta */
    overflow-x: hidden !important; /* evitamos scroll horizontal feo */
}

body.modal-open[b-lhcb8y1bi1] {
    overflow: hidden !important;
}

.modal-close[b-lhcb8y1bi1] {
    border: none;
    background: #ffeded;
    color: #b40000;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    font-size: 20px;
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 2;
}

    .modal-close:hover[b-lhcb8y1bi1] {
        background: #ffd6d6;
    }

/* CONTENEDOR ÚNICO DEL CONTENIDO DE LA LISTA */
#listaCanvas[b-lhcb8y1bi1] {
    width: 100%;
    height: 100%;
    padding: 10px 20px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center; /* centrado horizontal */
    justify-content: flex-start; /* contenido pegado arriba, no al centro */
}

#contentLista[b-lhcb8y1bi1] {
    display: inline-block; /* que mida según su tabla, no que se estire raro */
}

/* ============================
   🧱 ESTRUCTURA MODO NORMAL
   ============================ */
.lista-unica-normal[b-lhcb8y1bi1] {
    width: 100%;
    max-width: 1150px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 0;
}

/* ============================
   🧱 ESTRUCTURA MODO REVENTADO
   ============================ */
.lista-unica-rev[b-lhcb8y1bi1] {
    width: 100%;
    max-width: 1350px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 0;
}

/* === TÍTULO Y FECHA === */
.fila-titulo[b-lhcb8y1bi1] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.titulo-sorteo-modal[b-lhcb8y1bi1] {
    font-weight: 900;
    font-size: 1.6rem;
    color: #c68200;
}

.fecha-modal[b-lhcb8y1bi1] {
    font-weight: 700;
    font-size: 1rem;
    color: #255;
}


/* ============================
   🧮 REJILLA PRINCIPAL
   ============================ */

/* Modo NORMAL: 5 bloques (N° + Monto) = 10 columnas */
.lista-unica-normal .fila-cabecera[b-lhcb8y1bi1],
.lista-unica-normal .fila-numeros[b-lhcb8y1bi1],
.lista-unica-normal .fila-totales-f[b-lhcb8y1bi1] {
    display: grid;
    grid-template-columns: repeat(5, 78px 85px);
    column-gap: 4px;
    row-gap: 4px;
    justify-content: center;
}

/* Modo REVENTADO: 5 bloques (N° + Monto + R) = 15 columnas */
.lista-unica-rev .fila-cabecera[b-lhcb8y1bi1],
.lista-unica-rev .fila-numeros[b-lhcb8y1bi1],
.lista-unica-rev .fila-totales-f-rev[b-lhcb8y1bi1] {
    display: grid;
    grid-template-columns: repeat(5, 64px 95px 95px);
    column-gap: 4px;
    row-gap: 4px;
    justify-content: center;
}

/* ============================
   🎨 CABECERAS (Actualizadas)
   ============================ */

/* 🔵 CABECERA N° */
.h-num[b-lhcb8y1bi1] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0d6efd; /* azul fuerte */
    color: white;
    font-size: 11px;
    font-weight: 900;
    border-radius: 6px;
    border: 1px solid #0a58ca;
    height: 22px;
    box-sizing: border-box;
}

/* 🟢 CABECERA MONTO */
.h-monto[b-lhcb8y1bi1] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #3CB371; /* verde fuerte */
    color: white;
    font-size: 11px;
    font-weight: 900;
    border-radius: 6px;
    border: 1px solid #2e8b57;
    height: 22px;
    box-sizing: border-box;
}

/* 🔴 CABECERA REVENTADO (R) */
.h-monto-rev[b-lhcb8y1bi1] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #E74C3C; /* rojo fuerte */
    color: white;
    font-size: 11px;
    font-weight: 900;
    border-radius: 6px;
    border: 1px solid #c0392b;
    height: 22px;
    box-sizing: border-box;
}

/* ============================
   🎨 CELDAS (N°, Monto, R)
   ============================ */
.celda-num[b-lhcb8y1bi1],
.celda-monto[b-lhcb8y1bi1],
.celda-monto-rev[b-lhcb8y1bi1] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    padding: 0 6px;
    border-radius: 10px;
    height: 22px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Número */
.celda-num[b-lhcb8y1bi1] {
    background: #e4f1fb;
    color: #0a406e;
    border: 1px solid #8db7d8;
}

/* Monto normal */
.celda-monto[b-lhcb8y1bi1] {
    background: #e9f7ef;
    color: #0a5c38;
    border: 1px solid #8cc7a9;
}

/* Monto reventado */
.celda-monto-rev[b-lhcb8y1bi1] {
    background: #faecec;
    color: #b02222;
    border: 1px solid #d3a3a3;
}

/* Números prohibidos en rojo */
.celda-num.prohibido[b-lhcb8y1bi1] {
    color: #d32f2f;
    font-size: 14px;
}

/* ============================================================
   🟦 TOTALES F1..F5 — MODO NORMAL (5 columnas x 2 = 10 celdas)
   Alineado EXACTO como las filas de números
   ============================================================ */
.fila-totales-f[b-lhcb8y1bi1] {
    display: grid;
    grid-template-columns: repeat(10, 1fr); /* 5 pares (label + monto) */
    gap: 4px;
    margin-top: 4px;
}

    .fila-totales-f .label[b-lhcb8y1bi1],
    .fila-totales-f .valor[b-lhcb8y1bi1] {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 26px;
        font-size: 14px;
        font-weight: 950;
        border-radius: 6px;
        box-sizing: border-box;
        padding: 0 6px;
    }

    /* 🔵 Label: "Total F1", "Total F2"... */
    .fila-totales-f .label[b-lhcb8y1bi1] {
        background: #eaf8ff; /* azul clarito */
        color: #0c6aa6; /* azul más fuerte */
        border: 1px dashed #0c6aa6; /* borde punteado */
        white-space: nowrap; /* 👉 evita que se parta en dos líneas */
    }

    /* 🟢 Monto normal */
    .fila-totales-f .valor[b-lhcb8y1bi1] {
        background: #f1fff5; /* verde muy suave */
        color: #0f7a3a; /* verde más fuerte */
        border: 1px dashed #0f7a3a; /* borde punteado */
    }

/* ============================================================
   🔴 TOTALES F1..F5 — MODO REVENTADO (5 columnas x 3 = 15 celdas)
   (Label + Monto Normal + Monto R)
   ============================================================ */
.fila-totales-f-rev[b-lhcb8y1bi1] {
    display: grid;
    grid-template-columns: repeat(15, 1fr); /* 5 grupos x 3 columnas */
    gap: 4px;
    margin-top: 4px;
}

    .fila-totales-f-rev .label[b-lhcb8y1bi1],
    .fila-totales-f-rev .valor-normal[b-lhcb8y1bi1],
    .fila-totales-f-rev .valor-rev[b-lhcb8y1bi1] {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 26px;
        font-size: 14px;
        font-weight: 950;
        border-radius: 6px;
        box-sizing: border-box;
        padding: 0 6px;
    }

    /* 🔵 Label */
    .fila-totales-f-rev .label[b-lhcb8y1bi1] {
        background: #eaf8ff;
        color: #0c6aa6;
        border: 1px dashed #0c6aa6;
        white-space: nowrap; /* 👉 igual: sin salto de línea */
    }

    /* 🟢 Monto normal */
    .fila-totales-f-rev .valor-normal[b-lhcb8y1bi1] {
        background: #f1fff5;
        color: #0f7a3a;
        border: 1px dashed #0f7a3a;
    }

    /* 🔴 Monto reventado */
    .fila-totales-f-rev .valor-rev[b-lhcb8y1bi1] {
        background: #fff5f5;
        color: #c62828;
        border: 1px dashed #c62828;
    }

/* Asegurar que nada se desborde raro */
#listaCanvas > div[b-lhcb8y1bi1] {
    min-width: 0;
    min-height: 0;
}

/* === Popup de error de venta (centrado en la pantalla) === */
.venta-modal-backdrop[b-lhcb8y1bi1] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
}

.venta-modal[b-lhcb8y1bi1] {
    background: #ffffff;
    border-radius: 14px;
    padding: 18px 22px 20px;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.35);
    animation: ventaModalIn-b-lhcb8y1bi1 0.18s ease-out;
    text-align: left;
}

    .venta-modal h3[b-lhcb8y1bi1] {
        margin: 0 0 10px 0;
        font-size: 1.15rem;
        font-weight: 800;
        color: #c62828;
    }

    .venta-modal p[b-lhcb8y1bi1] {
        margin: 0 0 18px 0;
        line-height: 1.4;
        font-size: 0.95rem;
        white-space: pre-line;
        color: #333;
    }

    .venta-modal .btn.ok[b-lhcb8y1bi1] {
        width: 100%;
        font-weight: 600;
    }

@keyframes ventaModalIn-b-lhcb8y1bi1 {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ✅ Número mini para Parley (2 dígitos) */
.numero-mini[b-lhcb8y1bi1] {
    width: 85px !important;
    max-width: 85px !important;
    padding: 10px !important;
    font-size: 20px !important;
    height: 48px;
}

.parley-tabla[b-lhcb8y1bi1] {
    margin-top: 12px;
    border: 1px solid #e6edf8;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.parley-header[b-lhcb8y1bi1] {
    display: grid;
    grid-template-columns: 1fr 180px;
    font-weight: 900;
    background: #f3f7ff;
    border-bottom: 1px solid #e6edf8;
}

.parley-h-num[b-lhcb8y1bi1], .parley-h-monto[b-lhcb8y1bi1] {
    padding: 10px 12px;
}

.parley-row[b-lhcb8y1bi1] {
    display: grid;
    grid-template-columns: 1fr 180px;
    border-bottom: 1px solid #eef3ff;
}

    .parley-row:last-child[b-lhcb8y1bi1] {
        border-bottom: none;
    }

.parley-num[b-lhcb8y1bi1], .parley-monto[b-lhcb8y1bi1] {
    padding: 10px 12px;
    font-weight: 700;
}

.parley-monto[b-lhcb8y1bi1] {
    text-align: right;
}

.parley-vacio[b-lhcb8y1bi1] {
    padding: 14px 12px;
    font-weight: 700;
    opacity: .8;
}

/* =========================
   FECHA VENTA (Parley)
   - mismo estilo que usamos en Tiempos/Restricciones
   ========================= */

.fecha-venta-box[b-lhcb8y1bi1] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e6edf8;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    width: fit-content;
}

.fv-titulo[b-lhcb8y1bi1] {
    font-weight: 900;
    color: #153e75;
    font-size: 1.05rem;
    margin-right: 6px;
}

/* ✅ FECHA GRANDE (igual a Restricciones) */
.fv-xl[b-lhcb8y1bi1] {
    height: 56px !important;
    padding: 10px 14px !important;
    font-size: 1.35rem !important;
    font-weight: 900 !important;
    color: #153e75 !important;
    border: 1px solid #cfe0f5 !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06) !important;
    box-sizing: border-box !important;
    line-height: 1.2 !important;
}

    .fv-xl[b-lhcb8y1bi1]::-webkit-datetime-edit {
        font-size: 1.35rem !important;
        font-weight: 900 !important;
    }

    .fv-xl[b-lhcb8y1bi1]::-webkit-datetime-edit-day-field,
    .fv-xl[b-lhcb8y1bi1]::-webkit-datetime-edit-month-field,
    .fv-xl[b-lhcb8y1bi1]::-webkit-datetime-edit-year-field {
        font-size: 1.35rem !important;
        font-weight: 900 !important;
    }

    .fv-xl[b-lhcb8y1bi1]::-webkit-datetime-edit-text {
        font-size: 1.35rem !important;
        font-weight: 900 !important;
    }

    .fv-xl[b-lhcb8y1bi1]::-webkit-calendar-picker-indicator {
        cursor: pointer;
        opacity: .80;
    }

.fv-hoy[b-lhcb8y1bi1] {
    height: 56px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid #cfe0f5;
    background: #f6f7fb;
    font-weight: 900;
    color: #153e75;
    cursor: pointer;
}

    .fv-hoy:hover[b-lhcb8y1bi1] {
        background: #eef5ff;
        border-color: #98bdf0;
    }

/* ==========================================================
   ✅ FIX ENCABEZADO PARLEY (MISMO DISEÑO QUE TIEMPOS)
   - Centra día/hora como en Tiempos
   - Caja Fecha de venta igual
   - Borde del encabezado más oscuro para que se note más
   ========================================================== */


/* 2) Centro: YA NO absoluto (igual que Tiempos) */
.fecha-centro[b-lhcb8y1bi1] {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 auto !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
}

/* 3) Caja derecha (Fecha de venta) igual que Tiempos: en una sola fila */
.fecha-venta-box[b-lhcb8y1bi1] {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    width: fit-content !important;
    min-width: 0 !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    /* mantiene el estilo que ya usas, solo lo hacemos consistente */
    background: #eef6ff !important;
    border: 1px solid rgba(13, 71, 161, 0.25) !important;
}

/* 4) Input date grande EXACTO (si ya existe en tu Parley, lo refuerza) */
.fv-xl[b-lhcb8y1bi1] {
    height: 56px !important;
    padding: 10px 14px !important;
    font-size: 1.35rem !important;
    font-weight: 900 !important;
    color: #153e75 !important;
    border: 1px solid #cfe0f5 !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06) !important;
    box-sizing: border-box !important;
    line-height: 1.2 !important;
}

    .fv-xl[b-lhcb8y1bi1]::-webkit-datetime-edit,
    .fv-xl[b-lhcb8y1bi1]::-webkit-datetime-edit-day-field,
    .fv-xl[b-lhcb8y1bi1]::-webkit-datetime-edit-month-field,
    .fv-xl[b-lhcb8y1bi1]::-webkit-datetime-edit-year-field,
    .fv-xl[b-lhcb8y1bi1]::-webkit-datetime-edit-text {
        font-size: 1.35rem !important;
        font-weight: 900 !important;
    }

/* 5) Botón Hoy: misma altura que el date */
.fv-hoy[b-lhcb8y1bi1] {
    height: 56px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
}

/* ==========================================================
   ✅ PARLEY: COLUMNA CENTRAL tipo TIEMPOS (reservar espacio)
   y borde más oscuro para que se note más (como pediste)
   ========================================================== */

/* Caja “fantasma” central (equivale visualmente al panel de prohibidos en Tiempos) */
.parley-centro-placeholder[b-lhcb8y1bi1] {
    width: 100%;
    min-height: 92px; /* altura parecida al bloque de prohibidos */
    border: 2px solid #7f8fa8; /* ✅ borde más oscuro */
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 3px 10px rgba(0,0,0,0.06);
}





/* 5) Botones debajo del placeholder, dentro de la misma columna */
.col-prohibidos .acciones-bajo-prohibidos[b-lhcb8y1bi1] {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important; /* si no caben, bajan dentro de la misma columna */
    gap: 10px !important;
    align-items: center !important;
    margin-top: 0 !important;
}


/* ==========================================================
   ✅ PATCH FINAL PARLEY (NO BORRA NADA)
   - Alinea botones con "Guardar / Imprimir"
   - Quita cuadro blanco (sin eliminar diseños)
   - Refuerza borde del panel noticias sin cambiar su estilo
   ========================================================== */

/* 1) La columna central mantiene su ancho como Tiempos */
.ventas-contenido > .col-prohibidos[b-lhcb8y1bi1] {
    flex: 0 0 var(--ancho-prohibidos);
    min-width: var(--ancho-prohibidos);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 0 !important; /* 🔒 NO empujar la columna completa */
}

/* 3) Botones: pegados justo debajo del placeholder invisible */
.col-prohibidos .acciones-bajo-prohibidos[b-lhcb8y1bi1] {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
    margin-top: 0 !important; /* ✅ QUITA el margin-top:20px que los baja raro */
}

/* ✅ MONAZOS: 3 dígitos (D1/D2/D3) — mini, uno por caja */
.digito-mini[b-lhcb8y1bi1] {
    width: 70px !important;
    max-width: 70px !important;
    padding: 10px !important;
    font-size: 22px !important;
    height: 48px;
    text-align: center;
    font-weight: 900;
}

@media (max-width: 520px) {
    .digito-mini[b-lhcb8y1bi1] {
        width: 60px !important;
        max-width: 60px !important;
        font-size: 20px !important;
    }
}

/* ✅ Flecha rota cuando el menú está abierto */
.flecha.rotado[b-lhcb8y1bi1] {
    transform: rotate(180deg);
}

/* Scroll solo cuando pase de 4 líneas */
#listaScroll[b-lhcb8y1bi1] {
    overflow-y: auto;
    max-height: 260px; /* AJUSTA: sube/baja hasta que 4 líneas queden visibles */
}

/* Monto centrado en su propia fila */
.input-monto-centro[b-lhcb8y1bi1] {
    justify-content: center;
}

/* Acciones abajo: Vender - Selector - Agregar */
.input-acciones-abajo[b-lhcb8y1bi1] {
    justify-content: center;
    gap: 10px;
}


/* FILA DE MODALIDAD: centrada y más grande */
.modalidad-radio-row[b-lhcb8y1bi1] {
    display: flex;
    justify-content: center; /* ✅ centrados */
    align-items: center;
    gap: 18px; /* más separación */
    margin: 10px 0 14px; /* más aire */
    width: 100%;
}

/* Cada opción más grande */
.modalidad-radio-item[b-lhcb8y1bi1] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    cursor: pointer;
    user-select: none;
}

/* circulito más grande */
.radio-dot[b-lhcb8y1bi1] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #2b6cb0;
    display: inline-block;
    position: relative;
}

    .radio-dot.on[b-lhcb8y1bi1]::after {
        content: "";
        position: absolute;
        inset: 4px;
        border-radius: 50%;
        background: #2b6cb0;
    }

/* texto más grande */
.radio-text[b-lhcb8y1bi1] {
    font-weight: 900;
    color: #153e75;
    font-size: 15px; /* ✅ más grande */
}

/* ✅ tabla lista: más flexible y más ancha sin desorden */
.tabla-lista-monazos[b-lhcb8y1bi1] {
    display: grid;
    grid-template-columns: 140px 1fr 160px 56px; /* modalidad se estira */
    width: 100%;
}

/* ✅ si quieres dar más ancho al panel izquierdo completo */
/* ✅ ANCHO REAL DEL PANEL IZQUIERDO (MONAZOS/TIEMPOS/PARLEY) */
.ventas-contenido > .ventas-izquierda[b-lhcb8y1bi1] {
    flex: 0 0 700px !important; /* ⬅️ este es el ancho fijo */
    max-width: 700px !important;
    min-width: 700px !important;
    width: 700px !important;
}


/* ✅ MONAZOS - Cabecera "Modo" */
.h-modo[b-lhcb8y1bi1] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #6c7ae0; /* morado/azul suave */
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    border-radius: 6px;
    border: 1px solid #4e5bd3;
    height: 22px;
    box-sizing: border-box;
}

/* ✅ MONAZOS - Celda Modo */
.celda-modo[b-lhcb8y1bi1] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    padding: 0 6px;
    border-radius: 10px;
    height: 22px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: #eef1ff;
    color: #2f3a8f;
    border: 1px solid #aab3ff;
}

/* ============================
   MODAL LISTA MONAZOS (ANCHO)
   ============================ */

.modal-lista.monazos[b-lhcb8y1bi1] {
    width: 96vw;
    max-width: 1600px;
}

/* Grilla: 5 bloques * (N°,Modo,Monto) = 15 columnas */
.fila-cabecera.monazos[b-lhcb8y1bi1],
.fila-numeros.monazos[b-lhcb8y1bi1] {
    display: grid;
    grid-template-columns: 70px 90px 115px 70px 90px 115px 70px 90px 115px 70px 90px 115px 70px 90px 115px;
    gap: 6px;
}

    /* Cabeceras */
    .fila-cabecera.monazos .h-num[b-lhcb8y1bi1],
    .fila-cabecera.monazos .h-modo[b-lhcb8y1bi1],
    .fila-cabecera.monazos .h-monto[b-lhcb8y1bi1] {
        font-size: 13px;
        padding: 6px 8px;
        border-radius: 7px;
    }

    /* Celdas */
    .fila-numeros.monazos .celda-num[b-lhcb8y1bi1],
    .fila-numeros.monazos .celda-modo[b-lhcb8y1bi1],
    .fila-numeros.monazos .celda-monto[b-lhcb8y1bi1] {
        font-size: 14px;
        padding: 7px 8px;
        border-radius: 7px;
        min-height: 26px;
    }
/* =========================================================
   ✅ TOTALES MONAZOS (con tu HTML actual)
   .fila-totales-f.monazos
   - 5 bloques x (N° / Modo / Monto) = 15 columnas
   - En cada bloque: 2 vacías + 1 celda "Total"
   ========================================================= */

.fila-totales-f.monazos[b-lhcb8y1bi1] {
    display: grid;
    /* 15 columnas: N°, Modo, Monto repetido 5 veces */
    grid-template-columns: repeat(5, 70px 90px 115px);
    column-gap: 6px;
    row-gap: 6px;
    justify-content: center;
    margin-top: 6px;
}

    /* tus dos <div></div> vacíos: que tengan altura para no colapsar */
    .fila-totales-f.monazos > div:empty[b-lhcb8y1bi1] {
        min-height: 26px;
    }

    /* la celda donde va "Total F1: 0" ocupa la columna Monto del bloque */
    .fila-totales-f.monazos .total-monto[b-lhcb8y1bi1] {
        display: flex;
        align-items: center;
        justify-content: space-between; /* label izquierda, valor derecha */
        gap: 8px;
        /* altura igual a totales/celdas */
        height: 26px;
        padding: 0 10px;
        /* mismo look de totales (punteado) */
        background: #f1fff5;
        border: 1px dashed #0f7a3a;
        border-radius: 6px;
        box-sizing: border-box;
    }

        /* label "Total F1:" */
        .fila-totales-f.monazos .total-monto .label[b-lhcb8y1bi1] {
            font-weight: 950;
            font-size: 13px;
            color: #0c6aa6;
            white-space: nowrap;
        }

        /* valor (0) */
        .fila-totales-f.monazos .total-monto .valor[b-lhcb8y1bi1] {
            font-weight: 950;
            font-size: 14px;
            color: #0f7a3a;
            white-space: nowrap;
        }

/* ✅ Monazos: Totales F alineados (Label bajo Modo, Valor bajo Monto) */
.fila-totales-f.monazos[b-lhcb8y1bi1] {
    /* asegura que use la MISMA grilla que tus filas monazos (N°,Modo,Monto x5) */
    display: grid;
    grid-template-columns: repeat(5, 70px 90px 115px);
    column-gap: 6px;
    row-gap: 6px;
    justify-content: center;
    margin-top: 6px;
}

    .fila-totales-f.monazos .total-f-label[b-lhcb8y1bi1],
    .fila-totales-f.monazos .total-f-valor[b-lhcb8y1bi1] {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 26px;
        font-size: 14px;
        font-weight: 950;
        border-radius: 6px;
        box-sizing: border-box;
        padding: 0 6px;
        white-space: nowrap;
    }

    /* Label (en la columna Modo) */
    .fila-totales-f.monazos .total-f-label[b-lhcb8y1bi1] {
        background: #eaf8ff;
        color: #0c6aa6;
        border: 1px dashed #0c6aa6;
    }

    /* Valor (en la columna Monto) */
    .fila-totales-f.monazos .total-f-valor[b-lhcb8y1bi1] {
        background: #f1fff5;
        color: #0f7a3a;
        border: 1px dashed #0f7a3a;
    }

/* ✅ Monazos: Total arriba más grande */
.fila-totales-normal .label[b-lhcb8y1bi1] {
    font-size: 15px; /* antes se ve pequeño */
    font-weight: 900;
}

.fila-totales-normal .valor[b-lhcb8y1bi1] {
    font-size: 18px; /* el monto más grande */
    font-weight: 950;
}

/* =========================================
   MONAZOS: Centro + PanelNoticias a la derecha
   (solo layout, no toca estilos del panel)
   ========================================= */
.monazos-centro-noticias[b-lhcb8y1bi1] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
}

    .monazos-centro-noticias .col-prohibidos[b-lhcb8y1bi1] {
        flex: 1 1 auto;
        min-width: 0;
    }

.monazos-noticias-right[b-lhcb8y1bi1] {
    flex: 0 0 360px; /* ancho del panel */
    max-width: 360px;
}

    /* que el panel use el 100% de su columna */
    .monazos-noticias-right .panel-noticias[b-lhcb8y1bi1] {
        width: 100%;
    }

/* Responsive: si la pantalla se hace pequeña, baja debajo */
@media (max-width: 1100px) {
    .monazos-centro-noticias[b-lhcb8y1bi1] {
        flex-direction: column;
    }

    .monazos-noticias-right[b-lhcb8y1bi1] {
        flex: 1 1 auto;
        max-width: 100%;
    }
}

.ventas-contenido[b-lhcb8y1bi1] {
    margin-top: 0; /* alinea con el encabezado */
}

    /* =========================================================
   ✅ MONAZOS - MISMO ACOMODO QUE TIEMPOS
   Col 1: Panel pedidos (izquierda)
   Col 2: Botones secundarios (centro)
   Col 3: Noticias (derecha)
   ========================================================= */

    .ventas-contenido.ventas-contenido-monazos > .ventas-izquierda[b-lhcb8y1bi1] {
        grid-column: 1;
        justify-self: start; /* pegado al borde izquierdo */
        align-self: start;
    }


    .ventas-contenido.ventas-contenido-monazos > .monazos-noticias-right[b-lhcb8y1bi1] {
        grid-column: 3;
        margin-left: -120px; /* ✅ ajusta: 80 / 100 / 140 */

        align-self: start;
    }

    /* Botones secundarios en columna 2: que no se estiren raro */
    .ventas-contenido.ventas-contenido-monazos .monazos-acciones-right[b-lhcb8y1bi1] {
        display: block;
    }

    .ventas-contenido.ventas-contenido-monazos .acciones-bajo-prohibidos[b-lhcb8y1bi1] {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
        margin-top: 0;
    }

    .ventas-contenido.ventas-contenido-monazos > .ventas-izquierda[b-lhcb8y1bi1] {
        max-width: var(--ancho-izquierda);
        width: 100%;
    }

    /* =========================================================
   ✅ MONAZOS: Alinear con el encabezado (igual borde)
   El encabezado usa: margin: 10px 20px 0;
   Así que aquí NO puede haber "auto center".
   ========================================================= */
    .ventas-contenido.ventas-contenido-monazos[b-lhcb8y1bi1] {
        max-width: none !important; /* quita el 1400px para Monazos */
        margin: 10px 20px 0 !important; /* igual que el encabezado */
        padding: 0 !important; /* ya no ocupamos padding 20 aquí */
    }

        /* ✅ MONAZOS: separacion entre encabezado y paneles */
        .ventas-contenido.ventas-contenido-monazos > .ventas-izquierda[b-lhcb8y1bi1],
        .ventas-contenido.ventas-contenido-monazos > .monazos-noticias-right[b-lhcb8y1bi1] {
            margin-top: 10px; /* espacio pequeño bajo el encabezado */
        }


        /* =========================================================
   ✅ MONAZOS: Botones centro VERTICALES y bajados
   a la altura de Vender/Agregar
   ========================================================= */

        /* La columna 2 se estira igual que la columna del panel */
        .ventas-contenido.ventas-contenido-monazos > .monazos-fila-inferior[b-lhcb8y1bi1] {
            grid-column: 2;
            align-self: stretch; /* se estira a la altura del panel */
            display: flex; /* para poder empujar hacia abajo */
            flex-direction: column;
            margin-top: 10px; /* mismo aire que los paneles */
            margin-left: -12px; /* ✅ ajusta: -6 / -10 / -16 */
        }


    /* =========================================================
   ✅ MONAZOS: grilla para que los botones queden PEGADOS
   Col 1: ventas (700px)
   Col 2: botones (auto = lo mínimo)
   Col 3: noticias (360px)
   ========================================================= */
    .ventas-contenido.ventas-contenido-monazos[b-lhcb8y1bi1] {
        display: grid !important;
        grid-template-columns: 700px auto 360px !important;
        column-gap: 12px !important; /* espacio pequeño entre ventas y botones */
        row-gap: 0 !important;
        align-items: start !important;
    }

        /* ✅ MONAZOS: bloque de botones en la columna 2, pegado y bajado */
        .ventas-contenido.ventas-contenido-monazos > .monazos-fila-inferior[b-lhcb8y1bi1] {
            grid-column: 2 !important;
            justify-self: start !important; /* pegado al panel de ventas */
            align-self: end !important; /* lo baja al “fondo” del panel */
            margin-bottom: 70px !important; /* ✅ AJUSTE FINO para alinear con Vender/Agregar */
            margin-top: 0 !important;
        }


        /* ✅ MONAZOS: botones horizontales */
        .ventas-contenido.ventas-contenido-monazos .acciones-bajo-prohibidos[b-lhcb8y1bi1] {
            display: flex !important;
            flex-direction: row !important; /* ✅ HORIZONTAL */
            flex-wrap: nowrap !important; /* no brincan de línea */
            gap: 10px !important;
            align-items: center !important;
            justify-content: flex-start !important;
            width: auto !important;
            margin: 0 !important;
        }

        /* =========================================================
   ✅ MONAZOS: mover SOLO el panel de noticias hacia la izquierda
   (sin tocar grilla ni ventas)
   ========================================================= */
        .ventas-contenido.ventas-contenido-monazos .monazos-noticias-right[b-lhcb8y1bi1] {
            margin-left: -250px; /* ⬅️ AJUSTE FINO */
        }

/* =========================
   WHATSAPP (BOTÓN + MODAL + MODAL IMAGEN)
   (Copiado desde Tiempos)
========================= */

/* ===== Botón WhatsApp ===== */
.wa-btn2[b-lhcb8y1bi1] {
    width: fit-content;
    max-width: 420px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 12px;
    border: 2px solid rgba(37, 211, 102, .75);
    background: linear-gradient(180deg, rgba(37,211,102,.22), rgba(18,140,126,.12));
    color: #0b2b16;
    font-weight: 900;
    font-size: 15px;
    line-height: 1;
    box-shadow: 0 10px 22px rgba(0,0,0,.12);
}

    .wa-btn2:hover[b-lhcb8y1bi1] {
        filter: brightness(1.05);
    }

    .wa-btn2:disabled[b-lhcb8y1bi1] {
        opacity: .5;
        cursor: not-allowed;
        filter: none;
    }

.wa-btn2__icon[b-lhcb8y1bi1] {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.70);
    border: 1px solid rgba(0,0,0,.08);
    flex: 0 0 auto;
}

    .wa-btn2__icon svg[b-lhcb8y1bi1] {
        width: 18px;
        height: 18px;
        display: block;
    }

.wa-btn2__text[b-lhcb8y1bi1] {
    white-space: nowrap;
}

/* ===== Modal principal WhatsApp ===== */
.wa2-backdrop[b-lhcb8y1bi1] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.64);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 99999;
}

.wa2-modal[b-lhcb8y1bi1] {
    width: min(720px, 96vw);
    background: #0f1420;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 30px 70px rgba(0,0,0,.65);
}

.wa2-header[b-lhcb8y1bi1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.wa2-title[b-lhcb8y1bi1] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
}

.wa2-badge[b-lhcb8y1bi1] {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(37,211,102,.14);
    border: 1px solid rgba(37,211,102,.25);
    color: #25D366;
}

    .wa2-badge svg[b-lhcb8y1bi1] {
        width: 22px;
        height: 22px;
        display: block;
    }

.wa2-title__main[b-lhcb8y1bi1] {
    font-weight: 900;
    font-size: 17px;
    line-height: 1.1;
}

.wa2-title__sub[b-lhcb8y1bi1] {
    font-size: 14px;
    opacity: .85;
    margin-top: 2px;
}

.wa2-x[b-lhcb8y1bi1] {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: #fff;
    cursor: pointer;
}

    .wa2-x:hover[b-lhcb8y1bi1] {
        filter: brightness(1.1);
    }

.wa2-body[b-lhcb8y1bi1] {
    padding: 16px;
}

.wa2-grid[b-lhcb8y1bi1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 640px) {
    .wa2-grid[b-lhcb8y1bi1] {
        grid-template-columns: 1fr;
    }
}

.wa2-field[b-lhcb8y1bi1] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wa2-label[b-lhcb8y1bi1] {
    font-size: 14px;
    opacity: .85;
    color: #dfe7ff;
}

.wa2-input[b-lhcb8y1bi1], .wa2-select[b-lhcb8y1bi1] {
    width: 100%;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    color: #fff;
    outline: none;
}

    .wa2-input[b-lhcb8y1bi1]::placeholder {
        color: rgba(255,255,255,.55);
    }

.wa2-actions[b-lhcb8y1bi1] {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.wa2-actions__right[b-lhcb8y1bi1] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.wa2-btn[b-lhcb8y1bi1] {
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: #fff;
    cursor: pointer;
    font-weight: 800;
}

    .wa2-btn:hover[b-lhcb8y1bi1] {
        filter: brightness(1.08);
    }

.wa2-btn--ghost[b-lhcb8y1bi1] {
    background: transparent;
}

.wa2-btn--soft[b-lhcb8y1bi1] {
    background: rgba(37,211,102,.10);
    border-color: rgba(37,211,102,.22);
}

.wa2-btn--primary[b-lhcb8y1bi1] {
    background: linear-gradient(180deg, rgba(37,211,102,.35), rgba(18,140,126,.25));
    border-color: rgba(37,211,102,.35);
}

.wa2-note[b-lhcb8y1bi1] {
    margin-top: 12px;
    padding: 12px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    color: #e8f0ff;
    font-size: 14px;
    line-height: 1.35;
}

/* ===== Modal Imagen ===== */
.wa-img-backdrop[b-lhcb8y1bi1] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.75);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    z-index: 100000;
}

.wa-img-modal[b-lhcb8y1bi1] {
    width: min(820px, 96vw);
    max-height: 92vh;
    background: #0f1420;
    border-radius: 18px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 30px 70px rgba(0,0,0,.65);
    overflow: auto;
}

    .wa-img-modal h3[b-lhcb8y1bi1] {
        margin: 0 0 10px 0;
        color: #fff;
        font-weight: 900;
        font-size: 18px;
    }

.wa-ticket-img[b-lhcb8y1bi1] {
    width: 100%;
    height: auto;
    max-height: calc(92vh - 170px);
    object-fit: contain;
    display: block;
}

.wa-actions[b-lhcb8y1bi1] {
    margin-top: 12px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.btn-guardar.ok[b-lhcb8y1bi1] {
    padding: 10px 16px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(37,211,102,.12);
    color: #fff;
    font-weight: 900;
    cursor: pointer;
}

    .btn-guardar.ok:hover[b-lhcb8y1bi1] {
        filter: brightness(1.08);
    }


/* _content/SistemaLoteriaDashboard/Components/Ventas/VentasParley.razor.rz.scp.css */
/* ==========================================================
   🧩 LAYOUT PRINCIPAL
   ========================================================== */
.ventas-contenido[b-ttm71onnr9] {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 12px;
    /* 🔒 Que TODO sea una sola fila */
    flex-wrap: nowrap;
    /* 📜 Si no cabe con mucho zoom, scroll horizontal */
    overflow-x: auto;
}

.ventas-izquierda[b-ttm71onnr9] {
    flex: 0 0 auto; /* ya tienes min/max-width, así no se deforma */
}

/* ✅ FIX: debe reservar el mismo ancho que en Tiempos */
.col-prohibidos[b-ttm71onnr9] {
    flex: 0 0 var(--ancho-prohibidos);
}




/* ==========================================================
   🧩 PANEL IZQUIERDO (VENTAS)
   ========================================================== */
.ventas-izquierda[b-ttm71onnr9] {
    flex: 1;
    min-width: 400px;
    max-width: 700px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    padding: 15px;
    box-sizing: border-box;
    min-height: 300px;
    margin: 0;
}

/* ====== LISTA (contenedor con scroll) ====== */
.ventas-lista[b-ttm71onnr9] {
    position: relative;
    border: 2px solid #e0e6f1;
    border-radius: 8px;
    background: #fff;
    max-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
    padding: 0;
}

/* ====== GRID UNIFICADO (cabecera + filas) ====== */
.tabla-lista[b-ttm71onnr9] {
    display: grid;
    grid-template-columns: 120px 170px 56px;
    width: 100%;
    row-gap: 0;
    justify-content: center;
    margin: 0 auto;
}

    /* Modo BASE con reventado: columnas flexibles para que no se salgan con zoom */
    .tabla-lista.reventado[b-ttm71onnr9] {
        grid-template-columns: minmax(90px, 1.1fr) /* N°  */
        minmax(120px, 1.4fr) /* Monto normal */
        minmax(120px, 1.4fr) /* Monto reventado */
        minmax(40px, 0.6fr); /* Botón X */
    }

/* Cabecera y filas comparten el MISMO grid */
.fila-cabecera[b-ttm71onnr9],
.fila-item[b-ttm71onnr9] {
    display: contents;
}

/* ====== CELDAS ====== */
.celda[b-ttm71onnr9] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
    padding: 10px 12px;
    min-height: 44px;
    font-weight: 800;
    font-size: 20px;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    border-bottom: 1px solid #e6ecf6;
}

    /* CABECERA (títulos centrados y más grandes) */
    .celda.titulo[b-ttm71onnr9] {
        position: sticky;
        top: 0;
        z-index: 10;
        background: #f7f9fc;
        border-bottom: 2px solid #e0e6f1;
        box-shadow: 0 1px 0 #e0e6f1;
        text-align: center;
        justify-content: center;
        align-items: center;
        font-weight: 900;
        font-size: 22px;
        color: #1c2b4d;
        height: 48px;
    }

        /* La celda de cabecera de la columna de la X (vacía pero sticky) */
        .celda.titulo.th-x[b-ttm71onnr9] {
            background: #f7f9fc;
            pointer-events: none;
        }

/* Celdas normales (centradas igual) */
.celda[b-ttm71onnr9],
.fila-item .numero[b-ttm71onnr9],
.fila-item .monto[b-ttm71onnr9] {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 800;
    font-size: 20px;
    height: 48px;
}

/* Guion perfectamente centrado entre Número y Monto */
.fila-item .celda.numero[b-ttm71onnr9]::after {
    content: "–";
    color: #76acfe;
    font-weight: 600;
    font-size: 20px;
    position: relative;
    left: 65%;
    transform: translateX(-50%);
    top: 25%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* ========== BOTÓN ELIMINAR (moderno y elegante) ========== */
.btn-eliminar[b-ttm71onnr9] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(180deg,#ff5c5c,#d93636);
    box-shadow: 0 6px 14px rgba(217,54,54,.25), inset 0 1px 0 rgba(255,255,255,.28);
    cursor: pointer;
    padding: 0;
    font-size: 0;
    line-height: 1;
    margin: auto;
    z-index: 1;
    transition: transform .12s ease, box-shadow .18s ease, filter .18s ease, background .18s ease;
}

    .btn-eliminar[b-ttm71onnr9]::before,
    .btn-eliminar[b-ttm71onnr9]::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 14px;
        height: 2px;
        background: #fff;
        border-radius: 2px;
        transform-origin: center;
        box-shadow: 0 0 1px rgba(0,0,0,.25);
    }

    .btn-eliminar[b-ttm71onnr9]::before {
        transform: translate(-50%,-50%) rotate(45deg);
    }

    .btn-eliminar[b-ttm71onnr9]::after {
        transform: translate(-50%,-50%) rotate(-45deg);
    }

    .btn-eliminar:hover[b-ttm71onnr9] {
        transform: translateY(-1px) scale(1.03);
        filter: saturate(1.06);
        box-shadow: 0 10px 20px rgba(217,54,54,.28), inset 0 1px 0 rgba(255,255,255,.32);
    }

    .btn-eliminar:active[b-ttm71onnr9] {
        transform: translateY(0) scale(.97);
        box-shadow: 0 4px 10px rgba(217,54,54,.22), inset 0 1px 0 rgba(255,255,255,.24);
    }

    .btn-eliminar:focus-visible[b-ttm71onnr9] {
        outline: 3px solid rgba(25,118,210,.35);
        outline-offset: 2px;
        box-shadow: 0 0 0 4px rgba(25,118,210,.15), 0 8px 18px rgba(217,54,54,.25), inset 0 1px 0 rgba(255,255,255,.28);
    }

@media (prefers-reduced-motion: reduce) {
    .btn-eliminar[b-ttm71onnr9] {
        transition: none;
    }
}

/* ====== SEPARADOR ====== */
.separador[b-ttm71onnr9] {
    border: none;
    border-top: 2px solid #d9e0ef;
    margin: 8px 0;
}

/* ====== CAMPOS DE ENTRADA ====== */
.input-linea[b-ttm71onnr9] {
    display: flex;
    gap: 10px;
    margin: 10px 0;
    justify-content: center;
    /* 👇 NUEVO: si con 3 cajas no cabe, que hagan otra fila
       en vez de salirse del panel al hacer zoom */
    flex-wrap: wrap;
    max-width: 100%;
}

.input-pequeno[b-ttm71onnr9] {
    padding: 12px;
    font-size: 24px;
    font-weight: 800;
    border: 2px solid #ccc;
    border-radius: 8px;
    text-align: center;
    transition: .2s;
    /* 👇 NUEVO: ancho base, pero puede encogerse si hace falta */
    flex: 1 1 120px;
    max-width: 210px;
}

    .input-pequeno:focus[b-ttm71onnr9] {
        border-color: #1e88e5;
        box-shadow: 0 0 5px rgba(30,136,229,.4);
        outline: none;
    }

.monto-corto[b-ttm71onnr9] {
    width: 120px;
}

.numero-corto[b-ttm71onnr9] {
    width: 120px;
}

/* ====== BOTÓN GUARDAR / IMPRIMIR ====== */
.btn-guardar[b-ttm71onnr9] {
    background: linear-gradient(90deg,#1976d2,#1e88e5);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px 22px;
    cursor: pointer;
    font-weight: 800;
    font-size: 16px;
    transition: .2s;
}

    .btn-guardar:hover[b-ttm71onnr9] {
        background: linear-gradient(90deg,#1565c0,#1976d2);
    }

/* ====== TOTAL ====== */
.total[b-ttm71onnr9] {
    font-size: 22px;
    font-weight: 800;
    text-align: right;
    color: #003c8f;
    margin-top: 10px;
}

@media (max-width:520px) {
    .tabla-lista[b-ttm71onnr9] {
        grid-template-columns: 100px 140px 46px;
    }

        .tabla-lista.reventado[b-ttm71onnr9] {
            grid-template-columns: minmax(70px, 1.1fr) /* N° */
            minmax(90px, 1.3fr) /* Monto */
            minmax(90px, 1.3fr) /* Monto R */
            minmax(34px, 0.5fr); /* X */
        }

    .celda[b-ttm71onnr9] {
        font-size: 18px;
    }
}

/* ===== Panel de Números Prohibidos con título rojo, fecha y ajuste dinámico ===== */
.numeros-prohibidos-panel[b-ttm71onnr9] {
    align-self: flex-start;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    padding: 16px 24px;
    border: 2px solid #c62828;
    text-align: center;
    display: inline-block;
    transition: all 0.3s ease;
    width: auto;
    height: auto;
    min-width: 240px;
}

    .numeros-prohibidos-panel h4[b-ttm71onnr9] {
        color: #c62828;
        font-weight: 800;
        font-size: 1.45em;
        margin: 0 0 8px 0;
    }

.np-fecha[b-ttm71onnr9] {
    font-size: 1.1em;
    font-weight: 700;
    color: #333;
    margin-top: 2px;
    margin-bottom: 10px;
    text-transform: capitalize;
}

.numeros-prohibidos[b-ttm71onnr9] {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

    .numeros-prohibidos li[b-ttm71onnr9] {
        color: #e53935;
        font-weight: 700;
        background: #ffebee;
        padding: 6px 12px;
        border-radius: 8px;
        min-width: 40px;
        text-align: center;
        font-size: 1.15em;
        transition: transform 0.2s ease, background 0.2s ease;
    }

        .numeros-prohibidos li:hover[b-ttm71onnr9] {
            background: #ffcdd2;
            transform: scale(1.08);
        }

/* ==========================================================
   🧩 ENCABEZADO
   ========================================================== */
.ventas-encabezado[b-ttm71onnr9] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 15px 25px 25px;
    background: linear-gradient(90deg, #f7f9fb, #e3f2fd);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin: 10px 20px 0;
}

.titulo-sorteo[b-ttm71onnr9] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    position: relative;
}

.sorteo-selector-titulo[b-ttm71onnr9] {
    position: relative;
    cursor: pointer;
    user-select: none;
    display: inline-block;
}

.sorteo-nombre[b-ttm71onnr9] {
    font-size: 2.2em;
    font-weight: 800;
    color: #004aad;
    letter-spacing: 1px;
    margin: 0;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.15);
    animation: colorCambio-b-ttm71onnr9 4s linear infinite;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s ease;
}

    .sorteo-nombre:hover[b-ttm71onnr9] {
        transform: scale(1.02);
    }

.flecha[b-ttm71onnr9] {
    font-size: 0.6em;
    margin-left: 6px;
    transition: transform 0.3s ease;
}

.sorteo-selector-titulo:hover .flecha[b-ttm71onnr9] {
    transform: rotate(180deg);
}

.menu-sorteos[b-ttm71onnr9] {
    position: absolute;
    top: 100%;
    left: 0;
    transform: none;
    width: 220px;
    background: #ffffff;
    border: 2px solid #cfd8dc;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    margin-top: 8px;
    padding: 6px 0;
    list-style: none;
    z-index: 20;
    animation: aparecerMenu-b-ttm71onnr9 0.2s ease-out forwards;
}

    .menu-sorteos li[b-ttm71onnr9] {
        font-weight: 700;
        color: #0d47a1;
        font-size: 1.1em;
        padding: 10px 16px;
        text-align: center;
        transition: all 0.2s ease;
        border-radius: 6px;
    }

        .menu-sorteos li:hover[b-ttm71onnr9] {
            background: #e3f2fd;
            color: #003c8f;
            transform: scale(1.03);
        }

        .menu-sorteos li.activo[b-ttm71onnr9] {
            background: #bbdefb;
            color: #0d47a1;
        }

@keyframes aparecerMenu-b-ttm71onnr9 {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes colorCambio-b-ttm71onnr9 {
    0% {
        color: #e53935;
    }

    25% {
        color: #f9a825;
    }

    50% {
        color: #1e88e5;
    }

    75% {
        color: #43a047;
    }

    100% {
        color: #e53935;
    }
}

.hora-info[b-ttm71onnr9] {
    font-size: 1.05em;
    color: #0d47a1;
    font-weight: 600;
}

    .hora-info strong[b-ttm71onnr9] {
        color: #1a237e;
    }

.hora-numero[b-ttm71onnr9] {
    font-size: 1.4em;
    font-weight: 700;
    color: #0d47a1;
}

/* === Fecha centrada === */
.fecha-centro[b-ttm71onnr9] {
    position: absolute;
    top: 85px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.fecha-texto[b-ttm71onnr9] {
    font-size: 1.35em;
    font-weight: 800;
    color: #2c3e50;
    text-transform: capitalize;
}

.hora-texto[b-ttm71onnr9] {
    font-size: 1.15em;
    font-weight: 700;
    color: #1565c0;
    letter-spacing: 1px;
}

/* ==========================================================
   🧩 BOTONES SECUNDARIOS
   ========================================================== */
.acciones-internas[b-ttm71onnr9] {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
}

.btn-secundario[b-ttm71onnr9] {
    background: linear-gradient(90deg, #e3f2fd, #bbdefb);
    color: #0d47a1;
    border: 1px solid #64b5f6;
    border-radius: 8px;
    padding: 8px 14px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    transition: 0.2s;
}

    .btn-secundario:hover[b-ttm71onnr9] {
        background: linear-gradient(90deg, #bbdefb, #90caf9);
    }

.btn-guardar:active[b-ttm71onnr9],
.menu-btn:active[b-ttm71onnr9] {
    transform: scale(0.97);
}

/* ===============================
   🎯 CONTADOR DE TIEMPO RESTANTE
   =============================== */
.ventas-encabezado .contador[b-ttm71onnr9],
.contador[b-ttm71onnr9] {
    font-size: 1.5em;
    font-weight: 800;
    color: #d32f2f;
    background: none;
    border-radius: 0;
    padding: 0;
    min-width: 85px;
    text-align: center;
    transition: all 0.3s ease;
}

    .ventas-encabezado .contador.critico[b-ttm71onnr9],
    .contador.critico[b-ttm71onnr9] {
        animation: parpadeoRojo-b-ttm71onnr9 1s infinite alternate ease-in-out;
    }

@keyframes parpadeoRojo-b-ttm71onnr9 {
    0% {
        color: #d32f2f;
        transform: scale(1);
    }

    50% {
        color: #ff0000;
        transform: scale(1.05);
    }

    100% {
        color: #b71c1c;
        transform: scale(1);
    }
}

/* ===========================
   PANEL DE NOTICIAS (derecha)
   =========================== */
.panel-noticias[b-ttm71onnr9] {
    position: relative;
    width: 520px;
    background: #f7fbff;
    border-radius: 12px;
    padding: 14px 16px;
    height: auto;
    z-index: 10;
    margin-top: 0;
    margin-left: 0;
}

    .panel-noticias .header[b-ttm71onnr9] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 10px;
    }

        .panel-noticias .header h3[b-ttm71onnr9] {
            margin: 0;
            font-size: 1.25rem;
            font-weight: 900;
            color: #0d47a1;
            letter-spacing: .3px;
        }

    .panel-noticias .acciones[b-ttm71onnr9] {
        display: flex;
        gap: 8px;
    }

.btn-icono[b-ttm71onnr9] {
    border: 1px solid #c5d6f2;
    background: #e9f2ff;
    border-radius: 8px;
    padding: 6px 10px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s;
}

    .btn-icono:hover[b-ttm71onnr9] {
        background: #d9eaff;
    }

.noticias-scroll[b-ttm71onnr9] {
    max-height: 520px;
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-gutter: stable;
}

.noticia-card[b-ttm71onnr9] {
    background: #ffffff;
    border: 2px solid #e6edf8;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.04);
    transition: transform .15s ease, box-shadow .2s ease;
}

    .noticia-card:hover[b-ttm71onnr9] {
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    }

.noticia-top[b-ttm71onnr9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.noticia-titulo[b-ttm71onnr9] {
    font-weight: 900;
    font-size: 1.05rem;
    color: #153e75;
    margin: 0;
}

.badges[b-ttm71onnr9] {
    display: flex;
    gap: 6px;
    align-items: center;
}

.badge[b-ttm71onnr9] {
    padding: 3px 8px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
}

.badge-todos[b-ttm71onnr9] {
    background: #e8f5e9;
    color: #1b5e20;
    border: 1px solid #c8e6c9;
}

.badge-priv[b-ttm71onnr9] {
    background: #fff3e0;
    color: #e65100;
    border: 1px solid #ffe0b2;
}

.badge-fecha[b-ttm71onnr9] {
    background: #e3f2fd;
    color: #0d47a1;
    border: 1px solid #bbdefb;
}

.noticia-body[b-ttm71onnr9] {
    color: #334155;
    line-height: 1.45;
    white-space: pre-wrap;
    margin-bottom: 8px;
}

.noticia-acciones[b-ttm71onnr9] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.btn-cerrar[b-ttm71onnr9] {
    background: #ffe5e5;
    color: #b71c1c;
    border: 1px solid #ffcdd2;
    border-radius: 8px;
    padding: 6px 10px;
    font-weight: 800;
    cursor: pointer;
    transition: .2s;
}

    .btn-cerrar:hover[b-ttm71onnr9] {
        background: #ffcccc;
    }

.noticia-leida[b-ttm71onnr9] {
    opacity: .55;
}

.col-prohibidos[b-ttm71onnr9] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

:root[b-ttm71onnr9] {
    --ancho-prohibidos: 360px;
}

.col-prohibidos .numeros-prohibidos-panel[b-ttm71onnr9] {
    width: var(--ancho-prohibidos);
}

.col-prohibidos .acciones-bajo-prohibidos[b-ttm71onnr9] {
    width: var(--ancho-prohibidos);
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 20px;
}

/* === Estado bloqueado (sorteo cerrado) === */
.bloqueado[b-ttm71onnr9] {
    opacity: 0.6;
    pointer-events: none;
    transition: opacity 0.3s ease;
    position: relative;
}

    .bloqueado[b-ttm71onnr9]::after {
        content: "SORTEO CERRADO";
        position: absolute;
        top: 40%;
        left: 0;
        right: 0;
        text-align: center;
        font-weight: bold;
        font-size: 1.1rem;
        color: #b40000;
        background: rgba(255,255,255,0.85);
        border: 2px solid #b40000;
        border-radius: 8px;
        padding: 8px;
        width: 60%;
        margin: 0 auto;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    }

/* ===== MODAL VER LISTA (escala dinámica) ===== */
.modal-overlay[b-ttm71onnr9] {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,.45);
    z-index: 99998 !important;
}

.modal-lista[b-ttm71onnr9] {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 96vw !important;
    height: 90vh !important;
    background: #eaf3fb;
    border: 1px solid #b6d0e8;
    border-radius: 10px;
    padding: 10px 12px;
    padding-top: 0px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    z-index: 99999 !important;
    box-sizing: border-box;
    /* 🔹 ANTES: overflow: hidden !important; */
    overflow-y: auto !important; /* scroll vertical si hace falta */
    overflow-x: hidden !important; /* evitamos scroll horizontal feo */
}

body.modal-open[b-ttm71onnr9] {
    overflow: hidden !important;
}

.modal-close[b-ttm71onnr9] {
    border: none;
    background: #ffeded;
    color: #b40000;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    font-size: 20px;
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 2;
}

    .modal-close:hover[b-ttm71onnr9] {
        background: #ffd6d6;
    }

/* CONTENEDOR ÚNICO DEL CONTENIDO DE LA LISTA */
#listaCanvas[b-ttm71onnr9] {
    width: 100%;
    height: 100%;
    padding: 10px 20px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center; /* centrado horizontal */
    justify-content: flex-start; /* contenido pegado arriba, no al centro */
}

#contentLista[b-ttm71onnr9] {
    display: inline-block; /* que mida según su tabla, no que se estire raro */
}

/* ============================
   🧱 ESTRUCTURA MODO NORMAL
   ============================ */
.lista-unica-normal[b-ttm71onnr9] {
    width: 100%;
    max-width: 1150px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 0;
}

/* ============================
   🧱 ESTRUCTURA MODO REVENTADO
   ============================ */
.lista-unica-rev[b-ttm71onnr9] {
    width: 100%;
    max-width: 1350px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 0;
}

/* === TÍTULO Y FECHA === */
.fila-titulo[b-ttm71onnr9] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.titulo-sorteo-modal[b-ttm71onnr9] {
    font-weight: 900;
    font-size: 1.6rem;
    color: #c68200;
}

.fecha-modal[b-ttm71onnr9] {
    font-weight: 700;
    font-size: 1rem;
    color: #255;
}

/* === TOTALES GENERALES (arriba) === */
.fila-totales-normal[b-ttm71onnr9],
.fila-totales-rev[b-ttm71onnr9] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    margin-bottom: 6px;
}

    .fila-totales-normal .label[b-ttm71onnr9],
    .fila-totales-rev .label[b-ttm71onnr9] {
        font-weight: 900;
        font-size: 0.95rem;
        color: #04192e;
    }

    .fila-totales-normal .valor[b-ttm71onnr9],
    .fila-totales-rev .valor[b-ttm71onnr9] {
        font-weight: 900;
        font-size: 0.95rem;
        color: #b31523;
    }

    .fila-totales-rev .sep[b-ttm71onnr9] {
        margin: 0 6px;
        opacity: .6;
    }

/* ============================
   🧮 REJILLA PRINCIPAL
   ============================ */

/* Modo NORMAL: 5 bloques (N° + Monto) = 10 columnas */
.lista-unica-normal .fila-cabecera[b-ttm71onnr9],
.lista-unica-normal .fila-numeros[b-ttm71onnr9],
.lista-unica-normal .fila-totales-f[b-ttm71onnr9] {
    display: grid;
    grid-template-columns: repeat(5, 78px 85px);
    column-gap: 4px;
    row-gap: 4px;
    justify-content: center;
}

/* Modo REVENTADO: 5 bloques (N° + Monto + R) = 15 columnas */
.lista-unica-rev .fila-cabecera[b-ttm71onnr9],
.lista-unica-rev .fila-numeros[b-ttm71onnr9],
.lista-unica-rev .fila-totales-f-rev[b-ttm71onnr9] {
    display: grid;
    grid-template-columns: repeat(5, 64px 95px 95px);
    column-gap: 4px;
    row-gap: 4px;
    justify-content: center;
}

/* ============================
   🎨 CABECERAS (Actualizadas)
   ============================ */

/* 🔵 CABECERA N° */
.h-num[b-ttm71onnr9] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0d6efd; /* azul fuerte */
    color: white;
    font-size: 11px;
    font-weight: 900;
    border-radius: 6px;
    border: 1px solid #0a58ca;
    height: 22px;
    box-sizing: border-box;
}

/* 🟢 CABECERA MONTO */
.h-monto[b-ttm71onnr9] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #3CB371; /* verde fuerte */
    color: white;
    font-size: 11px;
    font-weight: 900;
    border-radius: 6px;
    border: 1px solid #2e8b57;
    height: 22px;
    box-sizing: border-box;
}

/* 🔴 CABECERA REVENTADO (R) */
.h-monto-rev[b-ttm71onnr9] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #E74C3C; /* rojo fuerte */
    color: white;
    font-size: 11px;
    font-weight: 900;
    border-radius: 6px;
    border: 1px solid #c0392b;
    height: 22px;
    box-sizing: border-box;
}

/* ============================
   🎨 CELDAS (N°, Monto, R)
   ============================ */
.celda-num[b-ttm71onnr9],
.celda-monto[b-ttm71onnr9],
.celda-monto-rev[b-ttm71onnr9] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    padding: 0 6px;
    border-radius: 10px;
    height: 22px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Número */
.celda-num[b-ttm71onnr9] {
    background: #e4f1fb;
    color: #0a406e;
    border: 1px solid #8db7d8;
}

/* Monto normal */
.celda-monto[b-ttm71onnr9] {
    background: #e9f7ef;
    color: #0a5c38;
    border: 1px solid #8cc7a9;
}

/* Monto reventado */
.celda-monto-rev[b-ttm71onnr9] {
    background: #faecec;
    color: #b02222;
    border: 1px solid #d3a3a3;
}

/* Números prohibidos en rojo */
.celda-num.prohibido[b-ttm71onnr9] {
    color: #d32f2f;
    font-size: 14px;
}

/* ============================================================
   🟦 TOTALES F1..F5 — MODO NORMAL (5 columnas x 2 = 10 celdas)
   Alineado EXACTO como las filas de números
   ============================================================ */
.fila-totales-f[b-ttm71onnr9] {
    display: grid;
    grid-template-columns: repeat(10, 1fr); /* 5 pares (label + monto) */
    gap: 4px;
    margin-top: 4px;
}

    .fila-totales-f .label[b-ttm71onnr9],
    .fila-totales-f .valor[b-ttm71onnr9] {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 26px;
        font-size: 14px;
        font-weight: 950;
        border-radius: 6px;
        box-sizing: border-box;
        padding: 0 6px;
    }

    /* 🔵 Label: "Total F1", "Total F2"... */
    .fila-totales-f .label[b-ttm71onnr9] {
        background: #eaf8ff; /* azul clarito */
        color: #0c6aa6; /* azul más fuerte */
        border: 1px dashed #0c6aa6; /* borde punteado */
        white-space: nowrap; /* 👉 evita que se parta en dos líneas */
    }

    /* 🟢 Monto normal */
    .fila-totales-f .valor[b-ttm71onnr9] {
        background: #f1fff5; /* verde muy suave */
        color: #0f7a3a; /* verde más fuerte */
        border: 1px dashed #0f7a3a; /* borde punteado */
    }

/* ============================================================
   🔴 TOTALES F1..F5 — MODO REVENTADO (5 columnas x 3 = 15 celdas)
   (Label + Monto Normal + Monto R)
   ============================================================ */
.fila-totales-f-rev[b-ttm71onnr9] {
    display: grid;
    grid-template-columns: repeat(15, 1fr); /* 5 grupos x 3 columnas */
    gap: 4px;
    margin-top: 4px;
}

    .fila-totales-f-rev .label[b-ttm71onnr9],
    .fila-totales-f-rev .valor-normal[b-ttm71onnr9],
    .fila-totales-f-rev .valor-rev[b-ttm71onnr9] {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 26px;
        font-size: 14px;
        font-weight: 950;
        border-radius: 6px;
        box-sizing: border-box;
        padding: 0 6px;
    }

    /* 🔵 Label */
    .fila-totales-f-rev .label[b-ttm71onnr9] {
        background: #eaf8ff;
        color: #0c6aa6;
        border: 1px dashed #0c6aa6;
        white-space: nowrap; /* 👉 igual: sin salto de línea */
    }

    /* 🟢 Monto normal */
    .fila-totales-f-rev .valor-normal[b-ttm71onnr9] {
        background: #f1fff5;
        color: #0f7a3a;
        border: 1px dashed #0f7a3a;
    }

    /* 🔴 Monto reventado */
    .fila-totales-f-rev .valor-rev[b-ttm71onnr9] {
        background: #fff5f5;
        color: #c62828;
        border: 1px dashed #c62828;
    }

/* Asegurar que nada se desborde raro */
#listaCanvas > div[b-ttm71onnr9] {
    min-width: 0;
    min-height: 0;
}

/* === Popup de error de venta (centrado en la pantalla) === */
.venta-modal-backdrop[b-ttm71onnr9] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
}

.venta-modal[b-ttm71onnr9] {
    background: #ffffff;
    border-radius: 14px;
    padding: 18px 22px 20px;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.35);
    animation: ventaModalIn-b-ttm71onnr9 0.18s ease-out;
    text-align: left;
}

    .venta-modal h3[b-ttm71onnr9] {
        margin: 0 0 10px 0;
        font-size: 1.15rem;
        font-weight: 800;
        color: #c62828;
    }

    .venta-modal p[b-ttm71onnr9] {
        margin: 0 0 18px 0;
        line-height: 1.4;
        font-size: 0.95rem;
        white-space: pre-line;
        color: #333;
    }

    .venta-modal .btn.ok[b-ttm71onnr9] {
        width: 100%;
        font-weight: 600;
    }

@keyframes ventaModalIn-b-ttm71onnr9 {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ✅ Número mini para Parley (2 dígitos) */
.numero-mini[b-ttm71onnr9] {
    width: 85px !important;
    max-width: 85px !important;
    padding: 10px !important;
    font-size: 20px !important;
    height: 48px;
}

.parley-tabla[b-ttm71onnr9] {
    margin-top: 12px;
    border: 1px solid #e6edf8;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.parley-header[b-ttm71onnr9] {
    display: grid;
    grid-template-columns: 1fr 180px;
    font-weight: 900;
    background: #f3f7ff;
    border-bottom: 1px solid #e6edf8;
}

.parley-h-num[b-ttm71onnr9], .parley-h-monto[b-ttm71onnr9] {
    padding: 10px 12px;
}

.parley-row[b-ttm71onnr9] {
    display: grid;
    grid-template-columns: 1fr 180px;
    border-bottom: 1px solid #eef3ff;
}

    .parley-row:last-child[b-ttm71onnr9] {
        border-bottom: none;
    }

.parley-num[b-ttm71onnr9], .parley-monto[b-ttm71onnr9] {
    padding: 10px 12px;
    font-weight: 700;
}

.parley-monto[b-ttm71onnr9] {
    text-align: right;
}

.parley-vacio[b-ttm71onnr9] {
    padding: 14px 12px;
    font-weight: 700;
    opacity: .8;
}

/* =========================
   FECHA VENTA (Parley)
   - mismo estilo que usamos en Tiempos/Restricciones
   ========================= */

.fecha-venta-box[b-ttm71onnr9] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e6edf8;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    width: fit-content;
}

.fv-titulo[b-ttm71onnr9] {
    font-weight: 900;
    color: #153e75;
    font-size: 1.05rem;
    margin-right: 6px;
}

/* ✅ FECHA GRANDE (igual a Restricciones) */
.fv-xl[b-ttm71onnr9] {
    height: 56px !important;
    padding: 10px 14px !important;
    font-size: 1.35rem !important;
    font-weight: 900 !important;
    color: #153e75 !important;
    border: 1px solid #cfe0f5 !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06) !important;
    box-sizing: border-box !important;
    line-height: 1.2 !important;
}

    .fv-xl[b-ttm71onnr9]::-webkit-datetime-edit {
        font-size: 1.35rem !important;
        font-weight: 900 !important;
    }

    .fv-xl[b-ttm71onnr9]::-webkit-datetime-edit-day-field,
    .fv-xl[b-ttm71onnr9]::-webkit-datetime-edit-month-field,
    .fv-xl[b-ttm71onnr9]::-webkit-datetime-edit-year-field {
        font-size: 1.35rem !important;
        font-weight: 900 !important;
    }

    .fv-xl[b-ttm71onnr9]::-webkit-datetime-edit-text {
        font-size: 1.35rem !important;
        font-weight: 900 !important;
    }

    .fv-xl[b-ttm71onnr9]::-webkit-calendar-picker-indicator {
        cursor: pointer;
        opacity: .80;
    }

.fv-hoy[b-ttm71onnr9] {
    height: 56px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid #cfe0f5;
    background: #f6f7fb;
    font-weight: 900;
    color: #153e75;
    cursor: pointer;
}

    .fv-hoy:hover[b-ttm71onnr9] {
        background: #eef5ff;
        border-color: #98bdf0;
    }

/* ==========================================================
   ✅ FIX ENCABEZADO PARLEY (MISMO DISEÑO QUE TIEMPOS)
   - Centra día/hora como en Tiempos
   - Caja Fecha de venta igual
   - Borde del encabezado más oscuro para que se note más
   ========================================================== */

/* 1) Encabezado: misma alineación + borde más marcado */
.ventas-encabezado[b-ttm71onnr9] {
    display: flex !important;
    align-items: center !important; /* clave: todo alineado bonito */
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 12px 22px !important; /* banner compacto como tiempos */
    margin: 10px 20px 0 !important;
    background: linear-gradient(90deg, #f7f9fb, #e3f2fd) !important;
    /* ✅ BORDE MÁS OSCURO (esto es lo que pediste) */
    border: 2px solid rgba(13, 71, 161, 0.35) !important;
    border-radius: 12px !important;
    /* sombra un poco más visible */
    box-shadow: 0 3px 10px rgba(0,0,0,0.10) !important;
}

/* 2) Centro: YA NO absoluto (igual que Tiempos) */
.fecha-centro[b-ttm71onnr9] {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 auto !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
}

/* 3) Caja derecha (Fecha de venta) igual que Tiempos: en una sola fila */
.fecha-venta-box[b-ttm71onnr9] {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    width: fit-content !important;
    min-width: 0 !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    /* mantiene el estilo que ya usas, solo lo hacemos consistente */
    background: #eef6ff !important;
    border: 1px solid rgba(13, 71, 161, 0.25) !important;
}

/* 4) Input date grande EXACTO (si ya existe en tu Parley, lo refuerza) */
.fv-xl[b-ttm71onnr9] {
    height: 56px !important;
    padding: 10px 14px !important;
    font-size: 1.35rem !important;
    font-weight: 900 !important;
    color: #153e75 !important;
    border: 1px solid #cfe0f5 !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06) !important;
    box-sizing: border-box !important;
    line-height: 1.2 !important;
}

    .fv-xl[b-ttm71onnr9]::-webkit-datetime-edit,
    .fv-xl[b-ttm71onnr9]::-webkit-datetime-edit-day-field,
    .fv-xl[b-ttm71onnr9]::-webkit-datetime-edit-month-field,
    .fv-xl[b-ttm71onnr9]::-webkit-datetime-edit-year-field,
    .fv-xl[b-ttm71onnr9]::-webkit-datetime-edit-text {
        font-size: 1.35rem !important;
        font-weight: 900 !important;
    }

/* 5) Botón Hoy: misma altura que el date */
.fv-hoy[b-ttm71onnr9] {
    height: 56px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
}

/* ==========================================================
   ✅ PARLEY: COLUMNA CENTRAL tipo TIEMPOS (reservar espacio)
   y borde más oscuro para que se note más (como pediste)
   ========================================================== */

/* Caja “fantasma” central (equivale visualmente al panel de prohibidos en Tiempos) */
.parley-centro-placeholder[b-ttm71onnr9] {
    width: 100%;
    min-height: 92px; /* altura parecida al bloque de prohibidos */
    border: 2px solid #7f8fa8; /* ✅ borde más oscuro */
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 3px 10px rgba(0,0,0,0.06);
}

/* ==========================================================
   ✅ PARLEY FIX FINAL: mantener 3 columnas en una sola fila
   (IZQ ventas) (CENTRO placeholder+botones) (DER noticias)
   ========================================================== */

/* 1) Asegura que SIEMPRE sea fila (no columna) */
.ventas-contenido[b-ttm71onnr9] {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 24px !important;
    flex-wrap: nowrap !important; /* nunca baja a otra fila */
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: auto !important; /* si no cabe, scroll horizontal */
}

    /* 2) IZQUIERDA (panel ventas) — que no se rompa */
    .ventas-contenido > .ventas-izquierda[b-ttm71onnr9] {
        flex: 0 0 auto !important;
    }

/* 3) COLUMNA CENTRAL: MISMO ANCHO que tiempos */
:root[b-ttm71onnr9] {
    --ancho-prohibidos: 360px;
}

.ventas-contenido > .col-prohibidos[b-ttm71onnr9] {
    flex: 0 0 var(--ancho-prohibidos) !important;
    min-width: var(--ancho-prohibidos) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
}

/* 4) Caja fantasma (borde oscuro) */
.col-prohibidos .parley-centro-placeholder[b-ttm71onnr9] {
    width: 100% !important;
    min-height: 92px !important;
    border: 2px solid #7f8fa8 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.06) !important;
}

/* 5) Botones debajo del placeholder, dentro de la misma columna */
.col-prohibidos .acciones-bajo-prohibidos[b-ttm71onnr9] {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important; /* si no caben, bajan dentro de la misma columna */
    gap: 10px !important;
    align-items: center !important;
    margin-top: 0 !important;
}

/* 6) Panel Noticias: SIEMPRE a la derecha, arriba */
.ventas-contenido > .panel-noticias[b-ttm71onnr9] {
    flex: 0 0 520px !important;
    min-width: 520px !important;
    margin-top: 0 !important;
}

/* ==========================================================
   ✅ PATCH FINAL PARLEY (NO BORRA NADA)
   - Alinea botones con "Guardar / Imprimir"
   - Quita cuadro blanco (sin eliminar diseños)
   - Refuerza borde del panel noticias sin cambiar su estilo
   ========================================================== */

/* 1) La columna central mantiene su ancho como Tiempos */
.ventas-contenido > .col-prohibidos[b-ttm71onnr9] {
    flex: 0 0 var(--ancho-prohibidos);
    min-width: var(--ancho-prohibidos);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 0 !important; /* 🔒 NO empujar la columna completa */
}

/* 2) "Altura fantasma" para que los botones bajen EXACTO como en Tiempos,
      pero SIN verse (no es cuadro blanco visible) */
.col-prohibidos .parley-centro-placeholder[b-ttm71onnr9] {
    display: block !important;
    width: 100% !important;
    height: 300px !important; /* ✅ AJUSTE FINO AQUÍ */
    min-height: 300px !important;
    background: transparent !important; /* invisible */
    border: none !important; /* invisible */
    box-shadow: none !important; /* invisible */
    padding: 0 !important;
    margin: 0 !important;
}

/* 3) Botones: pegados justo debajo del placeholder invisible */
.col-prohibidos .acciones-bajo-prohibidos[b-ttm71onnr9] {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
    margin-top: 0 !important; /* ✅ QUITA el margin-top:20px que los baja raro */
}

/* =========================
   WHATSAPP (BOTÓN + MODAL + MODAL IMAGEN)
   (Copiado desde Tiempos)
========================= */

/* ===== Botón WhatsApp ===== */
.wa-btn2[b-ttm71onnr9] {
    width: fit-content;
    max-width: 420px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 12px;
    border: 2px solid rgba(37, 211, 102, .75);
    background: linear-gradient(180deg, rgba(37,211,102,.22), rgba(18,140,126,.12));
    color: #0b2b16;
    font-weight: 900;
    font-size: 15px;
    line-height: 1;
    box-shadow: 0 10px 22px rgba(0,0,0,.12);
}

    .wa-btn2:hover[b-ttm71onnr9] {
        filter: brightness(1.05);
    }

    .wa-btn2:disabled[b-ttm71onnr9] {
        opacity: .5;
        cursor: not-allowed;
        filter: none;
    }

.wa-btn2__icon[b-ttm71onnr9] {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.70);
    border: 1px solid rgba(0,0,0,.08);
    flex: 0 0 auto;
}

    .wa-btn2__icon svg[b-ttm71onnr9] {
        width: 18px;
        height: 18px;
        display: block;
    }

.wa-btn2__text[b-ttm71onnr9] {
    white-space: nowrap;
}

/* ===== Modal principal WhatsApp ===== */
.wa2-backdrop[b-ttm71onnr9] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.64);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 99999;
}

.wa2-modal[b-ttm71onnr9] {
    width: min(720px, 96vw);
    background: #0f1420;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 30px 70px rgba(0,0,0,.65);
}

.wa2-header[b-ttm71onnr9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.wa2-title[b-ttm71onnr9] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
}

.wa2-badge[b-ttm71onnr9] {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(37,211,102,.14);
    border: 1px solid rgba(37,211,102,.25);
    color: #25D366;
}

    .wa2-badge svg[b-ttm71onnr9] {
        width: 22px;
        height: 22px;
        display: block;
    }

.wa2-title__main[b-ttm71onnr9] {
    font-weight: 900;
    font-size: 17px;
    line-height: 1.1;
}

.wa2-title__sub[b-ttm71onnr9] {
    font-size: 14px;
    opacity: .85;
    margin-top: 2px;
}

.wa2-x[b-ttm71onnr9] {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: #fff;
    cursor: pointer;
}

    .wa2-x:hover[b-ttm71onnr9] {
        filter: brightness(1.1);
    }

.wa2-body[b-ttm71onnr9] {
    padding: 16px;
}

.wa2-grid[b-ttm71onnr9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 640px) {
    .wa2-grid[b-ttm71onnr9] {
        grid-template-columns: 1fr;
    }
}

.wa2-field[b-ttm71onnr9] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wa2-label[b-ttm71onnr9] {
    font-size: 14px;
    opacity: .85;
    color: #dfe7ff;
}

.wa2-input[b-ttm71onnr9], .wa2-select[b-ttm71onnr9] {
    width: 100%;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    color: #fff;
    outline: none;
}

    .wa2-input[b-ttm71onnr9]::placeholder {
        color: rgba(255,255,255,.55);
    }

.wa2-actions[b-ttm71onnr9] {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.wa2-actions__right[b-ttm71onnr9] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.wa2-btn[b-ttm71onnr9] {
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: #fff;
    cursor: pointer;
    font-weight: 800;
}

    .wa2-btn:hover[b-ttm71onnr9] {
        filter: brightness(1.08);
    }

.wa2-btn--ghost[b-ttm71onnr9] {
    background: transparent;
}

.wa2-btn--soft[b-ttm71onnr9] {
    background: rgba(37,211,102,.10);
    border-color: rgba(37,211,102,.22);
}

.wa2-btn--primary[b-ttm71onnr9] {
    background: linear-gradient(180deg, rgba(37,211,102,.35), rgba(18,140,126,.25));
    border-color: rgba(37,211,102,.35);
}

.wa2-note[b-ttm71onnr9] {
    margin-top: 12px;
    padding: 12px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    color: #e8f0ff;
    font-size: 14px;
    line-height: 1.35;
}

/* ===== Modal Imagen ===== */
.wa-img-backdrop[b-ttm71onnr9] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.75);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    z-index: 100000;
}

.wa-img-modal[b-ttm71onnr9] {
    width: min(820px, 96vw);
    max-height: 92vh;
    background: #0f1420;
    border-radius: 18px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 30px 70px rgba(0,0,0,.65);
    overflow: auto;
}

    .wa-img-modal h3[b-ttm71onnr9] {
        margin: 0 0 10px 0;
        color: #fff;
        font-weight: 900;
        font-size: 18px;
    }

.wa-ticket-img[b-ttm71onnr9] {
    width: 100%;
    height: auto;
    max-height: calc(92vh - 170px);
    object-fit: contain;
    display: block;
}

.wa-actions[b-ttm71onnr9] {
    margin-top: 12px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.btn-guardar.ok[b-ttm71onnr9] {
    padding: 10px 16px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(37,211,102,.12);
    color: #fff;
    font-weight: 900;
    cursor: pointer;
}

    .btn-guardar.ok:hover[b-ttm71onnr9] {
        filter: brightness(1.08);
    }
/* _content/SistemaLoteriaDashboard/Components/Ventas/VentasTiempos.razor.rz.scp.css */

/* ==========================================================
   🧩 LAYOUT PRINCIPAL
   ========================================================== */
.ventas-contenido[b-610qae6d9r] {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 12px;
    /* 🔒 Que TODO sea una sola fila */
    flex-wrap: nowrap;
    /* 📜 Si no cabe con mucho zoom, scroll horizontal */
    overflow-x: auto;
}

.ventas-izquierda[b-610qae6d9r] {
    flex: 0 0 auto; /* ya tienes min/max-width, así no se deforma */
}

.col-prohibidos[b-610qae6d9r] {
    flex: 0 0 auto;
}

.panel-noticias[b-610qae6d9r] {
    flex: 0 0 520px; /* mismo ancho que ya usas */
}


/* ==========================================================
   🧩 PANEL IZQUIERDO (VENTAS)
   ========================================================== */
.ventas-izquierda[b-610qae6d9r] {
    flex: 1;
    min-width: 400px;
    max-width: 700px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    padding: 15px;
    box-sizing: border-box;
    min-height: 300px;
    margin: 0;
}

/* ====== LISTA (contenedor con scroll) ====== */
.ventas-lista[b-610qae6d9r] {
    position: relative;
    border: 2px solid #e0e6f1;
    border-radius: 8px;
    background: #fff;
    max-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
    padding: 0;
}

/* ====== LISTA: el grid lo usan las filas (no el contenedor) ====== */
.tabla-lista[b-610qae6d9r] {
    display: block;
    width: 100%;
    margin: 0 auto;
}

/* ====== FILA CABECERA y FILA ITEM: aquí vive el grid real ====== */
.fila-cabecera[b-610qae6d9r],
.fila-item[b-610qae6d9r] {
    display: grid;
    grid-template-columns: 120px 170px 56px;
    width: 100%;
    justify-content: center;
    align-items: center;
}

/* Modo BASE con reventado */
.tabla-lista.reventado .fila-cabecera[b-610qae6d9r],
.tabla-lista.reventado .fila-item[b-610qae6d9r] {
    grid-template-columns: minmax(90px, 1.1fr) /* Número */
    minmax(120px, 1.4fr) /* Monto */
    minmax(120px, 1.4fr) /* Monto R */
    minmax(40px, 0.6fr); /* X */
}


/* ====== CELDAS ====== */
.celda[b-610qae6d9r] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
    padding: 10px 12px;
    min-height: 44px;
    font-weight: 800;
    font-size: 20px;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    border-bottom: 1px solid #e6ecf6;
}

    /* CABECERA (títulos centrados y más grandes) */
    .celda.titulo[b-610qae6d9r] {
        position: sticky;
        top: 0;
        z-index: 10;
        background: #f7f9fc;
        border-bottom: 2px solid #e0e6f1;
        box-shadow: 0 1px 0 #e0e6f1;
        text-align: center;
        justify-content: center;
        align-items: center;
        font-weight: 900;
        font-size: 22px;
        color: #1c2b4d;
        height: 48px;
    }

        /* La celda de cabecera de la columna de la X (vacía pero sticky) */
        .celda.titulo.th-x[b-610qae6d9r] {
            background: #f7f9fc;
            pointer-events: none;
        }

/* Celdas normales (centradas igual) */
.celda[b-610qae6d9r],
.fila-item .numero[b-610qae6d9r],
.fila-item .monto[b-610qae6d9r] {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 800;
    font-size: 20px;
    height: 48px;
}

/* Guion perfectamente centrado entre Número y Monto */
.fila-item .celda.numero[b-610qae6d9r]::after {
    content: "–";
    color: #76acfe;
    font-weight: 600;
    font-size: 20px;
    position: relative;
    left: 65%;
    transform: translateX(-50%);
    top: 25%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* ========== BOTÓN ELIMINAR (moderno y elegante) ========== */
.btn-eliminar[b-610qae6d9r] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(180deg,#ff5c5c,#d93636);
    box-shadow: 0 6px 14px rgba(217,54,54,.25), inset 0 1px 0 rgba(255,255,255,.28);
    cursor: pointer;
    padding: 0;
    font-size: 0;
    line-height: 1;
    margin: auto;
    z-index: 1;
    transition: transform .12s ease, box-shadow .18s ease, filter .18s ease, background .18s ease;
}

    .btn-eliminar[b-610qae6d9r]::before,
    .btn-eliminar[b-610qae6d9r]::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 14px;
        height: 2px;
        background: #fff;
        border-radius: 2px;
        transform-origin: center;
        box-shadow: 0 0 1px rgba(0,0,0,.25);
    }

    .btn-eliminar[b-610qae6d9r]::before {
        transform: translate(-50%,-50%) rotate(45deg);
    }

    .btn-eliminar[b-610qae6d9r]::after {
        transform: translate(-50%,-50%) rotate(-45deg);
    }

    .btn-eliminar:hover[b-610qae6d9r] {
        transform: translateY(-1px) scale(1.03);
        filter: saturate(1.06);
        box-shadow: 0 10px 20px rgba(217,54,54,.28), inset 0 1px 0 rgba(255,255,255,.32);
    }

    .btn-eliminar:active[b-610qae6d9r] {
        transform: translateY(0) scale(.97);
        box-shadow: 0 4px 10px rgba(217,54,54,.22), inset 0 1px 0 rgba(255,255,255,.24);
    }

    .btn-eliminar:focus-visible[b-610qae6d9r] {
        outline: 3px solid rgba(25,118,210,.35);
        outline-offset: 2px;
        box-shadow: 0 0 0 4px rgba(25,118,210,.15), 0 8px 18px rgba(217,54,54,.25), inset 0 1px 0 rgba(255,255,255,.28);
    }

@media (prefers-reduced-motion: reduce) {
    .btn-eliminar[b-610qae6d9r] {
        transition: none;
    }
}

/* ====== SEPARADOR ====== */
.separador[b-610qae6d9r] {
    border: none;
    border-top: 2px solid #d9e0ef;
    margin: 8px 0;
}

/* ====== CAMPOS DE ENTRADA ====== */
.input-linea[b-610qae6d9r] {
    display: flex;
    gap: 10px;
    margin: 10px 0;
    justify-content: center;
    /* 👇 NUEVO: si con 3 cajas no cabe, que hagan otra fila
       en vez de salirse del panel al hacer zoom */
    flex-wrap: wrap;
    max-width: 100%;
}

.input-pequeno[b-610qae6d9r] {
    padding: 12px;
    font-size: 24px;
    font-weight: 800;
    border: 2px solid #ccc;
    border-radius: 8px;
    text-align: center;
    transition: .2s;
    /* 👇 NUEVO: ancho base, pero puede encogerse si hace falta */
    flex: 1 1 120px;
    max-width: 210px;
}

    .input-pequeno:focus[b-610qae6d9r] {
        border-color: #1e88e5;
        box-shadow: 0 0 5px rgba(30,136,229,.4);
        outline: none;
    }

.monto-corto[b-610qae6d9r] {
    width: 120px;
}

.numero-corto[b-610qae6d9r] {
    width: 120px;
}

/* ====== BOTÓN GUARDAR / IMPRIMIR ====== */
.btn-guardar[b-610qae6d9r] {
    background: linear-gradient(90deg,#1976d2,#1e88e5);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px 22px;
    cursor: pointer;
    font-weight: 800;
    font-size: 16px;
    transition: .2s;
}

    .btn-guardar:hover[b-610qae6d9r] {
        background: linear-gradient(90deg,#1565c0,#1976d2);
    }

/* ====== TOTAL ====== */
.total[b-610qae6d9r] {
    font-size: 22px;
    font-weight: 800;
    text-align: right;
    color: #003c8f;
    margin-top: 10px;
}

@media (max-width:520px) {
    .tabla-lista[b-610qae6d9r] {
        grid-template-columns: 100px 140px 46px;
    }

        .tabla-lista.reventado[b-610qae6d9r] {
            grid-template-columns: minmax(70px, 1.1fr) /* N° */
            minmax(90px, 1.3fr) /* Monto */
            minmax(90px, 1.3fr) /* Monto R */
            minmax(34px, 0.5fr); /* X */
        }


    .celda[b-610qae6d9r] {
        font-size: 18px;
    }
}

/* ===== Panel de Números Prohibidos con título rojo, fecha y ajuste dinámico ===== */
.numeros-prohibidos-panel[b-610qae6d9r] {
    ax-width: 620px; /* ajusta si quieres más/menos ancho */
    align-self: flex-start;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    padding: 16px 24px;
    border: 2px solid #c62828;
    text-align: center;
    display: inline-block;
    transition: all 0.3s ease;
    width: auto;
    height: auto;
    min-width: 240px;
}

    .numeros-prohibidos-panel h4[b-610qae6d9r] {
        color: #c62828;
        font-weight: 800;
        font-size: 1.45em;
        margin: 0 0 8px 0;
    }

.np-fecha[b-610qae6d9r] {
    font-size: 1.1em;
    font-weight: 700;
    color: #333;
    margin-top: 2px;
    margin-bottom: 10px;
    text-transform: capitalize;
}

.numeros-prohibidos[b-610qae6d9r] {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(11, minmax(40px, 1fr)); /* ✅ 11 por fila */
    gap: 8px;
    justify-content: center; /* centra la cuadrícula */
}
    .numeros-prohibidos li[b-610qae6d9r] {
        color: #e53935;
        font-weight: 700;
        background: #ffebee;
        padding: 6px 12px;
        border-radius: 8px;
        min-width: 40px;
        text-align: center;
        font-size: 1.15em;
        transition: transform 0.2s ease, background 0.2s ease;
    }

        .numeros-prohibidos li:hover[b-610qae6d9r] {
            background: #ffcdd2;
            transform: scale(1.08);
        }

/* ==========================================================
   🧩 ENCABEZADO
   ========================================================== */
.ventas-encabezado[b-610qae6d9r] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 15px 25px 25px;
    background: linear-gradient(90deg, #f7f9fb, #e3f2fd);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin: 10px 20px 0;
}

.titulo-sorteo[b-610qae6d9r] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    position: relative;
}

.sorteo-selector-titulo[b-610qae6d9r] {
    position: relative;
    cursor: pointer;
    user-select: none;
    display: inline-block;
}

.sorteo-nombre[b-610qae6d9r] {
    font-size: 2.2em;
    font-weight: 800;
    color: #004aad;
    letter-spacing: 1px;
    margin: 0;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.15);
    animation: colorCambio-b-610qae6d9r 4s linear infinite;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s ease;
}

    .sorteo-nombre:hover[b-610qae6d9r] {
        transform: scale(1.02);
    }

.flecha[b-610qae6d9r] {
    font-size: 0.6em;
    margin-left: 6px;
    transition: transform 0.3s ease;
}

.sorteo-selector-titulo:hover .flecha[b-610qae6d9r] {
    transform: rotate(180deg);
}

.menu-sorteos[b-610qae6d9r] {
    position: absolute;
    top: 100%;
    left: 0;
    transform: none;
    width: 220px;
    background: #ffffff;
    border: 2px solid #cfd8dc;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    margin-top: 8px;
    padding: 6px 0;
    list-style: none;
    z-index: 20;
    animation: aparecerMenu-b-610qae6d9r 0.2s ease-out forwards;
    max-height: min(60vh, 360px);
    overflow-y: auto;
    overflow-x: hidden;
}

    .menu-sorteos li[b-610qae6d9r] {
        font-weight: 700;
        color: #0d47a1;
        font-size: 1.1em;
        padding: 10px 16px;
        text-align: center;
        transition: all 0.2s ease;
        border-radius: 6px;
    }

        .menu-sorteos li:hover[b-610qae6d9r] {
            background: #e3f2fd;
            color: #003c8f;
            transform: scale(1.03);
        }

        .menu-sorteos li.activo[b-610qae6d9r] {
            background: #bbdefb;
            color: #0d47a1;
        }

@keyframes aparecerMenu-b-610qae6d9r {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes colorCambio-b-610qae6d9r {
    0% {
        color: #e53935;
    }

    25% {
        color: #f9a825;
    }

    50% {
        color: #1e88e5;
    }

    75% {
        color: #43a047;
    }

    100% {
        color: #e53935;
    }
}

.hora-info[b-610qae6d9r] {
    font-size: 1.05em;
    color: #0d47a1;
    font-weight: 600;
}

    .hora-info strong[b-610qae6d9r] {
        color: #1a237e;
    }

.hora-numero[b-610qae6d9r] {
    font-size: 1.4em;
    font-weight: 700;
    color: #0d47a1;
}


.fecha-texto[b-610qae6d9r] {
    font-size: 1.35em;
    font-weight: 800;
    color: #2c3e50;
    text-transform: capitalize;
}

.hora-texto[b-610qae6d9r] {
    font-size: 1.15em;
    font-weight: 700;
    color: #1565c0;
    letter-spacing: 1px;
}

/* ==========================================================
   🧩 BOTONES SECUNDARIOS
   ========================================================== */
.acciones-internas[b-610qae6d9r] {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
}

.btn-secundario[b-610qae6d9r] {
    background: linear-gradient(90deg, #e3f2fd, #bbdefb);
    color: #0d47a1;
    border: 1px solid #64b5f6;
    border-radius: 8px;
    padding: 8px 14px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    transition: 0.2s;
}

    .btn-secundario:hover[b-610qae6d9r] {
        background: linear-gradient(90deg, #bbdefb, #90caf9);
    }

.btn-guardar:active[b-610qae6d9r],
.menu-btn:active[b-610qae6d9r] {
    transform: scale(0.97);
}

/* ===============================
   🎯 CONTADOR DE TIEMPO RESTANTE
   =============================== */
.ventas-encabezado .contador[b-610qae6d9r],
.contador[b-610qae6d9r] {
    font-size: 1.5em;
    font-weight: 800;
    color: #d32f2f;
    background: none;
    border-radius: 0;
    padding: 0;
    min-width: 85px;
    text-align: center;
    transition: all 0.3s ease;
}

    .ventas-encabezado .contador.critico[b-610qae6d9r],
    .contador.critico[b-610qae6d9r] {
        animation: parpadeoRojo-b-610qae6d9r 1s infinite alternate ease-in-out;
    }

@keyframes parpadeoRojo-b-610qae6d9r {
    0% {
        color: #d32f2f;
        transform: scale(1);
    }

    50% {
        color: #ff0000;
        transform: scale(1.05);
    }

    100% {
        color: #b71c1c;
        transform: scale(1);
    }
}

/* ===========================
   PANEL DE NOTICIAS (derecha)
   =========================== */
.panel-noticias[b-610qae6d9r] {
    position: relative;
    width: 520px;
    background: #f7fbff;
    border: 2px solid #e0e6f1;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    height: auto;
    z-index: 10;
    margin-top: 0;
    margin-left: 0;
}

    .panel-noticias .header[b-610qae6d9r] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 10px;
    }

        .panel-noticias .header h3[b-610qae6d9r] {
            margin: 0;
            font-size: 1.25rem;
            font-weight: 900;
            color: #0d47a1;
            letter-spacing: .3px;
        }

    .panel-noticias .acciones[b-610qae6d9r] {
        display: flex;
        gap: 8px;
    }

.btn-icono[b-610qae6d9r] {
    border: 1px solid #c5d6f2;
    background: #e9f2ff;
    border-radius: 8px;
    padding: 6px 10px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s;
}

    .btn-icono:hover[b-610qae6d9r] {
        background: #d9eaff;
    }

.noticias-scroll[b-610qae6d9r] {
    max-height: 520px;
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-gutter: stable;
}

.noticia-card[b-610qae6d9r] {
    background: #ffffff;
    border: 2px solid #e6edf8;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.04);
    transition: transform .15s ease, box-shadow .2s ease;
}

    .noticia-card:hover[b-610qae6d9r] {
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    }

.noticia-top[b-610qae6d9r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.noticia-titulo[b-610qae6d9r] {
    font-weight: 900;
    font-size: 1.05rem;
    color: #153e75;
    margin: 0;
}

.badges[b-610qae6d9r] {
    display: flex;
    gap: 6px;
    align-items: center;
}

.badge[b-610qae6d9r] {
    padding: 3px 8px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
}

.badge-todos[b-610qae6d9r] {
    background: #e8f5e9;
    color: #1b5e20;
    border: 1px solid #c8e6c9;
}

.badge-priv[b-610qae6d9r] {
    background: #fff3e0;
    color: #e65100;
    border: 1px solid #ffe0b2;
}

.badge-fecha[b-610qae6d9r] {
    background: #e3f2fd;
    color: #0d47a1;
    border: 1px solid #bbdefb;
}

.noticia-body[b-610qae6d9r] {
    color: #334155;
    line-height: 1.45;
    white-space: pre-wrap;
    margin-bottom: 8px;
}

.noticia-acciones[b-610qae6d9r] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.btn-cerrar[b-610qae6d9r] {
    background: #ffe5e5;
    color: #b71c1c;
    border: 1px solid #ffcdd2;
    border-radius: 8px;
    padding: 6px 10px;
    font-weight: 800;
    cursor: pointer;
    transition: .2s;
}

    .btn-cerrar:hover[b-610qae6d9r] {
        background: #ffcccc;
    }

.noticia-leida[b-610qae6d9r] {
    opacity: .55;
}

.col-prohibidos[b-610qae6d9r] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

:root[b-610qae6d9r] {
    --ancho-prohibidos: 360px;
}

.col-prohibidos .numeros-prohibidos-panel[b-610qae6d9r] {
    width: var(--ancho-prohibidos);
}

.col-prohibidos .acciones-bajo-prohibidos[b-610qae6d9r] {
    width: var(--ancho-prohibidos);
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 20px;
}

/* === Estado bloqueado (sorteo cerrado) === */
.bloqueado[b-610qae6d9r] {
    opacity: 0.6;
    pointer-events: none;
    transition: opacity 0.3s ease;
    position: relative;
}

    .bloqueado[b-610qae6d9r]::after {
        content: "SORTEO CERRADO";
        position: absolute;
        top: 40%;
        left: 0;
        right: 0;
        text-align: center;
        font-weight: bold;
        font-size: 1.1rem;
        color: #b40000;
        background: rgba(255,255,255,0.85);
        border: 2px solid #b40000;
        border-radius: 8px;
        padding: 8px;
        width: 60%;
        margin: 0 auto;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    }

/* ===== MODAL VER LISTA (escala dinámica) ===== */
.modal-overlay[b-610qae6d9r] {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,.45);
    z-index: 99998 !important;
}

.modal-lista[b-610qae6d9r] {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 96vw !important;
    height: 90vh !important;
    background: #eaf3fb;
    border: 1px solid #b6d0e8;
    border-radius: 10px;
    padding: 10px 12px;
    padding-top: 0px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    z-index: 99999 !important;
    box-sizing: border-box;
    /* 🔹 ANTES: overflow: hidden !important; */
    overflow-y: auto !important; /* scroll vertical si hace falta */
    overflow-x: hidden !important; /* evitamos scroll horizontal feo */
}


body.modal-open[b-610qae6d9r] {
    overflow: hidden !important;
}

.modal-close[b-610qae6d9r] {
    border: none;
    background: #ffeded;
    color: #b40000;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    font-size: 20px;
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 2;
}

    .modal-close:hover[b-610qae6d9r] {
        background: #ffd6d6;
    }

/* CONTENEDOR ÚNICO DEL CONTENIDO DE LA LISTA */
#listaCanvas[b-610qae6d9r] {
    width: 100%;
    height: 100%;
    padding: 10px 20px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center; /* centrado horizontal */
    justify-content: flex-start; /* contenido pegado arriba, no al centro */
}

#contentLista[b-610qae6d9r] {
    display: inline-block; /* que mida según su tabla, no que se estire raro */
}


/* ============================
   🧱 ESTRUCTURA MODO NORMAL
   ============================ */
.lista-unica-normal[b-610qae6d9r] {
    width: 100%;
    max-width: 1150px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 0;
}

/* ============================
   🧱 ESTRUCTURA MODO REVENTADO
   ============================ */
.lista-unica-rev[b-610qae6d9r] {
    width: 100%;
    max-width: 1350px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 0;
}

/* === TÍTULO Y FECHA === */
.fila-titulo[b-610qae6d9r] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.titulo-sorteo-modal[b-610qae6d9r] {
    font-weight: 900;
    font-size: 1.6rem;
    color: #c68200;
}

.fecha-modal[b-610qae6d9r] {
    font-weight: 700;
    font-size: 1rem;
    color: #255;
}

/* === TOTALES GENERALES (arriba) === */
.fila-totales-normal[b-610qae6d9r],
.fila-totales-rev[b-610qae6d9r] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    margin-bottom: 6px;
}

    .fila-totales-normal .label[b-610qae6d9r],
    .fila-totales-rev .label[b-610qae6d9r] {
        font-weight: 900;
        font-size: 0.95rem;
        color: #04192e;
    }

    .fila-totales-normal .valor[b-610qae6d9r],
    .fila-totales-rev .valor[b-610qae6d9r] {
        font-weight: 900;
        font-size: 0.95rem;
        color: #b31523;
    }

    .fila-totales-rev .sep[b-610qae6d9r] {
        margin: 0 6px;
        opacity: .6;
    }

/* ============================
   🧮 REJILLA PRINCIPAL
   ============================ */

/* Modo NORMAL: 5 bloques (N° + Monto) = 10 columnas */
.lista-unica-normal .fila-cabecera[b-610qae6d9r],
.lista-unica-normal .fila-numeros[b-610qae6d9r],
.lista-unica-normal .fila-totales-f[b-610qae6d9r] {
    display: grid;
    grid-template-columns: repeat(5, 64px 95px);
    column-gap: 4px;
    row-gap: 4px;
    justify-content: center;
}

/* Modo REVENTADO: 5 bloques (N° + Monto + R) = 15 columnas */
.lista-unica-rev .fila-cabecera[b-610qae6d9r],
.lista-unica-rev .fila-numeros[b-610qae6d9r],
.lista-unica-rev .fila-totales-f-rev[b-610qae6d9r] {
    display: grid;
    grid-template-columns: repeat(5, 64px 95px 95px);
    column-gap: 4px;
    row-gap: 4px;
    justify-content: center;
}

/* ============================
   🎨 CABECERAS (Actualizadas)
   ============================ */

/* 🔵 CABECERA N° */
.h-num[b-610qae6d9r] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0d6efd; /* azul fuerte */
    color: white;
    font-size: 11px;
    font-weight: 900;
    border-radius: 6px;
    border: 1px solid #0a58ca;
    height: 22px;
    box-sizing: border-box;
}

/* 🟢 CABECERA MONTO */
.h-monto[b-610qae6d9r] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #3CB371; /* verde fuerte */
    color: white;
    font-size: 11px;
    font-weight: 900;
    border-radius: 6px;
    border: 1px solid #2e8b57;
    height: 22px;
    box-sizing: border-box;
}

/* 🔴 CABECERA REVENTADO (R) */
.h-monto-rev[b-610qae6d9r] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #E74C3C; /* rojo fuerte */
    color: white;
    font-size: 11px;
    font-weight: 900;
    border-radius: 6px;
    border: 1px solid #c0392b;
    height: 22px;
    box-sizing: border-box;
}


/* ============================
   🎨 CELDAS (N°, Monto, R)
   ============================ */
.celda-num[b-610qae6d9r],
.celda-monto[b-610qae6d9r],
.celda-monto-rev[b-610qae6d9r] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    padding: 0 6px;
    border-radius: 10px;
    height: 22px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Número */
.celda-num[b-610qae6d9r] {
    background: #e4f1fb;
    color: #0a406e;
    border: 1px solid #8db7d8;
}

/* Monto normal */
.celda-monto[b-610qae6d9r] {
    background: #e9f7ef;
    color: #0a5c38;
    border: 1px solid #8cc7a9;
}

/* Monto reventado */
.celda-monto-rev[b-610qae6d9r] {
    background: #faecec;
    color: #b02222;
    border: 1px solid #d3a3a3;
}

/* Números prohibidos en rojo */
.celda-num.prohibido[b-610qae6d9r] {
    color: #d32f2f;
    font-size: 14px;
}

/* ============================================================
   🟦 TOTALES F1..F5 — MODO NORMAL (5 columnas x 2 = 10 celdas)
   Alineado EXACTO como las filas de números
   ============================================================ */
.fila-totales-f[b-610qae6d9r] {
    display: grid;
    grid-template-columns: repeat(10, 1fr); /* 5 pares (label + monto) */
    gap: 4px;
    margin-top: 4px;
}

    .fila-totales-f .label[b-610qae6d9r],
    .fila-totales-f .valor[b-610qae6d9r] {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 26px;
        font-size: 14px;
        font-weight: 950;
        border-radius: 6px;
        box-sizing: border-box;
        padding: 0 6px;
    }

    /* 🔵 Label: "Total F1", "Total F2"... */
    .fila-totales-f .label[b-610qae6d9r] {
        background: #eaf8ff; /* azul clarito */
        color: #0c6aa6; /* azul más fuerte */
        border: 1px dashed #0c6aa6; /* borde punteado */
        white-space: nowrap; /* 👉 evita que se parta en dos líneas */
    }

    /* 🟢 Monto normal */
    .fila-totales-f .valor[b-610qae6d9r] {
        background: #f1fff5; /* verde muy suave */
        color: #0f7a3a; /* verde más fuerte */
        border: 1px dashed #0f7a3a; /* borde punteado */
    }

/* ============================================================
   🔴 TOTALES F1..F5 — MODO REVENTADO (5 columnas x 3 = 15 celdas)
   (Label + Monto Normal + Monto R)
   ============================================================ */
.fila-totales-f-rev[b-610qae6d9r] {
    display: grid;
    grid-template-columns: repeat(15, 1fr); /* 5 grupos x 3 columnas */
    gap: 4px;
    margin-top: 4px;
}

    .fila-totales-f-rev .label[b-610qae6d9r],
    .fila-totales-f-rev .valor-normal[b-610qae6d9r],
    .fila-totales-f-rev .valor-rev[b-610qae6d9r] {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 26px;
        font-size: 14px;
        font-weight: 950;
        border-radius: 6px;
        box-sizing: border-box;
        padding: 0 6px;
    }

    /* 🔵 Label */
    .fila-totales-f-rev .label[b-610qae6d9r] {
        background: #eaf8ff;
        color: #0c6aa6;
        border: 1px dashed #0c6aa6;
        white-space: nowrap; /* 👉 igual: sin salto de línea */
    }

    /* 🟢 Monto normal */
    .fila-totales-f-rev .valor-normal[b-610qae6d9r] {
        background: #f1fff5;
        color: #0f7a3a;
        border: 1px dashed #0f7a3a;
    }

    /* 🔴 Monto reventado */
    .fila-totales-f-rev .valor-rev[b-610qae6d9r] {
        background: #fff5f5;
        color: #c62828;
        border: 1px dashed #c62828;
    }


/* Asegurar que nada se desborde raro */
#listaCanvas > div[b-610qae6d9r] {
    min-width: 0;
    min-height: 0;
}

/* === Popup de error de venta (centrado en la pantalla) === */
.venta-modal-backdrop[b-610qae6d9r] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
}

.venta-modal[b-610qae6d9r] {
    background: #ffffff;
    border-radius: 14px;
    padding: 18px 22px 20px;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.35);
    animation: ventaModalIn-b-610qae6d9r 0.18s ease-out;
    text-align: left;
}

    .venta-modal h3[b-610qae6d9r] {
        margin: 0 0 10px 0;
        font-size: 1.15rem;
        font-weight: 800;
        color: #c62828;
    }

    .venta-modal p[b-610qae6d9r] {
        margin: 0 0 18px 0;
        line-height: 1.4;
        font-size: 0.95rem;
        white-space: pre-line;
        color: #333;
    }

    .venta-modal .btn.ok[b-610qae6d9r] {
        width: 100%;
        font-weight: 600;
    }

@keyframes ventaModalIn-b-610qae6d9r {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.ventas-encabezado[b-610qae6d9r] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.fecha-venta-box[b-610qae6d9r] {
    min-width: 240px;
    background: #eef6ff;
    border: 1px solid #cfe0f5;
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fv-titulo[b-610qae6d9r] {
    font-weight: 900;
    color: #153e75;
}

.fv-date[b-610qae6d9r] {
    height: 40px;
    border: 1px solid #cfe0f5;
    border-radius: 10px;
    padding: 6px 10px;
    font-weight: 800;
    color: #153e75;
    background: #fff;
}

.fv-hoy[b-610qae6d9r] {
    height: 36px;
    border-radius: 10px;
    border: 1px solid #cfe0f5;
    background: #fff;
    font-weight: 800;
    cursor: pointer;
}

/* ✅ FECHA GRANDE (igual a Restricciones) */
.fv-xl[b-610qae6d9r] {
    height: 56px !important;
    padding: 10px 14px !important;
    font-size: 1.35rem !important;
    font-weight: 900 !important;
    color: #153e75 !important;
    border: 1px solid #cfe0f5 !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06) !important;
    box-sizing: border-box !important;
    line-height: 1.2 !important;
}

    /* ✅ Chrome/Edge: agranda el texto visible interno del date */
    .fv-xl[b-610qae6d9r]::-webkit-datetime-edit {
        font-size: 1.35rem !important;
        font-weight: 900 !important;
    }

    .fv-xl[b-610qae6d9r]::-webkit-datetime-edit-day-field,
    .fv-xl[b-610qae6d9r]::-webkit-datetime-edit-month-field,
    .fv-xl[b-610qae6d9r]::-webkit-datetime-edit-year-field {
        font-size: 1.35rem !important;
        font-weight: 900 !important;
    }

    .fv-xl[b-610qae6d9r]::-webkit-datetime-edit-text {
        font-size: 1.35rem !important;
        font-weight: 900 !important;
    }

    /* Icono calendario nativo */
    .fv-xl[b-610qae6d9r]::-webkit-calendar-picker-indicator {
        cursor: pointer;
        opacity: .80;
    }

/* ==========================================================
   FIX ENCABEZADO TIEMPOS (igual a Parley)
   ========================================================== */

.ventas-encabezado[b-610qae6d9r] {
    display: flex;
    align-items: center; /* en vez de flex-end / flex-start */
    justify-content: space-between;
    gap: 14px;
    padding: 12px 22px; /* banner más compacto */
}

/* El centro ya NO debe ser absoluto */
.fecha-centro[b-610qae6d9r] {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 auto; /* queda centrado dentro del banner */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

/* Caja derecha en una sola fila como Parley */
.fecha-venta-box[b-610qae6d9r] {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    width: fit-content !important;
    min-width: 0 !important;
    padding: 10px 12px !important;
}

/* Botón Hoy alto igual al date */
.fv-hoy[b-610qae6d9r] {
    height: 56px !important;
    padding: 0 14px !important;
}


/* ==========================================================
   ✅ MEJORA PANEL NOTICIAS (NO CAMBIA TAMAÑO / NO MUEVE NADA)
   - Solo visual + animación suave + mejor lectura con muchas noticias
   - Pegar al FINAL del CSS
   ========================================================== */

/* Suaviza el scroll (ya lo tienes, pero aseguramos consistencia) */
.panel-noticias .noticias-scroll[b-610qae6d9r] {
    scroll-behavior: smooth;
}

/* Animación de entrada suave (sin afectar layout) */
@keyframes noticiaInSoft-b-610qae6d9r {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tarjeta: mejora sombra/borde y entrada */
.panel-noticias .noticia-card[b-610qae6d9r] {
    position: relative;
    animation: noticiaInSoft-b-610qae6d9r .22s ease-out both;
    border-color: rgba(13, 71, 161, 0.15); /* azul suave */
    box-shadow: 0 3px 10px rgba(0,0,0,0.04);
    transition: transform .15s ease, box-shadow .18s ease, border-color .18s ease;
    will-change: transform;
}

    /* Hover elegante */
    .panel-noticias .noticia-card:hover[b-610qae6d9r] {
        transform: translateY(-2px);
        box-shadow: 0 10px 22px rgba(0,0,0,0.10);
        border-color: rgba(30, 136, 229, 0.28);
    }

    /* NO leídas: línea lateral azul (sin mover el contenido) */
    .panel-noticias .noticia-card:not(.noticia-leida)[b-610qae6d9r]::before {
        content: "";
        position: absolute;
        left: 0;
        top: 10px;
        bottom: 10px;
        width: 4px;
        border-radius: 6px;
        background: linear-gradient(180deg, #1e88e5, #90caf9);
    }

/* Leídas: se ven suaves pero legibles */
.panel-noticias .noticia-leida[b-610qae6d9r] {
    opacity: 0.62; /* ya tenías .55; subo un poquito para mejor lectura */
    filter: saturate(0.92);
}

/* Título: un poco más pro y con recorte si es larguísimo */
.panel-noticias .noticia-titulo[b-610qae6d9r] {
    line-height: 1.15;
    letter-spacing: 0.2px;
    max-width: 320px; /* no toca el panel, solo evita que empuje badges */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Contenido: mejor lectura con muchas noticias (sin crecer infinito) */
.panel-noticias .noticia-body[b-610qae6d9r] {
    /* Mantiene tu pre-wrap, pero evita tarjetas gigantes si pegan textos largos */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5; /* muestra 5 líneas */
    overflow: hidden;
}

/* Si quieres que al pasar el mouse se vea completo, descomenta:
.panel-noticias .noticia-card:hover .noticia-body {
    -webkit-line-clamp: unset;
}
*/

/* Badges: más “pill” moderno sin cambiar tamaños */
.panel-noticias .badge[b-610qae6d9r] {
    border: 1px solid rgba(13, 71, 161, 0.12);
    box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
}

/* Botones icono: hover más elegante */
.panel-noticias .btn-icono[b-610qae6d9r] {
    transition: transform .12s ease, background .15s ease, box-shadow .15s ease, border-color .15s ease;
}

    .panel-noticias .btn-icono:hover[b-610qae6d9r] {
        transform: translateY(-1px);
        box-shadow: 0 8px 18px rgba(13, 71, 161, 0.10);
        border-color: rgba(30, 136, 229, 0.25);
    }

/* Botón “Marcar leído”: más pro sin cambiar layout */
.panel-noticias .btn-cerrar[b-610qae6d9r] {
    transition: transform .12s ease, background .15s ease, box-shadow .15s ease, border-color .15s ease;
    box-shadow: 0 2px 10px rgba(183, 28, 28, 0.06);
}

    .panel-noticias .btn-cerrar:hover[b-610qae6d9r] {
        transform: translateY(-1px);
        box-shadow: 0 10px 20px rgba(183, 28, 28, 0.10);
    }

/* Respeto accesibilidad: si el sistema pide reducir animaciones */
@media (prefers-reduced-motion: reduce) {
    .panel-noticias .noticia-card[b-610qae6d9r],
    .panel-noticias .btn-icono[b-610qae6d9r],
    .panel-noticias .btn-cerrar[b-610qae6d9r] {
        animation: none !important;
        transition: none !important;
    }
}

/* ==========================================================
   ✅ BORDE MÁS OSCURO EN EL ENCABEZADO (TIEMPOS)
   - Solo refuerza el borde para que se note más
   - No cambia posiciones, tamaños ni lógica
   ========================================================== */

.ventas-encabezado[b-610qae6d9r] {
    border: 2px solid rgba(13, 71, 161, 0.35) !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.10) !important;
}

/* ==========================================================
   ✅ BADGE DEL JUEGO (TIEMPOS / PARLEY) - MISMO DISEÑO
   Ubicación: debajo del nombre del sorteo y encima de Hora/Falta
   ========================================================== */
.juego-badge[b-610qae6d9r] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 950;
    font-size: 0.95rem;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    line-height: 1;
    margin-top: 4px;
    margin-bottom: 6px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}

    /* TIEMPOS: azul suave */
    .juego-badge.tiempos[b-610qae6d9r] {
        background: linear-gradient(180deg, #e8f2ff, #d7e9ff);
        border: 1px solid #9cc6ff;
        color: #0b3a7a;
    }

/* ===== Edición inline SIN deformar filas ===== */
.celda[b-610qae6d9r] {
    position: relative;
}

.edit-inline[b-610qae6d9r] {
    position: absolute;
    inset: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    box-sizing: border-box;
    border: 2px solid #111;
    border-radius: 10px;
    background: transparent;
    font: inherit;
    color: inherit;
    text-align: center;
    padding: 0;
    outline: none;
    z-index: 5;
    pointer-events: auto;
}

/* selección bonita cuando solo está enfocada la celda (sin editar) */
.fila-item:focus[b-610qae6d9r],
.celda:focus[b-610qae6d9r] {
    outline: none;
}

.celda:focus[b-610qae6d9r] {
    border-radius: 10px;
    box-shadow: 0 0 0 2px rgba(0,0,0,.25);
}

/* ==========================================================
   ✅ BOTÓN: AGRUPA MONTOS (toggle ON/OFF)
   - No toca estilos existentes de .btn-secundario
   ========================================================== */
.btn-agrupar-montos[b-610qae6d9r] {
    position: relative;
    font-weight: 900;
    border-width: 2px;
    transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
}

    .btn-agrupar-montos:hover[b-610qae6d9r] {
        transform: translateY(-1px);
    }

    .btn-agrupar-montos.on[b-610qae6d9r] {
        box-shadow: 0 10px 22px rgba(13, 71, 161, 0.18);
        filter: saturate(1.06);
        animation: agruparPulse-b-610qae6d9r 1.15s ease-in-out infinite;
    }

/* Pulso suave para que se note que está activo */
@keyframes agruparPulse-b-610qae6d9r {
    0% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-1px) scale(1.03);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

/* Respeto accesibilidad */
@media (prefers-reduced-motion: reduce) {
    .btn-agrupar-montos[b-610qae6d9r],
    .btn-agrupar-montos.on[b-610qae6d9r] {
        animation: none !important;
        transition: none !important;
    }
}

/* ===========================
   MODAL INFO NÚMERO PROHIBIDO (V2 - MÁS VIVO)
=========================== */

.np-item[b-610qae6d9r] {
    cursor: pointer;
    user-select: none;
    transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
}

    .np-item:hover[b-610qae6d9r] {
        transform: translateY(-2px);
        filter: brightness(1.03);
        box-shadow: 0 16px 34px rgba(0,0,0,.16);
    }

    .np-item:active[b-610qae6d9r] {
        transform: translateY(0);
        box-shadow: 0 10px 22px rgba(0,0,0,.14);
    }

/* Backdrop más elegante */
.np-modal-backdrop[b-610qae6d9r] {
    position: fixed;
    inset: 0;
    background: radial-gradient(900px 400px at 50% 15%, rgba(90,160,255,.18), transparent 65%), radial-gradient(600px 320px at 15% 80%, rgba(70,230,160,.12), transparent 62%), rgba(8, 10, 14, .66);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    z-index: 99999;
}

/* Modal “glass” con borde con brillo */
.np-modal[b-610qae6d9r] {
    width: min(610px, 96vw);
    border-radius: 22px;
    overflow: hidden;
    position: relative;
    background: linear-gradient(180deg, rgba(20,26,40,.92), rgba(12,16,26,.90));
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 28px 70px rgba(0,0,0,.52), 0 0 0 1px rgba(120,170,255,.10) inset;
    animation: npPop2-b-610qae6d9r .18s ease-out;
}

    /* Borde neon suave */
    .np-modal[b-610qae6d9r]::before {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: 24px;
        background: linear-gradient(120deg, rgba(90,160,255,.55), rgba(70,230,160,.30), rgba(255,180,70,.22));
        opacity: .35;
        filter: blur(18px);
        z-index: 0;
    }

    /* Contenido encima del glow */
    .np-modal > *[b-610qae6d9r] {
        position: relative;
        z-index: 1;
    }

@keyframes npPop2-b-610qae6d9r {
    from {
        transform: translateY(14px) scale(.985);
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* Header más “premium” */
.np-modal-header[b-610qae6d9r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
    border-bottom: 1px solid rgba(255,255,255,.10);
}

.np-modal-title[b-610qae6d9r] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 900;
    color: #f1f7ff;
}

.np-badge[b-610qae6d9r] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .6px;
    color: #d8ecff;
    background: linear-gradient(180deg, rgba(90,160,255,.25), rgba(60,120,255,.14));
    border: 1px solid rgba(90,160,255,.42);
    box-shadow: 0 10px 22px rgba(40,110,255,.18);
}

/* Botón X más visible */
.np-modal-close[b-610qae6d9r] {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.07);
    color: #f1f7ff;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: transform .12s ease, background .16s ease, border-color .16s ease;
}

    .np-modal-close:hover[b-610qae6d9r] {
        background: rgba(255,255,255,.12);
        border-color: rgba(255,255,255,.20);
        transform: rotate(6deg) scale(1.05);
    }

/* Body */
.np-modal-body[b-610qae6d9r] {
    padding: 16px 18px 18px;
}

/* Cards más grandes y claras */
.np-cards[b-610qae6d9r] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* Card con barra superior de color */
.np-card[b-610qae6d9r] {
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    padding: 14px 14px 13px;
    box-shadow: 0 14px 30px rgba(0,0,0,.18);
    position: relative;
    overflow: hidden;
}

    /* Barra arriba */
    .np-card[b-610qae6d9r]::before {
        content: "";
        position: absolute;
        left: 12px;
        right: 12px;
        top: 10px;
        height: 3px;
        border-radius: 999px;
        background: linear-gradient(90deg, rgba(90,160,255,.70), rgba(70,230,160,.55), rgba(255,180,70,.45));
        opacity: .75;
    }

/* Label */
.np-card-label[b-610qae6d9r] {
    font-size: 14px;
    color: rgba(241,247,255,.78);
    font-weight: 800;
    margin-top: 8px;
    margin-bottom: 8px;
    letter-spacing: .2px;
}

/* Value mucho más visible */
.np-card-value[b-610qae6d9r] {
    font-size: 26px;
    font-weight: 950;
    color: #ffffff;
    line-height: 1.05;
    text-shadow: 0 10px 26px rgba(0,0,0,.28);
}

.np-num[b-610qae6d9r] {
    letter-spacing: 2px;
}

/* Card “Le cabe” resaltada en verde bonito */
.np-card-ok[b-610qae6d9r] {
    background: radial-gradient(260px 120px at 30% 0%, rgba(70,230,160,.22), transparent 62%), linear-gradient(180deg, rgba(70,230,160,.12), rgba(255,255,255,.03));
    border: 1px solid rgba(70,230,160,.28);
}

    .np-card-ok[b-610qae6d9r]::before {
        background: linear-gradient(90deg, rgba(70,230,160,.95), rgba(90,160,255,.55));
        opacity: .9;
    }

/* Nota (regla) más clara y ordenada */
.np-modal-note[b-610qae6d9r] {
    margin-top: 14px;
    padding: 13px 14px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    border: 1px solid rgba(255,255,255,.10);
    color: rgba(241,247,255,.90);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}

/* Footer */
.np-modal-footer[b-610qae6d9r] {
    padding: 14px 18px 18px;
    border-top: 1px solid rgba(255,255,255,.10);
    display: flex;
    justify-content: flex-end;
}

/* Botón aceptar más “pro” */
.np-btn-primary[b-610qae6d9r] {
    border: none;
    border-radius: 16px;
    padding: 13px px;
    font-size: 16px;
    font-weight: 950;
    cursor: pointer;
    color: #071018;
    background: linear-gradient(180deg, #6fd0ff, #2f7dff);
    box-shadow: 0 16px 28px rgba(47,125,255,.34), 0 0 0 1px rgba(255,255,255,.20) inset;
    transition: transform .12s ease, filter .16s ease;
}

    .np-btn-primary:hover[b-610qae6d9r] {
        transform: translateY(-2px);
        filter: brightness(1.05);
    }

    .np-btn-primary:active[b-610qae6d9r] {
        transform: translateY(0);
        filter: brightness(.98);
    }

/* Responsive: en pantallas pequeñas las cards se apilan */
@media (max-width: 520px) {
    .np-cards[b-610qae6d9r] {
        grid-template-columns: 1fr;
    }

    .np-modal[b-610qae6d9r] {
        width: min(520px, 96vw);
    }
}

.wa-ticket-img[b-610qae6d9r] {
    width: 100%;
    height: auto;
    max-height: calc(92vh - 130px); /* deja espacio para título + botones */
    object-fit: contain; /* ✅ auto-fit completo */
    display: block;
}

.pos-wa-wrap[b-610qae6d9r] {
    margin-top: 6px;
    display: flex;
    justify-content: center;
}

.pos-wa-icon[b-610qae6d9r] {
    width: 16px; /* ✅ tamaño real pequeño */
    height: 16px;
    display: inline-block;
}

    .pos-wa-icon svg[b-610qae6d9r] {
        width: 16px;
        height: 16px;
        display: block;
    }
.wa-zoom-bar[b-610qae6d9r] {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 6px 0 10px 0;
}

    .wa-zoom-bar button[b-610qae6d9r] {
        padding: 6px 10px;
        border-radius: 8px;
        border: 1px solid #cfd6df;
        background: #f7f9fc;
        cursor: pointer;
    }

/* contenedor: sin scroll, pero permite que el scale se vea completo */
.wa-ticket-img[b-610qae6d9r] {
    width: 100%;
    height: auto;
    max-height: calc(92vh - 170px);
    object-fit: contain;
    display: block;
}

/* =========================
   BOTÓN PRO WHATSAPP
========================= */
/* ===== BOTÓN WhatsApp: NO ancho completo, visible y bonito ===== */
.wa-btn2[b-610qae6d9r] {
    /* 🔥 ancho limitado: hasta donde llega "Agrupa Montos" */
    width: fit-content; /* no se estira */
    max-width: 420px; /* límite por si acaso */
    display: inline-flex; /* queda como botón normal */
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 12px;
    /* borde más visible */
    border: 2px solid rgba(37, 211, 102, .75);
    background: linear-gradient(180deg, rgba(37,211,102,.22), rgba(18,140,126,.12));
    color: #0b2b16; /* texto oscuro para que SI se lea en fondo claro */
    font-weight: 900;
    font-size: 15px;
    line-height: 1;
    box-shadow: 0 10px 22px rgba(0,0,0,.12);
}

    .wa-btn2:hover[b-610qae6d9r] {
        filter: brightness(1.05);
    }

    .wa-btn2:disabled[b-610qae6d9r] {
        opacity: .5;
        cursor: not-allowed;
        filter: none;
    }

/* Icono redondo bonito */
.wa-btn2__icon[b-610qae6d9r] {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.70);
    border: 1px solid rgba(0,0,0,.08);
    flex: 0 0 auto;
}

    .wa-btn2__icon svg[b-610qae6d9r] {
        width: 18px;
        height: 18px;
        display: block;
    }

/* Texto SI visible */
.wa-btn2__text[b-610qae6d9r] {
    white-space: nowrap; /* evita que se parta raro */
}

/* =========================
   MODAL WHATSAPP (NUEVO)
========================= */
.wa2-backdrop[b-610qae6d9r] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.64);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 99999;
}

.wa2-modal[b-610qae6d9r] {
    width: min(720px, 96vw);
    background: #0f1420;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 30px 70px rgba(0,0,0,.65);
}

.wa2-header[b-610qae6d9r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.wa2-title[b-610qae6d9r] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
}

.wa2-badge[b-610qae6d9r] {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(37,211,102,.14);
    border: 1px solid rgba(37,211,102,.25);
    color: #25D366; /* SVG currentColor */
}

    .wa2-badge svg[b-610qae6d9r] {
        width: 22px;
        height: 22px;
        display: block;
    }

.wa2-title__main[b-610qae6d9r] {
    font-weight: 900;
    font-size: 17px;
    line-height: 1.1;
}

.wa2-title__sub[b-610qae6d9r] {
    font-size: 14px;
    opacity: .85;
    margin-top: 2px;
}

.wa2-x[b-610qae6d9r] {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: #fff;
    cursor: pointer;
}

    .wa2-x:hover[b-610qae6d9r] {
        filter: brightness(1.1);
    }

.wa2-body[b-610qae6d9r] {
    padding: 16px;
}

.wa2-grid[b-610qae6d9r] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 640px) {
    .wa2-grid[b-610qae6d9r] {
        grid-template-columns: 1fr;
    }
}

.wa2-field[b-610qae6d9r] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wa2-label[b-610qae6d9r] {
    font-size: 14px;
    opacity: .85;
    color: #dfe7ff;
}

.wa2-input[b-610qae6d9r], .wa2-select[b-610qae6d9r] {
    width: 100%;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    color: #fff;
    outline: none;
}

    .wa2-input[b-610qae6d9r]::placeholder {
        color: rgba(255,255,255,.55);
    }

.wa2-actions[b-610qae6d9r] {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.wa2-actions__right[b-610qae6d9r] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.wa2-btn[b-610qae6d9r] {
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: #fff;
    cursor: pointer;
    font-weight: 800;
}

    .wa2-btn:hover[b-610qae6d9r] {
        filter: brightness(1.08);
    }

.wa2-btn--ghost[b-610qae6d9r] {
    background: transparent;
}

.wa2-btn--soft[b-610qae6d9r] {
    background: rgba(37,211,102,.10);
    border-color: rgba(37,211,102,.22);
}

.wa2-btn--primary[b-610qae6d9r] {
    background: linear-gradient(180deg, rgba(37,211,102,.35), rgba(18,140,126,.25));
    border-color: rgba(37,211,102,.35);
}

.wa2-note[b-610qae6d9r] {
    margin-top: 12px;
    padding: 12px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    color: #e8f0ff;
    font-size: 14px;
    line-height: 1.35;
}
/* _content/SistemaLoteriaDashboard/Pages/Banca.razor.rz.scp.css */
/* ===== Layout base ===== */
.banca-wrap[b-4bmxjj0619] {
    padding: 10px 20px 24px;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    color: #1d2a3b;
}

/* ===== Tabs en la barra superior ===== */
.banca-tabs[b-4bmxjj0619] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(90deg, #0d47a1, #1565c0);
    padding: 10px 12px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
}

/* Contenedor para el dropdown de "Configuración de sorteos" */
.tab-dropdown[b-4bmxjj0619] {
    position: relative;
    display: inline-block;
}

.tab-btn[b-4bmxjj0619] {
    background: transparent;
    color: #eaf2ff;
    border: 1px solid transparent;
    padding: 8px 14px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: .15s ease;
    user-select: none;
}

.tab-dropdown .tab-btn[b-4bmxjj0619] {
    display: flex;
    align-items: center;
    gap: 4px; /* pequeño espacio entre texto y flecha ▾ si la usas */
}

.tab-btn:hover[b-4bmxjj0619] {
    background: rgba(255,255,255,.15);
}

.tab-btn.active[b-4bmxjj0619] {
    background: #ffffff;
    color: #153e75;
    border-color: #e6edf8;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
}

.cerrar-sesion[b-4bmxjj0619] {
    margin-left: auto;
    background: #f44336;
    color: #fff;
    border: none;
    padding: 8px 14px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    transition: .15s ease;
}

    .cerrar-sesion:hover[b-4bmxjj0619] {
        filter: brightness(.95);
    }

/* ===== Menú desplegable de "Configuración de sorteos" ===== */

/* El contenedor del botón + menú */
.tab-dropdown[b-4bmxjj0619] {
    position: relative;
    display: inline-block;
}

/* Caja que baja debajo del botón (vertical) */
.submenu-config[b-4bmxjj0619] {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.20);
    min-width: 230px;
    padding: 6px 0;
    border: 1px solid #d9e2f5;
    z-index: 100;
    animation: submenuFadeIn-b-4bmxjj0619 0.15s ease-out;
}

/* Cada opción del submenú (UNA DEBAJO DE OTRA) */
.submenu-item[b-4bmxjj0619] {
    display: flex; /* importante para que ocupe toda la fila */
    align-items: center;
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    padding: 9px 16px;
    font-size: 0.9rem;
    color: #123a6c;
    cursor: pointer;
    gap: 8px;
    transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}

    /* Icono “bolita” decorativa a la izquierda (opcional) */
    .submenu-item[b-4bmxjj0619]::before {
        content: "●";
        font-size: 0.55rem;
        color: #9bb4e8;
    }

    /* Hover: más moderno */
    .submenu-item:hover[b-4bmxjj0619] {
        background: #e3f2fd;
        color: #0d47a1;
        padding-left: 20px;
    }

    /* Activo: resalta la opción seleccionada */
    .submenu-item.active[b-4bmxjj0619] {
        background: #dbeafe;
        color: #0d47a1;
        font-weight: 700;
    }

/* Animación suave al aparecer el menú */
@keyframes submenuFadeIn-b-4bmxjj0619 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Encabezado (fecha y hora) ===== */
.banca-encabezado[b-4bmxjj0619] {
    margin-top: 10px;
    background: #e9f1fb;
    border: 1px solid #dbe6f7;
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #153e75;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

/* ===== Contenido ===== */
.banca-contenido[b-4bmxjj0619] {
    margin-top: 16px;
}

/* ===== KPI Cards ===== */
.kpi-grid[b-4bmxjj0619] {
    display: grid;
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    gap: 14px;
}

.kpi-card[b-4bmxjj0619] {
    background: #fff;
    border: 1px solid #e6edf8;
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

.kpi-titulo[b-4bmxjj0619] {
    font-size: .95rem;
    font-weight: 800;
    color: #153e75;
    margin-bottom: 8px;
}

.kpi-valor[b-4bmxjj0619] {
    font-size: 1.6rem;
    font-weight: 900;
    color: #0a3d91;
}

/* Panel libre por si se agregan gráficos */
.panel-vacio[b-4bmxjj0619] {
    margin-top: 12px;
    min-height: 140px;
    border: 1px dashed #c7d8f3;
    border-radius: 12px;
    background: linear-gradient(180deg,#fbfdff,#f7fbff);
}

/* ===== Cards genéricas ===== */
.card[b-4bmxjj0619] {
    background: #fff;
    border: 1px solid #e6edf8;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

    .card + .card[b-4bmxjj0619] {
        margin-top: 12px;
    }

.card-titulo[b-4bmxjj0619] {
    font-weight: 900;
    font-size: 1.1rem;
    color: #153e75;
    margin-bottom: 12px;
}

/* Acciones de cabecera (generales) */
.acciones[b-4bmxjj0619] {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

/* Botones e inputs (generales) */
.btn[b-4bmxjj0619] {
    background: #0d47a1;
    color: #fff;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    transition: .15s;
}

    .btn:hover[b-4bmxjj0619] {
        filter: brightness(.95);
    }

.btn-secondary[b-4bmxjj0619] {
    background: #6b84a8;
    color: #fff;
}

.btn-danger[b-4bmxjj0619] {
    background: #e53935;
    color: #fff;
}

.btn-small[b-4bmxjj0619] {
    padding: 6px 10px;
    font-weight: 600;
    border-radius: 7px;
}

.btn:disabled[b-4bmxjj0619] {
    opacity: .6;
    cursor: not-allowed;
}

.input[b-4bmxjj0619],
select.input[b-4bmxjj0619],
textarea.input[b-4bmxjj0619] {
    padding: 10px 12px;
    border: 1px solid #e2e8f5;
    border-radius: 10px;
    outline: none;
    font: inherit;
    background: #fff;
    transition: box-shadow .15s, border-color .15s, transform .08s;
}

    .input:focus[b-4bmxjj0619],
    select.input:focus[b-4bmxjj0619],
    textarea.input:focus[b-4bmxjj0619] {
        box-shadow: 0 0 0 3px rgba(21,62,117,.12);
        border-color: #cfe0fb;
    }

    .input:hover[b-4bmxjj0619] {
        border-color: #cfd9ee;
    }

    .input:focus-visible[b-4bmxjj0619] {
        transform: translateY(-1px);
    }

/* Formulario genérico */
.form-row[b-4bmxjj0619] {
    display: grid;
    grid-template-columns: 180px 1fr;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

    .form-row > label[b-4bmxjj0619] {
        font-weight: 700;
        color: #123a6c;
    }

/* Campos numéricos */
input[type="number"].input[b-4bmxjj0619] {
    -moz-appearance: textfield;
}

    input[type="number"].input[b-4bmxjj0619]::-webkit-outer-spin-button,
    input[type="number"].input[b-4bmxjj0619]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

/* Toggle (genérico) */
.switch[b-4bmxjj0619] {
    position: relative;
    width: 44px;
    height: 24px;
}

    .switch input[b-4bmxjj0619] {
        appearance: none;
        width: 44px;
        height: 24px;
        background: #cdd9ee;
        border-radius: 999px;
        outline: none;
        cursor: pointer;
        transition: background .2s;
    }

        .switch input:checked[b-4bmxjj0619] {
            background: #3b73ff;
        }

        .switch input[b-4bmxjj0619]::after {
            content: "";
            position: absolute;
            width: 18px;
            height: 18px;
            top: 3px;
            left: 3px;
            background: #fff;
            border-radius: 50%;
            transition: transform .2s;
            box-shadow: 0 1px 3px rgba(0,0,0,.25);
        }

        .switch input:checked[b-4bmxjj0619]::after {
            transform: translateX(20px);
        }

/* Pills / tags */
.pill[b-4bmxjj0619] {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    background: #eef3ff;
    color: #264d99;
}

/* ===== Tabla base (genérica) ===== */
.tabla[b-4bmxjj0619] {
    border: 1px solid #e6edf8;
    border-radius: 10px;
    overflow: hidden;
}

.tabla-header[b-4bmxjj0619],
.tabla-body .fila[b-4bmxjj0619] {
    display: grid; /* columnas definidas por tabla-xxx */
    gap: 0;
}

.tabla-header[b-4bmxjj0619] {
    background: #f4f8ff;
    color: #123a6c;
    font-weight: 800;
    border-bottom: 1px solid #e6edf8;
}

    .tabla-header > div[b-4bmxjj0619],
    .tabla-body .fila > div[b-4bmxjj0619] {
        padding: 10px 12px;
        border-right: 1px solid #eef3fb;
    }

        .tabla-header > div:last-child[b-4bmxjj0619],
        .tabla-body .fila > div:last-child[b-4bmxjj0619] {
            border-right: none;
        }

.tabla-body .fila:nth-child(even)[b-4bmxjj0619] {
    background: #fcfeff;
}

/* Placeholder de vacío */
.fila-placeholder[b-4bmxjj0619] {
    padding: 16px;
    color: #6c7e97;
    font-style: italic;
}

/* ===========================
   ESPECÍFICO: TABLA SORTEOS
   =========================== */
.tabla-sorteos .tabla-header[b-4bmxjj0619],
.tabla-sorteos .tabla-body .fila[b-4bmxjj0619] {
    /* ID | Nombre | Hora cierre | Activo | Acciones */
    grid-template-columns: .6fr 2fr 1.2fr .8fr 1.2fr;
}

/* ===========================
   Responsivo
   =========================== */
@media (max-width: 1100px) {
    .kpi-grid[b-4bmxjj0619] {
        grid-template-columns: repeat(2, minmax(240px, 1fr));
    }
}

@media (max-width: 700px) {
    .kpi-grid[b-4bmxjj0619] {
        grid-template-columns: 1fr;
    }

    .banca-tabs[b-4bmxjj0619] {
        flex-wrap: wrap;
    }

    .form-row[b-4bmxjj0619] {
        grid-template-columns: 1fr;
    }
}

/* ===== Toasts ===== */
.toast-ok[b-4bmxjj0619],
.toast-error[b-4bmxjj0619] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 380px;
    text-align: center;
    padding: 18px 22px;
    border-radius: 10px;
    color: white;
    font-weight: 600;
    font-size: 1.1rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25);
    animation: aparecer-b-4bmxjj0619 0.4s ease-out;
    z-index: 9999;
}

.toast-ok[b-4bmxjj0619] {
    background-color: #28a745; /* Verde éxito */
}

.toast-error[b-4bmxjj0619] {
    background-color: #dc3545; /* Rojo error */
}

@keyframes aparecer-b-4bmxjj0619 {
    from {
        opacity: 0;
        transform: translate(-50%, -60%);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

/* Contenedor del contenido de configuración (se sigue usando) */
.config-contenido[b-4bmxjj0619] {
    margin-top: 4px;
}

/* Submenú interno Ahorros/Préstamos en /banca */
.ap-wrap[b-4bmxjj0619] {
    padding: 10px;
}

.ap-subtabs[b-4bmxjj0619] {
    display: flex;
    gap: 10px;
    padding: 10px;
    border-radius: 12px;
    background: linear-gradient(180deg, #f7faff, #ffffff);
    border: 1px solid #d8e3f2;
    margin-bottom: 14px;
}

.ap-subtab[b-4bmxjj0619] {
    border: 1px solid #cfe0f7;
    background: #fff;
    padding: 10px 14px;
    border-radius: 12px;
    font-weight: 900;
    cursor: pointer;
    color: #1b3a6b;
    transition: .15s;
}

    .ap-subtab:hover[b-4bmxjj0619] {
        transform: translateY(-1px);
    }

    .ap-subtab.active[b-4bmxjj0619] {
        background: linear-gradient(180deg, #1a5fb4, #144a8f);
        color: #fff;
        border-color: #144a8f;
    }
/* _content/SistemaLoteriaDashboard/Pages/Login.razor.rz.scp.css */
/* ==============================
   LOGIN (SCOPED) - DISEÑO PRO
   ============================== */

.login-page[b-bz01mwdrg9] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px 18px;
    background: radial-gradient(900px 500px at 20% 10%, rgba(30, 136, 229, 0.22), transparent 55%), radial-gradient(700px 420px at 90% 20%, rgba(255, 193, 7, 0.18), transparent 60%), radial-gradient(900px 520px at 50% 100%, rgba(13, 71, 161, 0.12), transparent 60%), linear-gradient(180deg, #f4f8ff 0%, #eef6ff 45%, #f7fbff 100%);
}

.login-shell[b-bz01mwdrg9] {
    width: 100%;
    max-width: 980px;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 60px rgba(0,0,0,0.16);
    border: 1px solid rgba(13, 71, 161, 0.18);
    background: #ffffff;
}

/* ======================
   PANEL IZQUIERDO
   ====================== */
.login-brand[b-bz01mwdrg9] {
    position: relative;
    padding: 26px 26px 18px;
    background: linear-gradient(180deg, rgba(13, 71, 161, 0.96), rgba(13, 71, 161, 0.86)), radial-gradient(700px 400px at 20% 20%, rgba(255,255,255,0.20), transparent 55%);
    color: #ffffff;
}

    .login-brand[b-bz01mwdrg9]::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(900px 460px at 100% 0%, rgba(255, 193, 7, 0.18), transparent 60%), radial-gradient(900px 520px at 0% 100%, rgba(30, 136, 229, 0.20), transparent 65%);
        pointer-events: none;
    }

.brand-top[b-bz01mwdrg9],
.brand-center[b-bz01mwdrg9],
.brand-footer[b-bz01mwdrg9] {
    position: relative;
    z-index: 1;
}

.brand-top[b-bz01mwdrg9] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand-logo[b-bz01mwdrg9] {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: rgba(255,255,255,0.15);
    padding: 8px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.20);
}

.brand-title .brand-app[b-bz01mwdrg9] {
    font-weight: 950;
    letter-spacing: 0.6px;
    font-size: 1.15rem;
    line-height: 1.05;
}

.brand-title .brand-sub[b-bz01mwdrg9] {
    opacity: 0.86;
    font-weight: 700;
    font-size: 0.95rem;
    margin-top: 4px;
}

.brand-center[b-bz01mwdrg9] {
    margin-top: 26px;
    padding-right: 10px;
}

    .brand-center h1[b-bz01mwdrg9] {
        margin: 0 0 8px 0;
        font-size: 2.1rem;
        font-weight: 950;
        letter-spacing: 0.3px;
    }

    .brand-center p[b-bz01mwdrg9] {
        margin: 0;
        font-size: 1.05rem;
        line-height: 1.55;
        opacity: 0.92;
        font-weight: 600;
        max-width: 380px;
    }

.brand-badges[b-bz01mwdrg9] {
    display: flex;
    gap: 10px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.badge[b-bz01mwdrg9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 0.9rem;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}

.brand-footer[b-bz01mwdrg9] {
    margin-top: 26px;
    opacity: 0.80;
    font-weight: 700;
    font-size: 0.9rem;
}

/* ======================
   PANEL DERECHO (CARD)
   ====================== */
.login-card[b-bz01mwdrg9] {
    padding: 26px 28px 22px;
    background: linear-gradient(180deg, #ffffff, #fbfdff);
}

.login-header h2[b-bz01mwdrg9] {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 950;
    color: #0d47a1;
    letter-spacing: 0.2px;
}

.login-subtitle[b-bz01mwdrg9] {
    margin: 6px 0 0 0;
    color: #375a86;
    font-weight: 800;
    opacity: 0.9;
}

.login-body[b-bz01mwdrg9] {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.login-field label[b-bz01mwdrg9] {
    display: block;
    font-weight: 900;
    color: #153e75;
    margin-bottom: 6px;
    font-size: 0.95rem;
}

/* Wrap con icono */
.input-wrap[b-bz01mwdrg9] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

.input-ico[b-bz01mwdrg9] {
    position: absolute;
    left: 12px;
    font-size: 1.1rem;
    opacity: 0.85;
}

/* Input grande, moderno */
.login-input[b-bz01mwdrg9] {
    width: 100%;
    height: 54px;
    border-radius: 14px;
    border: 2px solid rgba(13, 71, 161, 0.16);
    background: #ffffff;
    padding: 0 14px 0 44px; /* espacio para icono */
    font-size: 1.08rem;
    font-weight: 850;
    color: #0b2f66;
    box-shadow: 0 6px 18px rgba(13, 71, 161, 0.06);
    transition: border-color .18s ease, box-shadow .18s ease, transform .14s ease;
    outline: none;
}

    .login-input[b-bz01mwdrg9]::placeholder {
        color: rgba(21, 62, 117, 0.55);
        font-weight: 800;
    }

    .login-input:focus[b-bz01mwdrg9] {
        border-color: rgba(30, 136, 229, 0.55);
        box-shadow: 0 10px 26px rgba(30, 136, 229, 0.16);
        transform: translateY(-1px);
    }

/* Password wrap con ojo */
.password-wrap[b-bz01mwdrg9] {
    position: relative;
}

.eye-btn[b-bz01mwdrg9] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    height: 40px;
    width: 44px;
    border-radius: 12px;
    border: 1px solid rgba(13, 71, 161, 0.18);
    background: linear-gradient(180deg, #f5faff, #eef6ff);
    cursor: pointer;
    font-size: 1rem;
    box-shadow: 0 6px 16px rgba(13, 71, 161, 0.08);
    transition: transform .14s ease, box-shadow .16s ease, background .16s ease;
}

    .eye-btn:hover[b-bz01mwdrg9] {
        transform: translateY(-50%) scale(1.03);
        box-shadow: 0 10px 22px rgba(13, 71, 161, 0.14);
    }

    .eye-btn:active[b-bz01mwdrg9] {
        transform: translateY(-50%) scale(0.98);
    }

/* Row */
.login-row[b-bz01mwdrg9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2px;
}

.remember[b-bz01mwdrg9] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 850;
    color: #0b2f66;
}

    .remember input[b-bz01mwdrg9] {
        width: 18px;
        height: 18px;
    }

/* Botón principal */
.btn-login[b-bz01mwdrg9] {
    height: 54px;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    font-weight: 950;
    font-size: 1.08rem;
    letter-spacing: 0.3px;
    color: #ffffff;
    background: linear-gradient(90deg, #0d47a1, #1e88e5);
    box-shadow: 0 14px 30px rgba(30, 136, 229, 0.22);
    transition: transform .16s ease, box-shadow .18s ease, filter .18s ease;
    margin-top: 6px;
}

    .btn-login:hover[b-bz01mwdrg9] {
        transform: translateY(-1px);
        filter: saturate(1.06);
        box-shadow: 0 18px 36px rgba(30, 136, 229, 0.26);
    }

    .btn-login:active[b-bz01mwdrg9] {
        transform: translateY(0);
    }

/* Error elegante */
.error-box[b-bz01mwdrg9] {
    border-radius: 14px;
    border: 1px solid rgba(198, 40, 40, 0.25);
    background: linear-gradient(180deg, #fff5f5, #ffecec);
    color: #b71c1c;
    font-weight: 900;
    padding: 10px 12px;
    box-shadow: 0 10px 20px rgba(183, 28, 28, 0.10);
}

/* Nota inferior */
.login-help[b-bz01mwdrg9] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px dashed rgba(13, 71, 161, 0.18);
    color: rgba(21, 62, 117, 0.82);
    font-weight: 800;
    font-size: 0.95rem;
    line-height: 1.35;
}

.help-dot[b-bz01mwdrg9] {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(180deg, #1e88e5, #90caf9);
    box-shadow: 0 6px 16px rgba(30, 136, 229, 0.20);
}

/* ======================
   RESPONSIVE
   ====================== */
@media (max-width: 900px) {
    .login-shell[b-bz01mwdrg9] {
        grid-template-columns: 1fr;
        max-width: 560px;
    }

    .login-brand[b-bz01mwdrg9] {
        padding: 22px 22px 16px;
    }

    .brand-center h1[b-bz01mwdrg9] {
        font-size: 1.85rem;
    }
}
/* _content/SistemaLoteriaDashboard/Pages/Ventas.razor.rz.scp.css */
/* 🎨 ESTILOS BASE DE LA PÁGINA */
.ventas-page[b-6abbow5n4h] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: 'Segoe UI', sans-serif;
    background: linear-gradient(180deg, #eef3f9 0%, #ffffff 100%);
    color: #222;
    padding-top: 10px;
    gap: 10px;
}

/* 🔹 MENÚ SUPERIOR */
.menu-superior[b-6abbow5n4h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 16px;
    margin: 0 10px;
    border-radius: 16px;
    /* ✅ COLOR SÓLIDO MODERNO (sin transparencia) */
    background: linear-gradient(135deg, #0a4baa, #00285f);
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: 0 18px 40px rgba(0, 18, 40, 0.35), inset 0 1px 0 rgba(255,255,255,0.12);
    /* ❌ QUITAR EFECTO VIDRIO */
    backdrop-filter: none;
}

.menu-left[b-6abbow5n4h], .menu-right[b-6abbow5n4h] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.menu-right[b-6abbow5n4h] {
    gap: 12px;
}



.menu-btn[b-6abbow5n4h] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.18);
    color: #ffffff;
    font-weight: 900;
    font-size: 1.05rem;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
    box-shadow: 0 10px 22px rgba(0,0,0,0.10);
    user-select: none;
}

    .menu-btn:hover[b-6abbow5n4h] {
        transform: translateY(-1px);
        background: rgba(255,255,255,0.16);
        border-color: rgba(255,255,255,0.26);
        box-shadow: 0 14px 28px rgba(0,0,0,0.18);
    }

    .menu-btn:active[b-6abbow5n4h] {
        transform: translateY(0px);
        box-shadow: 0 8px 16px rgba(0,0,0,0.14);
    }


    .menu-btn.salir[b-6abbow5n4h] {
        background: linear-gradient(135deg, #ff4b4b, #c62828);
        border: 1px solid rgba(255,255,255,0.20);
        font-weight: 950;
        box-shadow: 0 14px 28px rgba(198,40,40,0.25);
    }

        .menu-btn.salir:hover[b-6abbow5n4h] {
            background: linear-gradient(135deg, #ff5b5b, #b71c1c);
        }


/* === CONTENEDOR PARA BOTÓN CON SUBMENÚ (Consultas) === */
.menu-dropdown-wrap[b-6abbow5n4h] {
    position: relative;
    display: inline-block;
}

.menu-btn-dropdown[b-6abbow5n4h] {
    padding-right: 16px;
}

.menu-arrow[b-6abbow5n4h] {
    font-size: 0.75rem;
    margin-left: 2px;
}


/* ==========================================================
   ✅ Dropdown tipo BANCA (Juegos / y sirve para futuros menús)
   ========================================================== */
.menu-dropdown-wrap[b-6abbow5n4h] {
    position: relative;
    display: inline-block;
}

/* Panel blanco flotante */
.menu-dropdown-panel[b-6abbow5n4h] {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 260px;
    background: #f9fbff;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
    padding: 8px 0;
    margin: 0;
    list-style: none;
    z-index: 9999;
    max-height: 360px;
    overflow-y: auto;
}

/* Animación al abrir (igual sensación que Banca) */
.menu-dropdown-anim[b-6abbow5n4h] {
    animation: dropIn-b-6abbow5n4h .18s ease-out both;
}

@keyframes dropIn-b-6abbow5n4h {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Item como botón */
.menu-dropdown-item[b-6abbow5n4h] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-weight: 900;
    font-size: 0.98rem;
    color: #0b3a7a;
    text-align: left;
    transition: background .14s ease;
}

    .menu-dropdown-item:hover[b-6abbow5n4h] {
        background: rgba(15, 118, 255, 0.10);
    }

    .menu-dropdown-item.activo[b-6abbow5n4h] {
        background: rgba(15, 118, 255, 0.18);
        color: #0b3a7a;
    }

/* Puntito azul */
.menu-dot[b-6abbow5n4h] {
    color: #1e88e5;
    font-size: 18px;
    line-height: 1;
}

/* Flecha animada */
.menu-arrow[b-6abbow5n4h] {
    font-size: 0.75rem;
    margin-left: 2px;
    opacity: 0.9;
    transition: transform .18s ease, opacity .18s ease;
}

    .menu-arrow.rotado[b-6abbow5n4h] {
        transform: rotate(180deg);
        opacity: 1;
    }

.saldo-actual[b-6abbow5n4h] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    box-shadow: 0 12px 24px rgba(0,0,0,0.14);
    min-width: 270px;
    justify-content: space-between;
}

.saldo-label[b-6abbow5n4h] {
    font-weight: 900;
    opacity: 0.92;
}

.saldo-valor[b-6abbow5n4h] {
    font-weight: 950;
    font-size: 1.15rem;
    letter-spacing: 0.4px;
}

/* ==========================================================
   ✅ CENTRO DEL MENÚ: indicador del juego activo
   ========================================================== */
.menu-superior[b-6abbow5n4h] {
    position: relative; /* permite centrar el centro sin romper izquierda/derecha */
}

.menu-center[b-6abbow5n4h] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* no estorba clicks a los menús */
}

/* Pastilla */
.juego-pill[b-6abbow5n4h] {
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px; /* parecido al hueco que se ve en tu captura */
    height: 34px;
    padding: 0 18px;
    border-radius: 999px;
    font-weight: 950;
    font-size: 1.05rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: 2px solid rgba(255,255,255,0.25);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 10px 22px rgba(0,0,0,0.20);
}

    /* Colores por juego */
    .juego-pill.tiempos[b-6abbow5n4h] {
        background: linear-gradient(135deg, #1e88e5, #0d47a1);
        color: #fff;
    }

    .juego-pill.parley[b-6abbow5n4h] {
        background: linear-gradient(135deg, #7c3aed, #4c1d95);
        color: #fff;
    }

    .juego-pill.monazos[b-6abbow5n4h] {
        background: linear-gradient(135deg, #2e7d32, #1b5e20);
        color: #fff;
    }

.saldo-actual[b-6abbow5n4h] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 14px;
    background: rgba(255,255,255,.55);
    border: 1px solid rgba(219,234,254,.8);
}

.saldo-label[b-6abbow5n4h] {
    font-weight: 900;
    color: #334155;
}

.saldo-valor[b-6abbow5n4h] {
    font-weight: 1000;
}

    .saldo-valor.positivo[b-6abbow5n4h] {
        color: #0b2a5b;
    }

    .saldo-valor.negativo[b-6abbow5n4h] {
        color: #b40000;
        background: #ffecec;
        padding: 4px 8px;
        border-radius: 999px;
        border: 1px solid rgba(180,0,0,.18);
    }

.saldo-refresh[b-6abbow5n4h] {
    border: none;
    cursor: pointer;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: linear-gradient(90deg,#0b67c2,#2b8ef5);
    color: #fff;
    font-weight: 1000;
    display: grid;
    place-items: center;
    box-shadow: 0 8px 16px rgba(43,142,245,.22);
    transition: transform .12s ease, box-shadow .16s ease;
}

    .saldo-refresh:hover[b-6abbow5n4h] {
        transform: translateY(-1px);
        box-shadow: 0 12px 22px rgba(43,142,245,.32);
    }

    .saldo-refresh:active[b-6abbow5n4h] {
        transform: translateY(0);
    }