/* mal-ds v1.0.15 · https://una.red/ds/ */
/* ══════════════════════════════════════════════════════════════
   MAL · chrome del storybook
   https://una.red/ds/storybook.css

   El marco de la página de componentes. NO es el sistema: es la
   herramienta que lo enseña, y por eso no estila etiquetas desnudas
   —si lo hiciera, cada muestra se vería a un tamaño que el sistema
   no entrega—.

   Hereda el vocabulario del storybook original de maldonado.pro
   —`.sb-sidebar`, `.sb-nav-group`, `.sb-nav-title`, `.sb-nav-link`,
   `.sb-content`, `.sb-section`, `.sb-section-title`, `.sb-grid`,
   `.sb-box`, `.sb-label`, `.btn-copy`, `.notice`— con sus mismas
   medidas (barra de 280 px, cajas de 20 px de radio, 32 px de
   relleno) para que sea el mismo objeto, no uno parecido. Lo nuevo
   es el banner superior y que los tokens son `--sb-*` propios en vez
   de los del sistema documentado, para no pelearse con él.

   ORDEN DE CARGA, IMPORTANTE: primero el CSS del sistema que se
   documenta, DESPUÉS este. Los sistemas traen reglas de elemento
   (`body`, `h2`, `pre`, `table`) y así el chrome gana donde debe,
   mientras que las muestras, que usan las clases del sistema, se ven
   exactamente como en producción.
   ══════════════════════════════════════════════════════════════ */


/* El chrome se viste con el TEMA, no con una paleta propia. Antes tenía
   sus `--sb-*` para no pelearse con el sistema; ahora es al revés: al
   cambiar de tema tiene que cambiar todo —barra, menús, fondos— porque
   los temas no conviven y la página entera pertenece a uno solo.
   Los nombres `--sb-*` se quedan como alias de los roles. */
:root{
  --sb-bg-000:var(--mal-bg);      --sb-bg-100:var(--mal-surface);
  --sb-bg-200:var(--mal-surface-alt); --sb-bg-300:var(--mal-bg-2);
  --sb-text-000:var(--mal-on-surface);  --sb-text-100:var(--mal-on-surface-2);
  --sb-text-200:var(--mal-on-surface-2); --sb-text-faint:var(--mal-on-surface-3);
  --sb-border-100:var(--mal-outline);   --sb-border-200:var(--mal-outline-2);
  --sb-accent:var(--mal-primary);       --sb-accent-txt:var(--mal-primary-txt);
  --sb-ok:var(--mal-ok);
  --sb-display:var(--ref-display); --sb-texto:var(--ref-texto); --sb-mono:var(--ref-mono);
  --sb-lat:280px; --sb-barra:58px;
  --sb-r-sm:calc(8px * var(--ref-radio));
  --sb-r-md:var(--mal-r-s);
  --sb-r-lg:var(--mal-r);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  /* el cuerpo lo pone el SISTEMA, no el chrome del storybook: con 15px
     aquí, cada muestra se veía un escalón por debajo de lo que el DS
     entrega de verdad (17 en MAL, 18 en el periódico). El chrome se
     viste solo a sí mismo, con sus clases .sb-*. */
  font-family:var(--sb-texto);font-size:var(--mal-t-cuerpo);line-height:1.6;
  color:var(--sb-text-000);background:var(--sb-bg-000);-webkit-font-smoothing:antialiased;
}
body a{color:inherit}
:focus-visible{outline:2px solid var(--sb-accent);outline-offset:2px;border-radius:4px}
.sb-salta{position:absolute;left:-9999px}
.sb-salta:focus{left:.6rem;top:calc(var(--sb-barra) + .6rem);z-index:2100;padding:.6rem .9rem;background:var(--sb-text-000);color:var(--sb-bg-100);border-radius:var(--sb-r-sm)}

/* ─── banner superior: la vuelta a una.red, siempre a la izquierda ─── */
.sb-topbar{
  position:fixed;inset:0 0 auto 0;height:var(--sb-barra);z-index:2100;
  display:flex;align-items:center;gap:12px;padding:0 16px;
  background:color-mix(in srgb, var(--sb-bg-100) 88%, transparent);
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
  border-bottom:1px solid var(--sb-border-100);
}
.sb-volver{
  display:inline-flex;align-items:center;gap:10px;flex:none;text-decoration:none;
  font-family:var(--sb-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--sb-text-200);border:1px solid var(--sb-border-200);border-radius:999px;
  padding:8px 14px;transition:border-color .15s, color .15s;
}
.sb-volver:hover{color:var(--sb-accent-txt);border-color:var(--sb-accent)}
.sb-volver b{font-family:var(--sb-display);font-size:15px;font-weight:800;letter-spacing:-.03em;text-transform:none;color:var(--sb-text-000)}
.sb-tabs{display:flex;gap:4px;align-items:center;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.sb-tabs__t{flex:none;font-family:var(--sb-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--sb-text-faint);margin-right:4px;white-space:nowrap}
.sb-tabs::-webkit-scrollbar{display:none}
.sb-tabs a{
  flex:none;text-decoration:none;font-size:13px;font-weight:600;color:var(--sb-text-200);
  padding:7px 14px;border-radius:999px;white-space:nowrap;border:1px solid transparent;
}
.sb-tabs a:hover{background:var(--sb-bg-200);color:var(--sb-text-000)}
.sb-tabs a[aria-current]{background:var(--sb-text-000);color:var(--sb-bg-100);border-color:var(--sb-text-000)}
.sb-acc{display:flex;gap:6px;flex:none;align-items:center}
.sb-sel{
  font-family:var(--sb-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--sb-text-200);background:var(--sb-bg-100);border:1px solid var(--sb-border-200);
  border-radius:999px;padding:0 26px 0 12px;min-height:34px;cursor:pointer;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 14px) 15px,calc(100% - 9px) 15px;background-size:5px 5px;background-repeat:no-repeat;
}
.sb-sel:hover{color:var(--sb-text-000);border-color:var(--sb-text-200)}
.sb-btn{
  font-family:var(--sb-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sb-text-200);background:var(--sb-bg-100);border:1px solid var(--sb-border-200);
  border-radius:999px;padding:8px 13px;cursor:pointer;text-decoration:none;white-space:nowrap;
  min-height:34px;display:inline-flex;align-items:center;gap:6px;
}
.sb-btn:hover{color:var(--sb-text-000);border-color:var(--sb-text-200)}
@media (max-width:760px){.sb-volver span{display:none}.sb-btn--oculta{display:none}}

/* ─── barra lateral (medidas del storybook original) ─────────── */
.sb-sidebar{
  width:var(--sb-lat);height:calc(100vh - var(--sb-barra));position:fixed;top:var(--sb-barra);left:0;
  border-right:1px solid var(--sb-border-100);padding:32px 24px 60px;overflow-y:auto;
  background:color-mix(in srgb, var(--sb-bg-100) 80%, transparent);
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);z-index:1001;
}
.sb-sidebar-header{display:flex;align-items:center;gap:12px;padding-left:10px;margin-bottom:32px}
.sb-sidebar-header b{font-family:var(--sb-display);font-size:20px;font-weight:800;letter-spacing:-.04em}
.sb-sidebar-header span{font-family:var(--sb-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--sb-text-faint)}
.sb-nav-group{margin-bottom:32px}
.sb-nav-title{
  font-size:11px;text-transform:uppercase;letter-spacing:.15em;color:var(--sb-text-faint);
  margin-bottom:12px;padding-left:12px;font-weight:700;
}
.sb-nav-link{
  display:block;padding:10px 12px;border-radius:8px;color:var(--sb-text-100);
  text-decoration:none;font-size:14px;font-weight:500;transition:.15s cubic-bezier(.4,0,.2,1);
}
.sb-nav-link:hover{background:var(--sb-bg-200);color:var(--sb-text-000);transform:translateX(4px)}
.sb-nav-link.is-activo{background:var(--sb-bg-200);color:var(--sb-text-000);font-weight:700;box-shadow:inset 3px 0 0 var(--sb-accent)}

/* ─── contenido ──────────────────────────────────────────────── */
.sb-content{margin-left:var(--sb-lat);padding:60px;max-width:1400px}
.sb-section{margin-bottom:100px;scroll-margin-top:calc(var(--sb-barra) + 24px)}
.sb-section-title{
  font-size:32px;font-family:var(--sb-display);font-weight:800;letter-spacing:-.03em;
  border-bottom:2px solid var(--sb-border-100);padding-bottom:16px;margin-bottom:48px;
  color:var(--sb-text-000);display:flex;align-items:center;gap:16px;
}
.sb-section-title span{font-family:var(--sb-mono);font-size:14px;font-weight:400;opacity:.35;letter-spacing:0}
.sb-section-intro{color:var(--sb-text-200);max-width:70ch;margin:-32px 0 32px;font-size:14.5px;line-height:1.55}
.sb-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr));gap:24px;margin-bottom:40px}
.sb-grid--ancha{grid-template-columns:1fr}
.sb-box{
  min-width:0;background:var(--sb-bg-100);border:1px solid var(--sb-border-100);border-radius:var(--sb-r-lg);
  padding:32px;position:relative;overflow:visible;
}
.sb-box > * + *{margin-top:16px}
.sb-label{
  position:absolute;top:16px;right:20px;z-index:2;pointer-events:none;font-family:var(--sb-mono);font-size:10px;
  text-transform:uppercase;letter-spacing:1px;color:var(--sb-text-faint);
}
/* El chrome NUNCA estila etiquetas desnudas dentro de una caja: `.sb-box p`
   (0,1,1) le ganaba a `.display-num` (0,1,0) y el número grande de una
   tarjeta salía a 13,5 px heredados, con su unidad a 4,7. El título y la
   descripción de la caja llevan clase propia. */
.sb-box__t{font-family:var(--sb-texto);font-size:15px;font-weight:700;color:var(--sb-text-000);letter-spacing:-.01em;line-height:1.3}
.sb-box__d{font-size:13.5px;color:var(--sb-text-200);max-width:60ch;line-height:1.5}
.sb-fila{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.sb-variants-stack{display:flex;flex-direction:column;gap:60px}
.sb-lienzo{
  background:var(--sb-bg-200);border:1px dashed var(--sb-border-200);border-radius:var(--sb-r-md);
  padding:24px;overflow-x:auto;
}

/* ─── código y copia ─────────────────────────────────────────── */
.sb-code{
  min-width:0;position:relative;clear:both;background:var(--sb-bg-200);border:1px solid var(--sb-border-100);
  border-radius:var(--sb-r-md);margin-top:16px;
}
.sb-code pre{
  margin:0;padding:44px 16px 14px;overflow-x:auto;font-family:var(--sb-mono);font-size:12px;
  line-height:1.7;color:var(--sb-text-200);white-space:pre;
}
.sb-code pre b{color:var(--sb-accent-txt);font-weight:400}
.btn-copy{
  position:absolute;top:8px;right:8px;background:var(--sb-bg-100);
  border:1px solid var(--sb-border-200);border-radius:var(--sb-r-sm);padding:5px 10px;
  font-family:var(--sb-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;color:var(--sb-text-200);transition:.15s;
}
.btn-copy:hover{background:var(--sb-bg-300);color:var(--sb-text-000)}
.btn-copy.copied{color:var(--sb-ok);border-color:var(--sb-ok)}

/* ─── avisos y tablas ────────────────────────────────────────── */
.notice > div{min-width:0}
.notice{
  background:color-mix(in srgb, var(--sb-accent) 8%, var(--sb-bg-100));
  border:1px solid color-mix(in srgb, var(--sb-accent) 22%, transparent);
  border-radius:var(--sb-r-md);padding:14px 20px;display:flex;align-items:flex-start;gap:12px;
  font-size:13.5px;color:var(--sb-text-100);
}
.notice b{color:var(--sb-text-000)}
.sb-tabla-env{overflow-x:auto;border:1px solid var(--sb-border-100);border-radius:var(--sb-r-md);background:var(--sb-bg-100)}
.sb-tabla{border-collapse:collapse;width:100%;font-size:13px}
.sb-tabla th,.sb-tabla td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--sb-border-100);vertical-align:top}
.sb-tabla th{font-family:var(--sb-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--sb-text-faint);font-weight:500}
.sb-tabla tr:last-child td{border-bottom:0}
.sb-tabla code,.sb-inline{font-family:var(--sb-mono);font-size:11.5px;color:var(--sb-accent-txt);background:var(--sb-bg-200);border-radius:4px;padding:1px 5px}

/* ─── fichas de color y tipografía ───────────────────────────── */
.sb-swatches{display:grid;grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));gap:12px}
.sb-swatch{border:1px solid var(--sb-border-100);border-radius:var(--sb-r-md);overflow:hidden;background:var(--sb-bg-100)}
.sb-swatch__c{height:58px;border-bottom:1px solid var(--sb-border-100)}
.sb-swatch__t{padding:9px 11px}
.sb-swatch__t code{font-family:var(--sb-mono);font-size:11px;color:var(--sb-text-000);display:block;background:none;padding:0}
.sb-swatch__t span{font-family:var(--sb-mono);font-size:10px;color:var(--sb-text-faint);display:block;margin-top:2px}
.type-sample{padding:20px 0;border-bottom:1px solid var(--sb-border-100)}
.type-sample:last-child{border-bottom:0}
.type-sample .sb-meta{font-family:var(--sb-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--sb-text-faint);margin-bottom:10px}

/* ─── portada de cada sistema ────────────────────────────────── */
.sb-intro{margin-bottom:64px}
.sb-eyebrow{font-family:var(--sb-mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--sb-text-faint);display:flex;align-items:center;gap:12px}
.sb-eyebrow::before{content:"";width:28px;height:1px;background:var(--sb-accent)}
/* el hero es `.display` del sistema: aquí solo el margen */
.sb-intro__t{margin:14px 0}
.sb-intro > p{color:var(--sb-text-200);max-width:64ch;font-size:16px}
.sb-datos{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px;list-style:none}
.sb-datos li{font-family:var(--sb-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--sb-text-200);border:1px solid var(--sb-border-100);border-radius:999px;padding:6px 12px;background:var(--sb-bg-100)}
.sb-pie{border-top:1px solid var(--sb-border-100);margin-top:60px;padding-top:24px;font-family:var(--sb-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--sb-text-faint)}
.sb-pie a{color:var(--sb-text-200)}
.sb-pie a:hover{color:var(--sb-accent-txt)}

/* ─── móvil: la lateral baja abajo, como en el original ──────── */
@media (max-width:1100px){ :root{--sb-lat:260px} .sb-content{padding:40px 32px} }
@media (max-width:860px){
  .sb-sidebar{
    position:fixed;top:auto;bottom:0;left:0;width:100%;height:70px;padding:0 16px;
    border-right:0;border-top:1px solid var(--sb-border-100);z-index:2000;
    display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none;
  }
  .sb-sidebar::-webkit-scrollbar{display:none}
  .sb-sidebar-header,.sb-nav-title{display:none}
  .sb-nav-group{display:contents}
  .sb-nav-link{
    white-space:nowrap;padding:8px 16px;background:var(--sb-bg-200);
    border:1px solid var(--sb-border-100);border-radius:20px;font-size:13px;flex:none;
  }
  .sb-nav-link:hover{transform:none}
  .sb-content{margin-left:0;padding:32px 16px 110px;padding-top:calc(var(--sb-barra) + 32px)}
  .sb-section-title{font-size:24px;margin-bottom:32px}
  .sb-box{padding:24px}
  .sb-grid{grid-template-columns:1fr}
}
@media (min-width:861px){ .sb-content{padding-top:calc(var(--sb-barra) + 60px)} }

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}}