/* chrome.css — el chrome compartido de ambi.
   Tanda 1 de la capa mobile. Acá viven SOLO las reglas del chrome que estaban
   byte-identicas en 2 o mas hojas de suite: topbar, overlay ambihub, shell,
   secundario, popups de columna. Lo que difiere entre suites se queda en su
   archivo a proposito — aplanarlo cambiaria el render de escritorio, que es el
   design system canonico (auditoria mobile §6.1).
   Se carga ANTES del CSS propio de cada shell. */

:root{
  /* Breakpoints. Las media queries no consumen var(); estos tokens existen para
     que el JS lea el mismo umbral que el CSS. Solo 640/768/1024/1280/1536 en
     reglas nuevas (DS §16.1). Los ocho breakpoints sobre 768px que ya existen
     son canon de escritorio y no se tocan. */
  --bp-sm:640px; --bp-md:768px; --bp-lg:1024px; --bp-xl:1280px; --bp-2xl:1536px;
  /* Chrome */
  --chrome-topbar-h:48px;
  --tap:44px;                 /* minimo tactil */
  --text-field-size:13px;     /* sube a 16px bajo --bp-md: evita el zoom de iOS */
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

.topbar{height:48px;background:var(--surface);border-bottom:1px solid var(--hairline);display:flex;align-items:center;gap:var(--space-3);padding:0 var(--space-4);position:sticky;top:0;z-index:50}
.topbar-brand{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:15px;font-weight:500;letter-spacing:0.02em;color:var(--ink-1)}
.topbar-brand svg{width:22px;height:22px;flex-shrink:0}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:var(--space-2)}
.topbar-search{flex:1;max-width:420px;position:relative;display:flex;align-items:center}
.topbar-search input{width:100%;height:32px;padding:0 12px 0 32px;border:1px solid var(--hairline);border-radius:var(--radius-md);font-size:13px;background:var(--surface-muted);font-family:var(--font-sans);color:var(--ink-1)}
.topbar-search>svg{position:absolute;left:10px;color:var(--ink-4)}
.hamburger{width:34px;height:34px;border-radius:var(--radius-md);border:1px solid var(--hairline-strong);background:var(--surface);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-3);flex-shrink:0}
.ambihub-menu{position:fixed;top:48px;left:0;bottom:0;width:230px;background:var(--chrome);z-index:61;transform:translateX(-100%);transition:transform 180ms var(--ease-standard);display:flex;flex-direction:column;padding:var(--space-3) var(--space-2)}
.ambihub-scrim{position:fixed;inset:48px 0 0 0;background:rgba(15,23,42,0.35);z-index:60;opacity:0;visibility:hidden;transition:opacity 160ms,visibility 160ms}
.shell{display:flex;align-items:stretch}
.shell .main{flex:1;min-width:0}
.secondary{width:198px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--hairline);position:sticky;top:48px;align-self:flex-start;height:calc(100vh - 48px);overflow-y:auto;padding:var(--space-3) var(--space-2)}
.sec-context{padding:var(--space-1) var(--space-2-5) var(--space-2)}
.sec-context-label{font-size:9.5px;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink-5);font-weight:600}
.sec-context-name{font-size:12.5px;color:var(--ink-2);line-height:1.3;margin-top:2px;font-weight:500}
.sec-divider{height:1px;background:var(--hairline);margin:var(--space-2)}
.sec-group-label{padding:6px 10px 2px;font-size:9.5px;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink-5);font-weight:600;margin-top:var(--space-2)}
.sec-link{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:6px 10px;border-radius:var(--radius-md);color:var(--ink-2);font-size:13px}
.sec-link .c{font-family:var(--font-mono);font-size:10px;color:var(--ink-4)}
.sec-link.active{background:var(--teal-50);color:var(--teal-700);font-weight:500}
.sec-link:hover{background:var(--surface-muted)}
.page-sub{font-size:13.5px;color:var(--ink-3);max-width:80ch;margin-bottom:var(--space-5)}
.col-popup{position:fixed;z-index:80;width:240px;background:#fff;border:1px solid var(--hairline-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-pop);display:none;flex-direction:column;overflow:hidden}
.col-popup.open{display:flex}
.cols-panel{position:fixed;z-index:80;width:268px;background:#fff;border:1px solid var(--hairline-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-pop);display:none;flex-direction:column;overflow:hidden}
.cols-panel.open{display:flex}
.cp-apply{background:var(--teal-700);color:#fff}
.cp-clear{background:transparent;color:var(--ink-4)}
.cp-daterange{padding:8px 10px;display:flex;flex-direction:column;gap:6px}
.cp-dr-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-3)}
.cp-dr-row input{flex:1;min-width:0;height:30px;border:1px solid var(--hairline-strong);border-radius:var(--radius-sm);padding:0 8px;font-size:12.5px;font-family:var(--font-sans)}
.cp-dr-row span{width:42px;flex-shrink:0}
.cp-foot{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;border-top:1px solid var(--hairline)}
.cp-foot button{height:30px;padding:0 12px;border-radius:var(--radius-sm);font-size:12.5px;font-weight:500}
.cp-hint{font-size:11px;color:var(--ink-5);padding:0 10px 8px}
.cp-opt{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--radius-sm);font-size:13px;color:var(--ink-2);cursor:pointer}
.cp-opt input{accent-color:var(--teal-700)}
.cp-opt:hover{background:var(--surface-muted)}
.cp-opts{max-height:210px;overflow-y:auto;padding:6px}
.cp-search{position:relative;padding:10px 10px 8px;border-bottom:1px solid var(--hairline)}
.cp-search input{width:100%;height:32px;padding:0 10px 0 30px;border:1px solid var(--hairline-strong);border-radius:var(--radius-sm);font-size:13px;font-family:var(--font-sans)}
.cp-search svg{position:absolute;left:18px;top:18px;color:var(--ink-4)}
.cp-sortbar{border-top:1px solid var(--hairline);padding-top:2px}
.cp-sortbar:empty{display:none}
.cp-sortrow{display:flex;flex-direction:column;gap:2px;padding:2px 2px 8px}
.cp-sortrow .cp-year{border:0;border-radius:var(--radius-sm);justify-content:flex-start;gap:8px;padding:6px 8px;font-size:13px}
.cp-sortrow .cp-year input{accent-color:var(--teal-700)}
.cp-sortrow .cp-year:has(input:checked){background:var(--teal-50);color:var(--ink-1);font-weight:500}
.cp-sortrow .cp-year:hover{background:var(--surface-muted)}
.cp-year{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border:1px solid var(--hairline-strong);border-radius:var(--radius-full);font-size:12px;color:var(--ink-2);cursor:pointer}
.cp-year input{margin:0}
.cp-years{display:flex;flex-wrap:wrap;gap:6px;padding:4px 10px 8px}
.cp-years-label{padding:4px 10px 2px;font-size:10px;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-4)}

/* ---------------------------------------------------------------------------
   Capa mobile — detras de `mobile_v1` (atributo data-mobile-v1 en <html>).
   Con el flag apagado el render a 390px queda byte-identico al actual, desborde
   incluido, que es lo que exige el spec §3. Nada de esto toca el escritorio:
   todo vive dentro de una media query de 768px.

   Estas tres reglas son las que causan el desborde HORIZONTAL del documento.
   La tabla NO lo causa: sus 1350px scrollean legitimamente dentro de
   .table-scroll. Medido enumerando los descendientes con right>390 fuera de
   contenedores scrolleables (auditoria mobile §6.7):
     /seia/pertinencias  body.scrollWidth 488
     /seia/anexos        body.scrollWidth 502
   --------------------------------------------------------------------------- */
@media (max-width:768px){
  /* 1. El buscador de la toolbar tiene min-width:240px y no puede encoger
        dentro de una caja de contenido de 144px. Es el culpable principal. */
  html[data-mobile-v1] .searchbox{min-width:0}
  /* 2. El boton de ayuda no encoge (flex-shrink:0) y mide 232px. */
  html[data-mobile-v1] .doc-help-btn{flex-shrink:1;min-width:0}
  /* 3. El pie de paginacion no envuelve: su grupo de botones sale por la
        derecha. `space-between` en una sola linea es lo que lo empuja. */
  html[data-mobile-v1] .pager{flex-wrap:wrap;gap:var(--space-2)}
  html[data-mobile-v1] .pager .pg{flex-wrap:wrap}

  /* 4. "Agregar columnas" compone una tabla ancha: en cards no tiene destino
        visual y ademas empuja 171px fuera de pantalla. Es la decision C del
        spec (funciones desktop-only, DS §16.7), aplicada acá porque hasta que
        no se oculta el documento sigue desbordando. */
  html[data-mobile-v1] .add-cols{display:none}

  /* 5. El boton de ayuda no encogia con flex-shrink solo: su fila no envuelve,
        asi que el texto interno fija el ancho intrinseco. */
  html[data-mobile-v1] .doc-help-btn{max-width:100%}
  /* El boton ya cabia, pero su texto interno es white-space:nowrap y se salia
     por fuera del boton (overflow visible). El ancho intrinseco lo fijaba el
     texto, no la caja. */
  html[data-mobile-v1] .dh-title,
  html[data-mobile-v1] .dh-sub{white-space:normal}
}

/* ---------------------------------------------------------------------------
   TANDA 2 — el overlay ambihub se comporta como bottom sheet bajo --bp-md.

   No es un componente nuevo: es `.ambihub-menu`, la fuente unica que ya incluyen
   los 10 shells, re-maquetada. La apertura sigue siendo `body.ambihub-open` que
   alterna `#hbBtn`. Construir un `.sheet` aparte habria dado un segundo menu que
   diverge del canonico en la primera iteracion apurada.

   Todo cuelga de html[data-mobile-v1]: con el flag apagado esto no existe.
   --------------------------------------------------------------------------- */

/* En escritorio el nivel de categoria vive en `.secondary`; dentro del overlay
   estorbaria. El placeholder y su rotulo solo aparecen cuando el overlay es
   sheet, y los puebla chrome.js clonando el secundario real. */
.ah-sub,.ah-sub-only{display:none}

@media (max-width:768px){
  /* El secundario de 198-230px deja 144px de caja de contenido a 390px. Se
     oculta, PERO no sin reemplazo: su contenido es lo que chrome.js clona
     dentro del sheet. Ocultar sin reemplazo es el defecto que hoy tiene el
     Centro Documental y que esta tanda viene a corregir, no a propagar. */
  html[data-mobile-v1] .secondary{display:none}

  html[data-mobile-v1] .ah-sub:not([hidden]),
  html[data-mobile-v1] .ah-sub-only:not([hidden]){display:block}

  /* El contenido clonado conserva sus clases (.sec-context, .sec-group-label,
     .sec-link), que estan pintadas para fondo claro. Dentro del sheet navy hay
     que revestirlas. Se acotan a .ah-sub para no tocar el secundario real. */
  html[data-mobile-v1] .ah-sub .sec-context{padding:2px 14px 10px;display:block}
  html[data-mobile-v1] .ah-sub .sec-context-label{color:rgba(255,255,255,0.45)}
  html[data-mobile-v1] .ah-sub .sec-context-name{color:rgba(255,255,255,0.80)}
  html[data-mobile-v1] .ah-sub .sec-divider{background:rgba(255,255,255,0.12)}
  html[data-mobile-v1] .ah-sub .sec-group-label,
  html[data-mobile-v1] .ah-sub-label{padding:10px 14px 4px;font-size:10px;font-weight:600;
    text-transform:uppercase;letter-spacing:0.1em;color:rgba(255,255,255,0.45);margin:0}
  html[data-mobile-v1] .ah-sub .sec-link{min-height:var(--tap);padding:0 14px;
    color:rgba(255,255,255,0.86);font-size:14px;border-radius:var(--radius-md)}
  html[data-mobile-v1] .ah-sub .sec-link .c{color:rgba(255,255,255,0.45);
    font-family:var(--font-mono);font-size:10.5px}
  html[data-mobile-v1] .ah-sub .sec-link.active{background:rgba(45,212,191,0.12);
    color:var(--teal-300);font-weight:500}
  /* Las otras cuatro clases que los secundarios reales emiten. Estan pintadas
     para fondo claro y el clon las trae tal cual sobre el navy del sheet: la
     miga de "volver al padre" quedaba en ~1.5:1, o sea invisible, y es la
     salida hacia arriba. Se revisten con los mismos tokens que las de arriba. */
  html[data-mobile-v1] .ah-sub .sec-back{color:rgba(255,255,255,0.62);min-height:var(--tap);
    display:flex;align-items:center;padding:0 14px}
  html[data-mobile-v1] .ah-sub .sec-crumb-label{color:rgba(255,255,255,0.45)}
  html[data-mobile-v1] .ah-sub .sec-crumb-name{color:rgba(255,255,255,0.80)}
  html[data-mobile-v1] .ah-sub .sec-children{border-left-color:rgba(255,255,255,0.14)}

  /* El scrim tapa TODO, topbar incluida: mientras el sheet esta abierto, el
     sheet es el contexto. En escritorio arranca bajo la topbar (inset:48px). */
  html[data-mobile-v1] .ambihub-scrim{inset:0}

  html[data-mobile-v1] .ambihub-menu{
    top:auto; left:0; right:0; bottom:0; width:100%;
    /* dvh y no vh: con vh, iOS calcula sobre el viewport grande (barra de URL
       retraida) y el pie del sheet queda debajo de la barra. */
    max-height:85dvh;
    border-radius:16px 16px 0 0;
    transform:translateY(100%);
    overflow-y:auto;
    /* Sin esto, al llegar al final del sheet el scroll se propaga al documento
       de atras y la pagina se mueve debajo del sheet. */
    overscroll-behavior:contain;
    /* La barra de gestos del iPhone ocupa 34px: sin este padding el ultimo item
       del menu queda debajo de ella y no se puede tocar. */
    padding:var(--space-4) var(--space-2) calc(var(--space-4) + var(--safe-bottom));
  }
  html[data-mobile-v1] body.ambihub-open .ambihub-menu{transform:translateY(0)}

  /* Grabber: la afordancia de que esto se arrastra. */
  html[data-mobile-v1] .ambihub-menu::before{
    content:"";display:block;width:36px;height:4px;border-radius:2px;
    background:rgba(255,255,255,0.28);margin:0 auto var(--space-3);
  }

  /* Touch targets del menu principal. El icono sigue midiendo 17px; lo que
     crece es el area, no el dibujo. */
  html[data-mobile-v1] .ah-item{min-height:var(--tap)}
  html[data-mobile-v1] .hamburger{width:var(--tap);height:var(--tap)}

  /* Campos de auth: 13,5px gatilla el zoom automatico de Safari iOS y deja la
     pagina descuadrada con la topbar fuera de pantalla — sobre el embudo de
     registro completo. 16px es el umbral exacto. */
  html[data-mobile-v1] .auth-page .auth-field input,
  html[data-mobile-v1] .auth-page .auth-field select,
  html[data-mobile-v1] .auth-field input,
  html[data-mobile-v1] .auth-field select{font-size:16px}
}

@media (max-width:768px){
  /* Un solo CTA en la topbar. Hoy conviven "Iniciar sesión" y "Empezar gratis"
     y entre los dos consumen 159-188px de los 390 disponibles — es la mitad de
     por que el campo de busqueda quedaba en 46px cuando se renderizaba. Queda
     "Iniciar sesión"; el de registro vive en el contenido de la landing y en los
     estados vacios, no en el chrome (DS §16.3).
     Acotado a .topbar-right para no tocar los CTA de las paginas. */
  html[data-mobile-v1] .topbar-right .btn-primary{display:none}
  /* El que queda pasa a area tactil completa sin cambiar el dibujo. */
  html[data-mobile-v1] .topbar-right .btn{min-height:var(--tap);padding:0 14px}
}

/* NOTA sobre `.topbar-search` (auditoria §2.2). El spec pedia subir su colapso
   desde omnibox.css a chrome.css para que dejara de depender del flag
   `omnibox_topbar`. Medido a 390px en los 5 shells que tienen topbar: el campo
   ya esta en display:none y el boton lupa presente en los tres que lo
   renderizan (/seia/*, /documentacion, /), y auth y legal no renderizan
   `.topbar-search` en absoluto. Con `omnibox_topbar` encendido para todos en
   produccion, duplicar la regla acá no cambiaria un pixel para nadie y dejaria
   dos fuentes para el mismo colapso. Se deja donde esta, a proposito. */

/* ---------------------------------------------------------------------------
   TANDA 3 — la fila de tabla colapsa a card, y los embudos se alcanzan desde
   un sheet en vez del encabezado (que bajo --bp-md ya no se ve).

   Nada de esto es un motor nuevo. La card es la MISMA fila: el partial emite
   una sola estructura y el rol de cada celda lo declara su columna (`c.m` en
   seia_suite._col), que aca se lee como clase `.m-*`. El sheet de filtros es un
   LANZADOR: clona los controles del encabezado y les reenvia el click, asi que
   filtrar desde el telefono recorre exactamente el mismo codigo —y produce
   exactamente la misma URL— que filtrar desde el encabezado en escritorio.
--------------------------------------------------------------------------- */
@media (max-width:768px){
  /* El encabezado desaparece: 8-14 columnas no caben en 390px de ninguna
     manera, y sus embudos se reabren desde el sheet. Sigue en el DOM a
     proposito — es la fuente que el sheet clona y a la que reenvia el click. */
  html[data-mobile-v1] .ntable[data-cards] .ntable-head{display:none}
  /* La casilla de seleccion: el bulk bar es una accion de escritorio (marcar 20
     filas con el pulgar no es una interaccion real) y su celda de 26px se comia
     el ancho de la identidad. `display:none` la saca del foco, del click, del
     arbol de accesibilidad y del submit — sacarla del DOM, como pedia el
     criterio de aceptacion, obligaria al servidor a conocer el viewport, que es
     justo lo que la misma seccion del spec prohibe. */
  html[data-mobile-v1] [data-cards] .ntable-row>div:first-child{display:none}

  /* El scroller horizontal deja de tener sentido cuando no hay tabla ancha: sin
     esto la card quedaria dentro de una caja con `overflow-x` y su propio
     borde, duplicando el borde de cada card. */
  html[data-mobile-v1] .table-scroll:has(.ntable[data-cards]){
    overflow-x:visible;border:0;background:transparent;border-radius:0
  }
  html[data-mobile-v1] .ntable[data-cards]{display:flex;flex-direction:column;gap:8px}

  /* `!important` no es negociable aca: `grid-template-columns` y `min-width`
     vienen en el atributo `style` de cada fila (los calcula build_grid con los
     anchos de las columnas), y un estilo inline gana a cualquier media query. */
  html[data-mobile-v1] [data-cards] .ntable-row{
    grid-template-columns:minmax(0,1fr) auto auto !important;
    min-width:0 !important;
    gap:3px var(--space-2);
    align-items:center;
    padding:11px var(--space-3);
    border:1px solid var(--hairline);
    border-radius:var(--radius-md);
    background:#fff;
  }
  html[data-mobile-v1] [data-cards] .ntable-row:last-child{border-bottom:1px solid var(--hairline)}

  /* Una celda solo entra a la card si su columna le dio un rol. La card es un
     subconjunto elegido (identidad, estado, dos contextos, fecha), no la tabla
     apretada: un buscador de 14 columnas no puede volcarlas todas. */
  html[data-mobile-v1] [data-cards] .ntable-row>*{display:none}
  html[data-mobile-v1] [data-cards] .ntable-row>.m-id,
  html[data-mobile-v1] [data-cards] .ntable-row>.m-estado,
  html[data-mobile-v1] [data-cards] .ntable-row>.m-chip,
  html[data-mobile-v1] [data-cards] .ntable-row>.m-ctx1,
  html[data-mobile-v1] [data-cards] .ntable-row>.m-ctx2,
  html[data-mobile-v1] [data-cards] .ntable-row>.m-fecha{display:block}
  /* Contexto vacio: se omite el campo entero. Un rotulo con guion ocupa una
     linea para decir que no hay dato. Va DESPUES de la regla que enciende los
     roles porque tiene su misma especificidad. */
  html[data-mobile-v1] [data-cards] .ntable-row>.m-empty{display:none}

  /* Fila 1 — identidad. NO se trunca: un nombre de proyecto cortado a la mitad
     deja de identificar al proyecto, y la card entera existe para identificarlo.
     Cinco lineas es aceptable; una card que miente, no. El segundo selector
     alcanza el `namesub` de titulares, donde el nombre es un hijo. */
  html[data-mobile-v1] [data-cards] .ntable-row>.m-id,
  html[data-mobile-v1] [data-cards] .ntable-row>.m-id .nt-name{
    grid-row:1;grid-column:1/-1;
    white-space:normal;overflow:visible;text-overflow:clip;
    font-size:14px;line-height:1.35;color:var(--ink-1);font-weight:500
  }
  html[data-mobile-v1] [data-cards] .ntable-row>.m-id .nt-name{grid-row:auto;grid-column:auto}

  /* Fila 2 — estado · chip · fecha. `.m-chip` es una posicion, no un tipo de
     dato: lleva el chip DIA/EIA en proyectos y recursos, y la multa en UTA en
     sanciones firmes. */
  html[data-mobile-v1] [data-cards] .ntable-row>.m-estado{grid-row:2;grid-column:1;min-width:0}
  html[data-mobile-v1] [data-cards] .ntable-row>.m-chip{grid-row:2;grid-column:2}
  html[data-mobile-v1] [data-cards] .ntable-row>.m-fecha{
    grid-row:2;grid-column:3;text-align:right;
    font-family:var(--font-mono);font-size:11px;color:var(--ink-4);
    font-feature-settings:"tnum" 1
  }

  /* Fila 3 — los dos contextos. Aca SI se trunca: son campos de apoyo, y el
     dato completo vive en la ficha que la card abre. */
  html[data-mobile-v1] [data-cards] .ntable-row>.m-ctx1{
    grid-row:3;grid-column:1;min-width:0;
    font-size:12px;color:var(--ink-3);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap
  }
  html[data-mobile-v1] [data-cards] .ntable-row>.m-ctx2{
    grid-row:3;grid-column:2/-1;text-align:right;
    font-size:12px;color:var(--ink-4);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap
  }
  /* El chip de estado envuelve dentro de su fila en vez de empujar la card. */
  html[data-mobile-v1] [data-cards] .ntable-row>.m-estado .chip-status{
    max-width:100%;white-space:normal;text-align:left
  }
}

/* --- entrada a los filtros: el boton de la toolbar --------------------------
   Lo inyecta chrome.js, no las plantillas. Son 8 toolbars distintas y el
   control existe por una unica razon —que el encabezado de la tabla no se ve—,
   asi que se deriva del encabezado que reemplaza en vez de repetirse ocho veces
   con `display:none` en escritorio. */
.m-filtros{display:none}
@media (max-width:768px){
  html[data-mobile-v1] .m-filtros{
    display:inline-flex;align-items:center;gap:6px;
    min-height:var(--tap);padding:0 14px;
    border:1px solid var(--hairline-strong);border-radius:var(--radius-md);
    background:#fff;color:var(--ink-2);font-size:13px;font-weight:500
  }
  html[data-mobile-v1] .m-filtros .m-filtros-n{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:18px;height:18px;padding:0 5px;border-radius:9px;
    background:var(--teal-700);color:#fff;
    font-family:var(--font-mono);font-size:10px
  }
  html[data-mobile-v1] .m-filtros .m-filtros-n:empty{display:none}

  /* La toolbar del listado, reordenada. La tanda 1 le quito el min-width:240px
     al buscador para matar el desborde, y en 390px eso lo dejo en ~100px: una
     caja con una lupa adentro y sin sitio para escribir, encima montada sobre
     el conteo. Con la fila propia vuelve a ser un campo de busqueda. */
  html[data-mobile-v1] .toolbar .searchbox{flex:1 1 100%;min-width:0}
  html[data-mobile-v1] .toolbar .searchbox input{font-size:16px}
  /* "Como filtrar" explica que "los controles viven en el encabezado de cada
     columna" — y bajo --bp-md el encabezado no se ve. Es un texto que en el
     telefono seria falso, asi que el boton no aparece: la entrada a los filtros
     es el boton de al lado, que dice lo que hace. `:not(.abx-bell)` porque la
     campana de alertas reusa la misma clase y esa si sigue valiendo. */
  html[data-mobile-v1] .toolbar .filt-help-btn:not(.abx-bell){display:none}

  /* El sheet de columnas y el scrim compartido.
     El guard de `[hidden]` no sobra: la regla de abajo declara `display:flex`
     con especificidad (0,2,1) y le gana a la del navegador para `[hidden]`
     (0,1,0), asi que sin esto el sheet nacería abierto en cada listado. */
  html[data-mobile-v1] .m-fsheet[hidden],
  html[data-mobile-v1] .m-fscrim[hidden]{display:none}
  html[data-mobile-v1] .m-fscrim{
    position:fixed;inset:0;z-index:90;background:rgba(15,23,42,0.38)
  }
  html[data-mobile-v1] .m-fsheet{
    position:fixed;left:0;right:0;bottom:0;z-index:96;
    max-height:80dvh;display:flex;flex-direction:column;
    background:#fff;border-radius:16px 16px 0 0;
    box-shadow:var(--shadow-pop);
    padding-bottom:var(--safe-bottom)
  }
  html[data-mobile-v1] .m-fsheet-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px var(--space-4) 10px;border-bottom:1px solid var(--hairline);
    font-size:14px;font-weight:600;color:var(--ink-1)
  }
  html[data-mobile-v1] .m-fsheet-x{
    width:var(--tap);height:var(--tap);margin:-11px -12px -11px 0;
    display:inline-flex;align-items:center;justify-content:center;color:var(--ink-4)
  }
  html[data-mobile-v1] .m-fsheet-list{
    overflow-y:auto;overscroll-behavior:contain;padding:6px var(--space-2)
  }
  html[data-mobile-v1] .m-fs-item{
    display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);
    width:100%;min-height:var(--tap);padding:0 12px;
    border-radius:var(--radius-md);
    font-size:14px;color:var(--ink-2);text-align:left
  }
  html[data-mobile-v1] .m-fs-item .m-fs-tag{
    font-size:11px;color:var(--ink-5);text-transform:uppercase;letter-spacing:0.05em
  }
  html[data-mobile-v1] .m-fs-item.on{background:var(--teal-50);color:var(--teal-700);font-weight:500}
  html[data-mobile-v1] .m-fs-item.on .m-fs-tag{color:var(--teal-700)}

  /* --- el embudo canonico, tumbado al pie ---
     Es el MISMO #colPopup que usa el escritorio, con el mismo JS: aca solo
     cambia de forma. `!important` porque positionBelow() le escribe left/top
     inline en cada apertura y en cada scroll. */
  html[data-mobile-v1] .col-popup.open{
    left:0 !important;right:0 !important;
    top:auto !important;bottom:0 !important;
    width:100% !important;z-index:96;
    max-height:80dvh;
    border-radius:16px 16px 0 0;
    padding-bottom:var(--safe-bottom)
  }
  html[data-mobile-v1] .col-popup.open .cp-opts{max-height:none;flex:1 1 auto}
  /* 16px: bajo ese tamano Safari de iOS hace zoom al enfocar el campo y deja la
     pagina desplazada a la derecha, con el sheet a medio salir de pantalla. */
  html[data-mobile-v1] .col-popup.open .cp-search input,
  html[data-mobile-v1] .col-popup.open .cp-dr-row input{font-size:16px;height:40px}
  html[data-mobile-v1] .col-popup.open .cp-search svg{top:22px}
  html[data-mobile-v1] .col-popup.open .cp-opt,
  html[data-mobile-v1] .col-popup.open .cp-sortrow .cp-year{min-height:var(--tap)}
  html[data-mobile-v1] .col-popup.open .cp-foot{padding:10px var(--space-3)}
  html[data-mobile-v1] .col-popup.open .cp-foot button{height:var(--tap);font-size:14px}
  html[data-mobile-v1] .col-popup.open .cp-foot .cp-apply{flex:1 1 auto}
}

/* ---------------------------------------------------------------------------
   TANDA 4 — drawers a pantalla completa, fichas y barrido tactil.

   Los drawers NO se reimplementan: siguen siendo `.anx-drawer`, `.exp-drawer` y
   `.al-drawer`, con su mismo JS y su mismo boton de cerrar. Bajo --bp-md ese
   panel lateral de 84vw deja de tener sentido —el "84vw" son 328px sobre 390,
   con 62px de pagina inerte al lado— asi que ocupa la pantalla. El boton de
   volver es EL MISMO boton de cerrar de siempre, agrandado y movido a la
   izquierda: no hay un segundo control que pueda divergir del canonico.
   --------------------------------------------------------------------------- */
@media (max-width:768px){
  html[data-mobile-v1] .anx-drawer,
  html[data-mobile-v1] .exp-drawer,
  html[data-mobile-v1] .mi-espacio .al-drawer{
    top:0;width:100%;max-width:none;
    box-shadow:none;border-left:0
  }
  /* Con el drawer a pantalla completa el velo queda 100% tapado: cobrarlo seria
     pintar y componer una capa que nadie ve. Y su unica funcion —cerrar tocando
     afuera— ya no existe: no hay "afuera". */
  html[data-mobile-v1] .anx-scrim,
  html[data-mobile-v1] .exp-scrim,
  html[data-mobile-v1] .mi-espacio .al-drawer-scrim{display:none}

  /* El boton de volver. `order:-1` lo lleva al principio del header sin tocar
     el HTML de las seis plantillas que lo declaran; el icono y el rotulo los
     cambia chrome.js, que es donde se puede leer el estado del flag. */
  html[data-mobile-v1] .anx-close,
  html[data-mobile-v1] .exp-close,
  html[data-mobile-v1] .mi-espacio .dw-close{
    order:-1;width:var(--tap);height:var(--tap);
    margin:0 var(--space-2) 0 calc(var(--space-2) * -1);border-color:transparent
  }
  /* `.exp-head` alinea arriba (el subtitulo envuelve): el boton se centra con
     el titulo igual que en el header de anexos. */
  html[data-mobile-v1] .exp-head{align-items:center}

  /* El final del drawer llega a bottom:0, o sea debajo de la barra de gestos. */
  html[data-mobile-v1] .anx-body,
  html[data-mobile-v1] .exp-body,
  html[data-mobile-v1] .mi-espacio .dw-body{
    padding-bottom:calc(var(--space-5) + var(--safe-bottom))
  }
  /* Lo mismo el toast de guardar/compartir/alerta, que NO se puede esconder:
     es la unica confirmacion de que la accion ocurrio. */
  html[data-mobile-v1] .sa-toast-wrap{bottom:calc(24px + var(--safe-bottom))}

  /* --- fichas: las tablas anidadas scrollean, no empujan la pagina ----------
     En los listados la tabla vive dentro de `.table-scroll`, que absorbe sus
     1350px. En las fichas no: la `.ntable` cuelga directo de la seccion, asi
     que sus columnas fijas desbordaban el DOCUMENTO — medido, la ficha de UF
     daba scrollWidth 824 sobre 390. El scroller va en la propia `.ntable`
     cuando no tiene uno encima. */
  html[data-mobile-v1] :not(.table-scroll) > .ntable:not([data-cards]){
    overflow-x:auto;overscroll-behavior-x:contain
  }
  /* Sin esto la fila mide lo que el contenedor y sus celdas se salen de la caja:
     el fondo y el borde inferior se cortan a 390 mientras el texto sigue. */
  html[data-mobile-v1] :not(.table-scroll) > .ntable:not([data-cards]) .ntable-head,
  html[data-mobile-v1] :not(.table-scroll) > .ntable:not([data-cards]) .ntable-row{
    min-width:max-content
  }
  /* Y el encabezado deja de ser sticky, igual que hace `.table-scroll .ntable-head`
     en seia-suite.css. No es cosmetico: al volverse scroller, la `.ntable` pasa a
     ser el bloque contenedor del sticky, que se pega arriba del scroll y queda
     FLOTANDO sobre la primera fila. Se veia en la captura y no en el arnes: ni el
     scrollWidth ni los objetivos tactiles cambian cuando un encabezado tapa una
     fila. Son las mismas tres declaraciones que ya aplica la suite; el patron
     existia, faltaba alcanzarlo desde el scroller nuevo. */
  html[data-mobile-v1] :not(.table-scroll) > .ntable:not([data-cards]) .ntable-head{
    position:static;top:auto;z-index:auto;box-shadow:none
  }

  /* --- anclajes inferiores (decision C) ------------------------------------
     La barra de scroll flotante duplica un gesto que en touch ya existe —se
     arrastra la tabla— y la barra de seleccion masiva no tiene con que
     trabajar. `!important` en la primera porque seia-suite.js le escribe
     `display` inline al medir. */
  html[data-mobile-v1] .hscroll-float{display:none !important}
  html[data-mobile-v1] body.bulk-active .bulk-bar{display:none}
  /* Y si la barra de seleccion no aparece, la casilla no lleva a ningun lado.
     En los listados con card ya estaba oculta con su columna; esta regla cubre
     las tablas que siguen siendo tabla (Centro Documental, fichas). */
  html[data-mobile-v1] .nt-check{display:none}

  /* --- barrido tactil ------------------------------------------------------
     44px es el minimo de la DS §16.9 y de la HIG. Se aplica subiendo la altura
     real, no extendiendo con `::after`: las filas de chips envuelven, y dos
     areas invisibles solapadas se roban el toque entre ellas — el de arriba en
     el DOM gana y el usuario toca un chip y se le activa el vecino. */
  html[data-mobile-v1] .topbar-brand{display:inline-flex;align-items:center;min-height:var(--tap)}
  html[data-mobile-v1] .omni-chip,
  html[data-mobile-v1] .scope-chip,
  html[data-mobile-v1] .qf-chip,
  html[data-mobile-v1] .omni-go,
  html[data-mobile-v1] .ea-btn{min-height:var(--tap)}
  /* Campos de busqueda: 38-40px de alto y, en el Centro Documental, 15px de
     texto — que en iOS gatilla el zoom al enfocar. */
  html[data-mobile-v1] .searchbox input,
  html[data-mobile-v1] .hub-search-box input,
  html[data-mobile-v1] .cmd-search input,
  html[data-mobile-v1] .auth-field input,
  html[data-mobile-v1] .auth-field select{min-height:var(--tap);font-size:16px}
  /* La campana de alertas comparte clase con "Como filtrar" (oculto arriba) y
     es la accion principal de la toolbar en los buscadores. */
  html[data-mobile-v1] .toolbar .filt-help-btn{min-height:var(--tap)}
  /* Los controles del encabezado de las tablas que NO colapsan a card. */
  html[data-mobile-v1] .col-filter,
  html[data-mobile-v1] .col-sort,
  html[data-mobile-v1] .js-col{min-height:var(--tap)}
  html[data-mobile-v1] :not(.table-scroll) > .ntable:not([data-cards]) .ntable-row{
    min-height:var(--tap)
  }
  /* Enlaces que son controles aunque parezcan texto: migas, "ver todo",
     "crear cuenta". WCAG 2.5.5 exceptua el enlace DENTRO de un parrafo; estos
     estan solos en su linea y son el unico camino a otra pantalla. */
  html[data-mobile-v1] .auth-link,
  html[data-mobile-v1] .eyebrow-back,
  html[data-mobile-v1] .es-more,
  html[data-mobile-v1] .facet-band-head a,
  html[data-mobile-v1] .lp-foot-links a,
  html[data-mobile-v1] button.tl-head{
    display:inline-flex;align-items:center;min-height:var(--tap)
  }
  /* La raiz de la miga —"SEIA", "SNIFA"— mide 29-37px de ancho: es el rotulo
     mas corto del sitio y es la salida hacia atras. El area se agranda con
     padding, sin margen negativo que lo compense: descontarlo montaba cada
     enlace sobre el siguiente y el toque cerca del borde derecho se lo llevaba
     el vecino, que se pinta despues. La miga queda un poco mas separada en el
     telefono, que es exactamente lo que hace falta ahi. */
  html[data-mobile-v1] .breadcrumb a{padding:14px 10px}
  /* El unico desborde que quedaba a 360px, y esta en la pagina de entrada: los
     dos hijos de `.lp-feat` miden 342 dentro de una pista de 320. Es el
     `min-width:auto` que traen por defecto los items de grid — no encogen bajo
     el ancho minimo de su contenido. A 390px no se nota; a 360 se lleva la
     pagina entera 2px a la derecha. */
  html[data-mobile-v1] .lp-feat>*{min-width:0}

  /* El omnibox de la landing y de /buscar comparte fila con el boton "Buscar".
     A 390px el campo queda en 211px, pero a 360 baja a 181 — bajo los 200 que
     hacen falta para escribir una consulta y ver lo que uno escribio. La fila
     envuelve: el campo se lleva el ancho completo y el boton pasa abajo. */
  html[data-mobile-v1] .omni-box{flex-wrap:wrap}
  html[data-mobile-v1] .omni-input{flex:1 1 140px}
  html[data-mobile-v1] .omni-go{flex:1 1 100%}
  /* La casilla "recordarme" de auth mide 15px: se agranda el cuadro y se hace
     del rotulo parte del blanco tactil. */
  html[data-mobile-v1] .auth-check{min-height:var(--tap);align-items:center}
  html[data-mobile-v1] .auth-check input[type=checkbox]{width:20px;height:20px}
}

/* --- afordancias que hoy solo existen con el mouse -------------------------
   Seis controles de Mi Espacio se revelan con `:hover` y nada mas. En un
   telefono no hay hover: tres de ellos son INALCANZABLES (crear la primera nota
   de un item, quitar un tag de una coleccion, quitar un tag de un item) y tres
   quedan tocables a ciegas con `opacity:0`.

   La condicion no es el ancho sino el puntero — una tablet de 900px tampoco
   tiene hover — asi que se consulta `hover:none` en vez de --bp-md. Sigue
   detras del flag: con `mobile_v1` apagado esta capa no existe. */
@media (hover:none){
  html[data-mobile-v1] .mi-espacio .row-acts{display:inline-flex}
  html[data-mobile-v1] .mi-espacio .cc-del{opacity:1}
  html[data-mobile-v1] .mi-espacio .tg-x{display:inline}
  html[data-mobile-v1] .mi-espacio .ctags .tg .tg-x{visibility:visible}
  html[data-mobile-v1] .mi-espacio .tag-add-cell{opacity:1}
  html[data-mobile-v1] .mi-espacio .hit-save{opacity:1}

  /* Revelarlas es la mitad del trabajo: medidas en pantalla salian a 24-28px,
     visibles y sin poder tocarse. Las que son un boton propio suben a 44. */
  html[data-mobile-v1] .mi-espacio .row-act,
  html[data-mobile-v1] .mi-espacio .tag-add-cell,
  html[data-mobile-v1] .mi-espacio .cc-del,
  html[data-mobile-v1] .mi-espacio .hit-save{
    min-width:var(--tap);min-height:var(--tap);
    display:inline-flex;align-items:center;justify-content:center
  }
  /* La cruz del tag es la EXCEPCION, y a proposito: vive dentro de un chip de
     24px de alto, y llevarla a 44 obliga a agrandar el chip —o a montarle un
     area invisible sobre las filas vecinas, que se roba el toque—. Se queda en
     los 24x24 de WCAG 2.5.8 AA, que es el minimo para un destino dentro de un
     control compuesto. El chip que la contiene si sube a 44 de alto tactil. */
  html[data-mobile-v1] .mi-espacio .tg-x{
    min-width:24px;min-height:24px;
    display:inline-flex;align-items:center;justify-content:center
  }
  html[data-mobile-v1] .mi-espacio .tags .tg,
  html[data-mobile-v1] .mi-espacio .ctags .tg{min-height:var(--tap)}
}

@media (max-width:768px){
  /* La ficha de coleccion desbordaba a 794px sobre 390: `.cd-grid` ya colapsa a
     una columna en 1000px, pero sus hijos traen el `min-width:auto` de los items
     de grid y no encogen bajo el ancho minimo de su contenido. Mismo caso que
     `.lp-feat` en la landing. */
  html[data-mobile-v1] .mi-espacio .cd-grid>*{min-width:0}
}