/* Copyright (c) 2026 Matias Alejandro Garcia Quiroga. Todos los derechos reservados. Ver LICENSE. */
/* §26.7 Modo en vivo: pantalla del participante (/vivo). Celular vertical primero (390 px); sin el marco del sitio.
   Cada opción es una tarjeta con una banda de color con su FORMA y su LETRA (no depende solo del color) y el texto
   completo. Las bandas llevan glifo blanco con contraste AA. Mismo vocabulario que la pantalla de presentación del
   portal (public/css/capacitaciones-vivo.css). */

.vivo-pub {
  --op-0: #7E6026; --op-1: #1A7350; --op-2: #B2391F; --op-3: #0E6170;
  --op-4: #6A3FA0; --op-5: #8E2A55; --op-6: #3B4157; --op-7: #5C6B14;
  min-height: 100dvh; display: flex; flex-direction: column; background: var(--papel); color: var(--tx);
}
.vivo-pub__barra {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(10px + var(--seg-arriba)) var(--gutter) 10px; background: var(--marca); color: #fff;
}
.vivo-pub__marca { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.vivo-pub__marca img { border-radius: 6px; }
.vivo-pub__etq { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.vivo-pub__etq .barras { height: 16px; }
.vivo-pub__main { flex: 1; width: 100%; max-width: 560px; margin: 0 auto; padding: 16px var(--gutter) calc(32px + var(--seg-abajo)); outline: none; }

.vivo-pub__tarjeta {
  display: grid; gap: 14px; padding: 22px 20px; border-radius: 12px; background: var(--sup); border: 1px solid var(--linea);
}
.vivo-pub__tarjeta h1 { font-family: var(--slab); font-size: 24px; line-height: 1.2; font-weight: 500; outline: none; }
.vivo-pub__tarjeta p { color: var(--tx-2); line-height: 1.5; }
.vivo-pub__tarjeta p b { color: var(--tx); }
.vivo-pub__tarjeta--centro { text-align: center; justify-items: center; padding: 32px 20px; }
.vivo-pub__form { display: grid; gap: 12px; }
.vivo-pub__form .campo input.vivo-pub__codigo { font-family: var(--slab); font-size: 28px; letter-spacing: .3em; text-align: center; text-transform: uppercase; }
.vivo-pub__tarjeta .vivo-pub__nota { font-size: 13px; color: var(--tx-3); }
.vivo-pub__cargando { display: grid; place-items: center; min-height: 50dvh; }
.vivo-pub__cargando .barras { height: 40px; gap: 6px; }
.vivo-pub__cargando .barras i { width: 9px; }
.vivo-pub__pulso .barras { height: 34px; gap: 5px; }
.vivo-pub__pulso .barras i { width: 8px; }

.vivo-pub__juego { display: grid; gap: 12px; }
.vivo-pub__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; }
.vivo-pub__titulo { min-width: 0; font-size: 13.5px; color: var(--tx-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vivo-pub__puntos {
  flex: none; padding: 4px 12px; border-radius: 999px; background: var(--oro-suave); border: 1px solid var(--oro-borde);
  color: var(--oro-tx); font-size: 13px; font-variant-numeric: tabular-nums;
}
.vivo-pub__puntos b { font-size: 15px; }
.vivo-pub__aviso { padding: 8px 12px; border-radius: 8px; background: var(--sup-3); color: var(--tx-2); font-size: 14px; text-align: center; }
.vivo-pub__aviso--fin { padding: 18px; font-size: 17px; font-weight: 600; color: var(--tx); }

/* Pregunta */
.vivo-pub__preg { display: grid; gap: 12px; }
.vivo-pub__meta { display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: var(--tx-2); }
.vivo-pub__seg { display: inline-flex; align-items: center; gap: 6px; font-family: var(--slab); font-size: 22px; font-weight: 600; color: var(--tx); font-variant-numeric: tabular-nums; }
.vivo-pub__seg--poco { color: var(--coral); }
.vivo-barra { height: 6px; border-radius: 3px; background: var(--sup-3); overflow: hidden; }
.vivo-barra i { display: block; height: 100%; background: var(--acento); transform-origin: left; transition: transform .25s linear; }
.vivo-pub__texto { font-family: var(--slab); font-size: 22px; line-height: 1.3; font-weight: 500; outline: none; overflow-wrap: anywhere; }

/* Opciones */
.vivo-opciones { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.vivo-op {
  display: grid; grid-template-columns: 64px 1fr; align-items: stretch; width: 100%; min-height: 64px; padding: 0;
  border-radius: 12px; border: 1px solid var(--linea-2); background: var(--sup); color: var(--tx);
  text-align: left; font: inherit; overflow: hidden; cursor: pointer;
  transition: transform .14s var(--resorte), border-color .15s;
}
.vivo-op:hover { border-color: var(--acento); }
.vivo-op:active { transform: scale(.98); }
.vivo-op:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
.vivo-op--fija { cursor: default; }
.vivo-op--fija:hover { border-color: var(--linea-2); }
.vivo-op--fija:active { transform: none; }
.vivo-op__marca { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #fff; background: var(--op-c); }
.vivo-op__marca b { font-size: 16px; line-height: 1; }
.vivo-forma { fill: currentColor; }
.vivo-op__tx { display: flex; align-items: center; padding: 12px 16px; font-size: 17px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.vivo-op--0 { --op-c: var(--op-0); } .vivo-op--1 { --op-c: var(--op-1); } .vivo-op--2 { --op-c: var(--op-2); }
.vivo-op--3 { --op-c: var(--op-3); } .vivo-op--4 { --op-c: var(--op-4); } .vivo-op--5 { --op-c: var(--op-5); }
.vivo-op--6 { --op-c: var(--op-6); } .vivo-op--7 { --op-c: var(--op-7); }

.vivo-pub__registrada { display: grid; gap: 12px; }
.vivo-pub__registrada p { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--menta); font-weight: 600; text-align: center; }

/* Resultado de la pregunta */
.vivo-pub__res { display: grid; justify-items: center; gap: 12px; padding: 28px 20px; border-radius: 12px; background: var(--sup); border: 1px solid var(--linea); text-align: center; }
.vivo-pub__res h1 { font-family: var(--slab); font-size: 26px; font-weight: 600; outline: none; }
.vivo-pub__sello { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; color: #fff; background: var(--tx-3); }
.vivo-pub__res--ok .vivo-pub__sello { background: var(--menta-fondo); }
.vivo-pub__res--ok h1 { color: var(--menta); }
.vivo-pub__res--mal .vivo-pub__sello { background: var(--coral-fondo); }
.vivo-pub__res--mal h1 { color: var(--coral); }
.vivo-pub__suma { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.vivo-pub__correcta { display: grid; gap: 8px; width: 100%; text-align: left; }
.vivo-pub__correcta > span { font-size: 13.5px; color: var(--tx-2); }
.vivo-pub__lugar { color: var(--tx-2); }
.vivo-pub__lugar b { color: var(--tx); font-size: 18px; }
.vivo-pub__tarjeta .vivo-pub__posicion { display: grid; justify-items: center; gap: 2px; color: var(--tx-2); }
.vivo-pub__posicion b { font-family: var(--slab); font-size: 64px; line-height: 1; color: var(--oro-tx); font-variant-numeric: tabular-nums; }

.vivo-pub__pantalla > section { animation: vivo-entrar .24s var(--suave) backwards; }
@keyframes vivo-entrar { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  .vivo-pub__pantalla > section { animation: none; }
  .vivo-barra i, .vivo-op { transition: none; }
}
@media (min-width: 640px) {
  .vivo-pub__main { padding-top: 32px; }
  .vivo-pub__texto { font-size: 26px; }
}