/* ==========================================================================
   JIA CRM · mobile.css
   Ajustes responsive y táctiles. Se carga justo después de motion.css.

   Reglas de la casa:
   - Lo táctil va dentro de @media (pointer: coarse): en escritorio con ratón
     (puntero fino) el aspecto no cambia.
   - Lo de maquetación móvil va en @media (max-width: 1023.98px) (por debajo
     del breakpoint lg, donde aparece la barra inferior) o 639.98px (sm).
   - Lo único global son correcciones neutras de layout (pistas de grid).
   - Tailwind (Play CDN) inyecta su <style> después de este archivo: cuando hay
     que ganarle a una utilidad con la misma especificidad, se sube con `html`.
   ========================================================================== */

:root {
  --tap: 2.75rem;                 /* 44px: objetivo táctil mínimo (Apple HIG / WCAG 2.5.5) */
  --mobile-bar-h: 3.5rem;         /* alto de la barra inferior móvil (sin safe area) */
}

/* --------------------------------------------------------------------------
   1. Rejillas sin columnas base
   `grid lg:grid-cols-3` deja en móvil una pista implícita `auto` que crece hasta
   el ancho de cualquier texto `truncate` (white-space: nowrap) de sus hijos y
   desborda la página. minmax(0, 1fr) la limita al contenedor. Especificidad 0:
   cualquier utilidad grid-cols-* (también sm:/lg:) sigue mandando.
   -------------------------------------------------------------------------- */
:where(.grid:not([class^="grid-cols-"]):not([class*=" grid-cols-"])) {
  grid-template-columns: minmax(0, 1fr);
}

/* --------------------------------------------------------------------------
   2. Marca: "JIA." + "CRM" en el menú lateral y el login
   -------------------------------------------------------------------------- */
.app-sidebar-brand { gap: .5rem; }
.app-sidebar-brand .logo-img { display: block; }
.app-sidebar-brand .brand-suffix { line-height: 1; padding-top: .3rem; }

/* --------------------------------------------------------------------------
   3. Menú lateral móvil (drawer), overlay y bloqueo de scroll
   -------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  /* Cerrado por defecto aunque Alpine aún no haya arrancado (sin destello). */
  .app-sidebar:not(.translate-x-0) { transform: translateX(-100%); }
  /* El drawer va por encima de la barra inferior (z-50 > z-40): todo el menú,
     incluida la última opción, es alcanzable. Margen extra para el home indicator. */
  html .app-sidebar-nav { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
  .app-drawer-overlay {
    background: rgba(3, 7, 15, .6);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }
  html.scroll-locked,
  html.scroll-locked body { overflow: hidden; overscroll-behavior: none; }
}

/* --------------------------------------------------------------------------
   4. Utilidades táctiles
   .tap      → amplía el área táctil a 44×44 con un pseudo-elemento, sin mover
               el layout (para iconos y enlaces sueltos).
   .tap-row  → fila de lista con alto mínimo de 44px.
   .tap-y    → padding vertical para que una línea de texto llegue a 44px.
   .tap-flush→ lo mismo sin mover el layout (padding + margen negativo).
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  :where(.tap:not(.absolute):not(.fixed):not(.sticky)) { position: relative; }
  .tap::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, var(--tap));
    height: max(100%, var(--tap));
    transform: translate(-50%, -50%);
    border-radius: inherit;
  }
  .tap-row { min-height: var(--tap); }
  .tap-row:is(.flex, .inline-flex) { align-items: center; }
  /* Enlaces de una línea dentro de listas: más alto sin pseudo-elemento
     (sirve aunque el enlace recorte su contenido con truncate). */
  .tap-y { padding-top: .75rem; padding-bottom: .75rem; }
  /* Igual, pero sin mover el layout: el padding se compensa con margen negativo
     y el elemento se posiciona para quedar por encima de sus vecinos. */
  .tap-flush { position: relative; padding-top: .75rem; padding-bottom: .75rem; margin-top: -.75rem; margin-bottom: -.75rem; }

  /* "Volver" (flecha) en cabeceras de detalle y formularios (_form.html y demás). */
  main a:has(> [data-lucide="arrow-left"]):not(.tap) { position: relative; }
  main a:has(> [data-lucide="arrow-left"]):not(.tap)::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, var(--tap));
    height: max(100%, var(--tap));
    transform: translate(-50%, -50%);
  }
}

/* --------------------------------------------------------------------------
   5. Controles de formulario
   -------------------------------------------------------------------------- */
/* 16px evita el zoom automático de iOS al enfocar un campo. */
@media (max-width: 1023.98px), (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
  :is(select, textarea):not([data-keep-font]),
  html .ql-container.ql-snow { font-size: 16px; }
}

@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not(.sr-only),
  select { min-height: var(--tap); }
  input[type="file"] { min-height: var(--tap); }

  /* Casillas y radios de 20px con su etiqueta como zona táctil. */
  input:is([type="checkbox"], [type="radio"]):not(.sr-only) {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
  }
  label:has(> input:is([type="checkbox"], [type="radio"])):is(.flex, .inline-flex) { min-height: var(--tap); }
  label.cursor-pointer:has(> input.sr-only):not(.flex):not(.inline-flex):not(.block):not(.grid):not(.relative) {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
  }
  input:is([type="checkbox"], [type="radio"]) + label {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
  }
}

/* --------------------------------------------------------------------------
   6. Botones y enlaces con aspecto de botón: 44px de alto en táctil
   (cualquier <a>/<button> con padding horizontal y vertical dentro de main).
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  main :is(a, button, summary)[class*="px-"][class*="py-"]:not(.hidden):not([class*=":hidden"]):not(.block):not(.flex):not(.grid):not(.w-full):not(.sr-only),
  main button.pill,
  main a.view-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap);
  }
  main :is(a, button)[class*="px-"][class*="py-"]:is(.block, .flex, .grid, .w-full):not(.hidden):not([class*=":hidden"]) {
    min-height: var(--tap);
  }
  main :is(a, button)[class*="px-"][class*="py-"].block:not(button) {
    display: flex;
    align-items: center;
  }
  /* Botones de tamaño fijo (h-9, h-10) y botones de icono */
  main :is(a, button):is(.h-9, .h-10):is(.w-9, .w-10),
  html .hs-icon-btn {
    width: var(--tap);
    height: var(--tap);
  }
  main :is(a, button).h-10:not(.w-10) { height: var(--tap); }
  /* Botones que solo contienen un icono (p-1 / p-1.5 / p-2) */
  main :is(a, button):is(.p-1, .p-1\.5, .p-2):has(> :is(svg, i):only-child) {
    display: inline-grid;
    place-items: center;
    min-width: var(--tap);
    min-height: var(--tap);
  }

  /* Iconos de acción en tablas (descargar, editar, ver…) */
  main td a:has(> svg:only-child),
  main td a:has(> i:only-child) {
    display: inline-grid;
    place-items: center;
    width: var(--tap);
    height: var(--tap);
    vertical-align: middle;
  }
  /* Enlaces de texto en celdas (número de factura, nombre…) */
  main td a:not(:has(> svg:only-child)):not(:has(> i:only-child)):not(.flex):not(.inline-flex):not(.block) {
    position: relative;
  }
  main td a:not(:has(> svg:only-child)):not(:has(> i:only-child)):not(.flex):not(.inline-flex):not(.block)::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, var(--tap));
    height: var(--tap);
    transform: translate(-50%, -50%);
  }

  /* Menús desplegables de fila y del usuario */
  html .hs-menu a, html .hs-menu button { min-height: var(--tap); padding-block: .6rem; }
  header [x-data] .absolute a,
  header [x-data] .absolute button { min-height: var(--tap); }

  /* Toast: botón de cerrar */
  .toast-close { width: 2.5rem; height: 2.5rem; margin: -.4rem -.35rem -.4rem 0; }

  /* Paginación */
  main .flex > a[class*="px-3"][class*="py-1.5"] { min-height: var(--tap); }

  /* Menú lateral */
  .app-sidebar .nav-link { min-height: var(--tap); }

  /* Editor de texto enriquecido (Quill): barra de herramientas táctil */
  html .ql-snow.ql-toolbar button { width: 2.5rem; height: 2.5rem; padding: .55rem; }
  html .ql-snow.ql-toolbar .ql-picker { height: 2.5rem; }
  html .ql-snow.ql-toolbar .ql-picker-label { display: flex; align-items: center; }
  html .ql-snow.ql-toolbar .ql-formats { margin-right: .5rem; }
}

/* --------------------------------------------------------------------------
   7. Tipografía mínima en móvil (nada por debajo de 11px)
   -------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  html .text-\[10px\],
  html .text-\[9px\] { font-size: .6875rem; line-height: 1rem; }
}

/* --------------------------------------------------------------------------
   8. Tablas: en móvil se desplazan dentro de su tarjeta en lugar de recortarse
   (los contenedores .overflow-hidden / .data-card las cortaban).
   -------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  main :is(.overflow-hidden, .data-card):has(> table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  main :is(.overflow-hidden, .data-card):has(> table) > table th { white-space: nowrap; }
}

/* --------------------------------------------------------------------------
   9. Cabeceras de página: patrón único de acciones en móvil
   Primaria visible y primera; el resto en una fila con scroll horizontal (sin
   saltos de línea), con desvanecido en el borde que aún tiene contenido.
   Uso: añadir .page-actions al contenedor de botones de la cabecera.
   -------------------------------------------------------------------------- */
@media (max-width: 639.98px) {
  html .page-actions {
    flex: 1 0 100%;
    display: flex;
    flex-wrap: nowrap;
    gap: .5rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 1rem;
    scrollbar-width: none;
    margin-inline: -1rem;
    padding: .125rem 1rem .25rem;
  }
  .page-actions::-webkit-scrollbar { display: none; }
  .page-actions > * { flex: 0 0 auto; scroll-snap-align: start; }
  .page-actions :is(a, button) { white-space: nowrap; }
  .page-actions > :is(.bg-accent, .is-primary),
  .page-actions > :is(form, div):has(> .bg-accent) { order: -1; }
  .page-actions.fade-end { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 2rem), transparent); }
  .page-actions.fade-start { -webkit-mask-image: linear-gradient(90deg, transparent, #000 2rem); mask-image: linear-gradient(90deg, transparent, #000 2rem); }
  .page-actions.fade-start.fade-end { -webkit-mask-image: linear-gradient(90deg, transparent, #000 2rem, #000 calc(100% - 2rem), transparent); mask-image: linear-gradient(90deg, transparent, #000 2rem, #000 calc(100% - 2rem), transparent); }

  /* Títulos de detalle: en móvil hacen wrap completo en vez de cortarse. */
  .page-title { overflow-wrap: anywhere; }
}

/* --------------------------------------------------------------------------
   10. Texto: nombres a 2 líneas en móvil (en lugar de 1 con "…")
   -------------------------------------------------------------------------- */
@media (max-width: 639.98px) {
  html .m-clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }
}

/* --------------------------------------------------------------------------
   11. Kanban: columnas con scroll-snap horizontal en móvil
   Uso: .kanban-row en el contenedor y .kanban-col en cada columna.
   -------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  .kanban-row {
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1rem;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .kanban-row > .kanban-col { scroll-snap-align: start; scroll-snap-stop: normal; }
}

/* --------------------------------------------------------------------------
   12. Aviso de lista vacía sin lógica en la vista: <ul>…</ul><p class="empty-hint">
   -------------------------------------------------------------------------- */
.empty-hint { display: none; }
:is(ul, ol):not(:has(li)) + .empty-hint { display: block; }