/* =============================================================
   Livriz · Folio Design System — marca · showroom del sistema
   GENERADO por livriz/livriz-tokens 2026.10.6 · no editar a mano:
   se edita tokens/tokens.json y se corre `npm run build`.
   ============================================================= */

@import url('https://fonts.app.livriz.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.app.livriz.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0&display=block');
@import url('https://fonts.app.livriz.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ─── Brand ─────────────────────────────────────────────────── */
  --brand-accent:          var(--blue-600);
  --brand-accent-hover:    color-mix(in oklch, var(--brand-accent) 88%, #000000);
  --brand-accent-pressed:  color-mix(in oklch, var(--brand-accent) 72%, #000000);
  --brand-accent-soft:     var(--blue-50);
  --brand-accent-on:       var(--neutral-0);

  /* ─── Neutrales y escalas auxiliares ────────────────────────── */
  --neutral-0:           #ffffff;
  --neutral-50:          #fafafa;
  --neutral-100:         #f4f4f4;
  --neutral-200:         #e8e8e8;
  --neutral-300:         #d6d6d6;
  --neutral-400:         #b8b8b8;
  --neutral-500:         #909090;
  --neutral-550:         #707070;
  --neutral-600:         #6b6b6b;
  --neutral-700:         #4a4a4a;
  --neutral-800:         #2a2a2a;
  --neutral-900:         #141414;
  --neutral-1000:        #000000;
  --grey-4:              #0e0e0e;
  --grey-5:              #121212;
  --grey-8:              #181818;
  --grey-10:             #1c1c1c;
  --grey-12:             #202020;
  --grey-15:             #262626;
  --grey-16:             #282828;
  --grey-20:             #303030;
  --grey-21:             #333333;
  --grey-24:             #3a3a3a;
  --grey-46:             #6e6e6e;
  --grey-57:             #8a8a8a;
  --grey-79:             #c4c4c4;
  --grey-91:             #e4e4e4;
  --grey-93:             #ececec;
  --blue-50:             #e8edfe;
  --blue-100:            #dce5ff;
  --blue-300:            #86a8f7;
  --blue-400:            #6e95f5;
  --blue-500:            #5e88f3;
  --blue-600:            #0047bb;
  --blue-800:            #23408f;
  --blue-1000:           #0a1330;
  --blue-soft-on-dark:   #242c3f;
  --red-100:             #fbe9e6;
  --red-300:             #ff7a6b;
  --red-400:             #f26a5a;
  --red-600:             #c8200c;
  --red-700:             #a41809;
  --red-soft-on-dark:    #3f2420;
  --amber-100:           #fbf1de;
  --amber-300:           #efb85e;
  --amber-400:           #e3a94e;
  --amber-600:           #b7791f;
  --amber-700:           #955f15;
  --amber-soft-on-dark:  #40331f;
  --green-100:           #e4f4eb;
  --green-300:           #57c994;
  --green-400:           #4cbe8a;
  --green-600:           #1f8a5b;
  --green-700:           #176c47;
  --green-soft-on-dark:  #1e342a;

  /* ─── Material Design 3 · semánticos ────────────────────────── */
  --md-sys-color-on-primary:                 var(--brand-accent-on);
  --md-sys-color-error-container:            var(--neutral-100);
  --md-sys-color-on-secondary:               var(--neutral-0);
  --md-sys-color-secondary:                  var(--neutral-1000);
  --md-sys-color-error:                      var(--neutral-1000);
  --md-sys-color-primary:                    var(--brand-accent);
  --md-sys-color-on-primary-container:       color-mix(in oklch, var(--brand-accent) 40%, #000000);
  --md-sys-color-on-secondary-container:     var(--neutral-900);
  --md-sys-color-on-error:                   var(--neutral-0);
  --md-sys-color-on-error-container:         var(--neutral-900);
  --md-sys-color-primary-container:          var(--brand-accent-soft);
  --md-sys-color-secondary-container:        var(--neutral-100);
  --md-sys-color-on-surface-variant:         var(--neutral-700);
  --md-sys-color-surface-container-lowest:   var(--neutral-0);
  --md-sys-color-surface-container-highest:  var(--grey-91);
  --md-sys-color-outline:                    var(--neutral-400);
  --md-sys-color-surface-bright:             var(--neutral-0);
  --md-sys-color-on-surface:                 var(--neutral-900);
  --md-sys-color-surface-container-high:     var(--grey-93);
  --md-sys-color-outline-variant:            var(--neutral-200);
  --md-sys-color-surface:                    var(--neutral-0);
  --md-sys-color-surface-container:          var(--neutral-100);
  --md-sys-color-surface-container-low:      var(--neutral-50);
  --md-sys-color-surface-dim:                var(--neutral-100);
  --md-sys-color-inverse-surface:            var(--neutral-800);
  --md-sys-color-inverse-on-surface:         var(--neutral-50);
  --md-sys-color-inverse-primary:            color-mix(in oklch, var(--brand-accent) 50%, #FFFFFF);
  --md-sys-color-scrim:                      rgba(0, 0, 0, 0.5);
  --md-sys-color-shadow:                     #000000;

  /* ─── Estados ───────────────────────────────────────────────── */
  --status-success:        var(--green-600);
  --status-on-warning:     var(--neutral-0);
  --status-on-danger:      var(--neutral-0);
  --status-warning:        var(--amber-600);
  --status-on-info:        var(--neutral-0);
  --status-info:           var(--brand-accent);
  --status-success-hover:  var(--green-700);
  --status-on-success:     var(--neutral-0);
  --status-danger-soft:    var(--red-100);
  --status-info-soft:      var(--brand-accent-soft);
  --status-danger:         var(--red-600);
  --status-danger-hover:   var(--red-700);
  --status-success-soft:   var(--green-100);
  --status-warning-soft:   var(--amber-100);
  --status-info-hover:     var(--brand-accent-hover);
  --status-warning-hover:  var(--amber-700);

  /* ─── Texto y fondos ────────────────────────────────────────── */
  --fg-1:           var(--neutral-1000);
  --fg-2:           var(--neutral-700);
  --fg-3:           var(--neutral-550);
  --fg-disabled:    var(--neutral-400);
  --fg-accent:      var(--blue-600);
  --fg-inverse:     var(--neutral-0);
  --bg-1:           var(--neutral-0);
  --bg-2:           var(--neutral-50);
  --bg-3:           var(--neutral-100);
  --bg-4:           var(--neutral-200);
  --bg-inverse:     var(--neutral-1000);
  --border-1:       var(--neutral-200);
  --border-2:       var(--neutral-300);
  --border-strong:  var(--neutral-1000);

  /* ─── Tipografía ────────────────────────────────────────────── */
  --font-sans:                 Poppins, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:                 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-icons:                'Material Symbols Rounded';
  --type-display-m-size:       45px;
  --type-headline-m-size:      28px;
  --type-label-s-size:         11px;
  --type-display-l-size:       57px;
  --type-title-l-size:         22px;
  --type-title-m-size:         16px;
  --type-display-s-size:       36px;
  --type-label-m-size:         12px;
  --type-title-s-size:         14px;
  --type-label-l-size:         14px;
  --type-body-s-size:          12px;
  --type-body-l-size:          16px;
  --type-headline-l-size:      32px;
  --type-headline-s-size:      24px;
  --type-body-m-size:          14px;
  --font-weight-light:         300;
  --font-weight-regular:       400;
  --font-weight-medium:        500;
  --font-weight-semibold:      600;
  --font-weight-bold:          700;
  --letter-spacing-tight:      -0.25px;
  --letter-spacing-none:       0;
  --letter-spacing-sm-1:       0.1px;
  --letter-spacing-sm-2:       0.15px;
  --letter-spacing-sm-3:       0.25px;
  --letter-spacing-sm-4:       0.4px;
  --letter-spacing-wide:       0.5px;
  --letter-spacing-overline:   1.5px;
  --type-display-m-size:       45px;
  --type-display-m-line:       52px;
  --type-display-m-weight:     600;
  --type-display-m-tracking:   0px;
  --type-headline-m-size:      28px;
  --type-headline-m-line:      36px;
  --type-headline-m-weight:    600;
  --type-headline-m-tracking:  0px;
  --type-label-s-size:         11px;
  --type-label-s-line:         16px;
  --type-label-s-weight:       500;
  --type-label-s-tracking:     0.5px;
  --type-display-l-size:       57px;
  --type-display-l-line:       64px;
  --type-display-l-weight:     600;
  --type-display-l-tracking:   -0.25px;
  --type-overline-size:        11px;
  --type-overline-line:        16px;
  --type-overline-weight:      600;
  --type-overline-tracking:    1.5px;
  --type-mono-size:            12px;
  --type-mono-line:            16px;
  --type-mono-weight:          500;
  --type-mono-tracking:        0px;
  --type-title-l-size:         22px;
  --type-title-l-line:         28px;
  --type-title-l-weight:       600;
  --type-title-l-tracking:     0px;
  --type-title-m-size:         16px;
  --type-title-m-line:         24px;
  --type-title-m-weight:       600;
  --type-title-m-tracking:     0.15px;
  --type-display-s-size:       36px;
  --type-display-s-line:       44px;
  --type-display-s-weight:     600;
  --type-display-s-tracking:   0px;
  --type-label-m-size:         12px;
  --type-label-m-line:         16px;
  --type-label-m-weight:       500;
  --type-label-m-tracking:     0.5px;
  --type-title-s-size:         14px;
  --type-title-s-line:         20px;
  --type-title-s-weight:       600;
  --type-title-s-tracking:     0.1px;
  --type-label-l-size:         14px;
  --type-label-l-line:         20px;
  --type-label-l-weight:       500;
  --type-label-l-tracking:     0.1px;
  --type-body-s-size:          12px;
  --type-body-s-line:          16px;
  --type-body-s-weight:        400;
  --type-body-s-tracking:      0.4px;
  --type-body-l-size:          16px;
  --type-body-l-line:          24px;
  --type-body-l-weight:        400;
  --type-body-l-tracking:      0.5px;
  --type-headline-l-size:      32px;
  --type-headline-l-line:      40px;
  --type-headline-l-weight:    600;
  --type-headline-l-tracking:  0px;
  --type-headline-s-size:      24px;
  --type-headline-s-line:      32px;
  --type-headline-s-weight:    600;
  --type-headline-s-tracking:  0px;
  --type-body-m-size:          14px;
  --type-body-m-line:          20px;
  --type-body-m-weight:        400;
  --type-body-m-tracking:      0.25px;

  /* ─── Espaciado y forma ─────────────────────────────────────── */
  --space-0:      0;
  --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;
  --space-20:     80px;
  --space-24:     96px;
  --radius-none:  0;
  --radius-xs:    4px;
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    16px;
  --radius-xl:    28px;
  --radius-full:  9999px;

  /* ─── Elevación, movimiento y medida ────────────────────────── */
  --elev-0:                    none;
  --elev-1:                    0 1px 2px 0 rgba(0,0,0,0.06), 0 1px 1px 0 rgba(0,0,0,0.04);
  --elev-2:                    0 2px 4px 0 rgba(0,0,0,0.06), 0 1px 2px 0 rgba(0,0,0,0.04);
  --elev-3:                    0 4px 8px 0 rgba(0,0,0,0.08), 0 2px 4px 0 rgba(0,0,0,0.04);
  --elev-4:                    0 8px 16px 0 rgba(0,0,0,0.1), 0 4px 6px 0 rgba(0,0,0,0.04);
  --elev-5:                    0 16px 32px 0 rgba(0,0,0,0.12), 0 8px 12px 0 rgba(0,0,0,0.04);
  --motion-duration-short:     150ms;
  --motion-duration-medium:    250ms;
  --motion-duration-long:      400ms;
  --motion-easing-standard:    cubic-bezier(0.2, 0, 0, 1);
  --motion-easing-emphasized:  cubic-bezier(0.2, 0, 0, 1);
  --motion-easing-decelerate:  cubic-bezier(0, 0, 0, 1);
  --motion-easing-accelerate:  cubic-bezier(0.3, 0, 1, 1);
  --measure:                   720px;

  /* ─── Otros ─────────────────────────────────────────────────── */
  --focus-ring:  0 0 0 2px #ffffff, 0 0 0 4px #0047bb;
}

/* ═══════════════════════════════════════════════════════════
   Esquema oscuro — se activa con [data-theme="dark"] en <html>.
   El sistema se escribe claro primero; esto es su espejo semántico.
   ═══════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
  /* ─── Brand ─────────────────────────────────────────────────── */
  --brand-accent:          var(--blue-400);
  --brand-accent-hover:    var(--blue-300);
  --brand-accent-pressed:  var(--blue-500);
  --brand-accent-soft:     var(--blue-soft-on-dark);
  --brand-accent-on:       var(--blue-1000);

  /* ─── Material Design 3 · semánticos ────────────────────────── */
  --md-sys-color-on-primary:                 var(--brand-accent-on);
  --md-sys-color-error-container:            var(--grey-15);
  --md-sys-color-on-secondary:               var(--neutral-900);
  --md-sys-color-secondary:                  var(--neutral-0);
  --md-sys-color-error:                      var(--neutral-0);
  --md-sys-color-primary:                    var(--brand-accent);
  --md-sys-color-on-primary-container:       var(--blue-100);
  --md-sys-color-on-secondary-container:     var(--grey-93);
  --md-sys-color-on-error:                   var(--neutral-900);
  --md-sys-color-on-error-container:         var(--grey-93);
  --md-sys-color-primary-container:          var(--brand-accent-soft);
  --md-sys-color-secondary-container:        var(--grey-15);
  --md-sys-color-on-surface-variant:         var(--grey-79);
  --md-sys-color-surface-container-lowest:   var(--grey-8);
  --md-sys-color-surface-container-highest:  var(--grey-20);
  --md-sys-color-outline:                    var(--neutral-600);
  --md-sys-color-surface-bright:             var(--neutral-800);
  --md-sys-color-on-surface:                 var(--grey-93);
  --md-sys-color-surface-container-high:     var(--grey-16);
  --md-sys-color-outline-variant:            var(--grey-21);
  --md-sys-color-surface:                    var(--grey-5);
  --md-sys-color-surface-container:          var(--grey-12);
  --md-sys-color-surface-container-low:      var(--grey-10);
  --md-sys-color-surface-dim:                var(--grey-4);
  --md-sys-color-inverse-surface:            var(--grey-91);
  --md-sys-color-inverse-on-surface:         var(--grey-12);
  --md-sys-color-inverse-primary:            var(--blue-800);
  --md-sys-color-scrim:                      rgba(0, 0, 0, 0.5);
  --md-sys-color-shadow:                     #000000;

  /* ─── Estados ───────────────────────────────────────────────── */
  --status-success:        var(--green-400);
  --status-on-warning:     var(--neutral-900);
  --status-on-danger:      var(--neutral-900);
  --status-warning:        var(--amber-400);
  --status-on-info:        var(--blue-1000);
  --status-info:           var(--brand-accent);
  --status-success-hover:  var(--green-300);
  --status-on-success:     var(--neutral-900);
  --status-danger-soft:    var(--red-soft-on-dark);
  --status-info-soft:      var(--brand-accent-soft);
  --status-danger:         var(--red-400);
  --status-danger-hover:   var(--red-300);
  --status-success-soft:   var(--green-soft-on-dark);
  --status-warning-soft:   var(--amber-soft-on-dark);
  --status-info-hover:     var(--brand-accent-hover);
  --status-warning-hover:  var(--amber-300);

  /* ─── Texto y fondos ────────────────────────────────────────── */
  --fg-1:           var(--neutral-100);
  --fg-2:           var(--grey-79);
  --fg-3:           var(--grey-57);
  --fg-disabled:    var(--grey-46);
  --fg-accent:      var(--blue-400);
  --fg-inverse:     var(--neutral-900);
  --bg-1:           var(--grey-5);
  --bg-2:           var(--grey-8);
  --bg-3:           var(--grey-12);
  --bg-4:           var(--grey-16);
  --bg-inverse:     var(--neutral-100);
  --border-1:       var(--neutral-800);
  --border-2:       var(--grey-24);
  --border-strong:  var(--neutral-0);
}

/* ─── Base reset (light only — system is monochromatic) ──── */
html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ─── Semantic Type Classes ─────────────────────────────── */
.display-l { font: var(--type-display-l-weight) var(--type-display-l-size)/var(--type-display-l-line) var(--font-sans); letter-spacing: var(--type-display-l-tracking); }
.display-m { font: var(--type-display-m-weight) var(--type-display-m-size)/var(--type-display-m-line) var(--font-sans); letter-spacing: var(--type-display-m-tracking); }
.display-s { font: var(--type-display-s-weight) var(--type-display-s-size)/var(--type-display-s-line) var(--font-sans); letter-spacing: var(--type-display-s-tracking); }
.headline-l, h1 { font: var(--type-headline-l-weight) var(--type-headline-l-size)/var(--type-headline-l-line) var(--font-sans); letter-spacing: var(--type-headline-l-tracking); margin: 0; }
.headline-m, h2 { font: var(--type-headline-m-weight) var(--type-headline-m-size)/var(--type-headline-m-line) var(--font-sans); letter-spacing: var(--type-headline-m-tracking); margin: 0; }
.headline-s, h3 { font: var(--type-headline-s-weight) var(--type-headline-s-size)/var(--type-headline-s-line) var(--font-sans); letter-spacing: var(--type-headline-s-tracking); margin: 0; }
.title-l,    h4 { font: var(--type-title-l-weight) var(--type-title-l-size)/var(--type-title-l-line) var(--font-sans); letter-spacing: var(--type-title-l-tracking); margin: 0; }
.title-m,    h5 { font: var(--type-title-m-weight) var(--type-title-m-size)/var(--type-title-m-line) var(--font-sans); letter-spacing: var(--type-title-m-tracking); margin: 0; }
.title-s,    h6 { font: var(--type-title-s-weight) var(--type-title-s-size)/var(--type-title-s-line) var(--font-sans); letter-spacing: var(--type-title-s-tracking); margin: 0; }
.body-l,     p  { font: var(--type-body-l-weight) var(--type-body-l-size)/var(--type-body-l-line) var(--font-sans); letter-spacing: var(--type-body-l-tracking); margin: 0; }
.body-m         { font: var(--type-body-m-weight) var(--type-body-m-size)/var(--type-body-m-line) var(--font-sans); letter-spacing: var(--type-body-m-tracking); }
.body-s         { font: var(--type-body-s-weight) var(--type-body-s-size)/var(--type-body-s-line) var(--font-sans); letter-spacing: var(--type-body-s-tracking); }
.label-l        { font: var(--type-label-l-weight) var(--type-label-l-size)/var(--type-label-l-line) var(--font-sans); letter-spacing: var(--type-label-l-tracking); }
.label-m        { font: var(--type-label-m-weight) var(--type-label-m-size)/var(--type-label-m-line) var(--font-sans); letter-spacing: var(--type-label-m-tracking); text-transform: none; }
.label-s        { font: var(--type-label-s-weight) var(--type-label-s-size)/var(--type-label-s-line) var(--font-sans); letter-spacing: var(--type-label-s-tracking); }

code, .mono { font-family: var(--font-mono); font-size: 13px; }

/* Material Symbols base */
.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  user-select: none;
}


/* ─── Scrollbars · MD3 ──────────────────────────────────────────
   Base: defaults M3 del Scrollbar de Material (grosor 8px desktop /
   4px táctil, radio 8px, track transparente, estados hover/arrastre).
   Opacidades corridas del default M3 (38/50/60) a 48/60/70: el 38%
   no alcanza el 3:1 de WCAG 1.4.11 para componentes UI (2.4:1 en
   claro, 3.2:1 justo en oscuro). Con 48%: 3.3:1 claro · 4.4:1 oscuro. */
* {
  scrollbar-width: thin;                       /* Firefox */
  scrollbar-color: color-mix(in srgb, var(--md-sys-color-on-surface) 48%, transparent) transparent;
}
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 48%, transparent);
  border-radius: 8px;
  min-height: 48px; min-width: 48px;
}
::-webkit-scrollbar-thumb:hover  { background: color-mix(in srgb, var(--md-sys-color-on-surface) 60%, transparent); }
::-webkit-scrollbar-thumb:active { background: color-mix(in srgb, var(--md-sys-color-on-surface) 70%, transparent); }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
@media (pointer: coarse) {
  ::-webkit-scrollbar { width: 4px; height: 4px; }  /* 4px en mobile */
}