/* Rancho's home — sistema de marca Rancho
 *
 * La app es oscura, siempre: de noche manda la brasa, como el panel de pared. Tuvo también un
 * tema claro --el papel frío de casa con tarjetas blancas y el acento terracota-- que seguía al
 * teléfono, pero no se usaba y se sacó el 22/09/2026. Lucas: "el tema claro ni se usa, yo lo
 * sacaría".
 *
 * La interfaz está dibujada, así que va PLANA: nada de degradados ni sombras
 * que finjan volumen. La trama aparece sólo en lo que viene de una foto.
 *
 * Los nombres de las variables no cambiaron: los usa el JS que dibuja los SVG.
 */

:root {
  /* Que el navegador dibuje oscuros también lo suyo: el reloj de los campos de hora, las
     listas desplegables y las barras de desplazamiento. */
  color-scheme: dark;

  --bg: #121212;
  --zone: #1c211f;
  --card: #202725;
  --border: #33403c;
  --card-border: #2b3633;

  --text: #f2f2f0;
  --muted: #8fa39b;
  --track: #33403c;

  --accent: #e8a33d;        /* la brasa */
  --brasa-brillo: #e8702a;  /* el naranja del halo de Rancho */
  --on-accent: #121212;
  --danger: #d9705f;

  /* Los tres colores del recorrido de Dora. El de barrer es el acento de la casa; trapear se
     va al agua y las dos cosas juntas al verde, que queda en el medio de los otros dos. */
  --via-barrer: #e8a33d;
  --via-trapear: #5fb3d9;
  --via-ambos: #5ec49b;

  --accent-tint: rgba(232, 163, 61, 0.14);
  --accent-tint-border: rgba(232, 163, 61, 0.40);
  --danger-tint: rgba(217, 112, 95, 0.14);
  --danger-tint-border: rgba(217, 112, 95, 0.40);

  /* el catálogo es de esquinas cortas, no de burbujas */
  --radius-card: 6px;
  --radius-zone: 8px;
  --radius-btn: 5px;

  --fuente-nombre: Anton, "Futura Condensed ExtraBold", Impact, sans-serif;
  --fuente-tecnica: Oswald, "DIN Condensed", "Helvetica Neue", sans-serif;
  /* Si Yellowtail no llega (sin red, o tarda), el "cursive" de Windows es la Comic Sans: Lucas la
     vio en "la casa, de un toque" (23/09/2026). Antes van las letras a mano que traen Windows. */
  --fuente-mano: Yellowtail, "SignPainter", "Segoe Script", "Brush Script MT", cursive;
  --fuente-ui: -apple-system, system-ui, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fuente-ui);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.wrap {
  max-width: 1100px; margin: 0 auto;
  /* Abajo, el lugar del botón de Rancho (58 y 16 de margen) más 16 de aire: al llegar al fondo no tapa
     nada, ni la banda (Ux/Ui). */
  padding: calc(16px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(90px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
}

/* ── la cabecera es la cabecera de una ficha ─────────────────────────── */
header { margin-bottom: 16px; }
.ficha-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pildora {
  display: inline-block; background: var(--text); color: var(--bg);
  font-family: var(--fuente-tecnica); font-weight: 600; font-size: 12px;
  letter-spacing: 0.15em; padding: 4px 10px 3px 10px; border-radius: var(--radius-btn);
}
.cab-mundo { font-family: var(--fuente-tecnica); font-weight: 500; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.status { font-family: var(--fuente-tecnica); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 6px; margin-left: auto; }
.dot { width: 8px; height: 8px; border-radius: 2px; background: var(--accent); display: inline-block; }
.dot.off { background: var(--danger); }

/* El aviso dice el motivo real de una falla, en palabras. Va debajo de la
 * cabecera porque el chip de estado es de un vistazo y no le entra una frase.
 * Plano, como todo lo demas: borde de sello, sin sombra. */
.aviso { background: var(--card); border: 1px solid var(--danger); border-left-width: 3px;
  border-radius: var(--radius-card); color: var(--text); font-size: 14px; line-height: 1.45;
  padding: 10px 13px; margin: 0 0 12px; }
.aviso[hidden] { display: none; }

/* ── cuando una orden no salió (falla.js) ─────────────────────────────── */
/* Lo que tocaste: 2 px de contorno en el rojo de la noche, 6 s. Contorno y nunca relleno: relleno es
   lo que está actuando ahora, y una orden que falló ya pasó. Se apaga en 300 ms. */
.falla-toque { outline: 2px solid var(--danger); outline-offset: 1px; transition: outline-color .3s ease; }
.falla-toque.sale { outline-color: transparent; }
/* La franja: abajo, en el lugar del botón de Rancho, plana. Tapa lo de abajo un rato y no empuja
   nada: lo que estabas mirando no se corre. Qué no salió en 14, y por qué en 12,5, un renglón cada
   uno. */
.franja-falla {
  position: fixed; z-index: 45;
  left: calc(16px + env(safe-area-inset-left)); right: calc(16px + env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  max-width: 560px; margin: 0 auto;
  display: flex; align-items: center; gap: 4px;
  background: var(--card); border: 1px solid var(--danger); border-left-width: 3px; border-radius: var(--radius-card);
  padding: 6px 0 6px 13px;
  opacity: 0; translate: 0 16px; transition: opacity .2s ease-out, translate .2s ease-out;
}
.franja-falla.entra { opacity: 1; translate: 0 0; }
.franja-falla[hidden] { display: none; }
.ff-texto { flex: 1; min-width: 0; }
.ff-que, .ff-porque { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ff-que { font-family: var(--fuente-ui); font-size: 14px; line-height: 1.35; color: var(--text); }
.ff-porque { font-family: var(--fuente-ui); font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.ff-cerrar { flex: none; width: 44px; height: 44px; padding: 0; background: none; border: none; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center; }
/* La orden que espera a la casa (falla.js; Ux/Ui, 2026-09-24-orden-en-espera.md): lo pedido lleva el contorno
   de brasa, sin relleno, mientras espera; si no sale, pasa al rojo 6 s como una falla. En el interruptor el
   anillo va en la pista, no en el botón de 44. La franja, con el sello en brasa y CANCELAR en vez de la cruz,
   de la misma forma que la cruz: sin fondo ni borde, gris, del ancho de la palabra. */
.guardada-toque { outline: 2px solid var(--accent); outline-offset: 1px; }
.guardada-toque.falla-toque { outline-color: var(--danger); }
.tg.guardada-toque { outline: none; }
.tg.guardada-toque::before { outline: 2px solid var(--accent); outline-offset: 1px; }
.franja-falla.guardada { border-color: var(--border); border-left-color: var(--accent); }
.ff-cancelar { flex: none; height: 44px; padding: 0 12px; background: none; border: none; color: var(--muted); cursor: pointer;
  font-family: var(--fuente-tecnica); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; }
.ff-cerrar[hidden], .ff-cancelar[hidden] { display: none; }
/* Lo pedido que la pestaña marca por su cuenta (acs.js, tvs.js): el mismo anillo. El interruptor lleva la
   perilla del lado pedido y la pista como está de verdad (Ux/Ui, con Design system). */
.chip.guardada-anillo { outline: 2px solid var(--accent); outline-offset: 1px; }
.tg.guardada-anillo::before { outline: 2px solid var(--accent); outline-offset: 1px; }
.tg.pedido-on .knob { left: 22px; }
.tg.on.pedido-off .knob { left: 4px; }
/* Los puntitos de un botón de una vez mientras insiste, abajo y al centro: no mueven nada del botón (en el
   renglón, el «▼ CERRAR» de una cortina se partía en dos). */
button.guardada-toque { position: relative; }
/* Con el botón adelante, para ganarle a .rancho-puntos de asistente.css, que carga después. */
.guardada-toque .guardada-puntos { position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%); display: inline-flex; padding: 0; gap: 3px; }
.guardada-toque .guardada-puntos span { width: 4px; height: 4px; background: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .franja-falla { translate: none; transition: opacity .2s ease-out; }
}
.cab-regla { border-bottom: 2px solid var(--text); margin: 9px 0 11px; }
/* La marca grande, título de Inicio: debajo de las pestañas, que así no se mueven al cambiar (Ux/Ui). */
.marca-inicio { margin-bottom: 16px; }
.marca-titulo { font-family: var(--fuente-nombre); font-size: 40px; font-weight: 400; line-height: 0.94; margin: 0; letter-spacing: 0.005em; }
.cab-sub { font-family: var(--fuente-mano); font-size: 23px; line-height: 1; color: var(--accent); margin-top: 1px; }

/* ── controles ───────────────────────────────────────────────────────── */
button {
  font: inherit; color: var(--text); cursor: pointer;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-btn); padding: 9px 13px;
  -webkit-tap-highlight-color: transparent; transition: transform .05s ease;
}
button:active { transform: scale(0.97); }
.btn-accent { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* Los mandos hablan todos en la misma voz técnica.
 * Los dos de arriba se reparten el ancho entero, como los de adentro de cada ambiente. Sin el
 * flex quedaban pegados a la izquierda, de anchos distintos entre sí, y con 79px de aire al
 * costado en un teléfono. */
.topbar { display: flex; gap: 8px; margin-bottom: 14px; }
.topbar button { flex: 1; min-height: 44px; font-family: var(--fuente-tecnica); font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; padding: 10px 14px; }

/* ── pestañas ────────────────────────────────────────────────────────── */
.tabnav { display: flex; gap: 8px; margin-bottom: 16px; }
.tabs { display: flex; gap: 4px; background: var(--zone); border: 1px solid var(--border); border-radius: var(--radius-zone); padding: 3px; flex: 1; }
.tabs-auto { flex: none; }
.tab {
  flex: 1; text-align: center; padding: 8px 10px; border: none; background: transparent;
  color: var(--muted); cursor: pointer; border-radius: var(--radius-btn);
  font-family: var(--fuente-tecnica); font-weight: 500; font-size: 12.5px;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.tab.active { background: var(--text); color: var(--bg); }
/* El dibujo mide 33 de alto; la zona de toque, 45: 6 px de más arriba y abajo, sin cambiar lo que se ve
   (Ux/Ui, aprobado por Design system). */
.tab { position: relative; }
.tab::before { content: ''; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }

/* ── el índice: cada aparato es un renglón del catálogo ──────────────── */
.zcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: start; }

.zone { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-zone); overflow: hidden; }
.zone-top { display: flex; align-items: center; gap: 8px; padding: 11px 14px 9px; }
.zone-marca { width: 11px; height: 11px; border-radius: 2px; background: var(--accent); flex: none; }
.zone-name { font-family: var(--fuente-nombre); font-size: 19px; line-height: 1; }
.zone-pct { font-family: var(--fuente-tecnica); font-size: 13px; letter-spacing: 0.08em; color: var(--muted); margin-left: auto; }
/* 44 de alto para el dedo sin agrandar la tarjeta: los márgenes negativos le devuelven los 26 que
   ocupaba (16 del deslizador y 10 de aire). Lo de más cae en el aire de arriba y de abajo, donde no
   hay nada que tocar. */
.zone input[type="range"] { width: calc(100% - 28px); margin: -9px 14px -9px; }
.zone-btns { display: flex; gap: 6px; padding: 0 14px 12px; }
.zone-btns button { flex: 1; min-height: 44px; font-family: var(--fuente-tecnica); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; padding: 7px; }

/* el renglón */
.card {
  border-top: 1px solid var(--card-border); padding: 11px 14px;
  display: flex; flex-direction: column; gap: 9px;
}
.card.offline { opacity: 0.45; }
.crow { display: flex; align-items: baseline; gap: 10px; }
.cnro { font-family: var(--fuente-tecnica); font-size: 11.5px; letter-spacing: 0.08em; color: var(--muted); flex: none; width: 26px; }
.cname { font-family: var(--fuente-nombre); font-size: 17px; line-height: 1.05; }
.cpos { margin-left: auto; text-align: right; white-space: nowrap; }
.cpos .pct { font-family: var(--fuente-tecnica); font-weight: 500; font-size: 17px; letter-spacing: 0.04em; }
.cpos .word { font-family: var(--fuente-tecnica); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
/* 44 de alto para el dedo, con la pista dibujada fina como siempre: el navegador la centra. */
input[type="range"] { width: 100%; height: 44px; accent-color: var(--accent); }
.cbtns { display: flex; gap: 6px; }
.cbtns button { flex: 1; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-family: var(--fuente-tecnica); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; padding: 8px; }

/* El aviso de la cortina que perdió la cuenta con un corte de luz. No es una alarma: es una
   nota al pie con un botón, del mismo tamaño que los otros botones de la tarjeta. */
.cancla { display: flex; align-items: center; gap: 8px; }
.cancla span { font-family: var(--fuente-tecnica); font-size: 11px; letter-spacing: 0.04em; color: var(--muted); }
.cancla button { margin-left: auto; flex: none; min-height: 44px; font-family: var(--fuente-tecnica); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 12px; }

/* El mapa que dibuja la aspiradora. Fondo del mismo color que la tarjeta porque el esquema
   Grayscale lo deja transparente donde no hay casa, así que el hueco lo pone la app. */
.vmapa { position: relative; margin-top: 12px; border: 1px solid var(--card-border); border-radius: var(--radius-card); background: var(--zone); overflow: hidden; }
/* Sin esto, mantener apretado sobre una imagen abre el "guardar imagen" del telefono y el
   gesto de dibujar la zona se pierde la mitad de las veces. */
.vmapa img { display: block; width: 100%; height: 100%; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }

/* El nombre de cada pieza, puesto donde queda la pieza. Ya no se toca: se elige en la fila de
   botones de abajo (.vpiezas-fila), y acá se muestra lo mismo. Fondo semiopaco para que se lea
   sobre cualquier parte del mapa. */
.vpiezas { position: absolute; inset: 0; pointer-events: none; }
/* Todo lo que va encima del mapa se agranda con el --vesc que pone el JS, que sale del ancho
   que tiene el mapa en pantalla. Antes estaba en pixeles fijos: el mapa se estiraba en una
   pantalla grande y las pastillas quedaban de juguete. */
.vpieza { position: absolute; transform: translate(-50%, -50%); pointer-events: none;
  font-size: calc(11px * var(--vesc, 1)); line-height: 1; white-space: nowrap;
  padding: calc(5px * var(--vesc, 1)) calc(7px * var(--vesc, 1));
  border-radius: calc(4px * var(--vesc, 1));
  background: color-mix(in srgb, var(--card) 88%, transparent); color: var(--text);
  border: 1px solid var(--card-border); font-family: inherit;
  user-select: none; -webkit-user-select: none; }
/* La misma gramática que los botones de la fila (Design system): elegida en contorno de acento,
   porque es lo que va a pasar; la que está limpiando, rellena, porque es lo que está pasando. */
.vpieza.on { border-color: var(--accent); color: var(--accent); }
.vpieza.limpiando { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* Las piezas para elegir, en botones de 44 debajo del mapa (aspiradora.js, renderPiezas). Cada una
   toma su ancho y el espacio de más se reparte igual, como repartir() en el panel. */
.vpiezas-fila { display: flex; gap: 6px; margin-top: 12px; }
.vpiezas-fila.dos-filas { display: grid; }
.vpbtn { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 8px; background: transparent; color: var(--muted);
  border: 1px solid var(--border); border-radius: var(--radius-btn); white-space: nowrap;
  font-family: var(--fuente-tecnica); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.vpbtn.elegida { border-color: var(--accent); color: var(--accent); }
.vpbtn.limpiando { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
/* Los patios se dibujan igual pero apagados: están en el mapa, pero la aspiradora no sale afuera
   y no están en la fila para elegir. */
.vpieza.afuera { opacity: .45; font-style: italic; }

/* La base. Es una referencia, no un control: sin ella, Dora parada arriba de la nada no se
   entiende. */
.vbase { position: absolute; width: calc(9px * var(--vesc, 1)); height: calc(9px * var(--vesc, 1));
  transform: translate(-50%, -50%); border: calc(2px * var(--vesc, 1)) solid var(--muted);
  border-radius: calc(2px * var(--vesc, 1)); background: var(--card); pointer-events: none; }

/* El renglon que ensenia a usar el mapa. Va en minuscula y a 12,5px a proposito: es el unico
   texto que sirve para aprender, y la tipografia tecnica en mayusculas no se lee. */
.vayuda { font-size: 12.5px; line-height: 1.35; color: var(--muted); margin-top: 12px; }
/* Dora. La dibuja la app y no el mapa, porque el mapa se rehace cada 5 segundos y así daba
   saltos; acá se interpola entre dato y dato. Es un círculo pelado: la flechita que marcaba
   para dónde miraba ensuciaba más de lo que informaba. */
.vdora { position: absolute; width: calc(13px * var(--vesc, 1)); height: calc(13px * var(--vesc, 1));
  margin: 0; border-radius: 50%; transform: translate(-50%, -50%);
  background: var(--accent); border: calc(2px * var(--vesc, 1)) solid var(--bg);
  box-shadow: 0 0 0 1px var(--accent); transition: none; }

/* El camino recorrido. Lo dibuja la app y no el mapa: la imagen del mapa es de AHORA y el
   monigote va unos segundos atrás a propósito, así que la línea de la imagen aparecía antes de
   que Dora pasara por ahí. Dibujándola nosotros, crece justo abajo del círculo.
   non-scaling-stroke: el SVG está en píxeles del mapa (1580 de ancho) pero se ve a 343, y sin
   eso la línea quedaría finita como un pelo. */
.vrastro { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.vrastro path { fill: none; stroke-width: calc(2px * var(--vesc, 1)); stroke-linejoin: round;
  stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-opacity: 0.85; }
/* Un color por cada cosa que estaba haciendo. Los traslados --salir de la base, volver a
   lavar la mopa-- NO se dibujan: Lucas, "si ya termino la limpieza no te importa como llego,
   que te marque lo que limpiaba nomas". El camino queda cortado donde no limpio, que es la
   verdad, en vez de unido por una recta que nadie recorrio. */
.vrastro .barrer  { stroke: var(--via-barrer); }
.vrastro .trapear { stroke: var(--via-trapear); }
.vrastro .ambos   { stroke: var(--via-ambos); }
/* Una limpieza terminada queda de recuerdo, apagada; la que está pasando, encendida. */
.vrastro.terminada path { stroke-opacity: 0.38; }
.vmapa.dibujando { cursor: crosshair; touch-action: none; }
.vmapa.dibujando::after { content: 'arrastrá para marcar la zona'; position: absolute; left: 8px; top: 8px; font-family: var(--fuente-tecnica); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); background: rgba(0,0,0,.55); padding: 3px 7px; border-radius: var(--radius-btn); }
.vmapa-sel { position: absolute; border: 2px solid var(--accent); background: rgba(232,161,58,.18); pointer-events: none; }

/* ── rótulos y vacíos ────────────────────────────────────────────────── */
.section-h, .lbl { font-family: var(--fuente-tecnica); font-weight: 500; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 4px 0 8px; }
.lbl { margin: 10px 0 6px; }
.empty { font-family: var(--fuente-mano); font-size: 21px; color: var(--muted); }

/* ── automatizaciones ────────────────────────────────────────────────── */
.auto-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
/* Una opción larga en un select (el nombre de una cortina) ensanchaba la columna y la regla se pasaba 12 px
   del margen en Cortinas (Ux/Ui): la columna no crece más que la pantalla. */
.auto-cols > * { min-width: 0; }
.field select { max-width: 100%; }
.rule { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-card); padding: 12px 14px; margin-bottom: 8px; }
.rtime { font-family: var(--fuente-tecnica); font-weight: 500; font-size: 19px; letter-spacing: 0.04em; min-width: 54px; }
.rinfo { flex: 1; min-width: 0; }
.rwhat { font-size: 14.5px; font-weight: 500; }
.rwhen { font-family: var(--fuente-tecnica); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
/* La regla que hoy no salió: un renglón de 12 abajo, con la hora en el rojo de la noche y lo demás
   apagado (automations.js, reglaInfo). */
/* Lo que hace una rutina de Rancho (automations.js): la letra del renglón de estado, hasta tres renglones. */
.rhace { font-size: 12px; line-height: 1.35; color: var(--muted); margin-top: 3px; }
/* «LAS DE RANCHO» es su propia sección: las reglas empiezan un poco más abajo. */
[id^="rutina-"] + .section-h { margin-top: 16px; }
.rnosalio { font-size: 12px; line-height: 1.35; color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rnosalio-hora { color: var(--danger); font-variant-numeric: tabular-nums; }
/* El interruptor se dibuja de 44 x 26, pero el botón mide 44 x 44, el mínimo de toque de la app:
   la pista es un ::before centrado y el botón en sí no se ve. */
.tg { width: 44px; height: 44px; border: none; background: none; position: relative; cursor: pointer; padding: 0; flex: none; }
.tg::before { content: ''; position: absolute; left: 0; right: 0; top: 9px; height: 26px; border-radius: 4px; border: 1px solid var(--border); background: var(--track); }
.tg .knob { position: absolute; top: 13px; left: 4px; width: 18px; height: 18px; border-radius: 2px; background: var(--card); transition: left .12s ease; }
.tg.on::before { background: var(--accent); border-color: var(--accent); }
.tg.on .knob { left: 22px; background: var(--on-accent); }
/* El tachito: ancho fijo para que al armarse ("¿Borrar?") no se corra el renglón, y alto de
   dedo. Armado, en el rojo de la noche. */
.rdel { flex: none; width: 62px; height: 44px; margin: -8px -6px -8px 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid transparent; border-radius: var(--radius-btn); color: var(--muted); cursor: pointer;
  font-family: var(--fuente-tecnica); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.rdel.armado { color: var(--danger); background: var(--danger-tint); border-color: var(--danger-tint-border); }

.addcard { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-zone); padding: 16px; }
.field { margin-bottom: 13px; }
.field label { display: block; font-family: var(--fuente-tecnica); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.frow { display: flex; gap: 10px; }
.frow .field { flex: 1; }
.field input, .field select { width: 100%; min-height: 44px; padding: 9px 10px; border-radius: var(--radius-btn); border: 1px solid var(--border); background: var(--bg); color: var(--text); font: inherit; }
/* Un solo campo en toda la app (Ux/Ui, de la pasada de Calidad): en el iPhone, el desplegable salía con el gris y
   el alto del sistema al lado de la hora. Sin el aspecto del sistema, con la flecha en --muted. */
.field select {
  -webkit-appearance: none; appearance: none; padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238fa39b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
/* Los grados sin las flechitas de WebKit: se escriben. */
.field input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.field input[type="number"]::-webkit-inner-spin-button, .field input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* Los días: el botón es la zona de toque y el span, el dibujo (Ux/Ui pidió 44, de la pasada de Calidad). A 375, la
   fila mide 309 adentro de la tarjeta: cada botón toca 44,1 y el día se ve de 42,1 con 2 de aire entre uno y otro,
   como antes. No va con un ::before: WebKit no deja tocar lo que sobresale a la derecha de un botón. */
.days { display: flex; }
.day { flex: 1 1 0; min-width: 0; max-width: 46px; height: 44px; padding: 0 1px; border: 0; background: transparent; cursor: pointer;
  color: var(--text); font-family: var(--fuente-tecnica); font-size: 12px; }
.day > span { display: flex; align-items: center; justify-content: center; height: 100%; border-radius: 4px; border: 1px solid var(--border); }
.day.sel > span { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.primary { width: 100%; min-height: 44px; background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent); border-radius: var(--radius-btn); padding: 11px; font-family: var(--fuente-tecnica); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }
.primary:disabled { opacity: 0.45; cursor: default; }

.seg { display: flex; gap: 4px; background: var(--zone); border: 1px solid var(--border); border-radius: var(--radius-zone); padding: 3px; margin-bottom: 14px; }
.seg button { flex: 1; min-height: 44px; text-align: center; padding: 8px; border-radius: var(--radius-btn); border: none; background: transparent; color: var(--muted); cursor: pointer; font-family: var(--fuente-tecnica); font-weight: 500; font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; }
.seg button.active { background: var(--text); color: var(--bg); }

/* ── inicio: la casa de un vistazo ──────────────────────────────────── */
/* El clima arriba, las cuatro cosas de la casa en una grilla y lo programado abajo. En el
   teléfono la grilla va de a dos; en una pantalla ancha, las cuatro en fila. La marquita de
   cada cosa se pinta del color de la casa cuando algo quedó abierto o prendido: se ve de
   lejos qué hay que mirar. */
.hoy { display: grid; gap: 12px; }
/* El clima de Inicio mide 124, como la tarjeta del panel (inicio.js): todos los renglones de una
   línea y de alto fijo, así un cielo largo se corta con puntos en vez de estirarla. */
.hoy-clima { padding: 12px 16px 13px; }
.hoy-fecha { font-family: var(--fuente-tecnica); font-size: 12px; line-height: 16px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.hoy-clima-fila { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.hoy-temp { font-family: var(--fuente-nombre); font-size: 54px; line-height: 0.9; flex: none; }
.hoy-clima-txt { flex: 1; min-width: 0; }
.hoy-sensacion { font-family: var(--fuente-nombre); font-size: 19px; line-height: 20px; }
.hoy-sub { font-family: var(--fuente-tecnica); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.hoy-clima-txt .hoy-sub { margin-top: 2px; line-height: 16px; min-height: 16px; }
.hoy-clima-txt .hoy-sub + .hoy-sub { margin-top: 0; }
.hoy-fecha, .hoy-sensacion, .hoy-clima-txt .hoy-sub, .hoy-lluvia { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hoy-lluvia { font-size: 13px; line-height: 18px; margin-top: 5px; color: var(--accent); }
.hoy-lluvia.no { color: var(--muted); }
.hoy-ico { font-size: 40px; line-height: 1; flex: none; }

/* Una cortina que no contesta hace 10 minutos (el vigía, src/vigia.js): la misma franja plana del
   aviso de falla, pero quieta en su lugar, entre el clima y la grilla, hasta que vuelva. */
.hoy-aviso-casa { background: var(--card); border: 1px solid var(--danger); border-left-width: 3px; border-radius: var(--radius-card);
  padding: 9px 13px; }
.hoy-aviso-que { font-size: 14px; line-height: 1.35; color: var(--text); text-wrap: balance; }
/* Lo que espera a la casa y el mantenimiento: no es una falla, va con el sello en brasa (src/guardadas.js). */
.hoy-aviso-casa.espera { border-color: var(--border); border-left-color: var(--accent); }
.hoy-aviso-renglon { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1.4; color: var(--muted); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hoy-aviso-renglon .rancho-puntos { padding: 0; gap: 3px; flex: none; }
.hoy-aviso-renglon .rancho-puntos span { width: 4px; height: 4px; background: var(--muted); }
.hoy-aviso-porque { font-size: 12.5px; line-height: 1.35; color: var(--muted); }
/* El del giro al revés lleva el botón que lo corrige a la derecha, como «Reacomodar» en la tarjeta. */
.hoy-aviso-fila { display: flex; align-items: center; gap: 10px; }
.hoy-aviso-txt { flex: 1; min-width: 0; }
/* Y si además hay una que no contesta, va abajo en un renglón, en el mismo bloque (Ux/Ui). */
.hoy-aviso-ademas { font-size: 12.5px; line-height: 1.35; color: var(--muted); border-top: 1px solid var(--card-border);
  margin-top: 8px; padding-top: 7px; }
.hoy-aviso-boton { flex: none; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--fuente-tecnica);
  font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 12px; }
.hoy-aviso-boton:disabled { cursor: default; transform: none; }
.hoy-grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 900px) { .hoy-grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hoy-cosa { display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-height: 104px; padding: 12px 14px 13px;
  text-align: left; color: var(--text); font: inherit; cursor: pointer; }
.hoy-cosa:hover { border-color: var(--accent); }
.hoy-cosa-top { display: flex; align-items: center; gap: 7px; }
.hoy-cosa .lbl { margin: 0; }
.hoy-cosa .zone-marca { background: var(--track); }
.hoy-cosa.activa .zone-marca { background: var(--accent); }
.hoy-cosa.alerta .zone-marca { background: var(--danger); }
.hoy-valor { font-family: var(--fuente-nombre); font-size: 22px; line-height: 1.05; margin-top: 5px; }
.hoy-detalle { font-size: 12.5px; line-height: 1.35; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hoy-cosa.alerta .hoy-detalle { color: var(--danger); }
/* Cada cosa del detalle, entera: el renglón se corta en los puntos y las comas (inicio.js). */
.hoy-entera { white-space: nowrap; }

/* Lo programado: una fila por cosa, la hora en números parejos. Lo que ya pasó queda apagado y
   lo que viene primero lleva el color de la casa. */
.hoy-agenda { padding-bottom: 6px; }
.hoy-fila { display: flex; align-items: baseline; gap: 12px; padding: 8px 14px; border-top: 1px solid var(--card-border); }
.hoy-hora { flex: none; width: 44px; font-family: var(--fuente-tecnica); font-weight: 500; font-size: 15px; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.hoy-que { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.35; }
.hoy-fila.paso { color: var(--muted); }
.hoy-fila.proxima .hoy-hora { color: var(--accent); }
.hoy-prox { flex: none; font-family: var(--fuente-tecnica); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
/* Cómo salió lo que ya pasó, según la bitácora (el aviso de falla de Design system). NO SALIÓ: la hora
   y la marca en el rojo de la noche, y el porqué en --muted: dos cosas en rojo, no tres, porque dos
   renglones rojos gritan. INSISTIENDO: la hora en --text y la marca apagada, con los tres puntitos.
   A LA SEGUNDA: como lo que ya pasó, con su marca apagada. */
.hoy-marca { flex: none; display: inline-flex; align-items: center; gap: 5px; font-family: var(--fuente-tecnica); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.hoy-marca-fallo, .hoy-fila.fallo .hoy-hora { color: var(--danger); }
.hoy-marca .rancho-puntos { padding: 0; gap: 3px; }
.hoy-marca .rancho-puntos span { width: 4px; height: 4px; background: var(--muted); }
.hoy-porque { display: block; font-size: 12px; line-height: 1.35; color: var(--muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hoy-vacio { padding: 4px 14px 10px; font-size: 13px; color: var(--muted); }

/* ── clima y sol ─────────────────────────────────────────────────────── */
.wcard, .solcard { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-card); padding: 13px 16px; margin-bottom: 12px; }
.wbig-emoji { font-size: 28px; }
.wtemp { font-family: var(--fuente-tecnica); font-weight: 500; font-size: 32px; line-height: 1; letter-spacing: 0.02em; }
.wloc, .wcond, .sol-sub, .sol-hora { font-family: var(--fuente-tecnica); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

/* El sol de Cortinas, en 124 como las otras tarjetas que informan (sol.js): el arco a la izquierda,
   de 51 como en el panel, y la columna del estado a la derecha, de ancho fijo para que el arco no
   se mueva cuando cambia el texto. 1 + 21 + 80 + 21 + 1. */
.solcard { display: flex; align-items: center; gap: 14px; padding: 21px 16px; }
.sol-arc-svg { flex: 1; min-width: 0; height: 51px; display: block; }
/* 140: el dibujo (27) y el estado más largo, «Sol con nubes» (107), con 6 entre los dos. */
.sol-estado { flex: none; width: 140px; }
.sol-now { display: flex; align-items: center; gap: 6px; height: 24px; }
.sol-emoji { font-size: 20px; line-height: 1; }
.sol-state { font-family: var(--fuente-nombre); font-size: 19px; line-height: 1; white-space: nowrap; }
.sol-estado .sol-sub { margin-top: 4px; }
.sol-estado .sol-sub, .sol-hora { line-height: 16px; white-space: nowrap; }
.sol-hora + .sol-hora, .sol-sub + .sol-hora { margin-top: 2px; }
/* A 11 px el amanecer y el atardecer eran dos cuadraditos de color. */
.sol-hora { display: flex; align-items: center; gap: 6px; }
.sol-hora-ico { font-size: 14px; line-height: 1; }

/* El clima de Aires mide 124, la tarjeta de información del panel de la pared (regla del tercio,
   docs/planes/2026-09-23-regla-del-tercio.md): 1 + 8 + 36 + 3 + 40 + 3 + 24 + 8 + 1. Tres
   renglones de alto fijo, así un cielo con nombre largo no la estira. */
.wcard { display: flex; flex-direction: column; align-items: stretch; gap: 3px; padding: 8px 16px; }
.wnow { display: flex; align-items: center; gap: 8px; height: 36px; }
.wnow .wbig-emoji { line-height: 1; }
.wnow .wcond { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wcard .chart { height: 40px; }
.wcard .chart-yax { height: 40px; }
.wcard .chart-main > svg { height: 40px; }
.wfc { display: flex; align-items: center; justify-content: space-between; height: 24px; }
.wday { display: flex; align-items: center; gap: 4px; font-family: var(--fuente-tecnica); font-size: 11px; letter-spacing: 0.06em; color: var(--muted); }
.wday .wemoji { font-size: 16px; line-height: 1; }
.wday b { color: var(--text); font-weight: 500; }

.chart { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.chart-yax { display: flex; flex-direction: column; justify-content: space-between; height: 96px; font-family: var(--fuente-tecnica); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); text-align: right; white-space: nowrap; }
.chart-main { flex: 1; min-width: 0; }
.chart-main > svg { width: 100%; height: 96px; display: block; }
.chart-xax { display: flex; justify-content: space-between; font-family: var(--fuente-tecnica); font-size: 10px; letter-spacing: 0.06em; color: var(--muted); margin-top: 4px; }

/* ── aires ───────────────────────────────────────────────────────────── */
/* Las combinaciones, entre el clima y los aires: un toque deja el aire entero como se pide
   (acs.js). 48 de alto y 8 de separación. En contorno cuando ya está así, porque tocarla no
   hace nada: el relleno de acento dice "apretame" (Design system). */
.combinaciones { display: flex; gap: 8px; margin-bottom: 8px; }
.combinaciones[hidden] { display: none; }
.combinacion { flex: 1; min-width: 0; height: 48px; display: flex; align-items: center; gap: 9px; padding: 0 14px;
  background: transparent; color: var(--text); text-align: left;
  font-family: var(--fuente-tecnica); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }
.combinacion svg { width: 18px; height: 18px; flex: none; }
.comb-nombre { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comb-que { flex: none; margin-left: auto; font-size: 11px; letter-spacing: 0.1em; color: var(--muted); }
.combinacion .rancho-puntos { padding: 0; }
.combinacion.activa { border-color: var(--accent); color: var(--accent); cursor: default; }
.combinacion.activa .comb-que { color: var(--accent); }
.combinacion.activa:active { transform: none; }

.accard { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-card); padding: 13px 15px; margin-bottom: 9px; }
.accard:last-child { margin-bottom: 0; }
/* Apagado: el acento es para lo que está vivo. Un chip elegido pero sin
   corriente vuelve a ser un contorno, no un terracota lavado. Pero contorno
   no quiere decir invisible: antes quedaba idéntico a los no elegidos --mismo
   fondo, mismo color, mismo borde-- y apagado no se podía saber en qué modo
   iba a arrancar el aire. Se queda sin relleno, y se distingue por el borde. */
.accard.off { opacity: 0.62; }
.accard.off .chip.on { background: transparent; color: var(--text); border-color: var(--accent); }
.acrow { display: flex; align-items: center; justify-content: space-between; }
.acname { font-family: var(--fuente-nombre); font-size: 18px; line-height: 1.05; }
.temp { display: flex; align-items: center; gap: 12px; }
.rb { width: 44px; height: 44px; border-radius: var(--radius-btn); border: 1px solid var(--border); background: var(--zone); font-size: 20px; color: var(--text); cursor: pointer; }
/* Renglón de 1: con el de la letra, el número pedía 60 px de alto y el renglón de prender era lo
   más alto de la tarjeta apagada. Así lo marcan los botones de al lado. */
.tval { font-family: var(--fuente-tecnica); font-weight: 500; font-size: 40px; line-height: 1; letter-spacing: 0.02em; }
.tval small { font-size: 18px; vertical-align: top; }
.chips { display: flex; gap: 5px; }
/* 44 de alto, el mínimo de toque de la app (Design system): todos los chips, en todas las pestañas. */
.chip { flex: 1; min-height: 44px; text-align: center; font-family: var(--fuente-tecnica); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 4px; border-radius: var(--radius-btn); border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; }
.chip.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
#vf-rooms .chip { flex: 0 0 auto; padding: 8px 12px; }
/* Las tarjetas de aire van con el mismo margen lateral que el resto del panel. Sin esto
   colgaban del borde y el titulo quedaba desalineado con ellas. */
.zone-cuerpo { padding: 0 14px 12px; }
/* Los chips de la aleta llevan dibujo en vez de texto: el angulo se lee de un vistazo y
   ademas entra, cosa que "Medio arriba" no hacia. */
.chip-dibujo { padding: 5px 2px 3px; }
.chip-dibujo svg { display: block; margin: 0 auto; }
/* La primera fila lleva la temperatura a la izquierda y el interruptor a la derecha. Van
   metidos unos pixeles hacia adentro: pegados a los bordes, el hueco del medio quedaba
   incomodo, como si los dos se estuvieran escapando de la tarjeta. */
.acrow { padding: 0 7px; }
/* Lo de abajo del renglón de prender: solo con el aire prendido, y se abre deslizándose (acs.js).
   flow-root para que el respiro de arriba quede adentro y se deslice con lo demás. */
.acmas { display: flow-root; }
.acmas > :first-child { margin-top: 10px; }
/* Cada cosa distinta del aire --modos, velocidad, aleta, extras-- es un grupo, con un respiro
   chico entre grupos. Adentro las filas van pegadas: sin eso, y sin titulos, las cinco filas de
   dibujos se leian como un jeroglifico de una sola pieza. */
.acgrupo + .acgrupo { margin-top: 12px; }
/* La lucecita comparte fila con dormir y turbo pero no es del grupo: esos tres se excluyen
   entre si y ella se prende aparte. El hueco lo dice sin escribirlo. */
.chip-aparte { margin-left: 12px; }
.acgrupo .chips + .chips { margin-top: 4px; }
.actimer { border-top: 1px solid var(--card-border); margin-top: 13px; padding-top: 11px; }
.actimer-on { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--accent-tint); border: 1px solid var(--accent-tint-border); border-radius: var(--radius-btn); padding: 8px 11px; font-size: 12.5px; }
.actimer-on b { font-family: var(--fuente-tecnica); font-variant-numeric: tabular-nums; }
.actimer-por { color: var(--muted); }
/* La cruz se dibuja chica pero se toca en 44: los márgenes negativos la meten en el renglón sin
   agrandar la franja. */
.actimer-x { background: none; border: none; color: var(--muted); font-size: 15px; cursor: pointer; width: 44px; height: 44px; padding: 0; margin: -12px -11px -12px 0; flex: none; }

/* ── Dora ────────────────────────────────────────────────────────────── */
/* Tres tarjetas: Dora (estado, mandos y mapa), Cómo limpia y Mantenimiento. En el teléfono van
   una abajo de la otra; en una pantalla ancha el mapa se queda con la columna grande y las
   otras dos se apilan al costado, que es donde se miran de reojo. */
.vgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
@media (min-width: 900px) {
  .vgrid { grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); }
  .vcard-dora { grid-row: span 2; }
}
.vcard-cuerpo { padding: 0 14px 14px; }
.vcard-dora .vcard-cuerpo { padding-top: 14px; }
.vcard .lbl:first-child { margin-top: 0; }

.vac-robot { display: flex; align-items: center; gap: 12px; }
.vac-ico { width: 46px; height: 46px; border-radius: var(--radius-btn); background: var(--zone); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 24px; flex: none; }
.vac-quien { flex: 1; min-width: 0; }
.vac-name { font-family: var(--fuente-nombre); font-size: 19px; line-height: 1.05; }
.vac-state { font-family: var(--fuente-tecnica); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-top: 2px; }
.vac-batt { text-align: right; flex: none; }
.vac-batt .pct { font-family: var(--fuente-tecnica); font-weight: 500; font-size: 18px; letter-spacing: 0.04em; }
.vac-batt .sub, .vsub { font-family: var(--fuente-tecnica); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

/* Todos los botones de la pestaña miden lo mismo de alto: 44, el mínimo de toque de la app. */
.vac-acts { display: flex; gap: 7px; margin-top: 12px; }
.vac-acts button, .vac-lavar { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 9px 8px;
  font-family: var(--fuente-tecnica); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vac-acts button:disabled, .vac-lavar:disabled { opacity: 0.4; cursor: default; transform: none; }
/* Mandar lleva el doble de ancho que marcar zona: es lo que se aprieta. */
.vac-mandar .primary { flex: 2 1 0; width: auto; padding: 9px 12px; font-size: 12px; }
.vac-lavar { display: block; width: 100%; }

.vac-alerta { display: flex; align-items: center; gap: 8px; background: var(--danger-tint); border: 1px solid var(--danger-tint-border); color: var(--danger); border-radius: var(--radius-btn); padding: 8px 11px; font-size: 12.5px; margin-top: 12px; }
/* Se dibuja chico, pero se toca en 44: los márgenes negativos no agrandan la franja roja. */
.vac-alerta-ok { margin: -8px -6px -8px auto; flex: none; min-height: 44px; padding: 5px 11px; font-size: 12px; }
/* Un aviso no es una falla: no hay nada que aceptar, hay algo que ir a hacer. Por eso no
   lleva el rojo de alarma ni un boton al lado, pero va igual de arriba. */
.vac-aviso { background: var(--zone); border: 1px solid var(--card-border); color: var(--text); border-radius: var(--radius-btn); padding: 8px 11px; font-size: 12.5px; margin-top: 8px; line-height: 1.35; }
.vac-nota { margin-top: 8px; }

/* Mientras se marca una zona, las pastillas no se tocan: el dedo está dibujando. */
.vmapa.dibujando .vpieza { opacity: 0.45; }

/* Un repuesto por renglón: la barra a la izquierda y su reset a la derecha. */
.vlife { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--card-border); }
.lbl + .vlife { border-top: 0; padding-top: 2px; }
.vlife-info { flex: 1; min-width: 0; }
.vlife-top { display: flex; justify-content: space-between; gap: 8px; font-family: var(--fuente-tecnica); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.vlife-top .low { color: var(--danger); font-weight: 600; }
.vlife-bar { height: 6px; background: var(--track); border-radius: 2px; overflow: hidden; }
.vlife-bar > span { display: block; height: 100%; background: var(--accent); }
.vlife-bar > span.low { background: var(--danger); }
/* Ancho fijo: al armarse dice "¿Seguro?", y si cambiara de ancho la barra de al lado bailaría. */
.vlife-reset { flex: none; width: 84px; min-height: 44px; padding: 6px 4px; font-family: var(--fuente-tecnica); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.vlife-reset.armado { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* ── teles ───────────────────────────────────────────────────────────── */
/* Una tarjeta por tele, con los mismos márgenes y botones que las de Dora. Apagada es solo el
   nombre y el interruptor: el resto no hace nada con la tele apagada. */
.tvtop { display: flex; align-items: center; gap: 12px; padding: 13px 14px; }
.tvquien { flex: 1; min-width: 0; }
.tvquien .zone-name { font-size: 19px; line-height: 1.05; }
.tvstate { font-family: var(--fuente-tecnica); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.tvstate.prendida { color: var(--accent); }
.tvcard .tg:disabled { opacity: 0.45; cursor: default; transform: none; }
.tvaviso { color: var(--danger); font-size: 12.5px; line-height: 1.35; padding: 0 14px 12px; margin-top: -4px; }
/* «Se apaga a las 01:15 · lo puso Rancho» (Tele olvidada): la franja del temporizador del aire, pegada al
   renglón de estado y con el margen de la tarjeta. */
.tvcuenta { padding: 0 14px 12px; margin-top: -4px; }
.tvcuerpo { padding: 0 14px 14px; }

.tvfila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.tvfila + .tvfila { margin-top: 7px; }
.tvfila button { min-height: 44px; padding: 9px 6px; font-family: var(--fuente-tecnica); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tvfila button.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.tvfila .tvglifo { font-family: var(--fuente-ui); font-size: 16px; letter-spacing: 0; line-height: 1; }
.tvcuerpo .lbl { margin: 14px 0 6px; }

/* Las apps: cuadraditos con el logo y el color de la marca (los dos en marcas.js), seis por
   fila en el teléfono. El borde es el mismo color corrido hacia la tinta: en la tarjeta oscura,
   los negros de Apple TV y MUBI y el azul noche de Prime Video se perdían contra el fondo. La
   que está puesta lleva un anillo del color de la casa, porque el relleno ya es de la marca. */
.tvapps { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
.tvapp { aspect-ratio: 1; min-width: 0; padding: 0; display: flex; align-items: center; justify-content: center;
  background: transparent; color: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-btn); overflow: hidden; }
.tvapp.marca { background: var(--marca); color: var(--marca-letra); border-color: color-mix(in srgb, var(--marca) 78%, var(--text)); }
.tvapp .logo { width: 48%; height: 48%; fill: currentColor; }
.tvapp img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* Las que no tienen logo llevan el nombre, chiquito y en dos renglones si hace falta. */
.tvapp span { padding: 0 3px; font-family: var(--fuente-tecnica); font-size: 9.5px; font-weight: 600; letter-spacing: 0.03em;
  text-transform: uppercase; line-height: 1.05; text-align: center; overflow-wrap: anywhere; }
.tvapp.on { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent); }
.tvapp:not(.marca).on { color: var(--text); }

/* Las entradas, con su nombre, en grilla pareja: con la fila que envuelve sola quedaban de
   anchos distintos y el ojo no encontraba nada. */
.tvfuentes { display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 6px; }
.tvfuentes .chip { padding: 8px 6px; min-width: 0; }
.tvfuentes .chip span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tvcartelito { width: 100%; min-height: 44px; margin-top: 14px; font-family: var(--fuente-tecnica); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; }

/* ── la banda de la ficha, al pie ────────────────────────────────────── */
.ficha-banda {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--text); color: var(--bg); border-radius: var(--radius-btn);
  padding: 9px 14px; margin-top: 26px;
  font-family: var(--fuente-tecnica); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
}

/* ── teléfono ────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* El gap de 6 sostiene el toque de las pestañas (.tab::before): las zonas de las dos filas ocupan 2 + 2 px
     y quedan 2 libres. Si baja de 4, se pisan, y un toque en la costura va a la pestaña equivocada sin que
     nada avise (Design system). */
  .tabnav { flex-wrap: wrap; gap: 6px; }
  .tabnav .tabs-auto { flex: 1 1 calc(50% - 3px); }
  .tabnav > .tabs:not(.tabs-auto) { flex: 1 1 100%; order: 3; }
  .tabnav > .tabs-auto:first-child { order: 1; }
  .tabnav > .tabs-auto:last-child { order: 2; }
  /* Las dos barras con la misma letra y el mismo margen: con TELES, Automatizaciones tiene cuatro y ASPIRADORA
     no entraba (Ux/Ui, rutinas-a-la-vista.md, sección 6). */
  .tab, .seg button { font-size: 12.5px; padding: 8px 4px; }
  .marca-titulo { font-size: 32px; }
  .cab-sub { font-size: 20px; }
  .auto-cols, .zcols { grid-template-columns: 1fr; }
  .ficha-banda { font-size: 10px; letter-spacing: 0.08em; }
}

/* ── Cocina: la lista de compras y el recetario (cocina.js) ─────────────────────────────────
   El diseño es de Ux/Ui (docs/planes/2026-09-23-cocina.md). Todo lo que se toca mide 44 o más. */
.hoy-cocina { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px;
  text-align: left; color: var(--text); font: inherit; cursor: pointer; }
.hoy-cocina:hover { border-color: var(--accent); }
.hoy-cocina .zone-marca { background: var(--track); }
.hoy-cocina.activa .zone-marca { background: var(--accent); }
.hoy-cocina-txt { font-size: 15px; }
/* «Aparatos», al final de Inicio (Ux/Ui, docs/planes/2026-09-24-alta-de-aparatos.md): el renglón como el de LISTA, y
   al tocarlo, la tarjeta con los aparatos, el código y SUMAR UN APARATO. */
.aparatos { margin-top: 14px; }
.aparatos-fila { width: 100%; }
.aparatos-tarjeta { margin-top: 8px; padding: 6px 14px 14px; }
.aparato { display: flex; align-items: center; gap: 10px; min-height: 56px; border-bottom: 1px solid var(--card-border); }
.aparato-textos { flex: 1; min-width: 0; }
.aparato-nombre { font-size: 16px; }
.aparato-desde { font-size: 13px; color: var(--muted); margin-top: 2px; }
.aparato-listo { margin: 12px 0 0; font-size: 15px; }
.aparato-codigo { margin-top: 14px; }
.aparato-cifras { font-family: var(--fuente-tecnica); font-weight: 600; font-size: 48px; line-height: 1; letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums; }
.aparato-codigo.vencido .aparato-cifras { color: var(--muted); text-decoration: line-through; }
.aparato-ayuda, .aparato-vence { margin: 8px 0 0; font-size: 15px; }
.aparato-vence { color: var(--muted); font-variant-numeric: tabular-nums; }
.aparatos-sumar { width: 100%; min-height: 44px; margin-top: 14px; background: transparent; color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius-btn); font-family: var(--fuente-tecnica); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }
.hoy-cocina .lbl { margin: 0; }
/* El detalle de Aires y de Teles, un aparato por renglón (Ux/Ui): cada uno entero en el suyo. */
.hoy-detalle.lista { display: block; }
.hoy-renglon { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cocina { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 1000px) {
  /* En la pantalla grande, la lista a la izquierda y la receta a la derecha. */
  .cocina { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
.cocina-lista, .cocina-recetario { padding: 12px 14px 14px; }
.cocina-cab { display: flex; align-items: center; gap: 8px; min-height: 28px; margin-bottom: 10px; }
.cocina-titulo { font-family: var(--fuente-nombre); font-size: 20px; line-height: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cocina-cuenta { margin-left: auto; font-family: var(--fuente-tecnica); font-size: 11px; letter-spacing: 0.12em; color: var(--muted); }

.cocina-sumar { display: flex; gap: 8px; align-items: center; }
.cocina-input {
  flex: 1; min-width: 0; height: 44px; padding: 0 12px; font: inherit; font-size: 16px; color: var(--text);
  background: var(--zone); border: 1px solid var(--border); border-radius: 6px;
}
.cocina-input::placeholder { color: var(--muted); }
.cocina-input:focus { outline: none; border-color: var(--accent); }
.cocina-mic {
  flex: none; width: 44px; height: 44px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  background: var(--accent); color: var(--on-accent); display: inline-flex; align-items: center; justify-content: center;
}
.cocina-dijo { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.cocina-vacia { margin: 14px 0 4px; font-size: 15px; color: var(--muted); }

.cocina-grupo { margin-top: 14px; }
.cocina-rotulo { font-family: var(--fuente-tecnica); font-weight: 500; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); margin: 14px 0 4px; }
.cocina-grupo .cocina-rotulo { margin-top: 0; }
.cocina-rotulo-doble { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cocina-rotulo-nota { color: var(--muted); }
.cocina-cosa {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 2px; cursor: pointer;
  background: none; border: none; border-top: 1px solid var(--card-border); color: var(--text); font: inherit; text-align: left;
}
.cocina-caja {
  flex: none; width: 22px; height: 22px; border: 1px solid var(--border); border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center; color: var(--text);
}
.cocina-texto { font-size: 15px; line-height: 1.3; }
/* Tachado: todo a --muted y sin acento, porque en el súper la mirada va a lo que falta (Design system). */
.cocina-cosa.tachada .cocina-caja { color: var(--muted); }
.cocina-cosa.tachada .cocina-texto { color: var(--muted); text-decoration: line-through; }
/* La que se está sumando (cocina.js): se ve enseguida, tal cual se escribió; solo la caja espera, apagada,
   hasta que el Worker la guarda y se puede tachar. El color, explícito: un botón deshabilitado sale gris. */
.cocina-cosa.sumando { cursor: default; color: var(--text); }
.cocina-cosa.sumando .cocina-caja { opacity: .4; }

.cocina-pie { display: flex; gap: 10px; margin-top: 16px; }
.cocina-boton {
  flex: 1; min-height: 48px; padding: 0 12px; border-radius: var(--radius-btn); cursor: pointer; font: inherit;
  font-family: var(--fuente-tecnica); font-weight: 500; font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase;
  background: none; border: 1px solid var(--border); color: var(--text);
}
.cocina-boton:disabled { opacity: .45; cursor: default; }
.cocina-mandar { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.cocina-mandar.mandada { background: none; color: var(--accent); cursor: default; }
.cocina-aquien { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.cocina-aquien-q { font-size: 15px; color: var(--muted); }

.cocina-receta {
  display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 2px; cursor: pointer; font: inherit; font-size: 15px;
  background: none; border: none; border-top: 1px solid var(--card-border); color: var(--text); text-align: left;
}
/* Las favoritas de Lucas, primero y con la estrella (el gerente, 24/09/2026). */
.cocina-receta.favorita::before { content: '★'; flex: none; margin-right: 8px; font-size: 13px; color: var(--accent); }
.cocina-volver {
  flex: none; margin-left: auto; min-height: 44px; padding: 0 12px; cursor: pointer; background: none; border: 1px solid var(--border);
  border-radius: var(--radius-btn); color: var(--text); font-family: var(--fuente-tecnica); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
}
.cocina-ingrediente.marcado .cocina-caja { border-color: var(--text); }
.cocina-faltantes { width: 100%; margin-top: 10px; flex: none; }
/* El número de cada paso, en la letra técnica, en --muted y en una columna de 22, como en la tarjeta del atajo
   (.tj-num en tarjeta.css): un número que ordena va en la letra técnica (Design system, 24/09/2026). */
.cocina-pasos { margin: 0; padding: 0; list-style: none; counter-reset: paso; }
.cocina-pasos li { display: flex; align-items: baseline; font-size: 16px; line-height: 1.45; padding: 6px 0; border-top: 1px solid var(--card-border);
  counter-increment: paso; }
.cocina-pasos li::before {
  content: counter(paso); flex: none; width: 22px; font-family: var(--fuente-tecnica); font-weight: 600; font-size: 15px;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
/* El consejo (Ux/Ui, docs/planes/2026-09-23-cocina.md): fuera de la lista, con el texto de un paso, sin número, y
   alineado con el texto de los pasos. La raya, entera como la de los pasos. */
.cocina-consejos p { margin: 0; font-size: 16px; line-height: 1.45; padding: 6px 0 6px 22px; border-top: 1px solid var(--card-border); }

/* El aviso de un renglón con «Deshacer»: el mismo lugar y la misma forma que la franja de fallas,
   con el borde de siempre en vez del rojo. */
.franja-deshacer { border-color: var(--border); padding-right: 6px; }
.ff-deshacer {
  flex: none; min-height: 44px; padding: 0 12px; background: none; border: none; cursor: pointer; color: var(--accent);
  font-family: var(--fuente-tecnica); font-weight: 500; font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase;
}