* { margin: 0; padding: 0; box-sizing: border-box; }

/* [hidden] vs. una clase con "display" propio (p.ej. .btn { display:
   inline-flex }) empatan en especificidad — gana quien esté después en la
   cascada, así que un botón .btn oculto vía hidden=true seguía visible.
   Esto fuerza a que "hidden" siempre gane, sin importar qué otra clase traiga. */
[hidden] { display: none !important; }

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  background-color: var(--surface-base);
  background-image:
    radial-gradient(ellipse 900px 500px at 15% -8%, rgba(238, 186, 44, .07) 0%, transparent 55%),
    radial-gradient(ellipse 900px 600px at 90% 10%, rgba(255, 255, 255, .05) 0%, transparent 50%),
    radial-gradient(ellipse 700px 500px at 50% 100%, rgba(255, 255, 255, .03) 0%, transparent 50%);
  font-family: 'Inter', sans-serif;
  color: var(--text-bright);
  min-height: 100dvh;
  padding-bottom: 80px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.app { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }

/* Covers es un editor de dos paneles (canvas + controles), no una lista/
   formulario como Previo o Calificaciones — el max-width de 1180px de .app
   lo deja corto en pantallas anchas. Igual que el header, vive fuera de
   .app y usa width:100% (no 100vw: 100vw incluye el ancho del scrollbar
   vertical en Windows/Linux y algunas configuraciones de macOS, lo que
   generaba un scroll horizontal fantasma de unos pocos px). */
#view-covers {
  width: 100%; box-sizing: border-box;
  padding: 0 24px;
}

/* ---------- Header ---------- */
/* Full-bleed: header vive fuera de .app (que trae su propio max-width), así
   el fondo/borde llegan de verdad al borde de la ventana en pantallas anchas
   en vez de quedar centrados con aire a los lados. El contenido adentro sí
   se alinea al mismo ancho que el resto de la página vía .app__header-inner. */
.app__header {
  position: sticky; top: 0; z-index: 20;
  background: var(--surface-glass); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 24px;
}
.app__header-inner {
  width: 100%; max-width: 1180px; margin: 0 auto; padding: 18px 16px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.brand { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.brand__mark { color: var(--amarillo); font-size: 15px; filter: drop-shadow(0 0 8px var(--amarillo-glow)); }
.brand__name {
  font-family: 'Inter', sans-serif; font-weight: 800; font-size: 19px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--text-bright);
}
.brand__name span { color: var(--amarillo); }
.brand__tag {
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-muted); padding-left: 10px; border-left: 1px solid var(--border-subtle);
}
.app__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#topbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Buttons ---------- */
button { font: inherit; }
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 12.5px;
  letter-spacing: .6px; text-transform: uppercase; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--r-md); padding: 11px 18px;
  background: transparent; color: var(--text-bright);
  transition: transform var(--dur-fast) var(--ease-spring),
              background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-normal) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
.btn:disabled { opacity: .35; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0) scale(.98); }

.btn--primary { background: var(--amarillo); color: var(--ink); box-shadow: 0 4px 18px var(--amarillo-glow); border-color: var(--amarillo); }
.btn--primary:hover:not(:disabled) { box-shadow: 0 8px 26px var(--amarillo-glow); filter: brightness(1.05); }

.btn--ghost { border-color: var(--border-subtle); background: var(--surface-glass); color: var(--text-secondary); backdrop-filter: blur(10px); }
.btn--ghost:hover:not(:disabled) { color: var(--text-bright); border-color: var(--border); background: var(--surface-hover); }

.btn--subtle { background: var(--surface-raised); border-color: var(--border-subtle); color: var(--text-secondary); }
.btn--subtle:hover:not(:disabled) { color: var(--text-bright); border-color: var(--border); }

.btn--danger { background: transparent; border-color: rgba(214, 90, 90, .4); color: #E38686; }
.btn--danger:hover:not(:disabled) { background: rgba(214, 90, 90, .1); border-color: rgba(214, 90, 90, .7); color: #FFAFAF; }

/* ---------- Workspace (master-detail: lista a la izquierda, ficha activa a la derecha) ---------- */
@keyframes screen-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.workspace { display: grid; grid-template-columns: minmax(320px, 400px) 1fr; gap: 22px; align-items: start; }
.roster-col { min-width: 0; }
.detail-col { min-width: 0; }
.detail-col > * { animation: screen-in var(--dur-normal) var(--ease-out); }

.detail-empty {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  min-height: 220px; justify-content: center;
}

@media (max-width: 900px) {
  .workspace { grid-template-columns: 1fr; }
}

.panel {
  background: var(--surface-glass); border: 1px solid var(--border-subtle); border-radius: var(--r-lg);
  padding: 22px 24px; margin-bottom: 18px; backdrop-filter: blur(16px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .03);
}

/* ---------- Home (selector PREVIO | CALIFICACIONES | COVERS) ---------- */
.section-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  margin: 40px 0;
}
@media (max-width: 1080px) { .section-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .section-grid { grid-template-columns: 1fr; } }

.section-card {
  aspect-ratio: 1 / 1;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px;
  text-align: left; padding: 32px 28px; border-radius: var(--r-xl);
  background: var(--surface-glass); border: 1px solid var(--border-subtle);
  backdrop-filter: blur(16px); cursor: pointer; color: var(--text-bright);
  box-shadow: 0 16px 48px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .03);
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-spring);
}
.section-card:hover { border-color: var(--amarillo); background: var(--surface-hover); transform: translateY(-4px) scale(1.015); }
.section-card__emoji {
  font-size: 40px; line-height: 1; margin-bottom: 4px;
  filter: drop-shadow(0 0 14px var(--amarillo-glow));
  transition: transform var(--dur-fast) var(--ease-spring);
}
.section-card:hover .section-card__emoji { transform: scale(1.12) rotate(-4deg); }
.section-card__title {
  font-family: 'Inter', sans-serif; font-weight: 800; font-size: 22px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--text-bright);
}
.section-card__desc { font-size: 13.5px; color: var(--text-secondary); line-height: 1.4; }
.section-card__status {
  font-size: 12px; font-weight: 700; letter-spacing: .4px; color: var(--amarillo);
  background: var(--amarillo-soft); border: 1px solid rgba(238, 186, 44, .5);
  border-radius: var(--r-full); padding: 4px 12px; margin-top: 2px;
}

.counters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 6px 0 20px; }
.counter {
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 13px;
  padding: 8px 15px; border-radius: var(--r-full); background: var(--surface-raised); border: 1px solid var(--border-subtle);
  letter-spacing: 1px; text-transform: uppercase; color: var(--text-secondary);
  transition: all var(--dur-fast) var(--ease-out);
}
.counter b { color: var(--text-bright); }
.counter.full { background: rgba(214, 90, 90, .12); border-color: rgba(214, 90, 90, .5); color: #FFAFAF; }
.counter.full b { color: #FFAFAF; }
.counter.ok { background: var(--amarillo-soft); border-color: rgba(238, 186, 44, .5); color: var(--amarillo); box-shadow: 0 0 0 3px var(--amarillo-soft); }
.counter.ok b { color: var(--amarillo); }

.hint { font-size: 13px; color: var(--text-muted); }

/* ---------- Match import panel ---------- */
.match-panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 14px;
}
.match-panel__title { display: flex; flex-direction: column; gap: 2px; }
.match-panel__title h2 {
  font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 800;
  letter-spacing: .4px; color: var(--text-bright); margin: 0;
}
.match-panel__updated { font-size: 12px; color: var(--text-muted); }
.match-panel__empty { font-size: 13px; color: var(--text-muted); padding: 10px 2px; }

/* Franja horizontal de scroll — vive arriba de .workspace, a lo ancho
   completo, así su altura nunca depende de (ni compite con) la lista de
   jugadores o la ficha. */
.match-list {
  display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px;
  scrollbar-width: thin;
}
.match-row {
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  flex: 0 0 auto; width: 200px; text-align: left;
  padding: 13px 15px; border-radius: var(--r-md); border: 1px solid var(--border-subtle);
  background: var(--surface-raised); cursor: pointer; color: var(--text-bright);
  font-family: 'Inter', sans-serif;
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-spring);
}
.match-row:hover:not(:disabled) { border-color: var(--border); background: var(--surface-hover); transform: translateY(-1px); }
.match-row.is-active { border-color: var(--amarillo); background: var(--amarillo-soft); box-shadow: 0 0 0 2px var(--amarillo-soft); }
.match-row:disabled { opacity: .55; cursor: wait; }
.match-row__top { display: flex; align-items: center; gap: 8px; width: 100%; }
.match-row__date { font-size: 12px; color: var(--text-muted); }
.match-row__league { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); margin-left: auto; text-align: right; }
.match-row__vs { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.match-row__score { font-size: 16px; font-weight: 800; color: var(--text-secondary); }
.match-row__badges { display: flex; gap: 6px; flex-wrap: wrap; }
.match-row__badge {
  font-size: 10px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--r-full); flex-shrink: 0;
}
.match-row__badge--new { background: var(--amarillo-soft); color: var(--amarillo); border: 1px solid rgba(238, 186, 44, .5); }
.match-row__badge--live { background: rgba(214, 90, 90, .14); color: #FFAFAF; border: 1px solid rgba(214, 90, 90, .5); }

.spinner {
  display: inline-block; width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.25); border-top-color: currentColor;
  animation: spin .7s linear infinite; flex-shrink: 0; vertical-align: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.posicion-grupo { margin-bottom: 28px; }
.posicion-grupo h3 {
  font-family: 'Inter', sans-serif; font-weight: 800; font-size: 13px;
  letter-spacing: 2.5px; text-transform: uppercase; color: var(--text-bright);
  margin-bottom: 14px; border-bottom: 2px solid var(--amarillo); display: inline-block; padding-bottom: 3px;
}

.roster-list { display: flex; flex-direction: column; gap: 6px; }

.jugador-row {
  display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 8px;
  border-radius: var(--r-md); border: 1px solid transparent; background: transparent;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.jugador-row:hover { background: var(--surface-hover); }
.jugador-row[data-state="titular"] { border-color: rgba(238, 186, 44, .4); background: var(--amarillo-soft); }
.jugador-row[data-state="cambio"] { border-color: rgba(87, 123, 193, .35); background: rgba(87, 123, 193, .08); }
.jugador-row.is-clickable { cursor: pointer; }
.jugador-row.is-active { outline: 2px solid var(--amarillo); outline-offset: -1px; }
.jugador-row.is-dragging { box-shadow: 0 12px 32px rgba(0, 0, 0, .45); opacity: .97; }

.jugador-row__handle {
  cursor: grab; color: var(--text-muted); font-size: 15px; line-height: 1;
  padding: 4px 2px; touch-action: none; flex-shrink: 0; user-select: none;
}
.jugador-row__handle:active { cursor: grabbing; }

.roster-placeholder { border: 2px dashed var(--border-subtle); border-radius: var(--r-md); flex-shrink: 0; }

.jugador-row__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); flex-shrink: 0; }
.jugador-row__dot.is-done { background: var(--amarillo); box-shadow: 0 0 6px var(--amarillo-glow); }

.jugador-row__events { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.jugador-row__sub { font-size: 12px; font-weight: 800; color: var(--azul-claro); line-height: 1; }
.jugador-row__stat { font-size: 11px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; line-height: 1; }

.jugador-row__photo {
  width: 40px; height: 40px; border-radius: 8px; overflow: hidden; flex-shrink: 0;
  background: linear-gradient(135deg, var(--surface-hover), var(--surface-raised));
  box-shadow: inset 0 0 0 1.5px var(--border-subtle);
  transition: box-shadow var(--dur-fast) var(--ease-out);
  display: flex; align-items: center; justify-content: center;
}
.jugador-row[data-state="titular"] .jugador-row__photo { box-shadow: inset 0 0 0 2px var(--amarillo), 0 0 10px var(--amarillo-glow); }
.jugador-row[data-state="cambio"] .jugador-row__photo { box-shadow: inset 0 0 0 2px var(--azul-claro); }
.jugador-row__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.jugador-row__photo .iniciales { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 13px; color: var(--crema); letter-spacing: .5px; }

.jugador-row__name {
  font-weight: 600; font-size: 14px; color: var(--text-bright); flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.seg { display: inline-flex; padding: 3px; border-radius: var(--r-sm); background: var(--surface-base); border: 1px solid var(--border-subtle); gap: 2px; flex-shrink: 0; }
.seg--full { display: flex; width: 100%; }
.seg--full .seg__btn { flex: 1; }
.seg__btn {
  padding: 7px 10px; border: none; background: transparent; color: var(--text-muted);
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .4px; text-transform: uppercase;
  border-radius: calc(var(--r-sm) - 3px); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.seg__btn:hover:not(:disabled):not(.is-active) { color: var(--text-bright); }
.seg__btn:disabled { opacity: .35; cursor: not-allowed; }
.seg__btn[data-state="titular"].is-active { background: var(--amarillo); color: var(--ink); box-shadow: 0 2px 10px var(--amarillo-glow); }
.seg__btn[data-state="cambio"].is-active { background: var(--azul-claro); color: var(--ink); box-shadow: 0 2px 10px rgba(87, 123, 193, .4); }

/* ---------- Builder ---------- */
.player-panel {
  background: var(--surface-glass); border: 1px solid var(--border-subtle); border-radius: var(--r-lg);
  backdrop-filter: blur(16px); overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .03);
  max-width: 760px; margin: 0 auto; width: 100%;
}

.player-panel__preview {
  display: flex; justify-content: center; padding: 9px;
  background: radial-gradient(ellipse at 50% 0%, rgba(238, 186, 44, .05) 0%, transparent 65%), var(--surface-base);
}

/* ---------- Previo: tarjeta "Posible 11" (cuadrada, siempre 1080×1080) ----------
   El .previo-card vive a tamaño natural (1080px) y se muestra encogido dentro de
   .previo-preview vía transform: scale() + overflow: hidden — así el layout del
   preview es barato y la exportación solo necesita poner transform: none antes
   de llamar a html2canvas y restaurarlo después. Todo el interior usa % / px
   fijos, nada de calc()/var() en grid — misma cautela que .card con
   applyCardScale, pero aquí no hace falta una función paralela. */
.previo-preview { width: 540px; height: 540px; max-width: 100%; overflow: hidden; margin: 0 auto; border-radius: 18px; }
.previo-card {
  width: 1080px; height: 1080px; flex-shrink: 0; box-sizing: border-box;
  background: var(--blanco); border-radius: 36px; overflow: hidden;
  border: 3px solid var(--accent, var(--amarillo));
  transform: scale(.5); transform-origin: top left;
  display: flex; flex-direction: column;
  font-family: 'Inter', sans-serif;
}
/* ---------- Previo: banner masthead (reemplaza la pastilla chica) ----------
   Franja de ancho completo en el color de acento de la sección — el mismo
   lenguaje que la infografía de referencia del usuario ("JORNADA 2"). El
   flourish de puntos vive solo en una esquina, nunca detrás de texto. */
.previo-card__banner {
  background: var(--accent, var(--amarillo)); padding: 34px 48px 28px;
  text-align: center; position: relative; overflow: hidden; flex-shrink: 0;
}
.previo-card__banner::after {
  content: ""; position: absolute; top: -20%; right: -8%; width: 260px; height: 260px;
  background-image: radial-gradient(rgba(255, 255, 255, .55) 3px, transparent 3px);
  background-size: 24px 24px; opacity: .16; transform: rotate(8deg); pointer-events: none;
}
.previo-card__pill {
  font-weight: 900; font-size: 44px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--accent-ink, #fff); position: relative; z-index: 1; line-height: 1.05; text-wrap: balance;
}
.previo-card__formation {
  font-size: 24px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase;
  color: var(--accent-ink, #fff); opacity: .85; margin-top: 8px; position: relative; z-index: 1;
}
.previo-pitch {
  position: relative; flex: 1; overflow: hidden; margin: 24px 48px; border-radius: 24px;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  border: 2px solid rgba(255, 255, 255, .18);
}
.previo-pitch::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: rgba(255, 255, 255, .18);
}
.previo-pitch::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 200px; height: 200px;
  border: 2px solid rgba(255, 255, 255, .18); border-radius: 50%; transform: translate(-50%, -50%);
}
.previo-slot {
  position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column;
  align-items: center; gap: 7px; width: 196px;
}
.previo-slot.is-target .previo-token, .previo-slot.is-target .previo-slot__empty {
  outline: 3px dashed var(--amarillo); outline-offset: 4px;
}
.previo-token { display: flex; flex-direction: column; align-items: center; gap: 7px; cursor: grab; touch-action: none; }
.previo-token.is-dragging-source { opacity: .25; }
.previo-token__num {
  width: 78px; height: 78px; border-radius: 50%; background: var(--amarillo); color: var(--navy-deep);
  display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 34px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .3); flex-shrink: 0;
}
.previo-token__name {
  font-weight: 800; font-size: 24px; color: var(--blanco); text-transform: uppercase; letter-spacing: .3px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .5); text-align: center; white-space: nowrap;
}
.previo-slot__empty { width: 78px; height: 78px; border-radius: 50%; border: 3px dashed rgba(255, 255, 255, .3); }
.previo-card__firma {
  font-size: 18px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--muted);
  padding: 0 48px 28px; text-align: center; flex-shrink: 0;
}
.previo-card__firma.is-dark { color: rgba(255, 255, 255, .55); }
.previo-ghost { opacity: .9; pointer-events: none; }

.previo-editor__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.previo-editor__head select, .previo-editor__head input[type=text] {
  font-family: 'Inter', sans-serif; background: var(--surface-raised); color: var(--text-bright);
  border: 1px solid var(--border-subtle); border-radius: var(--r-sm); padding: 9px 10px; font-weight: 700; font-size: 12.5px;
}
.previo-editor__head input[type=text] { max-width: 160px; }
.previo-bench { display: flex; flex-wrap: wrap; gap: 8px; }
.previo-bench__item {
  display: flex; align-items: center; gap: 6px; padding: 5px 10px 5px 5px; border-radius: 999px;
  background: var(--surface-raised); border: 1px solid var(--border-subtle); cursor: grab; touch-action: none;
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
}
.previo-bench__item img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.previo-chip__remove {
  background: none; border: none; color: inherit; cursor: pointer; font-weight: 900; font-size: 13px;
  padding: 0 2px; line-height: 1;
}

/* Lista de jugadores clickeable (p.ej. para elegir ausentes) — mismo look que
   .previo-bench__item pero sin drag, solo click para alternar. */
.previo-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.previo-picker__item {
  display: flex; align-items: center; gap: 6px; padding: 5px 12px 5px 5px; border-radius: 999px;
  background: var(--surface-raised); border: 1px solid var(--border-subtle); cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.previo-picker__item img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.previo-picker__item:hover { border-color: var(--amarillo); }
.previo-picker__item.is-active { background: var(--amarillo); border-color: var(--amarillo); color: var(--navy-deep); }

/* Transmisión: lista cerrada de canales, click para prender/apagar — cada
   chip trae su color de marca en --chip-color (ver BROADCAST_COLORS). */
.previo-broadcast-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.previo-broadcast-chip {
  font-family: 'Inter', sans-serif; font-weight: 800; font-size: 12.5px; letter-spacing: .3px;
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  background: var(--surface-raised); border: 1px solid var(--border-subtle); color: var(--text-secondary);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.previo-broadcast-chip:hover { border-color: var(--chip-color); color: var(--text-bright); }
.previo-broadcast-chip.is-active { background: var(--chip-color); border-color: var(--chip-color); color: #fff; }

/* ---------- Previo: shell genérico de tarjeta (cuerpo compartido por
   todas las secciones que no son la cancha de Posible Once) ---------- */
.previo-card__body {
  --ink: #041E42; --ink-muted: #5B6472; --row-border: #eee;
  flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 20px; text-align: center; padding: 36px 48px 8px; box-sizing: border-box;
}
.previo-card__body.is-dark {
  --ink: #FFFFFF; --ink-muted: rgba(255, 255, 255, .78); --row-border: rgba(255, 255, 255, .18);
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
}
.previo-card__body .hint { color: var(--ink-muted); }
.previo-text { white-space: pre-wrap; font-weight: 700; line-height: 1.5; color: var(--ink); text-align: center; }

/* ---------- Previo: escudos propios (discos concéntricos, sin imágenes) ---------- */
.previo-crest { border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.previo-crest__inner {
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif; font-weight: 900; letter-spacing: .5px;
}

/* ---------- Previo: ¿Cuándo es? ----------
   Esta tarjeta se exporta como PNG de tamaño fijo (1080×1080) para pegar en
   Substack, no es una página web fluida — así que a diferencia del resto de
   tarjetas (que sí centran su contenido con flexbox), acá los escudos y las
   filas de datos van en posiciones absolutas fijas dentro de .previo-cuando-body.
   Cambiar el tamaño de un bloque (p.ej. los escudos) ya NO empuja al resto:
   cada quien tiene su "top" fijo, a ajustar a mano si hace falta. */
.previo-cuando-body { position: relative; }
.previo-cuando__teams {
  position: absolute; top: 70px; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center; gap: 40px;
}
.previo-cuando__team {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  font-size: 42px; font-weight: 800; text-transform: uppercase; color: var(--ink);
}
.previo-cuando__vs { font-size: 40px; font-weight: 900; color: var(--ink-muted); }
.previo-cuando {
  position: absolute; top: 520px; left: 48px; right: 48px;
  display: flex; flex-direction: column; gap: 26px;
}
.previo-cuando__row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-bottom: 2px solid var(--row-border); padding-bottom: 18px;
}
.previo-cuando__label { font-size: 30px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-muted); }
.previo-cuando__value { font-size: 36px; font-weight: 800; color: var(--ink); text-align: right; }
.previo-cuando__chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.previo-broadcast { font-size: 20px; font-weight: 800; color: #fff; padding: 8px 18px; border-radius: 999px; letter-spacing: .5px; }

/* ---------- Previo: Ausentes ----------
   width del item (280px) + gap (32px) están calibrados para que quepan
   como máximo 3 por fila dentro del ancho útil de la tarjeta (1080 - 2×48
   de padding = 984px): 3×280 + 2×32 = 904px. Un 4° ausente ya no cabe y
   baja solo a una segunda fila — el conjunto entero se sigue centrando
   verticalmente porque .previo-ausentes vive dentro de .previo-card__body,
   que centra su contenido con flexbox. */
.previo-ausentes { display: flex; flex-wrap: wrap; gap: 32px; justify-content: center; }
.previo-ausente { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 280px; }
.previo-ausente__photo {
  width: 280px; height: 330px; border-radius: 18px; overflow: hidden;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%); display: flex; align-items: center; justify-content: center;
}
.previo-ausente__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.previo-ausente__photo span { font-family: 'Inter', sans-serif; font-weight: 900; font-size: 76px; color: var(--crema); }
.previo-ausente__name { font-size: 28px; font-weight: 800; color: var(--ink); text-transform: uppercase; text-align: center; }
.previo-ausente__badge {
  font-size: 22px; font-weight: 800; color: #fff; white-space: nowrap;
  padding: 10px 22px; border-radius: 999px; text-transform: uppercase; letter-spacing: .3px;
}
/* Con 4+ ausentes (2+ filas) el tamaño base se ve apretado — se encoge un
   escalón para que dos filas de 3 quepan con más aire. */
.previo-ausentes--compact { gap: 20px; }
.previo-ausentes--compact .previo-ausente { width: 200px; gap: 10px; }
.previo-ausentes--compact .previo-ausente__photo { width: 200px; height: 236px; border-radius: 14px; }
.previo-ausentes--compact .previo-ausente__photo span { font-size: 54px; }
.previo-ausentes--compact .previo-ausente__name { font-size: 20px; }
.previo-ausentes--compact .previo-ausente__badge { font-size: 17px; padding: 8px 18px; }

.previo-ausente-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.previo-ausente-row img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.previo-ausente-row__name { flex: 1; font-size: 13px; font-weight: 600; color: var(--text-bright); }
.previo-ausente-row__reason {
  font-family: 'Inter', sans-serif; background: var(--surface-raised); color: var(--text-bright);
  border: 1px solid var(--border-subtle); border-radius: var(--r-sm); padding: 6px 8px; font-size: 12px;
}

/* ---------- Stats: leaderboard (5 filas, foto + rango + nombre + valor) ----------
   Vive dentro del mismo .previo-card__body que el resto de tarjetas (ver
   src/shared/card.js) — reusa --ink/--ink-muted/--row-border, así el modo
   oscuro (si algún día se activa acá) funciona gratis. */
.previo-stat-list { display: flex; flex-direction: column; gap: 18px; width: 100%; }
.previo-stat-row {
  display: flex; align-items: center; gap: 24px;
  border-bottom: 2px solid var(--row-border); padding-bottom: 18px;
}
.previo-stat-row:last-child { border-bottom: none; padding-bottom: 0; }
.previo-stat-row__rank {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent, var(--amarillo)); color: var(--accent-ink, #fff);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif; font-weight: 900; font-size: 28px;
}
.previo-stat-row__photo {
  width: 84px; height: 100px; border-radius: 14px; overflow: hidden; flex-shrink: 0;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  display: flex; align-items: center; justify-content: center;
}
.previo-stat-row__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.previo-stat-row__photo span { font-family: 'Inter', sans-serif; font-weight: 900; font-size: 34px; color: var(--crema); }
.previo-stat-row__name {
  flex: 1; min-width: 0; text-align: left; font-size: 30px; font-weight: 800;
  text-transform: uppercase; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.previo-stat-row__value { font-size: 24px; font-weight: 900; color: var(--ink); white-space: nowrap; text-align: right; }

/* ---------- Previo: Opiniones ---------- */
.previo-opiniones-stack { display: flex; flex-direction: column; gap: 20px; }
.previo-opinion { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.previo-opinion__avatar {
  width: 170px; height: 170px; border-radius: 50%; overflow: hidden; position: relative;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
}
.previo-opinion__avatar img { width: 100%; height: 100%; object-fit: cover; }
.previo-opinion__initials {
  width: 100%; height: 100%; align-items: center; justify-content: center;
  background: var(--amarillo); color: var(--navy-deep); font-family: 'Inter', sans-serif; font-weight: 900; font-size: 56px;
}
.previo-opinion__author { font-size: 28px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: var(--ink); }

.builder {
  display: flex; flex-direction: column; gap: 11px; padding: 14px 16px 16px;
}
.field { display: flex; flex-direction: column; gap: 5px; }
.field > label {
  font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-secondary); font-weight: 700;
}
.field input[type=text], .field textarea, .field input[type=number] {
  font-family: 'Inter', sans-serif; font-size: 13.5px; border: 1px solid var(--border-subtle);
  background: var(--surface-raised); border-radius: var(--r-sm); padding: 8px 10px; color: var(--text-bright); width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-muted); }
.field textarea { resize: vertical; min-height: 100px; line-height: 1.4; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--amarillo); box-shadow: 0 0 0 3px var(--amarillo-soft); }

.rating-pick { display: flex; flex-wrap: wrap; gap: 5px; }
.rating-pick button {
  padding: 6px 10px; font-size: 10.5px; border-radius: var(--r-full); background: var(--surface-raised);
  color: var(--text-secondary); border: 2px solid var(--border-subtle); letter-spacing: .3px; text-transform: uppercase;
  cursor: pointer; font-weight: 700; transition: all var(--dur-fast) var(--ease-out);
}
.rating-pick button:hover:not(.is-active) { color: var(--text-bright); border-color: var(--border); }
.rating-pick button.is-active { border-color: var(--rc); background: var(--rc); color: #fff; box-shadow: 0 2px 12px color-mix(in srgb, var(--rc) 45%, transparent); }
.rating-pick button[data-r="basura"]    { --rc: var(--basura); }
.rating-pick button[data-r="muymal"]    { --rc: var(--muymal); }
.rating-pick button[data-r="mal"]       { --rc: var(--mal); }
.rating-pick button[data-r="regular"]   { --rc: var(--regular); }
.rating-pick button[data-r="bien"]      { --rc: var(--bien); }
.rating-pick button[data-r="muybien"]   { --rc: var(--muybien); }
.rating-pick button[data-r="legendario"]{ --rc: var(--legendario); color: var(--ink); }
.rating-pick button[data-r="legendario"]:not(.is-active) { color: var(--legendario); }
.rating-pick button[data-r="sincalificacion"] { --rc: var(--sincalificacion); }

.row-events { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.stepper { display: flex; align-items: center; gap: 5px; }
.stepper label { font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase; color: var(--text-secondary); font-weight: 700; margin-right: 3px; }
.stepper button {
  width: 23px; height: 23px; padding: 0; background: var(--surface-raised); border: 1px solid var(--border-subtle);
  color: var(--text-bright); border-radius: 6px; font-weight: 800; cursor: pointer; font-size: 13px;
  transition: all var(--dur-fast) var(--ease-out);
}
.stepper button:hover { border-color: var(--amarillo); color: var(--amarillo); }
.stepper span { min-width: 16px; text-align: center; font-weight: 700; color: var(--text-bright); font-size: 13px; }
.toggle {
  display: flex; align-items: center; gap: 5px; cursor: pointer; user-select: none;
  font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--text-secondary);
}
.toggle input { width: 16px; height: 16px; accent-color: var(--amarillo); cursor: pointer; }

.card-actions { margin-top: 2px; }
.card-actions button { width: 100%; justify-content: center; }

.minute-field { display: flex; flex-direction: column; gap: 6px; }
.minute-row { display: flex; align-items: center; gap: 10px; }
.minute-field input[type=number] { width: 62px; flex-shrink: 0; }
.minute-field .toggle { font-size: 10.5px; flex-shrink: 0; }
.minute-field .hint { font-size: 11px; }

/* ---------- CARD (export target — light, brand-fixed, unchanged look) ----------
   Base values here are the full (cs=1) size html2canvas is known to render
   correctly. The live preview and the export both scale by having JS
   (applyCardScale) write literal px inline styles — html2canvas 1.4.1 does
   NOT reliably resolve calc()/var() inside grid-template-columns or gap, so
   scaling must never rely on CSS custom properties for those. */
.card {
  width: 680px; max-width: 100%; flex-shrink: 0; background: var(--blanco); border-radius: 18px;
  padding: 20px 24px; display: grid; grid-template-columns: 132px 1fr; gap: 20px;
  align-items: center; box-shadow: 0 6px 18px rgba(4,30,66,.10);
  border: 2px solid var(--rating-color); border-left-width: 8px;
}
.foto {
  width: 132px; height: 161px; border-radius: 14px; overflow: hidden; flex-shrink: 0;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  border: 5px solid var(--rating-color);
  display: flex; align-items: center; justify-content: center;
}
.foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; background: #fff; }
.foto .iniciales { font-family: 'Inter', sans-serif; font-weight: 900; font-size: 40px; color: var(--crema); letter-spacing: 2px; }

.info { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.nombre {
  font-family: 'Inter', sans-serif; font-weight: 900; font-size: 18px;
  text-transform: uppercase; letter-spacing: 1px; color: #041E42; line-height: 1.1;
}
.meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.badge {
  background: var(--rating-color); color: #fff; font-family: 'Inter', sans-serif;
  font-weight: 800; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; white-space: nowrap;
  padding: 6px 14px; border-radius: 999px;
}
.badge.dark-text { color: var(--navy-deep); }
.estrellas { font-size: 17px; letter-spacing: 2px; color: var(--rating-color); display: inline-flex; align-items: center; }
.estrellas .off { color: #D8D8D8; }
.estrellas svg { width: 19px; height: 19px; display: block; }

.chip {
  font-family: 'Inter', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: .5px;
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--navy-deep); white-space: nowrap;
}

.tarjeta { display: inline-block; width: 11px; height: 15px; border-radius: 2px; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.tarjeta--amarilla { background: #F4C20D; }
.tarjeta--roja { background: #C62828; }

.texto { font-family: 'Inter', sans-serif; font-size: 17px; line-height: 1.5; color: #33415C; }

.r-basura    { --rating-color: var(--basura); }
.r-muymal    { --rating-color: var(--muymal); }
.r-mal       { --rating-color: var(--mal); }
.r-regular   { --rating-color: var(--regular); }
.r-bien      { --rating-color: var(--bien); }
.r-muybien   { --rating-color: var(--muybien); }
.r-legendario{ --rating-color: var(--legendario); }
.r-sincalificacion { --rating-color: var(--sincalificacion); }

/* ---------- Toast ---------- */
#toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--surface-raised); color: var(--text-bright); padding: 13px 22px; border-radius: var(--r-md);
  border: 1px solid var(--border); font-weight: 700; font-size: 13px; letter-spacing: .5px;
  box-shadow: 0 16px 48px rgba(0,0,0,.5); backdrop-filter: blur(12px);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-normal) var(--ease-out), transform var(--dur-normal) var(--ease-spring); z-index: 50;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.error { border-color: rgba(214, 90, 90, .6); color: #FFAFAF; }