/* © 2025-2026 Manuel Aledo. Todos los derechos reservados. Prohibida su copia, distribución o modificación sin permiso por escrito del autor. */
/* =====================================================================
   GUÍA RÁPIDA DEL SISTEMA DE DISEÑO — para que lo nuevo que se añada
   siga encajando con el resto, en vez de improvisar cada vez.

   COLOR DE ESTADO (sage/brass/rust) — SIEMPRE significa lo mismo:
     sage  = al día / OK / cerrado          (verde salvia)
     brass = próximo a vencer / atención    (latón)
     rust  = vencido / avería / urgente     (teja)
   No reutilizar estos tres para otra cosa (p.ej. "identidad de un módulo").

   COLOR DE MÓDULO (--mod-*) — identidad visual de cada sección, para que
   "Legionella" sea siempre el mismo azul allá donde aparezca (panel,
   calendario, etc.), independiente de si esa cosa está vencida o no.

   ESPACIADOS — usar las utilidades de Bootstrap (mb-1 a mb-5, p-1 a p-4,
   gap-1 a gap-3), no valores sueltos en px salvo que sea imprescindible.
   Como referencia: mb-1/gap-1 (4px) dentro de un mismo bloque pequeño,
   mb-3 (16px) entre elementos de una lista, mb-4 (24px) entre secciones.

   RADIOS — .card 14px, .module-card 16px, botones/inputs el de Bootstrap
   (6px), badges y "pill" siempre 999px (redondeados del todo).
   ===================================================================== */

:root {
  /* Paleta */
  --ink: #16233A;        /* marino profundo — cabeceras, sidebar */
  --ink-2: #1E3350;       /* marino secundario — degradados */
  --accent: #3E8FB0;      /* azul técnico — acento principal, "al día" */
  --brass: #C9932F;       /* latón — "próximo a vencer" */
  --rust: #BF4C2C;        /* teja — "vencido" / avería */
  --sage: #4C8B6E;        /* salvia — éxito */
  --paper: #F1F4F7;       /* fondo general */
  --ink-soft: rgba(255,255,255,.7);

  /* Superficies y texto — pensados para poder redefinirse enteros en modo oscuro
     (ver [data-bs-theme="dark"] más abajo) sin tocar cada plantilla una a una. */
  --card: #FFFFFF;        /* fondo de tarjetas, cabeceras de tarjeta, pestañas activas */
  --text: #1C2733;        /* texto principal sobre --paper / --card */
  --heading: #16233A;     /* títulos y cifras destacadas (el marino de --ink, pero que en
                             modo oscuro pasa a claro; --ink sigue siendo oscuro porque
                             también es el fondo de la barra lateral y la cabecera) */
  --muted: #6b7684;       /* texto secundario */
  --border: #E7ECF1;      /* bordes y separadores suaves */
  --shadow: 0 2px 10px rgba(15,30,50,.06);
  --shadow-lg: 0 10px 28px rgba(15,30,50,.14);

  /* Alias retrocompatibles (usados en plantillas existentes) */
  --navy: var(--ink);
  --blue: var(--accent);
  --light-blue: #E4EEF2;

  /* Color por módulo (identidad), independiente del color de estado (sage/brass/rust).
     Antes Eléctrico reutilizaba --brass ("próximo") y Correctivo reutilizaba --rust
     ("vencido") — mismo color, dos significados distintos. Ahora cada módulo tiene
     el suyo propio y se mantiene igual allá donde aparezca (panel, calendario...). */
  --mod-preventivo: var(--accent);
  --mod-legionella: #1F7A8C;
  --mod-electrico: #4A5FA0;
  --mod-correctivo: #A6455C;
  --mod-consumos: #5C7A89;
  --mod-aviso: #7C5CBF;
  --mod-equipo: #16233A;
  --mod-jardin: #4F7F35;
  --nota-bg: #FFF9EC;     /* fondo cálido de la «nota de la temporada pasada» */
}

/* ---------- Modo oscuro ----------
   Se activa poniendo data-bs-theme="dark" en <html> (lo hace el botón de la barra
   lateral, en base.html). Bootstrap 5.3 ya retematiza solo, con esto, todos sus
   propios componentes (tarjetas, tablas, formularios, modales...); aquí solo
   redefinimos NUESTRAS variables para que el resto de la hoja (que ya las usa en
   vez de colores sueltos) seas coherente con ese mismo cambio. Los colores de fase
   eléctrica (--fase-*) se dejan tal cual: identifican un cable, no un tema. */
[data-bs-theme="dark"] {
  --ink: #0B1220;
  --ink-2: #132038;
  --accent: #5FB4D6;
  --brass: #E3AE55;
  --rust: #E37B58;
  --sage: #71C39B;
  --paper: #0D141F;
  --card: #161F2C;
  --text: #E7ECF1;
  --heading: #F2F5F8;
  --muted: #93A1B0;
  --border: #25313F;
  --light-blue: #1B2A38;
  --shadow: 0 2px 14px rgba(0,0,0,.35);
  --shadow-lg: 0 14px 32px rgba(0,0,0,.45);

  --mod-legionella: #3FB6C9;
  --mod-electrico: #8B9BE0;
  --mod-correctivo: #E28AA0;
  --mod-consumos: #93AEBC;
  --mod-aviso: #A78BFA;
  --mod-equipo: #5B7290;
  --mod-jardin: #8CC46A;
  --nota-bg: #2A2416;
}

body {
  background-color: var(--paper);
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text);
}
h1, h2, h3, h4, h5, h6, .font-display {
  font-family: 'Space Grotesk', 'IBM Plex Sans', sans-serif;
}

.bg-navy { background-color: var(--ink) !important; }
.btn-primary { background-color: var(--accent); border-color: var(--accent); }
.btn-primary:hover { background-color: #326f8a; border-color: #326f8a; }
.btn-outline-primary { color: var(--accent); border-color: var(--accent); }
.btn-outline-primary:hover { background-color: var(--accent); border-color: var(--accent); }

.btn-danger { background-color: var(--rust); border-color: var(--rust); }
.btn-danger:hover { background-color: #a83f24; border-color: #a83f24; }
.btn-outline-danger { color: var(--rust); border-color: var(--rust); }
.btn-outline-danger:hover { background-color: var(--rust); border-color: var(--rust); color: #fff; }

.btn-success { background-color: var(--sage); border-color: var(--sage); }
.btn-success:hover { background-color: #3f745b; border-color: #3f745b; }
.btn-outline-success { color: var(--sage); border-color: var(--sage); }
.btn-outline-success:hover { background-color: var(--sage); border-color: var(--sage); color: #fff; }

.btn-warning { background-color: var(--brass); border-color: var(--brass); color: #fff; }
.btn-warning:hover { background-color: #ad7d28; border-color: #ad7d28; color: #fff; }
.btn-outline-warning { color: var(--brass); border-color: var(--brass); }
.btn-outline-warning:hover { background-color: var(--brass); border-color: var(--brass); color: #fff; }

a { color: var(--accent); }

.card { border: none; border-radius: 14px; box-shadow: var(--shadow); background-color: var(--card); color: var(--text); }
.card-header { border-radius: 14px 14px 0 0 !important; font-weight: 600; background: var(--card); border-bottom-color: var(--border); }

/* Variantes un poco más oscuras de --brass y --sage, solo para cuando llevan texto
   blanco encima (insignias, avisos) — con el tono original, el texto blanco no se
   leía bien del todo (menos del mínimo recomendado para pantallas). El color de base
   (--brass, --sage) se queda igual para el resto de usos donde no hay este problema. */
.badge-al_dia { background-color: #396852; }
.badge-proximo { background-color: #966E23; }
.badge-vencido { background-color: var(--rust); }

/* Mismo criterio que los botones: las etiquetas rojo/verde/ámbar de Bootstrap
   pasan a usar la paleta propia, para que sea un único sistema de color. */
.text-bg-danger { background-color: var(--rust) !important; }
.text-bg-success { background-color: #396852 !important; }
.text-bg-warning { background-color: #966E23 !important; color: #fff !important; }

.estado-pill { font-size: .75rem; padding: .35em .7em; border-radius: 999px; color: #fff; }

.qr-card { border: 1px dashed #999; border-radius: 10px; padding: 12px; text-align: center; page-break-inside: avoid; }
.qr-card canvas, .qr-card img { margin: 0 auto; }

/* Menú lateral */
.sidebar-link {
  color: rgba(255,255,255,0.82);
  border-radius: 8px;
  padding: .6rem .8rem;
  margin-bottom: 2px;
}
.sidebar-link:hover { background-color: rgba(255,255,255,0.1); color: #fff; }
.sidebar-link.active { background-color: var(--accent); color: #fff; font-weight: 600; }
.sidebar-link i { width: 1.3em; display: inline-block; text-align: center; margin-right: 4px; }

#sidebarMenu {
  width: 260px;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; bottom: 0; left: -260px;
  z-index: 1045;
  transition: left .25s ease;
  overflow-y: auto;
  border-right: 1px solid rgba(255,255,255,.1);
}
#sidebarMenu.sidebar-open { left: 0; }

#sidebarBackdrop {
  position: fixed; inset: 0;
  background: rgba(10,16,26,.45);
  z-index: 1044;
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease;
}
#sidebarBackdrop.show { opacity: 1; visibility: visible; }

@media (min-width: 992px) {
  #wrapper { min-height: 100vh; }
  #sidebarMenu { position: sticky; left: 0 !important; top: 0; height: 100vh; flex-shrink: 0; }
  #sidebarBackdrop { display: none !important; }
}

@media print {
  nav, .no-print, #sidebarMenu { display: none !important; }
  body { background: #fff; }
}

.checklist-item label { cursor: pointer; }

/* ---------- Colores de fase (eléctrico) ---------- */
:root {
  --fase-l1: #1a1a1a; /* L1 — negro */
  --fase-l2: #7B4B27; /* L2 — marrón */
  --fase-l3: #808080; /* L3 — gris */
  --fase-n:  #1f5fbf; /* Neutro — azul */
}
.fase-dot {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block; margin-right: 6px; vertical-align: middle;
  border: 1px solid rgba(0,0,0,.2);
}
.fase-dot-l1 { background-color: var(--fase-l1); }
.fase-dot-l2 { background-color: var(--fase-l2); }
.fase-dot-l3 { background-color: var(--fase-l3); }
.fase-dot-n  { background-color: var(--fase-n); }

.fase-label-l1 { color: var(--fase-l1); }
.fase-label-l2 { color: var(--fase-l2); }
.fase-label-l3 { color: var(--fase-l3); }
.fase-label-n  { color: var(--fase-n); }


/* ---------- Panel principal ---------- */
.hero-panel {
  background: radial-gradient(120% 160% at 100% 0%, var(--ink-2) 0%, var(--ink) 55%);
  border-radius: 20px;
  color: #fff;
  padding: 2rem;
  position: relative;
  overflow: hidden;
}
.hero-panel::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
.hero-greeting { color: var(--ink-soft); font-size: .95rem; }
.hero-title { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1.6rem; margin: 0; color: #fff; }

.ring-wrap { position: relative; width: fit-content; }
.ring-wrap svg { display: block; animation: ring-in .6s ease-out; }
.ring-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  flex-direction: column; font-family: 'Space Grotesk', sans-serif;
}
@keyframes ring-in {
  from { opacity: 0; transform: scale(.85); }
  to { opacity: 1; transform: scale(1); }
}

.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .8rem; border-radius: 999px;
  background: rgba(255,255,255,.08); color: #fff; font-size: .85rem;
}
.chip b { font-family: 'Space Grotesk', sans-serif; }
.chip-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

.module-card {
  border-radius: 16px; background: var(--card); padding: 1.1rem;
  box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 1rem;
  text-decoration: none; color: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}
.module-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); color: inherit; }
.module-card .name { font-weight: 600; color: var(--text); }
.module-card .sub { font-size: .8rem; color: var(--muted); }

.feed-item {
  display: flex; align-items: flex-start; gap: .8rem;
  padding: .85rem 1rem; border-radius: 12px;
  text-decoration: none; color: inherit;
}
.feed-item:hover { background: var(--paper); color: inherit; }
.feed-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem;
}

/* Portada: el cuerpo del recuadro de arriba (texto a la izquierda, anillo a la
   derecha). En el móvil el anillo baja debajo y se hace más pequeño, para que el
   título y los chips usen todo el ancho y no se corten. */
.hero-cuerpo { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.hero-izq { min-width: 0; flex: 1 1 auto; }
.hero-ring svg { width: 140px; height: 140px; }
.hero-ring-num { font-size: 1.9rem; }
@media (min-width: 992px) { .hero-cuerpo { padding-top: 1.9rem; } }
@media (max-width: 575.98px) {
  .hero-panel { padding: 1.25rem; }
  .hero-cuerpo { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .hero-title { font-size: 1.35rem; }
  .hero-ring { align-self: center; }
  .hero-ring svg { width: 104px; height: 104px; }
  .hero-ring-num { font-size: 1.4rem; }
}

/* Interruptor de modo oscuro (pastilla con bolita), en la portada y en la barra
   de arriba del móvil. */
.tema-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.1); color: #fff;
  border-radius: 999px; padding: .25rem .8rem .25rem .25rem;
  font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.tema-pill:hover { background: rgba(255,255,255,.18); }
.tema-pill:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tema-pill .knob {
  width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; font-size: .85rem;
  transition: transform .25s ease;
}
.tema-pill:hover .knob { transform: rotate(20deg); }
.tema-pill-hero { position: absolute; top: 1rem; right: 1rem; z-index: 2; }
.tema-pill-navbar { padding: .2rem .7rem .2rem .2rem; }
.tema-pill-navbar .knob { width: 24px; height: 24px; }

/* Tarjetas de cada apartado en la portada: icono con su color, nombre, una frase
   con cómo está (texto completo, sin cortar) y un mini gráfico de los últimos días. */
.m-card {
  display: flex; flex-direction: column; height: 100%;
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 1rem; box-shadow: var(--shadow); text-decoration: none; color: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}
.m-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); color: inherit; }
.m-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.m-card-top { display: flex; align-items: flex-start; gap: .75rem; }
.m-card-txt { min-width: 0; flex: 1 1 auto; }
.m-icon {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  background: var(--mc); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
}
.m-card .name { font-weight: 700; color: var(--text); line-height: 1.25; }
.m-card .sub { font-size: .8rem; color: var(--muted); line-height: 1.35; overflow-wrap: anywhere; margin-top: .1rem; }
.m-pct {
  flex-shrink: 0; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: .8rem;
  color: var(--mc); background: color-mix(in srgb, var(--mc) 14%, var(--card));
  border-radius: 999px; padding: .15rem .55rem;
}
.m-card .spark { display: block; width: 100%; height: 34px; margin-top: auto; padding-top: .6rem; color: var(--text); }
.m-card .spark-pie { font-size: .7rem; color: var(--muted); margin-top: .2rem; }
@media (max-width: 575.98px) {
  .m-card { padding: .8rem; }
  .m-card-top { flex-wrap: wrap; gap: .5rem; }
  .m-icon { width: 32px; height: 32px; font-size: .95rem; border-radius: 9px; }
  .m-pct { order: 1; margin-left: auto; }
  .m-card-txt { order: 2; flex-basis: 100%; }
}

/* Botón de luz (relé Shelly): grande, fácil de pulsar con el dedo, y con el estado real. */
/* Climatización: una tarjeta por aire (static/aires.js) */
.aires-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .75rem; }
.aire-tarjeta { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: .8rem .9rem; }
.aire-consigna { display: flex; align-items: center; gap: .6rem; margin: .6rem 0; }
.aire-consigna .btn { width: 2.4rem; height: 2.4rem; border-radius: 50%; padding: 0; font-size: 1.2rem; line-height: 1; }
.aire-grados { font-size: 2rem; font-weight: 700; color: var(--heading); min-width: 3.2rem; text-align: center; }
.aire-modos, .aire-ventiladores { flex-wrap: wrap; }
.aire-modos .btn.active, .aire-ventiladores .btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.aire-error { background: color-mix(in srgb, var(--rust) 14%, transparent); color: var(--rust); border-radius: 8px; padding: .3rem .6rem; font-size: .85rem; margin-top: .5rem; }
.aire-minimo { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .4rem; border-top: 1px solid var(--border); margin-top: .6rem; padding-top: .5rem; font-size: .85rem; }
.aire-minimo-especial { background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 8px; border-top: 0; padding: .4rem .6rem; }
.aire-mas-frio-form { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .5rem; background: var(--paper); border-radius: 8px; padding: .5rem .6rem; }
/* Mensajes (chat por canales) */
.canal-sin-leer .fw-semibold { color: var(--accent); }
.chat-mensajes { display: flex; flex-direction: column; gap: .55rem; padding-bottom: .5rem; }
.msg { max-width: 85%; align-self: flex-start; }
.msg-propio { align-self: flex-end; text-align: right; }
.msg-cabeza { font-size: .78rem; color: var(--muted, #6c757d); margin-bottom: .1rem; }
.msg-texto { display: inline-block; text-align: left; background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: .4rem .7rem; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
.msg-propio .msg-texto { background: color-mix(in srgb, var(--accent) 14%, var(--card)); border-color: transparent; }
.msg-boton { display: inline-block; margin-top: .15rem; font-size: .78rem; color: var(--muted); text-decoration: none; }
.msg-boton:hover { color: var(--accent); text-decoration: underline; }
.msg-averia { display: block; margin-top: .2rem; color: var(--accent); text-decoration: none; }
.msg-visto { color: var(--muted, #6c757d); font-size: .75rem; margin-top: .1rem; }
.chat-escribir { position: sticky; bottom: 0; display: flex; gap: .4rem; align-items: flex-end; padding: .6rem 0;
  background: var(--paper); border-top: 1px solid var(--border); }
.chat-escribir textarea { resize: none; max-height: 160px; }
.msg-urgente .msg-texto { border: 1.5px solid var(--rust); background: color-mix(in srgb, var(--rust) 10%, var(--card)); }
.msg-marca-urgente { color: var(--rust); font-weight: 600; font-size: .8rem; text-transform: uppercase; }
.chat-escribir .btn-check:checked + .btn-outline-danger { color: #fff; }
.luz-boton {
  display: flex; align-items: center; gap: .8rem; width: 100%; text-align: left;
  background: var(--card); border: 1.5px solid var(--border); border-radius: 14px;
  padding: .7rem .9rem; color: var(--text); font: inherit; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.luz-boton:hover:not(:disabled) { box-shadow: var(--shadow); }
.luz-boton:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.luz-boton:disabled { cursor: default; }
.luz-icono {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: var(--paper); color: var(--muted); font-size: 1.2rem; transition: background .15s ease, color .15s ease;
}
.luz-txt { display: flex; flex-direction: column; min-width: 0; }
.luz-nombre { font-weight: 700; line-height: 1.2; }
.luz-texto { font-size: .85rem; font-weight: 600; color: var(--muted); }
.luz-sub { font-size: .75rem; color: var(--muted); }
.luz-on { border-color: var(--brass); background: color-mix(in srgb, var(--brass) 10%, var(--card)); }
.luz-on .luz-icono { background: var(--brass); color: #fff; box-shadow: 0 0 14px color-mix(in srgb, var(--brass) 55%, transparent); }
.luz-on .luz-texto { color: var(--brass); }
.luz-error .luz-texto { color: var(--rust); }
.luz-cargando { opacity: .65; }
.luz-bloqueada { border-style: dashed; }
.luz-bloqueada .luz-icono { background: transparent; border: 1.5px dashed var(--border); }
.luz-horario { font-size: .75rem; color: var(--muted); margin: .15rem 0 0 .2rem; }
.luz-horario.mal { color: var(--rust); }

/* ---------- Calendario (vista completa) ---------- */
.cal-dot {
  width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 4px;
}
.cal-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cal-scroll .cal-grid { min-width: 630px; }
.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
}
.cal-cell, .cal-head-cell { min-width: 0; }
.cal-head-cell {
  text-align: center; font-size: .78rem; font-weight: 600; color: #6b7684;
  text-transform: uppercase; padding: .5rem 0;
}
.cal-cell {
  min-height: 108px; border-right: 1px solid var(--border); border-top: 1px solid var(--border); padding: .4rem;
  display: flex; flex-direction: column; gap: .25rem; overflow: hidden;
}
.cal-grid .cal-cell:nth-child(7n) { border-right: none; }
.cal-cell-muted { background: var(--paper); color: var(--muted); }
.cal-cell-muted .cal-cell-num { color: var(--muted); }
.cal-cell-today { background: rgba(62,143,176,.07); }
.cal-cell-num { font-weight: 600; font-size: .85rem; }
.cal-cell-today .cal-cell-num {
  background: var(--accent); color: #fff; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: .78rem;
}
.cal-cell-events { display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.cal-pill {
  display: block; font-size: .7rem; padding: .15rem .4rem; border-radius: 5px;
  background: var(--paper); border-left: 3px solid #ccc; color: var(--text);
  text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-pill:hover { background: var(--border); color: var(--text); }
.cal-icon-row { display: flex; flex-wrap: wrap; gap: 3px; }
.cal-icon-dot {
  width: 20px; height: 20px; border-radius: 5px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: .68rem; text-decoration: none; border: none;
}
.cal-icon-dot:hover { filter: brightness(0.9); color: #fff; }
.cal-icon-more { background: #6b7684; font-weight: 700; }
.btn-quitar-qr {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; padding: 0;
  border: none; border-radius: 50%; background: var(--paper); color: var(--muted); font-size: .65rem;
  display: flex; align-items: center; justify-content: center; z-index: 2;
}
.btn-quitar-qr:hover { background: var(--rust); color: #fff; }

/* Resalta la incidencia enlazada desde el calendario */
.card:target { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Mini calendario (portada) ---------- */
.cal-mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-mini-head-cell { text-align: center; font-size: .68rem; color: #9aa4ae; font-weight: 600; padding-bottom: 4px; }
.cal-mini-day {
  position: relative; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  font-size: .78rem; border-radius: 8px; border: none; background: transparent; color: var(--text);
  text-decoration: none; width: 100%;
}
.cal-mini-muted { color: var(--muted); }
.cal-mini-today { background: var(--accent); color: #fff; font-weight: 600; }
.cal-mini-has-events { cursor: pointer; font-weight: 600; }
.cal-mini-has-events:hover { background: var(--paper); color: var(--text); }
.cal-mini-today.cal-mini-has-events:hover { background: var(--accent); color: #fff; }
.cal-mini-dot {
  position: absolute; bottom: 3px; width: 5px; height: 5px; border-radius: 50%;
}
.cal-mini-dropdown { display: contents; }
.cal-mini-menu { min-width: 220px; max-height: 260px; overflow-y: auto; }
.cal-mini-menu .text-truncate { max-width: 160px; }

/* Enlace de "saltar al contenido": para quien navega solo con teclado, evita tener
   que pasar Tab por los ~20 enlaces del menú lateral en cada pantalla para llegar
   al contenido. Invisible hasta que recibe el foco (primer Tab de la página). */
.skip-link {
  position: absolute; top: -60px; left: 8px; z-index: 2000;
  background: var(--ink); color: #fff; padding: .6rem 1rem; border-radius: 8px;
  text-decoration: none; font-weight: 600; transition: top .15s;
}
.skip-link:focus { top: 8px; color: #fff; }
#contenido-principal:focus { outline: none; }

/* Símbolo de "función nueva en fase de prueba" */
.en-prueba { font-size: .8em; margin-left: .3rem; cursor: help; vertical-align: middle; opacity: .85; }
.en-prueba:focus { outline: 2px solid var(--accent, #2E5395); border-radius: 4px; }

/* Número de pendientes junto a cada apartado del menú lateral */
.contador-menu { font-size: .7rem; min-width: 1.4rem; }

/* Chips «Hoy / Ayer» para elegir la fecha de una lectura sin abrir el calendario
   (solo lo ve el admin — ver _fecha_manual_lectura.html) */
.chips-fecha { display: flex; gap: 8px; }
.chip-fecha {
  flex: 1; text-align: center; padding: .55rem .5rem; border-radius: 12px;
  border: 1.5px solid var(--border); background: var(--card); font: inherit;
  font-size: .86rem; font-weight: 600; color: var(--muted); cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.chip-fecha:hover { border-color: var(--accent); }
.chip-fecha:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip-fecha.sel { border-color: var(--accent); background: var(--paper); color: var(--accent); font-weight: 700; }
.chip-fecha .d { display: block; font-size: .7rem; font-weight: 500; color: var(--muted); margin-top: 1px; }
.chip-fecha.sel .d { color: var(--accent); }

/* Aviso de guardado flotante: para los flash() de categoría "success", en vez del
   mensaje verde de siempre arriba del todo (que en el móvil, tras un formulario
   largo, queda fuera de la vista nada más guardar). El resto de categorías
   (aviso, error...) se siguen mostrando arriba, porque a esas sí conviene que el
   usuario tenga que verlas antes de seguir. */
.toast-flotante-wrap {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2000;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 0 12px 14px; pointer-events: none;
}
.toast-flotante {
  pointer-events: auto; background: var(--ink); color: #fff; border-radius: 999px;
  padding: .65rem 1.1rem; font-size: .85rem; font-weight: 600; display: flex;
  align-items: center; gap: 8px; box-shadow: var(--shadow-lg); cursor: pointer;
  opacity: 0; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease;
  max-width: calc(100vw - 24px);
}
.toast-flotante.show { opacity: 1; transform: none; }
.toast-flotante i { color: var(--sage); flex-shrink: 0; }

/* Formulario ya enviado (se ignora un segundo «Guardar» mientras va de camino) */
form[data-enviando="1"] button[type="submit"],
form[data-enviando="1"] button:not([type]) { opacity: .6; cursor: progress; }


/* ---------- Modo oscuro: que todo se lea ----------
   Bootstrap deja algunas cosas igual en los dos temas (.text-dark, .bg-light,
   .bg-white, .text-bg-light, .table-light) y nuestros colores, más claros en modo
   oscuro, ya no se leen bien con texto blanco encima. Aquí se corrige todo de una vez,
   solo en modo oscuro: el modo claro no cambia nada. */
[data-bs-theme="dark"] .text-dark:not(.badge):not(.btn) { color: var(--text) !important; }
[data-bs-theme="dark"] .btn-outline-warning.text-dark { color: var(--brass) !important; }
[data-bs-theme="dark"] .bg-light { background-color: var(--bs-tertiary-bg) !important; }
[data-bs-theme="dark"] .bg-white:not(img) { background-color: var(--card) !important; }
[data-bs-theme="dark"] .text-bg-light { background-color: var(--border) !important; color: var(--text) !important; }
[data-bs-theme="dark"] .table-light {
  --bs-table-bg: var(--border); --bs-table-color: var(--text); --bs-table-border-color: #33414F;
  --bs-table-striped-bg: #2B3846; --bs-table-hover-bg: #2B3846; --bs-table-active-bg: #2B3846;
  color: var(--text);
}
[data-bs-theme="dark"] .text-danger { color: #F08A6C !important; }
[data-bs-theme="dark"] .sidebar-link.active { background-color: #2C7A99; }

/* Botones e insignias de color: con los tonos claros del modo oscuro, letra oscura */
[data-bs-theme="dark"] .btn-primary,
[data-bs-theme="dark"] .btn-success,
[data-bs-theme="dark"] .btn-warning,
[data-bs-theme="dark"] .btn-danger,
[data-bs-theme="dark"] .btn-outline-primary:hover,
[data-bs-theme="dark"] .btn-outline-success:hover,
[data-bs-theme="dark"] .btn-outline-warning:hover,
[data-bs-theme="dark"] .btn-outline-danger:hover { color: #0B1220; }
[data-bs-theme="dark"] .btn-primary:hover { background-color: #86C8E2; border-color: #86C8E2; color: #0B1220; }
[data-bs-theme="dark"] .btn-success:hover { background-color: #8FD3B1; border-color: #8FD3B1; color: #0B1220; }
[data-bs-theme="dark"] .btn-warning:hover { background-color: #EBC077; border-color: #EBC077; color: #0B1220; }
[data-bs-theme="dark"] .btn-danger:hover { background-color: #EA9579; border-color: #EA9579; color: #0B1220; }
[data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color: #AEB9C5; --bs-btn-border-color: #4A5868; }
[data-bs-theme="dark"] .badge-vencido,
[data-bs-theme="dark"] .text-bg-danger { background-color: #B5452A !important; color: #fff !important; }
[data-bs-theme="dark"] .badge[style*="background:var(--"],
[data-bs-theme="dark"] .estado-pill[style*="background:var(--"] { color: #0B1220 !important; }
[data-bs-theme="dark"] .btn-outline-secondary { color: #AEB9C5; border-color: #4A5868; }
[data-bs-theme="dark"] .btn-outline-secondary:hover,
[data-bs-theme="dark"] .btn-outline-secondary.active,
[data-bs-theme="dark"] .btn-check:checked + .btn-outline-secondary { color: #fff; background-color: #4A5868; border-color: #4A5868; }
[data-bs-theme="dark"] .table-primary { --bs-table-bg: #1B3448; --bs-table-color: var(--text); --bs-table-border-color: #2A4A63; color: var(--text); }
[data-bs-theme="dark"] .table-success { --bs-table-bg: #1C3529; --bs-table-color: var(--text); --bs-table-border-color: #2A4D3C; color: var(--text); }
[data-bs-theme="dark"] .table-warning { --bs-table-bg: #3A3018; --bs-table-color: var(--text); --bs-table-border-color: #554624; color: var(--text); }
/* Los colores de fase identifican el cable (negro, marrón, gris, azul) y no cambian;
   en modo oscuro se ponen sobre una pastilla clara para que se distingan. */
[data-bs-theme="dark"] :is(small, span, div, label)[class*="fase-label-"] { background: #E7ECF1; border-radius: 999px; padding: 0 .45rem; }
[data-bs-theme="dark"] .fase-dot { border-color: rgba(255,255,255,.55); }

/* Calendario: quién está de vacaciones ese día */
.cal-vac { font-size: .68rem; line-height: 1.2; color: #6B4F96; background: rgba(139,111,176,.12); border-radius: 4px;
           padding: 1px 4px; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-bs-theme="dark"] .cal-vac { color: #C9B6EA; background: rgba(139,111,176,.22); }

/* ---------- Vacaciones ---------- */
.vac-nivel { display: inline-block; font-size: .72rem; font-weight: 600; border-radius: 999px; padding: .05rem .5rem; border: 1px solid; }
.vac-verde { --vac: var(--sage); }
.vac-ambar { --vac: var(--brass); }
.vac-rojo  { --vac: var(--rust); }
.vac-nivel.vac-verde, .vac-nivel.vac-ambar, .vac-nivel.vac-rojo { color: var(--vac); border-color: var(--vac); background: color-mix(in srgb, var(--vac) 12%, transparent); }
.vac-sug { border-left: 4px solid var(--vac); background: color-mix(in srgb, var(--vac) 8%, transparent); border-radius: 8px; padding: .45rem .6rem; }
.vac-semanas { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.4rem, 1fr)); gap: .35rem; }
.vac-sem { border-radius: 8px; background: color-mix(in srgb, var(--vac) 18%, transparent); border: 1px solid color-mix(in srgb, var(--vac) 55%, transparent); }
.vac-sem summary { list-style: none; cursor: pointer; padding: .3rem .4rem; display: flex; flex-direction: column; line-height: 1.15; }
.vac-sem summary::-webkit-details-marker { display: none; }
.vac-sem-fecha { font-size: .75rem; font-weight: 600; color: var(--text); }
.vac-sem-info { font-size: .7rem; color: var(--muted); min-height: 1em; display: flex; gap: .25rem; align-items: center; }
.vac-sem[open] { grid-column: 1 / -1; }
.vac-sem-detalle { padding: 0 .5rem .45rem; color: var(--text); }
.vac-pasada { opacity: .45; }

/* Panel: avisos secundarios (lo que puede esperar), en una franja discreta */
.avisos-secundarios { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; padding: .55rem .8rem;
                      border: 1px dashed var(--border); border-radius: 12px; background: var(--card); font-size: .85rem; }
.avisos-sec-titulo { color: var(--muted); font-weight: 600; margin-right: .25rem; }
.aviso-sec { color: var(--text); background: var(--paper); border: 1px solid var(--border); border-radius: 999px;
             padding: .1rem .6rem; text-decoration: none; }
a.aviso-sec:hover { border-color: var(--accent); color: var(--accent); }
.avisos-sec-ajuste { margin-left: auto; color: var(--muted); font-size: .78rem; text-decoration: none; }
.avisos-sec-ajuste:hover { color: var(--accent); }

/* Aviso de averías nuevas (abajo a la derecha, en cualquier pantalla) */
.aviso-averias { position: fixed; right: 1rem; bottom: 1rem; z-index: 1080; width: min(24rem, calc(100vw - 2rem));
                 background: var(--card); color: var(--text); border-left: 5px solid var(--rust); border-radius: 12px;
                 box-shadow: var(--shadow-lg); padding: .75rem .9rem; }
.aviso-averias-tit { font-weight: 700; color: var(--rust); margin-bottom: .35rem; }
.aviso-averias-item { display: block; color: var(--text); text-decoration: none; padding: .35rem 0; border-top: 1px solid var(--border); }
.aviso-averias-item:hover { color: var(--accent); }
@media print { .aviso-averias { display: none !important; } }

/* Jardinería */
.jardin-anio td, .jardin-anio th { padding: .2rem .3rem; }
.jardin-mes-si { background: color-mix(in srgb, var(--mod-jardin) 22%, transparent); color: var(--mod-jardin); font-weight: 700; }
.jardin-anio > tbody > tr > td.jardin-mes-si { --bs-table-bg: color-mix(in srgb, var(--mod-jardin) 22%, transparent); --bs-table-color: var(--mod-jardin); }
.table > :not(caption) > tr > .riego-ahora, .riego-ahora { --bs-table-bg: color-mix(in srgb, var(--accent) 14%, transparent); background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* Presupuesto */
.presu-barra { position: relative; height: .55rem; border-radius: 999px; background: var(--border); overflow: visible; margin-top: .25rem; }
.presu-relleno { height: 100%; border-radius: 999px; }
.presu-marca { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text); opacity: .55; }
.presu-futura { opacity: .55; }
.eficacia-cambiar { opacity: .55; }
.eficacia-cambiar:hover, .eficacia-cambiar:focus-within { opacity: 1; }

/* ---------- Páginas de cada apartado, en vertical ----------
   Ordenador: debajo del apartado abierto en el menú lateral. Móvil: un desplegable arriba. */
.sidebar-sub { margin: 0 0 .3rem 2.05rem; padding-left: .5rem; border-left: 1px solid rgba(255,255,255,.14); }
.sidebar-sub.recogido { display: none; }
.sidebar-sub-link { display: flex; align-items: center; gap: .35rem; color: rgba(255,255,255,.62); text-decoration: none;
                    font-size: .86rem; padding: .22rem .5rem; border-radius: 6px; line-height: 1.3; }
.sidebar-sub-link:hover { color: #fff; background: rgba(255,255,255,.06); }
.sidebar-sub-link.active { color: #fff; font-weight: 600; box-shadow: inset 2px 0 0 var(--accent); border-radius: 0 6px 6px 0; }
.sidebar-flecha { font-size: .75rem; opacity: .7; transition: transform .15s ease; }
.sidebar-link[aria-expanded="false"] .sidebar-flecha { transform: rotate(-90deg); }
.sidebar-sub-link .en-prueba { filter: none; }
.subnav-boton { display: flex; align-items: center; gap: .5rem; text-align: left; background: var(--card); color: var(--text);
                border: 1px solid var(--border); border-radius: 12px; padding: .55rem .8rem; box-shadow: var(--shadow); }
.subnav-boton::after { margin-left: auto; }
.subnav-total { margin-left: auto; color: var(--muted); font-size: .75rem; white-space: nowrap; }
.subnav-boton:has(.subnav-total)::after { margin-left: .35rem; }
.subnav-actual .badge { margin-left: .3rem; }
.subnav-seccion { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.subnav-actual { font-weight: 700; color: var(--heading); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subnav-lista { border-radius: 12px; padding: .35rem; box-shadow: var(--shadow-lg); }
.subnav-item { display: flex; align-items: center; gap: .4rem; border-radius: 8px; padding: .55rem .7rem; }
.subnav-item.active { background: var(--accent); color: #fff; }
[data-bs-theme="dark"] .subnav-item.active { color: #0B1220; }

/* Configuración → Funciones: cuadro de páginas × roles */
.tabla-funciones { font-size: .9rem; }
.tabla-funciones thead th { position: sticky; top: 0; z-index: 2; --bs-table-bg: var(--card); background-color: var(--card); vertical-align: bottom; }
@media (max-width: 991.98px) { .tabla-funciones thead th { top: 56px; } }
.tabla-funciones .func-rol { width: 6.5rem; font-size: .8rem; }
@media (max-width: 575.98px) {
  .tabla-funciones .func-rol { width: 2.4rem; }
  .tabla-funciones { font-size: .84rem; }
  .tabla-funciones > :not(caption) > * > * { padding: .45rem .25rem; }
  .tabla-funciones .func-pagina { padding-left: .9rem; }
}
.tabla-funciones .func-resumen { font-weight: 400; font-size: .68rem; color: var(--muted); white-space: nowrap; }
.tabla-funciones .func-apagadas { color: var(--rust, #b4532a); }
.tabla-funciones .func-apartado th, .tabla-funciones .func-apartado td { --bs-table-bg: var(--paper, rgba(127,127,127,.08)); background-color: var(--bs-table-bg); font-weight: 700; color: var(--heading); }
.tabla-funciones .func-pagina { padding-left: 1.6rem; }
.tabla-funciones .form-check-input { width: 1.15rem; height: 1.15rem; margin: 0; cursor: pointer; }
.tabla-funciones .func-cambiada { --bs-table-bg: color-mix(in srgb, var(--accent) 16%, transparent); background-color: var(--bs-table-bg); }
.func-no { color: var(--muted); }

/* ---------- Páginas de apartado: cabecera, tarjetas de resumen y filas (templates/comun/_pagina.html) ---------- */
.pagina-cabecera { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.pagina-titulo { font-weight: 700; margin: 0; color: var(--heading); }
.pagina-titulo-bloque { min-width: 0; }
/* línea que explica el filtro elegido en las tarjetas, con su «Ver todos» */
.filtro-nota { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .25rem .75rem; font-size: .85rem; color: var(--muted); background: var(--card); border: 1px dashed var(--border); border-radius: 12px; padding: .4rem .75rem; margin-bottom: .75rem; }
.pagina-cabecera:has(> .pagina-titulo-bloque) { align-items: flex-start; }
.pagina-acciones { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.resumen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.resumen-tarjeta { display: flex; flex-direction: column; gap: .15rem; background: var(--card); color: var(--text); text-decoration: none;
                   border: 1px solid var(--border); border-top: 4px solid var(--estado, var(--border)); border-radius: 12px;
                   padding: .65rem .8rem; box-shadow: var(--shadow); min-height: 92px; transition: transform .1s ease, box-shadow .1s ease; }
.resumen-tarjeta:hover { color: var(--text); transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.resumen-tarjeta.resumen-fija:hover { transform: none; box-shadow: var(--shadow); }
.pagina-cabecera:has(+ p.text-muted) { margin-bottom: .35rem; }
.resumen-tarjeta.activa { outline: 2px solid var(--estado, var(--accent)); outline-offset: -1px; }
.resumen-cabeza { font-size: .82rem; color: var(--muted); display: flex; align-items: center; gap: .35rem; line-height: 1.2; }
.resumen-cabeza .bi { color: var(--estado, var(--muted)); font-size: 1rem; }
.resumen-valor { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 1.35rem; color: var(--heading); line-height: 1.2; }
.resumen-detalle { font-size: .78rem; color: var(--muted); }
.estado-mal { --estado: var(--rust); }
.estado-aviso { --estado: var(--brass); }
.estado-bien { --estado: var(--sage); }
.estado-pendiente { --estado: var(--accent); }
.estado-neutro { --estado: #9AA5B1; }
.fila-estado { border-left: 4px solid var(--estado, transparent) !important; }
.panel-resumen[hidden] { display: none !important; }
@media (max-width: 575.98px) {
  .resumen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .resumen-tarjeta { min-height: 80px; padding: .5rem .65rem; }
  .resumen-valor { font-size: 1.15rem; }
}