/* ===== Global base ===== */
html, body {
    color: #ffffff;
    background-color: #0b0f17; /* puedes cambiar el fondo si quieres */
}

/* Asegura títulos y texto básico en blanco */
h1, h2, h3, h4, h5, h6,
p, span, div, label, li, dt, dd, th, td, strong, b, em, small {
    color: #ffffff;
}

/* Links */
a, a:visited {
    color: #ffffff;
    text-decoration: none;
}

    a:hover, a:focus {
        color: #eaeaea;
        text-decoration: underline;
    }

/* Textos “muted”/secundarios: que sigan siendo claros */
.text-muted, .muted, small, .small, .form-text {
    color: rgba(255,255,255,.65) !important;
}

/* ===== Componentes Bootstrap comunes ===== */

/* Tablas */
.table {
    color: #ffffff;
    --bs-table-color: #ffffff;
    --bs-table-striped-color: #ffffff;
    --bs-table-hover-color: #ffffff;
    --bs-table-bg: transparent;
}

    .table > :not(caption) > * > * {
        color: #ffffff;
        background-color: transparent;
        border-color: rgba(255,255,255,.15);
    }

/* Botones: texto blanco por defecto */
.btn, .btn * {
    color: #ffffff;
}

.btn-light, .btn-outline-light {
    color: #0b0f17 !important; /* excepciones “light” para contraste */
}

/* Badges */
.badge {
    color: #ffffff;
}

/* Inputs / selects */
.form-control, .form-select, .form-check-label {
    color: #ffffff;
}

    .form-control::placeholder {
        color: rgba(255,255,255,.6);
    }

.form-control, .form-select {
    background-color: #1b2230;
    border-color: #2a3242;
}

    .form-control:focus, .form-select:focus {
        background-color: #1b2230;
        color: #ffffff;
        border-color: #3a89ff;
        box-shadow: 0 0 0 .2rem rgba(58,137,255,.25);
    }

/* Cards */
.card {
    color: #ffffff;
    background-color: #111827;
    border-color: #273042;
}

    .card .card-header {
        background-color: #0f1623;
        border-bottom-color: #273042;
    }

/* Alerts (ajustadas para texto blanco y buen contraste) */
.alert {
    color: #ffffff;
    border-color: rgba(255,255,255,.15);
}

.alert-primary {
    background-color: #123054;
}

.alert-secondary {
    background-color: #3a3f4a;
}

.alert-success {
    background-color: #1f5131;
}

.alert-danger {
    background-color: #5a1e22;
}

.alert-warning {
    background-color: #5a4a1e;
    color: #fff;
}

.alert-info {
    background-color: #154a5a;
}

/* Navbar / dropdowns */
.navbar, .dropdown-menu {
    color: #ffffff;
    background-color: #0b0f17;
}

.dropdown-item {
    color: #ffffff;
}

    .dropdown-item:hover {
        background-color: #172030;
        color: #ffffff;
    }

/* Paginación */
.page-link {
    color: #ffffff;
    background-color: transparent;
    border-color: rgba(255,255,255,.15);
}

    .page-link:hover {
        color: #ffffff;
        background-color: #172030;
    }

/* Bordes sutiles en modo oscuro */
hr, .border, .border-top, .border-bottom, .border-start, .border-end {
    border-color: rgba(255,255,255,.15) !important;
}

/* ===== Estilos específicos de las páginas de rifas ===== */

/* Números del tablero (Details) */
.grid-nums .num {
    color: #ffffff;
    border-color: rgba(255,255,255,.25);
    background-color: transparent;
}

    .grid-nums .num.taken {
        background-color: #f8d7da; /* rosa claro */
        color: #842029; /* texto oscuro, para indicar ocupado */
        border-color: #f1b0b7;
    }

    .grid-nums .num.mine {
        outline: 2px solid #38bdf8; /* info */
    }

    .grid-nums .num.winner {
        background-color: #d1e7dd;
        color: #0f5132;
        border-color: #badbcc;
    }

/* “Topbars” y contadores grandes */
.countdown-big, .countdown-giant {
    color: #ffffff;
}

/* Panel expandible (Index) */
.bg-light-subtle {
    background-color: #0f1623 !important;
    color: #ffffff !important;
}

/* Botones “light” del listado para que sigan legibles */
.btn-light {
    background-color: #e9eef5;
    color: #0b0f17 !important;
    border-color: #cfd7e2;
}

.btn-outline-secondary {
    color: #ffffff;
    border-color: rgba(255,255,255,.4);
}

    .btn-outline-secondary:hover {
        background-color: #233047;
        color: #ffffff;
    }

/* Inputs dentro de cards oscuras */
.card .form-control, .card .form-select {
    background-color: #0f1623;
    border-color: #273042;
    color: #ffffff;
}

/* Tooltip / popover (si usas) */
.tooltip-inner, .popover {
    color: #ffffff;
    background-color: #172030;
}

.popover-header {
    background-color: #0f1623;
    color: #ffffff;
}
/* ==== Pozo con pulso/Glow ==== */
.pulse-pot {
    color: var(--casino-gold, #ffd86b);
    text-shadow: 0 0 10px rgba(255, 216, 107, .6), 0 0 20px rgba(255, 216, 107, .35);
    animation: potPulse 1.2s ease-in-out infinite;
    position: relative;
    display: inline-block;
    will-change: transform, filter;
}

    .pulse-pot::after {
        content: "";
        position: absolute;
        inset: -6px -10px;
        border-radius: 10px;
        box-shadow: 0 0 22px rgba(255, 216, 107, .35);
        opacity: .7;
        pointer-events: none;
    }

@keyframes potPulse {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1);
    }

    50% {
        transform: scale(1.035);
        filter: brightness(1.06);
    }
}

/* Si al pasar el mouse quieres “subir” el brillo un toque */
.pulse-pot:hover {
    filter: brightness(1.1);
}

/* Accesibilidad: si el usuario prefiere menos animación */
@media (prefers-reduced-motion: reduce) {
    .pulse-pot {
        animation: none;
    }
}

/* ===== Pozo con pulso (casino-pot.css) ===== */

:root {
    --casino-gold: #ffd86b;
}

/* Texto dorado por si lo necesitas sin animación */
.text-gold {
    color: var(--casino-gold);
}

/* Pulso/Glow elegante para el pozo */
.pulse-pot {
    color: var(--casino-gold);
    text-shadow: 0 0 10px rgba(255, 216, 107, .6), 0 0 20px rgba(255, 216, 107, .35);
    animation: potPulse 1.2s ease-in-out infinite;
    position: relative;
    display: inline-block;
    will-change: transform, filter;
}

    .pulse-pot::after {
        content: "";
        position: absolute;
        inset: -6px -10px;
        border-radius: 10px;
        box-shadow: 0 0 22px rgba(255, 216, 107, .35);
        opacity: .7;
        pointer-events: none;
    }

@keyframes potPulse {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1);
    }

    50% {
        transform: scale(1.035);
        filter: brightness(1.06);
    }
}

/* Accesibilidad: desactiva animación si el usuario lo pide */
@media (prefers-reduced-motion: reduce) {
    .pulse-pot {
        animation: none;
    }


}