/* ════════════════════════════════════════════════════════════════════
   ESAR · Capa Responsiva  (esar-responsive.css)
   v1.0 — Solución no invasiva

   REGLA DE ORO: todo lo que afecta layout vive dentro de @media.
   Por encima de 1024px el sitio queda EXACTAMENTE igual que hoy.

   Depende de que el JS (esar-responsive.js) agregue estas clases:
     body.esar-nav-open      → menú lateral abierto
     #esarNavToggle          → botón hamburguesa
     #esarNavBackdrop        → fondo oscuro del drawer
     .esar-tw                → contenedor de tabla (div.overflow-x-auto)
     .esar-tw.esar-mode-scroll → ese contenedor en modo "tabla clásica"
     table.esar-rwd-table    → tabla adaptable
     td[data-esar-label]     → etiqueta de la columna para modo tarjeta
     .esar-xscroll           → contenedor con scroll horizontal (calendarios)
   ════════════════════════════════════════════════════════════════════ */

/* ── Tokens (heredan la paleta original del sitio) ─────────────────── */
:root{
  --esar-card-bg:#ffffff;
  --esar-card-bd:#e2e8f0;
  --esar-card-sh:0 1px 3px rgba(15,23,42,.06);
  --esar-label:#64748b;
  --esar-primary:#1A56DB;
  --esar-drawer-w:min(84vw, 18rem);
}
.dark{
  --esar-card-bg:#1F2937;
  --esar-card-bd:#374151;
  --esar-card-sh:0 1px 3px rgba(0,0,0,.35);
  --esar-label:#94a3b8;
}

/* ── Elementos propios de la capa (ocultos en escritorio) ─────────── */
#esarNavToggle,
#esarNavClose,
#esarNavBackdrop,
.esar-tw-actions{ display:none; }

#esarNavToggle{
  align-items:center; justify-content:center;
  width:2.5rem; height:2.5rem; margin-right:.15rem; margin-left:-.35rem;
  border:0; cursor:pointer;
  border-radius:.75rem;
  color:var(--esar-primary);
  background:transparent;
  box-shadow:none;
  transition:background-color .2s ease, transform .15s ease;
  -webkit-tap-highlight-color:transparent;
}
#esarNavToggle .material-icons-outlined{ font-size:1.65rem; }
#esarNavToggle:hover{ background:rgba(26,86,219,.09); }
#esarNavToggle:active{ transform:scale(.94); }
.dark #esarNavToggle{ color:#7BA5F8; }
.dark #esarNavToggle:hover{ background:rgba(123,165,248,.14); }
#esarNavToggle:focus-visible,
#esarNavClose:focus-visible,
.esar-tw-actions button:focus-visible{
  outline:2px solid var(--esar-primary); outline-offset:2px;
}

#esarNavClose{
  position:absolute; top:.75rem; right:.75rem; z-index:2;
  align-items:center; justify-content:center;
  width:2.25rem; height:2.25rem;
  border:0; border-radius:.75rem; cursor:pointer;
  background:rgba(148,163,184,.14); color:#475569;
}
.dark #esarNavClose{ background:rgba(148,163,184,.18); color:#e2e8f0; }

/* ══════════════════════════════════════════════════════════════════
   1) ≤1024px · Menú lateral → drawer con hamburguesa
   ══════════════════════════════════════════════════════════════════ */
@media (max-width:1024px){

  /* Alto real del viewport en móviles (barra de URL) */
  body{ height:100dvh !important; }

  /* El aside sale del flujo: el main ocupa el 100%.
     Los !important son necesarios: el <aside> trae utilidades de Tailwind
     (z-20, w-72) que ganan en especificidad a un selector de elemento y
     dejarían el menú por debajo del fondo oscuro, bloqueando los clics. */
  body > aside{
    position:fixed !important;
    top:0 !important; left:0 !important; bottom:0 !important; right:auto !important;
    width:var(--esar-drawer-w) !important;
    max-width:20rem;
    height:100dvh;
    z-index:90 !important;
    transform:translateX(-102%) !important;
    transition:transform .3s cubic-bezier(.4,0,.2,1);
    will-change:transform;
  }
  body.esar-nav-open > aside{
    transform:translateX(0) !important;
    box-shadow:0 24px 60px -12px rgba(15,23,42,.45);
  }
  @media (prefers-reduced-motion:reduce){
    body > aside{ transition:none; }
  }

  body > aside .p-8{ padding:1.5rem !important; }

  body > main{ width:100% !important; min-width:0 !important; flex:1 1 100% !important; }

  #esarNavBackdrop{
    display:block;
    position:fixed; inset:0; z-index:85;
    background:rgba(15,23,42,.55);
    opacity:0; pointer-events:none;
    transition:opacity .3s ease;
  }
  body.esar-nav-open #esarNavBackdrop{ opacity:1; pointer-events:auto; }

  #esarNavToggle{ display:inline-flex; }
  #esarNavClose{ display:inline-flex; }

  /* Menús flotantes nunca se salen de la pantalla */
  [role="listbox"],
  .absolute[class*="w-64"], .absolute[class*="w-72"], .absolute[class*="w-80"],
  .fixed[class*="w-64"], .fixed[class*="w-72"], .fixed[class*="w-80"]{
    max-width:calc(100vw - 1.5rem) !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   2) ≤900px · Rejillas fijas (KPIs, tarjetas) se reacomodan
   ══════════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  body [class~="grid-cols-4"]:not(.esar-keep-grid),
  body [class~="grid-cols-3"]:not(.esar-keep-grid){
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   3) ≤820px · Tablas en modo TARJETA (sin perder ninguna celda)
   ══════════════════════════════════════════════════════════════════ */
@media (max-width:820px){

  /* Contenedor: ya no hace falta scroll lateral */
  .esar-tw:not(.esar-mode-scroll){ overflow-x:visible !important; }

  .esar-tw:not(.esar-mode-scroll) > table.esar-rwd-table{
    display:block;
    width:100% !important;
    min-width:0 !important;
    border-collapse:separate;
  }
  .esar-tw:not(.esar-mode-scroll) > table.esar-rwd-table > thead{ display:none; }
  .esar-tw:not(.esar-mode-scroll) > table.esar-rwd-table > tbody{ display:block; width:100%; }

  /* Cada fila = una tarjeta */
  .esar-tw:not(.esar-mode-scroll) > table.esar-rwd-table > tbody > tr{
    display:block;
    background:var(--esar-card-bg);
    border:1px solid var(--esar-card-bd) !important;
    border-radius:1rem !important;
    box-shadow:var(--esar-card-sh);
    padding:.9rem 1rem !important;
    margin:0 0 .75rem !important;
  }
  /* Respetar el filtrado/paginación del sitio */
  .esar-tw:not(.esar-mode-scroll) > table.esar-rwd-table > tbody > tr.hidden,
  .esar-tw:not(.esar-mode-scroll) > table.esar-rwd-table > tbody > tr[hidden],
  .esar-tw:not(.esar-mode-scroll) > table.esar-rwd-table > tbody > tr.esar-page-hidden{
    display:none !important;
  }

  /* Cada celda = una línea "Etiqueta ......... valor" */
  .esar-tw:not(.esar-mode-scroll) > table.esar-rwd-table > tbody > tr > td{
    display:flex !important;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-end;
    gap:.35rem .6rem;
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    padding:.42rem 0 !important;
    text-align:right !important;
    white-space:normal !important;
    border:0 !important;
    vertical-align:middle;
  }
  .esar-tw:not(.esar-mode-scroll) > table.esar-rwd-table > tbody > tr > td.hidden,
  .esar-tw:not(.esar-mode-scroll) > table.esar-rwd-table > tbody > tr > td[hidden]{
    display:none !important;
  }
  .esar-tw:not(.esar-mode-scroll) > table.esar-rwd-table > tbody > tr > td + td{
    border-top:1px dashed rgba(148,163,184,.25) !important;
  }

  .esar-tw:not(.esar-mode-scroll) > table.esar-rwd-table > tbody > tr > td::before{
    content:attr(data-esar-label);
    margin-right:auto;
    max-width:48%;
    text-align:left;
    font-size:.66rem;
    line-height:1.3;
    font-weight:700;
    letter-spacing:.03em;
    text-transform:uppercase;
    color:var(--esar-label);
    flex:0 0 auto;
  }
  /* Columnas sin encabezado (checkbox, acciones sueltas) y celdas fusionadas */
  .esar-tw:not(.esar-mode-scroll) > table.esar-rwd-table > tbody > tr > td[data-esar-label=""]::before{
    content:none;
  }
  .esar-tw:not(.esar-mode-scroll) > table.esar-rwd-table > tbody > tr > td[colspan]{
    display:block !important;
    text-align:center !important;
    padding:.6rem 0 !important;
    border-top:0 !important;
  }
  .esar-tw:not(.esar-mode-scroll) > table.esar-rwd-table > tbody > tr > td[colspan]::before{ content:none; }

  /* El contenido interno de la celda no debe desbordar */
  .esar-tw:not(.esar-mode-scroll) > table.esar-rwd-table > tbody > tr > td .flex{ min-width:0; }
  /* Miniaturas de icono: conservan su caja aunque la fuente tarde en cargar */
  .esar-tw:not(.esar-mode-scroll) > table.esar-rwd-table > tbody > tr > td [class~="w-8"],
  .esar-tw:not(.esar-mode-scroll) > table.esar-rwd-table > tbody > tr > td [class~="w-10"],
  .esar-tw:not(.esar-mode-scroll) > table.esar-rwd-table > tbody > tr > td [class~="w-12"]{
    flex:0 0 auto; overflow:hidden;
  }
  .esar-tw:not(.esar-mode-scroll) > table.esar-rwd-table > tbody > tr > td p,
  .esar-tw:not(.esar-mode-scroll) > table.esar-rwd-table > tbody > tr > td span{
    overflow-wrap:anywhere;
  }

  /* Fila de "sin resultados" y filas de detalle expandibles */
  .esar-tw:not(.esar-mode-scroll) > table.esar-rwd-table > tbody > tr:has(> td[colspan]:only-child){
    background:transparent;
    border-style:dashed !important;
    box-shadow:none;
  }

  /* Botón para alternar tarjeta / tabla clásica */
  .esar-tw-actions{
    display:flex;
    justify-content:flex-end;
    margin:.15rem 0 .75rem;
  }
  .esar-tw-actions button{
    display:inline-flex; align-items:center; gap:.3rem;
    padding:.3rem .7rem;
    font:600 .68rem/1 inherit;
    letter-spacing:.02em;
    color:var(--esar-primary);
    background:transparent;
    border:1px solid var(--esar-card-bd);
    border-radius:9999px;
    cursor:pointer;
  }
  .esar-tw-actions button .material-icons-outlined{ font-size:.95rem; }
  .esar-tw.esar-mode-scroll{ overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
}

/* ══════════════════════════════════════════════════════════════════
   4) ≤768px · Cabecera, espaciados, modales, formularios
   ══════════════════════════════════════════════════════════════════ */
@media (max-width:768px){

  /* Cabecera en una sola fila: hamburguesa · buscador · usuario */
  body > main > header{
    height:auto !important;
    min-height:4rem;
    flex-wrap:wrap;
    row-gap:.55rem;
    padding:.7rem 1rem !important;
  }
  body > main > header > *{ min-width:0; }
  body > main > header .relative.w-96{
    order:0;
    flex:1 1 0% !important;      /* base 0: se encoge en vez de saltar de fila */
    width:auto !important;
    min-width:4rem;
    margin-right:.35rem;
  }
  body > main > header .relative.w-96 input{ width:100% !important; }
  body > main > header > div:last-child{ margin-left:auto; flex:0 0 auto; }
  body > main > header .space-x-6 > * + *{ margin-left:.85rem !important; }

  /* Área de contenido y pie */
  body > main > .flex-1,
  body > main > footer{
    padding-left:1rem !important;
    padding-right:1rem !important;
  }
  body > main > .flex-1{
    padding-bottom:max(1.5rem, env(safe-area-inset-bottom)) !important;
  }

  /* Tipografía de títulos */
  body > main h1[class*="text-3xl"]{ font-size:1.5rem !important; line-height:2rem !important; }
  body > main h2[class*="text-2xl"]{ font-size:1.25rem !important; line-height:1.75rem !important; }

  /* (las tiras de pestañas se tratan más abajo, a partir de 1024 px) */

  /* Barras de herramientas / filtros: que envuelvan en lugar de desbordar */
  body > main > .flex-1 .flex:has(> button),
  body > main > .flex-1 .flex:has(> select),
  body > main > .flex-1 .flex:has(> input),
  body > main > .flex-1 .flex:has(> .relative){
    flex-wrap:wrap;
  }

  /* Menos aire en tarjetas para ganar ancho útil */
  body > main > .flex-1 [class~="p-8"]{ padding:1.15rem !important; }
  body > main > .flex-1 [class~="p-6"]{ padding:1rem !important; }
  body > main > .flex-1 [class~="px-8"]{ padding-left:1rem !important; padding-right:1rem !important; }
  body > main > .flex-1 [class~="gap-8"]{ gap:1rem !important; }
  body > main > .flex-1 [class~="mb-8"]{ margin-bottom:1.25rem !important; }

  /* Nada se sale de pantalla */
  body > main img,
  body > main canvas,
  body > main svg{ max-width:100%; height:auto; }
  body > main input,
  body > main select,
  body > main textarea{ max-width:100%; }

  /* Modales a pantalla casi completa */
  .fixed.inset-0{ padding:.6rem !important; }
  .fixed.inset-0 [class*="max-w-"]{ max-width:100% !important; width:100% !important; }
  .fixed.inset-0 .modal-panel{ max-height:90dvh; }
  .modal-scroll{ max-height:70dvh; }

  /* Nada dentro de un modal puede empujar más allá del borde */
  .fixed.inset-0 *{ min-width:0; }
  .fixed.inset-0 [class*="min-w-["]{ min-width:0 !important; }
  .fixed.inset-0 [class~="w-96"], .fixed.inset-0 [class~="w-80"],
  .fixed.inset-0 [class~="w-72"], .fixed.inset-0 [class~="w-64"]{ width:auto !important; }
  .fixed.inset-0 img, .fixed.inset-0 svg, .fixed.inset-0 canvas{ max-width:100%; }

  /* Pies de modal y barras de acciones: envuelven en vez de desbordar */
  .fixed.inset-0 .flex:has(> button),
  .fixed.inset-0 .flex:has(> a),
  .fixed.inset-0 .flex:has(> select),
  .fixed.inset-0 .flex:has(> input){ flex-wrap:wrap; }

  /* Tiras de pestañas dentro de modales: scroll horizontal */
  .fixed.inset-0 .flex:has(> .stm-tab),
  .fixed.inset-0 [class*="overflow-x-auto"]{
    flex-wrap:nowrap !important;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  /* Menos aire dentro del modal para ganar ancho útil */
  .fixed.inset-0 [class~="p-8"]{ padding:1.1rem !important; }
  .fixed.inset-0 [class~="p-6"]{ padding:.9rem !important; }
  .fixed.inset-0 [class~="px-8"]{ padding-left:1rem !important; padding-right:1rem !important; }
  .fixed.inset-0 [class~="px-6"]{ padding-left:.9rem !important; padding-right:.9rem !important; }
  .fixed.inset-0 [class~="gap-8"]{ gap:1rem !important; }

  /* Calendarios: se mantienen en 7 columnas, con scroll si hace falta */
  .esar-xscroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  [class~="grid-cols-7"]{ min-width:31rem; }
}

/* ══════════════════════════════════════════════════════════════════
   5) ≤600px · Teléfonos: una sola columna
   ══════════════════════════════════════════════════════════════════ */
@media (max-width:600px){
  body [class~="grid-cols-4"]:not(.esar-keep-grid),
  body [class~="grid-cols-3"]:not(.esar-keep-grid),
  body [class~="grid-cols-2"]:not(.esar-keep-grid){
    grid-template-columns:minmax(0,1fr) !important;
  }

  body > main > .flex-1,
  body > main > footer{ padding-left:.75rem !important; padding-right:.75rem !important; }
  body > main > header{ padding-left:.75rem !important; padding-right:.75rem !important; }

  body > main h1[class*="text-3xl"]{ font-size:1.35rem !important; }

  /* Paginadores y pies de tabla centrados */
  body > main #docsPager,
  body > main [id$="Pager"]{ flex-wrap:wrap; }

  /* Etiqueta de la tarjeta un poco más angosta para valores largos */
  .esar-tw:not(.esar-mode-scroll) > table.esar-rwd-table > tbody > tr > td::before{ max-width:42%; }
}

/* Tiras de pestañas (marcadas por el JS): en móvil se convierten en
   pastillas compactas para que quepan en horizontal sin cortarse */
@media (max-width:1024px){
  .esar-tabs{
    display:flex !important;
    width:100%;
    flex-wrap:wrap !important;
    overflow-x:visible !important;
    gap:.4rem !important;
    align-items:stretch;
  }
  .esar-tabs > * + *{ margin-left:0 !important; }
  .esar-tabs > *{
    /* crecen para repartirse todo el ancho, pero nunca por debajo del
       ancho de su texto: así ocupan la fila completa sin mutilarse */
    flex:1 1 auto;
    min-width:max-content;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:.3rem .62rem !important;
    border-radius:9999px !important;
    border:1px solid rgba(148,163,184,.32) !important;
    background:rgba(255,255,255,.75);
    font-size:.72rem !important;
    line-height:1.2 !important;
    white-space:nowrap;
    transition:background-color .2s ease, color .2s ease;
  }
  .dark .esar-tabs > *{ background:rgba(30,41,59,.6); border-color:rgba(148,163,184,.28) !important; }

  /* La pestaña activa: pastilla llena en el azul del sitio */
  .esar-tabs > [class*="border-primary"],
  .esar-tabs > [class*="text-primary"],
  .esar-tabs > [aria-current],
  .esar-tabs > .esar-tab-activa{
    background:var(--esar-primary) !important;
    border-color:var(--esar-primary) !important;
    color:#fff !important;
    font-weight:700 !important;
  }
}

/* Pantallas estrechas: pastillas aún más compactas, para que la fila
   completa siga cabiendo en horizontal */
@media (max-width:430px){
  .esar-tabs{ gap:.28rem !important; }
  .esar-tabs > *{
    padding:.26rem .5rem !important;
    font-size:.66rem !important;
    letter-spacing:-.01em;
  }
}

/* Estado de la búsqueda global: "Buscando…", nº de resultados y limpiar */
#esarBuscarEstado{
  position:absolute;
  right:.55rem; top:50%;
  transform:translateY(-50%);
  display:none;
  align-items:center; gap:.3rem;
  max-width:60%;
  z-index:2;
  pointer-events:none;
}
#esarBuscarEstado.esar-visible{ display:flex; }
#esarBuscarEstado .esar-be-txt{
  font-size:.66rem; font-weight:700; letter-spacing:.02em;
  color:var(--esar-label);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#esarBuscarEstado .esar-be-limpiar{
  pointer-events:auto;
  display:none;
  align-items:center; justify-content:center;
  width:1.15rem; height:1.15rem;
  border:0; border-radius:9999px; cursor:pointer;
  background:rgba(148,163,184,.28); color:#475569;
  font:700 .72rem/1 inherit;
}
.dark #esarBuscarEstado .esar-be-limpiar{ background:rgba(148,163,184,.3); color:#e2e8f0; }
#esarBuscarEstado.esar-con-limpiar .esar-be-limpiar{ display:inline-flex; }
#esarBuscarEstado .esar-be-punto{
  display:none;
  width:.5rem; height:.5rem; border-radius:9999px;
  background:var(--esar-primary);
  animation:esar-latido .9s ease-in-out infinite;
}
#esarBuscarEstado.esar-buscando .esar-be-punto{ display:block; }
@keyframes esar-latido{ 0%,100%{opacity:.25; transform:scale(.75)} 50%{opacity:1; transform:scale(1)} }
@media (prefers-reduced-motion:reduce){ #esarBuscarEstado .esar-be-punto{ animation:none; opacity:.8; } }
/* deja sitio al indicador, solo mientras el indicador está visible:
   con el buscador vacío el campo queda exactamente como estaba */
:has(> #esarBuscarEstado.esar-visible) > input[data-esar-busqueda="1"]{
  padding-right:5.5rem !important;
}

/* Filas ocultas por la búsqueda global de la capa (clase propia: no
   interfiere con la clase `hidden` que usa el sitio para su paginación) */
tr.esar-oculto-busqueda,
.esar-oculto-busqueda{ display:none !important; }

/* Área táctil mínima recomendada en dispositivos sin puntero fino */
@media (max-width:820px) and (pointer:coarse){
  body > main button:not(.esar-no-touch),
  body > main a[class*="px-4"]{ min-height:2.5rem; }
}