/* Karen App — estilos (v0.5, rediseño v2 + ronda de pulido, 18 ago 2026)
   Tokens heredados de ESTILOS.md Bythron v1.0 (misma base que JusticeGG / New Era
   Explorer). #FF6B1A es el acento oficial de Karen. Sin build, sin framework: un solo
   CSS servido tal cual por Flask.
   Estructura: 1) base y tokens  2) armazón (sidebar/cabecera/nav)  3) piezas comunes
   (botones, tarjetas, modal, overlays)  4) cada pantalla. */

/* ---------- 1. base ---------- */
/* ---- tema claro/oscuro/sistema (18 ago 2026, duodécima y decimotercera vuelta) ----
   La v0.12 cambió la base de oscuro a claro (el cristal esmerilado se ve mejor sobre
   fondos claros, así lo diseñó Apple en Liquid Glass). Pedido de vuelta: recuperar el
   oscuro como segundo tema con un interruptor claro/oscuro/sistema, guardado por perfil
   (`prefs.theme` en backend.py) en vez de perderlo. Por defecto sigue el sistema
   (prefers-color-scheme) - de ahí el `:root` de abajo siendo el tema CLARO a secas (sin
   condición: es lo que ve cualquiera sin JS o antes de que cargue el perfil) y el bloque
   oscuro entrando por dos caminos distintos:
     1. `@media (prefers-color-scheme: dark)` + `:not([data-theme="light"])` - se aplica
        solo si el sistema pide oscuro Y la persona no ha forzado claro a mano.
     2. `:root[data-theme="dark"]` - fuerza oscuro pase lo que pida el sistema.
   "Sistema" como preferencia explícita no pone ningún atributo (mismo comportamiento que
   no elegir nada); "claro"/"oscuro" ponen `data-theme` vía JS (ver applyTheme en app.js,
   que también cachea el último tema en localStorage para aplicarlo antes de que cargue el
   perfil y evitar el parpadeo del tema equivocado al abrir la app).
   Contraste del tema claro revisado con la fórmula WCAG (no solo "se lee"): --text sobre
   --bg da 15.8:1, --text-dim sobre --bg da 5.9:1 - ambos de sobra por encima del mínimo AA
   (4.5:1 para texto normal). --ok/--warn/--star en claro también se oscurecieron respecto
   al tema oscuro (los tonos vivos de antes, pensados para leerse sobre negro, quedaban casi
   invisibles sobre un fondo claro) - siguen sobre 4.5:1 (--star, que solo se usa como
   relleno de icono/gráfico, sobre 3:1 - el mínimo que pide WCAG para eso, no para texto). */
:root {
  /* ---- color-scheme (19 ago 2026, decimoquinta vuelta) ----
     Esto es lo que de verdad causaba "todo blanco fuera de Inicio" en oscuro: sin
     declarar color-scheme, el navegador pinta los controles NATIVOS (checkboxes, el fondo
     de rebote al hacer scroll de más en Safari/iOS, la barra de scroll de escritorio...)
     en claro SIEMPRE, pase lo que pase con --bg/--text - es un plano totalmente aparte de
     nuestras variables, y por eso no salía con ningún grep de colores hardcodeados. Se
     declara aquí (claro) y se sobreescribe a "dark" en los dos sitios donde --bg pasa a
     oscuro, más abajo. */
  color-scheme: light;
  --bg: #F3F4F7;             /* surface-base */
  --surface: #FFFFFF;        /* surface-default */
  --surface2: #EAECF1;       /* surface-elevated */
  --border: #DDE1E7;         /* border-subtle */
  --text: #171A21;           /* text-primary */
  --text-dim: #565F6D;       /* text-secondary */
  --accent: #FF6B1A;
  --accent-ink: #1a0d02;    /* texto sobre el acento */
  --accent-soft: rgba(255,107,26,0.1);
  --accent-line: rgba(255,107,26,0.35);
  --ok: #0B7A3E;
  --warn: #C62828;
  --star: #A67C00;
  /* fondo translúcido (mismo tono que --bg) para cabecera/barra inferior/paneles a
     pantalla completa - un único sitio para no repetir el color a mano en cada uno. */
  --bg-translucent: rgba(243,244,247,0.72);
  --bg-translucent-strong: rgba(243,244,247,0.88);

  /* ---- cristal esmerilado (18 ago 2026) ----
     Las tarjetas dejan de ser un color plano y pasan a ser superficies semitransparentes
     con desenfoque por detrás, estilo Apple. Para que el efecto se note de verdad hace
     falta que haya ALGO que difuminar: de ahí las manchas de color de body::before (los
     4 tonos viven en --blob-* para poder variar su opacidad por tema sin repetir todo el
     gradiente). Sobre fondo claro hace falta menos opacidad de blanco (y menos color en
     las manchas) que sobre negro para que el cristal se note sin verse sucio. */
  --glass: rgba(255, 255, 255, 0.55);
  --glass-strong: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(20, 22, 30, 0.09);
  --glass-blur: blur(18px) saturate(135%);
  /* ---- manchas de fondo (18 ago 2026; subidas 18 ago, decimocuarta vuelta) ----
     Pedido de Sebastian tras probar la v0.13: sobre blanco casi puro no había apenas color
     real detrás de las tarjetas que refractar, así que el cristal se notaba muy poco -
     sobre todo en tema claro, de ahí que aquí suban bastante más que en el oscuro (ver
     también los tamaños del gradiente en body::before, más abajo). */
  --blob-orange: rgba(255,107,26,0.30);
  --blob-blue: rgba(90,140,255,0.24);
  --blob-violet: rgba(155,107,255,0.22);
  --blob-teal: rgba(45,212,191,0.20);
  /* ---- liquid glass: brillo de borde + sombra de profundidad (18 ago 2026) ----
     Una línea de luz muy tenue arriba (como si el cristal cogiera algo de luz del fondo)
     más una sombra suave hacia abajo - es lo que separa una tarjeta plana de una que
     "flota" en capas. Se aplica en un único bloque compartido (ver más abajo) para no
     repetirlo en cada selector .*-card. Sombra suave a propósito - una sombra negra
     fuerte sobre fondo claro se ve como un halo sucio alrededor de cada tarjeta en vez de
     profundidad (el tema oscuro, más abajo, sí usa una sombra más marcada). */
  --glass-shine: rgba(255, 255, 255, 0.85);
  --glass-shadow: 0 16px 34px -18px rgba(20, 22, 35, 0.16), 0 1px 0 0 var(--glass-shine) inset;
  /* ---- shine fuerte, solo para las tarjetas "hero" (18 ago 2026, decimocuarta vuelta) ----
     Ver más abajo (".liquid-glass-hero") - vidrio real reacciona a la luz con un brillo
     direccional marcado arriba, no solo una línea de 1px. Puramente CSS (gradiente), nada
     que ver con el filtro SVG - por eso se ve igual de bien tenga o no soporte Chromium. */
  --glass-shine-strong: rgba(255, 255, 255, 0.85);
  --glass-shadow-hero: 0 26px 60px -20px rgba(20, 22, 35, 0.22), 0 1.5px 0 0 var(--glass-shine-strong) inset;
  /* dónde termina el degradado del shine (ver la regla compartida más abajo) - por
     defecto el mismo 26% de siempre; el tema oscuro lo estrecha (ver los dos bloques
     oscuros más abajo), sin tocar este valor claro. */
  --glass-shine-stop: 26%;

  /* ---- color propio de cada carpeta de Notas (18 ago 2026, sexta vuelta) ----
     Mismos en los dos temas: son colores elegidos a mano por cada persona, no parte de la
     paleta base. */
  --folder-naranja: #FF6B1A;
  --folder-azul: #4C8DFF;
  --folder-verde: #2ECC71;
  --folder-morado: #9B6BFF;
  --folder-rosa: #FF6B9D;
  --folder-turquesa: #2DD4BF;
  --folder-amarillo: #F5C518;
  --folder-rojo: #FF5A5A;
}

/* ---- tema oscuro: el que había antes de la v0.12, recuperado tal cual ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0A0B10; --surface: #1B202B; --surface2: #262B3A; --border: #2C3242;
    --text: #E0E6ED; --text-dim: #A1AFBF;
    --ok: #00E676; --warn: #FF9E9E; --star: #FFC93C;
    --bg-translucent: rgba(10,11,16,0.72); --bg-translucent-strong: rgba(10,11,16,0.86);
    --glass: rgba(27, 32, 43, 0.72); --glass-strong: rgba(38, 43, 58, 0.78);
    --glass-border: rgba(255, 255, 255, 0.07);
    --blob-orange: rgba(255,107,26,0.30); --blob-blue: rgba(90,140,255,0.22);
    --blob-violet: rgba(155,107,255,0.20); --blob-teal: rgba(45,212,191,0.15);
    --glass-shine: rgba(255, 255, 255, 0.16);
    --glass-shadow: 0 20px 44px -18px rgba(0, 0, 0, 0.6), 0 1px 0 0 var(--glass-shine) inset;
    /* 19 ago 2026 (decimoséptima vuelta): en oscuro, blanco al 0.30 sobre un cuarto entero
       de la tarjeta se veía como una banda ancha y brillante, no como un reflejo de vidrio
       - bajado a 0.08 y estrechado el degradado (26% -> 9%, ver --glass-shine-stop) para
       que quede una línea de luz fina arriba, no un lavado. El tema claro no se toca (ahí
       0.85/26% ya se leía bien - el blanco casi no destaca sobre un fondo ya claro). */
    --glass-shine-strong: rgba(255, 255, 255, 0.08);
    --glass-shine-stop: 9%;
    --glass-shadow-hero: 0 26px 60px -18px rgba(0, 0, 0, 0.65), 0 1.5px 0 0 var(--glass-shine-strong) inset;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0A0B10; --surface: #1B202B; --surface2: #262B3A; --border: #2C3242;
  --text: #E0E6ED; --text-dim: #A1AFBF;
  --ok: #00E676; --warn: #FF9E9E; --star: #FFC93C;
  --bg-translucent: rgba(10,11,16,0.72); --bg-translucent-strong: rgba(10,11,16,0.86);
  --glass: rgba(27, 32, 43, 0.72); --glass-strong: rgba(38, 43, 58, 0.78);
  --glass-border: rgba(255, 255, 255, 0.07);
  --blob-orange: rgba(255,107,26,0.30); --blob-blue: rgba(90,140,255,0.22);
  --blob-violet: rgba(155,107,255,0.20); --blob-teal: rgba(45,212,191,0.15);
  --glass-shine: rgba(255, 255, 255, 0.16);
  --glass-shadow: 0 20px 44px -18px rgba(0, 0, 0, 0.6), 0 1px 0 0 var(--glass-shine) inset;
  --glass-shine-strong: rgba(255, 255, 255, 0.08);
  --glass-shine-stop: 9%;
  --glass-shadow-hero: 0 26px 60px -18px rgba(0, 0, 0, 0.65), 0 1.5px 0 0 var(--glass-shine-strong) inset;
}
.folder-color-naranja { --folder-c: var(--folder-naranja); }
.folder-color-azul { --folder-c: var(--folder-azul); }
.folder-color-verde { --folder-c: var(--folder-verde); }
.folder-color-morado { --folder-c: var(--folder-morado); }
.folder-color-rosa { --folder-c: var(--folder-rosa); }
.folder-color-turquesa { --folder-c: var(--folder-turquesa); }
.folder-color-amarillo { --folder-c: var(--folder-amarillo); }
.folder-color-rojo { --folder-c: var(--folder-rojo); }
* { box-sizing: border-box; }
html, body { height: 100%; }
/* Manchas de color detrás de todo, estilo liquidglassdesign.com: varias capas de luz de
   colores distintos flotando sobre el fondo oscuro, con algo de desenfoque propio para que
   se vean como manchas de cristal y no como bordes duros. Es lo que hace que el desenfoque
   de las tarjetas tenga algo real que enseñar en vez de difuminar un color plano. Fijas
   (no se desplazan con el scroll) y sin capturar clics; --mx/--my (ver app.js) mueven esta
   capa unos pocos px con el ratón para dar sensación de profundidad, siempre que el sistema
   no pida "menos movimiento" - por defecto están en 0, así que sin JS la capa no se mueve. */
body::before {
  content: ""; position: fixed; inset: -5vw; z-index: -1; pointer-events: none;
  background:
    radial-gradient(54vw 54vw at 14% -6%, var(--blob-orange), transparent 66%),
    radial-gradient(48vw 48vw at 90% 8%, var(--blob-blue), transparent 68%),
    radial-gradient(46vw 46vw at 78% 98%, var(--blob-violet), transparent 66%),
    radial-gradient(40vw 40vw at 6% 96%, var(--blob-teal), transparent 64%);
  filter: blur(60px);
  transform: translate3d(calc(var(--mx, 0) * 16px), calc(var(--my, 0) * 16px), 0);
  transition: transform 0.4s ease-out;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) { body::before { transition: none; } }
/* ---- fondo personalizado por persona (19 ago 2026, sesión nocturna, punto 4) ----
   Si esta persona subió su propia foto (applyBackground() en app.js pone la clase
   .has-custom-bg en <body> y la variable --custom-bg-image con la url() de verdad),
   sustituye del todo las manchas de color por esa imagen - mismo elemento (body::before),
   nada nuevo que gestionar. Capa de oscurecido fija encima de la imagen (mismo
   rgba(0,0,0,0.4) en los dos temas, a propósito - ver el porqué en 10-app-karen.md) para
   que el texto y las tarjetas de cristal, pensadas para leerse sobre las manchas suaves de
   antes, sigan leyéndose igual de bien sobre una foto que puede tener cualquier brillo.
   Sin el blur(60px) de las manchas: una foto de verdad se reconoce mejor nítida que
   emborronada. */
body.has-custom-bg::before {
  background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), var(--custom-bg-image);
  background-size: cover; background-position: center;
  filter: none;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}
.hidden { display: none !important; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }

/* ---------- 2. armazón ---------- */
.shell { flex: 1; display: flex; min-height: 0; }
.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }

#sidebar { display: none; }
@media (min-width: 900px) {
  /* nav "flotando" estilo Ajustes de macOS (19 ago 2026, decimoctava vuelta): antes iba
     pegado a los tres bordes de la ventana con un simple border-right como separador. El
     hueco (gap) entre el panel y el contenido, más el margen arriba/abajo/izquierda del
     .shell, es lo que deja ver el fondo alrededor y hace que parezca su propio panel
     flotante en vez de un carril fijo - mismo criterio de cristal que el resto de la app
     (--glass/--glass-border/--glass-blur/--glass-shadow, ya usados en las tarjetas). */
  .shell { gap: 12px; padding: 12px 0 12px 12px; }
  #sidebar {
    width: 232px; flex: none;
    border-radius: 20px;
    background: var(--glass); border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow);
    /* separación entre el borde del panel y su contenido (iconos/texto) más generosa que
       antes - el mismo aire que deja Ajustes de macOS entre el marco y la lista. */
    padding: 20px 14px;
    display: flex; flex-direction: column; gap: 4px;
  }
  #bottom-nav, .fab, .header-brand { display: none !important; }
}
.sidebar-brand { display: flex; align-items: baseline; gap: 8px; padding: 0 12px 22px; }
.brand-name { font-family: "Space Mono", monospace; font-size: 20px; font-weight: 700; }
.sidebar-spacer { flex: 1; }
.side-nav-btn {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  background: none; border: none; border-radius: 12px;
  padding: 11px 12px;
  color: var(--text-dim);
  font-family: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.side-nav-btn:hover { background: var(--surface); color: var(--text); }
.side-nav-btn.active { background: var(--accent-soft); color: var(--accent); }
.side-nav-btn svg { width: 21px; height: 21px; flex: none; }
.sidebar-talk {
  display: flex; align-items: center; gap: 10px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  border-radius: 12px; padding: 11px 12px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; margin-bottom: 12px; text-align: left;
}
.sidebar-talk svg { width: 18px; height: 18px; }
.sidebar-talk .key {
  margin-left: auto; font-family: "Space Mono", monospace; font-size: 11px;
  border: 1px solid var(--accent-line); border-radius: 5px; padding: 1px 5px;
}
.sidebar-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.sidebar-user-text { min-width: 0; }
.sidebar-user-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user-sub { font-size: 11px; color: var(--text-dim); }

/* ---------- aviso de actualización disponible (18 ago 2026) ----------
   Detección 100% local (ver backend.py: _version_watch_loop) - nunca consulta internet.
   Escritorio: tarjetita de cristal pegada encima del nombre de cuenta, en la barra
   lateral. Móvil: banner fijo arriba de la pantalla, encima de la cabecera. */
.update-banner {
  display: flex; align-items: center; gap: 8px;
  background: var(--glass-strong); border: 1px solid var(--accent-line);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-radius: 12px; padding: 9px 10px; margin-bottom: 10px;
  font-size: 12px; color: var(--text);
}
.update-banner span:first-child { flex: 1; min-width: 0; }
.update-banner-btn {
  flex: none; background: var(--accent); color: var(--accent-ink); border: none;
  border-radius: 8px; padding: 6px 10px; font-family: inherit; font-size: 12px;
  font-weight: 700; cursor: pointer; white-space: nowrap;
}
.update-banner.mobile {
  flex: none; margin: 0; border-radius: 0;
  border-left: none; border-right: none; border-top: none;
  justify-content: center; padding: 10px 14px;
  padding-top: calc(10px + env(safe-area-inset-top, 0));
}
@media (min-width: 900px) { .update-banner.mobile { display: none !important; } }

header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-translucent);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  position: sticky; top: 0; z-index: 40;
  flex: none;
}
.header-brand { display: flex; align-items: baseline; gap: 8px; }
header h1 { font-family: "Space Mono", monospace; font-size: 19px; margin: 0; font-weight: 700; }
.view-title { font-size: 15px; font-weight: 600; display: none; }
@media (min-width: 900px) { .view-title { display: block; } header { padding: 14px 18px; } }
.version-badge {
  font-size: 10px; font-weight: 700;
  color: var(--accent);
  background: rgba(255,107,26,0.12);
  border: 1px solid rgba(255,107,26,0.3);
  border-radius: 6px; padding: 1px 6px;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.header-right { margin-left: auto; display: flex; align-items: center; gap: 8px; position: relative; }

main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.view {
  display: none;
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 16px 16px 28px;
  width: 100%; max-width: 1120px; margin: 0 auto;
}
.view.active { display: flex; flex-direction: column; }
/* en móvil se deja hueco extra abajo para que el botón redondo de "hablar con Karen"
   (fijo, encima de la barra) nunca tape lo último de la lista. */
/* (el chat se queda fuera: ahí el botón redondo no sale y su caja de texto va abajo) */
@media (max-width: 899px) { .view:not(#chat-view) { padding-bottom: 86px; } }
@media (min-width: 900px) { .view { padding: 24px 28px 40px; } }

#bottom-nav {
  display: flex;
  border-top: 1px solid var(--glass-border);
  background: var(--bg-translucent);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  padding-bottom: env(safe-area-inset-bottom, 0);
  flex: none;
  position: sticky; bottom: 0; z-index: 40;
  /* 19 ago 2026, decimoctava vuelta: mismo espíritu "flotante" que el nav de escritorio,
     pero sin márgenes laterales (es una barra de ancho completo, pegada al borde inferior
     de verdad - el "criterio de la app" aquí es que solo la separación de ARRIBA cuenta,
     así que solo redondea esas dos esquinas, no las cuatro). */
  border-radius: 20px 20px 0 0;
}
.bottom-nav-btn {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 2px 8px;
  background: none; border: none;
  color: var(--text-dim);
  font-size: 11px; font-weight: 600;
  cursor: pointer;
}
.bottom-nav-btn svg { width: 21px; height: 21px; }
.bottom-nav-btn.active { color: var(--accent); }
.fab {
  position: fixed; right: 16px; bottom: 84px;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  border: none;
  box-shadow: 0 8px 22px rgba(255,107,26,0.35);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 45;
}
.fab svg { width: 24px; height: 24px; }

/* ---------- 3. piezas comunes ---------- */
.icon-btn-plain {
  position: relative;
  background: none; border: none; color: var(--text-dim);
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.icon-btn-plain:hover { background: var(--surface); color: var(--text); }
.icon-btn-plain svg { width: 19px; height: 19px; }
.icon-btn { cursor: pointer; color: var(--text-dim); display: flex; }
.icon-btn svg { width: 20px; height: 20px; display: block; }
.icon-btn:hover { color: var(--text); }
.square-btn {
  background: var(--surface); border: 1px solid var(--border); color: var(--text-dim);
  border-radius: 10px; width: 36px; height: 36px; flex: none;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.square-btn:hover { color: var(--text); border-color: var(--accent); }
.square-btn svg { width: 18px; height: 18px; }
.pill-btn {
  display: flex; align-items: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-dim);
  border-radius: 20px; padding: 8px 15px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; flex: none;
}
.pill-btn svg { width: 14px; height: 14px; }
.pill-btn:hover { border-color: var(--accent); color: var(--text); }
.pill-btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.mini-btn {
  background: var(--surface2); border: 1px solid var(--border); color: var(--text-dim);
  border-radius: 8px; padding: 6px 11px;
  font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.mini-btn:hover { border-color: var(--accent); color: var(--text); }
.primary-btn {
  background: var(--accent); color: var(--accent-ink);
  border: none; border-radius: 10px; padding: 10px 16px;
  font-family: inherit; font-weight: 700; font-size: 13px; cursor: pointer; flex: none;
}
.ghost-btn {
  background: none; border: none; color: var(--text-dim);
  font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; gap: 5px; padding: 4px;
}
.ghost-btn svg { width: 15px; height: 15px; }
.ghost-btn:hover { color: var(--accent); }
.ghost-btn.danger:hover { color: var(--warn); }
.section-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-dim); margin: 18px 0 10px;
}
.empty-state {
  color: var(--text-dim); font-size: 14px; line-height: 1.6;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px;
}
.soft-note { font-size: 13px; color: var(--text-dim); line-height: 1.6; margin-top: 16px; }
.dashed-card {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--surface); border: 1px dashed var(--border); border-radius: 14px;
  padding: 18px; color: var(--text-dim); font-size: 14px; cursor: pointer;
}
.dashed-card:hover { border-color: var(--accent); }
.dashed-card svg { width: 18px; height: 18px; }
.cards-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .cards-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.segment-row { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.segment {
  padding: 9px 18px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-dim);
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.segment.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.edit-hint {
  background: rgba(255,107,26,0.08); border: 1px solid rgba(255,107,26,0.3);
  border-radius: 12px; padding: 12px 14px;
  font-size: 13px; line-height: 1.5; margin-bottom: 14px;
}

/* menús desplegables de la cabecera */
.dropdown-panel {
  position: absolute; top: 42px; right: 0;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 12px; min-width: 220px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  z-index: 95; overflow: hidden;
}
.dropdown-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; font-size: 14px; cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.dropdown-row:last-child { border-bottom: none; }
.dropdown-row:hover { background: var(--surface); }
.dropdown-row.danger { color: var(--warn); }
.dropdown-row svg { width: 16px; height: 16px; flex: none; }
/* estado de un interruptor dentro del menú de cuenta (hoy: modo desarrollador) */
.dropdown-flag {
  margin-left: auto; font-size: 11px; font-weight: 700;
  color: var(--text-dim); border: 1px solid var(--border);
  border-radius: 6px; padding: 2px 7px; white-space: nowrap;
}
.dropdown-flag.on { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
/* bloque técnico en crudo: solo aparece con el modo desarrollador activado */
.dev-block {
  margin: 8px 0 0; padding: 10px 12px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; line-height: 1.5; color: var(--text-dim);
  white-space: pre-wrap; word-break: break-word; overflow-x: auto;
}
.notif-badge {
  position: absolute; top: 1px; right: 1px;
  background: #FF4D4D; color: #fff;
  font-size: 10px; font-weight: 700;
  min-width: 15px; height: 15px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px; line-height: 1; border: 2px solid var(--bg);
}
.account-avatar-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  border: none; cursor: pointer; font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center; flex: none;
}
#notif-panel { min-width: 280px; max-width: 320px; max-height: 60vh; overflow-y: auto; }
.notif-item { padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 13px; line-height: 1.4; cursor: pointer; }
.notif-item:last-child { border-bottom: none; }
.notif-item.unread { background: rgba(255,107,26,0.08); }
.notif-item .ts { color: var(--text-dim); font-size: 11px; margin-top: 3px; }
.notif-empty { padding: 20px 16px; color: var(--text-dim); font-size: 13px; text-align: center; }

/* ---- modales/emergentes unificados, estilo Ajustes de Claude Desktop (19 ago 2026,
   sesión nocturna, punto 5) ----
   Antes, Ajustes/Historial/Notas-editor/Registro de cambios/Enviar sugerencias (todos los
   que usan .overlay - ver openPanel/openSettings/openHistory en app.js) eran una página a
   pantalla completa de borde a borde, en CUALQUIER tamaño de ventana - ni centrados ni con
   el fondo oscurecido, un componente visual aparte del modal pequeño de confirmaciones
   (#modal-overlay/.modal-box, que ya hacía esto bien). Unificados bajo el mismo criterio:
   .overlay pasa a ser solo el TELÓN de fondo (mismo rgba(0,0,0,0.55) neutro que ya usaba
   #modal-overlay, en vez de un tono según el tema - un telón "claramente oscurecido" no
   debe cambiar de tono con el tema, es de foco, no de estilo) y .overlay-panel (nuevo, un
   <div> que envuelve la cabecera + cuerpo de cada overlay - ver index.html) es la tarjeta
   flotante de verdad, con su propio cristal/sombra/esquinas redondeadas.
   En MÓVIL se queda a pantalla completa a propósito (mismo criterio que ya usaba la app
   para el nav de la v0.18: en un móvil, un diálogo centrado y pequeño para algo tan largo
   como Ajustes no tiene sentido - navegación de pantalla completa es lo normal ahí). Solo
   en escritorio (≥900px, el mismo corte que usa toda la app) se centra como un diálogo de
   verdad, con margen alrededor y una altura máxima - más grande que el modal pequeño de
   confirmaciones (que sigue como estaba, para eso ya iba bien) porque aquí cabe bastante
   más contenido (Ajustes tiene sub-pantallas enteras). */
.overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 90;
  display: flex; flex-direction: column;
}
.overlay-panel {
  display: flex; flex-direction: column; min-height: 0; flex: 1;
  background: var(--bg-translucent-strong);
  -webkit-backdrop-filter: blur(26px) saturate(120%); backdrop-filter: blur(26px) saturate(120%);
}
@media (min-width: 900px) {
  .overlay { align-items: center; justify-content: center; padding: 40px; }
  .overlay-panel {
    flex: none; width: 100%; max-width: 640px; max-height: 85vh;
    border-radius: 20px; border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow-hero);
  }
}
.overlay-header {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.overlay-header h2 { font-size: 16px; margin: 0; flex: 1; }
.overlay-body { flex: 1; overflow-y: auto; padding: 8px 0 24px; width: 100%; max-width: 780px; margin: 0 auto; }

/* modal */
#modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal-box {
  background: var(--glass-strong); border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
  border-radius: 14px; padding: 20px; width: 100%; max-width: 340px;
  /* "Editar casa" tiene ya 7 campos (Home Assistant incluido): en una pantalla pequeña
     el diálogo se desplaza por dentro en vez de dejar Guardar fuera de la pantalla. */
  max-height: calc(100vh - 40px); overflow-y: auto;
}
.modal-box h3 { margin: 0 0 14px; font-size: 16px; }
.modal-field { margin-bottom: 12px; }
.modal-field label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 6px; }
.modal-field select {
  width: 100%; background: var(--surface); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 10px 12px; font-size: 14px; font-family: inherit; outline: none;
}
.modal-field select:focus { border-color: var(--accent); }
.modal-field input, .modal-field textarea {
  width: 100%; background: var(--surface); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 10px 12px; font-size: 15px; outline: none;
  font-family: inherit; resize: vertical;
}
.modal-message { font-size: 14px; line-height: 1.6; color: var(--text-dim); }
.modal-choice {
  display: flex; align-items: center; gap: 10px;
  padding: 12px; border: 1px solid var(--border); border-radius: 10px;
  margin-bottom: 8px; cursor: pointer; background: var(--surface);
}
.modal-choice:hover, .modal-choice.selected { border-color: var(--accent); }
.modal-choice .choice-name { font-size: 14px; font-weight: 600; }
.modal-choice .choice-desc { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.modal-choice svg { width: 18px; height: 18px; color: var(--accent); flex: none; }
.modal-error { color: var(--warn); font-size: 13px; min-height: 18px; margin-top: 4px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.modal-actions button { border: none; border-radius: 8px; padding: 9px 16px; font-size: 14px; cursor: pointer; font-family: inherit; }
#modal-cancel { background: transparent; color: var(--text-dim); }
#modal-cancel:hover { color: var(--text); }
#modal-ok { background: var(--accent); color: var(--accent-ink); font-weight: 700; }

/* ---------- 4a. Inicio ---------- */
.home-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.home-head-text { min-width: 0; }
.home-greeting { font-family: "Space Mono", monospace; font-size: 21px; }
.home-summary { font-size: 13px; color: var(--text-dim); margin-top: 4px; line-height: 1.5; }
/* `dense`: si una tarjeta completa no cabe en el hueco que queda, la rejilla mete ahí la
   siguiente que sí quepa en vez de dejar el hueco vacío. Es lo que hace que al cambiar
   una tarjeta de Media a Completo (o al revés) todo se recoloque sin agujeros. */
.home-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(2, minmax(0,1fr));
  grid-auto-flow: row dense;
  align-items: stretch;
}
@media (min-width: 900px) { .home-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.widget-card {
  background: var(--glass); border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: 0 6px 26px rgba(0,0,0,0.22);
  border-radius: 16px; padding: 14px;
  display: flex; flex-direction: column; min-width: 0;
  grid-column: span 1;
}
@media (min-width: 900px) { .widget-card { padding: 16px; grid-column: span 2; } }
.widget-card.size-full { grid-column: span 2; }
@media (min-width: 900px) { .widget-card.size-full { grid-column: span 4; } }
.widget-card.editing { border-color: var(--accent-line); }
/* --- arrastrar tarjetas de Inicio (19 ago 2026, decimoquinta vuelta) ----
   La tarjeta que se arrastra pasa a position:fixed (ver startWidgetDrag en app.js, que le
   pone left/top/width/height por JS en cada pointermove) - así queda de verdad "en la mano",
   siguiendo al cursor por encima de todo, en vez de deslizarse plana dentro de la rejilla.
   El escalado + sombra más marcada es la sensación de "elevación" pedida; transform-origin
   center para que el escalado no se note descentrado respecto al cursor. */
.widget-card.dragging {
  position: fixed; z-index: 200; pointer-events: none; margin: 0;
  transform: scale(1.04); transform-origin: center;
  border-color: var(--accent);
  box-shadow: 0 28px 56px -14px rgba(0,0,0,0.45), 0 10px 24px rgba(0,0,0,0.28);
}
/* hueco invisible que reserva el sitio en la rejilla mientras la tarjeta de verdad flota
   fuera del flujo - se le copian las clases de tamaño (size-full/size-half) para que
   ocupe el mismo ancho de columnas. */
.widget-drag-placeholder { visibility: hidden; }
/* el resto de tarjetas se recolocan con una transición suave (ver animateWidgetReflow en
   app.js, técnica FLIP: mide antes de mover, aplica la transform inversa, y la anima a 0)
   en vez de saltar de golpe a su hueco nuevo. */
.widget-card { transition: transform 0.22s ease; }

/* ---- luz que sigue al cursor, estilo Gemini (18 ago 2026) ----
   Solo en pantallas con ratón de verdad (hover:hover + pointer:fine) - así queda excluido
   por capacidad real, no por ancho, y en el móvil ni siquiera se define/pinta esta capa
   (app.js tampoco añade los listeners de mousemove ahí, ver initWidgetSpotlight). --spot-x/
   --spot-y las pone app.js en cada mousemove sobre la tarjeta; la clase .spotlight (puesta
   al entrar el ratón, quitada al salir) es lo que enciende/apaga el resplandor con una
   transición, para que no se quede pegado en el último punto al salir de la tarjeta. */
@media (hover: hover) and (pointer: fine) {
  .widget-card { position: relative; overflow: hidden; }
  .widget-card-head, .widget-body { position: relative; z-index: 1; }
  .widget-card::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    opacity: 0; transition: opacity 0.25s ease;
    /* 19 ago 2026, decimonovena vuelta: radio bajado de 280px a 140px (mitad) - se veía
       demasiado grande, casi cubría la tarjeta entera en vez de sentirse como un foco que
       sigue al ratón. */
    background: radial-gradient(140px circle at var(--spot-x, 50%) var(--spot-y, 50%),
      rgba(255,107,26,0.16), transparent 68%);
  }
  .widget-card.spotlight::before { opacity: 1; }
}

.widget-card-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 12px; }
.widget-card-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.widget-head-left { display: flex; align-items: center; gap: 7px; min-width: 0; }
.widget-grip { display: flex; color: var(--text-dim); cursor: grab; touch-action: none; flex: none; padding: 2px; }
.widget-grip svg { width: 15px; height: 15px; }
.widget-edit-controls { display: flex; align-items: center; gap: 4px; flex: none; }
.widget-btn {
  background: var(--surface2); border: 1px solid var(--border); color: var(--text-dim);
  border-radius: 8px; height: 26px; min-width: 26px; padding: 0 6px;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 700;
}
.widget-btn svg { width: 13px; height: 13px; }
.widget-btn:hover { color: var(--text); border-color: var(--accent); }
.widget-btn.danger:hover { color: var(--warn); border-color: var(--warn); }
.widget-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.widget-clock { font-family: "Space Mono", monospace; font-size: 34px; font-weight: 700; line-height: 1; }
.widget-date { color: var(--text-dim); font-size: 13px; margin-top: 6px; text-transform: capitalize; }
.widget-line { font-size: 14px; color: var(--text-dim); line-height: 1.5; margin-bottom: 10px; }
.widget-line strong { color: var(--text); font-weight: 600; }
.widget-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px;
}
.widget-row:last-child { border-bottom: none; }
.widget-row .val { font-weight: 600; }
.widget-mini-empty { color: var(--text-dim); font-size: 13px; line-height: 1.5; }
.unread-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 6px; flex: none; }
.widget-link-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--accent); color: var(--accent-ink);
  border: none; border-radius: 10px; padding: 9px 14px;
  font-family: inherit; font-weight: 700; font-size: 13px; cursor: pointer;
  /* auto: el botón se pega abajo del todo, así dos tarjetas de la misma fila (que la
     rejilla estira a la misma altura) no quedan con un hueco raro debajo del texto. */
  margin-top: auto; padding-top: 9px; align-self: flex-start;
}
.widget-link-btn svg { width: 15px; height: 15px; }
.widget-big { font-size: 22px; font-weight: 700; }
/* auto-fill en vez de un número fijo de columnas: la tarjeta de Favoritos se ve bien
   tanto a media (una columna) como completa (tres o cuatro), sin reglas por tamaño. */
/* min(220px, 100%) en vez de 220px a secas: así el grid nunca fuerza una columna más ancha
   que el propio widget cuando este mide menos de 220px (a media, en pantallas estrechas). */
.widget-fav-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
.list-group { margin-bottom: 12px; }
.list-group:last-child { margin-bottom: 0; }
.list-group-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.list-group-head svg { width: 15px; height: 15px; color: var(--accent); }
.list-group-name { font-size: 13px; font-weight: 700; }
.list-group-count { font-size: 12px; color: var(--text-dim); }
.person-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 20px; padding: 5px 12px 5px 5px; margin: 0 6px 6px 0;
}
.person-chip .avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface); color: var(--text-dim);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.person-chip .pname { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.hidden-widget-row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface); border: 1px dashed var(--border); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 8px; font-size: 13px; color: var(--text-dim);
}

/* ---------- 4b. Chat ---------- */
#chat-view { overflow: hidden; }
.chat-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; flex: none; }
.model-pill {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 8px 12px; flex: 1; min-width: 220px;
}
.dot-accent { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.model-pill-text { flex: 1; min-width: 0; }
.model-name { font-size: 13px; font-weight: 700; }
.model-desc { font-size: 11px; color: var(--text-dim); }
#chat-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 2px 2px 12px; }
.bubble {
  max-width: 82%; padding: 10px 15px; border-radius: 14px;
  font-size: 15px; line-height: 1.45; white-space: pre-wrap;
}
.bubble.user { align-self: flex-end; background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 4px; }
.bubble.karen { align-self: flex-start; background: var(--surface2); border-bottom-left-radius: 4px; }
.bubble.system { align-self: center; color: var(--text-dim); font-size: 13px; background: transparent; text-align: center; max-width: 420px; }
.bubble.thinking { color: var(--text-dim); font-style: italic; animation: karen-pulse 1.4s ease-in-out infinite; }
@keyframes karen-pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.suggestion-row { min-height: 0; flex: none; }
.suggestion-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-dim);
  background: var(--surface); border: 1px dashed var(--border);
  border-radius: 12px; padding: 6px 12px; cursor: pointer; margin-bottom: 8px;
}
.suggestion-chip svg { width: 14px; height: 14px; color: var(--accent); }
.suggestion-chip:hover { border-color: var(--accent); color: var(--text); }
.chat-input-row { display: flex; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); flex: none; }
#chat-input {
  flex: 1; min-width: 0;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  border-radius: 22px; padding: 12px 18px; font-size: 15px; font-family: inherit; outline: none;
}
#chat-input:focus { border-color: var(--accent-line); }
#chat-send {
  background: var(--accent); color: var(--accent-ink); border: none;
  border-radius: 22px; padding: 0 20px; height: 44px;
  font-family: inherit; font-weight: 700; font-size: 15px; cursor: pointer; flex: none;
}
#chat-send:disabled { opacity: 0.5; }
.history-day-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 20px; border-bottom: 1px solid var(--border); cursor: pointer;
}
.history-day-row:hover { background: var(--surface); }
.history-day-date { font-weight: 700; font-size: 14px; }
.history-day-preview { font-size: 12px; color: var(--text-dim); margin-top: 2px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-day-count { font-size: 11px; color: var(--text-dim); flex: none; }
.history-compressed-card {
  margin: 16px 20px; padding: 14px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; font-size: 13px; color: var(--text-dim); line-height: 1.5; white-space: pre-wrap;
}
.history-status { padding: 0 20px; font-size: 12px; color: var(--accent); min-height: 16px; }

/* ---------- 4c. Hogar ---------- */
.house-card {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--glass); border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: 0 6px 26px rgba(0,0,0,0.22);
  border-radius: 16px; padding: 16px; margin-bottom: 12px; cursor: pointer;
}
.house-card:hover { border-color: var(--accent); }
.house-star { flex: none; background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 2px; }
.house-star svg { width: 22px; height: 22px; }
.house-star.active { color: var(--star); }
.house-star.active svg { fill: var(--star); }
.house-card-body { flex: 1; min-width: 0; }
.house-card-name { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.house-card-desc { font-size: 13px; color: var(--text-dim); margin-bottom: 10px; line-height: 1.45; }
.house-card-meta { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--text-dim); flex-wrap: wrap; }
.house-card-meta .ok { color: var(--ok); }
.house-chevron { color: var(--text-dim); flex: none; margin-top: 4px; }
.house-chevron svg { width: 18px; height: 18px; display: block; }
.detail-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.detail-title { font-size: 18px; font-weight: 700; }
.detail-meta { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.room-tabs-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.room-tab {
  padding: 7px 14px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-dim);
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.room-tab.active { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }
.room-tab.icon-tab { padding: 7px 11px; display: flex; align-items: center; }
.room-tab.icon-tab svg { width: 15px; height: 15px; }
.room-tab.spinning svg { animation: karen-spin 0.6s linear infinite; }
@keyframes karen-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.device-search-row { margin-bottom: 14px; }
#device-search-input {
  width: 100%; background: var(--surface); border: 1px solid var(--border); color: var(--text);
  border-radius: 10px; padding: 11px 14px; font-size: 14px; font-family: inherit; outline: none;
}
.fav-strip {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 14px 16px; margin-bottom: 20px;
}
.fav-strip-head { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; }
.fav-strip-head svg { width: 14px; height: 14px; color: var(--star); fill: var(--star); }
.fav-strip-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); }
.device-grid { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .device-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.device-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--glass); border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-radius: 14px; padding: 13px 14px; min-width: 0;
}
.device-card.compact { background: var(--glass-strong); }
.device-icon { display: flex; color: var(--text-dim); flex: none; }
.device-icon.on { color: var(--accent); }
.device-icon svg { width: 22px; height: 22px; display: block; }
.device-text { flex: 1; min-width: 0; }
.device-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.device-state { font-size: 12px; color: var(--text-dim); text-transform: capitalize; }
.device-fav-star { background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 4px; flex: none; display: flex; }
.device-fav-star svg { width: 17px; height: 17px; }
.device-fav-star.active { color: var(--star); }
.device-fav-star.active svg { fill: var(--star); }
.device-edit { color: var(--text-dim); cursor: pointer; padding: 4px; flex: none; display: flex; opacity: 0.6; }
.device-edit:hover { opacity: 1; }
.device-edit svg { width: 15px; height: 15px; display: block; }
.power-switch {
  width: 46px; height: 26px; border-radius: 14px;
  background: var(--surface2); border: 1px solid var(--border);
  position: relative; cursor: pointer; flex: none;
}
.power-switch .knob {
  position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--text-dim);
  transition: left 0.15s ease, background 0.15s ease;
}
.power-switch.on { border-color: var(--accent); }
.power-switch.on .knob { left: 22px; background: var(--accent); }

/* ---------- 4d. Apps (notas + listas) ---------- */
.note-add-row { display: flex; gap: 8px; margin-bottom: 16px; }
.note-add-row input {
  flex: 1; min-width: 0;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  border-radius: 12px; padding: 12px 16px; font-size: 14px; font-family: inherit; outline: none;
}
.note-add-row button {
  background: var(--accent); color: var(--accent-ink); border: none;
  border-radius: 12px; padding: 0 20px; font-family: inherit; font-weight: 700; font-size: 14px;
  cursor: pointer; flex: none;
}
.note-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.note-text { font-size: 14px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.note-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; flex-wrap: wrap; }
.mem-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700;
  color: var(--text-dim); background: transparent;
  border: 1px solid var(--border); border-radius: 20px; padding: 4px 10px; cursor: pointer;
}
.mem-chip.on { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
.note-ts { font-size: 11px; color: var(--text-dim); }
.note-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.list-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px; display: flex; flex-direction: column;
}
.list-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.list-card-icon {
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.list-card-icon svg { width: 17px; height: 17px; }
.list-card-title { flex: 1; min-width: 0; }
.list-card-name { font-size: 15px; font-weight: 700; }
.list-card-summary { font-size: 12px; color: var(--text-dim); }
.list-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.list-item-check {
  width: 20px; height: 20px; border-radius: 6px;
  border: 2px solid var(--border); color: var(--accent-ink);
  flex: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.list-item-check svg { width: 13px; height: 13px; }
.list-item.done .list-item-check { background: var(--accent); border-color: var(--accent); }
.list-item-text { flex: 1; font-size: 14px; word-break: break-word; }
.list-item.done .list-item-text { text-decoration: line-through; color: var(--text-dim); }
.list-item-del { color: var(--text-dim); cursor: pointer; padding: 4px; display: flex; flex: none; opacity: 0.6; }
.list-item-del:hover { opacity: 1; color: var(--warn); }
.list-item-del svg { width: 14px; height: 14px; }
.list-add { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.list-add input {
  flex: 1; min-width: 0;
  background: var(--surface2); border: 1px solid var(--border); color: var(--text);
  border-radius: 10px; padding: 9px 12px; font-size: 13px; font-family: inherit; outline: none;
}
.list-add button {
  background: var(--surface2); border: 1px solid var(--border); color: var(--accent);
  border-radius: 10px; width: 36px; height: 36px; flex: none;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.list-add button:hover { border-color: var(--accent); }
.list-add button svg { width: 16px; height: 16px; }
/* Entrenamiento (19 ago 2026) - mismo patrón visual que Listas (.list-card de arriba, no
   glass: ese tratamiento se reserva para notas/carpetas/banners, aquí es una rejilla de
   tarjetas estructuradas igual que Listas). */
.training-week-banner {
  grid-column: 1 / -1; margin-bottom: 4px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 14px;
}
.training-week-strip { display: flex; gap: 6px; margin-top: 12px; }
.training-day-dot {
  flex: 1; height: 30px; border-radius: 8px;
  background: var(--surface2); border: 1px solid var(--border); color: var(--text-dim);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
.training-day-dot.done { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.training-action-row { margin-top: 12px; }
.training-done-btn { width: 100%; justify-content: center; }
.training-done-btn.done { background: var(--surface2); color: var(--text-dim); cursor: default; }
.soon-block { margin-top: 20px; }
.soon-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; color: var(--text-dim);
}
.soon-row svg { width: 20px; height: 20px; flex: none; }
.soon-row .soon-label { font-weight: 600; color: var(--text); font-size: 14px; }
.soon-row .soon-note { font-size: 12px; }

/* ---------- 4e. Salud ---------- */
.health-header {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px 18px; margin-bottom: 18px;
  position: sticky; top: 0; z-index: 20;
}
.health-header-icon {
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--accent-soft); border: 1px solid rgba(255,107,26,0.3);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.health-header-icon svg { width: 20px; height: 20px; }
.health-header-text { flex: 1; min-width: 160px; }
.health-header-title { font-size: 15px; font-weight: 700; }
.health-header-note { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

/* ---------- 4f. Ajustes ---------- */
.settings-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px; border-bottom: 1px solid var(--border); cursor: pointer;
}
.settings-row:hover { background: var(--surface); }
.settings-row .icon { width: 24px; display: flex; color: var(--text-dim); }
.settings-row .icon svg { width: 18px; height: 18px; }
.settings-row .label { flex: 1; font-size: 14px; }
.settings-row .chevron { color: var(--text-dim); display: flex; }
.settings-row .chevron svg { width: 16px; height: 16px; }
.settings-row.danger .label, .settings-row.danger .icon { color: var(--warn); }
.settings-section { padding: 16px 20px; }
.settings-note {
  font-size: 13px; color: var(--text-dim); line-height: 1.5;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 12px;
}
.settings-field { margin-bottom: 14px; }
.settings-field label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 6px; }
.settings-field input[type="text"] {
  width: 100%; background: var(--surface); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 10px 12px; font-size: 14px; font-family: inherit; outline: none;
}
.settings-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; }
.settings-btn {
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 9px 14px; cursor: pointer; font-size: 13px; font-family: inherit;
  margin-right: 8px; margin-bottom: 8px;
}
.settings-btn:hover { border-color: var(--accent); }
.settings-btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
.settings-btn.danger { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); }
.settings-btn.danger:hover { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
/* acción destructiva dentro de un diálogo (borrar casa): separada del resto de campos */
.modal-extra { display: block; width: 100%; margin: 6px 0 0; padding: 11px 14px; text-align: center;
  border-top: 1px solid var(--border); border-radius: 8px; }
.family-member { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.family-member .name { flex: 1; font-size: 14px; }
.family-member .status { font-size: 12px; color: var(--text-dim); }
.family-member .status.ok { color: var(--ok); }

/* ---------- login ---------- */
#login-overlay {
  position: fixed; inset: 0; background: var(--bg); z-index: 110;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 14px; padding: 24px;
}
#login-overlay h2 { font-family: "Space Mono", monospace; margin: 0; }
#login-overlay input {
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  border-radius: 10px; padding: 12px 16px; font-size: 15px; width: 240px;
  text-align: center; font-family: inherit; outline: none;
}
#login-overlay button {
  background: var(--accent); color: var(--accent-ink); border: none;
  border-radius: 10px; padding: 10px 20px; font-weight: 700; font-family: inherit; cursor: pointer;
}
#login-error { color: var(--warn); font-size: 13px; min-height: 16px; }
#login-hint { color: var(--text-dim); font-size: 12px; max-width: 260px; text-align: center; line-height: 1.5; }

/* ================= v0.5: pulido pedido por Sebastian ================= */

/* --- estado de la conexión, arriba a la derecha (antes era un punto fijo) --- */
.conn-chip {
  display: flex; align-items: center; gap: 7px;
  background: none; border: 1px solid transparent; border-radius: 20px;
  padding: 4px 10px 4px 8px; cursor: default;
  color: var(--text-dim); font-family: inherit; font-size: 12px; font-weight: 600;
}
.conn-label { display: none; }
@media (min-width: 720px) { .conn-label { display: inline; } }
.conn-chip.live { color: var(--ok); }
.conn-chip.warn { color: var(--star); }
.conn-chip.down { color: var(--warn); }
.conn-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.conn-chip.warn .conn-dot { animation: karen-pulse 1.2s ease-in-out infinite; }

/* --- menú de cuenta de la barra lateral --- */
.sidebar-user-wrap { position: relative; }
.sidebar-user {
  width: 100%; border: none; background: none; cursor: pointer;
  border-top: 1px solid var(--border);
  padding: 14px 12px 2px;
  display: flex; align-items: center; gap: 10px; text-align: left;
  color: var(--text); font-family: inherit;
}
.sidebar-user:hover { color: var(--accent); }
.sidebar-user-text { min-width: 0; flex: 1; display: block; }
.sidebar-user-chevron { color: var(--text-dim); display: flex; flex: none; }
.sidebar-user-chevron svg { width: 16px; height: 16px; }
.dropdown-panel.side { top: auto; bottom: 46px; left: 0; right: auto; min-width: 210px; }

/* --- botones redondos del chat (+ y micrófono) --- */
.attach-wrap { position: relative; flex: none; }
.round-btn {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-dim);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.round-btn:hover { border-color: var(--accent); color: var(--text); }
.round-btn svg { width: 19px; height: 19px; }
.attach-menu {
  position: absolute; bottom: 52px; left: 0;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 12px; min-width: 230px; overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45); z-index: 60;
}
.attach-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; font-size: 14px; cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.attach-row:last-child { border-bottom: none; }
.attach-row:hover { background: var(--surface); }
.attach-row svg { width: 17px; height: 17px; flex: none; color: var(--text-dim); }
.attach-row.soon { color: var(--text-dim); cursor: default; }
.attach-row.soon:hover { background: none; }
.attach-note { padding: 10px 14px; font-size: 11px; color: var(--text-dim); line-height: 1.45; background: var(--surface); }

/* --- adjuntos dentro de una burbuja --- */
.bubble .attach-card {
  display: flex; align-items: center; gap: 10px;
  margin-top: 8px; padding: 8px 10px;
  background: rgba(0,0,0,0.25); border-radius: 10px;
  font-size: 13px; text-decoration: none; color: inherit;
}
.bubble .attach-card svg { width: 18px; height: 18px; flex: none; }
.bubble .attach-img { display: block; max-width: 100%; border-radius: 10px; margin-top: 8px; }
.bubble .attach-size { opacity: 0.7; font-size: 11px; }

/* --- avisos emergentes (toasts) --- */
#toasts {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 96px; z-index: 120;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none; width: min(92vw, 420px);
}
@media (min-width: 900px) { #toasts { bottom: 24px; left: auto; right: 24px; transform: none; } }
.toast {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  background: var(--surface2); border: 1px solid var(--border);
  border-left: 3px solid var(--text-dim);
  border-radius: 12px; padding: 12px 14px;
  font-size: 14px; line-height: 1.4;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  animation: toast-in 0.18s ease-out;
}
.toast.ok { border-left-color: var(--ok); }
.toast.error { border-left-color: var(--warn); }
.toast.info { border-left-color: var(--accent); }
.toast svg { width: 18px; height: 18px; flex: none; }
.toast.ok svg { color: var(--ok); }
.toast.error svg { color: var(--warn); }
.toast.info svg { color: var(--accent); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* --- interruptor a medio camino ("Activando…") --- */
.power-switch.pending { opacity: 0.6; cursor: progress; border-color: var(--accent); }
.power-switch.pending .knob { animation: karen-pulse 0.9s ease-in-out infinite; }
.device-state.pending { color: var(--accent); }

/* --- buscador tipo Spotlight de la página Apps --- */
.spotlight-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 11px 14px; margin-bottom: 14px;
  position: sticky; top: 0; z-index: 25;
}
.spotlight-row:focus-within { border-color: var(--accent); }
.spotlight-icon { display: flex; color: var(--text-dim); flex: none; }
.spotlight-icon svg { width: 18px; height: 18px; }
#spotlight-input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  color: var(--text); font-family: inherit; font-size: 15px;
}
.spotlight-hint {
  font-family: "Space Mono", monospace; font-size: 11px; color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; flex: none;
  display: none;
}
@media (min-width: 720px) { .spotlight-hint { display: inline-block; } }
.spotlight-results {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; margin-bottom: 16px; overflow: hidden;
}
.spot-group-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-dim); padding: 10px 14px 4px;
}
.spot-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; cursor: pointer; border-top: 1px solid var(--border);
}
.spot-row:hover, .spot-row.sel { background: var(--surface2); }
.spot-row svg { width: 17px; height: 17px; color: var(--text-dim); flex: none; }
.spot-text { flex: 1; min-width: 0; }
.spot-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spot-sub { font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spot-empty { padding: 16px; color: var(--text-dim); font-size: 14px; }

/* --- Apps: lanzador de tarjetas --- */
.apps-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.app-card {
  background: var(--glass); border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: 0 6px 26px rgba(0,0,0,0.22);
  border-radius: 16px; padding: 16px;
  display: flex; flex-direction: column; gap: 10px; cursor: pointer;
}
.app-card:hover { border-color: var(--accent); }
.app-card.editing { border-color: var(--accent-line); cursor: default; }
.app-card-head { display: flex; align-items: center; gap: 12px; }
.app-card-icon {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.app-card-icon svg { width: 20px; height: 20px; }
.app-card-title { flex: 1; min-width: 0; }
.app-card-name { font-size: 16px; font-weight: 700; }
.app-card-desc { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.app-card-actions { display: flex; align-items: center; gap: 4px; flex: none; }
.karen-line {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 12px;
}
.karen-line .k-avatar {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: var(--accent-soft); color: var(--accent);
  font-family: "Space Mono", monospace; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.karen-line .k-text { font-size: 13px; line-height: 1.5; }
.app-soon { opacity: 0.65; cursor: default; }
.app-soon:hover { border-color: var(--border); }

/* --- registro de dispositivos / cambios (paneles de lista simple) --- */
.log-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 20px; border-bottom: 1px solid var(--border); font-size: 14px;
}
.log-row svg { width: 17px; height: 17px; flex: none; margin-top: 2px; }
.log-row.ok svg { color: var(--ok); }
.log-row.error svg { color: var(--warn); }
.log-row.warn svg { color: var(--star); }
.log-text { flex: 1; min-width: 0; }
.log-meta { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
/* 19 ago 2026, sesión nocturna, punto 6: retoque menor de "Qué hay de nuevo" (el
   historial en sí YA mostraba todas las versiones, desde la v0.1 - comprobado con el
   registro completo abierto de verdad; lo que se pulió fue solo el estilo). El número de
   versión pasa de texto suelto a una pastilla (mismo patrón `--accent-soft`/
   `--accent-line` que ya usan otras pastillas de la app) para que se distinga más rápido
   al pasar el ojo por una lista larga, y la primera entrada (la versión que se está
   viendo AHORA MISMO) lleva un aviso "Instalada" para orientar de un vistazo. */
.release { padding: 16px 20px; border-bottom: 1px solid var(--border); }
.release.is-current { background: var(--accent-soft); }
.release-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.release-version {
  font-family: "Space Mono", monospace; font-weight: 700; font-size: 12px;
  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: 6px; padding: 2px 8px;
}
.release-title { font-size: 15px; font-weight: 700; }
.release-current-flag {
  font-size: 10px; font-weight: 700; color: var(--accent); text-transform: uppercase;
  letter-spacing: 0.04em; border: 1px solid var(--accent-line); border-radius: 6px; padding: 2px 6px;
}
.release-date { font-size: 12px; color: var(--text-dim); margin-left: auto; }
.release ul { margin: 0; padding-left: 18px; }
.release li { font-size: 14px; line-height: 1.55; color: var(--text-dim); margin-bottom: 6px; }
.invite-box {
  background: var(--surface); border: 1px dashed var(--accent-line);
  border-radius: 12px; padding: 14px; margin-bottom: 12px; text-align: center;
}
.invite-code {
  font-family: "Space Mono", monospace; font-size: 26px; font-weight: 700;
  letter-spacing: 0.12em; color: var(--accent);
}
.invite-meta { font-size: 12px; color: var(--text-dim); margin-top: 6px; }


/* ---------- cristal: brillo de borde + profundidad, compartido por todas las tarjetas ----
   Un único bloque para el box-shadow "liquid glass" (línea de luz arriba + sombra hacia
   abajo) en vez de repetirlo en cada selector .*-card de arriba - así se aplica a todas
   por igual y queda fácil de ajustar en un solo sitio. No depende de backdrop-filter, así
   que sigue dando sensación de profundidad aunque el navegador no soporte el desenfoque. */
.modal-box, .widget-card, .house-card, .device-card, .app-card, .integration-card,
.note-card, .routine-card, .folder-card, .update-banner {
  box-shadow: var(--glass-shadow);
}

/* ---------- cristal "hero": shine fuerte para las piezas más importantes (18 ago 2026,
   decimocuarta vuelta) ---- Pedido explícito de aplicar el cristal "con criterio", como
   dice la guía de Liquid Glass de Apple ("avoid overusing"): no todo con la misma
   intensidad. Estas son las 3 tarjetas de Inicio con más peso funcional (Chat, Estado de
   la casa, Favoritos - identificadas por su data-widget-id, puesto en app.js) más el
   modal (el cristal más grande y más a la vista de toda la app, y solo hay uno a la vez).
   Puramente CSS - por eso se ve igual en cualquier navegador, tenga o no el filtro SVG de
   refracción (eso es aparte, ver el bloque de más abajo y HAS_REAL_GLASS_SUPPORT en
   app.js): un brillo direccional de verdad arriba (gradiente, no solo la línea de 1px del
   --glass-shine normal) simulando luz incidiendo sobre vidrio grueso, más una sombra algo
   más profunda para que se sientan "más objeto" que el resto. */
.widget-card[data-widget-id="chat"], .widget-card[data-widget-id="house"],
.widget-card[data-widget-id="favorites"], .modal-box {
  background-image: linear-gradient(180deg, var(--glass-shine-strong) 0%, transparent var(--glass-shine-stop, 26%));
  box-shadow: var(--glass-shadow-hero);
}

/* ---- el borde también sigue al cursor (19 ago 2026, vigésima vuelta) ----
   Extiende el spotlight que ya existe (--spot-x/--spot-y y la clase .spotlight, puestos
   por initWidgetSpotlight en app.js - el modal se conectó al MISMO mecanismo, ver
   startApp()) en vez de montar un sistema nuevo: mismas variables, mismo trigger, solo una
   capa visual más. Un anillo (truco mask-composite: exclude, grosor = padding) con un
   radial-gradient centrado en el cursor - así el brillo del borde se concentra cerca de
   donde está el ratón, no de forma uniforme en todo el contorno. Mismo tono naranja que el
   resplandor interior (no --glass-shine-strong, que en oscuro es deliberadamente casi
   invisible desde la v0.17 - aquí se busca lo contrario, que se note un poco). Solo en las
   4 tarjetas "hero" y solo con ratón de verdad (mismo criterio que el spotlight). */
@media (hover: hover) and (pointer: fine) {
  .widget-card[data-widget-id="chat"], .widget-card[data-widget-id="house"],
  .widget-card[data-widget-id="favorites"], .modal-box {
    position: relative;
  }
  .widget-card[data-widget-id="chat"]::after, .widget-card[data-widget-id="house"]::after,
  .widget-card[data-widget-id="favorites"]::after, .modal-box::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 2;
    pointer-events: none; opacity: 0; transition: opacity 0.25s ease;
    padding: 1.5px;
    background: radial-gradient(180px circle at var(--spot-x, 50%) var(--spot-y, 50%),
      rgba(255,107,26,0.65), transparent 70%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
  }
  .widget-card[data-widget-id="chat"].spotlight::after,
  .widget-card[data-widget-id="house"].spotlight::after,
  .widget-card[data-widget-id="favorites"].spotlight::after,
  .modal-box.spotlight::after {
    opacity: 1;
  }
}

/* ---------- cristal DE VERDAD: filtro SVG de refracción (18 ago 2026, decimotercera
   vuelta; con dos capas y solo en las tarjetas "hero" de arriba desde la decimocuarta),
   técnica de github.com/rdev/liquid-glass-react reimplementada en JS plano ----
   backdrop-filter con blur es un desenfoque - esto además REFRACTA de verdad lo que hay
   detrás (las manchas de color de body::before, el contenido que se desplaza al hacer
   scroll). Cada tarjeta hero recibe su propio <filter> SVG con DOS pasadas encadenadas
   (una de gran escala y suave, tipo lente entera; otra fina y más fuerte, solo cerca del
   borde, para que se note un bisel de vidrio grueso) - ver el comentario de
   initLiquidGlass en app.js para el detalle (por qué píxeles reales y no
   primitiveUnits="objectBoundingBox", cómo se generan los dos mapas, cómo reacciona al
   pasar el ratón). El resto de tarjetas de cristal (arriba) se quedan con el blur simple
   de siempre a propósito - ni el coste de un filtro SVG por tarjeta en listas largas
   (notas, dispositivos) ni saturar visualmente algo que no es el foco. Solo se aplica
   cuando initLiquidGlass() detecta soporte REAL (no por marca/user-agent, ver
   HAS_REAL_GLASS_SUPPORT en app.js) y la persona no pide menos transparencia - si no, las
   tarjetas hero se quedan con el shine fuerte de arriba (que es CSS puro) pero sin
   refracción, con el blur simple de siempre (funciona en todos los navegadores). La clase
   `real-glass` en <html> es solo un marcador informativo, ninguna regla de aquí depende
   de ella. */

/* ---------- cristal: respaldo para navegadores sin backdrop-filter ----------
   Sin esto, un navegador que no lo soporte enseñaría tarjetas semitransparentes sobre el
   fondo, con menos contraste. Con esto, ve exactamente lo de antes: superficies opacas. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .widget-card, .house-card, .device-card, .app-card, .note-card, .routine-card,
  .integration-card, .discover-row, .update-banner { background: var(--surface); }
  .modal-box { background: var(--surface2); }
  .overlay-panel, header, #bottom-nav { background: var(--bg); }
}
/* quien pida menos movimiento/efectos también se ahorra el desenfoque */
@media (prefers-reduced-transparency: reduce) {
  .widget-card, .house-card, .device-card, .app-card, .note-card, .update-banner { backdrop-filter: none; background: var(--surface); }
}

/* =========================================================================
   Piezas nuevas de la v0.8 (18 ago 2026): añadir dispositivos, asistente de
   integraciones, clima, notas rediseñadas y rutinas.
   ========================================================================= */

/* --- añadir dispositivo / integraciones --- */
.add-search { margin-top: 12px; }
.add-search input {
  width: 100%; background: var(--glass-strong); border: 1px solid var(--glass-border);
  color: var(--text); border-radius: 10px; padding: 11px 13px; font-size: 14px;
  font-family: inherit; outline: none;
}
.add-search input:focus { border-color: var(--accent-line); }
.discover-group {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 8px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim);
}
.discover-count { color: var(--accent); }
.discover-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px; cursor: pointer; border-bottom: 1px solid var(--border);
}
.discover-row:hover { background: var(--glass-strong); }
.discover-icon { display: flex; color: var(--text-dim); flex: none; }
.discover-icon svg { width: 19px; height: 19px; }
.discover-text { flex: 1; min-width: 0; }
.discover-name { font-size: 14px; font-weight: 600; }
.discover-meta {
  font-size: 11px; color: var(--text-dim); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.discover-add { display: flex; color: var(--accent); flex: none; }
.discover-add svg { width: 20px; height: 20px; }
.integration-grid {
  display: grid; gap: 10px; grid-template-columns: 1fr;
  padding: 4px 20px 20px;
}
@media (min-width: 700px) { .integration-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.integration-card {
  background: var(--glass); border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-radius: 14px; padding: 14px; cursor: pointer;
}
.integration-card:hover { border-color: var(--accent); }
.integration-name { font-size: 14px; font-weight: 700; }
.integration-desc { font-size: 12px; color: var(--text-dim); margin-top: 3px; line-height: 1.5; }
.integration-flag {
  margin-top: 8px; font-size: 10px; font-weight: 700; color: var(--warn);
  border: 1px solid rgba(255,158,158,0.35); border-radius: 6px;
  padding: 2px 7px; display: inline-block;
}
.settings-subhead {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-dim); margin: 4px 0 10px;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-dim);
  background: var(--glass-strong); border: 1px solid var(--glass-border);
  border-radius: 20px; padding: 6px 12px;
}
.chip svg { width: 13px; height: 13px; }
.chip.clickable { cursor: pointer; font-family: inherit; }
.chip.clickable:hover { border-color: var(--accent-line); color: var(--text); }
.chip.active { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
.chip.danger { color: var(--warn); }
.room-tab.accent { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }

/* --- clima --- */
.weather-now { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.weather-icon { display: flex; color: var(--accent); flex: none; }
.weather-icon svg { width: 42px; height: 42px; }
.weather-temp { font-family: "Space Mono", monospace; font-size: 32px; font-weight: 700; line-height: 1; }
.weather-label { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
.weather-hours {
  display: flex; gap: 6px; overflow-x: auto; margin-top: 12px;
  padding-bottom: 4px; scrollbar-width: thin;
}
.weather-hour {
  flex: none; width: 54px; text-align: center;
  background: var(--glass-strong); border: 1px solid var(--glass-border);
  border-radius: 12px; padding: 8px 4px;
}
.wh-time { font-size: 10px; color: var(--text-dim); }
.wh-icon { display: flex; justify-content: center; color: var(--text-dim); margin: 4px 0; }
.wh-icon svg { width: 18px; height: 18px; }
.wh-temp { font-size: 13px; font-weight: 700; }

/* --- notas rediseñadas --- */
.notes-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.notes-search {
  flex: 1; min-width: 180px; display: flex; align-items: center; gap: 8px;
  background: var(--glass-strong); border: 1px solid var(--glass-border);
  border-radius: 12px; padding: 0 12px; color: var(--text-dim);
}
.notes-search svg { width: 16px; height: 16px; flex: none; }
.notes-search input {
  flex: 1; background: none; border: none; outline: none; color: var(--text);
  font-family: inherit; font-size: 14px; padding: 11px 0;
}
.pill-btn.accent { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.notes-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0,1fr)); margin-top: 12px; }
@media (min-width: 700px) { .notes-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1100px) { .notes-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.note-card {
  position: relative; cursor: pointer;
  background: var(--glass); border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-radius: 16px; padding: 14px; gap: 8px; min-height: 128px;
}
.note-card:hover { border-color: var(--accent-line); }
.note-card.pinned { border-color: var(--accent-line); background: linear-gradient(180deg, var(--accent-soft), var(--glass)); }
.note-title { font-size: 14px; font-weight: 700; line-height: 1.35; word-break: break-word; }
.note-preview {
  font-size: 12px; color: var(--text-dim); line-height: 1.5; flex: 1;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
}
.note-folder { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-dim); }
.note-folder svg { width: 12px; height: 12px; }
.note-pin { position: absolute; top: 12px; right: 12px; color: var(--accent); display: flex; }
.note-pin svg { width: 14px; height: 14px; }
.note-mem {
  position: absolute; bottom: 12px; right: 12px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  font-family: "Space Mono", monospace; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.note-editor-wrap { padding: 8px 20px 24px; display: flex; flex-direction: column; height: 100%; }
.note-editor-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.note-editor {
  flex: 1; min-height: 320px; width: 100%; resize: vertical;
  background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: 14px;
  color: var(--text); font-family: inherit; font-size: 15px; line-height: 1.65;
  padding: 16px; outline: none;
}
.note-editor:focus { border-color: var(--accent-line); }
.note-editor-foot { font-size: 11px; color: var(--text-dim); margin-top: 10px; }

/* --- rutinas --- */
.routine-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--glass); border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-radius: 16px; padding: 14px;
}
.routine-icon {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.routine-icon svg { width: 20px; height: 20px; }
.routine-text { flex: 1; min-width: 0; }
.routine-name { font-size: 15px; font-weight: 700; }
.routine-actions-text {
  font-size: 12px; color: var(--text-dim); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.routine-run {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  background: var(--accent); color: var(--accent-ink); border: none;
  border-radius: 10px; padding: 9px 14px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700;
}
.routine-run:disabled { opacity: 0.6; cursor: default; }
.routine-run svg { width: 14px; height: 14px; }
.routine-pick {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.routine-pick-icon { display: flex; color: var(--text-dim); flex: none; }
.routine-pick-icon svg { width: 18px; height: 18px; }
.routine-pick-text { flex: 1; min-width: 0; font-size: 14px; }
.icon-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.icon-picker .widget-btn { width: 40px; height: 40px; justify-content: center; }
.icon-picker .widget-btn.active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.segmented { display: flex; gap: 4px; flex: none; }
.seg-btn {
  background: var(--glass-strong); border: 1px solid var(--glass-border); color: var(--text-dim);
  border-radius: 8px; padding: 6px 10px; font-family: inherit; font-size: 12px; cursor: pointer;
}
.seg-btn.active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); font-weight: 700; }
.scene-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 700px) { .scene-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.scene-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  background: var(--glass-strong); border: 1px solid var(--glass-border);
  border-radius: 14px; padding: 14px; cursor: pointer;
  font-family: inherit; color: var(--text); text-align: left;
}
.scene-btn:hover { border-color: var(--accent); }
.scene-btn.running { opacity: 0.6; }
.scene-icon { display: flex; color: var(--accent); }
.scene-icon svg { width: 20px; height: 20px; }
.scene-name { font-size: 14px; font-weight: 700; }
.scene-count { font-size: 11px; color: var(--text-dim); }
.device-value {
  flex: none; font-family: "Space Mono", monospace; font-size: 14px; font-weight: 700;
  color: var(--text); background: var(--glass-strong); border: 1px solid var(--glass-border);
  border-radius: 10px; padding: 7px 11px;
}

/* =========================================================================
   Notas — rediseño Samsung Notes (18 ago 2026, sexta vuelta): todas las notas
   agrupadas por fecha, carpetas como rejilla con color, papelera, notas
   bloqueadas y botón flotante. Reusa .notes-search/.notes-grid/.note-card/
   .note-editor* ya existentes de la vuelta anterior.
   ========================================================================= */
.notes-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.notes-tab {
  display: flex; align-items: center; gap: 7px;
  background: var(--glass-strong); border: 1px solid var(--glass-border); color: var(--text-dim);
  border-radius: 20px; padding: 8px 16px; font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.notes-tab svg { width: 15px; height: 15px; }
.notes-tab.active { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }

.notes-subhead { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.notes-subhead-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 700; flex: 1; min-width: 0;
}
.notes-subhead-title svg { width: 18px; height: 18px; color: var(--text-dim); }
.folder-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--folder-c, var(--accent)); flex: none; }

.note-group { margin-bottom: 20px; }
.note-group-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-dim); margin: 4px 0 10px;
}

.note-lock-tile {
  display: flex; align-items: center; justify-content: center;
  background: var(--glass-strong); border-radius: 12px; height: 60px;
  color: var(--text-dim); margin-bottom: 4px;
}
.note-lock-tile svg { width: 24px; height: 24px; }
.note-card.locked .note-title { color: var(--text-dim); }

.trash-card { cursor: default; }
.trash-card-actions { display: flex; gap: 8px; margin-top: 10px; }

/* ---- carpetas: rejilla con color y contador ---- */
.folder-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 700px) { .folder-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1100px) { .folder-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.folder-card {
  position: relative;
  background: var(--glass); border: 1px solid var(--glass-border);
  border-left: 3px solid var(--folder-c, var(--accent));
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-radius: 16px; padding: 16px; cursor: pointer;
  display: flex; flex-direction: column; gap: 6px; min-height: 92px;
}
.folder-card:hover { border-color: var(--glass-border); box-shadow: 0 0 0 1px var(--folder-c, var(--accent-line)); }
.folder-card-icon { display: flex; color: var(--folder-c, var(--accent)); }
.folder-card-icon svg { width: 20px; height: 20px; }
.folder-card-name { font-size: 14px; font-weight: 700; word-break: break-word; }
.folder-card-count { font-size: 12px; color: var(--text-dim); margin-top: auto; }
.folder-card-edit {
  position: absolute; top: 10px; right: 10px;
  background: none; border: none; color: var(--text-dim); cursor: pointer;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.folder-card-edit:hover { background: var(--glass-strong); color: var(--text); }
.folder-card-edit svg { width: 14px; height: 14px; }
.folder-card-trash { border-left-color: var(--text-dim); }
.folder-card-trash .folder-card-icon { color: var(--text-dim); }
.folder-card-add {
  align-items: center; justify-content: center; flex-direction: row; gap: 8px;
  color: var(--accent); border-style: dashed; border-color: var(--accent-line); background: transparent;
  border-left-width: 1px;
}
.folder-card-add:hover { background: var(--accent-soft); }

/* rueda de colores del modal (crear/renombrar carpeta) */
.folder-color-picker { display: flex; flex-wrap: wrap; gap: 10px; }
.folder-swatch {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  border: 2px solid transparent; cursor: pointer; padding: 0;
  background: var(--folder-c);
}
.folder-swatch.active { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--folder-c); }

/* ---- botón flotante "Nota nueva" ----
   Mismo patrón visual que el mic (.fab) pero propio de Notas: al ser hijo de la vista de
   la app, un ancestro oculto (display:none) también lo oculta a él sin código aparte. En
   móvil se apila ENCIMA del mic flotante (84 + 54 de alto + 14 de hueco = 152) para que
   coexistan sin pisarse; en escritorio el mic vive en la barra lateral, así que aquí baja
   a la esquina de verdad. */
.notes-fab {
  position: fixed; right: 20px; bottom: 152px;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); border: none;
  box-shadow: 0 8px 22px rgba(255,107,26,0.35);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 46;
}
.notes-fab svg { width: 24px; height: 24px; }
@media (min-width: 900px) { .notes-fab { bottom: 28px; right: 28px; } }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .folder-card { background: var(--surface); }
}