.hz-app *,.hz-app *:before,.hz-app *:after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / .5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style: ;
  box-sizing:border-box;
  border-width:0;
  border-style:solid;
  border-color:#e5e7eb;
}

.hz-app :before,.hz-app :after{--tw-content:""}

.hz-app html,.hz-app :host{
  line-height:1.5;
  -webkit-text-size-adjust:100%;
  -moz-tab-size:4;
  -o-tab-size:4;
  tab-size:4;
  font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";
  font-feature-settings:normal;
  font-variation-settings:normal;
  -webkit-tap-highlight-color:transparent;
}

.hz-app body{margin:0;line-height:inherit}
.hz-app hr{height:0;color:inherit;border-top-width:1px}
.hz-app abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}
.hz-app h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}
.hz-app a{color:inherit;text-decoration:inherit}
.hz-app b,strong{font-weight:bolder}
.hz-app code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}
.hz-app small{font-size:80%}
.hz-app sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
.hz-app sub{bottom:-.25em}
.hz-app sup{top:-.5em}
.hz-app table{text-indent:0;border-color:inherit;border-collapse:collapse}
.hz-app button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}
.hz-app button,select{text-transform:none}
.hz-app button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}
.hz-app .pointer-events-auto{pointer-events:auto}
.hz-app .fixed{position:fixed}
.hz-app .absolute{position:absolute}
.hz-app .relative{position:relative}
.hz-app .right-2{right:.5rem}
.hz-app .top-0{top:0}
.hz-app .top-2{top:.5rem}
.hz-app .z-\[100\]{z-index:100}
.hz-app .block{display:block}
.hz-app .flex{display:flex}
.hz-app .inline-flex{display:inline-flex}
.hz-app .grid{display:grid}
.hz-app .h-10{height:2.5rem}
.hz-app .h-11{height:2.75rem}
.hz-app .h-12{height:3rem}
.hz-app .h-2{height:.5rem}
.hz-app .h-4{height:1rem}
.hz-app .h-5{height:1.25rem}
.hz-app .h-8{height:2rem}
.hz-app .h-9{height:2.25rem}
.hz-app .h-full{height:100%}
.hz-app .max-h-screen{max-height:100vh}
.hz-app .min-h-\[80px\]{min-height:80px}
.hz-app .w-10{width:2.5rem}
.hz-app .w-4{width:1rem}
.hz-app .w-5{width:1.25rem}
.hz-app .w-full{width:100%}
.hz-app .shrink-0{flex-shrink:0}
.hz-app .grow{flex-grow:1}
.hz-app .touch-none{touch-action:none}
.hz-app .select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}
.hz-app .flex-col-reverse{flex-direction:column-reverse}
.hz-app .items-center{align-items:center}
.hz-app .justify-center{justify-content:center}
.hz-app .justify-between{justify-content:space-between}
.hz-app .gap-1{gap:.25rem}
.hz-app .space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}
.hz-app .overflow-hidden{overflow:hidden}
.hz-app .rounded-\[20px\]{border-radius:20px}
.hz-app .rounded-full{border-radius:9999px}
.hz-app .rounded-md{border-radius:calc(var(--radius) - 2px)}
.hz-app .border{border-width:1px}
.hz-app .border-2{border-width:2px}
.hz-app .border-\[\#052fdb\]{--tw-border-opacity:1;border-color:rgb(5 47 219 / var(--tw-border-opacity,1))}
.hz-app .border-destructive{border-color:hsl(var(--destructive))}
.hz-app .border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity,1))}
.hz-app .border-input{border-color:hsl(var(--input))}
.hz-app .bg-\[\#052fdb\]{--tw-bg-opacity:1;background-color:rgb(5 47 219 / var(--tw-bg-opacity,1))}
.hz-app .bg-background{background-color:hsl(var(--background))}
.hz-app .bg-destructive{background-color:hsl(var(--destructive))}
.hz-app .bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235 / var(--tw-bg-opacity,1))}
.hz-app .bg-primary{background-color:hsl(var(--primary))}
.hz-app .bg-secondary{background-color:hsl(var(--secondary))}
.hz-app .bg-transparent{background-color:transparent}
.hz-app .bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity,1))}
.hz-app .p-1{padding:.25rem}
.hz-app .p-4{padding:1rem}
.hz-app .p-6{padding:1.5rem}
.hz-app .px-3{padding-left:.75rem;padding-right:.75rem}
.hz-app .px-4{padding-left:1rem;padding-right:1rem}
.hz-app .px-8{padding-left:2rem;padding-right:2rem}
.hz-app .py-2{padding-top:.5rem;padding-bottom:.5rem}
.hz-app .py-3{padding-top:.75rem;padding-bottom:.75rem}
.hz-app .pr-8{padding-right:2rem}
.hz-app .text-sm{font-size:.875rem;line-height:1.25rem}
.hz-app .font-medium{font-weight:500}
.hz-app .font-semibold{font-weight:600}
.hz-app .leading-none{line-height:1}
.hz-app .text-destructive-foreground{color:hsl(var(--destructive-foreground))}
.hz-app .text-foreground\/50{color:hsl(var(--foreground)/.5)}
.hz-app .text-primary{color:hsl(var(--primary))}
.hz-app .text-primary-foreground{color:hsl(var(--primary-foreground))}
.hz-app .text-secondary-foreground{color:hsl(var(--secondary-foreground))}
.hz-app .underline-offset-4{text-underline-offset:4px}
.hz-app .opacity-0{opacity:0}
.hz-app .opacity-90{opacity:.9}
.hz-app .shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / .1),0 4px 6 -4px rgb(0 0 0 / .1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6 -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}
.hz-app .outline{outline-style:solid}
.hz-app .ring-offset-background{--tw-ring-offset-color:hsl(var(--background))}
.hz-app .filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}
.hz-app .transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}
.hz-app .transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}
.hz-app .transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}
.hz-app .transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}
.hz-app .duration-200{transition-duration:.2s}
.hz-app @keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))}}
.hz-app @keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))}}

/* A partir de aquí todas tus clases .hz-container, .hz-generator-wrapper, .hz-config-card, etc. también se encapsulan: */
.hz-app .hz-container{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;padding:2rem 1rem}
.hz-app .hz-generator-wrapper{display:flex;flex-direction:column;gap:2rem;max-width:64rem;margin-left:auto;margin-right:auto}
.hz-app .hz-config-card{background-color:#fff;border-radius:20px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6 -4px #0000001a;padding:2rem}
.hz-app .hz-config-title{font-size:1.5rem;line-height:2rem;font-weight:600;color:#1f2937;margin-bottom:1.5rem}
.hz-app .hz-config-grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:2rem 1.5rem}
@media (min-width:768px){.hz-app .hz-config-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hz-app .hz-config-col{display:flex;flex-direction:column;gap:1rem}
.hz-app .hz-config-span-2{grid-column:span 1 / span 1}
@media (min-width:768px){.hz-app .hz-config-span-2{grid-column:span 2 / span 2}}
.hz-app .hz-label{font-size:.875rem;line-height:1.25rem;font-weight:500;color:#374151}
.hz-app .hz-input,.hz-app .hz-textarea{margin-top:.25rem;border-radius:20px!important}
.hz-app .hz-textarea{resize:none}
.hz-app .hz-image-upload-flex{display:flex;align-items:center;gap:.75rem}
.hz-app .hz-image-upload-input{display:none}
.hz-app .hz-image-upload-label{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background-color:#f3f4f6;border-radius:100px;cursor:pointer;transition:all .15s ease}
.hz-app .hz-image-upload-label:hover{background-color:#e5e7eb}
.hz-app .hz-upload-icon{width:1rem;height:1rem}
.hz-app .hz-upload-text{font-size:.875rem;line-height:1.25rem}
.hz-app .hz-image-preview-container{width:2.5rem;height:2.5rem;border-radius:.5rem;overflow:hidden;border-width:2px}
.hz-app .hz-image-preview-start{border-color:#22c55e}
.hz-app .hz-image-preview-end{border-color:#ef4444}
.hz-app .hz-image-preview{width:100%;height:100%;object-fit:cover}
.hz-app .hz-slider-label-flex{display:flex;justify-content:space-between;align-items:center}
.hz-app .hz-slider-value{font-size:.875rem;line-height:1.25rem;font-weight:600;color:#052fdb}
.hz-app .hz-slider{margin-top:.25rem}
.hz-app .hz-controls-container{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem;justify-content:center}
.hz-app .hz-btn{padding:.75rem 2rem;border-radius:100px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6 -4px #0000001a;transition:all .3s cubic-bezier(.4,0,.2,1);transform-style:preserve-3d;display:inline-flex;align-items:center;color:#fff}
.hz-app .hz-btn:hover{box-shadow:0 20px 25px -5px #0000001a,0 8px 10 -6px #0000001a;transform:scale(1.05)}
.hz-app .hz-btn-primary{background-color:#052fdb}
.hz-app .hz-btn-primary:hover{background-color:#0426b0}
.hz-app .hz-btn-secondary{background-color:#e5e7eb;color:#1f2937}
.hz-app .hz-btn-secondary:hover{background-color:#d1d5db}
.hz-app .hz-btn-destructive{background-color:#ef4444}
.hz-app .hz-btn-destructive:hover{background-color:#dc2626}
.hz-app .hz-btn-icon{width:1.25rem;height:1.25rem;margin-right:.5rem}
.hz-app .hz-display-wrapper{margin-top:2rem}
.hz-app .hz-display-container{background-color:#fff;padding:1.5rem;border-radius:20px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6 -4px #0000001a;margin-left:auto;margin-right:auto;max-width:fit-content}
.hz-app .hz-display-header{text-align:center;margin-bottom:2rem}
.hz-app .hz-display-title{font-size:1.5rem;line-height:2rem;font-weight:700;color:#111827;margin-bottom:.5rem}
.hz-app .hz-display-description{color:#4b5563}
.hz-app .hz-display-inner-wrapper{display:flex;align-items:center;justify-content:center}
.hz-app .hz-display-relative-wrapper{position:relative}
.hz-app .hz-display-image-start,.hz-app .hz-display-image-end{position:absolute;z-index:10}
.hz-app .hz-maze-grid{position:relative;border-style:solid;border-color:#1a1a1a}
.hz-app .hz-maze-cell{transition:all .1s ease}
.hz-app .hz-maze-wall{background-color:#1a1a1a}
.hz-app .hz-maze-path{background-color:#fff}
.hz-app .hz-maze-solution{background-color:#052fdb80}
.hz-app .hz-maze-arrow{position:absolute;color:#000;display:flex;align-items:center;justify-content:center}
@media print{
  .hz-app .hz-container{background:white!important;min-height:auto;padding:0}
  .hz-app .no-print{display:none!important}
  .hz-app .hz-maze-solution{background-color:#ccc!important}
}
/* === Continuación de CSS encapsulado en .hz-app === */

/* Estados y data-[state] */
.hz-app [data-state="open"]{opacity:1;transform:translateY(0)}
.hz-app [data-state="closed"]{opacity:0;transform:translateY(-0.5rem)}
.hz-app [data-state="active"]{background-color:#052fdb;color:white}
.hz-app [data-state="inactive"]{background-color:#e5e7eb;color:#374151}

/* Hover, focus y transiciones */
.hz-app :focus{outline:none;box-shadow:0 0 0 2px #052fdb}

/* Animaciones generales */
.hz-app .hz-fade-in{animation:hz-fade-in .3s ease-in-out forwards}
.hz-app .hz-fade-out{animation:hz-fade-out .3s ease-in-out forwards}
.hz-app .hz-slide-up{animation:hz-slide-up .3s ease-in-out forwards}
.hz-app .hz-slide-down{animation:hz-slide-down .3s ease-in-out forwards}

/* Keyframes */
.hz-app @keyframes hz-fade-in{0%{opacity:0}100%{opacity:1}}
.hz-app @keyframes hz-fade-out{0%{opacity:1}100%{opacity:0}}
.hz-app @keyframes hz-slide-up{0%{opacity:0;transform:translateY(1rem)}100%{opacity:1;transform:translateY(0)}}
.hz-app @keyframes hz-slide-down{0%{opacity:0;transform:translateY(-1rem)}100%{opacity:1;transform:translateY(0)}}

/* Botones y controles adicionales */
.hz-app .hz-toggle-button{display:inline-flex;align-items:center;justify-content:center;padding:.5rem 1rem;border-radius:9999px;background-color:#f3f4f6;transition:all .2s}
.hz-app .hz-toggle-button:hover{background-color:#e5e7eb}
.hz-app .hz-toggle-button-active{background-color:#052fdb;color:white}

/* Inputs y selects adicionales */
.hz-app .hz-select{padding:.5rem 1rem;border-radius:20px;background-color:#fff;border:1px solid #d1d5db;transition:all .2s}
.hz-app .hz-select:focus{border-color:#052fdb;box-shadow:0 0 0 2px #052fdb80}
.hz-app .hz-input-error{border-color:#ef4444;color:#ef4444}
.hz-app .hz-helper-text{font-size:.75rem;color:#6b7280;margin-top:.25rem}
/* === Parte 2: Sliders, grids, imágenes, tablas y media queries === */

.hz-app .hz-slider-track{background-color:#e5e7eb;height:.5rem;border-radius:.25rem}
.hz-app .hz-slider-thumb{width:1rem;height:1rem;background-color:#052fdb;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,0.2);transition:transform .2s}
.hz-app .hz-slider-thumb:hover{transform:scale(1.2)}

.hz-app .hz-grid{display:grid;gap:1rem}
.hz-app .hz-grid-cols-2{grid-template-columns:repeat(2,1fr)}
.hz-app .hz-grid-cols-3{grid-template-columns:repeat(3,1fr)}
.hz-app .hz-grid-cols-4{grid-template-columns:repeat(4,1fr)}

.hz-app .hz-image{max-width:100%;height:auto;border-radius:.5rem}
.hz-app .hz-image-rounded-full{border-radius:9999px}
.hz-app .hz-image-bordered{border:2px solid #d1d5db}

.hz-app table{width:100%;border-collapse:collapse}
.hz-app th,hz-app td{padding:.5rem 1rem;text-align:left;border-bottom:1px solid #e5e7eb}
.hz-app th{background-color:#f9fafb;font-weight:600}

.hz-app .hz-badge{display:inline-block;padding:.25rem .5rem;font-size:.75rem;border-radius:.375rem;background-color:#e5e7eb;color:#111827}
.hz-app .hz-badge-primary{background-color:#052fdb;color:white}
.hz-app .hz-badge-destructive{background-color:#ef4444;color:white}

/* Media queries encapsulados */
@media (min-width: 640px){
  .hz-app .sm\:flex-row{flex-direction:row}
  .hz-app .sm\:grid-cols-2{grid-template-columns:repeat(2,1fr)}
  .hz-app .sm\:grid-cols-3{grid-template-columns:repeat(3,1fr)}
}

@media (min-width: 768px){
  .hz-app .md\:grid-cols-4{grid-template-columns:repeat(4,1fr)}
  .hz-app .md\:max-w-md{max-width:28rem}
}

@media (min-width: 1024px){
  .hz-app .lg\:grid-cols-6{grid-template-columns:repeat(6,1fr)}
  .hz-app .lg\:max-w-lg{max-width:32rem}
}
/* === Parte 3: Animaciones, tooltips, modales y reglas adicionales === */

/* Tooltips */
.hz-app .hz-tooltip{position:absolute;z-index:50;padding:.5rem 1rem;background-color:#111827;color:white;font-size:.75rem;border-radius:.375rem;opacity:0;transition:opacity .2s}
.hz-app .hz-tooltip-show{opacity:1}

/* Modales y overlays */
.hz-app .hz-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:100}
.hz-app .hz-modal-content{background-color:#fff;padding:2rem;border-radius:20px;max-width:90%;box-shadow:0 10px 25px rgba(0,0,0,.2);animation:hz-fade-in .3s ease-out}

/* Toasts y notificaciones */
.hz-app .hz-toast{position:fixed;bottom:1rem;right:1rem;background-color:#052fdb;color:white;padding:.75rem 1.5rem;border-radius:9999px;box-shadow:0 5px 10px rgba(0,0,0,.2);animation:hz-slide-up .3s ease-out}
.hz-app .hz-toast-error{background-color:#ef4444}

/* Animaciones adicionales */
.hz-app @keyframes hz-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10%)}} 
.hz-app .hz-bounce{animation:hz-bounce 1s infinite}

/* Ocultamiento y utilidades */
.hz-app .hz-hidden{display:none !important}
.hz-app .hz-text-center{text-align:center}
.hz-app .hz-text-right{text-align:right}
.hz-app .hz-text-left{text-align:left}
.hz-app .hz-m-auto{margin:auto}
.hz-app .hz-mt-2{margin-top:.5rem}
.hz-app .hz-mb-2{margin-bottom:.5rem}
.hz-app .hz-ml-2{margin-left:.5rem}
.hz-app .hz-mr-2{margin-right:.5rem}
.hz-app .hz-p-2{padding:.5rem}

/* Scroll y overflow */
.hz-app .hz-scroll-auto{overflow:auto}
.hz-app .hz-scroll-hidden{overflow:hidden}
.hz-app .hz-scroll-x{overflow-x:auto}
.hz-app .hz-scroll-y{overflow-y:auto}

/* Responsive helpers */
@media print{
  .hz-app .hz-no-print{display:none !important}
  .hz-app .hz-print-block{display:block !important}
}


ol.fixed.top-0.z-\[100\].flex.max-h-screen.w-full.flex-col-reverse.p-4.sm\:bottom-0.sm\:right-0.sm\:top-auto.sm\:flex-col.md\:max-w-\[420px\]{
  background: #ffffff;
    position: fixed;
    width: 300px;
    bottom: 0 !important;
    right: 0;
    height: fit-content;
    padding: 0;
    top: 80px;
}