/* static/style.css */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:linear-gradient(135deg,#f6f7f8 0%,#eef2f2 100%);min-height:100vh;color:#1f2937;line-height:1.6}
.container{max-width:1200px;margin:0 auto;padding:1rem;display:flex;flex-direction:column;gap:1.5rem}
.header{text-align:center;margin-bottom:1rem}
.brand-header{display:flex;align-items:center;justify-content:center;gap:1rem}
.brand-logo{height:56px;width:auto}
.brand-headings{display:flex;flex-direction:column;align-items:flex-start}
.title{font-size:2.5rem;font-weight:700;color:#121519;display:flex;align-items:center;gap:.75rem;margin-bottom:.25rem}
.subtitle{font-size:1.125rem;color:#475569;max-width:640px}
.main-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media (min-width:1024px){.main-grid{grid-template-columns:2fr 1fr}}
.upload-section{display:flex;flex-direction:column;gap:1.5rem}
.settings-panel{display:flex;flex-direction:column;gap:1.5rem}
.card{background:#fff;border-radius:.75rem;box-shadow:0 1px 3px rgba(0,0,0,.1);overflow:hidden}
.card-header{padding:1.25rem 1.5rem 0}
.card-title{font-size:1.25rem;font-weight:600;color:#121519;display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}
.card-title-small{font-size:1rem;font-weight:600;color:#121519}
.card-description{color:#64748b;font-size:.875rem}
.card-content{padding:1.25rem 1.5rem 1.5rem}
.icon{width:1.25rem;height:1.25rem;color:currentColor}
.icon-large{width:2.5rem;height:2.5rem;color:#16a34a}
.upload-icon{width:4rem;height:4rem;color:#94a3b8}
.file-icon{width:4rem;height:4rem;color:#16a34a}
.drop-zone{border:2px dashed #d1d5db;border-radius:.5rem;padding:2rem;text-align:center;transition:all .2s;cursor:pointer}
.drop-zone:hover{border-color:#94a3b8}
.drop-zone.drag-over{border-color:#16a34a;background-color:#ecfdf5}
.upload-prompt{display:flex;flex-direction:column;align-items:center;gap:1rem}
.upload-text{font-size:1.125rem;font-weight:500;color:#121519}
.upload-subtext{color:#64748b;font-size:.875rem}
.file-info{display:flex;flex-direction:column;align-items:center;gap:1rem}
.file-name{font-size:1.125rem;font-weight:600;color:#121519}
.file-details{display:flex;align-items:center;gap:.5rem;color:#64748b;font-size:.875rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:.375rem;font-weight:500;font-size:.875rem;border:none;cursor:pointer;transition:all .2s;text-decoration:none}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background-color:#16a34a;color:#fff}
.btn-primary:hover:not(:disabled){background-color:#15803d}
.btn-outline{background-color:transparent;color:#374151;border:1px solid #d1d5db}
.btn-outline:hover{background-color:#f9fafb}
.btn-large{width:100%;padding:.75rem 1.5rem;font-size:1rem}
.progress-section{margin-bottom:1rem}
.progress-header{display:flex;justify-content:space-between;margin-bottom:.5rem;font-size:.875rem}
.progress-bar{width:100%;height:.5rem;background-color:#e5e7eb;border-radius:.25rem;overflow:hidden}
.progress-fill{height:100%;background-color:#16a34a;transition:width .3s ease;width:0%}
.progress-details{display:flex;justify-content:space-between;font-size:.875rem;color:#64748b}
.setting-group{margin-bottom:1.25rem}
.setting-label{display:block;font-weight:500;color:#1f2937;margin-bottom:.5rem}
.slider{width:100%;height:.5rem;border-radius:.25rem;background:#e5e7eb;outline:none;-webkit-appearance:none;appearance:none}
.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:1.25rem;height:1.25rem;border-radius:50%;background:#16a34a;cursor:pointer}
.slider::-moz-range-thumb{width:1.25rem;height:1.25rem;border-radius:50%;background:#16a34a;cursor:pointer;border:none}
.setting-help{font-size:.75rem;color:#64748b;margin-top:.25rem}
.info-row{display:flex;justify-content:space-between;margin-bottom:.75rem;font-size:.875rem}
.info-label{color:#64748b}
.info-value{font-weight:500;color:#121519}
.info-text{font-size:.75rem;color:#64748b;line-height:1.5}
.frames-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:1rem;max-height:24rem;overflow-y:auto;margin-bottom:1rem}
.frame-item{position:relative;border-radius:.5rem;overflow:hidden;border:1px solid #e5e7eb;cursor:pointer;transition:transform .2s}
.frame-item:hover{transform:scale(1.05)}
.frame-image{width:100%;height:6rem;object-fit:cover}
.frame-overlay{position:absolute;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;color:#fff;font-size:.875rem;font-weight:500}
.frame-item:hover .frame-overlay{opacity:1}
.results-footer{display:flex;justify-content:space-between;align-items:center}
.results-text{font-size:.875rem;color:#64748b}
.badge{background-color:#f3f4f6;color:#374151;padding:.25rem .5rem;border-radius:.375rem;font-size:.75rem;font-weight:500}
.separator{height:1px;background-color:#e5e7eb;margin:1rem 0}
.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
@media (max-width:768px){
  .title{font-size:2rem}
  .frames-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
  .results-footer{flex-direction:column;gap:1rem;align-items:stretch}
  .brand-header{flex-direction:column}
  .brand-headings{align-items:center}
}
.results-compact{max-width:720px;margin:0 auto}
.results-compact .card-header{padding:12px 16px}
.results-compact .card-title{font-size:1rem;line-height:1.25rem}
.results-compact .card-description{font-size:.9rem}
.results-compact .card-content{padding:12px 16px}
.results-compact .frames-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px;max-height:260px;overflow:auto}
.frame-thumb{width:100%;height:64px;object-fit:cover;border-radius:6px}
.results-compact .results-footer{gap:8px}
.results-compact .btn{padding:8px 12px;font-size:14px}
.results-compact .badge{font-size:12px;padding:2px 6px}

.switch{position:relative;display:inline-block;width:46px;height:26px;vertical-align:middle}
.switch input{opacity:0;width:0;height:0}
.switch-slider{position:absolute;inset:0;background:#e5e7eb;border-radius:999px;transition:.2s}
.switch-slider:before{content:"";position:absolute;height:20px;width:20px;left:3px;top:3px;background:white;border-radius:50%;transition:.2s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.switch input:checked + .switch-slider{background:#16a34a}
.switch input:checked + .switch-slider:before{transform:translateX(20px)}

/* Campo de texto SKU */
.input{
  width:100%;
  padding:.6rem .75rem;
  font-size:.95rem;
  border:1px solid #d1d5db;
  border-radius:.375rem;
  outline:0;
  background:#fff;
  color:#111827;
}
.input:focus{
  border-color:#16a34a;
  box-shadow:0 0 0 3px rgba(22,163,74,.15);
}


/* === Loader overlay (cubre toda la pantalla) === */
.loader-overlay{
  position:fixed; inset:0;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center;
  z-index:9999;
  transition:opacity .3s ease, visibility .3s ease;
}
.loader-overlay.is-hidden{opacity:0; visibility:hidden; pointer-events:none}

/* === Loader (from Uiverse.io) === */
.loader { width: fit-content; height: fit-content; display:flex; align-items:center; justify-content:center; }
.wrapper { width:fit-content; height:fit-content; display:flex; flex-direction:column; justify-content:center; align-items:center; }
.catContainer { width:100%; height:fit-content; display:flex; align-items:center; justify-content:center; position:relative; }
.catbody { width:80px; }
.tail { position:absolute; width:17px; top:50%; animation:tail .5s ease-in infinite alternate-reverse; transform-origin:top; }
@keyframes tail { 0%{transform:rotateZ(60deg)} 50%{transform:rotateZ(0deg)} 100%{transform:rotateZ(-20deg)} }
.wall { width:300px; }
.text { display:flex; flex-direction:column; width:50px; position:absolute; margin:0 0 100px 120px; }
.zzz { color:black; font-weight:700; font-size:15px; animation:zzz 2s linear infinite; }
.bigzzz { color:black; font-weight:700; font-size:25px; margin-left:10px; animation:zzz 2.3s linear infinite; }
@keyframes zzz { 0%{color:transparent} 50%{color:black} 100%{color:transparent} }