/* ============================================================
   panel-fixes-tg.css — parche de la mini-app · 09/09/2026
   Escrito contra public/panel.html @ main (a12fa54)

   Linkear DESPUÉS del <style> inline, igual que panel-fixes.css.

   LEER PRIMERO: auditando el código encontré que la mayor parte de
   lo que reporté esta mañana YA ESTÁ ARREGLADO en main. Lo que queda
   abierto son estos tres bloques. El detalle de lo retirado está al
   final del archivo.
   ============================================================ */


/* ── 1 · Los chips de filtro no llegan a 44 px en el celular ──
   panel.html:694  .pill  →  min-height: 34px  (sin override en tg-mode)

   34 está bien con un mouse. Con el dedo, no: es el alto donde el
   pulgar empieza a fallar el tap y el usuario cree que la app no
   responde. Dev ya subió a 44 las flechas de rango y las X de los
   modales (panel.html:1791) — los chips quedaron afuera.

   Afecta a los filtros de Documentos, los de Clientes (Todos/Activos),
   los rangos de Agenda (Hoy/Esta semana/…) y los de Reseñas.          */
html.tg-mode .pill {
  min-height: 44px;
  padding: 0 14px;
}


/* ── 2 · La tira de filtros se desliza, pero nada lo dice ─────
   panel.html:683  #tickets-filters  →  overflow-x: auto
   panel.html:692                    →  ::-webkit-scrollbar { display: none }

   Acá me equivoqué en la auditoría: dije que los filtros "se cortan
   contra el buscador". No se cortan — la tira es deslizable a
   propósito, y con la barra de scroll oculta. El problema real es
   más chico y es de affordance: el último chip queda partido por el
   borde y no hay ninguna señal de que se pueda arrastrar, así que
   se lee como un bug de layout. (Me pasó a mí mirando la captura.)

   Un degradado en el borde derecho lo resuelve: el chip se desvanece
   en vez de cortarse, y eso ya dice "hay más".                        */
#tickets-filters {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
}
/* Cuando llegó al final no hay más que mostrar: se apaga el degradado.
   Requiere una clase que ponga el JS al detectar
   scrollLeft + clientWidth >= scrollWidth - 1. Si no se agrega, el
   degradado queda siempre y tampoco molesta. */
#tickets-filters.is-end {
  -webkit-mask-image: none;
          mask-image: none;
}


/* ── 3 · El buscador cortado en Clientes ──────────────────────
   panel.html:674   .toolbar  →  overflow: hidden
   panel.html:1575  @media (max-width:600px) { .toolbar { flex-wrap: wrap } }
   panel.html:1576                            { .input-search-tickets { width:100% } }

   La regla de 600px hace wrap y da ancho completo, pero SÓLO al
   buscador de Documentos (`.input-search-tickets`). El de Clientes
   usa otra clase, así que se queda en la fila con los dos chips y
   el placeholder termina en "Buscar por nombre o WhatsApi".

   Esto lo generaliza: en la mini-app, cualquier input de una toolbar
   va a ancho completo y la toolbar deja de recortar.                  */
html.tg-mode .toolbar {
  flex-wrap: wrap;
  overflow: visible;
}
html.tg-mode .toolbar .input {
  width: 100%;
  min-width: 0;
}


/* ============================================================
   QUEDA ABIERTO PERO NO ES CSS

   · Los vacíos que dejan 700-800 px muertos en Agenda y Clientes.
     Para que el vacío ocupe el alto disponible y se centre necesita
     un contenedor propio (hoy el texto es un nodo suelto dentro de
     la card). Es un cambio de marcado chico: envolverlo en un div
     con min-height:60vh + place-items:center. Decime si lo escribo.

   · Las 11 filas de configuración con "—" en el subtítulo.
     El CSS está bien: `.cfg-list-txt .s` (panel.html:1875) existe
     justamente para el estado de cada fila. Lo que falta es el VALOR
     que el JS escribe ahí — "No activado", "9 a 18 · lun a vie",
     "Ninguno cargado" en vez de "—". Es del lado de los datos, así
     que queda de Dev.

   RETIRADO DE LA AUDITORÍA — ya estaba arreglado en main

   · "El contenido pasa por debajo de la tab bar." Falso.
     panel.html:1626 → `html.tg-mode .main` ya tiene
     padding-bottom: calc(72px + safe-area). Lo que vi en la captura
     era el borde del recorte de pantalla, no el contenido tapado.

   · "Documentos: los filtros se cortan contra el buscador." Falso.
     El buscador ya vive en su propia `.toolbar` (panel.html:2192) y
     la tira de chips es deslizable. Queda sólo lo del bloque 2.

   · "El hover no existe en táctil, falta :active." Ya está.
     panel.html:1793-1794 agrega :active a `.client-card`,
     `.ag-accion` y `.cfg-list-row`.

   · "Los dos botones de creación duplicados." Ya está.
     panel.html:1776-1778, con el comentario citando esta auditoría.

   · "Documentos / Reportes / Reseñas no tienen puerta desde el
     celular." Falso: entran por Negocio, con `#cfg-lista` y el
     back-button propio (panel.html:1850-1861).

   · "«Recorrido de hoy» aparece en celular y no en escritorio."
     Es deliberado y está documentado en panel.html:1751 — en
     escritorio "Agenda de hoy" cubre lo mismo en formato lista.

   · Los 4 KPIs gigantes en cero en la mini-app: ya ocultos
     (`html.tg-mode #inicio-kpis`, panel.html:1775).

   NO ERA UN BUG — ES MI DISEÑO

   · Bebas en "ATENCIÓN REQUERIDA" y en el promedio de reseñas de la
     mini-app. Está documentado en panel.html:1643 citando
     pieza3-miniapp.jsx. Lo reporté como inconsistencia de títulos y
     no lo es: son dos piezas de alto énfasis, deliberadas. Se dejan.
   ============================================================ */