/* Kirigym · capa móvil y tableta (28-10-2026, regla «móvil primero»).
   Se carga después de app.css en todas las páginas del panel, el CRM y el superadmin (kirigym_head()).
   Aquí va lo común a todas las pantallas; lo propio de una pantalla va junto a su bloque en app.css.
   Pruebas: 390 px (móvil) y 820 px (tableta), claro y oscuro. Sin scroll lateral, zonas táctiles de 44 px. */

/* ---------- Nada se sale de su columna (las rejillas dejan encoger a sus hijos) ---------- */
.grid-2 > *, .grid-3 > *, .row-2 > *, .row-3 > *, .stats > *, .brand-layout > *, .folder, .folder-panel { min-width: 0; }
.content [hidden] { display: none !important; }
.content fieldset { min-width: 0; }
.content code, .content .mono { overflow-wrap: anywhere; }
.content img, .content video, .content iframe { max-width: 100%; }
.content input[type=radio], .content input[type=checkbox], .content .form input[type=radio], .content .form input[type=checkbox] { width: auto; max-width: none; flex: none; }
/* Botones de elegir (radio escondido bajo una pastilla): el radio no puede medir el 100 % de nada. */
.seg-choice label { position: relative; }
.form .seg-choice input, .seg-choice input, .content .seg-choice input { width: 1px !important; height: 1px !important; min-height: 0 !important; margin: 0; padding: 0; left: 0; top: 0; }

/* Campos sueltos fuera de un .form (buscadores de arriba, selectores dentro de una tabla…): el mismo aspecto que los del formulario.
   Con :where() no pesan nada: cualquier estilo propio de una pantalla manda sobre esto. */
:where(.content) :where(input[type=text], input[type=search], input[type=email], input[type=tel], input[type=number], input[type=date], input[type=time], input[type=month], input[type=week], input[type=datetime-local], input[type=url], input[type=password], select, textarea) {
  padding: 8px 12px; border: 1px solid var(--line-2); border-radius: var(--r, 8px); background: var(--surface); color: var(--text); font: inherit; max-width: 100%; }

/* ---------- Tableta y móvil (≤ 900 px): menú arriba + barra de abajo ---------- */
@media (max-width: 900px) {
  .content { padding: 14px 16px 24px; }
  .has-tabbar .content { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .page-head { margin-bottom: 14px; }
  .page-head h1 { font-size: clamp(24px, 6.4vw, 32px); line-height: 1.1; overflow-wrap: anywhere; }
  .breadcrumbs, .crumbs { font-size: 12px; overflow-wrap: anywhere; }
  .demo-banner { font-size: 12px; padding: 7px 12px; }

  /* Barra de arriba: logo a la izquierda y, a la derecha, el gimnasio (en el panel) o el botón ☰ (superadmin). */
  .sidebar .brand { width: 100%; }
  .sidebar .brand-row { flex: 1 1 auto; min-width: 0; }
  .has-tabbar .sidebar:not(.is-open) .brand .k-gym { display: flex; margin-left: auto; flex: 0 1 auto; max-width: 58%; padding: 5px 10px; }
  .has-tabbar .sidebar:not(.is-open) .brand .k-gym small { display: none; }
  .has-tabbar .sidebar:not(.is-open) .brand .k-gym strong { font-size: 13px; }
  /* «Más» abierto: hoja fija que termina justo encima de la barra de abajo (antes medía 100vh y el pie con Claro/Oscuro y
     Mi cuenta quedaba tapado por la barra y la del navegador; SARA, 28-10). Se desliza sola y la página de debajo no se mueve. */
  .has-tabbar .sidebar.is-open { position: fixed; top: 0; left: 0; right: 0; z-index: 55; max-height: none;
    height: calc(100vh - 66px - env(safe-area-inset-bottom)); height: calc(100dvh - 66px - env(safe-area-inset-bottom));
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: 20px; }
  body:has(.sidebar.is-open) { overflow: hidden; }

  /* Pestañas de archivador: una sola fila que se desliza con el dedo (la elegida se centra sola). */
  .folder-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    padding-left: 2px; margin-right: -16px; padding-right: 16px; overscroll-behavior-x: contain;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
  .folder-tabs::-webkit-scrollbar { display: none; }
  .folder-tabs > a, .folder-tabs > button, .folder-tabs > span { flex: 0 0 auto; scroll-snap-align: start; }
  .folder-tabs a { min-height: 44px; padding: 10px 16px 9px 14px; }
  .folder-panel { padding: 16px 14px; border-radius: 0 0 var(--radius) var(--radius); }

  /* Barras de herramientas: lo que no cabe baja de línea, y los buscadores ocupan todo el ancho. */
  .toolbar, .panel-toolbar { flex-wrap: wrap; gap: 8px; }
  .toolbar > h2, .toolbar > h3 { flex: 1 1 auto; min-width: 0; }
  .live-filter { gap: 8px; }
  .lf-search { flex: 1 1 100%; max-width: none; min-width: 0; }
  .lf-search input { width: 100%; }

  /* Formularios en una columna. */
  .row-2, .row-3, .row-4 { grid-template-columns: 1fr; gap: 0 12px; }
  .form-actions { flex-wrap: wrap; }
  .add-row select { min-width: 0 !important; max-width: 100%; }

  /* Ventanas: el pie con los botones siempre a mano del pulgar. */
  dialog.modal .modal-foot { position: sticky; bottom: 0; padding-bottom: calc(12px + env(safe-area-inset-bottom)); background: var(--surface); }
}
/* Ventanas a pantalla completa en el teléfono: 100vh mide la pantalla SIN la barra del navegador, y el pie con «Dar de alta»
   se quedaba escondido debajo (SARA, 28-10). Se pegan a los bordes de lo que se ve de verdad (100dvh donde exista). */
@media (max-width: 760px) {
  dialog.modal:not(.modal-sm):not(.act-modal) { position: fixed; inset: 0; margin: 0; width: 100%; max-width: 100%; height: auto; max-height: none; }
  @supports (height: 100dvh) { dialog.modal:not(.modal-sm):not(.act-modal) { inset: 0 0 auto 0; height: 100dvh; } }
  dialog.modal:not(.modal-sm):not(.act-modal) .modal-form { height: 100%; max-height: none; }
  dialog.modal.act-modal .modal-form { max-height: calc(100dvh - 32px); }
  #signup-modal .modal-foot { flex-wrap: nowrap; gap: 8px; }
  #signup-modal .modal-foot > span { display: none; }
  #signup-modal .modal-foot .btn-primary { flex: 1 1 auto; justify-content: center; }
}

/* ---------- Dedos (pantallas táctiles): zonas de 44 px y letra de 16 px en los campos (iOS no hace zoom) ---------- */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn-small { min-height: 38px; padding: 7px 12px; }
  .form input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]), .form select, .form textarea,
  .toolbar input:not([type=checkbox]):not([type=radio]), .toolbar select, .live-filter input, .content input[type=search], .content input[type=text], .content input[type=email],
  .content input[type=tel], .content input[type=number], .content input[type=date], .content input[type=time], .content input[type=month], .content input[type=datetime-local], .content input[type=url], .content input[type=password], .content select, .content textarea { min-height: 44px; font-size: 16px; }
  .content input[type=checkbox], .content input[type=radio], .content .form input[type=checkbox], .content .form input[type=radio] { width: 22px; height: 22px; flex: none; }
  .form label.check { min-height: 40px; }
  .chip, .lf-chip, .mf-bar button, .mf-bar .chip { min-height: 38px; }
  .sidebar nav a, .sidebar nav summary { min-height: 46px; }
  .k-tabbar a, .k-tabbar button { min-height: 54px; }
  details.popover > summary { min-height: 40px; display: inline-flex; align-items: center; }
  input.tiny { min-height: 40px; }
  .icon-btn { min-width: 36px; min-height: 36px; }
  .seg-choice span { min-height: 40px; display: inline-flex; align-items: center; padding: 8px 14px; font-size: 14px; }
}

/* ---------- Tablas que se convierten en tarjetas ---------- */
/* mobile.js marca con .m-cards las tablas que pueden plegarse, pone data-label a cada celda con el título de su columna
   y clasifica las celdas: .m-check (casilla o asa), .m-media (foto), .m-title (la primera con texto), .m-actions (botones).
   Y les pone .m-on: siempre en el teléfono (≤ 640 px) y en la tableta solo si la tabla no cabe (entonces, tarjetas a dos columnas).
   Una tabla se queda como está con data-mobile="scroll" (o si ya tiene su propio diseño móvil). */
  table.m-cards.m-on, table.m-cards.m-on tbody { display: block; width: 100%; overflow: visible; }
  table.m-cards.m-on thead { display: none; }
  table.m-cards.m-on tfoot { display: block; }
  table.m-cards.m-on tfoot tr { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; padding: 10px 2px; }
  table.m-cards.m-on tfoot td, table.m-cards.m-on tfoot th { display: block; border: 0; padding: 0; }
  table.m-cards.m-on tbody tr { position: relative; display: flex; flex-wrap: wrap; align-items: center;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r, 10px); padding: 12px 14px 10px; margin: 0 0 10px;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); box-shadow: 0 1px 0 color-mix(in srgb, #000 3%, transparent); }
  table.m-cards.m-on tbody tr::after { content: ""; position: absolute; right: 0; top: 0; width: 12px; height: 12px; background: color-mix(in srgb, var(--primary) 55%, var(--line)); clip-path: polygon(0 0, 100% 100%, 0 100%); }
  table.m-cards.m-on tbody tr:hover { background: var(--surface); }
  table.m-cards.m-on tbody tr[hidden], table.m-cards.m-on td[hidden] { display: none !important; }
  table.m-cards.m-on tbody td { display: block; position: relative; flex: 0 0 100%; min-width: 0; max-width: 100%; box-sizing: border-box; min-height: 30px; padding: 6px 0 6px 38%; border: 0;
    text-align: right; white-space: normal; overflow-wrap: anywhere; font-size: 14px; background: transparent !important; width: auto !important; }
  table.m-cards.m-on tbody td::before { content: attr(data-label); position: absolute; left: 0; top: 8px; width: 36%; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--muted); line-height: 1.3; overflow-wrap: normal; }
  table.m-cards.m-on tbody td:not([data-label])::before, table.m-cards.m-on tbody td[data-label=""]::before { content: none; }
  table.m-cards.m-on tbody td:not([data-label]), table.m-cards.m-on tbody td[data-label=""] { padding-left: 0; text-align: left; }
  table.m-cards.m-on tbody td .badge { white-space: normal; }
  table.m-cards.m-on tbody td.m-title * { white-space: normal; }
  table.m-cards.m-on tbody td > * { min-width: 0; max-width: 100%; }
  table.m-cards.m-on tbody td > form.inline, table.m-cards.m-on tbody td > form:only-child { display: flex; justify-content: flex-end; }
  table.m-cards.m-on tbody td select, table.m-cards.m-on tbody td input[type=text], table.m-cards.m-on tbody td input[type=number] { max-width: 100%; min-width: 0; }
  table.m-cards.m-on tbody td > form > select:only-of-type { width: 100%; }
  table.m-cards.m-on tbody td.m-empty { display: none; }
  /* Cabecera de la tarjeta: casilla + foto + título en la primera línea. */
  table.m-cards.m-on tbody td.m-check { flex: 0 0 auto; order: -3; padding: 0 10px 0 0; min-height: 0; }
  table.m-cards.m-on tbody td.m-media { flex: 0 0 auto; order: -2; padding: 0 12px 0 0; min-height: 0; }
  table.m-cards.m-on tbody td.m-title { flex: 1 1 0; order: -1; text-align: left !important; white-space: normal; min-height: 0; font-size: 16px; font-weight: 700; padding: 0 14px 6px 0; }
  table.m-cards.m-on tbody td.m-title::before { content: none; }
  table.m-cards.m-on tbody td.m-title small, table.m-cards.m-on tbody td.m-title .muted { font-weight: 400; }
  table.m-cards.m-on tbody td.m-check::before, table.m-cards.m-on tbody td.m-media::before { content: none; }
  table.m-cards.m-on tbody tr:has(> td.m-title) > td.m-title + td { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 2px; }
  /* Botones de la fila: abajo, a todo el ancho y cómodos de pulsar. */
  table.m-cards.m-on tbody td.m-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; padding: 10px 0 0; text-align: right; }
  table.m-cards.m-on tbody td.m-actions::before { content: none; }
  table.m-cards.m-on tbody td.m-actions > form { display: inline-flex; margin: 0; }
  table.m-cards.m-on tbody td.m-actions .btn { min-height: 40px; }
  table.m-cards.m-on tbody td.m-actions details.popover { position: static; }
  /* Filas «no hay nada» y separadores de grupo. */
  table.m-cards.m-on tbody tr.m-note { display: block; clip-path: none; background: transparent; border: 1px dashed var(--line-2); text-align: center; color: var(--muted); }
  table.m-cards.m-on tbody tr.m-note::after { content: none; }
  table.m-cards.m-on tbody tr.m-note td { display: block; text-align: center; }
  table.m-cards.m-on tbody tr.m-group { display: block; clip-path: none; background: transparent; border: 0; padding: 10px 2px 4px; margin: 6px 0 0; }
  table.m-cards.m-on tbody tr.m-group::after { content: none; }
  table.m-cards.m-on tbody tr.m-group td, table.m-cards.m-on tbody tr.m-group th { display: block; text-align: left; padding: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  table.m-cards.m-on tbody tr.is-picked { background: color-mix(in srgb, var(--primary) 9%, var(--surface)); border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); }
  table.m-cards.m-on tbody tr.is-picked td { background: transparent !important; }
  table.m-cards.m-on tbody tr.row-noshow { background: var(--bad-bg); }
@media (min-width: 641px) {
  table.m-cards.m-on tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
  table.m-cards.m-on tbody tr { margin: 0; }
  table.m-cards.m-on tbody tr.m-note, table.m-cards.m-on tbody tr.m-group { grid-column: 1 / -1; }
}
/* ---------- Teléfono (≤ 640 px) ---------- */
@media (max-width: 640px) {
  /* Tablas que siguen deslizándose (data-mobile="scroll"): que se note que hay más a la derecha. */
  .table[data-mobile="scroll"] { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap { margin-left: -2px; margin-right: -2px; }
  .table td.actions, .table td.nowrap, .table .nowrap { white-space: normal; }

  /* Las cifras de las tarjetas de resumen, dos por fila y sin cortarse. */
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat { padding: 12px; min-width: 0; }
  .stat strong { font-size: clamp(22px, 7vw, 30px); overflow-wrap: anywhere; }
  .stat small { overflow-wrap: anywhere; }
  .card { padding: 14px; }
  .card > .toolbar { gap: 8px; }
  .toolbar .btn-small { flex: 0 0 auto; }
  .form-actions > .btn, .form-actions > button { flex: 1 1 auto; justify-content: center; }
}

/* ---------- Arreglos sueltos de pantallas concretas ---------- */
@media (max-width: 760px) {
  /* Familias y código amigo: en columna, el buscador de socio no puede crecer a lo alto (flex-basis 220px). */
  .fam-row-form > .mpick, .fam-row-form > label, .fam-row-form > * { flex: 0 0 auto; }
}
@media (max-width: 640px) {
  /* Clases › Horario semanal: la semana se desliza día a día (la hora se queda fija a la izquierda) con atajos Lun…Dom. */
  .slot-grid-wrap { scroll-snap-type: x mandatory; scroll-padding-left: 64px; overscroll-behavior-x: contain; }
  .slot-grid .sg-day, .slot-grid .sg-cell { scroll-snap-align: start; }
  .slot-grid { --cols: 52px repeat(7, calc((100vw - 128px) / 2)) !important; }
  .m-daynav { display: flex; gap: 4px; margin: 0 0 8px; }
  .m-daynav button { flex: 1 1 0; min-width: 0; min-height: 40px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font: 600 13px var(--body, inherit); cursor: pointer; }
  .m-daynav button small { display: block; font-weight: 400; font-size: 10px; color: var(--muted); }
  .m-daynav button.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
  .m-daynav button.on small { color: inherit; opacity: .8; }
}
@media (min-width: 641px) and (max-width: 1100px) {
  /* Socios en tableta: la lista se desliza a los lados, pero la casilla, la foto y el nombre se quedan fijos a la izquierda. */
  .members-table:not(.m-on) th:nth-child(-n+3), .members-table:not(.m-on) td:nth-child(-n+3) { position: sticky; z-index: 1; background: var(--surface); }
  .members-table th:nth-child(1), .members-table td:nth-child(1) { left: 0; }
  .members-table th:nth-child(2), .members-table td:nth-child(2) { left: 36px; }
  .members-table th:nth-child(3), .members-table td:nth-child(3) { left: 100px; box-shadow: 8px 0 10px -8px color-mix(in srgb, #000 22%, transparent); }
}
@media (max-width: 640px) {
  /* Rutinas del tótem (panel/plan_edit.php): cada ejercicio es una tarjeta; subir/bajar y quitar van abajo. */
  table.m-cards.plan-table tbody td.order { order: 5; flex: 0 0 auto; padding: 10px 0 0; margin-right: auto; }
  table.m-cards.plan-table tbody td.m-actions:not(.order) { order: 6; flex: 1 1 auto; }
  table.m-cards.plan-table tbody td input:not(.tiny) { width: 100%; }
  table.m-cards.plan-table tbody tr.ss-head { display: block; clip-path: none; background: transparent; border: 0; padding: 8px 2px 2px; }
  table.m-cards.plan-table tbody tr.ss-head::after { content: none; }
}