/* ═══════════════════════════════════════════════════════════════════════════
   ADAPTACIÓN A SMARTPHONE — ModeloPlan
   ───────────────────────────────────────────────────────────────────────────
   TODO lo que hay en este archivo vive dentro de un único @media (max-width:
   768px). En un PC no se aplica ni una sola regla, así que la vista de
   escritorio queda exactamente igual que antes.

   Se carga DESPUÉS de styles.css para poder ganarle a sus reglas por orden de
   documento. Contra los estilos que app.js inyecta en tiempo de ejecución
   (dentro de <body>, y por tanto posteriores a este archivo) se usa
   !important y, cuando hace falta, un selector más específico con `body`.

   Rango cubierto: de 320px (iPhone SE) a 768px. El corte en 768px deja fuera
   a las tablets en horizontal, que ya funcionan con el diseño de escritorio.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Alto real de la cabecera ────────────────────────────────────────────
     En el escritorio la cabecera mide ~46px y los paneles usan
     calc(100vh - 195px). En un teléfono la cabecera se envuelve en varias
     filas y esa constante deja de servir: el contenido se sale de la
     pantalla. app.js publica el alto medido en --app-hdr-h y aquí se usa esa
     variable en vez de la constante. El valor de reserva (132px) solo actúa
     en el instante previo a la primera medición.
     Se usa 100dvh (no 100vh) para descontar la barra de direcciones de los
     navegadores móviles, que en iOS Safari se lleva ~60px. */

  :root { --mob-chrome: calc(var(--app-hdr-h, 132px) + 10px); }

  html, body { overflow-x: hidden; }
  body       { font-size: 14px; }
  main       { padding: 6px 8px; }

  /* ═══════════════ CABECERA ═══════════════ */

  header { padding: 5px 8px; gap: 6px; row-gap: 5px; }

  /* La cuenta regresiva ocupa ~230px con textos de 6-7px: ilegible y el
     elemento más prescindible. Ya se oculta en los modos pantalla completa. */
  .cdbox { display: none !important; }

  /* El nombre del proyecto puede recortarse; los controles se mantienen todos
     accesibles (nada se oculta salvo el reloj, que es puramente informativo)
     y la fila se envuelve en vez de aplastarlos. */
  .logo            { font-size: 13px; min-width: 0; flex: 1 1 100%; flex-wrap: wrap; row-gap: 4px; }
  #logo-proj-name  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  #proj-logo-img   { max-width: 60px !important; }
  #hora-actual     { font-size: 13px !important; max-width: 165px; }
  #clock           { display: none !important; }

  .header-right { gap: 6px; row-gap: 5px; width: 100%; }

  /* El selector de proyecto tenía flex-shrink:0 y min-width:160px: un bloque
     de 250px que no cedía. Ahora ocupa el ancho disponible y se encoge. */
  .proj-sel-wrap { flex: 1 1 100%; min-width: 0; padding: 4px 8px; }
  .proj-sel      { min-width: 0 !important; width: 100%; font-size: 13px; }

  /* Las 7 pestañas suman ~770px en una fila sin envolver. En vez de
     apilarlas (comería media pantalla) se convierten en una tira deslizable
     horizontalmente, que es el patrón habitual en móvil. */
  .nav-tabs {
    flex: 1 1 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    padding: 3px;
  }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .nav-tab {
    flex: 0 0 auto;
    font-size: 12px;
    padding: 8px 12px;
    min-height: 36px;           /* objetivo táctil cómodo */
    scroll-snap-align: start;
  }

  /* Etiquetas de 6px: se suben a un tamaño legible. */
  .avbox  { padding: 4px 8px; gap: 8px; }
  .av-num { font-size: 15px; }
  .av-lbl { font-size: 8px; letter-spacing: .2px; }

  /* ═══════════════ TABLA GENERAL ═══════════════ */

  /* ── Modo pantalla completa de la tabla ───────────────────────────────────
     En el teléfono la Tabla General es la vista con más contenido y la que
     menos espacio tenía: entre cabecera, barra de menú, leyenda y filtros se
     iban ~230px de los ~700 disponibles, y encima el roadmap se quedaba con
     la mitad de lo que sobraba.
     Cuando la pestaña activa es "tabla" (app.js publica body[data-tab]) se
     esconde todo el cromo salvo la tira de pestañas —lo único que hace falta
     para cambiar de vista— y la tabla ocupa la pantalla entera.
     Todo esto está dentro del media query: en un PC no aplica. */

  body[data-tab="tabla"] .logo,
  body[data-tab="tabla"] .proj-sel-wrap,
  body[data-tab="tabla"] .avbox,
  body[data-tab="tabla"] .menu-bar,
  body[data-tab="tabla"] .legend,
  body[data-tab="tabla"] #filter-bar { display: none !important; }

  /* Sin nada más en la cabecera, la tira de pestañas queda pegada arriba. */
  body[data-tab="tabla"] header       { padding: 0 !important; border-bottom-width: 1px; }
  body[data-tab="tabla"] .header-right{ gap: 0 !important; }
  body[data-tab="tabla"] .nav-tabs    { border-radius: 0; padding: 2px; }
  body[data-tab="tabla"] .nav-tab     { min-height: 34px; padding: 7px 11px; }

  /* Y el contenido pega con los bordes de la pantalla. */
  body[data-tab="tabla"] main { padding: 0 !important; }

  /* El roadmap no se muestra en esta vista: la tabla se queda con todo. */
  body[data-tab="tabla"] .gt-pane-gantt,
  body[data-tab="tabla"] .gt-divider { display: none !important; }
  body[data-tab="tabla"] .gt-pane-tabla {
    flex: 1 1 100% !important;
    min-height: 0 !important;
  }

  /* Alto: solo hay que descontar la tira de pestañas, que --app-hdr-h ya mide. */
  body[data-tab="tabla"] .gt-split,
  body[data-tab="tabla"] .gt-wrap {
    height: calc(100vh  - var(--app-hdr-h, 44px)) !important;
    height: calc(100dvh - var(--app-hdr-h, 44px)) !important;
    min-height: 0 !important;
  }

  /* ── Botón flotante de filtros ────────────────────────────────────────────
     Los controles están ocultos para dejarle la pantalla a la tabla, pero
     tienen que poder abrirse: si queda un filtro activo desde el escritorio,
     la lista se ve incompleta y no habría forma de darse cuenta ni de
     limpiarlo. El botón muestra un contador con los filtros activos. */
  body[data-tab="tabla"] #mob-filters-btn {
    display: flex !important;
    position: fixed;
    right: 12px;
    bottom: 14px;
    z-index: 340;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--accent);
    color: #fff;
    font-size: 19px;
    box-shadow: 0 3px 10px rgba(0,0,0,.45);
    cursor: pointer;
    padding: 0;
  }
  body.mob-filters-open #mob-filters-btn { background: #7f1d1d; }

  /* Contador de filtros activos sobre el botón */
  #mob-filters-badge {
    position: absolute;
    top: -3px; right: -3px;
    min-width: 18px; height: 18px;
    border-radius: 9px;
    background: var(--warning, #f59e0b);
    color: #111;
    font-size: 11px;
    font-weight: 800;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
  }

  /* Con el panel abierto reaparecen menú y filtros, y la tabla cede el alto
     justo que ocupan (app.js mide y publica --mob-filters-h). */
  body[data-tab="tabla"].mob-filters-open .menu-bar,
  body[data-tab="tabla"].mob-filters-open #filter-bar { display: flex !important; }

  body[data-tab="tabla"].mob-filters-open .gt-split,
  body[data-tab="tabla"].mob-filters-open .gt-wrap {
    height: calc(100vh  - var(--app-hdr-h, 44px) - var(--mob-filters-h, 150px)) !important;
    height: calc(100dvh - var(--app-hdr-h, 44px) - var(--mob-filters-h, 150px)) !important;
  }

  /* La cabecera del panel izquierdo se estira a la altura de las dos filas del
     Gantt (--gt-hdr-total, ~59px) para que las filas de ambos paneles queden
     alineadas. Sin Gantt no hay nada que alinear: se recuperan esos 35px. */
  body[data-tab="tabla"] .gt-left thead tr:nth-child(1) th { height: auto !important; }

  /* Letra y alto de fila más compactos: caben ~40% más filas por pantalla. */
  body[data-tab="tabla"] .gt                       { font-size: 11px; }
  body[data-tab="tabla"] .gt thead tr:nth-child(1) th { font-size: 11px; padding: 3px 2px; }
  body[data-tab="tabla"] .gt thead tr:nth-child(2) th { font-size: 10px; padding: 2px 1px; }
  body[data-tab="tabla"] .gt tbody td              { font-size: 11px; line-height: 1.25; }
  body[data-tab="tabla"] .gt-dt-disp               { font-size: 10px; }
  body[data-tab="tabla"] .status-sel               { font-size: 9px; }
  body[data-tab="tabla"] .equipo-sel               { font-size: 11px; }

  /* Con la letra más chica sobra ancho en las columnas de texto: se estrechan
     para que entren más columnas por pantallazo. Se dejan intactas Inicio y
     Fin, porque contienen un input datetime-local que necesita 16px de letra
     (si no, iOS hace zoom al enfocarlo) y por tanto su ancho.
     `body` de más en el selector para ganarle al <style> que inyecta
     applyColLayout() con !important. */
  body[data-tab="tabla"] .gt .gt-eq   { width: 76px !important; min-width: 76px !important; max-width: 76px !important; }
  body[data-tab="tabla"] .gt .gt-agr  { width: 84px !important; min-width: 84px !important; max-width: 84px !important; }
  body[data-tab="tabla"] .gt .gt-resp { width: 96px !important; min-width: 96px !important; max-width: 96px !important; }
  body[data-tab="tabla"] .gt .gt-rrev { width: 96px !important; min-width: 96px !important; max-width: 96px !important; }
  body[data-tab="tabla"] .gt .gt-est  { width: 68px !important; min-width: 68px !important; max-width: 68px !important; }
  body[data-tab="tabla"] .gt .gt-real,
  body[data-tab="tabla"] .gt .gt-esp  { width: 46px !important; min-width: 46px !important; max-width: 46px !important; }
  body[data-tab="tabla"] .gt .gt-id   { width: 48px !important; min-width: 48px !important; max-width: 48px !important; }

  /* ── Resto de las vistas: los paneles apilados de siempre ─────────────── */

  /* Los paneles ya se apilan bajo 900px; aquí se corrige el alto (que usaba
     la constante de 195px) y se reparte mejor el espacio. */
  .gt-split,
  .gt-wrap {
    /* max() garantiza un mínimo usable; el descuento de 158px cubre la barra
       de menú, la leyenda y los filtros, que en móvil se envuelven. Quedarse
       algo corto es preferible a desbordar la pantalla.
       La primera línea es la reserva para navegadores sin dvh (iOS < 15.4). */
    height: max(340px, calc(100vh  - var(--mob-chrome) - 158px)) !important;
    height: max(340px, calc(100dvh - var(--mob-chrome) - 158px)) !important;
  }
  .gt-pane-tabla { flex: 0 0 48% !important; min-height: 150px; min-width: 0 !important; }
  .gt-pane-gantt { min-width: 0 !important; }

  /* Scroll táctil con barra visible: sin ella no hay forma de saber que el
     panel se desplaza en horizontal. */
  .gt-pane-tabla,
  .gt-pane-gantt {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin !important;
    -ms-overflow-style: auto !important;
  }
  .gt-pane-tabla::-webkit-scrollbar,
  .gt-pane-gantt::-webkit-scrollbar { width: 8px !important; height: 8px !important; }
  .gt-pane-tabla::-webkit-scrollbar-thumb,
  .gt-pane-gantt::-webkit-scrollbar-thumb {
    background: rgba(148,163,184,.5); border-radius: 4px;
  }

  /* El divisor se arrastra con el ratón (onmousedown) y en un teléfono no
     sirve de nada: pasa a ser una línea separadora de altura fija. */
  .gt-divider      { flex: 0 0 8px !important; cursor: default !important; }
  .gt-divider-grip { width: 40px; height: 3px; }

  /* Columnas ancladas: warn(28) + id(60) + actividad(300) suman 388px, más
     que la pantalla completa. Se deja anclada SOLO la actividad, que es la
     que identifica la fila, y estrechada. El resto se desancla para que el
     contenido pueda desplazarse.
     Estas reglas compiten con el <style> que applyColLayout() inyecta en
     tiempo de ejecución, que ya usa !important sobre `.gt .gt-<key>`; por eso
     aquí se antepone `body` para ganar en especificidad. */
  body .gt .gt-warn,
  body .gt .gt-id {
    position: static !important;
    left: auto !important;
    z-index: auto !important;
  }
  body .gt .gt-act {
    position: sticky !important;
    left: 0 !important;
    z-index: 16 !important;
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
  }
  body .gt thead .gt-act { z-index: 18 !important; }

  /* Sin fondo sólido, el texto que pasa por debajo de la columna anclada se
     superpone. En escritorio no hace falta porque las celdas ya lo traen. */
  body .gt tbody td.gt-act { background: var(--surface) !important; }
  body .gt thead th.gt-act { background: var(--surface2) !important; }

  /* applyColLayout() fija en línea el minWidth de la tabla con la suma de los
     anchos de escritorio (~1490px). Si se deja, table-layout:fixed reparte ese
     sobrante entre las columnas y anula los anchos reducidos de más abajo.
     Un !important de autor gana a un estilo en línea sin !important.

     CUIDADO: aquí NO sirve `width:auto`. Con table-layout:fixed, una tabla de
     ancho automático se ajusta al contenedor (algoritmo shrink-to-fit), así que
     las 14 columnas se comprimían dentro de los ~390px del teléfono, quedaban
     ilegibles y desaparecía el scroll horizontal. `max-content` es lo que hace
     que la tabla mida lo que suman sus columnas y el panel se desplace. */
  #gt-table {
    min-width: 100% !important;                /* nunca más angosta que el panel */
    width: -webkit-max-content !important;     /* iOS 11-12 */
    width: max-content !important;
  }

  /* Reserva para navegadores sin max-content: se recupera un mínimo amplio
     para que al menos haya scroll horizontal en lugar de columnas aplastadas. */
  @supports not (width: max-content) {
    #gt-table { min-width: 1200px !important; width: auto !important; }
  }

  /* La tabla del Gantt conserva su ancho: .gt-hr son 55px por hora y ese
     número también vive en JS (HR_PX), que posiciona barras y línea de tiempo.

     Y la variable que posiciona las etiquetas de día debe seguir al nuevo
     ancho anclado, no a los 388px del escritorio. */
  #gt-pane-tabla, #gt-pane-gantt { --fixed-w: 132px !important; }

  /* Tipografías de la tabla: 14px es el mínimo cómodo en pantalla pequeña. */
  .gt         { font-size: 13px; }
  .gt-dt-disp { font-size: 12px; }

  /* Los <input> por debajo de 16px hacen que iOS Safari haga zoom al
     enfocarlos y deje la página descuadrada. */
  .gt-dt-inp,
  .fsel, .finp,
  .mod-inp, .mod-sel, .mod-dt,
  input[type="text"], input[type="number"], input[type="search"],
  input[type="date"], input[type="datetime-local"], input[type="time"],
  select, textarea { font-size: 16px !important; }
  .gt-dt-inp { width: 100% !important; max-width: 190px; }

  /* El asa de redimensionar columnas (6px, con el ratón) estorba al tocar. */
  .col-rh { display: none !important; }

  /* Barra de menú: no tenía flex-wrap, así que 6+ botones se salían. */
  .menu-bar {
    flex-wrap: wrap;
    row-gap: 3px;
    padding: 4px 6px;
  }
  .menu-btn { font-size: 12px; padding: 6px 9px; }

  /* Los desplegables se anclaban a left:0 del botón y los submenús a
     left:100%, saliéndose por el borde derecho. En móvil se fijan al ancho
     de la pantalla. */
  .menu-dropdown {
    left: 4px !important;
    right: 4px !important;
    min-width: 0 !important;
    width: auto !important;
    max-height: 70vh;
    overflow-y: auto;
  }
  .menu-sub-dropdown {
    position: static !important;
    left: auto !important;
    top: auto !important;
    min-width: 0 !important;
    width: 100% !important;
    box-shadow: none !important;
    border-left: 2px solid var(--accent) !important;
    border-radius: 0 !important;
    margin: 2px 0 2px 10px;
  }
  .menu-item { padding: 9px 12px; font-size: 13px; }

  /* Leyenda y filtros: textos de 7px y paneles de 160-200px que se salían. */
  .legend    { padding: 6px 8px; gap: 3px 8px; }
  .leg-title { font-size: 9px; }
  .leg-item  { font-size: 11px; }
  .leg-dot   { width: 9px; height: 9px; }

  #filter-bar { padding: 6px 8px !important; row-gap: 6px !important; }
  #filter-bar [style*="position:absolute"] {
    left: 4px !important;
    right: 4px !important;
    min-width: 0 !important;
    width: auto !important;
    max-height: 60vh;
    overflow-y: auto;
  }

  /* El tooltip llegaba a 380px, más ancho que la pantalla. */
  .tooltip-wrap .tooltip-text {
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;
  }

  /* Selector de columnas visibles. */
  .col-picker-panel {
    left: 4px !important;
    right: 4px !important;
    min-width: 0 !important;
    width: auto !important;
    max-height: 65vh;
    overflow-y: auto;
  }

  /* ═══════════════ DASHBOARD ═══════════════ */
  /* Todo el dashboard se genera con estilos en línea desde app.js, incluido
     un <style> propio; de ahí el !important en cada regla. */

  /* Alto: app.js calcula calc(100dvh - 94px) contando una cabecera de
     escritorio. Se recalcula con el alto real y se permite crecer. */
  #tab-dashboard.active { overflow: visible !important; }
  #dashboard-content > div[style*="position:relative"] {
    height: auto !important;
    min-height: calc(100vh  - var(--mob-chrome)) !important;
    min-height: calc(100dvh - var(--mob-chrome)) !important;
  }

  /* El panel de KPIs tenía flex:0 0 380px con min-width:260px al lado de las
     tablas: en 390px de ancho aplastaba todo. Pasa a ir arriba, a lo ancho. */
  #dash-main-layout {
    flex-direction: column !important;
    height: auto !important;
    overflow: visible !important;
  }
  #dash-kpi-panel {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    order: -1;                       /* los indicadores, primero */
    border-left: none !important;
    border-bottom: 1px solid var(--border) !important;
  }
  #dash-left {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Las tres tablas apiladas se quedaban en ~100px cada una. */
  #dash-ov-panel,
  #dash-ip-panel,
  #dash-up-panel {
    flex: 0 0 auto !important;
    min-height: 210px !important;
  }
  #dash-inc-panel { flex: 0 0 auto !important; min-height: 150px !important; }

  /* Divisores de arrastre: solo responden al ratón. */
  #dash-h-resize,
  .dash-resize-h,
  .dash-resize-v { display: none !important; }

  /* Las tarjetas de indicadores en una fila no caben; se permite envolver. */
  #dash-kpi-inner > div { flex-wrap: wrap !important; }
  #dash-kpi-inner > div > div { min-width: 120px !important; }

  /* Los dos botones flotantes del panel se mantienen (no se quita ninguna
     acción), solo se les da un objetivo táctil mayor y se separan del título. */
  #dash-fs-btn, #dash-rep-btn { min-height: 30px; padding: 4px 9px !important; }
  #dash-rep-btn { right: 46px !important; }

  /* Tablas del dashboard: con 7 columnas fijas (729px) en table-layout:fixed
     cada una quedaba en ~40px. Se libera el ancho y se desplaza en
     horizontal, que es preferible a texto ilegible. */
  #dash-ov-panel table,
  #dash-ip-panel table,
  #dash-up-panel table {
    table-layout: auto !important;
    min-width: 620px !important;
  }
  #dash-ov-panel > div,
  #dash-ip-panel > div,
  #dash-up-panel > div {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ═══════════════ ROADMAP ═══════════════ */
  /* El alto lo fija app.js en px sobre el elemento; de ahí el !important.
     El gutter de etiquetas y la escala se ajustan desde JS (isMobileView). */

  /* _renderRoadmap() escribe el alto en línea sobre #tab-roadmap a partir de
     una medición hecha con la cabecera de escritorio. Se recalcula con el alto
     real y se garantiza un mínimo utilizable. */
  #tab-roadmap {
    height: max(360px, calc(100vh  - var(--mob-chrome) - 12px)) !important;
    height: max(360px, calc(100dvh - var(--mob-chrome) - 12px)) !important;
    overflow: hidden !important;
  }
  #rm-body {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin !important;
  }
  #rm-body::-webkit-scrollbar { height: 8px; width: 8px; }
  #rm-body::-webkit-scrollbar-thumb { background: rgba(148,163,184,.5); border-radius: 4px; }

  /* ═══════════════ MODALES ═══════════════ */
  /* Los contenedores ya usan width:min(Npx,9Xvw). Lo que desborda es la
     rejilla interior: columnas de 2, 3 y hasta 4 que no caben en 360px. */

  .modal      { width: 96vw !important; max-height: 90vh !important; max-height: 90dvh !important; }
  .modal-body { padding: 10px 12px 6px !important; }
  .modal-hdr  { padding-left: 12px !important; padding-right: 12px !important; }

  .detail-grid,
  .umgmt-form-grid { grid-template-columns: 1fr !important; }
  .col-map-grid    { grid-template-columns: 1fr !important; }
  .col-map-sel     { max-width: none !important; }

  /* Rejillas declaradas en línea dentro de los modales (index.html y app.js):
     se colapsan a una o dos columnas según cuántas tuvieran. */
  /* OJO CON EL ORDEN: el selector de "1fr 1fr" también casa por subcadena con
     "1fr 1fr 1fr". Va primero para que las rejillas de 2 columnas queden en 1,
     y la regla siguiente reponga 2 columnas en las de 3 y 4. */
  .modal-body [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  .modal-body [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }

  .login-box   { width: min(340px, 92vw) !important; padding: 26px 20px !important; }
  .newproj-popup { padding: 16px !important; }
  .inc-popup, .incpanel-popup { max-height: 90vh !important; max-height: 90dvh !important; }

  /* ═══════════════ CENTRO DE AYUDA ═══════════════ */
  /* En el teléfono el índice lateral no cabe al costado: pasa arriba como una
     tira deslizable, igual que las pestañas principales. */
  .ayuda-overlay { padding: 0; }
  .ayuda-caja    { width: 100vw; height: 100dvh; border-radius: 0; border: none; }

  .ayuda-hdr     { flex-wrap: wrap; row-gap: 9px; padding: 10px 12px; }
  .ayuda-tit-s   { display: none; }
  .ayuda-buscar-wrap { flex: 1 1 100%; order: 3; margin-left: 0; }

  .ayuda-cuerpo  { flex-direction: column; }
  .ayuda-nav {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 7px 8px;
    gap: 6px;
  }
  .ayuda-nav::-webkit-scrollbar { display: none; }
  .ay-nav-btn    { flex: 0 0 auto; white-space: nowrap; padding: 8px 12px; }
  .ay-nav-btn span:last-child { font-size: 12.5px; }

  .ayuda-contenido { padding: 18px 15px 28px; }
  .ay-h2         { font-size: 18px; }
  .ay-p, .ay-lista li, .ay-pasos li { font-size: 14px; }

  /* Las tablas de la ayuda se desplazan en lugar de aplastarse */
  .ay-tabla      { display: block; overflow-x: auto; white-space: nowrap; }
  .ay-tabla td   { white-space: normal; min-width: 150px; }

  /* El lienzo del informe mide 1400px porque de ahí sale el PNG exportado.
     No se toca su tamaño (cambiaría la imagen): se le da scroll al contenedor
     para poder revisarlo desde el teléfono. */
  #rep-canvas { transform-origin: top left; }
  #rep-canvas { max-width: none; }

  /* ═══════════════ OTROS PANELES ═══════════════ */
  /* Fuera del alcance pedido, pero comparten cabecera y se verían rotos. */

  #tab-postgolive.active { flex-direction: column !important; }
  #pgl-left {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex-shrink: 1 !important;
  }
  #st-table { min-width: 0 !important; }

  .turno-task-label { min-width: 130px !important; max-width: 130px !important; }
  .turno-gantt-wrap { min-width: 0 !important; }
  .turno-hr-labels  { padding-left: 138px !important; }
}

/* Teléfonos muy angostos (iPhone SE, Galaxy A0x: 320-374px) */
@media (max-width: 374px) {
  .nav-tab                { font-size: 11px; padding: 8px 9px; }
  body .gt .gt-act        { width: 112px !important; min-width: 112px !important; max-width: 112px !important; }
  #gt-pane-tabla, #gt-pane-gantt { --fixed-w: 112px !important; }
  .gt-pane-tabla          { flex: 0 0 52% !important; }
  #dash-kpi-inner > div > div { min-width: 100px !important; }
  main                    { padding: 5px 5px; }
}

/* Teléfono en horizontal: poca altura. Se recupera espacio vertical. */
@media (max-width: 926px) and (max-height: 480px) and (orientation: landscape) {
  .cdbox, .avbox { display: none !important; }
  header         { padding: 3px 8px; }
  .nav-tab       { padding: 5px 10px; min-height: 30px; }
  .gt-split, .gt-wrap { min-height: 200px; }
  #tab-roadmap        { height: max(240px, calc(100vh - var(--mob-chrome) - 12px)) !important; }
}