/* ============================================================
   MPCS Proveedores — style.css
   ============================================================ */

:root {
  --navy:        #0C2340;
  --navy-light:  #E6EEF7;
  --accent:      #185FA5;
  --text:        #1a1a2e;
  --text-muted:  #6b7280;
  --border:      rgba(0,0,0,0.10);
  --border-md:   rgba(0,0,0,0.18);
  --bg:          #f5f6fa;
  --white:       #ffffff;
  --success:     #0F6E56;
  --success-bg:  #E1F5EE;
  --error:       #A32D2D;
  --error-bg:    #FCEBEB;
  --warning:     #D97706;
  --warning-bg:  #FEF3C7;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
}

* { box-sizing:border-box; margin:0; padding:0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 15px; color: var(--text);
  background: var(--bg); line-height: 1.6; min-height: 100vh;
}

/* ── LOGIN ── */
.page-login { display:flex;align-items:center;justify-content:center;min-height:100vh;padding:2rem 1rem; }
.login-container { width:100%;max-width:420px; }
.login-header { text-align:center;margin-bottom:2rem; }
.logo { display:inline-flex;align-items:baseline;gap:6px;margin-bottom:8px; }
.logo-mpc { font-size:32px;font-weight:800;color:var(--navy);letter-spacing:-1.5px; }
.logo-sol { font-size:15px;font-weight:500;color:var(--navy);opacity:.65; }
.login-subtitle { font-size:14px;color:var(--text-muted); }
.login-card { background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2rem;box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.login-card h2 { font-size:18px;font-weight:700;margin-bottom:4px; }
.login-card > p { font-size:13px;color:var(--text-muted);margin-bottom:1.5rem; }
.login-footer { text-align:center;margin-top:1rem;font-size:12px;color:var(--text-muted); }

/* ── PORTAL LAYOUT ── */
.portal-layout { display:flex;flex-direction:column;min-height:100vh; }

.portal-header {
  background:var(--navy);color:#fff;padding:0 1.5rem;
  height:60px;display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:100;
}
.portal-logo { display:flex;align-items:baseline;gap:6px; }
.portal-logo .mpc { font-size:20px;font-weight:800;color:#fff;letter-spacing:-1px; }
.portal-logo .sol { font-size:13px;color:rgba(255,255,255,0.6); }
.portal-logo .sep { color:rgba(255,255,255,0.3);margin:0 6px; }
.portal-logo .prov-name { font-size:13px;color:rgba(255,255,255,0.8);font-weight:500; }
.portal-user { display:flex;align-items:center;gap:10px;font-size:13px;color:rgba(255,255,255,0.8); }
.portal-user button { background:rgba(255,255,255,0.15);border:none;border-radius:var(--radius-sm);color:#fff;padding:5px 12px;font-size:12px;cursor:pointer; }

.portal-nav {
  background:var(--white);border-bottom:1px solid var(--border);
  display:flex;gap:0;overflow-x:auto;padding:0 1.5rem;
}
.nav-link {
  display:flex;align-items:center;gap:6px;padding:14px 18px;font-size:14px;font-weight:500;
  color:var(--text-muted);text-decoration:none;border-bottom:2px solid transparent;
  white-space:nowrap;transition:all .15s;
}
.nav-link:hover { color:var(--navy); }
.nav-link.active { color:var(--navy);border-bottom-color:var(--navy);font-weight:600; }

.portal-content { flex:1;padding:1.5rem;max-width:1000px;width:100%;margin:0 auto; }

/* ── CARDS ── */
.card { background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:1rem;overflow:hidden; }
.card-header { padding:1rem 1.5rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between; }
.card-header h2 { font-size:15px;font-weight:600; }
.card-body { padding:1.5rem; }

/* ── FIELDS ── */
.field { margin-bottom:1rem; }
.field label { display:block;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:6px; }
.field input,.field select,.field textarea {
  width:100%;font-size:15px;padding:11px 14px;border:1.5px solid var(--border-md);
  border-radius:var(--radius-md);background:var(--white);color:var(--text);outline:none;
  transition:border-color .15s;-webkit-appearance:none;
}
.field input:focus,.field select:focus,.field textarea:focus {
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(24,95,165,0.1);
}

/* ── BUTTONS ── */
.btn { display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 20px;border-radius:var(--radius-md);font-size:14px;font-weight:600;cursor:pointer;border:1px solid transparent;transition:all .15s;text-decoration:none; }
.btn-primary { background:var(--navy);color:#fff;border-color:var(--navy); }
.btn-primary:hover { background:#0a1c30; }
.btn-primary:disabled { opacity:.5;cursor:not-allowed; }
.btn-success { background:var(--success);color:#fff; }
.btn-ghost { background:transparent;color:var(--text-muted);border-color:var(--border-md); }
.btn-ghost:hover { background:var(--bg); }
.btn-sm { padding:6px 14px;font-size:13px; }
.btn-full { width:100%; }

/* ── ALERTS ── */
.alert { padding:10px 14px;border-radius:var(--radius-md);font-size:13px;margin-bottom:1rem; }
.alert-error   { background:var(--error-bg);color:var(--error);border-left:3px solid var(--error); }
.alert-success { background:var(--success-bg);color:var(--success);border-left:3px solid var(--success); }
.alert-warning { background:var(--warning-bg);color:var(--warning);border-left:3px solid var(--warning); }
.alert-info    { background:var(--navy-light);color:var(--navy);border-left:3px solid var(--navy); }

/* ── BADGES ── */
.badge { display:inline-block;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600; }
.badge-blue   { background:#DBEAFE;color:#1E40AF; }
.badge-green  { background:#D1FAE5;color:#065F46; }
.badge-yellow { background:#FEF3C7;color:#92400E; }
.badge-red    { background:#FEE2E2;color:#991B1B; }
.badge-gray   { background:#F3F4F6;color:#374151; }
.badge-purple { background:#EDE9FE;color:#5B21B6; }

/* ── TABLA ── */
.table-wrap { overflow-x:auto; }
table { width:100%;border-collapse:collapse;font-size:14px; }
th { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);background:var(--bg);padding:10px 14px;border-bottom:2px solid var(--border);text-align:left; }
td { padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:middle; }
tr:last-child td { border-bottom:none; }
tr:hover td { background:rgba(230,238,247,0.3); }

/* ── KPI GRID ── */
.kpi-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:1.5rem; }
.kpi-card { background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem; }
.kpi-val   { font-size:26px;font-weight:700;line-height:1.2;margin-bottom:3px; }
.kpi-label { font-size:12px;color:var(--text-muted); }

/* ── UPLOAD AREA ── */
.upload-area {
  border:2px dashed var(--border-md);border-radius:var(--radius-lg);
  padding:2rem;text-align:center;cursor:pointer;transition:all .15s;
}
.upload-area:hover { border-color:var(--accent);background:var(--navy-light); }

/* ── MODAL ── */
.modal-overlay { position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:200;display:flex;align-items:flex-start;justify-content:center;padding:2rem 1rem;overflow-y:auto; }
.modal-overlay.hidden { display:none; }
.modal { background:var(--white);border-radius:var(--radius-lg);width:100%;max-width:640px;margin:auto; }
.modal-header { padding:1.25rem 1.5rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between; }
.modal-header h3 { font-size:16px;font-weight:700; }
.modal-close { background:none;border:none;font-size:22px;cursor:pointer;color:var(--text-muted);line-height:1; }
.modal-body { padding:1.5rem; }
.modal-footer { padding:1rem 1.5rem;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px; }

/* ── DOC ITEM ── */
.doc-item { display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border); }
.doc-item:last-child { border-bottom:none; }
.doc-icon { width:40px;height:40px;border-radius:var(--radius-md);background:var(--navy-light);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--navy); }

/* ── ESTADO FACTURA ── */
.est-pendiente_validacion { background:#EDE9FE;color:#5B21B6; }
.est-validada    { background:#D1FAE5;color:#065F46; }
.est-observada   { background:#FEF3C7;color:#92400E; }
.est-programada  { background:#DBEAFE;color:#1E40AF; }
.est-pagada      { background:#F3F4F6;color:#374151; }
.est-rechazada   { background:#FEE2E2;color:#991B1B; }

/* ── LOADING ── */
.loading { text-align:center;padding:2rem;color:var(--text-muted);font-size:14px; }
.empty   { text-align:center;padding:3rem;color:var(--text-muted); }
.empty h3 { font-size:16px;margin-bottom:6px; }

@media (max-width:600px) {
  .portal-content { padding:1rem; }
  .kpi-grid { grid-template-columns:1fr 1fr; }
}