/* 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; }
.calc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px 18px;
  margin-bottom: 18px;
}
.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 {
  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 { border-color: var(--accent); }
.field .hint { font-size: 12px; color: var(--muted); line-height: 1.35; }
.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 ---------- */
.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; }
.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; }
.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: 720px; }
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 8px 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; }
table.items-table input:focus, table.items-table select:focus { border-color: var(--accent); }
table.items-table .num { width: 78px; }
table.items-table .qty { width: 62px; }
table.items-table .name { min-width: 150px; }
table.items-table .drop { min-width: 130px; }
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 { display: none !important; }

  :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 { border: none; padding: 0; background: none; font-size: 9pt; font-weight: 600; }
  /* 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; }
  table.items-table td { padding: 3pt 6pt 3pt 0; }
  /* 8 columnas visibles: descripción · largo · ancho · alto · uds · peso ·
     ¿soporta carga? · posición. Suman 100. */
  table.items-table th:nth-child(1), table.items-table td:nth-child(1) { width: 26%; }
  table.items-table th:nth-child(2), table.items-table td:nth-child(2),
  table.items-table th:nth-child(3), table.items-table td:nth-child(3),
  table.items-table th:nth-child(4), table.items-table td:nth-child(4) { width: 8%; }
  table.items-table th:nth-child(5), table.items-table td:nth-child(5) { width: 6%; }
  table.items-table th:nth-child(6), table.items-table td:nth-child(6) { width: 9%; }
  table.items-table th:nth-child(7), table.items-table td:nth-child(7) { width: 13%; }
  table.items-table th:nth-child(8), table.items-table td:nth-child(8) { width: 22%; }
  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; }
  .figure { break-inside: avoid; }
  .figure-canvas { border: 1pt solid #999; padding: 6pt; }
  .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 {
  display: grid; grid-template-columns: 26px 1fr auto auto; gap: 10px;
  align-items: center; background: var(--surface); padding: 9px 11px;
  touch-action: none;
}
.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; }
.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); }

/* ---------- 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); }