/* ==========================================================================
   Alma Campesina · Buscador de partes TAVOL TL1104
   Base visual: tokens de marca, tipografia, reticula y componentes del shell.
   Sin fuentes, imagenes ni hojas externas: la app abre con doble clic.
   ========================================================================== */

:root{
  /* Los colores de marca de Alma Campesina que usa la app. */
  --alma-tinta:#0A2540;
  --alma-acento:#C2371E;
  --alma-oro:#E0B13A;
  --alma-rojo-oscuro:#A32D18;
  --alma-ok:#1E7A3C;

  /* Neutros calidos: papel de manual, no pantalla de dashboard. */
  --alma-fondo:#F3EFE6;
  --alma-superficie:#FFFFFF;
  --alma-superficie-suave:#F8F5EE;
  /* Fondo de la fila abierta y del chip del numero. */
  --alma-superficie-sel:#FBF0E8;
  --alma-borde:#DCD4C5;
  /* Borde de los controles (campos, desplegables, botones). Un gris calido de
     3,9:1 sobre blanco y 3,6:1 sobre la superficie del campo: con el tono
     anterior (#C4B9A5) el limite del control quedaba en 1,9:1 y con luz de dia
     el tecnico no veia donde empieza el campo (WCAG 1.4.11 pide 3:1 para el
     limite de un componente). Se mide en tools/uat_app.py. */
  --alma-borde-fuerte:#8B7F6B;
  --alma-texto:#16202B;
  --alma-texto-suave:#5A6672;
  /* El "ink" del acento es el rojo oscuro: se referencia, no se copia, para
     que un cambio en --alma-rojo-oscuro no lo deje desincronizado. */
  --alma-acento-ink:var(--alma-rojo-oscuro);
  /* Hover del unico control oscuro (el boton del PDF): sube la tinta un
     punto. Tiene token propio para no repetir el hex en la regla. */
  --alma-tinta-hover:#16395C;
  /* Blanco del papel de la hoja de impresion. Es el fondo del papel, no la
     superficie de la paleta de pantalla (--alma-superficie): va aparte para
     que un cambio de superficie no altere lo que gasta la impresora. */
  --alma-papel:#FFFFFF;

  --alma-fuente:Inter,'Liberation Sans','Segoe UI',Roboto,Arial,sans-serif;
  --alma-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --alma-radio:10px;
  --alma-radio-chico:6px;
  --alma-sombra:0 1px 2px rgba(10,37,64,.06),0 10px 30px rgba(10,37,64,.05);
  --alma-ancho:1440px;
}

/* --- Base ---------------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--alma-fondo);
  color:var(--alma-texto);
  font-family:var(--alma-fuente);
  font-size:15px;
  line-height:1.55;
}

h1,h2,h3,p,figure{margin:0}

button,input,select{font:inherit;color:inherit}

button{cursor:pointer}

[hidden]{display:none!important}

/* Foco visible: anillo DOBLE. El oro solo da 2,00:1 sobre blanco y WCAG
   1.4.11 pide 3:1 para el indicador de foco, asi que el oro va por dentro
   (7,78:1 sobre la tinta, para los controles oscuros) y la tinta por fuera
   (15,54:1 sobre blanco y 13,54:1 sobre el papel). Los dos tonos se miden en
   tests/test_app_html.py. */
:focus-visible{
  outline:2px solid var(--alma-tinta);
  outline-offset:2px;
  box-shadow:0 0 0 2px var(--alma-oro);
}

.salto{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:20;
  padding:8px 14px;
  background:var(--alma-tinta);
  color:var(--alma-superficie);
  border-radius:0 0 var(--alma-radio-chico) 0;
  text-decoration:none;
}
.salto:focus{left:0}
/* Los dos enlaces de salto no se pisan: el segundo aparece debajo del primero. */
.salto + .salto:focus{top:2.8rem}

/* --- Cabecera ------------------------------------------------------------ */

/* El margen lateral es el MISMO que el de .taller: a 1440 px la marca y el
   modelo quedan a plomo con los paneles de abajo (antes la cabecera usaba
   40 px y el contenido 26, y los bordes no coincidian). */
.cabecera{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:16px clamp(14px,2.4vw,26px);
  background:var(--alma-superficie);
  border-bottom:3px solid var(--alma-oro);
}

.marca{display:flex;align-items:center;gap:12px}

.marca__isotipo{width:44px;height:44px;flex:none}

.marca__nombre{
  font-size:18px;
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--alma-tinta);
  line-height:1.15;
}

.marca__lema{
  margin-top:2px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--alma-rojo-oscuro);
}

.cabecera__producto{text-align:right}

.producto__nombre{
  font-size:14px;
  font-weight:800;
  letter-spacing:.06em;
  color:var(--alma-tinta);
}

.producto__detalle{font-size:12px;color:var(--alma-texto-suave)}

/* --- Reticula del taller ------------------------------------------------- */

.taller{
  width:100%;
  max-width:var(--alma-ancho);
  margin:0 auto;
  padding:clamp(14px,2.4vw,26px);
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(340px,.7fr);
  gap:clamp(14px,2vw,22px);
  align-items:start;
  flex:1;
}

.panel{
  background:var(--alma-superficie);
  border:1px solid var(--alma-borde);
  border-radius:var(--alma-radio);
  box-shadow:var(--alma-sombra);
}

.panel__cabecera{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:15px 18px;
  border-bottom:1px solid var(--alma-borde);
}

.panel__cabecera h2{
  font-size:13px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--alma-tinta);
}

.cuenta{
  font-size:13px;
  color:var(--alma-texto-suave);
  font-variant-numeric:tabular-nums;
}

/* --- Buscador y filtros -------------------------------------------------- */

.buscador{
  grid-column:1 / -1;
  padding:18px 20px 16px;
  display:grid;
  gap:14px;
}

.buscador__etiqueta{
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--alma-acento-ink);
}

.buscador__campo{display:grid;gap:6px}

#q{
  width:100%;
  padding:13px 14px;
  border:1.5px solid var(--alma-borde-fuerte);
  border-radius:8px;
  background:var(--alma-superficie-suave);
  font-size:clamp(16px,1.8vw,19px);
  line-height:1.3;
  transition:border-color .15s ease,background-color .15s ease;
}
#q::placeholder{color:var(--alma-texto-suave)}
#q:hover{border-color:var(--alma-texto-suave)}
#q:focus{border-color:var(--alma-acento);background:var(--alma-superficie)}

.buscador__pista{
  font-size:12px;
  color:var(--alma-texto-suave);
}

kbd{
  display:inline-block;
  min-width:18px;
  padding:1px 5px;
  border:1px solid var(--alma-borde-fuerte);
  border-bottom-width:2px;
  border-radius:4px;
  background:var(--alma-superficie);
  font-family:var(--alma-mono);
  font-size:11px;
  line-height:1.4;
  text-align:center;
  color:var(--alma-tinta);
}

.filtros{
  display:flex;
  flex-wrap:wrap;
  align-items:end;
  gap:12px;
}

.campo{display:grid;gap:5px;min-width:190px;max-width:340px}

.campo__etiqueta{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--alma-texto-suave);
}

.campo select{
  width:100%;
  min-width:0;
  min-height:38px;
  padding:7px 10px;
  border:1px solid var(--alma-borde-fuerte);
  border-radius:var(--alma-radio-chico);
  background:var(--alma-superficie);
}

.vistas{
  display:flex;
  margin-left:auto;
  border:1px solid var(--alma-borde-fuerte);
  border-radius:var(--alma-radio-chico);
  overflow:hidden;
}

.boton{
  padding:8px 13px;
  border:0;
  background:var(--alma-superficie);
  color:var(--alma-tinta);
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
  transition:background-color .15s ease,color .15s ease;
}
.boton:hover{background:var(--alma-superficie-suave)}
.boton[aria-pressed="true"]{
  background:var(--alma-tinta);
  color:var(--alma-superficie);
}
.vistas .boton + .boton{border-left:1px solid var(--alma-borde-fuerte)}

/* --- Resultados ---------------------------------------------------------- */

.resultados{grid-column:1;min-width:0}

#resultados{display:flex;flex-direction:column}

/* Fila del LISTADO (un <button>). Las filas del SVG de las gráficas son
   <g class="barra-fila">: no comparten clase a propósito, para que una regla
   de aquí (caja, padding, fondo, hover) no acabe pintando dentro de un SVG. */
.fila{
  display:block;
  width:100%;
  padding:12px 18px;
  border:0;
  border-bottom:1px solid var(--alma-borde);
  background:transparent;
  text-align:left;
  color:inherit;
  text-decoration:none;
  transition:background-color .12s ease;
}
.fila:last-child{border-bottom:0}
.fila:hover{background:var(--alma-superficie-suave)}
/* La fila abierta en la ficha: opción del listbox (aria-selected) o botón
   dentro de un grupo (aria-current). */
.fila[aria-selected="true"],
.fila[aria-current="true"]{
  background:var(--alma-superficie-sel);
  box-shadow:inset 3px 0 0 var(--alma-acento);
}
/* Con el foco encima, el anillo dorado se suma al testigo de la izquierda en
   vez de sustituirlo (el box-shadow del foco pisaria el inset). */
.fila[aria-selected="true"]:focus-visible,
.fila[aria-current="true"]:focus-visible{
  box-shadow:inset 3px 0 0 var(--alma-acento),0 0 0 2px var(--alma-oro);
}

.codigo{
  font-family:var(--alma-mono);
  font-size:12.5px;
  font-weight:700;
  color:var(--alma-tinta);
  overflow-wrap:anywhere;
}

.meta{font-size:12px;color:var(--alma-texto-suave)}

.chip{
  display:inline-block;
  padding:1px 8px;
  border:1px solid var(--alma-borde);
  border-radius:999px;
  background:var(--alma-superficie-suave);
  font-size:11px;
  font-weight:600;
  color:var(--alma-tinta);
  white-space:nowrap;
}

.vacio{
  padding:34px 20px;
  text-align:center;
  font-size:14px;
  color:var(--alma-texto-suave);
}

/* --- Detalle de la pieza ------------------------------------------------- */

/* La ficha va dentro de una columna que ocupa la fila de los resultados.
   Sin este envoltorio el `position:sticky` se ancla al contenedor de la
   rejilla y la ficha sigue bajando hasta el pie de la pagina: al llegar a las
   graficas se dibujaba ENCIMA de la tercera (849 px de ficha tapando la
   grafica de unidades). Con la columna, el sticky se detiene al final de su
   fila y el panel de graficas queda libre. */
.columna-detalle{
  grid-column:2;
  align-self:stretch;   /* la columna mide la fila: es el carril del sticky */
  min-width:0;
}

.detalle{
  position:sticky;
  top:18px;
  min-height:300px;
  padding:18px;
}

.detalle img{
  display:block;
  width:100%;
  max-height:46vh;
  object-fit:contain;
  background:var(--alma-superficie);
  border:1px solid var(--alma-borde);
  border-radius:8px;
}

.pista{
  font-size:13px;
  line-height:1.6;
  color:var(--alma-texto-suave);
}

.detalle .pista{
  max-width:34ch;
  margin:auto;
  padding-top:72px;
  text-align:center;
}

/* Ficha de la pieza. Las clases nuevas llevan el prefijo detalle__ para no
   chocar con las del listado; el resto (panel, codigo, chip, meta, pista) se
   reutiliza tal cual. */

.detalle__titulo{
  margin-top:2px;
  font-size:16px;
  font-weight:700;
  line-height:1.3;
  color:var(--alma-tinta);
  overflow-wrap:anywhere;
}

.detalle__original{
  margin-top:3px;
  font-size:12.5px;
  color:var(--alma-texto-suave);
  overflow-wrap:anywhere;
}

.detalle__marcadores{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
}

.detalle__numero{
  border-color:var(--alma-acento);
  background:var(--alma-superficie-sel);
  color:var(--alma-acento-ink);
  font-weight:800;
}

/* Caja de ALTURA FIJA + object-fit:contain (en `.detalle img` y reforzado
   aqui). Los 90 diagramas tienen 89 medidas distintas: sin la caja, los
   apaisados se deforman y los muy altos desbordan el panel. */
.detalle__figura{
  display:flex;
  align-items:center;
  justify-content:center;
  height:46vh;
  min-height:180px;
  max-height:46vh;
  margin-top:12px;
  overflow:hidden;
}

.detalle .detalle__figura img{
  /* La imagen se dibuja a su tamaño natural (hasta el tope de la caja), no
     estirada a la caja: asi su caja tiene la proporcion del dibujo y un
     object-fit:fill o un width/height fijos se notan en el acto. */
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

.detalle__pie{
  margin-top:6px;
  font-size:11.5px;
  color:var(--alma-texto-suave);
}

.detalle__datos{
  display:grid;
  gap:7px;
  margin-top:14px;
  font-size:13px;
}

.detalle__dato{
  display:grid;
  grid-template-columns:minmax(96px,auto) 1fr;
  gap:10px;
  align-items:baseline;
  padding-top:7px;
  border-top:1px dotted var(--alma-borde);
}
.detalle__dato:first-child{padding-top:0;border-top:0}

.detalle__dato dt{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--alma-texto-suave);
}

.detalle__dato dd{margin:0;overflow-wrap:anywhere}

.detalle__marca{
  display:inline-flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}

.detalle__copiar,
.detalle__imprimir{
  padding:3px 9px;
  border:1px solid var(--alma-borde-fuerte);
  border-radius:var(--alma-radio-chico);
  background:var(--alma-superficie-suave);
  font-size:11.5px;
  font-weight:600;
  color:var(--alma-tinta);
  transition:background-color .15s ease;
}
.detalle__copiar:hover,
.detalle__imprimir:hover{background:var(--alma-fondo)}

.detalle__aviso{
  font-size:11.5px;
  font-weight:600;
  color:var(--alma-ok);
}

.detalle__pdf{
  display:inline-block;
  margin-top:14px;
  padding:9px 14px;
  border-radius:var(--alma-radio-chico);
  background:var(--alma-tinta);
  color:var(--alma-superficie);
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  transition:background-color .15s ease;
}
.detalle__pdf:hover{background:var(--alma-tinta-hover)}

.detalle__nota{
  margin-top:8px;
  font-size:12px;
  font-style:italic;
  color:var(--alma-texto-suave);
}

/* --- Vista por conjunto -------------------------------------------------- */

.conjuntos{display:flex;flex-direction:column}

/* Cada conjunto es un <details>: cerrado enseña la miniatura de su diagrama,
   el código, el nombre y cuántas piezas trae; abierto lista sus filas. */
.grupo{border-bottom:1px solid var(--alma-borde)}
.grupo:last-child{border-bottom:0}

.grupo__titulo{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 18px;
  cursor:pointer;
  list-style:none;
  font-size:13.5px;
  font-weight:700;
  color:var(--alma-tinta);
}
.grupo__titulo::-webkit-details-marker{display:none}
.grupo__titulo:hover{background:var(--alma-superficie-suave)}

/* Flecha dibujada con bordes: no depende de ninguna fuente ni de un icono. */
.grupo__titulo::before{
  content:"";
  flex:none;
  width:0;
  height:0;
  border-left:6px solid var(--alma-texto-suave);
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  transition:transform .15s ease;
}
.grupo[open] > .grupo__titulo::before{transform:rotate(90deg)}

/* Miniatura en caja fija y object-fit:contain: los 90 diagramas tienen 89
   medidas distintas y sin la caja unos se deforman y otros desbordan. */
.grupo__miniatura{
  flex:none;
  width:64px;
  height:46px;
  object-fit:contain;
  background:var(--alma-superficie-suave);
  border:1px solid var(--alma-borde);
  border-radius:4px;
}

.grupo__texto{
  display:flex;
  flex-direction:column;
  gap:1px;
  flex:1;
  min-width:0;
}

.grupo__codigo{
  font-family:var(--alma-mono);
  font-size:11px;
  font-weight:600;
  line-height:1.3;
  color:var(--alma-texto-suave);
  overflow-wrap:anywhere;
}

.grupo__nombre{
  font-size:13.5px;
  font-weight:700;
  line-height:1.25;
  color:var(--alma-tinta);
}

.grupo__cuenta{flex:none}

.grupo__piezas{background:var(--alma-superficie)}
.grupo__piezas .fila{padding-left:28px}

/* Un conjunto que pasa del tope de filas pinta un aviso: el chip del título
   sigue diciendo el total y el corte tiene que poder leerse. */
.grupo__tope{
  margin:0;
  padding:8px 28px 10px;
  font-size:12px;
  font-style:italic;
  color:var(--alma-texto-suave);
}

/* --- Graficas ------------------------------------------------------------ */

.graficas{
  grid-column:1 / -1;
  padding:18px;
}

.graficas h2{
  margin-bottom:14px;
  font-size:13px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--alma-tinta);
}

#graficas{
  display:grid;
  /* 360 y no 260: con tres columnas de 440 px el SVG se dibuja casi a tamaño
     natural (letra de 10 px). Con 260 caben CUATRO columnas, sobra una y la
     letra baja a 7 px: no se lee. El min() deja que la columna encoja en
     pantallas angostas en vez de desbordar el panel. */
  grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));
  gap:16px;
}

/* El SVG se estira al ancho de su caja, con un tope: en una sola columna la
   caja mide 650 px y sin tope la letra del gráfico (11 px de viewBox) se
   dibujaría a 17 px, más grande que el texto de la app. */
#graficas svg{display:block;width:100%;max-width:480px;height:auto;margin:0 auto}

.grafica{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:14px;
  border:1px solid var(--alma-borde);
  border-radius:8px;
  background:var(--alma-superficie-suave);
}

.grafica h3{
  margin-bottom:8px;
  font-size:12px;
  font-weight:700;
  color:var(--alma-tinta);
}

/* Qué mide el largo de la barra. Sin esta línea, «Otros (52 conjuntos más)»
   es un número sin unidad. */
.grafica__leyenda{
  margin-bottom:6px;
  font-size:11.5px;
  line-height:1.45;
  color:var(--alma-texto-suave);
}

/* Renglón de estado: ocupa las tres columnas de la rejilla, encima de las
   gráficas, y dice qué se está viendo. */
.grafica__estado{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 10px;
  padding:7px 12px;
  border:1px dashed var(--alma-borde-fuerte);
  border-radius:var(--alma-radio-chico);
  background:var(--alma-superficie);
  font-size:12.5px;
  color:var(--alma-texto-suave);
}

.grafica__quitar{
  padding:2px 10px;
  border:1px solid var(--alma-borde-fuerte);
  border-radius:999px;
  background:var(--alma-superficie-suave);
  font-size:11.5px;
  font-weight:600;
  color:var(--alma-tinta);
  transition:background-color .15s ease;
}
.grafica__quitar:hover{background:var(--alma-fondo)}

.grafica__aviso{
  grid-column:1 / -1;
  font-size:12.5px;
  color:var(--alma-texto-suave);
}

/* Barras de las gráficas (rect.barra, dibujadas por graficas.js). Todas van
   en el acento de la marca, que llega en el atributo fill del SVG; aqui solo
   se añade el realce al raton y al foco, y el cursor de mano. */
.barra{
  cursor:pointer;
  transition:fill-opacity .12s ease,stroke-width .12s ease;
}
.barra:hover{fill-opacity:.72}
/* El foco visible de toda la app es el anillo dorado de :focus-visible; la
   barra añade el trazo para que se vea también sobre el relleno del acento. */
.barra:focus-visible{
  fill-opacity:.72;
  stroke:var(--alma-tinta);
  stroke-width:3;
}

/* «Otros» agrupa lo que no es un conjunto ni una categoria: no se pulsa. */
.barra[data-estatica="1"]{cursor:default}
.barra[data-estatica="1"]:hover{fill-opacity:1}

/* --- Pie ----------------------------------------------------------------- */

.pie{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:10px;
  /* Mismo margen lateral que la cabecera y la rejilla del taller. */
  padding:16px clamp(14px,2.4vw,26px);
  border-top:1px solid var(--alma-borde);
  font-size:11.5px;
  color:var(--alma-texto-suave);
}

/* --- Adaptacion a pantallas angostas ------------------------------------- */

/* Una sola columna por debajo de 960 px: el detalle cae debajo de la lista
   (el orden del DOM ya es buscador, resultados, detalle, graficas), que es
   como se lee en un taller con el movil en la mano. */
@media (max-width:960px){
  .taller{grid-template-columns:minmax(0,1fr)}
  .resultados,.columna-detalle,.graficas{grid-column:1}
  .columna-detalle{align-self:auto}
  .detalle{position:static;min-height:0}
  .detalle .pista{padding-top:24px}
}

/* 720 px: el ancho de una tableta pequena. El buscador va a pantalla
   completa, los filtros en una columna y las dos vistas ocupan el ancho. */
@media (max-width:720px){
  .cabecera{flex-wrap:wrap;gap:10px}
  .cabecera__producto{text-align:left}
  .buscador{padding:14px}
  #q{font-size:16px}   /* menos de 16 px y iOS hace zoom al enfocar el campo */
  .filtros{display:grid;grid-template-columns:minmax(0,1fr)}
  .campo{min-width:0;max-width:100%}
  .vistas{width:100%;margin-left:0}
  .vistas .boton{flex:1}
  .panel__cabecera{flex-wrap:wrap}
}

/* --- Movimiento reducido ------------------------------------------------- */

/* Quien pide menos movimiento en el sistema no tiene por que ver como la
   lista se desliza al teclear: fuera transiciones y animaciones. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}

/* --- Hoja de impresion --------------------------------------------------- */

/* En papel no hay navegacion, ni filtros, ni graficas: queda la ficha de la
   pieza que el tecnico tiene delante, para llevarsela al tractor. */
@page{margin:16mm}

@media print{
  .cabecera,.pie,.buscador,.resultados,.graficas,.salto,noscript{display:none!important}

  body{background:var(--alma-papel);color:var(--alma-tinta);font-size:11pt}
  .taller{display:block;max-width:none;padding:0}

  /* La ficha, sin la caja de panel: en papel solo gastaria tinta. */
  .detalle{
    position:static;
    min-height:0;
    padding:0;
    border:0;
    box-shadow:none;
  }
  .detalle__figura{height:auto;max-height:none;min-height:0;break-inside:avoid}
  /* La regla de pantalla (`.detalle .detalle__figura img{max-height:100%}`) es
     mas especifica que `.detalle img`: sin este tope, un diagrama vertical se
     dibuja a tamaño natural y se come tres hojas de papel. */
  .detalle .detalle__figura img{max-width:100%;max-height:10cm}
  /* Una fila de datos partida por la mitad no se lee en el taller. */
  .detalle__dato{break-inside:avoid}
  .detalle__copiar,.detalle__aviso,.detalle__imprimir{display:none!important}

  /* El enlace no se puede pulsar y su ruta relativa (../salida/...) no lleva
     a ninguna parte en papel: se imprime el nombre del manual y la pagina,
     que ya viajan en el title del enlace. */
  .detalle__pdf{
    display:block;
    margin-top:10px;
    padding:0;
    background:none;
    color:var(--alma-tinta);
    font-size:0;
  }
  .detalle__pdf::after{
    content:attr(title);
    font-size:10pt;
    font-weight:600;
  }
}