/* ============================================================================
   sds-sima.css · SIMA Design System — capa de homologación
   Unifica la identidad visual de este sistema con la de Mi Espacio:
   morado ciruela (--brand) + coral IA (--ia) + ámbar (--acento), Inter y
   iconos Font Awesome. Re-define tokens, así re-pinta sin reescribir CSS.
   CARGAR SIEMPRE AL FINAL (después de los CSS del proyecto).
   ============================================================================ */

/* ---------- Tokens de marca y superficie · TEMA OSCURO (predeterminado) ---------- */
:root,
[data-theme="dark"]{
  --brand:#6d4d86;   --brand-2:#a986c4;
  --ia:#ff6b5e;      --ia-2:#ff9a8f;     --ia-ink:#2a0d07;
  --acento:#f5b445;  --acento-2:#ff8f4d; --acento-ink:#2a1500;

  --bg:#08060e;         --bg-2:#0b0912;
  --superficie:#0b0912; --card:#130f1c;  --card-2:#1b1530;
  --linea:rgba(169,134,196,.14);  --linea-2:rgba(169,134,196,.24);
  --tx:#f1f5f9;  --tx-2:#a6afc0;  --tx-3:#6a7385;
  --ok:#10b981;  --warn:#f59e0b;  --bad:#ef4444;

  --glow-brand:0 0 0 transparent;
  --glow-ia:0 0 32px color-mix(in srgb,var(--ia) 42%,transparent);
  --ico-ac:var(--brand-2);
}

/* ---------- TEMA CLARO ---------- */
[data-theme="light"]{
  --brand:#6d4d86;   --brand-2:#8a5fa6;
  --ia:#e85a4d;      --ia-2:#c94330;     --ia-ink:#ffffff;
  --acento:#b45309;  --acento-2:#c2410c; --acento-ink:#ffffff;

  --bg:#f4f2f8;         --bg-2:#ffffff;
  --superficie:#ffffff; --card:#ffffff;  --card-2:#faf8fd;
  --linea:rgba(109,77,134,.14);  --linea-2:rgba(109,77,134,.24);
  --tx:#1e1730;  --tx-2:#5a5477;  --tx-3:#948ca6;
  --ok:#0f7a45;  --warn:#8a5806;  --bad:#d64535;

  --glow-brand:0 0 0 transparent;
  --glow-ia:0 0 24px color-mix(in srgb,var(--ia) 20%,transparent);
  --ico-ac:var(--brand);
}

/* ---------- Tipografía: Inter en todo (reemplaza League Spartan) ---------- */
:root{ --f-display: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
body,
h1, h2, h3, h4, h5, h6{ font-family: var(--f-display); }
h1, h2, h3, h4{ letter-spacing:-.02em; }

/* ---------- Iconos Font Awesome (homologado con Mi Espacio) ---------- */
/* FA dimensiona por font-size (no por width/height). Replicamos los tamaños
   que el kit daba a .ico vía width/height, para que nada cambie de escala. */
i.ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:auto; height:auto; font-size:20px; line-height:1;
  vertical-align:-.12em; color:var(--ico-ac);
}
i.ico.ico-lg{ font-size:26px; }
.nav-inferior i.ico{ font-size:22px; }
.paleta-lista button i.ico{ font-size:18px; }
i.ico.flip{ transform:scaleX(-1); }
/* el acento de icono lo fija el call-site vía style="color:..."; si no, hereda --ico-ac */
/* en items de navegación el color lo marca .nav-i / .activo (morado) */
.nav-i i.ico{ color:var(--brand); }
.nav-i.activo i.ico{ color:var(--brand-2); }

/* ---------- Logo SIMA en la barra lateral ---------- */
.marca{
  display:flex; flex-direction:column; align-items:flex-start; gap:9px;
}
.marca .glifo{ display:none; }                 /* ya no se usa el glifo */
.marca .sima-logo{ height:30px; width:auto; display:block; }
.marca > div{ display:flex; flex-direction:column; line-height:1.15; }
.marca > div b{ font-size:.92rem; font-weight:700; color:var(--tx); letter-spacing:-.01em; }
.marca > div small{ font-size:.58rem; letter-spacing:.11em; text-transform:uppercase; color:var(--tx-3); font-weight:700; }