/* Adelanta — app.css
 *
 * The whole visual vocabulary of the web app. Hand-written; the only stylesheet
 * besides the generated tokens.css.
 *
 * Load order matters — tokens.css first, it defines every custom property used here:
 *
 *   <link rel="stylesheet" href="/static/tokens.css">
 *   <link rel="stylesheet" href="/static/app.css">
 *
 * Implements the guía de marca v1.0 (ADR-0012). Rules this file is built to keep
 * (brand/identity.md, brand/design-system.md):
 *   - No hex code appears below. Every color is a var() from tokens.css.
 *     webapp/test_styles.py fails the build if one shows up.
 *   - One rojo per view: the action, or the number that matters. Not both.
 *   - Rojo never carries state: errors are rojo-profundo, so an alert cannot be
 *     mistaken for a button.
 *   - Text is tinta or one of the three texto-* steps, never rojo below 24px.
 *     borde, linea and desactivado are decorative — never text.
 *   - Numbers a merchant might check are set in JetBrains Mono, 500, tabular.
 *   - No gradients. Exactly one shadow exists (--shadow), floating layers only.
 */

/* ---------------------------------------------------------------- fonts --
 * Archivo and JetBrains Mono woff2 files live in static/fonts/ (SIL OFL). See
 * fonts/fonts_README.md. Both are VARIABLE fonts: one file per subset carries
 * the whole weight axis, so `font-weight: 100 900` below is a range, not a typo.
 * We use 400/500/600/800 of it (brand/identity.md).
 *
 * The urls are relative to this file, not site-absolute: that resolves both when
 * Flask serves app.css from /static/ and when demos/webapp-wireframe loads it as
 * ../../webapp/static/app.css. Absolute /static/fonts/ 404s in the second case,
 * which is why the wireframes used to render in Helvetica.
 *
 * latin covers Spanish in full; latin-ext is declared after it with its own
 * unicode-range so an unusual character still resolves rather than falling back.
 */
@font-face {
  font-family: "Archivo";
  src: url("fonts/Archivo-Variable-latin.woff2") format("woff2");
  font-weight: 100 900;
  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;
}
@font-face {
  font-family: "Archivo";
  src: url("fonts/Archivo-Variable-latinext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Variable-latin.woff2") format("woff2");
  font-weight: 100 800;
  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;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Variable-latinext.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ----------------------------------------------------- derived tokens --
 * Color and typography come from tokens.css (source: brand/identity.md, which
 * carries the guía de marca v1.0 ladder). What follows is derived from those and
 * owned by this file: the ladder's leading and tracking, the spacing scale, the
 * radius scale and a few structural values. Settled — see brand/design-system.md.
 */
:root {
  /* Type ladder. The sizes are tokens; these are the slots the components use.
     Public surfaces get the full ladder; app screens start at --text-lg. */
  --text-etiqueta: var(--type-etiqueta); /* 11px  — mono, uppercase, 0.18em */
  --text-app: var(--type-cuerpo-app);    /* 15px  — app screens, tables */
  --text-base: var(--type-cuerpo);       /* 16px  — body on the web */
  --text-md: var(--type-h3);             /* 22px  — h3, lead */
  --text-lg: var(--type-h2);             /* 34px  — h2 */
  --text-xl: var(--type-h1);             /* 56px  — h1, cabecera de sección */
  --text-display: var(--type-display);   /* 88px  — portada, .display */
  /* The guide's ladder has no small sans step. This one is app.css's own,
     for captions, help text and table meta. */
  --text-xs: 0.8125rem;                  /* 13px */

  /* Leading, from the guide's size/leading pairs. */
  --leading-body: 1.625;   /* 16/26 */
  --leading-app: 1.6;      /* 15/24 */
  --leading-tight: 1.09;   /* 88/96 — .display */
  --leading-h1: 1.072;     /* 56/60 */
  --leading-heading: 1.18; /* 34/40, 22/28 */

  /* Tracking. Negative only as type grows; 0 below 16px. */
  --track-display: -0.03em; /* from 40px */
  --track-lg: -0.02em;      /* 24–39px  */
  --track-md: -0.01em;      /* 16–23px  */
  --track-etiqueta: 0.18em; /* mono uppercase labels only */

  /* Weights. The axis is 100–900; we use four of them. */
  --weight-body: 400;
  --weight-cifra: 500;
  --weight-strong: 600;
  --weight-ramp: 800;      /* logotype, and the last word of a titular con rampa */

  /* Spacing — 4px grid. Within a component 4–16, between blocks 24–64,
     between page sections 96–128. */
  --space-3xs: 0.25rem;   /* 4px  */
  --space-2xs: 0.5rem;    /* 8px  */
  --space-xs: 0.75rem;    /* 12px */
  --space-sm: 1rem;       /* 16px */
  --space-md: 1.5rem;     /* 24px */
  --space-lg: 2rem;       /* 32px */
  --space-xl: 3rem;       /* 48px */
  --space-2xl: 4rem;      /* 64px */
  --space-3xl: 6rem;      /* 96px — public-page bands only */

  /* Radius, by element. Not one value: the guide assigns four. */
  --radius-flat: 0;              /* divisores, franjas */
  --radius-control: 6px;         /* botones, campos */
  --radius-card: 10px;           /* tarjetas, hojas */
  --radius-pill: 999px;          /* chips, burbujas */

  /* Rules and structure */
  --rule: 1px solid var(--color-linea);
  --rule-field: 1px solid var(--color-borde);
  --rule-strong: 1px solid var(--color-tinta);
  --tap: 44px;                   /* minimum tap target, one-handed entry */
  --control-h: 48px;             /* button height; --tap is the floor */
  --field-h: 46px;
  --measure: 34rem;              /* ~66 characters of prose */
  --wrap: 75rem;                 /* 1200px content max */
  --nav-h: 72px;

  /* The one shadow the guide allows, for floating layers only. */
  --shadow: 0 8px 24px color-mix(in srgb, var(--color-tinta) 8%, transparent);

  /* Focus ring: a 3px rojo halo, not a hard outline. */
  --focus-ring: color-mix(in srgb, var(--color-rojo) 24%, transparent);

  /* Surfaces. Named for what they do; the values are the guide's own neutrals,
     not opacities of tinta — nobody derives a grey here any more. */
  --surface-quiet: var(--color-fondo-suave);
  --surface-hover: var(--color-linea);
}

/* Coming-soon page. One screen: the mark, the word, and the two things a
   visitor can do. The titular carries the logotype's weight ramp (400 -> 800,
   ADR-0011) letter by letter, which is the only motion on the page. */
.coming-soon {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-2xl);
  padding: clamp(1.5rem, 4vw, var(--space-xl)) clamp(1.25rem, 5vw, var(--space-2xl));
}
/* Not `.display`: the ramp owns the weight, so the step starts at the body
   weight and grows from there. Fluid rather than the ladder's two steps —
   the word is the whole page and should fill it at any width.

   Sized off the viewport with no lower bound, and set on one line. A weight
   ramp changes the metrics as it travels, so a word that only just fits at
   400 does not fit at 800: with a fixed floor the line re-wraps and re-joins
   several times a second on a 360px phone, which is most of them. 9vw always
   leaves room for the heaviest frame, so the line never moves. */
.coming-soon__titular {
  font-size: min(9vw, 7rem);
  font-weight: var(--weight-body);
  letter-spacing: var(--track-display);
  line-height: 1;
  white-space: nowrap;
}
.coming-soon__letra {
  display: inline-block;
  animation: coming-soon-ramp 3.2s ease-in-out infinite;
  animation-delay: calc(var(--letra, 0) * 0.14s);
}
/* The one rojo on the page. The mark is chrome, per `.masthead__mark`. */
.coming-soon__punto { color: var(--color-rojo); }
@keyframes coming-soon-ramp {
  0%, 100% { font-weight: var(--weight-body); }
  50% { font-weight: var(--weight-ramp); }
}
/* The reset kills the animation; without a weight of its own the word would
   settle at 400, thinner than the logotype it echoes. */
@media (prefers-reduced-motion: reduce) {
  .coming-soon__letra { font-weight: var(--weight-strong); }
}
.coming-soon__pie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--space-lg) var(--space-2xl);
  padding-top: var(--space-md);
  border-top: var(--rule);
}
/* The foot is scaled down so the word keeps the page. Scoped away from phones
   on purpose: zoom shrinks the controls with everything else, and 0.85 of the
   48px button is 40.8px — under --tap, the one-handed entry floor. Pointers
   are precise; thumbs are not. */
@media (min-width: 641px) {
  .coming-soon__pie { zoom: 0.85; }
}
.coming-soon__form { max-width: 26rem; }
/* A label, not a heading: mono etiqueta, the same treatment the status chips
   use. It names the field without competing with the titular. */
.coming-soon__form > h2 {
  font-family: var(--font-mono);
  font-size: var(--text-etiqueta);
  font-weight: var(--weight-body);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--color-texto-secundario);
}
/* Field and button on one line, wrapping to two on a narrow phone. */
.coming-soon__campo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.coming-soon__campo .field__input { flex: 1 1 10rem; }
.coming-soon__campo .button { flex: 1 0 8.75rem; }
.coming-soon__campo .field__input::placeholder { color: var(--color-texto-terciario); }
.coming-soon__error { font-size: var(--text-xs); color: var(--color-rojo-profundo); }

/* Private workspace navigation and entry point. */
.operations-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-lg);
  padding-block: var(--space-sm);
  margin-bottom: var(--space-lg);
  border-bottom: var(--rule);
}
.operations-nav__home { color: var(--color-tinta); font-weight: var(--weight-strong); text-decoration: none; }
.operations-nav__home .meta { margin-left: var(--space-2xs); }
.operations-nav__links { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm); }
.operations-nav__links a { color: var(--color-texto-secundario); font-size: var(--text-xs); text-decoration: none; padding-block: var(--space-xs); }
.operations-nav a[aria-current="page"] { color: var(--color-tinta); text-decoration: underline; text-underline-offset: 0.35em; }
.operations-nav a:hover { color: var(--color-tinta); }
.operations-heading { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: var(--space-lg); padding-block: var(--space-lg); }
.operations-merchant { display: grid; gap: var(--space-2xs); }
.operations-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); }
.operations-card { display: flex; flex-direction: column; gap: var(--space-sm); border: var(--rule-field); border-radius: var(--radius-card); padding: var(--space-md); color: var(--color-tinta); text-decoration: none; }
.operations-card h2 { font-size: var(--text-md); }
.operations-card p { color: var(--color-texto-secundario); }
.operations-card:hover { border-color: var(--color-tinta); background: var(--color-fondo-suave); }
.operations-card__action { display: flex; justify-content: space-between; padding-top: var(--space-md); margin-top: auto; font-weight: var(--weight-strong); }
.operations-secondary { display: flex; flex-wrap: wrap; gap: var(--space-md); border-top: var(--rule); padding-block: var(--space-md); }
.operations-messages { max-width: var(--measure); }
@media (max-width: 800px) { .operations-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .operations-grid { grid-template-columns: 1fr; } }

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

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

body {
  margin: 0;
  background: var(--color-papel);
  color: var(--color-tinta);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  font-weight: var(--weight-body);
}

img, svg { max-width: 100%; }

/* Several components below set `display`, which beats the UA rule for the
   `hidden` attribute and leaves "hidden" elements on screen. Say it once. */
[hidden] { display: none !important; }

/* Standalone calculator surface used in decks and narrow embeds. */
.calculator-widget-page { background: var(--color-fondo-suave); }
.calculator-widget { max-width: 760px; margin: 0 auto; padding: 32px 24px 40px; }
.calculator-widget__intro { margin-bottom: 24px; }
.calculator-widget__intro h1 { max-width: 12ch; margin: 8px 0 12px; font-size: clamp(2rem, 6vw, 3.5rem); line-height: 1.05; }
.calculator-widget__note { max-width: 58ch; margin: 20px 0 0; color: var(--color-texto-secundario); font-size: var(--text-xs); }
@media (max-width: 560px) {
  .calculator-widget { padding: 24px 16px 32px; }
  .calculator-widget .calculator { padding: 20px 16px; }
  .calculator-widget .quote__row { gap: 12px; }
}

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* -------------------------------------------------------- typography --- */
h1, h2, h3 {
  margin: 0;
  line-height: var(--leading-heading);
  font-weight: var(--weight-strong);
}
/* Tracking tightens as the step grows — the guide's rule, applied literally. */
h1 { font-size: var(--text-xl); letter-spacing: var(--track-lg); line-height: var(--leading-h1); }
h2 { font-size: var(--text-lg); letter-spacing: var(--track-lg); }
h3 { font-size: var(--text-md); letter-spacing: var(--track-md); }

/* Public pages only. App screens stay on the h1 step above.
   On a phone the step drops one so the claims still fit above the fold. */
.display {
  font-size: var(--text-display);
  font-weight: var(--weight-strong);
  letter-spacing: var(--track-display);
  line-height: var(--leading-tight);
}
@media (max-width: 640px) {
  .display { font-size: var(--text-xl); }
}

p { margin: 0; }

.lead {
  font-size: var(--text-md);
  color: var(--color-texto-secundario);
}

.meta {
  font-size: var(--text-xs);
  color: var(--color-texto-secundario);
}

.link {
  color: var(--color-tinta);
  text-decoration-color: var(--color-borde);
  text-underline-offset: 0.2em;
}
.link:hover { text-decoration-color: var(--color-rojo); }

/* ------------------------------------------------------------ layout --- */
.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--space-sm);
}

.prose { max-width: var(--measure); }

/* Vertical rhythm without margins on the children themselves. */
.stack > * + * { margin-top: var(--space-sm); }
.stack--tight > * + * { margin-top: var(--space-2xs); }
.stack--loose > * + * { margin-top: var(--space-lg); }

.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: baseline;
}
/* A row of buttons, not of text. Baseline alignment is right for cifras and
   labels and wrong here: the moment one label wraps, two buttons of equal
   height sit at different offsets. Centre them and give the row its own air. */
.row--acciones {
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
  /* On top of the stack rhythm. Two 44px targets need more air against the
     claims underneath them than a paragraph does: without it the buttons and
     the bordered claims stack into one undifferentiated column of boxes. */
  margin-block: var(--space-md);
}
/* On a phone they wrap anyway; wrapping to full width makes that read as a
   deliberate pair rather than two ragged boxes of different lengths. */
@media (max-width: 480px) {
  .row--acciones .button { flex: 1 0 100%; }
}

.grid-3 {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

/* Landing calculator: sliders beside the quote on desktop, stacked on a phone. */
.calculator {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr 1fr;
  align-items: start;
}
@media (max-width: 640px) {
  .calculator { grid-template-columns: 1fr; }
}

/* The quote is one object, not four tiles. The total sits at the head, alone,
   because it is the number that must not move across scenarios; everything
   under the rule is how it gets there. */
.quote {
  border: var(--rule-strong);
  border-radius: var(--radius-card);
  background: var(--color-papel);
}
.quote__total {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-md);
  border-bottom: var(--rule);
}
.quote__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: 0;
  padding: var(--space-sm) var(--space-md);
}
.quote__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
}
/* Weeks are the consequence of the rows above, so they sit below a rule. */
.quote__row--derived {
  padding-top: var(--space-xs);
  border-top: var(--rule);
}
.quote__term { color: var(--color-texto-secundario); }
.quote__value { margin: 0; }

/* Ritmo: the same advance at three speeds. One block per week of retención.
   The block is always the same size; picking a scenario changes how many of
   them the bar has, so a good week is a visibly shorter bar. The total under
   the bar is the number that does not move. */
.ritmo {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-md);
  border: var(--rule);
  border-radius: var(--radius-card);
  background: var(--surface-quiet);
}
.ritmo__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
}
/* The grid always carries as many columns as the slowest scenario needs
   (--ritmo-max, set by simulator.js). That is what keeps the block size
   identical across the three chips and stops a 26-week bar overflowing a
   phone: the bar shortens by losing blocks, never by shrinking them. */
.ritmo__barra {
  display: grid;
  grid-template-columns: repeat(var(--ritmo-max, 26), 1fr);
  gap: 2px;
  height: var(--space-md);
  padding: 2px;
  border: var(--rule-strong);
  border-radius: var(--radius-flat);
  background: var(--color-papel);
}
.ritmo__semana {
  min-width: 0;
  background: var(--color-tinta);
}
/* Weeks past the finish line. Empty, not greyed: they are not weeks that go
   badly, they are weeks that do not happen. The bar's own border is the frame
   the shortening reads against. */
.ritmo__semana--resto { background: none; }
/* The one number in this block that is the same in all three scenarios. */
.ritmo__total {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding-top: var(--space-2xs);
  border-top: var(--rule);
}
.ritmo__pie {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-texto-secundario);
}

.slider-scale {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-3xs);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-texto-secundario);
}

.section {
  padding-block: var(--space-lg);
  border-top: var(--rule);
}

/* Public pages: air instead of a document rule. Sits outside .wrap so the
   surface goes edge to edge; inner .wrap keeps the measure. --surface-quiet
   is tinta at 4% on papel — not a new hex, not cream. */
.band {
  padding-block: var(--space-xl);
}
@media (min-width: 641px) {
  .band { padding-block: var(--space-3xl); }
}
.band--quiet { background: var(--surface-quiet); }

.split {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  align-items: start;
}

/* Promises on the landing. Not badges (status) and not chips (form controls). */
.claims {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}
.claim {
  padding: var(--space-2xs) var(--space-xs);
  border: var(--rule);
  border-radius: var(--radius-control);
  font-size: var(--text-xs);
  font-weight: 600;
}

/* The three steps on `/`. Numbered because the order is the reassurance:
   he sees what he gives before he sees what he gets. Lays out on `grid-3`. */
.pasos {
  list-style: none;
  margin: 0;
  padding: 0;
}
.paso {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding-top: var(--space-xs);
  border-top: var(--rule-strong);
}
.paso__num {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--text-xs);
  color: var(--color-texto-secundario);
}

/* What we ask for, one line each. Ruled, not bulleted: it reads as a list of
   three things and not as a form he has to fill in. */
.requisitos {
  list-style: none;
  margin: 0;
  padding: 0;
}
.requisitos__item {
  padding-bottom: var(--space-xs);
  border-bottom: var(--rule);
}
.requisitos__item + .requisitos__item { margin-top: var(--space-xs); }

/* The offer as an object — the calculator lives in here on `/`. Papel so it
   sits on a quiet band; a hairline so it sits on papel. */
.oferta {
  padding: var(--space-md);
  border: var(--rule);
  border-radius: var(--radius-card);
  background: var(--color-papel);
}

.faq { max-width: var(--measure); }
.faq__item { border-bottom: var(--rule); }
.faq__item:first-child { border-top: var(--rule); }
.faq__item > summary {
  min-height: var(--tap);
  padding-block: var(--space-sm);
  cursor: pointer;
  font-weight: 600;
}
.faq__item > p { padding-bottom: var(--space-sm); }

/* Same native <details>, used for detail a merchant can ignore — the scenario
   table under the calculator. `faq__item` stays what its name says it is. */
.disclosure {
  border-top: var(--rule);
  border-bottom: var(--rule);
}
.disclosure > summary {
  min-height: var(--tap);
  padding-block: var(--space-sm);
  cursor: pointer;
  font-weight: 600;
}
.disclosure__body { padding-bottom: var(--space-sm); }

/* ----------------------------------------------------------- buttons --- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-h);
  padding: var(--space-2xs) var(--space-md);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: none;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

/* papel on rojo is 5.07:1 — passes AA at body size. Verified, not assumed. */
.button--primary {
  background: var(--color-rojo);
  color: var(--color-papel);
}
.button--primary:hover { background: var(--color-rojo-hover); }

.button--secondary {
  border-color: var(--color-tinta);
  color: var(--color-tinta);
}
.button--secondary:hover { background: var(--surface-hover); }

.button--ghost { color: var(--color-texto-secundario); }
.button--ghost:hover { color: var(--color-tinta); }

.button:disabled,
.button[aria-disabled="true"] {
  border-color: var(--color-desactivado);
  background: none;
  color: var(--color-desactivado);
  cursor: not-allowed;
}

/* ------------------------------------------------------------- forms --- */
.field { display: block; }

.field__label {
  display: block;
  margin-bottom: var(--space-3xs);
  font-weight: 600;
}

.field__input,
.field__select,
.field__textarea {
  width: 100%;
  min-height: var(--field-h);
  padding: var(--space-2xs) var(--space-xs);
  border: var(--rule-field);
  border-radius: var(--radius-control);
  background: var(--color-papel);
  color: var(--color-tinta);
  font: inherit;
}

.field__input:focus,
.field__select:focus,
.field__textarea:focus { border-color: var(--color-tinta); }

.field__textarea { min-height: calc(var(--field-h) * 2); resize: vertical; }

/* Every number a founder types or a merchant might check. */
.field__input--numeric {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.field__help {
  display: block;
  margin-top: var(--space-3xs);
  font-size: var(--text-xs);
  color: var(--color-texto-secundario);
}

.field__input::placeholder,
.field__textarea::placeholder { color: var(--color-desactivado); }

/* Multi-select chips (interest form contact preferences). */
.chip-group {
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}
.chip-group__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}
.chip {
  display: inline-flex;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chip__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.chip__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: var(--space-2xs) var(--space-sm);
  border: var(--rule-strong);
  border-radius: 999px;
  background: var(--color-papel);
  color: var(--color-tinta);
  font-weight: 500;
  line-height: 1.2;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.1s ease;
  user-select: none;
}
.chip__input:checked + .chip__label {
  border-color: var(--color-tinta);
  background: var(--surface-hover);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--color-tinta);
}
.chip__input:focus-visible + .chip__label {
  outline: 2px solid var(--color-tinta);
  outline-offset: 2px;
}
.chip:active .chip__label {
  transform: scale(0.98);
}

/* ------------------------------------------------------------ numbers --- */
.cifra {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.cifra--lg { font-size: var(--text-xl); line-height: var(--leading-tight); }
.cifra--md { font-size: var(--text-lg); }
.cifra--accent { color: var(--color-rojo); }   /* the one number that matters — once per view */
.cifra--quiet { color: var(--color-texto-secundario); font-weight: 400; }

/* USD amount with optional Bs equivalent beneath (landing calculator). */
.cifra-pair {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-3xs);
  vertical-align: top;
}
.cifra-pair--scale {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3xs);
}
.cifra-pair__usd { display: inline; }
.cifra-pair__ves {
  display: block;
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
}

/* Label above, number below. The number first is the voice rule; the label is
   there so the number is not ambiguous. */
.dato { display: flex; flex-direction: column; gap: var(--space-3xs); }
.dato__label {
  font-size: var(--text-xs);
  color: var(--color-texto-secundario);
  text-transform: none;
}

/* ------------------------------------------------------------- table --- */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
}
.table th,
.table td {
  padding: var(--space-2xs) var(--space-xs);
  border-bottom: var(--rule);
  text-align: left;
  vertical-align: baseline;
}
.table th {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-texto-secundario);
}
.table tbody tr:hover { background: var(--surface-quiet); }

.table td.num,
.table th.num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Wide tables scroll inside their own box; the page never scrolls sideways. */
.table-scroll { overflow-x: auto; }

/* On a phone the cohort table becomes one card per advance. Each td carries
   data-label with its column heading. */
@media (max-width: 640px) {
  .table--cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .table--cards tr {
    display: block;
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-2xs);
    border-bottom: var(--rule-strong);
  }
  .table--cards td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
    border-bottom: none;
    padding-block: var(--space-3xs);
  }
  /* A bar has no intrinsic width; as a flex item it would collapse to nothing. */
  .table--cards td .progress { flex: 1 1 6rem; }
  .table--cards td::before {
    content: attr(data-label);
    font-size: var(--text-xs);
    color: var(--color-texto-secundario);
  }
}

/* ------------------------------------------------------------ badges --- */
/* Deliberately monochrome. The palette has one accent and it is spoken for;
   see the open question in brand/design-system.md. */
/* Status chips, per the guide: mono, uppercase, 22px tall, never an icon.
   The three semantic tones are the only place a colour other than rojo, tinta
   and the neutrals appears — and rojo is deliberately not among them, so an
   alert can never be mistaken for a button. */
.badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--space-2xs);
  border: var(--rule);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--text-etiqueta);
  font-weight: var(--weight-cifra);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  white-space: nowrap;
}
.badge--strong {
  border-color: var(--color-tinta);
  background: var(--color-tinta);
  color: var(--color-papel);
}
.badge--quiet { color: var(--color-texto-secundario); }

/* Al día, aprobado, desembolsado. */
.badge--ok {
  border-color: var(--color-verde);
  background: var(--color-verde);
  color: var(--color-papel);
}
/* En revisión, falta información. */
.badge--revision {
  border-color: var(--color-ambar);
  background: var(--color-ambar);
  color: var(--color-papel);
}
/* Error, vencido, rechazado. Rojo profundo, never the brand rojo. */
.badge--error {
  border-color: var(--color-rojo-profundo);
  background: var(--color-rojo-profundo);
  color: var(--color-papel);
}

/* -------------------------------------------------------------- note --- */
.note {
  padding: var(--space-xs) var(--space-sm);
  border-left: 3px solid var(--color-borde);
  background: var(--surface-quiet);
  font-size: var(--text-xs);
}
/* An open question the screen cannot answer — e.g. «OQ-1 abierta: no se suma
   entre monedas». Marked with the accent because it changes how the numbers
   above it should be read. */
.note--oq { border-left-color: var(--color-rojo); }

/* ---------------------------------------------------------- progress --- */
.progress {
  height: var(--space-2xs);
  background: var(--color-linea);
  border-radius: var(--radius-flat);
  overflow: hidden;
}
.progress__fill {
  height: 100%;
  background: var(--color-tinta);
}
.progress--accent .progress__fill { background: var(--color-rojo); }

/* ------------------------------------------------------------ charts --- */
/* Every chart is inline SVG generated server-side from the Curve and Gap
   objects (underwriting/recovery.py). No chart library, no client JS. */
.chart { display: block; width: 100%; height: auto; }
.chart-frame { overflow-x: auto; }
.chart__caption {
  margin-top: var(--space-3xs);
  font-size: var(--text-xs);
  color: var(--color-texto-secundario);
}

/* Recovery curve: expected is the quiet dashed line, actual is the solid one. */
.curve__grid { stroke: var(--color-linea); stroke-width: 1; }
.curve__expected {
  fill: none;
  stroke: var(--color-borde);
  stroke-width: 2;
  stroke-dasharray: 4 4;
}
.curve__actual {
  fill: none;
  stroke: var(--color-tinta);
  stroke-width: 2;
}
.curve__axis {
  fill: var(--color-texto-secundario);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

/* Three-way gap decomposition. One ramp, three lightnesses — readable in
   grayscale and on a cheap phone screen, and it leaves rojo unspent. */
.gap__label {
  fill: var(--color-texto-secundario);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
/* Bars start at x=70 in the 640-wide viewBox, leaving a gutter for .gap__label. */
.gap__sold-less { fill: var(--color-tinta); }
.gap__diverted { fill: var(--color-texto-secundario); }
.gap__rail-failed { fill: var(--color-borde); }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  font-size: var(--text-xs);
  color: var(--color-texto-secundario);
}
.legend__item { display: inline-flex; align-items: center; gap: var(--space-3xs); }
.legend__swatch { width: 0.75rem; height: 0.75rem; display: inline-block; }
.legend__swatch--sold-less { background: var(--color-tinta); }
.legend__swatch--diverted { background: var(--color-texto-secundario); }
.legend__swatch--rail-failed { background: var(--color-borde); }

/* Loss rate against the 8–12% tolerance band (AGENTS.md key constants).
   The band is the context; the marker is the number that matters. */
.loss-band { position: relative; height: var(--space-md); }
.loss-band__track {
  position: absolute;
  inset-block: calc(var(--space-md) / 2 - 1px);
  inset-inline: 0;
  height: 2px;
  background: var(--color-linea);
}
.loss-band__band {
  position: absolute;
  inset-block: 0;
  background: var(--surface-hover);
  border-inline: var(--rule);
}
.loss-band__marker {
  position: absolute;
  inset-block: 0;
  width: 2px;
  background: var(--color-rojo);
}
.loss-band__scale {
  position: relative;
  height: 1.4em;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-texto-secundario);
}
/* Each tick sits at its own value along the track, so the labels line up with
   the band they annotate. Evenly-spaced labels would misdescribe the scale. */
.loss-band__tick {
  position: absolute;
  transform: translateX(-50%);
}
.loss-band__tick:first-child { transform: none; }
.loss-band__tick:last-child { transform: translateX(-100%); }

/* ------------------------------------------------------- missing data --- */
/* Who has not sent data this week. The most actionable thing on /cohorte. */
.missing { list-style: none; margin: 0; padding: 0; }
.missing__item {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-2xs);
  border-bottom: var(--rule);
}
.missing__code { font-family: var(--font-mono); font-weight: 600; }

/* --------------------------------------------------------- simulator --- */
/* Landing page. Three scenarios off the merchant's own history; the total is
   the column that never changes, which is the entire point. */
.scenarios { width: 100%; border-collapse: collapse; }
.scenarios th,
.scenarios td {
  padding: var(--space-2xs) var(--space-xs);
  border-bottom: var(--rule);
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.scenarios th:first-child,
.scenarios td:first-child {
  text-align: left;
  font-family: var(--font-sans);
}
.scenarios thead th {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-texto-secundario);
}
.scenarios .is-fixed { font-weight: 600; }

.slider { width: 100%; accent-color: var(--color-tinta); min-height: var(--tap); }

/* ------------------------------------------------------------ header --- */
.masthead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
  border-bottom: var(--rule-strong);
}
/* Public `/`: hairline, more air, inner .wrap is the flex row. */
.masthead--public {
  display: block;
  padding-block: var(--space-md);
  border-bottom: var(--rule);
}
.masthead--public > .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
}
/* The wordmark is the brand. identity.md names the mark as a use of rojo.
   Chrome, not a page accent — it does not consume the one-rojo-per-view slot. */
.masthead__mark {
  display: inline-flex;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-rojo);
  text-decoration: none;
}
/* The drawn wordmark (ADR-0011). currentColor, so the mark takes its rojo from
   the rule above and no hex ever enters an asset or a template. */
.masthead__mark > svg {
  display: block;
  height: 1.25rem;
  width: auto;
  fill: currentColor;
}
a.masthead__mark:hover { color: var(--color-rojo); }
/* The one way out of the masthead on `/`. Underlined by a rule, not by the
   text decoration, so it does not read as body copy that happens to be a link. */
.masthead__link {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-tinta);
  text-decoration: none;
  border-bottom: var(--rule);
}
.masthead__link:hover { border-bottom-color: var(--color-rojo); }

.footer {
  padding-block: var(--space-md);
  border-top: var(--rule);
  font-size: var(--text-xs);
  color: var(--color-texto-secundario);
}

/* ------------------------------------------------------------- a11y --- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Solicitud y data, founder review, and the recorded simulation. */
.eyebrow { font: 500 var(--text-etiqueta)/1.6 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--color-texto-secundario); }
.cifra--sm { font-size: var(--text-md); letter-spacing: -.02em; }
.pantalla { max-width: 30rem; min-height: 100dvh; margin: 0 auto; display: flex; flex-direction: column; padding: 0 var(--space-md); }
.pantalla__head { display: flex; justify-content: space-between; align-items: center; padding: var(--space-md) 0; border-bottom: 1px solid var(--color-linea); }
.pantalla__head .masthead__mark { width: 112px; }
.pantalla__body { flex: 1; padding: var(--space-lg) 0; gap: var(--space-md); }
.pantalla__body h1 { font-size: var(--text-lg); line-height: var(--leading-heading); letter-spacing: -.03em; }
.pantalla__body h2 { font-size: var(--text-md); }
.pantalla__body .button { width: 100%; }
.pantalla__body .oferta { padding: var(--space-md); }
.pantalla__foot { padding: var(--space-sm) 0; border-top: 1px solid var(--color-linea); }
.codigo-otp { font-family: var(--font-mono); font-size: var(--text-lg); letter-spacing: .18em; text-align: center; height: 72px; }
.meses { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.meses__item { padding: var(--space-2xs) var(--space-xs); border: 1px solid var(--color-borde); border-radius: var(--radius-control); font: 500 var(--text-xs)/1.4 var(--font-mono); }
.meses__item--ok { color: var(--color-verde); border-color: var(--color-verde); }
.meses__item--pendiente { color: var(--color-texto-terciario); border-style: dashed; }
.reading-mark { font-family: var(--font-mono); font-size: var(--text-xl); color: var(--color-texto-terciario); }
.staff { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-lg); align-items: start; }
.staff__heading { justify-content: space-between; align-items: center; }
.staff__blocks { min-width: 0; }
.staff__block { padding: var(--space-lg) 0; border-top: 1px solid var(--color-linea); display: grid; gap: var(--space-md); }
.staff__block h2 { font-size: var(--text-md); }
.staff__metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.staff__weekdays { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-sm); font-size: var(--text-xs); }
.staff__decision { position: sticky; top: var(--space-md); background: var(--color-fondo-suave); border: 1px solid var(--color-linea); border-radius: var(--radius-card); padding: var(--space-md); max-height: calc(100dvh - 48px); overflow-y: auto; }
.staff__decision h2 { font-size: var(--text-md); }
.staff__decision .button { width: 100%; }
.gate-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.gate { border: 1px solid var(--color-linea); padding: var(--space-sm); border-radius: var(--radius-control); display: grid; align-content: start; gap: var(--space-xs); }
.gate h3 { font-size: var(--text-base); }
.gate .badge { width: fit-content; }
.sin-dato { padding: var(--space-sm) 0; border-block: 1px solid var(--color-linea); color: var(--color-texto-terciario); font-size: var(--text-xs); }
.phone { width: 362px; height: 742px; border: 1px solid var(--color-borde); border-radius: var(--radius-card); overflow: hidden; background: var(--color-papel); }
.phone iframe { border: 0; width: 360px; height: 740px; display: block; }
.phone-chat { display: flex; flex-direction: column; min-height: 100dvh; background: var(--color-fondo-suave); }
.phone-chat__head { padding: var(--space-md); background: var(--color-papel); border-bottom: 1px solid var(--color-linea); display: grid; gap: var(--space-xs); }
.phone-chat__head .masthead__mark { width: 112px; }
.phone-chat__messages { flex: 1; display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-md) var(--space-sm); }
.phone-chat__foot { padding: var(--space-sm); border-top: 1px solid var(--color-linea); }
.burbuja { background: var(--color-papel); border: 1px solid var(--color-linea); border-radius: var(--radius-card); padding: var(--space-sm); max-width: 95%; }
.burbuja p { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--text-app); }
.burbuja a { color: var(--color-texto-cuerpo); text-decoration: underline; }
.burbuja__hora { display: block; text-align: right; font: 400 var(--text-etiqueta)/1.6 var(--font-mono); color: var(--color-texto-terciario); margin-top: var(--space-xs); }
.escenario { min-height: 100dvh; background: var(--color-fondo-suave); padding: var(--space-md) var(--space-lg); }
.escenario--sin-cursor, .escenario--sin-cursor * { cursor: none; }
.escenario__head { display: flex; justify-content: space-between; gap: var(--space-md); align-items: center; max-width: var(--wrap); margin: 0 auto var(--space-md); }
.escenario__head h2 { font-size: var(--text-md); }
.escenario__phones { display: flex; justify-content: center; gap: var(--space-xl); }
.escenario__foot { text-align: center; padding: var(--space-sm); }
@media (max-width: 900px) { .staff { grid-template-columns: 1fr; } .staff__decision { position: static; max-height: none; } .escenario__phones { gap: var(--space-sm); flex-wrap: wrap; } .escenario__head { flex-wrap: wrap; } }
@media (max-width: 480px) { .staff__metrics, .gate-grid { grid-template-columns: 1fr; } .staff__weekdays { grid-template-columns: repeat(2, minmax(0, 1fr)); } .escenario { padding: var(--space-sm) 0; } }

/* Merchant overview — approved direction 1, 2026-09-06. */
.merchant-overview { display: grid; gap: var(--space-md); font-size: var(--text-app); }
.merchant-overview__head { display: flex; justify-content: space-between; align-items: start; gap: var(--space-md); flex-wrap: wrap; }
.merchant-overview__head h1 { font-size: var(--text-lg); margin: var(--space-2xs) 0; }
.merchant-overview__period { text-align: right; display: grid; gap: var(--space-xs); justify-items: end; }
.merchant-overview__scope { margin-top: calc(-1 * var(--space-xs)); }
.merchant-kpis { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border: 1px solid var(--color-linea); border-radius: var(--radius-card); }
.merchant-kpis__item { padding: var(--space-sm); min-width: 0; border-right: 1px solid var(--color-linea); }
.merchant-kpis__item:nth-child(3n) { border-right: 0; }
.merchant-kpis__item:nth-child(n+4) { border-top: 1px solid var(--color-linea); }
.merchant-kpis__label { font-size: var(--text-xs); color: var(--color-texto-secundario); margin-bottom: var(--space-xs); }
.merchant-kpis__value { display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: baseline; font-size: clamp(1.375rem,2.7vw,var(--text-lg)); line-height: var(--leading-heading); margin-bottom: var(--space-xs); overflow-wrap: anywhere; }
.merchant-unit { font: var(--weight-body) var(--text-xs)/var(--leading-body) var(--font-sans); letter-spacing: 0; color: var(--color-texto-secundario); }
.merchant-grid { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(0,1fr); gap: var(--space-sm); }
.merchant-grid--equal { grid-template-columns: repeat(2,minmax(0,1fr)); }
.merchant-panel { min-width: 0; padding: var(--space-md); border: 1px solid var(--color-linea); border-radius: var(--radius-card); background: var(--color-papel); }
.merchant-panel h2, .merchant-calendar h2 { font-size: var(--text-md); }
.merchant-panel > .meta { margin-top: var(--space-xs); }
.merchant-panel code { overflow-wrap: anywhere; }
.merchant-panel__ticket { padding-top: var(--space-sm); }
.merchant-panel__head { display: flex; flex-wrap: wrap; gap: var(--space-xs); justify-content: space-between; align-items: baseline; margin-bottom: var(--space-sm); }
.merchant-line { min-width: 0; }
.merchant-line-scroll { overflow-x: auto; padding-top: var(--space-xs); }
.merchant-line__plot { height: 160px; position: relative; margin: var(--space-md) var(--space-md) 0 var(--space-2xl); }
.merchant-line__plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.merchant-line__grid { fill: none; stroke: var(--color-linea); stroke-width: 1; vector-effect: non-scaling-stroke; }
.merchant-line__path { fill: none; stroke: var(--color-tinta); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.merchant-line__axis { position: absolute; left: calc(-1 * var(--space-2xl)); top: 0; bottom: 0; width: 54px; display: flex; flex-direction: column; justify-content: space-between; text-align: right; font: var(--weight-body) var(--text-xs)/1 var(--font-mono); color: var(--color-texto-secundario); }
.merchant-line__point { position: absolute; width: var(--tap); height: var(--tap); padding: 0; border: 0; background: transparent; transform: translate(-50%,-50%); cursor: pointer; }
.merchant-line__point::after { content: ''; display: block; width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--color-tinta); margin: auto; }
.merchant-line__point--missing::after { width: 10px; height: 2px; background: var(--color-texto-secundario); border-radius: 0; }
.merchant-line__point:hover::after, .merchant-line__point:focus-visible::after { width: 10px; height: 10px; }
.merchant-line__labels { height: 48px; position: relative; margin: var(--space-xs) var(--space-md) 0 var(--space-2xl); font: var(--weight-body) var(--text-xs)/var(--leading-app) var(--font-mono); color: var(--color-texto-secundario); }
.merchant-line__labels span { position: absolute; width: 48px; text-align: center; transform: translateX(-50%); }
.merchant-line__detail { display: block; min-height: var(--space-md); font-family: var(--font-mono); }
.merchant-mix { display: flex; height: var(--space-sm); gap: 3px; margin: var(--space-md) 0; border-radius: var(--radius-control); overflow: hidden; }
.merchant-mix__segment { min-width: 0; }
.merchant-mix__segment--pos { background: var(--color-tinta); }
.merchant-mix__segment--mobile { background: var(--color-texto-secundario); }
.merchant-mix__segment--transfer { background: var(--color-borde); }
.merchant-list { margin: 0; }
.merchant-list > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-linea); }
.merchant-list > div:last-child { border-bottom: 0; }
.merchant-list dd { margin: 0; }
.merchant-weekday { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: var(--space-2xs); margin: var(--space-md) 0; }
.merchant-weekday__day { display: grid; justify-items: center; gap: var(--space-2xs); min-width: 0; font-size: var(--text-xs); text-align: center; }
.merchant-weekday__day .num { font-size: var(--text-xs); }
.merchant-weekday__track { height: 120px; display: flex; align-items: end; width: 100%; justify-content: center; border-bottom: 1px solid var(--color-linea); }
.merchant-weekday__bar { display: block; width: 65%; max-width: 30px; background: var(--color-tinta); border-radius: var(--radius-control) var(--radius-control) 0 0; }
.merchant-histogram { display: grid; gap: var(--space-sm); margin: var(--space-md) 0; }
.merchant-histogram__row { display: grid; grid-template-columns: minmax(0,1fr) minmax(32px,1.2fr) auto; gap: var(--space-xs); align-items: center; font-size: var(--text-xs); }
.merchant-histogram__track { height: 18px; background: var(--color-fondo-suave); }
.merchant-histogram__track span { display: block; height: 100%; background: var(--color-tinta); }
.weekly-distribution { min-width: 0; margin: var(--space-md) 0; }
.weekly-distribution__plot { height: 180px; position: relative; display: flex; align-items: end; border-bottom: 1px solid var(--color-linea); background: repeating-linear-gradient(to top, transparent 0, transparent calc(25% - 1px), var(--color-linea) 25%); }
.weekly-distribution__bar { position: absolute; bottom: 0; background: var(--color-tinta); border-left: 1px solid var(--color-papel); min-height: 2px; }
.weekly-distribution__bar span { position: absolute; bottom: 100%; width: 100%; padding-bottom: var(--space-3xs); color: var(--color-texto-secundario); font: var(--weight-body) var(--text-xs)/1 var(--font-mono); text-align: center; }
.weekly-distribution__marker { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--color-rojo); transform: translateX(-1px); }
.weekly-distribution__marker span { position: absolute; top: 0; left: var(--space-xs); width: 150px; color: var(--color-rojo); font-size: var(--text-xs); line-height: var(--leading-app); }
.weekly-distribution__labels { position: relative; min-height: 42px; font: var(--weight-body) var(--text-xs)/var(--leading-app) var(--font-mono); color: var(--color-texto-secundario); }
.weekly-distribution__labels span { position: absolute; padding-top: var(--space-xs); text-align: center; overflow-wrap: anywhere; }
.merchant-calendar__layout { display: grid; grid-template-columns: minmax(0,400px) minmax(0,1fr); gap: var(--space-xl); align-items: start; }
.merchant-calendar__weekdays, .merchant-calendar__month { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: var(--space-3xs); }
.merchant-calendar__weekdays { text-align: center; font-size: var(--text-xs); margin: var(--space-md) 0 var(--space-xs); }
.merchant-calendar__day { border: 0; min-height: var(--tap); border-radius: var(--radius-control); font: var(--weight-cifra) var(--text-xs)/var(--leading-app) var(--font-mono); cursor: pointer; }
.merchant-calendar__day--zero { background: var(--color-fondo-suave); color: var(--color-tinta); }
.merchant-calendar__day--1 { background: var(--color-borde); color: var(--color-tinta); }
.merchant-calendar__day--2 { background: var(--color-texto-secundario); color: var(--color-papel); }
.merchant-calendar__day--3 { background: var(--color-texto-cuerpo); color: var(--color-papel); }
.merchant-calendar__day--4 { background: var(--color-tinta); color: var(--color-papel); }
.merchant-calendar__day--missing { background: var(--color-papel); color: var(--color-texto-secundario); border: 1px dashed var(--color-borde); }
.merchant-calendar__day[aria-pressed="true"] { outline: 2px solid var(--color-tinta); outline-offset: 2px; }
.merchant-calendar__legend { display: flex; flex-wrap: wrap; gap: var(--space-sm); font-size: var(--text-xs); }
.merchant-calendar__legend span { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.merchant-calendar__key { display: inline-block; width: 12px; height: 12px; border-radius: 2px; }
.merchant-next { display: flex; gap: var(--space-md); align-items: center; justify-content: space-between; border-top: 1px solid var(--color-linea); padding-top: var(--space-md); }
.merchant-next > div { max-width: var(--measure); }
.merchant-next .meta { margin-top: var(--space-xs); }
.merchant-next .button { flex-shrink: 0; }
.merchant-review .staff__decision { position: static; max-height: none; overflow: visible; }
.merchant-calendar__month[hidden] { display: none; }
@media(max-width:900px) {
  .merchant-grid { grid-template-columns: 1fr; }
  .merchant-grid--equal { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .merchant-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .merchant-kpis__item:nth-child(3n) { border-right: 1px solid var(--color-linea); }
  .merchant-kpis__item:nth-child(2n) { border-right: 0; }
  .merchant-kpis__item:nth-child(n+3) { border-top: 1px solid var(--color-linea); }
  .merchant-calendar__layout { gap: var(--space-md); }
}
@media(max-width:600px) {
  .merchant-grid--equal, .merchant-calendar__layout { grid-template-columns: 1fr; }
  .merchant-overview__period { justify-items: start; text-align: left; }
  .merchant-panel { padding: var(--space-sm); }
  .merchant-kpis__item { padding: var(--space-xs); }
  .merchant-kpis__value { font-size: var(--text-md); }
  .merchant-weekday { gap: var(--space-3xs); }
  .merchant-line__labels, .merchant-line__axis { font-size: 11px; }
  .merchant-line__labels { margin-left: var(--space-xl); }
  .merchant-line__plot { margin-left: var(--space-xl); }
  .merchant-line__axis { left: -48px; width: 40px; }
  .merchant-next { flex-direction: column; align-items: stretch; }
}
[data-guided-tabs] { margin-block: var(--space-lg); }
[data-guided-tabs] [aria-current="page"] { background: var(--color-tinta); color: var(--color-papel); }
[data-criteria-summary] { padding-block: var(--space-xl); }
[data-criteria-summary] > .merchant-panel { margin-top: var(--space-xl); }
[data-criteria-table] { min-width: 680px; font-size: var(--text-app); }
[data-criteria-table] caption { text-align: left; padding-block: var(--space-md); }
[data-criteria-table] td, [data-criteria-table] th { vertical-align: top; padding: var(--space-md) var(--space-sm); }
[data-criteria-table] th[scope="row"] { font-size: var(--text-app); color: var(--color-tinta); width: 26%; }
[data-criteria-table] td:nth-child(2) { width: 36%; overflow-wrap: anywhere; }
[data-criteria-table] td.num { white-space: nowrap; }
[data-criteria-table] details { margin-top: var(--space-xs); font-weight: 400; }
[data-criteria-table] summary { cursor: pointer; font-size: var(--text-xs); color: var(--color-texto-secundario); }
[data-criteria-table] .badge { white-space: normal; height: auto; min-height: 22px; padding-block: var(--space-2xs); }
[data-criteria-group] { background: var(--surface-quiet); }
[data-guided-stage] { padding-block: var(--space-xl); scroll-margin-top: var(--space-xl); }
[data-guided-stage] > h2 { margin-bottom: var(--space-lg); }
[data-criterion] { border-top: 3px solid var(--color-borde); min-width: 0; }
[data-criterion][data-state="pass"] { border-top-color: var(--color-verde); }
[data-criterion][data-state="pending"] { border-top-color: var(--color-ambar); }
[data-criterion][data-state="fail"] { border-top-color: var(--color-rojo-profundo); }
[data-criterion][data-current] { outline: 2px solid var(--color-tinta); outline-offset: 3px; }
[data-criterion] .merchant-panel__head { flex-wrap: wrap; gap: var(--space-sm); }
[data-criterion] .cifra { font-size: var(--text-md); overflow-wrap: anywhere; margin-block: var(--space-md); }
[data-player-controls] { position: sticky; top: 0; z-index: 5; background: var(--color-papel); }
[data-player-controls] .row { flex-wrap: wrap; }
[data-player-line] { margin-block: var(--space-lg); padding: var(--space-xl); }
[data-player-current] { display: flex; align-items: center; gap: var(--space-md); min-height: 4rem; }
[data-player-name] { flex: 1; font-size: var(--text-md); }
[data-player-result] { font-family: var(--font-mono); font-size: var(--text-xs); }
[data-player-result][data-state="pass"] { color: var(--color-verde); }
[data-player-result][data-state="fail"] { color: var(--color-rojo-profundo); }
[data-player-result][data-state="pending"] { color: var(--color-ambar); }
[data-player-observed] { min-height: 2rem; margin-block: var(--space-md); }
[data-player-progress] { width: 100%; height: 4px; accent-color: var(--color-tinta); }
[data-evaluation-spinner] { display: inline-block; flex: 0 0 auto; width: 18px; height: 18px; border: 2px solid var(--color-borde); border-top-color: var(--color-tinta); border-radius: 50%; animation: evaluation-spin 0.8s linear infinite; }
[data-evaluation-spinner][data-paused] { animation-play-state: paused; }
@keyframes evaluation-spin { to { transform: rotate(360deg); } }
[data-presenting] [data-guided-stage], [data-presenting] [data-player-review], [data-presenting] [data-stage-nav], [data-presenting] [data-evaluate-form], [data-player-line][hidden], [data-evaluation-spinner][hidden], [data-evaluate-status][hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  [data-evaluation-spinner] { animation: none; }
}
[data-stage-nav] { flex-wrap: wrap; }
[data-guided-panel][hidden], [data-guided-stage][hidden], [data-criterion][hidden], [data-player-controls][hidden], [data-range-slider][hidden] { display: none; }
[data-range-calculator] { display: grid; gap: var(--space-lg); }
[data-range-calculator] input[type="range"] { width: 100%; accent-color: var(--color-rojo); }
@media (max-width: 600px) {
  [data-guided-player] h1 { font-size: var(--text-xl); }
  [data-guided-tabs] { flex-wrap: wrap; }
  [data-player-controls] { position: static; }
  [data-player-controls] .row { flex-wrap: wrap; }
  [data-player-current] { flex-wrap: wrap; }
  [data-player-result] { flex-basis: 100%; }
}