:root{
    --off:#F2F2F2;
    --gold:#9D916B;
    --hair:rgba(242,242,242,.14);
    --mut:rgba(242,242,242,.55);
}

/* 1. Forzamos el fondo en los contenedores raíz */
html, body {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
    background-color: #000000 !important;
    color: #ffffff;
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

body.bg-gray {
    background-color: #f0eded !important;
    color: #000; /* opcional, si el texto debe ser oscuro */
}

/* El fondo negro se aplica al contenedor y a CUALQUIER cosa que viva dentro de él */
.container {
    background-color: #000000;
    color: #ffffff;
}

.container-white {
    background-color: #ffffff;
    color: #000000;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.calendar-row {
    height: 60px;
}

.calendar-cell {
    font-family: 'Montserrat', sans-serif;
    font-size : 18px;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.card.card-white {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #ddd !important;
}

.card.card-gray {
    background-color: #a3a0a0 !important;
    color: #000000 !important;
    border: 1px solid #ddd !important;
}

.main-header {
    position: sticky;
    top: 0; /* Se queda fijo al llegar al borde superior */
    background-color: #000000;
    padding-top: 10px;
    padding-left: 10px;
    color: white;
    z-index: 1000;
  }

.main-header-gray {
    position: sticky;
    top: 0; /* Se queda fijo al llegar al borde superior */
    background-color: #a3a0a0 !important;
    padding-top: 10px;
    padding-left: 10px;
    color: white;
    z-index: 1000;
  }
  /* Con sticky no sueles necesitar padding extra en el body */

.fuente-pasos-compra {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    color : #a3a0a0 !important;
    font-weight: 400;
    text-transform: uppercase;
    padding-top: 5px;
}

.paso-compra-activo {
    font-family: 'Montserrat', sans-serif;
    color: #000000;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    padding-top: 5px;
}

/* Forzamos combinando .btn y .btn-custom para ganarle a Bootstrap */
button.btn.btn-custom {
    background-color: #9c8956 !important;
    border-color: #9c8956 !important;
    color: #ffffff !important;
    max-width: 100%; /* Asegura que sea responsive en pantallas móviles */
}

/* Efecto al pasar el mouse */
button.btn.btn-custom:hover, 
button.btn.btn-custom:focus, 
button.btn.btn-custom:active {
    background-color: #7c6d43 !important;
    border-color: #7c6d43 !important;
    color: #ffffff !important;
    box-shadow: none !important; /* Quita el brillo azul/negro por defecto de Bootstrap */
}

.btn{
    display:block;
    width:100%;
    text-align:center;
    padding:15px;
    border-radius:6px;
    font-size:11.5px;
    letter-spacing:1.8px;
    text-transform:uppercase;
    font-weight:600;
    cursor:pointer;
    border:none;
    font-family:inherit;
}

.btn-primary{
    background:var(--off) !important;
    color:#0a0a0a !important;
}

.btn-ghost{
    background:transparent;
    color:var(--off);
    border:1px solid rgba(242,242,242,.22);
    font-weight:500;
}

.btn-ghost:hover,
.btn-ghost:focus,
.btn-ghost:active{
    background: transparent;
    color: var(--off) !important;
    border-color: rgba(242,242,242,.22);
}

/* Forzamos a que las tarjetas se adapten a tu paleta oscura */
.card {
    background-color: #000000 !important; /* Un gris casi imperceptible sobre tu fondo */
    border: 1px solid rgba(242,242,242,.07) !important; /* Borde sutil oscuro */
    color: #ffffff !important;
}

.card-body {
    background-color: transparent !important;
}

/* De paso, reparamos cualquier miniatura de imagen dentro del contenedor */
#contenedor_listening_sessions .img-thumbnail {
    background-color: transparent !important;
    border: 1px solid #555 !important;
}

.form-control,
.form-select{
    background-color:rgba(255,255,255,.04) !important;
    border:1px solid var(--hair);
    border-radius:6px;
    color:var(--off);
    font-family:inherit;
    font-size:14px;
    padding:13px 14px;
    outline:none;
    transition:border-color .15s, box-shadow .15s;
}

.form-control-white {
    background-color: #fff !important;
    color: #000 !important;
    border: 1px solid #ced4da;
}

.form-select-white {
    background-color: #fff !important;
    color: #000 !important;
    border: 1px solid #ced4da;
}

.form-select-auto {
    width: auto;
    flex: 0 0 auto;
    padding-right: 2.25rem; /* espacio para la flecha */
}

.form-control.form-control-white::placeholder {
    color: #6c757d !important;
    opacity: 1;
}

.form-select::placeholder {
    color: #6c757d !important;
    opacity: 1;
}

.form-control::placeholder{
    color:rgba(242,242,242,.3) !important;
}

input.form-control:focus,
textarea.form-control:focus,
select.form-control:focus {
    border-color:var(--gold) !important;
    color:var(--off) !important;
    box-shadow:0 0 0 3px rgba(157,145,107,.22) !important;
}

.form-control.form-control-white:focus {
    color: #000 !important;
    background-color: #fff !important;
}

.form-select.form-select-white:focus {
    color: #000 !important;
    background-color: #fff !important;
}

/* Texto escrito dentro del input */
.form-floating > .form-control{
    background-color: transparent;
    color: #000000;
    background-color: #ffffff;
    border: 1px solid #fff;
}

/* Color del placeholder */
.form-floating > .form-control::placeholder{
    color: transparent;
}

/* Label flotante */
.form-floating > label{
    color: #000000;
}

/* Cuando el input tiene foco */
.form-floating > .form-control:focus{
    background-color: transparent;
    color: #000000;
    background-color: #ffffff;
    border-color: #fff;
    box-shadow: none;
}

.select-dark {
    background-color: #1f1f1e;
    color: #fff;
    border: 1px solid #fff;
}

.select-dark:focus {
    background-color: #1f1f1e;
    color: #fff;
    border-color: #fff;
    box-shadow: 0 0 0 0.25rem rgba(255,255,255,.25);
}

.card.borde-gris {
    border-color: rgba(255, 255, 255, 0.2) !important; /* Equivalente al color de border-light */
}

.titulo-card {
    color: #9c8956 !important;
}

/* Aplica el filtro oscuro a cualquier iframe dentro de tu contenedor */
#contenedor_mapa_sala {
    filter: invert(90%) hue-rotate(180deg) brightness(85%) contrast(90%);
    border: 0;
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 15px;
    overflow: hidden;
    cursor : pointer;
}

.btn-horario-inscripcion {
    border: 1px solid #6c757d;
    color: #6c757d;
    background-color: #000000;
}

.btn-check:checked + .btn-horario-inscripcion {
    background-color: #9c8956;
    color: #fff;
}

.list-dark .list-group-item {
    background-color: #000000;
    color: #eaeaea;
    border-color: #2a2a2a;
}