/* 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;
  padding: calc(16px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(48px + 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; }
.cab-regla { border-bottom: 2px solid var(--text); margin: 9px 0 11px; }
header h1 { 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 í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. Se toca para elegirla: es el control
   principal, no una etiqueta. 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: auto;
  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); cursor: pointer; font-family: inherit;
  /* Lucas: "tocas la habitacion, mantenes apretado y ahi se mueve". Es el navegador: sobre un
     boton con texto, mantener apretado arranca a seleccionar o a arrastrar, y la etiqueta se
     corre sola. Nada de eso tiene sentido acá. */
  margin: 0; box-sizing: border-box; appearance: none; -webkit-appearance: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  touch-action: manipulation; }
/* Y que ningún estado de "apretado" del navegador le mueva el centrado. */
.vpieza:active, .vpieza:focus { transform: translate(-50%, -50%); }
/* El dedo agarra 44px aunque la pastilla se dibuje chica. Invisible, no tapa nada. No se
   escala: 44 es el minimo comodo, y si la pastilla ya es mas grande, esto no hace falta. */
.vpieza::after { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.vpieza.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
/* Los patios se dibujan igual pero apagados: si no estuvieran, tocar ahi no haria nada sin
   ninguna explicacion, y eso se lee como que el mapa esta roto. */
.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; }

/* Para explicar un toque que no hizo nada. Aparece y se va solo. */
.vdicho { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  background: rgba(0,0,0,.72); color: #fff; font-size: 11.5px; padding: 5px 10px;
  border-radius: var(--radius-btn); 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: 9px; }
/* 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); }
/* Las piezas de la casa son siete y con nombres largos: en un teléfono no entran en una
   fila. Las de los aires sí entran, por eso .chips a secas no envuelve. */
.chips-piezas { flex-wrap: wrap; }
.chips-piezas .chip { flex: 0 1 auto; }

.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; }
.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); }
/* 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 rojo de sello. */
.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; }
/* Los siete días en una fila, de 44 x 44: en la tarjeta de agregar del teléfono hay 324 de ancho,
   y con 4 de separación cada uno quedaba en 43. */
.days { display: flex; gap: 2px; }
.day { flex: 1 1 0; min-width: 0; max-width: 44px; height: 44px; border-radius: 4px; border: 1px solid var(--border); background: transparent; color: var(--text); font-family: var(--fuente-tecnica); font-size: 12px; cursor: pointer; padding: 0; }
.day.sel { 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: 11px; 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; }

.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: «falló» en el rojo de sello, con el motivo abajo, y
   «reintentando» apagado mientras se vuelve a probar (una vez por minuto, media hora). */
.hoy-marca { flex: none; font-family: var(--fuente-tecnica); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.hoy-marca-fallo { color: var(--danger); }
.hoy-fila.fallo .hoy-hora { color: var(--danger); }
.hoy-porque { display: block; font-size: 12px; line-height: 1.35; color: var(--muted); margin-top: 2px; }
.hoy-fila.fallo .hoy-porque { color: var(--danger); }
.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; }
/* 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 { pointer-events: none; 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; }
.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) {
  .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; }
  .tab { font-size: 11.5px; padding: 8px 4px; }
  header h1 { font-size: 32px; }
  .cab-sub { font-size: 20px; }
  .auto-cols, .zcols { grid-template-columns: 1fr; }
  .ficha-banda { font-size: 10px; letter-spacing: 0.08em; }
}