/* Barra de acción: botones Retirarse / Pasar-Igualar / Apostar-Subir,
   deslizador, atajos de bote y cantidad. Abajo a la derecha, como en los
   clientes clásicos. */
.acciones {
  display: grid; gap: 6px; justify-items: end; align-content: end;
  padding: 0 14px 12px; z-index: 10; min-width: 0;
}
.fila-botones { display: flex; gap: 8px; }
.boton-accion {
  min-width: 128px; min-height: 54px; border-radius: 10px; padding: 6px 14px;
  font-weight: 800; font-size: 15px; line-height: 1.15; border: 1px solid transparent; cursor: pointer; color: #fff;
  box-shadow: 0 6px 16px rgb(0 0 0 / .45); transition: filter .15s, transform .05s;
}
.boton-accion:hover { filter: brightness(1.12); }
.boton-accion:active { transform: translateY(1px); }
.boton-accion.retirarse { background: linear-gradient(#b53a35, #7c201d); border-color: #d05a54; }
.boton-accion.igualar { background: linear-gradient(#34975a, #1d6538); border-color: #4bb573; }
.boton-accion.subir { background: linear-gradient(#e2b453, #9c7424); border-color: #f1cf7e; color: #1c1405; }
.boton-accion.ensenar { background: linear-gradient(#3b5d86, #22395a); border-color: #5f86b8; }
.boton-accion small { display: block; font-weight: 600; font-size: 12px; opacity: .85; }

.fila-subida {
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; max-width: 420px; background: rgb(10 16 13 / .92);
  border: 1px solid var(--borde); border-radius: 10px; padding: 6px 8px;
}
.fila-subida input[type="range"] { flex: 1 1 160px; min-width: 120px; accent-color: var(--acento); }
/* Barra propia: el tirador llega al borde en el all-in y el tramo elegido se
   rellena hasta su centro (--p = 0..1, lo pone acciones.js). Tirador grande
   para el dedo. */
#deslizador { -webkit-appearance: none; appearance: none; height: 30px; background: transparent; margin: 0; }
#deslizador::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--acento) calc(var(--p, 0) * (100% - 22px) + 11px), rgb(255 255 255 / .2) 0);
}
#deslizador::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%;
  background: #f3d27a; border: 2px solid #fff8e0; box-shadow: 0 2px 6px rgb(0 0 0 / .5);
}
#deslizador::-moz-range-track { height: 6px; border-radius: 3px; background: rgb(255 255 255 / .2); }
#deslizador::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--acento); }
#deslizador::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #f3d27a; border: 2px solid #fff8e0; box-shadow: 0 2px 6px rgb(0 0 0 / .5); }
/* 16 px: con menos, el iPhone amplía la página al escribir y se queda así. */
.fila-subida input[type="number"] { width: 92px; text-align: right; font-size: 16px; }
.fila-subida .boton { padding: 4px 8px; font-size: 12px; }
.estado-accion {
  background: rgb(10 16 13 / .85); border: 1px solid var(--borde); border-radius: 10px;
  padding: 8px 14px; color: var(--texto-2);
}
.tu-turno { color: var(--acento); font-weight: 800; display: flex; gap: 10px; align-items: baseline; }
.mi-banco { color: #ffb454; font-weight: 700; font-size: 12px; }

/* Preacciones mientras esperas (js/preacciones.js): casillas que se marcan. */
.fila-pre { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.preaccion {
  display: flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 8px; cursor: pointer;
  background: rgb(10 16 13 / .9); border: 1px solid var(--borde); color: var(--texto); font: 600 13px/1 var(--fuente);
}
.preaccion::before {
  content: ""; width: 14px; height: 14px; border-radius: 3px; border: 2px solid var(--texto-2); flex: none;
}
.preaccion[aria-pressed="true"] { border-color: var(--acento); background: rgb(224 176 74 / .15); }
.preaccion[aria-pressed="true"]::before { background: var(--acento); border-color: var(--acento); box-shadow: inset 0 0 0 2px #1c1405; }