html.dark {
    color-scheme: dark;
}



html.dark body {
    background-color: #0F1726 !important;
    color: #E8EDF5;
}


html.dark .bg-white {
    background-color: #182235 !important;
}


html.dark .bg-gris-claro {
    background-color: #101827 !important;
}


html.dark .border-gris-borde,
html.dark .ring-gris-borde {
    border-color: #2D3A50 !important;
}


html.dark .text-marino {
    color: #E8EDF5 !important;
}



html.dark .text-marino\/70 {
    color: rgba(232, 237, 245, 0.70) !important;
}

html.dark .text-marino\/60 {
    color: rgba(232, 237, 245, 0.60) !important;
}

html.dark .text-marino\/55 {
    color: rgba(232, 237, 245, 0.65) !important;
}

html.dark .text-marino\/50 {
    color: rgba(232, 237, 245, 0.50) !important;
}

html.dark .text-marino\/45 {
    color: rgba(232, 237, 245, 0.55) !important;
}

html.dark .text-marino\/40 {
    color: rgba(232, 237, 245, 0.40) !important;
}


html.dark .hover\:bg-gris-claro:hover {
    background-color: #202C40 !important;
}


html.dark .shadow-card {
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.28) !important;
}



/* =========================================================
   HEADER
   ========================================================= */

html.dark header {
    background-color: rgba(23, 34, 53, 0.94) !important;
    border-color: #2B3A50 !important;
}

html.dark header .text-marino {
    color: #E8EDF5 !important;
}

html.dark header .text-marino\/70 {
    color: rgba(232, 237, 245, 0.70) !important;
}


html.dark header nav a.text-marino\/80 {
    color: #F1F5F9 !important;
}


html.dark header nav a.text-marino\/80:hover {
    color: #FFFFFF !important;
    background-color: #26364D !important;
}

html.dark header .hover\:bg-gris-claro:hover {
    background-color: #202C40 !important;
}

html.dark header .hover\:text-marino:hover {
    color: #FFFFFF !important;
}

html.dark header #btn-menu-movil {
    color: #F1F5F9 !important;
}

html.dark header #btn-menu-movil:hover {
    background-color: #26364D !important;
}

html.dark header #menu-movil {
    background-color: #172235 !important;
    border-color: #2B3A50 !important;
}

html.dark header #menu-movil a {
    color: #F1F5F9 !important;
}

html.dark header #menu-movil a:hover {
    color: #FFFFFF !important;
    background-color: #26364D !important;
}



/* =========================================================
   LOGO
   ========================================================= */

html.dark .logo-sjl-claro {
    opacity: 0;
}

html.dark .logo-sjl-oscuro {
    opacity: 1;
}



/* =========================================================
   SWITCH DE TEMA
   ========================================================= */

html.dark .switch-tema {
    background-color: #0B1F3A;
    box-shadow:
        inset 0 0 0 1px #3A4A61;
}

html.dark .switch-tema-circulo {
    left: 29px;
}

html.dark .switch-tema-sol {
    opacity: 0.55;
}

html.dark .switch-tema-luna {
    opacity: 1;
}



/* =========================================================
   DASHBOARD
   ========================================================= */

html.dark .min-h-screen.bg-gris-claro {
    background-color: #0F1726 !important;
}


html.dark .rounded-2xl.bg-white {
    background-color: #172235 !important;
    border-color: #2B3A50 !important;
}


html.dark .rounded-2xl.bg-white {
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.22) !important;
}


html.dark .rounded-2xl.bg-white .text-marino {
    color: #F1F5F9 !important;
}


html.dark .rounded-2xl.bg-white .text-marino\/70 {
    color: #AAB7C9 !important;
}

html.dark .rounded-2xl.bg-white .text-marino\/60 {
    color: #AAB7C9 !important;
}

html.dark .rounded-2xl.bg-white .text-marino\/50 {
    color: rgba(170, 183, 201, 0.75) !important;
}

html.dark .rounded-2xl.bg-white .text-marino\/40 {
    color: rgba(170, 183, 201, 0.60) !important;
}


html.dark .rounded-2xl.bg-white .border-gris-borde {
    border-color: #2B3A50 !important;
}


html.dark .rounded-2xl.bg-white.ring-1 {
    --tw-ring-color: #2B3A50 !important;
}



/* =========================================================
   ESTADÍSTICAS — DÍAS DE MAYOR DEMANDA
   ========================================================= */

html.dark .estadistica-dia-demanda {
    background: #1B2940 !important;
    border-color: #2D4566 !important;
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.18) !important;
}


html.dark .estadistica-dia-demanda .text-marino\/50,
html.dark .estadistica-dia-demanda .text-marino\/40,
html.dark .estadistica-dia-demanda .text-marino\/60 {
    color: #94A3B8 !important;
}


html.dark .estadistica-dia-demanda .text-marino {
    color: #F1F5F9 !important;
}


html.dark .estadistica-dia-demanda-total {
    color: #CBD5E1 !important;
}



/* =========================================================
   ESTADÍSTICAS — HORARIOS
   ========================================================= */

html.dark .horario-frecuente-sucursal {
    background: #1B2940 !important;
    border-color: #2B3A50 !important;
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.18) !important;
}


html.dark .horario-frecuente-sucursal .text-marino {
    color: #F1F5F9 !important;
}


/* Textos secundarios */

html.dark .horario-frecuente-sucursal .text-marino\/50,
html.dark .horario-frecuente-sucursal .text-marino\/60 {
    color: #94A3B8 !important;
}


/* Fondo de las barras */

html.dark .horario-frecuente-barra-fondo,
html.dark .horario-frecuente-sin-datos {
    background: #2A374B !important;
}


/* Información de las barras */

html.dark .horario-frecuente-total {
    color: #CBD5E1 !important;
}

html.dark .horario-frecuente-dia {
    color: #CBD5E1 !important;
}

html.dark .horario-frecuente-hora {
    color: #F8FAFC !important;
    background: #0B1F3A !important;
}



/* =========================================================
   CÓMO FUNCIONA — INICIO
   ========================================================= */

html.dark .text-marino\/65 {
    color: rgba(255, 255, 255, 0.68) !important;
}



/* =========================================================
   CONTACTO — WHATSAPP
   ========================================================= */

html.dark .bg-green-50 {
    background-color: #102C24 !important;
}

html.dark .ring-green-100 {
    --tw-ring-color: #1D5A49 !important;
}

html.dark .text-green-800 {
    color: #FFFFFF !important;
}

html.dark .text-green-700 {
    color: #FFFFFF !important;
}

html.dark .ring-green-200 {
    --tw-ring-color: #2A735E !important;
}

html.dark a.bg-white.text-green-700 {
    background-color: #183A31 !important;
    color: #FFFFFF !important;
}

html.dark a.bg-white.text-green-700:hover {
    background-color: #225044 !important;
}

/* =========================================================
   MÉDICOS — INFORMACIÓN IMPORTANTE
   ========================================================= */

html.dark .bg-yellow-50,
html.dark .bg-amber-50 {
    background-color: #43302397 !important;
    color: #F8FAFC !important;
}

html.dark .bg-yellow-50 *,
html.dark .bg-amber-50 * {
    color: #F8FAFC !important;
}


/* =========================================================
   MÉDICOS — CAMPOS DEL FORMULARIO
   ========================================================= */

html.dark input,
html.dark textarea,
html.dark select {
    background-color: #e8edf513 !important;
    color: #0F1726 !important;
    border-color: #CBD5E1 !important;
}

/* Placeholder */
html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #64748B !important;
    opacity: 1 !important;
}

/* Campos al seleccionarlos */
html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
    color: #fff !important;
    border-color: #F26A21 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(242, 106, 33, 0.20) !important;
}

/* =========================================================
   LOGIN — LOGO
   ========================================================= */

html.dark .logo-login-claro {
    opacity: 0;
}

html.dark .logo-login-oscuro {
    opacity: 1;
}

/* =========================================================
   PANEL ADMINISTRATIVO — LOGO
   ========================================================= */

html.dark .logo-admin-claro {
    opacity: 0;
}

html.dark .logo-admin-oscuro {
    opacity: 1;
}

.logo-admin-oscuro {
    transform: scale(0.78);
}

/* =========================================================
   TABLA DE SOLICITUDES MÉDICAS — MODO OSCURO
   ========================================================= */

/* Médico */
html.dark #tabla-citas .text-marino\/80 {
    color: #F1F5F9 !important;
}


/* Hover de las filas
   Se mantiene muy sutil para no iluminar demasiado la tabla */
html.dark #tabla-citas tr:hover {
    background-color: rgba(255, 255, 255, 0.077) !important;
}


/* Botón Editar */
html.dark #tabla-citas button.bg-blue-50.text-blue-700 {
    background-color: #1D3557 !important;
    color: #fff !important;
    --tw-ring-color: #31577F !important;
}

html.dark #tabla-citas button.bg-blue-50.text-blue-700:hover {
    background-color: #264568 !important;
    color: #B8DDFF !important;
}


/* Botón Rechazar */
html.dark #tabla-citas button.bg-red-50.text-red-700 {
    background-color: #3A2026 !important;
    color: #Fff !important;
    --tw-ring-color: #713842 !important;
}

html.dark #tabla-citas button.bg-red-50.text-red-700:hover {
    background-color: #4A272E !important;
    color: #FFAAAA !important;
}


/* =========================================================
   ESTADOS — RECHAZADO Y CANCELADO
   ========================================================= */

/* Rechazado */
html.dark #tabla-citas .bg-red-50.text-red-700 {
    background-color: #3A2026 !important;
    color: #fff !important;
    --tw-ring-color: #713842 !important;
}

/* Cancelado */
html.dark #tabla-citas .bg-gray-100.text-gray-600 {
    background-color: #303B4D !important;
    color: #fff !important;
    --tw-ring-color: #4A586D !important;
}

/* =========================================================
   MODAL DE DETALLE DE CITA — MODO OSCURO
   ========================================================= */

/* Campos donde se muestra la información */
html.dark #modal-cita .bg-gray-50 {
    background-color: #e5e7eb1f !important;
    color: #0F1726 !important;
}

/* Títulos de cada campo */
html.dark #modal-cita .text-gray-600 {
    color: #CBD5E1 !important;
}

/* Texto de los valores */
html.dark #modal-cita [data-campo] {
    color: #fff !important;
}

/* Campos cuando la cita está en edición */
html.dark #modal-cita input,
html.dark #modal-cita textarea,
html.dark #modal-cita select {
    background-color: #e5e7eb2b !important;
    color: #fff !important;
    border-color: #CBD5E1 !important;
}

html.dark #modal-cita input::placeholder,
html.dark #modal-cita textarea::placeholder {
    color: #e8edf513 !important;
}

/* Estado focus de los campos */
html.dark #modal-cita input:focus,
html.dark #modal-cita textarea:focus,
html.dark #modal-cita select:focus {
    color: #fff !important;
    border-color: #F26A21 !important;
    box-shadow: 0 0 0 2px rgba(242, 106, 33, 0.20) !important;
}

/* =========================================================
   MODAL — RESUMEN SUPERIOR
   ========================================================= */

html.dark #modal-cita .bg-gray-100 {
    background-color: rgba(229, 231, 235, 0.10) !important;
    border: 1px solid rgba(255, 255, 255, 0.251) !important;
}

/* Títulos: Sucursal, Fecha, Hora, Estatus */
html.dark #modal-cita .bg-gray-100 .text-gray-500 {
    color: #FFFFFF !important;
}

/* Valores */
html.dark #modal-cita .bg-gray-100 [data-campo] {
    color: #FFFFFF !important;
}

/* =========================================================
   MODAL DE DETALLE — BOTONES
   ========================================================= */

/* Cerrar */
html.dark #acciones-modal button[data-cerrar="modal-cita"] {
    background-color: transparent !important;
    color: #F1F5F9 !important;
    border-color: #CBD5E1 !important;
}

html.dark #acciones-modal button[data-cerrar="modal-cita"]:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #FFFFFF !important;
}


/* Botones naranjas */
html.dark #acciones-modal .bg-naranja {
    color: #FFFFFF !important;
}


/* Guardar cambios */
html.dark #acciones-modal #modal-btn-guardar {
    background-color: #26364D !important;
    color: #F1F5F9 !important;
}

html.dark #acciones-modal #modal-btn-guardar:hover {
    background-color: #334862 !important;
    color: #FFFFFF !important;
}


/* Rechazar */
html.dark #acciones-modal #modal-btn-rechazar {
    background-color: #0B1F3A !important;
    color: #FFFFFF !important;
    border: 1px solid #2D4566 !important;
}

html.dark #acciones-modal #modal-btn-rechazar:hover {
    background-color: #13294F !important;
    color: #FFFFFF !important;
    border-color: #3A587D !important;
}


/* Cancelar cita */
html.dark #acciones-modal #modal-btn-cancelar {
    background-color: #3A2026 !important;
    color: #FFB4B4 !important;
}

html.dark #acciones-modal #modal-btn-cancelar:hover {
    background-color: #4A272E !important;
    color: #FFFFFF !important;
}

/* =========================================================
   SELECTS — MODO OSCURO
   ========================================================= */

/* Select cerrado */
html.dark select {
    background-color: #263246 !important;
    color: #d9e1e8 !important;
    border-color: #64748B !important;
    color-scheme: dark;
}

/* Opciones del select */
html.dark select option {
    background-color: #263246 !important;
    color: #F8FAFC !important;
}

/* Opciones deshabilitadas */
html.dark select option:disabled {
    background-color: #1E293B !important;
    color: #94A3B8 !important;
}

/* Select cuando tiene el foco */
html.dark select:focus {
    background-color: #2D3A50 !important;
    color: #FFFFFF !important;
    border-color: #F26A21 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(242, 106, 33, 0.20) !important;
}

/* =========================================================
   MODAL RECHAZAR — ADVERTENCIA
   ========================================================= */

html.dark .bg-red-50 {
    background-color: rgba(127, 29, 29, 0.22) !important;
}

html.dark .text-red-700 {
    color: #FFB4B4 !important;
}

html.dark .ring-red-200 {
    --tw-ring-color: #7F3B44 !important;
}

/* =========================================================
   MODAL DE CONFIRMACIÓN — EVITAR SELECCIÓN ACCIDENTAL
   ========================================================= */

#modal-cancelar .rounded-3xl {
    user-select: none;
}

#modal-cancelar select,
#modal-cancelar textarea,
#modal-cancelar input {
    user-select: auto;
}

/* Modal cancelar/rechazar - icono de advertencia */
html.dark #modal-cancelar .bg-red-100 {
    background-color: #3A2026 !important;
}

html.dark #modal-cancelar .bg-red-100 span {
    color: #FF8A8A !important;
}

/* Botón "Sí, rechazar solicitud" - mismo diseño que Rechazar de la tabla */
html.dark #modal-cancelar #btn-confirmar-cancelar {
    background-color: #3A2026 !important;
    color: #FFFFFF !important;
    border: 1px solid #713842 !important;
    --tw-ring-color: #713842 !important;
}

html.dark #modal-cancelar #btn-confirmar-cancelar:hover {
    background-color: #4A272E !important;
    color: #FFAAAA !important;
    border-color: #713842 !important;
}


/* =========================================================
   ESTADÍSTICAS — DISTRIBUCIÓN POR ESTATUS — MODO OSCURO
   ========================================================= */

/* Tarjetas individuales de cada estatus */
html.dark #estadistica-estatus .rounded-xl {
    background-color: #1B2940 !important;
    border-color: #2B3A50 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}


/* Texto principal de cada estatus */
html.dark #estadistica-estatus .text-marino {
    color: #F1F5F9 !important;
}


/* Texto secundario */
html.dark #estadistica-estatus .text-marino\/45 {
    color: #94A3B8 !important;
}


/* =========================================================
   ARCOS DE FONDO
   ========================================================= */

html.dark #estadistica-estatus .arco-fondo {
    stroke: #303B4D !important;
    opacity: 1 !important;
}


/* =========================================================
   COLORES DE LOS ARCOS
   ========================================================= */

html.dark #estadistica-estatus .arco-confirmadas {
    stroke: #31B66A !important;
}

html.dark #estadistica-estatus .arco-validacion {
    stroke: #F1C21B !important;
}

html.dark #estadistica-estatus .arco-rechazadas {
    stroke: #EF6B73 !important;
}

html.dark #estadistica-estatus .arco-canceladas {
    stroke: #94A3B8 !important;
}


/* =========================================================
   PUNTOS DE COLOR
   ========================================================= */

html.dark #estadistica-estatus .bg-confirmado {
    background-color: #31B66A !important;
}

html.dark #estadistica-estatus .bg-validacion {
    background-color: #F1C21B !important;
}

html.dark #estadistica-estatus .bg-red-600 {
    background-color: #EF6B73 !important;
}


/* Punto de canceladas */
html.dark #estadistica-estatus .estadistica-estatus-punto[style*="#696e76"] {
    background-color: #94A3B8 !important;
}


/* =========================================================
   PORCENTAJES
   ========================================================= */

/* Confirmadas */
html.dark #estadistica-estatus .bg-green-50.text-green-700 {
    background-color: #163D2B !important;
    color: #6EE7A0 !important;
}


/* En validación */
html.dark #estadistica-estatus .bg-yellow-50.text-yellow-700 {
    background-color: #433A16 !important;
    color: #F6D65C !important;
}


/* Rechazadas */
html.dark #estadistica-estatus .bg-red-50.text-red-700 {
    background-color: #3A2026 !important;
    color: #FF8A8A !important;
}


/* Canceladas */
html.dark #estadistica-estatus .bg-gray-100.text-gray-600 {
    background-color: #303B4D !important;
    color: #CBD5E1 !important;
}

/* =========================================================
   ESTADÍSTICAS — SOLICITUDES POR SUCURSAL — MODO OSCURO
   ========================================================= */

/* Nombres de las sucursales */
html.dark #estadistica-sucursales .estadistica-sucursal-nombre {
    color: #F1F5F9 !important;
}


/* Cantidades */
html.dark #estadistica-sucursales .estadistica-sucursal-cantidad {
    color: #F1F5F9 !important;
}


/* =========================================================
   FONDO DE LAS BARRAS
   ========================================================= */

html.dark #estadistica-sucursales .estadistica-sucursal-barra-fondo {
    background: #2A374B !important;
}


/* =========================================================
   PUNTA DEL ESTE
   ========================================================= */

html.dark #estadistica-sucursales .estadistica-sucursal-barra-punta {
    background: #0B3558 !important;
    border: 1px solid rgba(82, 124, 134, 0.55) !important;

}

html.dark #estadistica-sucursales .estadistica-sucursal-cantidad-punta {
    background: #303B4D !important;
    color: #F1F5F9 !important;
}


/* =========================================================
   POZUELOS
   ========================================================= */

html.dark #estadistica-sucursales .estadistica-sucursal-barra-pozuelos {
    background: #F26A21 !important;
    border: 1px solid #d5a37f !important;

}

html.dark #estadistica-sucursales .estadistica-sucursal-cantidad-pozuelos {
    background: #3A2A20 !important;
    color: #FFB98A !important;
}

/* =========================================================
   ESTADÍSTICAS — EVOLUCIÓN DE SOLICITUDES — MODO OSCURO
   ========================================================= */

/* =========================================================
   LEYENDA
   ========================================================= */

html.dark .estadistica-evolucion-leyenda-item {
    color: #F1F5F9 !important;
}

html.dark .estadistica-evolucion-leyenda-punta {
    background: #164B73 !important;
}

html.dark .estadistica-evolucion-leyenda-pozuelos {
    background: #F26A21 !important;
}


/* =========================================================
   CUADRÍCULA
   ========================================================= */

html.dark .evolucion-grid {
    stroke: #526176 !important;
    opacity: 0.65 !important;
}


/* =========================================================
   EJE Y
   ========================================================= */

html.dark .evolucion-eje {
    fill: #94A3B8 !important;
}


/* =========================================================
   EJE X
   ========================================================= */

html.dark .evolucion-etiqueta {
    fill: #94A3B8 !important;
}


/* =========================================================
   LÍNEA — PUNTA DEL ESTE
   ========================================================= */

html.dark .evolucion-linea-punta {
    stroke: #164B73 !important;
}


/* =========================================================
   LÍNEA — POZUELOS
   ========================================================= */

html.dark .evolucion-linea-pozuelos {
    stroke: #F26A21 !important;
}


/* =========================================================
   PUNTOS — PUNTA DEL ESTE
   ========================================================= */

html.dark .evolucion-punto-punta {
    fill: #F8FAFC !important;
    stroke: #164B73 !important;
}


/* =========================================================
   PUNTOS — POZUELOS
   ========================================================= */

html.dark .evolucion-punto-pozuelos {
    fill: #F8FAFC !important;
    stroke: #F26A21 !important;
}


/* =========================================================
   ÁREA — PUNTA DEL ESTE
   ========================================================= */

html.dark #evolucion-gradiente-punta stop:first-child {
    stop-color: #164B73 !important;
    stop-opacity: 0.38 !important;
}

html.dark #evolucion-gradiente-punta stop:last-child {
    stop-color: #164B73 !important;
    stop-opacity: 0 !important;
}


/* =========================================================
   ÁREA — POZUELOS
   ========================================================= */

html.dark #evolucion-gradiente-pozuelos stop:first-child {
    stop-color: #F26A21 !important;
    stop-opacity: 0.28 !important;
}

html.dark #evolucion-gradiente-pozuelos stop:last-child {
    stop-color: #F26A21 !important;
    stop-opacity: 0 !important;
}


/* =========================================================
   DÍA CON MAYOR DEMANDA
   ========================================================= */

html.dark .estadistica-dia-demanda {
    background: #1B2940 !important;
    border-color: #2D4566 !important;
}


/* Título pequeño */
html.dark .estadistica-dia-demanda .text-marino\/50 {
    color: #94A3B8 !important;
}


/* Nombre de sucursal */
html.dark .estadistica-dia-demanda .text-marino\/60 {
    color: #AAB7C9 !important;
}


/* Día */
html.dark .estadistica-dia-demanda .text-marino {
    color: #F8FAFC !important;
}


/* Cantidad */
html.dark .estadistica-dia-demanda-total {
    color: #CBD5E1 !important;
}


/* =========================================================
   BORDE SUPERIOR DE LAS TARJETAS
   ========================================================= */

html.dark .estadistica-dia-demanda-punta {
    border-top-color: #164B73 !important;
}

html.dark .estadistica-dia-demanda-pozuelos {
    border-top-color: #F26A21 !important;
}


/* =========================================================
   EVOLUCIÓN — TEXTOS DE DÍA CON MAYOR DEMANDA
   ========================================================= */

html.dark .estadistica-dia-demanda-etiqueta {
    color: #AAB7C9 !important;
}

html.dark .estadistica-dia-demanda-sucursal {
    color: #CBD5E1 !important;
}

html.dark .estadistica-dia-demanda-valor {
    color: #F8FAFC !important;
}

html.dark .estadistica-dia-demanda-total {
    color: #CBD5E1 !important;
}

/* =========================================================
   BORDE SUPERIOR — DÍA CON MAYOR DEMANDA
   ========================================================= */

html.dark .estadistica-dias-demanda .estadistica-dia-demanda:first-child {
    border-top: 3px solid #164B73 !important;
}

html.dark .estadistica-dias-demanda .estadistica-dia-demanda:nth-child(2) {
    border-top: 3px solid #F26A21 !important;
}

/* =========================================================
   ESTADÍSTICAS — HORARIOS MÁS SOLICITADOS
   TARJETAS Y TEXTOS — MODO OSCURO
   ========================================================= */

/* Tarjeta de cada sucursal */
html.dark .horario-sucursal {
    background: #18263B !important;
    border-color: #2D4566 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16) !important;
}


/* Etiqueta "Sucursal" */
html.dark .horario-sucursal-etiqueta {
    color: #8FA3BA !important;
}


/* Nombre de la sucursal */
html.dark .horario-sucursal-nombre {
    color: #F1F5F9 !important;
}


/* =========================================================
   RECUADRO "HORARIO MÁS SOLICITADO"
   ========================================================= */

html.dark .horario-sucursal-indicador {
    background: #202E43 !important;
    border-color: #3A4D67 !important;
    border: 1px solid #527c86 !important;
}


/* Título del indicador */
html.dark .horario-sucursal-indicador-titulo {
    color: #AAB7C9 !important;
}


/* Hora más solicitada */
html.dark .horario-sucursal-indicador-valor {
    color: #F8FAFC !important;
}


/* Número de solicitudes */
html.dark .horario-sucursal-indicador-total {
    color: #94A3B8 !important;
}

/* =========================================================
   HORARIOS — BARRAS POR SUCURSAL
   ========================================================= */

/* Punta del Este */
html.dark .horario-sucursal:first-child .horario-frecuente-barra {
    background: #0B3558 !important;
    border: 1px solid rgba(82, 124, 134, 0.55) !important;
}


/* Pozuelos */
html.dark .horario-sucursal:nth-child(2) .horario-frecuente-barra {
    background: #F26A21 !important;
    border: 1px solid #D5A37F !important;
}

/* =========================================================
   MOTIVOS DE CANCELACIÓN Y RECHAZO
   ========================================================= */

/* Fondo de las barras */
html.dark .barra-motivo-cancelacion,
html.dark .barra-motivo-rechazo {
    border-radius: 999px !important;
}

/* Motivos de cancelación — NARANJA */
html.dark .barra-motivo-cancelacion {
    background: #0B3558 !important;
    border: 1px solid rgba(82, 124, 134, 0.55) !important;
}

/* Motivos de rechazo — AZUL */
html.dark .barra-motivo-rechazo {
    background: #F26A21 !important;
    border: 1px solid rgba(213, 163, 127, 0.55) !important;

}

/* =========================================================
   REAGENDACIONES — TIPO DE CAMBIO
   ========================================================= */

html.dark .tipo-reagendacion-barra {
    background: #0B3558 !important;
    border: 1px solid rgba(82, 124, 134, 0.55) !important;
    box-sizing: border-box;
}

html.dark .tipo-reagendacion-nombre {
    color: #F1F5F9 !important;
}

html.dark .tipo-reagendacion-total {
    color: #F8FAFC !important;
}

html.dark .reagendaciones-grafica-tipos {
    border-bottom-color: #2D3A50 !important;
}

html.dark .reagendaciones-tipos {
    border-left-color: #2D3A50 !important;
}


/* =========================================================
   REAGENDACIONES — MEDIA LUNA
   ========================================================= */

/* Modo claro */
:root {
    --color-fondo-reagendaciones: #E5E7EB;
}

/* Modo oscuro */
html.dark {
    --color-fondo-reagendaciones: #303B4D;
}

/* Centro de la media luna en modo oscuro */
html.dark .reagendaciones-gauge-centro {
    background: #182235 !important;
    color: #fff;
}

html.dark .reagendaciones-gauge-label {
    color: #fff;
}

html.dark .reagendaciones-gauge-total{
    background-color: #182235;
    color: #fff;
}