/* 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 {
  /* Sistema de escala Karen: las pantallas usan estos cuatro niveles, no tamaños
     parecidos elegidos por contexto. Facilita leer qué es página, sección, apoyo y acción. */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --type-body: 14px; --type-support: 13px; --type-section: 22px; --type-page: 30px;
  --line-body: 1.55; --radius-control: 10px; --radius-surface: 14px;
  /* ---- 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;
  /* ---- --caution/--info (3 sep 2026, ronda de apariencia) ----
     --star significaba dos cosas a la vez: "favorito/valoración" (house-star,
     device-fav-star, fav-strip-head) Y "aviso/degradado" (.conn-chip.warn, .log-row.warn) -
     mismo color, intención distinta por casualidad. Se separan: --star vuelve a significar
     SOLO favorito/valoración de aquí en adelante; --caution es el aviso/degradado de
     verdad (repuesto en .conn-chip.warn/.log-row.warn), --info es un azul neutro fijo para
     estados informativos/"hay una actualización" - a propósito NO usa --accent, que es
     personalizable por persona y no debería cambiar el significado de un aviso. Contraste
     revisado igual que el resto de este bloque (ver comentario de arriba): ambos ≥4.5:1
     sobre --bg claro. */
  --caution: #B45309;
  --info: #1D64D8;
  /* 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);
  /* Las barras de navegación son una capa propia: un matiz cálido y una arista
     suave las distinguen del contenido claro sin convertirlas en una tarjeta. */
  --nav-surface: rgba(255, 248, 244, 0.74);
  --nav-border: rgba(189, 133, 98, 0.28);
  --nav-edge-shadow: inset -1px 0 rgba(255, 255, 255, 0.72);

  /* ---- 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;

  /* ---- fuente por persona (ronda 2 de apariencia, 3 sep 2026) ----
     Solo el NOMBRE de la fuente vive en la variable (sin fallback) para que cada selector
     conserve su propia cadena de reserva exacta de siempre (algunos llevan más reservas que
     otras, ver .dev-block más abajo) - así el aspecto por defecto (data-font-ui sin poner,
     "inter") queda byte a byte igual que antes de esta ronda. Los 4 valores concretos por
     id ("nunito"/"merriweather"/"jetbrains") están en :root[data-font-ui="..."], mismo
     patrón que :root[data-accent="..."]. */
  --font-ui: "Inter";
  --font-mono: "Space Mono";
}
/* ---- combinaciones curadas de fuente (ronda 2 de apariencia) ----
   Conjunto CERRADO de 3-4 ids (ver FONT_UI_OPTIONS en backend.py / app.js) - nunca texto
   libre, solo eligen entre las fuentes que index.html ya precarga vía Google Fonts.
   "nunito"/"merriweather" cambian el cuerpo de texto (--font-ui) y dejan Space Mono en
   títulos/marca tal cual; "jetbrains" hace lo contrario: cuerpo de texto sin tocar, cambia
   solo la mono de títulos/marca. */
:root[data-font-ui="nunito"] { --font-ui: "Nunito"; }
:root[data-font-ui="merriweather"] { --font-ui: "Merriweather"; }
:root[data-font-ui="jetbrains"] { --font-mono: "JetBrains Mono"; }

/* ---- 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; --caution: #FFB020; --info: #6EA8FF;
    --bg-translucent: rgba(10,11,16,0.72); --bg-translucent-strong: rgba(10,11,16,0.86);
    --nav-surface: rgba(20, 24, 34, 0.78); --nav-border: rgba(255, 255, 255, 0.09);
    --nav-edge-shadow: inset -1px 0 rgba(255, 255, 255, 0.04);
    --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);
  --nav-surface: rgba(20, 24, 34, 0.78); --nav-border: rgba(255, 255, 255, 0.09);
  --nav-edge-shadow: inset -1px 0 rgba(255, 255, 255, 0.04);
  --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;
}
:root[data-accent="blue"] { --accent:#4C8DFF; --accent-ink:#061a3d; --accent-soft:rgba(76,141,255,.12); --accent-line:rgba(76,141,255,.38); }
:root[data-accent="violet"] { --accent:#8B5CF6; --accent-ink:#fff; --accent-soft:rgba(139,92,246,.13); --accent-line:rgba(139,92,246,.40); }
:root[data-accent="teal"] { --accent:#00B8A9; --accent-ink:#001f1c; --accent-soft:rgba(0,184,169,.13); --accent-line:rgba(0,184,169,.42); }
.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; } }
/* Preferencia personal de Accesibilidad. El media query nativo sigue respetándose
   incluso si la persona no activa este ajuste manualmente. */
:root[data-reduce-motion="true"] *,
:root[data-reduce-motion="true"] *::before,
:root[data-reduce-motion="true"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: 0.01ms !important;
}
:root[data-text-scale="large"] { --type-body:16px; --type-support:15px; --type-section:24px; --type-page:32px; }
:root[data-text-scale="extra_large"] { --type-body:18px; --type-support:16px; --type-section:26px; --type-page:34px; }
/* ---- contraste en 3 pasos (3 sep 2026) en vez del booleano de antes ----
   "normal" no pone atributo (usa los tokens base, sin regla propia aquí). "alto" son
   los MISMOS porcentajes que tenía el booleano-on de antes (nadie que ya lo tuviera
   activado pierde nitidez con esta ronda). "maximo" va más allá: mismo --text-dim (ya no
   se puede subir más sin igualarlo a --text, que es lo que hace "alto") pero bordes bastante
   más marcados y un anillo de foco más grueso. */
:root[data-contrast="alto"] { --text-dim:var(--text); --border:color-mix(in srgb, var(--text) 55%, var(--bg)); --nav-border:color-mix(in srgb, var(--text) 45%, var(--bg)); --glass-border:color-mix(in srgb, var(--text) 40%, transparent); }
:root[data-contrast="alto"] button:focus-visible, :root[data-contrast="alto"] input:focus-visible, :root[data-contrast="alto"] select:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
:root[data-contrast="maximo"] { --text-dim:var(--text); --border:color-mix(in srgb, var(--text) 80%, var(--bg)); --nav-border:color-mix(in srgb, var(--text) 70%, var(--bg)); --glass-border:color-mix(in srgb, var(--text) 65%, transparent); }
:root[data-contrast="maximo"] button:focus-visible, :root[data-contrast="maximo"] input:focus-visible, :root[data-contrast="maximo"] select:focus-visible { outline:4px solid var(--accent); outline-offset:3px; }
/* ---- 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: var(--font-ui), -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; position: relative; }
.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }

#sidebar { display: none; }
@media (min-width: 900px) {
  /* Carril estructural, no tarjeta: pegado a izquierda, arriba y abajo como en una app
     de escritorio. La cabecera vive a su derecha y, cuando se pliega, aprovecha ese ancho. */
  .shell { gap: 0; padding: 0; }
  #sidebar {
    width: 232px; flex: none;
    border-radius: 0;
    background: var(--nav-surface); border: 0; border-right: 1px solid var(--nav-border);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    box-shadow: var(--nav-edge-shadow);
    padding: 10px 14px 20px;
    display: flex; flex-direction: column; gap: 4px;
    overflow: hidden;
    position: relative; z-index: 1;
    transition: width .22s ease, margin .22s ease, padding .22s ease, opacity .16s ease, transform .22s ease, border-width .22s ease;
  }
  #bottom-nav, .fab { display: none !important; }
  .shell.sidebar-collapsed #sidebar {
    width: 0; margin-left: 0; padding-left: 0; padding-right: 0;
    border-left-width: 0; border-right-width: 0; opacity: 0;
    transform: translateX(-18px); pointer-events: none;
  }
  /* ---- "barra lateral translúcida" apagable (3 sep 2026) ----
     Por defecto (sin el atributo, o "true") sigue siendo el cristal esmerilado de
     siempre - nadie nota el cambio si no toca este ajuste nuevo. Con el atributo en
     "false" (applySidebarTranslucent() en app.js) se apaga solo el desenfoque de ESTA
     barra - initLiquidGlass/initDepthParallax y el resto del sistema de cristal (tarjetas,
     cabecera, etc.) no se tocan. */
  :root[data-sidebar-translucent="false"] #sidebar {
    background: var(--surface);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
.sidebar-brand { display: flex; align-items: baseline; gap: 8px; padding: 0 12px 22px; }
.brand-name { font-family: var(--font-mono), monospace; font-size: 20px; font-weight: 700; }
.sidebar-toolbar { height: 32px; display:flex; align-items:center; justify-content:flex-end; }
@media (min-width:900px) {
  .sidebar-toolbar { height:42px; padding:0 2px; justify-content:flex-start; gap:2px; }
  .sidebar-toolbar .header-brand { display:flex; min-width:0; flex:1; gap:5px; }
  .sidebar-toolbar .header-product-mark { width:24px; height:24px; border-radius:8px; font-size:14px; }
  .sidebar-toolbar .header-product-name { gap:2px; }
  .sidebar-toolbar header h1, .sidebar-toolbar h1 { font-size:17px; }
  .sidebar-toolbar .header-product-name small { font-size:8px; }
  /* La versión pertenece al selector desplegable de debajo, no a la marca compacta. */
  .sidebar-toolbar .version-badge { display:none; }
  .sidebar-toolbar .sidebar-toggle,
  .sidebar-toolbar .header-leading-btn { display:flex; width:28px; height:28px; flex:none; }
  .sidebar-toolbar .header-leading-btn svg,
  .sidebar-toolbar .sidebar-toggle svg { width:17px; height:17px; }
}
.sidebar-workspace-wrap { position:relative; margin:4px 0 18px; }
.sidebar-workspace-row { display:flex; align-items:center; gap:2px; }
.sidebar-workspace-btn {
  min-width:0; flex:1; display:flex; align-items:center; gap:6px; padding:8px 8px;
  color:var(--text); background:none; border:0; border-radius:10px; cursor:pointer;
  font:inherit; text-align:left;
}
.sidebar-workspace-btn:hover { background:var(--accent-soft); color:var(--accent); }
.sidebar-workspace-btn .brand-name { font-family:inherit; font-size:18px; }
.sidebar-workspace-chevron { display:flex; color:var(--text-dim); transform:rotate(90deg); }
.sidebar-workspace-chevron svg { width:16px; height:16px; }
.sidebar-workspace-btn[aria-expanded="true"] .sidebar-workspace-chevron { transform:rotate(-90deg); }
.sidebar-workspace-btn .version-badge { margin-left:auto; }
.sidebar-workspace-btn .version-badge { font-size:8px; padding:1px 4px; }
.sidebar-utility-btn { width:30px; height:30px; flex:none; }
.sidebar-utility-btn svg { width:18px; height:18px; }
.sidebar-workspace-menu {
  position:absolute; left:0; right:0; top:42px; z-index:50; padding:6px;
  border:1px solid var(--glass-border); border-radius:12px; background:var(--surface2);
  box-shadow:var(--glass-shadow);
}
.sidebar-workspace-choice { position:relative; display:flex; flex-direction:column; gap:2px; padding:9px 30px 9px 9px; border-radius:8px; color:var(--text); }
.sidebar-workspace-choice small { color:var(--text-dim); font-size:11px; }
.sidebar-workspace-choice.active { background:var(--accent-soft); }
.sidebar-workspace-choice.disabled { opacity:.56; }
.workspace-check { position:absolute; right:10px; top:15px; color:var(--accent); }
.sidebar-pinned { margin-top:16px; }
.sidebar-section-label { padding:0 8px 6px; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); }
.sidebar-pinned-empty { padding:2px 8px; color:var(--text-dim); font-size:11px; line-height:1.4; }
.sidebar-spacer { flex: 1; }
.side-nav-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  background: none; border: none; border-radius: 12px;
  padding: 8px 10px;
  color: var(--text-dim);
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.side-nav-btn:hover { background: var(--accent-soft); color: var(--accent); }
.side-nav-btn.active { background: var(--accent-soft); color: var(--accent); }
.side-nav-btn svg { width: 18px; height: 18px; 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: var(--font-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-avatar img, .account-avatar-btn img { width:100%; height:100%; display:block; object-fit:cover; border-radius:50%; }
.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:center; gap:8px; min-width:max-content; }.header-product-mark { display:grid; place-items:center; width:28px; height:28px; border-radius:9px; color:var(--accent-ink); background:var(--accent); font-size:16px; }.header-product-name { display:grid; gap:3px; line-height:1; }.header-product-name small { color:var(--text-dim); font-size:9px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
header h1 { font-family: var(--font-mono), monospace; font-size: 19px; margin: 0; font-weight: 700; }
.header-leading { display: flex; align-items: center; min-width: 0; }
.view-title { font-size: 15px; font-weight: 600; display: none; }
.sidebar-toggle { display: none; }
.header-leading-btn, .header-leading-divider { display: none; }
@media (min-width: 900px) {
  .view-title { display: block; }
  header { padding: 9px 18px; }
  .sidebar-toggle {
    display: flex; position:static; z-index:auto; width:30px; height:30px;
    background:none; border:0;
  }
  /* .icon-btn-plain también define display:flex: esta regla más específica evita que
     los controles de cabecera se dupliquen mientras el carril lateral está visible. */
  .header-leading .header-leading-btn { display: none; }
  .header-leading .header-leading-divider { display: none; }
  .shell.sidebar-collapsed .header-leading .header-leading-btn { display: flex; }
  .shell.sidebar-collapsed .header-leading .header-leading-divider { display: block; width: 1px; height: 20px; margin: 0 10px; background: var(--border); }
}
.version-badge {
  font-size: 10px; font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 6px; padding: 1px 6px;
  text-transform: uppercase; letter-spacing: 0.03em;
}
/* Punto de "actualización de la app lista" (service worker en espera) - junto al número de
   versión, mismo lenguaje visual que .dot-accent pero clicable y con su propio foco. */
.sw-update-dot {
  width: 8px; height: 8px; flex: none; padding: 0; margin: 0 0 0 2px;
  border: none; border-radius: 50%; background: var(--accent); cursor: pointer;
  box-shadow: 0 0 0 3px transparent; transition: box-shadow .15s ease;
}
.sw-update-dot:hover, .sw-update-dot:focus-visible { box-shadow: 0 0 0 3px var(--accent-soft); }
.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; }
.view.view-enter-forward { animation: view-enter-forward 240ms cubic-bezier(.22,.8,.28,1) both; }
.view.view-enter-backward { animation: view-enter-backward 240ms cubic-bezier(.22,.8,.28,1) both; }
@keyframes view-enter-forward {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes view-enter-backward {
  from { opacity: 0; transform: translateX(-18px); }
  to { opacity: 1; transform: translateX(0); }
}
:root[data-reduce-motion="true"] .view.view-enter-forward,
:root[data-reduce-motion="true"] .view.view-enter-backward { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .view.view-enter-forward, .view.view-enter-backward { animation: none; }
}
/* 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); }
.bottom-nav-avatar { width:21px; height:21px; border-radius:50%; display:flex; align-items:center; justify-content:center; overflow:hidden; background:var(--accent); color:var(--accent-ink); font-size:11px; font-weight:700; }
.bottom-nav-avatar img { width:100%; height:100%; object-fit:cover; }
.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; }
@media (max-width:899px) {
  #fab-chat, #header-sidebar-toggle, #header-new-note, .header-leading-divider, #account-btn { display:none !important; }
  .conn-chip { min-height:36px; padding:6px 8px; }
}

/* ---------- 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;
  /* Reset de botón nativo (20 ago 2026): estos icon-btn viven tanto en <span> como en
     <button> — sin esto, un <button class="icon-btn"> hereda fondo/borde/padding del
     navegador y se ve distinto de los <span> equivalentes. */
  background: none; border: none; padding: 0; font: inherit;
}
.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;
}
.empty-state strong { color:var(--text); font-size:15px; }
.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; width: 100%;
  padding: 12px 16px; font-family: inherit; font-size: 14px; font-weight: 400;
  text-align: left; cursor: pointer;
  border: none; border-bottom: 1px solid var(--border); border-radius: 0;
  background: none; color: inherit;
}
.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: var(--font-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; overflow:hidden; padding:0;
}
#notif-panel { min-width: 280px; max-width: 320px; max-height: 60vh; overflow-y: auto; }
.notif-item {
  /* Reset de botón nativo (25 ago 2026): la fila marcable-como-leída ahora es un <button>
     real para ser alcanzable por teclado (antes era un <div> con solo onclick) — sin esto
     heredaría fondo/borde/centrado del navegador. Las filas con acciones (invitación de
     casa) siguen siendo <div>, a las que este reset no les cambia nada visible. */
  display: block; width: 100%; text-align: left; background: none; border: none; font: inherit; color: inherit;
  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-house-invite-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:10px; }
.notif-house-invite-actions button { border-radius:9px; padding:7px 10px; font-family:inherit; font-size:12px; font-weight:600; line-height:1; cursor:pointer; }
.notif-house-invite-actions button:disabled { opacity:.55; cursor:wait; }
.notif-invite-cancel { color:var(--text-dim); border:1px solid var(--border); background:transparent; }
.notif-invite-accept { color:#111; border:1px solid var(--accent); background:var(--accent); }
.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; }

/* Ajustes de escritorio: un diálogo de dos columnas. En móvil se conserva el overlay anterior
   hasta cerrar todo el diseño de ordenador, para no duplicar trabajo de interfaz. */
.settings-layout { display:flex; flex:1; min-height:0; position:relative; }
.settings-nav { display:none; }
.settings-main { display:flex; flex:1; min-width:0; min-height:0; flex-direction:column; }
.settings-desktop-title { display:none; }
@media (min-width:900px) {
  #settings-overlay .settings-panel { position:relative; max-width:1160px; width:min(1160px, calc(100vw - 80px)); height:min(78vh, 760px); max-height:none; }
  #settings-overlay .settings-mobile-header { position:absolute; top:12px; right:12px; z-index:2; padding:0; border:0; }
  #settings-overlay .settings-mobile-header h2, #settings-overlay .settings-mobile-header #settings-back, #settings-overlay .settings-mobile-header #settings-menu-btn { display:none !important; }
  #settings-overlay .settings-mobile-header #settings-close { width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; }
  #settings-overlay .settings-mobile-header #settings-close:hover { background:var(--surface); }
  /* La esquina de .settings-nav se redondea para seguir la del panel (20px, ver
     .overlay-panel) - antes su fondo/borde/sombra rectos asomaban por encima de la esquina
     curva del panel, como si hubiera dos bordes superpuestos (uno curvo, uno recto y
     puntiagudo detrás). Recortar con overflow:hidden en el panel en vez de esto parecía más
     simple, pero también corta los desplegables (rol de una persona, selector de casa) que
     a propósito sobresalen del panel cuando se abren cerca del borde - se probó y algunas
     opciones quedaban inalcanzables. Igualar el radio es la vía que no toca eso. */
  .settings-nav { display:flex; width:244px; flex:none; flex-direction:column; padding:20px 12px; background:var(--nav-surface); border-right:1px solid var(--nav-border); border-top-left-radius:20px; border-bottom-left-radius:20px; box-shadow:var(--nav-edge-shadow); overflow-y:auto; }
  .settings-search-wrap:focus-within { box-shadow:0 0 0 3px var(--accent-soft); }
  .settings-desktop-title { display:block; margin:0; padding:34px 52px 12px; font-size:24px; }
  #settings-overlay .overlay-body { max-width:760px; margin:0 auto; padding:12px 32px 36px; }
  #settings-overlay .settings-section { padding:16px 0; }
}
/* Contenido de .settings-nav (buscador + lista): antes solo existía dentro del bloque de
   escritorio de arriba. Se saca a reglas incondicionales porque ahora también se usa como
   cajón deslizante en móvil (ver .settings-nav.open más abajo) - misma lista de secciones,
   sin duplicar HTML ni CSS entre los dos casos. */
.settings-search-wrap { display:flex; align-items:center; gap:8px; padding:0 10px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--text-dim); }
.settings-search-wrap:focus-within { border-color:var(--accent-line); }
.settings-search-wrap svg { width:17px; height:17px; flex:none; }
#settings-search { width:100%; border:0; outline:0; padding:9px 0; background:transparent; color:var(--text-dim); font:inherit; font-size:13px; }
#settings-search::placeholder { color:var(--text-dim); opacity:1; }
.settings-nav-list { padding-top:18px; }
.settings-nav-heading { padding:0 8px 7px; color:var(--text-dim); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.settings-nav-heading:not(:first-child) { margin-top:18px; }
.settings-nav-btn { width:100%; display:flex; align-items:center; gap:10px; padding:9px 8px; border:0; border-radius:8px; background:transparent; color:var(--text-dim); font:inherit; font-size:13px; text-align:left; cursor:pointer; }
.settings-nav-btn svg { width:18px; height:18px; flex:none; }
.settings-nav-btn:hover { background:var(--surface); color:var(--text); }
.settings-nav-btn.active { background:var(--surface); color:var(--text); font-weight:700; }
.settings-nav-btn:focus-visible { background:color-mix(in srgb, var(--accent-soft) 72%, var(--surface)); color:var(--text); outline:2px solid var(--accent-line); outline-offset:2px; }
/* Cajón de secciones en móvil (25 ago 2026): pedido de Sebastian tras ver que en el
   teléfono no había forma de saltar directo a otra sección salvo volver a General y
   buscarla en «Más ajustes». El hamburguesa de arriba-izquierda abre esto mismo como
   cajón, igual que la barra lateral de escritorio - misma lista, mismo buscador. */
.settings-nav-backdrop { display:none; }
@media (max-width:899px) {
  .settings-menu-btn { display:flex; }
  .settings-nav-backdrop.open {
    display:block; position:absolute; inset:0; z-index:4;
    background:rgba(0,0,0,.45);
  }
  .settings-nav.open {
    display:flex; position:absolute; inset:0 auto 0 0; z-index:5;
    width:82%; max-width:300px; flex-direction:column; overflow-y:auto;
    padding:16px 12px; padding-top:max(16px, env(safe-area-inset-top, 0px));
    /* Opaco de verdad (no var(--nav-surface), que lleva alfa <1 pensado para asomar sobre
       el propio cristal esmerilado del panel de escritorio) - como cajón flotante en móvil,
       con manchas de color detrás, la transparencia lo volvía difícil de leer. */
    background:var(--surface2); border-right:1px solid var(--nav-border);
    box-shadow:8px 0 24px rgba(0,0,0,.28);
    border-radius:0 var(--radius-surface) var(--radius-surface) 0;
  }
}

/* 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;
}
.avatar-crop-overlay { position:fixed; inset:0; z-index:110; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,.66); }
.avatar-crop-box { width:min(100%, 390px); background:var(--glass-strong); border:1px solid var(--glass-border); border-radius:16px; padding:20px; box-shadow:0 24px 60px rgba(0,0,0,.5); }
.avatar-crop-box h3 { margin:0; font-size:17px; }
.avatar-crop-box p { margin:7px 0 16px; color:var(--text-dim); font-size:13px; line-height:1.45; }
.avatar-crop-workspace { width:min(100%, 300px); aspect-ratio:1; margin:0 auto; position:relative; overflow:hidden; border-radius:12px; background:var(--surface); border:1px solid var(--border); }
.avatar-crop-stage { position:absolute; inset:24px; z-index:2; border:2px solid rgba(255,255,255,.94); border-radius:50%; box-shadow:0 0 0 999px rgba(0,0,0,.56); touch-action:none; cursor:grab; }
.avatar-crop-stage.dragging { cursor:grabbing; }
.avatar-crop-workspace img { position:absolute; z-index:1; top:50%; left:50%; max-width:none; user-select:none; -webkit-user-drag:none; pointer-events:none; }
.avatar-crop-zoom { display:flex; align-items:center; gap:12px; margin:16px 0 10px; font-size:13px; color:var(--text-dim); }
.avatar-crop-zoom input { flex:1; accent-color:var(--accent); }
.avatar-crop-actions { display:flex; justify-content:flex-end; gap:8px; }
.avatar-crop-actions .settings-btn { margin:0; }
.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; font-weight: 600; color: var(--text);
  margin-bottom: 8px; letter-spacing: .01em;
}
.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-field input.invite-window-input {
  color-scheme: light dark;
  border-color: var(--accent-line);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
}
.modal-field input.invite-window-input:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* Campo de teléfono: código de país (desplegable) + número nacional, en la misma fila
 * (23 ago 2026, pedido real tras el primer despliegue de vincular email) */
.phone-field-row { display: flex; gap: 8px; }
.phone-field-row .phone-dial-select {
  flex: 0 0 auto; max-width: 40%;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 10px 8px; font-size: 14px; outline: none; font-family: inherit;
}
.phone-field-row .phone-dial-select:focus { border-color: var(--accent); }
.phone-field-row input[type="tel"] {
  flex: 1 1 auto; min-width: 0;
  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;
}
.phone-field-row input[type="tel"]:focus { border-color: var(--accent); }
.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; }
.modal-actions.draft-choice-actions { justify-content:space-between; align-items:center; gap:7px; }
.draft-choice-actions button { padding:9px 11px; }
.draft-save { background:var(--accent); color:var(--accent-ink); font-weight:700; }
.draft-review { background:transparent; color:var(--text-dim); }
.draft-review:hover { color:var(--text); }
.draft-discard { background:transparent; color:var(--warn); border:1px solid color-mix(in srgb, var(--warn) 68%, var(--border)) !important; }
.draft-discard:hover { background:color-mix(in srgb, var(--warn) 10%, transparent); border-color:var(--warn) !important; }

/* ---------- 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: var(--font-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, border-color 0.18s ease, box-shadow 0.18s ease; }
@media (hover: hover) and (pointer: fine) {
  .widget-card:not(.dragging):hover {
    border-color: var(--accent-line);
    box-shadow: 0 8px 30px color-mix(in srgb, var(--accent) 12%, rgba(0,0,0,0.22));
  }
}

/* Luz interior opcional de escritorio: el tono se deriva del acento elegido; no hay
   anillo de borde ni colores fijos. */
@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 .22s ease;
    background:radial-gradient(140px circle at var(--spot-x, 50%) var(--spot-y, 50%),
      color-mix(in srgb, var(--accent) 17%, transparent), transparent 68%);
  }
  .widget-card.accent-light::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: var(--font-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 { transition: border-color 0.18s ease, box-shadow 0.18s ease; }
.house-card:hover { border-color: var(--accent); box-shadow: 0 8px 30px color-mix(in srgb, var(--accent) 12%, rgba(0,0,0,0.22)); }
.hogar-houses-head { display:flex; align-items:flex-end; justify-content:space-between; margin:0 0 14px; }
.hogar-houses-head .section-label { margin:0; }
.hogar-houses-head p { margin:4px 0 0; font-size:13px; color:var(--text-dim); }
.house-card.is-primary { border-color:var(--accent-line); background:linear-gradient(115deg, var(--accent-soft), var(--glass)); padding:19px; }
.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-kicker { display:flex; align-items:center; gap:5px; margin:0 0 6px; color:var(--accent); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.house-card-kicker svg { width:13px; height:13px; fill:currentColor; }
.house-card-name { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.house-card.is-primary .house-card-name { font-size:20px; }
.house-card-owner { color: var(--text-dim); font-size: 0.82em; font-weight: 600; white-space: nowrap; }
.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-card-open { display:flex; align-items:center; gap:4px; margin-top:13px; color:var(--accent); font-size:12px; font-weight:700; }
.house-card-open svg { width:14px; height:14px; }
.house-chevron { color: var(--text-dim); flex: none; margin-top: 4px; padding:4px; border:0; background:transparent; cursor:pointer; }
.house-chevron:hover { color:var(--accent); }
.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; }
.hogar-now { display:flex; align-items:center; gap:13px; padding:16px 18px; margin:0 0 16px; border:1px solid var(--accent-line); border-radius:16px; background:linear-gradient(110deg, var(--accent-soft), color-mix(in srgb, var(--surface) 84%, transparent)); }
.hogar-now-icon { width:42px; height:42px; display:flex; align-items:center; justify-content:center; flex:none; border-radius:13px; color:var(--accent); background:var(--surface); border:1px solid var(--accent-line); }
.hogar-now-icon svg { width:21px; height:21px; }
.hogar-now-kicker { font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--accent); }
.hogar-now-title { margin-top:2px; font-size:17px; font-weight:700; }
.hogar-now p, .hogar-section-head p { margin:3px 0 0; font-size:12px; line-height:1.45; color:var(--text-dim); }
.hogar-overview-section { margin:0 0 20px; }
.hogar-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:10px; }
.hogar-section-head .section-label { margin:0; }
.hogar-section-head .ghost-btn { padding:6px 0; white-space:nowrap; }
.hogar-routines, .hogar-zones { display:grid; gap:10px; grid-template-columns:repeat(2, minmax(0, 1fr)); }
.hogar-quick-controls { display:grid; gap:10px; grid-template-columns:repeat(2, minmax(0, 1fr)); }
.hogar-quick-controls .hogar-overview-empty { grid-column:1 / -1; }
.hogar-routine-btn, .hogar-zone-card { min-width:0; font-family:inherit; cursor:pointer; text-align:left; color:var(--text); border:1px solid var(--glass-border); background:var(--glass); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); }
.hogar-routine-btn { display:flex; align-items:center; gap:9px; padding:12px; border-radius:13px; }
.hogar-routine-btn > span { width:30px; height:30px; display:flex; align-items:center; justify-content:center; flex:none; border-radius:9px; color:var(--accent); background:var(--accent-soft); }
.hogar-routine-btn svg { width:17px; height:17px; }
.hogar-routine-btn strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.hogar-routine-btn small { margin-left:auto; color:var(--text-dim); font-size:11px; white-space:nowrap; }
.hogar-routine-btn:hover, .hogar-zone-card:hover { border-color:var(--accent); }
.hogar-routine-btn.running { opacity:.6; pointer-events:none; }
.hogar-routine-btn:disabled { opacity:.52; cursor:default; }
.hogar-zone-card { display:flex; align-items:center; gap:10px; padding:13px; border-radius:14px; }
.hogar-zone-card > svg { width:16px; height:16px; flex:none; color:var(--text-dim); }
.hogar-zone-card.active { border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent); }
.hogar-zone-card.active > svg { color:var(--accent); }
.hogar-zone-icon { width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:10px; background:var(--surface); color:var(--accent); flex:none; }
.hogar-zone-icon svg { width:17px; height:17px; }
.hogar-zone-copy { min-width:0; flex:1; display:flex; flex-direction:column; gap:2px; }
.hogar-zone-copy strong { font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hogar-zone-copy small { color:var(--text-dim); font-size:11px; }
.hogar-activity { border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--surface); }
.hogar-activity-row { display:flex; align-items:center; gap:10px; padding:11px 13px; border-bottom:1px solid var(--border); }
.hogar-activity-row:last-child { border-bottom:0; }
.hogar-activity-dot { width:24px; height:24px; display:flex; align-items:center; justify-content:center; color:var(--ok); flex:none; }
.hogar-activity-row.error .hogar-activity-dot { color:var(--warn); }
.hogar-activity-dot svg { width:16px; height:16px; }
.hogar-activity-row > span:nth-child(2) { min-width:0; flex:1; display:flex; flex-direction:column; gap:2px; }
.hogar-activity-row strong { font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hogar-activity-row small, .hogar-activity-row time { font-size:11px; color:var(--text-dim); }
.hogar-activity-row time { flex:none; }
.hogar-overview-empty, .hogar-overview-loading { padding:13px; border:1px dashed var(--border); border-radius:13px; color:var(--text-dim); font-size:12px; line-height:1.45; }
.hogar-devices-heading { display:flex; align-items:flex-end; justify-content:space-between; margin-top:4px; }
.hogar-devices-heading .section-label { margin:0; }
.hogar-devices-heading p { margin:3px 0 12px; font-size:12px; color:var(--text-dim); }
@media (max-width:560px) { .hogar-routines, .hogar-zones, .hogar-quick-controls { grid-template-columns:1fr; } .hogar-routine-btn { min-height:48px; } .hogar-now { align-items:flex-start; } }
.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;
  cursor: pointer; /* toda la tarjeta abre la ficha, salvo estrella/lápiz/interruptor */
}
.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 var(--accent-line);
  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(--accent-soft); color: var(--accent); }
.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: 20px 24px; }
.settings-note {
  font-size: 13px; color: var(--text-dim); line-height: 1.55;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 12px;
}
.settings-general-intro { display:flex; align-items:flex-start; gap:15px; padding:20px 0 28px; border-bottom:1px solid var(--border); }
.settings-general-icon, .settings-general-card-icon { display:flex; align-items:center; justify-content:center; flex:none; color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, var(--surface)); border:1px solid color-mix(in srgb, var(--accent) 32%, var(--border)); }
.settings-general-icon { width:42px; height:42px; border-radius:12px; }
.settings-general-icon svg { width:22px; height:22px; }
.settings-general-intro h3, .settings-general-section h3 { margin:0; font-size:16px; }
.settings-general-intro p, .settings-general-card p, .settings-general-footnote { margin:6px 0 0; color:var(--text-dim); font-size:13px; line-height:1.5; }
.settings-general-section { padding:28px 0 0; }
.settings-general-section > h3 { margin-bottom:12px; }
.settings-general-card { display:flex; align-items:flex-start; gap:12px; padding:14px 0; border-top:1px solid var(--border); }
.settings-general-card-icon { width:32px; height:32px; border-radius:9px; }
.settings-general-card-icon svg { width:17px; height:17px; }
.settings-general-card strong { display:block; font-size:14px; }
.settings-general-card p { margin-top:3px; }
.settings-general-footnote { padding-top:20px; }
/* La pantalla General (root) es la única que confía en el contenedor (.overlay-body) para
   el margen horizontal, en vez de traer el suyo propio como .settings-section (24px). En
   escritorio funciona porque .overlay-body ya pone 32px ahí; en móvil .overlay-body no pone
   nada y el texto queda pegado al borde - "como un pulgar" de espacio a cada lado, que es
   justo lo que falta. Se limita a móvil para no sumarse a los 32px del contenedor en
   escritorio (quedaría con demasiado margen). */
@media (max-width:899px) {
  .settings-general-intro, .settings-general-section, .settings-general-footnote { padding-left:20px; padding-right:20px; }
}
.settings-general-control { display:flex; align-items:center; gap:22px; padding:15px 0; border-top:1px solid var(--border); }
.settings-general-control-copy { flex:1; min-width:0; }
.settings-general-control-copy strong, .settings-general-control-copy p { display:block; }
.settings-general-control-copy strong { font-size:14px; }
.settings-general-control-copy p { margin:4px 0 0; color:var(--text-dim); font-size:12px; line-height:1.45; }
.settings-background-control { padding:15px 0 0; border-top:1px solid var(--border); }
.settings-background-control > img { width:100% !important; max-width:none !important; height:142px !important; margin:12px 0 0 !important; }
.settings-theme-options { display:flex; gap:5px; flex:none; padding:4px; border:1px solid var(--border); border-radius:10px; background:var(--surface); }
.settings-theme-option { min-width:72px; border:0; border-radius:7px; padding:7px 9px; background:transparent; color:var(--text-dim); font:inherit; font-size:12px; cursor:pointer; }
.settings-theme-option:hover { color:var(--text); background:color-mix(in srgb, var(--text) 7%, transparent); }
.settings-theme-option.active { color:var(--text); background:color-mix(in srgb, var(--accent) 18%, var(--surface)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 36%, var(--border)); }
/* ---- tarjetas de tema con vista previa partida (3 sep 2026) ----
   Mismo lenguaje visual que .settings-accent-option (tarjeta con borde sutil, activo
   marcado con --accent-soft/--accent-line) pero en formato tarjeta vertical con una
   miniatura arriba en vez de solo texto - Sistema enseña sus dos mitades (clara/oscura)
   una junto a otra, Claro/Oscuro enseñan una miniatura sólida de ese tema con una
   "cabecera" y 2 "líneas de texto" para que se lea como una captura en pequeño, no como
   un cuadrado de color plano. */
.settings-theme-cards { display:flex; gap:8px; flex:none; flex-wrap:wrap; }
.settings-theme-card { display:flex; flex-direction:column; align-items:center; gap:6px; width:88px; border:1px solid var(--border); border-radius:12px; padding:7px 7px 9px; background:transparent; color:var(--text-dim); font:inherit; font-size:12px; cursor:pointer; }
.settings-theme-card:hover { color:var(--text); background:color-mix(in srgb, var(--text) 5%, transparent); }
.settings-theme-card.active { color:var(--text); border-color:var(--accent-line); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent-line); }
.settings-theme-card-preview { position:relative; display:block; width:100%; height:44px; border-radius:8px; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(0,0,0,.14); }
.settings-theme-card-preview.split { display:flex; }
.settings-theme-card-preview.split .theme-preview-half { flex:1 1 50%; position:relative; }
.settings-theme-card-preview.split .theme-preview-half.half-light { background:#F3F4F7; }
.settings-theme-card-preview.split .theme-preview-half.half-dark { background:#0A0B10; }
.theme-preview-bar { position:absolute; top:5px; left:5px; right:5px; height:6px; border-radius:3px; }
.settings-theme-card-preview.split .theme-preview-bar { left:4px; right:4px; }
.theme-preview-line { position:absolute; left:5px; height:4px; border-radius:2px; }
.theme-preview-line.l1 { top:17px; width:62%; }
.theme-preview-line.l2 { top:25px; width:42%; }
.settings-theme-card-label { font-size:11px; }
.settings-theme-card.active .settings-theme-card-label { font-weight:600; }
/* ---- Tema claro/Tema oscuro independientes (ronda 3 de apariencia, 4 sep 2026) ----
   Antes acento/fondo/texto eran UN solo valor que se aplicaba sin importar qué tema
   estuviera resuelto en cada momento - pedido explícito de Sebastian (con una captura del
   propio editor de tema de Claude Code como referencia) de separarlos en dos tarjetas
   independientes, "Tema claro"/"Tema oscuro", con bordes redondeados de verdad ("como
   cuadrados pero con bordes redondeados", sus palabras) - no una simple lista con etiqueta.
   Mismo lenguaje visual que .access-group (la tarjeta agrupada más cercana que ya existía:
   borde sutil + fondo --surface semitransparente + --radius-surface), en vez de inventar un
   estilo de tarjeta nuevo. Mismo patrón de apilado en móvil que .settings-identity-fields
   (grid de 2 columnas en escritorio, 1fr por debajo de 640px). */
.settings-theme-variant-intro { padding:15px 0 0; border-top:1px solid var(--border); }
.settings-theme-variant-intro strong, .settings-theme-variant-intro p { display:block; }
.settings-theme-variant-intro strong { font-size:14px; }
.settings-theme-variant-intro p { margin:4px 0 0; color:var(--text-dim); font-size:12px; line-height:1.45; }
.settings-theme-variant-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; margin-top:12px; }
.settings-theme-variant-card {
  border:1px solid var(--border); border-radius:var(--radius-surface);
  background:color-mix(in srgb, var(--surface) 74%, transparent); overflow:hidden;
}
.settings-theme-variant-card-head {
  padding:12px 16px; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--text-dim); border-bottom:1px solid var(--border);
}
.settings-theme-variant-card-body { padding:0 16px; }
.settings-theme-variant-card-body .settings-general-control:first-child { border-top:none; }
@media (max-width:640px) { .settings-theme-variant-grid { grid-template-columns:1fr; } }
/* flex-wrap + flex-basis:100% en el editor (3 sep 2026, arreglo detectado durante la ronda 2
   de apariencia): con el selector de color nativo + el campo hex + el botón, el editor de
   "Personalizado" es más ancho que el resto de esta fila - sin esto, .settings-general-
   control-copy (flex:1, min-width:0) se aplastaba a un hilo de texto vertical en vez de
   dejar que el editor baje a su propia fila. Mismo arreglo que .settings-bg-text-control. */
.settings-accent-control { align-items:flex-start; flex-wrap:wrap; }
.settings-accent-control .settings-accent-custom-editor { flex:1 1 100%; }
.settings-accent-options { display:flex; gap:7px; flex:none; flex-wrap:wrap; }
.settings-accent-option { min-width:52px; display:flex; flex-direction:column; align-items:center; gap:5px; padding:4px; border:1px solid transparent; border-radius:9px; background:transparent; color:var(--text-dim); font:inherit; font-size:10px; cursor:pointer; }
.settings-accent-option span { width:24px; height:24px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
.settings-accent-option em { font-style:normal; }
.settings-accent-option:hover { background:var(--surface); color:var(--text); }
.settings-accent-option.active { border-color:var(--accent-line); background:var(--accent-soft); color:var(--text); }
/* rueda de color en vez de un tono fijo - distingue de un vistazo "Personalizado" de los
   4 presets aunque todavía no se haya elegido ningún hex. */
.settings-accent-swatch-custom { background:conic-gradient(from 0deg, #FF6B1A, #4C8DFF, #8B5CF6, #00B8A9, #FF6B1A); }
.settings-accent-custom-editor { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; padding-top:10px; border-top:1px solid var(--border); }
.settings-accent-custom-editor input[type="color"] { width:34px; height:34px; padding:0; border:1px solid var(--border); border-radius:8px; background:none; cursor:pointer; flex:none; }
.settings-accent-custom-editor input[type="text"] { width:110px; padding:8px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); font:inherit; font-size:13px; text-transform:uppercase; }
.settings-accent-custom-editor .settings-btn { margin:0; }
/* ---- fondo/texto a medida (ronda 2 de apariencia, 3 sep 2026) ----
   Mismo lenguaje visual que .settings-accent-custom-editor (selector de color nativo +
   campo hex), pero DOS pares en vez de uno, con un ratio de contraste visible entre ambos -
   a diferencia del acento, aquí un par malo deja la app entera ilegible, así que el número
   de contraste está siempre a la vista, no solo tras un error. */
/* flex-wrap:wrap + flex-basis:100% en el editor (no en .settings-accent-custom-editor, que
   comparte fila con .settings-general-control-copy sin remedio propio): con dos pares de
   color + el número de contraste + dos botones, este control es más ancho que el resto -
   sin esto, .settings-general-control-copy (flex:1, min-width:0) se aplasta a un hilo de
   texto vertical en vez de dejar que el editor baje a su propia fila. */
.settings-bg-text-control { align-items:flex-start; flex-wrap:wrap; }
.settings-bg-text-control .settings-bg-text-editor { flex:1 1 100%; }
.settings-bg-text-editor { display:flex; flex-wrap:wrap; align-items:flex-end; gap:16px; margin-top:10px; padding-top:10px; border-top:1px solid var(--border); }
.settings-color-field { display:flex; flex-direction:column; gap:6px; }
.settings-color-field-label { font-size:11px; color:var(--text-dim); }
.settings-color-field-row { display:flex; align-items:center; gap:8px; }
.settings-color-field-row input[type="color"] { width:34px; height:34px; padding:0; border:1px solid var(--border); border-radius:8px; background:none; cursor:pointer; flex:none; }
.settings-color-field-row input[type="text"] { width:100px; padding:8px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); font:inherit; font-size:13px; text-transform:uppercase; }
.settings-bg-text-ratio { font-size:12px; font-weight:600; padding:6px 10px; border-radius:8px; background:var(--surface); border:1px solid var(--border); color:var(--text-dim); white-space:nowrap; }
.settings-bg-text-ratio.ok { color:var(--ok); border-color:color-mix(in srgb, var(--ok) 40%, var(--border)); background:color-mix(in srgb, var(--ok) 10%, var(--surface)); }
.settings-bg-text-ratio.bad { color:var(--warn); border-color:color-mix(in srgb, var(--warn) 45%, var(--border)); background:color-mix(in srgb, var(--warn) 10%, var(--surface)); }
.settings-bg-text-actions { display:flex; gap:8px; flex-wrap:wrap; }
.settings-bg-text-actions .settings-btn { margin:0; }
.settings-bg-text-error { flex-basis:100%; font-size:12px; color:var(--warn); margin:0; }
/* ---- selector de fuente (ronda 2 de apariencia) ---- */
/* mismo motivo que .settings-bg-text-control de arriba: 4 opciones con muestra + etiqueta no
   caben junto a .settings-general-control-copy en una sola fila sin aplastarla. */
.settings-font-control { flex-wrap:wrap; }
.settings-font-control .settings-font-options { flex:1 1 100%; }
.settings-font-options { display:flex; gap:8px; flex-wrap:wrap; }
.settings-font-option { display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:110px; border:1px solid var(--border); border-radius:10px; padding:9px 12px; background:transparent; color:var(--text-dim); font:inherit; cursor:pointer; text-align:left; }
.settings-font-option:hover { color:var(--text); background:color-mix(in srgb, var(--text) 5%, transparent); }
.settings-font-option.active { color:var(--text); border-color:var(--accent-line); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent-line); }
.settings-font-option-sample { font-size:20px; line-height:1; }
.settings-font-option-label { font-size:11px; }
/* ---- importar tema (ronda 2 de apariencia) ---- */
.settings-import-choice-row { display:flex; gap:8px; flex-wrap:wrap; }
.settings-import-choice-row .settings-btn { margin:0; }
.settings-theme-export-actions { display:flex; gap:8px; flex:none; }
.settings-theme-export-actions .settings-btn { display:inline-flex; align-items:center; gap:7px; margin:0; white-space:nowrap; }
.settings-theme-export-actions .settings-btn svg { width:16px; height:16px; }
.settings-general-link { width:100%; display:flex; align-items:center; gap:12px; padding:14px 0; border:0; border-top:1px solid var(--border); background:transparent; color:var(--text); text-align:left; font:inherit; cursor:pointer; }
.settings-general-link:hover { color:var(--accent); background:var(--accent-soft); }
.settings-general-link > span:nth-child(2) { flex:1; min-width:0; }
.settings-general-link strong, .settings-general-link small { display:block; }
.settings-general-link strong { font-size:14px; }
.settings-general-link small { margin-top:3px; color:var(--text-dim); font-size:12px; line-height:1.4; }
.settings-general-link-chevron { display:flex; color:var(--text-dim); }
.settings-general-link-chevron svg { width:17px; height:17px; }
/* "Más ajustes" en la pantalla General solo hace falta en móvil: en escritorio esas
   mismas secciones ya están siempre visibles en .settings-nav (barra lateral). */
@media (min-width:900px) { .settings-mobile-more { display:none; } }
.settings-search-empty { margin:10px 8px; color:var(--text-dim); font-size:12px; line-height:1.4; }
.settings-switch { position:relative; display:inline-flex; flex:none; cursor:pointer; }
.settings-switch input { position:absolute; opacity:0; pointer-events:none; }
.settings-switch span:not(.sr-only) { width:42px; height:24px; display:block; border-radius:999px; background:var(--border); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent); transition:background .16s ease; }
.settings-switch span:not(.sr-only)::after { content:""; display:block; width:18px; height:18px; margin:3px; border-radius:50%; background:var(--surface); box-shadow:0 1px 2px color-mix(in srgb, #000 28%, transparent); transition:transform .16s ease; }
.settings-switch input:checked + span:not(.sr-only) { background:var(--accent); }
.settings-switch input:checked + span:not(.sr-only)::after { transform:translateX(18px); }
.settings-switch input:focus-visible + span:not(.sr-only) { outline:2px solid var(--accent-line); outline-offset:3px; }
.settings-section-heading { margin-bottom:24px; }
.settings-section-heading h3 { margin:0; font-size:22px; line-height:1.2; letter-spacing:-.02em; }
.settings-section-heading p { max-width:680px; margin:8px 0 0; color:var(--text-dim); font-size:15px; line-height:1.55; }
.dev-performance-list { display:grid; gap:var(--space-2); }
.dev-performance-row { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:var(--space-1) var(--space-3); padding:var(--space-3) var(--space-4); border:1px solid var(--border); border-radius:var(--radius-control); background:var(--surface); }
.dev-performance-row strong { font-size:var(--type-body); }
.dev-performance-row span, .dev-performance-row small { color:var(--text-dim); font-size:var(--type-support); }
.dev-performance-row small { grid-column:1 / -1; color:var(--warn); }
.dev-performance-row.slow { border-color:var(--accent-line); }
.dev-performance-row.error { border-color:color-mix(in srgb, var(--warn) 48%, var(--border)); }
.settings-identity-fields { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 14px; }
.settings-identity-list { display:block; border-top:1px solid var(--border); }
.settings-avatar-row { display:flex; align-items:center; gap:14px; margin:0 0 20px; }
.settings-account-profile { flex-direction:column; justify-content:center; text-align:center; gap:9px; padding:6px 0 24px; }
.settings-account-profile .settings-avatar-button { width:96px; height:96px; font-size:30px; }
.settings-account-profile .settings-avatar-copy strong { font-size:18px; }
.settings-account-profile .settings-avatar-actions { justify-content:center; }
.settings-avatar-button { position:relative; width:82px; height:82px; flex:none; overflow:hidden; border:1px solid var(--border); border-radius:50%; background:var(--accent); color:var(--accent-ink); cursor:pointer; padding:0; font:700 26px/1 Inter, sans-serif; }
.settings-avatar-button img { width:100%; height:100%; object-fit:cover; display:block; }
.settings-avatar-edit { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.56); color:#fff; opacity:0; transition:opacity .16s ease; }
.settings-avatar-edit svg { width:22px; height:22px; }
.settings-avatar-button:hover .settings-avatar-edit, .settings-avatar-button:focus-visible .settings-avatar-edit { opacity:1; }
.settings-avatar-copy strong, .settings-avatar-copy span { display:block; }
.settings-avatar-copy strong { font-size:14px; }
.settings-avatar-copy span { color:var(--text-dim); font-size:12px; line-height:1.45; margin-top:3px; }
.settings-avatar-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:9px; }
.settings-avatar-actions .settings-btn { margin:0; }
.settings-account-row { display:flex; align-items:center; gap:22px; min-height:76px; margin:0; padding:15px 0; border-bottom:1px solid var(--border); }
.settings-account-row-copy { flex:1; min-width:0; }
.settings-account-row-copy strong, .settings-account-row-copy span { display:block; }
.settings-account-row-copy strong { font-size:14px; }
.settings-account-row-copy span { margin-top:4px; color:var(--text-dim); font-size:12px; line-height:1.4; }
.settings-account-row > input, .settings-account-row > select { width:min(100%, 300px); flex:0 1 300px; }
.settings-username-input { width:min(100%, 300px); flex:0 1 300px; display:flex; align-items:center; gap:7px; padding:0 12px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text-dim); }
.settings-username-input:focus-within { border-color:var(--accent-line); }
.settings-username-input input { min-width:0; flex:1; border:0 !important; background:transparent !important; padding:10px 0 !important; }
.settings-account-row > .settings-btn { margin:0; flex:none; }
.settings-account-security { padding-top:28px; }
.settings-memory { max-width:780px; }
.settings-memory-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:0 0 16px; border-bottom:1px solid var(--border); }
.settings-memory-heading h3 { margin:0; font-size:20px; }
.settings-memory-heading p { margin:5px 0 0; color:var(--text-dim); font-size:13px; }
.settings-memory-export { display:inline-flex; align-items:center; gap:7px; margin:0; white-space:nowrap; }
.settings-memory-export svg { width:16px; height:16px; }
.settings-memory .settings-note { margin:16px 0 22px; }
.settings-memory-list-heading { padding:0 0 10px; }
.settings-memory-list-heading strong, .settings-memory-list-heading span { display:block; }
.settings-memory-list-heading strong { font-size:14px; }
.settings-memory-list-heading span { margin-top:4px; color:var(--text-dim); font-size:12px; }
.settings-memory-list { border-top:1px solid var(--border); }
.settings-memory-row { display:flex; align-items:center; gap:16px; min-height:62px; padding:12px 0; border-bottom:1px solid var(--border); }
.settings-memory-row > div { flex:1; min-width:0; }
.settings-memory-row strong, .settings-memory-row span { display:block; }
.settings-memory-row strong { font-size:14px; font-weight:500; line-height:1.45; }
.settings-memory-row span { margin-top:4px; color:var(--text-dim); font-size:12px; }
.settings-memory-forget { width:34px; height:34px; flex:none; display:grid; place-items:center; padding:0; color:var(--warn); border:1px solid color-mix(in srgb, var(--warn) 42%, var(--border)); border-radius:8px; background:transparent; cursor:pointer; }
.settings-memory-forget svg { width:16px; height:16px; }
.settings-memory-forget:hover { border-color:var(--warn); background:color-mix(in srgb, var(--warn) 12%, transparent); }
.settings-memory-danger { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px 0 0; }
.settings-memory-danger strong, .settings-memory-danger span { display:block; }
.settings-memory-danger strong { font-size:14px; }
.settings-memory-danger span { margin-top:4px; color:var(--text-dim); font-size:12px; line-height:1.4; }
.settings-memory-danger .settings-btn { margin:0; white-space:nowrap; }
.settings-memory-empty { padding:22px 0 4px; color:var(--text-dim); }
.settings-memory-empty strong, .settings-memory-empty span { display:block; }
.settings-memory-empty strong { color:var(--text); font-size:14px; }
.settings-memory-empty span { margin-top:5px; max-width:500px; font-size:13px; line-height:1.5; }
@media (max-width:640px) { .settings-memory-heading, .settings-memory-danger { align-items:stretch; flex-direction:column; } .settings-memory-export, .settings-memory-danger .settings-btn { align-self:flex-start; } }
.settings-external-connections .settings-note { margin:18px 0 0; }
.settings-connection-card { width:100%; display:flex; align-items:center; gap:13px; margin:0; padding:14px 0; border:0; border-bottom:1px solid var(--border); background:transparent; color:var(--text); font:inherit; text-align:left; cursor:pointer; }
.settings-connection-card:hover, .settings-connection-card:focus-visible { color:var(--text); background:color-mix(in srgb, var(--accent-soft) 42%, transparent); outline:0; }
.settings-connection-card:focus-visible { box-shadow:inset 3px 0 0 var(--accent); }
.settings-connection-icon { width:38px; height:38px; display:grid; place-items:center; flex:none; color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, var(--surface)); border:1px solid var(--accent-line); border-radius:10px; }
.settings-connection-icon svg { width:20px; height:20px; }
.settings-connection-copy { flex:1; min-width:0; }
.settings-connection-copy strong, .settings-connection-copy > span { display:block; }
.settings-connection-copy strong { font-size:14px; }
.settings-connection-copy > span { margin-top:4px; color:var(--text-dim); font-size:12px; line-height:1.4; }
.settings-connection-action { display:inline-flex; align-items:center; gap:4px; flex:none; color:var(--text-dim); font-size:12px; }
.settings-connection-action svg { width:16px; height:16px; }
.settings-connection-status { flex:none; color:var(--text-dim); font-size:12px; white-space:nowrap; }
.settings-connection-status.ok { color:var(--ok); }
@media (max-width:640px) { .settings-connection-card { align-items:flex-start; flex-wrap:wrap; } .settings-connection-copy { min-width:calc(100% - 52px); } .settings-connection-status { margin-left:51px; } .settings-connection-action { margin-left:auto; } }
.settings-karen-preferences { max-width:780px; }
.settings-karen-preferences > .settings-btn { margin:18px 0 0; }
.settings-karen-wake-input { border:1px solid var(--accent-line); border-radius:9px; background:color-mix(in srgb, var(--surface) 84%, var(--accent-soft)); color:var(--text); padding:10px 12px; font:inherit; font-size:14px; outline:none; box-shadow:inset 0 1px 0 color-mix(in srgb, #fff 66%, transparent); }
.settings-karen-wake-input:hover { border-color:var(--accent); }
.settings-karen-wake-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft), inset 0 1px 0 color-mix(in srgb, #fff 66%, transparent); }
.settings-identity-fields select { width:100%; background:var(--surface); border:1px solid var(--border); color:var(--text); border-radius:8px; padding:10px 12px; font:inherit; font-size:14px; outline:none; }
.settings-identity-fields select:focus { border-color:var(--accent-line); }
@media (max-width:640px) { .settings-identity-fields { grid-template-columns:1fr; } .settings-account-row, .settings-general-control { align-items:stretch; flex-direction:column; gap:10px; } .settings-account-row > input, .settings-account-row > select, .settings-username-input { width:100%; flex-basis:auto; } .settings-account-row > .settings-btn { align-self:flex-start; } .settings-theme-options, .settings-accent-options, .settings-theme-cards, .settings-font-options { align-self:flex-start; } .settings-theme-export-actions, .settings-bg-text-editor, .settings-import-choice-row { flex-wrap:wrap; } }
.settings-field { margin-bottom: 14px; }
.settings-identity-list .settings-field { margin:0; }
.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); transition: border-color 0.18s ease, background 0.18s ease; }
.family-member:has(button):hover { background: var(--accent-soft); border-color: var(--accent-line); }
.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); }
.settings-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.settings-actions .settings-btn { display: inline-flex; align-items: center; gap: 7px; }

/* Roles del hogar: mismo lenguaje de filas y separadores que Cuenta, nunca tarjetas grandes. */
.settings-home-access { max-width: 860px; }
.settings-house-picker { display:flex; align-items:center; gap:14px; margin:28px 0 22px; padding-bottom:20px; border-bottom:1px solid var(--border); }
.settings-house-picker > span { font-weight:700; }
.settings-house-select { position:relative; min-width:230px; margin-left:auto; }
.settings-house-trigger, .settings-house-option { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--text); font:inherit; }
.settings-house-trigger { min-height:44px; padding:10px 12px; background:var(--surface); border:1px solid var(--accent-line); border-radius:10px; cursor:pointer; }
.settings-house-trigger:hover, .settings-house-trigger[aria-expanded="true"] { border-color:var(--accent); background:var(--accent-soft); }
.settings-house-current, .settings-house-option > span { display:flex; align-items:center; min-width:0; gap:9px; }
.settings-house-current svg, .settings-house-option svg { width:18px; height:18px; color:var(--accent); flex:0 0 auto; }
.settings-house-current b, .settings-house-option b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.settings-house-meta { display:flex; align-items:center; min-width:17px; justify-content:flex-end; }
.settings-house-meta i { display:inline-flex; width:17px; height:17px; color:var(--accent); font-style:normal; }
.settings-house-meta i svg { width:17px; height:17px; fill:currentColor; }
.settings-house-options { position:absolute; z-index:12; top:calc(100% + 6px); right:0; left:0; overflow:hidden; padding:5px; background:var(--surface); border:1px solid var(--accent-line); border-radius:10px; box-shadow:0 14px 36px rgba(0,0,0,.28); }
.settings-house-option { padding:10px 9px; border:0; border-radius:7px; background:transparent; text-align:left; cursor:pointer; }
.settings-house-option:hover, .settings-house-option.selected { background:var(--accent-soft); color:var(--accent); }
.settings-members-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:2px 0 14px; border-bottom:1px solid var(--border); }
.settings-members-heading h3 { margin:0; font-size:20px; line-height:1.25; }
.settings-members-heading p { max-width:620px; margin:7px 0 0; color:var(--text-dim); font-size:15px; line-height:1.55; }
.settings-members-heading-actions { display:flex; flex:none; align-items:center; gap:8px; }
.settings-members-list { margin-bottom:28px; }
.settings-member-row { display:flex; align-items:center; gap:12px; min-height:70px; border-bottom:1px solid var(--border); }
.settings-member-avatar { display:grid; flex:0 0 auto; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent); font-size:13px; font-weight:800; }
.settings-member-copy { display:flex; flex:1; min-width:0; flex-direction:column; gap:3px; }
.settings-member-copy strong { font-size:15px; }
.settings-member-copy span { overflow:hidden; color:var(--text-dim); font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.settings-member-role { flex:0 0 auto; color:var(--text-dim); font-size:12px; }
.settings-member-role.owner { color:var(--ok); }
.settings-member-role-picker { position:relative; flex:0 0 auto; min-width:145px; }
.settings-member-role-trigger, .settings-member-role-option { width:100%; color:var(--text); font:inherit; font-size:13px; text-align:left; cursor:pointer; }
.settings-member-role-trigger { position:relative; min-height:36px; padding:8px 34px 8px 11px; overflow:hidden; background:var(--surface); border:1px solid var(--accent-line); border-radius:8px; text-overflow:ellipsis; white-space:nowrap; }
.settings-member-role-trigger::after { content:""; position:absolute; top:50%; right:13px; width:8px; height:8px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-70%) rotate(45deg); transition:transform .16s ease; }
.settings-member-role-trigger:hover, .settings-member-role-trigger:focus, .settings-member-role-trigger[aria-expanded="true"] { border-color:var(--accent); background:var(--accent-soft); outline:0; }
.settings-member-role-trigger[aria-expanded="true"]::after { transform:translateY(-30%) rotate(225deg); }
.settings-member-role-trigger:disabled { opacity:.65; cursor:wait; }
.settings-member-role-options { position:absolute; z-index:14; top:calc(100% + 6px); right:0; left:0; overflow:hidden; padding:5px; background:var(--surface); border:1px solid var(--accent-line); border-radius:9px; box-shadow:0 14px 36px rgba(0,0,0,.34); }
.settings-member-role-option { padding:9px 10px; border:0; border-radius:6px; background:transparent; }
.settings-member-role-option:hover, .settings-member-role-option:focus, .settings-member-role-option.selected { color:var(--accent); background:var(--accent-soft); outline:0; }
.member-permissions-btn { flex:0 0 auto; display:inline-grid; place-items:center; width:34px; height:34px; padding:7px; color:var(--accent); background:transparent; border:1px solid var(--accent-line); border-radius:8px; }
.member-permissions-btn:hover { color:var(--accent); background:var(--accent-soft); border-color:var(--accent); }
.member-remove-btn { flex:0 0 auto; display:inline-grid; place-items:center; width:34px; height:34px; padding:7px; color:var(--warn); background:transparent; border:1px solid color-mix(in srgb, var(--warn) 54%, var(--border)); border-radius:8px; }
.member-remove-btn:hover { color:var(--warn); background:color-mix(in srgb, var(--warn) 10%, transparent); border-color:var(--warn); }
.member-transfer-owner-btn { flex:0 0 auto; display:inline-grid; place-items:center; width:34px; height:34px; padding:7px; color:var(--accent); background:transparent; border:1px solid var(--accent-line); border-radius:8px; }
.member-transfer-owner-btn:hover { color:var(--accent); background:var(--accent-soft); border-color:var(--accent); }
.settings-role-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:0 0 14px; }
.settings-role-heading h3 { margin:0; font-size:18px; }
.settings-role-heading p { margin:7px 0 0; color:var(--text-dim); font-size:15px; line-height:1.55; }
.settings-active-invites { margin:0 0 30px; padding-top:4px; }
.settings-active-invites-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:20px 0 12px; border-top:1px solid var(--border); }
.settings-active-invites-heading h4 { margin:0; font-size:17px; line-height:1.3; }
.settings-active-invites-heading p { margin:5px 0 0; color:var(--text-dim); font-size:13px; line-height:1.5; }
.settings-active-invites-list { border-top:1px solid var(--border); }
.settings-active-invite-row { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:13px 0; border-bottom:1px solid var(--border); }
.settings-active-invite-row > div:first-child { min-width:0; }
.settings-active-invite-row strong, .settings-active-invite-row span { display:block; }
.settings-active-invite-row strong { color:var(--accent); font-family:var(--font-mono), monospace; font-size:14px; letter-spacing:.08em; }
.settings-active-invite-row span { margin-top:5px; color:var(--text-dim); font-size:12px; line-height:1.45; }
.invite-result { padding:16px 20px; }
.invite-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.invite-action-btn { min-height:32px; padding:6px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); font:inherit; font-size:12px; cursor:pointer; }
.invite-action-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.invite-action-btn.danger { color:var(--warn); border-color:color-mix(in srgb, var(--warn) 48%, var(--border)); }
.invite-action-btn.danger:hover { color:var(--warn); border-color:var(--warn); background:color-mix(in srgb, var(--warn) 10%, transparent); }
.settings-member-permission-heading-actions { display:flex; flex:0 0 auto; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.member-zone-permission-row { padding:16px 0 0; border-top:1px solid var(--border); }
.member-zone-permission-row + .member-zone-permission-row { margin-top:16px; }
.member-zone-heading { display:flex; align-items:center; justify-content:space-between; padding-bottom:7px; }
.member-zone-heading > div { display:flex; min-width:0; flex-direction:column; gap:4px; }
.member-zone-heading strong { font-size:15px; }
.member-zone-heading span { color:var(--text-dim); font-size:13px; }
.member-zone-permission-toggle { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:48px; padding-left:12px; border-top:1px solid color-mix(in srgb, var(--border) 70%, transparent); font-size:14px; }
.settings-role-list { border-top:1px solid var(--border); }
.settings-role-row { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:76px; border-bottom:1px solid var(--border); }
.access-group { margin-top:var(--space-4); border:1px solid var(--border); border-radius:var(--radius-surface); background:color-mix(in srgb, var(--surface) 74%, transparent); overflow:hidden; }
.access-group > summary { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding:var(--space-4); cursor:pointer; list-style:none; }
.access-group > summary::-webkit-details-marker { display:none; }
.access-group > summary:hover { background:var(--accent-soft); }
.access-group > summary strong, .access-group > summary small { display:block; }
.access-group > summary strong { font-size:16px; }
.access-group > summary small { margin-top:3px; color:var(--text-dim); font-size:var(--type-support); }
.access-group-chevron { display:flex; color:var(--text-dim); transition:transform .16s ease; }
.access-group-chevron svg { width:18px; height:18px; }
.access-group[open] .access-group-chevron { transform:rotate(90deg); color:var(--accent); }
.access-group-body { padding:0 var(--space-4) var(--space-4); border-top:1px solid var(--border); }
.access-group-body .settings-members-heading { padding-top:var(--space-4); }
.access-group-body .settings-active-invites { margin:0; padding-top:0; }
.access-group-body .settings-active-invites-heading:first-child { border-top:0; }
.settings-role-row.has-draft { padding-left:16px; background:color-mix(in srgb, var(--accent-soft) 72%, transparent); box-shadow:inset 3px 0 0 var(--accent); animation:settings-draft-pulse 1.7s ease-in-out infinite; }
.settings-role-name { display:flex; flex-direction:column; gap:4px; }
.settings-role-name strong { font-size:16px; }
.settings-role-name span { color:var(--text-dim); font-size:13px; }
.settings-role-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.settings-role-actions .icon-btn { display:inline-grid; place-items:center; width:34px; height:34px; padding:7px; color:var(--accent); background:transparent; border:1px solid var(--accent-line); border-radius:8px; }
.settings-role-actions .icon-btn:hover { color:var(--accent); background:var(--accent-soft); border-color:var(--accent); }
.settings-role-actions .icon-btn.danger { color:var(--warn); background:transparent; border-color:color-mix(in srgb, var(--warn) 68%, var(--border)); }
.settings-role-actions .icon-btn.danger:hover { color:var(--warn); background:color-mix(in srgb, var(--warn) 10%, transparent); border-color:var(--warn); }
.roles-restore-all { flex:0 0 auto; color:var(--warn) !important; background:transparent !important; border-color:color-mix(in srgb, var(--warn) 68%, var(--border)) !important; }
.roles-restore-all:hover { background:color-mix(in srgb, var(--warn) 10%, transparent) !important; border-color:var(--warn) !important; }
.role-switch { position:relative; width:42px; height:24px; cursor:pointer; }
.role-switch input { position:absolute; opacity:0; pointer-events:none; }
.role-switch span { display:block; width:42px; height:24px; border-radius:999px; background:var(--surface); border:1px solid var(--border); transition:.18s ease; }
.role-switch span::after { content:""; position:absolute; width:18px; height:18px; top:2px; left:3px; border-radius:50%; background:var(--text-dim); transition:.18s ease; }
.role-switch input:checked + span { background:color-mix(in srgb, var(--accent) 75%, var(--surface)); border-color:var(--accent); }
.role-switch input:checked + span::after { transform:translateX(17px); background:#fff; }
.settings-role-save { padding-top:18px; }
.settings-role-save .settings-btn:disabled { opacity:.55; cursor:default; }
@keyframes settings-draft-pulse { 50% { background:color-mix(in srgb, var(--accent-soft) 100%, transparent); } }
.role-permission-category { margin:0; padding:16px 0 0; border-top:1px solid var(--border); }
.role-permission-category + .role-permission-category { margin-top:18px; border-top:0; }
.role-permission-category h4 { margin:0 0 4px; color:var(--text-dim); font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.role-permission-row { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:68px; border-bottom:1px solid var(--border); }
.role-permission-row.has-draft { padding-left:16px; background:color-mix(in srgb, var(--accent-soft) 72%, transparent); box-shadow:inset 3px 0 0 var(--accent); animation:settings-draft-pulse 1.7s ease-in-out infinite; }
.role-permission-row > div { display:flex; flex-direction:column; gap:4px; }
.role-permission-row strong { font-size:15px; }
.role-permission-row span { color:var(--text-dim); font-size:13px; }
.role-permission-panel .settings-actions .danger { color:var(--warn); background:transparent; border-color:color-mix(in srgb, var(--warn) 68%, var(--border)); }
@media (max-width:640px) { .settings-section { padding:18px 16px; } .settings-section-heading h3 { font-size:20px; } .settings-house-picker, .settings-role-row, .settings-members-heading { align-items:flex-start; flex-direction:column; } .settings-house-select { width:100%; margin-left:0; } .settings-role-actions, .settings-members-heading-actions { width:100%; justify-content:flex-start; flex-wrap:wrap; } .settings-member-permission-heading-actions { width:100%; justify-content:flex-start; } .settings-member-role, .settings-member-role-picker { align-self:flex-start; margin-left:44px; margin-top:-10px; padding-bottom:10px; } .member-permissions-btn { margin-left:auto; } .settings-active-invites-heading, .settings-active-invite-row { align-items:flex-start; flex-direction:column; } }
@media (max-width:430px) { .modal-actions.draft-choice-actions { flex-wrap:wrap; } .draft-choice-actions .draft-review { order:3; width:100%; } }

/* ---------- 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: var(--font-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; }

/* login alternativo por email (20 ago 2026, cuentas reales - frontend): #login-classic/
   #login-email/#login-2fa son los tres bloques que se turnan dentro de #login-overlay -
   cada uno repite el mismo flex-column+gap que antes tenía el overlay directamente, para
   que los inputs se vean exactamente igual estén en el bloque que estén. */
#login-classic, #login-email, #login-2fa {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.login-link-btn {
  background: none !important; border: none !important; color: var(--text-dim) !important;
  font-weight: 500 !important; font-size: 13px; padding: 4px !important; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.login-link-btn:hover { color: var(--accent) !important; }
#login-email-error, #login-2fa-error { color: var(--warn); font-size: 13px; min-height: 16px; }
#login-2fa-note { 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; } }
@media (max-width: 899px) { .conn-chip .conn-label { display: inline; } }
.conn-chip.live { color: var(--ok); }
.conn-chip.warn { color: var(--caution); }
.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; }
.conn-chip { cursor:pointer; }
.conn-chip:hover { background:var(--surface); border-color:var(--glass-border); }
.conn-panel { left:auto; right:0; min-width:280px; max-width:calc(100vw - 24px); box-sizing:border-box; padding:13px 14px; }
.conn-panel-title { font-size:13px; font-weight:700; margin-bottom:6px; }
.conn-panel-text { color:var(--text-dim); font-size:12px; line-height:1.45; }
.notif-all-btn { display:block; width:calc(100% - 16px); margin:8px; padding:8px; border:1px solid var(--glass-border); border-radius:8px; background:transparent; color:var(--accent); font:inherit; font-size:12px; font-weight:600; cursor:pointer; }
.notif-all-btn:hover { background:var(--accent-soft); }

/* --- menú de cuenta de la barra lateral --- */
.sidebar-user-wrap { position: relative; }
.sidebar-user-row { display:flex; align-items:center; border-top:1px solid var(--border); padding-top:8px; }
.sidebar-user {
  width: 100%; border: none; background: none; cursor: pointer;
  padding: 4px 8px;
  display: flex; align-items: center; gap: 10px; text-align: left;
  color: var(--text); font-family: inherit;
}
.sidebar-user:hover, .sidebar-user-wrap.open .sidebar-user { background:var(--surface); border-radius:8px; color:var(--text); }
.sidebar-user-text { min-width: 0; flex: 1; display:flex; align-items:baseline; gap:5px; }
.sidebar-user-name { font-size:12px; }
.sidebar-user-sub { font-size:11px; }
.sidebar-user-sub::before { content:"·"; margin-right:5px; }
.sidebar-user-chevron { color: var(--text-dim); display: flex; flex: none; transform:rotate(90deg); transition:transform .16s ease; }
.sidebar-user-wrap.open .sidebar-user-chevron { transform:rotate(-90deg); }
.sidebar-user-chevron svg { width: 16px; height: 16px; }
.sidebar-avatar { width:24px; height:24px; font-size:11px; }
.sidebar-update-btn { width:30px; height:30px; flex:none; border-radius:8px; }
.sidebar-update-btn:hover { background:var(--surface); }
.sidebar-update-btn.available { color:var(--accent); background:var(--accent-soft); }
.update-panel { top:auto; bottom:38px; right:0; left:auto; min-width:210px; padding:11px 12px; }
.update-panel-title { font-size:12px; font-weight:700; margin-bottom:4px; }
.update-panel-text { color:var(--text-dim); font-size:11px; line-height:1.4; }
@media (min-width:900px) { .account-avatar-btn { display:none; } }
.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); }
/* 3 sep 2026: antes usaba var(--accent) - un aviso "informativo" no debería cambiar de
   color según el acento personalizado de cada persona, así que pasa a --info (mismo
   vocabulario nuevo de la tarea 1, pensado también para futuros avisos tipo "actualización
   disponible"). El significado del kind "info" no cambia, solo deja de heredar el acento. */
.toast.info { border-left-color: var(--info); }
.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(--info); }
@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); }

/* --- ficha de dispositivo (3 sep 2026): estado/zona/origen + controles de un media_player
   (encendido, volumen, silencio) que ahora publica GET /api/devices en `controls`. --- */
.device-detail-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.device-detail-icon {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border-radius: 12px; color: var(--text-dim);
  background: var(--surface2); border: 1px solid var(--border);
}
.device-detail-icon.on { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
.device-detail-icon svg { width: 22px; height: 22px; }
.device-detail-state { font-size: 17px; font-weight: 700; text-transform: capitalize; }
.device-detail-meta { font-size: 13px; color: var(--text-dim); margin-top: 2px; }
.device-control-list { display: flex; flex-direction: column; gap: 4px; }
.device-control-row {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 10px;
}
.device-control-row.pending { opacity: 0.6; }
.device-control-row:has(.device-control-switch) { flex-direction: row; align-items: center; justify-content: space-between; }
.device-control-label { font-size: 14px; font-weight: 600; }
.device-control-label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.device-control-value {
  font-family: var(--font-mono), monospace; font-size: 13px; font-weight: 700; color: var(--text-dim);
}
.device-control-switch { margin-left: auto; }
.device-control-range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 4px;
  background: var(--surface2); outline: none; cursor: pointer;
}
.device-control-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); cursor: pointer; border: 2px solid var(--surface);
}
.device-control-range::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: var(--accent); cursor: pointer;
  border: 2px solid var(--surface);
}
.device-control-range:disabled { opacity: 0.6; cursor: progress; }

/* Ficha "a lo Apple Settings" agrupada por secciones (router Livebox, 3 sep 2026) - un grupo
   por sección con una etiqueta discreta encima y una tarjeta con divisores entre filas, en
   vez de la tarjeta-por-control de la lista plana de siempre (que sigue igual, sin tocar). */
.device-control-group { margin-bottom: 20px; }
.device-control-group:last-child { margin-bottom: 0; }
.device-control-group-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-dim); margin: 0 0 8px 4px;
}
.device-control-group-body {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden;
}
.device-control-group-body .device-control-row {
  margin-bottom: 0; border: none; border-radius: 0; background: none; border-top: 1px solid var(--border);
}
.device-control-group-body .device-control-row:first-child { border-top: none; }

/* Fila de solo lectura (readouts de conexión, velocidad, tiempo encendido) - misma etiqueta
   de la izquierda que el resto, valor a la derecha, sin ninguna interacción. */
.device-control-row.device-control-readout {
  flex-direction: row; align-items: center; justify-content: space-between; gap: 10px;
}
.device-control-readout .device-control-value { text-align: right; }

/* Botón de una sola pulsación con confirmación aparte (reiniciar el router) - se apoya en el
   mismo .settings-btn.danger que ya usan las acciones destructivas del resto de la app. */
.device-control-action-row { align-items: stretch; }
.device-control-button { display: flex; width: 100%; justify-content: center; margin: 0; }
.device-control-button:disabled { opacity: 0.6; cursor: progress; }

/* "Dispositivos conectados" del router Livebox (3 sep 2026, tercera vuelta) - misma tarjeta
   agrupada de siempre (.device-control-group*), pero puede traer 10-20 clientes reales: se
   limita el alto y se deja desplazar por dentro en vez de estirar el panel entero. */
.device-control-group-body.connected-devices-list { max-height: 320px; overflow-y: auto; }
.connected-device-row { flex-direction: row; align-items: center; gap: 12px; }
.connected-device-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--text-dim);
}
.connected-device-dot.online { background: var(--ok); }
.connected-device-text { flex: 1; min-width: 0; }
.connected-device-name {
  font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.connected-device-sub {
  font-size: 12px; color: var(--text-dim); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* el panel entero recibe el foco al abrir (para que Escape/Tab funcionen igual que en
   Ajustes) - sin anillo de foco visible, no es un control real, solo enruta el teclado. */
.overlay-panel:focus { outline: none; }

/* --- 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: var(--font-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: var(--font-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(--caution); }
.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: var(--font-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: var(--font-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);
}

/* ---------- 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.
   ========================================================================= */
.bythron-notes { position:relative; min-height:520px; }
#notes-library { display:none; position:absolute; z-index:20; top:0; left:0; width:244px; padding:14px; border:1px solid var(--glass-border); border-radius:18px; background:var(--glass-strong); box-shadow:0 18px 60px rgba(0,0,0,.28); }
#notes-library.open { display:block; }
.notes-workspace { min-width:0; }
.notes-library-brand, .notes-library-item { display:flex; align-items:center; gap:10px; }
.notes-library-brand { justify-content:space-between; font-weight:700; margin-bottom:14px; padding:0 4px; }
.notes-library-item { width:100%; border:0; background:transparent; color:var(--text-dim); padding:10px 8px; border-radius:10px; font:inherit; text-align:left; cursor:pointer; }
.notes-library-item:hover, .notes-library-item.active { background:var(--accent-soft); color:var(--text); }
.notes-library-item svg { width:17px; height:17px; color:var(--folder-c,var(--accent)); }
.notes-library-item span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.notes-library-item small { color:var(--text-dim); }
.notes-library-section { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim); margin:18px 8px 5px; }
.bythron-notes-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.bythron-notes-title h2 { margin:0; font-size:24px; }
.bythron-notes-title p { margin:3px 0 0; color:var(--text-dim); font-size:13px; }
.notes-title-actions { display:flex; align-items:center; gap:8px; }
.notes-library-toggle { display:inline-flex; align-items:center; gap:7px; }
.notes-create-btn { display:inline-flex; align-items:center; gap:7px; margin:0; min-height:40px; white-space:nowrap; }
.house-devices-empty { max-width:620px; text-align:left; }
.house-devices-empty strong { display:block; margin-bottom:6px; color:var(--text); }
.house-devices-empty .house-ha-setup { margin:14px 0 0; }
@media (max-width:899px) {
  .bythron-notes { display:block; min-height:0; }
  #notes-library.open { display:block; position:fixed; inset:12px; z-index:110; width:auto; overflow:auto; box-shadow:0 18px 60px rgba(0,0,0,.35); }
  .bythron-notes-title h2 { font-size:22px; }
}
@media (max-width:520px) { .notes-title-actions .ghost-btn span, .notes-title-actions .settings-btn span { display:none; } .notes-title-actions .settings-btn { padding:9px; } }

/* --- 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;
}

/* --- selector de marca "Buscar por proveedor" (4 sep 2026, rediseño estilo picker nativo de
   Home Assistant) --- lista alfabética con logos reales + carril A-Z con scrub. El carril es
   deliberadamente angosto (22px) y de tipografía diminuta: con el catálogo de hoy (una sola
   marca real) no debe leerse como el protagonista de la pantalla, solo como el mecanismo
   completo ya listo para cuando el catálogo crezca. */
/* El carril y la lista comparten EXACTAMENTE el mismo max-height (56vh, tope 460px) a
   propósito - si no, en una pantalla baja el carril (27 letras a tamaño natural) puede
   crecer más que la lista y las últimas letras (Z, #) quedan por debajo del área visible
   de la lista, inalcanzables. Con el carril a altura fija y cada letra en flex:1 (más
   abajo), 27 letras siempre se reparten dentro de esa misma altura, la lista tenga el
   contenido que tenga. */
.brandpicker { display: flex; align-items: stretch; gap: 2px; }
.brandpicker-list {
  flex: 1; min-width: 0; max-height: min(56vh, 460px); overflow-y: auto;
  border-top: 1px solid var(--border);
}
.brandpicker-section-head {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg-translucent-strong); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  padding: 7px 20px 4px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--accent);
}
.brandpicker-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px; cursor: pointer; border-bottom: 1px solid var(--border);
}
.brandpicker-row:hover { background: var(--glass-strong); }
.brandpicker-logo-wrap {
  flex: none; width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface2); border: 1px solid var(--border);
}
.brandpicker-logo { width: 100%; height: 100%; object-fit: contain; padding: 6px; box-sizing: border-box; }
.brandpicker-logo-fallback {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 14px;
}
.brandpicker-text { flex: 1; min-width: 0; }
.brandpicker-name { font-size: 14px; font-weight: 600; }
.brandpicker-meta { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.brandpicker-rail {
  flex: none; width: 20px; max-height: min(56vh, 460px); overflow: hidden;
  display: flex; flex-direction: column; padding: 4px 2px;
  touch-action: none; -webkit-user-select: none; user-select: none; cursor: pointer;
}
.brandpicker-rail-letter {
  flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; font-size: 9px; font-weight: 700;
  color: var(--text-dim); border-radius: 3px;
}
.brandpicker-rail-letter.is-empty { color: color-mix(in srgb, var(--text-dim) 42%, transparent); }
.brandpicker-rail.is-dragging .brandpicker-rail-letter { color: var(--text); }
.brandpicker-rail.is-dragging .brandpicker-rail-letter.is-empty {
  color: color-mix(in srgb, var(--text-dim) 55%, transparent);
}
.brandpicker-peek {
  position: fixed; z-index: 200; transform: translateY(-50%); pointer-events: none;
  min-width: 54px; padding: 10px 16px; border-radius: 16px; text-align: center;
  background: var(--bg-translucent-strong); border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-hero);
  -webkit-backdrop-filter: blur(20px) saturate(135%); backdrop-filter: blur(20px) saturate(135%);
  color: var(--accent); font-size: 28px; font-weight: 800;
}
.brandpicker-product-card + .brandpicker-product-card { border-top: 1px solid var(--border); }
@media (min-width: 520px) {
  .brandpicker-rail { width: 24px; }
  .brandpicker-rail-letter { font-size: 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: var(--font-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 --- */
.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)); }
.shared-note-card { border-left: 3px solid var(--accent-line); }
.shared-note-card .note-folder { color: var(--accent); }
.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: var(--font-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 {
  /* 25 ago 2026, QA de inventario sin HA: un valor largo como "pendiente de conectar" (un
     dispositivo manual sin adaptador) no encogía y se comía casi todo el ancho de la tarjeta,
     dejando el nombre del dispositivo reducido a una letra. Valores cortos (lecturas de
     sensor tipo "72°") nunca llegan a este límite, así que no cambian de aspecto. */
  flex: none; max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-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); }

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