@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:local("IBM Plex Sans"),url(/estatico/IBMPlexSans-Regular-Latin1.woff2) format("woff2");unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122,U+2212,U+FB01-FB02}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:local("IBM Plex Sans"),url(/estatico/IBMPlexSans-SemiBold-Latin1.woff2) format("woff2");unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122,U+2212,U+FB01-FB02}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:700;font-display:swap;src:local("IBM Plex Sans"),url(/estatico/IBMPlexSans-Bold-Latin1.woff2) format("woff2");unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122,U+2212,U+FB01-FB02}
@font-face{font-family:"IBM Plex Serif";font-style:normal;font-weight:600;font-display:swap;src:local("IBM Plex Serif"),url(/estatico/IBMPlexSerif-SemiBold-Latin1.woff2) format("woff2");unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122,U+2212,U+FB01-FB02}
@font-face{font-family:"IBM Plex Serif";font-style:normal;font-weight:700;font-display:swap;src:local("IBM Plex Serif"),url(/estatico/IBMPlexSerif-Bold-Latin1.woff2) format("woff2");unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122,U+2212,U+FB01-FB02}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:local("IBM Plex Mono"),url(/estatico/IBMPlexMono-Regular-Latin1.woff2) format("woff2");unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122,U+2212,U+FB01-FB02}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:700;font-display:swap;src:local("IBM Plex Mono"),url(/estatico/IBMPlexMono-Bold-Latin1.woff2) format("woff2");unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122,U+2212,U+FB01-FB02}

/* Tokens de la guía de estilo (DocQMS UX Style Guide v2.0): papel cálido, azul
   profundo, sin sombras, radios chicos. Las familias son las IBM Plex de la guía,
   servidas por el panel (arriba): nada se pide a un CDN. */
:root{
  /* Lo que sube, baja o es nuevo en un mercado (ADR-248): no es un semáforo, y una parte que baja no es un incumplimiento. */
  --sube:#2c5480;--baja:#8a5a2b;--nuevo:#5b4b8a;--parejo:#5f6670;
  --bg:#f8f6f2; --surface:#fff; --borde:#e8e4dc; --borde-md:#d8d3ca;
  --ink:#1a1714; --ink2:#635e58; --ink3:#a09a93; --acento:#1e3a5c;
  /* El borde de un control lleva significado aunque no tenga texto: 3,03:1
     sobre blanco, el mínimo de WCAG para eso. --borde-md es decorativo. */
  --borde-control:#97948d;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  /* Los estados, con las ternas de la guía (texto, fondo, borde): un color por
     estado, y el punto del semáforo toma el tono de su chip (StatusBadge). */
  --rojo:#8b2318; --rojo-fondo:#fbf0ee; --rojo-borde:#d8aea8;
  --ambar:#6a4a00; --ambar-fondo:#fdf8ec; --ambar-borde:#ddd09a;
  /* El «revisar» de una tarjeta: el ámbar urgente de la guía (ADR-011), que el chip pinta con el rojo. */
  --serio:#7a3a00;
  --verde:#1a5c2f; --verde-fondo:#edf6ef; --verde-borde:#b4d8ba;
  /* La demora de ANMAT tiene su tono (ADR-052): azul, no el rojo de la empresa. */
  --organismo:#2c4a6b; --organismo-fondo:#eef3f8; --organismo-borde:#a9bed3;
  /* Los puntos: un indicador sin texto pide 3:1 sobre blanco. El ámbar del punto
     es más claro que el del texto (3,65:1): con #6a4a00, en 10 px, no se
     distingue del rojo. El de la demora de ANMAT, 4,62:1 y 3,37:1 el claro. */
  --ambar-punto:#b97800; --organismo-punto:#52789f; --organismo-punto-claro:#6d8fb3;
  /* La barra: el texto claro sobre el azul, y el azul al pasar el mouse. */
  --barra-texto:#c9d9ea; --acento-hover:#162c47;
  /* La historia del expediente: el corte de ANMAT y el plazo, en las tierras
     de la paleta de los gráficos (graficos.SERIES). */
  --corte:#a8562a; --corte-fondo:#fdf4ec; --plazo:#8a6a1f;
}
.codigo,td .codigo{font-family:var(--mono);font-size:13px;letter-spacing:-.01em}
/* Expedientes: anchos fijos, con y sin la columna Empresa. Sin esto, el
   comentario de ANMAT queda en una cinta de dos palabras por renglón. */
/* Anchos medidos sobre el contenido real: un expediente son 23 caracteres en
   monoespaciada (~170 px) y una fecha sin segundos, unos 95 px. Nada de nowrap
   sin lugar: si algo no entra, corta con puntos suspensivos en vez de montarse
   sobre la columna de al lado. */
.tabla-ancha{overflow-x:auto}
/* Como .tabla-ancha, pero sin estirar la página: para una tabla de adentro de
   un desplegable que solo en el teléfono necesita correr en horizontal. */
.desliza{overflow-x:auto}
table.expedientes,table.expedientes-empresa{table-layout:fixed;width:100%}
table.expedientes{min-width:820px}
table.expedientes-empresa{min-width:920px}
table.expedientes td,table.expedientes-empresa td{overflow-wrap:anywhere;vertical-align:top;
  overflow:hidden}
/* Nada de nowrap suelto adentro de una columna de ancho fijo: lo que no entra
   se derrama sobre la columna de al lado. Vale solo en las celdas que además
   cortan con puntos suspensivos, abajo. */
table.expedientes td :not(.nowrap),table.expedientes-empresa td :not(.nowrap){white-space:normal}
table.expedientes td.nowrap,table.expedientes-empresa td.nowrap{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Medido sobre el contenido, no sobre la ventana: expediente 210, estado 136,
   inicio 112, último movimiento 136 (lleva además los días) y último archivo
   112. Las tres traen fecha y hora: Helena la manda con hora en unas empresas y
   sin hora en otras, así que miden por el caso largo. Comentarios se queda con
   el resto, y nunca baja de unos 350 px. */
/* Tres columnas: el expediente son 23 caracteres en monoespaciada (210px), el
   plazo se lleva 200 porque es lo primero que hay que ver, y «Qué» se queda con
   el resto. Las fechas de consulta se fueron adentro de la fila. */
table.expedientes td:nth-child(1),table.expedientes th:nth-child(1){width:210px}
table.expedientes td:nth-child(3),table.expedientes th:nth-child(3){width:200px}
table.expedientes-empresa td:nth-child(1),table.expedientes-empresa th:nth-child(1){width:92px}
table.expedientes-empresa td:nth-child(2),table.expedientes-empresa th:nth-child(2){width:210px}
table.expedientes-empresa td:nth-child(4),table.expedientes-empresa th:nth-child(4){width:200px}
.col-exp{min-width:180px}
.exp-num{white-space:nowrap;display:block;overflow:hidden;text-overflow:ellipsis}
/* El semáforo, solo en su columna, con el borde izquierdo que le da presencia
   sin sombra ni relleno saturado. Los cuatro estados salen del color del dato. */
.col-plazo .semaforo{display:flex;align-items:flex-start;gap:8px;border:1px solid var(--borde);
  border-left-width:4px;border-radius:4px;padding:8px 10px;margin:0;font-size:12px}
.col-plazo .semaforo .punto{margin-top:4px}
details.corte-largo>summary{cursor:pointer;list-style:none}
details.corte-largo>summary::-webkit-details-marker{display:none}
details.corte-largo .vermas{color:var(--acento);white-space:nowrap;font-size:12px;font-weight:600}
details.corte-largo[open] .vermas{display:none}
details.corte-largo .texto{white-space:pre-wrap}
ol.historia{margin:0;padding-left:20px;font-size:13px}
ol.historia li{margin:4px 0;padding:2px 6px;border-left:3px solid var(--borde-md)}
ol.historia li.corte{border-left-color:var(--corte);background:var(--corte-fondo)}
ol.historia li.plazo{border-left-color:var(--plazo)}
ol.historia li.baja{border-left-color:var(--rojo)}
ol.historia li.hito{border-left-color:var(--verde);background:var(--verde-fondo)}
ol.historia .cuando{color:var(--ink2);white-space:nowrap;margin-right:6px}
ol.historia li.corte .texto{white-space:pre-wrap}
p.corte{padding:8px 10px;border-left:3px solid var(--corte);background:var(--corte-fondo);font-size:13px}
/* Lo que cerró el expediente: no es un corte y no espera respuesta. */
p.resolucion{padding:8px 10px;border-left:3px solid var(--verde-borde);background:var(--verde-fondo);font-size:13px}
ol.rondas{margin:0;padding-left:20px;font-size:13px}
ol.rondas>li{margin:10px 0;padding-left:4px}
ol.rondas .texto{white-space:pre-wrap}
.casillas{display:flex;flex-wrap:wrap;gap:6px 14px;padding:6px 0}
.casilla{display:inline-flex;align-items:center;gap:6px;text-transform:none;font-size:14px;color:var(--ink);
         font-weight:400;letter-spacing:0}
.casilla input{width:auto}
.casilla-y-ayuda{display:inline-flex;align-items:center;gap:6px}
/* El cruce del RENPRE contra todas las contrapartes (ADR-145): cada una abre su grupo de filas. */
table.cruce tr.grupo td{background:var(--bg);border-top:2px solid var(--borde-md)}
*{box-sizing:border-box}
body{margin:0;font:15px/1.55 "IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
     background:var(--bg);color:var(--ink)}
/* La barra: título, los cuatro grupos del menú, el buscador y quién está. Debajo,
   la sub-navegación del grupo activo (las tabs de la guía). En el teléfono la
   barra es una línea con un botón "Menú" que abre todo. */
header{background:var(--acento);color:#fff}
header .barra{padding:10px 24px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
/* La marca es un enlace a Estado, no el título de la pantalla: con el h1
   en la barra, todas las pantallas se llamaban «Monitor Helena» para quien
   navega por encabezados. */
header .marca{font-size:16px;margin:0;font-weight:700;letter-spacing:.02em;color:#fff;
          font-family:"IBM Plex Serif",Georgia,"Times New Roman",serif}
header .marca:hover{text-decoration:none}
/* El título de la pantalla, para el lector de pantalla y la navegación por
   encabezados: a la vista ya está en la pestaña del menú y en la sección. */
.solo-lector{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
header a{color:var(--barra-texto);text-decoration:none;font-size:14px}
header a:hover{text-decoration:underline}
header .der{margin-left:auto}
header .grupos{display:flex;gap:18px}
/* Cada grupo abre un desplegable con sus páginas (ADR-227, que ajusta ADR-024). */
header .grupo-menu{position:relative}
header .grupo-menu summary{list-style:none;cursor:pointer;color:var(--barra-texto);font-size:14px}
header .grupo-menu summary::-webkit-details-marker{display:none}
header .grupo-menu summary.activo{color:#fff;font-weight:600}
header .grupo-menu .paginas{position:absolute;left:0;top:28px;z-index:20;min-width:240px;max-height:70vh;overflow:auto;padding:8px 0;
  background:var(--surface);border:1px solid var(--borde-md);border-radius:4px}
header .grupo-menu .paginas a{display:block;padding:7px 12px;color:var(--ink);font-size:14px;white-space:nowrap}
header .grupo-menu .paginas a[aria-current="page"]{color:var(--acento);font-weight:600}
/* «Ir a una página», con Ctrl+K. */
.ir-a{max-width:520px;width:calc(100% - 32px);padding:16px;border:1px solid var(--borde-md);border-radius:4px;background:var(--surface);color:var(--ink)}
.ir-a::backdrop{background:rgba(0,0,0,.35)}
.ir-a input{width:100%}
.ir-a ul{list-style:none;margin:10px 0;padding:0;max-height:50vh;overflow:auto}
.ir-a li a{display:block;padding:6px 8px;color:var(--ink)}
.ir-a li a:hover,.ir-a li a:focus{background:var(--bg);text-decoration:none}
header .buscar{display:inline-flex;margin:0}
header .buscar input{width:150px;padding:4px 8px;border-radius:4px;border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.12);color:#fff;font-size:13px}
header .buscar input::placeholder{color:rgba(255,255,255,.65)}
/* «Ver como» (ADR-115): un desplegable a la izquierda de quién está. Sin sombra
   (la guía las deja para los modales): el borde separa el cuadro de la barra. */
header .vista-como{position:relative;display:inline-block;margin-right:16px}
header .vista-como summary{list-style:none;cursor:pointer;color:var(--barra-texto);font-size:14px}
header .vista-como summary::-webkit-details-marker{display:none}
header .vista-como .opciones{position:absolute;right:0;top:28px;z-index:20;min-width:280px;padding:8px 0;
  background:var(--surface);border:1px solid var(--borde-md);border-radius:4px}
header .vista-como .opciones a{display:block;padding:8px 12px;color:var(--ink);font-size:14px}
header .vista-como .opciones a[aria-current="true"]{color:var(--acento);font-weight:600}
header .vista-como .para,.menu-movil .para{color:var(--ink2);font-weight:400;font-size:13px}
.menu-movil .para{color:var(--barra-texto)}
.menu-movil{display:none;margin-left:auto}
.menu-movil summary{list-style:none;cursor:pointer;color:#fff;font-size:14px;padding:6px 12px;
  border:1px solid rgba(255,255,255,.4);border-radius:4px}
.menu-movil summary::-webkit-details-marker{display:none}
.menu-movil .grupo{margin:12px 0 0}
.menu-movil .grupo .nombre-grupo{color:var(--barra-texto);margin-bottom:6px}
.menu-movil .grupo a{display:block;padding:6px 0;font-size:15px}
.menu-movil .grupo strong a{color:#fff}
.menu-movil .buscar{display:flex;margin-top:14px}
.menu-movil .buscar input{width:100%}
/* En el teléfono, con menos de 16 px el navegador agranda la página al tocar el
   campo y hay que achicarla a mano para seguir. */
header .menu-movil .buscar input{font-size:16px}
main{max-width:1180px;margin:0 auto;padding:24px 20px 64px}
main.ancha{max-width:1560px;padding-left:32px;padding-right:32px}
section{background:var(--surface);border:1px solid var(--borde);border-radius:4px;
        padding:20px;margin-bottom:20px}
h2,.titulo-login{font-size:16px;margin:0 0 16px;font-weight:600;color:var(--ink);
   font-family:"IBM Plex Serif",Georgia,serif}
/* Los subtítulos de una sección, nunca más grandes que su título: sin regla, el
   h3 salía al 1,17 em del navegador (17,5 px) y le ganaba al h2 de 16 px. */
h3{font-size:15px;margin:20px 0 8px;font-weight:600;color:var(--ink)}
h4{font-size:14px;margin:16px 0 8px;font-weight:600;color:var(--ink)}
/* El número de expediente es el título de su página: el .codigo de 13 px de
   las tablas lo achicaba por debajo del texto de la página. */
h2 .codigo{font-size:inherit;letter-spacing:0}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-weight:700;color:var(--ink2);font-size:10px;
   text-transform:uppercase;letter-spacing:.1em;padding:8px 12px 8px 0;
   border-bottom:1px solid var(--borde-md)}
td{padding:12px 12px 12px 0;border-bottom:1px solid var(--borde);vertical-align:top}
input,select,textarea{font-family:inherit;font-size:15px;font-weight:400;line-height:1.4;
      text-transform:none;letter-spacing:normal;padding:7px 9px;border:1px solid var(--borde-control);
      border-radius:4px;background:var(--surface);width:100%;max-width:100%;color:var(--ink)}
/* La etiqueta envuelve a su campo, así que el estilo de versalitas va en el
   texto de adentro y no en la etiqueta, que ahora también contiene el input. */
label{display:block}
.et{display:block;font-size:10px;font-weight:700;color:var(--ink2);margin-bottom:4px;
    text-transform:uppercase;letter-spacing:.1em}
.saltar{position:absolute;left:-9999px;top:0;background:var(--surface);color:var(--acento);
        padding:10px 16px;border:1px solid var(--acento);border-radius:4px;z-index:10}
.saltar:focus{left:8px;top:8px}
/* El panel se recorre con Tab: si el foco no se ve, no se sabe dónde está uno. */
:focus-visible{outline:2px solid var(--acento);outline-offset:2px;border-radius:2px}
/* En la barra el fondo es el acento, y un contorno del acento sobre el acento
   no se ve (1:1): seis de las primeras paradas del Tab pasaban a ciegas. Solo
   en la barra: el desplegable de un grupo está adentro de la barra, pero sobre blanco. */
header .barra :focus-visible{outline-color:#fff}
header .barra .paginas :focus-visible{outline-color:var(--acento)}
/* Los enlaces del contenido, en el acento de la guía y no en el azul del
   navegador, que era el color más fuerte de cada pantalla; visitados o no, del
   mismo color. Adentro de un cartel, el color del cartel. */
main a{color:var(--acento);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
main a:hover{text-decoration-thickness:2px}
.aviso a{color:inherit}
/* Lo que se carga a mano, para quien solo lee: el dato, sin campos. */
dl.datos-lectura{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;font-size:13px;margin:0}
dl.datos-lectura dt{color:var(--ink2)}
dl.datos-lectura dd{margin:0;white-space:pre-wrap}
details.largo{display:inline}
details.largo>summary{display:inline;cursor:pointer}
details.largo .texto-completo{display:block;white-space:pre-wrap}
.campo{margin-bottom:12px}
.fila{display:flex;gap:14px;flex-wrap:wrap}
.fila>.campo{flex:1;min-width:170px}
button{font:inherit;padding:8px 14px;border-radius:4px;border:1px solid var(--acento);
       background:var(--acento);color:#fff;cursor:pointer}
button:hover{background:var(--acento-hover)}
button.sec{background:transparent;color:var(--ink2);border-color:var(--borde-md)}
button.sec:hover{background:var(--bg);color:var(--ink)}
button.mal{border-color:var(--rojo);color:var(--rojo);background:transparent}
button.mal:hover{background:var(--rojo-fondo)}
/* StatusBadge de la guía: radio 3, versalitas, borde del estado. */
.chip{display:inline-block;font-size:11px;padding:2px 8px;border-radius:3px;
      font-weight:600;letter-spacing:.04em;border:1px solid transparent}
.ok{background:var(--verde-fondo);color:var(--verde);border-color:var(--verde-borde)}
.no{background:var(--rojo-fondo);color:var(--rojo);border-color:var(--rojo-borde)}
.tibio{background:var(--ambar-fondo);color:var(--ambar);border-color:var(--ambar-borde)}
/* La demora de ANMAT (ADR-052): el azul de la paleta, no el rojo de lo que
   depende de la empresa. */
.organismo{background:var(--organismo-fondo);color:var(--organismo);border-color:var(--organismo-borde)}
.aviso{padding:11px 14px;border-radius:4px;margin-bottom:18px;font-size:14px}
/* La banda de una demostración (ADR-087): arriba de todo, en todas las páginas. */
.demo{background:var(--ambar-fondo);color:var(--ambar);border-bottom:1px solid var(--ambar-borde);
      padding:8px 16px;font-size:14px;text-align:center}
.aviso.ok{background:var(--verde-fondo);border:1px solid var(--verde-borde);color:var(--verde)}
.aviso.no{background:var(--rojo-fondo);border:1px solid var(--rojo-borde);color:var(--rojo)}
.aviso.tibio{border:1px solid var(--ambar-borde)}
/* De cuándo es lo que afirma la pantalla (ADR-046): gris, debajo del titular, y
   sale en la captura y en el papel. */
.sello{color:var(--ink2);font-size:13px;margin:-4px 0 14px}
.titular .segun{display:block;font-size:14px;line-height:20px;font-weight:400;color:var(--ink2);margin:0 0 2px}
ol.pasos{margin:0 0 14px;padding-left:22px;font-size:14px}
ol.pasos li{margin:6px 0}
.nota{color:var(--ink2);font-size:13px;margin:0 0 14px}
details summary{cursor:pointer;color:var(--acento);font-size:13px}
.filtros{gap:16px;flex-wrap:wrap;margin:0 0 12px}
.semaforo{display:inline-flex;align-items:flex-start;gap:6px;font-size:12px;color:var(--ink2);margin-top:4px}
.semaforo .punto{width:10px;height:10px;border-radius:50%;display:inline-block;flex:0 0 auto;margin-top:3px}
.punto.rojo{background:var(--rojo)}
.punto.ambar{background:var(--ambar-punto)}
.punto.organismo{background:var(--organismo-punto)}
.punto.organismo.claro{background:var(--organismo-punto-claro)}
.ayuda{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;
  border:1px solid var(--borde-control);color:var(--ink2);font-size:11px;cursor:pointer;flex:0 0 auto;vertical-align:middle;
  font-weight:400;text-transform:none;letter-spacing:0;position:relative}
/* El círculo mide 16 px y el dedo necesita 24: el área que responde es más
   grande que el dibujo (ADR-047). */
.ayuda::after{content:"";position:absolute;inset:-4px}
.ayuda:hover,.ayuda:focus,.ayuda[aria-expanded="true"]{background:var(--acento);color:#fff;border-color:var(--acento)}
/* El rótulo con el «?» de una columna, en la primera fila con dato: solo cuando la tabla se apila (ACC-02). */
.rotulo-de-celda{display:none}
/* El texto del «?», abierto con el dedo o con el teclado. Sin sombra (ADR-011). */
.globo-ayuda{position:absolute;z-index:20;max-width:360px;background:var(--surface);color:var(--ink);
  border:1px solid var(--borde-md);border-radius:4px;padding:10px 12px;font-size:13px;line-height:1.5;
  white-space:pre-line;text-align:left;font-weight:400;text-transform:none;letter-spacing:0}
.globo-ayuda p{margin:0}
.globo-ayuda p + p,.globo-ayuda .mas-ayuda{margin-top:6px}
.globo-ayuda .mas-ayuda{display:block;background:none;border:0;padding:0;color:var(--acento);
  font:inherit;cursor:pointer;text-decoration:underline}
.filtros .campo{flex:0 1 260px}
/* Reportar un problema: un enlace al pie de cada página, no un botón primario
   flotante (la guía pide un solo primario por pantalla, y flotando tapaba la
   última columna de las tablas). Es un <details>: cerrado es el enlace, abierto
   el formulario. */
.reportar{margin-top:8px;max-width:520px}
.reportar summary{list-style:none;display:inline;cursor:pointer;color:var(--acento);font-size:13px}
.reportar summary::-webkit-details-marker{display:none}
.reportar summary:hover{text-decoration:underline}
.reportar form{background:var(--surface);border:1px solid var(--borde-md);border-radius:4px;padding:14px;margin-top:8px}
.reportar .campo{margin-bottom:8px}
.pie{margin-top:24px;padding-top:12px;border-top:1px solid var(--borde)}
/* La hoja de impresión: el Informe se entrega en papel o en PDF, y salía como
   la pantalla —con los «?», los enlaces subrayados, los fondos de caja, el
   encabezado de las tablas una sola vez y los puntos de color perdidos—. */
@media print{
  @page{margin:16mm 14mm}
  header,form,.reportar,.pie,.ayuda,.globo-ayuda,.no-imprimir{display:none !important}
  main{padding:0;max-width:none}
  section{border:0;background:none;padding:0;margin:0 0 14px}
  main a{color:inherit;text-decoration:none}
  .punto,.chip,.tarjeta{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  thead{display:table-header-group}
  tr,li.corte,.tarjetas,h2{break-inside:avoid}
  h2{break-after:avoid}
  .informe-empresa+.informe-empresa{break-before:page}
  details{display:block}
  /* Lo plegado va al papel (ADR-227). Donde el navegador no lo entienda, lo abre SCRIPT_IMPRIMIR. */
  details::details-content{content-visibility:visible;display:block;height:auto}
  .en-pantalla,.indice{display:none}
  .al-imprimir{display:inline}
  /* En papel no hay barra de desplazamiento: la tabla va entera. */
  .desliza,.tabla-ancha,.desliza.caja-de-la-matriz{overflow:visible;max-height:none}
}
.membrete{font-size:13px;color:var(--ink2);margin:0 0 6px}
/* La radiografía pública (ADR-233): lo que dice que un borrador no se entrega va también en el papel. */
.marca-de-borrador{font-weight:600;color:var(--ambar);background:var(--ambar-fondo);border:1px solid var(--ambar-borde);border-radius:4px;
  padding:6px 10px;margin:0 0 10px;print-color-adjust:exact;-webkit-print-color-adjust:exact}
.origen-de-la-hoja{font-size:12px;color:var(--ink2);margin:0 0 14px}
.direccion-de-la-hoja{font-size:12px;overflow-wrap:anywhere}
/* La carpeta de una licitación (ADR-234): la dirección de un papel público, escrita, porque el índice la lleva así. */
.direccion-del-papel{font-size:12px;color:var(--ink2);overflow-wrap:anywhere}
/* El mail del informe tal como sale, antes de mandarlo (ADR-077). */
.mail-previo{white-space:pre-wrap;font-size:13px;max-height:420px;overflow:auto;background:var(--bg);
  border:1px solid var(--borde);border-radius:4px;padding:12px;margin:8px 0 0}
/* De dónde salió un dato de la ficha (ADR-072), al lado del valor y en chico. */
.origen-dato{font-size:12px;color:var(--ink2);margin-left:6px}
/* El sello de la hoja del producto: una fuente por renglón. */
.sello{list-style:none;padding:0;margin:8px 0 14px;font-size:13px;color:var(--ink2)}
/* Semáforo: el punto de color solo cuando hay algo que mirar. Lo neutral (en
   plazo, sin plazo) va en gris y sin punto, así los rojos y ámbar se ven. */
.semaforo.mudo{color:var(--ink2)}
.semaforo .con-quedan{display:flex;flex-direction:column}
.semaforo .quedan{font-weight:600;color:var(--ink);margin-top:2px}
.semaforo .origen{color:var(--ink2)}
/* Un enlace con forma de botón secundario (Informe del mes). */
a.boton-sec{display:inline-block;padding:7px 14px;border-radius:4px;border:1px solid var(--borde-md);
  color:var(--ink2);text-decoration:none;font-size:14px;background:var(--surface)}
a.boton-sec:hover{background:var(--bg);color:var(--ink);text-decoration:none}
a.boton-sec[aria-current="page"]{color:var(--acento);border-color:var(--acento);font-weight:600}
.vistas{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.tarjetas.dos{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));max-width:640px}
.tarjetas.tres{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));max-width:880px}
/* El titular de la portada: una oración con sujeto y verbo, en serif, una sola
   línea. Es lo primero que se lee y tiene que contestar, no contar. */
.titular{font-family:"IBM Plex Serif",Georgia,serif;font-size:24px;line-height:30px;
  font-weight:600;margin:0 0 12px;color:var(--ink)}
/* El índice fijo de una pantalla larga (ADR-227): queda pegado arriba al bajar, y corre de costado si no entra. */
.indice{position:sticky;top:0;z-index:10;display:flex;align-items:baseline;gap:4px 16px;overflow-x:auto;
  margin:0 0 14px;padding:8px 0;background:var(--bg);border-bottom:1px solid var(--borde);font-size:13px}
.indice .et{margin:0;flex:0 0 auto}
.indice a{white-space:nowrap}
section[id]{scroll-margin-top:52px}
/* Lo que sigue diciendo lo mismo debajo de la frase del día (ADR-227). */
.titular.segundo{font-size:17px;line-height:24px;font-weight:400;color:var(--ink2)}
/* Una sección en calma, con su conclusión a la vista (ADR-227, regla 3). */
details.plegada>summary{color:var(--ink);font-size:inherit}
details.plegada>summary h2{display:inline;margin:0}
details.plegada>summary .nota{display:block;margin:4px 0 0}
details.plegada[open]>summary{margin-bottom:12px}
ul.archivos{margin:2px 0 6px;padding-left:18px;font-size:13px}
ul.archivos li{margin:2px 0}
/* El detalle de un expediente vive adentro de una tabla de 1090 px: se pega al
   borde izquierdo y no pasa del ancho de la ventana, así en el teléfono se lee
   sin correr la tabla. */
.detalle-exp{position:sticky;left:0;max-width:calc(100vw - 110px)}
/* El botón de abrir una fila es un enlace: sin JavaScript va a la página del
   expediente, con JavaScript trae el fragmento y lo abre acá. */
.abrir-exp{display:inline-flex;flex-wrap:wrap;align-items:center;gap:2px 6px;color:var(--acento);font-size:13px;
  text-decoration:none;cursor:pointer;padding:2px 0;position:sticky;left:0}
/* Un chip adentro del enlace no se parte: en el teléfono se leía «sin / respond / er». */
.abrir-exp .chip{white-space:nowrap}
.abrir-exp:hover{text-decoration:underline}
.abrir-exp::before{content:"▸";display:inline-block;transition:transform .12s;font-size:11px}
.abrir-exp[aria-expanded="true"]::before{transform:rotate(90deg)}
.abrir-exp[aria-busy="true"]::after{content:" trayendo…";color:var(--ink2)}
/* Las tablas de lectura (Estado, Vencimientos, Cambios, Boletín) se apilan en
   angosto: cada fila es un bloque y cada celda un renglón, en vez de comprimir
   las columnas hasta partir palabras. Las matrices van en .tabla-ancha. */
@media (max-width:720px){
  header .barra{padding:10px 16px;gap:12px}
  /* El buscador de la barra (su hijo directo) se oculta; el del menú no:
     con «header .barra .buscar» la regla alcanzaba también al del menú, que
     está adentro de la barra, y el teléfono se quedaba sin buscador. */
  header .grupos,header .barra > .buscar,header .der{display:none}
  .menu-movil{display:block}
  main{padding:16px 16px 48px}
  main.ancha{padding-left:16px;padding-right:16px}
  section{padding:14px}
  .apilada tr{display:block;border-bottom:1px solid var(--borde);padding:8px 0}
  /* La fila de encabezados sale de la vista pero no del árbol de accesibilidad:
     con display:none el lector de pantalla también la perdía. Es la primera fila
     de la tabla, no la primera de cada grupo: con «tr:first-child», en una tabla
     con <thead> se iba también la primera fila de datos. */
  .apilada > :first-child > tr:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
    white-space:nowrap;border:0;padding:0}
  .apilada td{display:block;border:0;padding:2px 0}
  /* Apilada, cada celda dice qué columna era: dos fechas, dos expedientes y dos
     guiones sueltos no se entendían. El rótulo lo copia SCRIPT_ROTULOS del
     encabezado ya traducido. */
  .apilada td[data-th]::before{content:attr(data-th);display:block;font-size:11px;font-weight:600;
    letter-spacing:.04em;text-transform:uppercase;color:var(--ink2);margin-top:4px}
  /* Una celda vacía no deja un rótulo suelto («Nota» sin nota). */
  .apilada td[data-th]:empty{display:none}
  /* El «?» de una columna no puede quedar en la fila de encabezados, que acá no se ve ni se toca y el Tab caía en
     él sin que se viera: SCRIPT_ROTULOS lo muda al rótulo de la primera fila con dato (ACC-02, ADR-047). */
  .apilada td.con-rotulo::before{content:none}
  .apilada .rotulo-de-celda{display:block;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
    color:var(--ink2);margin-top:4px}
  .tarjeta .valor.hero{font-size:36px}
  .detalle-exp{max-width:calc(100vw - 70px)}

  /* La tabla de expedientes deja de ser tabla, pero NO con .apilada: acá el
     orden importa. El semáforo sube al primer lugar, antes del número, que es
     lo que se mira parado en una oficina de ANMAT. */
  table.expedientes,table.expedientes-empresa{min-width:0;display:block}
  table.expedientes tr,table.expedientes-empresa tr{display:flex;flex-direction:column;
    border-bottom:1px solid var(--borde);padding:10px 0}
  table.expedientes tr:first-child,table.expedientes-empresa tr:first-child{display:none}
  table.expedientes td,table.expedientes-empresa td{display:block;border:0;padding:2px 0;
    width:auto !important;max-width:none}
  table.expedientes .col-plazo,table.expedientes-empresa .col-plazo{order:-1;margin-bottom:6px}
  /* Solo la envoltura de Expedientes deja de deslizarse: su tabla ya se apiló.
     Escrita para todas las .tabla-ancha, hacía que las que sí son matrices (la
     norma en Indicadores) estiraran la página en vez de correr en su caja. */
  .exp-envoltura{overflow-x:visible}
  /* En una lista apilada, los botones van en su propio renglón y se acomodan:
     sin cortar, «Hecho», «Borrar» y «Leer ahora» quedaban fuera de la pantalla. */
  .apilada td.acciones{display:flex;flex-wrap:wrap;gap:8px;white-space:normal;padding-top:6px}
  .detalle-exp{position:static;max-width:100%}
  .abrir-exp{position:static}

  /* Los filtros: una tira que se desliza, no cuatro renglones de casillas. */
  .casillas{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .casillas .casilla,.casillas .casilla-y-ayuda{flex:0 0 auto}
  /* Los tildes del «Editar» y del alta de una empresa no son filtros: van uno por renglón. En tira, adentro de la
     tabla de Empresas, sumaban el ancho de todos y estiraban la fila entera: a 375 px había que deslizar 930 px
     para leer cualquier cosa del «Editar», y los módulos (ADR-139) lo llevaban a 1.870. */
  .relleno-editar .casillas,#agregar .casillas,#cruzar .casillas,#pedir-hoja .casillas{flex-direction:column;align-items:flex-start;
    overflow-x:visible}
  .relleno-editar .casillas .casilla,.relleno-editar .casillas .casilla-y-ayuda,
  #agregar .casillas .casilla,#cruzar .casillas .casilla,#pedir-hoja .casillas .casilla{flex:0 1 auto;max-width:100%;min-width:0}
  .relleno-editar .casilla-y-ayuda .casilla{flex-shrink:1;min-width:0}
  .filtros{gap:10px}
  /* Precursores en el teléfono (ADR-154): la tabla de contrapartes dice lo de hoy y la constancia; el registro y los
     CUFE, en la ficha. */
  table.contrapartes td:nth-child(3),table.contrapartes td:nth-child(5){display:none}

}
.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:14px 0 22px}
.tarjeta{background:var(--surface);border:1px solid var(--borde);border-radius:4px;
         padding:16px;min-width:0}
.tarjeta .valor{font-size:30px;font-weight:600;line-height:1.1;color:var(--ink);
                font-family:"IBM Plex Serif",Georgia,serif}
.tarjeta .valor.hero{font-size:48px}
.tarjeta .etiqueta{color:var(--ink2);font-size:13px;margin-top:4px}
.tarjeta .detalle{color:var(--ink2);font-size:12px;margin-top:6px;min-height:1em}
.tarjeta .valor a.cifra-enlace{text-decoration:none;color:inherit}
/* El punto de una tarjeta toma el color de su estado (ADR-011): clase, no estilo en línea. */
.tarjeta .estado-bien{color:var(--verde)}
.tarjeta .estado-atencion{color:var(--ambar)}
.tarjeta .estado-serio{color:var(--serio)}
.tarjeta .estado-critico{color:var(--rojo)}
/* Dos por fila como mucho: a tres, cada gráfico se escalaba a 0,6 y el texto
   quedaba en 7 px. En el teléfono, uno por fila. */
.graficos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(460px,100%),1fr));gap:20px;align-items:start}
.grafico .conclusion{font-size:14px;margin:0 0 8px;color:var(--ink)}
.grafico{margin:0;background:var(--surface);border:1px solid var(--borde);border-radius:4px;padding:12px 14px;min-width:0}
.grafico figcaption{font-size:14px;margin:0 0 8px;color:var(--ink)}
.grafico figcaption .nota{display:block;margin:2px 0 0;font-size:12px}
.grafico details{margin-top:8px}
.grafico table{font-size:13px}
.login{max-width:340px;margin:12vh auto}
/* Utilidades: lo que antes eran estilos en línea, con nombre. Cada una vive
   acá una sola vez, así un ajuste de diseño se hace en este bloque y no en
   trescientos style="…" repartidos por el HTML. */
.chico{font-size:13px}
.secundario{color:var(--ink2);font-size:13px}
/* Quién cargó un dato y cuándo (ADR-058): se lee, pero no compite con el dato. */
.firma{color:var(--ink2);font-size:13px}
/* Lo que alguien escribió con sus renglones (el detalle de un incidente, su respuesta). */
.en-renglones{white-space:pre-wrap}
/* Cuántos incidentes quedan sin cerrar, al lado de «Incidentes» en el menú del
   administrador: el alta avisa una sola vez. */
.contador{display:inline-block;min-width:18px;margin-left:4px;padding:0 5px;border-radius:4px;
          background:var(--rojo);color:var(--surface);font-size:11px;font-weight:700;line-height:17px;
          text-align:center}
.micro{font-size:12px;line-height:17px}
/* Los digitos de una tabla alinean columna con columna, no segun el ancho de
   cada numero. Sin esto la monoespaciada sirve a medias. */
td,th,.codigo,.valor,.tarjeta .valor,.semaforo,.dq-num{font-variant-numeric:tabular-nums}
.ink3{color:var(--ink3)}
.texto-no{color:var(--rojo)}
.texto-ok{color:var(--verde)}
.sin-margen{margin:0}
.num{text-align:right}
/* El mes más cargado de una fila de Carga de trabajo. */
.pico{font-weight:700}
.sin-corte{white-space:nowrap}
/* La celda de los botones de una fila: en la computadora no se corta; en el
   teléfono, apilada, se acomoda (ver el bloque de 720 px, ADR-060). */
.acciones{white-space:nowrap}
/* Lo que ANMAT escribió, recortado en pantalla y entero en papel. */
.al-imprimir{display:none}
dl.glosario dt{font-weight:600;margin-top:14px}
dl.glosario dd{margin:4px 0 0}
.cifras{font-variant-numeric:tabular-nums}
.parte-palabras{word-break:break-all}
.ml-8{margin-left:8px}
.m-0-0-10{margin:0 0 10px}.m-0-0-14{margin:0 0 14px}.m-8-0-4{margin:8px 0 4px}.m-14-0-0{margin:14px 0 0}
.p-10-0{padding:10px 0}
.fila>.campo.crece-220,.crece-220{flex:1 1 220px}
.fila>.campo.crece-460,.crece-460{flex:1 1 460px}
.fila>.a-lo-ancho{flex:1 1 100%}
.fila>.campo.ancho-240,.ancho-240{flex:0 1 240px}
.fila>.campo.ancho-260,.ancho-260{flex:0 1 260px}
.ancho-texto{width:100%;max-width:720px}
.exportar{font-size:13px;margin-left:10px}
/* Un día de la semana en Ajustes: la casilla y su nombre en un renglón. */
.dia{display:inline-flex;gap:6px;align-items:center;text-transform:none;margin-right:14px;font-size:14px}
.dia input{width:auto}
/* La leyenda de la línea de tiempo: el punto lleva el color, que es un dato. */
.leyenda-item{display:inline-flex;align-items:center;gap:4px;margin-right:10px}
.punto-leyenda{width:9px;height:9px;border-radius:50%;display:inline-block}
.linea-tiempo{margin:10px 0 2px}
/* Los puntos de un corte: tildado es respondido. */
.lista-puntos{margin:0;padding-left:18px;font-size:13px}
.lista-puntos li{margin:6px 0}
.tachado{color:var(--ink2);text-decoration:line-through}
.casilla.arriba{align-items:flex-start}
.chip.neutro{background:var(--bg);border-color:var(--borde-md);color:var(--ink2)}
.en-linea{display:inline}
.bloque-en-linea{display:inline-block;vertical-align:top}
/* Las de flex van también como .fila>.campo.X: si no, .fila>.campo{flex:1}
   les gana por especificidad y el campo se estira. */
.fila>.campo.fijo,.fijo{flex:0 0 auto}
.fila>.campo.abajo,.abajo{align-self:flex-end}
.al-pie{align-items:flex-end}
.al-centro{align-items:center}
.gap-8{gap:8px}
.fila>.campo.crece,.crece{flex:1 1 auto}
.fila>.campo.crece-320,.crece-320{flex:1 1 320px}
.fila>.campo.crece-420,.crece-420{flex:1 1 420px}
.fila>.campo.todo-el-ancho,.todo-el-ancho{flex:1 1 100%}
.fila>.campo.ancho-120,.ancho-120{flex:0 1 120px}
.fila>.campo.ancho-140,.ancho-140{flex:0 1 140px}
.fila>.campo.ancho-160,.ancho-160{flex:0 1 160px}
.fila>.campo.ancho-200,.ancho-200{flex:0 1 200px}
.fila>.campo.ancho-220,.ancho-220{flex:0 1 220px}
.fila>.campo.ancho-280,.ancho-280{flex:0 1 280px}
.max-280{max-width:280px}
.fila>.campo.ancho-320,.ancho-320{flex:0 1 320px}
/* Un expediente electrónico entero, «EX-2026-55555555-APN-DVPVYCTMYPS#ANMAT»: pedía 359 px medido a 1366. */
.fila>.campo.ancho-380,.ancho-380{flex:0 1 380px}
.ancho-fijo-120{width:120px}
.ancho-fijo-220{width:220px}
.parte-ficha{border-top:2px solid var(--borde);margin-top:24px;padding-top:4px}.titulo-parte{font-size:18px}
.frase-publico{color:var(--ink2);font-size:14px;max-width:70ch}
.tercero-fuente+.tercero-fuente{margin-top:8px}.dato-ficha{margin:10px 0}.mt-8{margin-top:8px}.mt-10{margin-top:10px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}
.grande{font-size:20px}
.mapa{display:grid;gap:12px;margin-top:12px;align-items:start}
.mapa-empresa{background:var(--bg);border:1px solid var(--borde-md);border-radius:4px;padding:12px 14px}
.mapa-empresa h3,.mapa-hab h3{margin:0 0 4px}
.mapa-habs{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.revision-acervo{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));align-items:start}
/* Lo que ANMAT observa (ADR-101, fase 4): una tarjeta por tipo de trámite, dos
   por fila como mucho y una en el teléfono, como los gráficos (ADR-061). */
.acervo-segmentos{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr));align-items:start}
.acervo-segmento{background:var(--surface);border:1px solid var(--borde-md);border-radius:4px;padding:12px 14px;min-width:0}
.acervo-segmento h3{margin:0 0 2px}
.acervo-categorias{list-style:none;padding:0;margin:8px 0 0}
.acervo-categorias>li{padding:8px 0;border-top:1px solid var(--borde)}
.acervo-ejemplos{margin:6px 0 0;padding-left:18px;font-size:13px;color:var(--ink2)}
.acervo-ejemplos li{margin:2px 0}
/* El checklist previo a presentar y de qué habla un corte: notas, no avisos. */
.antes-de-presentar{border-left:3px solid var(--acento);background:var(--bg);padding:8px 12px;margin:12px 0 0}
.antes-de-presentar h4{margin:0 0 4px}
.antes-de-presentar ul{margin:4px 0 0;padding-left:18px}
.clasificacion{display:block;margin-top:4px}
.mapa-hab{background:var(--surface);border:1px solid var(--borde-md);border-radius:4px;padding:10px 12px}
.mapa-sub{margin-top:8px}.mapa-sub ul{margin:4px 0 0;padding-left:18px;font-size:13px}
.mapa.horizontal{grid-template-columns:minmax(180px,240px) 1fr}
.mapa.horizontal .mapa-habs{grid-template-columns:1fr}
.mapa.horizontal .mapa-hab{display:grid;grid-template-columns:minmax(160px,1fr) 1fr 1fr;gap:12px}
.mapa.horizontal .mapa-sub{margin-top:0}
@media (max-width:720px){.mapa.horizontal{grid-template-columns:1fr}.mapa.horizontal .mapa-hab{grid-template-columns:1fr}}button.enlace{background:none;border:0;padding:0;min-height:0;font:inherit;font-size:13px;color:inherit;text-decoration:underline;cursor:pointer}.mt-18{margin-top:18px}.mt-22{margin-top:22px}.mb-12{margin-bottom:12px}.mb-14{margin-bottom:14px}.mb-16{margin-bottom:16px}
.m-8-0-0{margin:8px 0 0}.m-14-0-6{margin:14px 0 6px}.m-6-0-0{margin:6px 0 0}.m-12-0-4{margin:12px 0 4px}
.m-0-0-12{margin:0 0 12px}.m-2-0-4{margin:2px 0 4px}.m-0-0-6{margin:0 0 6px}.m-0-0-4{margin:0 0 4px}
.m-0-0-8{margin:0 0 8px}.m-4-0-0{margin:4px 0 0}.m-8-0{margin:8px 0}.m-6-0-10{margin:6px 0 10px}.m-0-0-0-8{margin:0 0 0 8px}
.borde-abajo{border-bottom:1px solid var(--borde)}
.sin-arriba{padding-top:0}
.chip-grande{font-size:13px;padding:4px 10px}
.rompe{word-break:break-all;font-size:12px}
.aireado{line-height:1.8}
.aireado-2{line-height:2;font-size:15px}
/* Las pautas de la clave (ADR-163): la página marca las que se cumplen mientras se escribe. La que
   falta lleva un círculo vacío; la que se cumple, el tilde y el verde: la marca dice lo mismo que el color. */
ul.pautas{list-style:none;margin:2px 0 12px;padding:0;font-size:13px;color:var(--ink2)}
ul.pautas li::before{content:"○ ";color:var(--ink3)}
ul.pautas li.cumple{color:var(--verde)}
ul.pautas li.cumple::before{content:"✓ ";color:var(--verde)}
.relleno-editar{padding:14px 0 4px}
.caja-centrada{max-width:420px;margin:60px auto}
.boton-desplegable{display:inline-block;padding:8px 14px;border:1px solid var(--borde-md);border-radius:4px;color:var(--ink2);font-size:15px}
.columna-botones{display:flex;flex-direction:column;gap:6px;margin-top:6px;align-items:flex-start}
.quien-movil{margin:14px 0 0;color:var(--barra-texto)}

pre{white-space:pre-wrap;word-break:break-word;background:var(--bg);padding:8px;
    border-radius:4px;font-size:12px;margin:4px 0 0}
/* Precursores de un vistazo (ADR-154): lo que hay que traer hoy arriba, la matriz del cruce (una fila por contraparte
   y una columna por sustancia, por grupos de la Lista), las contrapartes en una tabla y lo demás plegado. */
.indice-pagina{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13px;margin:0 0 14px}
.banda-hoy{background:var(--ambar-fondo);border-color:var(--ambar-borde);margin:0 0 14px}
.banda-hoy.al-dia{background:var(--verde-fondo);border-color:var(--verde-borde)}
.banda-hoy ul{margin:6px 0;padding-left:18px}
.banda-hoy li{margin:4px 0}
.tarjetas.operaciones{margin:10px 0 14px}
a.tarjeta{display:block;color:inherit;text-decoration:none}
a.tarjeta:hover{border-color:var(--borde-md);text-decoration:none}
a.tarjeta[aria-current="true"]{border-color:var(--acento);border-width:2px;padding:15px}
/* El cruce por contraparte (piloto SEDRONAR, 26/10/2026): una fila por contraparte, con los nombres derechos en chips;
   la matriz con los encabezados girados no se leía. Se apila en el teléfono, como toda .apilada. */
/* La empresa en el RENPRE, arriba de Precursores (piloto SEDRONAR, fila 8): una fuente por renglón, con su rótulo. */
.fuentes-empresa>div{border-top:1px solid var(--borde);padding:8px 0}
table.matriz-de-relaciones td{vertical-align:top;padding:8px 12px 8px 0;white-space:nowrap}
table.matriz-de-relaciones td:first-child{min-width:220px;max-width:320px;white-space:normal}
table.matriz-de-relaciones td a{text-decoration:none}
table.matriz-por-sustancia{border-collapse:separate;border-spacing:0}
table.matriz-por-sustancia th,table.matriz-por-sustancia td{padding:6px 8px;vertical-align:top;text-align:center}
table.matriz-por-sustancia th{min-width:76px;font-size:11px;line-height:1.3;overflow-wrap:break-word}
table.matriz-por-sustancia th:first-child,table.matriz-por-sustancia td:first-child{position:sticky;left:0;z-index:1;background:var(--surface);text-align:left;
  min-width:200px;max-width:260px;border-right:1px solid var(--borde)}
/* Con 55 sustancias y 33 contrapartes la matriz se recorre adentro de su caja, con la contraparte y las sustancias a la vista: la página no se mueve. */
.desliza.caja-de-la-matriz{max-height:75vh;overflow:auto}
table.matriz-por-sustancia th{position:sticky;top:0;z-index:2;background:var(--surface)}
table.matriz-por-sustancia th:first-child{z-index:3}
/* Va después de las reglas de la matriz: a igual peso gana la última. La fecha de la constancia ya está en la matriz de relaciones de arriba, si la hay. */
@media (max-width:720px){
  table.matriz-de-relaciones td{white-space:normal}
  table.matriz-de-relaciones td:first-child{min-width:0;max-width:none}
  table.matriz-de-relaciones td.sin-relacion{display:none}
  table.matriz-por-sustancia th:first-child,table.matriz-por-sustancia td:first-child{min-width:124px;max-width:136px}
  #relaciones~.desliza table.matriz-por-sustancia td:first-child .nota{display:none}
}
.chips{display:flex;flex-wrap:wrap;gap:4px;margin:2px 0}
fieldset.tildes{border:1px solid var(--borde);border-radius:4px;padding:6px 12px 8px;margin:0 0 12px;min-width:0}
fieldset.tildes legend{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--ink2);
  padding:0 4px}
fieldset.tildes legend .cuenta-tildes{text-transform:none;letter-spacing:0;font-weight:400;margin-left:6px}
fieldset.tildes legend button.enlace{text-transform:none;letter-spacing:0;font-weight:400;margin-left:8px;
  color:var(--acento)}
.subgrupo-tildes{font-size:12px;color:var(--ink2);margin:6px 0 0}
.barra-accion{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;border-top:1px solid var(--borde);
  padding-top:10px;margin-top:6px}
.barra-accion .nota{flex:1 1 320px;margin:0}
.ficha-abierta{border:2px solid var(--borde-md)}
.ficha-abierta .cabeza{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin:0 0 8px}
.ficha-abierta .hoy{border-left:3px solid var(--borde-md);padding:6px 10px;margin:0 0 10px;background:var(--bg)}
.mantenimiento{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin:6px 0 0}
table.contrapartes td{padding:8px 10px 8px 0}
table.contrapartes td:first-child{min-width:220px}
table.contrapartes .chip{white-space:nowrap}
/* Las pantallas de mercado (ADR-248): sin los colores del semáforo. */
.dato-sube{color:var(--sube);font-weight:600}
.dato-baja{color:var(--baja);font-weight:600}
.dato-nuevo{color:var(--nuevo);font-weight:600}
.dato-parejo{color:var(--parejo)}

/* ADR-227, tanda 4: lo plegado de las pantallas del ranking. Una sección con su título de tercer nivel se pliega igual que una de Estado. */
details.plegada>summary h3{display:inline;margin:0}
details.plegada.dentro{margin:22px 0 0}
details.la-calma{margin:6px 0 12px}
/* La plata en una tarjeta: un rango («entre US$ … y US$ … por año») no entra en el tamaño de un número solo. */
.tarjeta .valor.rango{font-size:20px;line-height:1.25}