:root {
  --fondo: #FAFAF7;
  --texto: #111111;
  --suave: #6B6B6B;
  --linea: #E4E1DA;
  --escenario: #111111;
  --naranja: #FF5A1F;
  --naranja-texto: #E84A12;
  --amarillo: #FFD21E;
  --vivo: #1FA36B;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 400 17px/1.4 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  font-style: normal;
  color: #4A4A4A;
  background: var(--fondo);
}
h1, h2, h3 { margin: 0 0 12px; font-family: 'Bricolage Grotesque', system-ui, sans-serif; color: var(--texto); text-wrap: balance; }
h1 { font-weight: 800; font-size: 44px; letter-spacing: -0.03em; line-height: 0.95; }
h2 { font-weight: 800; font-size: 30px; letter-spacing: -0.02em; line-height: 1; }
p { margin: 0 0 12px; text-wrap: pretty; }
input, button, select { font: inherit; }

#app { max-width: 480px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; }
.pantalla { flex: 1; padding: 24px 16px 96px; }
.dato { color: var(--suave); }
.msg { min-height: 1.4em; color: var(--suave); }
.vacio { color: var(--suave); text-align: center; margin-top: 48px; }

/* Etiqueta: JetBrains Mono, mayúsculas, tracked */
.etiqueta { display: block; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--suave); margin: 0 0 8px; }
.etiqueta-clara { color: #F4F1EA; }

/* Cifras: horarios y cuentas regresivas */
.cifra { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 800; letter-spacing: -0.04em; line-height: 0.9; color: var(--naranja-texto); margin: 0; }
.cifra-noche { color: var(--naranja); }
.cifra-56 { font-size: 56px; }
.cifra-64 { font-size: 64px; }
.cifra-88 { font-size: 88px; }

form { display: flex; flex-direction: column; gap: 12px; }
label { display: flex; flex-direction: column; gap: 4px; }
label.op { flex-direction: row; align-items: center; gap: 8px; }
input[type=email], input[type=text], input[type=date], input[type=number], input[type=datetime-local], input:not([type]), select {
  height: 56px; border-radius: 14px; border: 1px solid var(--linea); background: #fff; padding: 0 16px; font-size: 17px;
}
fieldset { border: 1px solid var(--linea); border-radius: 14px; display: flex; flex-wrap: wrap; gap: 12px; }
.fila { display: flex; gap: 12px; }
.fila label { flex: 1; }

/* Botones: primario (negro), secundario (borde) y link (subrayado) */
button {
  height: 56px; border-radius: 999px; background: var(--texto); color: #FAFAF7; border: 2px solid var(--texto);
  font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 800; font-size: 18px; padding: 0 24px; cursor: pointer;
}
button:disabled { opacity: 0.5; }
button.link { height: auto; background: none; border: 0; color: var(--suave); text-decoration: underline; font-weight: 400; font-size: 17px; padding: 8px; }
button.link.claro { color: #F4F1EA; }
button.secundario, button.no { background: transparent; color: var(--texto); }
button.claro { background: transparent; color: #F4F1EA; border-color: #F4F1EA; }
button.chico { height: 40px; padding: 0 16px; font-size: 15px; }

/* Nota: línea chica de contexto (seguridad, lo que viene) */
.nota { font-size: 14px; line-height: 1.4; color: var(--suave); margin: 0; text-wrap: pretty; }

/* Chips de intereses: el input queda escondido, el span es la pastilla */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
fieldset.chips { gap: 8px; padding: 12px 16px 16px; }
label.chip { position: relative; display: inline-flex; flex-direction: row; gap: 0; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chip span { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border: 1px solid var(--linea); border-radius: 999px; background: #fff; color: var(--texto); font-size: 15px; cursor: pointer; }
.chip input:checked + span { background: var(--texto); border-color: var(--texto); color: #FAFAF7; }
.chip input:disabled + span { opacity: 0.4; cursor: default; }
.chip input:focus-visible + span { outline: 2px solid var(--naranja); outline-offset: 2px; }
.bloque-intereses { display: flex; flex-direction: column; gap: 16px; margin: 8px 0; }
.bloque-intereses .dato { margin: -8px 0 0; }
.bloque-titulo { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.bloque-titulo h3 { margin: 0; font-size: 22px; }
.bloque-titulo .etiqueta { margin: 0; color: var(--naranja-texto); }
.categoria .etiqueta { margin-bottom: 8px; }
select { appearance: none; color: var(--texto); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center; }

/* Bloques "Pronto": lo que todavía no está, sin botones */
.pronto { border: 1px solid var(--linea); border-radius: 14px; padding: 16px; margin-top: 16px; }
.pronto .etiqueta { margin-bottom: 4px; }

/* Interruptor del mazo */
.interruptor { flex-direction: row; align-items: center; gap: 12px; margin: -8px 0 16px; font-size: 15px; color: var(--texto); cursor: pointer; }
.interruptor input { appearance: none; flex: none; width: 44px; height: 26px; border-radius: 999px; background: var(--linea); position: relative; margin: 0; cursor: pointer; transition: background 0.15s ease-out; }
.interruptor input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform 0.15s ease-out; }
.interruptor input:checked { background: var(--texto); }
.interruptor input:checked::after { transform: translateX(18px); }

.miniaturas { display: flex; gap: 8px; }
.miniaturas img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.barra { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 12px; }

.nav { position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; gap: 24px; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); background: var(--fondo); border-top: 1px solid var(--linea); }
.nav button { height: auto; background: none; border: 0; padding: 4px; color: #9A9A9A; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; }
.nav button.activo { color: var(--texto); }

/* Escenario: caja oscura sobre la que van las caritas (fondo, en vez de foto) */
.escenario { background: var(--escenario); display: grid; place-items: center; flex: none; }
.escenario-140 { width: 140px; height: 140px; border-radius: 24px; }
.escenario-140 .carita { width: 120px; height: auto; }
.escenario-110 { width: 110px; height: 110px; border-radius: 24px; }
.escenario-110 .carita { width: 94px; height: auto; }
.escenario-56 { width: 56px; height: 56px; border-radius: 14px; }
.escenario-56 .carita { width: 48px; height: auto; }

.tu-carita { display: flex; gap: 16px; align-items: center; margin-bottom: 20px; }
.tu-carita p { margin: 0; }
.tu-carita .etiqueta { margin: 0 0 4px; }

.tarjeta { position: relative; min-height: 440px; border-radius: 28px; overflow: hidden; background: var(--escenario); touch-action: pan-y; user-select: none; transition: transform 0.2s ease-out; display: flex; flex-direction: column; }
.tarjeta-carita { flex: 1; min-height: 176px; display: grid; place-items: center; padding: 24px 24px 0; }
.tarjeta-carita .carita { width: min(56%, 200px); height: auto; pointer-events: none; }
.tarjeta .pie { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 8px; }
.tarjeta .pie p { margin: 0; }
.pie-datos { color: #CFCBC2; font-size: 15px; }
.tarjeta .pie .pie-comun { color: var(--naranja); }
.pie-frase { color: #CFCBC2; font-size: 15px; line-height: 1.4; }
.chip-tarjeta { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border: 1px solid #3A3A3A; border-radius: 999px; color: #F4F1EA; font-size: 14px; }
.chip-tarjeta.comun { background: var(--naranja); border-color: var(--naranja); color: #111; }
.tarjeta .pie h2 { margin: 0; color: #F4F1EA; }
.tarjeta .pie .edad { font-weight: 400; color: #8A8A8A; }
.tarjeta .pie .pie-vivo { display: none; margin: 0; color: #F4F1EA; align-items: center; gap: 6px; }
.tarjeta.en-vivo .pie .pie-vivo { display: flex; }
.punto-vivo { width: 8px; height: 8px; border-radius: 50%; background: var(--vivo); display: inline-block; }
.acciones { display: flex; justify-content: center; gap: 16px; margin-top: 20px; }
.acciones button { min-width: 120px; }

.lista { list-style: none; padding: 0; margin: 0; }
.lista li { border-bottom: 1px solid var(--linea); }
.persona { display: flex; align-items: center; gap: 12px; padding: 12px 0; width: 100%; height: auto; background: none; border: 0; border-radius: 0; color: var(--texto); text-align: left; font-weight: 400; font-size: 17px; }

.chat { display: flex; flex-direction: column; height: 100dvh; padding-bottom: 16px; }
.chat-barra { justify-content: flex-start; gap: 8px; flex-wrap: nowrap; }
.chat-barra .encastre-mini { flex: none; }
.chat-barra .encastre-mini .carita { width: 44px; height: auto; display: block; }
.chat-barra h2 { font-size: 24px; flex: 1; min-width: 0; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-barra button.link { flex: none; padding: 8px 2px; font-size: 15px; }
.chat-barra { margin-bottom: 12px; }
.chat-acciones { display: flex; gap: 8px; margin-bottom: 16px; }
.mensajes { flex: 1; overflow-y: auto; list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; }
.mensajes li { align-self: flex-start; max-width: 80%; padding: 8px 12px; border-radius: 16px; background: #EFEDE7; overflow-wrap: anywhere; }
.mensajes li.mio { align-self: flex-end; background: var(--texto); color: #FAFAF7; }
.enviar { flex-direction: row; }
.enviar input { flex: 1; }

.espejo { transform: scaleX(-1); }
.camara-prueba { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 16px; background: #000; }

/* Capa: cubre toda la pantalla; cada contenido adentro pone su propio fondo */
#capa { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; }
#capa[hidden] { display: none; }
.invitacion, .voto, .match {
  width: 100%; height: 100%; background: var(--fondo); color: var(--texto);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: 24px 24px calc(24px + env(safe-area-inset-bottom)); text-align: center; overflow-y: auto;
}
.invitacion { position: relative; }
.invitacion h2 { margin: 0; }
.invitacion > button { width: 100%; max-width: 320px; }
.en-comun { margin: -8px 0 0; color: var(--texto); font-weight: 800; }
.antes { position: absolute; inset: 0; background: var(--fondo); display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: calc(24px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom)); text-align: left; overflow-y: auto; }
.antes .etiqueta { margin: 0; }
.antes-reloj { position: absolute; top: calc(24px + env(safe-area-inset-top)); right: 24px; }
.antes-reloj .cifra { font-size: 40px; }
.antes-bloque h3 { font-size: 22px; line-height: 1.1; margin: 0 0 8px; }
.antes button { width: 100%; }
.mitades { display: flex; justify-content: center; }
/* Cada mitad vive en su propio SVG con la otra mitad vacía: se superponen para que queden a 14px. */
.mitades .carita + .carita { margin-left: -108px; }
.mitades .carita { width: 120px; height: auto; }
.match-visual { width: 100%; height: auto; display: block; }
.texto-cuerpo { font-size: 17px; line-height: 1.4; color: #4A4A4A; margin: 0; }

/* Onboarding "Cómo funciona": tres pantallas en un carrusel horizontal, capa completa. */
.cf { width: 100%; height: 100%; background: var(--fondo); color: var(--texto); position: relative; overflow: hidden; display: flex; flex-direction: column; padding: calc(16px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); }
.cf-saltar { position: absolute; top: calc(16px + env(safe-area-inset-top)); right: 16px; z-index: 2; padding: 8px; }
.cf-track { flex: 1; min-height: 0; display: flex; width: 300%; transition: transform 0.3s ease-out; touch-action: pan-y; }
.cf-pantalla { width: calc(100% / 3); flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 40px 12px 0; text-align: center; }
.cf-pantalla h2 { font-size: 26px; }
.cf-visual { display: flex; align-items: center; justify-content: center; }
.cf-caritas { gap: 16px; }
.cf-chips { justify-content: center; }
.cf-mitades { justify-content: center; }
.cf-mitades .carita { width: 120px; height: auto; transition: transform 0.6s ease-out; }
.cf-mitades .carita:first-child { transform: translateX(-44px); }
.cf-mitades .carita:last-child { margin-left: -108px; transform: translateX(44px); }
/* Se acercan pero no se tocan: el encastre recién pasa en la pantalla 3. */
.cf-mitades.cf-juntas .carita:first-child { transform: translateX(-16px); }
.cf-mitades.cf-juntas .carita:last-child { transform: translateX(16px); }
@media (prefers-reduced-motion: reduce) { .cf-mitades .carita { transition: none; } }
.cf-dots { flex: none; display: flex; justify-content: center; gap: 8px; margin: 16px 0; }
.cf-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--linea); }
.cf-dot.activo { background: var(--texto); }
.cf > #cf-siguiente { flex: none; width: 100%; }

.cita { position: absolute; inset: 0; background: #000; color: #fff; }
.cita #otro { width: 100%; height: 100%; object-fit: cover; background: #111; }
.cita #yo { position: absolute; top: calc(16px + env(safe-area-inset-top)); right: 16px; width: 96px; height: 128px; object-fit: cover; border-radius: 12px; border: 2px solid #fff; }
.cita-reloj { position: absolute; top: calc(16px + env(safe-area-inset-top)); left: 16px; display: flex; flex-direction: column; gap: 4px; }
.cita-pregunta { position: absolute; left: 16px; right: 16px; bottom: calc(24px + 56px + 16px + env(safe-area-inset-bottom)); background: var(--fondo); color: var(--texto); border-radius: 16px; padding: 16px; }
.cita-pregunta[hidden] { display: none; }
.cita-pregunta .etiqueta { margin-bottom: 4px; }
.cita-pregunta-texto { margin: 0; font-weight: 800; font-size: 20px; line-height: 1.2; color: var(--texto); text-wrap: balance; }
.cita-acciones { position: absolute; left: 0; right: 0; bottom: calc(24px + env(safe-area-inset-bottom)); display: flex; justify-content: center; align-items: center; gap: 16px; }

#aviso { position: fixed; left: 16px; right: 16px; top: calc(16px + env(safe-area-inset-top)); z-index: 30; max-width: 448px; margin: 0 auto; padding: 16px 20px; border-radius: 14px; background: var(--texto); color: #FAFAF7; text-align: center; font-size: 17px; }
#aviso[hidden] { display: none; }

.hoja { position: fixed; inset: 0; z-index: 20; background: rgba(0, 0, 0, 0.5); display: flex; align-items: flex-end; }
.hoja-caja { width: 100%; background: var(--fondo); color: var(--texto); padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0; display: flex; flex-direction: column; gap: 8px; }

.admin { padding: 16px; max-width: 960px; margin: 0 auto; }
.admin section { margin-bottom: 32px; }
.admin table { border-collapse: collapse; width: 100%; }
.admin td, .admin th { border-bottom: 1px solid var(--linea); padding: 6px; text-align: left; vertical-align: middle; }
.admin form { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
.admin img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; }
.admin button { height: 44px; padding: 0 16px; }
.metricas { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; max-width: 480px; }
.metricas dd { margin: 0; font-weight: 700; text-align: right; }

/* Logo Face2Face: "Face" + el 2 (naranja, girado) + "Face" espejada */
.logo { display: inline-flex; align-items: baseline; font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 800; letter-spacing: -0.035em; color: var(--texto); line-height: 1; }
.logo-2 { color: var(--naranja); font-size: 1.75em; line-height: 0.7; transform: rotate(-14deg); display: inline-block; margin: 0 0.02em; }
.logo-espejo { display: inline-block; transform: scaleX(-1); }

/* Entrada: toda la pantalla en amarillo */
.entrada { height: 100dvh; overflow: hidden; background: var(--amarillo); display: flex; flex-direction: column; padding: calc(16px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); }
.entrada-logo { flex: none; display: flex; justify-content: center; }
/* El grupo de caritas es el protagonista: más grande que su caja, se sale por los costados y queda detrás del logo y del título. */
.entrada-caritas { flex: 1 1 auto; min-height: 0; position: relative; }
.entrada-caritas svg { position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%); height: 112%; width: auto; max-width: 112vw; }
.entrada-logo, .entrada-pie { position: relative; z-index: 1; }
.entrada-pie { flex: none; display: flex; flex-direction: column; gap: 12px; }
.titulo-entrada { width: 80%; height: auto; display: block; margin: 0 auto; }

/* Fotos: solo aparecen después de un match */
.fotos-desbloqueadas { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 12px; }
.fotos-desbloqueadas img { width: 72px; height: 96px; object-fit: cover; border-radius: 8px; flex: none; }
.entrada .nota { color: var(--texto); text-align: center; }

/* Contador de gente conectada en el mazo */
.animandose { display: flex; align-items: center; gap: 8px; margin: 12px 0; }

/* Extender la cita: mismo lugar que la pregunta para arrancar */
.cita-extender { position: absolute; left: 16px; right: 16px; bottom: calc(24px + 56px + 16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; }
.cita-extender[hidden] { display: none; }
.cita-extender button { background: var(--naranja); border-color: var(--naranja); color: #111; }
.cita-extender button:disabled { opacity: 1; background: #F4F1EA; border-color: #F4F1EA; }
.cita-extender-nota { margin: 0; text-align: center; font-size: 14px; color: #F4F1EA; text-wrap: balance; }
.cita-extendida { margin: 0; background: var(--naranja); color: #111; border-radius: 16px; padding: 14px 16px; text-align: center; font-weight: 800; font-size: 20px; }