/* ═══════════════════════════════════════════════════════════════════
   UPLOAD.CSS — Tela de upload com drag & drop e progress bar.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tela de upload (layout centrado) ───────────────────────────── */
.upload-screen {
  min-height:     100vh;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content:center;
  padding:        var(--sp-8) var(--sp-4);
  background:     linear-gradient(135deg, #F0F4FF 0%, #F8FAFC 50%, #F5F3FF 100%);
  animation:      fadeIn var(--t-normal) both;
}

/* ── Header / Logo ───────────────────────────────────────────────── */
.upload-header {
  text-align: center;
  margin-bottom: var(--sp-8);
}
.upload-logo {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--sp-3);
  margin-bottom:   var(--sp-4);
}
.upload-logo-icon {
  width:           48px;
  height:          48px;
  background:      var(--c-primary);
  border-radius:   var(--r-xl);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           #fff;
  font-size:       22px;
  box-shadow:      0 4px 14px rgba(37,99,235,.3);
}
.upload-logo-text {
  font-size:   28px;
  font-weight: 800;
  color:       var(--c-text-primary);
}
.upload-logo-text span { color:var(--c-primary); }

.upload-title {
  font-size:   var(--text-3xl);
  font-weight: 800;
  color:       var(--c-text-primary);
  margin-bottom:var(--sp-3);
  line-height: 1.2;
}
.upload-subtitle {
  font-size:  var(--text-lg);
  color:      var(--c-text-secondary);
  max-width:  540px;
  margin:     0 auto;
  line-height:1.6;
}

/* ── Card de upload ──────────────────────────────────────────────── */
.upload-card {
  background:    var(--c-surface);
  border-radius: var(--r-xl);
  box-shadow:    var(--shadow-lg);
  padding:       var(--sp-8);
  width:         100%;
  max-width:     560px;
  animation:     fadeInScale var(--t-normal) both;
}

/* ── Zona de drop ────────────────────────────────────────────────── */
.upload-zone {
  border:         2px dashed var(--c-border);
  border-radius:  var(--r-lg);
  padding:        var(--sp-10) var(--sp-6);
  text-align:     center;
  cursor:         pointer;
  transition:     all var(--t-fast);
  background:     var(--c-neutral-light);
  user-select:    none;
  outline:        none;
}
.upload-zone:hover, .upload-zone:focus-visible {
  border-color: var(--c-primary);
  background:   var(--c-primary-light);
}
.upload-zone.dragging {
  border-color: var(--c-primary);
  background:   var(--c-primary-light);
  transform:    scale(1.01);
  box-shadow:   0 0 0 4px rgba(37,99,235,.1);
}

.upload-zone-icon {
  font-size:     40px;
  color:         var(--c-primary);
  margin-bottom: var(--sp-4);
  transition:    transform var(--t-fast);
}
.upload-zone.dragging .upload-zone-icon { transform: scale(1.15); }

.upload-zone-title {
  font-size:     var(--text-lg);
  font-weight:   700;
  color:         var(--c-text-primary);
  margin-bottom: var(--sp-2);
}
.upload-zone-sub {
  font-size:  var(--text-sm);
  color:      var(--c-text-secondary);
  margin-bottom:var(--sp-4);
}
.upload-zone-sub span {
  color:          var(--c-primary);
  font-weight:    600;
  text-decoration:underline;
  cursor:         pointer;
}

/* Badges de formato */
.upload-zone-formats {
  display:     flex;
  gap:         var(--sp-2);
  justify-content:center;
  flex-wrap:   wrap;
}
.format-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  padding:       3px 10px;
  border-radius: var(--r-full);
  font-size:     var(--text-xs);
  font-weight:   600;
}
.format-badge.csv  { background:#DCFCE7; color:#166534; }
.format-badge.xlsx { background:#DBEAFE; color:#1D4ED8; }
.format-badge.xls  { background:#EDE9FE; color:#6D28D9; }

/* ── Progress bar ────────────────────────────────────────────────── */
.upload-progress {
  margin-top:    var(--sp-5);
  padding-top:   var(--sp-4);
  border-top:    1px solid var(--c-divider);
  animation:     fadeIn var(--t-fast) both;
}
.upload-progress-header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   var(--sp-2);
  font-size:       var(--text-sm);
}
.upload-progress-label { color:var(--c-text-secondary); font-weight:500; }
.upload-progress-pct   { color:var(--c-primary); font-weight:700; font-family:var(--font-mono); }

.progress-bar-track {
  height:        8px;
  background:    var(--c-neutral-light);
  border-radius: var(--r-full);
  overflow:      hidden;
}
.progress-bar-fill {
  height:        100%;
  background:    linear-gradient(90deg, var(--c-primary), var(--c-secondary));
  border-radius: var(--r-full);
  transition:    width var(--t-normal);
  animation:     progressFill var(--t-normal) both;
}

/* ── Error box ───────────────────────────────────────────────────── */
.upload-error-box {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--sp-3);
  margin-top:    var(--sp-5);
  padding:       var(--sp-3) var(--sp-4);
  background:    var(--c-danger-light);
  border:        1px solid #FECACA;
  border-radius: var(--r-md);
  animation:     fadeIn var(--t-fast) both;
}
.upload-error-icon { color:var(--c-danger); flex-shrink:0; margin-top:2px; }
.upload-error-text { flex:1; font-size:var(--text-sm); color:#991B1B; line-height:1.5; }
.upload-error-dismiss {
  background:    none;
  border:        none;
  color:         #991B1B;
  opacity:       .7;
  padding:       2px;
  flex-shrink:   0;
  transition:    opacity var(--t-fast);
}
.upload-error-dismiss:hover { opacity: 1; }

/* ── Features ────────────────────────────────────────────────────── */
.upload-features {
  display:   flex;
  gap:       var(--sp-6);
  margin-top:var(--sp-8);
  flex-wrap: wrap;
  justify-content:center;
}
.upload-feature {
  display:     flex;
  flex-direction:column;
  align-items: center;
  gap:         var(--sp-2);
  text-align:  center;
  max-width:   160px;
  animation:   fadeIn var(--t-slow) both;
}
.upload-feature-icon {
  width:           44px;
  height:          44px;
  background:      var(--c-surface);
  border:          1px solid var(--c-border);
  border-radius:   var(--r-xl);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       18px;
  color:           var(--c-primary);
  box-shadow:      var(--shadow-sm);
}
.upload-feature-label {
  font-size:  var(--text-sm);
  color:      var(--c-text-secondary);
  line-height:1.4;
}

/* ── Footer ──────────────────────────────────────────────────────── */
.upload-footer {
  margin-top:  var(--sp-8);
  font-size:   var(--text-xs);
  color:       var(--c-text-tertiary);
  text-align:  center;
}