:root{
  --bg:#0b240d;
  --bg2:#0f2f12;
  --card:rgba(255,255,255,.05);
  --card2:rgba(255,255,255,.03);
  --border:rgba(255,255,255,.09);
  --text:#f4f4ef;
  --muted:rgba(244,244,239,.72);
  --muted2:rgba(244,244,239,.52);
  --cyan:#40c9ff;
  --pink:#ff4fa0;
  --green:#3ad176;
  --gold:#d3a73c;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:'Poppins',system-ui,sans-serif;background:
  radial-gradient(circle at top left, rgba(86,118,73,.22), transparent 22%),
  radial-gradient(circle at top right, rgba(64,201,255,.10), transparent 20%),
  linear-gradient(180deg,#08210b 0%,#0b240d 40%,#0d2a10 100%);color:var(--text)}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.app-shell{min-height:100vh}
.topbar{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:56px 1fr 56px;align-items:center;gap:14px;padding:14px 18px;background:linear-gradient(90deg,rgba(13,45,14,.92),rgba(21,56,18,.88));backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav-btn,.user-dot{height:56px;width:56px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);display:grid;place-items:center;font-size:28px;color:#fff}
.user-dot{font-size:16px;color:rgba(255,255,255,.8)}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.brand-logo{width:128px;max-width:34vw;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.24))}
.brand-copy h1{margin:0;font-size:clamp(1.18rem,2.4vw,1.8rem);line-height:1.05;font-weight:700}
.brand-copy p{margin:4px 0 0;color:var(--muted);font-size:.93rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.content{max-width:1080px;margin:0 auto;padding:18px 18px 42px}
.section-label{display:block;font-size:.87rem;text-transform:uppercase;letter-spacing:.15em;color:var(--muted2);font-weight:700;margin:8px 8px 12px}
.card{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.03));border:1px solid var(--border);border-radius:26px;box-shadow:0 18px 54px rgba(0,0,0,.28);overflow:hidden}
.hero{padding:22px;display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:18px}
.hero h2{margin:0;font-size:clamp(1.7rem,3.5vw,2.45rem);line-height:1.04}
.hero p{margin:10px 0 0;color:var(--muted);line-height:1.55;max-width:740px}
.hero-pills,.drop-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.pill{display:inline-flex;align-items:center;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:#e7dfd0;font-weight:600;font-size:.92rem}
.status-badge{padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);font-size:.9rem;white-space:nowrap}
.status-badge.ok{color:#98f0b8}.status-badge.error{color:#ffb0b0}.status-badge.loading{color:#9edfff}
.notice{display:grid;grid-template-columns:52px 1fr;gap:14px;padding:18px;margin-bottom:18px;align-items:flex-start}
.notice-icon{font-size:1.8rem;line-height:1}
.notice p{margin:0 0 10px;color:var(--muted);line-height:1.55}.notice p:last-child{margin-bottom:0}.notice strong{color:#7ed9ff}
.workspace{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;margin-bottom:18px}
.upload-card,.side-card,.results-card{padding:16px}
.drop{min-height:270px;border:2px dashed rgba(64,201,255,.35);border-radius:28px;padding:26px 18px;text-align:center;display:grid;place-items:center;gap:10px;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01)),radial-gradient(circle at top, rgba(64,201,255,.08), transparent 38%);cursor:pointer;transition:.2s ease}
.drop.drag{transform:scale(.995);border-color:rgba(64,201,255,.9);box-shadow:0 0 0 4px rgba(64,201,255,.12) inset}
.drop-emoji{font-size:3.4rem;line-height:1}.drop strong{font-size:1.3rem}.drop span{color:var(--muted);max-width:460px;line-height:1.5}
.control-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.field{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--border);border-radius:18px;background:rgba(255,255,255,.03);color:var(--muted);font-size:.95rem}
.field.toggle{justify-content:flex-start}.field input[type='number']{width:84px;background:transparent;border:none;outline:none;color:var(--text);font:inherit;text-align:right}.field input[type='checkbox']{width:18px;height:18px}
.actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px}
.btn{appearance:none;border:0;outline:0;width:100%;min-height:62px;border-radius:20px;padding:14px 16px;font:700 1rem 'Poppins',sans-serif;cursor:pointer;color:#132019;transition:transform .2s ease, opacity .2s ease}.btn:hover{transform:translateY(-1px)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-primary{background:linear-gradient(90deg,#3ec6ff 0%,#b374ff 45%,#ff4fa0 100%)}
.btn-secondary{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:var(--text)}
.btn-success{background:linear-gradient(90deg,#16a34a 0%,#22c55e 100%);color:#f7fff9}
.btn-ghost{background:rgba(251,113,133,.12);border:1px solid rgba(251,113,133,.35);color:#ffd5dd}
.progress{height:12px;border-radius:999px;overflow:hidden;border:1px solid var(--border);background:rgba(255,255,255,.03);margin-top:14px}.progress>div{height:100%;width:0%;background:linear-gradient(90deg,rgba(62,198,255,.95),rgba(255,79,160,.95))}
.kpi{display:grid;gap:12px}.kpi-item{min-height:120px;border:1px solid var(--border);background:rgba(255,255,255,.03);border-radius:20px;padding:16px;display:flex;flex-direction:column;justify-content:space-between}.kpi-item b{font-size:1.5rem}.kpi-item span{color:var(--muted);font-size:.95rem}
.hint{color:var(--muted);font-size:.92rem;line-height:1.5;margin:12px 2px 0}
.list{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.thumb{border:1px solid var(--border);border-radius:18px;overflow:hidden;background:rgba(0,0,0,.18)}
.thumb .img{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:linear-gradient(45deg, rgba(255,255,255,.06) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.06) 75%, rgba(255,255,255,.06)),linear-gradient(45deg, rgba(255,255,255,.06) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.06) 75%, rgba(255,255,255,.06));background-position:0 0,12px 12px;background-size:24px 24px}
.thumb img{max-width:100%;max-height:100%}.thumb .meta{padding:10px;display:flex;flex-direction:column;gap:6px}.meta .name{font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.meta .stat{font-size:.73rem;color:var(--muted);display:flex;justify-content:space-between;gap:10px}
@media (max-width:960px){.workspace{grid-template-columns:1fr}.actions{grid-template-columns:1fr 1fr}.list{grid-template-columns:repeat(3,1fr)}}
@media (max-width:680px){.topbar{grid-template-columns:52px 1fr 52px;gap:10px;padding:12px 14px}.nav-btn,.user-dot{width:52px;height:52px;border-radius:16px}.brand-logo{width:108px}.content{padding:16px 16px 36px}.hero{flex-direction:column;padding:18px}.notice{grid-template-columns:1fr;padding:16px}.drop{min-height:240px;padding:22px 14px}.control-grid,.actions{grid-template-columns:1fr}.list{grid-template-columns:repeat(2,1fr)}}

/* Modelo selector */
.model-card{ padding:18px; margin-bottom:18px; }
.model-field{ margin-bottom:8px; }
.model-select{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.15);
  border-radius:12px;
  color:var(--text);
  font:600 .95rem 'Poppins',sans-serif;
  padding:8px 14px;
  outline:none;
  cursor:pointer;
  min-width:260px;
}
.model-select:focus{ border-color:var(--cyan); }
.model-select option{ background:#0f2f12; color:var(--text); }

/* Error en thumbnail */
.err-msg{ font-size:.72rem; color:#ffb0b0; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Control grid 4 columnas en desktop */
.control-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:680px){ .control-grid{ grid-template-columns:1fr 1fr; } }