/* ============================================================================
   MÓVIL Y TABLET — REGLA GENERAL DEL CRM
   ============================================================================
   ⚠️ 2026-08-28. Paloma, y no era la primera vez:

     "tenemos que ponernos con la renderización del CRM en el teléfono; el panel
      de cobrar, contabilidad y todos no se ve bien, se nos cortan todos los
      botones y todo. Muchos trabajamos en ordenador, todos los admin, pero los
      chicos trabajan con su teléfono y sus tablets. Llevamos muchos meses con
      eso, así que siempre realiza pruebas de este estilo y tenlo en cuenta."

   QUIÉN TRABAJA EN QUÉ (por eso esto no es un detalle estético):
     · Administración y dirección → ordenador.
     · Fisios y entrenadores → MÓVIL Y TABLET, todo el día, entre paciente y
       paciente. Si un botón se sale de la pantalla, para ellos ese botón NO
       EXISTE.

   Este fichero se carga EL ÚLTIMO, así que gana a los estilos de cada módulo sin
   tener que ir tocándolos uno a uno.

   Lo que arregla, medido el 28/08:
     · 98 tablas en el CRM y solo 22 dentro de `.table-wrap` (la caja que les da
       scroll). Las otras 76 se cortaban por el borde derecho, y con ellas los
       botones de la última columna: Cobrar, Editar, Borrar. Eso lo resuelve
       `protegerTablasEnMovil()` en navegacion.js; aquí se refuerza el aspecto.
     · Cabeceras y grupos de botones que no se envolvían: se cortaba el último.
     · Rejillas de 2 y 3 columnas apretadas hasta hacerse ilegibles.
   ========================================================================== */

/* ===== TABLET (y móvil): hasta 1024px ===================================== */
@media (max-width: 1024px) {
  /* Nada puede empujar la página a lo ancho. Si algo se pasa, que scrollee ESE
     algo (su .table-wrap), no la pantalla entera. */
  html, body { max-width: 100%; overflow-x: hidden; }

  /* Toda tabla vive dentro de una caja con scroll (la pone navegacion.js). */
  .table-wrap { max-width: 100%; }
}

/* ===== MÓVIL Y TABLET VERTICAL: hasta 820px ============================== */
@media (max-width: 820px) {

  /* --- Cabeceras y grupos de botones: se envuelven, no se cortan ---------
     El CRM está escrito con muchos `style="display:flex"` en línea (títulos con
     botones a la derecha). En una pantalla de 390px el último botón se salía.
     Se excluyen Agenda y WhatsApp: tienen su propia maquetación responsive y
     ahí envolver rompería la rejilla de horas y la vista de chat. */
  .seccion:not(#section-agenda):not(#section-whatsapp_bot) [style*="display:flex"],
  .seccion:not(#section-agenda):not(#section-whatsapp_bot) [style*="display: flex"] {
    flex-wrap: wrap;
  }

  /* ...pero dentro de una tabla NO: ahí los botones deben mantenerse en una
     línea para que la tabla se ensanche y aparezca el scroll (si se envuelven,
     la fila crece a lo alto y se pierde la referencia visual). */
  .table-wrap td > div[style*="flex"],
  .table-wrap td[style*="flex"] { flex-wrap: nowrap !important; }

  /* --- Rejillas: de 2 y 3 columnas a una sola --------------------------- */
  .seccion [style*="grid-template-columns:1fr 1fr"],
  .seccion [style*="grid-template-columns: 1fr 1fr"],
  .seccion [style*="grid-template-columns:1fr 1fr 1fr"],
  .seccion [style*="grid-template-columns: 1fr 1fr 1fr"],
  .seccion [style*="grid-template-columns:2fr 1fr"],
  .seccion [style*="grid-template-columns: 2fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Dos campos por fila en un formulario, en el móvil, es un campo por fila. */
  .form-row { grid-template-columns: 1fr !important; }

  /* --- Botones: que quepan y se puedan pulsar con el dedo ---------------- */
  .btn {
    max-width: 100%;
    min-height: 40px;            /* objetivo táctil cómodo */
    white-space: normal;         /* un botón largo parte de línea, no se corta */
  }
  .btn-sm { min-height: 34px; }

  /* Un grupo de botones ocupa el ancho y se reparte, en vez de salirse. */
  .modal-actions { justify-content: stretch; }
  .modal-actions .btn { flex: 1 1 auto; }

  /* --- Los números grandes de los paneles no rompen la caja -------------- */
  .stat-value, .stat-numero { font-size: 22px; word-break: break-word; }

  /* --- Nada con ancho mínimo mayor que la pantalla ----------------------- */
  .seccion [style*="min-width:"] { min-width: 0 !important; }
  .le-celda-paciente { min-width: 0; }
}

/* ===== MÓVIL ESTRICTO: hasta 480px ====================================== */
@media (max-width: 480px) {
  /* Márgenes más finos: cada píxel es contenido. */
  .content { padding: 14px 10px; }
  .card { padding: 14px 12px; }

  /* Las pestañas dentro de un modal (Ficha, Bonos, Facturas…) scrollean en
     horizontal en vez de amontonarse. */
  .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tab-item { flex: 0 0 auto; }

  /* Tipografía de tabla un punto menor: entran dos columnas más sin scroll. */
  .table-wrap table { font-size: 12px; }
}

/* ===== HALLAZGOS DE LA PRUEBA REAL A 385px (28/08) ======================== */
/* Medido dentro de un marco de 390px, no a ojo: se recorrió sección por sección
   buscando qué se sale de la pantalla SIN poder alcanzarse (lo que se sale dentro
   de un contenedor con scroll no cuenta: eso se desliza con el dedo).
   Resultado: casi todo entraba ya. El único fallo de verdad era este, y no era
   menor — en Pacientes se quedaban fuera CUATRO botones, entre ellos "+ Nuevo
   paciente". Desde un teléfono no se podía dar de alta a nadie. */
@media (max-width: 820px) {
  .search-bar {
    flex-wrap: wrap;
    height: auto;                 /* la barra crece si los botones bajan de línea */
    gap: 8px;
  }
  /* El buscador ocupa su propia línea y los botones se reparten debajo. */
  .search-bar > input,
  .search-bar > .input { flex: 1 1 100%; min-width: 0; }
  .search-bar > .btn { flex: 1 1 auto; }
}