/*
 * Monitoreo Ambiental IoT - Estilos complementarios
 * Repositorio: https://github.com/llmd7/monitoreo-ambiental-iot.git
 *
 * El maquetado principal (layout, espaciado, colores, responsividad) se
 * resuelve con las utilidades de Tailwind CSS directamente en las
 * plantillas. Este archivo se usa via CDN (cdn.tailwindcss.com), que
 * genera las clases en tiempo de ejecucion sin un paso de build; por eso
 * no se usan aqui directivas de compilacion (@apply, @tailwind), que solo
 * funcionan con el CLI/PostCSS de Tailwind.
 *
 * Aqui solo se definen: la paleta de referencia del proyecto (cafe/blanco/
 * negro) como variables CSS, y un pequeno conjunto de detalles visuales
 * que no tienen una utilidad directa de Tailwind (scrollbar, transiciones
 * de foco, estado de carga). Esta paleta es la de los componentes de la
 * interfaz; las graficas de Apache ECharts mantienen sus propios colores
 * (ver static/js/dashboard-charts.js), sin relacion con estas variables.
 */

:root {
  /* Paleta cafe/blanco/negro del proyecto (coincide con "marca" en tailwind.config, ver base.html) */
  --color-cafe-primario: #6f4a2e;
  --color-cafe-oscuro: #231710;
  --color-gris-texto: #334155;
  --color-gris-claro: #f1f5f9;
  --color-blanco: #ffffff;
}

* {
  box-sizing: border-box;
}

body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* Scrollbar sobria (cafe/gris), coherente con la paleta del proyecto */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--color-gris-claro);
}

::-webkit-scrollbar-thumb {
  background-color: #b3835a;
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-cafe-primario);
}

/* Estado de carga del boton de login mientras espera la respuesta de /login */
button:disabled {
  cursor: progress;
}

/*
 * Contenedor de cada grafica de Apache ECharts (ver
 * static/js/dashboard-charts.js). echarts.init() necesita que su
 * contenedor tenga un alto explicito para poder dibujar el canvas/SVG;
 * min-height evita que la grafica colapse a 0px antes de que el
 * JavaScript termine de inicializarla, y en pantallas angostas donde el
 * contenedor width se reduce.
 */
.grafico-contenedor {
  width: 100%;
  min-height: 300px;
  height: 300px;
}

/*
 * Enlaces del menu lateral entre las paginas autenticadas (ver
 * templates/base_autenticada.html): icono + etiqueta, en fila completa.
 * El estado "activo" (pagina actual) se asigna desde static/js/app.js
 * comparando data-nav con la ruta actual.
 */
.enlace-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-gris-texto);
  transition: background-color 150ms, color 150ms;
}

.enlace-nav svg {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

.enlace-nav:hover {
  background-color: var(--color-gris-claro);
  color: var(--color-cafe-primario);
}

.enlace-nav-activo,
.enlace-nav-activo:hover {
  background-color: #f0e4d7;
  color: var(--color-cafe-oscuro);
}

/* Botones de filtro tipo pestana (ver templates/alertas.html) */
.filtro-boton {
  padding: 0.375rem 0.875rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-gris-texto);
  transition: background-color 150ms, color 150ms;
}

.filtro-boton:hover {
  background-color: var(--color-gris-claro);
}

.filtro-boton-activo,
.filtro-boton-activo:hover {
  background-color: var(--color-cafe-primario);
  color: var(--color-blanco);
}

/* Tarjeta seleccionable (checkbox/radio dentro de un <label>, ver
   templates/reportes.html): el estado "activa" se marca a mano con esta
   clase (ver static/js/reportes.js, actualizarTarjetasSeleccionables()) en
   vez de la variante "has-[:checked]:" de Tailwind, porque el tema oscuro
   de este archivo sobreescribe clases de utilidad por su nombre exacto
   (".bg-marca-50", no "has-[:checked]:bg-marca-50") y nunca llegaba a
   aplicarse: quedaba el fondo claro fijo de "marca-50" con texto ya
   aclarado por el tema oscuro, ilegible entre si (fondo claro + texto claro). */
.tarjeta-seleccionable-activa {
  border-color: #b3835a; /* marca-400 */
  background-color: #faf6f2; /* marca-50 */
}

/* Interruptor on/off (ver templates/configuracion.html) */
.interruptor {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 9999px;
  background-color: #cbd5e1;
  transition: background-color 150ms;
  flex-shrink: 0;
}

.interruptor[aria-checked="true"] {
  background-color: var(--color-cafe-primario);
}

.interruptor-circulo {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  background-color: var(--color-blanco);
  transition: transform 150ms;
}

.interruptor[aria-checked="true"] .interruptor-circulo {
  transform: translateX(20px);
}

/*
 * Interruptor de tema claro/oscuro (boton "tema-boton" del menu lateral,
 * ver templates/base_autenticada.html y static/js/app.js: alternarTema()).
 * Un "cielo" en miniatura, dentro de la misma paleta cafe/blanco/negro del
 * resto del sitio (ver marca-* en tailwind.config, templates/base.html) en
 * vez de los tonos azul/morado genericos de un interruptor de ejemplo: el
 * track pasa de cafe claro a cafe casi negro con estrellas, y el circulo
 * de un sol dorado (calido, coherente con la marca) a una luna color
 * pergamino, para que se entienda de un vistazo sin texto ni icono aparte.
 */
.interruptor-tema {
  position: relative;
  width: 56px;
  height: 30px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #f0e4d7, #faf6f2);
  box-shadow: inset 0 1px 2px rgba(35, 23, 16, 0.15);
  transition: background 300ms ease;
  flex-shrink: 0;
  overflow: hidden;
}

.interruptor-tema[aria-checked="true"] {
  background: linear-gradient(135deg, #3d281a, #150d07);
  /* Estrellas: unos puntos claros repartidos por el track, solo visibles sobre el "cielo" nocturno */
  background-image:
    radial-gradient(1.3px 1.3px at 12px 9px, rgba(240, 228, 215, 0.85), transparent),
    radial-gradient(1.1px 1.1px at 20px 20px, rgba(240, 228, 215, 0.65), transparent),
    radial-gradient(1px 1px at 30px 8px, rgba(240, 228, 215, 0.55), transparent),
    linear-gradient(135deg, #3d281a, #150d07);
}

.interruptor-tema-circulo {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  background: radial-gradient(circle at 35% 32%, #ffe9b8, #d99a3e 72%);
  box-shadow: 0 0 10px 1px rgba(179, 131, 90, 0.55);
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), background 300ms ease, box-shadow 300ms ease;
}

.interruptor-tema[aria-checked="true"] .interruptor-tema-circulo {
  transform: translateX(26px);
  background: radial-gradient(circle at 35% 32%, #faf6f2, #cca87d 72%);
  box-shadow: 0 0 6px 0 rgba(204, 168, 125, 0.35);
}

/* =============================================================================
 * Animaciones y microinteracciones
 * Pensadas para que la interfaz se sienta viva sin distraer: entradas
 * suaves de tarjetas/paneles, botones con respuesta al pasar el mouse o
 * al hacer clic, y una carga tipo "skeleton" en vez de dejar espacios en
 * blanco mientras llegan los datos. Se respeta prefers-reduced-motion
 * para quien prefiera (o necesite) el mínimo de movimiento en pantalla.
 * ============================================================================= */

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes skeleton-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes girar {
  to { transform: rotate(360deg); }
}

/* Tarjetas/paneles principales de cada pagina: entrada suave y escalonada.
   El retraso lo asigna static/js/app.js (variable --retraso-entrada) segun
   el orden de aparicion en la pagina. */
.animar-entrada {
  animation: fade-in-up 500ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--retraso-entrada, 0ms);
}

/* Tarjetas/filas con interaccion (clic, hover) en toda la interfaz */
.bg-white.rounded-xl,
.tarjeta-interactiva {
  transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease;
}

/* Tarjetas que representan una entidad dentro de una grilla (miembros de
   una comunidad, etc.): se levantan levemente al pasar el mouse. */
.tarjeta-interactiva:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 28px -14px rgba(35, 23, 16, 0.22);
  border-color: var(--color-cafe-primario);
}

button,
.enlace-nav,
.filtro-boton,
a {
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease,
    box-shadow 150ms ease, transform 120ms ease, opacity 150ms ease;
}

button:not(:disabled):active {
  transform: scale(0.97);
}

/* Carga tipo "skeleton": reemplaza los espacios en blanco/"Cargando..."
   mientras llegan los datos por primera vez. */
.skeleton {
  background: linear-gradient(90deg, #f1f5f9 25%, #ece1d5 37%, #f1f5f9 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.6s ease infinite;
  border-radius: 0.5rem;
  color: transparent !important;
}

/* Spinner pequeno, para botones en estado "guardando..." */
.girando {
  display: inline-block;
  animation: girar 700ms linear infinite;
}

/* Tarjetas de navegacion del menu de /perfil/ (ver templates/perfil.html,
   #perfil-menu): cada una lleva a un apartado distinto. El tamano/alineacion
   (padding, gap, flex-col/text-center) se deja a las clases de Tailwind en
   el propio HTML; aca solo lo que no cambia entre instancias. */
.tarjeta-nav-perfil {
  display: flex;
  align-items: center;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease;
}

.tarjeta-nav-perfil:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 28px -14px rgba(35, 23, 16, 0.22);
  border-color: var(--color-cafe-primario);
}

.tarjeta-nav-perfil-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: var(--color-cafe-50, #faf6f2);
  color: var(--color-cafe-primario);
  flex-shrink: 0;
  margin: 0 auto;
}

/* Boton "Volver" de cada apartado de /perfil/ */
.boton-volver-perfil {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 0.875rem;
}

.boton-volver-perfil:hover {
  color: var(--color-cafe-primario);
}

/* =============================================================================
 * Notificaciones (toast): retroalimentacion breve de una accion (guardado,
 * error, etc.), en vez de banners fijos que empujan el resto de la pagina.
 * El contenedor se crea solo, la primera vez que se llama a mostrarToast()
 * en static/js/app.js.
 * ============================================================================= */
.toast-contenedor {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  max-width: min(380px, calc(100vw - 2rem));
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  background: var(--color-blanco);
  border-radius: 0.75rem;
  box-shadow: 0 20px 35px -12px rgba(35, 23, 16, 0.28), 0 4px 10px rgba(35, 23, 16, 0.08);
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--color-cafe-primario);
  opacity: 0;
  transform: translateX(24px) scale(0.96);
  transition: opacity 240ms ease, transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--color-gris-texto);
  pointer-events: auto;
}

.toast-visible {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.toast-exito { border-left-color: #16a34a; }
.toast-error { border-left-color: #dc2626; }
.toast-info { border-left-color: var(--color-cafe-primario); }

.toast-icono {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.0625rem;
}

/* Modal (ver templates/alertas.html): transicion de apertura/cierre en
   vez de un cambio instantaneo de "hidden". Controlado desde JS
   (abrirModal()/cerrarModal() en static/js/alertas.js) alternando la
   clase "modal-visible" un instante despues de quitar "hidden". */
.modal-fondo {
  opacity: 0;
  transition: opacity 200ms ease;
}

.modal-fondo.modal-visible {
  opacity: 1;
}

.modal-panel {
  transform: scale(0.96) translateY(8px);
  opacity: 0;
  transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease;
}

.modal-fondo.modal-visible .modal-panel {
  transform: scale(1) translateY(0);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =============================================================================
 * Reportes imprimibles (boton "Descargar reporte" de Analisis)
 * Usa la funcion de impresion nativa del navegador (Guardar como PDF) en
 * vez de una libreria de generacion de PDF: se oculta el menu lateral, el
 * banner de notificaciones y cualquier control marcado como
 * ".no-imprimir" (filtros, botones), dejando solo el contenido del
 * reporte. "@page" fuerza hoja vertical (el navegador, si no, recuerda la
 * ultima orientacion usada, que puede quedar en horizontal) y margenes
 * angostos para aprovechar mejor cada hoja. static/js/analisis.js
 * redimensiona los graficos de Apache ECharts (canvas, no se reflowan
 * solos con CSS) al ancho real de la hoja justo antes de imprimir -ver
 * evento "beforeprint"-, que es lo que evitaba que entraran completos y
 * se vieran cortados/desordenados.
 * ============================================================================= */
@media print {
  @page {
    size: portrait;
    margin: 14mm 12mm;
  }

  aside,
  #banner-notificaciones,
  .no-imprimir {
    display: none !important;
  }

  body {
    background: white;
  }

  /* La grilla de Correlacion + Pronostico (2 columnas en pantalla) no
     entra comoda en una hoja vertical: se apilan en una sola columna. */
  .imprimir-una-columna {
    display: block !important;
  }
  .imprimir-una-columna > * + * {
    margin-top: 1rem;
  }

  /* Evita que un grafico (imagen de canvas) quede cortado a la mitad
     entre dos hojas; el resto del contenido (texto, tablas) si puede
     fluir libremente entre hojas, que es lo esperado al imprimir. */
  .grafico-contenedor,
  .reporte-bloque {
    break-inside: avoid;
  }
}

/* Calendario/selector de hora de Flatpickr (reemplaza los <input type="date">
   y type="time"> nativos: su calendario del sistema operativo no se puede
   restilizar con CSS de ningun modo; ver inicializarSelectoresDeFechaHora()
   en static/js/app.js). Selectores tomados de la hoja real de la libreria,
   no inventados, para no depender de clases que Flatpickr no genera. */
.flatpickr-calendar {
  background: var(--color-blanco);
  border: 1px solid #e0c7ab; /* marca-200 */
  border-radius: 0.75rem;
  box-shadow: 0 10px 25px -8px rgba(35, 23, 16, 0.25);
  font-family: inherit;
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after {
  border-bottom-color: #e0c7ab; /* marca-200 */
}
.flatpickr-months {
  padding-top: 0.25rem;
}
.flatpickr-current-month {
  color: var(--color-cafe-oscuro);
  font-weight: 600;
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  color: var(--color-cafe-oscuro);
  font-weight: 600;
}
.flatpickr-prev-month,
.flatpickr-next-month {
  color: var(--color-cafe-primario);
  fill: var(--color-cafe-primario);
}
.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
  color: var(--color-cafe-primario);
}
.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg {
  fill: var(--color-cafe-primario);
}
span.flatpickr-weekday {
  background: var(--color-blanco);
  color: #8b5e3c; /* marca-500 */
  font-weight: 600;
}
.flatpickr-day {
  color: var(--color-gris-texto);
  border-radius: 0.5rem;
}
.flatpickr-day.today {
  border-color: #b3835a; /* marca-400 */
}
.flatpickr-day:hover,
.flatpickr-day:focus {
  background: #f0e4d7; /* marca-100 */
  border-color: #f0e4d7;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange,
.flatpickr-day.endRange:hover {
  background: var(--color-cafe-primario);
  border-color: var(--color-cafe-primario);
  color: var(--color-blanco);
}
.flatpickr-day.inRange {
  background: #faf6f2; /* marca-50 */
  border-color: #faf6f2;
  box-shadow: -5px 0 0 #faf6f2, 5px 0 0 #faf6f2;
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: #cbb89e;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.notAllowed {
  color: #e0d5c4;
}
.flatpickr-time {
  border-top: 1px solid #f0e4d7; /* marca-100 */
}
.flatpickr-time input {
  color: var(--color-cafe-oscuro);
}
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:hover,
.numInputWrapper:hover {
  background: #faf6f2; /* marca-50 */
}
.flatpickr-time .arrowUp:after {
  border-bottom-color: var(--color-cafe-primario);
}
.flatpickr-time .arrowDown:after {
  border-top-color: var(--color-cafe-primario);
}

/* Choices.js: reemplaza el <select> nativo de "Dispositivos nuevos
   detectados" (ver templates/perfil.html) por una lista desplegable con
   estilo propio y buscador, con la misma paleta cafe/marca del resto del
   sitio. Selectores tomados de la hoja real de la libreria, no
   inventados (mismo criterio que con Flatpickr mas arriba). */
.choices {
  margin-bottom: 0;
  font-size: 0.875rem; /* text-sm, igual que el input manual de al lado */
  /* Choices.js envuelve el <select> original en este div nuevo y no le copia
     la clase "flex-1" que traia (ver #dispositivos-sin-asociar-select en
     perfil.html): sin esto, dentro del flex junto al boton "Asociar" se
     encogia al ancho minimo de su contenido, y como el menu desplegable
     hereda ese mismo ancho (width:100% de .choices en la libreria), un
     device_id largo como "ESP32_A1B2C3" terminaba partido letra por letra
     en una columna angosta en vez de mostrarse en una sola linea.
     min-width:0 es necesario ademas de flex: sin el, un flex item no se
     encoge mas alla del ancho de su contenido aunque tenga flex-grow. */
  flex: 1 1 auto;
  min-width: 0;
}
.choices__inner {
  background: var(--color-blanco);
  border: 1px solid #cbd5e1; /* slate-300, igual que el resto de inputs del formulario */
  border-radius: 0.5rem;
  min-height: 0;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
}
.is-focused .choices__inner,
.is-open .choices__inner {
  border-color: var(--color-cafe-primario);
  box-shadow: 0 0 0 2px rgba(111, 74, 46, 0.15);
}
.choices[data-type*="select-one"]::after {
  border-color: #8b5e3c transparent transparent; /* marca-500 */
}
.choices[data-type*="select-one"].is-open::after {
  border-color: transparent transparent #8b5e3c;
}
.choices[data-type*="select-one"] .choices__input {
  background: var(--color-blanco);
  border-bottom: 1px solid #f0e4d7; /* marca-100 */
}
.choices__list--dropdown,
.choices__list[aria-expanded] {
  background: var(--color-blanco);
  border-color: #e0c7ab; /* marca-200 */
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item {
  font-size: 0.875rem;
  color: var(--color-gris-texto);
}
.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background-color: #faf6f2; /* marca-50 */
}
.choices__placeholder {
  opacity: 1;
  color: #94a3b8; /* slate-400, mismo tono que el placeholder del input manual */
}

/* =============================================================================
 * Tema oscuro (boton "tema-boton" en templates/base_autenticada.html, ver
 * static/js/app.js: alternarTema()). Se activa con el atributo
 * "data-tema='oscuro'" en <html>, aplicado lo antes posible por un script
 * embebido en templates/base.html (para no parpadear en tema claro un
 * instante antes de aplicar el guardado) y alternado por inicializarInterruptorTema().
 *
 * Tailwind CDN no compila hojas de estilo, genera las clases de utilidad
 * segun lo que encuentra en el DOM en tiempo real; en vez de reescribir
 * cada plantilla con variantes "dark:", se sobreescriben aqui, con
 * "!important", las clases de color que ya se usan en todo el sitio
 * (bg-white, text-slate-700, border-slate-200, etc: ver el inventario en
 * el historial de este archivo). Los componentes propios (.enlace-nav,
 * .filtro-boton, .interruptor, .toast, .skeleton) se ajustan aparte, sin
 * pasar por las variables de :root de arriba, porque esas ya se usan en
 * contextos que deben seguir siendo claros en cualquier tema (el circulo
 * blanco del interruptor, el fondo del toast).
 *
 * Excepcion deliberada: los graficos de Apache ECharts (.grafico-contenedor)
 * y el mapa (Leaflet/OpenStreetMap) NO se re-pintan aqui - son un
 * <canvas>/tiles ya dibujados con texto oscuro fijo por JavaScript, no
 * texto/CSS que se pueda recolorear con una regla como esta. En vez de
 * dejarlos con texto invisible sobre un fondo oscuro, se les mantiene un
 * panel claro (ver mas abajo), igual que una foto o un mapa incrustado en
 * un articulo en modo oscuro.
 * ============================================================================= */
html[data-tema="oscuro"] {
  --fondo-pagina: #1c1712;
  --fondo-tarjeta: #262019;
  --fondo-hundido: #201a14;
  --fondo-hover: #332a1e;
  --borde-oscuro: #3d3527;
  --texto-fuerte-oscuro: #f2ece2;
  --texto-medio-oscuro: #c2b6a1;
  --texto-suave-oscuro: #93876f;
}

html[data-tema="oscuro"] body {
  background-color: var(--fondo-pagina);
}

/* Fondos */
html[data-tema="oscuro"] .bg-white {
  background-color: var(--fondo-tarjeta) !important;
}
html[data-tema="oscuro"] .bg-slate-50 {
  background-color: var(--fondo-hundido) !important;
}
html[data-tema="oscuro"] .bg-slate-100 {
  background-color: var(--fondo-pagina) !important;
}
html[data-tema="oscuro"] .hover\:bg-slate-50:hover {
  background-color: var(--fondo-hover) !important;
}

/* Texto */
html[data-tema="oscuro"] .text-slate-700,
html[data-tema="oscuro"] .text-slate-800 {
  color: var(--texto-fuerte-oscuro) !important;
}
html[data-tema="oscuro"] .text-slate-600 {
  color: var(--texto-medio-oscuro) !important;
}
html[data-tema="oscuro"] .text-slate-300,
html[data-tema="oscuro"] .text-slate-400,
html[data-tema="oscuro"] .text-slate-500 {
  color: var(--texto-suave-oscuro) !important;
}
html[data-tema="oscuro"] .hover\:text-slate-600:hover,
html[data-tema="oscuro"] .hover\:text-slate-700:hover {
  color: var(--texto-fuerte-oscuro) !important;
}

/* Bordes */
html[data-tema="oscuro"] .border-slate-100,
html[data-tema="oscuro"] .border-slate-200,
html[data-tema="oscuro"] .border-slate-300 {
  border-color: var(--borde-oscuro) !important;
}
html[data-tema="oscuro"] .hover\:border-slate-400:hover {
  border-color: var(--texto-suave-oscuro) !important;
}

/* Paleta de marca (texto/fondos claros pensados para fondo blanco) */
html[data-tema="oscuro"] .text-marca-600,
html[data-tema="oscuro"] .text-marca-700,
html[data-tema="oscuro"] .text-marca-800,
html[data-tema="oscuro"] .text-marca-900,
html[data-tema="oscuro"] .hover\:text-marca-600:hover,
html[data-tema="oscuro"] .hover\:text-marca-800:hover {
  color: #d8b88e !important;
}
html[data-tema="oscuro"] .bg-marca-50,
html[data-tema="oscuro"] .bg-marca-100,
html[data-tema="oscuro"] .hover\:bg-marca-50:hover {
  background-color: var(--fondo-hover) !important;
}

/* Insignias de severidad/estado (favorable, alertas, errores): fondo
   pastel + texto oscuro en tema claro, se invierten a fondo oscuro +
   texto claro para mantener el contraste. */
html[data-tema="oscuro"] .bg-green-100,
html[data-tema="oscuro"] .bg-green-50 {
  background-color: #143622 !important;
}
html[data-tema="oscuro"] .text-green-600,
html[data-tema="oscuro"] .text-green-700,
html[data-tema="oscuro"] .text-green-800 {
  color: #86efac !important;
}
html[data-tema="oscuro"] .bg-amber-100,
html[data-tema="oscuro"] .bg-amber-50 {
  background-color: #3a2c0f !important;
}
html[data-tema="oscuro"] .text-amber-600,
html[data-tema="oscuro"] .text-amber-800,
html[data-tema="oscuro"] .text-amber-900 {
  color: #fcd34d !important;
}
html[data-tema="oscuro"] .bg-red-100,
html[data-tema="oscuro"] .bg-red-50 {
  background-color: #3a1414 !important;
}
html[data-tema="oscuro"] .text-red-600,
html[data-tema="oscuro"] .text-red-700,
html[data-tema="oscuro"] .text-red-800 {
  color: #fca5a5 !important;
}
html[data-tema="oscuro"] .hover\:bg-red-50:hover {
  background-color: #3a1414 !important;
}
html[data-tema="oscuro"] .bg-orange-100 {
  background-color: #3a2211 !important;
}
html[data-tema="oscuro"] .text-orange-800 {
  color: #fdba74 !important;
}

/* Campos de formulario: sin una clase bg-* explicita, heredarian el
   fondo blanco por defecto del navegador. */
html[data-tema="oscuro"] input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
html[data-tema="oscuro"] select,
html[data-tema="oscuro"] textarea {
  background-color: var(--fondo-hundido);
  color: var(--texto-fuerte-oscuro);
  border-color: var(--borde-oscuro);
}
html[data-tema="oscuro"] ::placeholder {
  color: var(--texto-suave-oscuro);
  opacity: 1;
}

/* Componentes propios (no pasan por las variables de :root, ver nota arriba) */
html[data-tema="oscuro"] .enlace-nav {
  color: var(--texto-medio-oscuro);
}
html[data-tema="oscuro"] .enlace-nav:hover {
  background-color: var(--fondo-hover);
  color: var(--color-cafe-primario);
}
html[data-tema="oscuro"] .enlace-nav-activo,
html[data-tema="oscuro"] .enlace-nav-activo:hover {
  background-color: #4a3c2a;
  color: #f0e4d7;
}
html[data-tema="oscuro"] .filtro-boton {
  color: var(--texto-medio-oscuro);
}
html[data-tema="oscuro"] .filtro-boton:hover {
  background-color: var(--fondo-hover);
}
html[data-tema="oscuro"] .tarjeta-seleccionable-activa {
  border-color: #b3835a; /* marca-400: se ve bien sobre el fondo oscuro tal cual, sin cambios */
  background-color: var(--fondo-hover);
}
html[data-tema="oscuro"] .interruptor {
  background-color: #4a4030;
}
html[data-tema="oscuro"] .toast {
  background: var(--fondo-tarjeta);
  color: var(--texto-fuerte-oscuro);
  box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.35);
}
html[data-tema="oscuro"] .skeleton {
  background: linear-gradient(90deg, #241e17 25%, #362c1c 37%, #241e17 63%);
  background-size: 400% 100%;
}

/* Los graficos de Apache ECharts (.grafico-contenedor) ya se redibujan
   con sus propios colores por tema (ver coloresGraficoSegunTema() en
   static/js/app.js), asi que su panel tambien pasa a oscuro como
   cualquier otra tarjeta (.bg-white, ver arriba). El mapa (Leaflet +
   tiles de OpenStreetMap) es la unica excepcion real: son imagenes
   externas que no se pueden recolorear, asi que se le deja un panel
   claro a proposito, como una foto incrustada en un articulo oscuro. */
html[data-tema="oscuro"] #mapa-dispositivo {
  background-color: #f8fafc;
  border-radius: 0.5rem;
}

/* Calendario de Flatpickr en tema oscuro (ver bloque claro arriba). El dia
   seleccionado se deja con el mismo cafe-primario: ya es el color usado para
   "activo" en el resto del sitio en ambos temas (.filtro-boton-activo), asi
   que no necesita una variante propia. */
html[data-tema="oscuro"] .flatpickr-calendar {
  background: var(--fondo-tarjeta);
  border-color: var(--borde-oscuro);
  box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.35);
}
html[data-tema="oscuro"] .flatpickr-calendar.arrowTop::before,
html[data-tema="oscuro"] .flatpickr-calendar.arrowTop::after {
  border-bottom-color: var(--borde-oscuro);
}
html[data-tema="oscuro"] .flatpickr-current-month,
html[data-tema="oscuro"] .flatpickr-current-month .flatpickr-monthDropdown-months,
html[data-tema="oscuro"] .flatpickr-current-month input.cur-year {
  color: var(--texto-fuerte-oscuro);
}
html[data-tema="oscuro"] .flatpickr-current-month .flatpickr-monthDropdown-months {
  background: var(--fondo-tarjeta);
}
html[data-tema="oscuro"] .flatpickr-prev-month,
html[data-tema="oscuro"] .flatpickr-next-month {
  color: var(--texto-medio-oscuro);
  fill: var(--texto-medio-oscuro);
}
html[data-tema="oscuro"] span.flatpickr-weekday {
  background: var(--fondo-tarjeta);
  color: var(--texto-suave-oscuro);
}
html[data-tema="oscuro"] .flatpickr-day {
  color: var(--texto-medio-oscuro);
}
html[data-tema="oscuro"] .flatpickr-day.today {
  border-color: #b3835a; /* marca-400: igual que en claro, visible sobre el fondo oscuro */
}
html[data-tema="oscuro"] .flatpickr-day:hover,
html[data-tema="oscuro"] .flatpickr-day:focus {
  background: var(--fondo-hover);
  border-color: var(--fondo-hover);
  color: var(--texto-fuerte-oscuro);
}
html[data-tema="oscuro"] .flatpickr-day.inRange {
  background: var(--fondo-hundido);
  border-color: var(--fondo-hundido);
  box-shadow: -5px 0 0 var(--fondo-hundido), 5px 0 0 var(--fondo-hundido);
}
html[data-tema="oscuro"] .flatpickr-day.prevMonthDay,
html[data-tema="oscuro"] .flatpickr-day.nextMonthDay {
  color: var(--texto-suave-oscuro);
}
html[data-tema="oscuro"] .flatpickr-day.flatpickr-disabled,
html[data-tema="oscuro"] .flatpickr-day.notAllowed {
  color: var(--borde-oscuro);
}
html[data-tema="oscuro"] .flatpickr-time {
  border-top-color: var(--borde-oscuro);
}
html[data-tema="oscuro"] .flatpickr-time input {
  color: var(--texto-fuerte-oscuro);
  background: transparent;
}
html[data-tema="oscuro"] .flatpickr-time .flatpickr-am-pm:hover,
html[data-tema="oscuro"] .flatpickr-time input:hover,
html[data-tema="oscuro"] .numInputWrapper:hover {
  background: var(--fondo-hover);
}

/* Choices.js en tema oscuro (ver bloque claro mas arriba). */
html[data-tema="oscuro"] .choices__inner {
  background: var(--fondo-tarjeta);
  border-color: var(--borde-oscuro);
  color: var(--texto-fuerte-oscuro);
}
html[data-tema="oscuro"] .is-focused .choices__inner,
html[data-tema="oscuro"] .is-open .choices__inner {
  border-color: #b3835a; /* marca-400: igual que en claro, visible sobre el fondo oscuro */
}
html[data-tema="oscuro"] .choices__list--single .choices__item {
  color: var(--texto-fuerte-oscuro);
}
html[data-tema="oscuro"] .choices[data-type*="select-one"] .choices__input {
  background: var(--fondo-tarjeta);
  border-bottom-color: var(--borde-oscuro);
  color: var(--texto-fuerte-oscuro);
}
html[data-tema="oscuro"] .choices__list--dropdown,
html[data-tema="oscuro"] .choices__list[aria-expanded] {
  background: var(--fondo-tarjeta);
  border-color: var(--borde-oscuro);
}
html[data-tema="oscuro"] .choices__list--dropdown .choices__item,
html[data-tema="oscuro"] .choices__list[aria-expanded] .choices__item {
  color: var(--texto-medio-oscuro);
}
html[data-tema="oscuro"] .choices__list--dropdown .choices__item--selectable.is-highlighted,
html[data-tema="oscuro"] .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background-color: var(--fondo-hover);
}
html[data-tema="oscuro"] .choices__placeholder {
  color: var(--texto-suave-oscuro);
}