/* ============================================================
   BIOREM · COLOR TOKENS
   Source of truth: Manual de Marca v1.0 (sección 03 + 09).
   Brand-canonical Spanish names are preserved verbatim so any
   piece can "copy the block" as the manual instructs; English
   semantic aliases are layered on top for clarity in code.
   ============================================================ */
:root {
  /* ---- PRIMARIOS ---- */
  --azul-corp: #003870;   /* corporativo / Cero Waste */
  --teal: #0094A1;        /* Biorem principal */
  --teal-claro: #24A9BC;
  --verde-hoja: #93B733;

  /* ---- ACENTOS · timeline de pasos (funcionales, no decorativos) ---- */
  --acc-rojo: #F05448;     /* paso 01 */
  --acc-amarillo: #FCC000; /* paso 02 */
  --acc-verde: #84C048;    /* paso 03 */
  --acc-celeste: #78D8FC;  /* paso 04 */
  --acc-azul: #00A8F0;     /* paso 05 */
  /* darker text-safe twins of the lighter accents */
  --acc-amarillo-txt: #C89A00;
  --acc-celeste-txt: #3AA9D6;

  /* ---- RUTAS · streams de residuo (asignación FIJA, nunca cambiar) ---- */
  --ruta-organicos: #00A846;
  --ruta-reciclables: #008CD2;
  --ruta-norecic: #2B2B2B;
  --ruta-efluente: #D2780A;

  /* ---- NEUTROS ---- */
  --tinta: #16242B;       /* texto principal */
  --gris: #5C6B72;        /* texto secundario */
  --gris-claro: #F2F5F6;  /* fondos */
  --linea: #E2E8EA;       /* bordes / divisores */
  --lavanda: #E9EBF8;     /* tarjetas de proyecto */
  --blanco: #FFFFFF;

  /* ---- SEMANTIC ALIASES ---- */
  --color-brand: var(--teal);
  --color-brand-strong: var(--azul-corp);
  --color-accent-eco: var(--verde-hoja);

  --text-strong: var(--tinta);
  --text-body: var(--tinta);
  --text-muted: var(--gris);
  --text-on-dark: #FFFFFF;
  --text-on-dark-muted: #CFE6EA;
  --text-link: var(--teal);

  --surface-page: var(--gris-claro);
  --surface-card: var(--blanco);
  --surface-card-soft: var(--lavanda);
  --surface-inverse: var(--azul-corp);

  --border-default: var(--linea);
  --border-strong: var(--azul-corp);

  --state-positive: #1C8A3C;  /* "SÍ" / ✓ */
  --state-negative: var(--acc-rojo);
  --state-warning: var(--acc-amarillo);
}
/* ============================================================
   BIOREM · TYPOGRAPHY TOKENS
   Family: Montserrat. Titles ExtraBold w/ negative tracking;
   data & labels UPPERCASE w/ open tracking.
   ============================================================ */
:root {
  --font-sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', ui-monospace, 'Consolas', monospace;
  /* alias kept for back-compat with the manual's --font token */
  --font: var(--font-sans);

  /* ---- WEIGHTS ---- */
  --fw-regular: 400;    /* @kind font */
  --fw-medium: 500;     /* @kind font */
  --fw-semibold: 600;   /* @kind font */
  --fw-bold: 700;       /* @kind font */
  --fw-extrabold: 800;  /* @kind font */

  /* ---- TYPE SCALE (rem) ---- */
  --fs-display: 2.6rem;   /* H1 · 800 · -3% track */
  --fs-h1: 2.05rem;       /* section title · 800 · -2% */
  --fs-h2: 1.8rem;        /* 700 */
  --fs-h3: 1.25rem;       /* 600 */
  --fs-lead: 1.02rem;     /* intro paragraph */
  --fs-body: 1rem;        /* 400 · 1.6 lh */
  --fs-small: 0.88rem;
  --fs-data: 0.82rem;     /* labels · 600 · +14% track · UPPER */
  --fs-eyebrow: 0.72rem;  /* 700 · +18% track · UPPER */

  /* ---- LINE HEIGHTS ---- */
  --lh-tight: 1.05;     /* @kind font */
  --lh-heading: 1.15;   /* @kind font */
  --lh-body: 1.6;       /* @kind font */

  /* ---- TRACKING ---- */
  --tracking-display: -0.03em;
  --tracking-title: -0.02em;
  --tracking-data: 0.14em;
  --tracking-eyebrow: 0.18em;
}
/* ============================================================
   BIOREM · SPACING, RADII, SHADOWS, BORDERS
   The system is calm and rectangular: generous section padding,
   a single soft 14px radius, hairline borders, restrained shadow.
   ============================================================ */
:root {
  /* ---- SPACING SCALE (4px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- RADII ---- */
  --r: 14px;          /* canonical brand radius (cards, stages) */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---- BORDERS ---- */
  --border-width: 1px;
  --border-hairline: 1px solid var(--linea);

  /* ---- SHADOWS (restrained, neutral) ---- */
  --shadow-sm: 0 1px 2px rgba(22, 36, 43, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 10px 30px rgba(0, 56, 112, 0.12);

  /* ---- LAYOUT ---- */
  --maxw: 980px;
  --maxw-wide: 1200px;

  /* ---- MOTION ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);  /* @kind other */
  --dur-fast: 120ms;   /* @kind other */
  --dur-base: 200ms;   /* @kind other */
}
/* ============================================================
   BIOREM DESIGN SYSTEM — global stylesheet entry point.
   Consumers link THIS file only. It is a list of @imports;
   never add rules here. Everything reachable from these
   imports ships to consumers (tokens + @font-face).
   ============================================================ */
@import url('tokens/fonts.css');
@import url('tokens/colors.css');
@import url('tokens/typography.css');
@import url('tokens/spacing.css');
/* Biorem EDT · hoja de utilidades sobre los tokens del design system Biorem */
:root{
  --navy:var(--azul-corp);
  --navy2:#012a52;
  --navy3:#013b5e;
  --teal-b:var(--teal);
  --green:var(--verde-hoja);
  --amber:var(--acc-amarillo);
  --amber-txt:var(--acc-amarillo-txt);
  --red:var(--acc-rojo);
  --ink:var(--tinta);
  --mute:var(--gris);
  --line:var(--linea);
  --bg:var(--gris-claro);
  --panel:var(--blanco);
  --r:14px;
  --r-s:10px;
  /* tintas derivadas — mismas que usa Badge del design system */
  --tint-brand:#E1F3F5;
  --tint-eco:#EEF4DC;
  --tint-eco-txt:#5C7A12;
  --tint-positive:#E2F3E8;
  --tint-negative:#FDE7E5;
  --tint-warn:#FFF4D6;
  --tint-corp:#E3ECF5;
  --gris-medio:#9AAAB0;
  --linea-fuerte:#C6CFD2;
  --acc-rojo-txt:#B33226;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font-sans);color:var(--ink);background:var(--bg);font-size:15px;-webkit-font-smoothing:antialiased}
::selection{background:color-mix(in srgb,var(--teal) 15%,transparent)}
button{font:inherit;background:none;border:none;color:inherit}
select,input,textarea{font:inherit}
a{color:var(--teal);text-decoration:none}
a:hover{color:var(--teal-claro)}

/* ---------- tipografía / marca ---------- */
.disp{font-family:var(--font-sans);font-weight:800;letter-spacing:-.02em;line-height:1.15}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:0}
.num{font-family:var(--font-sans);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1}
/* = Eyebrow del design system */
.eyebrow{font-family:var(--font-sans);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);font-size:var(--fs-eyebrow);font-weight:var(--fw-bold);color:var(--teal)}
/* = etiqueta de dato del design system */
.lbl{font-family:var(--font-sans);text-transform:uppercase;letter-spacing:var(--tracking-data);font-size:var(--fs-data);font-weight:var(--fw-semibold);color:var(--mute)}
/* = Card del design system */
.panel{background:var(--surface-card);border:1px solid var(--linea);border-radius:var(--r)}
.hair{border-color:var(--line)}
.t-navy{color:var(--navy)}.t-teal{color:var(--teal)}.t-green{color:var(--state-positive)}
.t-amber{color:var(--amber-txt)}.t-red{color:var(--red)}.t-mute{color:var(--mute)}
.bg-navy{background:var(--navy)}.bg-navy2{background:var(--navy2)}.bg-teal{background:var(--teal)}
.bg-green{background:var(--green)}.bg-amber{background:var(--amber)}.bg-red{background:var(--red)}
.bg-line{background:var(--line)}.bg-white{background:var(--blanco)}
/* = Button (size sm) del design system: primary / outline / ghost */
.btn{font-family:var(--font-sans);font-weight:var(--fw-semibold);letter-spacing:.01em;font-size:.8rem;padding:8px 14px;
 border-radius:var(--radius-pill);border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;
 justify-content:center;gap:8px;white-space:nowrap;transition:filter var(--dur-base) var(--ease-standard),opacity var(--dur-base)}
.btn-p{background:var(--azul-corp);color:var(--blanco);border-color:var(--azul-corp)}
.btn-p:hover,.btn-s:hover,.btn-g:hover{filter:brightness(.92)}
.btn-p:disabled{opacity:.45;cursor:not-allowed;filter:none}
.btn-s{background:transparent;color:var(--azul-corp);border-color:var(--linea)}
.btn-g{background:transparent;color:var(--teal);padding:6px 10px}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--teal);outline-offset:1px}
.inp{width:100%;border:1px solid var(--line);border-radius:var(--r-s);padding:7px 10px;font-size:14px;background:var(--blanco);color:var(--ink)}
.inp:focus{border-color:var(--teal);outline:none}
.inp:disabled{background:var(--gris-claro);color:var(--mute)}
/* = Badge del design system */
.chip{font-family:var(--font-sans);font-weight:var(--fw-semibold);letter-spacing:.04em;text-transform:uppercase;
 font-size:.72rem;padding:4px 10px;border-radius:var(--radius-pill);white-space:nowrap;display:inline-flex;gap:6px;align-items:center}
.row-h:hover{background:var(--gris-claro)}
.navi{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--radius-pill);cursor:pointer;width:100%;
 font-family:var(--font-sans);font-weight:var(--fw-semibold);font-size:14px;color:var(--text-on-dark-muted);
 border-left:2px solid transparent;text-align:left}
.navi:hover{color:var(--blanco);background:rgba(255,255,255,.07)}
.navi.on{color:var(--blanco);background:rgba(255,255,255,.11);border-left-color:var(--verde-hoja)}
.sh{box-shadow:0 10px 40px rgba(0,56,112,.18)}
.t-teal{color:var(--teal)}
.stripe{background-image:repeating-linear-gradient(45deg,var(--linea-fuerte) 0 4px,var(--linea) 4px 8px)}
.gline{position:absolute;top:0;bottom:0;width:1px;background:var(--line)}
.today{position:absolute;top:0;bottom:0;width:1px;background:var(--red);z-index:5}
.sidebar{background:linear-gradient(170deg,var(--azul-corp),#012a52 60%,#013b5e)}
.greenbar{height:9px;background:var(--verde-hoja)}

/* ---------- utilidades ---------- */
.flex{display:flex}.grid{display:grid}.hidden{display:none}.block{display:block}
.flex-1{flex:1 1 0%}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.shrink-0{flex-shrink:0}
.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.items-baseline{align-items:baseline}
.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}
.self-center{align-self:center}.place-center{display:grid;place-items:center}
.gap-h{gap:2px}.gap-px{gap:1px}.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-6{gap:24px}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.min-w-0{min-width:0}.min-h-screen{min-height:100vh}.w-full{width:100%}.w-fit{width:fit-content}.h-full{height:100%}
.p-2{padding:10px}.p-3{padding:14px}.p-4{padding:18px}.p-6{padding:24px}.p-8{padding:32px}
.px-2{padding:0 8px}.px-3{padding:0 12px}.px-4{padding:0 16px}
.py-1{padding:4px 0}.py-15{padding:6px 0}.py-2{padding:8px 0}.py-3{padding:12px 0}.py-4{padding:16px 0}
.pb-24{padding-bottom:96px}
.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}
.ml-auto{margin-left:auto}.mr-auto{margin-right:auto}.mt-auto{margin-top:auto}
.text-xs{font-size:11.5px}.text-sm{font-size:13.5px}.text-right{text-align:right}.text-center{text-align:center}
.text-white{color:var(--blanco)}.medium{font-weight:600}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.border{border:1px solid var(--line)}.border-b{border-bottom:1px solid var(--line)}
.border-t{border-top:1px solid var(--line)}.border-r{border-right:1px solid var(--line)}
.rnd{border-radius:var(--r-s)}
.ovh{overflow:hidden}.ova{overflow:auto}.ovy{overflow-y:auto}
.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}
.inset-0{top:0;right:0;bottom:0;left:0}.b0{bottom:0}.l0{left:0}.r0{right:0}.t0{top:0}
.z10{z-index:10}.z20{z-index:20}.z21{z-index:21}.z40{z-index:40}.z50{z-index:50}
.pointer{cursor:pointer}
.stack{display:flex;flex-direction:column;gap:6px}

@media (min-width:640px){
  .sm-block{display:block}.sm-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm-p-6{padding:24px}.drawer{width:440px}
}
@media (min-width:768px){
  .md-hidden{display:none}.md-flex{display:flex}.md-block{display:block}
}
@media (min-width:1024px){
  .lg-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lg-cols-p{grid-template-columns:2fr 1fr}
}
@media (max-width:767px){ .only-md{display:none} }
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}