/* IA para líderes · plataforma del taller. Paleta CECOMSA: blanco con azul, rosa y magenta; negro para destacar. */
:root {
  --azul: #002F6C;
  --rosa: #E31C79;
  --magenta: #A20067;
  --negro: #111111;
  --tinta: #1a1a1a;
  --gris: #6b6b6b;
  --linea: #e4e4e8;
  --fondo: #ffffff;
  --suave: #f5f6fa;
  --bien: #2E7D32;
  --bien-suave: #e8f5e9;
  --mal: #C62828;
  --mal-suave: #fdecea;
  --radio: 14px;
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fondo); color: var(--tinta); font-family: var(--fuente); }
body { min-height: 100dvh; -webkit-text-size-adjust: 100%; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .55; cursor: default; }
[hidden] { display: none !important; }

/* Franja de marca arriba */
.franja { height: 6px; background: linear-gradient(90deg, var(--azul) 0 40%, var(--rosa) 40% 75%, var(--magenta) 75%); }

/* ---------- Participante ---------- */
.app { max-width: 560px; margin: 0 auto; padding: 0 16px 96px; }
.cabecera { position: sticky; top: 0; z-index: 5; background: var(--fondo); border-bottom: 2px solid var(--negro);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; margin: 0 -16px 16px; }
.cabecera .marca { display: flex; flex-direction: column; }
.cabecera .marca b { font-size: 1.05rem; color: var(--azul); }
.cabecera .marca small { font-family: ui-monospace, Menlo, monospace; letter-spacing: .08em; color: var(--gris); font-size: .7rem; text-transform: uppercase; }
.pildora { border: 2px solid var(--negro); border-radius: 999px; padding: 6px 14px; font-family: ui-monospace, Menlo, monospace; font-size: .9rem; white-space: nowrap; }
.pildora .pts { color: var(--rosa); font-weight: 700; }

.aviso-red { position: sticky; top: 0; z-index: 6; background: var(--negro); color: #fff; text-align: center; padding: 8px; font-size: .9rem; }

h1 { font-size: 1.5rem; line-height: 1.2; margin: 8px 0 12px; color: var(--negro); }
h2 { font-size: 1.15rem; margin: 20px 0 10px; color: var(--azul); }
p.sub { color: var(--gris); margin: 0 0 16px; line-height: 1.45; }

.campo { display: block; margin-bottom: 14px; }
.campo span { display: block; font-family: ui-monospace, Menlo, monospace; font-size: .8rem; color: var(--gris); margin-bottom: 6px; }
.campo input { width: 100%; border: 2px solid var(--negro); border-radius: var(--radio); padding: 14px; font-size: 1.05rem; background: #fff; }
.campo input:focus { outline: 3px solid var(--rosa); outline-offset: 1px; }

.btn { display: block; width: 100%; border: 0; border-radius: var(--radio); padding: 16px; font-size: 1.1rem; font-weight: 700; background: var(--negro); color: #fff; }
.btn.secundario { background: #fff; color: var(--negro); border: 2px solid var(--negro); }
.btn.rosa { background: var(--rosa); }
.btn + .btn { margin-top: 10px; }
.enlace { background: none; border: 0; color: var(--azul); text-decoration: underline; padding: 12px 0; font-size: 1rem; }
.error { color: var(--mal); font-weight: 600; min-height: 1.4em; margin: 6px 0 10px; }

.opciones { display: grid; gap: 10px; }
.opcion { display: flex; align-items: center; gap: 14px; text-align: left; width: 100%; border: 2px solid var(--negro); border-radius: var(--radio); background: #fff; padding: 14px; font-size: 1.02rem; line-height: 1.35; color: var(--tinta); }
.opcion .letra { flex: 0 0 38px; height: 38px; border-radius: 10px; background: var(--azul); color: #fff; display: grid; place-items: center; font-weight: 700; }
.opcion.elegida { border-color: var(--rosa); box-shadow: 0 0 0 2px var(--rosa); }
.opcion.bien { border-color: var(--bien); background: var(--bien-suave); box-shadow: 0 0 0 2px var(--bien); }
.opcion.mal { border-color: var(--mal); background: var(--mal-suave); box-shadow: 0 0 0 2px var(--mal); }

.tarjeta { border: 2px solid var(--negro); border-radius: var(--radio); padding: 16px; margin-top: 14px; background: #fff; }
.tarjeta.bien { border-color: var(--bien); }
.tarjeta.mal { border-color: var(--mal); }
.tarjeta h3 { margin: 0 0 6px; font-size: 1.1rem; }
.tarjeta p { margin: 0; line-height: 1.45; color: #333; }
.tarjeta.negra { background: var(--negro); color: #fff; border-color: var(--negro); }
.tarjeta.negra p { color: #ddd; }
.tarjeta.negra .rosa { color: var(--rosa); }

.espera { text-align: center; padding: 48px 8px; color: var(--gris); }
.espera .grande { font-size: 2.6rem; }

.equipo { border: 2px solid var(--linea); border-radius: var(--radio); padding: 12px 14px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.equipo.mio { border-color: var(--rosa); }
.equipo b { display: block; }
.equipo small { color: var(--gris); }
.equipo .btn-chico { border: 2px solid var(--negro); background: #fff; border-radius: 10px; padding: 8px 12px; font-weight: 600; white-space: nowrap; }
.equipo .btn-chico.lleno { border-color: var(--linea); color: var(--gris); }
.fila-crear { display: flex; gap: 8px; margin: 10px 0 18px; }
.fila-crear input { flex: 1; min-width: 0; border: 2px solid var(--negro); border-radius: var(--radio); padding: 12px; }
.fila-crear button { border: 0; border-radius: var(--radio); background: var(--rosa); color: #fff; font-weight: 700; padding: 0 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: var(--suave); border-radius: 999px; padding: 4px 10px; font-size: .9rem; }

.ranking { list-style: none; padding: 0; margin: 0; }
.ranking li { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--linea); }
.ranking .pos { width: 30px; font-family: ui-monospace, Menlo, monospace; color: var(--gris); }
.ranking .nom { flex: 1; }
.ranking .pt { font-weight: 700; color: var(--azul); }
.ranking li.yo { background: #fdeef5; border-radius: 10px; }
.ranking li.top .pos { color: var(--rosa); font-weight: 700; }

.pestanas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; background: #fff; border-top: 2px solid var(--negro);
  display: grid; grid-template-columns: repeat(3, 1fr); padding-bottom: env(safe-area-inset-bottom); }
.pestanas button { background: none; border: 0; padding: 10px 4px 12px; font-size: .9rem; color: var(--gris); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pestanas button .ico { font-size: 1.35rem; }
.pestanas button[aria-selected="true"] { color: var(--negro); font-weight: 700; }
.pestanas button[aria-selected="true"] .ico { color: var(--rosa); }

/* ---------- Panel ---------- */
.panel { max-width: 1100px; margin: 0 auto; padding: 0 16px 48px; }
.panel .barra { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 2px solid var(--negro); margin-bottom: 16px; }
.panel .barra b { color: var(--azul); font-size: 1.1rem; margin-right: auto; }
.panel select { font: inherit; border: 2px solid var(--negro); border-radius: 10px; padding: 8px 10px; background: #fff; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tabs button { border: 2px solid var(--negro); background: #fff; border-radius: 999px; padding: 8px 16px; font-weight: 600; }
.tabs button[aria-selected="true"] { background: var(--negro); color: #fff; }
.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla th { font-family: ui-monospace, Menlo, monospace; font-size: .75rem; text-transform: uppercase; color: var(--gris); }
.tabla tr.viva { background: #fdeef5; }
.estado { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: .8rem; font-weight: 700; }
.estado.abierta { background: var(--rosa); color: #fff; }
.estado.resultados { background: var(--azul); color: #fff; }
.estado.cerrada { background: var(--suave); color: var(--gris); }
.acciones { display: flex; gap: 6px; flex-wrap: wrap; }
.acciones button, .mini { border: 2px solid var(--negro); background: #fff; border-radius: 10px; padding: 6px 10px; font-weight: 600; font-size: .9rem; }
.acciones button.primario { background: var(--negro); color: #fff; }
.grilla-equipos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.tarjeta-eq { border: 2px solid var(--negro); border-radius: var(--radio); padding: 12px; }
.tarjeta-eq.incompleto { border-color: #d4a000; background: #fffbe6; }
.tarjeta-eq.excepcion { border-color: var(--magenta); }
.tarjeta-eq h4 { margin: 0 0 8px; display: flex; justify-content: space-between; gap: 8px; }
.tarjeta-eq ul { list-style: none; padding: 0; margin: 0 0 10px; }
.tarjeta-eq li { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 4px 0; font-size: .95rem; }
.nivel { font-size: .75rem; border-radius: 6px; padding: 1px 6px; background: var(--suave); color: var(--azul); white-space: nowrap; }
.buscador { width: 100%; max-width: 360px; border: 2px solid var(--negro); border-radius: 10px; padding: 10px; margin-bottom: 12px; }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--negro); color: #fff; padding: 10px 18px; border-radius: 999px; z-index: 20; }

/* ---------- Pantalla proyectada ---------- */
.pantalla { min-height: 100dvh; display: flex; flex-direction: column; padding: 3vh 5vw; }
.pantalla .pie { display: flex; justify-content: space-between; align-items: center; margin-top: auto; color: var(--gris); font-size: 1.1rem; }
.pantalla .pie img { height: 44px; }
.pantalla h1 { font-size: clamp(2rem, 4.2vw, 4rem); margin: 2vh 0 3vh; }
.pantalla .meta { font-family: ui-monospace, Menlo, monospace; color: var(--rosa); font-size: 1.2rem; letter-spacing: .06em; text-transform: uppercase; }
.pantalla .contador { font-size: clamp(1.4rem, 2.5vw, 2.4rem); color: var(--azul); font-weight: 700; }
.pantalla .abierta-grid { display: grid; grid-template-columns: 1fr auto; gap: 4vw; align-items: center; }
.pantalla .qr { background: #fff; border: 3px solid var(--negro); border-radius: 18px; padding: 12px; }
.pantalla .qr img, .pantalla .qr canvas { display: block; width: min(28vw, 340px); height: auto; image-rendering: pixelated; }
.barras { display: grid; gap: 2.2vh; }
.barra-res { display: grid; grid-template-columns: minmax(200px, 38%) 1fr 90px; gap: 18px; align-items: center; font-size: clamp(1rem, 1.8vw, 1.7rem); }
.barra-res .pista { background: var(--suave); border-radius: 10px; height: 5.5vh; overflow: hidden; }
.barra-res .relleno { height: 100%; background: var(--azul); border-radius: 10px; transition: width .6s ease; }
.barra-res:nth-child(2) .relleno { background: var(--rosa); }
.barra-res:nth-child(3) .relleno { background: var(--magenta); }
.barra-res.correcta .relleno { background: var(--bien); }
.barra-res.correcta .txt { color: var(--bien); font-weight: 700; }
.barra-res .num { font-weight: 700; text-align: right; }
.nube { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.2vh 2.4vw; padding: 2vh 0; }
.nube span { line-height: 1; font-weight: 700; }
.primeros { margin-top: 3vh; font-size: clamp(1.1rem, 2vw, 1.8rem); }
.primeros b { color: var(--rosa); }
.marcador { display: grid; grid-template-columns: 1fr 1fr; gap: 4vw; }
.marcador h2 { font-size: clamp(1.3rem, 2.4vw, 2.2rem); }
.marcador .ranking li { font-size: clamp(1rem, 1.7vw, 1.6rem); padding: 1.2vh 6px; }
.marcador .ranking li.top { background: var(--negro); color: #fff; border-radius: 10px; }
.marcador .ranking li.top .pt { color: var(--rosa); }
.marcador .ranking li.top .pos { color: var(--rosa); }
.equipos-pantalla { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; font-size: 1.2rem; }

@media (max-width: 700px) {
  .marcador, .pantalla .abierta-grid { grid-template-columns: 1fr; }
  .barra-res { grid-template-columns: 1fr 60px; }
  .barra-res .pista { grid-column: 1 / -1; grid-row: 2; }
}