/* =========================================================
   TEMA GLOBAL
   ========================================================= */

:root {
    color-scheme: light;
}

html[data-theme="dark"] {
    color-scheme: dark;

    --tema-fondo: #101522;
    --tema-superficie: #171e2d;
    --tema-superficie-2: #20293a;
    --tema-superficie-3: #293348;

    --tema-borde: #344055;
    --tema-borde-suave: #2b3548;

    --tema-texto: #edf1f7;
    --tema-texto-secundario: #aeb8c8;

    --tema-principal: #9aabeb;
    --tema-principal-fuerte: #bcc8f5;

    --tema-input: #111827;
}


/* =========================================================
   CUERPO GENERAL
   ========================================================= */

html[data-theme="dark"] body {
    background-color:
        var(--tema-fondo) !important;

    color:
        var(--tema-texto);
}


/* =========================================================
   TEXTOS GENERALES
   ========================================================= */

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .section-title h1,
html[data-theme="dark"] .calendar-title,
html[data-theme="dark"] .calendar-title h1,
html[data-theme="dark"] .plano-info,
html[data-theme="dark"] .parking-card-cabecera h2,
html[data-theme="dark"] .cabecera-plano-conjunto h2,
html[data-theme="dark"] .detalle-reserva-cabecera h1,
html[data-theme="dark"] .dias-cerrados-formulario h2,
html[data-theme="dark"] .dias-cerrados-listado h2,
html[data-theme="dark"] .reserva-admin-informacion h2,
html[data-theme="dark"] .bloque-reservas-parking h2 {
    color:
        var(--tema-texto) !important;
}


html[data-theme="dark"] p,
html[data-theme="dark"] .section-title p,
html[data-theme="dark"] .calendar-title p,
html[data-theme="dark"] .plano-info p,
html[data-theme="dark"] .parking-card-cabecera p,
html[data-theme="dark"] .parking-fecha-visible,
html[data-theme="dark"] .parking-leyenda-web {
    color:
        var(--tema-texto-secundario) !important;
}


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

html[data-theme="dark"] .app-header {
    background-color:
        var(--tema-superficie) !important;

    border-color:
        var(--tema-borde) !important;

    box-shadow:
        0 3px 14px
        rgba(0, 0, 0, 0.32) !important;
}


html[data-theme="dark"] .app-header-top {
    background-color:
        var(--tema-superficie) !important;

    border-color:
        var(--tema-borde) !important;
}


html[data-theme="dark"] .app-header-nav {
    background-color:
        var(--tema-superficie-2) !important;
}


html[data-theme="dark"] .app-header-title,
html[data-theme="dark"] .app-header-logo {
    color:
        var(--tema-texto) !important;
}


html[data-theme="dark"]
.app-header-calendar-context {
    background-color:
        var(--tema-superficie-2) !important;

    border-color:
        var(--tema-borde) !important;

    color:
        var(--tema-texto) !important;
}


html[data-theme="dark"]
.app-header-calendar-context i {
    color:
        var(--tema-principal) !important;
}


html[data-theme="dark"]
.app-header-calendar-form label {
    color:
        var(--tema-texto-secundario) !important;
}


html[data-theme="dark"]
.app-header-calendar-form select {
    background:
        var(--tema-input) !important;

    border-color:
        var(--tema-borde) !important;

    color:
        var(--tema-texto) !important;
}


html[data-theme="dark"]
.app-header-user {
    color:
        var(--tema-texto) !important;
}


html[data-theme="dark"]
.app-header-user i {
    color:
        var(--tema-texto-secundario) !important;
}


html[data-theme="dark"]
.app-header-menu a {
    color:
        var(--tema-texto-secundario) !important;
}


html[data-theme="dark"]
.app-header-menu a i {
    color:
        var(--tema-texto-secundario) !important;
}


html[data-theme="dark"]
.app-header-menu a:hover {
    background:
        var(--tema-superficie-3) !important;

    color:
        var(--tema-texto) !important;
}


html[data-theme="dark"]
.app-header-menu a:hover i {
    color:
        var(--tema-texto) !important;
}


html[data-theme="dark"]
.app-header-menu a.app-nav-active {
    background:
        #354f9c !important;

    color:
        #ffffff !important;
}


html[data-theme="dark"]
.app-header-menu a.app-nav-active i {
    color:
        #ffffff !important;
}


/*
 * Menú desplegable tablet/móvil.
 */
@media (max-width: 1100px) {

    html[data-theme="dark"]
    .app-header-menu {
        background-color:
            var(--tema-superficie) !important;

        border-color:
            var(--tema-borde) !important;
    }
}


/* =========================================================
   BOTÓN CLARO / OSCURO
   ========================================================= */

.app-theme-toggle {
    min-height: 38px;
    padding: 8px 12px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    border: 1px solid #d9dee9;
    border-radius: 8px;

    background-color: #f7f8fb;
    color: #172653;

    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
    
    flex: 0 0 auto;
white-space: nowrap;    
}


.app-theme-toggle:hover {
    background-color: #e7ebf5;

    transform:
        translateY(-1px);
}


.app-theme-toggle i {
    width: 17px;

    text-align: center;
}


html[data-theme="dark"]
.app-theme-toggle {
    background-color:
        var(--tema-superficie-2);

    border-color:
        var(--tema-borde);

    color:
        var(--tema-texto);
}


html[data-theme="dark"]
.app-theme-toggle:hover {
    background-color:
        var(--tema-superficie-3);
}


/* =========================================================
   TARJETAS GENERALES
   ========================================================= */

html[data-theme="dark"]
.mi-semana-bienvenida,

html[data-theme="dark"]
.mi-semana-calendario-asignado,

html[data-theme="dark"]
.proxima-reserva-card,

html[data-theme="dark"]
.sin-proxima-reserva-card,

html[data-theme="dark"]
.mi-semana-contador,

html[data-theme="dark"]
.dia-semana-card,

html[data-theme="dark"]
.detalle-reserva-card,

html[data-theme="dark"]
.detalle-reserva-dato,

html[data-theme="dark"]
.modal-cancelar-contenido,

html[data-theme="dark"]
.modal-cancelar-datos,

html[data-theme="dark"]
.dias-cerrados-cabecera,

html[data-theme="dark"]
.dias-cerrados-formulario,

html[data-theme="dark"]
.dias-cerrados-listado,

html[data-theme="dark"]
.dia-cerrado-card,

html[data-theme="dark"]
.reserva-admin-cabecera,

html[data-theme="dark"]
.reserva-admin-formulario,

html[data-theme="dark"]
.reserva-admin-informacion,

html[data-theme="dark"]
.tarjeta-plano-conjunto,

html[data-theme="dark"]
.calendar,

html[data-theme="dark"]
.calendar-context,

html[data-theme="dark"]
.parking-selector-fecha,

html[data-theme="dark"]
.parking-plano-card,

html[data-theme="dark"]
.parking-formulario-card,

html[data-theme="dark"]
.parking-reservas-dia,

html[data-theme="dark"]
.menu-select-usuarios,

html[data-theme="dark"]
.mensaje-vacio {
    background-color:
        var(--tema-superficie) !important;

    border-color:
        var(--tema-borde) !important;

    color:
        var(--tema-texto) !important;

    box-shadow:
        0 5px 18px
        rgba(0, 0, 0, 0.22) !important;
}


/* =========================================================
   SUBTARJETAS
   ========================================================= */

html[data-theme="dark"]
.dia-semana-header,

html[data-theme="dark"]
.parking-valor-bloqueado,

html[data-theme="dark"]
.parking-seleccion-ayuda,

html[data-theme="dark"]
.parking-sin-reservas,

html[data-theme="dark"]
.dias-cerrados-vacio {
    background-color:
        var(--tema-superficie-2) !important;

    border-color:
        var(--tema-borde) !important;

    color:
        var(--tema-texto-secundario) !important;
}


/* =========================================================
   FORMULARIOS
   ========================================================= */

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background-color:
        var(--tema-input) !important;

    border-color:
        var(--tema-borde) !important;

    color:
        var(--tema-texto) !important;
}


html[data-theme="dark"]
input::placeholder,

html[data-theme="dark"]
textarea::placeholder {
    color:
        #79869b !important;
}


html[data-theme="dark"] label {
    color:
        var(--tema-texto) !important;
}


html[data-theme="dark"]
input:disabled,

html[data-theme="dark"]
select:disabled,

html[data-theme="dark"]
textarea:disabled {
    background:
        var(--tema-superficie-2) !important;

    color:
        #7f899a !important;
}


/*
 * Opciones del SELECT en navegadores
 * que permiten personalización.
 */
html[data-theme="dark"] option {
    background:
        #111827;

    color:
        #edf1f7;
}


/* =========================================================
   TABLAS
   ========================================================= */

html[data-theme="dark"] table {
    background:
        var(--tema-superficie) !important;

    color:
        var(--tema-texto) !important;
}


html[data-theme="dark"] th {
    background:
        var(--tema-superficie-3) !important;

    color:
        var(--tema-texto) !important;

    border-color:
        var(--tema-borde) !important;
}


html[data-theme="dark"] td {
    border-color:
        var(--tema-borde-suave) !important;

    color:
        var(--tema-texto) !important;
}


html[data-theme="dark"]
tbody tr:nth-child(even) {
    background:
        #192131 !important;
}


html[data-theme="dark"]
tbody tr:hover {
    background:
        #253044 !important;
}


/* =========================================================
   FILTROS
   ========================================================= */

html[data-theme="dark"]
.menu-select-usuarios,

html[data-theme="dark"]
.filtros-usuarios-form {
    color:
        var(--tema-texto) !important;
}


html[data-theme="dark"]
.filtro-etiqueta {
    color:
        var(--tema-texto-secundario) !important;
}


/* =========================================================
   MI SEMANA
   ========================================================= */

html[data-theme="dark"]
.proxima-reserva-card h2,

html[data-theme="dark"]
.sin-proxima-reserva-card h2,

html[data-theme="dark"]
.dia-semana-header h2,

html[data-theme="dark"]
.dia-reserva-puesto strong,

html[data-theme="dark"]
.mi-semana-contador strong {
    color:
        var(--tema-texto) !important;
}


html[data-theme="dark"]
.proxima-reserva-card p,

html[data-theme="dark"]
.sin-proxima-reserva-card p,

html[data-theme="dark"]
.dia-semana-header p,

html[data-theme="dark"]
.dia-reserva-puesto span,

html[data-theme="dark"]
.dia-sin-reserva {
    color:
        var(--tema-texto-secundario) !important;
}


/* =========================================================
   CALENDARIO - MODO OSCURO
   ========================================================= */

/*
 * Contenedor completo.
 */
html[data-theme="dark"] .calendar {
    background:
        var(--tema-superficie) !important;

    border-color:
        var(--tema-borde) !important;

    color:
        var(--tema-texto) !important;
}


/*
 * Cabecera:
 *
 * < Septiembre de 2026 >
 */
html[data-theme="dark"] .header-calendar {
    background:
        var(--tema-superficie) !important;

    color:
        var(--tema-texto) !important;
}


html[data-theme="dark"] .month-year {
    color:
        var(--tema-texto) !important;
}


/*
 * Lunes - Martes - Miércoles...
 *
 * Esta era precisamente la franja blanca
 * que aparece en tu captura.
 */
html[data-theme="dark"] .weekdays div {
    background:
        var(--tema-superficie-2) !important;

    color:
        var(--tema-texto) !important;

    border-color:
        var(--tema-borde) !important;
}


/*
 * Día normal.
 */
html[data-theme="dark"]
.days .calendar-day {
    background:
        var(--tema-superficie-2) !important;

    color:
        var(--tema-texto) !important;

    border-color:
        var(--tema-borde) !important;
}


html[data-theme="dark"]
.calendar-day-number {
    color:
        var(--tema-texto) !important;
}


/* =========================================================
   ESTADOS DEL CALENDARIO
   ========================================================= */

/*
 * Disponible.
 *
 * Verde oscuro, manteniendo el significado
 * visual del modo claro.
 */
html[data-theme="dark"]
.days
.calendar-day.availability-disponible {
    background:
        #173b2a !important;

    color:
        #dff5e7 !important;
}


/*
 * Pocas plazas.
 */
html[data-theme="dark"]
.days
.calendar-day.availability-pocos {
    background:
        #493818 !important;

    color:
        #fff1c7 !important;
}


/*
 * Completo.
 */
html[data-theme="dark"]
.days
.calendar-day.availability-completo {
    background:
        #482329 !important;

    color:
        #ffdce0 !important;
}


/*
 * Día pasado.
 */
html[data-theme="dark"]
.days
.calendar-day.calendar-past {
    background:
        #1a2230 !important;

    color:
        #788397 !important;
}


/*
 * Día cerrado.
 */
html[data-theme="dark"]
.days
.calendar-day.calendar-closed {
    background:
        #252d3a !important;

    color:
        #7e899b !important;
}


/*
 * Cerrado por administrador.
 */
html[data-theme="dark"]
.days
.calendar-day.calendar-closed-admin {
    background:
        #292f3b !important;

    color:
        #929bab !important;
}


/*
 * Semana futura todavía no disponible.
 */
html[data-theme="dark"]
.days
.calendar-day.calendar-not-yet-available {
    background:
        #202938 !important;

    color:
        #a1abba !important;
}


/* =========================================================
   BADGES DE DISPONIBILIDAD
   ========================================================= */

html[data-theme="dark"]
.availability-badge {
    background:
        #293348 !important;

    color:
        #dce3ef !important;

    border:
        1px solid #3b475c !important;

    -webkit-text-fill-color:
        #dce3ef !important;
}


/*
 * Badge verde.
 */
html[data-theme="dark"]
.days
.availability-disponible
.availability-badge {
    background:
        #24563c !important;

    border-color:
        #34724f !important;

    color:
        #e2f7e9 !important;

    -webkit-text-fill-color:
        #e2f7e9 !important;
}


/*
 * Badge amarillo.
 */
html[data-theme="dark"]
.days
.availability-pocos
.availability-badge {
    background:
        #665020 !important;

    border-color:
        #82672b !important;

    color:
        #fff1bc !important;

    -webkit-text-fill-color:
        #fff1bc !important;
}


/*
 * Badge completo.
 */
html[data-theme="dark"]
.days
.availability-completo
.availability-badge {
    background:
        #673039 !important;

    border-color:
        #843f49 !important;

    color:
        #ffe0e3 !important;

    -webkit-text-fill-color:
        #ffe0e3 !important;
}


/*
 * Pasado.
 */
html[data-theme="dark"]
.days
.calendar-past
.availability-badge {
    background:
        #303a4a !important;

    border-color:
        #3c4657 !important;

    color:
        #929cab !important;

    -webkit-text-fill-color:
        #929cab !important;
}


/*
 * Cerrado.
 */
html[data-theme="dark"]
.days
.calendar-closed
.availability-badge,

html[data-theme="dark"]
.days
.calendar-closed-admin
.availability-badge {
    background:
        #363e4b !important;

    border-color:
        #444d5c !important;

    color:
        #c0c7d2 !important;

    -webkit-text-fill-color:
        #c0c7d2 !important;
}


/*
 * Aún no disponible.
 */
html[data-theme="dark"]
.days
.calendar-not-yet-available
.availability-badge {
    background:
        #30394a !important;

    border-color:
        #3d475b !important;

    color:
        #bbc3cf !important;

    -webkit-text-fill-color:
        #bbc3cf !important;
}


/*
 * Día actual.
 *
 * Tu style.css tiene varias reglas antiguas
 * con !important, por eso necesitamos
 * sobrescribirlas también aquí.
 */
html[data-theme="dark"]
.days
.calendar-day.today
.availability-badge,

html[data-theme="dark"]
.days
.calendar-day.today:hover
.availability-badge {
    background:
        #293348 !important;

    border-color:
        #47546b !important;

    color:
        #ffffff !important;

    -webkit-text-fill-color:
        #ffffff !important;

    opacity:
        1 !important;

    visibility:
        visible !important;
}


/*
 * Hover.
 */
html[data-theme="dark"]
.days
.calendar-day.current-week:hover {
    filter:
        brightness(1.12);

    color:
        var(--tema-texto) !important;
}


/*
 * Leyenda inferior.
 */
html[data-theme="dark"]
.calendar-availability-legend {
    color:
        var(--tema-texto) !important;
}


html[data-theme="dark"]
.calendar-availability-legend span {
    color:
        var(--tema-texto) !important;
}

/* =========================================================
   DETALLE RESERVA
   ========================================================= */

html[data-theme="dark"]
.detalle-reserva-dato {
    background:
        var(--tema-superficie-2)
        !important;
}


html[data-theme="dark"]
.detalle-reserva-dato strong {
    color:
        var(--tema-texto) !important;
}


html[data-theme="dark"]
.detalle-reserva-dato span {
    color:
        var(--tema-texto-secundario)
        !important;
}


html[data-theme="dark"]
.detalle-reserva-volver {
    color:
        var(--tema-principal-fuerte)
        !important;
}


/* =========================================================
   MODALES
   ========================================================= */

html[data-theme="dark"]
.modal-cancelar-contenido {
    color:
        var(--tema-texto) !important;
}


html[data-theme="dark"]
.modal-cancelar-contenido h2 {
    color:
        var(--tema-texto) !important;
}


html[data-theme="dark"]
.modal-cancelar-contenido > p {
    color:
        var(--tema-texto-secundario)
        !important;
}


html[data-theme="dark"]
.modal-cancelar-cerrar {
    background:
        var(--tema-superficie-3)
        !important;

    color:
        var(--tema-texto) !important;
}


/* =========================================================
   PARKING
   ========================================================= */

html[data-theme="dark"]
.parking-campo label {
    color:
        var(--tema-texto) !important;
}


html[data-theme="dark"]
.parking-ayuda-correo,

html[data-theme="dark"]
.parking-motivo-otros label {
    color:
        var(--tema-texto-secundario)
        !important;
}


html[data-theme="dark"]
.parking-ayuda-correo strong {
    color:
        var(--tema-principal-fuerte)
        !important;
}


html[data-theme="dark"]
.parking-plano {
    border-color:
        var(--tema-borde) !important;
}


/*
 * No alteramos la imagen del plano.
 * Debe mantener sus colores originales.
 */
html[data-theme="dark"]
.parking-plano img {
    filter: none;
}


/* =========================================================
   PLANOS ADMINISTRATIVOS
   ========================================================= */

/*
 * Tampoco invertimos ni modificamos
 * las imágenes originales de los planos.
 */
html[data-theme="dark"]
.plano-admin-container img,
html[data-theme="dark"]
.tarjeta-plano-conjunto img {
    filter: none;
}


/* =========================================================
   BOTONES SECUNDARIOS
   ========================================================= */

html[data-theme="dark"]
.boton-cancelar-semana,

html[data-theme="dark"]
.boton-volver-cancelacion,

html[data-theme="dark"]
.detalle-reserva-cancelar,

html[data-theme="dark"]
.parking-boton-cancelar {
    background:
        var(--tema-superficie-2)
        !important;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

html[data-theme="dark"] {
    scrollbar-color:
        #4a5870
        #171e2d;
}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 480px) {

    .app-theme-toggle {
        width: 100%;
    }
}

/* =========================================================
   FORMULARIOS DE USUARIOS
   Registrar / Modificar
   ========================================================= */

html[data-theme="dark"]
.forms-styles {
    background:
        var(--tema-superficie) !important;

    border-color:
        var(--tema-borde) !important;

    color:
        var(--tema-texto) !important;

    box-shadow:
        0 5px 20px
        rgba(
            0,
            0,
            0,
            0.35
        ) !important;
}


html[data-theme="dark"]
.forms-styles h1,

html[data-theme="dark"]
.forms-styles h2,

html[data-theme="dark"]
.forms-styles h3 {
    color:
        var(--tema-texto) !important;
}


/*
 * Etiquetas:
 *
 * Rol de acceso
 * Calendario asignado
 */
html[data-theme="dark"]
.forms-styles
.form-section label {
    color:
        #cbd4e2 !important;
}


/*
 * Inputs/selects del formulario.
 */
html[data-theme="dark"]
.forms-styles
.celdas {
    background:
        var(--tema-input) !important;

    color:
        var(--tema-texto) !important;

    border-color:
        var(--tema-borde) !important;

    border-bottom:
        2px solid #46536a !important;
}


html[data-theme="dark"]
.forms-styles
.celdas:hover,

html[data-theme="dark"]
.forms-styles
.celdas:focus {
    border-bottom-color:
        #7186ca !important;
}


/*
 * Placeholder.
 */
html[data-theme="dark"]
.forms-styles
.celdas::placeholder {
    color:
        #8895a8 !important;

    opacity:
        1;
}


/*
 * Select.
 */
html[data-theme="dark"]
.forms-styles select.celdas {
    background:
        #111827 !important;

    color:
        #edf1f7 !important;
}


html[data-theme="dark"]
.forms-styles select.celdas option {
    background:
        #111827 !important;

    color:
        #edf1f7 !important;
}


/*
 * Botón Crear usuario / Modificar.
 */
html[data-theme="dark"]
.forms-styles
.btn input {
    background:
        #354f9c !important;

    border:
        1px solid #5069b6 !important;

    color:
        #ffffff !important;
}


html[data-theme="dark"]
.forms-styles
.btn input:hover {
    background:
        #4561b7 !important;

    color:
        #ffffff !important;
}


/*
 * Botón ojo contraseña.
 */
html[data-theme="dark"]
.forms-styles
.registro-password-toggle {
    background:
        transparent !important;

    color:
        #9eacd0 !important;
}


html[data-theme="dark"]
.forms-styles
.registro-password-toggle:hover {
    background:
        #283247 !important;

    color:
        #ffffff !important;
}

html[data-theme="dark"]
.forms-styles
.img-form img {
    filter:
        none !important;
}
/* =========================================================
   ELEMENTOS ANTIGUOS CON FONDO CLARO
   ========================================================= */

html[data-theme="dark"]
.table-container {
    background:
        var(--tema-superficie) !important;

    border-color:
        var(--tema-borde) !important;
}


html[data-theme="dark"]
.calendar-context {
    background:
        var(--tema-superficie) !important;

    border-color:
        var(--tema-borde) !important;

    color:
        var(--tema-texto) !important;
}


html[data-theme="dark"]
.calendar-title,

html[data-theme="dark"]
.section-title,

html[data-theme="dark"]
.plano-info {
    color:
        var(--tema-texto) !important;
}
/* =========================================================
   FILTROS / BUSCADORES - MODO OSCURO
   Usuarios, historial, reservas, etc.
   ========================================================= */

/*
 * Contenedor exterior.
 */
html[data-theme="dark"]
.menu-select {
    background:
        transparent !important;
}


/*
 * Tarjeta principal de filtros.
 */
html[data-theme="dark"]
.menu-select-usuarios
.filtros-usuarios-form {
    background:
        var(--tema-superficie) !important;

    border-color:
        var(--tema-borde) !important;

    color:
        var(--tema-texto) !important;

    box-shadow:
        0 5px 18px
        rgba(
            0,
            0,
            0,
            0.28
        ) !important;
}


/* =========================================================
   ETIQUETAS
   ========================================================= */

html[data-theme="dark"]
.menu-select-usuarios
.filtro-etiqueta {
    color:
        var(--tema-texto-secundario) !important;
}


html[data-theme="dark"]
.menu-select-usuarios
.filtro-etiqueta i {
    color:
        var(--tema-principal) !important;
}


/* =========================================================
   SELECT DE ORDENACIÓN
   ========================================================= */

html[data-theme="dark"]
.menu-select-usuarios
.filtro-usuarios-orden
select {
    background:
        var(--tema-input) !important;

    border-color:
        var(--tema-borde) !important;

    color:
        var(--tema-texto) !important;
}


html[data-theme="dark"]
.menu-select-usuarios
.filtro-usuarios-orden
select option {
    background:
        var(--tema-input) !important;

    color:
        var(--tema-texto) !important;
}


/* =========================================================
   CAMPO DE BÚSQUEDA
   ========================================================= */

html[data-theme="dark"]
.menu-select-usuarios
.buscador-usuarios-campo
input {
    background:
        var(--tema-input) !important;

    border-color:
        var(--tema-borde) !important;

    color:
        var(--tema-texto) !important;
}


html[data-theme="dark"]
.menu-select-usuarios
.buscador-usuarios-campo
input::placeholder {
    color:
        #8995a9 !important;

    opacity:
        1;
}


html[data-theme="dark"]
.menu-select-usuarios
.buscador-usuarios-campo
> i {
    color:
        #8995a9 !important;
}


/* =========================================================
   FOCUS
   ========================================================= */

html[data-theme="dark"]
.menu-select-usuarios
.filtro-usuarios-orden
select:focus,

html[data-theme="dark"]
.menu-select-usuarios
.buscador-usuarios-campo
input:focus {
    border-color:
        #7186ca !important;

    outline:
        none;

    box-shadow:
        0 0 0 4px
        rgba(
            113,
            134,
            202,
            0.18
        ) !important;
}


/* =========================================================
   BOTÓN APLICAR
   ========================================================= */

html[data-theme="dark"]
.menu-select-usuarios
.boton-filtrar-usuarios {
    background:
        #354f9c !important;

    color:
        #ffffff !important;

    border-color:
        #5069b6 !important;
}


html[data-theme="dark"]
.menu-select-usuarios
.boton-filtrar-usuarios {
    background:
        #1C2347 !important;

    color:
        #ffffff !important;

    border:
        0 !important;
}


/* =========================================================
   BOTÓN LIMPIAR
   ========================================================= */

html[data-theme="dark"]
.menu-select-usuarios
.boton-limpiar-buscador {
    background:
        var(--tema-superficie-2) !important;

    border-color:
        var(--tema-borde) !important;

    color:
        var(--tema-texto-secundario) !important;
}


html[data-theme="dark"]
.menu-select-usuarios
.boton-filtrar-usuarios:hover {
    background:
        #303c78 !important;

    color:
        #ffffff !important;
}
/* =========================================================
   FILTROS ANTIGUOS / GENÉRICOS
   ========================================================= */

html[data-theme="dark"]
.menu-select form {
    color:
        var(--tema-texto) !important;
}


html[data-theme="dark"]
.menu-select select,

html[data-theme="dark"]
.menu-select input {
    background:
        var(--tema-input) !important;

    border-color:
        var(--tema-borde) !important;

    color:
        var(--tema-texto) !important;
}


html[data-theme="dark"]
.menu-select input::placeholder {
    color:
        #8995a9 !important;
}


html[data-theme="dark"]
.menu-select select option {
    background:
        var(--tema-input) !important;

    color:
        var(--tema-texto) !important;
}
/* =========================================================
   LOGIN - MODO OSCURO
   ========================================================= */

/*
 * Tarjeta principal.
 */
html[data-theme="dark"]
#login .login-card {
    background:
        linear-gradient(
            180deg,
            #171e2d,
            #131a28
        ) !important;

    border-color:
        #344055 !important;

    box-shadow:
        0 28px 70px
        rgba(0, 0, 0, 0.48),

        0 8px 24px
        rgba(0, 0, 0, 0.30),

        inset 0 1px 0
        rgba(255, 255, 255, 0.04)
        !important;
}


/* =========================================================
   CABECERA LOGIN
   ========================================================= */

html[data-theme="dark"]
#login .login-eyebrow {
    color:
        #9aabeb !important;
}


html[data-theme="dark"]
#login .login-heading h1 {
    color:
        #f2f5fa !important;
}


html[data-theme="dark"]
#login .login-intro {
    color:
        #aeb8c8 !important;
}


/*
 * El logo mantiene sus colores originales.
 */
html[data-theme="dark"]
#login .login-logo {
    filter:
        none !important;
}


/* =========================================================
   LABELS
   ========================================================= */

html[data-theme="dark"]
#login .login-field label {
    color:
        #d7deea !important;
}


/* =========================================================
   INPUTS
   ========================================================= */

html[data-theme="dark"]
#login .login-input-wrap input {
    background:
        #111827 !important;

    border-color:
        #3b475c !important;

    color:
        #edf1f7 !important;

    box-shadow:
        inset 0 1px 2px
        rgba(0, 0, 0, 0.18)
        !important;
}


html[data-theme="dark"]
#login
.login-input-wrap
input::placeholder {
    color:
        #8290a6 !important;

    opacity:
        1;
}


/*
 * Icono izquierdo:
 * correo / candado.
 */
html[data-theme="dark"]
#login .login-input-wrap > i {
    color:
        #91a0ba !important;
}


/*
 * Focus.
 */
html[data-theme="dark"]
#login
.login-input-wrap
input:focus {
    background:
        #111827 !important;

    border-color:
        #7186ca !important;

    box-shadow:
        0 0 0 4px
        rgba(113, 134, 202, 0.18),

        inset 0 1px 2px
        rgba(0, 0, 0, 0.18)
        !important;
}


/* =========================================================
   AUTOCOMPLETADO CHROME / EDGE
   ========================================================= */

/*
 * Esto es importante.
 *
 * Chrome pinta por su cuenta los campos
 * que ha rellenado automáticamente.
 * Es el gris claro que aparece
 * en tu captura.
 */
html[data-theme="dark"]
#login
.login-input-wrap
input:-webkit-autofill,

html[data-theme="dark"]
#login
.login-input-wrap
input:-webkit-autofill:hover,

html[data-theme="dark"]
#login
.login-input-wrap
input:-webkit-autofill:focus,

html[data-theme="dark"]
#login
.login-input-wrap
input:-webkit-autofill:active {
    -webkit-text-fill-color:
        #edf1f7 !important;

    caret-color:
        #edf1f7 !important;

    -webkit-box-shadow:
        0 0 0 1000px
        #111827
        inset !important;

    box-shadow:
        0 0 0 1000px
        #111827
        inset !important;

    transition:
        background-color
        9999s
        ease-out
        0s;
}


/* =========================================================
   OJO DE CONTRASEÑA
   ========================================================= */

html[data-theme="dark"]
#login .login-password-toggle {
    background:
        transparent !important;

    color:
        #91a0ba !important;
}


html[data-theme="dark"]
#login
.login-password-toggle:hover:not(:disabled),

html[data-theme="dark"]
#login
.login-password-toggle:focus-visible {
    background:
        #273247 !important;

    color:
        #ffffff !important;
}


/* =========================================================
   BOTÓN LOGIN
   ========================================================= */

html[data-theme="dark"]
#login .login-submit {
    background:
        linear-gradient(
            135deg,
            #354f9c,
            #4764bd
        ) !important;

    color:
        #ffffff !important;

    box-shadow:
        0 10px 24px
        rgba(0, 0, 0, 0.30)
        !important;
}


/* =========================================================
   PIE LOGIN
   ========================================================= */

html[data-theme="dark"]
#login .login-footer {
    border-top-color:
        #344055 !important;

    color:
        #9ca8ba !important;
}


html[data-theme="dark"]
#login .login-footer i {
    color:
        #91a0ba !important;
}
/* =========================================================
   VISTA CONJUNTA DE PLANOS
   SELECTOR DE FECHA
   ========================================================= */

html[data-theme="dark"]
.selector-fecha-planos form {
    background:
        var(--tema-superficie) !important;

    border-color:
        var(--tema-borde) !important;

    color:
        var(--tema-texto) !important;

    box-shadow:
        0 5px 18px
        rgba(0, 0, 0, 0.28)
        !important;
}


html[data-theme="dark"]
.selector-fecha-planos label {
    color:
        #d7deea !important;
}


html[data-theme="dark"]
.selector-fecha-planos input {
    background:
        var(--tema-input) !important;

    border-color:
        var(--tema-borde) !important;

    color:
        var(--tema-texto) !important;

    color-scheme:
        dark;
}


html[data-theme="dark"]
.selector-fecha-planos input:focus {
    border-color:
        #7186ca !important;

    outline:
        none;

    box-shadow:
        0 0 0 4px
        rgba(113, 134, 202, 0.18)
        !important;
}


html[data-theme="dark"]
.selector-fecha-planos button {
    background:
        #354f9c !important;

    color:
        #ffffff !important;

    border:
        1px solid
        #5069b6 !important;
}


html[data-theme="dark"]
.selector-fecha-planos button:hover {
    background:
        #4561b7 !important;
}
/* =========================================================
   HISTORIAL PARKING - MODO OSCURO
   ========================================================= */

html[data-theme="dark"]
.historial-tab {
    background:
        var(--tema-superficie-2) !important;

    border-color:
        var(--tema-borde) !important;

    color:
        var(--tema-texto-secundario) !important;
}


html[data-theme="dark"]
.historial-tab:hover {
    background:
        var(--tema-superficie-3) !important;

    color:
        var(--tema-texto) !important;
}


html[data-theme="dark"]
.historial-tab-activo {
    background:
        #354f9c !important;

    border-color:
        #5069b6 !important;

    color:
        #ffffff !important;
}


html[data-theme="dark"]
.estado-historico-parking-confirmada {
    background:
        #1f4b34 !important;

    color:
        #dff5e7 !important;
}


html[data-theme="dark"]
.estado-historico-parking-cancelada {
    background:
        #5a2930 !important;

    color:
        #ffe0e3 !important;
}
html[data-theme="dark"]
.boton-borrar-historico-parking {
    background:
        var(--tema-superficie-2) !important;

    border-color:
        #dc5a67 !important;

    color:
        #ff8f99 !important;
}

html[data-theme="dark"]
.boton-borrar-historico-parking:hover {
    background:
        #a93642 !important;

    color:
        #ffffff !important;
}
/* =========================================================
   PESTAÑAS PARKING - MODO OSCURO
   ========================================================= */

html[data-theme="dark"]
.parking-subtab {
    background:
        var(--tema-superficie-2) !important;

    border-color:
        var(--tema-borde) !important;

    color:
        var(--tema-texto-secundario) !important;
}

html[data-theme="dark"]
.parking-subtab:hover {
    background:
        var(--tema-superficie-3) !important;

    color:
        var(--tema-texto) !important;
}

html[data-theme="dark"]
.parking-subtab-activa {
    background:
        #354f9c !important;

    border-color:
        #5069b6 !important;

    color:
        #ffffff !important;
}

html[data-theme="dark"]
.parking-subtab-activa:hover {
    background:
        #4561b7 !important;

    color:
        #ffffff !important;
}
/* =========================================================
   VISITANTES 2 - DISPONIBILIDAD - DARK
   ========================================================= */

html[data-theme="dark"]
.parking-selector-horario {
    background:
        var(--tema-superficie-2) !important;

    border-color:
        var(--tema-borde) !important;
}


html[data-theme="dark"]
.parking-consulta-campo label {
    color:
        var(--tema-texto) !important;
}


html[data-theme="dark"]
.parking-consulta-campo input {
    background:
        var(--tema-superficie-3) !important;

    border-color:
        var(--tema-borde) !important;

    color:
        var(--tema-texto) !important;

    color-scheme:
        dark;
}


html[data-theme="dark"]
.parking-boton-consultar {
    background:
        #354f9c !important;

    color:
        #ffffff !important;
}


html[data-theme="dark"]
.parking-boton-consultar:hover:not(:disabled) {
    background:
        #4561b7 !important;
}


html[data-theme="dark"]
.parking-disponibilidad-ok {
    color:
        #83d4a2 !important;
}


html[data-theme="dark"]
.parking-disponibilidad-error {
    color:
        #ff939c !important;
}


html[data-theme="dark"]
.parking-disponibilidad-info {
    color:
        var(--tema-texto-secundario) !important;
}
html[data-theme="dark"]
.parking-boton-dia-completo {
    background:
        var(--tema-superficie-3) !important;

    border-color:
        #6d85dc !important;

    color:
        #dce5ff !important;
}


html[data-theme="dark"]
.parking-boton-dia-completo:hover:not(:disabled) {
    background:
        #26365f !important;

    color:
        #ffffff !important;
}


html[data-theme="dark"]
.parking-boton-dia-completo-icono {
    background:
        #26365f !important;
}
/* =========================================================
   HISTÓRICO PARKING - MODO OSCURO
   ========================================================= */

html[data-theme="dark"]
.historial-parking-titulo-tabla {
    background:
        var(--tema-superficie-2) !important;

    border:
        1px solid
        var(--tema-borde) !important;
}


html[data-theme="dark"]
.historial-parking-titulo-tabla h2 {
    color:
        var(--tema-texto) !important;
}


html[data-theme="dark"]
.historial-parking-titulo-tabla p {
    color:
        var(--tema-texto-secundario) !important;
}


html[data-theme="dark"]
.historial-parking-titulo-tabla > i {
    background:
        #303c78 !important;

    color:
        #ffffff !important;
}


/*
 * Visitantes 2
 */
html[data-theme="dark"]
.historial-parking-bloque-visitas
.historial-parking-titulo-tabla > i {
    background:
        #8f4f2d !important;
}


/*
 * Tablas del histórico
 */
html[data-theme="dark"]
.tabla-historico-parking {
    background:
        var(--tema-superficie-1) !important;

    border-color:
        var(--tema-borde) !important;
}


html[data-theme="dark"]
.tabla-historico-parking table {
    background:
        var(--tema-superficie-1) !important;

    color:
        var(--tema-texto) !important;
}


html[data-theme="dark"]
.tabla-historico-parking th {
    background:
        var(--tema-superficie-3) !important;

    color:
        var(--tema-texto) !important;

    border-color:
        var(--tema-borde) !important;
}


html[data-theme="dark"]
.tabla-historico-parking td {
    background:
        var(--tema-superficie-1) !important;

    color:
        var(--tema-texto) !important;

    border-color:
        var(--tema-borde) !important;
}


html[data-theme="dark"]
.tabla-historico-parking tbody tr:hover td {
    background:
        var(--tema-superficie-2) !important;
}


/*
 * Estados
 */
html[data-theme="dark"]
.estado-historico-parking-confirmada {
    background:
        rgba(
            46,
            160,
            90,
            0.18
        ) !important;

    color:
        #8fe0ad !important;
}


html[data-theme="dark"]
.estado-historico-parking-cancelada {
    background:
        rgba(
            200,
            70,
            70,
            0.18
        ) !important;

    color:
        #f0a3a3 !important;
}


/*
 * Botón eliminar
 */
html[data-theme="dark"]
.boton-borrar-historico-parking {
    background:
        transparent !important;

    border-color:
        #8c4d4d !important;

    color:
        #e58c8c !important;
}


html[data-theme="dark"]
.boton-borrar-historico-parking:hover {
    background:
        rgba(
            190,
            70,
            70,
            0.18
        ) !important;

    color:
        #ffb0b0 !important;
}


/*
 * Botón exportar Excel
 */
html[data-theme="dark"]
.boton-exportar-historico-parking {
    background:
        #303c78 !important;

    color:
        #ffffff !important;
}


html[data-theme="dark"]
.boton-exportar-historico-parking:hover {
    background:
        #43539a !important;

    color:
        #ffffff !important;
}
html[data-theme="dark"]
.historial-parking-bloque-pmr
.historial-parking-titulo-tabla > i {
    background:
        #527f70 !important;

    color:
        #ffffff !important;
}