/* _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 */
/* ============================
   CONTENEDOR PRINCIPAL
   ============================ */
.ganador-wrap[b-ugsukpn7u5] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 14px 18px;
    background: radial-gradient(circle at top left, #eef2ff 0%, #f9fafb 38%, #ffffff 80%);
}

/* ============================
   TARJETA: ASIGNAR NÚMERO
   ============================ */

.subcard[b-ugsukpn7u5] {
    position: relative;
    background: radial-gradient(circle at top left, #e0f2fe 0%, #eff6ff 40%, #ffffff 100%);
    border-radius: 16px;
    border: 1px solid #c7d2fe;
    padding: 22px 26px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14);
    overflow: hidden;
}

    /* Pequeño brillo decorativo en una esquina */
    .subcard[b-ugsukpn7u5]::after {
        content: "";
        position: absolute;
        top: -40px;
        right: -40px;
        width: 120px;
        height: 120px;
        background: radial-gradient(circle, rgba(59, 130, 246, 0.3), transparent 60%);
        opacity: 0.8;
        pointer-events: none;
    }

    /* Título con icono y fuente más grande */
    .subcard .card-titulo[b-ugsukpn7u5] {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 1.45rem;
        font-weight: 800;
        color: #0f172a;
        margin-bottom: 18px;
    }

        .subcard .card-titulo[b-ugsukpn7u5]::before {
            content: "🏆";
            font-size: 1.6rem;
        }

    /* Filas del formulario */
    .subcard .form-row[b-ugsukpn7u5] {
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
        gap: 7px;
    }

        /* Labels más grandes y claros */
        .subcard .form-row label[b-ugsukpn7u5] {
            font-size: 1.06rem;
            font-weight: 700;
            color: #1f2937;
        }

    /* Inputs más altos y modernos */
    .subcard .input[b-ugsukpn7u5] {
        font-size: 1.18rem;
        height: 48px;
        padding: 8px 15px;
        border-radius: 12px;
        border: 1px solid #b9ccfa;
        background: #f8faff;
        color: #0f172a;
        line-height: 1.2;
        transition: all 0.16s ease;
    }

        /* Efecto al enfocar */
        .subcard .input:focus[b-ugsukpn7u5] {
            background: #ffffff;
            border-color: #2563eb;
            box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.28);
            outline: none;
        }

    /* Botón principal grande y con animación */
    .subcard .btn[b-ugsukpn7u5] {
        background: linear-gradient(135deg, #2563eb, #1d4ed8);
        color: #ffffff;
        font-size: 1.08rem;
        font-weight: 800;
        padding: 11px 24px;
        border-radius: 999px;
        border: none;
        box-shadow: 0 8px 20px rgba(37, 99, 235, 0.45);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
    }

        .subcard .btn[b-ugsukpn7u5]::before {
            content: "✅";
            font-size: 1.2rem;
        }

        .subcard .btn:hover[b-ugsukpn7u5] {
            transform: translateY(-1px) scale(1.01);
            box-shadow: 0 10px 26px rgba(37, 99, 235, 0.55);
            background: linear-gradient(135deg, #1d4ed8, #1d4ed8);
        }

        .subcard .btn:active[b-ugsukpn7u5] {
            transform: translateY(0);
            box-shadow: 0 5px 14px rgba(37, 99, 235, 0.4);
        }

        .subcard .btn:disabled[b-ugsukpn7u5] {
            background: linear-gradient(135deg, #9ca3af, #6b7280);
            box-shadow: none;
            cursor: not-allowed;
        }

/* ============================
   TARJETA BOTÓN: HISTORIAL
   ============================ */

.ganador-historial-card[b-ugsukpn7u5] {
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #d1d5db;
    padding: 14px 18px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.ganador-historial-texto[b-ugsukpn7u5] {
    margin: 0;
    font-size: 0.98rem;
    color: #4b5563;
}

.ganador-historial-card .btn[b-ugsukpn7u5] {
    font-size: 0.98rem;
    padding: 8px 16px;
    border-radius: 999px;
}

/* ============================
   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: 4px 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: 4px 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 GENÉRICO HISTORIAL NÚMEROS
   ============================ */

.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;
}

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

/* Tamaño específico para el historial */
.modal-historial[b-ugsukpn7u5] {
    max-width: 1000px;
    width: 96%;
}

/* Cabecera del modal */
.modal-header[b-ugsukpn7u5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 18px;
    border-bottom: 1px solid #e5e7eb;
    background: linear-gradient(90deg, #eef2ff, #e0f2fe);
}

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

    .modal-title[b-ugsukpn7u5]::before {
        content: "📊";
        font-size: 1.2rem;
    }

.modal-close[b-ugsukpn7u5] {
    border: none;
    background: transparent;
    font-size: 1.2rem;
    cursor: pointer;
    color: #4b5563;
    padding: 4px;
    border-radius: 999px;
    transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

    .modal-close:hover[b-ugsukpn7u5] {
        background: rgba(31, 41, 55, 0.05);
        color: #111827;
        transform: scale(1.06);
    }

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

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

/* ============================
   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);
    }
}

/* Columna filtros */
.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.96rem;
        font-weight: 600;
        color: #374151;
    }

/* Inputs del modal (número y fechas) más grandes */
.historial-filtros .input[b-ugsukpn7u5] {
    font-size: 1.02rem;
    height: 44px;
    padding: 7px 12px;
    border-radius: 10px;
    border: 1px solid #cbd5f5;
    background: #f9fafb;
    transition: all 0.14s ease;
}

    .historial-filtros .input:focus[b-ugsukpn7u5] {
        background: #ffffff;
        border-color: #3b82f6;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.22);
        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.96rem;
    padding: 7px 14px;
    border-radius: 999px;
}

/* ============================
   RESULTADOS DEL MODAL
   ============================ */

.historial-resultados[b-ugsukpn7u5] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Resumen rápido general */
.historial-resumen[b-ugsukpn7u5] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, #eef2ff, #e0f2fe);
    border: 1px solid #c7d2fe;
}

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

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

    .hist-res-item .valor[b-ugsukpn7u5] {
        font-size: 1.08rem;
        font-weight: 800;
        color: #111827;
    }

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

/* ============================
   CONSULTA POR NÚMERO (LADO IZQ. MODAL)
   ============================ */

.consulta-numero-card[b-ugsukpn7u5] {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
}

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

    .consulta-titulo[b-ugsukpn7u5]::before {
        content: "🔍";
        font-size: 1.1rem;
    }

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

/* Input de número en consulta más grande */
.consulta-numero-card .input[b-ugsukpn7u5] {
    font-size: 1.06rem;
    height: 44px;
    padding: 7px 12px;
    border-radius: 10px;
    border: 1px solid #cbd5f5;
    background: #f9fafb;
}

    .consulta-numero-card .input:focus[b-ugsukpn7u5] {
        background: #ffffff;
        border-color: #3b82f6;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.22);
        outline: none;
    }

.consulta-error[b-ugsukpn7u5] {
    margin-top: 4px;
    font-size: 0.84rem;
    color: #b91c1c;
}

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

.consulta-numero-detalle-titulo[b-ugsukpn7u5] {
    margin-top: 4px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #374151;
}

.consulta-numero-lista[b-ugsukpn7u5] {
    margin: 4px 0 0 0;
    padding-left: 18px;
    font-size: 0.88rem;
    color: #111827;
}
/* _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/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
========================================================= */
.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: 160px 170px 280px auto;
    gap: 12px;
    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;
    }
}

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

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

.cb-field-juego[b-ejjm2brifn] {
    width: 150px;
}

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

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

.cb-field-vend[b-ejjm2brifn] {
    width: 260px;
}

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

.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);
    }

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

/* 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;
}

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

.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 con el mismo fondo del shell (como 3ra imagen) */
.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;
    /* ✅ menos padding lateral para que “llene” más */
    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 (tu HTML real)
========================================================= */
.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; /* naranja como tu estilo */
}

.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) — grid firme (no “bloques gigantes”)
========================================================= */
.cb-modal-grid-zoom[b-ejjm2brifn] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

/* ✅ Cabecera y filas usan EXACTAMENTE la misma rejilla */
.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;
}

    /* 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);
    }

/* celdas */
.cb-celda-num[b-ejjm2brifn] {
    height: 26px;
    border-radius: 10px;
    border: 1px solid rgba(15,23,42,.18);
    background: rgba(239,246,255,.95); /* ✅ leve azul (visible, no exagerado) */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 900;
    color: #0b1220;
}

.cb-celda-monto[b-ejjm2brifn] {
    height: 26px;
    border-radius: 10px;
    border: 1px solid rgba(15,23,42,.18);
    background: rgba(236,253,245,.95); /* ✅ leve verde (visible, no exagerado) */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
    font-size: 13px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    color: #0b1220;
}

/* 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 — pegados y alineados como “celdas”
   (requiere el cambio mínimo en Razor: .box)
========================================================= */
.cb-fila-totales-f[b-ejjm2brifn] {
    width: fit-content;
    margin: 6px auto 0;
    display: grid;
    grid-template-columns: repeat(5, 90px 95px); /* ✅ MISMA rejilla */
    column-gap: 4px;
    row-gap: 6px;
    justify-content: center;
    align-items: center;
}

    /* cada total ocupa N° + Monto */
    .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); /* ✅ con color suave (como celdas) */
        padding: 8px 10px;
        text-align: center;
        box-shadow: 0 10px 18px rgba(15,23,42,.06);
    }

        /* posición exacta por grupo */
        .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 (misma rejilla firme)
========================================================= */
.cb-lista-parley[b-ejjm2brifn] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

    /* usa el mismo grid, pero con clases parley */
    .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 (pequeño)
========================================================= */
.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 (webkit) */
    .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 como tu modal bueno */
.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 (si lo usas)
========================================================= */
.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;
}

/* =========================================================
   GENERALES
========================================================= */
.saldo-pos[b-ejjm2brifn] {
    color: #047857;
    font-weight: 950;
}

.saldo-neg[b-ejjm2brifn] {
    color: #dc2626;
    font-weight: 950;
}
/* _content/SistemaLoteriaDashboard/Components/Banca/ListasEditor.razor.rz.scp.css */
/* ====== Tarjeta principal de Listas ====== */
.listas-card[b-s5r11w0vs9] {
    background: #ffffff;
    border: 1px solid #e6edf8;
    border-radius: 14px;
    padding: 18px 20px 18px;
    box-shadow: 0 3px 10px rgba(0,0,0,.06);
}

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

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

.listas-header .card-titulo[b-s5r11w0vs9] {
    margin-bottom: 0;
    font-size: 1.2rem;
}

.listas-subtitulo[b-s5r11w0vs9] {
    font-size: 0.86rem;
    font-weight: 600;
    color: #64748b;
}

/* Badge a la derecha */
.listas-badge span[b-s5r11w0vs9] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    background: #e3f2fd;
    color: #0d47a1;
    border: 1px solid #bbdefb;
}

/* ====== BARRA DE FECHA (ARRIBA) ====== */
.listas-fecha-bar[b-s5r11w0vs9] {
    margin: 10px 0 14px;
    padding: 10px 14px;
    border-radius: 10px;
    background: linear-gradient(90deg, #f4f7fd, #e3f2fd);
    border: 1px solid #d3e2f7;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.listas-fecha-label[b-s5r11w0vs9] {
    font-size: 0.83rem;
    font-weight: 700;
    color: #123a6c;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

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

/* Input de fecha compacto */
.input-fecha-compact[b-s5r11w0vs9] {
    max-width: 180px;
}

/* Texto bonito de fecha */
.fecha-legible[b-s5r11w0vs9] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f2933;
    text-transform: capitalize;
}

/* ====== Filtros: usuario / sorteo / botones ====== */
.listas-filtros[b-s5r11w0vs9] {
    display: grid;
    grid-template-columns: 1.5fr 1.8fr 1.3fr;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 12px;
}

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

    .filtro > label[b-s5r11w0vs9] {
        font-size: 0.85rem;
        font-weight: 700;
        color: #123a6c;
    }

/* Hints debajo de los selects */
.hint[b-s5r11w0vs9] {
    font-size: 0.78rem;
    color: #7a8ba5;
}

/* ====== 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: 6px 10px;
    border-radius: 8px;
    font-size: 0.9rem;
}

/* Aseguramos ancho correcto de selects */
.select-usuario[b-s5r11w0vs9],
.select-sorteo[b-s5r11w0vs9] {
    width: 100%;
}

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

.grupo-botones-lista[b-s5r11w0vs9] {
    display: flex;
    gap: 8px;
}

.btn-lista[b-s5r11w0vs9] {
    flex: 1;
    min-width: 90px;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
}

/* Botón principal y secundario dentro de este módulo */
.btn-modificar[b-s5r11w0vs9] {
    background: linear-gradient(90deg,#0d47a1,#1565c0);
}

.btn-crear[b-s5r11w0vs9] {
    background: #6b84a8;
}

/* ====== Placeholder del contenido de listas ====== */
.listas-contenido-placeholder[b-s5r11w0vs9] {
    margin-top: 6px;
    padding: 16px 18px;
    border-radius: 12px;
    border: 1px dashed #c7d8f3;
    background: linear-gradient(180deg,#fbfdff,#f7fbff);
    color: #5c6f8b;
    font-size: 0.94rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.placeholder-icono[b-s5r11w0vs9] {
    font-size: 1.6rem;
    margin-bottom: 2px;
}

.placeholder-texto-principal[b-s5r11w0vs9] {
    font-weight: 700;
    color: #243b63;
}

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

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

@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,.45);
    z-index: 99998 !important;
}

.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: #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;
    overflow-y: auto !important; /* scroll vertical si hace falta */
    overflow-x: hidden !important; /* evitamos scroll horizontal feo */
}

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

.modal-close[b-s5r11w0vs9] {
    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-s5r11w0vs9] {
        background: #ffd6d6;
    }

/* CONTENEDOR ÚNICO DEL CONTENIDO DE LA LISTA */
#listaCanvas[b-s5r11w0vs9] {
    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 */
}

#contentLista[b-s5r11w0vs9] {
    display: inline-block; /* mide según su tabla */
}

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

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

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

.titulo-sorteo-modal[b-s5r11w0vs9] {
    font-weight: 900;
    font-size: 1.6rem;
    color: #c68200;
}

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

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

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

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

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

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

/* Modo NORMAL: 5 bloques (N° + Monto) = 10 columnas */
.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, 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-s5r11w0vs9],
.lista-unica-rev .fila-numeros[b-s5r11w0vs9],
.lista-unica-rev .fila-totales-f-rev[b-s5r11w0vs9] {
    display: grid;
    grid-template-columns: repeat(5, 64px 95px 95px);
    column-gap: 4px;
    row-gap: 4px;
    justify-content: center;
}

/* ============================
   🎨 CABECERAS
   ============================ */

/* 🔵 CABECERA N° */
.h-num[b-s5r11w0vs9] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0d6efd;
    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-s5r11w0vs9] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #3CB371;
    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-s5r11w0vs9] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #E74C3C;
    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-s5r11w0vs9],
.celda-monto[b-s5r11w0vs9],
.celda-monto-rev[b-s5r11w0vs9] {
    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-s5r11w0vs9] {
    background: #e4f1fb;
    color: #0a406e;
    border: 1px solid #8db7d8;
}

/* Monto normal */
.celda-monto[b-s5r11w0vs9] {
    background: #e9f7ef;
    color: #0a5c38;
    border: 1px solid #8cc7a9;
}

/* Monto reventado */
.celda-monto-rev[b-s5r11w0vs9] {
    background: #faecec;
    color: #b02222;
    border: 1px solid #d3a3a3;
}

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

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

    .fila-totales-f .label[b-s5r11w0vs9],
    .fila-totales-f .valor[b-s5r11w0vs9] {
        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-s5r11w0vs9] {
        background: #eaf8ff;
        color: #0c6aa6;
        border: 1px dashed #0c6aa6;
        white-space: nowrap;
    }

    /* Monto normal */
    .fila-totales-f .valor[b-s5r11w0vs9] {
        background: #f1fff5;
        color: #0f7a3a;
        border: 1px dashed #0f7a3a;
    }

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

    .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: 26px;
        font-size: 14px;
        font-weight: 950;
        border-radius: 6px;
        box-sizing: border-box;
        padding: 0 6px;
    }

    /* Label */
    .fila-totales-f-rev .label[b-s5r11w0vs9] {
        background: #eaf8ff;
        color: #0c6aa6;
        border: 1px dashed #0c6aa6;
        white-space: nowrap;
    }

    /* Monto normal */
    .fila-totales-f-rev .valor-normal[b-s5r11w0vs9] {
        background: #f1fff5;
        color: #0f7a3a;
        border: 1px dashed #0f7a3a;
    }

    /* Monto reventado */
    .fila-totales-f-rev .valor-rev[b-s5r11w0vs9] {
        background: #fff5f5;
        color: #c62828;
        border: 1px dashed #c62828;
    }

/* 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.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
}

.venta-modal[b-s5r11w0vs9] {
    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-s5r11w0vs9 0.18s ease-out;
    text-align: left;
}

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

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

    .venta-modal .btn.ok[b-s5r11w0vs9] {
        width: 100%;
        font-weight: 600;
    }

@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 2px rgba(25, 118, 210, 0.45);
}

.toast-modal-centro[b-s5r11w0vs9] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 18px 26px;
    border-radius: 10px;
    font-size: 1.3rem;
    font-weight: 700;
    color: white;
    text-align: center;
    z-index: 999999 !important;
    box-shadow: 0 4px 20px 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: 6px;
}

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

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

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

/* Botones Guardar / Ingresar ventas dentro del modal de listas */
.btn-guardar-lista[b-s5r11w0vs9],
.btn-ingresar-lista[b-s5r11w0vs9] {
    min-width: 110px;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #0d47a1;
    background: #ffffff;
    color: #0d47a1;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}

    .btn-guardar-lista:hover[b-s5r11w0vs9],
    .btn-ingresar-lista:hover[b-s5r11w0vs9] {
        background: #e3f2fd;
    }

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

.modal-ingreso[b-s5r11w0vs9] {
    background: #ffffff;
    border-radius: 12px;
    padding: 12px 14px 12px;
    width: 360px; /* más delgado */
    max-width: 95vw;
    box-shadow: 0 14px 35px rgba(0,0,0,0.35);
    animation: ventaModalIn-b-s5r11w0vs9 0.18s ease-out;
}

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

/* En modo REVENTADO mantenemos el ancho actual */
.modal-ingreso-rev[b-s5r11w0vs9] {
    width: 360px;
}


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

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

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

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

        .tabla-ingreso.encabezado .col-num[b-s5r11w0vs9] {
            background: #e3f2fd;
            border-radius: 6px;
            border: 1px solid #bbdefb;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .tabla-ingreso.encabezado .col-monto[b-s5r11w0vs9] {
            background: #e8f5e9;
            border-radius: 6px;
            border: 1px solid #c8e6c9;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .tabla-ingreso.encabezado .col-monto-r[b-s5r11w0vs9] {
            background: #ffebee;
            border-radius: 6px;
            border: 1px solid #ffcdd2;
            display: flex;
            align-items: center;
            justify-content: center;
        }

/* ============================
   ✅ ALINEACIÓN PERFECTA CABECERA vs FILAS
   (mismas columnas en header y rows)
   ============================ */

/* NORMAL: 2 columnas (N° + MONTO) */
.modal-ingreso-normal .tabla-ingreso[b-s5r11w0vs9] {
    grid-template-columns: 80px 120px !important;
}


/* REVENTADO: 3 columnas (N° + MONTO + R) */
.modal-ingreso-rev .tabla-ingreso[b-s5r11w0vs9] {
    grid-template-columns: 80px 120px 120px !important;
}

/* PARLEY: 3 columnas (A + B + MONTO) */
.modal-ingreso-parley .tabla-ingreso[b-s5r11w0vs9] {
    grid-template-columns: 80px 80px 120px !important;
}

/* Parley necesita un ancho intermedio (3 columnas) */
.modal-ingreso-parley[b-s5r11w0vs9] {
    width: 300px; /* puedes ajustar 280-320 según te guste */
}


/* Cabeceras: que ocupen el 100% de su celda del grid (sin padding extra) */
.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; /* <- clave: evita que la cabecera crezca */
    height: 26px; /* mismo alto visual que las celdas */
    line-height: 26px; /* centra vertical */
}

/* Inputs: mismo alto y box-sizing para que calcen exacto */
.tabla-ingreso.fila .ingreso-input[b-s5r11w0vs9] {
    height: 26px;
    box-sizing: border-box;
    margin: 0;
}



    /* Fila normal */
    .tabla-ingreso.fila .ingreso-input[b-s5r11w0vs9] {
        width: 100%;
        padding: 5px 6px;
        border-radius: 6px;
        border: 2px solid #94a3b8;
        font-size: 0.9rem;
        font-weight: 600;
        text-align: center;
        text-align: center;
        box-sizing: border-box;
        background: #f8fafc;
    }

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

/* Footer */
.footer-ingreso[b-s5r11w0vs9] {
    margin-top: 8px;
    display: flex;
    flex-direction: column; /* apila Total y botones */
    align-items: flex-start;
    gap: 6px;
    font-size: 0.9rem;
}

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


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

.footer-ingreso-botones[b-s5r11w0vs9] {
    display: flex;
    gap: 6px;
}

    .footer-ingreso-botones .btn[b-s5r11w0vs9] {
        padding: 5px 10px;
        border-radius: 6px;
        font-size: 0.85rem;
        cursor: pointer;
    }

    .footer-ingreso-botones .btn-primario[b-s5r11w0vs9] {
        background: #0d47a1;
        color: #fff;
        border: 1px solid #0b3a82;
    }

    .footer-ingreso-botones .btn-secundario[b-s5r11w0vs9] {
        background: #e5e7eb;
        color: #111827;
        border: 1px solid #d1d5db;
    }

    .footer-ingreso-botones .btn-primario:hover[b-s5r11w0vs9] {
        background: #1565c0;
    }

    .footer-ingreso-botones .btn-secundario:hover[b-s5r11w0vs9] {
        background: #d4d4d8;
    }

/* ===========================
   ✅ FIX RAÍZ MODAL INGRESO
   - Scroll vertical real
   - Sin scroll horizontal
   - No se corre a la derecha al escribir
   =========================== */

.modal-ingreso[b-s5r11w0vs9] {
    height: 520px; /* AJUSTA este número si lo quieres un poquito más alto o más bajo */
    max-height: 520px; /* CLAVE: bloquea crecimiento */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* ✅ El body ES el que 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;
}

    /* ✅ La tabla SIEMPRE ocupa el ancho del modal */
    #ingresoBody .tabla-ingreso[b-s5r11w0vs9] {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

/* ✅ Columnas estables y sin empujar contenido */
.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 el grid */
#ingresoBody .ingreso-input[b-s5r11w0vs9] {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

/* ===== Colores base un poco más oscuros ===== */

/* Número */
.tabla-ingreso.fila .ingreso-input[data-col="0"][b-s5r11w0vs9] {
    background: #e0efff; /* antes muy claro */
    border-color: #7aa7d9;
}

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

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

/* ===== Foco: 2 tonos más intenso ===== */

/* Número en foco */
.tabla-ingreso.fila .ingreso-input[data-col="0"]:focus[b-s5r11w0vs9] {
    background: #cfe5ff;
    border-color: #0d47a1;
    box-shadow: 0 0 0 2px rgba(13,71,161,0.30);
}

/* Monto normal en foco */
.tabla-ingreso.fila .ingreso-input[data-col="1"]:focus[b-s5r11w0vs9] {
    background: #cdeedd;
    border-color: #0f7a3a;
    box-shadow: 0 0 0 2px rgba(15,122,58,0.30);
}

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

/* ==================================================
   CABECERAS MÁS OSCURAS (2 tonos más que celdas)
   ================================================== */

/* 🔵 Cabecera NÚMERO */
.tabla-ingreso.encabezado .col-num[b-s5r11w0vs9] {
    background: #bcdcff; /* más oscuro que la celda */
    border-color: #0d47a1;
    color: #0a2e52;
}

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

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

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

.label-lista[b-s5r11w0vs9] {
    font-weight: 800;
    color: #123a6c;
    font-size: 0.9rem;
}

.select-lista[b-s5r11w0vs9] {
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid #bbdefb;
    font-weight: 800;
    background: #e3f2fd;
    color: #0d47a1;
    outline: none;
    cursor: pointer;
}

/* ✅ Título + selector de Lista en una sola línea */
.titulo-sorteo-linea[b-s5r11w0vs9] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Tu selector ya existe, no lo cambio.
   Si quieres que quede bien pegado y alineado: */
.fila-lista-selector[b-s5r11w0vs9] {
    display: flex;
    align-items: center;
    gap: 6px;
}


/*estilo mensaje defs borrado*/

.confirm-overlay[b-s5r11w0vs9] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55); /* un poco más elegante */
    z-index: 999999; /* por encima del modal grande */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.confirm-box[b-s5r11w0vs9] {
    width: min(520px, 95vw);
    background: #ffffff;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 16px;
    box-shadow: 0 22px 70px rgba(0,0,0,.30);
    padding: 18px 18px 16px;
    /* pequeño efecto moderno */
    transform: translateY(0);
}

.confirm-title[b-s5r11w0vs9] {
    font-weight: 900;
    font-size: 1.1rem;
    color: #0f2f6d; /* azul acorde */
    margin-bottom: 10px;
}

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

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

/*botones diseño modal edicion*/
/* ===== Toolbar acciones (Guardar / Borrar / Nueva / Ingresar) ===== */
/* =========================
   BOTONES TOP (Guardar / Borrar / Nueva / Ingresar)
   SIN CAMBIAR TU RAZOR
========================= */

/* contenedor ya lo tienes (toolbar-acciones); esto solo lo refuerza */
.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,.70);
    border-radius: 14px;
    backdrop-filter: blur(6px);
}

    /* estilo base moderno para los botones de esa barra */
    .modal-lista-actions.toolbar-acciones .btn[b-s5r11w0vs9] {
        appearance: none;
        border: 1px solid rgba(0,0,0,.12);
        background: #fff;
        color: #123a75;
        font-weight: 800;
        font-size: .92rem;
        line-height: 1;
        padding: 10px 14px;
        border-radius: 12px;
        box-shadow: 0 6px 16px rgba(0,0,0,.08);
        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 10px 22px 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 6px 14px rgba(0,0,0,.10);
        }

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

    /* ===== Variantes por tipo ===== */

    /* Guardar (azul moderno) */
    .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 (outline elegante) */
    .modal-lista-actions.toolbar-acciones .btn-ingresar-lista[b-s5r11w0vs9] {
        background: rgba(255,255,255,.85);
        color: #123a75;
        border-color: rgba(18,58,117,.28);
    }

    /* Borrar lista (rojo moderno) */
    .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 quieres que “Nueva lista” se vea neutro:
   (como también usa btn-guardar-lista en tu razor, aquí lo distinguimos por posición)
   Si NO quieres esto, elimínalo.
*/
    .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);
    }

    /* ===== Ajuste fino: botones un poco más pequeños ===== */
    .modal-lista-actions.toolbar-acciones .btn[b-s5r11w0vs9] {
        font-size: 0.74rem; /* antes ~0.92rem */
        padding: 7px 11px; /* antes 10px 14px */
        border-radius: 10px; /* un poco más compacto */
    }

        /* Iconos o texto fuerte (si los hubiera) */
        .modal-lista-actions.toolbar-acciones .btn b[b-s5r11w0vs9],
        .modal-lista-actions.toolbar-acciones .btn strong[b-s5r11w0vs9] {
            font-size: 0.75rem;
        }

    /* ===== Botón Información más pequeño ===== */
    .modal-lista-actions.toolbar-acciones .btn-info-lista[b-s5r11w0vs9] {
        font-size: 0.70rem;
        padding: 6px 10px;
        border-radius: 10px;
        border: 1px solid rgba(25,118,210,.35);
        background: rgba(25,118,210,.08);
        color: #0b4aa3;
        font-weight: 800;
    }

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

/* ===== Modal info (centrado, moderno) ===== */
.info-box[b-s5r11w0vs9] {
    width: min(560px, 96vw);
    background: #fff;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0,0,0,.25);
    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: 900;
    font-size: 1rem;
    color: #153e75;
}

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

.info-grid[b-s5r11w0vs9] {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 8px 12px;
    font-size: .90rem;
}

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

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

.info-sep[b-s5r11w0vs9] {
    grid-column: 1 / -1;
    border: none;
    height: 1px;
    background: rgba(0,0,0,.10);
    margin: 6px 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; /* sube o baja a gusto: 270-310 */
}

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

    /* ✅ Cabeceras: que no se corten */
    .modal-ingreso-parley .tabla-ingreso.encabezado .col-monto[b-s5r11w0vs9] {
        white-space: nowrap;
    }
/* _content/SistemaLoteriaDashboard/Components/Banca/Noticias.razor.rz.scp.css */
/* =========================
   CONTENEDOR PRINCIPAL
   ========================= */
.noticias-admin[b-eqowyv7o49] {
    max-width: 900px;
    width: 100%;
    margin: 0;
}

/* =========================
   LAYOUT 2 COLUMNAS
   ========================= */
.noticias-layout[b-eqowyv7o49] {
    display: flex;
    align-items: flex-start;
    gap: 26px;
    width: 100%;
}

.noticias-left[b-eqowyv7o49] {
    flex: 0 0 420px;
    min-width: 380px;
}

.noticias-right[b-eqowyv7o49] {
    flex: 1 1 auto;
    min-width: 320px;
    margin-left: 15px;
}

    .noticias-right .lista[b-eqowyv7o49] {
        max-height: calc(100vh - 220px);
        overflow: auto;
        padding-right: 6px;
        scrollbar-gutter: stable;
    }

/* =========================
   FORMULARIO
   ========================= */
.grid-form[b-eqowyv7o49] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.campo label[b-eqowyv7o49] {
    font-weight: 900;
    color: #153e75;
    display: block;
    margin-bottom: 6px;
}

.inp[b-eqowyv7o49] {
    width: 100%;
    height: 44px;
    border: 1px solid #8aa4d6;
    border-radius: 8px;
    padding: 8px 10px;
    font-weight: 800;
    color: #153e75;
    background: #fff;
    box-sizing: border-box;
}

.area[b-eqowyv7o49] {
    min-height: 120px;
    resize: vertical;
    font-weight: 700;
}

.acciones-form[b-eqowyv7o49] {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* =========================
   DESTINATARIOS
   ========================= */
.fila-destinatarios[b-eqowyv7o49] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
}

.vendor-select-root[b-eqowyv7o49] {
    position: relative;
    width: 420px;
    flex: 0 0 420px;
}

.buscador-lateral[b-eqowyv7o49] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 280px;
}

.inp.buscador[b-eqowyv7o49] {
    height: 44px;
}

/* =========================
   SELECTOR VENDEDORES (SIMPLE)
   ========================= */
.vendor-select-btn[b-eqowyv7o49] {
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #8aa4d6;
    background: #fff;
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
}

.vs-left[b-eqowyv7o49] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.vs-title[b-eqowyv7o49] {
    font-weight: 800;
    font-size: .95rem;
    color: #153e75;
    line-height: 1.05;
}

.vs-sub[b-eqowyv7o49] {
    font-weight: 700;
    font-size: .82rem;
    color: #52627a;
    line-height: 1.05;
}

.vs-arrow[b-eqowyv7o49] {
    font-weight: 900;
    color: #0d47a1;
    font-size: 1rem;
}

/* =========================
   DROPDOWN (UNA SOLA CAJA)
   ========================= */
.vendor-dropdown[b-eqowyv7o49] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    z-index: 999;
    background: #fff;
    border: 1px solid #8aa4d6;
    border-radius: 8px;
    box-shadow: 0 10px 22px rgba(0,0,0,.12);
    padding: 6px;
    box-sizing: border-box;
}

/* fila TODOS (sin caja) */
.vendor-toolbar[b-eqowyv7o49] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.chk[b-eqowyv7o49] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    color: #153e75;
}

/* =========================
   LISTA DE VENDEDORES
   ========================= */
.vendor-list[b-eqowyv7o49] {
    max-height: 260px;
    overflow: auto;
    border: 1px solid #c7d6ef;
    border-radius: 6px;
    background: #fff;
}

/* vendedor = fila simple */
.u-item[b-eqowyv7o49] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-bottom: 1px solid #edf2fb;
    font-weight: 700;
    color: #153e75;
}

    .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: 2px solid rgba(255,179,0,.35);
        outline-offset: -2px;
    }

.u-nombre[b-eqowyv7o49] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.u-id[b-eqowyv7o49] {
    font-size: .8rem;
    font-weight: 800;
    color: #0d47a1;
    background: #eaf2ff;
    border: 1px solid #cfe0f5;
    border-radius: 999px;
    padding: 1px 7px;
}

.usuarios-vacio[b-eqowyv7o49] {
    padding: 10px;
    font-weight: 700;
    color: #52627a;
}

/* =========================
   BOTONES
   ========================= */
.btn[b-eqowyv7o49] {
    height: 44px;
    border-radius: 8px;
    padding: 0 14px;
    font-weight: 900;
    cursor: pointer;
}

.btn-prim[b-eqowyv7o49] {
    background: linear-gradient(90deg,#1976d2,#1e88e5);
    color: #fff;
    border: none;
}

.btn-danger[b-eqowyv7o49] {
    background: #ffe5e5;
    color: #b71c1c;
    border: 1px solid #ffcdd2;
}

    .btn-danger:hover[b-eqowyv7o49] {
        background: #ffcccc;
    }

.btn-buscar[b-eqowyv7o49] {
    border: 1px solid #bbdefb;
    background: #e3f2fd;
    color: #0d47a1;
}

/* =========================
   HISTORIAL
   ========================= */
.lista-titulo[b-eqowyv7o49] {
    font-weight: 900;
    color: #153e75;
    margin-bottom: 10px;
}

.item[b-eqowyv7o49] {
    background: #fff;
    border: 1px solid #8aa4d6;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
}

.top[b-eqowyv7o49] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.t[b-eqowyv7o49] {
    font-weight: 900;
    color: #153e75;
}

.meta[b-eqowyv7o49] {
    display: flex;
    gap: 6px;
}

.badge[b-eqowyv7o49] {
    font-size: .75rem;
    font-weight: 900;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid #bbdefb;
    background: #e3f2fd;
    color: #0d47a1;
}

    .badge.ok[b-eqowyv7o49] {
        background: #e8f5e9;
        color: #1b5e20;
    }

    .badge.priv[b-eqowyv7o49] {
        background: #fff3e0;
        color: #e65100;
    }

.body[b-eqowyv7o49] {
    margin: 8px 0;
    font-weight: 700;
    color: #334155;
}

.dest[b-eqowyv7o49] {
    font-weight: 800;
    color: #52627a;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 980px) {
    .noticias-layout[b-eqowyv7o49] {
        flex-direction: column;
    }

    .noticias-left[b-eqowyv7o49],
    .vendor-select-root[b-eqowyv7o49],
    .buscador-lateral[b-eqowyv7o49] {
        width: 100%;
        flex: 1 1 auto;
    }

    .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);
}
/* _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;
    }
}
/* _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;
    }
/* _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;
}

/* _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: 100%;
    max-width: 1150px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 0;
}

    .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: 12px;
}

    .titulo-bar .der[b-rhkq3vc24a] {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-end;
    }

    .titulo-bar .tag[b-rhkq3vc24a] {
        font-size: 14px;
        padding: 6px 10px;
        border-radius: 999px;
        background: rgba(226,232,240,.85);
        border: 1px solid rgba(148,163,184,.45);
        font-weight: 800;
    }

        .titulo-bar .tag b[b-rhkq3vc24a] {
            font-size: 15px;
        }

    .titulo-bar .tag-neto[b-rhkq3vc24a] {
        background: rgba(209,250,229,.9);
        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;
}
/* _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;
}
/* _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);
    }
/* _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;
    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-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 */
        }

/* _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 */
}
/* _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;
}

/* ====== GRID UNIFICADO (cabecera + filas) ====== */
.tabla-lista[b-610qae6d9r] {
    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-610qae6d9r] {
        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-610qae6d9r],
.fila-item[b-610qae6d9r] {
    display: contents;
}

/* ====== 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] {
    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: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

    .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;
}

    .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;
    }
/* _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/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;
    }