/* ═══════════════════════════════════════════════════════════
   CabritaCoin · Babel
   Los patronos contra Cabramaravilla.

   Reparto de color de la página, para no romper la regla del
   latón único:
   · El latón (--accent) es para quien va ganando el marcador.
     Nada más lo lleva mientras la pestaña "En juego" está a la
     vista; el ranking vive en su propia pestaña y allí se lo
     queda el primero.
   · Las dos opciones de cada pregunta usan --blue y --red, que
     no son acentos sino etiquetas de bando (igual que el draft).
   ═══════════════════════════════════════════════════════════ */

.babel-main {
  max-width: 820px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
}

/* ── Masthead ───────────────────────────────────────────── */
/* Centrado, como el resto de páginas, pero a otra escala: aquí el
   nombre va solo y hace de portada. Cinzel en versales aguanta el
   tamaño; lo que lo vuelve monumental es el espaciado entre letras
   y el aire de alrededor, no el peso. */
.bb-hero {
  padding: 3rem 0 2.75rem;
  text-align: center;
}
/* Versalita callada sobre el titular: dice de qué va esto sin robarle
   nada a BABEL. Sin la cápsula ni el punto verde del .badge, que
   anuncian estado en vivo y aquí no hay ninguno que anunciar. */
.bb-hero .bb-eyebrow {
  margin: 0 0 0.9rem;
  text-indent: 0.2em;   /* compensa el espaciado, igual que el titular */
}
.bb-hero h1 {
  margin: 0;
  font-size: clamp(3rem, 13vw, 6.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.2em;
  /* El espaciado deja un hueco colgando tras la última letra, y eso
     descentra el conjunto media medida hacia la izquierda. Sangrar
     el doble lo devuelve al eje óptico. */
  text-indent: 0.2em;
}

@media (max-width: 600px) {
  .bb-hero { padding: 2rem 0 1.75rem; }
  .bb-hero h1 { letter-spacing: 0.14em; text-indent: 0.14em; }
}

/* ── Prólogo ────────────────────────────────────────────── */
/* La historia de la torre, en columna estrecha y entre filetes:
   se lee una vez y luego se salta con la vista. */
.bb-prologo {
  max-width: 58ch;
  margin: 0 auto 2.5rem;
  padding: 1.6rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.bb-prologo p {
  margin: 0 0 0.8rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-2);
}
.bb-prologo p:last-child { margin-bottom: 0; }
/* La última línea es el remate: una frase corta detrás de dos
   párrafos largos ya destaca sola, así que basta con subirle el
   contraste medio tono. */
.bb-prologo-cierre { color: var(--text); }

/* La frase que cierra la historia y abre el juego: va suelta entre
   el prólogo y el marcador, sin caja, para que se lea como remate. */
.bb-tagline {
  max-width: 56ch;
  margin: 0 auto 2.25rem;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text);
}

/* ── Marcador ───────────────────────────────────────────── */
.bb-marcador {
  border: 1px solid var(--border);
  background: var(--bg-elev);
  padding: 1.6rem 1.25rem 1.2rem;
  margin-bottom: 2rem;
  text-align: center;
}
.bb-score {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}
.bb-side { display: flex; flex-direction: column; gap: 0.35rem; }
.bb-side-name {
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.bb-side-pts {
  font-family: var(--display);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-2);
}
/* Solo el que va por delante se lleva el latón. */
.bb-side-lider .bb-side-pts { color: var(--accent); }
.bb-side-lider .bb-side-name { color: var(--text-2); }

/* El filete vertical que separa los dos bandos */
.bb-score-sep {
  width: 1px;
  height: 56px;
  background: var(--border);
  display: block;
}

.bb-score-estado {
  margin: 1.1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border-soft);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  color: var(--muted);
}

/* ── Reglas ─────────────────────────────────────────────── */
/* Justo debajo del marcador: explica los números que se acaban de
   ver. Sin caja, para no apilar dos cajas seguidas; lo que la
   separa es el filete. */
.bb-reglas {
  margin: 0 0 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--border);
}
/* Plegado por defecto: quien ya conoce el juego no se lo encuentra
   en medio cada vez que entra. El mismo interruptor "+ / -" que el
   formulario de admin, para que sea el mismo gesto en toda la página. */
.bb-reglas summary {
  cursor: pointer;
  font-family: var(--display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-2);
  list-style: none;
}
.bb-reglas summary::-webkit-details-marker { display: none; }
.bb-reglas summary::before { content: '+ '; color: var(--muted); }
.bb-reglas details[open] > summary::before { content: '- '; }
.bb-reglas summary:hover { color: var(--accent); }

.bb-reglas ul {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.bb-reglas li {
  position: relative;
  padding-left: 1.15rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-2);
}
/* El punto de lista es un cuadrado, no un círculo: aquí no hay curvas. */
.bb-reglas li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  background: var(--border-strong);
}
.bb-reglas strong { color: var(--text); font-weight: 700; }

/* ── Compartidas (espejo de ama.css) ────────────────────── */
.nav-active { color: var(--accent) !important; font-weight: 700; }

.ban-banner {
  background: rgba(166,62,51,0.1);
  border: 1px solid rgba(166,62,51,0.35);
  color: var(--red);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.85rem 1.2rem;
  margin: 0.5rem 0 1.5rem;
  text-align: center;
}

.char-hint { font-size: 0.75rem; color: var(--muted); }
.small { font-size: 0.8rem; }
.req { color: var(--red); }

.nv-loading {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 3rem;
  justify-content: center;
}
.nv-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  animation: bb-spin 0.7s linear infinite;
}
@keyframes bb-spin { to { transform: rotate(360deg); } }

.bb-cta-login { text-align: center; margin: 0 0 1.75rem; }

/* ── Formulario de admin ────────────────────────────────── */
.bb-form-section {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  margin-bottom: 1.75rem;
}
.bb-form-details > summary {
  cursor: pointer;
  padding: 0.85rem 1.25rem;
  font-family: var(--display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
  list-style: none;
}
.bb-form-details > summary::-webkit-details-marker { display: none; }
.bb-form-details > summary::before { content: '+ '; color: var(--muted); }
.bb-form-details[open] > summary::before { content: '- '; }
.bb-form-details > summary:hover { color: var(--accent); }

.bb-form {
  padding: 0 1.25rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.bb-form .field { display: flex; flex-direction: column; gap: 0.3rem; flex: 1; }
.bb-form .field-row { display: flex; gap: 0.85rem; flex-wrap: wrap; }
.bb-form label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.bb-form input[type="text"],
.bb-form textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  padding: 0.6rem 0.75rem;
}
.bb-form textarea { resize: vertical; }
.bb-form input[type="text"]:focus,
.bb-form textarea:focus { outline: none; border-color: var(--accent); }
.bb-form .char-hint { text-align: right; }
.bb-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ── Filtros ────────────────────────────────────────────── */
/* Al eje, como el masthead. */
.bb-filter-bar {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.1rem;
  flex-wrap: wrap;
}
.filter-btn {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 0.35rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.filter-btn:hover { border-color: var(--accent); color: var(--text); }
.filter-btn.active {
  background: rgba(195, 162, 95, 0.12);
  border-color: rgba(195, 162, 95, 0.45);
  color: var(--accent);
}

/* ── Tarjetas ───────────────────────────────────────────── */
.bb-lista { display: flex; flex-direction: column; gap: 0.9rem; }

.bb-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  padding: 1.15rem 1.25rem;
}
.bb-card-anulada { opacity: 0.6; }

.bb-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.7rem;
}
.bb-card-fecha { font-size: 0.75rem; color: var(--muted); letter-spacing: 0.05em; }

.bb-pregunta {
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.34;
  letter-spacing: 0.025em;
  color: var(--text);
  margin: 0 0 0.5rem;
}
.bb-desc {
  margin: 0 0 0.9rem;
  font-size: 0.88rem;
  color: var(--text-2);
  white-space: pre-wrap;
}

/* Etiquetas de estado: color y palabra, sin iconos. */
.bb-tag {
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 0.28rem 0.6rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.bb-tag-abierta { background: transparent; color: var(--green); border: 1px solid var(--green-line); }
.bb-tag-cerrada { background: transparent; color: var(--text-2); border: 1px solid var(--border-strong); }
.bb-tag-patronos { background: transparent; color: var(--blue); border: 1px solid var(--blue); }
.bb-tag-cabra { background: transparent; color: var(--red); border: 1px solid var(--red-line); }
.bb-tag-anulada { background: transparent; color: var(--muted); border: 1px solid var(--border); }

/* ── Botones de opción ──────────────────────────────────── */
.bb-opciones { display: flex; gap: 0.6rem; margin-bottom: 0.9rem; flex-wrap: wrap; }
.bb-op {
  flex: 1 1 180px;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.75rem 0.8rem;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.bb-op-letra {
  display: block;
  font-family: var(--display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--muted);
  margin-bottom: 0.2rem;
}
.bb-op:disabled { cursor: default; }
.bb-op-a:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }
.bb-op-b:hover:not(:disabled) { border-color: var(--red); color: var(--red); }

/* El voto propio: relleno tenue y filete del bando. */
.bb-op-mio.bb-op-a { background: rgba(123, 167, 217, 0.12); border-color: var(--blue); color: var(--blue); }
.bb-op-mio.bb-op-b { background: var(--red-soft); border-color: var(--red); color: var(--red); }
.bb-op-mio .bb-op-letra { color: inherit; }

/* ── Barra de recuento ──────────────────────────────────── */
.bb-bar-wrap { margin-bottom: 0.35rem; }

/* Rótulo de las marcas. Es una frase, no una etiqueta, así que va en
   caja baja: en versalita se leía como dos fragmentos sueltos y costaba
   entenderla. Pequeña y en gris para no competir con los porcentajes,
   que son los números que de verdad se miran. */
.bb-escala {
  margin: 0 0 0.4rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--muted);
}
.bb-escala span { color: var(--text-2); font-weight: 700; }
/* Sin overflow:hidden a propósito: recortaba las marcas del 90% a la
   altura de la barra y por eso no se veían. El relleno no se sale nunca
   (su ancho es un porcentaje), así que no hace falta recortar nada. */
.bb-bar {
  position: relative;
  height: 9px;
  background: var(--red-fill);
}
.bb-bar-a {
  height: 100%;
  background: var(--blue);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.bb-bar-vacia { background: var(--bg-elev-2); border: 1px solid var(--border); }

/* Las marcas del 90%: a un lado y a otro, porque el consenso
   puede caer de cualquiera de los dos. Lo que hay por fuera de
   ellas es la zona en la que Cabra dobla. */
.bb-bar-tick {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  margin-left: -1px;   /* centrada en el punto exacto, no a su derecha */
  background: var(--text);
}

.bb-bar-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  margin-top: 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* Los dos porcentajes anclan los extremos y el total queda al eje,
   sobre la marca del 50%. */
.bb-pct-a { color: var(--blue); flex: 1; }
.bb-pct-b { color: var(--red); flex: 1; text-align: right; }
.bb-total { color: var(--muted); font-weight: 600; letter-spacing: 0.05em; }

/* Avisos: solo aparecen cuando de verdad está en juego. El rojo es
   para lo que va mal (falta quórum, la pregunta se cae). */
.bb-aviso {
  margin: 0.75rem 0 0;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--red-line);
  background: var(--red-soft);
  color: var(--red);
  font-size: 0.8rem;
  font-weight: 600;
}

/* El del consenso no avisa de nada malo: la pregunta pasa a valer el
   doble para los dos bandos por igual. Va en neutro, con el filete
   fuerte, para que se lea como un cambio de apuesta y no como un fallo. */
.bb-aviso-doble {
  border-color: var(--border-strong);
  background: var(--lift-1);
  color: var(--text);
}

/* ── Reparto y resultado ────────────────────────────────── */
.bb-reparto {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border-soft);
  font-size: 0.82rem;
}
.bb-reparto div { display: flex; flex-direction: column; gap: 0.15rem; }
.bb-reparto dt {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.bb-reparto dd { margin: 0; color: var(--text); font-weight: 600; }

.bb-resultado {
  margin-top: 0.9rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border);
  background: var(--lift-1);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-2);
}
.bb-resultado strong { color: var(--text); }

/* ── Acciones de admin ──────────────────────────────────── */
.bb-admin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border);
}
.bb-admin-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 0.25rem;
}
/* ── Ranking ────────────────────────────────────────────── */
.bb-ranking-wrap {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  overflow: hidden;
}
.bb-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.bb-table th {
  background: var(--lift-1);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.bb-table th.col-num, .bb-table td.col-num { text-align: right; }
.bb-table td {
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--lift-2);
}
.bb-table tbody tr:last-child td { border-bottom: none; }
.bb-table tbody tr:hover { background: var(--lift-1); }
.bb-col-pos { width: 52px; text-align: center; }

.bb-pos {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--muted);
}
/* El primero NO va en latón: el marcador está siempre encima de la
   tabla y ya se lo ha quedado. Aquí la primera posición se marca
   con el tamaño y el contraste. */
.bb-pos-1 { color: var(--text); font-size: 1.3rem; }
.bb-nombre { font-weight: 700; color: var(--text); }
.bb-aciertos { font-weight: 800; color: var(--text); }
.bb-secundario { color: var(--muted); font-weight: 600; }

/* El salto entre el corte de los 100 y tu propia fila. */
.bb-corte td {
  text-align: center;
  color: var(--muted);
  letter-spacing: 0.3em;
  padding: 0.35rem 1rem;
  background: var(--lift-1);
}

.bb-mi-fila {
  background: rgba(195, 162, 95, 0.05) !important;
  border-left: 3px solid var(--accent);
}
.bb-mi-fila td:first-child { padding-left: calc(1rem - 3px); }
.bb-tu-badge {
  font-size: 0.68rem;
  font-weight: 700;
  background: rgba(195, 162, 95, 0.15);
  color: var(--accent);
  border: 1px solid rgba(195, 162, 95, 0.3);
  padding: 0.1rem 0.45rem;
  margin-left: 0.5rem;
}

.bb-vacio {
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  padding: 3rem 1rem;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 600px) {
  .babel-main { padding: 1.25rem 1rem 3rem; }
  .bb-side-pts { font-size: 2.25rem; }
  .bb-marcador { padding: 1.25rem 1rem 1rem; }
  .bb-op { flex-basis: 100%; }
  .bb-form .field-row { flex-direction: column; }
  .bb-table th, .bb-table td { padding: 0.6rem 0.5rem; }
  .bb-table .bb-oculta-movil { display: none; }
}