/* The default design (the original is at ?v=1). Self-contained: this page does not
   load escala.css. */

:root {
  /* --surface-0: #f5f4f0; */
  --surface-0: #eeedea;
  --surface-1: #ffffff;
  --surface-2: #f7f6f3;
  /* Zebra on the scale: white rows over the page's own background, so the stripe reads as
     the sheet showing through rather than as a third colour. */
  --cell-bg: var(--surface-1);
  --cell-stripe: var(--surface-0);
  --border: #dcd9d3;
  --border-strong: #b8b4ac;
  /* Corners: small on the controls, a little larger on the cards that hold them. */
  --radius: 4px;
  --radius-card: 6px;
  /* Every control in the toolbar — number fields, the Incremento select, the Orden
     arrows — is exactly this size. Width fits "100.00"; the select fits "0.25" + caret. */
  --control-w: 60px;
  --control-h: 28px;
  /* Space between the scale's tables, across and down. */
  --col-gap: 16px;
  /* Width of one of the scale's tables, the same at every screen size, so the distance from a
     puntaje to its nota never changes. 94px is what eight came to in the 900px wrap. */
  --col-w: 94px;
  --text-primary: #1f1e1c;
  --text-secondary: #5f5c56;
  --text-muted: #8a867e;
  --text-accent: #b05730;
  /* Secondary buttons: the accent desaturated into a fill, so they read as buttons rather
     than as entry fields, while Generar tabla stays the saturated one. */
  --btn-primary-bg-hover: #994c2a;
  --btn-soft-bg: #eaddd6;
  --btn-soft-bg-hover: #e0cec4;
  --btn-soft-fg: #8a4526;
  /* Pure red, as the original table used. It is the one saturated colour on the page and it
     marks exactly one thing: a nota below the approval threshold. */
  --text-danger: #ff0000;
  /* Inter first so the interface looks the same on every platform. Before this, -apple-system
     gave Macs SF Pro while everyone else got Segoe UI, Roboto or Arial — three different
     widths. SF Pro can't be self-hosted (Apple licenses it for Apple platforms only), so the
     consistent choice is a substitution, not the same face everywhere. The system stack stays
     behind it: it covers the swap before the file lands, and any character outside the Latin
     subset below. */
  --font-sans: Inter, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Light only — there is no dark palette and no toggle. Declared so a browser on a dark OS
   still renders the form controls and scrollbars light, to match the page around them. */
:root { color-scheme: light; }

/* Inter, SIL Open Font License. One variable file spanning the two weights the interface uses
   (400 and 600), Latin subset — which covers the accented Spanish, the middle dot and en dash,
   and the ↑ ↓ on the Orden buttons. 48 KB, against 45-51 KB for each of the four Latin Modern
   faces the explanation page already carries.
   unicode-range is Google's for this subset: outside it the browser skips this file entirely
   and takes the next family in the stack for that character. */
@font-face {
  font-family: 'Inter';
  src: url('inter-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-0);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 14px;
}

a { color: var(--text-accent); }

input, button, select {
  font-family: inherit;
  color: inherit;
  font-size: 14px;
}

input[type=text] {
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 6px 8px;
  width: 100%;
}

.wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 16px 32px;
}

header {
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}

/* Equal top and bottom padding centres the text block in the bar. */
.head {
  padding-top: 12px;
  padding-bottom: 12px;
}

.head-text {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 6px;
  min-width: 0;
}

h1 {
  font-size: 18px;
  margin: 0;
}

/* Carries the contact address now, so it shouldn't read as fine print. */
.autor {
  font-size: 13px;
  color: var(--text-secondary);
}

/* Still real links (mailto: included) — just not underlined at rest. */
.autor a {
  color: inherit;
  text-decoration: none;
}

.autor a:hover { text-decoration: underline; }

/* Small print under the title and byline: the way back to the original design, and the
   contact address. flex-basis puts the row on its own line — .head-text already wraps, so no
   second container is needed — and it stays a step smaller than the byline, since these are
   escape hatches rather than actions of the page. The margin is on top of .head-text's 2px
   row gap, which is tuned for a wrapped byline rather than a separate line of its own. Only
   the plain text is muted; the links keep the accent colour they get everywhere else. */
.head-alt {
  flex: 0 0 100%;
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--text-secondary);
}

/* Buttons follow Primer's idiom rather than a bevelled one: a crisp 1px border over a tinted
   fill, with a shadow slight enough that it only firms up the bottom edge. What reads as
   pressable there is the definite edge, not depth — the bevel-and-lift version made the two
   secondary buttons look like they were floating over the card.
   The border is translucent dark rather than a fixed grey, so the same declaration darkens the
   rim of a white button, a beige one and the saturated accent alike, the way Primer's does. */
.btn {
  display: inline-flex;
  align-items: center;
  background: var(--surface-1);
  border: 1px solid rgba(31, 30, 28, 0.15);
  border-radius: var(--radius);
  padding: 6px 12px;
  font-size: 13px;
  color: var(--text-primary);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  box-shadow:
    0 1px 0 rgba(31, 30, 28, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: background-color 80ms ease, border-color 80ms ease;
}

.btn:hover {
  background: var(--surface-2);
  border-color: rgba(31, 30, 28, 0.22);
}

/* Pressed is the fill settling rather than the button moving: the hairline under the bottom
   edge goes and a faint inset takes its place. No translate — Primer doesn't move either. */
.btn:active {
  box-shadow: inset 0 1px 2px rgba(31, 30, 28, 0.12);
}

.btn.primary {
  background: var(--text-accent);
  color: #fff;
  font-weight: 600;
}

/* Needed explicitly: .btn:hover sets a background at the same specificity but earlier in the
   file, so .btn.primary above won it and Generar tabla had no hover response at all — the one
   button most expected to have one. The border keeps the inherited translucent dark, which over
   the accent reads as a slightly darker rim, exactly as the green button does on GitHub. */
.btn.primary:hover { background: var(--btn-primary-bg-hover); }

/* Same hue as primary, desaturated, and left at normal weight so the hierarchy stays legible:
   saturated fill = main action, tinted fill = secondary. Both are bordered now — a filled pill
   with no edge was the thing that read as floating — and the inputs stay distinguishable by
   being white with the heavier --border-strong. */
.btn.soft {
  background: var(--btn-soft-bg);
  color: var(--btn-soft-fg);
}

.btn.soft:hover { background: var(--btn-soft-bg-hover); }

/* Generar tabla sits first in the DOM so Enter triggers it; this puts it back on the
   right. Tab order therefore reaches it before Excel and Imprimir. */
.actions .generar { order: 1; }

.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 14px 16px;
  margin-bottom: 12px;
}

/* Parameters */

/* The whole card is one grid of label+control pairs at every width — `display: contents`
   on the groups and their children flattens them into it. That's what puts Incremento
   under Puntaje máx. and Orden under Exigencia (%) instead of each group sizing its own
   columns. Five pairs per row here; the media queries below drop to two, then one. */
.params {
  display: grid;
  grid-template-columns: repeat(5, max-content var(--control-w));
  align-items: center;
  gap: 10px 14px;
}

.fields,
.controls,
.field,
.control { display: contents; }

.field label {
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Sized for "100.00" and nothing more. These were number fields until the decimal comma
   forced them to text (see the form), which also retired the spinner rules that used to live
   here — appearance:textfield and the two ::-webkit-*-spin-button resets. A text field has no
   spinners to suppress. */
.field input[type=text] {
  width: var(--control-w);
  height: var(--control-h);
  padding: 0 6px;
  font-size: 13px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Excel and Imprimir sit beside Generar tabla but read as quiet links, so the primary
   action stays the obvious one. Placed in the tracks after the two selectors, right
   aligned; can't land in row 1 because the five fields fill every track there. */
.actions {
  display: flex;
  align-items: center;
  gap: 12px;
  grid-column: 5 / -1;
  justify-self: end;
}

/* Same size as the field labels — these are peers, not fine print. */
.control-label {
  font-size: 13px;
  color: var(--text-secondary);
}

/* A grid, not a wrapping flex row: with 8 increments on a narrow screen the flex version
   spilled into a ragged second line. Equal-width cells reflow into a tidy 2x4 instead.
   The 1px gaps show the container's background, which draws the dividers. */
.seg {
  display: grid;
  gap: 1px;
  min-width: 0;
  background: var(--border);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  overflow: hidden;
}

/* Explicit track count, not auto-fit: inside a shrink-to-fit flex item, auto-fit with
   1fr tracks has no definite width to work from and collapses to a single column. */
.seg-orden {
  grid-template-columns: repeat(2, 1fr);
  width: var(--control-w);
  height: var(--control-h);
}

.seg-orden label {
  display: grid;
  place-items: center;
  padding: 0;
}

/* appearance: none is the point — mobile Safari otherwise imposes its own native select
   chrome (oversized, its own font and padding) and ignores most of what's set here. That
   means drawing the caret ourselves. A data: URI can't use currentColor, so rather than keep
   a per-theme copy in sync with the palette, the caret is one mid-grey that reads on both
   the light and the dark surface. */
.control select {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--surface-1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a867e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 5px center;
  background-size: 8px 5px;
  background-clip: padding-box;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  margin: 0;
  padding: 0 17px 0 7px;
  font-size: 13px;
  line-height: 1.3;
  width: var(--control-w);
  height: var(--control-h);
  justify-self: start;
}


.seg input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.seg label {
  padding: 5px 8px;
  font-size: 13px;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  background: var(--surface-1);
}

.seg input:checked + label {
  background: var(--surface-2);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--text-accent);
}

.seg input:focus-visible + label { outline: 2px solid var(--text-accent); outline-offset: -2px; }


/* Scale */

/* Tables of ten, as in the original design, wrapping across the page: each read top to
   bottom, the tables in reading order. As many sit side by side as fit at --col-w each, so
   the layout follows the screen with no breakpoints of its own.
   auto-fit rather than auto-fill, so the tracks a short scale doesn't use collapse to
   nothing, and justify-content then centres the tables it does use. */
.escala {
  display: grid;
  grid-template-columns: repeat(auto-fit, var(--col-w));
  gap: var(--col-gap);
  justify-content: center;
  /* A table stretched to its grid row's height would grow its rows to fill it, so a short last
     table keeps its own height instead. */
  align-items: start;
}

/* Real tables, so a copy pastes into a spreadsheet as rows and cells (see the view).
   Separate borders, because each row's hairline is its own top border and must not merge
   with the header's rule. */
.tabla {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.tabla th {
  padding: 0 3px 3px;
  border-bottom: 1px solid var(--border-strong);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: left;
  white-space: nowrap;
}

/* Not selectable, so a copy of the scale is the numbers alone: a spreadsheet would otherwise
   take a Puntaje/Nota row for every table. Unhighlighted in a selection, it also shows what
   the copy leaves out. The copy script drops them from the HTML version as well. */
.tabla thead {
  -webkit-user-select: none;
  user-select: none;
}

.tabla th:first-child { padding-left: 7px; }
.tabla th:last-child { padding-right: 7px; text-align: right; }

/* Rows butt against each other — no gaps, no rounded corners — so a run of them reads as
   one continuous table rather than a column of loose pills. The only separator is a
   hairline in the page's own background colour: it reads as a divider between two tinted
   rows and disappears above the first row, where there's no tint behind it. */
.tabla td {
  padding: 3px 3px 3px 7px;
  border-top: 1px solid var(--surface-0);
  background: var(--cell-bg);
  color: var(--text-primary);
  font-size: 13px;
}

/* The 3px of page between the header's rule and the first row, plus that row's hairline. */
.tabla tbody tr:first-child td { border-top-width: 4px; }

/* Every other row of each table. Every table has its own header and starts its own count, so
   this is a plain rule, where the single column flow before it needed selectors generated
   per breakpoint to keep the bands level across columns. */
.tabla tbody tr:nth-child(even) td { background: var(--cell-stripe); }

.tabla td + td {
  padding: 3px 7px 3px 3px;
  text-align: right;
}

/* The only colour in the scale, and it lands on the nota alone: the puntaje beside it stays
   the same black as everything else, which is how the original table read. The pass/fail split
   is carried by one word changing colour rather than by tinting whole rows, and nothing is
   bold — the stripes do the work of holding the eye on a line. */
.tabla tr.no td + td { color: var(--text-danger); }

/* Nothing marks the cut, on screen or on paper: the notas changing colour where they stop
   failing already shows it, as in the original. The .cut class and @cut_score behind it are
   emitted but no longer styled by anything — kept for the moment rather than deleted, since
   the marker is one rule away if it is ever wanted back. */

/* Explanation page. Same tokens and cards as the table, plus prose and formula handling. */

.back { margin: 0 0 12px; }

/* The puntaje field on the explanation page, sized and styled like the table's toolbar. In
   the interface face rather than the card's Latin Modern, which the controls would otherwise
   inherit: they're the page's controls, not part of the text. */
.puntaje-form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-family: var(--font-sans);
  font-size: 13px;
}

.puntaje-form label { color: var(--text-secondary); }

.puntaje-form input[type=text] {
  width: var(--control-w);
  height: var(--control-h);
  padding: 0 6px;
  font-size: 13px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.puntaje-form .btn { height: var(--control-h); }

/* Latin Modern Roman: the direct successor to Computer Modern, which is what KaTeX's own fonts
   clone. So the prose and the formulas are one type family, and unlike KaTeX's fonts this one
   carries the accented glyphs Spanish needs — KaTeX_Main and KaTeX_Math have none of
   á é í ó ú ñ ¿ ¡ ü, which is why the body couldn't simply be set in them.
   Self-hosted rather than pulled from a CDN: the only distribution that had it was latex.css,
   which embeds the faces as base64 inside a 3.1 MB stylesheet. These four files were extracted
   from it — 45-51 KB each, and a browser only fetches the ones a page actually uses.
   Latin Modern is GUST Font License; latex.css is MIT. */
@font-face {
  font-family: 'Latin Modern Roman';
  src: url('latinmodern-roman-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Latin Modern Roman';
  src: url('latinmodern-roman-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Latin Modern Roman';
  src: url('latinmodern-roman-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Latin Modern Roman';
  src: url('latinmodern-roman-bolditalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Serif because the formulas are: a sans body beside Computer Modern maths reads as two
   documents stapled together. The reverse — forcing KaTeX into the UI sans — is worse than it
   sounds: KaTeX positions glyphs from its own fonts' metrics, so substituting a family breaks
   fraction bars, delimiter sizing and spacing. The rest of the site stays sans; that's
   interface, this is a document.
   Size stays at 14px: .katex is 1.21em of its parent, so raising this would grow every formula
   and undo the widths the media queries below are measured against. */
.prose {
  font-family: 'Latin Modern Roman', Georgia, 'Times New Roman', serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.prose h2 {
  margin: 0 0 12px;
  font-size: 16px;
  color: var(--text-primary);
}

.prose p { margin: 0 0 12px; }
.prose > :last-child { margin-bottom: 0; }

.prose ul {
  margin: 0 0 12px;
  padding-left: 20px;
}

.prose li { margin-bottom: 6px; }
.prose strong, .prose em { color: var(--text-primary); }

/* Inline maths matches the prose size. KaTeX defaults to 1.21em, which went unnoticed while the
   two used different faces but became obvious once prose digits came from KaTeX_Main as well —
   "60%" in text sat visibly smaller than "0,6" in maths right beside it. Same face plus same
   size makes the digits identical. The selector picks inline maths only: a display formula's
   .katex sits inside .katex-display, so it keeps its larger size, which is what a block formula
   is for, and the media queries below still tune it. */
.prose :not(.katex-display) > .katex { font-size: 1em; }

/* Kept as a safety net: if a formula still can't fit, it scrolls inside its own box rather
   than widening the page. The steps below are meant to make that unnecessary on phones. */
.prose .katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 0;
}

/* Shrink display maths on narrow screens instead of leaving the widest formulas to scroll.
   Sized from measurement, not taste: the two \begin{cases} blocks need 412px at KaTeX's
   default 16.94px, and the content box is 349px at 430, 329 at 390, 314 at 375 and 259 at
   320 — so each step is the largest size whose worst case still fits. Inline maths is left
   alone; shrinking it too would make it smaller than the prose around it. */
@media (max-width: 480px) {
  .prose .katex-display .katex { font-size: 0.95em; }
}

@media (max-width: 380px) {
  .prose .katex-display .katex { font-size: 0.85em; }
}

@media (max-width: 340px) {
  .prose .katex-display .katex { font-size: 0.72em; }
}

/* Inline SVG diagram. Takes its colours from the theme, so it needs no light plate the way the
   old PNG did, and 1:1 at its natural size on desktop while scaling down on a phone. */
.diagrama {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
  margin: 4px auto 16px;
  color: var(--text-secondary);
}

.diagrama .eje {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.diagrama .flecha { stroke-linejoin: round; stroke-linecap: round; }

.diagrama .guia {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.diagrama .curva {
  fill: none;
  stroke: var(--text-accent);
  stroke-width: 2.5;
  stroke-linejoin: round;
}

.diagrama .punto { fill: var(--text-accent); }

/* The labels are the same symbols as the formulas, so they use KaTeX's own faces rather than the
   page font — KaTeX_Math is italic by design, which is how single-letter variables render in the
   maths. Safe here because every label is ASCII; KaTeX's fonts don't carry the accented glyphs
   Spanish prose needs, which is why the body text uses a system serif instead. Falls back to a
   serif if KaTeX's stylesheet doesn't load. */
.diagrama text {
  fill: currentColor;
  font-family: KaTeX_Math, KaTeX_Main, Georgia, serif;
  font-size: 15px;
}

.diagrama .sub { font-size: 11px; }

/* FAQ */

#faq {
  margin-top: 32px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}

#faq .pregunta {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 12px 16px;
  margin: 12px 0;
}

#faq .pregunta p:first-child {
  font-weight: 600;
  color: var(--text-primary);
}

/* Ads: format 1 is a fixed 750px unit; clip it rather than let it widen the page. */

.ads { margin: 12px 0; }

/* Measured on the live site: the unit is a hardcoded 750px box and the creative inside it a
   728px leaderboard, so anything under an 800px viewport clips it. Centre the box so what
   survives the clip is the middle of the ad rather than a lopsided slice. `flex: 0 0 auto`
   matters — a flex item shrinks by default, which would collapse the box to the wrapper's
   width and push the clipping back onto one side. */
.ad-wide {
  overflow-x: hidden;
  display: flex;
  justify-content: center;
}

.ad-wide > div { flex: 0 0 auto; }

/* Imprimir needs window.print(); without JS the browser's own print command still works. */

.js-only { display: none; }
html.js .js-only { display: inline-flex; }

.print-only { display: none; }

/* Below the width where all five pairs fit on one line, drop to two per row — seven pairs
   in four rows. Exactly four tracks and no trailing spacer: auto-placement fills a fifth
   track with the next label rather than leaving it empty. */
@media (max-width: 880px) {
  .params {
    grid-template-columns:
      max-content var(--control-w)
      max-content var(--control-w);
    /* 8px in the columns, down from 10 and originally 12. Every widening has been paid for
       here: Inter's labels run ~10% wider than SF Pro's, and the control went to 66px for the
       same reason, which together took the two-pair row to 343px — past what a 390px phone can
       show. At 8px it comes to 337px and fits again. */
    gap: 8px 8px;
    /* The card shrinks to the controls rather than spanning the page, and the card itself is
       then centred. Two narrow columns left a lot of empty card whichever way it was aligned:
       centring the grid inside a full-width card put the slack into two gutters, aligning it
       left put all of it on the right, and both read as a half-empty panel. Sizing the panel
       to what it holds leaves no slack to place at all.
       Auto margins on the sides only, so .card's margin-bottom survives. justify-content is
       gone with it: a fit-content box has no free space to distribute, and a grid that does
       outgrow the width available overflows to the right on its own. */
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }

  /* Own row, spanning: beside Orden there isn't room for three buttons without forcing
     the grid wider than the screen. */
  .actions { grid-column: 1 / -1; }
}

/* Roomier controls wherever the toolbar has to stack: a touch device needs the target, and a
   narrow window needs the room for two pairs per row. Width comes from "100.00" at 16px, which
   measures 48.9px against 39.8px at 13px. */
@media (pointer: coarse), (max-width: 880px) {
  :root {
    /* 66, not 64: "100.00" measures 51.5px at 16px in Inter against 48.9 in SF Pro, and a 64px
       box leaves only 50px of content once padding and border come off, so the longest value it
       has to hold had started scrolling inside the field. */
    --control-w: 66px;
    --control-h: 30px;
  }
}

/* The 16px is for one thing only: iOS Safari zooms the viewport whenever a focused control's
   text is under 16px, and there is no honest way to suppress that — `user-scalable=no` is
   ignored by Safari and would break pinch-zoom anyway. So it is scoped to coarse pointers
   alone. It used to ride along with the width query above, which meant a narrow desktop window
   got it too: no zoom to prevent there, and at 16px the numbers read oversized beside their
   labels. A mouse keeps the tighter 13px at every width. */
@media (pointer: coarse) {
  .field input[type=text],
  .puntaje-form input[type=text],
  .control select { font-size: 16px; }
}

/* Trim the frame to buy the two columns room on a phone. */
@media (max-width: 413px) {
  .wrap { padding-left: 10px; padding-right: 10px; }
  .card { padding: 12px; }
}

/* Narrowest phones: fall back to one pair per row before two stop fitting. Two pairs need
   337px in Inter ("Puntaje máx." 79 + "Nota aprobación" 102, two 66px controls, three 8px
   gaps), and with 32px of card padding and 20px of wrap padding that wants a 389px viewport.
   The step sat at 379px when these labels were SF Pro's narrower ones. Inter is ~10% wider, so
   it moves up — but only as far as the arithmetic demands: a 390px phone can show two pairs, a
   375px one cannot. These widths ignore kerning, so they run slightly pessimistic. */
@media (max-width: 388px) {
  .params { grid-template-columns: max-content var(--control-w); }
}

/* Without an explicit page box, Chrome and Safari each apply their own default margins, so
   the printable width — and therefore the column widths and how much lands on page one —
   differs between them. Fixing the margin here makes the sheet the same in both. */
@page {
  margin: 12mm;
}

@media print {
  /* An allow-list, because naming the ad elements never keeps up. The scripts append their
     own nodes straight to <body> — a fixed-position 300x250 with a close button, which is how
     stray X glyphs landed mid-table and under the footer in Safari — and they invent the ids
     themselves (Moneytizer's 33670-*, Smart AdServer's sas_*). So: of <body>'s own children,
     only <main> prints. <header> is .chrome and would go anyway.
     Whatever gets injected at body level next is covered without another patch. */
  body > *:not(main) { display: none !important; }

  /* And by id for anything injected *inside* main, which the allow-list can't reach. */
  .chrome,
  .card,
  iframe,
  [id^="33670-"],
  [id^="sas_"] { display: none !important; }

  .print-only { display: block; }

  body { background: #fff; color: #000; font-size: 11px; }
  .wrap { max-width: none; padding: 0; }

  /* A table stays on one page. page-break-inside is the older name, kept for WebKit. */
  .tabla {
    break-inside: avoid;
    page-break-inside: avoid;
  }


  .print-meta {
    border-bottom: 2px solid #000;
    padding-bottom: 6px;
    margin-bottom: 8px;
    font-size: 11px;
  }

  /* Seven tables to a row on paper. At four, a row was a third of the page wide and the nota
     sat far from its puntaje, the same complaint the screen had, but eight no longer clear
     the header: "Puntaje" and "Nota" at 11px in Inter need 73.6px with the gap and padding,
     and eight on A4 leave 73.9px, inside the rounding. Seven give 87px, and clear on US
     Letter too, where eight would have fitted but A4 would not.
     Equal fractions of the page whatever the scale's length, so a short scale keeps the same
     table width as a long one. Not centred here, unlike on screen: the meta line above and
     the footer URL below both span the full content width, so the scale lines up with their
     left edge. */
  .escala {
    grid-template-columns: repeat(7, 1fr);
    gap: 10px 18px;
    justify-content: start;
  }

  .tabla th,
  .tabla th:first-child,
  .tabla th:last-child { border-bottom: 1px solid #000; color: #000; padding: 0 2px 2px; }

  .tabla td,
  .tabla td + td {
    background: none !important;
    color: #000 !important;
    border-top: 0.5px solid #ddd;
    padding: 1.5px 2px;
    font-size: 11.5px;
  }

  /* The header's rule already separates it from the first row. */
  .tabla tbody tr:first-child td { border-top: 0; }

  /* A printed sheet stays monochrome — read in black and white as often as not — so what is
     red on screen is carried here by weight and grey instead, and only on the failing side.
     Nothing marks the cut and nothing is bold on the passing side. Both were doing the same
     job twice — the reader can see where the notas stop being grey. */
  .tabla tr.no td,
  .tabla tr.no td + td { color: #444 !important; }
  .tabla tr.no td + td { font-weight: 600; }

  .print-footer {
    border-top: 0.5px solid #999;
    margin-top: 10px;
    padding-top: 6px;
    font-size: 10px;
    color: #555;
  }

  /* ---- Explanation page ----------------------------------------------------
     Without these it printed blank: the rule at the top of this block hides .card, and the
     explanation's whole content sits in .card.prose. Higher specificity brings it back. */
  .card.prose {
    display: block !important;
    margin: 0 0 18px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
  }

  /* Except the puntaje card when it holds nothing but its form: a heading over nothing. */
  .card.prose.chrome { display: none !important; }

  /* Nothing on paper can be navigated. */
  .back { display: none !important; }

  .prose {
    color: #000;
    font-size: 10.5pt;
    line-height: 1.45;
  }

  .prose h2 {
    margin: 0 0 6px;
    color: #000;
    font-size: 12pt;
    /* A heading alone at the foot of a page is worse than a slightly short page. */
    break-after: avoid;
  }

  .prose p,
  .prose li {
    orphans: 3;
    widows: 3;
  }

  /* Two separate hazards. Splitting a formula across a page break makes it unreadable; and the
     screen rule turns these into scroll containers, which on paper silently clips whatever
     overflows instead of scrolling. Both are undone here. */
  .prose .katex-display {
    overflow: visible;
    break-inside: avoid;
  }

  /* Ink-safe: the accent becomes black, the guides stay grey so they read as construction
     lines. Smaller than on screen, since paper doesn't need it big to be legible. */
  .diagrama {
    max-width: 78mm;
    margin: 6px auto 14px;
    color: #000;
    break-inside: avoid;
  }

  .diagrama .curva { stroke: #000; }
  .diagrama .punto { fill: #000; }
  .diagrama .guia { stroke: #999; }
}