/* ==========================================================================
   tablet.css · El control del médico.
   --------------------------------------------------------------------------
   Un iPad en la mano, a medio metro. Poca información y áreas táctiles
   grandes: el RFP §3 pide que "sea mucho más simple y funcional, sin duplicar
   toda la información que ya se visualiza en TV".
   ========================================================================== */

body[data-pantalla='tablet'] {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: var(--app-height, 100dvh);
}

/* --------------------------------------------------------------------------
   Barra superior
   -------------------------------------------------------------------------- */
.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
}

.barra__marca {
  height: 1.75rem;
  width: auto;
}

/* El logo de la línea, a la derecha de la cabecera. Es EL MISMO que muestra la
   TV (marca.logo_linea) —se carga en un solo lugar— y, como ahí es a color y el
   fondo de la tablet es verde oscuro, va sobre un recuadro blanco igual que en
   la TV (ver .logo-caja en tv.css). */
.barra__linea {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.2rem;
  max-width: 45%;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radio-sm);
  background: var(--white);
  /* Una sombra apenas perceptible despega la caja del fondo sin dibujar línea,
     como en la TV. */
  box-shadow: var(--sombra-sm);
  flex: 0 1 auto;
  min-width: 0;
}

.barra__linea img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   Pie · el estado de la conexión con la TV. Es lo primero que se mira cuando
   algo no pasa, así que dice qué falta y no solo si hay error. Va al pie para
   que la cabecera quede solo con los logos.
   -------------------------------------------------------------------------- */
.pie {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border);
}

.conexion {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--step--2);
  color: var(--text-tertiary);
}

.conexion__punto {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--text-tertiary);
}

.conexion[data-estado='ok'] .conexion__punto {
  background: var(--verde-400);
  box-shadow: 0 0 8px var(--verde-400);
}

.conexion[data-estado='esperando'] .conexion__punto {
  background: var(--casi);
  animation: latir 1.4s var(--ease-in-out) infinite;
}

.conexion[data-estado='sin-canal'] .conexion__punto {
  background: var(--error);
  animation: latir 900ms var(--ease-in-out) infinite;
}

/* --------------------------------------------------------------------------
   Panel
   -------------------------------------------------------------------------- */
.control {
  position: relative;
  z-index: var(--z-contenido);
  display: grid;
  place-items: center;
  padding: var(--space-5) var(--gutter);
  min-height: 0;
  /* Si el contenido no entra —el formulario con su teclado en un celular bajo,
     sobre todo en horizontal— hay que poder llegar al botón. Sin esto, el
     último elemento (PARTICIPAR) quedaba empujado abajo del área visible y no
     había forma de alcanzarlo: el bug que el cliente vio al cargar el teléfono. */
  overflow-y: auto;
}

.panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  width: 100%;
  max-width: 46rem;
  height: 100%;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Las letras. Es TODO lo que se ve durante las preguntas: ni el enunciado ni
   las opciones llegan a este dispositivo.
   -------------------------------------------------------------------------- */
.panel--teclas {
  justify-content: space-between;
  padding-bottom: var(--space-4);
}

.teclas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--touch-gap);
  width: 100%;
  flex: 1;
  align-content: center;
}

/* Con tres o cinco opciones, dos columnas dejan una tecla huérfana ocupando
   media fila. Una sola columna es más alta y más fácil de acertar sin mirar. */
.teclas[data-cantidad='3'],
.teclas[data-cantidad='5'] {
  grid-template-columns: minmax(0, 1fr);
}

.tecla-opcion {
  display: grid;
  place-items: center;
  min-height: var(--touch-tablet);
  border: 2px solid var(--border);
  border-radius: var(--radio-lg);
  background: linear-gradient(150deg, var(--petrol-700), var(--petrol-800));
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: var(--peso-black);
  color: var(--text);
  box-shadow: var(--sombra-md);
  transition:
    transform var(--dur-instant) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.tecla-opcion:active {
  transform: scale(0.97);
}

.tecla-opcion--elegida {
  background-image: var(--gradiente-cta);
  border-color: var(--verde-400);
}

/* Bloquear con `pointer-events: none` dispara un `pointerleave` que llega
   DESPUÉS de haber pintado la tecla elegida y la devuelve a reposo. Se
   deshabilita bajando la opacidad y cortando el toque en el contenedor. */
.teclas[data-bloqueado] {
  pointer-events: none;
}

.teclas[data-bloqueado] .tecla-opcion:not(.tecla-opcion--elegida) {
  opacity: 0.4;
}

/* --------------------------------------------------------------------------
   Respuesta enviada
   -------------------------------------------------------------------------- */
.tilde {
  display: grid;
  place-items: center;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  font-size: var(--step-2);
  background: var(--surface-raised);
  border: 2px solid var(--border);
  animation: aparecer var(--dur-slow) var(--ease-spring);
}

.es-correcto .tilde {
  border-color: var(--verde-400);
  color: var(--verde-400);
  box-shadow: var(--glow-exito);
}

.es-casi .tilde {
  border-color: var(--casi);
  color: var(--casi);
}

/* --------------------------------------------------------------------------
   Formulario · nombre y celular. Sin C.I., que el RFP elimina expresamente.
   -------------------------------------------------------------------------- */
.panel--formulario {
  justify-content: flex-start;
  gap: var(--space-3);
  padding-top: var(--space-2);
  /* Anclado ARRIBA (no centrado como los demás paneles) y creciendo con su
     contenido: así, cuando no entra, el `.control` lo puede scrollear desde el
     principio y el botón del final siempre se alcanza. Centrado, el desborde
     se repartía arriba y abajo y el scroll no llegaba al tope. */
  align-self: start;
  height: auto;
  min-height: 100%;
}

.campo {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: var(--touch-comfy);
  padding: var(--space-4) var(--space-5);
  border: 2px solid var(--border-fuerte);
  border-radius: var(--radio-md);
  background: var(--surface-sunken);
}

.campo__valor {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--peso-bold);
  letter-spacing: 0.02em;
  min-height: 1.2em;
  word-break: break-word;
}

.campo__error {
  min-height: 1.4em;
  font-size: var(--step--1);
  color: var(--error);
}

/* --------------------------------------------------------------------------
   Disclaimer del consentimiento

   Ya no es una casilla que tildar: tocar PARTICIPAR es la aceptación. Es un
   texto chico y pegado al campo (margin-top negativo que come parte del gap del
   panel), para que el paso entre completo en un celular sin empujar el botón
   abajo del teclado.
   -------------------------------------------------------------------------- */
.disclaimer {
  margin-top: calc(var(--space-2) * -1);
  font-size: var(--step--2);
  line-height: 1.3;
  color: var(--text-secondary);
  text-align: center;
  max-width: 42ch;
  text-wrap: balance;
}

/* El texto solo aparece en el último paso; sin esto seguiría ocupando su alto. */
.disclaimer[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   Teclado en pantalla
   -------------------------------------------------------------------------- */
.teclado {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.teclado[data-bloqueado] {
  pointer-events: none;
  opacity: 0.5;
}

.teclado__fila {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
}

.tecla {
  flex: var(--ancho, 1);
  min-width: 0;
  min-height: clamp(3rem, calc(var(--vh, 1vh) * 7), 5rem);
  border: 1px solid var(--border);
  border-radius: var(--radio-sm);
  background: var(--surface-raised);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: var(--peso-semi);
  color: var(--text);
  transition: background var(--dur-instant) var(--ease-out);
}

.tecla:active {
  background: var(--verde-700);
}

.tecla[data-estado='presionada'] {
  background: var(--verde-700);
  transform: scale(0.96);
}

.tecla--accion {
  background: var(--surface-sunken);
}

/* Un hueco de la grilla del numpad. No es un botón: si lo fuera, alguien lo
   tocaría esperando que haga algo. */
.tecla--hueco {
  visibility: hidden;
}

.tecla svg {
  width: 1.6rem;
  height: 1.6rem;
  margin-inline: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* El teclado numérico es más chico y más alto: diez teclas, no treinta.
   La clase la pone TecladoEnPantalla en el contenedor, como data-tipo. */
.teclado[data-tipo='numerico'] {
  max-width: 26rem;
  margin-inline: auto;
}

.teclado[data-tipo='numerico'] .tecla {
  min-height: clamp(3.5rem, calc(var(--vh, 1vh) * 9), 6rem);
  font-size: var(--step-1);
}

/* --------------------------------------------------------------------------
   Pantallas bajas: en horizontal el teclado se come el formulario entero.
   -------------------------------------------------------------------------- */
@media (max-height: 620px) {
  .panel {
    gap: var(--space-2);
  }

  .tecla {
    min-height: 2.5rem;
  }

  /* El numpad, que es lo más alto del paso del teléfono, cede primero: sin esto
     el disclaimer + el botón caían abajo del área visible en un celular
     horizontal. */
  .teclado[data-tipo='numerico'] .tecla {
    min-height: clamp(2.5rem, calc(var(--vh, 1vh) * 8), 4rem);
    font-size: var(--step-0);
  }

  .disclaimer {
    margin-top: calc(var(--space-1) * -1);
  }
}