/*
 * Site Theme Color Override - PuntoBet
 * Este archivo sobrescribe los colores del tema principal del sitio
 * Paleta Cromática PuntoBet:
 * - Pantone 2767 CVC (Rojo Principal): #14213D / CMYK: 87-76-54-76 / RGB: 20-33-61
 * - Pantone 132 U (Negro/Gris): #997937 / CMYK: 36-49-100-16 / RGB: 153-121-55
 * - Degradado a 60°: Rojo (#E4313E aproximado)
 * - Background dark: #1A1A1A
 * - White: #FFFFFF
 */

/* ========================================
   Variables CSS Root Override - TEMA CLARO
   ======================================== */
:root {
    /* Colores principales */
    --primary: #EF4D52 !important; /* Rojo principal de botones */
    --secondary: #E4313E !important; /* Rojo secundario */
    --success: #28a745 !important;
    --info: #17a2b8 !important;
    --warning: #ffc107 !important;
    --danger: #E4313E !important; /* Rojo */
    --light: #f8f9fa !important;
    --dark: #212529 !important; /* Texto oscuro */
    --white: #FFFFFF !important;
    --red: #E4313E !important;
    --black: #000000 !important; /* Negro puro para hover de botones */
    /* Colores de hover */
    --primary-hover: #df3a3e; /* Hover de botones primary */
    --primary-light: #ff5560; /* Hover más claro */
    --success-hover: #218838; /* Hover de success */
    --success-border-hover: #1e7e34; /* Border hover de success */
    /* Colores de estado disabled */
    --disabled: #727376; /* Estado inactivo/disabled */
    /* Colores de fondo oscuro */
    --bg-dark: #1A1A1A; /* Background oscuro de cards oscuras */
    --bg-dark-alt: #2A3342; /* Background oscuro alternativo */
    --bg-modal: #2B2929; /* Background de modales */
    --navy: #14213D; /* Navy para borders, tooltips, forms */
    /* Colores de borde */
    --border-light: #dee2e6; /* Borders grises claros */
    --border-gray: #ced4da; /* Border gris medio */
    /* Colores de texto */
    --text-muted: #6c757d; /* Texto muted/placeholder */
    --text-muted-light: #adb5bd; /* Texto muted más claro */
    /* Variables para degradado de barra de marcas */
    --gradient-dark: #070706; /* Fondo oscuro base */
    --gradient-accent: rgba(239, 77, 82, 0.55); /* Rojo PuntoBet con 55% opacidad */
    --gradient-accent-highlight: rgba(239, 77, 82, 0.65); /* Rojo PuntoBet con 65% opacidad */
}

/* ========================================
   Body & Background Colors - TEMA CLARO
   ======================================== */
body {
    background-color: var(--white) !important;
    color: var(--dark) !important;
}

.bg-primary,
.bg-primary-800,
.bg-primary-900 {
    background-color: var(--primary) !important;
}

.bg-secondary {
    background-color: var(--secondary) !important;
}

.bg-dark {
    background-color: var(--dark) !important;
}

.bg-light {
    background-color: var(--light) !important;
}

/* ========================================
   Text Colors - TEMA CLARO
   ======================================== */
.text-primary {
    color: var(--primary) !important;
}

.text-secondary {
    color: var(--secondary) !important;
}

.text-white {
    color: var(--white) !important;
}

.text-dark {
    color: var(--dark) !important;
}

.text-danger {
    color: var(--danger) !important;
}

/* ========================================
   Links - TEMA CLARO
   ======================================== */
a {
    color: var(--secondary) !important;
}

    a:hover {
        color: var(--primary) !important;
    }

/* ========================================
   Buttons - General
   ======================================== */
.btn,
button,
input[type="button"],
input[type="submit"] {
    border-radius: 1.5rem !important; /* Bordes más redondos para todos los botones */
}

/* ========================================
   Buttons - Primary
   ======================================== */
/* Estado base */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
    background-color: var(--primary) !important; /* Activo */
    border-color: var(--primary) !important; /* Sin borde rojo visible */
    color: var(--white) !important;
    border-radius: 1.5rem !important; /* Bordes más redondos */
}

    /* Estado hover y focus */
    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary.focus,
    .btn-primary:not(:disabled):not(.disabled):hover,
    .btn-primary:not(:disabled):not(.disabled):focus {
        background-color: var(--primary-hover) !important; /* Hover */
        border-color: var(--primary-hover) !important;
        color: var(--black) !important; /* Texto negro en hover */
    }

    /* Estado active (cuando se hace click) */
    .btn-primary:not(:disabled):not(.disabled):active,
    .btn-primary:not(:disabled):not(.disabled).active,
    .show > .btn-primary.dropdown-toggle {
        background-color: var(--primary-hover) !important; /* Mismo que hover */
        border-color: var(--primary-hover) !important;
        color: var(--black) !important;
    }

    /* Estado disabled */
    .btn-primary:disabled,
    .btn-primary.disabled {
        background-color: var(--disabled) !important; /* Inactivo */
        border-color: var(--disabled) !important;
        color: var(--white) !important;
        opacity: 1 !important; /* Sin opacity para mantener colores exactos */
    }

/* ========================================
   Buttons - Secondary
   ======================================== */
.btn-secondary,
.btn-secondary:not(:disabled):not(.disabled),
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active {
    background-color: var(--primary) !important; /* Activo - mismo que primary */
    border-color: var(--primary) !important; /* Sin borde rojo visible */
    color: var(--white) !important;
    border-radius: 1.5rem !important; /* Bordes más redondos */
    box-shadow: none !important; /* Sin box-shadow rojo */
}

    .btn-secondary:hover,
    .btn-secondary:focus {
        background-color: var(--primary-hover) !important; /* Hover */
        border-color: var(--primary-hover) !important;
        color: var(--black) !important; /* Texto negro en hover */
    }

    .btn-secondary:disabled,
    .btn-secondary.disabled {
        background-color: var(--disabled) !important; /* Inactivo */
        border-color: var(--disabled) !important;
        color: var(--white) !important;
        opacity: 1 !important;
    }

/* ========================================
   Buttons - Outline
   ======================================== */
.btn-outline-primary {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
    background-color: transparent !important;
    border-radius: 1.5rem !important; /* Bordes más redondos */
}

    .btn-outline-primary:hover,
    .btn-outline-primary:focus {
        background-color: var(--primary-hover) !important;
        border-color: var(--primary-hover) !important;
        color: var(--black) !important; /* Texto negro en hover */
    }

    .btn-outline-primary:disabled,
    .btn-outline-primary.disabled {
        color: var(--disabled) !important;
        border-color: var(--disabled) !important;
        background-color: transparent !important;
        opacity: 1 !important;
    }

.btn-outline-secondary {
    color: var(--white) !important;
    border-color: var(--white) !important;
    background-color: transparent !important;
    border-radius: 1.5rem !important; /* Bordes más redondos */
}

    .btn-outline-secondary:hover,
    .btn-outline-secondary:focus {
        background-color: var(--white) !important;
        border-color: var(--white) !important;
        color: var(--navy) !important;
    }

/* Botones outline-light en header (mantener blanco sobre oscuro) */
header .btn-outline-light,
.navbar .btn-outline-light {
    color: var(--white) !important;
    border-color: var(--white) !important;
    background-color: transparent !important;
}

    header .btn-outline-light:hover,
    header .btn-outline-light:focus,
    .navbar .btn-outline-light:hover,
    .navbar .btn-outline-light:focus {
        background-color: var(--white) !important;
        border-color: var(--white) !important;
        color: var(--gradient-dark) !important;
    }

/* Botones outline-light en contenido (negro sobre blanco - Ver más) */
main .btn-outline-light,
section .btn-outline-light {
    color: var(--dark) !important; /* Texto negro sobre fondo blanco */
    border-color: var(--primary) !important; /* Borde rojo */
    background-color: transparent !important;
    border-radius: 1.5rem !important;
}

    main .btn-outline-light:hover,
    main .btn-outline-light:focus,
    section .btn-outline-light:hover,
    section .btn-outline-light:focus {
        background-color: var(--primary) !important; /* Fondo rojo en hover */
        border-color: var(--primary) !important;
        color: var(--white) !important; /* Texto blanco en hover */
    }

/* ========================================
   Buttons - Success/Danger
   ======================================== */
.btn-success {
    background-color: var(--success) !important;
    border-color: var(--success) !important;
    border-radius: 1.5rem !important; /* Bordes más redondos */
}

    .btn-success:hover,
    .btn-success:focus {
        background-color: var(--success-hover) !important;
        border-color: var(--success-border-hover) !important;
    }

    .btn-success:disabled,
    .btn-success.disabled {
        background-color: var(--disabled) !important;
        border-color: var(--disabled) !important;
        opacity: 1 !important;
    }

.btn-danger {
    background-color: var(--primary) !important; /* Mismo que primary */
    border-color: var(--primary) !important;
    color: var(--white) !important;
    border-radius: 1.5rem !important; /* Bordes más redondos */
}

    .btn-danger:hover,
    .btn-danger:focus {
        background-color: var(--primary-hover) !important;
        border-color: var(--primary-hover) !important;
        color: var(--black) !important; /* Texto negro en hover */
    }

    .btn-danger:disabled,
    .btn-danger.disabled {
        background-color: var(--disabled) !important;
        border-color: var(--disabled) !important;
        color: var(--white) !important;
        opacity: 1 !important;
    }

/* ========================================
   Navigation & Header - Textos Blancos
   ======================================== */
.navbar,
header {
    background-color: var(--gradient-dark) !important;
    border-bottom: 1px solid var(--gradient-dark) !important;
}

.navbar-brand {
    color: var(--white) !important;
}

.navbar-nav .nav-link {
    color: var(--white) !important;
}

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link:focus,
    .nav-item.active .nav-link {
        color: var(--primary) !important;
    }

    .navbar-nav .nav-link.active {
        color: var(--primary) !important;
    }

.navbar-toggler {
    border-color: var(--primary) !important;
}

.navbar-toggler-icon {
    filter: brightness(0) invert(1) !important;
}

/* ========================================
   Dropdown - TEMA CLARO
   ======================================== */
.dropdown-menu {
    background-color: var(--bg-dark) !important;
    /* border-color: #222 !important; */
    box-shadow: 2px 2px 0px 0px #111;
}

.dropdown-item {
    color: var(--white) !important;
}

    .dropdown-item:hover,
    .dropdown-item:focus {
        background-color: var(--light) !important;
        color: var(--secondary) !important;
    }

    .dropdown-item.active,
    .dropdown-item:active {
        background-color: var(--primary) !important;
        color: var(--white) !important;
    }

/* Header Dropdown - Depositar button override */
.dropdown-menu .btn-success,
.dropdown-menu .btn-success:not(:disabled):not(.disabled),
.dropdown-menu .btn-success:not(:disabled):not(.disabled):active {
    background-color: var(--secondary) !important;
    border-color: var(--secondary) !important;
    color: var(--white) !important;
}

    .dropdown-menu .btn-success:hover,
    .dropdown-menu .btn-success:focus {
        background-color: var(--primary-light) !important;
        border-color: var(--primary-light) !important;
        color: var(--white) !important;
    }

    /* Header Dropdown - Depositar button override */
    .dropdown-menu .btn-success,
    .dropdown-menu .btn-success:not(:disabled):not(.disabled),
    .dropdown-menu .btn-success:not(:disabled):not(.disabled):active {
        background-color: var(--secondary) !important;
        border-color: var(--secondary) !important;
        color: var(--white) !important;
    }

        .dropdown-menu .btn-success:hover,
        .dropdown-menu .btn-success:focus {
            background-color: var(--primary-light) !important;
            border-color: var(--primary-light) !important;
            color: var(--white) !important;
        }

/* ========================================
   Cards - TEMA CLARO
   ======================================== */
.card {
    background-color: var(--white) !important;
    border-color: var(--border-light) !important;
    color: var(--dark) !important;
}

.card-header {
    background-color: var(--light) !important;
    border-bottom-color: var(--border-light) !important;
    color: var(--dark) !important;
}

.card-footer {
    background-color: var(--light) !important;
    border-top-color: var(--border-light) !important;
}

.card p, .card h2, .card h3, .card h4, .card h5, .card h6 {
    color: var(--dark) !important;
}

.card-title {
    color: var(--dark) !important;
}

.card-text {
    color: var(--dark) !important;
}

/* ========================================
   Modal - Estilo Oscuro
   ======================================== */
.modal-content {
    background-color: var(--bg-modal) !important;
    border-color: var(--bg-dark-alt) !important;
    color: var(--white) !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5) !important;
}

.modal-header {
    background-color: var(--bg-modal) !important;
    border-bottom-color: var(--secondary) !important;
}

    .modal-header .close {
        color: var(--white) !important;
        opacity: 1 !important;
    }

        .modal-header .close:hover {
            color: var(--secondary) !important;
        }

.modal-footer {
    background-color: var(--bg-modal) !important;
    border-top-color: var(--secondary) !important;
}

    /* Fix buttons in modal footer */
    .modal-footer .btn {
        margin-bottom: 0 !important;
        margin-left: 0.5rem !important;
        margin-right: 0.5rem !important;
    }

.modal-body {
    background-color: var(--bg-modal) !important;
    color: var(--white) !important;
}

    /* Fix buttons in modal body */
    .modal-body .btn {
        margin-bottom: 1rem !important;
    }

/* ========================================
   Forms
   ======================================== */
.form-control {
    background-color: var(--white) !important;
    border-color: var(--bg-dark-alt) !important;
    color: var(--navy) !important;
}

    .form-control:focus {
        background-color: var(--white) !important;
        border-color: var(--navy) !important; /* Navy border - not red to avoid confusion */
        color: var(--navy) !important;
        box-shadow: 0 0 0 0.2rem rgba(20, 33, 61, 0.25) !important; /* Navy shadow */
    }

    .form-control::placeholder {
        color: var(--text-muted) !important;
    }

    .form-control:disabled,
    .form-control[readonly] {
        background-color: #e9ecef !important;
        opacity: 0.6 !important;
    }

.input-group-text {
    background-color: var(--bg-dark) !important;
    border-color: var(--bg-dark-alt) !important;
    color: var(--white) !important;
}

/* ========================================
   Tables - TEMA CLARO
   ======================================== */
.table {
    color: var(--dark) !important;
}

    .table thead th {
        border-color: var(--border-light) !important;
        background-color: var(--light) !important;
        color: var(--dark) !important;
    }

    .table td,
    .table th {
        border-color: var(--border-light) !important;
    }

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

.table-hover tbody tr:hover {
    background-color: rgba(239, 77, 82, 0.1) !important; /* var(--primary) con opacidad */
}

/* ========================================
   Alerts - TEMA CLARO
   ======================================== */
.alert-primary {
    background-color: #fde8e9 !important;
    border-color: var(--primary) !important;
    color: #721c24 !important;
}

.alert-secondary {
    background-color: #fff3cd !important;
    border-color: var(--secondary) !important;
    color: #856404 !important;
}

.alert-success {
    background-color: #d4edda !important;
    border-color: #c3e6cb !important;
    color: #155724 !important;
}

.alert-danger {
    background-color: #f8d7da !important;
    border-color: #f5c6cb !important;
    color: #721c24 !important;
}

.alert-lighter {
    background-color: var(--light) !important;
    color: var(--dark) !important;
}

/* ========================================
   Badges - TEMA CLARO
   ======================================== */
.badge-primary {
    background-color: var(--primary) !important;
    color: var(--white) !important;
}

.badge-secondary {
    background-color: #6c757d !important;
    color: var(--white) !important;
}

.badge-danger {
    background-color: var(--secondary) !important;
    color: var(--white) !important;
}

/* ========================================
   Pagination - TEMA CLARO
   ======================================== */
.page-link {
    background-color: var(--white) !important;
    border-color: var(--border-light) !important;
    color: var(--primary) !important;
}

    .page-link:hover {
        background-color: var(--primary) !important;
        border-color: var(--primary) !important;
        color: var(--white) !important;
    }

.page-item.active .page-link {
    background-color: var(--secondary) !important;
    border-color: var(--secondary) !important;
    color: var(--white) !important;
}

.page-item.disabled .page-link {
    background-color: var(--white) !important;
    border-color: var(--border-light) !important;
    color: var(--text-muted) !important;
}

/* ========================================
   Progress Bars
   ======================================== */
.progress {
    background-color: var(--bg-dark) !important;
}

.progress-bar {
    background-color: var(--secondary) !important;
}

.progress-bar-striped {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
}

/* ========================================
   Breadcrumb
   ======================================== */
.breadcrumb {
    background-color: var(--bg-dark) !important;
}

.breadcrumb-item.active {
    color: var(--secondary) !important;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--white) !important;
}

/* ========================================
   List Group
   ======================================== */
.list-group-item {
    background-color: var(--bg-dark) !important;
    border-color: var(--bg-dark-alt) !important;
    color: var(--white) !important;
}

    .list-group-item:hover,
    .list-group-item:focus {
        background-color: var(--navy) !important;
        color: var(--secondary) !important;
    }

    .list-group-item.active {
        background-color: var(--secondary) !important;
        border-color: var(--secondary) !important;
        color: var(--white) !important;
    }

/* ========================================
   Jumbotron
   ======================================== */
.jumbotron {
    /* background-color: var(--bg-dark) !important; */
    color: var(--white) !important;
}

    .jumbotron .title {
        font-size: 3rem !important; /* Tamaño grande para títulos */
        font-weight: bold !important;
        color: var(--white) !important;
    }

@media (max-width: 768px) {
    .jumbotron .title {
        font-size: 2rem !important; /* Tamaño más pequeño en mobile */
    }
}

/* ========================================
   Footer - Fondo Oscuro
   ======================================== */
footer,
footer[style],
.footer,
#footer,
body > footer,
footer.container-fluid {
    background-color: var(--gradient-dark) !important;
    background: var(--gradient-dark) !important;
    color: var(--white) !important;
    border-top: 1px solid var(--gradient-dark) !important;
}

    footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
    footer .h1, footer .h2, footer .h3, footer .h4, footer .h5, footer .h6 {
        color: var(--primary) !important;
    }

    footer a {
        color: var(--white) !important;
    }

        footer a:hover {
            color: var(--primary) !important;
        }

    footer p, footer span, footer div {
        color: var(--white) !important;
    }

/* ========================================
   Custom Classes - Casino Games
   ======================================== */

/* Normal: logo rojo, letras blancas */
#casino-game-filters .nav-item .nav-link {
    color: var(--white) !important;
    transition: all 0.3s ease !important;
}

    #casino-game-filters .nav-item .nav-link img, #titleGames img {
        filter: brightness(0) saturate(100%) invert(27%) sepia(91%) saturate(1987%) hue-rotate(340deg) brightness(91%) contrast(97%) !important;
        transition: all 0.3s ease !important;
    }

/* Seleccionado: logo rojo, letras rojas */
#casino-game-filters .nav-item.active .nav-link,
#casino-game-filters .nav-item.active .nav-link span {
    color: var(--secondary) !important;
}

    #casino-game-filters .nav-item.active .nav-link img {
        filter: brightness(0) saturate(100%) invert(27%) sepia(91%) saturate(1987%) hue-rotate(340deg) brightness(91%) contrast(97%) !important;
    }

/* Hover: logo blanco, letras blancas */
#casino-game-filters .nav-item:hover .nav-link,
#casino-game-filters .nav-item:hover .nav-link span {
    color: var(--white) !important;
}

    #casino-game-filters .nav-item:hover .nav-link img,
    #casino-game-filters .nav-item:has(.nav-link.active) img {
        filter: brightness(0) invert(1) !important;
    }

/* Hover: fondo rojo */
#casino-game-filters .nav-item:hover,
#casino-game-filters .nav-item:has(.nav-link.active) {
    background-color: var(--secondary) !important;
    border-radius: 0.2rem;
}

/* Fallback si :has() no funciona */
#casino-game-filters .nav-link.active {
    background-color: var(--secondary) !important;
    border-radius: 0.2rem;
}

/* Active: sin fondo */
#casino-game-filters .nav-item.active {
    background-color: transparent !important;
}

/* ========================================
   Searchbar
   ======================================== */
.searchbar {
    background-color: var(--bg-dark) !important;
}

.search_input {
    color: var(--white) !important;
    caret-color: var(--secondary) !important;
}

.search_icon {
    color: var(--white) !important;
}

.searchbar:hover > .search_icon {
    background-color: var(--white) !important;
    color: var(--secondary) !important;
}

/* ========================================
   Registration Steps - PuntoBet White Background
   ======================================== */
.registro {
    background-color: var(--white) !important; /* White background */
}

    .registro .steps {
        background-color: var(--light) !important; /* Light gray for steps section */
    }

        /* Step text - dark for visibility on white */
        .registro .steps .step-item .text {
            color: var(--dark) !important; /* Dark gray text */
        }

        /* Inactive steps - dark gray */
        .registro .steps .step-item .number {
            background-color: var(--bg-modal) !important;
            border-color: var(--bg-modal) !important;
            color: var(--white) !important;
        }

        /* Active step - PuntoBet red */
        .registro .steps .step-item.active .number {
            background-color: var(--secondary) !important;
            border-color: var(--secondary) !important;
            color: var(--white) !important;
        }

        .registro .steps .step-item.active .text {
            color: var(--secondary) !important; /* Red text for active step */
        }

    .registro .data {
        background-color: var(--white) !important; /* White background for form */
    }

    /* Registration form controls - override focus color */
    .registro .form-control:focus,
    .registro .form-control:hover {
        border-color: var(--navy) !important; /* Navy - not red to avoid error confusion */
        box-shadow: 0 0 0 0.2rem rgba(20, 33, 61, 0.25) !important;
    }

    /* Registration checkboxes - PuntoBet red #EF4D52 */
    .registro input[type="checkbox"]:checked {
        background-color: var(--primary) !important;
        border-color: var(--primary) !important;
    }

    .registro input[type="checkbox"]:focus {
        border-color: var(--primary) !important;
        box-shadow: 0 0 0 0.2rem rgba(239, 77, 82, 0.25) !important;
    }

    .registro .form-check-input:checked {
        background-color: var(--primary) !important;
        border-color: var(--primary) !important;
    }

    /* Registration checkbox labels - dark text */
    .registro .form-check,
    .registro .form-check-label {
        color: var(--dark) !important;
    }

/* ========================================
   Identity Validation - BS Stepper
   ======================================== */
/* Stepper circles - default state */
.step button span.bs-stepper-circle {
    background-color: var(--navy) !important;
    color: var(--white) !important;
}

/* Stepper circles - active state */
.step.active button span.bs-stepper-circle {
    background-color: var(--secondary) !important;
    color: var(--white) !important;
}

/* Stepper lines between circles */
.step:not(:last-child)::after {
    background-color: var(--navy) !important;
}

/* Stepper completed state */
.bs-stepper .step.completed .bs-stepper-circle {
    background-color: transparent !important;
    border: 2px solid var(--secondary) !important;
}

    .bs-stepper .step.completed .bs-stepper-circle::after {
        color: var(--secondary) !important;
    }

.bs-stepper .step.completed:not(:last-child)::after {
    background-color: var(--secondary) !important;
}

/* Dropzone styling */
.dropzone {
    background: var(--bg-dark-alt) !important;
    border-color: var(--secondary) !important;
}

    .dropzone .dz-preview {
        border-color: var(--secondary) !important;
    }

/* Btn-steps (Continuar/Siguiente buttons) */
.btn-steps:not(:disabled) {
    background-color: var(--secondary) !important;
    border-color: var(--secondary) !important;
}

    .btn-steps:not(:disabled):hover,
    .btn-steps:not(:disabled):focus {
        background-color: var(--primary-light) !important;
        border-color: var(--primary-light) !important;
    }

/* Modal validation icons */
.modal-validation-container .check-icon {
    background-color: var(--secondary) !important;
}

/* Dropzone check icon SVG - convert green to red */
.dropzone .dz-preview .check-icon {
    filter: brightness(0) saturate(100%) invert(27%) sepia(91%) saturate(1987%) hue-rotate(340deg) brightness(91%) contrast(97%) !important;
}

/* Success messages can stay green for UX clarity */
.message-modal-body.success .verify-icon {
    background: var(--success) !important;
}

/* Error messages stay red */
.message-modal-body.error .verify-icon {
    background: var(--secondary) !important;
}

/* ========================================
   Identity Validation - BS Stepper
   ======================================== */
/* Stepper circles - default state */
.step button span.bs-stepper-circle {
    background-color: var(--navy) !important;
    color: var(--white) !important;
}

/* Stepper circles - active state */
.step.active button span.bs-stepper-circle {
    background-color: var(--secondary) !important;
    color: var(--white) !important;
}

/* Stepper lines between circles */
.step:not(:last-child)::after {
    background-color: var(--navy) !important;
}

/* Stepper completed state */
.bs-stepper .step.completed .bs-stepper-circle {
    background-color: transparent !important;
    border: 2px solid var(--secondary) !important;
}

    .bs-stepper .step.completed .bs-stepper-circle::after {
        color: var(--secondary) !important;
    }

.bs-stepper .step.completed:not(:last-child)::after {
    background-color: var(--secondary) !important;
}

/* Dropzone styling */
.dropzone {
    background: var(--bg-dark-alt) !important;
    border-color: var(--secondary) !important;
}

    .dropzone .dz-preview {
        border-color: var(--secondary) !important;
    }

/* Btn-steps (Continuar/Siguiente buttons) */
.btn-steps:not(:disabled) {
    background-color: var(--secondary) !important;
    border-color: var(--secondary) !important;
}

    .btn-steps:not(:disabled):hover,
    .btn-steps:not(:disabled):focus {
        background-color: var(--primary-light) !important;
        border-color: var(--primary-light) !important;
    }

/* Modal validation icons */
.modal-validation-container .check-icon {
    background-color: var(--secondary) !important;
}

/* Dropzone check icon SVG - convert green to red */
.dropzone .dz-preview .check-icon {
    filter: brightness(0) saturate(100%) invert(27%) sepia(91%) saturate(1987%) hue-rotate(340deg) brightness(91%) contrast(97%) !important;
}

/* Success messages can stay green for UX clarity */
.message-modal-body.success .verify-icon {
    background: var(--success) !important;
}

/* Error messages stay red */
.message-modal-body.error .verify-icon {
    background: var(--secondary) !important;
}

/* ========================================
   Date Picker
   ======================================== */
/* Datepicker now uses generic neutral colors from SCSS */
/* Override year selector to ensure light background */
.ui-datepicker-year {
    background-color: var(--light) !important; /* Light gray background */
    color: var(--dark) !important; /* Dark text */
    border: 1px solid var(--border-gray) !important; /* Gray border */
}

/* ========================================
   Loading & Spinners
   ======================================== */
.spinner-border {
    border-color: var(--secondary) !important;
    border-right-color: transparent !important;
}

.spinner-grow {
    background-color: var(--secondary) !important;
}

.loader-content .loader-spinner {
    border-top-color: var(--secondary) !important;
}

/* ========================================
   Historial / Panel
   ======================================== */
.historial .awe-header .awe-col {
    color: var(--secondary) !important;
}

.historial .panel-body {
    /*color: var(--white) !important;*/
}

/* ========================================
   Mini Banners
   ======================================== */
.mini-banners .btn {
    background-color: var(--secondary) !important;
    border-color: var(--secondary) !important;
}

/* ========================================
   Tabs
   ======================================== */
.nav-tabs {
    border-bottom-color: var(--secondary) !important;
}

    .nav-tabs .nav-link {
        color: var(--white) !important;
    }

        .nav-tabs .nav-link:hover,
        .nav-tabs .nav-link:focus {
            border-color: var(--secondary) !important;
            color: var(--secondary) !important;
        }

        .nav-tabs .nav-link.active {
            background-color: var(--secondary) !important;
            border-color: var(--secondary) !important;
            color: var(--white) !important;
        }

/* ========================================
   Nav Pills - Tabs Ayuda (Estructura Vertical)
   ======================================== */
#tabs-ayuda .nav-pills {
    display: flex !important;
    flex-direction: column !important;
}

    #tabs-ayuda .nav-pills .nav-link {
        border-radius: 20px !important; /* Píldoras redondeadas */
        padding: 8px 16px !important;
        background-color: var(--bg-dark) !important; /* Gris oscuro PuntoBet */
        color: var(--white) !important; /* Texto blanco */
        margin-bottom: 0.5rem !important;
        border: none !important;
    }

        #tabs-ayuda .nav-pills .nav-link:hover {
            background-color: var(--primary) !important; /* Fondo rojo en hover */
            color: var(--white) !important; /* Texto blanco en hover */
        }

        #tabs-ayuda .nav-pills .nav-link.active {
            background-color: var(--secondary) !important; /* Fondo rojo activo */
            color: var(--white) !important; /* Texto blanco */
        }

/* ========================================
   Tooltip & Popover
   ======================================== */
.tooltip-inner {
    background-color: var(--navy) !important;
    color: var(--white) !important;
}

.bs-tooltip-top .arrow::before {
    border-top-color: var(--navy) !important;
}

.bs-tooltip-bottom .arrow::before {
    border-bottom-color: var(--navy) !important;
}

.popover {
    background-color: var(--bg-dark) !important;
    border-color: var(--secondary) !important;
}

.popover-header {
    background-color: var(--navy) !important;
    border-bottom-color: var(--secondary) !important;
    color: var(--white) !important;
}

.popover-body {
    color: var(--white) !important;
}

/* ========================================
   Carousel
   ======================================== */
.carousel-control-prev,
.carousel-control-next {
    color: var(--white) !important;
}

    .carousel-control-prev:hover,
    .carousel-control-next:hover {
        color: var(--secondary) !important;
    }

.carousel-indicators li {
    background-color: rgba(255, 255, 255, 0.5) !important;
}

.carousel-indicators .active {
    background-color: var(--secondary) !important;
}

/* ========================================
   Custom Scrollbar (Webkit) - Grises Neutros
   ======================================== */
::-webkit-scrollbar {
    width: 12px !important;
    background-color: #f1f1f1 !important;
}

::-webkit-scrollbar-track {
    background-color: #f1f1f1 !important;
}

::-webkit-scrollbar-thumb {
    background-color: #888 !important;
    border-radius: 6px !important;
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: #555 !important;
    }

/* ========================================
   Text Selection
   ======================================== */
::selection {
    background-color: var(--secondary) !important;
    color: var(--white) !important;
}

::-moz-selection {
    background-color: var(--secondary) !important;
    color: var(--white) !important;
}

/* ========================================
   Border Colors
   ======================================== */
.border-primary {
    border-color: var(--secondary) !important;
}

.border-secondary {
    border-color: var(--navy) !important;
}

/* ========================================
   Special Casino Elements
   ======================================== */
.grilla-juegos .juego .container-info-fav .fav.active:before {
    color: var(--secondary) !important;
}

/* Image Error Fallback - Casino Games */
.juego.img-error .picture,
.game.img-error .picture,
.juego .picture.img-error,
.game .picture.img-error {
    background: linear-gradient(135deg, var(--navy) 0%, var(--bg-dark) 50%, var(--navy) 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 180px !important;
    aspect-ratio: 4/3 !important;
    border-radius: 8px !important;
    border: 1px solid var(--bg-dark-alt) !important;
    position: relative !important;
}

    .juego.img-error .picture::before,
    .game.img-error .picture::before,
    .juego .picture.img-error::before,
    .game .picture.img-error::before {
        content: "\f11b" !important;
        font-family: "Font Awesome 5 Free" !important;
        font-weight: 900 !important;
        font-size: 48px !important;
        color: var(--secondary) !important;
        opacity: 0.6 !important;
    }

    .juego.img-error .picture img,
    .game.img-error .picture img,
    .juego .picture.img-error img,
    .game .picture.img-error img {
        display: none !important;
    }

/* Image Error - Show game info always */
.juego.main-div.img-error .container-info-fav {
    opacity: 1 !important;
    visibility: visible !important;
    background: transparent !important;
}

    .juego.main-div.img-error .container-info-fav .info {
        opacity: 1 !important;
        visibility: visible !important;
    }

        .juego.main-div.img-error .container-info-fav .info .title,
        .juego.main-div.img-error .container-info-fav .info .data {
            opacity: 1 !important;
            visibility: visible !important;
        }

        /* Hide button until hover */
        .juego.main-div.img-error .container-info-fav .info .btn-play,
        .juego.main-div.img-error .container-info-fav .info .btn-play-demo {
            opacity: 0 !important;
            visibility: hidden !important;
            transition: all 0.3s ease !important;
        }

/* On hover: show button and background */
.juego.main-div.img-error:hover .container-info-fav {
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 50%, transparent 100%) !important;
}

    .juego.main-div.img-error:hover .container-info-fav .info .btn-play,
    .juego.main-div.img-error:hover .container-info-fav .info .btn-play-demo {
        opacity: 1 !important;
        visibility: visible !important;
    }

/* Home Carousel Buttons */
#homeCarousel .btn {
    background-color: var(--secondary) !important;
    color: var(--white) !important;
}

    #homeCarousel .btn:hover {
        background-color: var(--primary-light) !important;
    }

/* ========================================
   Botones "Ver Más" - General
   ======================================== */
.showall {
    color: var(--dark) !important; /* Texto negro sobre fondo blanco */
    text-decoration: none !important;
}

    .showall:hover {
        color: var(--secondary) !important;
    }

    .showall .text {
        color: inherit !important;
    }

    .showall span {
        color: var(--primary) !important; /* Número en rojo */
    }

    .showall i {
        color: var(--primary) !important; /* Ícono en rojo */
    }

    .showall:hover span,
    .showall:hover i {
        color: var(--dark) !important; /* En hover, número e ícono en negro */
    }

/* ========================================
   Additional Overrides
   ======================================== */
.text-muted {
    color: var(--text-muted-light) !important;
}

.text-uppercase {
    text-transform: uppercase !important;
}

hr {
    border-color: var(--secondary) !important;
}

/* Black & White utility overrides */
.black,
.bg-black {
    background-color: var(--navy) !important;
    color: var(--white) !important;
}

.white,
.bg-white {
    background-color: var(--white) !important;
    color: var(--navy) !important;
}

.navbar-dark .navbar-brand {
    padding-left: 20px !important;
    min-height: 65px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.navbar-brand img {
    min-width: 0px !important;
    max-width: 180px;
}

@media screen and (max-width: 767px) {
    .navbar-brand img {
        min-width: auto !important;
        max-width: 80px !important;
        object-fit: contain;
    }
}


/* ========================================
   Barra de Categorías y Marcas - Degradado
   Efecto "Foco de Luz" Central Simétrico
   ======================================== */
#actionbar-left {
    background: linear-gradient( 90deg, var(--gradient-dark) 0%, var(--gradient-accent) 35%, var(--gradient-accent-highlight) 50%, var(--gradient-accent) 65%, var(--gradient-dark) 100% ) !important;
}

/* ========================================
   Last Login Alert - Tema PuntoBet
   ======================================== */
.last-login {
    background-color: var(--bg-dark) !important;
    border: 1px solid var(--primary) !important;
    color: var(--white) !important;
}

.last-login-icon {
    color: var(--primary) !important;
}

/* Alert de sesión con mismo estilo */
.alert-time-session {
    background-color: var(--bg-dark) !important;
    border: 1px solid var(--primary) !important;
    color: var(--white) !important;
}

.owl-carousel .owl-item img {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
}

/* ========================================
   Providers/Brands Carousel - White Filter
   ======================================== */
#providers-slider .owl-item,
.slider-providers .owl-item {
    padding: 0 0.3rem !important;
}

    #providers-slider .owl-item img,
    .slider-providers .owl-item img {
        filter: brightness(0) invert(1) !important;
        opacity: 0.6 !important;
        transition: all 0.3s ease !important;
    }

    #providers-slider .owl-item:hover img,
    .slider-providers .owl-item:hover img {
        filter: brightness(1) invert(0) !important;
        opacity: 1 !important;
        transform: scale(1.05) !important;
    }

.ayuda-carousel .owl-nav button {
    background-color: var(--secondary) !important;
}

.card-title.text-primary, h1, h2, h3, h4, ol li, ol li > span {
    color: var(--black) !important;
}

.modal-content .card-title.text-primary,
.modal-content h1,
.modal-content h2,
.modal-content h3,
.modal-content h4 {
    color: var(--white) !important;
}


@media (min-width: 1200px) {
    .navbar-expand-xl .navbar-nav {
        gap: 0.5rem;
    }
}

/* ========================================
   Copy Button - PuntoBet Theme
   ======================================== */
.copy-btn {
    margin-left: 10px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    background-color: var(--primary) !important; /* Rojo PuntoBet */
    color: var(--white) !important;
    border: none !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

    .copy-btn:hover {
        background-color: var(--primary-hover) !important;
        color: var(--black) !important; /* Texto negro en hover */
        transform: scale(1.05) !important;
    }

    .copy-btn:active {
        transform: scale(0.95) !important;
    }

    .copy-btn i {
        margin-right: 4px !important;
    }

.site-main {
    padding-top: 4rem;
    padding-bottom: 2rem;
}

/* ========================================
   Bonus Code Section - Canjea tu código
   ======================================== */
.bonus-code-container {
    border-color: var(--primary) !important; /* Rojo PuntoBet en lugar de verde */
    background-color: var(--white) !important;
}

.bonus-code-container h5 {
    color: var(--dark) !important;
}

.bonus-code-container .fa-gift,
.bonus-code-container img[alt="gift icon"] {
    filter: brightness(0) saturate(100%) invert(27%) sepia(91%) saturate(1987%) hue-rotate(340deg) brightness(91%) contrast(97%) !important; /* Filtro rojo PuntoBet */
}

.bonus-code-container .btn-success {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--white) !important;
}

.bonus-code-container .btn-success:hover,
.bonus-code-container .btn-success:focus {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    color: var(--black) !important;
}

.bonus-code-container .form-control:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(239, 77, 82, 0.25) !important;
}

/* ========================================
   FIX: Problemas de Contraste en Registro
   Fecha: 2026-01-06
   ======================================== */

/* 1. Modal de verificación de email - botón cortado */
#modalLoader .modal-body {
    padding: 2rem 2rem 2.5rem 2rem !important;
}

#modalLoader .modal-content {
    overflow: visible !important;
}

/* Modal de email verificado */
#emailVerifiedModal .modal-content {
    overflow: visible !important;
}

#emailVerifiedModal .modal-footer {
    padding: 1rem 1.5rem 1.5rem 1.5rem !important;
}

#emailVerifiedModal .modal-footer .btn {
    min-width: 120px;
    padding: 10px 20px;
}

/* 2. Panel de datos previos (.panel-default) - mejorar contraste sobre fondo gris oscuro */
.registro .panel-default .form-group .data-label,
.registro .panel-default .form-group label {
    color: #adb5bd !important;  /* Gris claro para labels - buen contraste sobre #343a40 */
}

.registro .panel-default .form-group span:not(.spinner-border):not(.checkmark) {
    color: #E4313E !important;  /* Rojo de la operación - excelente contraste sobre gris oscuro */
}

/* 3. Botón Adjuntar archivo - asegurar visibilidad */
.registro .file-upload-btn {
    background-color: #343a40 !important;
    color: #ffffff !important;
    border: 1px solid #6c757d !important;
}

.registro .file-upload-btn:hover {
    background-color: #495057 !important;
    color: #ffffff !important;
    border-color: #E4313E !important;
}

.registro .file-upload-btn .upload-text {
    color: #ffffff !important;
}

/* 4. Textos descriptivos en formularios de registro */
.registro .title-data-address-register {
    color: #212529 !important;
}

.registro .col-12 > p,
.registro .col-md-12 > p {
    color: #495057 !important;
}

/* 5. Labels dentro de file-upload */
.registro .file-upload-container label {
    color: #212529 !important;
}

/* 6. Small tags y notas */
.registro small,
.registro .form-group small {
    color: #6c757d !important;
}

/* 7. Modales genéricos de registro - asegurar texto visible */
.registro .modal-content .modalTextDialog {
    color: #ffffff !important;
}

/* 8. Info de archivo cargado */
.registro .file-info {
    color: #495057 !important;
}

.registro .file-name {
    color: #495057 !important;
}

/* 9. Tooltip de consejos de seguridad - título visible sobre fondo negro */
.registro .tooltip-content h4,
.tooltip-content h4 {
    color: #ffffff !important;
}