/* SUITE EN EL MÓVIL (Pedro, 16/10/2026: «los menus superiores quiero que hagan scroll horizontal para poder acceder a
   ellos … que no varie el del pc pero que cuando entre con el movil se adapte como si fuera una aplicacion de movil»).
   La mete suite.py en todas las páginas con media="(max-width: 820px)": en el PC esta hoja NO se aplica.
   Quitarla = borrar este fichero y movil.js (sin ellos no se inyecta nada). */

/* nada se sale por los lados (clip y no hidden: hidden rompe las barras «sticky») */
body { overflow-x: clip; }

/* el iPhone hace zoom al escribir en un campo con letra de menos de 16 px */
input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px !important; }

/* ── MENÚS SUPERIORES: una sola fila que se desliza con el dedo ──
   CRM (botones de arriba), FLC (pestañas), Plataforma Online y Subir Alumnos (barra), WhatsApp y CMD (botones). */
#der-acciones, .layout > nav, body > .barra, header .pills, header .btns {
  display: flex !important; flex-wrap: nowrap !important; align-items: center;
  overflow-x: auto !important; overflow-y: hidden; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity; scrollbar-width: none; gap: 8px !important;
  max-width: 100%; min-width: 0;
}
#der-acciones::-webkit-scrollbar, .layout > nav::-webkit-scrollbar, body > .barra::-webkit-scrollbar,
header .pills::-webkit-scrollbar, header .btns::-webkit-scrollbar { display: none; }
#der-acciones > *, .layout > nav > *, body > .barra > *, header .pills > *, header .btns > * {
  flex: 0 0 auto !important; white-space: nowrap; scroll-snap-align: start;
}
/* botones de dedo: 44 px de alto como mínimo */
#der-acciones .btn, .layout > nav > button, body > .barra .btn, body > .barra button,
header .pills > button, header .pills > a, header .btns > .b { min-height: 44px; }
/* sombra al borde derecho: se nota que hay más botones (movil.js la quita al llegar al final) */
#der-acciones::after, .layout > nav::after, body > .barra::after, header .pills::after, header .btns::after {
  content: ""; position: sticky; right: -1px; align-self: stretch; flex: 0 0 26px; margin-left: -26px;
  background: linear-gradient(to right, transparent, rgba(0, 0, 0, .28)); pointer-events: none;
}
.mv-fin::after { visibility: hidden; }

/* ── CRM ── antes los botones vivían escondidos tras la tarjeta «Menú»: ahora siempre a la vista, bajo el título */
.top { flex-wrap: wrap !important; }
/* la barra es sticky con z-index 50, igual que los botones redondos de abajo a la derecha (#fab-wrap), que van después:
   la hoja de Descargar contactos, etc. vive dentro de la barra y quedaba DEBAJO de ellos (Pedro 17/10). 60 la sube sobre
   ellos y sigue debajo de las ventanas (200 o más) */
.top { z-index: 60 !important; }
.top > div:first-child { min-width: 0; flex: 1 1 auto; }
.top .marca, .top .sub { white-space: normal !important; }
.top .der { flex: 1 1 100% !important; min-width: 0; margin-left: 0 !important; }
#btn-menu-movil, .kpi.kmenu { display: none !important; }
#der-acciones {
  position: static !important; inset: auto !important; background: none !important;
  padding: 2px 0 4px !important; flex-direction: row !important; z-index: auto !important; width: 100%;
}
#der-acciones .btn, #der-acciones a.btn, #der-acciones .menu-leer, #der-acciones .menu-leer .btn {
  width: auto !important; padding: 10px 14px !important; font-size: .95rem !important;
}
/* sus desplegables (Descargar contactos, FLC, Excel, Comunicación, Administración, Facturar) salen como hoja
   desde abajo: dentro de una fila que se desliza, un desplegable normal quedaría cortado */
#der-acciones .pop {
  position: fixed !important; left: 8px !important; right: 8px !important; top: auto !important;
  bottom: calc(8px + env(safe-area-inset-bottom)) !important; width: auto !important; min-width: 0 !important;
  max-height: 75vh; overflow-y: auto; z-index: 2147483000 !important; white-space: normal;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, .35) !important;
}
#der-acciones .pop .admin-item, #der-acciones .pop button { min-height: 44px; }

/* ── FLC: las pestañas en una fila (antes, en el móvil, ocupaban media pantalla en rejilla) ── */
.layout > nav { flex-direction: row !important; width: 100% !important; padding: 6px 8px !important; }
.layout > nav > button { width: auto !important; margin: 0 !important; }
.layout > nav > .nav-sep, .layout > nav > div:not(.nav-sep) { display: none !important; }

/* ── Plataforma Online y Subir Alumnos: la barra de arriba en una fila ── */
body > .barra { padding: 10px 12px !important; }
body > .barra .sep { display: none; }
body > .barra .explica { white-space: normal; max-width: 280px; }

/* ── WhatsApp, Llamadas y CMD: los botones de la cabecera, en su propia fila bajo el título ── */
header { flex-wrap: wrap !important; }
header > .pills, header > .btns { flex: 1 1 100% !important; }

/* CRM: Módulos, Salir y la campana, de dedo */
.top-izq .btn, .top-izq .campana { min-height: 44px; }