/* ============================================================
   MLC Consulting — Design System v2.0
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --navy:#0f172a; --navy-800:#1e293b; --navy-700:#334155;
  --blue:#2563eb; --blue-light:#eff6ff; --blue-mid:#dbeafe;
  --indigo:#4f46e5; --violet:#7c3aed; --slate:#475569;
  --slate-200:#e2e8f0; --slate-100:#f1f5f9; --slate-50:#f8fafc;
  --amber:#d97706; --amber-bg:#fffbeb;
  --green:#16a34a; --green-bg:#f0fdf4;
  --red:#dc2626; --red-bg:#fef2f2;
  --bg:#f0f4fb; --white:#ffffff;
  --border:#e5e7eb; --text:#0f172a; --muted:#64748b;
  --radius:16px; --radius-sm:10px; --radius-xs:6px;
  --shadow:0 4px 24px rgba(15,23,42,.07);
  --shadow-md:0 10px 40px rgba(15,23,42,.10);
  --sidebar-w:272px;
}
html { font-size:15px; }
body { font-family:'Inter','Segoe UI',Arial,sans-serif; background:var(--bg); color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; }

/* ── Login ── */
.login-body { min-height:100vh; display:flex; }
.login-split { display:flex; width:100%; min-height:100vh; }
.login-left { flex:1; background:linear-gradient(145deg,var(--navy) 0%,#1a3a6b 50%,#1d4ed8 100%); display:flex; align-items:center; justify-content:center; padding:48px; position:relative; overflow:hidden; }
.login-left::before { content:''; position:absolute; width:500px; height:500px; background:radial-gradient(circle,rgba(37,99,235,.3) 0%,transparent 70%); top:-100px; right:-100px; }
.login-left::after  { content:''; position:absolute; width:400px; height:400px; background:radial-gradient(circle,rgba(99,102,241,.2) 0%,transparent 70%); bottom:-80px; left:-80px; }
.login-left-inner { position:relative; z-index:1; color:white; max-width:400px; }
.brand-mark { width:72px; height:72px; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); border-radius:20px; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:900; color:white; margin-bottom:28px; backdrop-filter:blur(8px); letter-spacing:-1px; }
.login-left h2 { font-size:32px; font-weight:800; margin-bottom:12px; line-height:1.2; }
.login-left p { color:rgba(255,255,255,.7); font-size:15px; margin-bottom:28px; }
.feature-list { list-style:none; display:flex; flex-direction:column; gap:10px; }
.feature-list li { color:rgba(255,255,255,.85); font-size:14px; font-weight:500; }
.login-right { width:480px; background:var(--white); display:flex; align-items:center; justify-content:center; padding:48px 40px; }
.login-card { width:100%; max-width:380px; }
.login-header { margin-bottom:32px; }
.login-header .brand-mark { background:var(--blue-light); border:1px solid var(--blue-mid); color:var(--blue); margin-bottom:20px; }
.login-header h1 { font-size:26px; font-weight:800; margin-bottom:4px; color:var(--navy); }
.login-header p { color:var(--muted); }

/* ── App Layout ── */
.app-layout { display:flex; min-height:100vh; }

/* ── Sidebar ── */
.sidebar { width:var(--sidebar-w); background:var(--navy); color:white; display:flex; flex-direction:column; position:fixed; top:0; left:0; height:100vh; z-index:100; transition:transform .25s ease; }
.sidebar-brand { display:flex; align-items:center; gap:12px; padding:22px 20px; border-bottom:1px solid rgba(255,255,255,.08); }
.sidebar-brand strong { display:block; font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:160px; }
.sidebar-brand small { display:block; color:rgba(255,255,255,.45); font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.5px; margin-top:1px; }
.sidebar-logo { height:40px; border-radius:8px; object-fit:contain; flex-shrink:0; }
.brand-badge { width:42px; height:42px; border-radius:12px; background:var(--blue); color:white; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; flex-shrink:0; }
.brand-badge.xs { width:32px; height:32px; font-size:11px; border-radius:8px; }
.menu { flex:1; overflow-y:auto; padding:12px 10px; display:flex; flex-direction:column; gap:2px; }
.menu-section { padding:14px 10px 6px; font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,.35); }
.menu-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--radius-sm); color:rgba(255,255,255,.72); font-size:14px; font-weight:500; transition:background .15s,color .15s; }
.menu-item:hover { background:rgba(255,255,255,.08); color:white; }
.menu-item.active { background:var(--blue); color:white; font-weight:600; }
.menu-item svg { flex-shrink:0; opacity:.7; }
.menu-item.active svg { opacity:1; }
.sidebar-footer { padding:14px 12px; border-top:1px solid rgba(255,255,255,.08); display:flex; align-items:center; gap:10px; }
.user-chip { flex:1; display:flex; align-items:center; gap:10px; min-width:0; }
.user-avatar { width:36px; height:36px; border-radius:50%; background:var(--blue); color:white; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0; }
.user-chip strong { display:block; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-chip small { display:block; font-size:11px; color:rgba(255,255,255,.45); text-transform:uppercase; letter-spacing:.5px; }

/* ── Content ── */
.content { flex:1; margin-left:var(--sidebar-w); display:flex; flex-direction:column; min-height:100vh; }
.topbar { background:var(--white); border-bottom:1px solid var(--border); padding:0 28px; height:66px; display:flex; align-items:center; justify-content:space-between; gap:16px; position:sticky; top:0; z-index:50; }
.topbar-title { display:flex; align-items:center; gap:12px; min-width:0; }
.topbar h1 { font-size:17px; font-weight:700; white-space:nowrap; }
.topbar .muted { font-size:12px; color:var(--muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar-actions { display:flex; align-items:center; gap:10px; }
.hamburger { display:none; background:none; border:none; cursor:pointer; color:var(--navy); padding:6px; border-radius:8px; flex-shrink:0; }
.hamburger:hover { background:var(--slate-100); }
.page-body { padding:24px 28px; flex:1; }

/* ── Stats ── */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; margin-bottom:24px; }
.stat-card { background:var(--white); border-radius:var(--radius); padding:22px 20px; box-shadow:var(--shadow); border-top:3px solid transparent; position:relative; overflow:hidden; }
.stat-card::after { content:''; position:absolute; right:-20px; top:-20px; width:80px; height:80px; border-radius:50%; opacity:.06; }
.stat-blue   { border-top-color:var(--blue);   } .stat-blue::after   { background:var(--blue); }
.stat-indigo { border-top-color:var(--indigo); } .stat-indigo::after { background:var(--indigo); }
.stat-violet { border-top-color:var(--violet); } .stat-violet::after { background:var(--violet); }
.stat-slate  { border-top-color:var(--slate);  } .stat-slate::after  { background:var(--slate); }
.stat-amber  { border-top-color:var(--amber);  } .stat-amber::after  { background:var(--amber); }
.stat-icon  { font-size:22px; display:block; margin-bottom:10px; }
.stat-label { display:block; font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
.stat-card strong { font-size:34px; font-weight:800; line-height:1; }

/* ── Panel ── */
.panel { background:var(--white); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); margin-bottom:20px; }
.panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.panel h2 { font-size:16px; font-weight:700; color:var(--navy); margin-bottom:18px; }
.panel-head h2 { margin-bottom:0; }

/* ── Two-col ── */
.two-col-layout { display:grid; grid-template-columns:400px 1fr; gap:20px; align-items:start; }

/* ── Forms ── */
.form-stack { display:flex; flex-direction:column; gap:16px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-group { display:flex; flex-direction:column; gap:6px; }
label { font-size:13px; font-weight:600; color:var(--navy-700); }
input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="date"],input[type="month"],input[type="file"],select,textarea {
  width:100%; padding:10px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:14px; background:var(--white); color:var(--text); transition:border-color .15s,box-shadow .15s; font-family:inherit;
}
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
textarea { resize:vertical; min-height:80px; }
input[type="file"] { padding:8px 12px; background:var(--slate-50); cursor:pointer; }
.form-actions { display:flex; gap:10px; align-items:center; padding-top:4px; }
.form-inline { display:flex; gap:10px; align-items:center; }
small.text-muted { font-size:12px; color:var(--muted); }
.mt-1{margin-top:4px} .mt-2{margin-top:12px} .mt-3{margin-top:20px} .mb-0{margin-bottom:0} .mb-3{margin-bottom:16px}

/* ── Buttons ── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 18px; border-radius:var(--radius-sm); font-weight:600; font-size:14px; border:none; cursor:pointer; transition:opacity .15s,box-shadow .15s,transform .1s; white-space:nowrap; font-family:inherit; line-height:1; }
.btn:hover  { opacity:.88; }
.btn:active { transform:scale(.97); }
.btn-primary { background:var(--blue);   color:white; box-shadow:0 2px 8px rgba(37,99,235,.3); }
.btn-indigo  { background:var(--indigo); color:white; box-shadow:0 2px 8px rgba(79,70,229,.3); }
.btn-danger  { background:var(--red);    color:white; }
.btn-ghost   { background:var(--slate-100); color:var(--navy); border:1px solid var(--border); }
.btn-ghost:hover { background:var(--slate-200); }
.btn-sm  { padding:6px 12px; font-size:13px; }
.btn-xs  { padding:4px 8px;  font-size:12px; border-radius:6px; }
.btn-lg  { padding:13px 22px; font-size:15px; }
.btn-block { width:100%; }

/* ── Table ── */
.table { width:100%; border-collapse:collapse; }
.table th { padding:10px 12px; text-align:left; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); background:var(--slate-50); border-bottom:1px solid var(--border); }
.table th:first-child { border-radius:var(--radius-xs) 0 0 0; }
.table th:last-child  { border-radius:0 var(--radius-xs) 0 0; }
.table td { padding:11px 12px; border-bottom:1px solid var(--border); font-size:14px; vertical-align:middle; }
.table tbody tr:last-child td { border-bottom:none; }
.table tbody tr:hover { background:var(--slate-50); }
.row-total td { background:var(--slate-50); font-weight:600; }
.td-actions { text-align:right; white-space:nowrap; }
.td-actions .btn+.btn { margin-left:6px; }
.text-right { text-align:right; }

/* ── Badges ── */
.badge { display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:700; background:var(--blue-mid); color:var(--blue); }
.badge-lg { padding:6px 14px; font-size:13px; }
.badge-xs { padding:2px 7px; font-size:11px; }
.badge-success { background:#dcfce7; color:#15803d; }
.badge-warning { background:#fef9c3; color:#a16207; }
.badge-info    { background:#e0e7ff; color:#4338ca; }
.badge-danger  { background:#fee2e2; color:#dc2626; }
.badge-indigo  { background:#e0e7ff; color:#4338ca; }
.badge-violet  { background:#ede9fe; color:#7c3aed; }

/* ── Alerts ── */
.alert { display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:var(--radius-sm); font-size:14px; font-weight:500; margin-bottom:18px; }
.alert-success { background:var(--green-bg); color:#15803d; border:1px solid #bbf7d0; }
.alert-error   { background:var(--red-bg);   color:#dc2626; border:1px solid #fecaca; }
.alert-info    { background:var(--blue-light);color:var(--blue); border:1px solid var(--blue-mid); }

/* ── Expensa header card ── */
.exp-header-card { background:var(--white); border-radius:var(--radius); padding:22px 28px; box-shadow:var(--shadow); margin-bottom:20px; display:flex; align-items:center; gap:32px; flex-wrap:wrap; }
.exp-periodo { font-size:22px; font-weight:800; color:var(--navy); }
.exp-actions { margin-left:auto; display:flex; gap:10px; flex-wrap:wrap; }
.text-xl { font-size:20px; font-weight:700; color:var(--blue); }

/* ── Unidad checklist ── */
.unidad-checklist { display:flex; flex-direction:column; gap:2px; max-height:400px; overflow-y:auto; }
.unidad-check-row { display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:var(--radius-sm); cursor:pointer; transition:background .15s; }
.unidad-check-row:hover { background:var(--slate-50); }
.unidad-check-row.disabled { opacity:.5; cursor:not-allowed; }
.unidad-info { flex:1; display:flex; flex-direction:column; gap:1px; }
.unidad-info strong { font-size:14px; }
.unidad-info .text-sm { font-size:12px; }

/* ── Helpers ── */
.text-muted,.muted { color:var(--muted); }
.text-sm { font-size:13px; }
.text-danger { color:var(--red); }
.font-bold { font-weight:700; }
.d-block { display:block; }

/* ── Responsive ── */
@media(max-width:1100px) { .two-col-layout { grid-template-columns:1fr; } }
@media(max-width:900px) {
  .sidebar { transform:translateX(-100%); box-shadow:4px 0 32px rgba(0,0,0,.3); }
  .sidebar.open { transform:translateX(0); }
  .content { margin-left:0; }
  .hamburger { display:flex; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:600px) {
  .login-left { display:none; }
  .login-right { width:100%; padding:32px 20px; }
  .page-body { padding:16px; }
  .topbar { padding:0 16px; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .form-row { grid-template-columns:1fr; }
  .exp-header-card { gap:16px; }
  .exp-actions { margin-left:0; width:100%; }
  .table th,.table td { padding:8px 10px; font-size:13px; }
}