Preparar una cotización
Cliente → editar partidas y totales → exportar cotización JSON.
DiseñoDesign: MITherramienta · densidaddensity media · sobriaMarkdownJSON
CódigoCode
<section class="work-card" data-flow="quote"><h2>Preparar cotización</h2><p class="steps"></p><div data-step><label>Cliente<input data-client required maxlength="120" placeholder="Empresa o persona"></label><button data-next>Editar partidas</button></div><div data-step hidden><section class="work-card" aria-label="Costeo"><h2>Costeo de materiales</h2><p class="muted">Edita cantidades y precios. Importes de ejemplo en USD.</p><label>Filtrar partidas<input data-filter type="search" placeholder="Material o concepto"></label><div class="table-scroll"><table><thead><tr><th>Seleccionar</th><th>Concepto</th><th>Cantidad</th><th>Precio USD</th><th>Subtotal</th></tr></thead><tbody data-rows></tbody></table></div><div class="actions"><button data-add>Añadir partida</button><button data-remove>Quitar seleccionadas</button></div><p>Total USD: <output data-total></output></p><p role="status" data-status></p></section><button data-back>Volver</button><button data-next>Revisar cotización</button></div><div data-step hidden><p data-result role="status"></p><button data-back>Corregir partidas</button><button data-download>Exportar JSON</button><button data-restart>Volver al cliente</button></div></section>.work-card{width:min(720px,100%);padding:24px;box-sizing:border-box;border:1px solid var(--border);border-radius:12px;background:var(--background);color:var(--foreground);font:14px/1.5 var(--font-sans)}.work-card h2{font-size:24px;margin:0 0 8px}.work-card label{display:grid;gap:5px;margin:12px 0}.work-card input,.work-card textarea,.work-card button{font:inherit;border:1px solid var(--border);border-radius:6px;padding:8px;background:var(--background);color:var(--foreground)}.work-card button{cursor:pointer}.work-card button:disabled{opacity:.45}.work-card :focus-visible{outline:2px solid var(--foreground);outline-offset:2px}.work-card table{width:100%;border-collapse:collapse}.work-card td,.work-card th{padding:8px 4px;text-align:left;border-bottom:1px solid var(--border)}.work-card td input{width:100%;box-sizing:border-box;min-width:65px}.work-card .table-scroll{overflow:auto}.work-card .table-scroll table{min-width:460px}.work-card .actions{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}.work-card [hidden]{display:none!important}.work-card pre{white-space:pre-wrap;max-height:240px;overflow:auto}.work-card .steps{color:var(--muted-foreground);font-size:12px}.work-card img{max-width:100%;max-height:200px;object-fit:contain}.work-card output{font-weight:600}.work-card .muted{color:var(--muted-foreground)}(()=>{document.querySelectorAll('[aria-label="Costeo"]').forEach(root=>{let rows=[{name:'Material',qty:2,price:45},{name:'Transporte',qty:1,price:20}];const body=root.querySelector('[data-rows]'), money=n=>n.toFixed(2);function totals(){let total=0;body.querySelectorAll('tr').forEach((tr,i)=>{const vals=tr.querySelectorAll('input');rows[i]={name:vals[1].value,qty:Number(vals[2].value),price:Number(vals[3].value)};const sub=rows[i].qty*rows[i].price;tr.querySelector('output').textContent=money(sub);total+=sub;});root.querySelector('[data-total]').textContent=money(total);}function render(){body.replaceChildren();rows.forEach(r=>{const tr=document.createElement('tr');tr.innerHTML='<td><input type="checkbox" aria-label="Seleccionar partida"></td><td><input aria-label="Concepto"></td><td><input type="number" min="0" step="0.01" aria-label="Cantidad"></td><td><input type="number" min="0" step="0.01" aria-label="Precio"></td><td><output></output></td>';const inputs=tr.querySelectorAll('input');inputs[1].value=r.name;inputs[2].value=r.qty;inputs[3].value=r.price;body.append(tr);});totals();}body.addEventListener('input',()=>{if([...body.querySelectorAll('input[type=number]')].some(i=>!i.validity.valid)){root.querySelector('[data-status]').textContent='Revisa cantidades y precios: usa valores no negativos.';return;}root.querySelector('[data-status]').textContent='';totals();});root.querySelector('[data-add]').onclick=()=>{rows.push({name:'Nueva partida',qty:1,price:0});render();};root.querySelector('[data-remove]').onclick=()=>{rows=rows.filter((r,i)=>!body.rows[i].querySelector('input').checked);render();};root.querySelector('[data-filter]').oninput=e=>{[...body.rows].forEach((tr,i)=>tr.hidden=!rows[i].name.toLowerCase().includes(e.target.value.toLowerCase()));};root.exportRows=()=>rows.map(r=>({...r}));render();});})();
(()=>{document.querySelectorAll('[data-flow]').forEach(root=>{const panels=[...root.querySelectorAll(':scope > [data-step]')];let step=0;const show=n=>{step=n;panels.forEach((p,i)=>p.hidden=i!==n);root.querySelector('.steps').textContent=['1 · Preparar','2 · Revisar','3 · Resultado'][n];};root.querySelectorAll('[data-next]').forEach(b=>b.onclick=()=>{const input=panels[step].querySelector('input[required]');if(input&&!input.reportValidity())return;if(root.dataset.flow==='import'&&step===0&&!root.file){root.querySelector('[role=status]').textContent='Elige un archivo de texto o CSV para continuar.';return;}if(root.dataset.flow==='quote'&&step===1&&[...root.querySelectorAll('input[type=number]')].some(i=>!i.reportValidity()))return;show(Math.min(2,step+1));if(step===2){const summary=root.querySelector('[data-result]');summary.textContent=root.dataset.flow==='quote'?'Cotización revisada · USD '+root.querySelector('[data-total]').textContent:root.dataset.flow==='import'?root.file.name+' revisado. Listo para guardar una copia.':'Referencia guardada en esta demostración. Elige una variación.';}});root.querySelectorAll('[data-back]').forEach(b=>b.onclick=()=>show(Math.max(0,step-1)));root.querySelector('[data-restart]').onclick=()=>show(0);const file=root.querySelector('[data-import]');if(file)file.onchange=async e=>{const f=e.target.files[0];if(!f)return;if(f.size>1000000||!(/\.(txt|md|csv)$/i.test(f.name))){root.querySelector('[role=status]').textContent='Admite TXT, Markdown o CSV de hasta 1 MB.';root.file=null;return;}root.file=f;root.querySelector('[data-review]').textContent=await f.text();root.querySelector('[role=status]').textContent='Archivo preparado.';};const save=root.querySelector('[data-download]');if(save)save.onclick=()=>{const quote=root.querySelector('[aria-label="Costeo"]');const blob=root.dataset.flow==='import'?root.file:new Blob([JSON.stringify({cliente:root.querySelector('[data-client]').value,moneda:'USD',partidas:quote.exportRows()},null,2)],{type:'application/json'});const a=document.createElement('a');a.href=URL.createObjectURL(blob);a.download=root.dataset.flow==='import'?root.file.name:'cotizacion.json';a.click();setTimeout(()=>URL.revokeObjectURL(a.href),1000);};root.querySelectorAll('[data-variant]').forEach(b=>b.onclick=()=>{root.querySelector('[data-preview]').style.filter=b.dataset.variant;});show(0);});})();<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Preparar una cotización · Componentes</title>
<!-- Preparar una cotización · Componentes (MIRÓ Labs) · MIT · https://componentes-lovat.vercel.app/c/flow-quote/
Diseño: -->
<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)});})();</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}}
.work-card{width:min(720px,100%);padding:24px;box-sizing:border-box;border:1px solid var(--border);border-radius:12px;background:var(--background);color:var(--foreground);font:14px/1.5 var(--font-sans)}.work-card h2{font-size:24px;margin:0 0 8px}.work-card label{display:grid;gap:5px;margin:12px 0}.work-card input,.work-card textarea,.work-card button{font:inherit;border:1px solid var(--border);border-radius:6px;padding:8px;background:var(--background);color:var(--foreground)}.work-card button{cursor:pointer}.work-card button:disabled{opacity:.45}.work-card :focus-visible{outline:2px solid var(--foreground);outline-offset:2px}.work-card table{width:100%;border-collapse:collapse}.work-card td,.work-card th{padding:8px 4px;text-align:left;border-bottom:1px solid var(--border)}.work-card td input{width:100%;box-sizing:border-box;min-width:65px}.work-card .table-scroll{overflow:auto}.work-card .table-scroll table{min-width:460px}.work-card .actions{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}.work-card [hidden]{display:none!important}.work-card pre{white-space:pre-wrap;max-height:240px;overflow:auto}.work-card .steps{color:var(--muted-foreground);font-size:12px}.work-card img{max-width:100%;max-height:200px;object-fit:contain}.work-card output{font-weight:600}.work-card .muted{color:var(--muted-foreground)}
/* página de prueba */
body{margin:0;min-height:100vh;display:grid;place-items:start center;padding:0;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:stretch;width:100%;max-width:100%;min-width:0;justify-self:stretch;grid-template-columns:minmax(0,1fr)}
body{grid-template-columns:minmax(0,1fr)}
.embed body{background:transparent}
</style>
</head>
<body>
<div class="c-demo">
<section class="work-card" data-flow="quote"><h2>Preparar cotización</h2><p class="steps"></p><div data-step><label>Cliente<input data-client required maxlength="120" placeholder="Empresa o persona"></label><button data-next>Editar partidas</button></div><div data-step hidden><section class="work-card" aria-label="Costeo"><h2>Costeo de materiales</h2><p class="muted">Edita cantidades y precios. Importes de ejemplo en USD.</p><label>Filtrar partidas<input data-filter type="search" placeholder="Material o concepto"></label><div class="table-scroll"><table><thead><tr><th>Seleccionar</th><th>Concepto</th><th>Cantidad</th><th>Precio USD</th><th>Subtotal</th></tr></thead><tbody data-rows></tbody></table></div><div class="actions"><button data-add>Añadir partida</button><button data-remove>Quitar seleccionadas</button></div><p>Total USD: <output data-total></output></p><p role="status" data-status></p></section><button data-back>Volver</button><button data-next>Revisar cotización</button></div><div data-step hidden><p data-result role="status"></p><button data-back>Corregir partidas</button><button data-download>Exportar JSON</button><button data-restart>Volver al cliente</button></div></section>
</div>
<script>
(()=>{document.querySelectorAll('[aria-label="Costeo"]').forEach(root=>{let rows=[{name:'Material',qty:2,price:45},{name:'Transporte',qty:1,price:20}];const body=root.querySelector('[data-rows]'), money=n=>n.toFixed(2);function totals(){let total=0;body.querySelectorAll('tr').forEach((tr,i)=>{const vals=tr.querySelectorAll('input');rows[i]={name:vals[1].value,qty:Number(vals[2].value),price:Number(vals[3].value)};const sub=rows[i].qty*rows[i].price;tr.querySelector('output').textContent=money(sub);total+=sub;});root.querySelector('[data-total]').textContent=money(total);}function render(){body.replaceChildren();rows.forEach(r=>{const tr=document.createElement('tr');tr.innerHTML='<td><input type="checkbox" aria-label="Seleccionar partida"></td><td><input aria-label="Concepto"></td><td><input type="number" min="0" step="0.01" aria-label="Cantidad"></td><td><input type="number" min="0" step="0.01" aria-label="Precio"></td><td><output></output></td>';const inputs=tr.querySelectorAll('input');inputs[1].value=r.name;inputs[2].value=r.qty;inputs[3].value=r.price;body.append(tr);});totals();}body.addEventListener('input',()=>{if([...body.querySelectorAll('input[type=number]')].some(i=>!i.validity.valid)){root.querySelector('[data-status]').textContent='Revisa cantidades y precios: usa valores no negativos.';return;}root.querySelector('[data-status]').textContent='';totals();});root.querySelector('[data-add]').onclick=()=>{rows.push({name:'Nueva partida',qty:1,price:0});render();};root.querySelector('[data-remove]').onclick=()=>{rows=rows.filter((r,i)=>!body.rows[i].querySelector('input').checked);render();};root.querySelector('[data-filter]').oninput=e=>{[...body.rows].forEach((tr,i)=>tr.hidden=!rows[i].name.toLowerCase().includes(e.target.value.toLowerCase()));};root.exportRows=()=>rows.map(r=>({...r}));render();});})();
(()=>{document.querySelectorAll('[data-flow]').forEach(root=>{const panels=[...root.querySelectorAll(':scope > [data-step]')];let step=0;const show=n=>{step=n;panels.forEach((p,i)=>p.hidden=i!==n);root.querySelector('.steps').textContent=['1 · Preparar','2 · Revisar','3 · Resultado'][n];};root.querySelectorAll('[data-next]').forEach(b=>b.onclick=()=>{const input=panels[step].querySelector('input[required]');if(input&&!input.reportValidity())return;if(root.dataset.flow==='import'&&step===0&&!root.file){root.querySelector('[role=status]').textContent='Elige un archivo de texto o CSV para continuar.';return;}if(root.dataset.flow==='quote'&&step===1&&[...root.querySelectorAll('input[type=number]')].some(i=>!i.reportValidity()))return;show(Math.min(2,step+1));if(step===2){const summary=root.querySelector('[data-result]');summary.textContent=root.dataset.flow==='quote'?'Cotización revisada · USD '+root.querySelector('[data-total]').textContent:root.dataset.flow==='import'?root.file.name+' revisado. Listo para guardar una copia.':'Referencia guardada en esta demostración. Elige una variación.';}});root.querySelectorAll('[data-back]').forEach(b=>b.onclick=()=>show(Math.max(0,step-1)));root.querySelector('[data-restart]').onclick=()=>show(0);const file=root.querySelector('[data-import]');if(file)file.onchange=async e=>{const f=e.target.files[0];if(!f)return;if(f.size>1000000||!(/\.(txt|md|csv)$/i.test(f.name))){root.querySelector('[role=status]').textContent='Admite TXT, Markdown o CSV de hasta 1 MB.';root.file=null;return;}root.file=f;root.querySelector('[data-review]').textContent=await f.text();root.querySelector('[role=status]').textContent='Archivo preparado.';};const save=root.querySelector('[data-download]');if(save)save.onclick=()=>{const quote=root.querySelector('[aria-label="Costeo"]');const blob=root.dataset.flow==='import'?root.file:new Blob([JSON.stringify({cliente:root.querySelector('[data-client]').value,moneda:'USD',partidas:quote.exportRows()},null,2)],{type:'application/json'});const a=document.createElement('a');a.href=URL.createObjectURL(blob);a.download=root.dataset.flow==='import'?root.file.name:'cotizacion.json';a.click();setTimeout(()=>URL.revokeObjectURL(a.href),1000);};root.querySelectorAll('[data-variant]').forEach(b=>b.onclick=()=>{root.querySelector('[data-preview]').style.filter=b.dataset.variant;});show(0);});})();
</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). - Copia los archivos:Copy the files:
flow-quote.html,flow-quote.css,flow-quote.js. - Para el tema oscuro, pon la claseFor the dark theme, add the class
darkento<html>.
Cuándo usarloWhen to use it
ÚsaloUse it
- Cliente → editar partidas y totales → exportar cotización JSON.
- Cliente → editar partidas y totales → exportar cotización JSON.
Mejor noAvoid
- Los ejemplos no se conectan a cuentas ni guardan archivos en un servidor.
- Examples do not connect accounts or save files to a server.
AccesibilidadAccessibility
| Tab Enter | Recorre y activa los controlesNavigate and activate controls |
- Errores y resultados se anuncian con role=status.
- Errors and results use role=status.