/* ============================================================
   COPA EXPRESS — mobile-first. Una acción primaria por pantalla,
   bracket vertical legible sin zoom.
   ============================================================ */

.ce { display: flex; flex-direction: column; gap: 18px; max-width: 640px; margin: 0 auto; }

.ce-loading, .ce-error { padding: 32px 16px; text-align: center; color: var(--texto-sec, #6b7280); }

.ce-aviso {
  margin: 0; padding: 10px 14px; border-radius: 8px;
  background: rgba(251,191,36,.14); font-size: 0.82rem;
}

.ce-header { display: flex; flex-direction: column; gap: 6px; }
.ce-titulo { font-size: 1.5rem; font-weight: 800; margin: 0; }
.ce-titulo:focus { outline: 2px solid var(--azul); outline-offset: 4px; }
.ce-sub { font-size: 0.8rem; color: var(--texto-sec, #6b7280); margin: 0; }

.ce-stats {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
}
.ce-stats li {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  padding: 10px; border-radius: 10px; border: 1px solid var(--borde, #e5e7eb);
}
.ce-stats span { font-size: 0.65rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-sec, #6b7280); }
.ce-stats strong { font-size: 1.1rem; }

.ce-paso { font-size: 0.7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-sec, #6b7280); margin: 0; }
.ce-pregunta { font-size: 1.1rem; margin: 4px 0 12px; }

/* Opciones: apiladas y con área de toque cómoda */
.ce-opciones { display: flex; flex-direction: column; gap: 8px; }
.ce-opcion {
  width: 100%; min-height: 56px; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 16px; text-align: left;
  border: 1px solid var(--borde, #e5e7eb); border-radius: 12px;
  background: transparent; color: inherit; cursor: pointer;
}
.ce-opcion:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.ce-opcion[disabled] { opacity: .5; cursor: default; }
.ce-opcion-label { font-weight: 600; }
.ce-opcion-efecto { font-size: 0.72rem; color: var(--texto-sec, #6b7280); }

.ce-btn {
  min-height: 48px; padding: 12px 20px;
  border-radius: 12px; border: 1px solid var(--azul);
  background: transparent; color: var(--azul); cursor: pointer; font-weight: 600;
}
.ce-btn-primary { background: var(--azul); color: #fff; }
.ce-btn:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.ce-btn[disabled] { opacity: .6; cursor: default; }

.ce-resultado { text-align: center; padding: 16px; border-radius: 12px; border: 1px solid var(--borde, #e5e7eb); }
.ce-marcador { font-size: 2.2rem; font-weight: 800; margin: 4px 0; }
.ce-rival { font-size: 0.85rem; color: var(--texto-sec, #6b7280); margin: 0; }

.ce-final { text-align: center; padding: 28px 16px; border-radius: 14px; border: 1px solid var(--borde, #e5e7eb); }
.ce-final--campeon { border-color: #d4a017; }
.ce-final-score { font-size: 2.4rem; font-weight: 800; margin: 8px 0 0; color: var(--azul); }

/* Bracket vertical: nunca scroll horizontal */
.ce-bracket { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ce-bracket-item {
  display: flex; justify-content: space-between; gap: 10px; min-width: 0;
  padding: 10px 14px; border-radius: 10px;
  border: 1px solid var(--borde, #e5e7eb);
  font-size: 0.8rem;
}
.ce-bracket-ronda { font-weight: 600; text-transform: capitalize; }
.ce-bracket-detalle { color: var(--texto-sec, #6b7280); overflow-wrap: anywhere; text-align: right; }
.ce-bracket-item--ganado { border-color: var(--azul); }
.ce-bracket-item--perdido { opacity: .6; }
.ce-bracket-item--pendiente { border-style: dashed; }

@media (prefers-reduced-motion: reduce) {
  .ce, .ce-final { animation: none; transition: none; }
}

.dark .ce-stats li, .dark .ce-opcion, .dark .ce-resultado,
.dark .ce-final, .dark .ce-bracket-item { border-color: rgba(255,255,255,.14); }