/* style.css — ROOTLAB.
 *
 * DIRECCIÓN
 *
 * Las caras de los Rooties son ilustración plana del tipo Duolingo, así que
 * la app habla el mismo idioma: tipografía redonda y pesada (Nunito),
 * botones gruesos con canto (se hunden al tocarlos), bordes de 2 px y
 * esquinas generosas. De día es un libro de cuentos: papel claro y pasteles;
 * de noche (lib/tema.mjs) el mismo libro con la luz apagada, fondo profundo
 * para que los colores brillen. De los juegos de colección toma el resto:
 * rarezas con color propio y un cofre que se abre con luz.
 *
 * COLORES: PALETA DINÁMICA
 *
 * Ningún color de la interfaz está escrito acá. Todos son TOKENS que arma
 * public/lib/paletas.mjs a partir de la paleta de la cuenta (ROOTLAB
 * por defecto; la de tu Rooti cuando sale del cofre) y que tema.js aplica
 * antes de la primera pintada. Los valores de abajo son los de la paleta
 * ROOTLAB de día, para que la app se vea bien aunque el JavaScript no cargue.
 *
 * Cada token de color tiene su familia:
 *
 *   primario, secundario, destacado, acento     colores llenos (botones)
 *   sobre-*                                     el texto que va encima
 *   *-canto                                     el canto del botón 3D
 *   *-texto                                     el mismo color, garantizado
 *                                               legible como texto (WCAG AA)
 *   bien, atencion, urgente                     estados de la planta
 *   dato-*                                      series de los gráficos
 *
 * Los colores de rareza (común, rara, épica) son fijos: son del juego de
 * colección, no de la paleta, y nunca se mezclan con los de estado.
 */

:root {
  --fondo: #f5f8ee;
  --fondo-alto: #eff5e6;
  --panel: #fbfcf9;
  --panel-alto: #fefefd;
  --borde: #ddebd0;
  --borde-alto: #a0c495;
  --tinta: #0f3414;
  --tinta-2: #205b28;
  --tinta-3: #49774b;
  --primario: #2f7d3a;
  --sobre-primario: #ffffff;
  --primario-canto: #1f5827;
  --primario-texto: #2f7d3a;
  --secundario: #2b6f9e;
  --sobre-secundario: #ffffff;
  --secundario-canto: #1c4e70;
  --secundario-texto: #2b6f9e;
  --destacado: #e0a526;
  --sobre-destacado: #0b0f14;
  --destacado-canto: #a07518;
  --destacado-texto: #856112;
  --acento: #e2718a;
  --sobre-acento: #0b0f14;
  --acento-canto: #a24f61;
  --acento-texto: #a85265;
  --bien: #2e7d32;
  --sobre-bien: #ffffff;
  --bien-canto: #1e5821;
  --bien-texto: #2e7d32;
  --atencion: #e65100;
  --sobre-atencion: #0b0f14;
  --atencion-canto: #a53800;
  --atencion-texto: #c24300;
  --urgente: #c62828;
  --sobre-urgente: #ffffff;
  --urgente-canto: #8d1a1a;
  --urgente-texto: #c62828;
  --dato-tierra: #2b6f9e;
  --dato-temperatura: #e65100;
  --dato-luz: #b1821c;
  --dato-humedad: #2f7d3a;
  --resplandor: #e0ecd3;
  --fondo-rgb: 245, 248, 238;
  --globo: #ffffff;
  --sobre-globo: #0f3414;

  /* Rarezas del cofre: fijas. */
  --comun:       #7fd1ff;
  --raro:        #d58bff;
  --epico:       #ffc107;

  --r:     20px;
  --r-ch:  14px;
  --tabs:  calc(72px + env(safe-area-inset-bottom, 0px));
  --arriba: env(safe-area-inset-top, 0px);
  --fuente: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Nunito, servida desde la app: sin pedidos a terceros y disponible sin red. */
@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 600 900; font-display: swap;
  src: url("fuentes/nunito-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 600 900; font-display: swap;
  src: url("fuentes/nunito-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 600 16px/1.45 var(--fuente);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

body {
  min-height: 100svh;
  padding-bottom: var(--tabs);
  background:
    radial-gradient(120% 60% at 50% -10%, var(--resplandor) 0%, transparent 60%),
    var(--fondo);
  background-attachment: fixed;
}
body.sin-tabs { padding-bottom: 0; }
body.sin-tabs .tabs { display: none; }

h1, h2, h3, h4 { margin: 0; line-height: 1.15; font-weight: 900; text-wrap: balance; }
p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--secundario-texto); outline-offset: 3px; border-radius: 8px; }
.oculto { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* Para el lector de pantalla, no para el ojo: un encabezado que ordena la
   pantalla sin dibujarse. No usa `display:none`, que lo sacaría también del
   lector. */
.oculto-visual {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .06em; }

/* --------------------------------------------------------------- barra --- */
.barra {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(var(--arriba) + 12px) 18px 10px;
  background: linear-gradient(var(--fondo) 65%, rgba(var(--fondo-rgb), 0));
}
/* El <h1> es sólo el envoltorio semántico de la marca: no dibuja nada. */
.marca-h1 { margin: 0; font-size: inherit; line-height: 1; }
.marca {
  font-weight: 900; font-size: 20px; letter-spacing: .08em; color: var(--tinta);
  text-decoration: none;
}
.marca span { color: var(--primario-texto); }
.barra-der { display: flex; align-items: center; gap: 8px; }

.pildora {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--panel); border: 2px solid var(--borde);
  font-weight: 800; font-size: 14px; white-space: nowrap;
}
.pildora svg { width: 18px; height: 18px; }
.pildora.fuego { color: var(--atencion-texto); }
.pildora.sinred { color: var(--urgente-texto); border-color: color-mix(in srgb, var(--urgente-texto) 40%, transparent); }
.pildora.plan { color: var(--destacado-texto); }
.pildora.cola { color: var(--atencion-texto); }

.contenido {
  padding: 4px 16px 28px; max-width: 560px; margin: 0 auto; outline: none;
  /* Alta y en columna para que una vista que es una escena —el invernadero—
     pueda ocupar lo que sobra en vez de dejar media pantalla en blanco. Las
     demás no cambian: apilan desde arriba igual que antes. */
  display: flex; flex-direction: column;
  min-height: calc(100svh - var(--tabs) - 32px);
}
.vista { display: flex; flex-direction: column; gap: 16px; }
.vista.invernadero { flex: 1; }
.vista.invernadero .estante-marco { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.vista-cab { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.vista-cab h2 { font-size: 26px; flex: 1; }

/* ------------------------------------------------------------- botones --- */
.boton {
  --b: var(--panel-alto); --c: var(--borde); --t: var(--tinta);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 12px 20px;
  border: 2px solid var(--c); border-radius: 16px;
  background: var(--b); color: var(--t);
  font-weight: 900; font-size: 16px; letter-spacing: .04em; text-transform: uppercase;
  box-shadow: 0 4px 0 var(--c);
  cursor: pointer; user-select: none; text-decoration: none;
  transition: transform .06s ease, box-shadow .06s ease, filter .15s;
}
.boton:hover { filter: brightness(1.06); }
.boton:active { transform: translateY(4px); box-shadow: 0 0 0 var(--c); }
.boton[disabled] { opacity: .5; pointer-events: none; }
.boton svg { width: 20px; height: 20px; }
.boton.primario { --b: var(--primario); --c: var(--primario-canto); --t: var(--sobre-primario); }
.boton.azul { --b: var(--secundario); --c: var(--secundario-canto); --t: var(--sobre-secundario); }
.boton.oro { --b: var(--destacado); --c: var(--destacado-canto); --t: var(--sobre-destacado); }
.boton.peligro { --b: transparent; --c: color-mix(in srgb, var(--urgente-texto) 50%, transparent); --t: var(--urgente-texto); box-shadow: none; }
.boton.chico { min-height: 38px; padding: 6px 14px; font-size: 13px; border-radius: 12px; box-shadow: 0 3px 0 var(--c); }
.boton.ancho { width: 100%; }
.boton.plano { --b: transparent; --c: transparent; box-shadow: none; color: var(--secundario-texto); }
.boton.plano:active { transform: none; }
.enlace-boton {
  background: none; border: 0; padding: 10px; color: var(--tinta-2);
  font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: 14px; cursor: pointer;
}

/* ------------------------------------------------------------- paneles --- */
.panel {
  background: var(--panel); border: 2px solid var(--borde); border-radius: var(--r);
  padding: 16px;
}
.panel-tit { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 12px; font-weight: 900; }
.nota { color: var(--tinta-2); font-size: 14px; }

/* Secciones que se abren y se cierran (lib/ui.mjs: `seccion`). Un <details>
   de verdad: el triángulo propio del navegador se saca y se dibuja la flecha
   de los iconos, que gira al abrir. */
.seccion { padding: 0; }
.seccion > .seccion-titulo {
  display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none;
  padding: 14px 16px; min-height: 52px;
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-3); font-weight: 900;
  border-radius: calc(var(--r) - 2px);
}
.seccion > .seccion-titulo::-webkit-details-marker { display: none; }
.seccion > .seccion-titulo:hover { background: var(--panel-alto); }
.seccion > .seccion-titulo:focus-visible { outline: 3px solid var(--secundario); outline-offset: -3px; }
.seccion-nombre { flex: none; }
/* El resumen se acorta antes de empujar al título: ocupa lo que sobra. */
.seccion-resumen {
  flex: 1; min-width: 0;
  text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 700;
  color: var(--tinta-2); text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.seccion > .seccion-titulo svg { flex: none; margin-left: auto; transition: transform .18s ease; color: var(--tinta-3); }
.seccion[open] > .seccion-titulo svg { transform: rotate(180deg); }
.seccion[open] > .seccion-titulo { border-bottom: 2px solid var(--borde); border-radius: calc(var(--r) - 2px) calc(var(--r) - 2px) 0 0; }
.seccion-cuerpo { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
@media (prefers-reduced-motion: reduce) {
  .seccion > .seccion-titulo svg { transition: none; }
}

/* El botón de volver: cuadrado, para que el ícono quede centrado. */
.boton.chico.volver { padding: 6px; width: 38px; justify-content: center; }
.vacio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 28px 18px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 800;
  background: var(--panel-alto); color: var(--tinta-2); border: 2px solid var(--borde);
}
.errores { color: var(--urgente-texto); font-weight: 700; }

input[type=text], input[type=search], input[type=email], input[type=password], input[type=number], select {
  width: 100%; min-height: 52px; padding: 12px 14px;
  background: var(--fondo-alto); border: 2px solid var(--borde); border-radius: 14px;
  font-weight: 700; font-size: 17px; color: var(--tinta);
}
input::placeholder { color: var(--tinta-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--secundario-texto); }
label { font-weight: 800; }
.form { display: flex; flex-direction: column; gap: 10px; }

/* -------------------------------------------------------------- cuenta --- */
.cuenta-form { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.pestanas {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px;
  background: var(--fondo-alto); border: 2px solid var(--borde); border-radius: 16px;
}
.pestanas button {
  min-height: 42px; border: 0; border-radius: 12px; background: transparent; cursor: pointer;
  color: var(--tinta-2); font-weight: 900; font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
}
.pestanas button.activa { background: var(--panel-alto); color: var(--tinta); }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo[hidden] { display: none; }
.campo label { font-size: 14px; }
.campo-ayuda { color: var(--tinta-3); font-size: 13px; }
.campo-ayuda:empty { display: none; }
.con-boton { display: flex; gap: 8px; align-items: stretch; }
.con-boton input { flex: 1; min-width: 0; }
.ver-clave {
  flex: none; min-width: 72px; border: 2px solid var(--borde); border-radius: 14px; background: var(--panel-alto);
  font-weight: 900; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
}
.separador { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 380px; color: var(--tinta-3); font-size: 13px; font-weight: 800; }
.separador::before, .separador::after { content: ''; flex: 1; height: 2px; background: var(--borde); }
.enlace-boton { display: inline-flex; align-items: center; gap: 6px; }
.enlace-boton.peligro { color: var(--urgente-texto); padding-inline: 0; }
.fila-botones { display: flex; gap: 10px; flex-wrap: wrap; }
.fila-botones .boton { flex: 1; }

/* ---------------------------------------------------------------- tabs --- */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  background: rgba(var(--fondo-rgb), .96); backdrop-filter: blur(12px);
  border-top: 2px solid var(--borde);
}
.tab {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 4px; background: none; border: 2px solid transparent; border-radius: 14px;
  color: var(--tinta-3); font-weight: 800; font-size: 12px; cursor: pointer;
}
.tab svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tab.activa { color: var(--secundario-texto); background: color-mix(in srgb, var(--secundario-texto) 12%, transparent); border-color: color-mix(in srgb, var(--secundario-texto) 38%, transparent); }
.globo {
  position: absolute; top: 2px; right: calc(50% - 22px);
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: var(--urgente); color: var(--sobre-urgente); font-size: 12px; line-height: 20px; font-weight: 900;
  border: 2px solid var(--fondo);
}

/* --------------------------------------------------------------- aviso --- */
.aviso {
  position: fixed; left: 16px; right: 16px; bottom: calc(var(--tabs) + 12px); z-index: 60;
  max-width: 520px; margin: 0 auto; padding: 14px 16px;
  background: var(--panel-alto); border: 2px solid var(--borde-alto); border-radius: 16px;
  font-weight: 800; box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  animation: subir .25s ease-out;
}
.aviso.error { border-color: var(--urgente-texto); color: var(--tinta); }
body.sin-tabs .aviso { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
@keyframes subir { from { transform: translateY(12px); opacity: 0; } }

/* =================================================================== HOY === */
.saludo { display: flex; align-items: center; gap: 14px; padding: 6px 2px 2px; }
.saludo-textos { flex: 1; min-width: 0; }
.saludo-hora { color: var(--tinta-3); font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.saludo-titulo { font-size: 28px; margin-top: 2px; }
.saludo-titulo.tono-bien { color: var(--bien-texto); }
.saludo-titulo.tono-urgente { color: var(--urgente-texto); }
.saludo-detalle { color: var(--tinta-2); margin-top: 2px; }

/* Las caras de las macetas, en fila, arriba de todo. */
/* La ronda de caras y el estante son listas de verdad (<ul><li>): el lector
   de pantalla dice "lista de 3". El <li> es el que se acomoda; el botón de
   adentro sigue con su forma. */
.ronda { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 8px; scroll-snap-type: x mandatory; scrollbar-width: none; list-style: none; margin: 0; }
.ronda > li { flex: 0 0 auto; scroll-snap-align: start; display: flex; }
.ronda::-webkit-scrollbar { display: none; }
.ronda-item {
  scroll-snap-align: start; flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--tinta);
}
.ronda-item .cara-marco { border-radius: 26px; }
.ronda-item b { font-size: 14px; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ronda-agregar {
  width: 88px; height: 88px; border-radius: 26px; border: 2px dashed var(--borde-alto);
  display: grid; place-items: center; color: var(--tinta-3);
}
.ronda-agregar svg { width: 34px; height: 34px; }

.cara-marco {
  position: relative; display: inline-grid; place-items: center; overflow: hidden;
  border-radius: 24px; border: 3px solid rgba(255, 255, 255, .08);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .35);
  background: var(--panel-alto);
}
.cara-marco.sev-urgente { border-color: var(--urgente-texto); animation: latido 1.4s ease-in-out infinite; }
.cara-marco.sev-atencion { border-color: var(--atencion-texto); }
.cara { display: block; image-rendering: auto; background-size: cover; }
@keyframes latido { 50% { box-shadow: 0 4px 0 rgba(0,0,0,.35), 0 0 0 6px color-mix(in srgb, var(--urgente) 22%, transparent); } }

.contadores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.contador {
  display: flex; flex-direction: column; align-items: center; padding: 10px 4px;
  background: var(--panel); border: 2px solid var(--borde); border-radius: 16px;
}
.contador b { font-size: 26px; line-height: 1; font-weight: 900; font-variant-numeric: tabular-nums; }
.contador span { font-size: 12px; color: var(--tinta-2); font-weight: 800; margin-top: 4px; text-align: center; }
.contador-urgente b { color: var(--urgente-texto); }
.contador-atencion b { color: var(--atencion-texto); }
.contador-bien b { color: var(--bien-texto); }
.contador-sindatos b { color: var(--tinta-3); }

.tareas { display: flex; flex-direction: column; gap: 10px; }
.tarea {
  display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px;
  padding: 12px; border-radius: 18px; background: var(--panel-alto);
  border: 2px solid var(--borde);
}
.tarea-icono { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--fondo-alto); color: var(--secundario-texto); }
.tarea-urgente { border-color: color-mix(in srgb, var(--urgente-texto) 60%, transparent); }
.tarea-urgente .tarea-icono { background: color-mix(in srgb, var(--urgente) 16%, transparent); color: var(--urgente-texto); }
.tarea-pronto .tarea-icono { background: color-mix(in srgb, var(--atencion) 16%, transparent); color: var(--atencion-texto); }
.tarea h3 { font-size: 17px; }
.tarea-detalle { color: var(--tinta-2); font-size: 14px; margin-top: 2px; }
.tarea-urgencia { display: inline-block; margin-top: 6px; font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); }
.tarea-urgente .tarea-urgencia { color: var(--urgente-texto); }
.tarea-hecha {
  width: 44px; height: 44px; border-radius: 14px; cursor: pointer;
  background: var(--fondo-alto); border: 2px solid var(--borde); color: var(--bien-texto);
  display: grid; place-items: center; box-shadow: 0 3px 0 var(--borde);
}
.tarea-hecha:active { transform: translateY(3px); box-shadow: none; }
.tarea-ir { background: none; border: 0; padding: 0; text-align: left; color: inherit; cursor: pointer; }
.panel-libre { display: flex; align-items: center; gap: 12px; color: var(--bien-texto); font-weight: 800; }

.panel-nivel { display: flex; flex-direction: column; gap: 10px; }
.nivel-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nivel-num { font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--destacado-texto); }
.nivel-cab h3 { font-size: 20px; }
.racha { display: inline-flex; align-items: center; gap: 4px; color: var(--atencion-texto); font-weight: 900; }
.racha b { font-size: 22px; }
.racha span { font-size: 13px; color: var(--tinta-2); }
.nivel-pie, .nivel-nota { color: var(--tinta-2); font-size: 14px; }
.nivel-nota { color: var(--tinta-3); font-size: 13px; }
.logro-ultimo { display: flex; align-items: center; gap: 6px; color: var(--destacado-texto); font-weight: 800; font-size: 14px; }

.progreso { height: 14px; border-radius: 999px; background: var(--fondo-alto); overflow: hidden; border: 2px solid var(--borde); }
.progreso i { display: block; height: 100%; border-radius: 999px; background: var(--primario); box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), inset 0 3px 0 rgba(255,255,255,.25); transition: width .6s ease; }
.progreso-nivel i { background: var(--destacado); }

/* ============================================================== PLANTAS === */
.plantas { display: flex; flex-direction: column; gap: 12px; list-style: none; margin: 0; padding: 0; }
.planta {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center;
  padding: 12px; border-radius: var(--r); background: var(--panel);
  border: 2px solid var(--borde); cursor: pointer;
  box-shadow: 0 4px 0 var(--borde);
}
.planta:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--borde); }
.planta-cuerpo { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.planta-cab { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.planta-cab h3 { font-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.planta-especie { color: var(--tinta-2); font-size: 14px; }
.planta-mini { display: flex; flex-wrap: wrap; gap: 6px; }
.dato {
  display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 800;
  padding: 2px 8px; border-radius: 999px; background: var(--fondo-alto); color: var(--tinta-2);
  font-variant-numeric: tabular-nums;
}
.dato svg { width: 14px; height: 14px; }
.dato.mal { color: var(--atencion-texto); }
.planta-pie { display: flex; gap: 10px; font-size: 12px; color: var(--tinta-3); font-weight: 800; }
.sev-urgente .chip-estado { background: var(--urgente-chip); color: var(--urgente-texto); border-color: color-mix(in srgb, var(--urgente-texto) 40%, transparent); }
.sev-atencion .chip-estado { background: var(--atencion-chip); color: var(--atencion-texto); border-color: color-mix(in srgb, var(--atencion-texto) 40%, transparent); }
.sev-bien .chip-estado { background: var(--bien-chip); color: var(--bien-texto); border-color: color-mix(in srgb, var(--bien-texto) 40%, transparent); }
.enlace-vivo { color: var(--bien-texto); }
.enlace-tibio { color: var(--atencion-texto); }
.enlace-caido, .enlace-nunca { color: var(--urgente-texto); }

/* detalle */
.heroe {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 18px 16px 16px; border-radius: 28px; border: 2px solid var(--borde);
  background: linear-gradient(180deg, var(--piel, var(--panel-alto)) 0%, var(--panel) 72%);
  overflow: hidden;
}
.heroe .cara-marco { border-radius: 32px; }
.heroe h2 { font-size: 30px; }
.dice {
  position: relative; padding: 10px 16px; border-radius: 16px; background: var(--globo, #fff); color: var(--sobre-globo, var(--fondo));
  font-weight: 900; font-size: 17px; box-shadow: 0 3px 0 color-mix(in srgb, var(--borde) 70%, transparent);
}
.dice::before {
  content: ""; position: absolute; top: -9px; left: 50%; margin-left: -9px;
  border: 9px solid transparent; border-top: 0; border-bottom-color: var(--globo, #fff);
}
.heroe-sub { color: var(--tinta-2); font-size: 14px; text-align: center; }

.medidor { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; }
.medidor + .medidor { border-top: 2px solid var(--borde); padding-top: 12px; }
.medidor-cab { display: flex; justify-content: space-between; align-items: baseline; }
.medidor-et { font-weight: 800; color: var(--tinta-2); }
.medidor-val { font-weight: 900; font-size: 20px; font-variant-numeric: tabular-nums; }
.medidor-pista { position: relative; height: 14px; border-radius: 999px; background: var(--fondo-alto); border: 2px solid var(--borde); }
.medidor-zona { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--bien) 38%, transparent); border-radius: 999px; }
.medidor-tick {
  position: absolute; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border-radius: 50%; background: #fff; border: 4px solid var(--bien); box-shadow: 0 2px 0 rgba(0,0,0,.35);
}
.medidor-atencion .medidor-tick { border-color: var(--atencion); }
.medidor-urgente .medidor-tick { border-color: var(--urgente); }
.medidor-atencion .medidor-val { color: var(--atencion-texto); }
.medidor-urgente .medidor-val { color: var(--urgente-texto); }

.grafico { width: 100%; height: 120px; display: block; }
.grafico-leyenda { display: flex; gap: 12px; font-size: 12px; color: var(--tinta-3); font-weight: 800; margin-top: 6px; }
.grafico-leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.selector { display: flex; gap: 6px; }
.selector button { flex: 1; min-height: 36px; border-radius: 12px; border: 2px solid var(--borde); background: var(--fondo-alto); color: var(--tinta-2); font-weight: 800; cursor: pointer; }
.selector button.activo { border-color: var(--secundario-texto); color: var(--secundario-texto); background: color-mix(in srgb, var(--secundario-texto) 12%, transparent); }

.vinculo-cab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.etapa-grande { font-size: 22px; font-weight: 900; text-transform: capitalize; color: var(--destacado-texto); }
.vinculo-dias { color: var(--tinta-2); font-weight: 800; }
.datos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 0; }
.datos div { background: var(--fondo-alto); border-radius: 14px; padding: 10px 12px; }
.datos dt { font-size: 12px; color: var(--tinta-3); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.datos dd { margin: 2px 0 0; font-weight: 900; font-size: 17px; }

.fila-ajuste { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; }
.fila-ajuste + .fila-ajuste { border-top: 2px solid var(--borde); }
.fila-ajuste b { display: block; }
.fila-ajuste span { color: var(--tinta-2); font-size: 14px; }
.interruptor { position: relative; width: 56px; height: 32px; flex: 0 0 auto; }
.interruptor input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.interruptor i { position: absolute; inset: 0; border-radius: 999px; background: var(--fondo-alto); border: 2px solid var(--borde); transition: background .2s; pointer-events: none; }
.interruptor i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--tinta-3); transition: transform .2s, background .2s; }
.interruptor input:checked + i { background: var(--primario); border-color: var(--primario-canto); }
.interruptor input:checked + i::after { transform: translateX(24px); background: #fff; }
input[type=range] { width: 100%; accent-color: var(--secundario); }

/* =========================================================== DIAGNÓSTICO === */
.foto-campo {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 150px; padding: 18px; border-radius: var(--r);
  border: 3px dashed var(--borde-alto); background: var(--fondo-alto);
  color: var(--secundario-texto); font-weight: 900; cursor: pointer; text-align: center;
}
.foto-campo svg { width: 42px; height: 42px; }
.escaner-zona { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.preview { width: 100%; max-height: 320px; object-fit: cover; border-radius: 18px; border: 2px solid var(--borde); }
.cargando { display: flex; align-items: center; gap: 10px; color: var(--tinta-2); font-weight: 800; }
.veredicto { padding: 14px; border-radius: 16px; border: 2px solid var(--borde); }
.veredicto h3 { font-size: 19px; margin-bottom: 4px; }
.veredicto-revela { border-color: var(--acento-texto); background: color-mix(in srgb, var(--acento) 10%, transparent); }
.veredicto-confirma { border-color: var(--atencion-texto); background: color-mix(in srgb, var(--atencion) 10%, transparent); }
.veredicto-sano { border-color: var(--bien-texto); background: color-mix(in srgb, var(--bien) 10%, transparent); }
.conclusiones { display: flex; flex-direction: column; gap: 10px; }
.conclusion { padding: 12px 14px; border-radius: 16px; background: var(--panel-alto); border: 2px solid var(--borde); display: flex; flex-direction: column; gap: 6px; }
.conclusion-cab { display: flex; justify-content: space-between; gap: 8px; }
.conclusion-cab h4 { font-size: 16px; }
.conclusion-visto { font-size: 12px; color: var(--tinta-3); font-weight: 800; }
.conclusion-accion { color: var(--bien-texto); font-weight: 800; }
.conclusion-nota { color: var(--acento-texto); font-size: 13px; font-weight: 800; }

/* ============================================================= COLECCIÓN === */
.coleccion-cab { display: flex; align-items: center; justify-content: space-between; }
.coleccion-cuenta { font-size: 34px; font-weight: 900; font-variant-numeric: tabular-nums; }
.coleccion-cuenta small { font-size: 18px; color: var(--tinta-3); }
/* La colección: una fila por Rooti, tres casilleros de piel. */
.modelos { display: flex; flex-direction: column; gap: 14px; }
.modelo {
  display: flex; flex-direction: column; gap: 10px; padding: 14px 12px;
  border-radius: 22px; background: var(--panel); border: 2px solid var(--borde);
}
.modelo-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.modelo h3 { font-size: 20px; }
.modelo-lema { font-size: 13px; color: var(--tinta-2); }
.modelo.falta h3 { color: var(--tinta-3); }
.pieles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.piel {
  --rar: var(--comun);
  display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0;
  padding: 8px 4px 10px; border-radius: 18px; text-align: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rar) 18%, var(--panel-alto)) 0%, var(--panel-alto) 70%);
  border: 3px solid color-mix(in srgb, var(--rar) 55%, var(--borde));
  box-shadow: 0 4px 0 color-mix(in srgb, var(--rar) 35%, #000);
}
.piel.rar-raro { --rar: var(--raro); }
.piel.rar-epico { --rar: var(--epico); }
.piel-escena { display: grid; place-items: center; width: 100%; border-radius: 14px; padding: 4px 0; }
.piel.falta .cuerpo { filter: grayscale(1) brightness(.55) blur(1px); opacity: .75; }
.piel-nombre { font-size: 12px; line-height: 1.2; overflow-wrap: anywhere; }
.piel.falta .piel-nombre { color: var(--tinta-3); }
.modelo-rareza { font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); }
.modelo-prob { font-size: 11px; color: var(--tinta-3); font-weight: 800; }
.probabilidades { display: flex; gap: 8px; flex-wrap: wrap; }
.probabilidades .chip b { color: var(--tinta); }
.probabilidades .chip { border-left: 6px solid var(--comun); }
.probabilidades .chip.rar-raro { border-left-color: var(--raro); }
.probabilidades .chip.rar-epico { border-left-color: var(--epico); }

.logros { display: flex; flex-direction: column; gap: 8px; }
.logro { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: var(--fondo-alto); color: var(--tinta-3); }
.logro div { display: flex; flex-direction: column; }
.logro b { color: var(--tinta-2); }
.logro span { font-size: 13px; }
.logro.hecho { color: var(--destacado-texto); background: color-mix(in srgb, var(--destacado) 10%, transparent); }
.logro.hecho b { color: var(--tinta); }

/* ================================================================ AJUSTES === */
.codigo-grande { font-size: 34px; font-weight: 900; letter-spacing: .18em; text-align: center; padding: 12px; border-radius: 16px; background: var(--fondo-alto); border: 2px dashed var(--borde-alto); }

/* ================================================================== ALTA === */
.alta {
  min-height: calc(100svh - 70px - var(--arriba));
  display: flex; flex-direction: column; gap: 18px; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}
.alta-progreso { display: flex; gap: 6px; padding: 2px 0 4px; }
.alta-progreso i { flex: 1; height: 8px; border-radius: 999px; background: var(--panel-alto); }
.alta-progreso i.hecho { background: var(--primario); }
.alta-progreso i.actual { background: linear-gradient(90deg, var(--primario) 50%, var(--panel-alto) 50%); }
.alta-cuerpo { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; }
.alta-titulo { font-size: clamp(28px, 8vw, 36px); }
.alta-texto { color: var(--tinta-2); font-size: 17px; max-width: 34ch; }
.alta-pie { display: flex; flex-direction: column; gap: 8px; }
.alta .cara-marco { border-radius: 36px; }
.codigo-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
  background: var(--panel); border: 2px solid var(--borde); font-weight: 900; letter-spacing: .12em;
}

.pasos { display: flex; flex-direction: column; gap: 10px; width: 100%; text-align: left; }
.paso {
  display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center;
  padding: 12px; border-radius: 18px; background: var(--panel); border: 2px solid var(--borde);
}
.paso-num { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 900; background: var(--panel-alto); color: var(--secundario-texto); }
.paso.hecho .paso-num { background: var(--primario); color: var(--sobre-primario); }
.paso b { display: block; }
.paso span { color: var(--tinta-2); font-size: 14px; }
.red {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 6px 12px; border-radius: 12px;
  background: var(--fondo-alto); border: 2px solid var(--borde-alto); font-weight: 900; letter-spacing: .06em;
}
.red svg { width: 18px; height: 18px; color: var(--secundario-texto); }

.espera { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; color: var(--tinta-2); }
.puntos { display: inline-flex; gap: 5px; }
.puntos i { width: 9px; height: 9px; border-radius: 50%; background: var(--secundario-texto); animation: brinco 1s ease-in-out infinite; }
.puntos i:nth-child(2) { animation-delay: .15s; }
.puntos i:nth-child(3) { animation-delay: .3s; }
@keyframes brinco { 0%, 80%, 100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-7px); opacity: 1; } }

.maqueta-notif {
  display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; text-align: left;
  width: min(100%, 340px); padding: 12px; border-radius: 20px;
  background: rgba(240, 246, 250, .95); color: #10222c; box-shadow: 0 14px 40px rgba(0,0,0,.4);
  animation: caer .6s cubic-bezier(.2, 1.4, .4, 1) both;
}
.maqueta-notif img { width: 44px; height: 44px; border-radius: 12px; }
.maqueta-notif b { display: block; font-weight: 900; }
.maqueta-notif span { font-size: 14px; color: #3b5563; }
@keyframes caer { from { transform: translateY(-30px) scale(.95); opacity: 0; } }

.ios-compartir { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--secundario); color: var(--sobre-secundario); vertical-align: middle; }
.ios-compartir svg { width: 18px; height: 18px; }

.exito { display: grid; place-items: center; width: 120px; height: 120px; border-radius: 50%; background: var(--primario); box-shadow: 0 8px 0 var(--primario-canto); color: var(--sobre-primario); animation: pop .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.exito svg { width: 64px; height: 64px; }
@keyframes pop { from { transform: scale(.3); opacity: 0; } }

.sugerencias { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.sugerencias button { min-height: 40px; padding: 6px 14px; border-radius: 999px; background: var(--panel); border: 2px solid var(--borde); font-weight: 800; cursor: pointer; box-shadow: 0 3px 0 var(--borde); }
.sugerencias button:active { transform: translateY(3px); box-shadow: none; }

.ident { width: 100%; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.ident-cab { display: flex; gap: 12px; align-items: center; }
.ident-cab img { width: 84px; height: 84px; object-fit: cover; border-radius: 18px; border: 2px solid var(--borde); }
.ident-cab h3 { font-size: 24px; }
.ident-cab i { color: var(--tinta-2); font-weight: 700; }
.confianza { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: var(--tinta-2); }
.confianza .progreso { flex: 1; height: 10px; }
.rangos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rango { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 14px; background: var(--fondo-alto); text-align: center; }
.rango svg { width: 22px; height: 22px; }
.rango b { font-size: 14px; font-variant-numeric: tabular-nums; }
.rango span { font-size: 11px; color: var(--tinta-3); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.rango.agua svg { color: var(--dato-tierra); }
.rango.temp svg { color: var(--dato-temperatura); }
.rango.luz svg { color: var(--dato-luz); }
.escaneando { position: relative; overflow: hidden; border-radius: 22px; }
.escaneando img { display: block; width: 100%; max-height: 300px; object-fit: cover; }
.escaneando::after {
  content: ""; position: absolute; left: 0; right: 0; height: 36%;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--primario) 45%, transparent), transparent);
  animation: barrer 1.4s ease-in-out infinite;
}
@keyframes barrer { from { top: -36%; } to { top: 100%; } }

/* ================================================================= COFRE === */
.cofre-escena {
  position: relative; flex: 1; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  min-height: 420px;
}
.rayos {
  position: absolute; left: 50%; top: 44%; width: 760px; height: 760px; margin: -380px 0 0 -380px;
  background: repeating-conic-gradient(from 0deg, rgba(255, 220, 120, .16) 0deg 9deg, transparent 9deg 24deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 62%);
  mask-image: radial-gradient(circle, #000 0%, transparent 62%);
  animation: girar 18s linear infinite; pointer-events: none; opacity: .7; transition: opacity .6s;
}
.cofre-escena.abierto .rayos { opacity: 1; animation-duration: 7s; }
@keyframes girar { to { transform: rotate(360deg); } }
.cofre-boton { position: relative; background: none; border: 0; padding: 0; cursor: pointer; }
.cofre-svg { width: min(72vw, 280px); height: auto; display: block; filter: drop-shadow(0 18px 20px rgba(0,0,0,.5)) drop-shadow(0 0 30px rgba(255, 200, 0, .25)); }
.cofre-svg .tapa { transform-origin: 50% 46%; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.cofre-boton.tiembla-1 .cofre-svg { animation: temblor .35s ease-in-out; }
.cofre-boton.tiembla-2 .cofre-svg { animation: temblor .35s ease-in-out 2; }
.cofre-boton.tiembla-2 .tapa { transform: translateY(-6px); }
@keyframes temblor { 20% { transform: rotate(-5deg); } 40% { transform: rotate(5deg); } 60% { transform: rotate(-4deg); } 80% { transform: rotate(3deg); } }
.cofre-escena.abierto .cofre-boton { animation: hundir .5s ease-in both; pointer-events: none; }
@keyframes hundir { to { transform: translateY(80px) scale(.8); opacity: 0; } }
.cofre-toques { display: flex; gap: 8px; }
.cofre-toques i { width: 14px; height: 14px; border-radius: 50%; background: var(--panel-alto); border: 2px solid var(--borde-alto); }
.cofre-toques i.hecho { background: var(--destacado); border-color: var(--destacado-canto); }
.destello { position: fixed; inset: 0; background: #fff; pointer-events: none; opacity: 0; z-index: 50; }
.destello.activo { animation: destello .7s ease-out; }
.destello.oro { background: radial-gradient(circle at 50% 45%, #fff8e1, #ffd54f 60%, #ffb300); }
@keyframes destello { 0% { opacity: 0; } 12% { opacity: .95; } 100% { opacity: 0; } }
.revelado { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.revelado .cara-marco { animation: emerger .7s cubic-bezier(.2, 1.5, .4, 1) both; border-radius: 40px; border-width: 4px; }
@keyframes emerger { from { transform: translateY(90px) scale(.2); opacity: 0; } }
.rareza-cinta {
  --rar: var(--comun);
  padding: 6px 22px; border-radius: 12px; font-weight: 900; letter-spacing: .22em; font-size: 15px;
  background: var(--rar); color: #0c1a22; box-shadow: 0 4px 0 color-mix(in srgb, var(--rar) 60%, #000);
  animation: pop .45s .35s cubic-bezier(.2, 1.6, .4, 1) both;
}
.rareza-cinta.raro { --rar: var(--raro); background: linear-gradient(90deg, #f8bbd0, #d58bff, #80deea); }
.rareza-cinta.epico { --rar: var(--epico); background: linear-gradient(90deg, #ffe082, #ffc107, #fff8e1, #ffb300); }
.revelado h2 { font-size: 38px; animation: pop .45s .5s both; }
.revelado p { color: var(--tinta-2); max-width: 30ch; animation: pop .45s .6s both; }
.nuevo { color: var(--destacado-texto); font-weight: 900; letter-spacing: .12em; font-size: 13px; animation: pop .45s .7s both; }
.confeti { position: fixed; inset: 0; pointer-events: none; z-index: 45; }

/* ============================================================= PALETAS === */
.paletas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.paleta {
  position: relative; display: flex; flex-direction: column; gap: 8px; padding: 10px; text-align: left;
  border-radius: 16px; border: 2px solid var(--borde); background: var(--fondo-alto); color: var(--tinta); cursor: pointer;
}
.paleta.activa { border-color: var(--primario-texto); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primario-texto) 35%, transparent); }
.paleta[aria-disabled="true"] { cursor: not-allowed; }
.paleta b { font-size: 15px; }
.paleta small { color: var(--tinta-3); font-size: 12px; font-weight: 800; }
.muestras { display: grid; grid-template-columns: repeat(10, 1fr); height: 26px; border-radius: 8px; overflow: hidden; }
.muestras i { display: block; }
.paleta[aria-disabled="true"] .muestras { filter: grayscale(1) brightness(.5); }
.paleta-candado { position: absolute; top: 8px; right: 8px; color: var(--tinta-3); }
.paleta-candado svg { width: 16px; height: 16px; }
.chip-paleta { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--fondo-alto); }
.chip-paleta i { width: 10px; height: 10px; border-radius: 50%; }

/* La app se pinta: el círculo que crece desde el cofre (View Transitions). */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: pintar 900ms cubic-bezier(.3, .8, .2, 1) both; }
@keyframes pintar {
  from { clip-path: circle(0 at var(--pintar-x, 50%) var(--pintar-y, 45%)); }
  to { clip-path: circle(150% at var(--pintar-x, 50%) var(--pintar-y, 45%)); }
}

/* ================================================================ CHAT === */
/* La charla ocupa el alto que sobra y `.mensajes` se estira: así el campo de
   escribir queda abajo, donde lo busca el pulgar, en vez de flotar a media
   pantalla como cuando el alto era una resta a ojo. */
.chat { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.chat-cab { display: flex; align-items: center; gap: 12px; }
.chat-cab .cara-marco { border-radius: 20px; flex: none; }
.chat-cab h2 { font-size: 22px; }
.chat-cab p { color: var(--tinta-2); font-size: 14px; }
.mensajes { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.mensaje { max-width: 84%; padding: 10px 14px; border-radius: 18px; font-weight: 700; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.mensaje.de-persona { align-self: flex-end; background: var(--secundario); color: var(--sobre-secundario); border-bottom-right-radius: 6px; }
.mensaje.de-planta { align-self: flex-start; background: var(--panel-alto); border: 2px solid var(--borde); border-bottom-left-radius: 6px; }
.mensaje.de-planta b { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--primario-texto); margin-bottom: 2px; }
.mensaje time { display: block; font-size: 11px; opacity: .7; margin-top: 4px; font-weight: 800; }
.mensaje.escribiendo { color: var(--tinta-2); }
.mensaje-texto { white-space: pre-wrap; }
.mensaje.hablando .mensaje-texto::after { content: "▍"; margin-left: 1px; color: var(--primario-texto); animation: cursor 1s steps(2) infinite; }
@keyframes cursor { 50% { opacity: 0; } }
.chat-vacio { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 18px 8px; color: var(--tinta-2); }
.preguntas { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.preguntas button { min-height: 40px; padding: 6px 14px; border-radius: 999px; background: var(--panel); border: 2px solid var(--borde); color: var(--tinta); font-weight: 800; cursor: pointer; text-align: left; }
.composer {
  position: sticky; bottom: calc(var(--tabs) + 8px); display: flex; flex-direction: column; gap: 6px;
  padding: 10px; border-radius: 20px; background: var(--panel); border: 2px solid var(--borde);
  box-shadow: 0 -8px 24px rgba(var(--fondo-rgb), .8);
}
.composer-fila { display: flex; gap: 8px; align-items: flex-end; }
.composer textarea {
  flex: 1; min-height: 48px; max-height: 140px; resize: none; padding: 12px 14px; border-radius: 14px;
  background: var(--fondo-alto); border: 2px solid var(--borde); color: var(--tinta); font: 700 16px/1.4 var(--fuente);
}
.composer .boton { min-height: 48px; padding: 10px 16px; }
.cuota { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 800; color: var(--tinta-3); }
.cuota b { color: var(--tinta-2); }
.pro {
  display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 18px;
  border: 2px dashed color-mix(in srgb, var(--destacado-texto) 50%, var(--borde));
  background: color-mix(in srgb, var(--destacado) 8%, var(--panel));
}
.pro b { color: var(--destacado-texto); letter-spacing: .08em; text-transform: uppercase; font-size: 13px; }
.cuidados { display: grid; gap: 8px; }
.cuidado { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--fondo-alto); }
.cuidado dt { font-size: 12px; color: var(--tinta-3); font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.cuidado dd { margin: 0; color: var(--tinta-2); font-size: 14px; }
@media (max-width: 380px) { .cuidado { grid-template-columns: 1fr; } }

.banda {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px;
  background: color-mix(in srgb, var(--atencion) 12%, var(--panel)); border: 2px solid color-mix(in srgb, var(--atencion-texto) 40%, transparent);
  font-size: 14px; font-weight: 700;
}
.banda .boton { margin-left: auto; }
.banda svg { flex: none; }

/* ============================================================ ESTILOS === */
/* Lo que los tokens no pueden decir, por paleta cosmética (lib/paletas.mjs,
   `estilo`; lo pone tema.mjs en <html data-estilo>). */
html[data-estilo="oled"] body { background: var(--fondo); }
html[data-estilo="oled"] .tabs { background: var(--fondo); }
html[data-estilo="oled"] .panel, html[data-estilo="oled"] .tarea, html[data-estilo="oled"] .contador { background: var(--fondo); }
html[data-estilo="cristal"] body {
  background:
    radial-gradient(60% 40% at 15% 10%, color-mix(in srgb, var(--secundario) 28%, transparent) 0%, transparent 70%),
    radial-gradient(50% 40% at 85% 30%, color-mix(in srgb, var(--acento) 24%, transparent) 0%, transparent 70%),
    radial-gradient(60% 50% at 50% 90%, color-mix(in srgb, var(--primario) 18%, transparent) 0%, transparent 70%),
    var(--fondo);
  background-attachment: fixed;
}
html[data-estilo="cristal"] .panel, html[data-estilo="cristal"] .heroe, html[data-estilo="cristal"] .tarea,
html[data-estilo="cristal"] .contador, html[data-estilo="cristal"] .planta, html[data-estilo="cristal"] .modelo,
html[data-estilo="cristal"] .pildora, html[data-estilo="cristal"] .composer, html[data-estilo="cristal"] .mensaje.de-planta,
html[data-estilo="cristal"] .paleta, html[data-estilo="cristal"] .aviso {
  background: color-mix(in srgb, var(--panel) 66%, transparent);
  border-color: rgba(255, 255, 255, .16);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
html[data-estilo="cristal"] .tabs { background: color-mix(in srgb, var(--fondo) 70%, transparent); }
html[data-estilo="cristal"] .barra { background: linear-gradient(color-mix(in srgb, var(--fondo) 80%, transparent) 65%, transparent); }
html[data-estilo="solar"] body {
  background: radial-gradient(120% 60% at 50% -10%, color-mix(in srgb, var(--destacado) 22%, transparent) 0%, transparent 60%), var(--fondo);
  background-attachment: fixed;
}

/* ============================================================ BOTÁNICA === */
.avanzado { padding: 0; }
.avanzado summary { display: flex; flex-direction: column; gap: 2px; padding: 16px; cursor: pointer; list-style: none; }
.avanzado summary::-webkit-details-marker { display: none; }
.avanzado summary .panel-tit { margin: 0; }
.avanzado summary::after { content: "›"; position: absolute; right: 18px; top: 14px; font-size: 22px; color: var(--tinta-3); transition: transform .2s; }
.avanzado { position: relative; }
.avanzado[open] summary::after { transform: rotate(90deg); }
.botanica { display: flex; flex-direction: column; gap: 10px; padding: 0 16px 16px; }
.botanica h4 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); margin-top: 6px; }
.botanica-bloque { display: flex; flex-direction: column; gap: 6px; }
.botanica-que { font-size: 13px; color: var(--tinta-3); }
.prevision-titulo { font-weight: 900; font-size: 17px; }

/* ============================================================ CUIDADOR === */
.enlace-nuevo { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding: 12px; border-radius: 14px; background: var(--fondo-alto); border: 2px solid var(--borde); }
.enlace-nuevo input { width: 100%; padding: 10px 12px; border-radius: 10px; border: 2px solid var(--borde); background: var(--panel); color: var(--tinta); font: 700 14px/1.3 ui-monospace, Menlo, Consolas, monospace; }
.enlaces { margin-top: 8px; }
.sitter-cab { text-align: center; display: flex; flex-direction: column; gap: 2px; padding-top: 6px; }
.sitter-cab h2 { font-size: 30px; }
.sitter .tarea-ir { background: none; border: 0; padding: 0; color: inherit; text-align: left; }
.sitter-pie { text-align: center; padding: 8px 0 20px; }

/* ========================================================= INVERNADERO === */
.invernadero-enlace { display: flex; justify-content: center; margin-top: -4px; }
.estante-marco { padding: 24px 0 0; }
.estante { display: flex; gap: 12px; align-items: flex-end; justify-content: center; flex-wrap: wrap; padding: 0 8px 6px; list-style: none; margin: 0; }
.estante > li { display: flex; }
.maceta { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; padding: 0; color: var(--tinta); cursor: pointer; }
.maceta .cuerpo[data-sev="sev-urgente"] { animation: latido-cuerpo 1.4s ease-in-out infinite; }
.maceta .cuerpo[data-sev="sev-atencion"] { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--atencion) 55%, transparent)); }
@keyframes latido-cuerpo { 50% { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--urgente) 70%, transparent)); } }
.maceta b { font-size: 14px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maceta span { font-size: 12px; color: var(--tinta-3); font-weight: 800; }
.estante-tabla { height: 14px; border-radius: 4px; background: linear-gradient(180deg, color-mix(in srgb, var(--destacado) 35%, #5b3a1e), #3a2412); box-shadow: 0 8px 0 #2a1a0c, 0 14px 24px rgba(0,0,0,.4); }

/* =============================================================== ÁLBUM === */
.album-acciones { flex-wrap: wrap; }
.album-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.album-mini { display: flex; flex-direction: column; gap: 4px; background: var(--panel); border: 2px solid var(--borde); border-radius: 14px; padding: 4px; color: var(--tinta-2); cursor: pointer; }
.album-mini img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; }
.album-mini span { font-size: 11px; font-weight: 800; }
.album-rota { display: grid; place-items: center; aspect-ratio: 1; color: var(--tinta-3); }
.album-grande { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.album-grande img { width: 100%; max-height: 60vh; object-fit: contain; border-radius: 18px; background: #000; }
.album-grande figcaption { color: var(--tinta-2); font-size: 14px; }
.camara { position: fixed; inset: 0; z-index: 80; background: #000; display: flex; flex-direction: column; }
.camara-visor { position: relative; flex: 1; overflow: hidden; }
.camara-visor video, .camara-visor .fantasma { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.camara-visor .fantasma { opacity: .3; pointer-events: none; }
.camara-nota { color: #fff; font-size: 14px; text-align: center; padding: 8px 16px; background: rgba(0,0,0,.6); }
.camara-botones { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px calc(18px + env(safe-area-inset-bottom, 0px)); background: #000; }
.camara-disparo { width: 74px; height: 74px; border-radius: 50%; padding: 0; }
.comparar { display: flex; flex-direction: column; gap: 8px; }
.comparar-marco { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 18px; background: #000; }
.comparar-marco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.comparar-linea { position: absolute; top: 0; bottom: 0; width: 3px; background: #fff; transform: translateX(-50%); box-shadow: 0 0 8px rgba(0,0,0,.6); }
.comparar-et { position: absolute; bottom: 8px; padding: 4px 8px; border-radius: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; font-weight: 800; }
.comparar-et.izq { left: 8px; } .comparar-et.der { right: 8px; }
.comparar input[type=range] { width: 100%; }

/* =========================================================== PASAPORTE === */
.pasaporte {
  background: #fdfcf8; color: #1b1b1b; border-radius: 12px; padding: 28px 26px;
  display: flex; flex-direction: column; gap: 18px; font-weight: 600;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.pas-cab { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; border-bottom: 3px solid #1b1b1b; padding-bottom: 14px; }
.pas-eyebrow { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #5a5a5a; font-weight: 900; }
.pasaporte h1 { font-size: 34px; color: #1b1b1b; }
.pas-especie { color: #444; font-size: 15px; }
.pas-rooti { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; color: #444; text-align: center; }
.pas-rooti b { color: #1b1b1b; font-size: 14px; }
.pas-cara { border-radius: 22px; overflow: hidden; border: 3px solid #1b1b1b; }
.pas-cara .cara { display: block; }
.pas-bloque h2 { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #5a5a5a; margin-bottom: 8px; }
.pas-datos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; margin: 0; }
.pas-dato dt { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #6a6a6a; font-weight: 900; }
.pas-dato dd { margin: 0; font-size: 16px; font-weight: 800; color: #1b1b1b; }
.pas-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.pas-tabla th, .pas-tabla td { text-align: left; padding: 6px 4px; border-bottom: 1px solid #ddd; }
.pas-tabla th { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #6a6a6a; }
.pas-tabla td:first-child { font-weight: 900; }
.pas-nota { color: #444; font-size: 13px; margin-top: 8px; }
.pas-cuidados { display: grid; gap: 6px; margin: 0; }
.pas-cuidados div { display: grid; grid-template-columns: 110px 1fr; gap: 8px; font-size: 13px; }
.pas-cuidados dt { font-weight: 900; color: #1b1b1b; }
.pas-cuidados dd { margin: 0; color: #333; }
.pas-fotos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.pas-fotos figure { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.pas-fotos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 2px solid #1b1b1b; }
.pas-fotos figcaption { font-size: 12px; color: #444; }
.pas-pie { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 11px; color: #5a5a5a; border-top: 1px solid #ccc; padding-top: 10px; }
@media print {
  @page { size: A4; margin: 14mm; }
  html, body { background: #fff !important; color: #000; }
  .barra, .tabs, .aviso, .no-imprimir { display: none !important; }
  .contenido { max-width: none; padding: 0; }
  .pasaporte { box-shadow: none; border-radius: 0; padding: 0; break-inside: avoid; }
  .pas-fotos img { break-inside: avoid; }
}

/* ============================================================ CARICIAS === */
/* Los corazones que suben al acariciar una cara (lib/particulas.mjs). */
.particula { position: absolute; z-index: 5; pointer-events: none; transform: translate(-50%, -50%); will-change: transform, opacity; line-height: 0; }
.particula svg { fill: currentColor; stroke: none; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .3)); }

/* ================================================================ DESK === */
/* El modo escritorio: la cara sola, a pantalla completa (vistas/desk.mjs). */
body.desk { padding-bottom: 0; }
body.desk .barra, body.desk .tabs { display: none; }
body.desk .contenido { max-width: none; padding: 0; }
.desk {
  position: fixed; inset: 0; z-index: 25; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  background: radial-gradient(80% 60% at 50% 40%, var(--resplandor) 0%, transparent 70%), var(--fondo);
  transition: background .8s;
}
.desk-cara {
  position: relative; border-radius: 12%; background: var(--piel, var(--panel-alto));
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 4px rgba(255, 255, 255, .06);
  transition: filter .8s, box-shadow .8s;
}
.desk-cara .cara { display: block; border-radius: 12%; }
.desk-nombre { text-align: center; color: var(--tinta-2); padding: 0 24px; max-width: 520px; transition: opacity .8s; }
.desk-nombre b { display: block; font-size: 24px; color: var(--tinta); }
.desk-controles {
  position: absolute; top: calc(var(--arriba) + 12px); left: 12px; right: 12px; z-index: 2;
  display: flex; justify-content: space-between; gap: 8px;
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.desk.con-controles .desk-controles { opacity: 1; pointer-events: auto; }
.desk-noche {
  position: absolute; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  color: var(--tinta-3); opacity: 0; transition: opacity .8s;
}
.desk.noche { background: #000; }
.desk.noche .desk-cara { filter: brightness(.35) saturate(.7); box-shadow: none; }
.desk.noche .desk-nombre { opacity: .3; }
.desk.noche .desk-noche { opacity: .6; }
.desk .panel.vacio { margin: 16px; }

/* El vínculo en Hoy: una fila por planta, con su etapa. */
.panel-vinculo { display: flex; flex-direction: column; gap: 10px; }
.vinculos { display: flex; flex-direction: column; gap: 10px; }
.vinculo-fila { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.vinculo-nombre { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.vinculo-fila small { color: var(--tinta-3); font-size: 13px; }
.etapa-chip { font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--destacado-texto); }

/* Calibrar el sensor y la maceta (vistas/calibrar.mjs). */
.calibrar { display: flex; flex-direction: column; gap: 10px; }
.calibrar-paso { font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--secundario-texto); }
.calibrar-crudo { display: flex; align-items: baseline; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--fondo-alto); border: 2px solid var(--borde); }
.calibrar-crudo b { font-size: 34px; font-variant-numeric: tabular-nums; }
.calibrar-crudo small { color: var(--tinta-3); }
.selector-modo { display: grid; grid-template-columns: repeat(4, 1fr); }
.datos .dato-ancho { grid-column: 1 / -1; }

/* ============================================================== CUERPO === */
/* El Rooti entero (lib/cuerpo.mjs). Todo lo que se mueve lo mueve el motor 3D
   (lib/rooti3d/): acá no hay ni una animación de CSS, porque una figura que
   respira por transform y además por vértices respira dos veces. Lo único que
   queda en la hoja es dónde va cada cosa. */
.cuerpo { position: relative; flex: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.cuerpo-3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* La ventana de la cara no se pinta: la cara va pegada sobre el cuerpo en 3D.
   Existe para que la ficha sepa dónde está la boca cuando le tira un snack, y
   para tener adentro el canvas del firmware, que es la textura: sigue
   dibujándose (por eso no es display:none, que lo pausaría) pero no se ve. */
.cuerpo-ventana { position: absolute; pointer-events: none; }
.cuerpo-cara-fuente { position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; }
/* Sin WebGL el componente dibuja el cuerpo plano con la cara encima; ahí sí
   conviene que se vea que está vivo. */
.cuerpo.sin-3d .cuerpo-3d { animation: respirar 3.6s ease-in-out infinite; transform-origin: 50% 94%; }
@keyframes respirar { 50% { transform: scale(1.012, .985); } }

/* La ficha: la escena de la mascota. */
.heroe-mascota { padding-top: 22px; }
.escena-mascota { position: relative; display: grid; place-items: center; width: 100%; touch-action: pan-y; }
.esponja-capa { position: absolute; inset: 0; z-index: 6; touch-action: none; cursor: none; }
.esponja-capa[hidden] { display: none; }
.esponja {
  position: absolute; left: 0; top: 0; width: 46px; height: 34px; margin: -17px 0 0 -23px; pointer-events: none;
  border-radius: 12px 14px 10px 16px; background: linear-gradient(180deg, #fff59d 0 58%, #81c784 58%);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.15), 0 3px 6px rgba(0,0,0,.25);
}
.esponja::after {
  content: ""; position: absolute; left: 8px; top: 6px; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.7); box-shadow: 14px 4px 0 -1px rgba(255,255,255,.6), 24px 0 0 rgba(255,255,255,.5);
}
.particula.burbuja {
  border-radius: 50%; border: 2px solid rgba(255, 255, 255, .95);
  background: radial-gradient(circle at 32% 30%, #fff 0 18%, rgba(179, 229, 252, .45) 22%, rgba(179, 229, 252, .15));
}
.gota-snack { position: absolute; z-index: 6; pointer-events: none; color: #4fc3f7; line-height: 0; animation: gota-a-la-boca .85s cubic-bezier(.4, -.3, .6, 1) both; }
.gota-snack svg { fill: currentColor; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
@keyframes gota-a-la-boca { 0% { transform: translate(-50%, -260%) scale(1.3); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(.2); opacity: 0; } }
.panel-mascota { display: flex; flex-direction: column; gap: 12px; }
.barras-mascota { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.barra-mascota { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.barra-mascota-cab { display: flex; justify-content: space-between; align-items: baseline; font-weight: 900; }
.barra-mascota-cab b { font-variant-numeric: tabular-nums; }
.barra-mascota small { color: var(--tinta-3); font-size: 12px; line-height: 1.3; }
.barra-mascota.salud .progreso i { background: var(--bien); }
.barra-mascota.felicidad .progreso i { background: var(--primario); }
.progreso.vacia { opacity: .5; }
.boton.activo { outline: 3px solid var(--primario-texto); outline-offset: 2px; }
.mascota-pista { margin: 0; }
.mascota-noche { margin: 0; font-weight: 800; color: var(--tinta-2); font-size: 14px; }

/* El cofre y el alta: el Rooti reconocido y la piel que salió. */
.cofre-reconocido { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 18px; background: var(--panel); border: 2px solid var(--borde); max-width: 360px; }
.cofre-reconocido p { display: flex; flex-direction: column; gap: 2px; }
.cofre-reconocido span { color: var(--tinta-2); font-size: 14px; }
.revelado-escena { display: grid; place-items: center; padding: 8px 18px 0; border-radius: 40px; background: radial-gradient(closest-side, var(--piel-fondo, var(--panel-alto)), transparent); animation: emerger .7s cubic-bezier(.2, 1.5, .4, 1) both; }
.revelado-piel { font-weight: 900; color: var(--tinta) !important; }
.cofre-escena.sale-epico .rayos { background: repeating-conic-gradient(from 0deg, rgba(255, 213, 79, .34) 0deg 9deg, transparent 9deg 24deg); }
.cofre-escena.sale-raro .rayos { background: repeating-conic-gradient(from 0deg, rgba(213, 139, 255, .24) 0deg 9deg, transparent 9deg 24deg); }
.reconocido { display: grid; place-items: center; }
.alta-lema { font-style: italic; color: var(--tinta-2); text-align: center; }

/* Los temas claros de las pieles: sombras más suaves. */
html[data-estilo="claro"] .cara-marco { border-color: color-mix(in srgb, var(--borde) 80%, transparent); box-shadow: 0 4px 0 color-mix(in srgb, var(--borde) 90%, #000 10%); }
html[data-estilo="claro"] .cofre-svg { filter: drop-shadow(0 14px 14px rgba(0,0,0,.18)) drop-shadow(0 0 30px rgba(255, 200, 0, .25)); }
html[data-estilo="claro"] .rayos { opacity: .45; }
html[data-estilo="claro"] .estante-tabla { box-shadow: 0 8px 0 color-mix(in srgb, var(--borde-alto) 60%, #5b3a1e), 0 14px 18px rgba(0,0,0,.12); }

/* La hora de prueba del emulador (lib/reloj.mjs). */
.pildora-demo { position: fixed; left: 50%; bottom: calc(var(--tabs) + 10px); transform: translateX(-50%); z-index: 30; padding: 6px 12px; border-radius: 999px; background: var(--atencion); color: var(--sobre-atencion); font-weight: 900; font-size: 13px; border: 0; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .cuerpo.sin-3d .cuerpo-3d { animation: none !important; }
  .rayos { animation: none; }
  ::view-transition-new(root) { animation: none; }
}

@media (min-width: 720px) {
  .contenido { padding-top: 12px; }
  .contadores { gap: 12px; }
}