/* Mi Asistente · Mini-app · el marco y las piezas · 13/09/2026
   Va con `panel-miniapp.js`. Archivos nuevos.

   `tg-mode` casi no hacía nada: medido, la barra lateral seguía ocupando
   220 px de los 390 del teléfono y la fila de KPI de escritorio seguía
   dibujándose. Lo que abre Telegram es este mismo `panel.html`, así que el
   marco tiene que cambiar acá.

   OJO AL VERIFICAR: la mini-app se mide a 390 px. En una ventana de ~900
   sobran 680 que tapan cualquier problema — así se me escapó que el contenido
   real vivía en 170 px. */

/* `display:none` saca la CAJA de la barra lateral pero NO su COLUMNA: el track
   de 220 px sigue declarado en `.panel`, así que en un teléfono de 390 el
   contenido queda con 170 y ahí adentro viven el header y las siete vistas. */
html.tg-mode .sidebar{display:none}
html.tg-mode .panel{grid-template-columns:minmax(0,1fr);width:100%;max-width:100%}
html.tg-mode .main{padding-left:0;padding-right:0;min-width:0}

/* La fila de KPI de escritorio no va: en 390 px son tres cifras que empujan la
   agenda abajo del fold, y la card «Hoy» ya las dice. */
html.tg-mode #inicio-kpis{display:none}
html.tg-mode .view{padding-bottom:76px}

/* El header era la única pieza del marco sin adaptar: sus hijos piden 434 px
   contra 390. Las dos altas ya están a un toque en la tab bar y en «Más». */
html.tg-mode .header{flex-wrap:wrap;row-gap:8px;height:auto;padding:11px 14px;min-width:0}
html.tg-mode .header > div:first-child{min-width:0;flex:1 1 auto}
html.tg-mode .header-right{flex:0 0 auto;gap:8px;min-width:0}
html.tg-mode .header-right #hdr-btn-trabajo,
html.tg-mode .header-right #hdr-btn-presupuesto{display:none}

/* 14-sep-2026 (Dev, auditoría cruzada panel/mini-app): `.footer`
   (Ayuda/Reportar bug/Cerrar sesión) es `grid-area:footer`, una fila fija
   de 48px al pie de la grilla -- `tg-mode` nunca la tocó porque sólo cambia
   COLUMNAS. La tab bar, `position:fixed;bottom:0`, queda pintada justo
   encima: medido, el punto de "Cerrar sesión" resolvía a un <span> de la
   tabbar, no al link -- invisible Y sin click, en las dos superficies desde
   que existe la tab bar (13-sep). "Cerrar sesión" ahora vive en la hoja de
   «Más» (ver panel-miniapp.js, `.ma-mas-salir`); acá sólo se saca del flujo
   la fila que ya no se puede tocar. */
html.tg-mode .footer{display:none}

/* ── La barra de pestañas ─────────────────────────────────────────────────
   Cuatro y no siete: en el teléfono el emprendedor mira el día y la agenda;
   reportes y reseñas son tareas de escritorio. Las otras cuatro vistas entran
   por «Más». La marca del activo va ARRIBA del ícono. */
.ma-tabbar{display:none}
html.tg-mode .ma-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--graphite-950);border-top:1px solid var(--graphite-700);
  padding-bottom:env(safe-area-inset-bottom,0px)}
.ma-tab{position:relative;min-height:56px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;background:transparent;border:0;
  cursor:pointer;padding:6px 4px;font:inherit}
.ma-tab .i{font-size:17px;line-height:1;color:var(--cloud-500)}
.ma-tab .k{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cloud-500)}
.ma-tab::before{content:"";position:absolute;top:0;left:22%;right:22%;height:2px;
  border-radius:0 0 3px 3px;background:transparent}
.ma-tab.is-active::before{background:var(--violet-600)}
.ma-tab.is-active .i,.ma-tab.is-active .k{color:var(--violet-text)}

.ma-mas{position:fixed;inset:0;z-index:95;display:none;align-items:flex-end;
  background:rgba(11,10,9,.55)}
.ma-mas.open{display:flex}
.ma-mas-h{width:100%;background:var(--graphite-950);border-top:1px solid var(--graphite-700);
  border-radius:20px 20px 0 0;padding:10px 0 calc(12px + env(safe-area-inset-bottom,0px))}
.ma-mas-i{width:100%;min-height:52px;display:flex;align-items:center;gap:11px;
  padding:0 20px;background:transparent;border:0;cursor:pointer;
  font-family:var(--sans);font-size:14px;color:var(--cloud-100);text-align:left}
.ma-mas-i:hover{background:var(--hover-tint)}
.ma-mas-i .i{width:22px;font-size:15px;color:var(--cloud-500)}
/* 14-sep-2026 (Dev): "Cerrar sesión" -- única fila de acción (no de
   navegación) de la hoja. Separada con un hairline arriba, igual que el
   footer de escritorio la separa del resto del sidebar. */
.ma-mas-salir{border-top:1px solid var(--graphite-700);margin-top:4px}

/* ── El recorrido del día ─────────────────────────────────────────────────
   En escritorio «Agenda de hoy» ya cubre lo mismo en formato lista. Lo que
   agrega acá es EL HUECO LIBRE entre trabajos: es la pregunta del que está en
   la calle decidiendo si le entra uno más, y en una lista no se ve porque la
   lista muestra lo que hay y no lo que falta. */
.ma-rec{display:none}
html.tg-mode #view-inicio .ma-rec{display:flex;flex-direction:column;gap:0;
  margin:0 0 14px;padding:12px 13px 13px;border-radius:14px;
  background:var(--graphite-950);border:1px solid var(--graphite-700)}
.ma-rec-k{font-family:var(--mono);font-size:9px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--cloud-500);margin-bottom:9px}
.ma-rec-r{display:flex;align-items:flex-start;gap:11px;padding:7px 0}
.ma-rec-h{flex:none;width:38px;font-family:var(--mono);font-size:11px;line-height:1.5;
  color:var(--cloud-500)}
.ma-rec-p{flex:none;width:9px;height:9px;border-radius:99px;margin-top:5px;
  background:var(--graphite-800);border:1px solid var(--graphite-700)}
.ma-rec-l{flex:1;min-width:0;font-size:12.5px;line-height:1.4;color:var(--cloud-300)}
.ma-rec-l b{display:block;color:var(--cloud-100);font-weight:600}
.ma-rec-hueco{display:flex;align-items:center;gap:11px;padding:5px 0 5px 49px;
  font-size:11.5px;line-height:1.4;color:var(--gold)}
.ma-rec-hueco.libre{color:var(--green-live)}

/* ── Inicio de jornada ────────────────────────────────────────────────────
   «La misma acción, dos puertas». A las 8 de la mañana el emprendedor está en
   el teléfono, no abriendo el panel: la puerta principal es el botón dentro
   del mensaje de Mate. Pero tiene que estar también acá — el que archivó el
   mensaje sin leer no puede quedarse sin arrancar la jornada. */
.ma-jornada{display:none}
html.tg-mode #view-inicio .ma-jornada{display:flex;align-items:flex-start;gap:11px;
  margin:0 0 14px;padding:13px 14px;border-radius:14px;
  background:var(--violet-soft);border:1px solid var(--violet-border)}
.ma-jornada .av{flex:none;width:30px;height:30px;border-radius:99px;display:flex;
  align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;
  color:#fff;background:var(--violet-700)}
.ma-jornada .x{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px}
.ma-jornada .t{font-size:13px;line-height:1.45;color:var(--cloud-100);text-wrap:pretty}
.ma-jornada button{align-self:flex-start;min-height:44px;padding:0 18px;border-radius:11px;
  border:1px solid var(--violet-700);background:var(--violet-700);color:#fff;
  font-family:var(--sans);font-size:13px;font-weight:600;cursor:pointer}

/* ── Pantalla de espera ───────────────────────────────────────────────────
   Bot configurado, WhatsApp sin aprobar. Es el estado REAL de una cuenta nueva
   —Meta tarda días— y no existía en ningún lado: el emprendedor entraba y veía
   un panel vacío sin saber si estaba roto o si faltaba algo. */
.ma-espera{display:none}
html.tg-mode #view-inicio .ma-espera{display:flex;flex-direction:column;gap:9px;
  margin:0 0 14px;padding:14px;border-radius:14px;
  background:rgba(232,184,76,.08);border:1px solid rgba(232,184,76,.28)}
.ma-espera .k{font-family:var(--mono);font-size:9px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold)}
.ma-espera .t{font-size:13px;line-height:1.5;color:var(--cloud-100);text-wrap:pretty}
.ma-espera .d{font-size:11.5px;line-height:1.5;color:var(--cloud-500);text-wrap:pretty}

/* ── La semana y el mapa, en el teléfono ──────────────────────────────────
   «En 390 px no entran cinco columnas, y la semana en el celular sirve para
   decidir dónde meter uno más»: una FILA POR DÍA con la insignia de lugar.
   Y el mes no puede mostrar nombres —la celda da para dos caracteres— así que
   muestra la FORMA del mes: un punto por trabajo. */
html.tg-mode .ag-sem{display:flex;flex-direction:column;gap:6px}
html.tg-mode .ag-sem-col{flex-direction:row;align-items:center;gap:11px;
  padding:10px 12px;background:var(--graphite-950);border-color:var(--graphite-700)}
html.tg-mode .ag-sem-h{flex:none;width:52px;flex-direction:row;align-items:baseline;gap:6px;
  padding:0;border:0;margin:0}
html.tg-mode .ag-sem-h .n{font-size:14px}
.ma-lugar{flex:none;margin-left:auto;font-family:var(--mono);font-size:9px;
  letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:99px;
  color:var(--green-live);background:var(--green-soft);border:1px solid var(--green-border)}
.ma-lugar.lleno{color:var(--coral);background:var(--coral-soft);border-color:var(--coral-border)}
.ma-lugar.casi{color:var(--gold);background:rgba(232,184,76,.10);border-color:rgba(232,184,76,.28)}