/* shared/style.css -- one stylesheet for every tool site.
   System fonts only (no font download, no FOUT, no layout shift). Ad slots
   reserve their height from day one so switching ads on later moves nothing. */
:root {
  --bg: #fafaf9; --fg: #1c1917; --muted: #57534e; --line: #e7e5e4;
  --card: #ffffff; --accent: #1d4ed8; --accent-fg: #ffffff; --ok: #15803d; --warn: #b45309; --bad: #b91c1c;
  /* 860px venía de la prosa, pero la prosa ya se limita sola a 70ch (los
     párrafos miden 757px midiéndolos), así que ensanchar el contenedor no
     alarga una sola línea de texto: sólo da aire a las tablas de datos. */
  --radius: 10px; --maxw: 1200px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0c0a09; --fg: #f5f5f4; --muted: #a8a29e; --line: #292524; --card: #1c1917; --accent: #60a5fa; --accent-fg: #0c0a09; --ok: #4ade80; --warn: #fbbf24; --bad: #f87171; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg);
  font: 17px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
a { color: var(--accent); }
h1, h2, h3 { line-height: 1.2; margin: 1.4em 0 .5em; }
h1 { font-size: 2rem; margin-top: .6em; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.1rem; }
p, li { max-width: 70ch; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .95em; }
table { border-collapse: collapse; width: 100%; max-width: 100%; display: block; overflow-x: auto; }
th, td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
/* Una celda de texto largo no debe ir en nowrap: es lo que hacía que una tabla
   de tres columnas pidiera 1.653px de ancho y se leyera arrastrando. Las
   cifras siguen sin partirse, que es donde el nowrap sirve de algo. */
td.izq, th.izq, thead th { white-space: normal; }
th { font-weight: 600; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1rem; }
header.site { border-bottom: 1px solid var(--line); background: var(--card); }
header.site .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; min-height: 56px; }
header.site .brand { font-weight: 700; text-decoration: none; color: var(--fg); font-size: 1.1rem; }
header.site nav a { text-decoration: none; color: var(--muted); font-size: .95rem; padding: .25rem 0; }
header.site nav a[aria-current="page"] { color: var(--fg); border-bottom: 2px solid var(--accent); }
header.site nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
header.site nav .menu { position: relative; }
header.site nav .menu > summary { cursor: pointer; color: var(--muted); font-size: .95rem; padding: .25rem 0; list-style: none; user-select: none; }
header.site nav .menu > summary::-webkit-details-marker { display: none; }
header.site nav .menu > summary::after { content: " \25be"; font-size: .7em; vertical-align: .15em; }
header.site nav .menu[open] > summary::after { content: " \25b4"; }
header.site nav .menu > summary:hover { color: var(--fg); }
header.site nav .menu > summary[aria-current] { color: var(--fg); border-bottom: 2px solid var(--accent); }
header.site nav .menu > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
header.site nav .menu > div { position: absolute; top: calc(100% + .35rem); left: -.75rem; z-index: 30; display: flex; flex-direction: column; gap: .15rem; min-width: 13rem; padding: .5rem .75rem; background: var(--card); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 20px rgba(0, 0, 0, .14); }
header.site nav .menu > div a { padding: .3rem 0; white-space: nowrap; }
header.site nav .menu > div a:hover { color: var(--fg); }
@media (max-width: 560px) {
  header.site nav .menu > div { position: static; min-width: 0; margin: .35rem 0 .25rem; padding: .25rem 0 .25rem .75rem; border: 0; border-left: 2px solid var(--line); border-radius: 0; box-shadow: none; background: none; }
  header.site nav .menu > div a { white-space: normal; }
}
main { padding-bottom: 3rem; }
.lead { color: var(--muted); font-size: 1.05rem; max-width: 70ch; }
footer.site { border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; padding: 1.5rem 0 2.5rem; }
footer.site a { color: var(--muted); }
footer.site nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-bottom: .75rem; }

/* ----- the tool card: visible on load, usable before JS ----- */
.tool { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; margin: 1rem 0 1.5rem; }
.tool fieldset { border: 0; padding: 0; margin: 0 0 .75rem; min-width: 0; }
.tool legend { font-weight: 600; padding: 0; margin-bottom: .4rem; }
.tool label { display: block; font-size: .9rem; color: var(--muted); margin-bottom: .15rem; }
.tool input[type=number], .tool input[type=text], .tool select {
  width: 100%; font: inherit; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg); color: var(--fg); min-height: 42px; }
.tool input:focus, .tool select:focus, .tool button:focus { outline: 3px solid var(--accent); outline-offset: 1px; }
.row { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); align-items: end; margin-bottom: .5rem; }
.row.course { grid-template-columns: minmax(140px, 2fr) minmax(90px, 1fr) minmax(90px, 1fr) minmax(110px, 1fr) 44px; }
.row.assign { grid-template-columns: minmax(140px, 2fr) minmax(90px, 1fr) minmax(90px, 1fr) minmax(90px, 1fr) 44px; }
.row.category { grid-template-columns: minmax(140px, 2fr) minmax(90px, 1fr) minmax(90px, 1fr) 44px; }
@media (max-width: 560px) {
  .row.course, .row.assign, .row.category { grid-template-columns: 1fr 1fr; }
  .row .remove { grid-column: 2; justify-self: end; }
}
.tool button { font: inherit; font-weight: 600; padding: .55rem .9rem; border-radius: 6px; border: 1px solid var(--line);
  background: var(--card); color: var(--fg); cursor: pointer; min-height: 42px; }
.tool button.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.tool button.remove { padding: 0; width: 42px; }
.tool .actions { display: flex; gap: .5rem; flex-wrap: wrap; margin: .25rem 0 .75rem; }
.tool .opts { display: flex; gap: 1rem; flex-wrap: wrap; align-items: end; margin: .5rem 0 .75rem; }
.tool .opts label { margin: 0; }
.tool .opts > div { min-width: 140px; flex: 1; }

/* result: fixed minimum height so the number appearing never shifts the page */
.result { min-height: 92px; border-top: 1px solid var(--line); padding-top: .75rem; display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: baseline; }
.result .big { font-size: 2.4rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.result .letter { font-size: 1.6rem; font-weight: 700; }
.result .note { color: var(--muted); font-size: .95rem; flex-basis: 100%; min-height: 1.5em; margin: 0; }
.result .ok { color: var(--ok); } .result .warn { color: var(--warn); } .result .bad { color: var(--bad); }
.pair { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.pair .big { font-size: 2rem; }
.pair .cap { color: var(--muted); font-size: .9rem; }

/* ----- ad slots: reserved now, filled later. CLS stays at zero. ----- */
.ad { display: block; width: 100%; margin: 1.25rem 0; border-radius: 6px; }
.ad.top { min-height: 100px; }
.ad.mid { min-height: 250px; }
@media (min-width: 728px) { .ad.top { min-height: 90px; } }
.ad:empty { background: transparent; }

.faq details { border-bottom: 1px solid var(--line); padding: .6rem 0; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details p { margin: .5rem 0 0; }
.chart { columns: 2; column-gap: 2rem; }
@media (min-width: 640px) { .chart { columns: 3; } }
.chart table { display: table; width: auto; break-inside: avoid; }
.print-only { display: none; }
@media print {
  header.site, footer.site, .ad, .no-print, .content, .faq { display: none !important; }
  .tool { border: 0; padding: 0; }
  .print-only { display: block; }
  body { font-size: 12pt; }
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ----- one-question-at-a-time tools ----- */
.wizard .how { margin: 0 0 .75rem; color: var(--muted); font-size: .95rem; }
.wizard .steps { list-style: none; margin: 0; padding: 0; }
.wizard .step { padding: .75rem 0; border-top: 1px solid var(--line); }
.wizard .step:first-child { border-top: 0; padding-top: 0; }
.wizard .q label { display: block; font-size: 1.1rem; font-weight: 600; color: var(--fg); margin-bottom: .5rem; }
.wizard .n { display: inline-block; width: 1.6em; height: 1.6em; line-height: 1.6em; text-align: center; border-radius: 50%;
  background: var(--accent); color: var(--accent-fg); font-size: .85rem; margin-right: .4rem; vertical-align: 2px; }
.wizard .field { display: flex; align-items: center; gap: .5rem; max-width: 420px; }
.wizard .field input { max-width: 180px; }
.wizard .field .next { white-space: nowrap; }
.wizard .field input { font-size: 1.3rem; }
.wizard .unit { color: var(--muted); font-weight: 600; }
.wizard .hint { margin: .4rem 0 0; color: var(--muted); font-size: .9rem; }
.wizard .a { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.wizard .a .label { color: var(--muted); }
.wizard .a .value { font-size: 1.05rem; }
.wizard .a .change { padding: .2rem .6rem; min-height: 32px; font-size: .9rem; font-weight: 500; }
.wizard .result { margin-top: .75rem; }
.wizard .lead-in { flex-basis: 100%; color: var(--muted); margin-bottom: -.5rem; }

.tool.equal-mode .wcol { opacity: .45; }

/* ----- wavelength site extras ----- */
.tool .hint { color: var(--muted); font-size: .9rem; margin: 0 0 .5rem; }
.result table.lengths { display: table; width: auto; flex-basis: 100%; }
.result table.lengths th { color: var(--muted); font-weight: 500; }
.result table.lengths td { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ----- running tools: timer, stopwatch, pomodoro, countdown ----- */
.tool.timer { text-align: center; }
.tool.timer .clock { font-size: clamp(3.5rem, 18vw, 8rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; min-height: 1em; margin: .5rem 0 .25rem; }
.tool.timer .clock small { font-size: .4em; font-weight: 500; color: var(--muted); }
.tool.timer .clock.done { color: var(--bad); }
.tool.timer .bar { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; margin: .5rem auto 1rem; max-width: 520px; }
.tool.timer .fill { height: 100%; width: 0; background: var(--accent); transition: width .25s linear; }
.tool.timer .controls { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1rem; }
.tool.timer .big-btn { min-width: 110px; min-height: 52px; font-size: 1.1rem; }
.tool.timer .big-btn[aria-label] { min-width: 52px; }
.tool.timer .setrow { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: end; text-align: left; max-width: 640px; margin: 0 auto .75rem; }
.tool.timer .setrow > div { display: flex; flex-direction: column; justify-content: flex-end; }
.tool.timer .presets { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; margin-bottom: .75rem; }
.tool.timer .preset { padding: .35rem .7rem; min-height: 36px; font-weight: 500; font-size: .9rem; }
.tool.timer .note { text-align: center; color: var(--muted); font-size: .95rem; min-height: 1.5em; margin: 0 auto; }
.tool.timer .phase { color: var(--muted); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: .85rem; }
.tool.timer:fullscreen { display: flex; flex-direction: column; justify-content: center; border: 0; border-radius: 0; background: var(--bg); }
.tool.timer:fullscreen .clock { font-size: clamp(6rem, 28vw, 22rem); }
.tool.timer:fullscreen .setrow, .tool.timer:fullscreen .presets, .tool.timer:fullscreen .laps { display: none; }
table.laps, table.facts { display: table; width: auto; margin: .5rem auto 0; }
table.laps td, table.laps th { font-variant-numeric: tabular-nums; }
table.facts th { color: var(--muted); font-weight: 500; }
/* min-width:0 and max-width:100% because .result is a flex row with a gap:
   flex-basis:100% alone makes the table overshoot the container by the gap,
   which is a 4px horizontal page scroll on a phone */
/* The base rule gives .facts display:table and th/td white-space:nowrap, so a
   row of labels demands more width than a phone has and the page scrolls
   sideways. Inside a .result the labels are prose and may wrap. */
.result table.facts { flex-basis: 100%; margin: 0; min-width: 0; max-width: 100%; }
.result table.facts th, .result table.facts td { white-space: normal; }
.big.small { font-size: 1.5rem; }
.cd { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; max-width: 640px; margin: .5rem auto 1rem; }
.cd div { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: .75rem .25rem; }
.cd .n { display: block; font-size: clamp(1.8rem, 7vw, 3rem); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.cd .u { display: block; color: var(--muted); font-size: .85rem; }
.tool textarea { width: 100%; font: inherit; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--fg); }
.row.trow { grid-template-columns: 1fr 44px; max-width: 360px; }
table.world { display: table; width: 100%; table-layout: fixed; }
table.world td.t { width: 52%; } table.world td.o { width: 20%; }
table.world td { white-space: normal; }
.result.tz { min-height: 168px; align-content: start; }
.result.tz .outwrap { flex-basis: 100%; min-height: 2.6em; }
.result.tz .big { font-size: 1.7rem; line-height: 1.25; }
.result.tz .letter { font-size: 1.1rem; min-height: 1.5em; flex-basis: 100%; }

/* ----- bookmark line under a tool ----- */
.bookmark { margin: -.75rem 0 1rem; text-align: center; color: var(--muted); font-size: .9rem; min-height: 1.6em; }
.bookmark button { font: inherit; font-size: .9rem; color: var(--accent); background: none; border: 0; padding: .2rem .3rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.bookmark button:focus { outline: 3px solid var(--accent); outline-offset: 1px; border-radius: 4px; }

/* ----- clockincalc extras ----- */
table.tc { display: table; width: 100%; margin: .25rem 0 .75rem; }
table.tc th[scope=row] { color: var(--muted); font-weight: 500; white-space: nowrap; }
table.tc td { padding: .25rem .3rem; white-space: normal; }
table.tc input { min-height: 40px; padding: .4rem .5rem; min-width: 5.5em; }
table.tc td.hrs { font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 7em; }
@media (max-width: 560px) {
  table.tc, table.tc tbody { display: block; } table.tc thead { display: none; }
  table.tc tr.day { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .35rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
  table.tc th[scope=row] { grid-column: 1 / -1; color: var(--fg); font-weight: 600; padding: 0; }
  table.tc td { border: 0; padding: 0; }
  table.tc td[data-col]::before { content: attr(data-col); display: block; font-size: .75rem; color: var(--muted); margin-bottom: .15rem; }
  table.tc td.hrs { grid-column: 1 / -1; display: flex; gap: .5rem; align-items: baseline; } table.tc td.hrs::before { margin: 0; }
  table.tc input { min-width: 0; width: 100%; }
}
.tool details.more { margin: .25rem 0 .75rem; } .tool details.more summary { cursor: pointer; color: var(--accent); font-weight: 600; } .tool details.more .row { margin-top: .6rem; }
.result .lead-in { color: var(--muted); font-size: .95rem; }
@media print { .tool.print-card { border: 0; } }

/* ----- unscramblist ----- */
.tool .rack .biglabel { font-size: 1.05rem; font-weight: 600; color: var(--fg); }
.tool .rack .field { display: flex; gap: .5rem; max-width: 560px; }
.tool .rack .field input { font-size: 1.4rem; letter-spacing: .12em; text-transform: lowercase; }
.tool .rack .field button { white-space: nowrap; }
.tool label.inline { display: inline-flex; gap: .4rem; align-items: center; color: var(--fg); font-size: .95rem; }
.result.words { display: block; min-height: 120px; }
.wordlist .wgroup h3 { margin: 1rem 0 .4rem; font-size: 1rem; } .wordlist .count { color: var(--muted); font-weight: 400; }
.wordlist ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.wordlist li { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: .3rem .55rem; font-size: 1rem; display: inline-flex; gap: .45rem; align-items: baseline; }
.wordlist li.blank .w { text-decoration: underline dotted; }
.wordlist .pts { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.tool.wordle .grid { display: grid; gap: .35rem; justify-content: center; margin: .5rem 0 .75rem; }
.tool.wordle .wrow { display: flex; gap: .35rem; }
.tool.wordle .cell { width: 54px; height: 54px; text-align: center; font-size: 1.5rem; font-weight: 700; text-transform: uppercase; padding: 0; border: 2px solid var(--line); background: var(--card); color: var(--fg); cursor: pointer; caret-color: transparent; }
.tool.wordle .cell:focus { outline: 3px solid var(--accent); outline-offset: 1px; }
.tool.wordle .gcell[data-state=grey]:not(:placeholder-shown) { background: #787c7e; border-color: #787c7e; color: #fff; }
.tool.wordle .cells { display: flex; gap: .35rem; margin-bottom: .25rem; } .tool.wordle fieldset { margin-bottom: .75rem; } .tool.wordle legend { font-weight: 600; margin-bottom: .35rem; }
.tool.wordle .cell.green:not(:placeholder-shown) { background: #6aaa64; border-color: #6aaa64; color: #fff; } .tool.wordle .cell.yellow:not(:placeholder-shown) { background: #c9b458; border-color: #c9b458; color: #fff; }
.tool.wordle .cell.green, .tool.wordle .cell.yellow { border-style: dashed; } .tool.wordle .cell.green:not(:placeholder-shown), .tool.wordle .cell.yellow:not(:placeholder-shown) { border-style: solid; }
.tool.wordle #greys { max-width: 300px; letter-spacing: .15em; }
.tool.wordle .gcell[data-state=yellow] { background: #c9b458; border-color: #c9b458; color: #fff; }
.tool.wordle .gcell[data-state=green] { background: #6aaa64; border-color: #6aaa64; color: #fff; }
.tool.wordle .actions { justify-content: center; }
@media (max-width: 360px) { .tool.wordle .cell { width: 46px; height: 46px; } }

/* ----- snowdaycast ----- */
.result.snowres { display: block; min-height: 260px; }
.snowres .gauge { text-align: center; padding: .5rem 0 0; } .snowres .pct { font-size: clamp(3.5rem, 16vw, 6rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; min-height: 1em; }
.snowres .pctlabel { color: var(--muted); font-size: .95rem; } .snowres .verdict { text-align: center; font-size: 1.3rem; font-weight: 700; min-height: 1.6em; margin: .25rem 0 .5rem; }
.snowres .note { text-align: center; }
.snowres dl.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem; margin: 1rem 0; } .snowres dl.facts div { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: .5rem .6rem; }
.snowres dt { color: var(--muted); font-size: .8rem; } .snowres dd { margin: 0; font-weight: 700; font-size: 1.05rem; }
.snowres .reasons { margin: .5rem 0; padding-left: 1.2rem; } .snowres .reasons li { margin: .25rem 0; }
.snowres .periods { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .5rem; margin: .75rem 0; } .snowres .period { border-top: 2px solid var(--line); padding-top: .4rem; font-size: .9rem; } .snowres .period strong { display: block; }
.snowres .src { color: var(--muted); font-size: .85rem; }

header.site .langs { display: flex; gap: .4rem; margin-left: auto; order: 3; } header.site .langs a { font-size: .8rem; font-weight: 600; color: var(--muted); text-decoration: none; padding: .15rem .4rem; border: 1px solid var(--line); border-radius: 4px; } header.site .langs a[aria-current] { color: var(--fg); border-color: var(--fg); }

/* ---- breathing pacer (breathingfrequency.com) ---- */
.tool.breath .steps { padding-left: 1.2rem; } .tool.breath .steps li { margin: .35rem 0; }
.pacerbox { text-align: center; margin: .5rem 0 1rem; }
.bstage { position: relative; width: min(70vw, 300px); height: min(70vw, 300px); margin: 0 auto; }
.bring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--line); }
.bcircle { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--accent) 55%, var(--card)), var(--accent)); transform: scale(0.55); will-change: transform; transition: none; opacity: .9; }
.paused .bcircle { opacity: .5; }
.btext { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--accent-fg); text-shadow: 0 1px 2px rgba(0,0,0,.25); pointer-events: none; }
.bphase { font-size: 1.35rem; font-weight: 600; letter-spacing: .02em; } .bcount { font-size: 2.6rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; min-height: 2.8rem; }
.blive { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.bclock { color: var(--muted); font-variant-numeric: tabular-nums; margin: .5rem 0 0; min-height: 1.3rem; }
.tool.breath .stepno { margin: .25rem 0 .5rem; }
.ratings { display: grid; gap: .4rem; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.ratings .rate { display: flex; gap: .4rem; align-items: center; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--fg); font-size: .95rem; cursor: pointer; }
.ratings .rate span { font-weight: 700; }
.ratings .rate:has(input:checked) { border-color: var(--accent); outline: 2px solid var(--accent); }
.verdict { font-size: 1.1rem; }
.tool.breath a.button { display: inline-block; text-decoration: none; font-weight: 600; padding: .55rem .9rem; border-radius: 6px; }
.tool.breath a.button.primary { background: var(--accent); color: var(--accent-fg); }
.ad.rest { min-height: 0; margin: .5rem 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { .bcircle { transform: scale(0.8) !important; } }
/* books and straps cards */
.book, .strap { display: grid; grid-template-columns: 120px 1fr; gap: 1rem; align-items: start; margin: 1.25rem 0; }
.book .cover, .strap .strapcard { margin: 0; }
.book .cover img { width: 120px; height: auto; border-radius: 4px; border: 1px solid var(--line); display: block; }
.cover.placeholder, .strapcard { width: 120px; min-height: 160px; border-radius: 6px; border: 1px solid var(--line); background: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: .6rem; box-sizing: border-box; color: var(--muted); font-size: .85rem; }
.strapcard .brand { font-weight: 700; color: var(--fg); font-size: 1rem; } .strapcard .model { margin-top: .3rem; }
.bookbody h2, .strapbody h2 { margin-top: 0; }
@media (max-width: 480px) { .book, .strap { grid-template-columns: 90px 1fr; } .book .cover img, .cover.placeholder, .strapcard { width: 90px; min-height: 120px; } }
.strapcard.photo { border: 1px solid var(--line); background: #fff; padding: .4rem; display: flex; align-items: center; justify-content: center; }
.strapcard.photo img, .book .cover img { max-width: 100%; height: auto; }
.cover .placeholder { display: flex; align-items: center; justify-content: center; text-align: center; width: 120px; min-height: 160px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--muted); font-size: .85rem; padding: .6rem; box-sizing: border-box; }
.strapcard figcaption { font-size: .7rem; color: var(--muted); text-align: center; margin-top: .25rem; }

/* ---- mapa del colegio electoral (encuestometro.com) ---- */
.tool .marcador { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.tool .lado { display: flex; flex-direction: column; } .tool .lado.r { text-align: right; }
.tool .cifra { font-size: 2.4rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.tool .lado.d .cifra { color: #1d4ed8; } .tool .lado.r .cifra { color: #b91c1c; }
.tool .quien, .tool .meta, .tool .sinasignar { font-size: .8rem; color: var(--muted); }
.tool .medio { text-align: center; display: flex; flex-direction: column; }
.tool .barra { position: relative; display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--line); }
.tool .barraD { background: #1d4ed8; } .tool .barraR { background: #b91c1c; margin-left: auto; }
.tool .mitad { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; background: var(--fg); opacity: .55; }
.tool .aviso { margin: .5rem 0 .75rem; min-height: 2.4em; }
.rejilla { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; margin: .5rem 0; }
.rejilla.libre { display: flex; flex-wrap: wrap; gap: 3px; }
/* Two things made the twelve columns wider than a phone, so the browser zoomed the page out
   and clipped the east coast: .tool button's 42px min-height, and aspect-ratio 1, which turns
   the cell's content height into a minimum WIDTH. Below 560px the cells stop being square and
   the text shrinks, which is what lets a 12-column cartogram fit a 360px screen. */
.casilla { aspect-ratio: 1; min-width: 0; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 4px; background: var(--card); color: var(--fg); cursor: pointer; font: inherit; line-height: 1.05; }
/* .tool button also sets padding .55rem .9rem and min-height 42px, both of which beat
   .casilla on specificity and both of which blow the 12-column grid apart on a phone. */
.tool .casilla { padding: 0; min-height: 0; min-width: 0; }
/* on a narrow screen give the map the tool's side padding back, so the cells are as big as they can be */
@media (max-width: 560px) {
  .tool.mapa .rejilla:not(.libre), .tool.senado .rejilla:not(.libre) { margin-left: -.85rem; margin-right: -.85rem; gap: 2px; }
  .tool .rejilla:not(.libre) .casilla { aspect-ratio: auto; height: 2.6rem; }
  .rejilla:not(.libre) .casilla .sigla { font-size: .62rem; }
  .rejilla:not(.libre) .casilla .ev { font-size: .55rem; }
}
.rejilla.libre .casilla { width: 46px; aspect-ratio: auto; height: 46px; }
.casilla .sigla { font-size: clamp(.55rem, 1.9vw, .8rem); font-weight: 700; }
.casilla .ev { font-size: clamp(.5rem, 1.6vw, .7rem); color: var(--muted); font-variant-numeric: tabular-nums; }
.casilla[data-v="d"] { background: #1d4ed8; border-color: #1d4ed8; color: #fff; } .casilla[data-v="d"] .ev { color: #dbeafe; }
.casilla[data-v="r"] { background: #b91c1c; border-color: #b91c1c; color: #fff; } .casilla[data-v="r"] .ev { color: #fee2e2; }
.casilla:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.tool.mapa .distritos { margin: .5rem 0; } .tool.mapa .distritos legend { font-size: .85rem; color: var(--muted); font-weight: 400; }
.caminos { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 1rem 0 .5rem; }
.caminos h3 { font-size: .95rem; margin: 0 0 .35rem; } .caminos ul { margin: 0; padding-left: 1.1rem; font-size: .92rem; }
.caminos .ev { color: var(--muted); font-variant-numeric: tabular-nums; }
.compartir input { font-size: .85rem; }
/* índice de países y fichas (encuestometro) */
.paises { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 1rem 0 1.5rem; }
.pais { border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; background: var(--card); }
.pais h2 { margin: 0 0 .4rem; font-size: 1.15rem; } .pais ul { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .95rem; }
.rejilla.estatica .casilla { cursor: default; }
.rejilla.estatica { max-width: 620px; }
.leyenda, .pie { font-size: .85rem; color: var(--muted); }
.punto { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; vertical-align: baseline; }
.hemiciclofig { margin: .5rem 0 1rem; } .hemiciclofig svg { width: 100%; height: auto; max-width: 620px; display: block; }
.hemiciclofig figcaption { font-size: .85rem; color: var(--muted); margin-top: .3rem; }
.punto.dem { background: #1d4ed8; } .punto.rep { background: #b91c1c; }
.casilla.inactiva { opacity: .32; cursor: default; }
.tool.senado .rejilla { max-width: 620px; }
.tool.camara .deslizador { width: 100%; } .tool.camara input[type=range] { width: 100%; accent-color: var(--accent); min-height: 42px; }
.tool.camara .hemiciclofig { margin: .25rem 0 .5rem; }
.leyendahemi { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: .4rem 0 .2rem; padding: 0; font-size: .85rem; }
.leyendahemi li { display: flex; align-items: center; gap: .35rem; } .leyendahemi strong { font-variant-numeric: tabular-nums; }
.cambios { margin: .3rem 0 .8rem; padding-left: 1.1rem; font-size: .92rem; } .cambios .ev { color: var(--muted); }
footer.site .family { font-size: .85rem; margin: .4rem 0 .6rem; }
/* tabla de distritos cruzados (encuestometro) */
.tablacruce { overflow-x: auto; margin: .5rem 0 1rem; }
.tablacruce table { border-collapse: collapse; width: 100%; font-size: .92rem; }
.tablacruce caption { caption-side: top; text-align: left; color: var(--muted); font-size: .85rem; padding-bottom: .4rem; }
.tablacruce th, .tablacruce td { padding: .4rem .5rem; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.tablacruce thead th { font-size: .8rem; color: var(--muted); font-weight: 600; }
.tablacruce tbody th { font-variant-numeric: tabular-nums; font-weight: 700; }
.tablacruce td.p-d { color: #1d4ed8; font-weight: 600; } .tablacruce td.p-r { color: #b91c1c; font-weight: 600; }
.tool.cruce .marcador .quien { font-size: .8rem; }

/* ---- calculadora del Congreso de los Diputados (encuestometro.com) ---- */
.tool.espana .lado.der { text-align: right; }
.tool.espana .lado.izq .cifra { color: #c01626; } .tool.espana .lado.der .cifra { color: #1D84CE; }
.tool.espana .barraIzq { background: #c01626; } .tool.espana .barraDer { background: #1D84CE; margin-left: auto; }
.tool.espana .hemiciclofig { margin: .25rem 0 .5rem; }
.tool.espana .pcts { border: 1px solid var(--line); border-radius: 8px; padding: .6rem .8rem .8rem; margin: .5rem 0 .75rem; }
.tool.espana .pcts legend { font-weight: 600; padding: 0 .35rem; }
.tool.espana .pcts .hint { margin: .2rem 0 .6rem; }
/* auto-fit y no repeat(4): en un móvil caben dos por fila y en un portátil las cuatro,
   sin que ninguna casilla baje de los 5,5rem que necesita un "33,06" con su flecha */
.tool.espana .campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: .5rem .8rem; }
.tool.espana .campos .field { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.tool.espana .campos label { margin: 0; font-size: .85rem; font-weight: 600; }
.tool.espana .campos input { width: 100%; min-width: 0; font-variant-numeric: tabular-nums; }
.tool.espana .otros { margin-top: .7rem; }
.tool.espana .otros summary { font-size: .9rem; cursor: pointer; }
.tool.espana table.tabla { display: table; width: auto; max-width: 100%; margin: .4rem 0 .8rem; font-size: .92rem; }
.tool.espana table.tabla th, .tool.espana table.tabla td { padding: .3rem .5rem; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.tool.espana table.tabla th[scope=row] { text-align: left; font-weight: 600; white-space: normal; }
/* La regla base da a las tablas display:block con overflow-x:auto. Aquí hace falta
   display:table para que las columnas se alineen, y eso quita el scroll: sin
   envoltorio, la fila más larga de las mayorías empujaba la página 472px a lo ancho. */
.tool.espana .tablawrap { overflow-x: auto; margin: .4rem 0 .8rem; max-width: 100%; }
.tool.espana .tablawrap table.tabla { margin: 0; }
.tool.espana table.tabla th[scope=row] .ev { display: block; font-weight: 400; font-size: .8rem; color: var(--muted); white-space: normal; }
.tool.espana table.tabla thead th { font-size: .8rem; color: var(--muted); font-weight: 600; text-align: right; }
.tool.espana table.tabla thead th:first-child { text-align: left; }
.tool.espana table.tabla td { font-variant-numeric: tabular-nums; }
.tool.espana table.tabla .sube { color: #15803d; } .tool.espana table.tabla .baja { color: #b91c1c; }
/* El reparto de cada circunscripción es texto que envuelve, así que va a la
   izquierda; la cabecera tiene que ir con él. */
.tool.espana table.circs td:last-child { text-align: left; white-space: normal; font-size: .88rem; }
.tool.espana table.circs thead th:last-child { text-align: left; }
.tool.espana table.tabla th[scope=row] .punto { margin-right: .3rem; }
.tool.espana .suma { margin: .6rem 0 0; }
.tool.espana .suma.mal { color: #b91c1c; font-weight: 600; }

/* ---- seguimiento de encuestas (encuestometro.com) ---- */
.tool.encuestas { display: block; }
.tool.encuestas .lado.der { text-align: right; }
.tool.encuestas .lado.izq .cifra { color: #c01626; } .tool.encuestas .lado.der .cifra { color: #1D84CE; }
.tool.encuestas .barraIzq { background: #c01626; } .tool.encuestas .barraDer { background: #1D84CE; margin-left: auto; }
.tool.encuestas h2 { margin: 1.4rem 0 .3rem; }
.tool.encuestas .tablawrap { overflow-x: auto; margin: .4rem 0 .5rem; max-width: 100%; }
.tool.encuestas table.tabla { display: table; width: auto; max-width: 100%; margin: 0; font-size: .9rem; }
.tool.encuestas table.tabla th, .tool.encuestas table.tabla td { padding: .3rem .45rem; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.tool.encuestas table.tabla th[scope=row] { text-align: left; font-weight: 600; white-space: normal; }
.tool.encuestas table.tabla thead th { font-size: .78rem; color: var(--muted); font-weight: 600; text-align: right; }
.tool.encuestas table.tabla thead th:first-child { text-align: left; }
.tool.encuestas table.tabla td { font-variant-numeric: tabular-nums; }
.tool.encuestas table.tabla .rango { color: var(--muted); font-size: .85rem; }
.tool.encuestas table.tabla th[scope=row] .ev { display: block; font-weight: 400; font-size: .78rem; color: var(--muted); }
.tool.encuestas table.tabla th[scope=row] .punto { margin-right: .3rem; }
.tool.encuestas table.sondeos { font-size: .85rem; }
.tool.encuestas .grafico { margin: .5rem 0 .4rem; }
.tool.encuestas .grafico svg { width: 100%; height: auto; display: block; }
.tool.encuestas .grafico figcaption { font-size: .85rem; color: var(--muted); margin-top: .3rem; }
.tool.encuestas .boton { display: inline-block; padding: .55rem .9rem; border-radius: 6px; background: var(--accent); color: #fff; text-decoration: none; font-weight: 600; }
.tool.encuestas .boton[aria-disabled=true] { background: var(--line); color: var(--muted); pointer-events: none; }
.tool.encuestas .aviso { background: #fff6e5; border-left: 3px solid #d08700; padding: .5rem .7rem; margin: 0 0 .8rem; }
.tool.encuestas .cambios li .ev { display: block; color: var(--muted); font-size: .85rem; }
.tool.encuestas table.tabla .rango .ev { display: inline; font-size: .78rem; }
.tool.encuestas #pieMarcador { margin-top: .5rem; }

/* ---- noche electoral (encuestometro.com) ---- */
.tool.noche { display: block; }
.tool.noche h2 { margin: 1.3rem 0 .3rem; }
.tool.noche .tablawrap { overflow-x: auto; margin: .4rem 0 .5rem; max-width: 100%; }
.tool.noche table.tabla { display: table; width: auto; max-width: 100%; margin: 0; font-size: .9rem; }
.tool.noche table.tabla th, .tool.noche table.tabla td { padding: .3rem .45rem; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.tool.noche table.tabla th[scope=row] { text-align: left; font-weight: 600; }
.tool.noche table.tabla thead th { font-size: .78rem; color: var(--muted); font-weight: 600; text-align: right; }
.tool.noche table.tabla thead th:first-child { text-align: left; }
.tool.noche table.tabla td { font-variant-numeric: tabular-nums; }
/* Las columnas de partido llevan punto de color y nombre: se leen a la
   izquierda. Iban por posición (td:nth-child(3)), y esa regla alcanzaba
   también la columna «Participación 2023» de la OTRA tabla, que quedaba a
   la izquierda bajo una cabecera a la derecha. Ahora va por clase, y la
   cabecera se mueve con ella. */
.tool.noche table.tabla td.izq, .tool.noche table.tabla thead th.izq { text-align: left; }
.tool.noche table.tabla .rango { color: var(--muted); }
.tool.noche .aviso { background: #fff6e5; border-left: 3px solid #d08700; padding: .5rem .7rem; margin: 0 0 .9rem; }
.tool.noche .opts .field { display: flex; flex-direction: column; gap: .15rem; }
.tool.noche .opts label { margin: 0; font-size: .85rem; font-weight: 600; }

/* ---- encuestas autonómicas (encuestometro.com) ---- */
.tool.autonomicas { display: block; }
.tool.autonomicas h2 { margin: 1.3rem 0 .3rem; }
.tool.autonomicas .tablawrap { overflow-x: auto; margin: .4rem 0 .5rem; max-width: 100%; }
.tool.autonomicas table.tabla { display: table; width: auto; max-width: 100%; margin: 0; font-size: .9rem; }
.tool.autonomicas table.tabla th, .tool.autonomicas table.tabla td { padding: .3rem .45rem; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
/* La casa encuestadora va DEBAJO del nombre de la comunidad, como en las
   otras tablas del sitio. Faltaba esta regla y sólo esta, así que salía
   pegada: «MadridNC Report/Justice Europe». */
.tool.autonomicas table.tabla th[scope=row] .ev { display: block; font-weight: 400; font-size: .78rem; color: var(--muted); white-space: normal; }
.tool.autonomicas table.tabla th[scope=row] { text-align: left; font-weight: 600; }
.tool.autonomicas table.tabla thead th { font-size: .78rem; color: var(--muted); font-weight: 600; text-align: right; }
.tool.autonomicas table.tabla thead th:first-child { text-align: left; }
.tool.autonomicas table.tabla td { font-variant-numeric: tabular-nums; }
.tool.autonomicas table.tabla .rango { color: var(--muted); }
.tool.autonomicas table.tabla .sube { color: #15803d; } .tool.autonomicas table.tabla .baja { color: #b91c1c; }
.tool.autonomicas tr.viejo th[scope=row], .tool.autonomicas tr.viejo td { opacity: .6; }
.tool.autonomicas .aviso { background: #fff6e5; border-left: 3px solid #d08700; padding: .5rem .7rem; margin: 0 0 .9rem; }
.tool.autonomicas .opts .field { display: flex; flex-direction: column; gap: .15rem; }
.tool.autonomicas .opts label { margin: 0; font-size: .85rem; font-weight: 600; }

/* ---- tablas ordenables (shared/ordenar.js) ---- */
/* La cabecera pasa a ser un botón para que funcione con teclado y la lea un
   lector de pantalla. Hereda todo del th: si no, una cabecera gris de .78rem se
   convertiría en un botón azul de 16px en mitad de la tabla. */
th .ordena { font: inherit; color: inherit; background: none; border: 0; padding: 0;
  margin: 0; cursor: pointer; text-align: inherit; width: 100%; letter-spacing: inherit;
  text-transform: inherit; }
th .ordena:hover { color: var(--fg); text-decoration: underline; }
th .ordena:focus-visible { outline: 2px solid var(--accent, #1d4ed8); outline-offset: 2px; }
/* La flecha va en el th y no en el botón, para que no se lleve el subrayado ni
   la lea el lector de pantalla: eso ya lo dice aria-sort. */
table.ordenable thead th[aria-sort]::after { content: " \2191"; }
table.ordenable thead th[aria-sort=descending]::after { content: " \2193"; }

/* ---- pactómetro (encuestometro.com) ---- */
.tool.pacto .tablawrap { overflow-x: auto; margin: .4rem 0 .5rem; max-width: 100%; }
.tool.pacto table.tabla { display: table; width: auto; max-width: 100%; margin: .4rem 0 .8rem; font-size: .92rem; }
.tool.pacto table.tabla th, .tool.pacto table.tabla td { padding: .3rem .5rem; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.tool.pacto table.tabla th[scope=row] { text-align: left; font-weight: 600; }
.tool.pacto table.tabla thead th { font-size: .78rem; color: var(--muted); font-weight: 600; text-align: right; }
.tool.pacto table.tabla thead th:first-child { text-align: left; }
.tool.pacto table.tabla td.izq, .tool.pacto table.tabla thead th.izq { text-align: left; }
.tool.pacto table.pactop input.esc { width: 4.5em; text-align: right; font: inherit; padding: .15rem .3rem; }
.tool.pacto table.tabla tfoot th, .tool.pacto table.tabla tfoot td { font-weight: 700; border-bottom: 0; }
.tool.pacto table.tabla tfoot td#totalnota { font-weight: 400; text-align: left; white-space: normal; color: var(--muted); font-size: .85rem; }
.tool.pacto .grande { font-size: clamp(1.8rem, 7vw, 2.6rem); font-weight: 800; line-height: 1.1; margin: .2rem 0; }
.tool.pacto .punto { margin-left: 2px; }

.tool.pacto table.pactop th[scope=row] { white-space: normal; min-width: 7.5em; }
.tool.pacto table.pactop th, .tool.pacto table.pactop td { padding: .3rem .35rem; }

/* ---- panel «qué ha cambiado» de la portada (encuestometro.com) ---- */
.tool.cambios { border: 1px solid var(--line); border-radius: 8px; padding: .8rem 1rem 1rem; margin: 0 0 1.4rem; background: var(--card); }
.tool.cambios h2 { margin: 0 0 .2rem; font-size: 1.15rem; }
.tool.cambios h3 { margin: 1rem 0 .3rem; font-size: .95rem; }
.tool.cambios .tablawrap { overflow-x: auto; margin: .5rem 0 .3rem; max-width: 100%; }
.tool.cambios table.tabla { display: table; width: auto; max-width: 100%; margin: 0; font-size: .9rem; }
.tool.cambios table.tabla th, .tool.cambios table.tabla td { padding: .25rem .28rem; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
/* Las siglas son cortas y no deben partirse: con el punto de color delante,
   «PSOE» y «EH Bildu» caían a dos líneas y la tabla crecía el doble de alto. */
.tool.cambios table.tabla th[scope=row] { text-align: left; font-weight: 600; white-space: nowrap; }
.tool.cambios table.tabla thead th { font-size: .75rem; color: var(--muted); font-weight: 600; }
.tool.cambios table.tabla thead th:first-child { text-align: left; }
/* Sin verde para subir ni rojo para bajar. Es la convención en los paneles de
   cotizaciones, y ahí funciona porque subir es bueno; aplicada a un partido
   político dice que su subida es una buena noticia, que es precisamente lo que
   este sitio no opina nunca. El signo ya distingue las dos direcciones. */
.tool.cambios td.sube, .tool.cambios td.baja { color: var(--fg); font-weight: 600; }
.tool.cambios td.igual { color: var(--muted); font-weight: 400; }
.tool.cambios .grande { font-size: clamp(1.2rem, 4.5vw, 1.6rem); font-weight: 800; margin: .7rem 0 .1rem; }
.tool.cambios ul.feed { list-style: none; padding: 0; margin: .2rem 0 .6rem; }
.tool.cambios ul.feed li { padding: .25rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.tool.cambios ul.feed li:last-child { border-bottom: 0; }
.tool.cambios .cuando { color: var(--muted); font-size: .85rem; }

/* ---- voto por correo (encuestometro.com) ---- */
.tool.correo .tablawrap { overflow-x: auto; margin: .6rem 0 .8rem; max-width: 100%; }
.tool.correo table.tabla { display: table; width: auto; max-width: 100%; margin: 0; font-size: .92rem; }
.tool.correo table.tabla th, .tool.correo table.tabla td { padding: .4rem .5rem; border-bottom: 1px solid var(--line); text-align: left; white-space: normal; vertical-align: top; }
.tool.correo table.tabla thead th { font-size: .78rem; color: var(--muted); font-weight: 600; }
.tool.correo table.tabla th[scope=row] { font-weight: 600; }
/* El plazo cerrado se apaga, no se pinta de rojo: no es un error de nadie. */
.tool.correo tr.pasado th, .tool.correo tr.pasado td { color: var(--muted); }
.tool.correo .grande { font-size: clamp(1.5rem, 6vw, 2.2rem); font-weight: 800; line-height: 1.15; margin: .6rem 0 .2rem; }
.tool.correo ul.avisos { margin: .8rem 0; padding-left: 1.1rem; }
.tool.correo ul.avisos li { margin: .35rem 0; font-size: .95rem; }
.tool.correo .pedido { margin: .5rem 0 0; font-size: .95rem; }
.tool.correo .pedido label { font-weight: 600; display: inline-flex; gap: .4rem; align-items: center; }

/* Aviso dentro del texto, para lo que puede quedar desfasado en días. El estilo
   existía sólo dentro de .tool, y una nota así hace falta sobre todo en prosa. */
.content .aviso { background: #fff6e5; border-left: 3px solid #d08700; padding: .6rem .8rem; margin: 0 0 1rem; }

/* Etiqueta y explicación: eso es una lista de definiciones, no una tabla. En
   tabla, la columna del texto largo obligaba a arrastrar media pantalla. */
dl.obligaciones { margin: .8rem 0 1.2rem; }
dl.obligaciones dt { font-weight: 600; margin-top: .7rem; }
dl.obligaciones dd { margin: .15rem 0 0; max-width: 70ch; }
dl.obligaciones .norma { color: var(--muted); font-size: .9rem; white-space: nowrap; }

/* El mapa del pie, en columnas. Antes era un párrafo corrido con todas las
   páginas del sitio, que con cuarenta y siete se lee como un muro. */
footer.site nav.mapa { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .5rem 1.5rem; margin-bottom: 1rem; }
footer.site nav.mapa .grupo { display: flex; flex-direction: column; gap: .15rem; }
footer.site nav.mapa .grupo h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: .4rem 0 .2rem; font-weight: 600; }
footer.site nav.mapa .grupo a { font-size: .92rem; }

/* Herramienta sin tarjeta. El recuadro (borde + 1rem de relleno) mete su
   contenido 17px hacia dentro, así que en una página que alterna prosa y tablas
   el texto empieza en dos sitios distintos: el párrafo en 116px y el título de
   la herramienta en 133. Donde la herramienta es sobre todo tablas, el recuadro
   no aporta nada y el desajuste se ve. Los controles siguen agrupados por el
   filete de arriba. */
.tool.plano { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0;
  padding: 1rem 0 0; margin: 1rem 0 1.5rem; }

/* Las tablas de datos se ajustan a su contenido en vez de estirarse al ancho
   completo. Estirar una tabla de cinco columnas hasta 1.134px al lado de un
   párrafo de 757 es lo que hacía que el hueco de la derecha pareciera un error
   de maquetación: ahora la tabla mide lo que necesita y sólo las anchas llegan
   al borde. */
.content table, .tool table.tabla { width: auto; max-width: 100%; }
/* Un desplegable de cuatro opciones no necesita medio ancho de pantalla. Se
   notaba al ensanchar el sitio: los controles crecían con el contenedor. */
.tool .opts .field { max-width: 22rem; flex: 0 1 22rem; }

/* ---- Tablas como fichas -------------------------------------------------
   Antes eran filas sueltas sobre el fondo de la página, y cinco seguidas (la
   página del CIS) se leían como un solo bloque: el pie de una tocaba la
   cabecera de la siguiente. Ahora cada tabla es una ficha con fondo propio,
   borde fino y esquinas redondeadas, y hay aire entre ellas.

   Hay dos clases de tabla en el sitio y necesitan sitios distintos para el
   borde: las de contenido son display:block con su propio scroll, así que la
   ficha es la tabla; las de herramienta son display:table dentro de un
   .tablawrap que es quien scrollea, así que la ficha es el envoltorio. Poner
   el borde en la tabla en ese segundo caso lo dejaría dentro del scroll y se
   movería al arrastrar. */
.content table, .tool .tablawrap {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 1.1rem 0 1.6rem;
  /* La ficha se ajusta a la tabla, no al ancho de la página: el envoltorio es
     un div y como tal se estiraba, dejando la tabla terminando a dos tercios
     de su propio recuadro. */
  width: fit-content; max-width: 100%;
}
/* fit-content, no auto: una tabla display:block es un bloque y como tal ocupa
   todo el ancho disponible, mientras su maquetación interna se encoge al
   contenido. El resultado era una ficha ancha con las filas y la leyenda
   terminando a dos tercios. */
.content table { border-collapse: separate; border-spacing: 0;
  width: fit-content; max-width: 100%; }
.tool .tablawrap > table.tabla { margin: 0; border: 0; background: none; }

/* El filete de la última fila sobra: ya está el borde de la ficha. */
.content table tbody tr:last-child > *,
.tool .tablawrap table tbody tr:last-child > * { border-bottom: 0; }
.content table tfoot tr:last-child > * { border-bottom: 0; }

/* La leyenda, como cabecera de la ficha y no como texto suelto encima. */
.content table > caption, .tool .tablawrap table > caption {
  caption-side: top; text-align: left; color: var(--muted); font-size: .88rem;
  padding: .6rem .75rem; border-bottom: 1px solid var(--line); background: var(--bg);
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}
/* Las celdas de los extremos respiran igual que la ficha. */
.content table th:first-child, .content table td:first-child,
.tool .tablawrap table th:first-child, .tool .tablawrap table td:first-child { padding-left: .75rem; }
.content table th:last-child, .content table td:last-child,
.tool .tablawrap table th:last-child, .tool .tablawrap table td:last-child { padding-right: .75rem; }