@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fuentes/barlow-latin-400-normal.b0a8ad37ac.woff2') format('woff2');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fuentes/barlow-latin-600-normal.4b52ddd483.woff2') format('woff2');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fuentes/barlow-latin-700-normal.2d797dd8b3.woff2') format('woff2');}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fuentes/barlow-condensed-latin-600-normal.215a93c696.woff2') format('woff2');}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fuentes/barlow-condensed-latin-700-normal.3787a5a419.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url('/assets/fuentes/jetbrains-mono-latin-wght-normal.18be452724.woff2') format('woff2');}
/* StowHand — freight calculator site
   Type: Barlow family (display condensed / body regular), JetBrains Mono for figures.
   Colour: container blue as brand, safety orange as the single accent. */

:root {
  --ground:      #F4F6F7;
  --surface:     #FFFFFF;
  --surface-2:   #EAEEF0;
  --ink:         #101B22;
  --muted:       #5A6B75;
  --rule:        #DCE3E7;
  --rule-strong: #9FADB5;
  --brand:       #0B3C5D;
  --accent:      #C7481A;
  --accent-soft: #FBE9E2;
  --good:        #1B5E48;
  --warn:        #8A5A06;
  --warn-soft:   #FBF0DA;
  --bad:         #B3121B;
  --bad-soft:    #FBE0E1;

  --f-display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --f-body:    "Barlow", "Helvetica Neue", Arial, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --logo: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><circle cx="16" cy="10.5" r="7.2" fill="black" fill-opacity="0.55"/><circle cx="8.8" cy="22.9" r="7.2" fill="black"/><circle cx="23.2" cy="22.9" r="7.2" fill="black"/></svg>');
  --maxw: 1080px;
  --readw: 68ch;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:      #0C1114;
    --surface:     #131A1F;
    --surface-2:   #1A2329;
    --ink:         #E7ECEF;
    --muted:       #94A3AC;
    --rule:        #232D34;
    --rule-strong: #4A5A63;
    --brand:       #7FB2D0;
    --accent:      #EE7B4E;
    --accent-soft: #34211A;
    --good:        #6FC2A2;
    --warn:        #D9A94E;
    --warn-soft:   #2E2513;
    --bad:         #FF7B7B;
    --bad-soft:    #3A1618;
  }
}
:root[data-theme="dark"] {
  --ground:      #0C1114;
  --surface:     #131A1F;
  --surface-2:   #1A2329;
  --ink:         #E7ECEF;
  --muted:       #94A3AC;
  --rule:        #232D34;
  --rule-strong: #4A5A63;
  --brand:       #7FB2D0;
  --accent:      #EE7B4E;
  --accent-soft: #34211A;
  --good:        #6FC2A2;
  --warn:        #D9A94E;
  --warn-soft:   #2E2513;
  --bad:         #FF7B7B;
  --bad-soft:    #3A1618;
}

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.shell { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* ---------- header ---------- */
.site-header {
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
}
.site-header .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 62px;
  flex-wrap: wrap;
}
.brand {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.brand .mark {
  width: 22px; height: 22px;
  background: var(--accent);
  -webkit-mask: var(--logo) center/contain no-repeat;
          mask: var(--logo) center/contain no-repeat;
  flex: none;
}
.site-nav { display: flex; gap: 22px; }
.site-nav a {
  font-family: var(--f-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover, .site-nav a:focus-visible { color: var(--ink); border-bottom-color: var(--accent); }

/* ---------- breadcrumb ---------- */
.crumbs {
  font-family: var(--f-mono);
  font-size: 11.5px;
  color: var(--muted);
  padding: 16px 0 0;
  letter-spacing: .02em;
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.crumbs span { opacity: .5; margin: 0 6px; }

/* ---------- typography ---------- */
h1 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 5.4vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: -.005em;
  margin: 14px 0 12px;
  text-wrap: balance;
}
h2 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 3.4vw, 1.85rem);
  line-height: 1.15;
  margin: 44px 0 14px;
  text-wrap: balance;
}
h3 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.22rem;
  margin: 26px 0 8px;
}
p { margin: 0 0 16px; max-width: var(--readw); }
.lede { font-size: 1.12rem; color: var(--muted); max-width: 62ch; }
ul, ol { max-width: var(--readw); padding-left: 20px; }
li { margin-bottom: 8px; }
a { color: var(--accent); text-underline-offset: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
main { padding-bottom: 72px; }
strong { font-weight: 600; }
code, kbd { font-family: var(--f-mono); font-size: .88em; background: var(--surface-2); padding: 1px 5px; border-radius: 2px; }

/* ---------- calculator ---------- */
.calc {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  margin: 28px 0 34px;
}
.calc-body { padding: 22px 22px 4px; }
/* La tabla de bultos es lo mas ancho del sitio. Antes se salia y habia que
   arrastrar la barra de abajo para llegar a la cruz de borrar. Se le deja
   estirarse hasta el borde de la caja y se aprieta el relleno lateral. */
.calc-body .items { margin-left: -22px; margin-right: -22px; }
.calc-body .items > .items-head,
.calc-body .items > .items-pista,
.calc-body .items > .items-total { padding-left: 22px; padding-right: 22px; }
.calc-body .items .scroll { padding-left: 22px; padding-right: 22px; }
@media (max-width: 700px) {
  .calc-body .items { margin-left: -14px; margin-right: -14px; }
  .calc-body .items > .items-head,
  .calc-body .items > .items-pista,
  .calc-body .items > .items-total,
  .calc-body .items .scroll { padding-left: 14px; padding-right: 14px; }
}
.calc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px 18px;
  margin-bottom: 18px;
}
/* Los rotulos miden una, dos o tres lineas (mas todavia con el segundo idioma) y los
   controles de una misma fila acababan a alturas distintas. El primer apaño fue
   anclarlos abajo con margin-top:auto, y estaba MAL: en el campo que lleva pista
   debajo el control se quedaba arriba y en los de al lado bajaba del todo. Se veia
   feo justo en la primera fila.
   Lo correcto es que el rotulo, el control y la pista compartan carril con los campos
   vecinos: subgrid. Asi todos los rotulos ocupan la altura del mas alto y todos los
   controles arrancan a la misma linea, lleve el rotulo las que lleve. */
.field { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 5px; }
/* Sin esto, un campo de una linea se estiraria hasta la altura del mas alto de su fila. */
.field > input, .field > select, .field > textarea { align-self: start; }
@supports not (grid-template-rows: subgrid) {
  .field { display: flex; flex-direction: column; gap: 5px; }
}
.field label {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.field input, .field select, .field textarea {
  font-family: var(--f-mono);
  font-size: 15px;
  padding: 9px 10px;
  border: 1px solid var(--rule-strong);
  background: var(--ground);
  color: var(--ink);
  border-radius: 0;
  width: 100%;
  font-variant-numeric: tabular-nums;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
/* El texto largo de la carta de porte: son direcciones y descripciones, no cifras,
   asi que ni tabular-nums ni tamaño de dato. */
.field textarea {
  resize: vertical; min-height: 62px; line-height: 1.45;
  font-family: var(--f-body); font-size: 14.5px; font-variant-numeric: normal;
}
.field input[type="text"] { font-family: var(--f-body); font-variant-numeric: normal; }
.field .hint { font-size: 12px; color: var(--muted); line-height: 1.35; }
/* El segundo idioma del rotulo. Va mas apagado para que se lea como lo que es —una
   traduccion— y no como mas nombre del campo. */
.field label .lab-2 { opacity: .68; }
.field label .lab-2::before { content: "· "; }

.field-wide { grid-column: 1 / -1; }
.field-span2 { grid-column: span 2; }
@media (max-width: 620px) { .field-span2 { grid-column: 1 / -1; } }

.calc-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
button.go, button.reset {
  font-family: var(--f-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 10px 22px;
  border: 1px solid var(--accent);
  cursor: pointer;
  border-radius: 0;
}
button.go { background: var(--accent); color: #fff; }
button.go:hover { filter: brightness(1.08); }
button.reset { background: transparent; color: var(--muted); border-color: var(--rule-strong); }
button.reset:hover { color: var(--ink); border-color: var(--ink); }

.result {
  border-top: 1px solid var(--rule);
  background: var(--surface-2);
  padding: 20px 22px;
}
.result[hidden] { display: none; }
.result-headline {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.result-label {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.result-value {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 2.9rem);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.result-note { font-size: .95rem; color: var(--muted); margin: 8px 0 0; max-width: 62ch; }
.workings {
  margin-top: 16px;
  border-top: 1px dashed var(--rule-strong);
  padding-top: 14px;
  font-family: var(--f-mono);
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  overflow-x: auto;
}
.workings b { color: var(--ink); font-weight: 600; }
.workings .row { white-space: nowrap; }
.err {
  color: var(--accent);
  font-size: .92rem;
  font-weight: 500;
  margin: 0;
}

/* ---------- info blocks ---------- */
/* ---------- figuras dentro de las guias ----------
   Las guias eran ladrillos de texto. Lo dijo Marco: "le falta imagenes, es muy
   tocho de leer".
   Se hacen con HTML y CSS, NO con SVG: un SVG con viewBox se escala entero, y en
   un movil de 360 px el texto de dentro acaba a 7 px, ilegible. En HTML el texto
   es texto de verdad: se relee, se puede seleccionar, se imprime y respeta el
   tamaño de letra del que lo lee. */

/* Comparacion de magnitudes. UN SOLO COLOR para todas las barras: la longitud ya
   cuenta la historia, y pintarlas de colores distintos seria codificar dos veces
   lo mismo. El numero va al final de la barra, no dentro, que en las barras
   cortas no cabe. */
/* UNA sola rejilla para todo el grafico, no una por fila. Con una rejilla por fila,
   cada una medía sus columnas por su cuenta: la fila del texto corto dejaba la pista
   26 px mas ancha que las otras y las barras dejaban de estar en la misma escala.
   Un grafico con dos escalas distintas miente, aunque los porcentajes esten bien.
   Las filas usan display:contents para que sus celdas entren en la rejilla de arriba. */
.grafico {
  margin: 24px 0; display: grid;
  grid-template-columns: minmax(0, 15em) 1fr auto;
  gap: 10px 12px; align-items: center;
}
.g-fila { display: contents; }
.g-et { font-size: .92rem; line-height: 1.3; }
.g-et small { display: block; color: var(--muted); font-size: .8rem; }
.g-barra { background: var(--surface-2); height: 22px; position: relative; }
.g-barra span {
  display: block; height: 100%; min-width: 3px; background: var(--accent);
  border-radius: 0 4px 4px 0;
}
.g-val { font-family: var(--f-mono); font-size: .9rem; font-weight: 600; white-space: nowrap; }
.grafico figcaption, .linea figcaption {
  font-size: .84rem; color: var(--muted); line-height: 1.5; max-width: 64ch;
}
.grafico figcaption { grid-column: 1 / -1; margin-top: 4px; }
.linea figcaption { margin-top: 10px; }
@media (max-width: 620px) {
  .grafico { grid-template-columns: 1fr auto; row-gap: 4px; }
  .g-et { grid-column: 1 / -1; }
}

/* Linea de tiempo de plazos. Es un diagrama, no un grafico: no esta a escala y se
   dice en el pie. */
.linea { margin: 24px 0; }
.linea ol {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 0; margin: 0; padding: 0; list-style: none;
}
.linea li {
  position: relative; padding: 26px 10px 0 0; margin: 0;
  border-top: 2px solid var(--rule-strong);
}
.linea li::before {
  content: ""; position: absolute; top: -7px; left: 0;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 3px var(--surface);
}
.linea li.fin::before { background: var(--bad); }
.linea b { display: block; font-family: var(--f-mono); font-size: .82rem; letter-spacing: .04em; }
.linea span { display: block; font-size: .86rem; color: var(--muted); line-height: 1.35; margin-top: 2px; }
@media (max-width: 620px) {
  .linea ol { grid-auto-flow: row; }
  .linea li { border-top: 0; border-left: 2px solid var(--rule-strong); padding: 0 0 16px 18px; }
  .linea li::before { top: 2px; left: -7px; }
}

/* Cita literal de una norma. Se distingue del resto a proposito: cuando una pagina
   dice "esto lo dice el articulo 30", conviene que se vea que son SUS palabras y no
   las nuestras. */
blockquote {
  margin: 22px 0; padding: 2px 0 2px 18px;
  border-left: 3px solid var(--rule-strong);
  color: var(--muted);
}
blockquote p { margin: 0; max-width: 64ch; font-size: .97rem; font-style: italic; }
blockquote strong { color: var(--ink); font-style: normal; }

.note {
  border-left: 3px solid var(--warn);
  background: var(--warn-soft);
  padding: 14px 16px;
  margin: 22px 0;
}
.note p { margin: 0; max-width: 64ch; font-size: .96rem; }
.note .tag {
  display: block;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--warn);
  font-weight: 600;
  margin-bottom: 5px;
}

.tscroll { overflow-x: auto; margin: 20px 0; }
table.data { border-collapse: collapse; width: 100%; font-size: .94rem; min-width: 460px; }
table.data th {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  font-weight: 500;
  padding: 0 14px 8px 0;
  border-bottom: 1px solid var(--rule-strong);
}
table.data td {
  padding: 11px 14px 11px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  font-variant-numeric: tabular-nums;
}
table.data td:first-child { font-weight: 600; }

/* ---------- faq ---------- */
.faq { border-top: 1px solid var(--rule-strong); margin-top: 12px; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.12rem;
  padding: 15px 30px 15px 0;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--f-mono);
  color: var(--accent);
  font-size: 1.1rem;
}
.faq details[open] summary::after { content: "−"; }
.faq .answer { padding: 0 0 16px; }
.faq .answer p:last-child { margin-bottom: 0; }

/* ---------- tool index cards ---------- */
/* Cada tarjeta lleva su propio borde, y no hay caja alrededor.
   Antes el borde iba en el contenedor: bastaba que un grupo no llenara la fila para
   que quedara un hueco enmarcado y vacío al lado de las tarjetas. Con el borde en la
   tarjeta, un grupo de una sola calculadora se ve como una tarjeta y ya está, y esto
   aguanta cualquier número de herramientas por grupo. */
.tool-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 12px;
  margin: 22px 0;
}
.tool-list a {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid transparent;
  padding: 18px 18px 20px;
  text-decoration: none;
  color: inherit;
  display: block;
}
.tool-list a:hover { border-left-color: var(--accent); background: var(--surface-2); }
.tool-list .t {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.18rem;
  line-height: 1.2;
  margin-bottom: 6px;
  display: block;
}
.tool-list .d { font-size: .92rem; color: var(--muted); line-height: 1.5; }

/* ---------- ad slots ---------- */
.ad-slot { margin: 34px 0; min-height: 0; text-align: center; }
.ad-slot:empty { display: none; }

/* ---------- byline ---------- */
.byline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: .02em;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 12px 0;
  margin: 30px 0 0;
}
.byline b { color: var(--ink); font-weight: 600; }

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--rule);
  background: var(--surface);
  padding: 34px 0 44px;
  font-size: .9rem;
  color: var(--muted);
}
.site-footer .shell { display: flex; flex-direction: column; gap: 14px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-nav a { color: var(--muted); text-decoration: none; }
.footer-nav a:hover { color: var(--accent); text-decoration: underline; }
.site-footer p { margin: 0; max-width: 70ch; font-size: .86rem; }

@media (max-width: 620px) {
  body { font-size: 16px; }
  .site-header .shell { min-height: 56px; padding-top: 10px; padding-bottom: 10px; }
  .site-nav { gap: 16px; }
  .calc-body { padding: 18px 16px 4px; }
  .result { padding: 18px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- language switcher ---------- */
.header-right { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.lang {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--rule-strong);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
}
.lang a, .lang span {
  padding: 4px 9px;
  text-decoration: none;
  display: block;
}
.lang a { color: var(--muted); }
.lang a:hover { color: var(--ink); background: var(--surface-2); }
.lang [aria-current="true"] { background: var(--accent); color: #fff; }
@media (max-width: 620px) {
  .header-right { gap: 12px; width: 100%; justify-content: space-between; }
}

/* ---------- figure ---------- */
.figure {
  margin: 20px 0 0;
  padding: 0;
}
.figure[hidden] { display: none; }
/* Botones de lado en la lista de colocacion: a que lado del ancho va el bloque.
   Es lo que la herramienta antes reconocia que no decidia. */
.seq-lado button { padding: 4px 7px; font-size: 12px; line-height: 1; }
.seq-lado button.on {
  color: var(--accent); border-color: var(--accent); background: var(--accent-soft, transparent);
  font-weight: 700;
}
.share-pista {
  margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted);
  max-width: 62ch;
}
.figure-canvas {
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: 14px;
  overflow-x: auto;
}
.figure-canvas svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }

/* Dos vistas dentro de la misma figura: alzado y planta. Ninguna sola sirve —
   el alzado no puede ensenar lo que va uno al lado del otro a lo ancho, y la
   planta no puede ensenar la altura ni el apilado. */
.figure-canvas .vista {
  margin: 0 0 6px; font-family: var(--f-mono); font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.figure-canvas .vista + svg { margin-bottom: 18px; }
.figure-canvas svg + .vista { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--rule); }
.figure figcaption {
  font-family: var(--f-mono);
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.5;
}

/* ---------- extra tables inside the result ---------- */
.extra:empty { display: none; }
.extra { margin-top: 18px; }
.extra h4 {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin: 0 0 8px;
}
.extra table { border-collapse: collapse; width: 100%; font-size: .9rem; min-width: 380px; }
.extra th {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  font-weight: 500;
  padding: 0 12px 6px 0;
  border-bottom: 1px solid var(--rule-strong);
}
.extra td {
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--rule);
  font-variant-numeric: tabular-nums;
}
.extra td:first-child { font-weight: 600; }
.extra tr.best td { color: var(--accent); }
.extra .scroll { overflow-x: auto; }

/* ---------- share ---------- */
.share {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--rule-strong);
}
.share button {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 7px 12px;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  cursor: pointer;
}
.share button:hover { color: var(--ink); border-color: var(--ink); }
.share-msg {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: .04em;
}

/* ---------- item table (mixed-load tool) ---------- */
.items { margin-bottom: 20px; }
.items-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.items-head h3 {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); font-weight: 500; margin: 0;
}
.items .scroll { overflow-x: auto; }
table.items-table { border-collapse: collapse; width: 100%; min-width: 640px; }
table.items-table th {
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--muted); text-align: left;
  font-weight: 500; padding: 0 8px 7px 0; border-bottom: 1px solid var(--rule-strong);
  white-space: nowrap;
}
table.items-table td { padding: 7px 6px 7px 0; border-bottom: 1px solid var(--rule); vertical-align: middle; }
table.items-table input, table.items-table select {
  font-family: var(--f-mono); font-size: 13.5px; padding: 6px 7px;
  border: 1px solid var(--rule-strong); background: var(--ground); color: var(--ink);
  border-radius: 0; width: 100%; font-variant-numeric: tabular-nums;
}
table.items-table input[type="text"] { font-family: var(--f-body); font-size: 14px; }
/* Copia de la descripcion solo para imprimir: en pantalla, invisible. */
table.items-table .papel { display: none; }

/* El diametro no va siempre en la misma casilla: de pie va en el largo y tumbada
   va en el ancho. En vez de ponerlo en la cabecera (que solo podia ser cierta para
   una de las formas), se marca la casilla que toca en cada fila. */
table.items-table td { position: relative; }
table.items-table .dia {
  position: absolute; top: 50%; left: 4px; transform: translateY(-50%);
  font-family: var(--f-mono); font-size: 12px; line-height: 1;
  color: var(--accent); pointer-events: none; z-index: 1;
}
table.items-table td.con-dia input { padding-left: 18px; }
.items-pista {
  margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted);
}
.items-pista b { color: var(--accent); font-weight: 600; }
table.items-table input:focus, table.items-table select:focus { border-color: var(--accent); }
table.items-table .num { width: 68px; }
table.items-table .qty { width: 52px; }
table.items-table .name { min-width: 118px; }
table.items-table .drop { min-width: 104px; }
/* No todos los desplegables necesitan lo mismo. El de "¿soporta carga?" es Si/No
   y con poco le vale; los de FORMA y POSICION llevan texto largo y salian
   cortados ("Se puede g:"). Se les da lo que piden. */
table.items-table .drop-si { min-width: 62px; }
table.items-table .drop-ancho { min-width: 132px; }
button.row-del {
  font-family: var(--f-mono); font-size: 15px; line-height: 1;
  background: transparent; color: var(--muted); border: 1px solid var(--rule-strong);
  padding: 5px 9px; cursor: pointer; border-radius: 0;
}
button.row-del:hover { color: var(--accent); border-color: var(--accent); }
button.row-add {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 500; padding: 7px 12px;
  background: transparent; color: var(--muted); border: 1px solid var(--rule-strong);
  cursor: pointer; border-radius: 0;
}
button.row-add:hover { color: var(--ink); border-color: var(--ink); }
.items-total { font-family: var(--f-mono); font-size: 11.5px; color: var(--muted); margin-top: 10px; }
.items-total b { color: var(--ink); font-weight: 600; }

/* verdict banner */
.verdict {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 600; padding: 5px 11px;
  border: 1px solid currentColor; display: inline-block; margin-bottom: 10px;
}
.verdict.ok { color: var(--good); background: var(--good-soft); }
.verdict.no { color: var(--accent); background: var(--accent-soft); }
:root { --good-soft: #E2F0EA; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --good-soft: #16281F; } }
:root[data-theme="dark"] { --good-soft: #16281F; }
.verdict.warn { color: var(--warn); background: var(--warn-soft); }
.workings .aviso {
  display: inline-block; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600; color: var(--warn); border: 1px solid var(--warn); padding: 1px 6px;
}
.workings .row { white-space: normal; }
.workings .row:has(.aviso) { color: var(--ink); }

/* ---------- printable plan ---------- */
.print-only { display: none; }

@media print {
  /* Sólo se imprime el plan: los datos, el resultado, el dibujo y los avisos. */
  .site-header, .site-footer, .crumbs, .byline, .ad-slot, .share,
  .faq, .note, .tool-list, .lede, h1, .items-head, button, .field .hint,
  main > h2, main > p, main > ul, main > ol, main > .tscroll, main > div > h2,
  main > blockquote, main > figure, main > .grafico, main > .linea,
  main > .suggest { display: none !important; }

  /* El cuerpo arrancaba 18 px por debajo del borde de la hoja. Con tres ejemplares de
     una pagina cada uno, esos 18 px son los que mandaban el pie del primero a una hoja
     de mas mientras los otros dos cabian. */
  html, body { margin: 0; padding: 0; }

  :root {
    --ground:#FFFFFF; --surface:#FFFFFF; --surface-2:#FFFFFF;
    --ink:#000000; --muted:#3A3A3A; --rule:#BBBBBB; --rule-strong:#666666;
    --accent:#8A3411; --brand:#0B3C5D; --good:#1B5E48; --warn:#6E4705;
    --accent-soft:#FFFFFF; --warn-soft:#FFFFFF; --good-soft:#FFFFFF;
  }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .shell { max-width: none; padding: 0; }
  main { padding: 0; }

  .print-only { display: block; }
  .print-head {
    border-bottom: 1.5pt solid #000; padding-bottom: 6pt; margin-bottom: 12pt;
  }
  .print-head .ph-brand {
    font-family: var(--f-display); font-weight: 700; font-size: 15pt;
    text-transform: uppercase; letter-spacing: .02em;
  }
  .print-head .ph-title { font-family: var(--f-display); font-weight: 600; font-size: 13pt; margin-top: 2pt; }
  .print-head .ph-meta { font-family: var(--f-mono); font-size: 7.5pt; color: #444; margin-top: 3pt; }

  .calc { border: none; margin: 0; }
  .calc-body { padding: 0 0 8pt; }
  .calc-grid { gap: 4pt 14pt; }
  .field label { font-size: 6.5pt; }
  .field input, .field select, .field textarea { border: none; padding: 0; background: none; font-size: 9pt; font-weight: 600; }
  /* En papel un select no se puede desplegar: si el texto no cabe, se corta y
     el dato se pierde. Que parta de linea. */
  .field select { white-space: normal; overflow-wrap: anywhere; height: auto; }
  .field { break-inside: avoid; }
  /* Los selectores base llevan el elemento delante, así que aquí hay que igualar
     la especificidad o el borde del formulario se sigue imprimiendo. */
  .no-print { display: none !important; }

  /* En pantalla la tabla puede desbordarse y se desplaza sola; en papel no hay
     desplazamiento que valga, así que se reparte a lo ancho de la hoja con
     anchos fijos. Sin esto la última columna se corta por el borde derecho y la
     descripción se queda en «Pieza redonda sobre p». */
  table.items-table { min-width: 0; width: 100%; table-layout: fixed; }
  table.items-table th { font-size: 6.5pt; padding-bottom: 4pt; white-space: normal; overflow-wrap: anywhere; }
  /* Aire entre columnas: sin el, la forma rozaba con el largo. */
  table.items-table td, table.items-table th { padding: 3pt 7pt 3pt 0; }
  /* Los anchos de impresion van por nth-child, asi que dependen de CUANTAS
     columnas tiene cada tabla. Y hay DOS tablas distintas con la misma pinta:
     la de carga mixta (9 visibles) y la de peso por ejes (5 visibles). Antes
     compartian reglas y los anchos de una descuadraban la otra, cosa que solo
     se ve al imprimir. Cada una con las suyas.
       mixta: 1 descripcion · 2 forma · 3 largo · 4 ancho · 5 alto
              6 uds · 7 peso · 8 soporta carga · 9 posicion        suman 100
       ejes:  1 descripcion · 2 largo · 3 ancho · 4 uds · 5 peso   suman 100 */
  .t-mixta th:nth-child(1), .t-mixta td:nth-child(1) { width: 19%; }
  .t-mixta th:nth-child(2), .t-mixta td:nth-child(2) { width: 16%; }
  .t-mixta th:nth-child(3), .t-mixta td:nth-child(3),
  .t-mixta th:nth-child(4), .t-mixta td:nth-child(4),
  .t-mixta th:nth-child(5), .t-mixta td:nth-child(5) { width: 7.5%; }
  .t-mixta th:nth-child(6), .t-mixta td:nth-child(6) { width: 5%; }
  .t-mixta th:nth-child(7), .t-mixta td:nth-child(7) { width: 9%; }
  .t-mixta th:nth-child(8), .t-mixta td:nth-child(8) { width: 13%; }
  .t-mixta th:nth-child(9), .t-mixta td:nth-child(9) { width: 15.5%; }

  .t-ejes th:nth-child(1), .t-ejes td:nth-child(1) { width: 40%; }
  .t-ejes th:nth-child(2), .t-ejes td:nth-child(2),
  .t-ejes th:nth-child(3), .t-ejes td:nth-child(3) { width: 16%; }
  .t-ejes th:nth-child(4), .t-ejes td:nth-child(4) { width: 10%; }
  .t-ejes th:nth-child(5), .t-ejes td:nth-child(5) { width: 18%; }

  /* En papel el texto tiene que partirse, no salirse por encima del de al lado. */
  table.items-table td { overflow: hidden; }
  table.items-table select { white-space: normal; overflow-wrap: anywhere; }
  /* El simbolo del diametro va posicionado sobre la casilla; en papel se pone
     delante del numero. OJO con el [hidden]: al forzar display se encendian TODOS
     los simbolos y salia una Ø en cada casilla, hasta en las cajas. */
  table.items-table .dia:not([hidden]) { position: static; display: inline; margin-right: 2pt; }
  table.items-table .dia[hidden] { display: none !important; }
  table.items-table td.con-dia input { padding-left: 0; }
  /* Y que el numero vaya en la MISMA linea que el simbolo, no debajo. */
  table.items-table input { display: inline; width: auto; max-width: 100%; }

  /* La descripcion se cortaba en "Pieza redonda sobre p": un <input> no parte
     lineas al imprimir, por mucho ancho que se le de. Asi que en papel se
     esconde el campo y se enseña una copia en texto, que si parte. */
  table.items-table .name input { display: none; }
  table.items-table .name .papel { display: block; overflow-wrap: anywhere; }
  table.items-table input, table.items-table select {
    border: none; padding: 1pt 0; background: none; font-size: 8.5pt;
    -webkit-appearance: none; appearance: none;
  }
  table.items-table th:last-child, table.items-table td:last-child { display: none; }
  .field select, .field input { -webkit-appearance: none; appearance: none; }
  .calc-actions { display: none !important; }
  .items-total { font-size: 8pt; margin-top: 4pt; }
  .items { margin-bottom: 10pt; }

  .result { border: 1pt solid #000; padding: 8pt 10pt; background: #fff; }
  .result-value { font-size: 20pt; }
  .result-note { font-size: 9pt; }
  .workings { font-size: 7.5pt; line-height: 1.5; }
  .workings .row { white-space: normal; }
  /* Antes era break-inside: avoid. Con DOS vistas la figura ya no cabe entera
     debajo del veredicto, y eso dejaba media pagina en blanco. Ahora puede
     partir ENTRE las dos vistas, pero nunca por la mitad de un dibujo. */
  .figure { break-inside: auto; }
  .figure-canvas { border: 1pt solid #999; padding: 6pt; }
  .figure-canvas .vista { break-after: avoid; page-break-after: avoid; }
  .figure-canvas svg { break-inside: avoid; page-break-inside: avoid; }
  .figure svg { max-width: 100%; }
  .figure figcaption { font-size: 7pt; }
  .extra table { font-size: 8pt; }
  .extra tr.best td { color: #000; font-weight: 700; }
  .verdict { border: 1pt solid #000; color: #000 !important; background: #fff !important; }

  .print-foot {
    margin-top: 10pt; padding-top: 6pt; border-top: .5pt solid #999;
    font-size: 7pt; line-height: 1.45; color: #333;
  }
  @page { margin: 14mm 12mm; }
}

/* ---------- editable stowage plan ---------- */
.editor[hidden] { display: none; }
.editor { margin-top: 18px; }
.editor h4 {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); font-weight: 500;
  margin: 0 0 4px;
}
.editor .how { font-size: .86rem; color: var(--muted); margin: 0 0 12px; max-width: 62ch; }
.seq { display: flex; flex-direction: column; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.seq-row {
  /* CINCO columnas: asa · nombre · flechas · lado · encima/suelo. Estaba puesto
     para CUATRO y al anadir los botones de lado el ultimo se caia a otra linea:
     el boton "encima" salia con el texto fuera de su caja. */
  display: grid; grid-template-columns: 26px 1fr auto auto auto; gap: 10px;
  align-items: center; background: var(--surface); padding: 9px 11px;
  touch-action: none;
}
/* En un movil de 390 px no caben nueve botones en una linea: la fila se salia de
   la pantalla y arrastraba TODA la pagina de lado, que es de las cosas que peor
   se llevan en el telefono (y Google lo mide). En pantalla estrecha la fila pasa
   a dos alturas: arriba el asa y el nombre, abajo los botones, que se reparten en
   las lineas que hagan falta. */
@media (max-width: 560px) {
  .seq-row { grid-template-columns: 26px 1fr; row-gap: 8px; }
  .seq-row .seq-btns { grid-column: 2 / -1; flex-wrap: wrap; }
  .seq-row .seq-btns + .seq-btns { margin-top: -4px; }
  .seq-btns button { min-width: 34px; padding: 7px 10px; }
}

.seq-row.on-top { padding-left: 34px; background: var(--surface-2); }
.seq-row.bad { background: var(--bad-soft); }
.seq-row.dragging { opacity: .45; }
.seq-row.over { box-shadow: inset 0 3px 0 var(--accent); }
.seq-grip {
  font-family: var(--f-mono); font-size: 14px; color: var(--rule-strong);
  cursor: grab; user-select: none; text-align: center; line-height: 1;
}
.seq-row.on-top .seq-grip { visibility: hidden; }
.seq-name { font-size: .93rem; line-height: 1.3; }
.seq-name b { font-weight: 600; }
.seq-name span { font-family: var(--f-mono); font-size: 11px; color: var(--muted); display: block; margin-top: 2px; }
.seq-row.bad .seq-name span { color: var(--bad); }
.seq-btns { display: flex; gap: 4px; }
.seq-btns button {
  font-family: var(--f-mono); font-size: 12px; line-height: 1; padding: 5px 8px;
  background: transparent; color: var(--muted); border: 1px solid var(--rule-strong);
  cursor: pointer; border-radius: 0; min-width: 28px;
}
.seq-btns button:hover:not(:disabled) { color: var(--ink); border-color: var(--ink); }
.seq-btns button:disabled { opacity: .3; cursor: default; }
/* Al pasar por encima de una fila, el bloque se enciende en los dos dibujos.
   Sin esto la lista es una pared de texto y no sabes cual es cual. */
.seq-row.mirando { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Los botones que ya hace el raton no tienen por que estar a la vista todo el
   rato. Marco: "como ya se pueden mover con el cursor sobra tener los botones o
   por lo menos tantos".
   Se esconden con opacity + pointer-events, NO con display ni visibility, y hay
   un motivo: display:none y visibility:hidden SACAN EL BOTON DEL ORDEN DE
   TABULACION, o sea que quien no usa raton se queda sin poder mover la carga.
   Con opacity el boton sigue enfocandose con el teclado y :focus-within lo
   enseña; con pointer-events:none no se puede pulsar a ciegas con el raton
   antes de que aparezca. Y como siguen ocupando su sitio, la fila no da un
   salto al pasar por encima. */
.seq-extra { opacity: 0; pointer-events: none; transition: opacity .12s; }
.seq-row:hover .seq-extra,
.seq-row:focus-within .seq-extra,
.seq-row.mirando .seq-extra { opacity: 1; pointer-events: auto; }
@media (hover: none) {
  /* En tactil no hay "pasar por encima": se enseñan siempre. */
  .seq-extra { opacity: 1; pointer-events: auto; }
}

/* El total del tipo de bulto, cuando esta repartido en varios bloques. Va EN LA
   MISMA LINEA que el nombre: la regla general de .seq-name span lo pone en bloque
   y le metia un renglon a cada fila. */
.seq-name .del-total {
  display: inline; margin: 0; font-family: inherit; font-size: inherit;
  color: var(--muted); font-weight: 400;
}
#figure-canvas .mirando { filter: brightness(1.35); }
#figure-canvas .apagado { opacity: .28; }
/* Los bloques de la planta se arrastran: sin esto, en tactil la pagina se
   desplaza en vez de mover el bulto. */
#figure-canvas svg { touch-action: none; }
#figure-canvas g.huella { cursor: grab; }
/* El bloque sobre el que caeria la pieza que se arrastra. */
#figure-canvas g.destino { filter: brightness(1.5); }
.editor-foot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 11px; }
.editor-foot button {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 500; padding: 7px 12px; background: transparent; color: var(--muted);
  border: 1px solid var(--rule-strong); cursor: pointer; border-radius: 0;
}
.editor-foot button:hover { color: var(--ink); border-color: var(--ink); }
.problems { margin-top: 12px; border-left: 3px solid var(--bad); background: var(--bad-soft); padding: 12px 14px; }
.problems:empty { display: none; }
.problems .tag {
  display: block; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--bad); font-weight: 600; margin-bottom: 6px;
}
.problems ul { margin: 0; padding-left: 17px; max-width: 64ch; }
.problems li { margin-bottom: 5px; font-size: .93rem; }
.verdict.bad { color: var(--bad); background: var(--bad-soft); }
@media print {
  .editor .editor-foot, .editor .seq-btns, .editor .seq-grip, .editor .how { display: none !important; }
  /* Al ocultar el asa y los botones, las columnas de la rejilla siguen ahí y el
     nombre del bulto cae en la de 26 px: una palabra por línea. En papel esto se
     imprime en fila corrida. */
  .editor .seq-row { display: flex; align-items: baseline; gap: 8pt; padding: 4pt 6pt; }
  .editor .seq-row.on-top { padding-left: 16pt; }
  /* La lista puede partirse entre páginas —si no, deja media hoja en blanco—
     pero un bulto no se parte por la mitad. */
  .editor .seq { break-inside: auto; }
  .editor .seq-row { break-inside: avoid; }
  /* En pantalla las líneas de separación son el fondo del contenedor visto por
     los huecos. Al partirse entre páginas ese fondo queda como una banda gris al
     pie de la hoja, así que en papel las líneas van en cada fila. */
  .editor .seq { background: none; gap: 0; border: .5pt solid #999; }
  .editor .seq-row { border-bottom: .5pt solid #CCC; }
  .editor .seq-row:last-child { border-bottom: none; }
}

/* ---------- suggestion link and form ---------- */
.suggest {
  margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--rule);
  font-size: .95rem; color: var(--muted);
}
.suggest a { font-weight: 600; }
@media print { .suggest { display: none !important; } }

.sform { max-width: 62ch; margin: 26px 0 0; }
.sform .row { margin-bottom: 18px; }
.sform label {
  display: block; font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  font-weight: 500; margin-bottom: 6px;
}
.sform .sub { font-size: 13px; color: var(--muted); margin: 4px 0 0; line-height: 1.45; }
.sform textarea, .sform input, .sform select {
  width: 100%; font-family: var(--f-body); font-size: 15px; padding: 10px 11px;
  border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink);
  border-radius: 0;
}
.sform textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
.sform select { font-family: var(--f-mono); font-size: 14px; }
.sform textarea:focus, .sform input:focus, .sform select:focus { border-color: var(--accent); outline: none; }
.sform .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sform button {
  font-family: var(--f-display); font-size: 1.02rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; padding: 11px 24px;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  cursor: pointer; border-radius: 0;
}
.sform button:hover { filter: brightness(1.08); }
.sform .status { font-family: var(--f-mono); font-size: 12px; margin-top: 12px; }
.sform .status.ok { color: var(--good); }
.sform .status.err { color: var(--bad); }

/* La salida de emergencia del formulario: el texto ya compuesto, a la vista, con
   la direccion y un boton de copiar. Aparece cuando se pulsa enviar y no hay
   servicio de formularios, porque el mailto se traga a media gente sin avisar. */
.sform-salida {
  margin-top: 20px; padding: 16px; border: 1px solid var(--rule-strong);
  background: var(--surface-2);
}
.sform-salida p { margin: 0 0 10px; font-size: .93rem; }
.sform-salida textarea {
  width: 100%; font-family: var(--f-mono); font-size: 12.5px; line-height: 1.5;
  background: var(--surface); color: var(--ink); border: 1px solid var(--rule);
  padding: 10px; resize: vertical;
}
.sform-salida button {
  margin-top: 10px; font-size: .86rem; padding: 8px 16px;
  background: transparent; color: var(--ink); border-color: var(--rule-strong);
}

/* ---------- plan de carga: plano en planta arrastrable ---------- */
.bulto { cursor: grab; }
.bulto:active { cursor: grabbing; }
.bulto rect { transition: fill .12s ease; }
.bulto:hover rect { fill: var(--surface-2); }
.bulto.mal:hover rect { fill: var(--bad-soft); }
/* El dedo tiene que poder arrastrar sin que la página se desplace. */
.figure-canvas svg { touch-action: none; }

pre.formula {
  font-family: var(--f-mono);
  font-size: .84rem;
  line-height: 1.6;
  background: var(--surface-2);
  border-left: 3px solid var(--rule-strong);
  padding: 12px 14px;
  margin: 0 0 16px;
  overflow-x: auto;
  max-width: var(--readw);
}
p.fuente { font-size: .8rem; color: var(--muted); margin-top: 8px; }

/* ---------- lista de acciones del resultado (freight class) ---------- */
ul.acciones { margin: 0 0 10px; padding-left: 20px; max-width: none; }
ul.acciones li { margin-bottom: 8px; font-size: .95rem; line-height: 1.55; }
b.mejor { color: var(--good); }
b.peor  { color: var(--warn); }

/* ---------- tabla comparativa de las guías ---------- */
td.igual { color: var(--muted); font-size: .88rem; }
td.baja  { color: var(--good); font-size: .88rem; font-weight: 600; }

/* ---------- tablas dentro de guías y explicaciones ----------
   Hasta ahora sólo tenían estilo las tablas del resultado de una calculadora
   (.extra table). Las de los artículos salían sin una sola línea, y una tabla
   comparativa sin separadores no se lee: se adivina. */
.tscroll table { border-collapse: collapse; width: 100%; font-size: .93rem; min-width: 420px; }
.tscroll th {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  font-weight: 500;
  padding: 0 14px 7px 0;
  border-bottom: 1px solid var(--rule-strong);
  white-space: nowrap;
}
.tscroll td {
  padding: 9px 14px 9px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
}
.tscroll tr:last-child td { border-bottom: none; }
.tscroll td:first-child { font-variant-numeric: tabular-nums; }

/* ---------- grupos de calculadoras ----------
   Seis tarjetas seguidas son un muro, y en el móvil hay que bajar mucho para ver la
   última. Los grupos dan al ojo un sitio donde parar. */
h3.grupo {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin: 30px 0 10px;
}
h3.grupo:first-of-type { margin-top: 18px; }
h3.grupo + .tool-list { margin-top: 0; }
table.items-table th .sub { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .7; }
/* "Al cargar" no es un aviso de que vaya justo: es algo que hay que hacer en el muelle.
   Va en otro color para que no se confunda con un problema de espacio. */
.aviso.nota { background: var(--surface-2); color: var(--brand); border-color: var(--brand); }

/* ---- Carta de porte -------------------------------------------------------
   Es un documento, no un resultado: se dibuja con las casillas numeradas del
   juego CMR para que quien ha visto una la reconozca. En pantalla se ve un
   ejemplar; al imprimir salen los tres que exige el art. 5 del CMR, cada uno
   en su hoja. */
.cp-doc {
  border: 1px solid var(--rule-strong);
  background: var(--ground);
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.35;
}
.cp-doc + .cp-doc { display: none; }          /* en pantalla, un ejemplar */
.cp-cab {
  display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline;
  justify-content: space-between;
  padding: 9px 12px; border-bottom: 1.5px solid var(--rule-strong);
  background: var(--surface-2);
}
.cp-cab b { font-family: var(--f-display); font-size: 15px; letter-spacing: .02em; }
.cp-cab .cp-ej { font-family: var(--f-mono); font-size: 11.5px; color: var(--muted); }
.cp-rejilla { display: grid; grid-template-columns: repeat(12, 1fr); }
.cp-caja {
  grid-column: span 12;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 6px 9px 8px;
  min-width: 0;
}
.cp-caja:last-child { border-right: none; }
.c6 { grid-column: span 6; }
.c4 { grid-column: span 4; }
.c3 { grid-column: span 3; }
.c8 { grid-column: span 8; }
.c2 { grid-column: span 2; }
@media (max-width: 620px) {
  .c6, .c4, .c3, .c8, .c2 { grid-column: span 12; }
  /* En una columna, 24 casillas vacias con altura de folio son dos mil pixeles de
     nada. El hueco para escribir hace falta en papel, no en la vista previa. */
  .cp-v { min-height: 22px; }
  .cp-v.alto, .cp-v.firma { min-height: 30px; }
}
.cp-caja .cp-t {
  display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); font-weight: 600;
}
.cp-caja .cp-n {
  display: inline-block; min-width: 17px; margin-right: 5px;
  font-family: var(--f-mono); font-size: 10.5px; color: var(--accent); font-weight: 700;
}
.cp-v { margin-top: 4px; min-height: 34px; overflow-wrap: anywhere; }
.cp-v.alto { min-height: 52px; }
.cp-v.firma { min-height: 46px; }
.cp-vacio { color: var(--rule-strong); }
.cp-clausula {
  grid-column: span 12; padding: 8px 9px;
  border-bottom: 1px solid var(--rule);
  background: var(--accent-soft); font-size: 12px;
}
.cp-pie {
  padding: 7px 12px; font-size: 11px; color: var(--muted);
  border-top: 1px solid var(--rule);
}
.cp-falta { color: var(--accent); font-weight: 600; }

@media print {
  /* En papel lo que vale es el documento. El titular del resultado, el aviso y la
     lista de lo que falta son ayuda de pantalla, y ademas empujaban las casillas de
     firma a una segunda hoja: cada ejemplar tiene que caber en una. */
  .result.cp-print { border: none; padding: 0; background: none; margin: 0; }
  .result.cp-print > .result-headline,
  .result.cp-print > .result-value,
  .result.cp-print > .result-note,
  .result.cp-print > .workings { display: none !important; }

  /* Los tres ejemplares, cada uno en su hoja. */
  .cp-doc { break-inside: auto; page-break-inside: auto; font-size: 9pt; border-color: #000; }
  .cp-doc + .cp-doc { display: block; break-before: page; page-break-before: always; }
  .cp-cab { background: none; border-bottom: 1.2pt solid #000; }
  .cp-caja, .cp-clausula,   .cp-clausula { background: none; border: .8pt solid #000; }
  /* El bill of lading estadounidense trae mas casillas que la carta de porte CMR
     (Seccion 7, valor declarado, certificacion hazmat) y en Letter, que es mas corta
     que un A4, se salia a una segunda hoja. Estas medidas estan ajustadas para que el
     mas largo de los dos quepa en una sola. */
  .cp-doc { font-size: 8.5pt; line-height: 1.25; margin: 0; }
  .cp-caja { padding: 1.5pt 4pt 2pt; }
  .cp-v { min-height: 4.5mm; margin-top: .5pt; }
  .cp-v.alto { min-height: 8mm; }
  .cp-v.firma { min-height: 10mm; }
  .cp-cab { padding: 4pt 6pt; }
  .cp-clausula { padding: 4pt 6pt; }
  .cp-pie { padding: 3pt 6pt; font-size: 6.5pt; }
  .cp-caja .cp-t, }

/* Texto legal impreso DENTRO de una casilla (la certificacion de mercancia peligrosa,
   la Seccion 7, el valor declarado): es la letra del formulario, no un dato escrito. */
.cp-legal {
  margin: 5px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--muted);
}
@media print { .cp-legal { font-size: 6.8pt; line-height: 1.25; margin-top: 2pt; color: #333; } }