/* ============================================
   GUSILABS — styles.css
   Concepto: "mesa de instrumentos" — paneles de medición,
   placas de especificación grabadas, código de color por
   categoría. Tipografía IBM Plex (familia diseñada para
   contextos técnicos/de ingeniería).
   ============================================ */

:root{
  --paper: #EDEEE4;
  --paper-2: #F6F5EC;
  --ink: #1C2219;
  --ink-soft: #59614F;

  --brass: #8C6A22;      /* ingeniería */
  --brass-dark: #6B5019;
  --copper: #9C4A1D;     /* técnicos */
  --copper-dark: #793A16;
  --trace: #2A6E52;      /* laboratorio */
  --trace-dark: #1E5039;
  --azul: #2F5AA8;       /* matemáticas */
  --azul-dark: #24437D;
  --senal: #1F6F78;      /* telecomunicaciones */
  --senal-dark: #17545B;

  --line: #D5D0BE;
  --white: #FFFFFF;
  --plate: #1C2219;
  --plate-text: #E9E4D2;
  --plate-accent: #C79A3F;

  --radius-s: 6px;
  --radius-m: 8px;
  --gutter: clamp(20px, 5vw, 48px);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- 1. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;tab-size:2}
body{
  font-family:'IBM Plex Sans',sans-serif;
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img,svg,video{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
/* Links dentro de texto corrido: se tienen que distinguir del texto común (color + subrayado) */
.seo-copy a{color:var(--copper-dark);text-decoration:underline;text-underline-offset:2px}
.seo-copy a:hover{text-decoration-thickness:2px}
p{text-wrap:pretty}
h1,h2,h3,h4{text-wrap:balance;line-height:1.08;letter-spacing:-0.01em}
::selection{background:var(--plate-accent);color:var(--plate)}
:focus-visible{outline:2px solid var(--copper-dark);outline-offset:3px;border-radius:4px}

.skip-link{
  position:fixed;top:-100px;left:1rem;padding:.6rem 1rem;
  background:var(--ink);color:var(--paper);z-index:9999;border-radius:8px;font-weight:600;
}
.skip-link:focus{top:1rem}

.mono{font-family:'IBM Plex Mono',monospace}

/* ---------- 2. Layout shell ---------- */
.wrap{max-width:1080px;margin:0 auto;padding-inline:var(--gutter)}

.site-header{
  border-bottom:1px solid var(--line);
  background:var(--paper);
  position:sticky;top:0;z-index:50;
}
.site-header .wrap{
  display:flex;align-items:center;justify-content:space-between;
  padding-block:16px;
}
.logo{
  display:flex;align-items:center;gap:9px;
  font-weight:700;font-size:18px;letter-spacing:-0.01em;
}
.logo__mark{
  width:26px;height:26px;border-radius:4px;
  background:var(--ink);
  display:flex;align-items:center;justify-content:center;
  color:var(--plate-accent);font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;
}
.nav-link{
  transition:color .15s var(--ease-out), border-color .15s var(--ease-out), background .15s var(--ease-out);
}

.site-footer{
  border-top:1px solid var(--line);
  margin-top:64px;
  padding-block:28px;
}
.site-footer .wrap{
  display:flex;flex-wrap:wrap;gap:10px 24px;
  align-items:center;justify-content:space-between;
  font-size:13px;color:var(--ink-soft);
}
.site-footer nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.social-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;color:var(--ink-soft);
  transition:color .15s var(--ease-out);
}
.social-icon:hover{color:var(--copper)}
.social-icon svg{width:100%;height:100%}

/* ---------- Diagrama de modulación: toggle de modelo + caja del gráfico ---------- */
.model-toggle{display:flex;gap:8px;margin-bottom:20px}
.model-toggle__btn{
  flex:1;padding:10px 14px;border-radius:var(--radius-s);
  border:1px solid var(--line);background:var(--paper);
  font-weight:600;font-size:14px;color:var(--ink-soft);
  transition:border-color .15s var(--ease-out), color .15s var(--ease-out), background .15s var(--ease-out);
}
.model-toggle__btn.is-active{border-color:var(--copper);color:var(--copper-dark);background:var(--paper-2)}
.diagram-box{
  margin-top:16px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-m);padding:16px;display:flex;justify-content:center;
}

/* ---------- Impresión: SOLO en páginas con .page-has-print-area (evita romper el print de otras páginas) ---------- */
#print-area{display:none}
@media print{
  .page-has-print-area *{visibility:hidden}
  .page-has-print-area #print-area,
  .page-has-print-area #print-area *{visibility:visible}
  .page-has-print-area #print-area{
    position:absolute;left:0;top:0;width:100%;display:block;
    padding:24px;background:#fff;color:#111;
  }
  #print-area h1{font-size:20px;margin-bottom:4px}
  #print-area p{font-size:12px;color:#555;margin-bottom:16px}
  #print-area svg{max-width:100%}
}

/* ---------- 3. Category chip (reemplaza el eyebrow con punto medio) ---------- */
.cat-chip{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:600;
  padding:4px 10px 4px 9px;border-radius:20px;
  border:1px solid currentColor;
}
.cat-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.cat-chip[data-cat="ingenieria"]{color:var(--brass-dark)}
.cat-chip[data-cat="laboratorio"]{color:var(--trace-dark)}
.cat-chip[data-cat="tecnicos"]{color:var(--copper-dark)}
.cat-chip[data-cat="matematicas"]{color:var(--azul-dark)}
.cat-chip[data-cat="telecomunicaciones"]{color:var(--senal-dark)}

/* ---------- 4. Hub / home ---------- */
.hero-hub{padding-block:52px 40px;text-align:center}
.hero-hub__eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;color:var(--copper-dark);font-weight:600;
}
.hero-hub h1{
  font-family:'Big Shoulders Display',sans-serif;
  font-weight:700;
  font-size:clamp(32px,5vw,46px);
  margin:10px auto 0;max-width:44ch;
  text-transform:uppercase;
  letter-spacing:0.005em;
}
.hero-hub p{
  margin:16px auto 0;max-width:52ch;color:var(--ink-soft);font-size:17px;
}
.hero-hub .search-row{margin-inline:auto}

.search-row{
  margin-top:26px;position:relative;max-width:440px;
}
.search-row__icon{
  position:absolute;top:50%;left:16px;transform:translateY(-50%);
  width:18px;height:18px;color:var(--ink-soft);pointer-events:none;
}
.search-row input{
  width:100%;padding:13px 16px 13px 46px;border:1.5px solid var(--line);
  border-radius:var(--radius-s);background:var(--white);font:inherit;font-size:15px;
  color:var(--ink);
}
.search-row input::placeholder{color:var(--ink-soft)}
.search-row input:focus-visible{outline:2px solid var(--copper-dark);outline-offset:1px}

.category-block{margin-top:44px;scroll-margin-top:84px}
.category-block h2{
  font-size:14px;font-weight:700;
  padding:6px 0 10px 14px;
  border-bottom:1px solid var(--line);
  border-left:3px solid var(--line);
  margin-bottom:18px;
  color:var(--ink-soft);
}
.category-block[data-category-block="ingenieria"] h2{border-left-color:var(--brass);color:var(--brass-dark)}
.category-block[data-category-block="laboratorio"] h2{border-left-color:var(--trace);color:var(--trace-dark)}
.category-block[data-category-block="tecnicos"] h2{border-left-color:var(--copper);color:var(--copper-dark)}
.category-block[data-category-block="matematicas"] h2{border-left-color:var(--azul);color:var(--azul-dark)}
.category-block[data-category-block="telecomunicaciones"] h2{border-left-color:var(--senal);color:var(--senal-dark)}

.tool-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px,1fr));
  gap:14px;
}
.tool-card-mini{
  display:block;padding:18px 18px 16px;
  border:1px solid var(--line);border-radius:var(--radius-m);
  background:var(--paper-2);
  transition:border-color .15s var(--ease-out), transform .15s var(--ease-out);
}
.tool-card-mini:not(.is-soon):hover{
  border-color:var(--copper);transform:translateY(-2px);
}
.tool-card-mini__icon{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:10px;
  margin-bottom:12px;
}
.tool-card-mini__icon svg{width:22px;height:22px}
.tool-card-mini__icon[data-cat="ingenieria"]{background:color-mix(in srgb, var(--brass) 16%, transparent);color:var(--brass-dark)}
.tool-card-mini__icon[data-cat="laboratorio"]{background:color-mix(in srgb, var(--trace) 16%, transparent);color:var(--trace-dark)}
.tool-card-mini__icon[data-cat="tecnicos"]{background:color-mix(in srgb, var(--copper) 16%, transparent);color:var(--copper-dark)}
.tool-card-mini__icon[data-cat="matematicas"]{background:color-mix(in srgb, var(--azul) 16%, transparent);color:var(--azul-dark)}
.tool-card-mini__icon[data-cat="telecomunicaciones"]{background:color-mix(in srgb, var(--senal) 16%, transparent);color:var(--senal-dark)}
.tool-card-mini.is-soon .tool-card-mini__icon{opacity:.7}

.tool-card-mini__title{font-weight:700;font-size:15.5px}
.tool-card-mini__desc{font-size:13.5px;color:var(--ink-soft);margin-top:4px}
.tool-card-mini.is-soon{opacity:.55;cursor:default}
.tool-card-mini .tag{
  display:inline-block;margin-top:10px;
  font-family:'IBM Plex Mono',monospace;font-size:11px;
  color:var(--copper-dark);background:var(--white);
  border:1px solid var(--line);
  padding:2px 8px;border-radius:20px;
}
.tool-card-mini.is-soon .tag{color:var(--ink-soft)}

/* ---------- 5. Tool page anatomy ---------- */
.tool-hero{padding-block:36px 0}
.tool-hero h1{font-size:clamp(28px,4.6vw,40px);margin-top:12px}
.tool-hero__sub{color:var(--ink-soft);margin-top:10px;font-size:16px;max-width:58ch}

.tool-card{
  margin-top:26px;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:clamp(20px,4vw,32px);
}

.field-grid{
  display:grid;grid-template-columns:1fr;gap:16px;
}
@media (min-width:720px){
  .field-grid{grid-template-columns:1fr 1fr 1fr}
}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:700;color:var(--ink-soft)}
.field .field-hint{font-size:12px;color:var(--ink-soft);font-weight:400}
/* Campos de entrada: texto, cursor y placeholder siguen el tema (claro/oscuro).
   Antes el texto quedaba en el negro por defecto del navegador y no se leía en modo oscuro. */
input,textarea{color:var(--ink);caret-color:var(--ink)}
input::placeholder,textarea::placeholder{color:var(--ink-soft);opacity:1}
:root[data-theme="dark"]{color-scheme:dark} /* flechitas de number, scrollbars y menús nativos en oscuro */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,textarea:-webkit-autofill{
  -webkit-text-fill-color:var(--ink);caret-color:var(--ink);
  box-shadow:0 0 0 1000px var(--white) inset;
}
.field-input-row{display:flex;border:1px solid var(--line);border-radius:var(--radius-s);overflow:hidden;background:var(--white)}
.field-input-row:focus-within{outline:2px solid var(--copper-dark);outline-offset:1px}
.field-input-row input{
  flex:1;border:0;background:transparent;padding:12px 12px;font:inherit;font-size:16px;
  font-family:'IBM Plex Mono',monospace;
}
.field-input-row input:focus-visible{outline:none}
.field-input-row select{
  flex:1;border:0;background:transparent;background-color:var(--white);padding:12px;font:inherit;font-size:15px;
  color:var(--ink);cursor:pointer;
}
/* Lista desplegada de los menús: fondo y texto del tema (en modo oscuro, antes quedaba texto claro sobre fondo blanco) */
select option,select optgroup{background-color:var(--white);color:var(--ink)}
.field-input-row select:focus-visible{outline:none}
/* Dos casilleros lado a lado dentro de un mismo campo (ej.: valor + divisor) */
.field-split{display:flex;gap:8px}
.field-split .field-input-row:first-child{flex:1;min-width:0}
.field-split .field-input-row:first-child input{min-width:0}
.field-split .field-input-row:last-child{flex:0 0 96px}
/* Variante de grilla para campos con casillero doble: las columnas pueden achicarse sin pasarse de la tarjeta.
   1 columna en pantallas chicas; 3 columnas (la primera más ancha) desde pantallas anchas. */
.field-grid--split{grid-template-columns:minmax(0,1fr)}
/* ---------- Entropía de una fuente: probabilidades, resultados y tabla ---------- */
.prob-title{font-size:13px;font-weight:700;color:var(--ink-soft)}
.prob-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px}
.prob-grid .field{gap:4px;min-width:0}
.prob-grid .field label{font-size:12px}
.prob-grid .field-input-row input{min-width:0;width:100%}
.sum-line{font-size:13px;margin-top:12px;color:var(--ink-soft)}
.sum-line.is-ok{color:var(--trace-dark)}
.sum-line.is-bad{color:var(--copper-dark)}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-top:16px}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-s);padding:12px 14px;min-width:0}
.stat__label{display:block;font-size:12px;color:var(--ink-soft)}
.stat__value{display:block;margin-top:4px;font-family:'IBM Plex Mono',monospace;font-size:20px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.stat__unit{font-size:12px;font-weight:400;color:var(--ink-soft)}
.table-wrap{margin-top:16px;overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-s)}
.info-table{width:100%;border-collapse:collapse;font-size:14px}
.info-table th,.info-table td{padding:8px 12px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
.info-table th:first-child,.info-table td:first-child{text-align:left}
.info-table thead th{font-size:12px;color:var(--ink-soft);font-weight:700;background:var(--paper)}
.info-table td{font-family:'IBM Plex Mono',monospace;color:var(--ink)}
.info-table tfoot td{font-weight:700;border-bottom:0;background:var(--paper)}
@media (max-width:480px){.info-table{font-size:13px}.info-table th,.info-table td{padding:8px 7px}}

@media (min-width:1100px){
  .field-grid--split{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr)}
}
.field-input-row .unit{
  display:flex;align-items:center;padding:0 12px;
  font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--ink-soft);
  background:var(--paper);border-left:1px solid var(--line);
}
.field.is-solved .field-input-row{border-color:var(--copper);border-width:1.5px}
.field.is-solved input{color:var(--copper-dark);font-weight:600}

.tool-actions{
  display:flex;align-items:center;gap:14px;margin-top:20px;flex-wrap:wrap;
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;border-radius:var(--radius-s);
  font-weight:700;font-size:15px;
  transition:transform .15s var(--ease-out), background .15s var(--ease-out);
}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink-soft);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--copper);color:var(--ink)}

.result-line{
  font-size:13px;color:var(--ink-soft);
}
.result-line strong{color:var(--copper-dark);font-family:'IBM Plex Mono',monospace}

.privacy-note{
  margin-top:18px;padding-top:16px;border-top:1px dashed var(--line);
  font-size:13px;color:var(--ink-soft);display:flex;gap:8px;align-items:flex-start;
}

/* ---------- 6. Ad slots (placeholders) ---------- */
.ad-slot{
  min-height:90px;margin-block:28px;
  border:1px dashed var(--line);border-radius:var(--radius-s);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--ink-soft);letter-spacing:.02em;
  background:var(--paper-2);
}

/* ---------- 7. Content sections ---------- */
.section{padding-block:8px}
.section h2{font-size:22px;margin-bottom:14px}

.steps{
  position:relative;
  display:grid;gap:16px;
  grid-template-columns:1fr;
}
@media (min-width:720px){
  .steps{grid-template-columns:repeat(3,1fr)}
  .steps::before{
    content:"";position:absolute;top:15px;left:calc(16.5% + 6px);right:calc(16.5% + 6px);
    height:1px;background:var(--line);
  }
}
.step{position:relative;padding-top:44px}
.step__index{
  position:absolute;top:0;left:0;
  width:30px;height:30px;border-radius:50%;
  background:var(--ink);color:var(--plate-accent);
  display:flex;align-items:center;justify-content:center;
  font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:13px;
}
.step h3{font-size:16px;margin-top:2px}
.step p{font-size:14px;color:var(--ink-soft);margin-top:6px}

.seo-copy{max-width:70ch;color:var(--ink-soft);font-size:15.5px}
.seo-copy p{margin-bottom:14px}

/* La "placa" de fórmula — elemento distintivo del sitio */
.seo-copy .formula,
.formula{
  display:block;margin:20px 0;padding:16px 20px;
  background:var(--plate);color:var(--plate-text);
  border-radius:var(--radius-s);
  border-top:2px solid var(--plate-accent);
  font-family:'IBM Plex Mono',monospace;font-size:16px;
  letter-spacing:0.01em;
}

.faq{border-top:1px solid var(--line)}
.faq details{
  border-bottom:1px solid var(--line);padding-block:14px;
}
.faq summary{
  cursor:pointer;font-weight:700;font-size:15px;
  list-style:none;display:flex;justify-content:space-between;gap:12px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--copper);font-weight:700}
.faq details[open] summary::after{content:"–"}
.faq p{margin-top:10px;color:var(--ink-soft);font-size:14.5px}

@media (prefers-reduced-motion: reduce){
  .btn,.tool-card-mini,.nav-link{transition:none}
}

/* ---------- 8. Modo oscuro — "panel apagado, pantalla encendida" ---------- */
:root[data-theme="dark"]{
  --paper: #14170F;
  --paper-2: #1D2117;
  --ink: #E7E3D2;
  --ink-soft: #9BA38C;

  --brass: #D2A74A;
  --brass-dark: #E4BE6E;
  --copper: #D98A46;
  --copper-dark: #E8A567;
  --trace: #4FAE84;
  --trace-dark: #6FC29C;
  --azul: #6B95E0;
  --azul-dark: #94B4EC;
  --senal: #4FB0BC;
  --senal-dark: #7CCBD5;

  --line: #333A28;
  --white: #232818;
  --plate: #0A0C07;
  --plate-text: #F0C879;
  --plate-accent: #E4BE6E;
}
:root[data-theme="dark"] .logo__mark{color:var(--plate)}
:root[data-theme="dark"] .btn-primary{background:var(--plate-accent);color:var(--plate)}
:root[data-theme="dark"] .step__index{background:var(--plate);color:var(--plate-accent)}
:root[data-theme="dark"] ::selection{background:var(--plate-accent);color:var(--plate)}

.theme-toggle{
  width:44px;height:24px;border-radius:20px;
  background:var(--line);position:relative;flex-shrink:0;
  transition:background .2s var(--ease-out);
  margin-left:18px;
}
.theme-toggle__knob{
  position:absolute;top:2px;left:2px;
  width:20px;height:20px;border-radius:50%;
  background:var(--ink);
  transition:transform .2s var(--ease-out), background .2s var(--ease-out);
}
.theme-toggle__glyph{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .15s var(--ease-out);
}
.theme-toggle__glyph svg{width:13px;height:13px}
.theme-toggle__glyph--sun{opacity:1;color:var(--plate-accent)}
.theme-toggle__glyph--moon{opacity:0;color:var(--plate-accent)}
:root[data-theme="dark"] .theme-toggle{background:var(--brass-dark)}
:root[data-theme="dark"] .theme-toggle__knob{
  transform:translateX(20px);
  background:var(--plate);
}
:root[data-theme="dark"] .theme-toggle__glyph--sun{opacity:0}
:root[data-theme="dark"] .theme-toggle__glyph--moon{opacity:1}
.nav-link{
  font-size:14px;font-weight:600;color:var(--ink-soft);
  padding:8px 14px;border-radius:20px;border:1px solid var(--line);
  transition:color .15s var(--ease-out), border-color .15s var(--ease-out), background .15s var(--ease-out);
}
.nav-link:hover{color:var(--ink);border-color:var(--copper);background:var(--paper-2)}

.site-header nav{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;
}
@media (max-width:640px){
  .nav-link{padding:6px 10px;font-size:13px}
}

/* El atributo hidden siempre oculta, aunque la clase del elemento tenga display (ej. .field con display:flex) */
[hidden]{display:none !important}

/* ---------- Video tutorial incrustado (16:9, se adapta al ancho) ---------- */
.video-tutorial__lead{color:var(--ink-soft);margin:-6px 0 16px}
.video-embed{
  position:relative;width:100%;max-width:880px;aspect-ratio:16/9;
  border:1px solid var(--line);border-radius:var(--radius-m);overflow:hidden;
  background:var(--plate);
}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* ---------- Síntesis orgánica: esquema de reacción y barra de rendimiento ---------- */
.sx-scheme{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.sx-side{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.sx-mol{position:relative;min-width:0;max-width:100%;padding:12px 14px 10px;border:1px solid var(--line);border-radius:var(--radius-m);background:var(--paper);text-align:center}
.sx-mol--p{border-color:var(--trace);border-width:2px}
.sx-mol.is-sub{border-width:1px;border-color:var(--line);opacity:.85}
.sx-txt{font:600 16px 'IBM Plex Mono',monospace;color:var(--ink);overflow-wrap:anywhere}
.sx-coef{color:var(--ink-soft);margin-right:6px}
.sx-name{font-weight:700;font-size:14px;color:var(--ink);margin-top:6px}
.sx-form{font:500 12px 'IBM Plex Mono',monospace;color:var(--ink-soft);margin-top:2px}
.sx-plus{font:700 20px 'IBM Plex Mono',monospace;color:var(--ink-soft)}
.sx-arrow{display:flex;flex-direction:column;align-items:center;min-width:110px;max-width:100%;text-align:center}
.sx-cond{font-size:12.5px;color:var(--ink-soft);line-height:1.3}
.sx-line{font:700 30px 'IBM Plex Mono',monospace;color:var(--ink);line-height:1.1}
.sx-tag{position:absolute;top:-10px;left:50%;transform:translateX(-50%);padding:1px 8px;border-radius:999px;font:600 11px 'IBM Plex Sans',sans-serif;white-space:nowrap;background:var(--paper-2);border:1px solid var(--line);color:var(--ink-soft)}
.sx-tag--mayoritario,.sx-tag--mezcla{color:var(--ink);border-color:var(--trace)}
.sx-regla{margin-top:14px;padding:12px 14px;border:1px solid var(--line);border-left:4px solid var(--trace);border-radius:var(--radius-m);background:var(--paper);color:var(--ink);font-size:14.5px;line-height:1.5}
.sx-bar{margin-top:12px}
.sx-bar__label{font-weight:600;font-size:14px;color:var(--ink);margin-bottom:6px}
.sx-bar__track{height:16px;border:1px solid var(--line);border-radius:999px;background:var(--paper-2);overflow:hidden}
.sx-bar__fill{height:100%;background:var(--trace);border-radius:999px;transition:width .2s}
.sx-bar__nums{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--ink-soft);margin-top:4px}
.sx-bar__nums strong{color:var(--ink)}
@media (max-width:700px){.sx-scheme{flex-direction:column}.sx-line{transform:rotate(90deg);margin:4px 0}.sx-side{flex-direction:column}}