/* ============================================================
   BedMatch y Pantallas (Tarea 5) — las dos viven dentro del shell (cabecera,
   cápsula, barra, de la Tarea 2), así que aquí solo va lo que
   `analyses/show` y `screen_choices/new` dibujan dentro de `.shell__cuerpo`.
   Fuente: docs/specs/2026-09-21-tienda-liquid-glass.md, "BedMatch" y
   "Pantallas".

   `.zona`, `.zona--dominante`, `.zona--sin-modulo`, `.zona__pct`, `.signo`,
   `.base__btn`, `.analisis__vacio`, `.analisis__espera`,
   `.analisis__apertura` y `.analisis__nota` son contrato (spec, "Contratos
   que no se rompen"): las afirman las pruebas de `analyses_controller_test`,
   `quiz_controller_test`, `bed_commands_controller_test` y compañía. Todo lo
   demás es nuevo o solo estilo.
   ============================================================ */

/* ── Vacío y midiendo: una sola tarjeta centrada (spec, "BedMatch") ───────
   Sin desenfoque: son contenido, no algo que flote sobre lo que se desplaza
   (decisión 3 de la spec). */
body.tablet .analisis__vacio,
body.tablet .analisis__espera {
  width: min(560px, 100%);
  margin: var(--margen) auto;
  text-align: center;
}
body.tablet .analisis__titulo {
  margin: var(--space-2) 0;
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  letter-spacing: -0.01em;
  color: var(--tinta-1);
}
body.tablet .analisis__ayuda { margin: 0; color: var(--tinta-2); }
/* El botón de arrancar BedMatch dentro de la tarjeta del vacío: `.btn` es
   inline-flex y la tarjeta ya centra su texto, así que solo hace falta
   separarlo del párrafo — el mismo hueco que separa los bloques del resto de
   la pantalla. */
body.tablet .analisis__vacio .analisis__iniciar { margin-top: var(--hueco); }

/* La lista de pasos del recorrido (spec, estado "Midiendo"): SOLO texto —
   sin anillo, sin cifras en vivo y sin marcar un "paso actual", que es un
   dato que el iPad no tiene (no recibe muestras en vivo; ver "Fuera de
   alcance" de la spec). */
body.tablet .analisis__pasos {
  margin: var(--hueco) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: left;
}
body.tablet .analisis__pasos li {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radio-interior);
  background: var(--vidrio-2);
  color: var(--tinta-2);
  font-size: var(--text-s);
}

/* ── Resultado: dos columnas en horizontal (spec: "izquierda
   .analisis__apertura, las cuatro .zona... .signos; derecha: los botones de
   la base y la acción primaria hacia el modo cliente") ───────────────────── */
body.tablet .analisis__cuerpo {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--hueco);
  align-items: start;
}
@media (orientation: portrait) {
  body.tablet .analisis__cuerpo { grid-template-columns: 1fr; }
}
body.tablet .analisis__bloque { display: flex; flex-direction: column; gap: var(--space-2); }
body.tablet .analisis__acciones { display: flex; flex-direction: column; gap: var(--hueco); }
body.tablet .analisis__mover { display: flex; flex-direction: column; gap: var(--space-3); }
/* Los dos botones de ancho completo de la columna de acciones. Cada uno viene
   en su propio `<form>` (`button_to`), que es el hijo del flex y ya se estira
   solo; el 100% es para el botón DENTRO de ese formulario, que si no se
   quedaría del ancho de su texto. */
body.tablet .analisis__continuar,
body.tablet .analisis__acciones .analisis__iniciar { width: 100%; }

/* ── El resultado en sí (`_resultado.html.erb`): lo usan el vendedor
   (`analyses/show`) y el cliente (`analyses/_en_quiz`), siempre la misma
   tarjeta de vidrio — una sola piel para el mismo dato, lo vea quien lo
   vea. ─────────────────────────────────────────────────────────────────── */
body.tablet .analisis__resultado { display: flex; flex-direction: column; gap: var(--space-4); }
body.tablet .analisis__apertura { margin: 0; font-size: var(--text-l); color: var(--tinta-1); }
body.tablet .analisis__nota { margin: 0; font-size: var(--text-s); color: var(--tinta-3); }

/* Las cuatro zonas, como círculos (spec: "cuyo diámetro y color siguen
   --carga con la escala ámbar→verde"). `--carga` (0..1) llega inline desde
   la vista — es el mismo dato que antes llenaba una barra de progreso; ahora
   infla el círculo y mueve su color. */
body.tablet .zonas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--hueco);
}
/* En compacto las cuatro no caben en un renglón y el reparto libre las dejaba
   3 + 1, que se lee como un accidente. Dos y dos: mismo dato, reparto
   deliberado. */
@media (orientation: portrait) and (max-width: 599px) {
  body.tablet .zonas {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
  }
}
body.tablet .zona {
  --carga: 0;
  /* Variables LOCALES del bloque (mismo patrón que ya usaba `.zona` en
     `tablet.css`): el diámetro va de 1.1 a 2 veces `--tap`, nunca un número
     suelto en la regla. El mínimo es 1.1 y no 1 para que el porcentaje quepa
     y se lea dentro del círculo aun con la carga en cero. */
  --zona-chica: calc(var(--tap) * 1.1);
  --zona-grande: calc(var(--tap) * 2);
  /* Rejilla de dos renglones y no una columna flex: el primer renglón mide
     SIEMPRE el diámetro máximo y el círculo se apoya en su base
     (`align-items: end`), así que las cuatro etiquetas caen en el mismo
     renglón por más que los diámetros difieran. Con la columna flex, cada
     etiqueta colgaba a la altura de su propio círculo y «Hombros der.»
     flotaba más arriba que sus vecinas. */
  display: grid;
  grid-template-rows: var(--zona-grande) auto;
  align-items: end;
  justify-items: center;
  gap: var(--space-2);
  width: var(--zona-grande);
}
body.tablet .zona__circulo {
  width: calc(var(--zona-chica) + (var(--zona-grande) - var(--zona-chica)) * var(--carga));
  height: calc(var(--zona-chica) + (var(--zona-grande) - var(--zona-chica)) * var(--carga));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radio-control);
  background: color-mix(in srgb, var(--color-warn) calc(var(--carga) * 100%), var(--color-ok));
  color: var(--solido-tinta);
  transition: width var(--transicion), height var(--transicion), background var(--transicion);
}
/* La zona con más carga: mismo realce de "dato, no preferencia" que ya usan
   `.producto--aire`/`.pieza--on`. */
body.tablet .zona--dominante .zona__circulo { outline: 2px solid var(--solido); outline-offset: 2px; }
/* Sin módulo: gris y con su propia tinta, nunca un círculo de un color que
   nadie midió — `--carga` ya llega en 0 desde la vista (`carga.to_f` de
   `nil` es 0), así que el círculo ya nace del tamaño más chico. */
body.tablet .zona--sin-modulo .zona__circulo { background: var(--vidrio-2); color: var(--tinta-2); }
body.tablet .zona__pct { font-size: var(--text-s); font-weight: var(--weight-medium); }
body.tablet .zona__nombre { font-size: var(--text-xs); color: var(--tinta-2); text-align: center; }

/* Pulso y respiración: dos cifras grandes (spec, "BedMatch"). */
body.tablet .signos { display: flex; gap: var(--hueco); }
body.tablet .signo {
  flex: 1;
  padding: var(--space-3);
  border: 1px solid var(--vidrio-borde);
  border-radius: var(--radio-interior);
  background: var(--vidrio-2);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-2);
}
body.tablet .signo__valor { font-size: var(--text-xl); font-weight: var(--weight-medium); color: var(--tinta-1); }
body.tablet .signo__unidad { font-size: var(--text-s); color: var(--tinta-2); }

/* Los presets de la base (spec: "los botones de la base"). */
body.tablet .base { display: flex; flex-wrap: wrap; gap: var(--space-2); }
body.tablet .base__btn { flex: 1 1 auto; }

/* ============================================================
   Pantallas (`screen_choices/new`, dentro del shell) — spec, "Pantallas".
   Lista de renglones de vidrio; la actual, en --solido.
   ============================================================ */
body.tablet .pantallas__ayuda { margin: 0 0 var(--hueco); color: var(--tinta-2); }
body.tablet .pantallas__lista {
  list-style: none;
  margin: 0 0 var(--hueco);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 640px;
}
/* El `<form>` que genera `button_to` no puede ser el renglón (mismo patrón
   que `.producto__acciones form`/`.barra__zona`, `tienda/20-shell.css` y
   `40-catalogo.css`): sin `display: contents` el botón queda anidado un
   nivel más y dos renglones consecutivos ya no comparten el mismo `gap`. */
body.tablet .pantallas__lista form { display: contents; }
body.tablet .pantallas__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--tap);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--vidrio-borde);
  border-radius: var(--radio-interior);
  background: var(--vidrio-2);
  color: var(--tinta-1);
  font: var(--weight-medium) var(--text-m) var(--font-sans);
  text-align: left;
  transition: background var(--transicion);
}
/* Solo la pantalla que SÍ es un botón (`button_to`) resalta al tocar — la
   actual es un `<div>` sin acción, y `:hover` sobre un elemento no
   interactivo sería una pista falsa. */
body.tablet button.pantallas__item { cursor: pointer; }
body.tablet button.pantallas__item:hover { background: var(--vidrio-activo); }
body.tablet .pantallas__item--actual { background: var(--solido); color: var(--solido-tinta); border-color: transparent; }
body.tablet .pantallas__icono { flex: none; font-size: var(--text-l); }
body.tablet .pantallas__nombre { flex: 1; }
body.tablet .pantallas__nombre small { display: block; font-weight: var(--weight-regular); font-size: var(--text-s); opacity: .8; }
body.tablet .pantallas__ir { flex: none; color: var(--tinta-2); }