/* Generated from the Athanor design system — do not hand-edit.
 *
 * Source: https://claude.ai/artifact/7CjpPEHXJoQS2Z36sMFePc
 * (@khem/athanor@0.1.0), version 1793820993-f56c, read on 2026-11-04.
 * Built from that system's `project/tokens.json` (primitives) and the
 * semantic tier of its `project/components/bundle.css` (the `:root`,
 * `[data-ground]` and `[data-temperament]` blocks only — none of its
 * component CSS, which belongs to a React library we do not load).
 *
 * To update: re-read those two files from the artifact and regenerate.
 * Editing a value here instead makes this file lie about where it came from.
 */
:root {
  /* Primitive colours. */
  --prima-crimson: #ED224E;
  --prima-yellow: #FDEF51;
  --prima-sage: #6FC183;
  --prima-cyan: #00D4D8;
  --prima-azure: #0080ED;
  --prima-violet: #A800FF;
  --prima-indigo: #301F60;
  --prima-white: #FFFFFF;
  --prima-near-black: #1E1E1E;
  --prima-crimson-text: #C8274E;
  --prima-crimson-text-on-dark: #F26080;
  --prima-structure: #9A95AE;
  --prima-logo-green-mid: #39AC72;
  --prima-logo-green-deep: #0F7C36;
  --prima-teal-deep: #007678;
  --prima-green-deep: #337744;
  --prima-grey-deep: #6C6685;
  --prima-light-base: #F2F2F2;
  --prima-light-raised: #FFFFFF;
  --prima-light-sunken: #EAEAEA;
  --prima-dark-raised: #2B2B2B;
  --prima-indigo-raised: #36236C;
  --prima-border-on-light: #868686;
  --prima-border-on-dark: #696969;
  --prima-border-on-indigo: #7E62CC;

  /* Primitive typography, spacing and shape. */
  --font-primary: 'Roboto', system-ui, -apple-system, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, 'SF Mono', monospace;
  --font-wordmark: 'Comfortaa', 'Roboto', system-ui, -apple-system, sans-serif;
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-128: 128px;
  --space-192: 192px;
  --space-256: 256px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-pill: 999px;

  /* Primitive type scale. Available, but not applied by Hermes yet. */
  --type-hero-size: 116px;
  --type-hero-line: 0.96;
  --type-hero-track: -0.045em;
  --type-display-size: 72px;
  --type-display-line: 76px;
  --type-display-track: -0.035em;
  --type-h1-size: 56px;
  --type-h1-line: 60px;
  --type-h1-track: -0.032em;
  --type-h2-size: 40px;
  --type-h2-line: 48px;
  --type-h2-track: -0.028em;
  --type-h3-size: 32px;
  --type-h3-line: 40px;
  --type-h3-track: -0.024em;
  --type-h4-size: 24px;
  --type-h4-line: 32px;
  --type-h4-track: -0.016em;
  --type-h5-size: 20px;
  --type-h5-line: 28px;
  --type-h5-track: -0.010em;
  --type-body-lg-size: 18px;
  --type-body-lg-line: 28px;
  --type-body-size: 16px;
  --type-body-line: 24px;
  --type-body-sm-size: 14px;
  --type-body-sm-line: 20px;
  --type-caption-size: 12px;
  --type-caption-line: 16px;
  --type-caption-track: 0.005em;
  --type-label-size: 12px;
  --type-label-line: 16px;
  --type-label-track: 0.14em;
  --type-label-sm-size: 10px;
  --type-label-sm-line: 16px;
  --type-label-sm-track: 0.16em;
  --type-code-size: 14px;
  --type-code-line: 24px;
  --type-metric-size: 40px;
  --type-metric-line: 40px;
  --type-metric-track: -0.040em;
  --type-metric-lg-size: 64px;
  --type-metric-lg-line: 64px;
  --type-metric-lg-track: -0.04em;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* Primitive controls, measure, gradients and opacity. */
  --control-h-sm: 32px;
  --control-h-md: 40px;
  --control-h-lg: 48px;
  --measure: 68ch;
  --grad-warm: linear-gradient(135deg, #ED224E, #FDEF51);
  --grad-blue-green: linear-gradient(135deg, #0080ED, #6FC183);
  --grad-violet-crimson: linear-gradient(135deg, #A800FF, #ED224E);
  --grad-violet-azure: linear-gradient(135deg, #A800FF, #0080ED);
  --grad-cyan-azure: linear-gradient(135deg, #00D4D8, #0080ED);
  --grad-indigo-lift: linear-gradient(135deg, #301F60, #A800FF);
  --disabled-opacity: 0.38;

  /* Motion variables from Athanor's semantic preamble. */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 320ms;
  --motion-chrome: 420ms;
  --motion-reveal: 580ms;
  --motion-page: 700ms;
  --motion-count: 850ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 1ms;
    --motion-base: 1ms;
    --motion-slow: 1ms;
    --motion-chrome: 1ms;
    --motion-reveal: 1ms;
    --motion-page: 1ms;
    --motion-count: 1ms;
  }
}

/* Semantic ground: indigo (Athanor's default). */
:root,
[data-ground="indigo"] {
  --ground-base: #301F60;
  --ground-raised: #36236C;
  --ground-sunken: #2A1B54;
  --ink-primary: #FFFFFF;
  --ink-secondary: #FFFFFF;
  --ink-structure: #9A95AE;
  --ink-inverse: #1E1E1E;
  --ink-link: #00D4D8;
  --accent-fill: #F26080;
  --accent-fill-hover: #F47791;
  --accent-fill-active: #F78EA4;
  --accent-ink: #1E1E1E;
  --accent-line: #ED224E;
  --accent-gradient: linear-gradient(90deg, #ED224E, #FDEF51);
  --danger-ink: #F26080;
  --danger-fill: #F26080;
  --danger-ink-on-fill: #1E1E1E;
  --positive-ink: #6FC183;
  --emphasis-ink: #FDEF51;
  --emphasis-fill: #FDEF51;
  --emphasis-ink-on-fill: #1E1E1E;
  --border-strong: #7E62CC;
  --border-subtle: rgba(255,255,255,0.14);
  --focus-ring: #0080ED;
  --shadow-lift: 0 24px 48px -20px rgba(0,0,0,0.55);
  --data-label: #00D4D8;
  --data-value: #FDEF51;
  --data-subject: #F26080;
  --data-status: #6FC183;
  --data-body: #FFFFFF;
  --data-structure: #9A95AE;
  --emission-heat: radial-gradient(60% 80% at 8% 104%, rgba(237,34,78,0.55) 0%, rgba(253,239,81,0.22) 38%, transparent 72%);
  --emission-field: radial-gradient(90% 70% at 108% -18%, rgba(168,0,255,0.34) 0%, rgba(0,128,237,0.18) 45%, transparent 78%);
  --emission-rim: linear-gradient(90deg, rgba(0,212,216,0.42) 0%, rgba(0,128,237,0.14) 18%, transparent 34%);
}

/* Semantic ground: dark. */
[data-ground="dark"] {
  --ground-base: #1E1E1E;
  --ground-raised: #2B2B2B;
  --ground-sunken: #161616;
  --ink-primary: #FFFFFF;
  --ink-secondary: #FFFFFF;
  --ink-structure: #9A95AE;
  --ink-inverse: #1E1E1E;
  --ink-link: #00D4D8;
  --accent-fill: #C8274E;
  --accent-fill-hover: #B32346;
  --accent-fill-active: #A2203F;
  --accent-ink: #FFFFFF;
  --accent-line: #ED224E;
  --accent-gradient: linear-gradient(90deg, #ED224E, #FDEF51);
  --danger-ink: #F26080;
  --danger-fill: #F26080;
  --danger-ink-on-fill: #1E1E1E;
  --positive-ink: #6FC183;
  --emphasis-ink: #FDEF51;
  --emphasis-fill: #FDEF51;
  --emphasis-ink-on-fill: #1E1E1E;
  --border-strong: #696969;
  --border-subtle: rgba(255,255,255,0.12);
  --focus-ring: #0080ED;
  --shadow-lift: 0 24px 48px -20px rgba(0,0,0,0.55);
  --data-label: #00D4D8;
  --data-value: #FDEF51;
  --data-subject: #F26080;
  --data-status: #6FC183;
  --data-body: #FFFFFF;
  --data-structure: #9A95AE;
  --emission-heat: radial-gradient(60% 80% at 8% 104%, rgba(237,34,78,0.45) 0%, rgba(253,239,81,0.16) 38%, transparent 72%);
  --emission-field: radial-gradient(90% 70% at 108% -18%, rgba(168,0,255,0.26) 0%, rgba(0,128,237,0.14) 45%, transparent 78%);
  --emission-rim: linear-gradient(90deg, rgba(0,212,216,0.36) 0%, rgba(0,128,237,0.12) 18%, transparent 34%);
}

/* Semantic ground: light. */
[data-ground="light"] {
  --ground-base: #F2F2F2;
  --ground-raised: #FFFFFF;
  --ground-sunken: #EAEAEA;
  --ink-primary: #1E1E1E;
  --ink-secondary: #1E1E1E;
  --ink-structure: #6C6685;
  --ink-inverse: #FFFFFF;
  --ink-link: #007678;
  --accent-fill: #C8274E;
  --accent-fill-hover: #B32346;
  --accent-fill-active: #A2203F;
  --accent-ink: #FFFFFF;
  --accent-line: #ED224E;
  --accent-gradient: linear-gradient(90deg, #ED224E, #FDEF51);
  --danger-ink: #C8274E;
  --danger-fill: #C8274E;
  --danger-ink-on-fill: #FFFFFF;
  --positive-ink: #337744;
  --emphasis-ink: #C8274E;
  --emphasis-fill: #FDEF51;
  --emphasis-ink-on-fill: #1E1E1E;
  --border-strong: #868686;
  --border-subtle: rgba(30,30,30,0.19);
  --focus-ring: #0080ED;
  --shadow-lift: 0 22px 44px -22px rgba(48,31,96,0.35);
  --data-label: #007678;
  --data-value: #1E1E1E;
  --data-subject: #C8274E;
  --data-status: #337744;
  --data-body: #1E1E1E;
  --data-structure: #6C6685;
  --emission-heat: none;
  --emission-field: none;
  --emission-rim: none;
}

/* Semantic temperament: sober. */
[data-temperament="sober"] {
  --emission-heat: none;
  --emission-field: none;
  --emission-rim: none;
  --gradient-fields: none;
}

[data-temperament="sober"][data-ground="indigo"],
[data-temperament="sober"] [data-ground="indigo"] {
  --ground-base: #1E1E1E;
  --ground-raised: #2B2B2B;
  --ground-sunken: #161616;
  --ink-structure: #9A95AE;
  --ink-link: #00D4D8;
  --accent-fill: #C8274E;
  --accent-fill-hover: #B32346;
  --accent-fill-active: #A2203F;
  --accent-ink: #FFFFFF;
  --border-strong: #696969;
  --data-subject: #F26080;
}
/* Paleta y tipografías tomadas de los tokens de Athanor.
   --fsans se reserva para la prosa larga (biografía, desarrollo de las frases
   al aire): en mono se lee peor, y esos textos están para leerse. */
:root{
--bg:var(--ground-base); /* Athanor: --ground-base */
--panel:var(--ground-raised); /* Athanor: --ground-raised */
--panel2:var(--ground-sunken); /* Athanor: --ground-sunken */
--line:var(--border-subtle); /* Athanor: --border-subtle */
--txt:var(--ink-primary); /* Athanor: --ink-primary */
--mut:var(--ink-structure); /* Athanor: --ink-structure */
--red:var(--accent-fill); /* Athanor: --accent-fill */
--red2:var(--danger-ink); /* Athanor: --danger-ink */
--grn:var(--positive-ink); /* Athanor: --positive-ink */
--yel:var(--emphasis-ink); /* Athanor: --emphasis-ink */
--blu:var(--ink-link); /* Athanor: --ink-link */
--fmono:var(--font-mono); /* Athanor: --font-mono */
--fsans:var(--font-primary); /* Athanor: --font-primary */
--ftitle:var(--font-primary); /* Athanor: --font-primary */
--pad:var(--space-32); /* Athanor: --space-32 */
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);font:var(--type-body-size)/var(--type-body-line) var(--fmono)}
a{color:var(--blu);text-decoration:none}a:hover{text-decoration:underline}
button{font:inherit;cursor:pointer}
.top{display:flex;justify-content:space-between;align-items:center;padding:20px var(--pad)}
.brand{font-weight:800}.brand b{color:var(--red)}
/* Solo los botones que abren un menú, no los de adentro: `.icons button`
   alcanzaba a cada ítem del desplegable y le ponía borde, padding y un
   margen izquierdo de 8px, que es lo que corría la lista contra el borde
   derecho y hacía que cada ítem pareciera una tarjeta. */
.icons > button,.icons > .menuwrap > button{background:none;border:1px solid var(--line);color:var(--txt);border-radius:var(--radius-12);padding:6px 12px;margin-left:8px}
.icons > button:hover,.icons > .menuwrap > button:hover{border-color:var(--red)}
.home{min-height:62vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 16px;text-align:center}
/* Los títulos que escalan con la pantalla escalan también el interlineado:
   tamaño + la diferencia línea−tamaño del token chico (8px en h3), acotado por
   las líneas de los dos tokens. Sin eso, un h1 de 56px heredaba los 24px de
   línea del body. El tracking es el del token grande, que es el que se ve en
   escritorio. */
.home h1{font-size:clamp(var(--type-h3-size),5vw,var(--type-h1-size));line-height:clamp(var(--type-h3-line),calc(5vw + var(--type-h3-line) - var(--type-h3-size)),var(--type-h1-line));letter-spacing:var(--type-h1-track);margin:0 0 10px;font-weight:700}
.home h1 span{color:var(--red)}
.home p{color:var(--mut);margin:0 0 26px}
.searchbar{width:min(720px,100%);display:flex;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-pill);padding:6px 6px 6px 22px;transition:.2s}
.searchbar:focus-within{border-color:var(--red);box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-ring) 22%,transparent)}
.searchbar input{flex:1;background:none;border:0;outline:0;color:var(--txt);font-size:var(--type-body-lg-size);line-height:var(--type-body-lg-line);min-width:0}
.searchbar button{background:var(--red);border:0;color:var(--accent-ink);border-radius:var(--radius-pill);padding:10px 26px;font-weight:700}
.searchbar button:hover{background:var(--red2)}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:22px;max-width:720px}
.chip{background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius-pill);padding:6px 14px;color:var(--txt);font-size:var(--type-body-size);line-height:var(--type-body-line)}
.chip:hover{border-color:var(--red)}
#out{padding:8px var(--pad) 72px}
/* Las pantallas cortas —espera, error, confirmar, resultados— son una columna
   centrada: media línea de texto pegada al borde izquierdo de una pantalla de
   1600px se lee como un error de maquetado. La ficha NO usa .wrap, así que
   sigue a ancho completo. */
.wrap{max-width:760px;margin:0 auto;padding:56px 0;text-align:center}
.wrap h2{font-size:var(--type-h3-size);line-height:var(--type-h3-line);letter-spacing:var(--type-h3-track)}
/* Las tarjetas de candidatos y resultados se leen de izquierda a derecha
   aunque la columna esté centrada. */
.wrap .candidate{text-align:left}
/* Modo compacto: el buscador se queda arriba, más chico, y los resultados
   van abajo — como en cualquier buscador. Antes la pantalla de resultados lo
   hacía desaparecer, así que para buscar otra cosa había que volver primero
   (docs §66). */
.home.compact{min-height:0;padding:22px 16px 0}
.home.compact h1,.home.compact p{display:none}
.home.compact .searchbar{width:min(720px,100%);padding:4px 4px 4px 18px}
.home.compact .searchbar input{font-size:var(--type-body-lg-size);line-height:var(--type-body-lg-line)}
.home.compact .searchbar button{padding:8px 20px}
.hero{background:linear-gradient(135deg,color-mix(in srgb,var(--danger-fill) 18%,var(--ground-base)),var(--ground-raised) 60%);border:1px solid var(--line);border-left:6px solid var(--red);border-radius:var(--radius-12);padding:32px;margin-bottom:24px}
.hero h2{margin:0;font-size:clamp(var(--type-h3-size),4vw,var(--type-h2-size));line-height:clamp(var(--type-h3-line),calc(4vw + var(--type-h3-line) - var(--type-h3-size)),var(--type-h2-line));letter-spacing:var(--type-h2-track)}
.hero .hfull{font-family:var(--fmono);font-size:clamp(var(--type-body-size),1.6vw,var(--type-body-lg-size));line-height:clamp(var(--type-body-line),calc(1.6vw + var(--type-body-line) - var(--type-body-size)),var(--type-body-lg-line));color:color-mix(in srgb,var(--ink-primary) 78%,transparent);margin-top:4px}
.hero .pron{color:var(--yel);font-size:var(--type-body-lg-size);line-height:var(--type-body-lg-line);margin-top:2px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.tag{background:color-mix(in srgb,var(--danger-fill) 16%,transparent);color:var(--danger-ink);border-radius:var(--radius-pill);padding:3px 12px;font-size:var(--type-body-sm-size);line-height:var(--type-body-sm-line)}
.hero p{margin:6px 0 0;color:var(--ink-secondary)}
.bar{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;align-items:center}
.bar button{background:var(--panel2);color:var(--txt);border:1px solid var(--line);border-radius:var(--radius-12);padding:6px 14px;font-size:var(--type-body-size);line-height:var(--type-body-line)}
.bar button:hover{border-color:var(--red)}
.bar button:disabled{opacity:.45;cursor:not-allowed}
.bar button:disabled:hover{border-color:var(--line)}
.revrow{margin:0 0 10px}
.b-rev-ok{background:color-mix(in srgb,var(--positive-ink) 18%,transparent);color:var(--grn)}
.b-rev-no{background:color-mix(in srgb,var(--emphasis-fill) 18%,transparent);color:var(--yel)}
/* El modo no es un estado bueno ni malo, así que no va ni en verde ni en
   ámbar: esos dos ya significan revisada y sin revisar, y repetirlos acá
   haría leer "rápida" como una advertencia. */
.b-fast{background:color-mix(in srgb,var(--data-label) 16%,transparent);color:var(--data-label)}
.b-full{background:var(--ground-sunken);color:var(--mut)}
.meta{color:var(--mut);font-size:var(--type-caption-size);line-height:var(--type-caption-line);letter-spacing:var(--type-caption-track)}
.tabs{display:flex;gap:5px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:6px 0 16px;position:sticky;top:0;background:var(--bg);padding:10px 0;z-index:5}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:1 1 auto;white-space:nowrap;text-align:center;background:var(--panel);border:1px solid var(--line);color:var(--mut);border-radius:var(--radius-pill);padding:7px clamp(6px,1vw,14px);font-size:clamp(var(--type-caption-size),1.3vw,var(--type-body-size));line-height:clamp(var(--type-caption-line),calc(1.3vw + var(--type-body-line) - var(--type-body-size)),var(--type-body-line))}
.tab.on{background:var(--red);border-color:var(--red);color:var(--accent-ink)}
.sec{display:none}.sec.on{display:block}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:24px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-12);padding:24px}
/* Las reglas de abajo apuntaban a h4/.d/p, que era el marcado del original.
   El card() de esta versión escribe .cdate/.ctitle/.cbody, así que ninguna
   le pegaba: todas las tarjetas salían con la misma letra y el mismo peso,
   sin jerarquía (docs §56). Se mantienen las dos formas. */
.card h4,.card .ctitle{margin:0 0 8px;font-family:var(--fsans);font-size:var(--type-h5-size);line-height:var(--type-h5-line);letter-spacing:var(--type-h5-track);font-weight:700}
.card .d,.card .cdate{color:var(--yel);font-family:var(--fmono);font-size:var(--type-code-size);line-height:var(--type-code-line);font-weight:600;margin-bottom:4px}
.card p,.card .cbody{margin:6px 0;color:var(--ink-secondary);font-family:var(--fsans);font-size:var(--type-body-size);line-height:var(--type-body-line)}
.card .src,.card .csrc{margin-top:10px;font-family:var(--fmono);font-size:var(--type-caption-size);line-height:var(--type-caption-line);letter-spacing:var(--type-caption-track)}
.csrc a{color:var(--blu);text-decoration:none}
.csrc a:hover{text-decoration:underline}
.nosource{color:var(--mut);font-family:var(--fmono);font-size:var(--type-caption-size);line-height:var(--type-caption-line);letter-spacing:var(--type-caption-track);font-style:italic}
.sub{margin:28px 0 14px;font-size:var(--type-label-size);line-height:var(--type-label-line);letter-spacing:var(--type-label-track);font-weight:700;text-transform:uppercase;color:var(--mut)}
.empty{color:var(--mut);font-style:italic;padding:10px 0}
/* label y no label-sm, a propósito: 10px en mayúsculas no se lee de un vistazo
   en un estudio con alguien al aire. No "corregirlo" hacia la escala. */
.badge{display:inline-block;border-radius:var(--radius-8);padding:1px 9px;font-size:var(--type-label-size);line-height:var(--type-label-line);letter-spacing:var(--type-label-track);font-weight:700;margin-right:8px;text-transform:uppercase}
.b-historia{background:color-mix(in srgb,var(--data-label) 18%,transparent);color:var(--data-label)}.b-verificado{background:color-mix(in srgb,var(--positive-ink) 18%,transparent);color:var(--grn)}
.b-excen{background:color-mix(in srgb,var(--prima-violet) 18%,transparent);color:color-mix(in srgb,var(--prima-violet) 45%,var(--ink-primary))}
.b-mito{background:color-mix(in srgb,var(--emphasis-fill) 18%,transparent);color:var(--yel)}.b-desmentido{background:color-mix(in srgb,var(--danger-fill) 18%,transparent);color:var(--danger-ink)}
.b-conf-alta{background:color-mix(in srgb,var(--positive-ink) 18%,transparent);color:var(--grn)}.b-conf-media{background:color-mix(in srgb,var(--emphasis-fill) 18%,transparent);color:var(--yel)}.b-conf-baja{background:color-mix(in srgb,var(--danger-fill) 18%,transparent);color:var(--danger-ink)}
.air{display:flex;gap:12px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-left:5px solid var(--yel);border-radius:var(--radius-12);padding:24px;margin-bottom:16px;font-size:var(--type-body-lg-size);line-height:var(--type-body-lg-line)}
.air span{flex:1}
.airtxt{flex:1;min-width:0}
.airt{font-weight:700;font-size:var(--type-body-lg-size);line-height:var(--type-body-lg-line)}
.aird{font-size:var(--type-body-size);line-height:var(--type-body-line);color:var(--ink-secondary);margin-top:4px}
.tlabel{color:var(--mut);font-size:var(--type-body-sm-size);line-height:var(--type-body-sm-line);align-self:center;margin-left:4px}
.air button{background:var(--panel2);color:var(--txt);border:1px solid var(--line);border-radius:var(--radius-8);padding:5px 12px;font-size:var(--type-body-sm-size);line-height:var(--type-body-sm-line)}
.air button:hover{border-color:var(--yel)}
.state{text-align:center;padding:60px 20px;color:var(--mut)}
.spin{width:46px;height:46px;border:5px solid var(--line);border-top-color:var(--red);border-radius:var(--radius-pill);margin:0 auto 18px;animation:s 1s linear infinite}
@keyframes s{to{transform:rotate(360deg)}}
.err{background:color-mix(in srgb,var(--danger-fill) 12%,transparent);border:1px solid color-mix(in srgb,var(--danger-fill) 45%,transparent);border-radius:var(--radius-12);padding:18px;max-width:720px;margin:30px auto}
.err button{background:var(--red);color:var(--accent-ink);border:0;border-radius:var(--radius-8);padding:8px 18px;margin-top:8px}
.err+button{background:var(--panel2);color:var(--txt);border:1px solid var(--line);
  border-radius:var(--radius-12);padding:10px 22px;font-family:var(--fmono)}
.err+button:hover{border-color:var(--red)}
.warn{position:relative;padding-right:46px!important;background:color-mix(in srgb,var(--emphasis-fill) 12%,transparent);border:1px solid color-mix(in srgb,var(--emphasis-fill) 35%,transparent);border-radius:var(--radius-12);padding:10px 14px;color:var(--emphasis-ink);margin-bottom:14px;font-size:var(--type-body-size);line-height:var(--type-body-line)}
.small{font-size:var(--type-caption-size);line-height:var(--type-caption-line);letter-spacing:var(--type-caption-track);color:var(--mut);margin-top:6px}
.wclose{position:absolute;top:8px;right:10px;width:28px;height:28px;border-radius:var(--radius-pill);border:1px solid color-mix(in srgb,var(--emphasis-fill) 35%,transparent);background:transparent;color:var(--emphasis-ink);font-size:var(--type-body-size);line-height:1;cursor:pointer;padding:0}
.wclose:hover{background:color-mix(in srgb,var(--emphasis-fill) 35%,transparent);color:var(--ink-primary)}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin:0 0 18px;font-size:var(--type-body-sm-size);line-height:var(--type-body-sm-line);color:var(--mut);font-family:var(--fmono)}
.legend .lg{display:inline-flex;align-items:center;gap:6px}
.legend i{width:12px;height:12px;border-radius:var(--radius-4);display:inline-block}
.badge.tipo{text-transform:none;font-size:var(--type-caption-size);line-height:var(--type-caption-line);letter-spacing:var(--type-caption-track);margin-bottom:4px}
/* Hasta hoy estos títulos existían solo en el PDF, así que en pantalla la
   discografía era un bloque continuo: sin el año y sin aire entre grupos. */
.sectitle{font-family:var(--ftitle);font-weight:400;font-size:var(--type-h4-size);line-height:var(--type-h4-line);letter-spacing:var(--type-h4-track);color:var(--txt);margin:34px 0 14px;padding-left:12px;border-left:4px solid var(--red)}
.sectitle:first-child{margin-top:0}
@page{size:A4;margin:0}
@media print{
*{-webkit-print-color-adjust:exact;print-color-adjust:exact}
html,body{background:var(--ground-base)!important;color:var(--txt)}
#homeBox,#compact,.icons,.tabs,.bar,.air button,.wclose{display:none!important}
.top{padding:10mm 12mm 4mm}
.wrap{max-width:none;padding:0 12mm 12mm}
.sec{display:block!important;margin-bottom:8mm}
.sectitle{display:block;font-family:var(--ftitle);font-weight:400;font-size:var(--type-h4-size);line-height:var(--type-h4-line);letter-spacing:var(--type-h4-track);margin:6mm 0 4mm;padding-left:12px;border-left:5px solid var(--red);break-after:avoid;page-break-after:avoid}
.hero,.card,.air,.crow,.err,.warn{position:relative;padding-right:46px!important;break-inside:avoid;page-break-inside:avoid}
.sub,.year{break-after:avoid;page-break-after:avoid}
.hero{margin-bottom:6mm}
a{color:var(--blu)}
}
/* Títulos: tipografía del sistema. Acá iba la fuente de la marca del cliente,
   embebida en base64 (58.000 caracteres); se quitó junto con el resto de la
   identidad visual. */
.brand{display:flex;align-items:center;gap:12px;font-weight:700;color:var(--mut);background:none;border:0;padding:0;cursor:pointer;font-size:inherit;font-family:inherit}
.brand:hover{color:var(--txt)}
#homeLink{display:block;padding:4px;cursor:pointer;transition:.15s}
/* El contorno blanco de antes existía para que el logo del cliente, oscuro,
   se leyera sobre el fondo negro. El isotipo actual trae su propio blanco. */
#homeLink:hover .logo{opacity:.8}
.logo{height:40px;width:auto;display:block}
.card.cov{display:flex;align-items:flex-start}
.card.cov>div{flex:1;min-width:0}
.cover{display:none;width:88px;height:88px;border-radius:var(--radius-8);object-fit:cover;flex:none;margin-right:14px}
.srccap{margin-top:12px;font-size:var(--type-caption-size);line-height:var(--type-caption-line);letter-spacing:var(--type-caption-track);font-family:var(--fmono)}
.srcs{margin:4px 0 0;padding-left:20px;font-size:var(--type-caption-size);line-height:var(--type-caption-line);letter-spacing:var(--type-caption-track);font-family:var(--fmono);color:var(--mut)}
/* El aire va ENTRE las fuentes, no adentro de cada una. La interlínea sale
   del token de caption (16px) y así se queda: cambiarla acá para que la lista
   respire desarma la escala en el único lugar donde molestaba. Lo que esta
   lista necesita es separación entre renglones que se tocan con el dedo. */
.srcs li + li{margin-top:var(--space-8)}
.srcs li::marker{color:var(--mut)}
.srcs a{color:var(--blu);text-decoration:none}
.srcs a:hover{text-decoration:underline}
.clist{display:block}
.crow{padding:10px 0;border-bottom:1px solid var(--line);line-height:var(--type-body-line)}
.crow:last-child{border-bottom:0}
.crow b{font-family:var(--fsans)}
.crow .arrow{color:var(--blu);text-decoration:none;font-size:var(--type-body-size);line-height:var(--type-body-line)}
.crow .arrow:hover{color:var(--ink-primary)}
.nolink{color:var(--mut);font-family:var(--fmono);font-size:var(--type-caption-size);line-height:var(--type-caption-line);letter-spacing:var(--type-caption-track)}
.cyear{display:inline-block;min-width:62px;color:var(--yel);font-family:var(--ftitle);font-size:var(--type-h5-size);line-height:var(--type-h5-line);letter-spacing:var(--type-h5-track);vertical-align:middle}
.year{font-family:var(--ftitle);font-weight:400;color:var(--red2);font-size:var(--type-h3-size);line-height:var(--type-h3-line);letter-spacing:var(--type-h3-track);margin:22px 0 8px;border-bottom:2px solid var(--line)}
/* Roboto para lo que se lee de corrido; mono para todo lo demás, que es la
   proporción que usa khemlabs.com en sus tarjetas. */
.home h1,.hero h2,.card h4,.airt{font-family:var(--fsans)}
.hero p,.card p,.aird,.home p{font-family:var(--fsans);font-size:var(--type-body-size);line-height:var(--type-body-line)}
.tab,.sub,.badge,.meta,.chip,.year,.cyear,.d,.src,.srcs,.tlabel,.small{font-family:var(--fmono)}
.searchbar button,.bar button,.icons button,.menu button,.air button{font-family:var(--fmono);font-weight:700}
/* ---------- pantallas angostas ---------- */
/* El aire lateral se achica pero nunca desaparece: el reclamo original era que
   las tarjetas tocaban el borde. */
@media (max-width:640px){
  :root{--pad:var(--space-16); /* Athanor: --space-16 */}
  .card,.air{padding:18px}
  .hero{padding:22px}

  /* El encabezado medía 119px porque la marca se partía en dos líneas Y los
     botones en dos filas. Una sola fila, sin cortes. */
  .top{padding:14px var(--pad);gap:10px}
  .brand{gap:8px;flex:0 0 auto;white-space:nowrap;font-size:var(--type-body-sm-size);line-height:var(--type-body-sm-line)}
  .logo{height:30px}
  .icons{display:flex;gap:6px;flex:0 0 auto}
  .icons > button,.icons > .menuwrap > button{margin-left:0;padding:7px 10px;font-size:var(--type-body-sm-size);line-height:var(--type-body-sm-line)}

  /* Los menús se salían del borde izquierdo: el de configuración empezaba en
     -14px. Anclados a la derecha y acotados al ancho de pantalla. */
  .menu{min-width:0;width:min(300px,calc(100vw - 2*var(--pad)));max-height:70vh}
  #mCfg{min-width:0;width:min(330px,calc(100vw - 2*var(--pad)))}
  .cfgrow{gap:10px;font-size:var(--type-caption-size);line-height:var(--type-caption-line);letter-spacing:var(--type-caption-track)}

  /* El logo flotante se comía un tercio del ancho del título. */
  .bar button{padding:6px 12px;font-size:var(--type-body-sm-size);line-height:var(--type-body-sm-line)}

  /* Las pestañas scrollean de costado; sin un borde que se desvanezca no hay
     manera de saber que hay más a la derecha. */
  .tabs{-webkit-mask-image:linear-gradient(to right,var(--prima-near-black) 85%,transparent);
        mask-image:linear-gradient(to right,var(--prima-near-black) 85%,transparent)}
  .grid{gap:16px}

  /* El botón Copiar al lado del título le robaba la mitad del ancho y lo
     partía en dos líneas. Abajo, donde el pulgar llega mejor. */
  .air{flex-direction:column;gap:12px}
  .air button{align-self:flex-start}
}

/* Por debajo de 560px el nombre de la aplicación ya no entra junto a los tres
   botones. Queda el isotipo, y el nombre sigue estando en el título de la
   pestaña. */
@media (max-width:560px){
  .brand{font-size:0}
  .brand .logo{height:30px}
}

/* ---------- menús de favoritos e historial ---------- */
.menuwrap{position:relative;display:inline-block}
.menu{display:none;position:absolute;right:0;top:calc(100% + 8px);min-width:260px;max-height:60vh;overflow:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-12);padding:8px;z-index:30;
  box-shadow:var(--shadow-lift)}
.menu.on{display:block}
/* Cada fila es abrir + quitar. El tachito ocupa su lugar siempre, no aparece
   al pasar por encima: en touch no hay hover y el botón no existiría. */
.menurow{display:flex;align-items:stretch;gap:4px;border-radius:var(--radius-8)}
.menurow:hover{background:var(--panel2)}
.menuitem{flex:1;min-width:0;text-align:left;background:none;border:0;color:var(--txt);
  border-radius:var(--radius-8);padding:10px 12px;font-family:var(--fmono);font-size:var(--type-body-size);line-height:var(--type-body-line);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menudel{flex:none;width:36px;background:none;border:0;color:var(--mut);border-radius:var(--radius-8);
  font-size:var(--type-body-sm-size);line-height:1;opacity:.55}
.menudel:hover{opacity:1;color:var(--red2);background:color-mix(in srgb,var(--danger-fill) 20%,transparent)}

/* Borrar todo no abre nada: va separado del resto y pregunta antes. */
.menufoot{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.menuclear{width:100%;text-align:left;background:none;border:0;color:var(--mut);
  border-radius:var(--radius-8);padding:8px 12px;font-family:var(--fmono);font-size:var(--type-body-sm-size);line-height:var(--type-body-sm-line)}
.menuclear:hover{color:var(--red2);background:color-mix(in srgb,var(--danger-fill) 13%,transparent)}
.menuask{width:100%;padding:2px 12px 4px;color:var(--yel);font-family:var(--fmono);font-size:var(--type-body-sm-size);line-height:var(--type-body-sm-line)}
.menuyes,.menuno{flex:1;border-radius:var(--radius-8);padding:7px 10px;font-family:var(--fmono);font-size:var(--type-body-sm-size);line-height:var(--type-body-sm-line)}
.menuyes{background:color-mix(in srgb,var(--danger-fill) 18%,transparent);border:1px solid color-mix(in srgb,var(--danger-fill) 55%,transparent);color:var(--danger-ink)}
.menuyes:hover{background:color-mix(in srgb,var(--danger-fill) 28%,transparent)}
.menuno{background:none;border:1px solid var(--line);color:var(--mut)}
.menuno:hover{border-color:var(--mut);color:var(--txt)}
.menuempty{padding:12px;color:var(--mut);font-size:var(--type-body-sm-size);line-height:var(--type-body-sm-line)}
/* El menú de versiones vive adentro de la barra de la ficha, así que sus
   filas heredaban el fondo y el borde redondeado de `.bar button`: tarjetas
   adentro de una tarjeta. Una fila de menú no es una tarjeta —se separa de la
   siguiente con una línea y nada más. */
.bar .menu button{background:none;border:0;border-radius:0;width:100%;
  text-align:left;padding:9px 10px;font-size:var(--type-body-size);line-height:var(--type-body-line)}
.bar .menu .menurow{border-radius:0}
.bar .menu .menurow + .menurow{border-top:1px solid var(--line)}
.menuitem .vname{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menuitem .vmeta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  color:var(--mut);font-size:var(--type-caption-size);line-height:var(--type-caption-line);letter-spacing:var(--type-caption-track);font-weight:400;margin-top:2px}
.vfast{color:var(--data-label)}
.vhere{color:var(--mut);font-style:italic}
/* La que estás viendo sigue en la lista —sacarla haría contar mal las
   versiones— pero no se ofrece como destino ni se resalta como una tarjeta. */
.menuitem.vnow{cursor:default;opacity:.6}
.bar .menu .menurow:has(.vnow):hover{background:none}

/* ---------- volver ---------- */
/* Era el cuarto botón de una fila de cuatro iguales, dentro de la ficha. Ahora
   va arriba de todo y es lo único a esa altura, que es donde se lo busca. */
.back{display:inline-flex;align-items:center;gap:8px;background:none;border:0;color:var(--mut);
  font-family:var(--fmono);font-size:var(--type-body-size);line-height:var(--type-body-line);padding:10px 0;margin-bottom:4px;transition:.15s}
.back:hover{color:var(--red2);transform:translateX(-3px)}

/* El cartel de espera: el spin ya existía en la hoja y no se usaba. */
.wrap .spin{margin:0 auto 22px}
.wrap h2{margin:0 0 6px;font-family:var(--fsans)}

/* ---------- ruedita de configuración ---------- */
#btnCfg{font-size:var(--type-body-lg-size);line-height:1;padding:7px 11px}
/* Más ancho que los otros menús: los valores son técnicos y no se parten bien. */
#mCfg{min-width:340px}
.cfgrow{display:flex;justify-content:space-between;gap:18px;padding:8px 12px;font-family:var(--fmono);font-size:var(--type-code-size);line-height:var(--type-code-line)}
.cfgrow+.cfgrow{border-top:1px solid var(--line)}
.cfgk{color:var(--mut)}
.cfgv{color:var(--txt);text-align:right;word-break:break-all}
.cfgwarn{margin-top:8px;padding:10px 12px;border-radius:var(--radius-8);background:color-mix(in srgb,var(--emphasis-fill) 8%,transparent);color:var(--yel);font-size:var(--type-caption-size);line-height:var(--type-caption-line);letter-spacing:var(--type-caption-track)}

/* ---------- confirmación del artista ---------- */
.candidate{display:block;width:100%;text-align:left;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-12);padding:18px 20px;margin:12px 0;transition:.15s}
.candidate:hover{border-color:var(--red);transform:translateX(3px)}
.cname{display:block;font-family:var(--fsans);font-weight:700;font-size:var(--type-h5-size);line-height:var(--type-h5-line);letter-spacing:var(--type-h5-track);color:var(--txt)}
.cfull{display:block;margin-top:2px;font-family:var(--fmono);font-size:var(--type-body-size);line-height:var(--type-body-line);color:color-mix(in srgb,var(--ink-primary) 78%,transparent)}
.cdesc{display:block;margin-top:4px;font-family:var(--fmono);font-size:var(--type-body-sm-size);line-height:var(--type-body-sm-line);color:var(--mut)}
.ccached{display:inline-block;margin-top:10px;padding:2px 10px;border-radius:var(--radius-8);
  background:color-mix(in srgb,var(--positive-ink) 18%,transparent);color:var(--grn);font-family:var(--fmono);font-size:var(--type-caption-size);line-height:var(--type-caption-line);letter-spacing:var(--type-caption-track)}
.cstale{display:inline-block;margin-top:10px;padding:2px 10px;border-radius:var(--radius-8);
  background:color-mix(in srgb,var(--emphasis-fill) 18%,transparent);color:var(--yel);font-family:var(--fmono);font-size:var(--type-caption-size);line-height:var(--type-caption-line);letter-spacing:var(--type-caption-track)}
.primary{background:var(--red);border:0;color:var(--accent-ink);border-radius:var(--radius-pill);padding:14px 28px;
  font-family:var(--fmono);font-weight:700;font-size:var(--type-body-size);line-height:var(--type-body-line);margin:8px 0}
.primary:hover{background:var(--red2)}
/* La variante clara: misma forma, menos peso. Importar no sale a buscar, así
   que no compite con el botón que sí lo hace. */
.primary.soft{background:color-mix(in srgb,var(--accent-fill) 15%,transparent);color:var(--red2);border:1px solid color-mix(in srgb,var(--accent-fill) 40%,transparent)}
.primary.soft:hover{background:color-mix(in srgb,var(--accent-fill) 24%,transparent);color:var(--danger-ink)}
.primary:disabled{opacity:.5;cursor:not-allowed}
.btnrow{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:8px 0}
.backrow{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:10px}
/* El interruptor del modo: una línea, no un panel de configuración.
   La nota de al lado cambia con el estado, así que lo que se elige se
   lee sin tener que acordarse de qué significa "rápido". */
/* Las dos maneras de investigar, cada una con su tiempo. Elegir es tocar una,
   no interpretar una nota. */
.modetitle{margin:18px 0 8px}
.modes{display:inline-flex;gap:8px;flex-wrap:wrap;justify-content:center}
.mode{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:170px;
  padding:10px 18px;border:1px solid var(--line);border-radius:var(--radius-12);background:var(--panel);
  color:var(--mut);font-family:var(--fmono)}
.mode:hover{border-color:var(--mut)}
.mode.on{border-color:var(--red);background:color-mix(in srgb,var(--accent-fill) 10%,transparent);color:var(--txt)}
.modelabel{font-size:var(--type-body-size);line-height:var(--type-body-line);font-weight:700}
.modetime{font-size:var(--type-caption-size);line-height:var(--type-caption-line);letter-spacing:var(--type-caption-track);opacity:.85}
.modenote{margin-top:8px;min-height:18px}

/* ---------- importar ---------- */
.import{text-align:left;max-width:820px}
.import h2{text-align:center}
/* Solo la bajada del título va centrada; las ayudas de cada paso siguen a
   su paso, que está alineado a la izquierda. */
.import > p.mut:first-of-type{text-align:center}
.import .step{margin:26px 0 6px;font-family:var(--fmono);font-size:var(--type-label-size);line-height:var(--type-label-line);letter-spacing:var(--type-label-track);font-weight:700;
  text-transform:uppercase;color:var(--mut)}
.import .primary{display:block;margin:10px 0}
.paste{display:block;width:100%;box-sizing:border-box;min-height:170px;margin-top:8px;
  background:var(--bg);color:var(--txt);border:1px solid var(--line);border-radius:var(--radius-12);
  padding:12px;font-family:var(--fmono);font-size:var(--type-code-size);line-height:var(--type-code-line);resize:vertical}
.paste.tall{min-height:220px}
.paste:focus{outline:0;border-color:var(--red)}
.importerr{margin-top:12px;padding:12px 14px;border-radius:var(--radius-12);background:color-mix(in srgb,var(--danger-fill) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--danger-fill) 55%,transparent);color:var(--danger-ink);font-family:var(--fmono);font-size:var(--type-body-sm-size);line-height:var(--type-body-sm-line)}
.verif{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-12);padding:24px;margin:24px 0}
.verif h3{margin:0 0 10px;font-size:var(--type-label-size);line-height:var(--type-label-line);letter-spacing:var(--type-label-track);font-weight:700;text-transform:uppercase;color:var(--mut)}
.vrow{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;margin:4px 0;font-size:var(--type-body-sm-size);line-height:var(--type-body-sm-line)}
.vok{color:var(--grn)}.vbad{color:var(--red2)}.vwarn{color:var(--yel)}
.nosource{color:var(--mut);font-style:italic;font-size:var(--type-caption-size);line-height:var(--type-caption-line);letter-spacing:var(--type-caption-track)}
.banner{background:color-mix(in srgb,var(--emphasis-fill) 8%,transparent);border:1px solid color-mix(in srgb,var(--emphasis-fill) 33%,transparent);color:var(--yel);padding:14px 18px;border-radius:var(--radius-12);margin:18px 0;font-size:var(--type-body-sm-size);line-height:var(--type-body-sm-line)}
.verif .banner{margin:10px 0 0}
.verifToggle{background:none;border:1px solid var(--line);color:var(--mut);border-radius:var(--radius-8);padding:3px 10px;font-size:var(--type-caption-size);line-height:var(--type-caption-line);letter-spacing:var(--type-caption-track);margin-left:auto}
.vrow.mut{color:var(--mut);font-size:var(--type-caption-size);line-height:var(--type-caption-line);letter-spacing:var(--type-caption-track)}
.cover{width:100%;border-radius:var(--radius-8);margin-bottom:8px;display:block}
.hphoto{width:120px;height:120px;border-radius:var(--radius-pill);object-fit:cover;float:right;margin:0 0 12px 16px;border:2px solid var(--line)}
.air{display:flex;gap:16px;align-items:flex-start;background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius-12);padding:24px;margin-bottom:16px}
.airtxt{flex:1}.airt{font-family:var(--fsans);font-weight:700;font-size:var(--type-body-lg-size);line-height:var(--type-body-lg-line);margin-bottom:8px}
.aird{font-family:var(--fsans);color:var(--ink-secondary);font-size:var(--type-body-size);line-height:var(--type-body-line)}

/* §8a: the login door. A centered card, using the tokens only — no literal hex. */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.login-form{display:flex;flex-direction:column;gap:12px;width:100%;max-width:360px;background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius-12);padding:28px}
.login-form .logo{width:48px;height:48px;align-self:center}
.login-form h1{text-align:center;margin:0}
.login-form p{text-align:center;color:var(--ink-secondary)}
.login-form input{padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-8)}
.login-form button{padding:10px;font-weight:700}
.login-error{color:var(--danger-ink);font-size:var(--type-body-size)}

/* The platform panel (docs §80). Same cards, borders and type as the rest:
   it is a face of this app, not a separate admin look. */
.icons > button.on{border-color:var(--red)}
.panel{max-width:960px;margin:0 auto;padding:32px 24px 64px;display:flex;flex-direction:column;gap:20px}
.panel h1{margin:0}
.panel-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-12);padding:24px;display:flex;flex-direction:column;gap:10px}
.panel-card h2{margin:0;font-family:var(--fsans);font-size:var(--type-h4-size);line-height:var(--type-h4-line)}
.panel-card p{margin:0}
.panel input,.panel select{background:var(--panel2);color:var(--txt);border:1px solid var(--line);border-radius:var(--radius-8);padding:8px 10px;font:inherit}
.panel button:not(.primary){background:var(--panel2);color:var(--txt);border:1px solid var(--line);border-radius:var(--radius-8);padding:8px 14px}
.panel button:not(.primary):hover:not(:disabled){border-color:var(--red)}
.panel button:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}
.panel .primary{padding:9px 20px}
.panel-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.panel-row input:not([inputmode]){flex:1;min-width:220px}
.panel-field{display:grid;grid-template-columns:160px 160px 1fr;gap:12px;align-items:center;margin-bottom:8px}
.panel-label{font-weight:700}
.panel-money{display:inline-flex;align-items:center;gap:6px;font-family:var(--fmono)}
.panel-money input{width:110px}
.panel-ok{color:var(--positive-ink)}
.panel-bad{color:var(--danger-ink)}
.panel-orgs{display:flex;flex-direction:column;gap:10px}
.panel-org{border:1px solid var(--line);border-radius:var(--radius-8);padding:14px;display:flex;flex-direction:column;gap:8px}
.panel-org.pending{border-color:color-mix(in srgb,var(--emphasis-fill) 60%,transparent)}
.panel-org-head{display:flex;gap:12px;align-items:center}
.panel-org-head strong{flex:1}
.panel-org-body{display:flex;flex-direction:column;gap:6px}
.panel-check{display:inline-flex;gap:8px;align-items:center}
@media (max-width:640px){.panel-field{grid-template-columns:1fr}}
.panel-org .panel-money input{width:150px}

/* The per-organization limits in the platform panel (docs §84): three narrow
   boxes in a row, each showing the platform's value as its placeholder. */
.panel-org .panel-row input{width:90px}

/* The organization panel (plan §10): the platform panel's cards, plus the
   people list and the notice. */
.org-notice{color:var(--yel)}
/* The month's consumption in fichas (docs §84), one line per kind. */
.org-usage{list-style:none;margin:8px 0;padding:0;display:flex;flex-direction:column;gap:4px}
.org-usage em{color:var(--danger-ink);font-style:normal}
.org-people{display:flex;flex-direction:column;gap:10px}
.org-who{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.org-who .small{margin-top:0}
.panel-org.org-off{opacity:.7}
.org-invite{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:14px;margin-top:4px}
.org-invite h3{margin:0;font-family:var(--fsans);font-size:var(--type-body-size);line-height:var(--type-body-line)}
.org-invite fieldset{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:8px}
.panel input:disabled,.panel select:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}
.login-hint{color:var(--ink-secondary);font-size:var(--type-body-size)}

/* The landing (recipe 10, D8). The app's own cards, type and tokens: the
   first screen is a face of this app, not a marketing site with its own look.
   Motion comes from the Athanor tokens (`--ease-out` is the quint curve
   Faustine uses, docs/05 §3; `--motion-page` is 700 ms where Faustine's
   reveal is 750), so reduced motion in the tokens reaches it too. */
.landing{min-height:100vh;display:flex;flex-direction:column}
.landing main{width:min(1040px,100%);margin:0 auto;padding:0 var(--pad) var(--space-64);display:flex;flex-direction:column;gap:var(--space-64)}
/* Fixed, with the logo and the two doors: pattern 6 left out, so one bar. */
.landing-top{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:var(--space-12);padding:14px var(--pad);background:color-mix(in srgb,var(--ground-base) 92%,transparent);border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
.landing-top .brand{cursor:default}
.landing-doors{display:flex;gap:8px;align-items:center}
.landing-doors button{background:none;border:1px solid var(--line);color:var(--txt);border-radius:var(--radius-12);padding:6px 12px;font-family:var(--fmono);font-weight:700}
.landing-doors button:hover:not(:disabled){border-color:var(--red)}
.landing-doors button:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}
.landing-hero{padding-top:var(--space-48);display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-16)}
.landing-hero h1{margin:0;max-width:22ch;font-family:var(--fsans);font-size:clamp(var(--type-h3-size),5vw,var(--type-h1-size));line-height:clamp(var(--type-h3-line),calc(5vw + var(--type-h3-line) - var(--type-h3-size)),var(--type-h1-line));letter-spacing:var(--type-h1-track)}
.landing-lede{margin:0;max-width:var(--measure);color:var(--ink-secondary);font-family:var(--fsans);font-size:var(--type-body-lg-size);line-height:var(--type-body-lg-line)}
.landing-ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:flex-start}
.landing-register{display:inline-flex;flex-direction:column;align-items:center;gap:4px;max-width:280px}
.landing-register .small{margin:0}
.landing-register .primary:disabled:hover{background:color-mix(in srgb,var(--accent-fill) 15%,transparent);color:var(--red2)}
.landing-section h2{margin:0 0 var(--space-16);font-family:var(--fsans);font-size:var(--type-h3-size);line-height:var(--type-h3-line);letter-spacing:var(--type-h3-track)}
.landing-section .card b{display:block;font-family:var(--fsans);font-size:var(--type-h5-size);line-height:var(--type-h5-line);margin-bottom:6px}
.landing-section .card p{margin:0;color:var(--ink-secondary);font-family:var(--fsans)}
.landing-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-16)}
.landing-n{display:inline-block;margin-bottom:8px;color:var(--red);font-family:var(--fmono);font-weight:700}
.landing-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-16)}
/* No small print: the text that says registering does not enable the use is
   the size of the lede, on a card of its own (D8). */
.landing-getin{background:var(--panel);border:1px solid var(--line);border-left:5px solid var(--yel);border-radius:var(--radius-12);padding:var(--space-24)}
.landing-getin p{margin:0 0 var(--space-16);max-width:var(--measure);font-family:var(--fsans);font-size:var(--type-body-lg-size);line-height:var(--type-body-lg-line)}
.landing-getin .landing-register{align-items:flex-start}
.landing-closing{text-align:center}
.landing-closing p{margin:0 0 8px;color:var(--ink-secondary);font-family:var(--fsans)}
.landing-foot{text-align:center;padding:var(--space-24) var(--pad);border-top:1px solid var(--line)}
/* Sections appear once, the first time they are reached (docs/05 §3). */
.reveal{opacity:0;transform:translateY(18px);transition:opacity var(--motion-page) var(--ease-out),transform var(--motion-page) var(--ease-out)}
.reveal.in{opacity:1;transform:none}

/* The scene: the search box, the stages, and the ficha that comes out. */
.scene{width:min(820px,100%);margin-top:var(--space-24);text-align:left;background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius-12);padding:var(--space-24)}
.scene-search{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-pill);padding:6px 6px 6px 22px}
.scene-typed{flex:1;min-width:0;white-space:nowrap;overflow:hidden;font-size:var(--type-body-lg-size);line-height:var(--type-body-lg-line)}
.scene-placeholder{color:var(--mut)}
.scene-caret{display:inline-block;width:2px;height:1.1em;margin-left:2px;vertical-align:text-bottom;background:var(--red);animation:scene-blink 1.1s step-end infinite}
@keyframes scene-blink{50%{opacity:0}}
.scene-go{background:var(--red);color:var(--accent-ink);border-radius:var(--radius-pill);padding:8px 20px;font-weight:700;font-family:var(--fmono)}
.scene-stages{list-style:none;margin:var(--space-16) 0 0;padding:0;display:flex;flex-direction:column;gap:4px;color:var(--mut);font-size:var(--type-body-sm-size);line-height:var(--type-body-sm-line)}
.scene-stages li{transition:color var(--motion-slow) var(--ease-out)}
.scene-stages li.on{color:var(--txt)}
.scene-stages li.done{color:var(--grn)}
.scene-stages .small{margin:0;color:var(--mut)}
.scene-tick{display:inline-block;width:1.4em}
/* Hidden and in its place until the stages are done, so the page does not
   jump when it appears. `visibility` too, so a screen reader does not read a
   ficha that is not on screen yet. */
.scene-result{margin-top:var(--space-24);opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity var(--motion-page) var(--ease-out),transform var(--motion-page) var(--ease-out),visibility 0s linear var(--motion-page)}
.scene-result.in{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.scene-head h3{margin:0;font-family:var(--fsans);font-size:var(--type-h4-size);line-height:var(--type-h4-line)}
.scene-head p{margin:2px 0 0}
.scene-head .vok,.scene-head .vbad{font-weight:700}
.scene-result .sub{margin:var(--space-24) 0 var(--space-12)}
.scene-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-12)}
.scene-facts .card{padding:var(--space-16)}
.scene-result .air{margin-bottom:var(--space-12)}
.scene-replay{background:none;border:1px solid var(--line);color:var(--mut);border-radius:var(--radius-8);padding:4px 12px;font-family:var(--fmono);font-size:var(--type-caption-size);line-height:var(--type-caption-line)}
.scene-replay:hover:not(:disabled){border-color:var(--red);color:var(--txt)}

/* The login's branches: "← Volver" above, "¿Olvidaste tu clave?" below. */
.login-form .login-back{align-self:flex-start;padding:0;margin:0;font-weight:400}
.login-form .login-link{background:none;border:0;color:var(--blu);font-weight:400;padding:4px}
.login-form .login-link:hover{text-decoration:underline}
.login-form .login-hint{text-align:center;margin:0}
/* Inside a line of text: "¿No tenés cuenta? Registrarme", "… Cambiar". */
.login-form .login-link.inline{padding:0;font-size:inherit;line-height:inherit}

/* The registration's choice (recipe 10, D2): two options as cards, the title
   and what each is for, before any field. Stacked at every width: side by
   side, at 360 px each note wrapped to five lines. */
.register-options{display:flex;flex-direction:column;gap:var(--space-12)}
.login-form .register-option{display:flex;flex-direction:column;gap:4px;text-align:left;background:var(--panel);color:var(--txt);border:1px solid var(--line);border-radius:var(--radius-12);padding:14px 16px}
.login-form .register-option:hover{border-color:var(--red)}
.register-option span{color:var(--ink-secondary);font-weight:400}
/* The line that says registering does not enable generating: at the size of
   the text around it, as on the landing (D8), not as a hint. */
.login-form .register-pending{color:var(--txt)}

@media (max-width:640px){
  .landing main{gap:var(--space-48)}
  .landing-hero{padding-top:var(--space-24)}
  .landing-top{padding:10px var(--pad)}
  .landing-doors button{padding:6px 10px;font-size:var(--type-body-sm-size);line-height:var(--type-body-sm-line)}
  .scene{padding:var(--space-16)}
  .scene-go{padding:6px 14px}
  /* At 375 px the large size clipped the name to "The Rolling Stone". */
  .scene-search{padding-left:14px}
  .scene-typed{font-size:var(--type-body-size);line-height:var(--type-body-line);text-overflow:ellipsis}
  .landing-getin{padding:var(--space-16)}
}

/* With reduced motion the scene is drawn on its final frame by the component
   (`SceneView.tsx`); here the rest stays still: sections visible from the
   start, no caret blinking, no transitions (docs/05 §3, "conservar
   información y suprimir coreografía"). */
@media (prefers-reduced-motion:reduce){
  .reveal,.scene-result{opacity:1;visibility:visible;transform:none;transition:none}
  .scene-caret{animation:none}
  .scene-stages li{transition:none}
}