/* Copyright (c) 2026 Matias Alejandro Garcia Quiroga. Todos los derechos reservados. Ver LICENSE. */
/* Sitio público de eventos (§17.5). Se apoya en /css/app.css (tokens, barra, botones, tarjetas, campos, modo
   oscuro) y solo agrega lo propio con prefijo pub-. Sin paleta nueva: todo sale de los tokens del portal.
   Mobile-first (llega por WhatsApp); en escritorio, columna de lectura de ~720 px. */

/* ---------------- Marco ---------------- */
body.pub { display: flex; flex-direction: column; min-height: 100dvh; }
body.pub #raiz { display: flex; flex-direction: column; min-height: 100dvh; }
/* El portal fija la app al alto de la ventana en escritorio (sin scroll de página); el sitio público es un
   documento que se recorre con scroll normal, con la barra fija arriba. */
@media (min-width: 960px) and (min-height: 600px) {
  html.pub { height: auto; overflow: visible; }
  html.pub body { height: auto; overflow: visible; overflow-x: hidden; }
  html.pub #raiz { height: auto; min-height: 100dvh; }
  html.pub .barra { position: sticky; }
}
.pub-main { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 20px var(--gutter) 48px; outline: none; }
.pub-main--ancha { max-width: 1080px; }
.pub-main > * { animation: entrar .22s var(--suave) backwards; }
.pub-noscript { max-width: 640px; margin: 24px auto; padding: 0 var(--gutter); color: var(--tx-2); }

.pub-barra .barra__marca { min-width: 0; flex: 0 1 auto; overflow: hidden; }
@media (max-width: 520px) { .pub-barra.pub-barra--compacta .barra__marca span.pub-barra__sep, .pub-barra.pub-barra--compacta .barra__marca span.pub-barra__etiqueta { display: none; } }
.pub-barra .barra__marca > span:not(.pub-barra__sep) { white-space: nowrap; }
.pub-barra__sep { width: 1px; height: 18px; background: rgba(255, 255, 255, .35); flex: none; }
.pub-barra__etiqueta { font-family: var(--sans); font-weight: 400; font-size: 15px; color: rgba(255, 255, 255, .86); }
/* El portal oculta el nombre en el celu (tiene navegación abajo); acá la marca es lo único de la barra. */
@media (max-width: 440px) { .pub-barra .barra__marca span:not(.barras) { display: inline; } .pub-barra .barra__marca .pub-barra__sep { display: block; } }
@media (max-width: 359px) { .pub-barra .barra__marca .pub-barra__sep, .pub-barra .barra__marca .pub-barra__etiqueta { display: none; } }
.pub-salir { min-height: 40px; padding: 0 12px; color: #FFFFFF; background: transparent; border-color: rgba(255, 255, 255, .35); }
.pub-salir:hover { background: rgba(255, 255, 255, .1); }
.barra .pub-salir:focus-visible { outline-color: #FFFFFF; }

.pub-pie { display: grid; justify-items: center; gap: 6px; padding: 28px var(--gutter) calc(28px + var(--seg-abajo)); border-top: 1px solid var(--linea); text-align: center; color: var(--tx-2); }
.pub-pie p { font-family: var(--slab); font-size: 15px; color: var(--tx); }
.pub-pie small { max-width: 46ch; font-size: 12.5px; color: var(--tx-3); }
.pub-pie .barras { height: 16px; }

.pub-cargando { display: grid; place-items: center; min-height: 40vh; }
.pub-cargando .barras { height: 36px; gap: 5px; }
.pub-cargando .barras i { width: 8px; }
.pub-vacio { padding-top: 56px; }
.pub-vacio h1 { font-size: clamp(26px, 7vw, 32px); }
.pub-vacio p { max-width: 40ch; }

/* ---------------- Tipografía común ---------------- */
.pub-kicker { display: flex; align-items: center; gap: 10px; color: var(--oro-tx); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.pub-kicker .barras { height: 14px; gap: 2px; }
.pub-kicker .barras i { width: 3.5px; }
.pub-titulo { font-size: clamp(30px, 8.4vw, 46px); line-height: 1.08; font-weight: 500; letter-spacing: -.02em; overflow-wrap: anywhere; text-wrap: balance; }
.pub-titulo--medio { font-size: clamp(26px, 7vw, 36px); }
.pub-subtitulo { font-family: var(--slab); font-size: 19px; color: var(--tx-2); }
.pub-nota { color: var(--tx-2); font-size: 14.5px; }
.pub-resumen { font-size: 17px; color: var(--tx-2); }
.pub-enlace-tx { color: var(--acento); text-underline-offset: 3px; overflow-wrap: anywhere; }
.pub-texto { display: grid; gap: 12px; font-size: 16.5px; line-height: 1.6; color: var(--tx); overflow-wrap: anywhere; }
.pub-texto ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pub-texto li { position: relative; padding-left: 22px; }
.pub-texto li::before { content: ''; position: absolute; left: 4px; top: .68em; width: 7px; height: 7px; border-radius: 1.5px; background: var(--oro); }

/* ---------------- Avisos ---------------- */
.pub-aviso { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin-bottom: 16px; border-radius: 12px; font-size: 14.5px; border: 1px solid var(--linea); outline: none; }
.pub-aviso .ico { flex: none; margin-top: 1px; }
.pub-aviso--vista { background: var(--oro-suave); border-color: var(--oro-borde); color: var(--oro-tx); }
.pub-aviso--vista b { color: inherit; }
.pub-aviso--cancelado { background: var(--coral-t); border-color: var(--coral-b); color: var(--tx); }
.pub-aviso--cancelado .ico { color: var(--coral); }
.pub-aviso--ok { background: var(--menta-t); border-color: transparent; color: var(--tx); }
.pub-aviso--ok .ico { color: var(--menta); }

/* ---------------- Cabecera del evento ---------------- */
.pub-cabeza { display: grid; gap: 22px; }
.pub-portada { aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--sup-3); border: 1px solid var(--linea); }
.pub-portada img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pub-cabeza__txt, .pub-mia__cabeza { display: grid; gap: 10px; }
.pub-datos { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; }
.pub-datos li { display: flex; align-items: flex-start; gap: 12px; }
.pub-datos .ico { color: var(--acento); margin-top: 1px; }
.pub-datos span { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.pub-datos b { font-weight: 500; }
.pub-datos small { color: var(--tx-2); font-size: 14px; }

/* ---------------- Estado de inscripción ---------------- */
.pub-estado { display: grid; gap: 16px; margin: 24px 0 8px; padding: 18px; border-radius: 14px; background: var(--sup); border: 1px solid var(--linea); border-left: 4px solid var(--acento); }
.pub-estado__txt { display: grid; gap: 8px; justify-items: start; }
.pub-estado__txt p { color: var(--tx-2); font-size: 15px; }
.pub-estado__txt b { color: var(--tx); font-weight: 500; }
.pub-estado__acciones { display: grid; gap: 10px; }
.pub-estado__acciones .boton { width: 100%; }
.pub-estado--espera { border-left-color: var(--oro); }
.pub-estado--cerrada { border-left-color: var(--linea-2); }
.pub-estado--cancelada { border-left-color: var(--coral); }

.pub-chip { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 99px; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; background: var(--acento-t2); color: var(--acento); }
.pub-estado--espera .pub-chip, .pub-chip--espera { background: var(--oro-suave); color: var(--oro-tx); }
.pub-estado--cerrada .pub-chip, .pub-chip--cerrada { background: var(--sup-3); color: var(--tx-2); }
.pub-estado--cancelada .pub-chip, .pub-chip--cancelada { background: var(--coral-t2); color: var(--coral); }
.pub-estado--abierta .pub-chip, .pub-chip--abierta { background: var(--menta-t); color: var(--menta); }

/* ---------------- Secciones ---------------- */
.pub-seccion { display: grid; gap: 14px; padding: 28px 0 4px; scroll-margin-top: calc(var(--alto-barra) + var(--seg-arriba) + 12px); }
.pub-seccion + .pub-seccion, .pub-estado + .pub-seccion { border-top: 1px solid var(--linea); margin-top: 20px; }
.pub-seccion h2 { font-size: 24px; letter-spacing: -.015em; }
.pub-seccion h3 { font-size: 17px; }

/* Programa */
.pub-programa { list-style: none; margin: 0; padding: 0; display: grid; }
.pub-programa li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-top: 1px solid var(--linea); }
.pub-programa li:first-child { border-top: 0; padding-top: 4px; }
.pub-programa__hora { display: grid; align-content: start; gap: 1px; }
.pub-programa__hora b { font-family: var(--slab); font-size: 19px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--acento); }
.pub-programa__hora small { color: var(--tx-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.pub-programa__txt { display: grid; gap: 4px; overflow-wrap: anywhere; }
.pub-programa__txt b { font-weight: 500; font-size: 16.5px; }
.pub-programa__txt small { color: var(--tx-2); font-size: 14.5px; }
.pub-programa__dia { display: grid; gap: 6px; }
.pub-programa__dia + .pub-programa__dia { margin-top: 14px; }
.pub-programa__dia h3 { padding: 8px 12px; border-radius: 8px; background: var(--sup-2); font-size: 16px; }

/* Lugar */
.pub-lugar { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.pub-lugar p { min-width: 0; overflow-wrap: anywhere; }
.pub-lugar b { font-weight: 500; }
.pub-lugar span { color: var(--tx-2); }
.pub-mapa { aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; border: 1px solid var(--linea); background: var(--sup-3); }
.pub-mapa iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (min-width: 640px) { .pub-mapa { aspect-ratio: 16 / 9; } }
:root[data-tema='oscuro'] .pub-mapa iframe { filter: brightness(.88) contrast(1.05); }
.pub-plano { margin: 0; display: grid; gap: 8px; }
.pub-plano a { display: block; border-radius: 14px; overflow: hidden; border: 1px solid var(--linea); background: #FFFFFF; }
.pub-plano img { display: block; width: 100%; height: auto; }
.pub-plano figcaption { color: var(--tx-2); font-size: 13.5px; }
.pub-plano-pdf, .pub-docs a { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--linea); background: var(--sup); color: var(--tx); text-decoration: none; transition: border-color .15s, background-color .15s; }
.pub-plano-pdf:hover, .pub-docs a:hover { border-color: var(--acento-t3); background: var(--acento-t1); }
.pub-plano-pdf > span, .pub-docs__txt { flex: 1; display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.pub-plano-pdf b, .pub-docs b { font-weight: 500; }
.pub-plano-pdf small, .pub-docs small { color: var(--tx-2); font-size: 13px; }
.pub-plano-pdf > .ico:first-child, .pub-docs__ico { color: var(--acento); }
.pub-plano-pdf > .ico:last-child, .pub-docs__accion { color: var(--tx-3); }
.pub-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pub-docs__ico { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--acento-t2); }

/* Logos */
.pub-logos { gap: 22px; }
.pub-logos__grupo { display: grid; gap: 12px; }
.pub-seccion .pub-logos__h { font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--oro-tx); }
.pub-logos ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 560px) { .pub-logos ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 720px) { .pub-logos ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Los logos se diseñan para fondo blanco: la placa es blanca también en modo oscuro. */
.pub-logos li > a, .pub-logos li > img { display: grid; place-items: center; height: 96px; padding: 14px 18px; border-radius: 12px; background: #FFFFFF; border: 1px solid var(--linea); }
.pub-logos li > a { transition: border-color .15s; }
.pub-logos li > a:hover { border-color: var(--acento-t3); }
.pub-logos img { width: 100%; height: 100%; object-fit: contain; }
.pub-logos li > img { width: 100%; }

/* Contacto */
.pub-contacto { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pub-contacto .enlace, .pub-contacto__tx { overflow-wrap: anywhere; }
.pub-contacto__tx { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }

/* ---------------- Formulario ---------------- */
.pub-inscripcion { gap: 12px; }
.pub-form { display: grid; gap: 18px; margin-top: 6px; padding: 20px; border-radius: 14px; background: var(--sup); border: 1px solid var(--linea); }
.pub-campo > label { display: block; }
.pub-etiqueta { font-size: 14.5px; font-weight: 500; color: var(--tx); }
.pub-req { color: var(--coral); font-weight: 600; }
.pub-opc { color: var(--tx-3); font-weight: 400; font-size: 13.5px; }
.pub-ayuda { color: var(--tx-3); font-size: 13px; }
.pub-campo .campo__error { margin-top: 2px; }
.pub-campo input:disabled, .pub-campo textarea:disabled { background: var(--sup-2); color: var(--tx-2); cursor: not-allowed; }
.pub-grupo { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 8px; }
.pub-grupo legend { padding: 0; margin-bottom: 8px; font-size: 14.5px; font-weight: 500; }
.pub-grupo .pub-ayuda { margin-top: -6px; }
.pub-opciones { display: grid; gap: 8px; }
.pub-grupo--sino .pub-opciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pub-opcion { position: relative; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--linea-2); background: var(--sup); cursor: pointer; font-size: 15px; transition: border-color .15s, background-color .15s; }
.pub-opcion:hover { border-color: var(--acento-t3); }
.pub-opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pub-opcion__marca { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--linea-2); color: transparent; transition: border-color .15s, box-shadow .15s, background-color .15s; }
.pub-opcion__marca--check { border-radius: 5px; }
.pub-opcion.activa { border-color: var(--acento); background: var(--acento-t1); }
.pub-opcion.activa .pub-opcion__marca { border-color: var(--acento); box-shadow: inset 0 0 0 3px var(--sup), inset 0 0 0 10px var(--acento); }
.pub-opcion.activa .pub-opcion__marca--check { box-shadow: none; background: var(--azul); border-color: var(--azul); color: var(--sobre); }
.pub-opcion input:focus-visible ~ .pub-opcion__marca { outline: 2px solid var(--acento); outline-offset: 3px; }
.pub-grupo:disabled .pub-opcion { cursor: not-allowed; opacity: .6; }
.pub-grupo.con-error .pub-opcion { border-color: var(--coral-b); }
.pub-consent { display: grid; gap: 6px; padding-top: 4px; border-top: 1px solid var(--linea); }
.pub-consent__check { align-items: flex-start; padding-top: 12px; font-size: 14px; color: var(--tx-2); line-height: 1.5; }
.pub-consent__check input { flex: none; margin: 1px 0 0; }
.pub-consent.con-error .pub-consent__check { color: var(--tx); }
.pub-form__pie { display: grid; gap: 12px; }
.pub-form__enviar { width: 100%; }
.pub-form__nota { color: var(--tx-3); font-size: 13px; }
.pub-form__nota span { color: var(--coral); }
/* Honeypot: fuera de pantalla para personas y lectores; los bots lo completan. */
.pub-hp { position: absolute !important; left: -10000px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }
.pub-girando { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #FFFFFF; animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------------- Resultado de la inscripción ---------------- */
.pub-resultado { display: grid; justify-items: center; gap: 14px; padding: 28px 20px; border-radius: 14px; background: var(--sup); border: 1px solid var(--linea); text-align: center; }
.pub-resultado h2 { font-size: clamp(22px, 6vw, 27px); line-height: 1.2; max-width: 22ch; outline: none; }
.pub-resultado p { color: var(--tx-2); max-width: 46ch; }
.pub-resultado p b { color: var(--tx); font-weight: 500; overflow-wrap: anywhere; }
.pub-resultado__ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--acento-t2); color: var(--acento); }
.pub-resultado__ico--ok { background: var(--menta-fondo); color: var(--sobre); animation: aparecer .5s var(--resorte) backwards; }
.pub-resultado--espera .pub-resultado__ico { background: var(--oro-suave); color: var(--oro-tx); }
@keyframes aparecer { from { transform: scale(.4); opacity: 0; } }
.pub-resultado__acciones { display: grid; gap: 10px; width: 100%; max-width: 360px; }
.pub-posicion { font-size: 17px; }
.pub-posicion b { font-family: var(--slab); font-size: 22px; }
.pub-qr { margin: 4px 0; display: grid; justify-items: center; gap: 10px; }
.pub-qr img { display: block; width: 240px; max-width: 100%; height: auto; padding: 12px; border-radius: 14px; background: #FFFFFF; border: 1px solid var(--linea); image-rendering: pixelated; }
.pub-qr figcaption { font-weight: 500; color: var(--tx); }

/* ---------------- Página del inscripto ---------------- */
.pub-mia__qr { justify-items: center; }
.pub-mia__acciones { display: grid; gap: 10px; margin-top: 20px; }
.pub-boton-ancho { width: 100%; }
.pub-enlace-crudo { font-size: 13px; color: var(--tx-3); overflow-wrap: anywhere; }
.pub-boton-peligro { color: var(--coral); border-color: var(--coral-b); justify-self: start; }
.pub-boton-peligro:hover:not(:disabled) { background: var(--coral-t); }
.pub-confirmar { display: grid; gap: 12px; padding: 16px; border-radius: 12px; border: 1px solid var(--coral-b); background: var(--coral-t); }
.pub-confirmar b { font-weight: 600; }
.pub-confirmar__acciones { display: grid; gap: 10px; }

/* ---------------- Portada del sitio ---------------- */
.pub-portada-sitio__cabeza { padding-top: 12px; }
.pub-portada-sitio__cabeza h1 { font-weight: 500; }
.pub-h-lista { font-size: 13px; font-family: var(--sans); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-2); margin: 6px 0 14px; }
.pub-sin { padding: 24px 20px; border-radius: 14px; border: 1px dashed var(--linea-2); color: var(--tx-2); text-align: center; }
.pub-tarjetas { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 720px) { .pub-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1040px) { .pub-tarjetas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pub-tarjeta { display: flex; flex-direction: column; height: 100%; border-radius: 14px; overflow: hidden; background: var(--sup); border: 1px solid var(--linea); color: var(--tx); text-decoration: none; transition: border-color .15s, transform .2s var(--suave), box-shadow .2s; }
.pub-tarjeta:hover { border-color: var(--acento-t3); box-shadow: var(--sombra); transform: translateY(-2px); }
.pub-tarjeta:focus-visible { border-radius: 14px; }
.pub-tarjeta__img { position: relative; aspect-ratio: 16 / 9; background: var(--sup-3); }
.pub-tarjeta__img > img:not(.pub-tarjeta__im) { display: block; width: 100%; height: 100%; object-fit: cover; }
.pub-tarjeta__img--placa { display: grid; place-items: center; overflow: hidden; background: var(--marca); }
.pub-tarjeta__img--placa::before { content: ''; position: absolute; inset: 0; background: url('/img/placa.png') center / cover; opacity: .12; mix-blend-mode: soft-light; }
.pub-tarjeta__im { position: relative; width: 72px; height: auto; }
.pub-tarjeta__cal { position: absolute; left: 12px; top: 12px; display: grid; justify-items: center; min-width: 52px; padding: 6px 8px 5px; border-radius: 10px; background: var(--sup-solida); color: var(--tx); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .45); }
.pub-tarjeta__cal b { font-family: var(--slab); font-size: 22px; font-weight: 500; line-height: 1; }
.pub-tarjeta__cal small { font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--acento); }
.pub-tarjeta__cuerpo { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; }
.pub-tarjeta h3 { font-size: 21px; line-height: 1.2; overflow-wrap: anywhere; }
.pub-tarjeta__sub { color: var(--tx-2); font-family: var(--slab); font-size: 15px; margin-top: -4px; }
.pub-tarjeta__meta { display: flex; align-items: flex-start; gap: 8px; color: var(--tx-2); font-size: 14px; }
.pub-tarjeta__meta .ico { color: var(--acento); margin-top: 1px; }
.pub-tarjeta__pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; }
.pub-tarjeta__ver { display: inline-flex; align-items: center; gap: 6px; color: var(--acento); font-weight: 500; font-size: 14.5px; margin-left: auto; }
.pub-tarjeta:hover .pub-tarjeta__ver .ico { transform: translateX(3px); }
.pub-tarjeta__ver .ico { transition: transform .2s var(--suave); }

.pub-anteriores { margin-top: 32px; border-top: 1px solid var(--linea); }
.pub-anteriores summary { display: flex; align-items: center; gap: 10px; min-height: 56px; cursor: pointer; list-style: none; font-family: var(--slab); font-size: 19px; }
.pub-anteriores summary::-webkit-details-marker { display: none; }
.pub-anteriores summary small { font-family: var(--sans); font-size: 12.5px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--sup-3); color: var(--tx-2); }
.pub-anteriores__flecha { margin-left: auto; color: var(--tx-3); transition: transform .2s var(--suave); }
.pub-anteriores[open] .pub-anteriores__flecha { transform: rotate(90deg); }
.pub-anteriores ul { list-style: none; margin: 0; padding: 0 0 8px; display: grid; }
.pub-anteriores a { display: grid; gap: 2px; padding: 12px 4px; border-top: 1px solid var(--linea); color: var(--tx); text-decoration: none; }
.pub-anteriores a:hover b { color: var(--acento); }
.pub-anteriores b { font-weight: 500; }
.pub-anteriores__sub { color: var(--tx-2); }
.pub-anteriores small { color: var(--tx-2); font-size: 13.5px; }

/* ---------------- Puerta: ingreso del código ---------------- */
.pub-codigo { display: grid; justify-items: center; gap: 12px; max-width: 420px; margin: 24px auto 0; text-align: center; }
.pub-codigo__ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--acento-t2); color: var(--acento); margin-bottom: 4px; }
.pub-codigo h1 { font-size: clamp(26px, 7vw, 32px); }
.pub-codigo > p { color: var(--tx-2); max-width: 34ch; }
.pub-codigo__form { display: grid; gap: 10px; width: 100%; margin-top: 12px; text-align: left; }
.pub-codigo__input {
  width: 100%; min-height: 64px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--linea-2); background: var(--sup);
  font-family: var(--slab); font-size: 30px; font-weight: 500; letter-spacing: .14em; text-align: center; text-transform: uppercase; font-variant-numeric: tabular-nums;
}
.pub-codigo__input::placeholder { color: var(--tx-3); opacity: .5; }
.pub-codigo__input:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-t2); }
.pub-codigo__input[aria-invalid='true'] { border-color: var(--coral); }
.pub-codigo__form .pub-ayuda { text-align: center; }
.pub-codigo__form .boton { margin-top: 6px; }

/* ---------------- Puerta: acreditación ---------------- */
.pub-main--puerta { max-width: 640px; padding-top: 14px; }
.pub-puerta { display: grid; gap: 14px; }
.pub-puerta__cabeza { display: grid; gap: 12px; }
.pub-puerta__ev { display: grid; gap: 4px; min-width: 0; }
.pub-puerta__ev h1 { font-size: 21px; line-height: 1.2; overflow-wrap: anywhere; }
.pub-puerta__ev small { color: var(--tx-2); font-size: 13.5px; }
.pub-contador { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 12px; padding: 14px 16px; border-radius: 14px; background: var(--sup); border: 1px solid var(--linea); }
.pub-contador__txt { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tx-2); }
.pub-contador__num { font-family: var(--slab); font-size: 18px; color: var(--tx-2); font-variant-numeric: tabular-nums; }
.pub-contador__num b { font-size: 34px; font-weight: 500; color: var(--tx); letter-spacing: -.02em; }
.pub-contador__barra { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--sup-3); overflow: hidden; }
.pub-contador__barra i { display: block; height: 100%; background: var(--menta); transform-origin: left; transition: transform .5s var(--suave); }
.pub-puerta__modos { display: flex; width: 100%; }
.pub-puerta__modos button { flex: 1; justify-content: center; min-height: 42px; font-size: 15px; }
.pub-puerta__modos button[aria-selected='true'] { background: var(--azul); color: var(--sobre); }
.pub-puerta__insc .pub-form { padding: 0; border: 0; background: none; }

.pub-escaner { display: grid; gap: 10px; }
.pub-escaner__marco { position: relative; aspect-ratio: 1 / 1; max-height: 62dvh; width: 100%; border-radius: 16px; overflow: hidden; background: #05081A; border: 1px solid var(--linea); }
.pub-escaner__marco video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pub-escaner__marco:not(.activa) video { visibility: hidden; }
.pub-escaner__guia { position: absolute; inset: 14%; border-radius: 18px; box-shadow: 0 0 0 999px rgba(5, 8, 26, .38); }
.pub-escaner__guia::before { content: ''; position: absolute; inset: 0; border-radius: 18px; border: 3px solid rgba(255, 255, 255, .9); -webkit-mask: linear-gradient(#000 0 0) top / 100% 26% no-repeat, linear-gradient(#000 0 0) bottom / 100% 26% no-repeat; mask: linear-gradient(#000 0 0) top / 100% 26% no-repeat, linear-gradient(#000 0 0) bottom / 100% 26% no-repeat; }
.pub-escaner__guia i { position: absolute; left: 8%; right: 8%; top: 50%; height: 2px; border-radius: 2px; background: var(--oro); opacity: .9; animation: barrer 2.2s var(--suave) infinite alternate; }
@keyframes barrer { from { transform: translateY(-120px); } to { transform: translateY(120px); } }
.pub-escaner__vacio { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; text-align: center; color: #ECE8DE; }
.pub-escaner__vacio > .ico { color: var(--oro); }
.pub-escaner__vacio p { max-width: 28ch; color: rgba(236, 232, 222, .82); font-size: 15px; }
.pub-escaner__pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pub-escaner__estado { display: inline-flex; align-items: center; gap: 8px; color: var(--tx-2); font-size: 14px; }
.pub-punto { width: 9px; height: 9px; border-radius: 50%; background: var(--menta); box-shadow: 0 0 0 3px var(--menta-t); }

.pub-buscar { display: grid; gap: 10px; }
.pub-buscar__estado { min-height: 20px; color: var(--tx-2); font-size: 13.5px; }
.pub-personas { list-style: none; margin: 0; padding: 0; display: grid; border-radius: 14px; border: 1px solid var(--linea); background: var(--sup); overflow: hidden; }
.pub-personas li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--linea); }
.pub-personas li:first-child { border-top: 0; }
.pub-personas__txt { flex: 1; display: grid; gap: 2px; justify-items: start; min-width: 0; overflow-wrap: anywhere; }
.pub-personas__txt b { font-weight: 500; }
.pub-personas__txt small { color: var(--tx-2); font-size: 13px; }
.pub-personas__txt .pub-chip { margin-top: 4px; }
.pub-personas__ok { display: inline-flex; align-items: center; gap: 4px; color: var(--menta); font-size: 14px; font-weight: 500; white-space: nowrap; }
.pub-personas li.es-presente .pub-personas__txt b { color: var(--tx-2); }

/* Overlay de resultado: grande, legible a un brazo de distancia; colores AA con texto blanco. */
.pub-overlay { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: calc(24px + var(--seg-arriba)) 24px calc(24px + var(--seg-abajo)); color: #FFFFFF; text-align: center; cursor: pointer; animation: overlay .22s var(--suave) both; }
.pub-overlay--ok { background: var(--menta-fondo); }
.pub-overlay--aviso { background: var(--oro-fondo); }
.pub-overlay--error { background: var(--coral-fondo); }
@keyframes overlay { from { opacity: 0; } }
.pub-overlay__caja { display: grid; justify-items: center; gap: 10px; max-width: 520px; animation: aparecer .4s var(--resorte) backwards; }
.pub-overlay__ico { display: grid; place-items: center; width: 104px; height: 104px; border-radius: 50%; background: rgba(255, 255, 255, .18); margin-bottom: 8px; }
.pub-overlay__titulo { font-family: var(--slab); font-size: clamp(30px, 9vw, 44px); font-weight: 500; line-height: 1.1; }
.pub-overlay__nombre { font-size: clamp(24px, 7vw, 32px); font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.pub-overlay__org { font-size: 19px; opacity: .92; overflow-wrap: anywhere; }
.pub-overlay__dni { font-size: 16px; opacity: .85; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.pub-overlay__detalle { font-size: 16px; opacity: .92; max-width: 34ch; }
.pub-overlay__toque { margin-top: 18px; font-size: 13.5px; opacity: .75; }

/* ---------------- Escritorio ---------------- */
@media (min-width: 720px) {
  .pub-main { padding-top: 32px; padding-bottom: 72px; }
  .pub-estado { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 20px 22px; }
  .pub-estado__acciones { grid-auto-flow: row; min-width: 240px; }
  .pub-form { padding: 28px; gap: 20px; }
  .pub-form__pie { justify-items: start; }
  .pub-form__enviar { width: auto; min-width: 240px; }
  .pub-resultado { padding: 36px 32px; }
  .pub-resultado__acciones { grid-template-columns: 1fr 1fr; max-width: 480px; }
  .pub-mia__acciones { grid-auto-flow: column; justify-content: start; }
  .pub-confirmar__acciones { grid-auto-flow: column; justify-content: start; }
  .pub-programa li { grid-template-columns: 96px minmax(0, 1fr); }
  .pub-puerta__cabeza { grid-template-columns: minmax(0, 1fr) 220px; align-items: end; }
}

@media (prefers-reduced-motion: reduce) {
  .pub-escaner__guia i { animation: none; transform: none; }
  .pub-tarjeta:hover { transform: none; }
}

/* §18.4 baja de invitaciones */
.pub-baja { margin-top: 8px; }
.pub-baja h1 { font-size: clamp(22px, 6vw, 27px); line-height: 1.2; max-width: 22ch; outline: none; }
.pub-baja .pub-nota { max-width: 46ch; }