/* ============================================================
   Mobile layer — PMS Enterprise
   Técnica portada de dgu2025 (docs/exploracion/dgu2025-referencia.md
   §"Mobile-first"): un solo Blade sirve desktop y móvil; el desktop
   no se toca, el móvil es una capa ADITIVA por clases puestas en
   <body> por mobile-detection.js (is-mobile / is-ios / is-android /
   is-touch / is-portrait / is-landscape). Nada aquí depende de JS
   para funcionar — sigue habiendo un fallback por @media puro.
   ============================================================ */

/* ------------------------------------------------------------
   Utilidades show/hide
   ------------------------------------------------------------ */
.mobile-only { display: none !important; }
.desktop-only { display: initial; }

body.is-mobile .mobile-only { display: initial !important; }
body.is-mobile .desktop-only { display: none !important; }

@media (max-width: 768px) {
  .mobile-only { display: initial !important; }
  .desktop-only { display: none !important; }
}

/* ------------------------------------------------------------
   Touch targets — Apple HIG / Material mínimo 44x44px
   ------------------------------------------------------------ */
body.is-touch a,
body.is-touch button,
body.is-touch .btn-action,
body.is-touch .btn-ghost,
body.is-touch .btn.btn-primary,
body.is-touch .btn.btn-outline-primary,
body.is-touch input[type=checkbox],
body.is-touch input[type=radio],
body.is-touch .switch,
body.is-touch .top-bar nav a {
  min-height: 44px;
  min-width: 44px;
}

body.is-touch .top-bar nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.is-touch input[type=checkbox],
body.is-touch input[type=radio] {
  width: 22px;
  height: 22px;
}

/* ------------------------------------------------------------
   Safe-area iOS (notch / home indicator) — viewport-fit=cover
   ------------------------------------------------------------ */
body.is-ios {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
body.is-ios .top-bar {
  padding-top: calc(14px + env(safe-area-inset-top));
}

/* REM-38 (usuario, 2026-08-06, autorizacion expresa para QA users +
   Playwright/CDP): "no puedo hacer scroll" en movil -- CONFIRMADO real
   y reproducido (a diferencia del intento anterior, que no encontro
   nada porque probo con un User-Agent generico Linux/Chrome, sin
   is-ios activo). Comparacion contra calendario.liberatured.com (el
   legado, que SI scrollea bien en movil) mostro que el legado NO tiene
   esta capa mobile.css en absoluto -- la regla de aqui abajo es 100%
   nueva de pms, nunca existio en el legado.
   ROOT CAUSE confirmado con chromium headless + CDP, UA real de iPhone
   Safari (dispara body.is-ios): con `overscroll-behavior-y: none` en
   BODY, tanto un swipe tactil como una rueda del mouse dejaban
   window.scrollY en 0 SIEMPRE -- el scroll quedaba completamente
   bloqueado, no solo el "rebote" en el limite que la regla pretendia
   evitar. Razon real: el elemento que de verdad scrollea en esta app
   es <html> (bodyScrollHeight == bodyClientHeight, sin overflow
   propio; htmlScrollHeight > htmlClientHeight) -- overscroll-behavior
   puesto en BODY (que no es el contenedor que scrollea) hace que
   Chromium/WebKit bloquee la cadena de scroll completa en vez de solo
   el rebote en el limite. Fix verificado empiricamente ANTES de
   desplegar (misma sesion CDP, cambio en vivo -> scroll restaurado):
   mover la regla a HTML (el scroller real) y usar `contain` en vez de
   `none` -- `contain` SI logra el objetivo original (nada de bounce
   arrastrando toda la app) sin bloquear el scroll normal dentro de los
   limites, que es exactamente lo que `none` rompia. */
html.is-ios {
  overscroll-behavior-y: contain;
}

/* ------------------------------------------------------------
   Topbar compacta en móvil (mismo patrón que editorial.css
   trae para .top-bar, reforzado aquí vía clase de body)
   ------------------------------------------------------------ */
body.is-mobile .top-bar {
  padding: 10px 14px;
}
body.is-mobile .top-bar .brand { font-size: 1rem; }
body.is-mobile .top-bar .user { display: none; }
body.is-mobile .top-bar nav {
  gap: 4px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
body.is-mobile .top-bar nav a .lbl { display: none; }

/* FIX real (REM-11): nav horizontal con scroll lateral sin indicador ni
   tooltips -- reemplazado en movil por hamburguesa + drawer (patron
   portado de dgu2025 LXC 230, _mobile_bottom_nav.blade.php). El nav de
   iconos en fila se OCULTA en movil (se queda solo para desktop). */
body.is-mobile .top-bar nav { display: none; }

.pms-menu-toggle {
  background: transparent; border: none; color: var(--ink);
  font-size: 1.3rem; padding: 4px 8px; cursor: pointer; line-height: 1;
}

.pms-drawer-overlay {
  position: fixed; inset: 0; background: rgba(26,22,18,0.5);
  z-index: 1060; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-drawer) var(--ease-drawer), visibility var(--dur-drawer) var(--ease-drawer);
}
.pms-drawer-overlay.show { opacity: 1; visibility: visible; pointer-events: auto; }

.pms-drawer {
  position: fixed; top: 0; left: 0; width: 280px; max-width: 85vw;
  height: 100vh; height: 100dvh; background: var(--card-bg); z-index: 1070;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  pointer-events: none; box-shadow: 6px 0 24px rgba(26,22,18,0.18);
  /* UX-2026-09 UX-F4-02 (/apple §3 y §7): entra y sale por la izquierda con transform (antes animaba `left`,
     que recalcula layout). transition -> si se cierra a media apertura regresa desde donde va, sin salto.
     -105% para que la sombra tampoco asome; visibility espera a que termine la salida. */
  transform: translateX(-105%);
  visibility: hidden;
  transition: transform var(--dur-drawer) var(--ease-drawer), visibility 0s linear var(--dur-drawer);
}
.pms-drawer.show {
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition: transform var(--dur-drawer) var(--ease-drawer), visibility 0s;
}

.pms-drawer-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px; background: var(--cabeza-fondo); color: var(--cabeza-tinta); gap: 10px;
}
.pms-drawer-header span:not(.material-symbols-outlined) { font-family: 'Epilogue', 'Epilogue Fallback', sans-serif; font-size: 1rem; display:flex; align-items:center; gap:8px; }
.pms-drawer-close { background: transparent; border: none; color: var(--cabeza-tinta); font-size: 1.3rem; padding: 4px; cursor: pointer; }

.pms-drawer-body { padding: 10px 12px 24px; }
.pms-drawer-menu { list-style: none; margin: 0; padding: 0; }

.pms-drawer-item { margin-bottom: 2px; }
.pms-drawer-item a {
  display: flex; align-items: center; gap: 12px; padding: 12px 10px;
  color: var(--ink); text-decoration: none; border-radius: 10px;
  font-size: 0.92rem; min-height: 44px;
}
.pms-drawer-item a i { width: 20px; text-align: center; color: var(--ink-soft); }
.pms-drawer-item a:hover { background: var(--ghost); }
.pms-drawer-item a.active { background: var(--ink); color: var(--sobre-tinta); }
.pms-drawer-item a.active i { color: var(--sobre-tinta); }

.pms-drawer-section-title {
  display: flex; align-items: center; gap: 8px;
  color: var(--mustard-dk); font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 14px 10px 6px; margin-top: 4px; border-top: 1px solid var(--rule);
  list-style: none; cursor: default;
}
li:first-child > .pms-drawer-section-title,
.pms-drawer-menu > li:first-child .pms-drawer-accordion > summary.pms-drawer-section-title {
  border-top: none;
}

.pms-drawer-accordion > summary.pms-drawer-section-title { cursor: pointer; outline: none; }
.pms-drawer-accordion > summary.pms-drawer-section-title::-webkit-details-marker { display: none; }
.pms-drawer-caret { margin-left: auto; font-size: 0.7rem; transition: transform var(--dur-pop) var(--ease-out); color: var(--ink-faint); }
.pms-drawer-accordion[open] > summary .pms-drawer-caret { transform: rotate(180deg); }
.pms-drawer-submenu { list-style: none; margin: 0; padding: 0 0 0 6px; }

/* ------------------------------------------------------------
   Masthead / page paddings reducidos
   ------------------------------------------------------------ */
body.is-mobile .masthead { padding: 24px 16px 14px; }
body.is-mobile .masthead h1 { font-size: 1.7rem; }
body.is-mobile .page,
body.is-mobile .page-narrow { padding: 20px 14px 60px; }

/* ------------------------------------------------------------
   Tabla → tarjeta (.fin-table) en móvil
   Se activa cuando la tabla trae data-mobile-cards (o cualquier
   .fin-table dentro de body.is-mobile). Deja la regla lista aunque
   hoy no haya tablas reales que la usen todavía.
   Requiere en el th/td el atributo data-label="Encabezado" para
   pintar la etiqueta en el pseudo-elemento ::before.
   ------------------------------------------------------------ */
body.is-mobile table.fin-table.mobile-cards,
body.is-mobile table.fin-table[data-mobile-cards] {
  border: 0;
}
body.is-mobile table.fin-table.mobile-cards thead,
body.is-mobile table.fin-table[data-mobile-cards] thead {
  display: none;
}
body.is-mobile table.fin-table.mobile-cards,
body.is-mobile table.fin-table.mobile-cards tbody,
body.is-mobile table.fin-table.mobile-cards tr,
body.is-mobile table.fin-table.mobile-cards td,
body.is-mobile table.fin-table[data-mobile-cards],
body.is-mobile table.fin-table[data-mobile-cards] tbody,
body.is-mobile table.fin-table[data-mobile-cards] tr,
body.is-mobile table.fin-table[data-mobile-cards] td {
  display: block;
  width: 100% !important;
  /* FIX smoke F8-07: editorial.css (@media max-width:720px) pone
     min-width:640px + table-layout/width:auto en .fin-table para el
     patron de scroll horizontal (bug del iPhone SE). Ese min-width no
     lo toca el width:100% de arriba (es otra propiedad), asi que en
     el patron mobile-cards la fila queda 640px de ancho dentro de un
     viewport de 390px -- el valor real (::before es solo la etiqueta)
     queda empujado fuera de la pantalla, invisible sin scroll manual
     dentro de cada tarjeta. Cancelarlo aqui, mobile-cards NO scrollea,
     apila. */
  min-width: 0 !important;
}
body.is-mobile table.fin-table.mobile-cards tr,
body.is-mobile table.fin-table[data-mobile-cards] tr {
  /* Consistencia visual (V1.01): mismo lenguaje de card que /sitio --
     sombra suave real en vez de borde duro, radio grande, mas aire. */
  background: var(--card-bg);
  border: 0;
  border-radius: 16px;
  box-shadow: 0 1px 4px rgba(30, 25, 60, .08), 0 1px 2px rgba(0, 0, 0, .04);
  margin-bottom: 14px;
  padding: 14px 16px;
}
body.is-mobile table.fin-table.mobile-cards td,
body.is-mobile table.fin-table[data-mobile-cards] td {
  border-bottom: 1px solid var(--rule-soft);
  padding: 8px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  white-space: normal !important;
}
/* FIX real (V1.01, hallado en captura movil 390px): la celda de
   Acciones metia 3 botones (Ficha completa/Editar/Borrar) en una sola
   fila flex sin wrap -- el ultimo boton ("Borrar") quedaba cortado
   ("Borr") fuera de la tarjeta. Con flex-wrap arriba ya no se corta,
   y aqui se les da su propio renglon con los botones alineados a la
   derecha para que se vean como acciones, no como texto suelto. */
body.is-mobile table.fin-table.mobile-cards td[data-label="Acciones"],
body.is-mobile table.fin-table[data-mobile-cards] td[data-label="Acciones"] {
  justify-content: flex-end;
}
body.is-mobile table.fin-table.mobile-cards td[data-label="Acciones"] .btn,
body.is-mobile table.fin-table[data-mobile-cards] td[data-label="Acciones"] .btn {
  white-space: nowrap;
}
body.is-mobile table.fin-table.mobile-cards td:last-child,
body.is-mobile table.fin-table[data-mobile-cards] td:last-child {
  border-bottom: 0;
}
body.is-mobile table.fin-table.mobile-cards td::before,
body.is-mobile table.fin-table[data-mobile-cards] td::before {
  content: attr(data-label);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  text-transform: uppercase;
  flex-shrink: 0;
}

/* Tablas genéricas (.table) sin variante card: al menos que sigan
   scrolleando horizontalmente en vez de romper el layout */
body.is-mobile .table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ------------------------------------------------------------
   Modales fullscreen en móvil
   ------------------------------------------------------------ */
body.is-mobile .modal-content {
  border-radius: 0 !important;
  min-height: 100vh;
}

/* ------------------------------------------------------------
   Drawer lateral (para cuando exista nav lateral con swipe-to-close)
   ------------------------------------------------------------ */
.drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(84vw, 320px);
  background: var(--card-bg);
  box-shadow: 0 0 24px rgba(26,22,18,0.18);
  transform: translateX(-100%);
  transition: transform var(--dur-drawer) var(--ease-drawer);
  z-index: 1000;
}
.drawer.open { transform: translateX(0); }
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26,22,18,0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-drawer) var(--ease-drawer);
  z-index: 999;
}
.drawer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

/* ------------------------------------------------------------
   Orientación (clases informativas, sin efecto propio salvo que
   una vista las use)
   ------------------------------------------------------------ */
body.is-portrait .landscape-only { display: none !important; }
body.is-landscape .portrait-only { display: none !important; }

/* ------------------------------------------------------------
   Sin scroll horizontal accidental de toda la página en móvil
   ------------------------------------------------------------ */
body.is-mobile { max-width: 100%; overflow-x: hidden; }

/* ── Usuario (2026-08-06): "a veces me da el menu y a veces me da esta
   lista ancha rara. no me gusta la lista ancha rara. SIEMPRE el menu."
   El nav horizontal de iconos (.top-bar nav, pensado SOLO para desktop
   desde REM-11) se ve mal/se desborda con el numero real de secciones
   del menu (11 items reales, mas que los ~6 con los que se diseno
   originalmente) -- decision del usuario: matarlo del todo, el
   hamburguesa+drawer (antes SOLO movil) ahora es universal, desktop
   incluido. mobile-only ya se quito de esos 3 elementos en
   topbar.blade.php; aqui se oculta el nav horizontal SIEMPRE (no solo
   en body.is-mobile) y se reordena la barra: "swap out the sides.
   Dave & Nat hosting to the right or the middle, bell to the right,
   Menu to the left" -- orden final vía flex `order` (sin tocar el
   Livewire tag ni el HTML): hamburguesa a la izquierda, campana+marca
   agrupadas a la derecha. ────────────────────────────────────────── */
.top-bar nav {
  display: none !important;
}
.top-bar {
  display: flex;
}
.top-bar .pms-menu-toggle {
  order: 1;
}
.top-bar .pms-notif {
  order: 2;
}
.top-bar .brand {
  order: 3;
}

/* ── Usuario (2026-08-06), screenshot real de /limpiezas en movil:
   "Aqui se desborda." Patron repetido en varias vistas operativas
   (limpiezas, finanzas, fiscal, solicitudes, quejas): filtros dentro
   de .card-header con `style="width:auto"` inline en <select>/<input
   type=date>. Un <select> con width:auto se dimensiona al ANCHO DEL
   TEXTO de sus opciones, sin tope -- con nombres de propiedad reales
   largos ("Cycle-Friendly Roma Norte, Walk to Everything") el select
   solo ya es mas ancho que el viewport de un telefono, y flex-wrap NO
   puede envolver un elemento individual mas ancho que su contenedor
   (wrap mueve el elemento COMPLETO a otra fila, no lo encoge). Fix: en
   movil, estos filtros pasan a ancho completo (una fila cada uno) en
   vez de competir por espacio lado a lado. ──────────────────────── */
body.is-mobile .card-header select,
body.is-mobile .card-header input[type=date],
body.is-mobile .card-header input[type=text],
body.is-mobile .card-header input[type=search] {
  width: 100% !important;
  max-width: 100%;
}
body.is-mobile .card-header > div {
  width: 100%;
}

/* ── UX-2026-09 UX-F2-05: el boton del menu y la campana con texto ─────────────────── */
.top-bar .pms-menu-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.95rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; min-height: 40px;
}
.top-bar .pms-menu-toggle .material-symbols-outlined { font-size: 1.35rem; }
.pms-seccion-actual {
  font-weight: 400; color: var(--ink-soft);
  padding-left: 10px; border-left: 1px solid var(--rule);
  max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pms-notif-bell { width: auto; padding: 0 12px 0 10px; gap: 6px; font-weight: 600; font-size: 0.9rem; }
.pms-notif-lbl { font-size: 0.9rem; }
.pms-notif-bell .material-symbols-outlined { font-size: 1.25rem; }
@media (hover: hover) and (pointer: fine) { .top-bar .pms-menu-toggle:hover { background: var(--ghost); } }
body.is-mobile .pms-seccion-actual { display: none; }