/* ================================================================
   Apex — capa visual. Se carga DESPUES del tema base para ajustarlo
   sin reescribirlo. Solo en las paginas web de jugador (no admin).
   ================================================================ */
:root {
  --apex-navy: #1b2a4a;
  --apex-gold: #d4af37;
  --apex-green: #1a7f37;
  --apex-green-2: #146c2e;
  --apex-red: #b42318;
  /* Azul de la tarjeta para scores sobre par (bogey/doble/triple+). Reemplaza
     al rojo en la NOTACION de score porque el rojo altera a algunos jugadores.
     El rojo se conserva para dinero/errores, no para el score. */
  --apex-score-blue: #2f6fb0;
  --apex-score-blue-dark: #234f86;
}

/* Fondo crema claro (paleta Apex: va con el navy y el dorado), para que las
   tarjetas/widgets blancos resalten. */
body.page-content-white {
  background: #f4f2ea !important;
}

/* --- Barra superior Apex ----------------------------------------
   Antes era una franja negra (bg-dark) que ya no combinaba con el fondo
   crema. Ahora se funde con el fondo: mismo crema, texto navy, con una
   linea sutil abajo para separarla del contenido. */
.apex-bar {
  background-color: #f4f2ea !important;
  border-bottom: 1px solid #e6e2d6;
  box-shadow: 0 1px 2px rgba(27, 42, 74, .04);
}
.apex-bar .nav-link,
.apex-bar .navbar-nav > li > a,
.apex-bar .navbar-brand { color: var(--apex-navy) !important; }
.apex-bar .nav-link:hover,
.apex-bar .navbar-nav > li > a:hover { color: var(--apex-green-2) !important; }
.apex-bar .navbar-toggler { border-color: rgba(27, 42, 74, .25); }
.apex-bar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(27,42,74,0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* --- iOS: evitar el zoom automatico al enfocar un campo -----------
   Safari en iPhone hace zoom (y "corta" la pagina) cuando el campo tiene una
   tipografia menor a 16px. Forzamos 16px en los campos de formulario en
   pantallas chicas para que al tocar el codigo de partida —o cualquier input—
   la pagina no se acerque ni se salga de cuadro. */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select,
  textarea,
  .form-control {
    font-size: 16px !important;
  }
}

/* --- Notacion de tarjeta de golf --------------------------------
   Bajo par = circulos (verde), sobre par = cuadrados (azul). El "doble" es un
   anillo separado por un hueco blanco. Se dibuja con box-shadow INSET (hacia
   adentro) para que el segundo recuadro quede DENTRO de la celda y no lo
   recorte la tabla (un box-shadow hacia afuera se cortaba arriba/abajo). */
.sc {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.9em; height: 1.9em; padding: 0 .18em; margin: 3px;
  font-weight: 700; line-height: 1; box-sizing: border-box; vertical-align: middle;
}
.sc-par { color: inherit; }
.sc-birdie { border: 2px solid var(--apex-green); border-radius: 50%; color: var(--apex-green); }
.sc-eagle { background: var(--apex-green); border-radius: 50%; color: #fff; }
.sc-albatross { border: 2px solid #b8860b; border-radius: 50%; color: #b8860b;
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #b8860b; }
.sc-bogey { border: 2px solid var(--apex-score-blue); border-radius: 5px; color: var(--apex-score-blue); }
.sc-double { border: 2px solid var(--apex-score-blue); border-radius: 5px; color: var(--apex-score-blue);
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px var(--apex-score-blue); }
.sc-triple { background: var(--apex-score-blue-dark); color: #fff; border-radius: 5px; }

/* Leyenda compacta de la notacion. */
.sc-leyenda { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: #667; margin: 6px 0 2px; }
.sc-leyenda .sc { min-width: 1.5em; height: 1.5em; font-size: 11px; margin: 0 4px 0 0; }
.sc-leyenda span { display: inline-flex; align-items: center; }

/* --- Botones: contorno dorado, sin relleno solido -----------------
   La estetica Apex no usa botones rellenos de color. Todos van en blanco con
   borde dorado y texto navy. El rojo solo como semantica de borde en acciones
   destructivas. Antes primary/success eran rellenos verdes: se quitan. */
.btn-primary,
.btn-success,
.btn-info,
.btn-secondary,
.btn-default,
.btn-warning {
  background: #fff !important;
  border: 1.5px solid var(--apex-gold) !important;
  color: var(--apex-navy) !important;
}
.btn-primary:hover, .btn-success:hover, .btn-info:hover,
.btn-secondary:hover, .btn-default:hover, .btn-warning:hover {
  background: #faf6e8 !important; color: var(--apex-navy) !important;
}
/* Accion destructiva: contorno rojo (rojo = semantica, no relleno). */
.btn-danger {
  background: #fff !important;
  border: 1.5px solid var(--apex-red) !important;
  color: var(--apex-red) !important;
}
.btn-danger:hover { background: #fbeeec !important; color: var(--apex-red) !important; }

/* --- Alertas: contorno de color, fondo blanco (sin relleno solido) - */
.alert {
  background: #fff !important; border: 1.5px solid var(--apex-gold);
  color: var(--apex-navy); border-radius: 12px;
}
.alert-success { border-color: var(--apex-green) !important; color: var(--apex-green-2) !important; }
.alert-danger { border-color: var(--apex-red) !important; color: var(--apex-red) !important; }
.alert-info, .alert-warning { border-color: var(--apex-gold) !important; color: var(--apex-navy) !important; }

/* --- Paginacion: dorado/navy en vez del azul de Bootstrap --------- */
.pagination > li > a, .pagination > li > span, .page-link { color: var(--apex-navy) !important; }
.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:hover, .pagination > .active > span:hover,
.page-item.active .page-link {
  background-color: #faf6e8 !important; border-color: var(--apex-gold) !important; color: var(--apex-navy) !important;
}

/* --- Tarjetas del juego con sombra suave ------------------------- */
.gc-jug, .gv-bet, .gc-tot, .gv-share, .dt-scroll {
  box-shadow: 0 1px 5px rgba(27, 42, 74, 0.09);
}

/* --- Tabla resumen de apuestas ----------------------------------- */
.ra-bet { border:1px solid #eadfb0; border-radius:14px; padding:12px 14px; margin:10px 0;
  box-shadow:0 2px 10px rgba(27,42,74,0.09); background:#fff; }
.ra-head { font-weight:700; margin-bottom:6px; display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.ra-head small { color:#888; font-weight:400; font-size:12px; }
/* Cancelar / reactivar apuesta (solo el anotador): boton discreto con contorno
   dorado, alineado a la derecha del encabezado. */
.ra-cancelar { margin-left:auto; border:1.5px solid #d4af37; background:#fff; color:#b98900;
  border-radius:14px; padding:4px 12px; font-size:12px; font-weight:700; cursor:pointer; }
.ra-cancelar:hover { background:#fbf7e6; }
.ra-cancelar[disabled] { opacity:.5; cursor:default; }
.ra-cancel-tag { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  color:#b42318; border:1px solid #e3b3ad; border-radius:10px; padding:1px 8px; }
.ra-tach { text-decoration:line-through; color:#8a8676; }
.ra-cancel-note { font-size:13px; color:#8a8676; }
.ra-cancelada { opacity:.75; }
.ra-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.ra-tabla { border-collapse:collapse; width:100%; font-size:14px; }
.ra-tabla th, .ra-tabla td { padding:6px 8px; text-align:right; border-bottom:1px solid #f1f1f1; white-space:nowrap; }
.ra-tabla th { font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:#777; font-weight:600; }
.ra-tabla .ra-nom { text-align:left; font-weight:600; position:sticky; left:0; background:#fff; z-index:1; }
.ra-tabla tr:last-child td { border-bottom:none; }
.ra-pos { color:#1a7f37; }
.ra-neg { color:#b42318; }
.ra-cero { color:#8a8676; }
/* Resultado del hoyo en curso: tarjeta con contorno dorado que muestra cuanto
   ganó/perdió cada jugador SOLO en el hoyo que se está capturando. */
.ra-hoyo { border:1.5px solid #d4af37; border-radius:14px; padding:10px 14px; margin:10px 0;
  background:#fff; box-shadow:0 2px 10px rgba(27,42,74,0.09); }
.ra-hoyo-tit { font-weight:800; color:#1b2a4a; font-size:14px; margin-bottom:6px;
  text-transform:uppercase; letter-spacing:.03em; }
.ra-hoyo-tabla { border-collapse:collapse; width:100%; font-size:15px; }
.ra-hoyo-tabla td { padding:5px 6px; border-bottom:1px solid #f1f1f1; }
.ra-hoyo-tabla tr:last-child td { border-bottom:none; }
.ra-hoyo-nom { text-align:left; font-weight:600; color:#1b2a4a; }
.ra-hoyo-val { text-align:right; white-space:nowrap; }
/* Desglose por fuente: de donde salio lo del hoyo (rayas, oyes, driver,
   especiales), en unidades. Numeros chicos y tabulares para que las columnas
   se lean de un vistazo sin bailar. */
.ra-hoyo-col { font-size:10px; font-weight:800; color:#8a8676; text-transform:uppercase;
  letter-spacing:.05em; text-align:center; padding:0 4px 4px; }
.ra-hoyo-u { text-align:center; font-size:13px; font-weight:700; white-space:nowrap;
  font-variant-numeric:tabular-nums; }
.ra-hoyo-pie { font-size:11px; color:#8a8676; margin-top:6px; }
.ra-hoyo-nota { font-size:12px; color:#8a8676; margin-top:4px; }
/* Coneja: estado de cada coneja (ganada / empate / en juego). */
.ra-coneja { background:#fbf7e6; border:1px solid #eadfb0; border-radius:8px;
  padding:6px 10px; margin-bottom:8px; font-size:13px; color:#5a4a12; }
.ra-coneja strong { color:#1b2a4a; }
.ra-coneja-row { padding:3px 0; }
.ra-coneja-row:not(:last-child) { border-bottom:1px solid #efe6c4; }
.ra-coneja-viva { color:#1a7f37; font-weight:700; }
.ra-coneja-pend { color:#a99; }
.ra-coneja-sub { font-size:12px; color:#8a7a2a; margin-top:2px; }
.ra-tabla tr.ra-trae td { background:#fbf7e6; }
.ra-tabla tr.ra-trae .ra-nom { background:#fbf7e6; }
.ra-tabla td.ra-patas { color:#b8860b; font-weight:800; }
/* Columnas de desglose (Unidades / Loba): puntos por fuente, en tono discreto
   para que el saldo siga siendo lo que resalta. La ultima ("Unidades") va navy. */
.ra-tabla th.ra-desg { color:#b98900; }
.ra-tabla td.ra-desg { color:#8a8676; }
.ra-tabla td.ra-desg strong { color:#1b2a4a; }
.ra-tabla td.ra-desg.ra-neg { color:#b42318; }
/* Tabla con contorno dorado, como los widgets. */
.ra-tabla-box { border:1.5px solid #d4af37; border-radius:12px; }
/* Color de las letras por lugar (segun a cuantos reparte el pozo del total):
   1º oro, 2º plata (gris), 3º bronce. Los que no tienen lugar quedan en el navy
   por defecto (se leen como negro). El saldo (ultima celda) conserva su color de
   dinero (verde/rojo), por eso se excluye con :not(:last-child). */
.ra-tabla tr.ra-lugar-1 td:not(:last-child) { color:#b98900; font-weight:800; }
.ra-tabla tr.ra-lugar-2 td:not(:last-child) { color:#8a8a8a; font-weight:800; }
.ra-tabla tr.ra-lugar-3 td:not(:last-child) { color:#a9702e; font-weight:800; }
/* Widgets por vuelta: un mini-marcador por tramo (Ida/Vuelta) para ver a media
   ronda como van, aparte de la tabla de saldos. Contorno dorado, sin relleno. */
.ra-vw { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; margin-bottom:10px; }
.ra-vw-card { border:1.5px solid #d4af37; border-radius:12px; padding:8px 10px; background:#fff; }
.ra-vw-tit { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:#b98900;
  font-weight:800; margin-bottom:6px; border-bottom:1px solid #f3eccf; padding-bottom:4px; }
.ra-vw-pend { font-size:13px; color:#a99; padding:2px 0; }
.ra-vw-list { list-style:none; margin:0; padding:0; }
.ra-vw-list li { display:flex; align-items:center; gap:8px; padding:3px 0; font-size:14px; color:#1b2a4a; }
.ra-vw-list li:not(:last-child) { border-bottom:1px solid #f4f0e2; }
.ra-vw-pos { flex:0 0 auto; width:22px; text-align:center; font-weight:800; color:#8a8676; font-size:13px; }
.ra-vw-lider .ra-vw-pos { color:inherit; }
.ra-vw-nom { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ra-vw-lider .ra-vw-nom { font-weight:800; }
.ra-vw-val { flex:0 0 auto; font-weight:900; font-variant-numeric:tabular-nums; color:#b98900; }

/* --- Tarjeta hoyo x jugador (tablero y PDF) ---------------------- */
.gv-card-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid #eadfb0;
  border-radius:14px; background:#fff; box-shadow:0 2px 10px rgba(27,42,74,0.09); }
.gv-card { border-collapse:collapse; width:100%; font-size:14px; }
.gv-card th, .gv-card td { padding:5px 7px; text-align:center; border-bottom:1px solid #f0f0f0; white-space:nowrap; }
.gv-card thead th { background:#f6f6f6; font-weight:600; color:#555; }
.gv-card .gv-card-par td, .gv-card .gv-card-par th { color:#888; background:#fafafa; }
.gv-card .gv-card-nom { text-align:left; position:sticky; left:0; background:#fff; font-weight:600; z-index:1; }
.gv-card thead .gv-card-nom { background:#f6f6f6; }
.gv-card .gv-card-par .gv-card-nom { background:#fafafa; }
.gv-card .gv-card-tot { font-weight:700; }
.gv-card .gv-card-sub { font-weight:700; background:#eef4ea; }
.gv-card thead .gv-card-sub { background:#e6eee0; }
.gv-card .gv-card-par .gv-card-sub { background:#eaf0e4; color:#788; }
.gv-card .sc { min-width:1.6em; height:1.6em; font-size:13px; margin:0; }

/* Marcadores sociales: una tarjeta por marcador (4-putt, Green Cross, Pinky),
   con cada jugador en su propia linea y en el mismo orden en todas las tarjetas. */
.mk-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; }
.mk-card { background:#fff; border:1px solid #eadfb0; border-radius:12px; padding:10px 12px;
  box-shadow:0 2px 8px rgba(27,42,74,0.06); break-inside:avoid; }
.mk-card h6 { margin:0 0 6px; font-size:14px; font-weight:700; color:#1b2a4a;
  padding-bottom:6px; border-bottom:1px solid #f0ead0; }
.mk-row { display:flex; justify-content:space-between; align-items:baseline; gap:8px;
  padding:4px 0; font-size:13px; }
.mk-row:not(:last-child) { border-bottom:1px solid #f4f4f4; }
.mk-row .mk-nom { color:#333; }
.mk-row .mk-num { font-weight:700; color:#1b2a4a; font-variant-numeric:tabular-nums; }
.mk-row .mk-num.mk-cero { color:#bbb; font-weight:600; }

/* Barra superior de la vista publica en vivo, un poco mas marcada. */

/* ================================================================
   Captura por hoyo estilo tarjeta (Score / Putts / Tee Shot / faltas).
   Componente compartido entre la ronda personal y la partida
   multijugador. Prefijo .cap-*. Mobile-first.
   ================================================================ */
.cap-card { background:#fff; border:1.5px solid #eadfb0; border-radius:14px;
  padding:14px; margin-bottom:12px; box-shadow:0 2px 10px rgba(27,42,74,0.06); }
.cap-card .cap-nom { font-weight:700; color:#1b2a4a; margin-bottom:10px; }
.cap-card .cap-nom small { color:#8a8a8a; font-weight:400; }

/* Fila superior: Score y Putts (steppers verticales) + pad de Tee Shot. */
.cap-top { display:flex; flex-wrap:wrap; gap:10px 6px; align-items:flex-start;
  justify-content:space-between; }
.cap-steppers { display:flex; gap:14px; }

/* Stepper vertical: etiqueta arriba, luego [+] / numero / [-]. */
.cap-step { text-align:center; }
.cap-step .cap-step-lbl { font-size:12px; text-transform:uppercase; letter-spacing:.04em;
  color:#8a8a8a; font-weight:700; margin-bottom:4px; }
.cap-step .cap-pill { display:inline-flex; flex-direction:column; align-items:center;
  background:transparent; padding:0; }
.cap-step .cap-pm { width:46px; height:40px; border:none; background:transparent;
  color:var(--apex-gold); font-size:30px; font-weight:700; line-height:1; cursor:pointer; }
.cap-step .cap-pm:active { color:#c9a227; }
.cap-step .cap-num { display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; box-sizing:border-box; border-radius:50%;
  border:2px solid var(--apex-gold); font-size:24px; font-weight:800; color:#1b2a4a;
  font-variant-numeric:tabular-nums; }
/* El Score marca su notacion: birdie circulo, eagle doble circulo, bogey
   cuadrado, doble bogey doble cuadrado, triple cuadrado relleno. */
.cap-step .cap-num.sc-birdie { border-color:var(--apex-green); color:var(--apex-green); }
.cap-step .cap-num.sc-eagle { background:var(--apex-green); border-color:var(--apex-green); color:#fff; }
.cap-step .cap-num.sc-albatross {
  border-color:var(--apex-green); color:var(--apex-green); box-shadow:inset 0 0 0 3px #fff, inset 0 0 0 5px var(--apex-green); }
.cap-step .cap-num.sc-bogey { border-color:var(--apex-score-blue); color:var(--apex-score-blue); border-radius:14px; }
.cap-step .cap-num.sc-double { border-color:var(--apex-score-blue); color:var(--apex-score-blue); border-radius:14px;
  box-shadow:inset 0 0 0 3px #fff, inset 0 0 0 5px var(--apex-score-blue); }
.cap-step .cap-num.sc-triple { border-color:var(--apex-score-blue); color:var(--apex-score-blue); border-radius:14px; }

/* Pad direccional de Tee Shot: HIT al centro, flechas alrededor. */
.cap-tee { text-align:center; }
.cap-tee .cap-step-lbl { font-size:12px; text-transform:uppercase; letter-spacing:.04em;
  color:#8a8a8a; font-weight:700; margin-bottom:4px; }
.cap-pad { position:relative; width:132px; height:132px; margin:0 auto; }
.cap-pad button { position:absolute; border:none; background:transparent; color:var(--apex-gold);
  cursor:pointer; font-size:20px; font-weight:700; line-height:1; }
.cap-pad .cap-hit { width:60px; height:60px; border-radius:50%; top:36px; left:36px;
  background:transparent; border:2px solid var(--apex-gold); color:var(--apex-gold);
  font-weight:800; font-size:15px; z-index:2; }
.cap-pad .cap-hit.on { background:var(--apex-green); border-color:var(--apex-green); color:#fff; }
.cap-pad .cap-arr { width:48px; height:40px; }
.cap-pad .cap-up    { top:0;    left:42px; border-radius:10px 10px 4px 4px; height:34px; }
.cap-pad .cap-down  { bottom:0; left:42px; border-radius:4px 4px 10px 10px; height:34px; }
.cap-pad .cap-left  { left:0;   top:46px;  width:34px; height:40px; border-radius:10px 4px 4px 10px; }
.cap-pad .cap-right { right:0;  top:46px;  width:34px; height:40px; border-radius:4px 10px 10px 4px; }
.cap-pad .cap-arr.on { background:transparent; color:var(--apex-red); }

/* Fila de faltas/entorno: botones-icono (bunkers, hazard, OB). */
.cap-div { border-top:1px solid #f0ead0; margin:12px 0 10px; }
.cap-icons { display:flex; flex-wrap:wrap; gap:14px 18px; justify-content:center; }
.cap-ico { text-align:center; border:none; background:transparent; cursor:pointer;
  width:78px; }
.cap-ico .cap-ico-dot { width:52px; height:52px; margin:0 auto 4px; border-radius:50%;
  background:transparent; display:flex; align-items:center; justify-content:center;
  font-size:22px; border:2px solid var(--apex-gold); }
.cap-ico .cap-ico-lbl { font-size:11px; color:#666; line-height:1.15; display:block; }
.cap-ico.on .cap-ico-dot { background:transparent; border-color:var(--apex-red); }
.cap-ico.on .cap-ico-lbl { color:var(--apex-red); font-weight:700; }
/* Faltas con conteo (hazard, OB): el numerito arriba a la derecha del icono. */
.cap-ico .cap-ico-badge { position:relative; }
.cap-ico .cap-ico-badge b { position:absolute; top:-4px; right:6px; min-width:18px; height:18px;
  border-radius:9px; background:var(--apex-red); color:#fff; font-size:11px; font-weight:700;
  line-height:18px; display:none; }
.cap-ico.on .cap-ico-badge b { display:block; }

/* Segmentado Basico / Avanzado. */
.cap-seg { display:inline-flex; background:#eef2f8; border-radius:20px; padding:3px; }
.cap-seg button { border:none; background:transparent; color:#667; font-weight:700;
  font-size:13px; padding:6px 16px; border-radius:18px; cursor:pointer; }
.cap-seg button.on { background:var(--apex-green); color:#fff; }

/* Grupos dentro de la captura avanzada (T Shot, Búnkers, Penalties). */
.cap-group { margin-top:14px; }
.cap-group + .cap-group { border-top:1px solid #f0ead0; padding-top:10px; }
.cap-group-lbl { font-size:12px; text-transform:uppercase; letter-spacing:.05em;
  color:#8a8a8a; font-weight:700; text-align:center; margin-bottom:8px; }
.cap-ok { color:#3c763d; font-weight:700; font-size:12px; min-height:16px; text-align:center;
  margin-top:6px; }

/* ================================================================
   Dashboard resumen de ronda: fila de KPI (Score, Putts) + meters
   en anillo (GIR%, FIR%) + desglose en chips. Prefijo .rs-*.
   ================================================================ */
.rs-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:10px 0 4px; }
@media (max-width:460px){ .rs-kpis{ gap:7px; } }
.rs-tile { background:#fff; border:1px solid #eadfb0; border-radius:14px; padding:12px 4px 10px;
  text-align:center; box-shadow:0 2px 8px rgba(27,42,74,0.06); }
.rs-tile .rs-lbl { font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:#8a8a8a; font-weight:700; margin-bottom:6px; }
.rs-tile .rs-sub { font-size:11px; color:#9a9a9a; min-height:14px; }
/* Score / Putts: numero en circulo con contorno (conteo, no ratio). */
.rs-badge { width:72px; height:72px; margin:0 auto 5px; border-radius:50%;
  border:3px solid #cfe0c9; display:grid; place-items:center; }
.rs-badge .rs-n { font-size:24px; font-weight:800; color:#1b2a4a; font-variant-numeric:tabular-nums; line-height:1; }
/* GIR% / FIR%: meter en anillo, verde proporcional sobre pista verde clara. */
.rs-ring { width:72px; height:72px; margin:0 auto 5px; border-radius:50%;
  background: conic-gradient(var(--apex-green) calc(var(--pct,0) * 1%), #e3ece0 0);
  display:grid; place-items:center; }
.rs-ring::before { content:''; grid-area:1/1; width:54px; height:54px; border-radius:50%; background:#fff; }
.rs-ring .rs-n { grid-area:1/1; z-index:1; font-size:18px; font-weight:800; color:#1b2a4a; }
.rs-ring.rs-nodata { background:#eef0f2; }
.rs-ring.rs-nodata .rs-n { color:#bcbcbc; }
/* Desglose de conteos en chips. */
.rs-chips { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 4px; }
.rs-chip { background:#fff; border:1px solid #ececec; border-radius:20px; padding:6px 12px;
  font-size:13px; color:#555; display:inline-flex; align-items:center; gap:6px; }
.rs-chip b { color:#1b2a4a; font-weight:800; font-variant-numeric:tabular-nums; }
.rs-chip .sc { min-width:1.5em; height:1.5em; font-size:11px; margin:0; }

/* Lista de apuestas de la partida (panel #apuestasPanel). */
.ap-item { display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 0; border-bottom:1px solid #f0f0f0; }
.ap-item:last-child { border-bottom:none; }
.ap-info { min-width:0; }
.ap-nom { font-weight:700; color:#1b2a4a; }
.ap-part { font-size:12px; color:#b98900; font-weight:700; margin-top:2px; }
.ap-montos { display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:3px; font-size:13px; color:#555; }
.ap-montos b { color:#1b2a4a; font-variant-numeric:tabular-nums; }
.ap-del-form .bet-remove { color:#b42318; border-color:#e6b8b3; }

/* "Como se juega": descripcion de una apuesta (galeria de Nueva partida, Agregar
   apuesta y la pagina de ayuda). Fondo blanco, borde crema, texto navy; el pago
   en dorado oscuro. */
.ap-desc { font-size:13px; color:#1b2a4a; background:#fff; border:1px solid #eadfb0; border-radius:10px; padding:10px 12px; line-height:1.4; }
.ap-desc p { margin:0 0 6px; }
.ap-desc ul { margin:0 0 6px; padding-left:18px; }
.ap-desc li { margin-bottom:3px; }
.ap-desc-pago { color:#b98900; font-weight:700; margin:0; }
/* Circulo "i" que abre la descripcion. Se llama ap-info-i y NO ap-info: la
   lista de apuestas de la partida ya usa .ap-info para su bloque de texto, y
   con el mismo nombre esta regla ganaba y encajaba todo el texto en 28px. */
.ap-info-i { flex:0 0 auto; width:28px; height:28px; border-radius:50%; border:1.5px solid #d4af37; background:#fff;
  display:inline-flex; align-items:center; justify-content:center; color:#b98900; font-weight:800; font-size:14px;
  font-family:Georgia, serif; font-style:italic; cursor:pointer; padding:0; }

/* Paginas legales (aviso de privacidad y terminos). Publicas, sin barra de
   navegacion: texto largo que se lee de corrido en el telefono. */
.lg-wrap { max-width: 680px; margin: 0 auto; padding: 20px 16px 48px; color:#1b2a4a; }
.lg-wrap h4 { font-weight:800; margin:0 0 4px; }
.lg-fecha { color:#8a8676; font-size:13px; margin:0 0 16px; }
.lg-card { background:#fff; border:1.5px solid #d4af37; border-radius:14px; padding:14px 16px; margin-bottom:12px; }
.lg-card h6 { font-weight:800; font-size:15px; margin:0 0 8px; }
.lg-card p { margin:0 0 8px; font-size:14px; line-height:1.5; }
.lg-card p:last-child { margin-bottom:0; }
.lg-card ul { margin:0; padding-left:18px; font-size:14px; line-height:1.5; }
.lg-card li { margin-bottom:6px; }
.lg-card code { background:#f4f2ea; border:1px solid #eadfb0; border-radius:4px; padding:1px 4px;
  font-size:13px; color:#1b2a4a; }
/* El tema heredado pinta los enlaces de rosa; aqui van en dorado oscuro, como
   el resto de los acentos de la app. */
.lg-wrap a { color:#b98900; text-decoration:underline; }
.lg-wrap a:hover, .lg-wrap a:focus { color:#1b2a4a; }
/* Un dato de la instancia sin capturar: se ve en la propia pagina para que el
   dueño lo note antes que el revisor de la tienda. */
.lg-falta { color:#b42318; font-weight:700; }
.lg-pie { text-align:center; font-size:14px; margin-top:18px; }