/* =========================================================
   Teléfono simulado y sus pantallas (las genera js/pantallas.js).
   ========================================================= */
.telefono {
  position: relative;
  width: 300px;
  max-width: 100%;
  aspect-ratio: 9 / 18.5;
  padding: 10px;
  border-radius: 44px;
  background: #0b0b0b;
  box-shadow: 0 0 0 2px #2b2b2b, 0 30px 80px rgba(0, 0, 0, 0.55);
  transition: transform var(--t-media) var(--curva);
}

/* Al pulsar NFC el teléfono se acerca al frente y vuelve mientras dura la
   lectura (--duracion-carga, fijada por js/demo.js en el escenario). */
.escenario--leyendo .telefono {
  animation: zoom-lectura var(--duracion-carga) var(--curva);
}

@keyframes zoom-lectura {
  35% {
    scale: 1.1;
  }
}

.telefono__isla {
  position: absolute;
  top: 18px;
  left: 50%;
  z-index: 3;
  width: 88px;
  height: 24px;
  border-radius: var(--radio-pill);
  background: #000;
  transform: translateX(-50%);
}

.telefono__pantalla {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 34px;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-size: var(--texto-sm);
}

.telefono__estado {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  padding: 14px 26px 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-tinta);
}

.telefono__vista {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 52px 18px 18px;
  overflow-y: auto;
  animation: entrar-vista var(--t-media) var(--curva);
}

@keyframes entrar-vista {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

/* Pantalla de reposo */
.reposo {
  align-items: center;
  justify-content: center;
  text-align: center;
  background: radial-gradient(circle at 50% 35%, var(--color-acento-suave), var(--color-fondo) 70%);
}

.reposo__hora {
  font-size: 3rem;
  font-weight: 300;
  color: var(--color-tinta);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.reposo__icono {
  position: relative;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin: var(--esp-6) auto var(--esp-4);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-superficie);
  box-shadow: var(--sombra-suave);
  color: var(--color-acento);
  cursor: pointer;
  transition: scale var(--t-rapida) var(--curva);
}

/* Es un botón: lee el NFC igual que «Presiona para leer el NFC» */
.reposo__icono:hover {
  scale: 1.06;
}

.reposo__icono:active {
  scale: 0.96;
}

.reposo__icono svg {
  width: 36px;
  height: 36px;
}

.reposo__icono::before,
.reposo__icono::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--color-acento);
  animation: onda 3s var(--curva) infinite;
}

.reposo__icono::after {
  animation-delay: 1.5s;
}

.reposo__texto {
  max-width: 200px;
  color: var(--color-tenue);
}

/* Hoja del sistema "Etiqueta NFC detectada" */
.hoja-nfc {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 4;
  padding: var(--esp-5) var(--esp-4);
  border-radius: 26px;
  background: var(--color-superficie);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.18);
  text-align: center;
  animation: subir-hoja var(--t-media) var(--curva);
}

.hoja-nfc__marca {
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 auto var(--esp-3);
  padding: 10px;
  border-radius: 12px;
  background: var(--color-oscuro);
  color: var(--color-blanco);
}

.hoja-nfc__marca svg {
  width: 100%;
  height: 100%;
}

.hoja-nfc__titulo {
  font-weight: 700;
  color: var(--color-tinta);
}

.hoja-nfc__url {
  margin-top: var(--esp-1);
  font-size: var(--texto-xs);
  color: var(--color-tenue);
  word-break: break-all;
}

.hoja-nfc__barra {
  height: 3px;
  margin-top: var(--esp-4);
  border-radius: var(--radio-pill);
  background: var(--color-linea);
  overflow: hidden;
}

.hoja-nfc__barra::after {
  content: "";
  display: block;
  height: 100%;
  background: var(--color-acento);
  animation: cargar var(--duracion-carga, 900ms) linear forwards;
}

@keyframes subir-hoja {
  from {
    transform: translateY(110%);
  }
}

@keyframes cargar {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* La pantalla es clara aunque el teléfono viva en una sección oscura */
.telefono__pantalla .app__titulo {
  color: var(--color-tinta);
}

.telefono__pantalla .boton--secundario {
  color: var(--color-tinta);
}

.telefono__pantalla .boton--secundario:hover {
  background: var(--color-tinta);
  color: var(--color-blanco);
}

/* Estructura común de mini-app */
.app__barra {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--esp-4);
}

.app__logo {
  height: 13px;
  width: auto;
}

.app__cerrar {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: var(--color-linea);
  font-size: 1rem;
  line-height: 1;
  color: var(--color-tinta);
}

.app__lugar {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-acento);
}

.app__titulo {
  margin-top: var(--esp-1);
  font-size: 1.2rem;
  font-weight: 800;
}

.app__texto {
  margin-top: var(--esp-2);
  font-size: var(--texto-xs);
  color: var(--color-tenue);
}

.app__bloque {
  margin-top: var(--esp-4);
}

.app__etiqueta {
  display: block;
  margin-bottom: var(--esp-2);
  font-size: var(--texto-xs);
  font-weight: 600;
  color: var(--color-tinta);
}

.app__accion {
  width: 100%;
  margin-top: auto;
}

.app__accion-espacio {
  flex: 1;
  min-height: var(--esp-4);
}

.app__campo {
  width: 100%;
  padding: var(--esp-2) var(--esp-3);
  border: 1px solid var(--color-linea);
  border-radius: var(--radio-sm);
  background: var(--color-superficie);
  font-size: var(--texto-sm);
}

textarea.app__campo {
  min-height: 70px;
  resize: none;
}

/* Botón de acción con icono (Guardar contacto) */
.app__accion--icono {
  gap: var(--esp-2);
}

.app__accion--icono svg {
  width: 18px;
  height: 18px;
  flex: none;
}

/* Identidad compacta del titular (formulario de lead) */
.perfil {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
}

.perfil__avatar {
  flex: none;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: 50%;
  background: #e6e9f0;
  box-shadow: 0 0 0 2px var(--color-superficie), 0 0 0 3px var(--color-linea);
}

.perfil__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 8%;
}

.perfil__nombre {
  font-family: var(--fuente-titulos);
  font-size: var(--texto-sm);
  font-weight: 700;
  color: var(--color-tinta);
}

.perfil__cargo {
  font-size: var(--texto-xs);
  color: var(--color-tenue);
}

.contactos__dato {
  margin-top: var(--esp-3);
  font-size: var(--texto-xs);
  text-align: center;
  color: var(--color-tenue);
}

/* Consentimiento del formulario de lead */
.consentimiento {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
  margin-top: var(--esp-4);
  font-size: 0.68rem;
  color: var(--color-tenue);
}

.consentimiento input {
  flex: none;
  margin-top: 2px;
  accent-color: var(--color-acento);
}

/* Tarjeta privada: lo que no es público no se expone */
.privada {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.privada__icono {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--esp-3);
  border-radius: 50%;
  background: var(--color-linea);
  color: var(--color-tinta);
}

.privada__icono svg {
  width: 30px;
  height: 30px;
}

/* Panel del titular: interruptores de visibilidad */
.ajustes {
  display: grid;
  gap: var(--esp-2);
  margin: var(--esp-3) 0 0;
  padding: 0;
  list-style: none;
}

.ajustes__titulo {
  margin-top: var(--esp-4);
  margin-bottom: 0;
}

.ajuste {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-2) var(--esp-3);
  border: 1px solid var(--color-linea);
  border-radius: var(--radio-sm);
  background: var(--color-superficie);
}

.ajuste__nombre {
  display: block;
  font-size: var(--texto-xs);
  font-weight: 600;
  color: var(--color-tinta);
}

.ajuste__dato {
  display: block;
  font-size: 0.66rem;
  color: var(--color-tenue);
  word-break: break-all;
}

.interruptor {
  position: relative;
  flex: none;
  width: 38px;
  height: 22px;
  border: 0;
  border-radius: var(--radio-pill);
  background: var(--color-linea);
  transition: background var(--t-rapida);
}

.interruptor::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-superficie);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: translate var(--t-rapida) var(--curva);
}

.interruptor[aria-checked="true"] {
  background: var(--color-acento);
}

.interruptor[aria-checked="true"]::after {
  translate: 16px 0;
}

/* Chips seleccionables */
.opciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
}

.opcion {
  padding: var(--esp-1) var(--esp-3);
  border: 1px solid var(--color-linea);
  border-radius: var(--radio-pill);
  background: var(--color-superficie);
  font-size: var(--texto-xs);
}

.opcion[aria-pressed="true"] {
  border-color: var(--color-acento);
  background: var(--color-acento);
  color: var(--color-blanco);
}

/* Confirmación */
.confirmacion {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.confirmacion__check {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: var(--esp-4);
  border-radius: 50%;
  background: var(--color-exito);
  color: var(--color-blanco);
  animation: rebote 500ms var(--curva);
}

.confirmacion__check svg {
  width: 34px;
  height: 34px;
}

@keyframes rebote {
  0% {
    transform: scale(0.4);
  }
  70% {
    transform: scale(1.1);
  }
}

.confirmacion .app__accion {
  margin-top: var(--esp-6);
}

.confirmacion [data-extra] {
  width: 100%;
}