/* ══════════════════════════════════════════════════════════════════
   RECO-LAB · correction layer · August 2026
   Loaded LAST, after system-2.9.css, v3-reco-lab.css and
   shell-2026-08.css, on all five live pages.

   Every correction of this pass lives here and nowhere else. Not a
   single rule was removed from the three sheets underneath: they keep
   every declaration they had, and this layer overrides the handful that
   were wrong. Deleting the one <link> that pulls this file in reverts
   the whole pass, which is why it was built this way.

   What it corrects:
     1 · page behaviour  · scroll anchoring, text inflation, anchor landing
     2 · moods           · light / dark / night across the legacy palette
     3 · paper islands   · analytical figures stay light documents in dark
     4 · corners         · one radius scale, no square-cornered cards
     5 · project cards   · no veil, no dimming on the unwritten cases
     6 · methods page    · reformulated blocks and accordions (.rl-mx-*)
     7 · footer          · institutional signature
   ══════════════════════════════════════════════════════════════════ */

/* ══ 1 · Page behaviour ══════════════════════════════════════════ */

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

body{
  /* Scroll anchoring off, page-wide.
     Measured defect: with anchoring on, opening a collapsible block near
     the middle of the viewport scrolled the page by exactly the height
     the block had just gained, because the browser picked an anchor node
     *below* the growth and held it still. The block the reader had just
     clicked was shoved up and off the screen. That is the "I touch
     something and the page resizes" report. With anchoring off the
     scroll position stays put and the content below simply moves down. */
  overflow-anchor:none;
}

/* Anchor targets clear the sticky bar in CSS, so the landing is correct
   from the first paint and does not need a script to correct it. */
:where(section,div,footer,article)[id]{
  scroll-margin-top:calc(var(--rl-hdr-h,68px) + 16px);
}

/* ══ 2 · Moods · light / dark / night ════════════════════════════
   The legacy palette is already a token set on :root in system-2.9.css,
   so the two dark moods are a remap of those same names rather than a
   second stylesheet. Night is one step deeper than dark, same hues.
   Accents that were tuned for white paper (--teal at #005F73) are lifted
   here: unchanged they are unreadable on a dark ground. */

html[data-theme="dark"]{
  --bg:#0f1c26;
  --bg-warm:#132029;
  --surface:#16242f;
  --surface-2:#1b2b37;
  --ink:#e9eef2;
  --ink-deep:#f4f8fb;
  --ink-band:#0d1820;
  --muted:rgba(233,238,242,0.74);
  --muted-2:rgba(233,238,242,0.56);
  --rule:rgba(255,255,255,0.10);
  --rule-strong:rgba(255,255,255,0.18);
  --teal:#69adbe;
  --teal-deep:#8ac4ce;
  --resilience:#94D2BD;
  --amber:#e5ab3f;
  --terra:#dd934a;
  --terra-deep:#cf8a68;
  --alert:#e0705f;
  --institutional:#132029;
  --analytical:#0a141c;
  --navy-header:#132029;
  --navy-card:#0a141c;
  --brand-navy:#132029;
  --offwhite:#132029;
  --offwhite-2:#16242f;
  --text-secondary:#c7d0d8;
  color-scheme:dark;
}

html[data-theme="night"]{
  --bg:#070d13;
  --bg-warm:#0a1119;
  --surface:#0d151d;
  --surface-2:#111b24;
  --ink:#dbe4ea;
  --ink-deep:#eaf1f6;
  --ink-band:#080f17;
  --muted:rgba(219,228,234,0.66);
  --muted-2:rgba(219,228,234,0.48);
  --rule:rgba(255,255,255,0.07);
  --rule-strong:rgba(255,255,255,0.13);
  --teal:#5c98a8;
  --teal-deep:#79b0bb;
  --resilience:#7fbfab;
  --amber:#cf9835;
  --terra:#c68341;
  --terra-deep:#b87a5c;
  --alert:#cb6355;
  --institutional:#0a1119;
  --analytical:#060c11;
  --navy-header:#0a1119;
  --navy-card:#060c11;
  --brand-navy:#0a1119;
  --offwhite:#0a1119;
  --offwhite-2:#0d151d;
  --text-secondary:#b9c4cd;
  color-scheme:dark;

  /* Shell tokens. shell-2026-08.css ships light and dark; night is added
     here so the header and footer follow the third step too. Deep, never
     pure black: the bar has to keep reading as a navy plate. */
  --color-bg:#070d13;
  --color-text:#dbe4ea;
  --color-accent:#6d93b8;
  --color-accent-700:#93b3d1;
  --color-accent-900:#111b24;
  --color-divider:rgba(255,255,255,0.10);
  --color-neutral-400:rgba(255,255,255,0.28);
  --color-neutral-500:rgba(255,255,255,0.38);
  --color-neutral-600:rgba(255,255,255,0.55);
  --color-neutral-700:rgba(255,255,255,0.66);
  --reco-cta-bg:#6d93b8;
  --reco-cta-fg:#070d13;
}

/* The body ground follows the mood. system-2.9.css paints it white. */
html[data-theme="dark"] body,
html[data-theme="night"] body{background:var(--bg);color:var(--ink);}

/* Sections that were painted with a literal white or off-white. */
html[data-theme="dark"] .surface:not(.dark),
html[data-theme="night"] .surface:not(.dark){background:var(--bg);}
html[data-theme="dark"] .rl-methods,
html[data-theme="night"] .rl-methods{background:var(--surface);border-color:var(--rule-strong);}
html[data-theme="dark"] .rl-mp-block,
html[data-theme="night"] .rl-mp-block,
html[data-theme="dark"] .rl-mp-def,
html[data-theme="night"] .rl-mp-def{background:var(--surface);}
html[data-theme="dark"] .ivub-callout,
html[data-theme="night"] .ivub-callout{
  background:var(--surface-2);
  border-color:var(--rule-strong);
}
html[data-theme="dark"] .ivub-callout .module-label,
html[data-theme="night"] .ivub-callout .module-label{color:var(--teal-deep);}
html[data-theme="dark"] .ivub-callout .cs-line,
html[data-theme="night"] .ivub-callout .cs-line,
html[data-theme="dark"] .ivub-callout .cs-line strong,
html[data-theme="night"] .ivub-callout .cs-line strong{color:var(--ink);}

/* Etiquetas de país del ranking acumulado: fill fijo de la SVG,
   invisible sobre el fondo oscuro/noche. */
html[data-theme="dark"] .rl-fig-panel svg text[fill="#1A1612"],
html[data-theme="night"] .rl-fig-panel svg text[fill="#1A1612"],
html[data-theme="dark"] .rl-fig-panel svg text[fill="#9A9286"],
html[data-theme="night"] .rl-fig-panel svg text[fill="#9A9286"],
html[data-theme="dark"] .rl-fig-panel svg g[fill="#9A9286"],
html[data-theme="night"] .rl-fig-panel svg g[fill="#9A9286"]{fill:var(--ink);}
html[data-theme="dark"] .rl-mp-head,
html[data-theme="night"] .rl-mp-head,
html[data-theme="dark"] .rl-hero,
html[data-theme="night"] .rl-hero{background:var(--bg);}

/* ══ 3 · Paper islands ═══════════════════════════════════════════
   An analytical figure is a document. Embedded outputs, matrices,
   plots, tables and the chart card are printed on white paper and stay
   printed on white paper in every mood: a dark shell around a white
   figure is only wrong when the figure has no ground of its own, so
   each one is given its ground back as a card. Inside these blocks the
   whole token set reverts to the light values, which is why nothing in
   them has to be restyled one rule at a time. */
html[data-theme="dark"] :is(.rl-embed,.rl-fig-plot,.rl-matrix,.rl-table-wrap,.rl-card-media--contain,.rl-card-media--live),
html[data-theme="night"] :is(.rl-embed,.rl-fig-plot,.rl-matrix,.rl-table-wrap,.rl-card-media--contain,.rl-card-media--live){
  --bg:#FFFFFF;
  --bg-warm:#F3F5F7;
  --surface:#FFFFFF;
  --surface-2:#EEF1F4;
  --ink:#1A1612;
  --ink-deep:#0E1418;
  --muted:#6B6355;
  --muted-2:#9A9286;
  --rule:rgba(0,18,25,0.08);
  --rule-strong:rgba(0,18,25,0.16);
  --teal:#005F73;
  --teal-deep:#2F5D62;
  --amber:#EE9B00;
  --terra:#CA6702;
  --terra-deep:#B05B3B;
  --alert:#AE2012;
  --offwhite:#F3F5F7;
  --offwhite-2:#EEF1F4;
  color-scheme:light;
  color:var(--ink);
  background:#FFFFFF;
  border-radius:var(--r-card,14px);
  overflow:hidden;
}
/* The heading strip of an embed keeps its own colour inside the island. */
html[data-theme="dark"] .rl-embed-head,
html[data-theme="night"] .rl-embed-head{background:var(--offwhite);color:var(--ink);}

/* El ranking de vulnerabilidad no es un documento de papel: es una
   tarjeta del propio sistema, así que sigue el tono del header/footer
   en oscuro y noche en lugar de quedar blanca. */
html[data-theme="dark"] .cluster-viz,
html[data-theme="night"] .cluster-viz{background:var(--color-accent-900);border-color:var(--rule-strong);}
html[data-theme="dark"] .cluster-viz .cv-col,
html[data-theme="night"] .cluster-viz .cv-col{border-color:var(--rule-strong);}
html[data-theme="dark"] .cluster-viz .cv-action,
html[data-theme="night"] .cluster-viz .cv-action{background:var(--surface-2);transform:translateY(9px);}
html[data-theme="dark"] #project-1 .finding:last-child,
html[data-theme="night"] #project-1 .finding:last-child{border-left-color:#93b3d1;}

/* ══ 4 · Corners ═════════════════════════════════════════════════
   One radius scale for the whole site. Nothing that reads as a card,
   a chip, a tag, a button or a panel keeps a square corner. */
:root{
  --r-card:14px;
  --r-block:20px;
  --r-panel:26px;
  --r-btn:10px;
  --r-tile:8px;
}

.rl-topic{border-radius:var(--r-block);}
.rl-topic--editorial::before{border-radius:var(--r-block) var(--r-block) 0 0;}
.rl-project{border-radius:var(--r-panel);}
.rl-project .rl-card-media{border-radius:var(--r-panel) var(--r-panel) 0 0;}
.rl-topic .rl-card-media{border-radius:var(--r-block) var(--r-block) 0 0;}
.rl-methods{border-radius:var(--r-block);}
.rl-chip,.rl-topic-status,.rl-badge,.rl-action-soon,.rl-ftr-list .pending .soon{
  border-radius:var(--r-pill,999px);
}
.rl-btn,.rl-nav-contact,.rl-ftr-btn,.fw-method-cta,.fw-cta,.rl-lang{
  border-radius:var(--r-pill,999px);
}
.fw-found-grid,.fw-mod,.rl-mp-block,.rl-mp-def,.rl-mp-frame,.rl-mp-defs,
.rl-profile,.rl-action,.dropdown-panel,.rl-embed,.rl-matrix,.rl-table-wrap,
.cluster-viz,.rl-fig-plot{
  border-radius:var(--r-card);
}
.rl-mp-frame{border-radius:var(--r-panel);}
.rl-mp-defs{overflow:hidden;}
.rl-mp-block{border-radius:var(--r-block);}
/* The accent edge follows the corner rather than cutting across it. */
.rl-mp-block{border-top-width:0;border-left:3px solid var(--teal);}

/* ══ 5 · Project and topic cards ═════════════════════════════════ */

/* The photograph is the photograph. The dark wash existed to give the
   corner badge a legibility floor; the badge now carries its own opaque
   ground instead, so nothing is laid over the image. */
.rl-card-media::after{content:none !important;}
.rl-badge{
  background:#FFFFFF;
  border-color:rgba(29,45,61,0.14);
  box-shadow:0 2px 8px -4px rgba(14,20,24,0.5);
  font-size:11px;
  letter-spacing:0.14em;
  padding:6px 12px;
}
.rl-card-media--live .rl-live-veil{display:none;}

/* A case whose page is not written yet is stated in words, never by
   dimming its photograph. */
.rl-project.is-pending{opacity:1;}
.rl-action.is-pending{opacity:1;}
.rl-project-cta.is-pending,
.rl-action-soon{
  font-family:var(--sans);font-weight:600;font-size:11px;
  letter-spacing:0.12em;text-transform:uppercase;
  color:var(--muted-2);
  border:1px solid var(--rule-strong);
  padding:4px 12px;line-height:1.6;
  background:transparent;
}
.rl-project-cta.is-pending{
  border-bottom-color:var(--rule-strong);
  display:inline-block;
}
.rl-ftr-list .pending .soon{display:none;}

/* Chips clear the 11px floor. */
.rl-chip{font-size:11px;letter-spacing:0.1em;padding:4px 11px;}
.rl-topic-status{font-size:11px;letter-spacing:0.12em;padding:3px 10px;}

/* ══ 6 · Mood switch · written, per the design system ══════════════════ */
.rl-mood{display:flex;align-items:center;gap:7px;}
.rl-mood button{
  font-family:var(--font-shell,var(--sans));
  font-size:11.5px;letter-spacing:0.06em;line-height:1.4;
  background:none;border:0;padding:2px 1px;cursor:pointer;
  color:rgba(255,255,255,0.42);
  border-bottom:1px solid transparent;
  transition:color .16s ease,border-color .16s ease;
}
.rl-mood button:hover{color:rgba(255,255,255,0.82);}
.rl-mood button[aria-pressed="true"]{
  color:#ffffff;border-bottom-color:rgba(255,255,255,0.85);
}
.rl-mood .slash{color:rgba(255,255,255,0.25);font-size:11.5px;line-height:1;}

.rl-drawer-controls{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:16px 0 8px;border-top:1px solid rgba(255,255,255,0.14);
}
.rl-drawer-controls .k{
  font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(255,255,255,0.45);
}
/* One breakpoint governs the whole bar, so no width can leave a control
   with nowhere to live. Measured at 960px: wordmark 86 + nav 658 + end 97
   fills 841 of 945 usable pixels, and the mood control needs ~150 more.
   The shell's own breakpoint sent the nav to the drawer only at 900px, so
   between 901 and 1040 the mood was hidden from the bar while the drawer
   that holds the spare copy had no burger to open it. The burger now
   appears at the same width the bar runs out of room. */
@media (max-width:1180px){.rl-nav{gap:15px;}}
@media (max-width:1040px){
  .rl-nav{display:none;}
  .rl-hdr-sep{display:none;}
  .rl-burger{display:inline-block;}
  .rl-hdr-end .rl-mood{display:none;}
}
@media (min-width:1041px){.rl-drawer-controls{display:none;}}

/* ══ 7 · Footer · institutional signature ════════════════════════ */
.rl-ftr-tag{
  letter-spacing:0.1em;text-transform:uppercase;font-size:12px;
}
.rl-ftr-cv{margin-top:22px;}

/* ══ 8 · Methods page · reformulated blocks (.rl-mx-*) ═══════════
   Namespaced so it cannot collide with the .rl-mp-* rules already in
   shell-2026-08.css. Rounded blocks, real separation, one differentiating
   line per phase, an accordion wherever the text runs long. No dead grey,
   no black call to action, no decorative arrow, no underline in running
   text, nothing under 11px. */

.rl-mx-meta{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:14px;margin:34px 0;
}
.rl-mx-meta div{
  background:var(--offwhite);border:1px solid var(--rule-strong);
  border-radius:var(--r-card);padding:20px;
  display:flex;flex-direction:column;gap:5px;min-width:0;
}
.rl-mx-meta .k{
  font-family:var(--sans);font-size:11px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--muted-2);
}
.rl-mx-meta .v{
  font-family:var(--sans);font-size:13.5px;line-height:1.5;font-weight:500;color:var(--ink);
}

.rl-mx-phases{display:flex;flex-direction:column;gap:14px;overflow-anchor:none;}
.rl-mx-phase{
  background:var(--surface);
  border:1px solid var(--rule-strong);
  border-left:3px solid var(--phase,var(--teal));
  border-radius:var(--r-block);
  overflow:hidden;
}
.rl-mx-phase > summary{
  display:flex;align-items:center;gap:16px;
  padding:20px 26px;cursor:pointer;list-style:none;
  transition:background .16s ease;
}
.rl-mx-phase > summary::-webkit-details-marker{display:none;}
.rl-mx-phase > summary:hover,
.rl-mx-phase[open] > summary{background:color-mix(in srgb,var(--phase,var(--teal)) 8%,transparent);}
.rl-mx-num{
  font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:0.12em;
  color:var(--phase,var(--teal));flex:none;
  border:1px solid var(--phase,var(--teal));border-radius:var(--r-pill,999px);
  padding:3px 11px;line-height:1.6;
}
.rl-mx-title{
  font-family:var(--serif);font-weight:500;font-size:19px;line-height:1.35;
  color:var(--ink);flex:1;min-width:0;
}
/* Plus / minus, not a chevron: the site carries no decorative arrows. */
.rl-mx-pm{position:relative;width:18px;height:18px;flex:none;color:var(--muted-2);}
.rl-mx-pm::before,.rl-mx-pm::after{
  content:"";position:absolute;background:currentColor;border-radius:2px;
  transition:transform .18s ease,opacity .18s ease;
}
.rl-mx-pm::before{left:0;right:0;top:8px;height:2px;}
.rl-mx-pm::after{top:0;bottom:0;left:8px;width:2px;}
.rl-mx-phase[open] .rl-mx-pm::after{transform:rotate(90deg);opacity:0;}
.rl-mx-body{
  padding:20px 26px 26px;border-top:1px solid var(--rule);
}
.rl-mx-body p{
  font-family:var(--sans);font-size:15px;line-height:1.72;
  color:var(--muted);margin:0 0 16px;max-width:82ch;
}
.rl-mx-body p:last-child{margin-bottom:0;}
.rl-mx-body strong{color:var(--ink);font-weight:600;}

.rl-mx-status{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;}
.rl-mx-status span{
  font-family:var(--sans);font-weight:600;font-size:11.5px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--teal-deep);
  background:color-mix(in srgb,var(--teal) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--teal) 30%,transparent);
  border-radius:var(--r-pill,999px);padding:5px 13px;line-height:1.5;
}

.rl-mx-defs{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:14px;margin-top:20px;
}
.rl-mx-def{
  background:var(--offwhite);border:1px solid var(--rule-strong);
  border-radius:var(--r-card);padding:20px;min-width:0;
}
.rl-mx-def .k{
  font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--teal-deep);margin-bottom:8px;
}
.rl-mx-def p{font-family:var(--sans);font-size:14px;line-height:1.65;color:var(--muted);margin:0;}

.rl-mx-frame{
  background:var(--institutional);color:rgba(255,255,255,0.76);
  border-radius:var(--r-panel);padding:clamp(28px,3.4vw,44px);margin-top:26px;
}
.rl-mx-frame h3{
  font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.32;
  color:#fff;margin:0 0 20px;max-width:34ch;
}
.rl-mx-frame p{
  font-family:var(--sans);font-size:15px;line-height:1.72;
  color:rgba(255,255,255,0.74);margin:0 0 16px;max-width:82ch;
}
.rl-mx-frame p:last-child{margin-bottom:0;}
.rl-mx-frame strong{color:#fff;font-weight:600;}
.rl-mx-eyebrow{
  font-family:var(--sans);font-size:11.5px;letter-spacing:0.18em;
  text-transform:uppercase;color:rgba(255,255,255,0.55);margin-bottom:14px;
}
.rl-mx-chain{display:flex;flex-wrap:wrap;gap:9px;margin:20px 0;}
.rl-mx-chain span{
  font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:0.08em;
  color:#fff;border:1px solid rgba(255,255,255,0.28);
  border-radius:var(--r-pill,999px);padding:6px 15px;line-height:1.5;
}
.rl-mx-chain span.lead{border-color:var(--brand-green);background:rgba(95,174,154,0.18);}
.rl-mx-lines{display:flex;flex-direction:column;gap:12px;margin:20px 0;list-style:none;padding:0;}
.rl-mx-lines li{
  display:flex;gap:14px;align-items:flex-start;
  font-family:var(--sans);font-size:14.5px;line-height:1.62;color:rgba(255,255,255,0.74);
}
.rl-mx-lines .k{
  font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:0.1em;
  color:var(--brand-green);flex:none;min-width:46px;padding-top:2px;
}
.rl-mx-lines .t{min-width:0;}

.rl-mx-prog{
  background:var(--surface);border:1px solid var(--rule-strong);
  border-radius:var(--r-panel);padding:clamp(26px,3vw,40px);margin-top:26px;
}
.rl-mx-prog-chain{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:20px;}
.rl-mx-prog-chain span{
  font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:0.06em;
  color:var(--teal-deep);background:color-mix(in srgb,var(--teal) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--teal) 28%,transparent);
  border-radius:var(--r-pill,999px);padding:6px 14px;line-height:1.5;
}
.rl-mx-prog-chain i{font-style:normal;color:var(--muted-2);font-size:13px;}
.rl-mx-prog p{
  font-family:var(--sans);font-size:15px;line-height:1.72;color:var(--muted);
  margin:0 0 16px;max-width:82ch;
}
.rl-mx-prog p:last-child{margin-bottom:0;}

.rl-mx-h3{
  font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.2vw,26px);
  line-height:1.3;color:var(--ink);margin:0 0 22px;
}

@media (max-width:760px){
  .rl-mx-phase > summary{padding:16px 18px;gap:12px;}
  .rl-mx-title{font-size:17px;}
  .rl-mx-body{padding:18px 18px 20px;}
  .rl-mx-meta{margin:26px 0;}
}

/* ══ 9 · Home · Sobre RECO-LAB / Cómo trabaja ════════════════════ */
.rl-about-grid{
  display:grid;grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);
  gap:clamp(28px,4vw,72px);align-items:start;
}
.rl-about-mark{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-weight:600;font-size:12px;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--teal-deep);
  background:color-mix(in srgb,var(--teal) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--teal) 28%,transparent);
  border-radius:var(--r-pill,999px);padding:7px 16px;margin-bottom:20px;
}
.rl-about-body p{
  font-family:var(--sans);font-size:16px;line-height:1.72;color:var(--muted);
  max-width:66ch;margin:0 0 16px;
}
.rl-about-body p:last-child{margin-bottom:0;}
.rl-about-body p:first-child{color:var(--ink);font-size:17px;}
.rl-work-panel{
  background:var(--surface);border:1px solid var(--rule-strong);
  border-radius:var(--r-panel);padding:clamp(26px,3vw,40px);
  margin-top:clamp(32px,4vh,52px);
}
.rl-work-panel .rl-mx-eyebrow{color:var(--teal-deep);}
@media (max-width:1000px){.rl-about-grid{grid-template-columns:1fr;}}

/* ══ 10 · Profile · the real CV, in both languages ═══════════════ */
.rl-cv-list{display:flex;flex-direction:column;gap:10px;margin-top:12px;}
.rl-cv-item{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 18px;text-decoration:none;
  background:var(--offwhite);border:1px solid var(--rule-strong);
  border-radius:var(--r-card);
  transition:border-color .16s ease,background .16s ease;
}
.rl-cv-item:hover,.rl-cv-item:focus-visible{
  border-color:var(--teal);background:color-mix(in srgb,var(--teal) 7%,transparent);
}
.rl-cv-item .t{font-family:var(--sans);font-weight:600;font-size:14.5px;color:var(--ink);min-width:0;}
/* The format marker on a profile action that opens a file. */
.rl-action-fmt{
  font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:0.12em;
  color:var(--teal-deep);border:1px solid color-mix(in srgb,var(--teal) 30%,transparent);
  border-radius:var(--r-pill,999px);padding:3px 10px;flex:none;margin-left:auto;
}
.rl-action.primary .rl-action-fmt{
  color:var(--brand-amber);border-color:rgba(217,148,26,0.45);
}
.rl-action{display:flex;align-items:center;justify-content:space-between;gap:16px;}

.rl-cv-item .f{
  font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:0.12em;
  color:var(--teal-deep);border:1px solid color-mix(in srgb,var(--teal) 30%,transparent);
  border-radius:var(--r-pill,999px);padding:3px 10px;flex:none;
}

@media (prefers-reduced-motion:reduce){
  .rl-mx-pm::before,.rl-mx-pm::after{transition:none;}
}

/* ══ 11 · Project 02 · pasada de corrección de agosto ════════════
   Cuatro defectos medidos en la página, y sólo esos.

   11.1 · Las definiciones conceptuales no se leían. El bloque de TMD,
          HAR, FAI y UPI se pintaba con un degradé fijo (#F4F6F7 hacia
          --surface) escrito para papel blanco. En oscuro y en noche
          ese degradé arranca casi blanco y termina casi negro dentro
          de la misma caja, así que el texto cruza el punto donde
          pierde contraste y desaparece a media altura. Se reemplaza
          por una superficie del tema, plana, con borde visible y la
          línea de acento del módulo intacta.

   11.2 · Los textos de análisis quedaban a media caja mientras las
          figuras llegaban al borde del contenedor. La medida
          editorial se ensancha; no se centra ni se recorta.

   11.3 · Bandas vacías bajo las figuras. Un contenedor declarado más
          alto que su output deja papel en blanco debajo de la
          leyenda, que en noche es exactamente el bloque blanco
          chocante reportado.

   11.4 · Las islas de papel se apoyan sin filo: borde propio y sombra
          corta, para que un documento claro dentro de una página
          nocturna se lea como una lámina y no como un agujero. */

/* 11.1 · Definiciones conceptuales · legibles en los tres modos */
.rl-mod--feature{
  background:var(--surface);
  border:1px solid var(--rule-strong);
}
html[data-theme="dark"] .rl-mod--feature,
html[data-theme="night"] .rl-mod--feature{
  background:var(--surface-2);
}
html[data-theme="dark"] .rl-mod--feature .rl-mod-eyebrow,
html[data-theme="night"] .rl-mod--feature .rl-mod-eyebrow{
  border-bottom-color:rgba(255,255,255,0.18);
}
.rl-mod--feature .rl-mod-title{color:var(--ink);}
.rl-mod--feature p{color:var(--muted);max-width:none;}
html[data-theme="dark"] .rl-mod--feature .rl-mod-eyebrow,
html[data-theme="night"] .rl-mod--feature .rl-mod-eyebrow{color:var(--teal);}
html[data-theme="dark"] .rl-mod--feature.is-har .rl-mod-eyebrow,
html[data-theme="night"] .rl-mod--feature.is-har .rl-mod-eyebrow{color:#d69a7a;}
html[data-theme="dark"] .rl-mod--feature.is-upi .rl-mod-eyebrow,
html[data-theme="night"] .rl-mod--feature.is-upi .rl-mod-eyebrow{color:#93b3d1;}

/* El acento de UPI es --institutional, que en oscuro y en noche
   resuelve a un navy casi negro. Medido sobre la página: el énfasis
   del título del módulo y el antetítulo de su lectura quedaban en
   #0a1119 sobre fondo #111b24, es decir, contraste 1,09 y 1,00 —
   texto presente en el DOM y ausente en pantalla. Ambos toman el
   azul claro del sistema, que es el mismo acento en modo oscuro. */
html[data-theme="dark"] .rl-mod--feature.is-upi .rl-mod-title em,
html[data-theme="night"] .rl-mod--feature.is-upi .rl-mod-title em,
html[data-theme="dark"] .rl-reading.is-upi .rl-reading-eyebrow,
html[data-theme="night"] .rl-reading.is-upi .rl-reading-eyebrow{color:#93b3d1;}
html[data-theme="dark"] .rl-mod--feature.is-upi::before,
html[data-theme="night"] .rl-mod--feature.is-upi::before{background:#93b3d1;}

/* El intro del FAI comparte el defecto: argumento a la izquierda,
   panel a la derecha, y el mismo papel fijo debajo de los dos. */
html[data-theme="dark"] .rl-fai-intro,
html[data-theme="night"] .rl-fai-intro{background:var(--surface-2);}
html[data-theme="dark"] .rl-fai-lede,
html[data-theme="night"] .rl-fai-lede{color:var(--muted);}

/* 11.2 · Medida editorial · el texto acompaña al ancho de la figura */
.rl-reading,
.rl-reading p,
.rl-bridge,
.rl-sec-desc,
.rl-read p,
.proj-narrative p,
.rl-fig-sub{
  max-width:min(100%, 1040px);
}
.rl-reading p,.rl-bridge{line-height:1.78;}
/* Dos párrafos puente seguidos necesitan aire entre ellos. */
.rl-bridge + .rl-bridge{margin-top:16px;}

/* 11.3 · Sin banda vacía bajo la serie animada. El ajuste automático
   por contenido sigue activo; esto corrige la altura declarada de la
   que parte, que era la que dejaba el papel vacío visible mientras el
   output todavía no había medido. */
.rl-embed-body.h-980{height:720px;}
@media (max-width:900px){.rl-embed-body.h-980{height:600px;}}

/* ══ 12 · Métodos · caja de encuadre legible en oscuro y noche ═══
   Medido sobre metodos.html: los cuatro valores de la caja de intro
   (.rl-mp-meta .v) se pintaban con el navy institucional sobre la
   propia banda navy. Contraste 1,01 en noche: la etiqueta se veía y
   el dato no. Los cuatro son contenido, no decoración. */
.rl-mp-meta .v{color:var(--ink);}
html[data-theme="dark"] .rl-mp-meta .v,
html[data-theme="night"] .rl-mp-meta .v{color:#ffffff;}
html[data-theme="dark"] .rl-mp-meta .k,
html[data-theme="night"] .rl-mp-meta .k{color:rgba(255,255,255,0.62);}

/* 11.4 · Islas de papel · lámina, no agujero */
html[data-theme="dark"] :is(.rl-embed,.rl-fig-plot,.rl-table-wrap),
html[data-theme="night"] :is(.rl-embed,.rl-fig-plot,.rl-table-wrap){
  border:1px solid rgba(255,255,255,0.16);
  box-shadow:0 24px 48px -34px rgba(0,0,0,0.85);
}

/* ══ 13 · Matriz UPI · leyenda de ejes y regímenes como tarjetas ══
   .rl-axhelp y .rl-regimes se pintaban como una grilla de líneas de
   1px pegadas al ancho de la matriz: sin aire, sin jerarquía y con
   el mismo tratamiento en los tres modos. Pasan al lenguaje de
   tarjeta que ya usa el resto de la página (superficie propia,
   borde, radio, sombra) y quedan fuera de la isla blanca. */
.rl-axhelp{
  background:transparent;border:0;gap:16px;
  margin-top:20px;
}
.rl-ax{
  background:var(--surface);border:1px solid var(--rule-strong);
  border-radius:var(--r-card);padding:20px 24px;
  box-shadow:0 24px 48px -38px rgba(14,20,24,0.28);
}
.rl-ax.is-x{background:var(--surface);}
.rl-ax.is-y{background:var(--surface);}
.rl-regimes{
  background:transparent;border:0;gap:16px;
  margin-top:16px;
}
.rl-regime{
  background:var(--surface);border:1px solid var(--rule-strong);
  border-radius:var(--r-card);
  box-shadow:0 24px 48px -38px rgba(14,20,24,0.28);
}
.rl-regime .rt{border-top:1px solid var(--rule);}

/* .rl-axhelp y .rl-regimes viven dentro de .rl-matrix, que la regla de
   "isla de papel" (11.4 más abajo) fija en modo claro sin importar el
   tema activo. Esa isla es correcta para el propio plot (papel fijo
   con sus datos codificados en color), pero estas dos leyendas no son
   parte del plot: deben seguir el tema real, así que se les restituyen
   los tokens de oscuro/noche localmente. */
html[data-theme="dark"] .rl-axhelp,
html[data-theme="dark"] .rl-regimes{
  --surface:#16242f;--rule:rgba(255,255,255,0.10);--rule-strong:rgba(255,255,255,0.18);
  --ink:#e9eef2;--muted:rgba(233,238,242,0.74);--muted-2:rgba(233,238,242,0.56);
  --teal:#8ac4ce;--teal-deep:#79b0bb;
}
html[data-theme="night"] .rl-axhelp,
html[data-theme="night"] .rl-regimes{
  --surface:#0d151d;--rule:rgba(255,255,255,0.07);--rule-strong:rgba(255,255,255,0.13);
  --ink:#dbe4ea;--muted:rgba(219,228,234,0.66);--muted-2:rgba(219,228,234,0.48);
  --teal:#5c98a8;--teal-deep:#79b0bb;
}
html[data-theme="dark"] .rl-ax,
html[data-theme="night"] .rl-ax,
html[data-theme="dark"] .rl-regime,
html[data-theme="night"] .rl-regime{
  border-color:rgba(255,255,255,0.14);
  box-shadow:0 24px 48px -34px rgba(0,0,0,0.75);
}

/* 13.x · leyenda de regímenes: punto sin halo, título en la misma
   línea, pastillas de territorio alineadas al fondo de la tarjeta
   y todas del mismo color (el color ya lo indica el punto). */
.rl-regime{
  display:grid;grid-template-columns:auto 1fr;
  grid-template-rows:auto auto 1fr auto;column-gap:9px;
}
.rl-regime .sw{
  box-shadow:none;grid-column:1;grid-row:1;align-self:center;margin:0;
}
.rl-regime .rn{grid-column:2;grid-row:1;align-self:center;}
.rl-regime .rd{grid-column:1/-1;grid-row:2;}
.rl-regime .rt{grid-column:1/-1;grid-row:4;margin-top:0;}
.rl-regime .rt .cap{border-width:1px;font-weight:600;}