/* Riso (Better Design): tokens + componentes del kit HTML, pegados tal cual. La fuente Archivo se sirve localmente. */
@font-face{font-family:Archivo;font-weight:100 900;font-display:swap;src:url(/fuentes/archivo.woff2) format('woff2')}
:root {
  --background: oklch(0.957 0.035 92);
  --foreground: oklch(0.2011 0.0146 271.15);
  --card: oklch(0.988 0.014 92);
  --card-foreground: oklch(0.2011 0.0146 271.15);
  --popover: oklch(0.988 0.014 92);
  --popover-foreground: oklch(0.2011 0.0146 271.15);
  --primary: oklch(0.6182 0.1842 256.39);
  --primary-foreground: oklch(0.9929 0.0067 95.18);
  --secondary: oklch(0.9219 0.0461 234.71);
  --secondary-foreground: oklch(0.2011 0.0146 271.15);
  --muted: oklch(0.928 0.03 92);
  --muted-foreground: oklch(0.4511 0.0212 271.15);
  --accent: oklch(0.9114 0.1568 99.61);
  --accent-foreground: oklch(0.2011 0.0146 271.15);
  --destructive: oklch(0.6045 0.2261 27.32);
  --destructive-foreground: oklch(0.9929 0.0067 95.18);
  --border: oklch(0.2011 0.0146 271.15);
  --input: oklch(0.2011 0.0146 271.15);
  --ring: oklch(0.6182 0.1842 256.39);
  --radius: 0.875rem;
  --shadow-hard-sm: 0.125rem 0.125rem 0 0 var(--foreground);
  --shadow-hard: 0.25rem 0.25rem 0 0 var(--foreground);
  --shadow-hard-lg: 0.375rem 0.375rem 0 0 var(--foreground);
  --chart-1: oklch(0.6182 0.1842 256.39);
  --chart-2: oklch(0.7041 0.1885 47.62);
  --chart-3: oklch(0.9114 0.1568 99.61);
  --chart-4: oklch(0.6889 0.1644 152.71);
  --chart-5: oklch(0.6921 0.1789 4.21);
  --transition-duration-fast: 120ms;
  --transition-duration-base: 160ms;
  --transition-duration-slow: 220ms;
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --ease-in: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --default-transition-duration: var(--transition-duration-fast);
  --default-transition-timing-function: var(--ease-out);
  --layout-density: comfortable;
  --layout-density-source: design-system;
  --layout-inset: calc(var(--spacing, 0.25rem) * 6);
  --layout-section-gap: calc(var(--spacing, 0.25rem) * 8);
  --layout-column-gap: calc(var(--spacing, 0.25rem) * 4);
  --layout-card-padding: calc(var(--spacing, 0.25rem) * 5);
  --font-sans: "Archivo", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius-sm: calc(var(--radius) - 0.25rem);
  --radius-md: calc(var(--radius) - 0.125rem);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 0.25rem);
}
*,*::before,*::after{box-sizing:border-box}
:where(.ds){font-family:var(--font-sans,ui-sans-serif,system-ui,sans-serif);color:var(--foreground,oklch(0.2 0 0));background:var(--background,oklch(1 0 0));line-height:1.5}
.ds :where(h1,h2,h3,h4,h5,h6,p,strong,label,legend,li,dt,dd,small){color:inherit}
.ds h1,.ds h2,.ds h3,.ds h4{font-family:inherit;font-weight:600;margin:0 0 .5em;color:var(--foreground,oklch(0.2 0 0));text-wrap:balance}
.ds .ds-display,.ds .ds-section-title,.ds-card-title{font-family:inherit;text-wrap:balance}
.ds .ds-display{font-size:clamp(1.75rem,4vw,2.5rem);font-weight:700;line-height:1.05;letter-spacing:-.03em;margin:0;color:var(--foreground,oklch(0.2 0 0))}
.ds .ds-section-title{font-size:1.25rem;font-weight:600;line-height:1.2;letter-spacing:-.01em;margin:0;color:var(--foreground,oklch(0.2 0 0))}
.ds .ds-supporting,.ds .ds-card-desc,.ds p{font-size:.875rem;font-weight:400;line-height:1.5;color:var(--muted-foreground,oklch(0.55 0 0));margin:0;text-wrap:pretty}
.ds a:not(.ds-btn){color:var(--primary,oklch(0.45 0.15 264));text-decoration:none}
.ds p{margin:0 0 1em}
.ds-muted{color:var(--muted-foreground,oklch(0.55 0 0))}
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:inherit;font-size:.875rem;font-weight:500;line-height:1;padding:.6rem 1rem;border-radius:var(--radius-md,calc(var(--radius,0.5rem) - 2px));border:1px solid transparent;cursor:pointer;touch-action:manipulation;transition:opacity var(--transition-duration-fast,150ms) var(--ease-out,cubic-bezier(0.165, 0.84, 0.44, 1)),background var(--transition-duration-fast,150ms) var(--ease-out,cubic-bezier(0.165, 0.84, 0.44, 1));text-decoration:none}
.ds-btn:focus-visible{outline:2px solid var(--ring,var(--primary,oklch(0.45 0.15 264)));outline-offset:2px}
.ds-btn:disabled{background:var(--muted,oklch(0.94 0 0));color:var(--foreground,oklch(0.2 0 0));border-color:var(--border,oklch(0.85 0 0));opacity:1;cursor:not-allowed}
.ds-btn-primary{background:var(--primary,oklch(0.45 0.15 264));color:var(--primary-foreground,oklch(1 0 0));box-shadow:var(--shadow-sm,var(--shadow-xs,none))}
.ds-btn-secondary{background:var(--secondary,oklch(0.96 0 0));color:var(--secondary-foreground,oklch(0.25 0 0));box-shadow:var(--shadow-xs,none)}
.ds-btn-outline{background:transparent;color:var(--foreground,oklch(0.2 0 0));border-color:var(--border,oklch(0.85 0 0))}
.ds-btn-ghost{background:transparent;color:var(--foreground,oklch(0.2 0 0))}
.ds .ds-btn[aria-pressed="true"],.ds .ds-btn[aria-pressed="true"]:hover{background:var(--primary,oklch(0.45 0.15 264));color:var(--primary-foreground,oklch(1 0 0));border-color:var(--primary,oklch(0.45 0.15 264));opacity:1}
.ds-btn-sm{padding:.4rem .7rem;font-size:.8125rem}
.ds-btn-lg{padding:.75rem 1.4rem;font-size:1rem}
.ds-card{display:flex;flex-direction:column;background:var(--card,var(--background,oklch(1 0 0)));color:var(--card-foreground,var(--foreground,oklch(0.2 0 0)));border:1px solid var(--border,oklch(0.9 0 0));border-radius:var(--radius-xl,calc(var(--radius,0.5rem) + 4px));box-shadow:var(--shadow-glass,var(--shadow-md,var(--shadow-sm,none)));overflow:hidden}
.ds-card-header{padding:1.1rem 1.25rem .5rem}
.ds-card-body{padding:.5rem 1.25rem 1.1rem}
.ds-card-title{font-size:1.05rem;margin:0 0 .25rem}
.ds-card-desc{font-size:.875rem;color:var(--muted-foreground,oklch(0.55 0 0));margin:0}
.ds-badge{display:inline-flex;align-items:center;font-size:.6875rem;font-weight:600;padding:.15rem .55rem;border-radius:999px;background:var(--secondary,oklch(0.9 0 0));color:var(--secondary-foreground,oklch(0.25 0 0));line-height:1.4}
.ds-badge-safe{background:var(--pop-green,oklch(0.92 0.06 150));color:var(--pop-green-foreground,oklch(0.42 0.11 152))}
.ds-badge-danger{background:var(--destructive,oklch(0.58 0.22 32));color:var(--destructive-foreground,oklch(0.99 0 0))}
.ds-divider{height:1px;background:var(--border,oklch(0.9 0 0));border:0;margin:1rem 0}
.ds-row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.ds-chip{display:inline-flex;align-items:center;gap:.35rem;font:inherit;font-size:.8125rem;padding:.3rem .7rem;border-radius:999px;border:1px solid var(--border,oklch(0.88 0 0));background:var(--background,oklch(1 0 0));color:var(--foreground,oklch(0.2 0 0));cursor:pointer;touch-action:manipulation;transition:background-color var(--transition-duration-fast,150ms) var(--ease-out,cubic-bezier(0.165, 0.84, 0.44, 1)),border-color var(--transition-duration-fast,150ms) var(--ease-out,cubic-bezier(0.165, 0.84, 0.44, 1)),color var(--transition-duration-fast,150ms) var(--ease-out,cubic-bezier(0.165, 0.84, 0.44, 1))}
.ds-chip:focus-visible{outline:2px solid var(--ring,var(--primary,oklch(0.45 0.15 264)));outline-offset:2px}
.ds .ds-chip[aria-pressed="true"],.ds .ds-chip[aria-pressed="true"]:hover{background:var(--primary,oklch(0.45 0.15 264));color:var(--primary-foreground,oklch(1 0 0));border-color:var(--primary,oklch(0.45 0.15 264))}
@media (pointer:coarse){
.ds-btn,.ds-tab,.ds-chip{min-height:44px}
}
@media (hover:hover) and (pointer:fine){
.ds a:hover{text-decoration:underline}
.ds a.ds-btn:hover{text-decoration:none}
.ds-btn:hover:not(:disabled):not([aria-pressed="true"]){opacity:.9}
.ds-btn-ghost:hover:not(:disabled):not([aria-pressed="true"]){background:var(--accent,oklch(0.96 0 0));opacity:1}
.ds .ds-chip:hover:not([aria-pressed="true"]){background:color-mix(in oklab,var(--foreground,oklch(0.2 0 0)) 4%,var(--background,oklch(1 0 0)));color:var(--foreground,oklch(0.2 0 0));border-color:color-mix(in oklab,var(--foreground,oklch(0.2 0 0)) 28%,var(--border,oklch(0.88 0 0)))}
}
.ds ::selection{background:var(--primary,oklch(0.45 0.15 264));color:var(--primary-foreground,oklch(1 0 0))}
/* Material Riso */
.ds-btn { border-radius: var(--radius-md, calc(var(--radius, 0.5rem) - 2px)); }
.ds-card { border-radius: var(--radius-lg, var(--radius, 0.5rem)); }
.ds-btn-primary { box-shadow: var(--shadow-hard); }
.ds-card { box-shadow: var(--shadow-hard); }
.ds-badge { display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-md); border:2px solid var(--border); font-weight:700; text-transform:uppercase; letter-spacing:0.025em; box-shadow:var(--shadow-hard-sm); background-color:var(--card); color:var(--foreground) }
.ds-btn { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; white-space:nowrap; font-size:0.875rem;line-height:1.25rem; font-weight:700; border-radius:var(--radius-md); border:2px solid var(--border); transition:all var(--transition-duration-fast) cubic-bezier(0,0,0.2,1) }
.ds-btn:focus-visible { outline:3px solid var(--ring); outline-offset:3px }
.ds-btn:disabled { pointer-events:none; opacity:0.5; box-shadow:none; translate:0 0 }
.ds-btn:active { translate:0.1875rem 0.1875rem; box-shadow:none }
.ds .ds-btn-primary { background-color:var(--primary); color:var(--primary-foreground); box-shadow:var(--shadow-hard) }
.ds .ds-btn-secondary { background-color:var(--card); color:var(--card-foreground); box-shadow:var(--shadow-hard) }
.ds .ds-btn-outline { background-color:transparent; color:var(--foreground) }
.ds .ds-btn-ghost { border-color:transparent; background-color:transparent; color:var(--foreground) }
@media (hover:hover) and (pointer:fine){
.ds .ds-btn-primary:hover, .ds .ds-btn-secondary:hover { translate:-0.0313rem -0.0313rem; box-shadow:var(--shadow-hard) }
.ds .ds-btn-outline:hover, .ds .ds-btn-ghost:hover { background-color:var(--secondary) }
}
.ds-card { border:2px solid var(--border); background-color:var(--card); color:var(--card-foreground) }
/* Aislamiento */
.ds{color:var(--foreground,oklch(0.2 0 0));background:var(--background,oklch(1 0 0))}
.ds :where(h1,h2,h3,h4,h5,h6,p,strong,label,legend,li,dt,dd,small):not(.ds-supporting):not(.ds-card-desc):not(.ds-muted){color:inherit!important}
