/* © 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-check:checked + .btn-outline-primary { 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; }

/* Configuración: grupos de tarjetas */
.config-grupo { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 .5rem; }
.config-tarjeta { flex-direction: row; align-items: flex-start; gap: .75rem; padding: .75rem .9rem; }
.config-tarjeta > i { font-size: 1.25rem; color: var(--accent); line-height: 1.2; }
.config-tarjeta:hover { border-color: var(--accent); }

/* Dirección es de solo lectura: fuera los botones de apuntar, crear, editar o borrar (lo que
   sí puede usar —su contraseña, el chat— lleva data-lectura). Aunque se viera, no se guardaría. */
.solo-lectura form[method="post" i]:not([data-lectura]), .solo-lectura form[method="POST"]:not([data-lectura]),
.solo-lectura a[href$="/nuevo"], .solo-lectura a[href$="/nueva"], .solo-lectura a[href*="/nuevo?"],
.solo-lectura a[href*="/nueva?"], .solo-lectura a[href$="/editar"], .solo-lectura .solo-escritura { display: none !important; }

/* 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; }
/* en el móvil, el final del menú un poco separado del borde (la barra de gestos del teléfono) */
@media (max-width: 991.98px) { #sidebarMenu > .border-top { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)) !important; } }

#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; }
/* Pantalla de entrada: la imagen (foto del hotel o ilustración) de fondo a pantalla completa
   y el cuadro de entrar, pequeño, en el centro */
.entrada { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 5rem 1rem 2rem; overflow: hidden; }
/* en el móvil, 100vh cuenta también la barra de direcciones y sobraba un trozo (había que
   arrastrar para ver «Privacidad»); dvh es solo lo que se ve */
@supports (min-height: 100dvh) { .entrada { min-height: 100dvh; } }
.entrada-imagen { position: absolute; inset: 0; background: #1c2733; }
.entrada-ilustracion, .entrada-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.entrada-imagen.con-foto::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,20,34,.5) 0%, rgba(11,20,34,0) 30%, rgba(11,20,34,0) 75%, rgba(11,20,34,.35) 100%); }
.entrada-marca { position: absolute; z-index: 1; left: 1.75rem; top: 1.4rem; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.45); }
.entrada-logo { font-size: 1.4rem; font-weight: 800; letter-spacing: .01em; }
.entrada-hotel { font-size: .95rem; opacity: .92; }
.entrada-columna { position: relative; z-index: 2; width: 100%; max-width: 22.5rem; }
.entrada-formulario { width: 100%;
  background: color-mix(in srgb, var(--card) 93%, transparent); border-radius: 18px; padding: 1.6rem 1.5rem 1.3rem;
  box-shadow: 0 12px 40px rgba(11,20,34,.28); }
.entrada-caja { width: 100%; }
.entrada-saludo { font-size: 1.7rem; font-weight: 800; color: var(--heading); margin: 0 0 .9rem; }
.entrada-privacidad { display: block; width: max-content; margin: .6rem auto 0; font-size: .8rem; color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.7); text-decoration: underline; text-underline-offset: 2px; }
.entrada-privacidad:hover { color: #fff; opacity: .85; }
.entrada-ver { border-color: var(--border); }
/* el ojo propio del navegador (Edge) duplicaba el de la app */
input[type="password"]::-ms-reveal, input[type="password"]::-ms-clear { display: none; }
.entrada-muestra { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #1c2733; }
/* pantalla vertical (móvil): el cuadro abajo y la ilustración desplazada para que se vea el hotel arriba */
@media (orientation: portrait) {
  .entrada { align-items: flex-end; }
  .entrada-imagen .entrada-ilustracion { width: auto; height: 124%; top: -24%; left: 50%; transform: translateX(-77%); }
}
@media (max-width: 575.98px) {
  .entrada { padding: 4.25rem .9rem .9rem; }
  .entrada-marca { left: 1.1rem; top: 1rem; }
  .entrada-logo { font-size: 1.2rem; }
  .entrada-formulario { padding: 1.1rem 1rem 1rem; }
  .entrada-saludo { font-size: 1.4rem; margin-bottom: .7rem; }
}

/* Inicio de recepción */
.inicio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .75rem; }
.inicio-tarjeta { display: block; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: .8rem .95rem;
  color: var(--text); text-decoration: none; }
a.inicio-tarjeta:hover { border-color: var(--accent); color: var(--text); }
.inicio-tarjeta.inicio-aviso { border-color: var(--brass); box-shadow: inset 4px 0 0 var(--brass); }
.inicio-cabeza { font-size: .82rem; color: var(--muted); margin-bottom: .35rem; }
.inicio-cifra { font-size: 1.6rem; font-weight: 700; color: var(--heading); }
.inicio-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.inicio-chip { border: 1px solid var(--border); border-radius: 999px; padding: .1rem .6rem; font-size: .82rem; font-weight: 600;
  color: var(--heading); text-decoration: none; }
.inicio-chip.chip-aviso, .inicio-chip.chip-warning { background: color-mix(in srgb, var(--brass) 22%, transparent); border-color: transparent; }
.inicio-chip.chip-success { background: color-mix(in srgb, var(--sage) 18%, transparent); color: var(--sage); border-color: transparent; }
.inicio-chip.chip-danger { background: color-mix(in srgb, var(--rust) 18%, transparent); color: var(--rust); border-color: transparent; }
.inicio-chip.chip-hecha { color: var(--muted); font-weight: 500; }

/* Inicio de dirección: la línea de estado, las cifras de hoy, las gráficas del año y lo que decide */
.direccion-estado { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; }
.direccion-estado > .bi { font-size: 1.15rem; }
.direccion-estado.estado-ok > .bi { color: var(--sage); }
.direccion-estado.estado-aviso { border-color: var(--brass); box-shadow: inset 4px 0 0 var(--brass); }
.direccion-estado.estado-aviso > .bi { color: var(--brass); }
.direccion-estado-titulo { font-weight: 600; color: var(--heading); margin-right: .2rem; }
.direccion-seccion { font-size: .8rem; font-weight: 600; color: var(--muted); margin: 1.1rem 0 .45rem; }
.direccion-hoy { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(215px, 100%), 1fr)); gap: .75rem; }
.direccion-graficas { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }   /* 2 × 2 desde tableta */
@media (min-width: 768px) { .direccion-graficas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.direccion-de { font-size: .9rem; font-weight: 500; color: var(--muted); }
.direccion-grafica { position: relative; height: 130px; margin-top: .35rem; }
.direccion-leyenda { display: flex; gap: .9rem; font-size: .75rem; color: var(--muted); margin-top: .35rem; }
.direccion-leyenda span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px;
  margin-right: 4px; vertical-align: -1px; background: var(--accent); }
.direccion-leyenda span.ref::before { background: #A9B4C0; }
.direccion-barra { height: 6px; border-radius: 3px; background: var(--border); margin: .3rem 0 .45rem; overflow: hidden; }
.direccion-barra > div { height: 100%; border-radius: 3px; background: var(--accent); }
.direccion-legal { list-style: none; padding: 0; margin: .1rem 0 0; font-size: .88rem; }
.direccion-legal li { display: flex; align-items: center; gap: .4rem; padding: .12rem 0; }
.direccion-legal li a { margin-left: auto; color: var(--muted); }
.direccion-legal li a:hover { color: var(--accent); }
.direccion-legal .ok, .direccion-bien { color: var(--sage); }
.direccion-legal .medio, .direccion-medio { color: var(--brass); }
.direccion-legal .mal, .direccion-mal { color: var(--rust); }
.direccion-legal .neutro { color: var(--muted); }
.direccion-pie { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-top: 1rem; font-size: .88rem; }

/* Mensajes (chat por canales). Lista: círculo de color por canal, primero los que tienen mensajes.
   Conversación: un tinte suave del color del canal arriba, el círculo y el nombre de quien
   escribe solo al empezar su tanda (color de su rol), lo propio a la derecha en azul, separadores de día y de «Nuevos» que se quedan
   arriba al bajar, y una entrada suave de cada mensaje nuevo. En pantalla grande, la lista a la
   izquierda de la conversación. */
.chat-tarjeta { background: var(--card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow); }
.canal-fila { display: flex; gap: .7rem; align-items: center; padding: .65rem .85rem; color: var(--text);
  text-decoration: none; border-bottom: 1px solid var(--border); transition: background .15s ease; }
.canal-fila:hover { background: color-mix(in srgb, var(--accent) 6%, var(--card)); color: var(--text); }
.canal-activo, .canal-activo:hover { background: color-mix(in srgb, var(--accent) 12%, var(--card)); }
.canal-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.canal-linea { display: flex; justify-content: space-between; align-items: center; gap: .5rem; min-width: 0; }
.canal-nombre { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.canal-hora { font-size: .75rem; color: var(--muted); white-space: nowrap; }
.canal-ultimo { font-size: .85rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.canal-sin-leer { box-shadow: inset 3px 0 0 var(--accent); }
.canal-sin-leer .canal-nombre { font-weight: 700; }
.canal-sin-leer .canal-ultimo { color: var(--text); }
.canal-sin-leer .canal-hora { color: var(--accent); font-weight: 600; }
.canales-vacios summary { padding: .55rem .85rem; font-size: .85rem; color: var(--muted); cursor: pointer;
  border-bottom: 1px solid var(--border); }
.canales-vacios .canal-nombre { font-weight: 400; }
/* administración: «Tus conversaciones» y, plegados, los canales entre otros departamentos */
.canales-apartado, .canales-supervisa > summary { padding: .55rem .85rem; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--muted) 6%, var(--card)); }
.canales-supervisa > summary { cursor: pointer; }
.canales-supervisa-nuevos { color: var(--accent); }
.canales-lista > :last-child, .canales-lista > .canales-vacios:last-child[open] > .canal-fila:last-child,
.canales-lista > .canales-supervisa:last-child[open] > .canal-fila:last-child,
.canales-lista > .canales-supervisa:last-child:not([open]) > summary { border-bottom: 0; }
.canal-avatar { --c: #534AB7; width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: flex;
  align-items: center; justify-content: center; font-size: 1.25rem; line-height: 1; color: var(--c);
  background: linear-gradient(145deg, color-mix(in srgb, var(--c) 22%, var(--card)), color-mix(in srgb, var(--c) 10%, var(--card)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 25%, transparent); }
.canal-avatar-dos { font-size: .9rem; letter-spacing: -.12em; }   /* administración: «Recepción & Pisos», los dos dibujos */
.canal-color-0 { --c: #534AB7; } .canal-color-1 { --c: #0F6E56; } .canal-color-2 { --c: #854F0B; }
.canal-color-3 { --c: #993556; } .canal-color-4 { --c: #185FA5; } .canal-color-5 { --c: #993C1D; }
[data-bs-theme="dark"] .canal-color-0 { --c: #AFA9EC; } [data-bs-theme="dark"] .canal-color-1 { --c: #5DCAA5; }
[data-bs-theme="dark"] .canal-color-2 { --c: #EF9F27; } [data-bs-theme="dark"] .canal-color-3 { --c: #ED93B1; }
[data-bs-theme="dark"] .canal-color-4 { --c: #85B7EB; } [data-bs-theme="dark"] .canal-color-5 { --c: #F0997B; }

.chat-dos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; max-width: 72rem; }
@media (min-width: 992px) {
  .chat-dos { grid-template-columns: 19rem minmax(0, 1fr); align-items: start; }
  .chat-lado { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
}
.chat-ventana { overflow: visible; }
/* cabecera translúcida, pegada arriba al bajar (en el móvil, debajo de la barra de la app) */
.chat-cabeza { position: sticky; top: 56px; z-index: 4; display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem;
  border-bottom: 1px solid var(--border); border-radius: 16px 16px 0 0;
  background: color-mix(in srgb, var(--card) 82%, transparent); backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4); }
@media (min-width: 992px) { .chat-cabeza { top: 0; } }
.chat-titulo { font-size: 1.05rem; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-volver { color: var(--text); font-size: 1.2rem; text-decoration: none; }
.chat-info { padding: .5rem .9rem; border-bottom: 1px solid var(--border); }
.chat-mensajes { display: flex; flex-direction: column; justify-content: flex-end; gap: .15rem; padding: .8rem .7rem;
  min-height: max(12rem, calc(100vh - 15rem));
  background: linear-gradient(180deg, color-mix(in srgb, var(--c, var(--accent)) 9%, var(--paper)) 0, var(--paper) 22rem); }
[data-bs-theme="dark"] .chat-mensajes {
  background: linear-gradient(180deg, color-mix(in srgb, var(--c, var(--accent)) 12%, var(--paper)) 0, var(--paper) 22rem); }
.msg-dia, .msg-nuevos { position: sticky; top: 118px; z-index: 3; align-self: center; margin: .6rem 0 .3rem; }
@media (min-width: 992px) { .msg-dia, .msg-nuevos { top: 62px; } }
.msg-dia span { font-size: .72rem; font-weight: 600; color: var(--muted); background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: blur(6px); border: 1px solid var(--border); border-radius: 999px; padding: .15rem .75rem;
  box-shadow: 0 1px 2px rgba(15, 30, 50, .06); }
.msg-nuevos { position: static; align-self: stretch; display: flex; align-items: center; gap: .6rem; color: var(--rust);
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.msg-nuevos::before, .msg-nuevos::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--rust) 45%, transparent); }
.msg { max-width: 82%; align-self: flex-start; display: flex; gap: .45rem; align-items: flex-start; margin-top: .55rem; }
.msg-seguido { margin-top: .1rem; }
.msg-propio { align-self: flex-end; }
.msg-cuerpo { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.msg-propio .msg-cuerpo { align-items: flex-end; }
.msg-avatar { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center;
  justify-content: center; font-size: .66rem; font-weight: 700; color: #fff; margin-top: 1.05rem;
  background: linear-gradient(145deg, color-mix(in srgb, var(--rol, #6b7684) 85%, #fff), var(--rol, #6b7684)); }
.msg-avatar-dibujo { font-size: 1.05rem; line-height: 1; }
.dibujo-opcion { width: 2.6rem; height: 2.6rem; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.3rem; line-height: 1; border-radius: 50%; }
label.dibujo-opcion[for="dibujoNinguno"] { font-size: .72rem; font-weight: 700; }
.msg-seguido .msg-avatar { visibility: hidden; height: 0; margin-top: 0; }
.msg-autor { font-size: .76rem; font-weight: 700; margin: 0 0 .12rem .25rem; color: var(--rol, var(--muted)); }
.msg-rol-admin { --rol: #534AB7; } .msg-rol-tecnico { --rol: #0F6E56; } .msg-rol-recepcion { --rol: #A0600E; }
.msg-rol-housekeeping { --rol: #993556; } .msg-rol-fnb { --rol: #993C1D; } .msg-rol-direccion { --rol: #185FA5; }
[data-bs-theme="dark"] .msg-autor.msg-rol-admin { --rol: #AFA9EC; } [data-bs-theme="dark"] .msg-autor.msg-rol-tecnico { --rol: #5DCAA5; }
[data-bs-theme="dark"] .msg-autor.msg-rol-recepcion { --rol: #EF9F27; } [data-bs-theme="dark"] .msg-autor.msg-rol-housekeeping { --rol: #ED93B1; }
[data-bs-theme="dark"] .msg-autor.msg-rol-fnb { --rol: #F0997B; } [data-bs-theme="dark"] .msg-autor.msg-rol-direccion { --rol: #85B7EB; }
.msg-texto { background: var(--card); border: 1px solid var(--border); border-radius: 4px 16px 16px 16px;
  padding: .4rem .7rem; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); cursor: default;
  box-shadow: 0 1px 1.5px rgba(15, 30, 50, .07); }
.msg-seguido .msg-texto { border-radius: 16px; }
.msg-propio .msg-texto { color: #fff; border-color: transparent; border-radius: 16px 4px 16px 16px;
  background: linear-gradient(135deg, #2F7C9C, #245F7A); box-shadow: 0 2px 6px rgba(36, 95, 122, .25); }
[data-bs-theme="dark"] .msg-propio .msg-texto { background: linear-gradient(135deg, #2A6E8B, #1D5068); }
.msg-propio.msg-seguido .msg-texto { border-radius: 16px; }
.msg-hora { float: right; font-size: .66rem; color: var(--muted); margin: .5rem -.15rem -.25rem .7rem; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.msg-propio .msg-hora { color: rgba(255, 255, 255, .75); }
.msg-emoji { background: none !important; border: 0 !important; box-shadow: none !important; font-size: 2.4rem;
  line-height: 1.15; padding: 0 .1rem; }
.msg-emoji .msg-hora { display: block; float: none; text-align: right; margin: 0; color: var(--muted) !important; }
.msg-urgente .msg-texto { border: 1.5px solid var(--rust); background: color-mix(in srgb, var(--rust) 9%, var(--card));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--rust) 10%, transparent); color: var(--text); }
.msg-propio.msg-urgente .msg-texto { background: linear-gradient(135deg, #B5462A, #8E3720); color: #fff; }
.msg-marca-urgente { color: var(--rust); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.msg-propio .msg-marca-urgente { color: #fff; }
/* «Convertir en avería»: con su texto debajo si el mensaje es de otro y nombra una habitación;
   en los demás, una llavecita al lado de la burbuja (a la izquierda en los propios) */
.msg-fila { display: flex; align-items: flex-end; gap: .3rem; max-width: 100%; }
.msg-fila .msg-texto { min-width: 0; }
.msg-propio .msg-fila { flex-direction: row-reverse; }
.msg-llave { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; color: var(--muted); font-size: .72rem; text-decoration: none; opacity: .65;
  transition: opacity .15s ease, background .15s ease, color .15s ease; }
.msg-llave:hover, .msg-llave:focus-visible { opacity: 1; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent); }
.msg-boton { display: inline-block; margin: .2rem .3rem 0; font-size: .76rem; color: var(--muted); text-decoration: none; }
.msg-boton:hover { color: var(--accent); text-decoration: underline; }
.msg-averia { margin: .2rem .3rem 0; color: var(--sage); text-decoration: none; font-size: .76rem; font-weight: 600; }
.msg-visto { color: var(--muted); font-size: .7rem; margin: .15rem .3rem 0; }
.msg-visto .bi { color: var(--accent); }
.msg-nuevo { animation: msg-entra .28s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes msg-entra { from { opacity: 0; transform: translateY(8px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .msg-nuevo { animation: none; } }
/* bajar a lo último: aparece si se lee más arriba y llegan mensajes */
.chat-abajo-sitio { position: sticky; bottom: 4.4rem; height: 0; z-index: 4; display: flex; justify-content: flex-end;
  padding-right: .9rem; }
.chat-abajo { transform: translateY(-100%); display: inline-flex; align-items: center; gap: .3rem; border: 0;
  border-radius: 999px; padding: .4rem .75rem; background: var(--card); color: var(--accent); font-weight: 700;
  font-size: .8rem; box-shadow: var(--shadow-lg); }
.chat-abajo[hidden] { display: none; }
.chat-escribir { position: sticky; bottom: 0; z-index: 4; display: flex; gap: .45rem; align-items: flex-end; padding: .6rem;
  background: color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--border); border-radius: 0 0 16px 16px; }
.chat-escribir textarea { resize: none; max-height: 160px; border-radius: 1.3rem; padding: .45rem .95rem;
  transition: border-color .15s ease, box-shadow .15s ease; }
.chat-escribir.urgente textarea { border-color: var(--rust); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--rust) 22%, transparent); }
.chat-redondo { border-radius: 50%; width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center;
  justify-content: center; flex-shrink: 0; transition: transform .18s ease, opacity .18s ease; }
.chat-enviar { background: linear-gradient(135deg, #2F7C9C, #245F7A); border: 0; }
.chat-escribir:not(.con-texto) .chat-enviar { opacity: .5; transform: scale(.9); }
.chat-escribir.con-texto .chat-enviar { transform: scale(1); }
.chat-escribir.urgente .chat-enviar { background: linear-gradient(135deg, #B5462A, #8E3720); }
.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; }
/* ya escondido no puede seguir encima de nada: en el móvil tapaba el final del menú
   (Mi cuenta, Salir…) y se «comía» los toques */
.toast-flotante:not(.show) { pointer-events: 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-check:checked + .btn-outline-primary,
[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; }
}

/* ---------- Energía: rellenar una factura con su PDF ----------
   El texto de la factura con sus números como botones (para enseñar dónde está cada dato)
   y, en el formulario, los campos que se han rellenado con el PDF, en azul para revisarlos. */
.factura-texto { font-family: var(--bs-font-monospace); font-size: .78rem; line-height: 2; white-space: pre-wrap;
  max-height: 70vh; overflow: auto; }
.factura-pagina { color: var(--muted); font-family: 'IBM Plex Sans', sans-serif; margin-top: .5rem; }
.chip-valor { font: inherit; color: inherit; background: var(--card); border: 1px solid var(--bs-border-color);
  border-radius: .3rem; padding: 0 .25rem; line-height: 1.5; }
.chip-valor:hover { border-color: var(--bs-primary); }
.chip-valor.usado { background: var(--bs-success-bg-subtle); border-color: var(--bs-success-border-subtle); }
.chip-valor.elegido { background: var(--bs-primary-bg-subtle); border-color: var(--bs-primary); outline: 2px solid var(--bs-primary); }
.campo-leido { background-color: var(--bs-primary-bg-subtle) !important; border-color: var(--bs-primary-border-subtle) !important; }
.ensenar-rejilla { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.ensenar-rejilla .factura-texto { max-height: 50vh; }
@media (min-width: 992px) {
  .ensenar-rejilla { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start;
    grid-template-areas: "pregunta factura" "campos factura"; }
  .ensenar-pregunta { grid-area: pregunta; }
  .ensenar-factura { grid-area: factura; }
  .ensenar-campos { grid-area: campos; }
  .ensenar-rejilla .factura-texto { max-height: 75vh; }
}

/* ---------- Cocina y bar ----------
   La barra de carga (amperios frente a la protección), el plano con enchufes y equipos movidos,
   y el gráfico de la luz de hoy. Las marcas del plano son las del plano vivo. Su menú es el de
   todos (☰ en el móvil): las pestañas de arriba se quitaron el 01/11/2026 (Manuel). */
.barra-carga { height: .55rem; background: var(--border); border-radius: 999px; overflow: hidden; margin: .3rem 0; }
.barra-carga > span { display: block; height: 100%; border-radius: 999px; background: var(--sage); }
.barra-carga > .carga-ambar { background: var(--brass); }
.barra-carga > .carga-rojo { background: var(--rust); }
.linea-punto { display: inline-block; width: .75rem; height: .75rem; border-radius: 50%; vertical-align: -1px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.marca.marca-toma { padding: 2px; min-width: 1.4rem; justify-content: center; font-size: .7rem; }
.marca.marca-movida, .marca.marca-movible { border-style: dashed; outline: 2px dashed var(--brass); outline-offset: 1px; }
.marca.marca-movible { z-index: 4; cursor: grab; }
.marca.toma-elegida { outline: 3px solid var(--ink); outline-offset: 1px; z-index: 3; }
.marca-fantasma { position: absolute; transform: translate(-50%, -50%) scale(var(--inv, 1)); padding: 1px 7px;
  border-radius: 999px; border: 2px dashed #888780; color: #5F5E5A; background: rgba(255,255,255,.8);
  font-size: .75rem; white-space: nowrap; pointer-events: none; }
.marca-fantasma-leyenda { display: inline-block; padding: 0 6px; border-radius: 999px; border: 2px dashed #888780; }
.plano-rayas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.plano-rayas line { stroke: var(--brass); stroke-width: 2.5; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.luz-grafico { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 130px;
  border-bottom: 1px solid var(--border); }
.luz-grafico .cuarto { flex: 1 1 0; min-width: 2px; background: var(--sage); border-radius: 2px 2px 0 0; opacity: .85; }
.luz-grafico .cuarto.ambar { background: var(--brass); }
.luz-grafico .cuarto.rojo { background: var(--rust); }
.luz-raya { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--rust); z-index: 1; }

/* Manuales → Subir varios: la zona donde se sueltan los archivos y la barra de cada uno */
.zona-soltar { display: block; border: 2px dashed var(--border); border-radius: 12px; padding: 1.25rem 1rem; text-align: center;
  color: var(--muted); background: var(--card); cursor: pointer; }
.zona-soltar.encima, .zona-soltar:focus-within { border-color: var(--accent); color: var(--accent); }
.mv-linea { display: grid; grid-template-columns: minmax(0, 1fr) 8rem 11rem; gap: .25rem .75rem; align-items: center; font-size: .875rem; }
@media (max-width: 575.98px) {
  .mv-linea { grid-template-columns: minmax(0, 1fr) 5rem; }
  .mv-linea .mv-estado { grid-column: 1 / -1; }
}
.mv-cifra { background: var(--paper); border-radius: 10px; padding: .4rem .75rem; }
.mv-cifra b { font-size: 1.35rem; font-weight: 600; }
.mv-cifra-duda { color: var(--brass); }