*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #f5f4f0; --surface: #ffffff; --surface2: #f0ede8;
  --border: #dddad4; --border2: #ccc9c2;
  --text: #1a1917; --text2: #6b6860;
  --green: #1D9E75; --green-bg: #E1F5EE; --green-dark: #085041;
  --amber: #BA7517; --amber-bg: #FAEEDA; --amber-dark: #412402;
  --red: #993C1D; --red-bg: #FAECE7;
  --blue: #185FA5; --blue-bg: #E6F1FB; --blue-dark: #042C53;
  --radius: 10px; --radius-sm: 6px;
}
body { font-family: 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; display: flex; margin: 0; padding: 0; }
.app { padding: 2rem 1.5rem; max-width: 100%; width: 100%; }

.imp-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:2rem; }
.imp-header h1 { font-size:22px; font-weight:700; }
.imp-header p  { font-size:13px; color:var(--text2); margin-top:4px; }
.imp-logo-cliente { height:52px; width:auto; object-fit:contain; border-radius:6px; padding:4px 8px; background:white; border:1px solid var(--border); }

.imp-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:2rem; margin-bottom:1.5rem; }
.imp-step-label { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--blue); margin-bottom:6px; }
.imp-step-title { font-size:17px; font-weight:700; margin-bottom:4px; }
.imp-step-desc  { font-size:13px; color:var(--text2); margin-bottom:1.2rem; }

/* Upload box */
.upload-box { border:2px dashed var(--border); border-radius:var(--radius); padding:1rem 1.5rem; cursor:pointer; transition:all .15s; text-align:left; display:flex; flex-direction:row; align-items:center; gap:12px; }
.upload-box:hover { border-color:var(--green); background:var(--green-bg); }
.upload-box.loaded { border-style:solid; border-color:var(--green); background:var(--green-bg); }
.u-icon  { font-size:32px; }
.u-label { font-size:14px; font-weight:600; color:var(--text); }
.u-hint  { font-size:12px; color:var(--text2); }
.upload-box.loaded .u-label { color:var(--green-dark); }
.upload-box.loaded .u-hint  { color:var(--green); }

/* Meta info */
.imp-meta { display:flex; gap:16px; margin-bottom:1.2rem; flex-wrap:wrap; }
.imp-meta-item { background:var(--surface2); border-radius:var(--radius-sm); padding:8px 16px; font-size:13px; display:flex; flex-direction:column; gap:2px; }
.imp-meta-item strong { color:var(--blue-dark); display:block; font-size:16px; }

/* Alerta */
.imp-alerta { background:#FEF3C7; border:1px solid #F59E0B; border-radius:var(--radius-sm); padding:12px 16px; font-size:13px; color:#92400E; margin-bottom:1rem; }
.imp-alerta a { color:#92400E; font-weight:700; }

/* Tabla */
.imp-table-wrap { border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-bottom:1rem; }
.imp-table { width:100%; border-collapse:collapse; font-size:13px; }
.imp-table thead th { background:var(--surface2); padding:9px 14px; text-align:left; font-size:11px; font-weight:600; color:var(--text2); text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--border); white-space:nowrap; }
.imp-table tbody td { padding:9px 14px; border-bottom:1px solid var(--border); vertical-align:middle; }
.imp-table tbody tr:last-child td { border-bottom:none; }
.imp-table tbody tr:hover td { background:var(--surface2); }
.row-warn td { background:#FEF3C710; }
.pill-warn { background:#FEF3C7; color:#92400E; font-size:11px; padding:2px 8px; border-radius:20px; font-weight:600; }

/* Stats footer */
.imp-footer-stats { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:1.5rem; }
.imp-stat { background:var(--surface2); border-radius:var(--radius-sm); padding:10px 18px; font-size:13px; }
.imp-stat strong { display:block; font-size:20px; font-weight:700; color:var(--blue-dark); }

/* Actions */
.imp-actions { display:flex; gap:12px; justify-content:flex-end; }
.btn-primary  { padding:10px 20px; border:none; border-radius:var(--radius-sm); background:var(--blue-dark); color:white; font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; }
.btn-primary:hover { opacity:.88; }
.btn-secondary { padding:10px 16px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--text); font-size:13px; cursor:pointer; font-family:inherit; font-weight:500; }
.btn-secondary:hover { background:var(--surface2); }

/* Error */
.imp-error { background:var(--red-bg); border:1px solid #F09595; border-radius:var(--radius-sm); padding:12px 16px; font-size:13px; color:var(--red); }

/* Spinner */
.spinner { width:18px; height:18px; border:2.5px solid var(--border); border-top-color:var(--green); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }