/* DEMO 10 · Face ID / huella (T19): lo que pinta pedido-passkey.js en /pedido y en /admin. De la maqueta aprobada el 15/10, con los tokens del sitio (marca.css).
   Toques: botones grandes ≥ 56 px con letra de 18 px; el resto ≥ 48 px y 16 px. */

/* La tarjeta: misma familia que el aviso del PIN (superficie, filo, hilo de cuero a la izquierda). Chica y única, arriba del menú. */
.pk-tarj { background: var(--c-superficie-2); border: 1px solid var(--c-linea); border-left: 3px solid var(--c-cuero); border-radius: 14px; padding: 16px; margin-bottom: 16px; }
.pk-tarj h3 { margin: 0 0 6px; font-size: 19px; line-height: 1.25; font-weight: 800; color: var(--c-texto); text-wrap: balance; }
.pk-tarj p { margin: 0 0 12px; font-size: 16px; line-height: 1.45; color: var(--c-texto-2); }
.pk-tarj .pk-ayuda { margin: 6px 0 0; }
.pk-tarj .aviso { margin-bottom: 12px; }
.pk-tarj input { margin-bottom: 12px; }
.pk-tarj .btn { min-height: 56px; font-size: 18px; margin: 0 0 10px; }

/* Botones lado a lado («Sí, activarlo» | «Ahora no»; «Sí, es mío» | «Quitarlo»): pesan igual de ancho. */
.pk-dos { display: flex; gap: 10px; margin-bottom: 2px; }
.pk-dos > * { flex: 1 1 0; min-width: 0; width: auto; min-height: 58px; margin: 0; padding-inline: 8px; }
/* Secundario: con borde y sin relleno. */
.pk-btn2 { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: 8px 16px; border: 1px solid var(--c-linea-fuerte); border-radius: 12px; background: transparent; color: var(--c-texto); font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; }
.pk-btn2:active { background: rgb(var(--crema-rgb) / .1); }
.pk-enlace { display: block; min-height: 48px; margin: 4px auto -8px; padding: 0 12px; border: 0; background: none; color: var(--c-texto-2); font: inherit; font-size: 16px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Ícono de cara/huella dentro del texto del botón: si la frase se parte (360 px), ícono y texto se centran juntos. */
.pk-ico { display: inline-block; width: 26px; height: 26px; vertical-align: -6px; margin-right: 8px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn[aria-busy="true"] { opacity: .72; cursor: default; }

/* Mensajes (8 s): «Listo…» en verde; «No pudimos…», «Este teléfono no puede…» neutros (no hizo nada mal: sin rojo). */
.pk-msg { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 16px; font-size: 18px; line-height: 1.35; }
.aviso.pk-neutro { background: var(--c-superficie-2); border-color: var(--c-linea-fuerte); border-left: 3px solid var(--c-cuero); color: var(--c-texto); font-size: 17px; }

/* Pantalla de Face ID (al tocar el nombre): los dos botones del mismo tamaño; tras la 2.ª cancelación «Usar mi PIN» pasa a primario. */
#pkPantalla .btn { min-height: 56px; font-size: 18px; }
#pkPantalla .btn + .btn { margin-top: 12px; }
#pkPantalla .btn.pk-sec { background: transparent; border: 1px solid var(--c-linea-fuerte); box-shadow: none; }

/* Sector de «Cambiar mi PIN»: los enlaces a 16 px y 48 px (T19) y la fila «Tu cara o tu huella». */
.pk-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 56px; padding: 10px 14px; margin: 12px 0 0; border: 1px solid var(--c-linea-fuerte); border-radius: 12px; background: var(--c-superficie); color: var(--c-texto); font: inherit; font-size: 17px; font-weight: 700; text-align: left; cursor: pointer; }
.pk-fila .pk-est { font-size: 16px; font-weight: 800; color: var(--c-exito); white-space: nowrap; }
.pk-fila .pk-est.no { color: var(--c-texto-2); font-weight: 700; }
.pk-panel { margin-top: 8px; padding: 16px; border: 1px solid var(--c-linea); border-left: 3px solid var(--c-cuero); border-radius: 14px; background: var(--c-superficie-2); }
.pk-panel .pk-lead { margin: 0 0 14px; font-size: 17px; line-height: 1.4; font-weight: 600; color: var(--c-texto); }
.pk-panel h4 { margin: 0 0 8px; font-size: 16px; font-weight: 800; color: var(--c-texto-2); }
.pk-panel .btn { min-height: 56px; font-size: 18px; margin-bottom: 10px; }

/* Lista de teléfonos: este no lleva «Quitar» (para eso está «Dejar de usar…»). */
.pk-tels { list-style: none; margin: 0 0 14px; padding: 0; border: 1px solid var(--c-linea); border-radius: 12px; background: var(--c-superficie); }
.pk-tels li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--c-linea); }
.pk-tels li:last-child { border-bottom: 0; }
.pk-tel-nom { display: block; font-size: 17px; font-weight: 700; }
.pk-tel-fecha { display: block; margin-top: 2px; font-size: 16px; font-weight: 500; color: var(--c-texto-2); }
.pk-este { color: var(--c-acento); font-weight: 800; }
.pk-quitar { flex: none; min-height: 48px; min-width: 88px; padding: 6px 14px; border: 1px solid color-mix(in srgb, var(--c-peligro) 70%, transparent); border-radius: 10px; background: transparent; color: var(--c-peligro-claro); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.pk-quitar:active { background: var(--c-peligro-suave); }
.pk-tel-caja { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 12px; padding: 10px 12px; border: 1px solid var(--c-linea); border-radius: 12px; background: var(--c-superficie); font-size: 18px; font-weight: 800; }
.pk-tel-caja span { font-size: 16px; font-weight: 500; color: var(--c-texto-2); }

/* Fase D: /pedido?mail=1 (equipo y CEO) y el hero de /admin. */
.pk-mail { margin-top: 12px; }
.pk-mail .btn { width: 100%; min-height: 56px; font-size: 18px; }
.pk-mail .aviso { margin-bottom: 10px; }
.hero-pk { max-width: 460px; margin-top: 12px; }
/* T36 (Tommy 19/10): el bloque fijo «Activar Face ID o huella» (abajo, chico, lo del aparato), o su estado, a la vista después de entrar. */
.pk-activar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0; padding: 12px 14px; border: 1px solid var(--c-linea-fuerte); border-radius: 12px; background: var(--c-superficie); }
.pk-activar.hidden { display: none; }
.pk-activar .pk-activar-est { font-size: 17px; font-weight: 800; color: var(--c-exito); }
.pk-activar .pk-activar-btn { flex: 1 1 100%; min-height: 52px; font-size: 17px; }
.pk-activar .pk-activar-aca { flex: 1 1 100%; font-size: 14px; color: var(--c-texto-2); }
.pk-ya { margin: 4px 0 12px; font-weight: 700; color: var(--c-exito); }
/* T31: el botón con el nombre arriba de la lista de ingreso. */
.pk-boton { margin: 0 0 14px; }
.pk-boton .pk-boton-nombre { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 64px; text-align: left; }
.pk-boton .pk-boton-tx { display: flex; flex-direction: column; line-height: 1.25; }
.pk-boton .pk-boton-tx b { font-size: 18px; }
.pk-boton .pk-boton-tx span { font-size: 16px; }
.pk-boton .pk-o { margin: 8px 0 0; text-align: center; font-size: 15px; color: var(--c-texto-suave, inherit); }
.pk-boton.hidden { display: none; }