/* ============================================================
   ENTRENADOR — componentes.css
   ============================================================ */

/* ---- ESTRUCTURA GENERAL ----------------------------------- */

.app {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.vista {
  flex: 1;
  padding-top: calc(var(--safe-top) + var(--h-navbar));
  padding-bottom: calc(var(--safe-bottom) + var(--h-tabbar) + var(--s6));
  animation: entrar var(--dur-base) var(--ease-out);
}

.vista[hidden] { display: none; }

@keyframes entrar {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ---- BARRA SUPERIOR --------------------------------------- */

.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: calc(var(--safe-top) + var(--h-navbar));
  padding-top: var(--safe-top);
  display: flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  border-bottom: .5px solid transparent;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

/* Se activa al hacer scroll: el título grande se encoge aquí */
.navbar.solida {
  background: var(--material);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: var(--separator);
}

.navbar__titulo {
  font: var(--t-headline);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.navbar.solida .navbar__titulo {
  opacity: 1;
  transform: none;
}

/* ---- TÍTULO GRANDE ---------------------------------------- */

.titulo-grande {
  padding: var(--s2) var(--s4) var(--s4);
}

.titulo-grande h1 {
  font: var(--t-large-title);
  letter-spacing: .37px;
}

.titulo-grande p {
  margin-top: var(--s1);
  font: var(--t-subhead);
  color: var(--text-2);
}

/* ---- LISTA AGRUPADA (la firma de iOS) --------------------- */

.grupo-titulo {
  padding: var(--s5) var(--s4) var(--s2);
  font: var(--t-footnote);
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-2);
}

.grupo {
  background: var(--bg-elevated);
  border-radius: var(--r-md);
  margin: 0 var(--s4) var(--s2);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.fila {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 48px;
  padding: var(--s3) var(--s4);
  position: relative;
}

/* Separador que no llega al borde izquierdo — detalle iOS */
.fila + .fila::before {
  content: "";
  position: absolute;
  top: 0; left: var(--s4); right: 0;
  height: .5px;
  background: var(--separator);
}

.fila__texto { flex: 1; min-width: 0; }

.fila__valor {
  font: var(--t-body);
  color: var(--text-2);
  text-align: right;
  white-space: nowrap;
}

.fila--pulsable { transition: background var(--dur-fast) var(--ease-out); }
.fila--pulsable:active { background: var(--bg-input); }

/* Chevron de navegación */
.fila--nav::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 2px solid var(--text-3);
  border-bottom: 2px solid var(--text-3);
  transform: rotate(-45deg);
  flex-shrink: 0;
}

/* Punto de estado */
.punto {
  width: 10px; height: 10px;
  border-radius: var(--r-full);
  flex-shrink: 0;
  background: var(--text-3);
}
.punto--ok    { background: var(--accent); }
.punto--aviso { background: var(--orange); }
.punto--error { background: var(--red); }

.insignia-check {
  width: 26px; height: 26px;
  border-radius: var(--r-full);
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.insignia-check svg { width: 15px; height: 15px; }
.insignia-check--ok    { background: var(--accent-soft); color: var(--accent); }
.insignia-check--aviso { background: rgba(255,159,10,.14); color: var(--orange); }
.insignia-check--error { background: rgba(255,69,58,.14); color: var(--red); }

/* ---- BOTONES ---------------------------------------------- */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  padding: 0 var(--s5);
  border-radius: var(--r-md);
  font: var(--t-headline);
  transition: transform var(--dur-fast) var(--ease-spring),
              opacity var(--dur-fast) var(--ease-out);
}

.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .4; pointer-events: none; }

.btn--principal {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 14px rgba(48, 209, 88, .32);
}
.btn--principal:active { box-shadow: 0 2px 8px rgba(48, 209, 88, .24); }

.btn--secundario {
  background: var(--bg-elevated);
  color: var(--accent);
  box-shadow: var(--shadow-card);
}

.btn--texto {
  min-height: 44px;
  color: var(--accent);
  background: none;
}

.btn-zona {
  padding: var(--s4);
  display: grid;
  gap: var(--s3);
}

/* ---- BARRA INFERIOR --------------------------------------- */

.tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-bottom: var(--safe-bottom);
  height: calc(var(--safe-bottom) + var(--h-tabbar));

  background: var(--material);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: .5px solid var(--separator);
}

.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--text-3);
  font: var(--t-caption);
  transition: color var(--dur-fast) var(--ease-out);
}

.tab__marca {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px 14px;
  border-radius: var(--r-full);
  transition: background var(--dur-base) var(--ease-spring);
}
.tab.activa .tab__marca { background: var(--accent-soft); }

.tab svg { width: 26px; height: 26px; }
.tab.activa { color: var(--accent); }

/* ---- TARJETA DE DIAGNÓSTICO ------------------------------- */

.diag {
  margin: 0 var(--s4) var(--s2);
  padding: var(--s4);
  background: var(--bg-elevated);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
}

.diag__cabecera {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s3);
}

.insignia {
  padding: 3px var(--s2);
  border-radius: var(--r-full);
  font: var(--t-caption);
  font-weight: 600;
  background: var(--accent-soft);
  color: var(--accent);
}
.insignia--error { background: rgba(255,69,58,.12); color: var(--red); }

/* ---- GUÍA DE INSTALACIÓN (iOS) ---------------------------- */

.guia {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  padding: calc(var(--safe-top) + var(--s8)) var(--s5)
           calc(var(--safe-bottom) + var(--s6));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.guia__marca {
  width: 76px; height: 76px;
  border-radius: 18px;
  margin-bottom: var(--s6);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

.guia__pasos {
  margin: var(--s6) 0 auto;
  display: grid;
  gap: var(--s5);
}

.paso {
  display: flex;
  gap: var(--s4);
  align-items: flex-start;
}

.paso__num {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: var(--r-full);
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  font: var(--t-footnote);
  font-weight: 700;
}

.paso__texto { padding-top: 3px; }

.icono-compartir {
  display: inline-block;
  vertical-align: -4px;
  width: 17px; height: 19px;
  margin: 0 2px;
}

/* ---- LOGIN -------------------------------------------------
   Reutiliza .guia (pantalla completa, áreas seguras) con un
   z-index mayor: la sesión se resuelve antes que cualquier otra
   pantalla superpuesta, como la guía de instalación de iOS. */

.guia--login { z-index: 300; }

.campo {
  display: block;
  width: 100%;
  min-height: 50px;
  padding: 0 var(--s4);
  margin-bottom: var(--s3);
  background: var(--bg-input);
  border-radius: var(--r-md);
  font: var(--t-body);
  color: var(--text);
}

.campo::placeholder { color: var(--text-3); }

/* ---- ASISTENTE DE ONBOARDING -------------------------------
   Mismo patrón de pantalla completa que login/guia, pero con
   navegación propia (puntos + atrás/siguiente) en vez de un
   solo botón de salida. */

.asistente {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

.asistente__header {
  padding: calc(var(--safe-top) + var(--s4)) var(--s4) var(--s3);
  flex-shrink: 0;
}

.asistente__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.dot {
  width: 6px; height: 6px;
  border-radius: var(--r-full);
  background: var(--text-3);
  transition: all var(--dur-fast) var(--ease-out);
}
.dot.activa { width: 18px; background: var(--accent); }
.dot.hecho  { background: var(--accent); opacity: .5; }

.asistente__cuerpo {
  flex: 1;
  overflow-y: auto;
  padding: var(--s2) var(--s5) var(--s6);
  -webkit-overflow-scrolling: touch;
}

.asistente__paso-titulo {
  font: var(--t-title-1);
  margin-bottom: var(--s1);
}
.asistente__paso-sub {
  font: var(--t-subhead);
  color: var(--text-2);
  margin-bottom: var(--s6);
}

.asistente__pie {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s5) calc(var(--safe-bottom) + var(--s3));
  border-top: .5px solid var(--separator);
  background: var(--material);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

.asistente__error {
  font: var(--t-footnote);
  color: var(--red);
  text-align: center;
  min-height: 16px;
  margin: 0 0 var(--s2);
}

/* ---- Chips (selección múltiple o única) --------------------- */

.fila-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s6);
}

.chip {
  padding: var(--s2) var(--s4);
  border-radius: var(--r-full);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-card);
  font: var(--t-subhead);
  color: var(--text);
  transition: all var(--dur-fast) var(--ease-out);
}
.chip.activa {
  background: var(--accent);
  color: #fff;
  box-shadow: none;
}
.chip.deshabilitada { opacity: .35; pointer-events: none; }

/* ---- Tarjeta de opción grande (objetivo) --------------------- */

.tarjeta-opcion {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  padding: var(--s4);
  margin-bottom: var(--s3);
  background: var(--bg-elevated);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  border: 1.5px solid transparent;
  text-align: left;
  transition: all var(--dur-fast) var(--ease-out);
}
.tarjeta-opcion.activa { border-color: var(--accent); }
.tarjeta-opcion__texto { flex: 1; }
.tarjeta-opcion__titulo { font: var(--t-headline); }
.tarjeta-opcion__desc { font: var(--t-footnote); color: var(--text-2); margin-top: 2px; }

.tarjeta-opcion__icono {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: all var(--dur-base) var(--ease-out);
}
.tarjeta-opcion__icono svg { width: 20px; height: 20px; }
.tarjeta-opcion.activa .tarjeta-opcion__icono { background: var(--accent); color: #fff; }

.tarjeta-opcion__marca {
  width: 22px; height: 22px;
  border-radius: var(--r-full);
  border: 1.5px solid var(--separator);
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.tarjeta-opcion.activa .tarjeta-opcion__marca {
  background: var(--accent);
  border-color: var(--accent);
}
.tarjeta-opcion.activa .tarjeta-opcion__marca::after {
  content: "";
  width: 5px; height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg) translate(-1px, -1px);
}

/* ---- Contador (edad, altura, peso) --------------------------- */

.stepper-bloque { margin: var(--s4) 0 var(--s8); }

.stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s5);
}

.stepper__boton {
  width: 44px; height: 44px;
  border-radius: var(--r-full);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-card);
  font: 600 22px/1 var(--font);
  color: var(--accent);
  display: grid;
  place-items: center;
}
.stepper__boton:active { transform: scale(.92); }

.stepper__valor {
  width: 130px;
  text-align: center;
  font: var(--t-metric);
  background: none;
  -moz-appearance: textfield;
}
.stepper__valor::-webkit-outer-spin-button,
.stepper__valor::-webkit-inner-spin-button { -webkit-appearance: none; }

.stepper__sufijo {
  font: var(--t-subhead);
  color: var(--text-2);
  text-align: center;
  margin-top: var(--s2);
}

/* ---- Preset de equipamiento ----------------------------------- */

.preset-card {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s2);
  background: var(--bg-elevated);
  border-radius: var(--r-md);
  border: 1.5px solid transparent;
  font: var(--t-body);
  text-align: left;
  transition: all var(--dur-fast) var(--ease-out);
}
.preset-card.activa {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.preset-card__icono {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--bg-input);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--text-2);
  transition: all var(--dur-fast) var(--ease-out);
}
.preset-card__icono svg { width: 18px; height: 18px; }
.preset-card.activa .preset-card__icono { background: var(--accent); color: #fff; }
.preset-card__texto { flex: 1; min-width: 0; }
.preset-card__desc { display: block; font: var(--t-footnote); opacity: .75; font-weight: 400; margin-top: 1px; }

/* ---- Limitaciones: fila expandible con severidad -------------- */

.limitacion-fila {
  padding: var(--s3) var(--s4);
}
.limitacion-fila__severidad {
  display: flex;
  gap: var(--s2);
  margin-top: var(--s3);
}

/* ---- Resumen final ---------------------------------------------- */

.resumen-linea {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) 0;
}
.resumen-linea + .resumen-linea { border-top: .5px solid var(--separator); }
.resumen-linea__etiqueta { color: var(--text-2); }
.resumen-linea__valor { font-weight: 600; text-align: right; }

/* ---- ESTADO VACÍO ----------------------------------------- */

.vacio {
  padding: var(--s16) var(--s6);
  text-align: center;
  color: var(--text-2);
}
.vacio h2 {
  font: var(--t-title-3);
  color: var(--text);
  margin-bottom: var(--s2);
}