/* Filtros compactos */
.toolbar-compact .input-group-text {
    padding: .25rem .5rem;
    border-color: #495057;
}

.toolbar-compact .form-control-sm,
.toolbar-compact .form-select-sm {
    padding: .25rem .5rem;
    height: calc(1.5em + .5rem + 2px);
}

.toolbar-compact .form-check-input {
    transform: scale(.9);
}

/* Placeholders visibles en inputs oscuros */
.form-control.bg-dark::placeholder,
.form-select.bg-dark::placeholder {
    color: #adb5bd;
    opacity: 1;
}

/* Compatibilidad */
.form-control.bg-dark::-webkit-input-placeholder {
    color: #adb5bd;
    opacity: 1;
}

.form-control.bg-dark:-ms-input-placeholder {
    color: #adb5bd;
}

/* ===== Mobile ===== */
@media (max-width: 767.98px) {

    /* menos separación entre controles */
    .toolbar-compact .row {
        row-gap: .5rem;
    }

    /* full-bleed del bloque circuito */
    .col-lg-9>.card-x3.bloque-circuito {
        margin-left: -12px;
        margin-right: -12px;
        padding-left: 8px;
        padding-right: 8px;
        border-radius: 0;
    }

    /* fila sin gutters */
    .contenedor-torneos {
        margin-left: 0;
        margin-right: 0;
    }

    .contenedor-torneos>[class*="col-"] {
        padding-left: 0;
        padding-right: 0;
    }

    /* imagen / layout */
    .d-flex.flex-row-reverse[style*="max-height"] {
        max-height: none !important;
    }

    .item-torneo img {
        width: 100%;
        height: auto;
        object-fit: cover;
        display: block;
    }

    /* cards y botones más cómodos */
    .item-torneo .d-flex.h-100 {
        border-radius: 14px;
    }

    .item-torneo .p-3 {
        padding: .75rem !important;
    }

    .item-torneo h5 {
        margin-bottom: .25rem;
    }

    .item-torneo .btn {
        width: 100%;
    }
}

/* ===== Desktop ===== */
@media (min-width: 768px) {
    .item-torneo .d-flex.h-100 {
        min-height: 100%;
    }
}

/*---------------------------------------------------- ESTILOS HERO -----------------------------------------*/

:root {
    --x3green: #bee967;
    --x3bg-dark: #0e0e0e;
}

/* ===== HERO ===== */
.hero-torneos {
    position: relative;
    min-height: 360px;
    display: flex;
    align-items: center;
    isolation: isolate;
    /* para overlay */
}

.hero-torneos .hero-bg {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    z-index: -2;
}

.hero-torneos::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .65));
    backdrop-filter: blur(2px);
    z-index: -1;
}

.hero-inner {
    width: 100%;
    max-width: 980px;
    margin-inline: auto;
    padding: 32px 0;
}

.hero-title {
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
    margin-bottom: .25rem;
}

.hero-subtitle {
    opacity: .9;
    margin-bottom: .75rem;
}

/* Toolbar (volver a inicio) */
.hero-toolbar {
    margin-bottom: .5rem;
}

.btn-hero-outline {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .6);
    background: transparent;
    border-radius: 999px;
    padding: .35rem .9rem;
    font-weight: 700;
}

.btn-hero-outline:hover {
    background: rgba(255, 255, 255, .08);
}

/* CTAs principales */
.hero-cta-grid {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
}

.btn-hero,
.btn-hero-alt {
    border-radius: 999px;
    padding: .6rem 1rem;
    font-weight: 800;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .25);
}

/* Primario */
.btn-hero {
    color: #0b0d0f;
    background: linear-gradient(180deg, #c9f57c, #b4e45a);
    border: 1px solid rgba(190, 233, 103, .65);
}

.btn-hero:hover {
    filter: brightness(1.02);
}

/* Secundario (tinte del verde) */
.btn-hero-alt {
    color: #e8ffd0;
    background: rgba(190, 233, 103, .16);
    border: 1px solid rgba(190, 233, 103, .45);
}

.btn-hero-alt:hover {
    background: rgba(190, 233, 103, .22);
}

/* ===== Responsive ===== */
@media (min-width:768px) {
    .hero-torneos {
        min-height: 420px;
    }

    .hero-cta-grid {
        grid-template-columns: 1fr 1fr;
        gap: .6rem;
    }
}

/* === Botones hero más chicos en mobile === */
@media (max-width: 767.98px) {
    .hero-inner {
        padding: 20px 0;
    }

    .hero-title {
        font-size: 1.6rem;
    }

    .hero-subtitle {
        font-size: .95rem;
    }

    .hero-cta-grid {
        max-width: 480px;
        gap: .4rem;
    }

    .btn-hero,
    .btn-hero-alt {
        padding: .48rem .8rem;
        /* antes .6rem 1rem */
        font-size: .95rem;
        /* ↓ tamaño texto */
        border-radius: 12px;
        /* menos “pill”, más compacto */
        box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
    }

    .btn-hero i,
    .btn-hero-alt i {
        font-size: 1rem;
        margin-right: .35rem;
    }

    /* Botón "← Inicio" aún más discreto */
    .btn-hero-outline {
        padding: .3rem .7rem;
        font-size: .9rem;
    }
}

/* Ultra-compacto para teléfonos muy angostos */
@media (max-width: 360px) {
    .hero-title {
        font-size: 1.4rem;
    }

    .btn-hero,
    .btn-hero-alt {
        padding: .42rem .7rem;
        font-size: .9rem;
        border-radius: 10px;
    }
}