/* =========================================================
   Entretenimientos - estilos base. Todos los colores salen de
   las variables que define cada comunidad (layout_header.php)
   ========================================================= */

:root {
  --radio: 14px;
  --sombra: 0 1px 2px rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.06);
  --borde: color-mix(in srgb, var(--c-texto) 12%, transparent);
  --suave: color-mix(in srgb, var(--c-texto) 5%, var(--c-fondo));
  --tarjeta: color-mix(in srgb, #fff 82%, var(--c-fondo));
}

html, body { min-height: 100%; }
body {
  font-family: var(--fuente);
  background: var(--c-fondo);
  color: var(--c-texto);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { flex: 1; }
a { color: var(--c-pri); }
a:hover { color: color-mix(in srgb, var(--c-pri) 80%, #000); }
h1, h2, h3, .h1, .h2, .h3, .h5 { font-weight: 800; letter-spacing: -.01em; }

/* ---------- Barra superior ---------- */
.barra { background: var(--c-pri); color: var(--c-pri-txt); }
.marca { color: var(--c-pri-txt); }
.marca:hover { color: var(--c-pri-txt); opacity: .9; }
.marca-logo { height: 38px; width: auto; max-width: 160px; object-fit: contain; }
.marca-icono {
  width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 18%, transparent 19%), var(--c-sec);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
}
.marca-nombre { font-weight: 800; font-size: 1.1rem; line-height: 1.15; }
.marca { min-width: 0; }
/* Con logo, en pantallas chicas se muestra sólo el logo (suele traer el nombre) */
@media (max-width: 767.98px) {
  .marca-logo + .marca-nombre { display: none; }
  .marca-logo { max-width: 130px; height: 32px; }
  .marca-nombre { font-size: 1rem; }
}
.barra-link { color: var(--c-pri-txt); text-decoration: none; opacity: .85; font-weight: 600; white-space: nowrap; }
.btn-barra, .barra .btn { white-space: nowrap; }
.barra-link:hover { color: var(--c-pri-txt); opacity: 1; }
.barra-usuario { opacity: .85; font-size: .9rem; }
.btn-barra {
  background: var(--c-sec); color: var(--c-sec-txt); border: 0; font-weight: 700; border-radius: 999px; padding-inline: 1rem;
}
.btn-barra:hover { background: color-mix(in srgb, var(--c-sec) 85%, #000); color: var(--c-sec-txt); }

.pie { border-top: 1px solid var(--borde); color: color-mix(in srgb, var(--c-texto) 75%, transparent); }

/* ---------- Botones ---------- */
.btn-pri {
  --bs-btn-bg: var(--c-pri); --bs-btn-border-color: var(--c-pri); --bs-btn-color: var(--c-pri-txt);
  --bs-btn-hover-bg: color-mix(in srgb, var(--c-pri) 85%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--c-pri) 85%, #000);
  --bs-btn-hover-color: var(--c-pri-txt);
  --bs-btn-active-bg: color-mix(in srgb, var(--c-pri) 75%, #000); --bs-btn-active-color: var(--c-pri-txt);
  --bs-btn-disabled-bg: var(--c-pri); --bs-btn-disabled-border-color: var(--c-pri); --bs-btn-disabled-color: var(--c-pri-txt);
  font-weight: 700; border-radius: 999px; padding-inline: 1.2rem;
}
.btn-outline-pri {
  --bs-btn-color: var(--c-pri); --bs-btn-border-color: var(--c-pri);
  --bs-btn-hover-bg: var(--c-pri); --bs-btn-hover-border-color: var(--c-pri); --bs-btn-hover-color: var(--c-pri-txt);
  --bs-btn-active-bg: var(--c-pri); --bs-btn-active-color: var(--c-pri-txt);
  font-weight: 700; border-radius: 999px; padding-inline: 1.2rem;
}
.btn-link { color: var(--c-pri); font-weight: 600; text-decoration: none; }
.btn:focus-visible, .form-control:focus, .form-select:focus {
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--c-pri) 30%, transparent);
  border-color: var(--c-pri);
}

/* ---------- Tarjetas y bloques ---------- */
.tarjeta, .bloque {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.bloque { padding: 1.1rem 1.2rem; margin-bottom: 1.25rem; }
.bloque-titulo { font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .8rem; color: var(--c-pri); }
.etiqueta { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 800; color: var(--c-sec); filter: brightness(.85); }
.vacio { color: color-mix(in srgb, var(--c-texto) 55%, transparent); margin: 0; font-size: .95rem; }

/* ---------- Portada ---------- */
.portada-titulo { font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.05; margin-bottom: 1rem; }
.tablero-muestra {
  display: grid; grid-template-columns: repeat(8, 1fr);
  aspect-ratio: 1; max-width: 460px; margin-inline: auto;
  border: 10px solid color-mix(in srgb, var(--c-oscura) 70%, #000);
  border-radius: 10px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.18);
  transform: rotate(-3deg);
}
.pasos .paso { height: 100%; padding: 1.4rem; border-radius: var(--radio); background: var(--suave); }
.paso span {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--c-pri); color: var(--c-pri-txt); font-weight: 800; margin-bottom: .6rem;
}
.paso h3 { font-size: 1.1rem; margin-bottom: .3rem; }
.paso p { margin: 0; opacity: .8; }

/* ---------- Aviso de pago ---------- */
.aviso-pago {
  border-radius: var(--radio); padding: 1.1rem 1.3rem;
  background: color-mix(in srgb, var(--c-sec) 18%, var(--c-fondo));
  border: 1px solid color-mix(in srgb, var(--c-sec) 50%, transparent);
}

/* ---------- Listas del salón ---------- */
.lista { display: flex; flex-direction: column; gap: .5rem; }
.fila {
  display: flex; align-items: center; gap: .75rem; padding: .65rem .8rem;
  border-radius: 10px; background: var(--suave);
}
.fila-destacada { background: color-mix(in srgb, var(--c-sec) 20%, var(--c-fondo)); }
.fila-texto { flex: 1; min-width: 0; }
.fila-principal { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.fila-sec { font-size: .85rem; opacity: .75; }
.fila-acciones { display: flex; gap: .25rem; flex-shrink: 0; }
.pastilla {
  display: inline-block; font-size: .75rem; font-weight: 700; padding: .05rem .5rem; border-radius: 999px;
  background: color-mix(in srgb, var(--c-texto) 10%, transparent);
}
.pastilla-turno { background: var(--c-sec); color: var(--c-sec-txt); }
.pastilla-ganada { background: #2e8b57; color: #fff; }
.pastilla-perdida { background: #b4443c; color: #fff; }

.ranking { --bs-table-bg: transparent; --bs-table-color: var(--c-texto); }
.ranking th { font-size: .75rem; text-transform: uppercase; opacity: .6; font-weight: 700; }
.ranking tr.yo td { background: color-mix(in srgb, var(--c-sec) 22%, transparent); font-weight: 700; }
.reglas { padding-left: 1.1rem; }
.reglas li { margin-bottom: .3rem; }

/* ---------- Modal nueva partida ---------- */
.modal-content { background: var(--c-fondo); color: var(--c-texto); border-radius: var(--radio); }
.opciones { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.opciones-color { grid-template-columns: repeat(3, 1fr); }
.opcion { position: relative; cursor: pointer; }
.opcion input { position: absolute; opacity: 0; }
.opcion span {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .2rem;
  padding: .7rem .5rem; border-radius: 10px; border: 2px solid var(--borde); background: var(--tarjeta); height: 100%;
}
.opcion small { opacity: .7; font-size: .78rem; }
.opcion input:checked + span { border-color: var(--c-pri); background: color-mix(in srgb, var(--c-pri) 10%, var(--tarjeta)); }
.opcion input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--c-pri) 40%, transparent); }
.opcion input:disabled + span { opacity: .45; cursor: not-allowed; }

/* ---------- Fichas mini ---------- */
.ficha-mini {
  display: inline-block; width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  vertical-align: middle; box-shadow: inset 0 -2px 0 rgba(0,0,0,.25);
}
.ficha-mini.blanca { background: #f7f2e7; border: 1px solid #c9bea6; }
.ficha-mini.negra { background: #2b2623; border: 1px solid #000; }
.ficha-mini.azar { background: linear-gradient(90deg, #f7f2e7 50%, #2b2623 50%); border: 1px solid #888; }
.historial .ficha-mini { width: 10px; height: 10px; margin-right: .35rem; }

/* =========================================================
   Tablero
   ========================================================= */
.tablero-marco { position: relative; }
.tablero {
  display: grid; grid-template-columns: repeat(8, 1fr);
  aspect-ratio: 1; width: 100%; max-width: 640px; margin-inline: auto;
  border: clamp(6px, 1.6vw, 12px) solid color-mix(in srgb, var(--c-oscura) 65%, #000);
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.tablero-velo {
  position: absolute; inset: 0; max-width: 640px; margin-inline: auto;
  background: color-mix(in srgb, var(--c-fondo) 55%, transparent); border-radius: 10px;
}
.casilla { position: relative; display: grid; place-items: center; }
.casilla.clara { background: var(--c-clara); }
.casilla.oscura { background: var(--c-oscura); }
.casilla.ultimo { background: color-mix(in srgb, var(--c-oscura) 65%, var(--c-sec)); }
.tablero.activo .casilla.movible { cursor: pointer; }
.tablero.activo .casilla.movible .ficha { box-shadow: 0 0 0 3px var(--c-sec), inset 0 -4px 0 rgba(0,0,0,.25), 0 4px 6px rgba(0,0,0,.3); }
.casilla.seleccionada { background: color-mix(in srgb, var(--c-oscura) 40%, var(--c-sec)); cursor: pointer; }
.casilla.seleccionada .ficha { transform: translateY(-4%) scale(1.05); }
.casilla.destino, .casilla.destino-final { cursor: pointer; }
.casilla.destino::after, .casilla.destino-final::after {
  content: ''; position: absolute; width: 30%; height: 30%; border-radius: 50%;
  background: var(--c-sec); opacity: .9; box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-sec) 35%, transparent);
}
.casilla.destino-final::after { opacity: .45; }

.ficha {
  width: 78%; height: 78%; border-radius: 50%; position: relative;
  transition: transform .12s ease;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.25), 0 3px 5px rgba(0,0,0,.35);
}
.ficha::before { /* anillo interior */
  content: ''; position: absolute; inset: 16%; border-radius: 50%;
  border: 2px solid rgba(0,0,0,.12);
}
.ficha.blanca { background: radial-gradient(circle at 35% 30%, #fffdf7, #e8dfcb 70%); }
.ficha.negra  { background: radial-gradient(circle at 35% 30%, #4a423d, #1d1916 70%); }
.ficha.negra::before { border-color: rgba(255,255,255,.12); }
.ficha.dama::after {
  content: '♛'; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: clamp(14px, 3.6vw, 30px); line-height: 1;
}
.ficha.blanca.dama::after { color: color-mix(in srgb, var(--c-sec) 80%, #000); }
.ficha.negra.dama::after { color: var(--c-sec); }

/* ---------- Jugadores y panel ---------- */
.jugador {
  display: flex; align-items: center; gap: .5rem; max-width: 640px; margin-inline: auto;
  padding: .5rem .75rem; border-radius: 10px; font-weight: 700;
}
.jugador-arriba { margin-bottom: .6rem; }
.jugador-abajo { margin-top: .6rem; }
.jugador .ficha-mini { width: 20px; height: 20px; }
.jugador-piezas { font-weight: 600; font-size: .85rem; opacity: .7; }
.jugador.en-turno { background: color-mix(in srgb, var(--c-sec) 25%, var(--c-fondo)); }

.panel-estado {
  padding: 1rem 1.2rem; border-radius: var(--radio); background: var(--tarjeta);
  border: 1px solid var(--borde); border-left: 6px solid var(--borde); box-shadow: var(--sombra);
}
.panel-turno { border-left-color: var(--c-sec); }
.panel-ganada { border-left-color: #2e8b57; }
.panel-perdida { border-left-color: #b4443c; }
.panel-fin { border-left-color: var(--c-pri); }
.estado-titulo { font-size: 1.35rem; font-weight: 800; margin-bottom: .2rem; }
.volver { text-decoration: none; font-weight: 600; }

.historial {
  list-style: none; padding: 0; margin: 0; max-height: 170px; overflow-y: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: .25rem .5rem;
  font-variant-numeric: tabular-nums; font-size: .9rem; counter-reset: jug;
}
.historial li { counter-increment: jug; display: flex; align-items: center; }
.historial li::before { content: counter(jug) '.'; opacity: .45; font-size: .75rem; margin-right: .3rem; min-width: 1.4em; }
.historial li.vacio::before { content: none; }

.chat { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: .35rem; }
.msg { align-self: flex-start; max-width: 85%; background: var(--suave); padding: .35rem .6rem; border-radius: 10px 10px 10px 2px; font-size: .92rem; word-wrap: break-word; }
.msg.mio { align-self: flex-end; background: color-mix(in srgb, var(--c-pri) 14%, var(--c-fondo)); border-radius: 10px 10px 2px 10px; }
.msg-autor { display: block; font-size: .72rem; opacity: .6; font-weight: 700; }

@media (max-width: 575.98px) {
  .bloque { padding: .9rem; }
  .opciones { grid-template-columns: 1fr; }
  .opciones-color { grid-template-columns: repeat(3, 1fr); }
  main.container { padding-inline: 10px; }
  .fila { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .ficha { transition: none; }
}

@media (max-width: 575.98px) {
  .tablero-muestra { transform: none; max-width: 100%; }
}