/* ============================================================
   CARGA.CSS — re-piel Atlas de Carga de datos. SOLO CSS.
   TODA regla scopeada a #page-carga. Tokens: atlas-tokens.css.
   Cargar como ÚLTIMA hoja. NO toca carga.js ni la mecánica de
   subida (inputs/handlers/POST). Re-scopea las globales
   .upload-*/.hist-* sin borrarlas (otras pantallas podrían usarlas).
   ============================================================ */

/* ---- tarjetas ---- */
#page-carga .card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:var(--s-5); }
#page-carga .card.mt-16 { margin-top:var(--s-4); }

/* ---- zonas de subida (mecánica intacta; solo aspecto) ---- */
#page-carga .upload-zone { border:2px dashed var(--border); border-radius:var(--radius-lg); padding:36px 24px; text-align:center; cursor:pointer; background:var(--surface-2); transition:border-color .18s, background .18s; }
#page-carga .upload-zone:hover { border-color:var(--accent); background:var(--accent-weak); }
#page-carga .upload-zone.dragover { border-color:var(--accent); background:var(--accent-weak); }
#page-carga .upload-icon { font-size:34px; margin-bottom:12px; color:var(--accent-strong); }
#page-carga .upload-title { font-weight:600; font-size:14px; color:var(--text); margin-bottom:4px; }
#page-carga .upload-sub { font-size:12px; color:var(--text-3); }
#page-carga .upload-input { display:none; }

/* ---- historial: filas (las pinta carga.js) ---- */
#page-carga .upload-item { display:flex; align-items:center; gap:12px; padding:11px 14px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); margin-bottom:8px; transition:border-color .13s, box-shadow .13s; }
#page-carga .upload-item:hover { border-color:var(--border-strong); box-shadow:var(--shadow-card); }
#page-carga .upload-item-icon { color:var(--accent-strong); font-size:18px; }
#page-carga .upload-item-info { flex:1; min-width:0; }
#page-carga .upload-item-name { font-weight:600; font-size:13px; color:var(--text); }
#page-carga .upload-item-meta { font-size:11px; color:var(--text-3); font-family:var(--font-num); }

/* ---- filtros del historial (pills) ---- */
#page-carga .hist-filters { display:flex; gap:6px; flex-wrap:wrap; }
#page-carga .hist-filter-pill { padding:6px 14px; border-radius:var(--radius-pill); border:1px solid var(--border); font-size:12px; font-weight:600; font-family:var(--font-sans); cursor:pointer; background:var(--surface); color:var(--text-2); transition:all .13s; }
#page-carga .hist-filter-pill:hover:not(.active) { background:var(--hover); color:var(--text); border-color:var(--border-strong); }
#page-carga .hist-filter-pill.active { background:var(--accent); color:var(--accent-on); border-color:var(--accent); }

/* ---- badges (estado de cada carga) ---- */
#page-carga .badge { display:inline-flex; align-items:center; padding:3px 9px; border-radius:var(--radius-pill); font-size:10.5px; font-weight:700; letter-spacing:.02em; line-height:1.5; }
#page-carga .badge-pos,
#page-carga .badge-contable { background:var(--pos-bg); color:var(--pos); }
#page-carga .badge-warn,
#page-carga .badge-provisional { background:var(--warn-bg); color:var(--warn); }
#page-carga .badge-neg { background:var(--neg-bg); color:var(--neg); }
#page-carga .badge-info { background:var(--accent-weak); color:var(--accent-strong); }
#page-carga .badge-neu,
#page-carga .badge-sustituido { background:var(--surface-2); color:var(--text-3); }

/* ---- estado vacío ---- */
#page-carga .empty-state { padding:32px; text-align:center; color:var(--text-3); }
#page-carga .empty-icon { font-size:32px; margin-bottom:12px; opacity:.5; }
#page-carga .empty-title { font-size:15px; font-weight:700; color:var(--text); margin-bottom:6px; }
#page-carga .empty-sub { font-size:13px; color:var(--text-3); }

/* ---- utilidades usadas por la pantalla ---- */
#page-carga .fw-600 { font-weight:600; color:var(--text); }
#page-carga .text-sm { font-size:13px; }
#page-carga .text-muted { color:var(--text-3); }
#page-carga .text-mono { font-family:var(--font-num); }