/*
  Sistema de diseño — stack.cuantia.com (PLAN_WEB.md, seccion 0.1).
  Tipografias autoalojadas (Fraunces, IBM Plex Sans, IBM Plex Mono) — nunca CDN.
  Un solo lugar de verdad para tokens de color y el elemento de firma (rango).
*/

@font-face {
  font-family: "Fraunces";
  src: url("./fonts/fraunces/Fraunces72pt-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("./fonts/fraunces/Fraunces72pt-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("./fonts/fraunces/Fraunces72pt-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("./fonts/fraunces/Fraunces72pt-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("./fonts/ibm-plex-sans/IBMPlexSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("./fonts/ibm-plex-sans/IBMPlexSans-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("./fonts/ibm-plex-sans/IBMPlexSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("./fonts/ibm-plex-sans/IBMPlexSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("./fonts/ibm-plex-sans/IBMPlexSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("./fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("./fonts/ibm-plex-mono/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("./fonts/ibm-plex-mono/IBMPlexMono-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Tokens de marca (definitivos, validados Stack + comercial, 2026-07-29) */
  --ink: #0F1B2D;
  --ink-soft: #5C6B7A;
  --paper: #F7F5F0;
  --paper-dim: #EDE9DF;
  --range-low: #4A7C6F;
  --range-high: #C99A3D;

  /* Semaforos de estado — reservados, NUNCA colores de marca ni decorativos */
  --status-good: #1E7A4C;
  --status-warning: #B8862E;
  --status-critical: #B23A3A;

  --border: rgba(15, 27, 45, 0.12);
  --gridline: rgba(15, 27, 45, 0.08);

  --font-titular: "Fraunces", Georgia, serif;
  --font-texto: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-cifra: "IBM Plex Mono", "Courier New", monospace;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-texto);
}

h1, h2, h3, h4, .titular {
  font-family: var(--font-titular);
  font-weight: 600;
  color: var(--ink);
}

.cifra, .rango-firma, table.tabla-cifras td {
  font-family: var(--font-cifra);
  font-variant-numeric: tabular-nums;
}

.texto-suave {
  color: var(--ink-soft);
}

.superficie-dim {
  background: var(--paper-dim);
}

/*
  Elemento de firma: todo rango de valor se representa como DOS CIFRAS unidas
  por una barra con degradado de --range-low a --range-high. Un solo
  componente, reutilizado en la web y en el simulador (misma regla visual
  que "valorizacion siempre como rango, nunca cifra unica").
*/
.rango-firma {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 28px;
  font-weight: 500;
  color: var(--ink);
}
.rango-firma .rango-firma__valor {
  white-space: nowrap;
}
.rango-firma .rango-firma__barra {
  flex: 1 1 auto;
  min-width: 48px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--range-low), var(--range-high));
}
.rango-firma--compacta {
  font-size: 16px;
  gap: 8px;
}
.rango-firma--compacta .rango-firma__barra {
  min-width: 24px;
  height: 3px;
}