/* Móvil y pantallas estrechas: mesa en vertical, panel como hoja deslizante
   y barra de acción a todo el ancho. Va la última: gana en la cascada. */
.solo-movil { display: none; }

@media (max-width: 900px) {
  :root { --ancho-panel: 0px; }
  .zona { grid-template-columns: minmax(0, 1fr); }
  .solo-movil { display: inline-flex; }
  .panel {
    position: fixed; inset: auto 0 0 0; height: 70vh; height: 70dvh; z-index: 30; border-left: 0;
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--borde); border-radius: 16px 16px 0 0; box-shadow: var(--sombra);
    transform: translateY(105%); transition: transform .25s ease;
  }
  .panel.abierto { transform: none; }
  .barra { gap: 8px; padding: 0 8px; }
  .marca span:not(.logo) { display: none; }
  .info-torneo { font-size: 12px; gap: 8px; }
  .info-torneo .opcional { display: none; }
  .botones-barra { gap: 4px; }
  .botones-barra .texto { display: none; } /* solo iconos: 💤 🎙️ 📞 */
}

@media (max-width: 700px) and (orientation: portrait) {
  .escenario { --alto-acciones: auto; }
  /* Mesa al estilo de los clientes móviles (pedido 2026-09-25): placas
     compactas en vertical (avatar, nombre, fichas) en puntos fijos
     (geometria.js), tus cartas grandes abajo y el tablero en una fila libre. */
  .mesa { --carta-ancho: clamp(34px, 11.4cqw, 52px); --ancho-asiento: clamp(62px, 19cqw, 88px); --tf-mesa: clamp(12px, 3.6cqw, 18px); }
  .baranda { inset: 7% 9% 14% 9%; padding: 8px; }
  .marca-fieltro { display: none; }
  .centro { top: 40%; gap: 6px; }
  .comunitarias { gap: 3px; }

  .asiento { --carta-asiento: clamp(18px, 6.4cqw, 28px); }
  .burbuja { font-size: 12px; padding: 3px 8px; }
  .asiento .mano-asiento { margin-bottom: calc(var(--carta-asiento) * -1.4 * .45); }
  .asiento:not(.yo) .placa {
    flex-direction: column; gap: 1px; padding: 4px 3px 3px; border-radius: 10px; text-align: center;
  }
  .asiento:not(.yo) .avatar { width: 32px; height: 32px; font-size: 12px; }
  .asiento:not(.yo) .datos { width: 100%; }
  .asiento:not(.yo) .nombre { font-size: 11px; }
  .asiento:not(.yo) .fichas-asiento { font-size: 12px; }
  .asiento:not(.yo) .etiqueta { top: -7px; right: 50%; transform: translateX(50%); font-size: 9px; padding: 0 4px; }
  /* Cartas ajenas boca arriba (all-in, showdown): más grandes para leerlas,
     con la probabilidad justo encima. */
  .asiento.boca-arriba:not(.yo) { --carta-asiento: clamp(28px, 9.5cqw, 40px); }
  .asiento.boca-arriba:not(.yo) .mano-asiento { height: calc(var(--carta-asiento) * 1.4); margin-bottom: 3px; }
  .asiento:not(.yo) .equidad { transform: translate(-50%, -100%); padding: 1px 6px; border-width: 1.5px; }
  .asiento:not(.yo) .equidad b { font-size: 13px; }
  .asiento .ultima-accion { bottom: -17px; font-size: 10px; padding: 0 6px; }
  .asiento.libre { --ancho-asiento: clamp(58px, 17cqw, 80px); }
  .asiento.libre .placa { min-height: 38px; padding: 3px; }
  .asiento.libre .boton { padding: 5px 6px; font-size: 11px; }

  /* Tú: más ancho, placa en horizontal y las cartas grandes y enteras encima. */
  .asiento.yo { --ancho-asiento: clamp(150px, 46cqw, 210px); --carta-asiento: clamp(46px, 15cqw, 66px); }
  .asiento.yo .mano-asiento { height: calc(var(--carta-asiento) * 1.4 * .82); margin-bottom: -8px; }
  .asiento.yo .mano-asiento .carta + .carta { margin-left: calc(var(--carta-asiento) * -.12); }
  .asiento.yo .avatar { width: 34px; height: 34px; }
  .nombre, .fichas-asiento { font-size: 12px; }
  .apuesta .cantidad { font-size: 11px; padding: 0 5px; }
  .dealer { width: 20px; height: 20px; font-size: 10px; }
  .boton-volver { min-width: 0; padding: 9px 16px; font-size: 15px; }
  .acciones {
    justify-items: stretch; padding: 8px; min-height: 64px;
    background: linear-gradient(transparent, rgb(0 0 0 / .5));
  }
  .fila-subida { max-width: none; }
  .fila-pre { justify-content: stretch; }
  .fila-pre .preaccion { flex: 1; justify-content: center; }
  .fila-botones { display: grid; grid-template-columns: repeat(3, 1fr); }
  .boton-accion { min-width: 0; min-height: 50px; font-size: 14px; padding: 4px 6px; }
  .fila-subida { flex-wrap: wrap; justify-content: center; }
  .fila-subida input[type="range"] { flex: 1 1 100%; width: auto; order: -1; }
}

/* Campos a 16 px en el móvil: con menos, el iPhone amplía la página al
   escribir (la cantidad, el chat…) y se queda descuadrada. */
@media (max-width: 900px) {
  input:not([type="range"]):not([type="checkbox"]), select, textarea { font-size: 16px; }
}

/* Móvil en horizontal (poca altura): la barra de acción pasa a una columna a
   la derecha, así la mesa aprovecha todo el alto. Antes la mesa se quedaba en
   una franja y los asientos se salían (queja del 2026-09-27). */
@media (max-height: 520px) and (orientation: landscape) {
  .barra { min-height: 40px; }
  .escenario {
    grid-template-columns: minmax(0, 1fr) clamp(170px, 26vw, 230px);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .escenario > .mesa { grid-column: 1; grid-row: 1 / -1; }
  .escenario > .entradas { position: static; width: auto; grid-column: 2; grid-row: 1; padding: 6px 6px 0; justify-items: stretch; }
  .escenario > .acciones {
    grid-column: 2; grid-row: 2; align-content: end; justify-items: stretch; padding: 6px 6px 8px; min-width: 0;
  }
  .mesa { --ancho-asiento: clamp(92px, 21cqmin, 140px); --carta-ancho: clamp(26px, 10cqmin, 46px); --tf-mesa: clamp(11px, 3.4cqmin, 16px); }
  .baranda { inset: 12% 8% 12% 8%; padding: 8px; }
  .marca-fieltro { display: none; }
  .asiento .nombre, .asiento .fichas-asiento { font-size: 12px; }
  .asiento .avatar { width: 30px; height: 30px; font-size: 12px; }
  .fila-botones { display: grid; grid-template-columns: 1fr; gap: 5px; }
  .boton-accion { min-width: 0; min-height: 38px; font-size: 14px; padding: 3px 8px; }
  .fila-subida { flex-wrap: wrap; justify-content: stretch; gap: 4px; padding: 6px; }
  .fila-subida .boton { flex: 1 1 20%; padding: 3px 2px; font-size: 11px; min-width: 0; }
  .fila-subida input[type="range"] { flex: 1 1 60%; order: -1; min-width: 0; height: 26px; }
  .fila-subida input[type="number"] { flex: 0 0 64px; width: 64px; order: -1; padding: 2px 4px; }
  .fila-pre { display: grid; grid-template-columns: 1fr; }
  .tu-turno { flex-wrap: wrap; font-size: 12px; gap: 6px; }
  .estado-accion { font-size: 12px; }
  .asiento.yo { margin-top: -16px; } /* que la placa no se corte abajo */
  .asiento .ultima-accion { font-size: 10px; }
}