/* ============================================================================
   JANA · DESIGN SYSTEM
   Fuente de verdad visual para el sitio y la plataforma.

   La paleta oficial son cuatro tonos: #827B31 #827131 #788231 #FFF58A.
   Tres de ellos son el MISMO color (35% L, 45% S, 20 grados de tono entre
   ellos: contraste 1.04-1.16:1 entre si, indistinguibles como estado de UI) y
   el cuarto es invisible sobre blanco (1.12:1) pero brillante sobre oscuro
   (17.61:1). Por eso este archivo no "usa los 4 hex": resuelve esos MISMOS
   tonos en una rampa de luminosidad, que es lo unico que permite construir
   hovers, bordes, jerarquia de texto y estados accesibles.

   Regla de superficie 90/9/1 -> 90% neutro calido, 9% oliva, 1% mantequilla.
   La escasez del amarillo es lo que le da poder.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. PRIMITIVAS — valores crudos. No usar directamente en componentes.
   --------------------------------------------------------------------------- */
:root{
  /* Oliva — hue 55, el eje de la marca. El 500 es el hex oficial #827B31. */
  --oliva-50:#F8F7ED;  --oliva-100:#EEECD3; --oliva-200:#DEDAAB; --oliva-300:#CAC377;
  --oliva-400:#B1A843; --oliva-500:#827B31; --oliva-600:#696326; --oliva-700:#534F1D;
  --oliva-800:#3C3915; --oliva-900:#29270F; --oliva-950:#19180A;

  /* Bronce (#827131) y Verde (#788231) — los otros dos oficiales. No compiten
     con el oliva: se reservan a codificacion de datos, donde 20 grados de tono
     SI se distinguen porque van uno al lado del otro en la misma grafica. */
  --bronce-500:#827131; --bronce-400:#B19943; --bronce-700:#53481D;
  --verde-500:#788231;  --verde-400:#A4B143;  --verde-700:#4C531D;

  /* Mantequilla — hue 55 saturado. El 300 es el hex oficial #FFF58A.
     SOLO sobre fondo oscuro. Sobre papel es invisible. */
  --mant-100:#FFFCD6; --mant-200:#FFF9B3; --mant-300:#FFF58A; --mant-400:#F2E65F; --mant-500:#DDCF3C;

  /* Neutro calido — hue 55 desaturado al 8-22%. Los grises NO son grises:
     pertenecen a la marca. Esto es lo que hace que 4 tonos se sientan totales. */
  --n-0:#FFFFFF;   --n-25:#FBFBF9;  --n-50:#F7F7F3;  --n-100:#EEEDE7; --n-200:#DBDAD1;
  --n-300:#BFBEB0; --n-400:#9A9989; --n-500:#797867; --n-600:#5F5D4F; --n-700:#464539;
  --n-800:#2D2D24; --n-900:#1D1C16; --n-950:#11110D;

  /* Estado — obligatoriamente fuera del hue de marca. No se puede senalizar
     "error" con olivo. Desaturados para que convivan sin gritar. */
  --exito-300:#8ACDB6; --exito-400:#61B89E; --exito-600:#2F745F; --exito-800:#1B4437;
  --alerta-300:#E0B37D; --alerta-400:#D19147; --alerta-600:#8A581E; --alerta-800:#523511;
  --riesgo-300:#DE9583; --riesgo-400:#CB664D; --riesgo-600:#913C27; --riesgo-800:#572417;
  --dato-300:#9DB4CE;  --dato-400:#7292B6;  --dato-600:#405F82;  --dato-800:#26394E;
}

/* ---------------------------------------------------------------------------
   2. SEMANTICOS — lo que consumen los componentes.
      Tema claro por defecto. Las zonas oscuras los redefinen (seccion 3),
      asi el MISMO componente funciona en papel y en oscuro sin tocarlo.
   --------------------------------------------------------------------------- */
:root{
  --fondo:var(--n-25);            /* lienzo de pagina */
  --fondo-2:var(--n-50);          /* banda alterna */
  --superficie:var(--n-0);        /* card, panel */
  --superficie-2:var(--n-50);     /* card anidada, thead */
  --superficie-alta:var(--n-0);   /* modal, popover, dropdown */
  --superficie-inv:var(--n-900);  /* pill/chip invertido dentro de zona clara */

  --texto:var(--n-900);           /* 16.3:1 sobre papel */
  --texto-2:var(--n-700);         /*  9.2:1 — parrafo secundario */
  --texto-3:var(--n-600);         /*  6.3:1 — captions, metadatos */
  --texto-4:var(--n-400);         /*  2.8:1 — SOLO decorativo/deshabilitado */
  --texto-inv:var(--n-25);

  --borde:rgba(29,28,22,.10);     /* hairline por defecto */
  --borde-2:rgba(29,28,22,.18);   /* borde de control */
  --borde-fuerte:var(--n-900);    /* regla editorial, la que estructura */

  --marca:var(--oliva-500);       /* el hex oficial, para superficie y grafica */
  --marca-texto:var(--oliva-700); /* 8.0:1 — el oliva legible como texto/enlace */
  --marca-fondo:var(--oliva-50);  /* wash de seccion */
  --marca-borde:rgba(130,123,49,.28);
  --marca-solida:var(--oliva-700);/* relleno de boton: 8.4:1 con blanco */
  --sobre-marca:var(--n-0);

  /* El acento solo se enciende en oscuro. En claro degrada a oliva solido
     para que un componente colocado por error en papel siga siendo legible. */
  --acento:var(--oliva-700);
  --sobre-acento:var(--n-0);
  --acento-tenue:var(--oliva-100);

  --foco:var(--oliva-600);        /* anillo de foco visible */
  --foco-halo:rgba(130,123,49,.22);

  --exito:var(--exito-600); --exito-fondo:rgba(47,116,95,.10);
  --alerta:var(--alerta-600); --alerta-fondo:rgba(138,88,30,.10);
  --riesgo:var(--riesgo-600); --riesgo-fondo:rgba(145,60,39,.10);
  --dato:var(--dato-600);   --dato-fondo:rgba(64,95,130,.10);

  /* Serie de datos — el orden importa: primero los tres oficiales (que juntos
     y contiguos SI se leen distintos), luego los instrumentales. */
  --serie-1:var(--oliva-500); --serie-2:var(--verde-500); --serie-3:var(--bronce-500);
  --serie-4:var(--dato-600);  --serie-5:var(--exito-600); --serie-6:var(--n-500);
  --serie-7:var(--oliva-300); --serie-8:var(--riesgo-600);
}

/* ---------------------------------------------------------------------------
   3. ZONA OSCURA — .zona-oscura sobre cualquier contenedor, o data-tema="oscuro"
      en <html> para la plataforma completa. Se redefinen los semanticos, no los
      componentes: ese es todo el truco del sistema.
   --------------------------------------------------------------------------- */
.zona-oscura, [data-tema="oscuro"]{
  --fondo:var(--n-900);
  --fondo-2:var(--n-950);
  --superficie:#23231B;
  --superficie-2:#2D2D24;
  --superficie-alta:#2D2D24;
  --superficie-inv:var(--n-25);

  --texto:var(--n-50);            /* 15.9:1 sobre canvas */
  --texto-2:var(--n-200);         /* 12.2:1 */
  --texto-3:var(--n-400);         /*  5.9:1 */
  --texto-4:var(--n-500);
  --texto-inv:var(--n-900);

  --borde:rgba(255,255,255,.10);
  --borde-2:rgba(255,255,255,.18);
  --borde-fuerte:rgba(255,255,255,.30);

  --marca:var(--oliva-400);
  --marca-texto:var(--oliva-300);
  --marca-fondo:rgba(130,123,49,.16);
  --marca-borde:rgba(202,195,119,.30);
  --marca-solida:var(--oliva-400);
  --sobre-marca:var(--n-950);

  /* Aqui vive el #FFF58A: 15.2:1 sobre el canvas. Es su unico habitat. */
  --acento:var(--mant-300);
  --sobre-acento:var(--n-950);
  --acento-tenue:rgba(255,245,138,.14);

  --foco:var(--mant-300);
  --foco-halo:rgba(255,245,138,.28);

  --exito:var(--exito-400); --exito-fondo:rgba(97,184,158,.14);
  --alerta:var(--alerta-400); --alerta-fondo:rgba(209,145,71,.14);
  --riesgo:var(--riesgo-400); --riesgo-fondo:rgba(203,102,77,.14);
  --dato:var(--dato-400);   --dato-fondo:rgba(114,146,182,.14);

  --serie-1:var(--oliva-400); --serie-2:var(--verde-400); --serie-3:var(--bronce-400);
  --serie-4:var(--dato-400);  --serie-5:var(--exito-400); --serie-6:var(--n-400);
  --serie-7:var(--mant-300);  --serie-8:var(--riesgo-400);

  --sombra-1:0 1px 2px rgba(0,0,0,.40);
  --sombra-2:0 4px 12px rgba(0,0,0,.44);
  --sombra-3:0 12px 32px rgba(0,0,0,.50);
  --sombra-4:0 24px 64px rgba(0,0,0,.58);
}
.zona-oscura{background:var(--fondo);color:var(--texto);}

/* ---------------------------------------------------------------------------
   4. ESCALAS — tipografia, espacio, radio, elevacion, movimiento.
   --------------------------------------------------------------------------- */
:root{
  --fuente-display:'Libre Franklin','Inter',system-ui,sans-serif;
  --fuente-ui:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Escala fluida. Los display en sentence case: el caracter editorial se
     conserva en las micro-etiquetas y la numeracion, no en gritar mayusculas. */
  --t-display:clamp(40px,6.2vw,76px);
  --t-h1:clamp(32px,4.4vw,54px);
  --t-h2:clamp(26px,3.1vw,38px);
  --t-h3:clamp(20px,2vw,25px);
  --t-h4:17px;
  --t-cuerpo-lg:17.5px;
  --t-cuerpo:15.5px;
  --t-sm:13.5px;
  --t-xs:12px;
  --t-micro:10.5px;   /* eyebrow / label — aqui SI van mayusculas + tracking */

  --peso-normal:400; --peso-medio:500; --peso-semi:600; --peso-bold:700; --peso-negro:800;
  --track-display:-.028em; --track-titulo:-.015em; --track-micro:.12em;
  --alto-apretado:1.08; --alto-titulo:1.18; --alto-cuerpo:1.62;

  /* Espacio base 4 */
  --e-1:4px;  --e-2:8px;  --e-3:12px; --e-4:16px; --e-5:20px; --e-6:24px;
  --e-8:32px; --e-10:40px; --e-12:48px; --e-16:64px; --e-20:80px; --e-24:96px;
  --e-seccion:clamp(64px,8vw,120px);

  /* Radio — el sistema entero se apoya en 12px. El 0px brutalista se va. */
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-full:999px;

  /* Elevacion — tenida de oliva, nunca negro puro: el negro puro sobre papel
     calido se ve sucio. */
  --sombra-1:0 1px 2px rgba(41,39,15,.06);
  --sombra-2:0 4px 12px rgba(41,39,15,.07), 0 1px 2px rgba(41,39,15,.05);
  --sombra-3:0 12px 32px rgba(41,39,15,.10), 0 2px 6px rgba(41,39,15,.05);
  --sombra-4:0 24px 64px rgba(41,39,15,.14), 0 4px 12px rgba(41,39,15,.06);

  /* Movimiento — una sola curva para todo el producto. */
  --curva:cubic-bezier(.2,0,0,1);
  --curva-salida:cubic-bezier(.4,0,1,1);
  --v-rapido:120ms; --v-medio:200ms; --v-lento:320ms; --v-entrada:560ms;

  --ancho-max:1240px;
  --ancho-texto:68ch;
}

@media (prefers-reduced-motion:reduce){
  :root{--v-rapido:1ms;--v-medio:1ms;--v-lento:1ms;--v-entrada:1ms;}
}

/* ---------------------------------------------------------------------------
   5. ALIAS DE COMPATIBILIDAD
      El CSS existente (index, project-controls, dashboards) esta escrito contra
      --ink/--paper/--hair. En vez de reescribir 4.500 lineas a mano, se
      reapuntan a los semanticos: el sitio entero cambia de identidad de forma
      coherente y despues se moderniza componente por componente.
   --------------------------------------------------------------------------- */
:root{
  --paper:var(--fondo);      --paper-2:var(--fondo-2);
  --ink:var(--texto);        --ink-2:var(--texto-2);   --ink-soft:var(--texto-3);
  --hair:var(--borde-2);     --hair-soft:var(--borde);
  --accent:var(--marca-solida);
  --maxw:var(--ancho-max);
  --l1:var(--texto);         /* Linea 01 Construccion */
  --l2:var(--oliva-600);     /* Linea 02 Viabilidad  */
  --l3:var(--bronce-700);    /* Linea 03 Procurement */
  --up:var(--exito);  --up-soft:var(--exito-fondo);
  --down:var(--riesgo); --down-soft:var(--riesgo-fondo);
  --dato-line:var(--marca-borde); --dato-soft:var(--dato-fondo);
  --mute:var(--texto-3); --mute-line:var(--borde-2);
}

/* ---------------------------------------------------------------------------
   6. BASE
   --------------------------------------------------------------------------- */
.ds *,.ds *::before,.ds *::after{box-sizing:border-box;}
body{
  background:var(--fondo);color:var(--texto);
  font-family:var(--fuente-ui);font-size:var(--t-cuerpo);line-height:var(--alto-cuerpo);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:"cv05" 1,"ss01" 1;
}
::selection{background:var(--oliva-200);color:var(--n-900);}
.zona-oscura ::selection{background:var(--mant-300);color:var(--n-950);}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--foco);outline-offset:2px;border-radius:var(--r-xs);
}

/* Numeros: siempre tabulares. Una tabla financiera donde los digitos bailan
   no se lee como un instrumento. */
.num,.kpi-valor,table td,table th,.tabular{font-variant-numeric:tabular-nums;}

/* ---------------------------------------------------------------------------
   7. TIPOGRAFIA
   --------------------------------------------------------------------------- */
.ds-display,.ds-h1,.ds-h2,.ds-h3{font-family:var(--fuente-display);color:var(--texto);text-wrap:balance;}
.ds-display{font-size:var(--t-display);font-weight:var(--peso-bold);line-height:var(--alto-apretado);letter-spacing:var(--track-display);}
.ds-h1{font-size:var(--t-h1);font-weight:var(--peso-bold);line-height:var(--alto-titulo);letter-spacing:var(--track-titulo);}
.ds-h2{font-size:var(--t-h2);font-weight:var(--peso-bold);line-height:var(--alto-titulo);letter-spacing:var(--track-titulo);}
.ds-h3{font-size:var(--t-h3);font-weight:var(--peso-semi);line-height:1.3;letter-spacing:-.008em;}
.ds-lede{font-size:var(--t-cuerpo-lg);color:var(--texto-2);max-width:var(--ancho-texto);text-wrap:pretty;}
.ds-sm{font-size:var(--t-sm);color:var(--texto-3);}

/* El unico lugar donde sobreviven las mayusculas: la senalizacion. */
.ds-eyebrow{
  display:inline-flex;align-items:center;gap:var(--e-3);
  font-size:var(--t-micro);font-weight:var(--peso-semi);
  letter-spacing:var(--track-micro);text-transform:uppercase;color:var(--texto-3);
}
.ds-eyebrow::before{content:'';width:24px;height:1px;background:var(--marca);flex:none;}
.ds-eyebrow.sin-linea::before{display:none;}
.ds-indice{  /* (01) — el indice numerado de CozyNest */
  font-family:var(--fuente-display);font-size:var(--t-micro);font-weight:var(--peso-bold);
  letter-spacing:var(--track-micro);color:var(--texto-4);font-variant-numeric:tabular-nums;
}

/* ---------------------------------------------------------------------------
   8. LAYOUT
   --------------------------------------------------------------------------- */
.ds-wrap{max-width:var(--ancho-max);margin-inline:auto;padding-inline:clamp(20px,5vw,40px);}
.ds-seccion{padding-block:var(--e-seccion);}
.ds-grid{display:grid;gap:var(--e-6);}
.ds-grid.c2{grid-template-columns:repeat(2,minmax(0,1fr));}
.ds-grid.c3{grid-template-columns:repeat(3,minmax(0,1fr));}
.ds-grid.c4{grid-template-columns:repeat(4,minmax(0,1fr));}
@media(max-width:900px){.ds-grid.c3,.ds-grid.c4{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:620px){.ds-grid.c2,.ds-grid.c3,.ds-grid.c4{grid-template-columns:minmax(0,1fr);}}

/* ---------------------------------------------------------------------------
   9. BOTONES
   --------------------------------------------------------------------------- */
.ds-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--e-2);
  font-family:var(--fuente-ui);font-size:var(--t-sm);font-weight:var(--peso-semi);
  line-height:1;letter-spacing:-.005em;text-transform:none;
  padding:13px 20px;border-radius:var(--r-full);border:1px solid transparent;
  background:var(--marca-solida);color:var(--sobre-marca);
  cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:background var(--v-rapido) var(--curva),border-color var(--v-rapido) var(--curva),
             color var(--v-rapido) var(--curva),transform var(--v-rapido) var(--curva),
             box-shadow var(--v-medio) var(--curva);
}
.ds-btn:hover{background:var(--oliva-800);transform:translateY(-1px);box-shadow:var(--sombra-2);}
.ds-btn:active{transform:translateY(0);box-shadow:none;}
.ds-btn[disabled],.ds-btn[aria-disabled="true"]{
  background:var(--n-200);color:var(--texto-4);cursor:not-allowed;transform:none;box-shadow:none;
}
.zona-oscura .ds-btn:hover{background:var(--oliva-300);}
.zona-oscura .ds-btn[disabled]{background:rgba(255,255,255,.08);}

/* Acento: el CTA que se lleva la atencion. En oscuro es el #FFF58A. */
.ds-btn.acento{background:var(--acento);color:var(--sobre-acento);}
.ds-btn.acento:hover{background:var(--oliva-800);}
.zona-oscura .ds-btn.acento:hover{background:var(--mant-200);}

.ds-btn.linea{background:transparent;color:var(--texto);border-color:var(--borde-2);}
.ds-btn.linea:hover{background:var(--marca-fondo);border-color:var(--marca-borde);color:var(--marca-texto);}
.zona-oscura .ds-btn.linea:hover{color:var(--texto);}

.ds-btn.fantasma{background:transparent;color:var(--texto-2);}
.ds-btn.fantasma:hover{background:var(--marca-fondo);color:var(--marca-texto);box-shadow:none;}

.ds-btn.sm{padding:9px 14px;font-size:var(--t-xs);}
.ds-btn.lg{padding:17px 28px;font-size:var(--t-cuerpo);}
.ds-btn.bloque{width:100%;}
.ds-btn .flecha{transition:transform var(--v-medio) var(--curva);}
.ds-btn:hover .flecha{transform:translateX(3px);}

/* Boton circular ↗ — el affordance de CozyNest/nest. */
.ds-btn-circ{
  display:inline-grid;place-items:center;width:44px;height:44px;flex:none;
  border-radius:var(--r-full);border:1px solid var(--borde-2);background:transparent;
  color:var(--texto);cursor:pointer;
  transition:background var(--v-rapido) var(--curva),color var(--v-rapido) var(--curva),
             transform var(--v-medio) var(--curva);
}
.ds-btn-circ:hover{background:var(--acento);color:var(--sobre-acento);border-color:transparent;transform:rotate(45deg);}

/* ---------------------------------------------------------------------------
   10. FORMULARIOS
   --------------------------------------------------------------------------- */
.ds-campo{display:flex;flex-direction:column;gap:var(--e-2);}
.ds-label{font-size:var(--t-sm);font-weight:var(--peso-medio);color:var(--texto-2);}
.ds-input,.ds-select,.ds-textarea{
  width:100%;font-family:var(--fuente-ui);font-size:var(--t-cuerpo);color:var(--texto);
  background:var(--superficie);border:1px solid var(--borde-2);border-radius:var(--r-md);
  padding:13px 15px;transition:border-color var(--v-rapido) var(--curva),box-shadow var(--v-rapido) var(--curva);
}
.zona-oscura .ds-input,.zona-oscura .ds-select,.zona-oscura .ds-textarea{background:rgba(255,255,255,.04);}
.ds-input::placeholder,.ds-textarea::placeholder{color:var(--texto-4);}
.ds-input:hover,.ds-select:hover,.ds-textarea:hover{border-color:var(--marca-borde);}
.ds-input:focus,.ds-select:focus,.ds-textarea:focus{
  outline:none;border-color:var(--foco);box-shadow:0 0 0 3px var(--foco-halo);
}
.ds-input[aria-invalid="true"]{border-color:var(--riesgo);box-shadow:0 0 0 3px var(--riesgo-fondo);}
.ds-ayuda{font-size:var(--t-xs);color:var(--texto-3);}
.ds-error{font-size:var(--t-xs);color:var(--riesgo);display:flex;align-items:center;gap:var(--e-2);}

/* Input con boton pegado — el buscador de lote */
.ds-input-grupo{display:flex;gap:var(--e-2);align-items:stretch;}
.ds-input-grupo .ds-input{flex:1;min-width:0;}
@media(max-width:620px){.ds-input-grupo{flex-direction:column;}}

/* ---------------------------------------------------------------------------
   11. SUPERFICIES — card, panel, modal
   --------------------------------------------------------------------------- */
.ds-card{
  background:var(--superficie);border:1px solid var(--borde);border-radius:var(--r-lg);
  padding:var(--e-6);box-shadow:var(--sombra-1);
  transition:box-shadow var(--v-medio) var(--curva),border-color var(--v-medio) var(--curva),
             transform var(--v-medio) var(--curva);
}
.ds-card.interactiva{cursor:pointer;}
.ds-card.interactiva:hover{box-shadow:var(--sombra-3);border-color:var(--marca-borde);transform:translateY(-2px);}
.ds-card.plana{box-shadow:none;}
.ds-card.destacada{border-color:var(--marca-borde);background:var(--marca-fondo);}

/* La "tarjeta crema" de CozyNest: el foco dentro de una zona oscura. */
.zona-oscura .ds-card.foco{background:var(--n-50);color:var(--n-900);border-color:transparent;}
.zona-oscura .ds-card.foco *{color:inherit;}

.ds-chip{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--t-xs);font-weight:var(--peso-medio);line-height:1;
  padding:6px 11px;border-radius:var(--r-full);
  background:var(--superficie-2);color:var(--texto-2);border:1px solid var(--borde);
}
.zona-oscura .ds-chip{background:rgba(255,255,255,.06);}
.ds-chip.marca{background:var(--marca-fondo);color:var(--marca-texto);border-color:var(--marca-borde);}
.ds-chip.exito{background:var(--exito-fondo);color:var(--exito);border-color:transparent;}
.ds-chip.alerta{background:var(--alerta-fondo);color:var(--alerta);border-color:transparent;}
.ds-chip.riesgo{background:var(--riesgo-fondo);color:var(--riesgo);border-color:transparent;}
.ds-chip.dato{background:var(--dato-fondo);color:var(--dato);border-color:transparent;}
.ds-chip .punto{width:6px;height:6px;border-radius:var(--r-full);background:currentColor;flex:none;}

/* ---------------------------------------------------------------------------
   12. KPI / METRICAS
   --------------------------------------------------------------------------- */
.ds-kpi{
  background:var(--superficie);border:1px solid var(--borde);border-radius:var(--r-lg);
  padding:var(--e-5);display:flex;flex-direction:column;gap:var(--e-2);position:relative;overflow:hidden;
}
.ds-kpi .kpi-label{font-size:var(--t-xs);font-weight:var(--peso-medio);color:var(--texto-3);
  letter-spacing:.04em;text-transform:uppercase;}
.ds-kpi .kpi-valor{font-family:var(--fuente-display);font-size:clamp(26px,3vw,36px);
  font-weight:var(--peso-bold);line-height:1;letter-spacing:var(--track-titulo);color:var(--texto);}
.ds-kpi .kpi-unidad{font-size:var(--t-sm);font-weight:var(--peso-medio);color:var(--texto-3);}
.ds-kpi .kpi-delta{display:inline-flex;align-items:center;gap:5px;font-size:var(--t-xs);font-weight:var(--peso-semi);}
.ds-kpi .kpi-delta.sube{color:var(--exito);} .ds-kpi .kpi-delta.baja{color:var(--riesgo);}
/* El 1%: el KPI que importa se enciende. Uno por tablero, no cinco. */
.ds-kpi.principal{border-color:var(--marca-borde);}
.ds-kpi.principal::before{content:'';position:absolute;inset:0 auto 0 0;width:3px;background:var(--acento);}
.ds-kpi.principal .kpi-valor{color:var(--acento);}

/* Banda de metricas (VATANEN) */
.ds-metricas{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px;background:var(--borde);border:1px solid var(--borde);border-radius:var(--r-lg);overflow:hidden;}
.ds-metricas > div{background:var(--fondo);padding:var(--e-6) var(--e-5);}
.ds-metricas .m-n{font-family:var(--fuente-display);font-size:clamp(30px,3.6vw,44px);
  font-weight:var(--peso-bold);line-height:1;letter-spacing:var(--track-titulo);color:var(--texto);}
.ds-metricas .m-l{margin-top:var(--e-2);font-size:var(--t-sm);color:var(--texto-3);}

/* ---------------------------------------------------------------------------
   13. TABLAS
   --------------------------------------------------------------------------- */
.ds-tabla-wrap{overflow-x:auto;border:1px solid var(--borde);border-radius:var(--r-lg);background:var(--superficie);}
.ds-tabla{width:100%;border-collapse:collapse;font-size:var(--t-sm);}
.ds-tabla thead th{
  position:sticky;top:0;z-index:1;background:var(--superficie-2);
  font-size:var(--t-xs);font-weight:var(--peso-semi);letter-spacing:.05em;text-transform:uppercase;
  color:var(--texto-3);text-align:left;padding:12px 16px;white-space:nowrap;
  border-bottom:1px solid var(--borde-2);
}
.ds-tabla tbody td{padding:13px 16px;border-bottom:1px solid var(--borde);color:var(--texto-2);vertical-align:top;}
.ds-tabla tbody tr:last-child td{border-bottom:none;}
.ds-tabla tbody tr{transition:background var(--v-rapido) var(--curva);}
.ds-tabla tbody tr:hover{background:var(--marca-fondo);}
.ds-tabla .n{text-align:right;font-variant-numeric:tabular-nums;color:var(--texto);}
.ds-tabla tfoot td{padding:13px 16px;font-weight:var(--peso-semi);color:var(--texto);
  border-top:1px solid var(--borde-fuerte);background:var(--superficie-2);}

/* ---------------------------------------------------------------------------
   14. MODAL
   --------------------------------------------------------------------------- */
.ds-modal-fondo{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:var(--e-5);
  background:rgba(17,17,13,.55);backdrop-filter:blur(6px);
  animation:ds-fade var(--v-medio) var(--curva);
}
.ds-modal{
  width:min(560px,100%);max-height:88vh;overflow:auto;
  background:var(--superficie-alta);border:1px solid var(--borde);border-radius:var(--r-xl);
  box-shadow:var(--sombra-4);padding:var(--e-8);
  animation:ds-sube var(--v-lento) var(--curva);
}
.ds-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--e-4);margin-bottom:var(--e-4);}
.ds-modal-pie{display:flex;gap:var(--e-3);justify-content:flex-end;margin-top:var(--e-8);flex-wrap:wrap;}
@keyframes ds-fade{from{opacity:0}to{opacity:1}}
@keyframes ds-sube{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------------------
   15. EMPTY STATE / CARGA
   --------------------------------------------------------------------------- */
.ds-vacio{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--e-3);
  padding:var(--e-16) var(--e-6);border:1px dashed var(--borde-2);border-radius:var(--r-lg);
  background:var(--superficie);
}
.ds-vacio .v-icono{
  width:52px;height:52px;display:grid;place-items:center;border-radius:var(--r-md);
  background:var(--marca-fondo);color:var(--marca-texto);margin-bottom:var(--e-2);
}
.ds-vacio h3{font-family:var(--fuente-display);font-size:var(--t-h4);font-weight:var(--peso-semi);color:var(--texto);}
.ds-vacio p{font-size:var(--t-sm);color:var(--texto-3);max-width:44ch;}

/* Skeleton: la carga se dibuja con la FORMA del contenido que viene, no con un
   spinner generico. Reduce la percepcion de espera. */
.ds-skel{
  background:linear-gradient(90deg,var(--superficie-2) 25%,var(--borde) 37%,var(--superficie-2) 63%);
  background-size:400% 100%;animation:ds-brillo 1.3s ease-in-out infinite;border-radius:var(--r-sm);
}
.ds-skel.linea{height:12px;} .ds-skel.titulo{height:26px;border-radius:var(--r-xs);}
.ds-skel.bloque{height:120px;border-radius:var(--r-md);}
@keyframes ds-brillo{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media (prefers-reduced-motion:reduce){.ds-skel{animation:none;}}

.ds-spinner{
  width:18px;height:18px;border-radius:var(--r-full);flex:none;
  border:2px solid var(--borde-2);border-top-color:var(--acento);
  animation:ds-gira .7s linear infinite;
}
@keyframes ds-gira{to{transform:rotate(360deg)}}

/* Barra de progreso */
.ds-progreso{height:4px;border-radius:var(--r-full);background:var(--borde);overflow:hidden;}
.ds-progreso > i{display:block;height:100%;background:var(--acento);border-radius:inherit;
  transition:width var(--v-lento) var(--curva);}

/* ---------------------------------------------------------------------------
   16. TRACKER DE ETAPAS (patron Propper)
   --------------------------------------------------------------------------- */
.ds-etapas{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--e-5);position:relative;}
.ds-etapa{display:flex;flex-direction:column;gap:var(--e-2);position:relative;padding-top:var(--e-8);}
.ds-etapa::before{  /* la linea que une las etapas */
  content:'';position:absolute;top:15px;left:0;right:0;height:1px;background:var(--borde-2);
}
.ds-etapa:first-child::before{left:15px;} .ds-etapa:last-child::before{right:calc(100% - 15px);}
.ds-etapa .e-punto{
  position:absolute;top:0;left:0;width:30px;height:30px;border-radius:var(--r-full);
  display:grid;place-items:center;font-size:var(--t-xs);font-weight:var(--peso-bold);
  background:var(--fondo);border:1px solid var(--borde-2);color:var(--texto-4);
}
.ds-etapa .e-t{font-weight:var(--peso-semi);color:var(--texto);font-size:var(--t-cuerpo);}
.ds-etapa .e-d{font-size:var(--t-xs);color:var(--texto-3);}
.ds-etapa[data-estado="hecho"] .e-punto{background:var(--marca-solida);border-color:transparent;color:var(--sobre-marca);}
.ds-etapa[data-estado="curso"] .e-punto{background:var(--acento);border-color:transparent;color:var(--sobre-acento);}
.ds-etapa[data-estado="curso"] .e-t{color:var(--acento);}
.ds-etapa[data-estado="pendiente"]{opacity:.6;}

/* ---------------------------------------------------------------------------
   17. NAVEGACION — topbar y sidebar de la plataforma
   --------------------------------------------------------------------------- */
.ds-topbar{
  position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--fondo) 88%,transparent);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid transparent;
  transition:border-color var(--v-medio) var(--curva),box-shadow var(--v-medio) var(--curva),
             background var(--v-medio) var(--curva);
}
.ds-topbar[data-scroll="si"]{border-bottom-color:var(--borde);box-shadow:var(--sombra-1);}
.ds-navlink{
  font-size:var(--t-sm);font-weight:var(--peso-medio);color:var(--texto-2);
  padding:8px 12px;border-radius:var(--r-sm);text-decoration:none;white-space:nowrap;
  transition:background var(--v-rapido) var(--curva),color var(--v-rapido) var(--curva);
}
.ds-navlink:hover{background:var(--marca-fondo);color:var(--texto);}
.ds-navlink[aria-current="page"]{color:var(--marca-texto);background:var(--marca-fondo);}

.ds-sidebar{
  display:flex;flex-direction:column;gap:2px;padding:var(--e-4);
  background:var(--fondo-2);border-right:1px solid var(--borde);
}
.ds-side-item{
  display:flex;align-items:center;gap:var(--e-3);padding:10px 12px;border-radius:var(--r-sm);
  font-size:var(--t-sm);font-weight:var(--peso-medio);color:var(--texto-3);cursor:pointer;
  border-left:2px solid transparent;
  transition:background var(--v-rapido) var(--curva),color var(--v-rapido) var(--curva);
}
.ds-side-item:hover{background:var(--marca-fondo);color:var(--texto);}
.ds-side-item.activo{background:var(--marca-fondo);color:var(--texto);border-left-color:var(--acento);}
.ds-side-item .num{
  font-size:var(--t-micro);font-weight:var(--peso-bold);width:20px;height:20px;flex:none;
  display:grid;place-items:center;border-radius:var(--r-xs);
  background:var(--borde);color:var(--texto-3);font-variant-numeric:tabular-nums;
}
.ds-side-item.activo .num{background:var(--acento);color:var(--sobre-acento);}

/* ---------------------------------------------------------------------------
   18. ENTRADA EN ESCENA — una sola animacion para todo el sitio
   --------------------------------------------------------------------------- */
.ds-reveal{opacity:0;transform:translateY(16px);
  transition:opacity var(--v-entrada) var(--curva),transform var(--v-entrada) var(--curva);}
.ds-reveal.visible{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.ds-reveal{opacity:1;transform:none;}}

/* ---------------------------------------------------------------------------
   19. TRATAMIENTO DE IMAGEN
      Obra en B&N (ya horneado en archivo), renders a color pleno. El olivo
      entra por overlays y bordes, nunca tinendo el render: el color real del
      proyecto es lo que vende.
   --------------------------------------------------------------------------- */
.ds-media{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--n-900);}
.ds-media img,.ds-media video{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--v-lento) var(--curva);}
.ds-media.zoom:hover img{transform:scale(1.03);}
.ds-media.obra img{filter:grayscale(1) contrast(1.04) brightness(.94);}
.ds-media .velo{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(17,17,13,0) 34%,rgba(17,17,13,.82) 100%);}
.ds-media .meta{position:absolute;left:var(--e-4);right:var(--e-4);bottom:var(--e-4);
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--e-3);color:var(--n-25);}

.ds-hr{height:1px;background:var(--borde);border:0;margin-block:var(--e-12);}