/* ============================ MODO NOCTURNO ============================
   Estilos compartidos: interruptor luna/sol + tema oscuro (html.night ...).
   Cárgalo DESPUÉS de dashboard.css / sidebar.css / session.css para poder
   sobreescribir sus colores.
   ==================================================================== */

/* -------------------- Interruptor luna / sol -------------------- */
.checkbox-wrapper-5 {
  display: flex;
  justify-content: center;
  margin: 0 0 22px;
}

.checkbox-wrapper-5 .check {
  --size: 34px;
  position: relative;
  background: linear-gradient(90deg, #6d5bd0, #8f7be8);
  line-height: 0;
  perspective: 400px;
  font-size: var(--size);
}

.checkbox-wrapper-5 .check input[type="checkbox"],
.checkbox-wrapper-5 .check label,
.checkbox-wrapper-5 .check label::before,
.checkbox-wrapper-5 .check label::after,
.checkbox-wrapper-5 .check {
  appearance: none;
  display: inline-block;
  border-radius: var(--size);
  border: 0;
  transition: 0.35s ease-in-out;
  box-sizing: border-box;
  cursor: pointer;
}

.checkbox-wrapper-5 .check label {
  width: calc(2.2 * var(--size));
  height: var(--size);
  background: #cfd6e6;
  overflow: hidden;
}

.checkbox-wrapper-5 .check input[type="checkbox"] {
  position: absolute;
  z-index: 3;
  width: calc(0.8 * var(--size));
  height: calc(0.8 * var(--size));
  top: calc(0.1 * var(--size));
  left: calc(0.1 * var(--size));
  background: linear-gradient(45deg, #dedede, #ffffff);
  box-shadow: 0 6px 7px rgba(0, 0, 0, 0.3);
  outline: none;
  margin: 0;
}

.checkbox-wrapper-5 .check input[type="checkbox"]:checked {
  left: calc(1.3 * var(--size));
}

/* Sin marcar = día (riel gris); marcado = noche (deja ver el gradiente) */
.checkbox-wrapper-5 .check input[type="checkbox"]:checked + label {
  background: transparent;
}

/* Luna a la izquierda, sol a la derecha; el pomo tapa el que no aplica */
.checkbox-wrapper-5 .check label::before,
.checkbox-wrapper-5 .check label::after {
  position: absolute;
  top: 0;
  height: var(--size);
  line-height: var(--size);
  font-size: calc(0.52 * var(--size));
  z-index: 2;
}
.checkbox-wrapper-5 .check label::before {
  content: "\1F319"; /* 🌙 */
  left: calc(0.3 * var(--size));
}
.checkbox-wrapper-5 .check label::after {
  content: "\2600\FE0F"; /* ☀️ */
  right: calc(0.3 * var(--size));
}

/* -------------------- Tema oscuro -------------------- */
html.night body {
  background: #0b1020 !important;
  color: #e6e8ef;
}

html.night h1,
html.night h2,
html.night h3 { color: #cdd6ff; }

html.night a { color: #9db4ff; }

html.night #sidebar { background: #0a0f24; }

html.night #main-content::after { background: rgba(8, 11, 26, 0.82); }

/* Tarjetas / contenedores genéricos */
html.night .card,
html.night .cards-container,
html.night .registro-card,
html.night .registro-lista,
html.night #table-container,
html.night .panel,
html.night .box {
  /*background: #161c30;*/
  color: #e6e8ef;
  border-color: #2a3350;
}

html.night .card-text { color: #c7cde0; }

/* Tarjetas de resumen: mantener el código de color, pero en tono oscuro */
html.night .online-card    { background: #12331e; color: #4ade80; }
html.night .offline-card   { background: #3a1620; color: #f87171; }
html.night .low-battery-card,
html.night .SCC-err-card    { background: #38290f; color: #fbbf24; }
html.night .all-card       { background: #232a3d; color: #e6e8ef; }

/* Tarjetas KPI sin color de estado (LoRaWAN, WiFi...): en claro heredan el
   #e9e9e9 de .card, que con el texto claro del modo noche no se lee */
html.night .card.kpi-card:not(.all-card):not(.online-card):not(.offline-card):not(.low-battery-card):not(.SCC-err-card) {
  background: #151c2e;
  color: #e6e8ef;
}

/* Tarjetas de nodos / equipos (vista de dispositivos) */
html.night .device-card,
html.night .card-swipe .device-card {
  background: #171d31;
  color: #e6e8ef;
  border-color: #2a3350;
}
html.night .device-card.pressable:active { background: #222b45; }
html.night .device-header { color: #f0f2f8; }
html.night .device-row { color: #c7cde0; }
html.night .device-status.online  { color: #34d399; }
html.night .device-status.offline { color: #f87171; }
html.night .device-actions button {
  background: #1e263c;
  color: #e6e8ef;
  border: 1px solid #2f3958;
}

/* Tablas */
html.night table {
  background: #17191d;
  color: #e6e8ef;
  border-color: #2a3350;
}
html.night tr { background: transparent !important; }
html.night th {
  background: #1b2340 !important;
  color: #e6e8ef !important;
  border-color: #2f3958 !important;
}
html.night td {
  color: #e6e8ef;
  border-color: #2a3350 !important;
}
html.night tbody tr td,
html.night tr:nth-child(odd) td { background: transparent; }
html.night tr:nth-child(even) td { background: rgba(255, 255, 255, 0.045) !important; }
html.night tbody tr:hover td { background: rgba(255, 255, 255, 0.09) !important; }

/* Lista de notificaciones (modal): secciones "Nuevas" / "Leídas" */
html.night .notif-seccion-titulo { color: #9aa3bd; border-top-color: #2a3350; }
html.night .notif-fila { background: #1e263c; border-color: #2f3958; }
html.night .notif-fila.leida { background: #161c30; }
html.night .notif-fila .notif-msg { color: #e6e8ef; }
html.night .notif-fila .notif-fecha { color: #9aa3bd; }
html.night .notif-vacio { color: #9aa3bd; }

/* Pill de estado Online/Offline (tarjetas de Monitor LoRaWAN y Sensores) */
html.night .status-pill { border-color: #2f3958; color: #e6e8ef; }
html.night .status-pill.online  { background: rgba(11, 187, 119, 0.2); }
html.night .status-pill.offline { background: rgba(221, 51, 51, 0.2); }

/* Skeleton de carga: tonos oscuros acordes al fondo de la pantalla */
html.night .skeleton-block {
  background: linear-gradient(90deg, #171d31 25%, #262f4a 37%, #171d31 63%);
  background-size: 400% 100%;
}
html.night .skeleton-table { background: #23293d; }
html.night .tabla-skeleton { background: #23293d; }

/* Campos de formulario */
html.night input[type="text"],
html.night input[type="password"],
html.night input[type="number"],
html.night input[type="search"],
html.night input[type="email"],
html.night input[type="date"],
html.night input[type="time"],
html.night textarea,
html.night select {
  background: #1e263c !important;
  color: #e6e8ef !important;
  border-color: #2f3958 !important;
}
html.night input::placeholder,
html.night textarea::placeholder { color: #8b94ac; }

/* Tipos de campo que la lista de arriba no cubría (sin type, fecha-hora, etc.). */
html.night input:not([type]),
html.night input[type="tel"],
html.night input[type="url"],
html.night input[type="datetime-local"],
html.night input[type="month"],
html.night input[type="week"] {
  background: #1e263c !important;
  color: #e6e8ef !important;
  border-color: #2f3958 !important;
}

/* Partes nativas del navegador (lista desplegable de los select, calendario de
   los campos de fecha, flechas de los number): sin esto el navegador las pinta
   claras y, como heredan el texto claro de arriba, quedan letras blancas sobre
   fondo blanco. Solo en los controles: en todo el html cambiaría el color por
   defecto del texto de páginas que no tienen modo noche completo. */
html.night input,
html.night select,
html.night textarea { color-scheme: dark; }
html.night select option,
html.night select optgroup {
  background: #1e263c;
  color: #e6e8ef;
}

/* Autocompletado del navegador: Chrome/Edge le ponen un fondo celeste propio
   que ignora el background; se tapa con una sombra interior del color oscuro. */
html.night input:-webkit-autofill,
html.night input:-webkit-autofill:hover,
html.night input:-webkit-autofill:focus,
html.night textarea:-webkit-autofill,
html.night select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #1e263c inset !important;
  -webkit-text-fill-color: #e6e8ef !important;
  caret-color: #e6e8ef;
}

/* Modales compartidos */
html.night .modal-hist { background: rgba(0, 0, 0, 0.55); }
html.night .modal-content,
html.night .logout-modal-content {
  background: linear-gradient(160deg, rgba(24, 30, 52, 0.94) 0%, rgba(16, 20, 36, 0.9) 100%);
  border-color: rgba(255, 255, 255, 0.08);
  color: #e6e8ef;
}
html.night .modal-header,
html.night .modal-header strong { color: #e6e8ef; }
html.night .modal-body { color: #e6e8ef; }
html.night .modal-tabs { border-bottom-color: #2f3958; }
html.night .modal-tab-btn { color: #9aa3bd; }
html.night .modal-tab-btn:hover,
html.night .modal-tab-btn.active { color: #cdd6ff; }

/* Modales de Gestionar permisos / Gestor de usuarios (menú del sidebar) */
html.night #formUsuarioTitulo,
html.night #modalFormUsuario label { color: #e6e8ef; }

html.night #listaPermisos,
html.night #listaUsuarios { color: #e6e8ef; }
html.night #listaUsuarios > div {
  background: #1e263c !important;
  border-color: #2f3958 !important;
}

/* Modal de login */
html.night .login-card { background: #141a2c; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); }
html.night .login-title { color: #e6e8ef; }
html.night .login-field { background: #1e263c; }
html.night .login-field input { color: #e6e8ef; }
html.night .login-remember { color: #c7cde0; }
html.night .login-btn-guest { background: #1e263c; border-color: #2f3958; color: #c7cde0; }
html.night .login-btn-guest:hover { background: #262f49; }

/* Botones claros que quedarían cegadores */
html.night .btn-ver-mas,
html.night .hist-btn {
  background: #1e263c;
  border-color: #2f3958;
  color: #e6e8ef;
}
html.night .btn-ver-mas:hover,
html.night .hist-btn:hover { background: #262f49; }

/* Áreas de salida de comandos (respuesta del enviador LoRa/MQTT) */
html.night pre,
html.night .pre-placeholder,
html.night .skeleton-respuesta {
  background: #141a2c;
  color: #e6e8ef;
  border: 1px solid #2a3350;
}
html.night .pre-placeholder,
html.night .pre-placeholder p { color: #b9c2dc; }

/* Barra de scroll */
html.night ::-webkit-scrollbar { width: 5px; height: 5px; }
html.night ::-webkit-scrollbar-track { background: transparent; }
html.night ::-webkit-scrollbar-thumb { background: #3c4566; border-radius: 99px; }
html.night ::-webkit-scrollbar-thumb:hover { background: #37416b; }