/*
 * Kit FIT Labs design tokens.
 *
 * Three layers, consumed in this order:
 *   1. Primitives (--fit-*): raw FactorIT brand values. Only this file uses them.
 *   2. Semantic tokens (--color-*): what a color means. Components use these only.
 *   3. Scales: type, spacing, radius, borders, shadows, z-index, motion.
 *
 * Breakpoints (CSS custom properties do not work inside media queries, so they
 * are documented here and written as literals in each module):
 *   sm  40rem  (640px)   phones in landscape, small tablets
 *   md  48rem  (768px)   tablets; two-column layouts start
 *   lg  64rem  (1024px)  laptops and the projector; side rails appear
 *   xl  90rem  (1440px)  wide screens; content stops growing at --content-max
 *
 * Surfaces: an element with data-surface="inverse" switches links, focus rings
 * and primary actions to their dark-background variants.
 */

:root {
  /* ---------- 1. Primitives: FactorIT brand ---------- */
  --fit-petroleo: #103f49;
  --fit-petroleo-deep: #0b2f37;
  --fit-blue: #036fb7;
  --fit-blue-700: #025a94;
  --fit-blue-800: #014a7a;
  --fit-blue-50: #eef6fc;
  --fit-blue-100: #d9ebf8;
  --fit-blue-200: #b3d6f0;
  --fit-blue-300: #7fb9e3;
  --fit-cyan: #75d7e1;
  --fit-mint: #abffd5;
  --fit-black: #181818;
  --fit-white: #ffffff;

  --fit-ink-50: #f9fbfc;
  --fit-ink-100: #f2f6f8;
  --fit-ink-200: #e4ecef;
  --fit-ink-300: #ccd8dd;
  --fit-ink-400: #a8bac2;
  --fit-ink-500: #7c95a0;
  --fit-ink-600: #547481;
  --fit-ink-700: #355f69;
  --fit-ink-800: #1f4e58;
  --fit-ink-900: #103f49;

  --fit-green: #16a34a;
  --fit-green-700: #15803d;
  --fit-green-50: #e7f6ec;
  --fit-orange: #f59e0b;
  --fit-orange-700: #a16207;
  --fit-orange-50: #fef4e2;
  --fit-red: #e23125;
  --fit-red-700: #b8231a;
  --fit-red-50: #fdecea;

  /* ---------- 2. Semantic colors ---------- */
  --color-bg: var(--fit-white);
  --color-surface: var(--fit-ink-100);
  --color-surface-subtle: var(--fit-ink-50);
  --color-surface-strong: var(--fit-ink-200);
  --color-surface-inverse: var(--fit-petroleo);
  --color-surface-inverse-deep: var(--fit-petroleo-deep);

  --color-text: var(--fit-black);
  --color-text-heading: var(--fit-petroleo);
  --color-text-muted: var(--fit-ink-700);
  --color-text-subtle: var(--fit-ink-600);
  --color-text-inverse: var(--fit-white);
  --color-text-inverse-muted: var(--fit-ink-300);
  --color-on-accent: var(--fit-white);

  --color-link: var(--fit-blue);
  --color-link-hover: var(--fit-blue-800);
  --color-link-inverse: var(--fit-cyan);

  --color-border: var(--fit-ink-200);
  --color-border-strong: var(--fit-ink-600);
  --color-border-inverse: rgb(117 215 225 / 0.28);

  --color-accent: var(--fit-blue);
  --color-accent-strong: var(--fit-blue-700);
  --color-accent-mid: var(--fit-blue-200);
  --color-accent-soft: var(--fit-blue-50);
  --color-accent-inverse: var(--fit-cyan);

  /* Highlight: mint, used sparingly (primary action on dark, chosen marks on dark). */
  --color-highlight: var(--fit-mint);
  --color-on-highlight: var(--fit-petroleo);

  --color-focus: var(--fit-blue);
  --color-focus-inverse: var(--fit-mint);
  --color-selection: var(--fit-mint);

  /* Status: base is for marks and fills, strong is for text, soft is for backgrounds. */
  --color-success: var(--fit-green);
  --color-success-strong: var(--fit-green-700);
  --color-success-soft: var(--fit-green-50);
  --color-warning: var(--fit-orange);
  --color-warning-strong: var(--fit-orange-700);
  --color-warning-soft: var(--fit-orange-50);
  --color-danger: var(--fit-red);
  --color-danger-strong: var(--fit-red-700);
  --color-danger-soft: var(--fit-red-50);
  --color-neutral: var(--fit-ink-500);
  --color-neutral-strong: var(--fit-ink-600);
  --color-neutral-soft: var(--fit-ink-100);

  /* Risk tier (always paired with a word and 1 to 3 bars). */
  --color-tier-bajo: var(--color-success);
  --color-tier-bajo-soft: var(--color-success-soft);
  --color-tier-medio: var(--color-warning);
  --color-tier-medio-soft: var(--color-warning-soft);
  --color-tier-alto: var(--color-danger);
  --color-tier-alto-soft: var(--color-danger-soft);

  /* Demand level: one hue (the accent) in three intensities, always with a label. */
  --color-exig-basico: var(--fit-blue-100);
  --color-exig-reforzado: var(--fit-blue-300);
  --color-exig-critico: var(--fit-blue);
  --color-on-exig-critico: var(--fit-white);

  /* Charts: petróleo for structure, blue as the only accent, greys for the rest. */
  --color-chart-structure: var(--fit-petroleo);
  --color-chart-accent: var(--fit-blue);
  --color-chart-line: var(--fit-ink-400);
  --color-chart-grid: var(--fit-ink-200);
  --color-chart-track: var(--fit-ink-100);
  --color-chart-off: var(--fit-ink-50);
  --color-chart-off-border: var(--fit-ink-400);
  --color-chart-layer: var(--fit-ink-50);
  --color-chart-layer-strong: var(--fit-ink-100);

  /* QR codes stay black on white for scanners. */
  --color-qr-dark: var(--fit-black);
  --color-qr-light: var(--fit-white);

  /* Blueprint grid drawn on dark surfaces (hero, document headers). */
  --pattern-grid-major: rgb(117 215 225 / 0.16);
  --pattern-grid-minor: rgb(117 215 225 / 0.06);

  /* ---------- 3. Scales ---------- */

  /* Type families: Sora for display and headings, Manrope for text.
     --font-sora and --font-manrope come from next/font in app/layout.tsx; the
     static fallback site has neither, so the system stack applies there. */
  --font-display: var(--font-sora, "Avenir Next", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif);
  --font-sans: var(--font-manrope, "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif);

  /* Type sizes: fixed steps for UI text, fluid clamps for display. */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-display-sm: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
  --text-display-md: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --text-display-lg: clamp(2.375rem, 1.5rem + 4vw, 4.5rem);

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.55;

  --tracking-display: -0.02em;
  --tracking-normal: 0;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-body: 500;
  --weight-medium: 600;
  --weight-bold: 700;

  /* Spacing: 4px base. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Layout */
  --content-max: 82rem;
  --measure: 44rem;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --header-height: 3.5rem;
  --touch-target: 3rem;

  /* Shape: near-square. Pills only for tags. */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-pill: 999px;

  --border-thin: 1px;
  --border-thick: 2px;
  --border-accent: 4px;

  --shadow-none: none;
  --shadow-raised: 0 1px 2px rgb(16 63 73 / 0.08);
  --shadow-overlay: 0 4px 16px rgb(16 63 73 / 0.16);

  --z-base: 0;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 1000;

  /* Motion: productive curves, short durations. */
  --duration-fast: 110ms;
  --duration-moderate: 240ms;
  --duration-slow: 400ms;
  --duration-reveal: 700ms;
  --ease-standard: cubic-bezier(0.2, 0, 0.38, 0.9);
  --ease-entrance: cubic-bezier(0, 0, 0.38, 0.9);
}

[data-surface="inverse"] {
  --color-link: var(--fit-cyan);
  --color-link-hover: var(--fit-mint);
  --color-focus: var(--color-focus-inverse);
  color: var(--color-text-inverse);
}

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

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

html,
body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-body);
  line-height: var(--leading-normal);
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  color: var(--color-text-heading);
  text-wrap: balance;
}

[data-surface="inverse"] h1,
[data-surface="inverse"] h2,
[data-surface="inverse"] h3 {
  color: var(--color-text-inverse);
}

p,
li {
  text-wrap: pretty;
}

a {
  color: var(--color-link);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--color-link-hover);
}

:focus-visible {
  outline: var(--border-thick) solid var(--color-focus);
  outline-offset: 2px;
}

::selection {
  background: var(--color-selection);
  color: var(--color-on-highlight);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Fallback site styles. Appended to src/ui/tokens.css by scripts/build_respaldo.ts.
   No web fonts here: --font-display and --font-sans fall back to the system stack. */

/* ---------- Chrome ---------- */

.site-header,
.site-footer {
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}

.site-header {
  border-bottom: var(--border-thin) solid var(--color-border-inverse);
}

.site-footer {
  margin-top: auto;
  font-size: var(--text-sm);
  color: var(--color-text-inverse-muted);
}

.bar {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
}

.site-footer .bar {
  padding-block: var(--space-6);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--touch-target);
  color: var(--color-text-inverse);
  text-decoration: none;
}

.marca:hover {
  color: var(--color-text-inverse);
}

/* Logos: height set per place, width follows the intrinsic ratio. */
.logo {
  display: block;
  flex: none;
  width: auto;
  max-width: none;
}

.logo-header {
  height: 28px;
}

.evento {
  padding-left: var(--space-4);
  border-left: var(--border-thin) solid var(--color-border-inverse);
  font-size: var(--text-sm);
  color: var(--color-text-inverse-muted);
}

.firma {
  display: grid;
  gap: var(--space-3);
}

.firma p {
  margin: 0;
}

.logos {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.separador {
  align-self: stretch;
  width: var(--border-thin);
  min-height: 28px;
  background: var(--color-border-inverse);
}

/* Event co-branding in the hero: small and quiet. */
.co-marca {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-inverse-muted);
}

.co-marca .logo {
  height: 22px;
}

@media (max-width: 40rem) {
  .logo-header {
    height: 24px;
  }
}

/* ---------- Landing ---------- */

.main {
  flex: 1;
  width: 100%;
}

.content {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-12) var(--gutter) var(--space-16);
}

.hero {
  position: relative;
  isolation: isolate;
  background-color: var(--color-surface-inverse);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--pattern-grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--pattern-grid-major) 1px, transparent 1px),
    linear-gradient(var(--pattern-grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--pattern-grid-minor) 1px, transparent 1px);
  background-size:
    96px 96px,
    96px 96px,
    24px 24px,
    24px 24px;
  -webkit-mask-image: linear-gradient(100deg, rgb(0 0 0 / 0.25) 20%, #000 75%);
  mask-image: linear-gradient(100deg, rgb(0 0 0 / 0.25) 20%, #000 75%);
}

.hero-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-16) var(--gutter);
  display: grid;
  justify-items: start;
  gap: var(--space-6);
}

.eyebrow {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-accent-inverse);
}

.title {
  margin: 0;
  max-width: 46rem;
  font-size: var(--text-display-lg);
  font-weight: var(--weight-light);
  line-height: 1.05;
  letter-spacing: var(--tracking-display);
}

.page-title {
  margin: 0 0 var(--space-6);
  font-size: var(--text-display-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
}

.notice {
  margin: 0;
  max-width: 38rem;
  padding: var(--space-4) var(--space-5);
  border-left: var(--border-accent) solid var(--color-highlight);
  background: rgb(255 255 255 / 0.06);
  color: var(--color-text-inverse);
  font-size: var(--text-lg);
}

/* Sections: heading on the left, content on the right. */
.section {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-8) 0;
  border-top: var(--border-thin) solid var(--color-border);
}

.section h2 {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}

.section > p {
  margin: 0;
  max-width: var(--measure);
}

@media (min-width: 56rem) {
  .section {
    grid-template-columns: 18rem minmax(0, 1fr);
    column-gap: var(--space-12);
  }

  .section > :not(h2) {
    grid-column: 2;
  }
}

.muted {
  color: var(--color-text-muted);
}

.pendiente {
  background: var(--color-warning-soft);
  box-shadow: inset 0 -2px 0 var(--color-warning);
  font-weight: var(--weight-medium);
  padding: 0 var(--space-1);
}

.cards {
  display: grid;
  gap: var(--border-thin);
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-surface);
}

.card-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  margin: 0;
}

.card-title a {
  color: var(--color-text-heading);
  text-decoration: none;
}

.card-title a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.card-text {
  margin: 0;
  color: var(--color-text-muted);
}

.card-actions {
  margin: auto 0 0;
  padding-top: var(--space-3);
}

.primary {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  padding: 0 var(--space-8) 0 var(--space-4);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  background: var(--color-accent);
  color: var(--color-on-accent);
  text-decoration: none;
}

.primary:hover {
  background: var(--color-accent-strong);
  color: var(--color-on-accent);
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: center;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.estado {
  display: inline-block;
  padding: 0.125rem var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  box-shadow: inset 0 0 0 1px var(--color-accent-mid);
  color: var(--color-accent-strong);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.estado[data-tipo="exito"] {
  background: var(--color-accent);
  box-shadow: none;
  color: var(--color-on-accent);
}

.estado[data-tipo="neutro"] {
  box-shadow: inset 0 0 0 1px var(--color-neutral);
  color: var(--color-neutral-strong);
}

.evidencia {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.ad-compacto {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  font-size: var(--text-sm);
}

.ad-compacto div {
  display: grid;
  grid-template-columns: 3.75rem minmax(0, 1fr);
  gap: var(--space-2);
}

.ad-compacto dt {
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
}

.ad-compacto div + div dt {
  color: var(--color-accent-strong);
}

.ad-compacto dd {
  margin: 0;
}

.footer {
  margin: var(--space-8) 0 0;
  padding-top: var(--space-6);
  border-top: var(--border-thin) solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ---------- Card sheet ---------- */

.back {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.sheet {
  max-width: 52rem;
  border: var(--border-thin) solid var(--color-border);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.sheet-head {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-8) var(--space-6);
  background: var(--color-surface-inverse);
}

.sheet-head .kicker {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-accent-inverse);
}

.sheet-head .meta {
  color: var(--color-text-inverse-muted);
}

.sheet-head .estado {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--color-accent-inverse);
  color: var(--color-accent-inverse);
}

.sheet-head .estado[data-tipo="exito"] {
  background: var(--color-accent-inverse);
  box-shadow: none;
  color: var(--color-surface-inverse);
}

.sheet-head .estado[data-tipo="neutro"] {
  box-shadow: inset 0 0 0 1px var(--color-text-inverse-muted);
  color: var(--color-text-inverse-muted);
}

.evidencia-head {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-inverse-muted);
}

.sheet-title {
  font-size: var(--text-display-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  margin: 0;
}

.sheet-body {
  padding: var(--space-4) var(--space-8) var(--space-8);
}

.block {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5) 0;
  border-bottom: var(--border-thin) solid var(--color-border);
}

@media (min-width: 40rem) {
  .block {
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: var(--space-6);
  }
}

.block h2 {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}

.block p {
  margin: 0;
}

@media (min-width: 40rem) {
  .block-ancho {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }
}

.flujo {
  min-width: 0;
}

.solo-angosta {
  display: none;
}

@media (max-width: 40rem) {
  .solo-ancha {
    display: none;
  }

  .solo-angosta {
    display: block;
  }
}

.antes-despues {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.75rem minmax(0, 1fr);
  gap: var(--space-3);
}

.ad-col {
  padding: var(--space-3) var(--space-4);
  border-left: var(--border-thick) solid var(--color-border-strong);
  background: var(--color-surface);
}

.ad-con {
  border-left-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.ad-label {
  margin: 0 0 var(--space-1) !important;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.ad-con .ad-label {
  color: var(--color-accent-strong);
}

.ad-flecha {
  align-self: center;
  width: 1.75rem;
  height: 1.75rem;
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2;
}

@media (max-width: 40rem) {
  .antes-despues {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }

  .ad-flecha {
    margin-left: var(--space-4);
    transform: rotate(90deg);
  }
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.chips li {
  padding: var(--space-1) var(--space-3);
  border-left: var(--border-thick) solid var(--color-accent);
  background: var(--color-surface);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.leccion {
  border-bottom: 0;
}

.leccion ol,
.pasos ol {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pasos ol {
  counter-reset: paso;
}

.pasos li {
  position: relative;
  padding-left: 2.25rem;
  counter-increment: paso;
}

.pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  background: var(--color-chart-structure);
  color: var(--color-on-accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.card-contexto {
  margin: 0;
  font-size: var(--text-sm);
}

.card-grafico {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent-strong);
}

.criterios {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.criterios thead th {
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-thick) solid var(--color-chart-structure);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  color: var(--color-text-muted);
}

.criterios tbody th,
.criterios td {
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-thin) solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.criterios tbody th {
  width: 28%;
  font-weight: var(--weight-medium);
}

.crit-pendiente {
  color: var(--color-text-subtle);
  font-style: italic;
}

.crit-medido {
  border-left: var(--border-accent) solid var(--color-accent);
  background: var(--color-accent-soft);
  font-weight: var(--weight-medium);
}

.crit-sello {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-xs);
  font-style: normal;
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent-strong);
}

.crit-etiqueta {
  display: none;
}

@media (max-width: 40rem) {
  .criterios thead {
    display: none;
  }

  .criterios,
  .criterios tbody,
  .criterios tr,
  .criterios tbody th,
  .criterios td {
    display: block;
    width: auto;
  }

  .criterios tr {
    padding: var(--space-3) 0;
    border-bottom: var(--border-thin) solid var(--color-border);
  }

  .criterios tbody th,
  .criterios td {
    padding: var(--space-1) 0;
    border-bottom: 0;
  }

  .crit-medido {
    padding: var(--space-2) var(--space-3) !important;
  }

  .crit-etiqueta {
    display: block;
    font-size: var(--text-xs);
    font-style: normal;
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    color: var(--color-text-muted);
  }
}

.leccion li {
  padding: var(--space-4) var(--space-5);
  border-left: var(--border-accent) solid var(--color-accent);
  background: var(--color-accent-soft);
  font-family: var(--font-display);
  font-size: var(--text-base);
  line-height: 1.45;
  color: var(--color-text-heading);
}

.referencia {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-4);
  border-top: var(--border-thin) solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.contacto {
  margin: var(--space-6) 0 0;
  padding: var(--space-4);
  border-left: var(--border-accent) solid var(--color-accent);
  background: var(--color-surface);
  font-size: var(--text-sm);
}

.contacto p {
  margin: 0;
}

.brand {
  margin: var(--space-6) 0 0;
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

@media (max-width: 40rem) {
  .sheet-head {
    padding: var(--space-6) var(--space-4) var(--space-5);
  }

  .sheet-body {
    padding: var(--space-2) var(--space-4) var(--space-6);
  }
}

@page {
  size: A4;
  margin: 12mm 14mm;
}

@media print {
  .site-header,
  .site-footer,
  .no-print {
    display: none;
  }

  .content {
    max-width: none;
    padding: 0;
  }

  .sheet {
    max-width: none;
    border: 0;
  }

  .solo-angosta {
    display: none !important;
  }

  .solo-ancha {
    display: block !important;
  }

  .antes-despues {
    grid-template-columns: minmax(0, 1fr) 1.75rem minmax(0, 1fr);
  }

  .ad-flecha {
    transform: none;
    margin: 0;
  }
}

/* ---------- Charts (src/ui/svg/svg.module.css, prefixed) ---------- */
/* Shared styles for the blueprint SVG charts. Colors come from semantic tokens:
   petróleo for structure, blue as the only accent, greys for the rest. Every
   colored mark has a text label, so color is never the only signal. */

.svg-svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--font-sans);
  overflow: visible;
}

.svg-badge {
  display: inline-block;
  height: 2em;
  width: auto;
  vertical-align: middle;
  font-family: var(--font-sans);
}

.svg-qr {
  display: block;
  width: 100%;
  height: auto;
}

/* QR stays black on white for scanners, whatever the theme. */
.svg-qrOscuro {
  fill: var(--color-qr-dark);
}

.svg-qrFondo {
  fill: var(--color-qr-light);
}

/* Text */
.svg-t {
  fill: var(--color-text);
}
.svg-tMuted {
  fill: var(--color-text-muted);
}
.svg-tSubtle {
  fill: var(--color-text-subtle);
}
.svg-tAcento {
  fill: var(--color-accent-strong);
}
.svg-tClaro {
  fill: var(--color-on-accent);
}
.svg-tInverso {
  fill: var(--color-text-inverse);
}
.svg-tInversoSuave {
  fill: var(--color-text-inverse-muted);
}
.svg-b {
  font-weight: 700;
}
.svg-m {
  font-weight: 600;
}

/* Lines */
.svg-linea {
  fill: none;
  stroke: var(--color-chart-line);
  stroke-width: 1.5;
}
.svg-lineaTenue {
  fill: none;
  stroke: var(--color-chart-grid);
  stroke-width: 1;
}
.svg-flecha {
  fill: var(--color-chart-line);
}

/* Nodes */
.svg-nodoRaiz {
  fill: var(--color-chart-structure);
  stroke: var(--color-chart-structure);
  stroke-width: 1;
}
.svg-nodoAcento {
  fill: var(--color-accent-soft);
  stroke: var(--color-chart-accent);
  stroke-width: 1.5;
}
.svg-nodoNeutro {
  fill: var(--color-bg);
  stroke: var(--color-chart-grid);
  stroke-width: 1;
}
.svg-nodoElegido {
  fill: var(--color-accent-soft);
  stroke: var(--color-chart-accent);
  stroke-width: 2;
}
.svg-nodoApagado {
  fill: var(--color-chart-off);
  stroke: var(--color-chart-off-border);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}
.svg-nodoPrincipal {
  fill: var(--color-chart-accent);
  stroke: var(--color-chart-accent);
  stroke-width: 1;
}
.svg-capa {
  fill: var(--color-chart-layer);
  stroke: var(--color-chart-grid);
  stroke-width: 1;
}
.svg-capaGobierno {
  fill: var(--color-chart-layer-strong);
  stroke: var(--color-chart-grid);
  stroke-width: 1;
}
.svg-acento {
  fill: var(--color-chart-accent);
}
.svg-estructura {
  fill: var(--color-chart-structure);
}
.svg-marcaBlanca {
  fill: none;
  stroke: var(--color-on-accent);
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.svg-sistema {
  fill: var(--color-bg);
  stroke: var(--color-chart-structure);
  stroke-width: 1;
}

/* Traffic light (always with a text value) */
.svg-pista {
  fill: var(--color-chart-track);
}
.svg-pistaDesconocida {
  fill: var(--color-neutral-soft);
  stroke: var(--color-neutral);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}
.svg-ok {
  fill: var(--color-success);
}
.svg-warn {
  fill: var(--color-warning);
}
.svg-risk {
  fill: var(--color-danger);
}
.svg-unknown {
  fill: var(--color-neutral);
}
.svg-okSuave {
  fill: var(--color-tier-bajo-soft);
  stroke: var(--color-tier-bajo);
  stroke-width: 1.5;
}
.svg-warnSuave {
  fill: var(--color-tier-medio-soft);
  stroke: var(--color-tier-medio);
  stroke-width: 1.5;
}
.svg-riskSuave {
  fill: var(--color-tier-alto-soft);
  stroke: var(--color-tier-alto);
  stroke-width: 1.5;
}
.svg-apagado {
  fill: var(--color-chart-grid);
}

/* Demand intensity */
.svg-exigBasico {
  fill: var(--color-exig-basico);
}
.svg-exigReforzado {
  fill: var(--color-exig-reforzado);
}
.svg-exigCritico {
  fill: var(--color-exig-critico);
}
.svg-celdaNeutra {
  fill: var(--color-chart-layer);
}
.svg-separador {
  fill: none;
  stroke: var(--color-bg);
  stroke-width: 2;
}

/* 2x2 */
.svg-cuadrante {
  fill: var(--color-chart-layer);
  stroke: var(--color-chart-grid);
  stroke-width: 1;
}
.svg-cuadranteDestacado {
  fill: var(--color-accent-soft);
  stroke: var(--color-chart-accent);
  stroke-width: 1;
}
.svg-punto {
  fill: var(--color-chart-accent);
  stroke: var(--color-bg);
  stroke-width: 2;
}

/* Fichas (M3): topology, control layers, independent verification, trace timeline */
.svg-muro {
  fill: var(--color-chart-layer-strong);
  stroke: var(--color-chart-structure);
  stroke-width: 1;
}
.svg-muroRaya {
  fill: none;
  stroke: var(--color-chart-structure);
  stroke-width: 1;
  opacity: 0.45;
}
.svg-lineaAcento {
  fill: none;
  stroke: var(--color-chart-accent);
  stroke-width: 2;
}
.svg-flechaAcento {
  fill: var(--color-chart-accent);
}
.svg-lineaPunteada {
  fill: none;
  stroke: var(--color-chart-line);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}
.svg-marcaRoja {
  fill: none;
  stroke: var(--color-danger-strong);
  stroke-width: 2;
  stroke-linecap: square;
}
.svg-marcaVerde {
  fill: none;
  stroke: var(--color-success-strong);
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.svg-tRiesgo {
  fill: var(--color-danger-strong);
}
.svg-tExito {
  fill: var(--color-success-strong);
}