Drawer

Panel lateral para filtros, ajustes o detalles.Side panel for filters, settings or details.

DiseñoDesign: coss ui (MIT) · sheet.tsxMITherramienta · densidaddensity media · sobriaMarkdown JSON

CódigoCode

<button class="c-btn c-btn--outline" type="button" commandfor="drawer-filters" command="show-modal">Abrir filtros</button>

<dialog class="c-drawer" id="drawer-filters" aria-labelledby="drawer-title" aria-describedby="drawer-desc" closedby="any">
  <form class="c-drawer__form" method="dialog">
    <div class="c-drawer__header">
      <h2 class="c-drawer__title" id="drawer-title">Filtros</h2>
      <p class="c-drawer__description" id="drawer-desc">Ajusta qué proyectos ves en la lista.</p>
    </div>
    <div class="c-drawer__panel">
      <div class="c-field"><label class="c-label" for="drawer-q">Buscar</label><span class="c-input"><input class="c-input__field" id="drawer-q" type="search" placeholder="Nombre del proyecto"></span></div>
      <div class="c-field"><label class="c-label" for="drawer-owner">Responsable</label><span class="c-input"><input class="c-input__field" id="drawer-owner" placeholder="Cualquiera"></span></div>
    </div>
    <div class="c-drawer__footer">
      <button class="c-btn c-btn--ghost" value="reset">Limpiar</button>
      <button class="c-btn c-btn--primary" value="apply">Aplicar</button>
    </div>
    <button class="c-btn c-btn--ghost c-btn--icon c-drawer__close" type="button" commandfor="drawer-filters" command="close" aria-label="Cerrar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
  </form>
</dialog>

/* drawer · Componentes (MIRÓ Labs). Diseño de coss ui (MIT, © coss.com, antes Origin UI).
   Generado por tools/build_css.py desde drawer.tw.json. No editar a mano. Necesita tokens.css. */
.c-drawer__close{position:absolute;inset-inline-end:calc(var(--spacing)*2);top:calc(var(--spacing)*2)}
.c-drawer__footer{margin-top:auto}
.c-drawer{display:flex}
.c-drawer__header{display:flex}
.c-drawer__footer{display:flex}
.c-drawer{max-height:100%;min-height:calc(var(--spacing)*0);width:calc(100% - (calc(var(--spacing)*12)));width:100%;max-width:var(--container-md);min-width:calc(var(--spacing)*0);flex-direction:column}
.c-drawer__header{flex-direction:column}
.c-drawer__footer{flex-direction:column-reverse}
.c-drawer__header{gap:calc(var(--spacing)*2)}
.c-drawer__footer{gap:calc(var(--spacing)*2)}
.c-drawer{border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px;background-color:var(--popover)}
.c-drawer__header{padding:calc(var(--spacing)*6)}
.c-drawer__panel{padding:calc(var(--spacing)*6)}
.c-drawer__footer{padding-inline:calc(var(--spacing)*6)}
.c-drawer__panel{padding-top:calc(var(--spacing)*1)}
.c-drawer__footer{padding-top:calc(var(--spacing)*4);padding-bottom:calc(var(--spacing)*6)}
.c-drawer__description{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}
.c-drawer__title{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));--tw-leading:1;line-height:1;--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}
.c-drawer__description{color:var(--muted-foreground)}
.c-drawer{color:var(--popover-foreground);--tw-shadow-alpha:5%;--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000000d),0 4px 6px -4px var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
@supports (color:lab(0% 0 0)){
.c-drawer{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,lab(0% 0 0/.05)),0 4px 6px -4px var(--tw-shadow-color,lab(0% 0 0/.05))}
}
.c-drawer{transition-property:opacity,translate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.2s;transition-duration:.2s;--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out);will-change:transform}
.c-drawer:not(:is(.dark *)){background-clip:padding-box}
.c-drawer:before{content:var(--tw-content);pointer-events:none;content:var(--tw-content);position:absolute;content:var(--tw-content);inset:calc(var(--spacing)*0);content:var(--tw-content);--tw-shadow:0 1px var(--tw-shadow-color,#0000000a)}
@supports (color:color-mix(in lab, red, red)){
.c-drawer:before{--tw-shadow:0 1px var(--tw-shadow-color,color-mix(in oklab,var(--color-black)4%,transparent))}
}
.c-drawer:before{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
@media not all and (min-width:40rem){
.c-drawer__header{padding-bottom:calc(var(--spacing)*4)}
.c-drawer:before{content:var(--tw-content);display:none}
}
@media (min-width:40rem){
.c-drawer__footer{flex-direction:row;justify-content:flex-end}
}
.c-drawer:is(.dark *):before{content:var(--tw-content);--tw-shadow:0 -1px var(--tw-shadow-color,#ffffff0f)}
@supports (color:color-mix(in lab, red, red)){
.c-drawer:is(.dark *):before{--tw-shadow:0 -1px var(--tw-shadow-color,color-mix(in oklab,var(--color-white)6%,transparent))}
}
.c-drawer:is(.dark *):before{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
/* propio */
.c-drawer{position:fixed;padding:0;margin:0 0 0 auto;height:100dvh;max-height:100dvh;color:var(--popover-foreground);opacity:0;translate:2rem 0;transition:opacity .2s ease-in-out,translate .2s ease-in-out,overlay .2s allow-discrete,display .2s allow-discrete}
.c-drawer[open]{display:flex;opacity:1;translate:0 0}
@starting-style{.c-drawer[open]{opacity:0;translate:2rem 0}}
.c-drawer::backdrop{background:color-mix(in oklab,#000 32%,transparent);backdrop-filter:blur(4px);opacity:0;transition:opacity .2s,overlay .2s allow-discrete,display .2s allow-discrete}
.c-drawer[open]::backdrop{opacity:1}
@starting-style{.c-drawer[open]::backdrop{opacity:0}}
.c-drawer__close{position:absolute}
.c-drawer__form{display:contents}
.c-drawer__panel{display:grid;gap:1rem;overflow-y:auto}
html:has(.c-drawer[open]:modal){overflow:hidden}

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Drawer · Componentes</title>
<!-- Drawer · Componentes (MIRÓ Labs) · MIT · https://componentes-lovat.vercel.app/c/drawer/
     Diseño: coss ui (MIT) · sheet.tsx -->
<script>(function(){var d=document.documentElement,p=new URLSearchParams(location.search),q=p.get('theme');d.classList.toggle('dark',q?q==='dark':matchMedia('(prefers-color-scheme: dark)').matches);if(self!==top)d.classList.add('embed');addEventListener('message',function(e){if(e.data&&e.data.type==='componentes:theme')d.classList.toggle('dark',!!e.data.dark)});if(p.has('thumb'))addEventListener('load',function(){setTimeout(function(){try{document.getElementById('drawer-filters').showModal();document.activeElement.blur()}catch(e){}},250)});})();</script>
<style>
/* Componentes (MIRÓ Labs) · tokens. Tema de coss ui (MIT, © coss.com, antes Origin UI).
   Generado por tools/build_css.py. Tema oscuro: clase .dark en <html> (los componentes usan esa clase).
   Letra: la del sistema; cambia --font-sans para usar otra. */
:root{--animate-spin:spin 1s linear infinite;--aspect-video:16/9;--color-amber-400:lab(80.1641% 16.6016 99.2089);--color-amber-500:lab(72.7183% 31.8672 97.9407);--color-amber-700:lab(47.2709% 42.9082 69.2966);--color-background:var(--background);--color-black:#000;--color-blue-400:lab(65.0361% -1.42065 -56.9802);--color-blue-500:lab(54.1736% 13.3369 -74.6839);--color-blue-700:lab(36.9089% 35.0961 -85.6872);--color-card:var(--card);--color-card-foreground:var(--card-foreground);--color-cyan-900:lab(30.372% -13.1853 -18.7887);--color-emerald-400:lab(75.0771% -60.7313 19.4147);--color-emerald-500:lab(66.9756% -58.27 19.5419);--color-emerald-700:lab(44.4871% -41.0396 11.0361);--color-foreground:var(--foreground);--color-muted:var(--muted);--color-muted-foreground:var(--muted-foreground);--color-neutral-100:lab(96.52% -.0000298023 .0000119209);--color-neutral-400:lab(66.128% -.0000298023 .0000119209);--color-neutral-50:lab(98.26% 0 0);--color-neutral-500:lab(48.496% 0 0);--color-neutral-800:lab(15.204% 0 -.00000596046);--color-neutral-950:lab(2.75381% 0 0);--color-orange-600:lab(57.1026% 64.2584 89.8886);--color-primary:var(--primary);--color-purple-500:lab(52.0183% 66.11 -78.2316);--color-red-400:lab(63.7053% 60.745 31.3109);--color-red-500:lab(55.4814% 75.0732 48.8528);--color-red-700:lab(40.4273% 67.2623 53.7441);--color-rose-500:lab(56.101% 79.4328 31.4532);--color-teal-600:lab(55.0223% -41.0774 -3.90277);--color-white:#fff;--container-2xl:42rem;--container-3xl:48rem;--container-5xl:64rem;--container-lg:32rem;--container-md:28rem;--container-sm:24rem;--container-xl:36rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--ease-in-out:cubic-bezier(.4,0,.2,1);--font-weight-bold:700;--font-weight-medium:500;--font-weight-normal:400;--font-weight-semibold:600;--radius-2xl:1rem;--radius-lg:var(--radius);--radius-md:calc(var(--radius) - 2px);--radius-xl:calc(var(--radius) + 4px);--spacing:.25rem;--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25/1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5/2.25);--text-5xl:3rem;--text-5xl--line-height:1;--text-base:1rem;--text-base--line-height:calc(1.5/1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--tracking-tight:-.025em;--tracking-widest:.1em;--tw-shadow-color:#000}
:root{--font-sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;--font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
:root{--radius:.625rem;--background:var(--color-white);--foreground:var(--color-neutral-800);--card:var(--color-white);--card-foreground:var(--color-neutral-800);--popover:var(--color-white);--popover-foreground:var(--color-neutral-800);--primary:var(--color-neutral-800);--primary-foreground:var(--color-neutral-50);--secondary:#0000000a}
@supports (color:color-mix(in lab, red, red)){:root{--secondary:color-mix(in oklab,var(--color-black)4%,transparent)}}
:root{--secondary-foreground:var(--color-neutral-800);--muted:#0000000a}
@supports (color:color-mix(in lab, red, red)){:root{--muted:color-mix(in oklab,var(--color-black)4%,transparent)}}
:root{--muted-foreground:#686868}
@supports (color:color-mix(in lab, red, red)){:root{--muted-foreground:color-mix(in srgb,var(--color-neutral-500)90%,var(--color-black))}}
:root{--accent:#0000000a}
@supports (color:color-mix(in lab, red, red)){:root{--accent:color-mix(in oklab,var(--color-black)4%,transparent)}}
:root{--accent-foreground:var(--color-neutral-800);--destructive:var(--color-red-500);--destructive-foreground:var(--color-red-700);--info:var(--color-blue-500);--info-foreground:var(--color-blue-700);--success:var(--color-emerald-500);--success-foreground:var(--color-emerald-700);--warning:var(--color-amber-500);--warning-foreground:var(--color-amber-700);--border:#00000014}
@supports (color:color-mix(in lab, red, red)){:root{--border:color-mix(in oklab,var(--color-black)8%,transparent)}}
:root{--input:#0000001a}
@supports (color:color-mix(in lab, red, red)){:root{--input:color-mix(in oklab,var(--color-black)10%,transparent)}}
:root{--ring:var(--color-neutral-400);--chart-1:var(--color-orange-600);--chart-2:var(--color-teal-600);--chart-3:var(--color-cyan-900);--chart-4:var(--color-amber-400);--chart-5:var(--color-amber-500);--sidebar:var(--color-neutral-50);--sidebar-foreground:#262626}
@supports (color:lab(0% 0 0)){:root{--sidebar-foreground:lab(15.204% 0 -.00000596046)}}
@supports (color:color-mix(in lab, red, red)){:root{--sidebar-foreground:color-mix(in srgb,var(--color-neutral-800)64%,var(--sidebar))}}
:root{--sidebar-primary:var(--color-neutral-800);--sidebar-primary-foreground:var(--color-neutral-50);--sidebar-accent:#0000000a}
@supports (color:color-mix(in lab, red, red)){:root{--sidebar-accent:color-mix(in oklab,var(--color-black)4%,transparent)}}
:root{--sidebar-accent-foreground:var(--color-neutral-800);--sidebar-border:#0000000f}
@supports (color:color-mix(in lab, red, red)){:root{--sidebar-border:color-mix(in oklab,var(--color-black)6%,transparent)}}
:root{--sidebar-ring:var(--color-neutral-400);--code:var(--color-white);--code-foreground:var(--foreground);--code-highlight:#0000000a}
@supports (color:color-mix(in lab, red, red)){:root{--code-highlight:color-mix(in oklab,var(--color-black)4%,transparent)}}
.dark{--background:#141414}
@supports (color:color-mix(in lab, red, red)){.dark{--background:color-mix(in srgb,var(--color-neutral-950)96%,var(--color-white))}}
.dark{--foreground:var(--color-neutral-100);--card:var(--background)}
@supports (color:color-mix(in lab, red, red)){.dark{--card:color-mix(in srgb,var(--background)98%,var(--color-white))}}
.dark{--card-foreground:var(--color-neutral-100);--popover:var(--background)}
@supports (color:color-mix(in lab, red, red)){.dark{--popover:color-mix(in srgb,var(--background)96%,var(--color-white))}}
.dark{--popover-foreground:var(--color-neutral-100);--primary:var(--color-neutral-100);--primary-foreground:var(--color-neutral-800);--secondary:#ffffff0a}
@supports (color:color-mix(in lab, red, red)){.dark{--secondary:color-mix(in oklab,var(--color-white)4%,transparent)}}
.dark{--secondary-foreground:var(--color-neutral-100);--muted:#ffffff0a}
@supports (color:color-mix(in lab, red, red)){.dark{--muted:color-mix(in oklab,var(--color-white)4%,transparent)}}
.dark{--muted-foreground:#818181}
@supports (color:color-mix(in lab, red, red)){.dark{--muted-foreground:color-mix(in srgb,var(--color-neutral-500)90%,var(--color-white))}}
.dark{--accent:#ffffff0a}
@supports (color:color-mix(in lab, red, red)){.dark{--accent:color-mix(in oklab,var(--color-white)4%,transparent)}}
.dark{--accent-foreground:var(--color-neutral-100);--destructive:#fb414a}
@supports (color:color-mix(in lab, red, red)){.dark{--destructive:color-mix(in srgb,var(--color-red-500)90%,var(--color-white))}}
.dark{--destructive-foreground:var(--color-red-400);--info:var(--color-blue-500);--info-foreground:var(--color-blue-400);--success:var(--color-emerald-500);--success-foreground:var(--color-emerald-400);--warning:var(--color-amber-500);--warning-foreground:var(--color-amber-400);--border:#ffffff0f}
@supports (color:color-mix(in lab, red, red)){.dark{--border:color-mix(in oklab,var(--color-white)6%,transparent)}}
.dark{--input:#ffffff14}
@supports (color:color-mix(in lab, red, red)){.dark{--input:color-mix(in oklab,var(--color-white)8%,transparent)}}
.dark{--ring:var(--color-neutral-500);--chart-1:var(--color-blue-700);--chart-2:var(--color-emerald-500);--chart-3:var(--color-amber-500);--chart-4:var(--color-purple-500);--chart-5:var(--color-rose-500);--sidebar:#111}
@supports (color:color-mix(in lab, red, red)){.dark{--sidebar:color-mix(in srgb,var(--color-neutral-950)97%,var(--color-white))}}
.dark{--sidebar-foreground:#f5f5f5}
@supports (color:lab(0% 0 0)){.dark{--sidebar-foreground:lab(96.52% -.0000298023 .0000119209)}}
@supports (color:color-mix(in lab, red, red)){.dark{--sidebar-foreground:color-mix(in srgb,var(--color-neutral-100)64%,var(--sidebar))}}
.dark{--sidebar-primary:var(--color-neutral-100);--sidebar-primary-foreground:var(--color-neutral-800);--sidebar-accent:#ffffff0a}
@supports (color:color-mix(in lab, red, red)){.dark{--sidebar-accent:color-mix(in oklab,var(--color-white)4%,transparent)}}
.dark{--sidebar-accent-foreground:var(--color-neutral-100);--sidebar-border:#ffffff0d}
@supports (color:color-mix(in lab, red, red)){.dark{--sidebar-border:color-mix(in oklab,var(--color-white)5%,transparent)}}
.dark{--sidebar-ring:var(--color-neutral-400);--code:var(--background)}
@supports (color:color-mix(in lab, red, red)){.dark{--code:color-mix(in srgb,var(--background)98%,var(--color-white))}}
.dark{--code-foreground:var(--foreground);--code-highlight:#ffffff0a}
@supports (color:color-mix(in lab, red, red)){.dark{--code-highlight:color-mix(in oklab,var(--color-white)4%,transparent)}}
:where([class*="c-"], [class*="c-"] *, [class*="c-"]::before, [class*="c-"]::after, [class*="c-"] *::before, [class*="c-"] *::after){box-sizing:border-box;border:0 solid;margin:0;padding:0}
:where([class*="c-"]) :where(button,input,select,textarea,optgroup){font:inherit;font-feature-settings:inherit;letter-spacing:inherit;color:inherit;background-color:transparent;border-radius:0}
:where([class*="c-"]) :where(button,[type=button],[type=reset],[type=submit]){appearance:button}
:where([class*="c-"]) :where(img,svg,video,canvas){display:block;vertical-align:middle}
:where([class*="c-"]) :where(a){color:inherit;text-decoration:inherit}
:where([class*="c-"]) :where(ol,ul,menu){list-style:none}
:where([class*="c-"]) :where(table){text-indent:0;border-color:inherit;border-collapse:collapse}
:where([class*="c-"]) :where([hidden]:not([hidden=until-found])){display:none!important}
:where([class*="c-"]){border-color:var(--border);outline-color:var(--ring)}
:where([class*="c-"], [class*="c-"] *, [class*="c-"]::before, [class*="c-"]::after, [class*="c-"] *::before, [class*="c-"] *::after){--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-divide-x-reverse:0;--tw-border-style:solid;--tw-divide-y-reverse:0;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-mask-linear:linear-gradient(#fff,#fff);--tw-mask-radial:linear-gradient(#fff,#fff);--tw-mask-conic:linear-gradient(#fff,#fff);--tw-mask-left:linear-gradient(#fff,#fff);--tw-mask-right:linear-gradient(#fff,#fff);--tw-mask-bottom:linear-gradient(#fff,#fff);--tw-mask-top:linear-gradient(#fff,#fff);--tw-mask-top-from-position:0%;--tw-mask-top-to-position:100%;--tw-mask-top-from-color:black;--tw-mask-top-to-color:transparent;--tw-mask-right-from-position:0%;--tw-mask-right-to-position:100%;--tw-mask-right-from-color:black;--tw-mask-right-to-color:transparent;--tw-mask-bottom-from-position:0%;--tw-mask-bottom-to-position:100%;--tw-mask-bottom-from-color:black;--tw-mask-bottom-to-color:transparent;--tw-mask-left-from-position:0%;--tw-mask-left-to-position:100%;--tw-mask-left-from-color:black;--tw-mask-left-to-color:transparent;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-content:"";--tw-border-spacing-x:0;--tw-border-spacing-y:0}
@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}
@property --tw-content{syntax:"*";inherits:false;initial-value:""}
@property --tw-duration{syntax:"*";inherits:false}
@property --tw-ease{syntax:"*";inherits:false}
@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}
@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}
@property --tw-inset-shadow-color{syntax:"*";inherits:false}
@property --tw-leading{syntax:"*";inherits:false}
@property --tw-ring-color{syntax:"*";inherits:false}
@property --tw-ring-inset{syntax:"*";inherits:false}
@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}
@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}
@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}
@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}
@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}
@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}
@property --tw-shadow-color{syntax:"*";inherits:false}
@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}
@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}
@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){:where([class*="c-"], [class*="c-"] *){animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}}

/* button · Componentes (MIRÓ Labs). Diseño de coss ui (MIT, © coss.com, antes Origin UI).
   Generado por tools/build_css.py desde button.tw.json. No editar a mano. Necesita tokens.css. */
.c-btn__spinner{pointer-events:none;position:absolute}
.c-btn{position:relative;display:inline-flex}
.c-btn--icon{width:calc(var(--spacing)*9);height:calc(var(--spacing)*9)}
.c-btn--sm{height:calc(var(--spacing)*8)}
.c-btn{height:calc(var(--spacing)*9)}
.c-btn--lg{height:calc(var(--spacing)*10)}
.c-btn{flex-shrink:0}
.c-btn__spinner{animation:var(--animate-spin)}
.c-btn{cursor:pointer;align-items:center;justify-content:center}
.c-btn--sm{gap:calc(var(--spacing)*1.5)}
.c-btn{gap:calc(var(--spacing)*2);border-radius:var(--radius);border-style:var(--tw-border-style);border-width:1px}
.c-btn--destructive{border-color:var(--destructive)}
.c-btn--outline{border-color:var(--input)}
.c-btn--primary{border-color:var(--primary)}
.c-btn--secondary{border-color:#0000}
.c-btn--ghost{border-color:#0000}
.c-btn--link{border-color:#0000}
.c-btn--destructive{background-color:var(--destructive)}
.c-btn--outline{background-color:var(--popover)}
.c-btn--primary{background-color:var(--primary)}
.c-btn--secondary{background-color:var(--secondary)}
.c-btn--icon{padding-inline:calc(var(--spacing)*0)}
.c-btn--sm{padding-inline:calc(calc(var(--spacing)*2.5) - 1px)}
.c-btn{padding-inline:calc(calc(var(--spacing)*3) - 1px)}
.c-btn--lg{padding-inline:calc(calc(var(--spacing)*3.5) - 1px)}
.c-btn{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);white-space:nowrap}
.c-btn--outline{color:var(--foreground)}
.c-btn--ghost{color:var(--foreground)}
.c-btn--link{color:var(--foreground)}
.c-btn--primary{color:var(--primary-foreground)}
.c-btn--secondary{color:var(--secondary-foreground)}
.c-btn--destructive{color:var(--color-white)}
.c-btn--link{text-underline-offset:4px}
.c-btn--outline{--tw-shadow-alpha:5%;--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
@supports (color:lab(0% 0 0)){
.c-btn--outline{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,lab(0% 0 0/.05))}
}
.c-btn--primary{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
.c-btn--destructive{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color:var(--destructive)}
@supports (color:color-mix(in lab, red, red)){
.c-btn--destructive{--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--destructive)24%,transparent)var(--tw-shadow-alpha),transparent)}
}
.c-btn--primary{--tw-shadow-color:var(--primary)}
@supports (color:color-mix(in lab, red, red)){
.c-btn--primary{--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--primary)24%,transparent)var(--tw-shadow-alpha),transparent)}
}
.c-btn{transition-property:box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-outline-style:none;outline-style:none}
.c-btn--primary:not(:disabled){--tw-inset-shadow:inset 0 1px var(--tw-inset-shadow-color,#ffffff29)}
.c-btn--destructive:not(:disabled){--tw-inset-shadow:inset 0 1px var(--tw-inset-shadow-color,#ffffff29)}
@supports (color:color-mix(in lab, red, red)){
.c-btn--primary:not(:disabled){--tw-inset-shadow:inset 0 1px var(--tw-inset-shadow-color,color-mix(in oklab,var(--color-white)16%,transparent))}
.c-btn--destructive:not(:disabled){--tw-inset-shadow:inset 0 1px var(--tw-inset-shadow-color,color-mix(in oklab,var(--color-white)16%,transparent))}
}
.c-btn--primary:not(:disabled){box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
.c-btn--destructive:not(:disabled){box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
.c-btn--outline:not(:is(.dark *)){background-clip:padding-box}
.c-btn:before{content:var(--tw-content);pointer-events:none;content:var(--tw-content);position:absolute;content:var(--tw-content);inset:calc(var(--spacing)*0);content:var(--tw-content);border-radius:calc(var(--radius-lg) - 1px)}
.c-btn--outline:not(:disabled):not(:active):not([data-pressed]):before{content:var(--tw-content);--tw-shadow:0 1px var(--tw-shadow-color,#0000000a)}
@supports (color:color-mix(in lab, red, red)){
.c-btn--outline:not(:disabled):not(:active):not([data-pressed]):before{--tw-shadow:0 1px var(--tw-shadow-color,color-mix(in oklab,var(--color-black)4%,transparent))}
}
.c-btn--outline:not(:disabled):not(:active):not([data-pressed]):before{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
@media (hover:hover){
.c-btn--outline:hover{background-color:var(--accent)}
.c-btn--ghost:hover{background-color:var(--accent)}
}
@media (hover:hover){
@supports (color:color-mix(in lab, red, red)){
.c-btn--outline:hover{background-color:color-mix(in oklab,var(--accent)50%,transparent)}
}}
@media (hover:hover){
.c-btn--destructive:hover{background-color:var(--destructive)}
}
@media (hover:hover){
@supports (color:color-mix(in lab, red, red)){
.c-btn--destructive:hover{background-color:color-mix(in oklab,var(--destructive)90%,transparent)}
}}
@media (hover:hover){
.c-btn--primary:hover{background-color:var(--primary)}
}
@media (hover:hover){
@supports (color:color-mix(in lab, red, red)){
.c-btn--primary:hover{background-color:color-mix(in oklab,var(--primary)90%,transparent)}
}}
@media (hover:hover){
.c-btn--secondary:hover{background-color:var(--secondary)}
}
@media (hover:hover){
@supports (color:color-mix(in lab, red, red)){
.c-btn--secondary:hover{background-color:color-mix(in oklab,var(--secondary)90%,transparent)}
}}
@media (hover:hover){
.c-btn--link:hover{text-decoration-line:underline}
}
.c-btn:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color:var(--ring);--tw-ring-offset-width:1px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background)}
.c-btn:disabled{pointer-events:none;opacity:.64}
.c-btn[data-loading]{color:#0000;-webkit-user-select:none;user-select:none}
.c-btn--outline[data-pressed]{background-color:var(--accent)}
.c-btn--ghost[data-pressed]{background-color:var(--accent)}
@supports (color:color-mix(in lab, red, red)){
.c-btn--outline[data-pressed]{background-color:color-mix(in oklab,var(--accent)50%,transparent)}
}
.c-btn--destructive[data-pressed]{background-color:var(--destructive)}
@supports (color:color-mix(in lab, red, red)){
.c-btn--destructive[data-pressed]{background-color:color-mix(in oklab,var(--destructive)90%,transparent)}
}
.c-btn--primary[data-pressed]{background-color:var(--primary)}
@supports (color:color-mix(in lab, red, red)){
.c-btn--primary[data-pressed]{background-color:color-mix(in oklab,var(--primary)90%,transparent)}
}
.c-btn--secondary[data-pressed]{background-color:var(--secondary)}
@supports (color:color-mix(in lab, red, red)){
.c-btn--secondary[data-pressed]{background-color:color-mix(in oklab,var(--secondary)90%,transparent)}
}
.c-btn--link[data-pressed]{text-decoration-line:underline}
@media (min-width:40rem){
.c-btn--icon{width:calc(var(--spacing)*8);height:calc(var(--spacing)*8)}
.c-btn--sm{height:calc(var(--spacing)*7)}
.c-btn{height:calc(var(--spacing)*8)}
.c-btn--lg{height:calc(var(--spacing)*9)}
.c-btn{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}
}
.c-btn--outline:is(.dark *){background-color:var(--input)}
@supports (color:color-mix(in lab, red, red)){
.c-btn--outline:is(.dark *){background-color:color-mix(in oklab,var(--input)32%,transparent)}
}
.c-btn--outline:is(.dark *):not(:disabled):before{content:var(--tw-content);--tw-shadow:0 -1px var(--tw-shadow-color,#ffffff05)}
@supports (color:color-mix(in lab, red, red)){
.c-btn--outline:is(.dark *):not(:disabled):before{--tw-shadow:0 -1px var(--tw-shadow-color,color-mix(in oklab,var(--color-white)2%,transparent))}
}
.c-btn--outline:is(.dark *):not(:disabled):before{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
.c-btn--outline:is(.dark *):not(:disabled):not(:active):not([data-pressed]):before{content:var(--tw-content);--tw-shadow:0 -1px var(--tw-shadow-color,#ffffff0f)}
@supports (color:color-mix(in lab, red, red)){
.c-btn--outline:is(.dark *):not(:disabled):not(:active):not([data-pressed]):before{--tw-shadow:0 -1px var(--tw-shadow-color,color-mix(in oklab,var(--color-white)6%,transparent))}
}
.c-btn--outline:is(.dark *):not(:disabled):not(:active):not([data-pressed]):before{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
@media (hover:hover){
.c-btn--outline:is(.dark *):hover{background-color:var(--input)}
}
@media (hover:hover){
@supports (color:color-mix(in lab, red, red)){
.c-btn--outline:is(.dark *):hover{background-color:color-mix(in oklab,var(--input)64%,transparent)}
}}
.c-btn--outline:is(.dark *)[data-pressed]{background-color:var(--input)}
@supports (color:color-mix(in lab, red, red)){
.c-btn--outline:is(.dark *)[data-pressed]{background-color:color-mix(in oklab,var(--input)64%,transparent)}
}
@media (pointer:coarse){
.c-btn:after{content:var(--tw-content);position:absolute;content:var(--tw-content);width:100%;height:100%;content:var(--tw-content);min-height:calc(var(--spacing)*11);content:var(--tw-content);min-width:calc(var(--spacing)*11)}
}
.c-btn svg{pointer-events:none;margin-inline:calc(var(--spacing)*-.5);flex-shrink:0}
.c-btn svg:not([class*=opacity-]){opacity:.8}
.c-btn svg:not([class*=size-]){width:calc(var(--spacing)*4.5);height:calc(var(--spacing)*4.5)}
@media (min-width:40rem){
.c-btn svg:not([class*=size-]){width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}
}
.c-btn--secondary:is(:active,[data-pressed]){background-color:var(--secondary)}
@supports (color:color-mix(in lab, red, red)){
.c-btn--secondary:is(:active,[data-pressed]){background-color:color-mix(in oklab,var(--secondary)80%,transparent)}
}
.c-btn--primary:is(:active,[data-pressed]){--tw-inset-shadow:inset 0 1px var(--tw-inset-shadow-color,#00000014)}
.c-btn--destructive:is(:active,[data-pressed]){--tw-inset-shadow:inset 0 1px var(--tw-inset-shadow-color,#00000014)}
@supports (color:color-mix(in lab, red, red)){
.c-btn--primary:is(:active,[data-pressed]){--tw-inset-shadow:inset 0 1px var(--tw-inset-shadow-color,color-mix(in oklab,var(--color-black)8%,transparent))}
.c-btn--destructive:is(:active,[data-pressed]){--tw-inset-shadow:inset 0 1px var(--tw-inset-shadow-color,color-mix(in oklab,var(--color-black)8%,transparent))}
}
.c-btn--primary:is(:active,[data-pressed]){box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
.c-btn--destructive:is(:active,[data-pressed]){box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
.c-btn--primary:is(:disabled,:active,[data-pressed]){--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
.c-btn--destructive:is(:disabled,:active,[data-pressed]){--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
.c-btn--outline:is(:disabled,:active,[data-pressed]){--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
/* propio */
.c-btn__spinner{display:none;color:var(--foreground)}
.c-btn[data-loading] .c-btn__spinner{display:block}
.c-btn--primary .c-btn__spinner{color:var(--primary-foreground)}
.c-btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.c-btn[aria-disabled=true]{cursor:progress}
.c-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* text-field · Componentes (MIRÓ Labs). Diseño de coss ui (MIT, © coss.com, antes Origin UI).
   Generado por tools/build_css.py desde text-field.tw.json. No editar a mano. Necesita tokens.css. */
.c-input{position:relative}
.c-textarea{position:relative}
.c-field{display:flex}
.c-label{display:inline-flex}
.c-input{display:inline-flex}
.c-textarea{display:inline-flex}
.c-textarea__field{field-sizing:content}
.c-input__field{height:calc(var(--spacing)*8.5)}
.c-textarea__field{min-height:calc(var(--spacing)*17.5)}
.c-input{width:100%}
.c-input__field{width:100%}
.c-textarea{width:100%}
.c-textarea__field{width:100%}
.c-input__field{min-width:calc(var(--spacing)*0)}
.c-field{flex-direction:column}
.c-label{align-items:center}
.c-field{align-items:flex-start;gap:calc(var(--spacing)*2)}
.c-label{gap:calc(var(--spacing)*2)}
.c-input__field{border-radius:inherit}
.c-textarea__field{border-radius:inherit}
.c-input{border-radius:var(--radius)}
.c-textarea{border-radius:var(--radius)}
.c-input{border-style:var(--tw-border-style);border-width:1px}
.c-textarea{border-style:var(--tw-border-style);border-width:1px}
.c-input{border-color:var(--input)}
.c-textarea{border-color:var(--input)}
.c-input{background-color:var(--background)}
.c-textarea{background-color:var(--background)}
.c-input__field{padding-inline:calc(calc(var(--spacing)*3) - 1px)}
.c-textarea__field{padding-inline:calc(calc(var(--spacing)*3) - 1px);padding-block:calc(calc(var(--spacing)*1.5) - 1px)}
.c-input{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}
.c-textarea{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}
.c-label{font-size:var(--text-base);line-height:calc(var(--spacing)*4.5)}
.c-field__description{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}
.c-field__error{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}
.c-input__field{--tw-leading:calc(var(--spacing)*8.5);line-height:calc(var(--spacing)*8.5)}
.c-label{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}
.c-field__error{color:var(--destructive-foreground)}
.c-label{color:var(--foreground)}
.c-input__field{color:var(--foreground)}
.c-textarea__field{color:var(--foreground)}
.c-field__description{color:var(--muted-foreground)}
.c-input{--tw-shadow-alpha:5%;--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
.c-textarea{--tw-shadow-alpha:5%;--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
@supports (color:lab(0% 0 0)){
.c-input{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,lab(0% 0 0/.05))}
.c-textarea{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,lab(0% 0 0/.05))}
}
.c-input{--tw-ring-color:var(--ring)}
.c-textarea{--tw-ring-color:var(--ring)}
@supports (color:color-mix(in lab, red, red)){
.c-input{--tw-ring-color:color-mix(in oklab,var(--ring)24%,transparent)}
.c-textarea{--tw-ring-color:color-mix(in oklab,var(--ring)24%,transparent)}
}
.c-input{transition-property:box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}
.c-textarea{transition-property:box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}
.c-input__field{--tw-outline-style:none;outline-style:none}
.c-textarea__field{--tw-outline-style:none;outline-style:none}
.c-input:not(:is(.dark *)){background-clip:padding-box}
.c-textarea:not(:is(.dark *)){background-clip:padding-box}
.c-input__field::placeholder{color:var(--muted-foreground)}
.c-textarea__field::placeholder{color:var(--muted-foreground)}
@supports (color:color-mix(in lab, red, red)){
.c-input__field::placeholder{color:color-mix(in oklab,var(--muted-foreground)72%,transparent)}
.c-textarea__field::placeholder{color:color-mix(in oklab,var(--muted-foreground)72%,transparent)}
}
.c-input:before{content:var(--tw-content);pointer-events:none}
.c-textarea:before{content:var(--tw-content);pointer-events:none}
.c-input:before{content:var(--tw-content);position:absolute}
.c-textarea:before{content:var(--tw-content);position:absolute}
.c-input:before{content:var(--tw-content);inset:calc(var(--spacing)*0)}
.c-textarea:before{content:var(--tw-content);inset:calc(var(--spacing)*0)}
.c-input:before{content:var(--tw-content);border-radius:calc(var(--radius-lg) - 1px)}
.c-textarea:before{content:var(--tw-content);border-radius:calc(var(--radius-lg) - 1px)}
.c-input:not(:has(:disabled)):not(:has(:focus-visible)):not(:has([aria-invalid=true])):before{content:var(--tw-content);--tw-shadow:0 1px var(--tw-shadow-color,#0000000a)}
@supports (color:color-mix(in lab, red, red)){
.c-input:not(:has(:disabled)):not(:has(:focus-visible)):not(:has([aria-invalid=true])):before{--tw-shadow:0 1px var(--tw-shadow-color,color-mix(in oklab,var(--color-black)4%,transparent))}
}
.c-input:not(:has(:disabled)):not(:has(:focus-visible)):not(:has([aria-invalid=true])):before{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
.c-textarea:not(:has(:disabled)):has(:not(:focus-visible)):not(:has([aria-invalid=true])):before{content:var(--tw-content);--tw-shadow:0 1px var(--tw-shadow-color,#0000000a)}
@supports (color:color-mix(in lab, red, red)){
.c-textarea:not(:has(:disabled)):has(:not(:focus-visible)):not(:has([aria-invalid=true])):before{--tw-shadow:0 1px var(--tw-shadow-color,color-mix(in oklab,var(--color-black)4%,transparent))}
}
.c-textarea:not(:has(:disabled)):has(:not(:focus-visible)):not(:has([aria-invalid=true])):before{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
.c-input:has(:autofill){background-color:var(--foreground)}
@supports (color:color-mix(in lab, red, red)){
.c-input:has(:autofill){background-color:color-mix(in oklab,var(--foreground)4%,transparent)}
}
.c-input:has(:focus-visible){border-color:var(--ring)}
.c-textarea:has(:focus-visible){border-color:var(--ring)}
.c-input:has(:focus-visible){--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(3px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
.c-textarea:has(:focus-visible){--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(3px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
.c-input:has(:disabled){opacity:.64}
.c-textarea:has(:disabled){opacity:.64}
.c-input:has([aria-invalid=true]){border-color:var(--destructive)}
.c-textarea:has([aria-invalid=true]){border-color:var(--destructive)}
@supports (color:color-mix(in lab, red, red)){
.c-input:has([aria-invalid=true]){border-color:color-mix(in oklab,var(--destructive)36%,transparent)}
.c-textarea:has([aria-invalid=true]){border-color:color-mix(in oklab,var(--destructive)36%,transparent)}
}
.c-input:has(:focus-visible):has([aria-invalid=true]){border-color:var(--destructive)}
.c-textarea:has(:focus-visible):has([aria-invalid=true]){border-color:var(--destructive)}
@supports (color:color-mix(in lab, red, red)){
.c-input:has(:focus-visible):has([aria-invalid=true]){border-color:color-mix(in oklab,var(--destructive)64%,transparent)}
.c-textarea:has(:focus-visible):has([aria-invalid=true]){border-color:color-mix(in oklab,var(--destructive)64%,transparent)}
}
.c-input:has(:focus-visible):has([aria-invalid=true]){--tw-ring-color:var(--destructive)}
.c-textarea:has(:focus-visible):has([aria-invalid=true]){--tw-ring-color:var(--destructive)}
@supports (color:color-mix(in lab, red, red)){
.c-input:has(:focus-visible):has([aria-invalid=true]){--tw-ring-color:color-mix(in oklab,var(--destructive)16%,transparent)}
.c-textarea:has(:focus-visible):has([aria-invalid=true]){--tw-ring-color:color-mix(in oklab,var(--destructive)16%,transparent)}
}
@media not all and (min-width:40rem){
.c-textarea__field{min-height:calc(var(--spacing)*20.5)}
}
@media (min-width:40rem){
.c-input__field{height:calc(var(--spacing)*7.5)}
.c-input{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}
.c-textarea{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}
.c-label{font-size:var(--text-sm);line-height:calc(var(--spacing)*4)}
.c-input__field{--tw-leading:calc(var(--spacing)*7.5);line-height:calc(var(--spacing)*7.5)}
}
.c-input:is(.dark *){background-color:var(--input)}
.c-textarea:is(.dark *){background-color:var(--input)}
@supports (color:color-mix(in lab, red, red)){
.c-input:is(.dark *){background-color:color-mix(in oklab,var(--input)32%,transparent)}
.c-textarea:is(.dark *){background-color:color-mix(in oklab,var(--input)32%,transparent)}
}
.c-input:is(.dark *):not(:has(:disabled)):not(:has(:focus-visible)):not(:has([aria-invalid=true])):before{content:var(--tw-content);--tw-shadow:0 -1px var(--tw-shadow-color,#ffffff0f)}
@supports (color:color-mix(in lab, red, red)){
.c-input:is(.dark *):not(:has(:disabled)):not(:has(:focus-visible)):not(:has([aria-invalid=true])):before{--tw-shadow:0 -1px var(--tw-shadow-color,color-mix(in oklab,var(--color-white)6%,transparent))}
}
.c-input:is(.dark *):not(:has(:disabled)):not(:has(:focus-visible)):not(:has([aria-invalid=true])):before{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
.c-textarea:is(.dark *):not(:has(:disabled)):has(:not(:focus-visible)):not(:has([aria-invalid=true])):before{content:var(--tw-content);--tw-shadow:0 -1px var(--tw-shadow-color,#ffffff0f)}
@supports (color:color-mix(in lab, red, red)){
.c-textarea:is(.dark *):not(:has(:disabled)):has(:not(:focus-visible)):not(:has([aria-invalid=true])):before{--tw-shadow:0 -1px var(--tw-shadow-color,color-mix(in oklab,var(--color-white)6%,transparent))}
}
.c-textarea:is(.dark *):not(:has(:disabled)):has(:not(:focus-visible)):not(:has([aria-invalid=true])):before{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
.c-input:is(.dark *):has(:autofill){background-color:var(--foreground)}
@supports (color:color-mix(in lab, red, red)){
.c-input:is(.dark *):has(:autofill){background-color:color-mix(in oklab,var(--foreground)8%,transparent)}
}
.c-input:is(.dark *):has([aria-invalid=true]){--tw-ring-color:var(--destructive)}
.c-textarea:is(.dark *):has([aria-invalid=true]){--tw-ring-color:var(--destructive)}
@supports (color:color-mix(in lab, red, red)){
.c-input:is(.dark *):has([aria-invalid=true]){--tw-ring-color:color-mix(in oklab,var(--destructive)24%,transparent)}
.c-textarea:is(.dark *):has([aria-invalid=true]){--tw-ring-color:color-mix(in oklab,var(--destructive)24%,transparent)}
}
/* propio */
.c-form{display:grid;gap:1.25rem;width:100%;max-width:22rem}
.c-field{width:100%}
.c-field__error:empty{display:none}
.c-input__field,.c-textarea__field{background:transparent;border:0;font:inherit;color:inherit}
.c-textarea__field{resize:vertical}
.c-label__optional{font-weight:400;color:var(--muted-foreground)}
.c-input:has(:disabled,:focus-visible,[aria-invalid=true]),.c-textarea:has(:disabled,:focus-visible,[aria-invalid=true]){box-shadow:none}

/* dialog · Componentes (MIRÓ Labs). Diseño de coss ui (MIT, © coss.com, antes Origin UI).
   Generado por tools/build_css.py desde dialog.tw.json. No editar a mano. Necesita tokens.css. */
.c-dialog__close{position:absolute;inset-inline-end:calc(var(--spacing)*2);top:calc(var(--spacing)*2)}
.c-dialog{display:flex}
.c-dialog__header{display:flex}
.c-dialog__footer{display:flex}
.c-dialog{max-height:100%;min-height:calc(var(--spacing)*0);width:100%;max-width:var(--container-lg);min-width:calc(var(--spacing)*0);transform-origin:50%;flex-direction:column}
.c-dialog__header{flex-direction:column}
.c-dialog__footer{flex-direction:column-reverse}
.c-dialog__header{gap:calc(var(--spacing)*2)}
.c-dialog__footer{gap:calc(var(--spacing)*2)}
.c-dialog{border-radius:var(--radius-2xl);border-style:var(--tw-border-style);border-width:1px;background-color:var(--popover)}
.c-dialog__header{padding:calc(var(--spacing)*6)}
.c-dialog__panel{padding:calc(var(--spacing)*6)}
.c-dialog__footer{padding-inline:calc(var(--spacing)*6)}
.c-dialog__panel{padding-top:calc(var(--spacing)*1)}
.c-dialog__footer{padding-top:calc(var(--spacing)*4);padding-bottom:calc(var(--spacing)*6)}
.c-dialog__description{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}
.c-dialog__title{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));--tw-leading:1;line-height:1;--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}
.c-dialog__description{color:var(--muted-foreground)}
.c-dialog{color:var(--popover-foreground);--tw-shadow-alpha:5%;--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000000d),0 4px 6px -4px var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
@supports (color:lab(0% 0 0)){
.c-dialog{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,lab(0% 0 0/.05)),0 4px 6px -4px var(--tw-shadow-color,lab(0% 0 0/.05))}
}
.c-dialog{transition-property:scale,opacity,translate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.2s;transition-duration:.2s;--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out);will-change:transform;--tw-outline-style:none;outline-style:none}
.c-dialog:not(:is(.dark *)){background-clip:padding-box}
.c-dialog:before{content:var(--tw-content);pointer-events:none;content:var(--tw-content);position:absolute;content:var(--tw-content);inset:calc(var(--spacing)*0);content:var(--tw-content);border-radius:calc(var(--radius-2xl) - 1px);content:var(--tw-content);--tw-shadow:0 1px var(--tw-shadow-color,#0000000a)}
@supports (color:color-mix(in lab, red, red)){
.c-dialog:before{--tw-shadow:0 1px var(--tw-shadow-color,color-mix(in oklab,var(--color-black)4%,transparent))}
}
.c-dialog:before{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
@media not all and (min-width:40rem){
.c-dialog{max-width:none;transform-origin:bottom;border-radius:0;border-inline-style:var(--tw-border-style);border-inline-width:0;border-top-style:var(--tw-border-style);border-top-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:0}
.c-dialog__header{padding-bottom:calc(var(--spacing)*4)}
.c-dialog:before{content:var(--tw-content);display:none;content:var(--tw-content);border-radius:0}
}
@media (min-width:40rem){
.c-dialog__footer{flex-direction:row;justify-content:flex-end;border-bottom-right-radius:calc(var(--radius-2xl) - 1px);border-bottom-left-radius:calc(var(--radius-2xl) - 1px)}
}
.c-dialog:is(.dark *):before{content:var(--tw-content);--tw-shadow:0 -1px var(--tw-shadow-color,#ffffff0f)}
@supports (color:color-mix(in lab, red, red)){
.c-dialog:is(.dark *):before{--tw-shadow:0 -1px var(--tw-shadow-color,color-mix(in oklab,var(--color-white)6%,transparent))}
}
.c-dialog:is(.dark *):before{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
/* propio */
.c-dialog{position:fixed;padding:0;margin:auto;max-height:calc(100dvh - 2rem);width:calc(100% - 2rem);color:var(--popover-foreground);opacity:0;scale:.98;transition:opacity .2s ease-in-out,scale .2s ease-in-out,translate .2s ease-in-out,overlay .2s allow-discrete,display .2s allow-discrete}
.c-dialog[open]{opacity:1;scale:1}
@starting-style{.c-dialog[open]{opacity:0;scale:.98}}
.c-dialog::backdrop{background:color-mix(in oklab,#000 32%,transparent);backdrop-filter:blur(4px);opacity:0;transition:opacity .2s,overlay .2s allow-discrete,display .2s allow-discrete}
.c-dialog[open]::backdrop{opacity:1}
@starting-style{.c-dialog[open]::backdrop{opacity:0}}
@media (width < 40rem){.c-dialog{width:100%;max-width:none;margin:auto 0 0;scale:1;translate:0 1rem}.c-dialog[open]{translate:0 0}@starting-style{.c-dialog[open]{translate:0 1rem}}}
.c-dialog__close{position:absolute}
.c-dialog__form{display:contents}
html:has(.c-dialog[open]:modal){overflow:hidden}

/* drawer · Componentes (MIRÓ Labs). Diseño de coss ui (MIT, © coss.com, antes Origin UI).
   Generado por tools/build_css.py desde drawer.tw.json. No editar a mano. Necesita tokens.css. */
.c-drawer__close{position:absolute;inset-inline-end:calc(var(--spacing)*2);top:calc(var(--spacing)*2)}
.c-drawer__footer{margin-top:auto}
.c-drawer{display:flex}
.c-drawer__header{display:flex}
.c-drawer__footer{display:flex}
.c-drawer{max-height:100%;min-height:calc(var(--spacing)*0);width:calc(100% - (calc(var(--spacing)*12)));width:100%;max-width:var(--container-md);min-width:calc(var(--spacing)*0);flex-direction:column}
.c-drawer__header{flex-direction:column}
.c-drawer__footer{flex-direction:column-reverse}
.c-drawer__header{gap:calc(var(--spacing)*2)}
.c-drawer__footer{gap:calc(var(--spacing)*2)}
.c-drawer{border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px;background-color:var(--popover)}
.c-drawer__header{padding:calc(var(--spacing)*6)}
.c-drawer__panel{padding:calc(var(--spacing)*6)}
.c-drawer__footer{padding-inline:calc(var(--spacing)*6)}
.c-drawer__panel{padding-top:calc(var(--spacing)*1)}
.c-drawer__footer{padding-top:calc(var(--spacing)*4);padding-bottom:calc(var(--spacing)*6)}
.c-drawer__description{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}
.c-drawer__title{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));--tw-leading:1;line-height:1;--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}
.c-drawer__description{color:var(--muted-foreground)}
.c-drawer{color:var(--popover-foreground);--tw-shadow-alpha:5%;--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000000d),0 4px 6px -4px var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
@supports (color:lab(0% 0 0)){
.c-drawer{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,lab(0% 0 0/.05)),0 4px 6px -4px var(--tw-shadow-color,lab(0% 0 0/.05))}
}
.c-drawer{transition-property:opacity,translate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.2s;transition-duration:.2s;--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out);will-change:transform}
.c-drawer:not(:is(.dark *)){background-clip:padding-box}
.c-drawer:before{content:var(--tw-content);pointer-events:none;content:var(--tw-content);position:absolute;content:var(--tw-content);inset:calc(var(--spacing)*0);content:var(--tw-content);--tw-shadow:0 1px var(--tw-shadow-color,#0000000a)}
@supports (color:color-mix(in lab, red, red)){
.c-drawer:before{--tw-shadow:0 1px var(--tw-shadow-color,color-mix(in oklab,var(--color-black)4%,transparent))}
}
.c-drawer:before{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
@media not all and (min-width:40rem){
.c-drawer__header{padding-bottom:calc(var(--spacing)*4)}
.c-drawer:before{content:var(--tw-content);display:none}
}
@media (min-width:40rem){
.c-drawer__footer{flex-direction:row;justify-content:flex-end}
}
.c-drawer:is(.dark *):before{content:var(--tw-content);--tw-shadow:0 -1px var(--tw-shadow-color,#ffffff0f)}
@supports (color:color-mix(in lab, red, red)){
.c-drawer:is(.dark *):before{--tw-shadow:0 -1px var(--tw-shadow-color,color-mix(in oklab,var(--color-white)6%,transparent))}
}
.c-drawer:is(.dark *):before{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
/* propio */
.c-drawer{position:fixed;padding:0;margin:0 0 0 auto;height:100dvh;max-height:100dvh;color:var(--popover-foreground);opacity:0;translate:2rem 0;transition:opacity .2s ease-in-out,translate .2s ease-in-out,overlay .2s allow-discrete,display .2s allow-discrete}
.c-drawer[open]{display:flex;opacity:1;translate:0 0}
@starting-style{.c-drawer[open]{opacity:0;translate:2rem 0}}
.c-drawer::backdrop{background:color-mix(in oklab,#000 32%,transparent);backdrop-filter:blur(4px);opacity:0;transition:opacity .2s,overlay .2s allow-discrete,display .2s allow-discrete}
.c-drawer[open]::backdrop{opacity:1}
@starting-style{.c-drawer[open]::backdrop{opacity:0}}
.c-drawer__close{position:absolute}
.c-drawer__form{display:contents}
.c-drawer__panel{display:grid;gap:1rem;overflow-y:auto}
html:has(.c-drawer[open]:modal){overflow:hidden}

/* página de prueba */
body{margin:0;min-height:100vh;display:grid;place-items:center;padding:40px 24px;background:var(--background);color:var(--foreground);font-family:var(--font-sans);font-size:14px;line-height:1.5}
.c-demo{display:grid;gap:1rem;justify-items:center;width:auto;max-width:100%;min-width:0;justify-self:center;grid-template-columns:minmax(0,auto)}
body{grid-template-columns:minmax(0,1fr)}
.embed body{background:transparent}
</style>
</head>
<body>
<div class="c-demo">
<button class="c-btn c-btn--outline" type="button" commandfor="drawer-filters" command="show-modal">Abrir filtros</button>

<dialog class="c-drawer" id="drawer-filters" aria-labelledby="drawer-title" aria-describedby="drawer-desc" closedby="any">
  <form class="c-drawer__form" method="dialog">
    <div class="c-drawer__header">
      <h2 class="c-drawer__title" id="drawer-title">Filtros</h2>
      <p class="c-drawer__description" id="drawer-desc">Ajusta qué proyectos ves en la lista.</p>
    </div>
    <div class="c-drawer__panel">
      <div class="c-field"><label class="c-label" for="drawer-q">Buscar</label><span class="c-input"><input class="c-input__field" id="drawer-q" type="search" placeholder="Nombre del proyecto"></span></div>
      <div class="c-field"><label class="c-label" for="drawer-owner">Responsable</label><span class="c-input"><input class="c-input__field" id="drawer-owner" placeholder="Cualquiera"></span></div>
    </div>
    <div class="c-drawer__footer">
      <button class="c-btn c-btn--ghost" value="reset">Limpiar</button>
      <button class="c-btn c-btn--primary" value="apply">Aplicar</button>
    </div>
    <button class="c-btn c-btn--ghost c-btn--icon c-drawer__close" type="button" commandfor="drawer-filters" command="close" aria-label="Cerrar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
  </form>
</dialog>
</div>
<script>
/* Botón: estado de carga. Componentes.button.setLoading(boton, true|false, textoParaLector) */
(function () {
  const C = (window.Componentes = window.Componentes || {});

  function setLoading(btn, on, message) {
    try {
      if (on) { btn.setAttribute('data-loading', ''); btn.setAttribute('aria-disabled', 'true'); }
      else { btn.removeAttribute('data-loading'); btn.removeAttribute('aria-disabled'); }
      const status = document.querySelector('[data-c-btn-status]');
      if (status && message) status.textContent = message;
    } catch (e) { console.warn('[button]', e); }
  }

  // Con aria-disabled el botón conserva el foco, pero no debe hacer nada.
  document.addEventListener('click', (e) => {
    const btn = e.target.closest?.('.c-btn[aria-disabled="true"]');
    if (btn) { e.preventDefault(); e.stopImmediatePropagation(); }
  }, true);

  function init(root) {
    (root || document).querySelectorAll('[data-c-loading-demo]:not([data-c-ready])').forEach((btn) => {
      btn.dataset.cReady = '';
      btn.addEventListener('click', () => {
        setLoading(btn, true, 'Publicando…');
        setTimeout(() => setLoading(btn, false, 'Publicado.'), 1600);
      });
    });
  }

  C.button = { setLoading, init };
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => init());
  else init();
})();

/* Validación al enviar: marca cada campo con aria-invalid, muestra su mensaje y enfoca el primero con error.
   Después del primer error, lo quita en cuanto el valor es válido (al escribir, no al salir del campo:
   si el mensaje desaparece en el blur, la página se mueve y el clic en «Enviar» se pierde). */
(function () {
  const C = (window.Componentes = window.Componentes || {});
  const msg = (el) => el.dataset.cMsg || el.validationMessage || 'Revisa este campo.';
  const errEl = (el) => document.getElementById((el.getAttribute('aria-describedby') || '').split(' ').find((id) => id.endsWith('-err')) || '');

  function setError(el, text) {
    if (text) el.setAttribute('aria-invalid', 'true'); else el.removeAttribute('aria-invalid');
    const e = errEl(el); if (e) e.textContent = text || '';
  }

  function validate(form) {
    const bad = [];
    form.querySelectorAll('input, textarea, select').forEach((el) => {
      if (el.disabled || !el.willValidate) return;
      const ok = el.checkValidity();
      setError(el, ok ? '' : msg(el));
      if (!ok) bad.push(el);
    });
    return bad;
  }

  function init(root) {
    (root || document).querySelectorAll('form[data-c-validate]:not([data-c-ready])').forEach((form) => {
      form.dataset.cReady = '';
      form.addEventListener('submit', (e) => {
        try {
          const bad = validate(form);
          const st = form.querySelector('[data-c-form-status]');
          if (bad.length) { e.preventDefault(); bad[0].focus(); if (st) st.textContent = ''; return; }
          if (form.hasAttribute('data-c-demo')) { e.preventDefault(); if (st) st.textContent = 'Enviado (demo).'; }
        } catch (err) { console.warn('[text-field]', err); }
      });
      form.addEventListener('input', (e) => {
        const el = e.target;
        if (el.getAttribute?.('aria-invalid') === 'true' && el.checkValidity()) setError(el, '');
      });
    });
  }

  C.textField = { init, validate };
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => init());
  else init();
})();

/* Diálogo: respaldo para navegadores sin commandfor ni closedby.
   Con soporte nativo, este archivo no hace nada. */
(function () {
  const C = (window.Componentes = window.Componentes || {});
  const hasCommand = 'command' in HTMLButtonElement.prototype;
  const hasClosedBy = 'closedBy' in HTMLDialogElement.prototype;

  function open(dialog) { try { if (!dialog.open) dialog.showModal(); } catch (e) { console.warn('[dialog]', e); } }
  function close(dialog, value) { try { dialog.close(value); } catch (e) { console.warn('[dialog]', e); } }

  if (!hasCommand) {
    document.addEventListener('click', (e) => {
      const btn = e.target.closest?.('button[commandfor]');
      if (!btn) return;
      const dialog = document.getElementById(btn.getAttribute('commandfor'));
      if (!(dialog instanceof HTMLDialogElement)) return;
      const cmd = btn.getAttribute('command');
      if (cmd === 'show-modal') open(dialog);
      else if (cmd === 'close' || cmd === 'request-close') close(dialog);
    });
  }

  // closedby="any": clic en el fondo cierra. Se mide el rectángulo, no el target,
  // para que soltar el ratón fuera tras seleccionar texto dentro no cierre.
  if (!hasClosedBy) {
    document.addEventListener('pointerdown', (e) => {
      const d = e.target;
      if (!(d instanceof HTMLDialogElement) || !d.open || d.getAttribute('closedby') !== 'any') return;
      const r = d.getBoundingClientRect();
      const inside = e.clientX >= r.left && e.clientX <= r.right && e.clientY >= r.top && e.clientY <= r.bottom;
      if (!inside) close(d);
    });
  }

  C.dialog = { open, close };
})();
</script>
</body>
</html>

«Todo» trae tokens, dependencias y componente en un solo archivo, listo para abrir o dárselo a un agente.“All” bundles tokens, dependencies and the component in one file, ready to open or hand to an agent.

InstalaciónInstallation

Agrega una vezAdd once tokens.css (colores, radios, tema oscuro).(colors, radii, dark theme).
Agrega también:Also add: BotónButton, Campo de textoText field, DiálogoDialog.
Copia los archivos:Copy the files: drawer.html, drawer.css.
Para el tema oscuro, pon la claseFor the dark theme, add the class dark ento <html>.

Cuándo usarloWhen to use it

ÚsaloUse it

Para tareas secundarias sin perder la página de vista.

For secondary tasks without losing the page.

Mejor noAvoid

Para confirmaciones cortas: usa un diálogo.

For short confirmations: use a dialog.

dialog

`Esc`	CierraCloses
`Tab`	Recorre solo el panelCycles within the panel

También es <dialog> nativo: foco atrapado, Esc y clic fuera cierran.
Entra desde la derecha; con «reducir movimiento» aparece sin deslizar.

Also a native <dialog>: focus trapped, Esc and outside click close it.
Slides in from the right; with reduced motion it appears without sliding.

Cómo probarloHow to test it

Abre «Filtros», pulsa Esc: el foco vuelve a «Abrir filtros».

Open “Filters”, press Esc: focus returns to “Open filters”.