/* ============================================================
   JUNQO DASHBOARD – styles.css
   ============================================================ */

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

:root {
  --bg:          #f1f5f9;
  --panel:       #ffffff;
  --line:        #e2e8f0;
  --line-soft:   #edf2f7;
  --text:        #0f172a;
  --muted:       #64748b;
  --muted-soft:  #94a3b8;
  --green:       #059669;
  --green-soft:  #ecfdf5;
  --red:         #e11d48;
  --red-soft:    #fff1f2;
  --amber:       #d97706;
  --amber-soft:  #fffbeb;
  --sky:         #0284c7;
  --sky-soft:    #f0f9ff;
  --dark:        #0f172a;
  --brand:       #0b4f6c;
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   18px;
  --shadow-sm:   0 1px 4px rgba(15,23,42,.05), 0 2px 8px rgba(15,23,42,.03);
  --shadow-md:   0 4px 12px rgba(15,23,42,.08), 0 10px 24px rgba(15,23,42,.05);
  --transition:  all .18s ease;
}

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.5;
}

button, input { font: inherit; }
svg { display: inline-block; vertical-align: middle; }

/* ============================================================
   LAYOUT
   ============================================================ */
.layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 100vh;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-logo {
  padding: 20px 18px 18px;
  border-bottom: 1px solid var(--line-soft);
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.wordmark {
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -.05em;
  color: var(--brand);
  line-height: 1;
}

.wordmark-sub {
  font-size: 11px;
  color: var(--muted-soft);
  margin-top: 4px;
  letter-spacing: .01em;
}

.sidebar-nav {
  padding: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: none;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  transition: var(--transition);
  text-align: left;
}

.nav-btn:hover {
  background: #f8fafc;
  color: var(--text);
  transform: translateX(2px);
}

.nav-btn.active {
  background: var(--green-soft);
  color: var(--green);
  font-weight: 600;
}

.nav-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: .85; }
.nav-btn.active .nav-icon { opacity: 1; }

.sidebar-card {
  margin: 0 12px 14px;
  background: var(--dark);
  border-radius: var(--radius-lg);
  padding: 18px;
  color: #fff;
}

.sidebar-card-header { display: flex; align-items: flex-start; justify-content: space-between; }
.sidebar-card .label { font-size: 12px; color: var(--muted-soft); }
.sidebar-card .big { font-size: 28px; font-weight: 600; margin-top: 4px; letter-spacing: -.03em; }
.sidebar-card .sub { font-size: 12px; color: var(--muted-soft); margin-top: 6px; line-height: 1.45; }

.progress-track {
  height: 6px;
  background: #1e293b;
  border-radius: 999px;
  margin-top: 12px;
  overflow: hidden;
}

.progress-fill {
  height: 6px;
  background: #059669;
  border-radius: 999px;
  transition: width .5s ease;
}

.sidebar-btn {
  margin-top: 14px;
  width: 100%;
  background: rgba(255,255,255,.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}
.sidebar-btn:hover { background: rgba(255,255,255,.18); transform: translateY(-1px); }

/* ============================================================
   HEADER
   ============================================================ */
.main { display: flex; flex-direction: column; min-height: 100vh; }

.header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 72px;
}

.header-left { display: flex; align-items: center; gap: 16px; }
.header-logo { font-size: 26px; font-weight: 400; letter-spacing: -.05em; color: var(--brand); line-height: 1; white-space: nowrap; }
.header-titles h1 { font-size: 16px; font-weight: 600; letter-spacing: -.02em; color: var(--text); line-height: 1.2; }
.header-titles p { font-size: 12px; color: var(--muted); margin-top: 2px; }
.header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.search-wrap { position: relative; }
.search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted-soft); pointer-events: none; width: 15px; height: 15px; }
.search-wrap input { border: 1px solid var(--line); background: #f8fafc; border-radius: var(--radius-md); padding: 8px 14px 8px 34px; font-size: 13px; width: 280px; height: 38px; outline: none; color: var(--text); transition: var(--transition); }
.search-wrap input::placeholder { color: var(--muted-soft); }
.search-wrap input:focus { border-color: #cbd5e1; box-shadow: 0 0 0 3px rgba(148,163,184,.15); background: #fff; }

.btn-outline { border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius-md); padding: 8px 14px; height: 38px; font-size: 13px; font-weight: 500; color: var(--text); cursor: pointer; transition: var(--transition); white-space: nowrap; }
.btn-outline:hover { background: #f8fafc; border-color: #cbd5e1; }
.btn-sm { height: 34px; padding: 6px 12px; font-size: 12px; }

.bell-btn { position: relative; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius-md); cursor: pointer; color: var(--muted); transition: var(--transition); flex-shrink: 0; }
.bell-btn:hover { background: #f8fafc; border-color: #cbd5e1; }
.bell-dot { position: absolute; right: 7px; top: 7px; width: 8px; height: 8px; background: #ef4444; border-radius: 50%; border: 2px solid #fff; }

.user-chip { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius-md); padding: 6px 12px; min-height: 38px; flex-shrink: 0; }
.avatar { width: 28px; height: 28px; background: var(--dark); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: #fff; flex-shrink: 0; }
.user-info .name { font-size: 13px; font-weight: 500; line-height: 1.2; }
.user-info .role { font-size: 11px; color: var(--muted); }

/* ============================================================
   CONTENT AREA
   ============================================================ */
.content { padding: 22px 28px 32px; display: flex; flex-direction: column; gap: 20px; }

/* ============================================================
   KPI CARDS
   ============================================================ */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

.kpi-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 150px;
  transition: var(--transition);
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: #dde4ee; }
.kpi-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.kpi-title { font-size: 12px; color: var(--muted); line-height: 1.4; }
.kpi-value { font-size: 22px; font-weight: 600; color: var(--text); margin-top: 8px; letter-spacing: -.02em; }

.badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 9px; font-size: 11.5px; font-weight: 500; white-space: nowrap; flex-shrink: 0; }
.badge.up   { background: var(--green-soft); color: var(--green); }
.badge.down { background: var(--red-soft);   color: var(--red);   }

.kpi-footer { font-size: 11.5px; color: var(--muted-soft); line-height: 1.4; margin-top: 14px; }

/* ============================================================
   SHARED CARD
   ============================================================ */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 20px 22px; transition: var(--transition); }
.card:hover { box-shadow: var(--shadow-md); border-color: #dde4ee; }
.card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.card-title { font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
.card-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ============================================================
   CHART
   ============================================================ */
.charts-row { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: stretch; }
.chart-legend { display: flex; gap: 14px; align-items: center; flex-shrink: 0; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.legend-dot.green { background: #34d399; }
.legend-dot.dark  { background: var(--dark); }
.chart-area { margin-top: 18px; display: flex; flex-direction: column; }
.chart-bars { display: flex; align-items: flex-end; gap: 10px; height: 200px; padding: 0 4px; }
.chart-bar-group { flex: 1; display: flex; gap: 3px; align-items: flex-end; }
.bar-budget { flex: 1; background: #d1fae5; border-radius: 5px 5px 0 0; min-height: 12px; transition: height .45s ease; }
.bar-real { flex: 1; background: var(--dark); border-radius: 5px 5px 0 0; opacity: .88; min-height: 12px; transition: height .45s ease; }
.chart-labels { display: flex; gap: 10px; padding: 8px 4px 0; }
.chart-label { flex: 1; text-align: center; font-size: 11px; color: var(--muted); }

/* ============================================================
   ALERTS
   ============================================================ */
#alerts-list { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.alert-item { display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--line); background: #f8fafc; border-radius: var(--radius-md); padding: 12px 14px; }
.alert-icon { width: 36px; height: 36px; border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.alert-title { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; }
.alert-sub { font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.45; }

/* ============================================================
   DOCS + CATEGORIES
   ============================================================ */
.docs-row { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; align-items: start; }
.table-wrap { border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; margin-top: 16px; }
.table-head { display: grid; grid-template-columns: 1.4fr 1fr 1.6fr .55fr; gap: 12px; background: #f8fafc; border-bottom: 1px solid var(--line); padding: 10px 16px; font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.table-row { display: grid; grid-template-columns: 1.4fr 1fr 1.6fr .55fr; gap: 12px; border-bottom: 1px solid #f1f5f9; padding: 13px 16px; background: var(--panel); align-items: center; transition: background .15s ease; }
.table-row:last-child { border-bottom: none; }
.table-row:hover { background: #fafcff; }
.doc-name { font-size: 13px; font-weight: 500; color: var(--text); }
.doc-amount { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.doc-date { font-size: 12px; color: var(--muted-soft); }

.status { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 9px; font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.s-green  { background: var(--green-soft); color: var(--green); }
.s-amber  { background: var(--amber-soft); color: var(--amber); }
.s-sky    { background: var(--sky-soft);   color: var(--sky);   }
.s-red    { background: var(--red-soft);   color: var(--red);   }

.categories-wrap { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.cat-item { display: flex; flex-direction: column; gap: 5px; }
.cat-row { display: flex; justify-content: space-between; font-size: 13px; }
.cat-name { color: #475569; }
.cat-pct { font-weight: 600; color: var(--text); }
.cat-track { height: 7px; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
.cat-fill { height: 7px; background: #059669; border-radius: 999px; transition: width .5s ease; }

/* ============================================================
   BOTTOM CARDS
   ============================================================ */
.bottom-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.bottom-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 18px 20px; display: flex; flex-direction: column; gap: 0; min-height: 120px; transition: var(--transition); }
.bottom-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: #dde4ee; }
.bottom-top { display: flex; justify-content: space-between; align-items: center; }
.bottom-label { font-size: 12px; color: var(--muted); }
.bottom-icon { font-size: 18px; line-height: 1; }
.bottom-value { font-size: 22px; font-weight: 600; color: var(--text); margin-top: 10px; letter-spacing: -.02em; }
.bottom-sub { font-size: 11.5px; color: var(--muted-soft); line-height: 1.4; margin-top: 8px; }

/* ============================================================
   MODULE VISIBILITY
   ============================================================ */
.module-block { transition: opacity .2s ease; }
.module-hidden { display: none !important; }

/* ============================================================
   ENTRY ANIMATIONS
   ============================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}
.header { animation: fadeUp .3s ease both; }
.kpi-card:nth-child(1) { animation: fadeUp .32s ease both; animation-delay: .04s; }
.kpi-card:nth-child(2) { animation: fadeUp .32s ease both; animation-delay: .08s; }
.kpi-card:nth-child(3) { animation: fadeUp .32s ease both; animation-delay: .12s; }
.kpi-card:nth-child(4) { animation: fadeUp .32s ease both; animation-delay: .16s; }
.charts-row .card:nth-child(1) { animation: fadeUp .32s ease both; animation-delay: .20s; }
.charts-row .card:nth-child(2) { animation: fadeUp .32s ease both; animation-delay: .24s; }
.docs-row .card:nth-child(1) { animation: fadeUp .32s ease both; animation-delay: .28s; }
.docs-row .card:nth-child(2) { animation: fadeUp .32s ease both; animation-delay: .32s; }
.bottom-card:nth-child(1) { animation: fadeUp .32s ease both; animation-delay: .36s; }
.bottom-card:nth-child(2) { animation: fadeUp .32s ease both; animation-delay: .40s; }
.bottom-card:nth-child(3) { animation: fadeUp .32s ease both; animation-delay: .44s; }
.bottom-card:nth-child(4) { animation: fadeUp .32s ease both; animation-delay: .48s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
  .kpi-grid    { grid-template-columns: repeat(2, 1fr); }
  .bottom-grid { grid-template-columns: repeat(2, 1fr); }
  .charts-row  { grid-template-columns: 1fr; }
  .docs-row    { grid-template-columns: 1fr; }
}
@media (max-width: 900px) { .search-wrap input { width: 200px; } }
@media (max-width: 760px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .header { padding: 14px 16px; flex-direction: column; align-items: flex-start; gap: 12px; min-height: auto; }
  .header-right { width: 100%; flex-wrap: wrap; }
  .search-wrap { width: 100%; }
  .search-wrap input { width: 100%; }
  .content { padding: 16px; }
  .kpi-grid    { grid-template-columns: 1fr; }
  .bottom-grid { grid-template-columns: 1fr; }
}

/* ── CARD HEADER ROW ─────────────────────────────────────── */
.card-header-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:4px}
.export-btns{display:flex;gap:8px;flex-shrink:0}
.export-btn{background:#f8fafc;border:1px solid var(--line);border-radius:10px;padding:7px 14px;font-size:13px;font-weight:500;cursor:pointer;color:var(--text);transition:background .15s}
.export-btn:hover{background:#e2e8f0}
.export-btn-xl{background:#d1fae5;color:#065f46;border-color:#a7f3d0}
.export-btn-xl:hover{background:#a7f3d0}
.export-btn-pdf{background:#dbeafe;color:#1e40af;border-color:#bfdbfe}
.export-btn-pdf:hover{background:#bfdbfe}
.reportes-export-bar{display:flex;justify-content:space-between;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px 22px;margin-bottom:20px;gap:16px}

/* ── UPLOAD + FILTER ─────────────────────────────────────── */
.upload-filter-row{display:grid;grid-template-columns:1fr 1.4fr;gap:20px;align-items:start}
.dropzone{margin-top:14px;border:2px dashed var(--line);border-radius:14px;padding:24px 20px;text-align:center;cursor:pointer;transition:border-color .18s,background .18s}
.dropzone:hover{border-color:#94a3b8;background:#f8fafc}
.dropzone-icon{font-size:28px;margin-bottom:6px}
.dropzone-text{font-size:14px;font-weight:500}
.dropzone-sub{font-size:13px;color:var(--muted);margin-top:3px}
.dropzone-link{color:#2563eb;cursor:pointer;text-decoration:underline}
.dropzone-formats{font-size:12px;color:var(--muted-soft);margin-top:8px;text-align:center}
.upload-btns{display:flex;gap:10px;margin-top:12px}
.upload-btn-primary{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;background:var(--dark);color:#fff;border:none;border-radius:12px;padding:10px;font-size:14px;font-weight:500;cursor:pointer}
.upload-btn-primary:hover{background:#1e293b}
.upload-btn-secondary{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;background:#fff;color:var(--text);border:2px solid var(--line);border-radius:12px;padding:10px;font-size:14px;font-weight:500;cursor:pointer}
.upload-btn-secondary:hover{border-color:#94a3b8;background:#f8fafc}
.filter-search-wrap{position:relative;margin-top:12px}
.filter-search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:14px}
.filter-search-input{width:100%;border:1px solid var(--line);background:#f8fafc;border-radius:12px;padding:9px 14px 9px 36px;font-size:14px;outline:none}
.filter-search-input:focus{border-color:#cbd5e1;background:#fff}
.filter-row{display:flex;gap:10px;margin-top:10px}
.filter-group{flex:1;display:flex;flex-direction:column;gap:4px}
.filter-label{font-size:12px;font-weight:500;color:var(--muted)}
.filter-select{border:1px solid var(--line);background:#fff;border-radius:10px;padding:7px 10px;font-size:13px;outline:none;cursor:pointer}
.filter-select:focus{border-color:#cbd5e1}
.filter-actions{display:flex;gap:10px;margin-top:12px;align-items:center}
.filter-btn-apply{background:#2563eb;color:#fff;border:none;border-radius:10px;padding:9px 16px;font-size:14px;font-weight:500;cursor:pointer}
.filter-btn-apply:hover{background:#1d4ed8}
.filter-btn-clear{background:none;border:none;color:var(--muted);font-size:14px;cursor:pointer;padding:9px 10px}
.filter-btn-clear:hover{color:var(--text)}

/* ── GASTOS TABLE ────────────────────────────────────────── */
.gastos-head,.gastos-row{grid-template-columns:.75fr 1.5fr .9fr .4fr .85fr .8fr .75fr .8fr .35fr .9fr .4fr !important}
.doc-rut{font-size:11px;color:var(--muted-soft)}
.doc-cf{font-size:14px;text-align:center}
.doc-tipo{font-size:12px;color:var(--muted);font-weight:500}
.doc-pago{font-size:12px;color:var(--muted)}
.doc-actions{display:flex;gap:3px}
.action-btn{background:none;border:none;cursor:pointer;font-size:13px;padding:2px 3px;opacity:.6;border-radius:6px}
.action-btn:hover{opacity:1;background:#f1f5f9}
.table-footer{display:flex;justify-content:center;padding:14px 0 2px}
.load-more-btn{background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:9px 22px;font-size:14px;font-weight:500;color:var(--text);cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.load-more-btn:hover{background:#f1f5f9;border-color:#cbd5e1}

/* ── ALERTS GRID ─────────────────────────────────────────── */
.alerts-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}

/* ── CATEGORY BADGES ─────────────────────────────────────── */
.cat-badge{display:inline-flex;border-radius:999px;padding:3px 9px;font-size:11px;font-weight:500;white-space:nowrap}
.cat-materiales{background:#dbeafe;color:#1d4ed8}
.cat-servicios{background:#d1fae5;color:#059669}
.cat-mano{background:#fef3c7;color:#d97706}
.cat-herramientas{background:#ede9fe;color:#7c3aed}
.cat-transporte{background:#fce7f3;color:#db2777}
.cat-otros{background:#f1f5f9;color:#475569}
.cf-badge{display:inline-flex;border-radius:999px;padding:3px 9px;font-size:11px;font-weight:500}
.cf-ok{background:#d1fae5;color:#059669}
.cf-no{background:#fff1f2;color:#e11d48}
.tipo-badge{display:inline-flex;border-radius:999px;padding:3px 9px;font-size:11px;font-weight:500}
.tipo-directo{background:#dbeafe;color:#1d4ed8}
.tipo-indirecto{background:#f1f5f9;color:#475569}
.iva-cf{color:#059669;font-weight:600}
.desv-neg{color:#e11d48;font-weight:500}
.desv-pos{color:#059669;font-weight:500}

/* ── CONTROL DE PROYECTO ─────────────────────────────────── */
.etapas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.etapa-card{background:#f8fafc;border:1px solid var(--line);border-radius:14px;padding:18px}
.etapa-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.etapa-nombre{font-size:15px;font-weight:600;color:var(--text)}
.etapa-partidas{font-size:12px;color:var(--muted);line-height:1.5;margin-bottom:14px}
.etapa-progress-wrap{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.etapa-progress-bar{flex:1;height:8px;background:#e2e8f0;border-radius:999px;overflow:hidden}
.etapa-progress-fill{height:8px;background:#059669;border-radius:999px}
.etapa-pct{font-size:13px;font-weight:700;color:#059669;flex-shrink:0;width:36px;text-align:right}
.etapa-nums{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.etapa-num{display:flex;flex-direction:column;gap:2px}
.etapa-lbl{font-size:11px;color:var(--muted-soft)}
.etapa-val{font-size:13px;font-weight:500;color:var(--text)}
.estado-badge{display:inline-flex;border-radius:999px;padding:3px 10px;font-size:11px;font-weight:600;white-space:nowrap}
.estado-activo{background:#dbeafe;color:#1d4ed8}
.estado-pendiente{background:#fef3c7;color:#d97706}
.estado-ok{background:#d1fae5;color:#059669}
.estado-obs{background:#fff1f2;color:#e11d48}
.etapa-title{font-size:15px;font-weight:600;color:var(--text);margin-bottom:4px}
.etapa-value{font-size:18px;font-weight:700;color:var(--text);margin-bottom:8px}
.etapa-sub{font-size:12px;color:var(--muted);margin-top:4px}

.hito-card{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-bottom:1px solid #f1f5f9;background:#fff}
.hito-card:last-child{border-bottom:none}
.hito-card:first-child{border-radius:14px 14px 0 0}
.hito-icon{font-size:20px;flex-shrink:0;width:32px;text-align:center}
.hito-body{flex:1}
.hito-area{font-size:14px;font-weight:600;color:var(--text)}
.hito-desc{font-size:13px;color:var(--muted);margin-top:2px}
.hito-meta{display:flex;gap:16px;margin-top:6px;font-size:12px;color:var(--muted-soft)}
.hito-resp,.hito-fecha{white-space:nowrap}
#control-hitos{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:14px}

.ctrl-cat-head,.ctrl-cat-row{grid-template-columns:1.2fr .8fr .9fr .9fr .9fr .9fr .9fr 1.1fr .8fr !important}

/* ── PROVEEDORES ─────────────────────────────────────────── */
.prov-head,.prov-row{grid-template-columns:.3fr 1.8fr 1fr .9fr .4fr .9fr .9fr 1fr !important}
.prov-n{font-size:13px;color:var(--muted);font-weight:600}
.prov-pct{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.prov-bar-wrap{flex:1;height:6px;background:#f1f5f9;border-radius:999px;overflow:hidden;min-width:40px}
.prov-bar{height:6px;background:#059669;border-radius:999px}
.prov-bar-etapa{background:#059669}

/* ── CAJA TABLES ─────────────────────────────────────────── */
.caja-tipos-head,.caja-tipos-row{display:grid;grid-template-columns:1.5fr .5fr 1.2fr 1.1fr .7fr 1.6fr;gap:10px;padding:10px 16px;align-items:center}
.caja-tipos-head{background:#f8fafc;border-bottom:1px solid var(--line);font-size:10px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}
.caja-tipos-row{border-bottom:1px solid #f1f5f9;background:#fff;font-size:13px}
.caja-tipos-row:last-child{border-bottom:none}
.caja-tipos-row:hover{background:#fafcff}
.caja-mensual-head,.caja-mensual-row{display:grid;grid-template-columns:1fr .5fr 1.2fr 1.1fr 1.2fr;gap:10px;padding:10px 16px;align-items:center}
.caja-mensual-head{background:#f8fafc;border-bottom:1px solid var(--line);font-size:10px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}
.caja-mensual-row{border-bottom:1px solid #f1f5f9;background:#fff;font-size:13px}
.caja-mensual-row:last-child{border-bottom:none}
.caja-mensual-row:hover{background:#fafcff}

/* ── BALANCE GENERAL ─────────────────────────────────────── */
.bal-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid var(--line); }
.bal-group-head,.bal-col-head,.bal-row,.bal-total { display: grid; grid-template-columns: 48px 200px 120px 120px 120px 120px 120px 120px 110px 110px; min-width: 1208px; }
.bal-group-head { background: #0f172a; color: #94a3b8; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-radius: 14px 14px 0 0; }
.bal-gh-spacer { grid-column: 1 / 3; padding: 10px 12px; border-right: 1px solid rgba(255,255,255,.1); }
.bal-gh-group { padding: 10px 8px; text-align: center; border-right: 1px solid rgba(255,255,255,.1); grid-column: span 2; }
.bal-gh-group:last-child { border-right: none; }
.bal-col-head { background: #f8fafc; border-bottom: 2px solid var(--line); font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.bal-col-head > div { padding: 10px 10px; border-right: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.bal-col-head > .bal-cuenta { justify-content: flex-start; padding-left: 14px; }
.bal-col-head > div:last-child { border-right: none; }
.bal-section { background: #1e293b; color: #94a3b8; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 7px 16px; min-width: 1208px; border-bottom: 1px solid #334155; }
.bal-row { border-bottom: 1px solid #f1f5f9; background: #fff; transition: background .12s; }
.bal-row:hover { background: #fafcff; }
.bal-row > div,.bal-total > div { padding: 14px 10px; display: flex; align-items: center; border-right: 1px solid #e2e8f0; font-size: 13px; min-height: 56px; }
.bal-row > div:last-child,.bal-total > div:last-child { border-right: none; }
.bal-n { justify-content: center !important; color: var(--muted); font-size: 12px !important; }
.bal-cuenta { justify-content: flex-start !important; padding-left: 14px !important; font-weight: 500; line-height: 1.35; white-space: normal; word-break: break-word; }
.bal-num { justify-content: flex-end !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bal-row > div:nth-child(3),.bal-row > div:nth-child(4) { background: #fafbff; }
.bal-row > div:nth-child(5),.bal-row > div:nth-child(6) { background: #f0fdf4; }
.bal-row > div:nth-child(7),.bal-row > div:nth-child(8) { background: #fffbeb; }
.bal-row > div:nth-child(9),.bal-row > div:nth-child(10) { background: #fdf4ff; }
.bal-total { background: #0f172a !important; color: #fff !important; font-weight: 700; border-radius: 0 0 14px 14px; overflow: hidden; border-bottom: none !important; }
.bal-total > div { background: #0f172a !important; color: #fff !important; border-right: 1px solid rgba(255,255,255,.15) !important; font-size: 13px; }
.bal-total > div:last-child { border-right: none !important; }
.balance-note { margin-top: 12px; padding: 10px 14px; background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--radius-sm); color: var(--amber); font-size: 12px; line-height: 1.5; }

/* ── REPORTES ────────────────────────────────────────────── */
.report-row { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-bottom: 1px solid #f1f5f9; }
.report-row:last-child { border-bottom: none; }
.report-label { font-size: 13px; font-weight: 600; color: var(--text); }
.report-value { font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: -.02em; }
.report-sub { font-size: 12px; color: var(--muted); }

/* ── SIDEBAR USER CHIP ───────────────────────────────────── */
.sidebar-user { display:flex;align-items:center;gap:10px;margin:0 14px 14px;padding:12px 14px;background:#f8fafc;border:1px solid var(--line);border-radius:14px; }
.sidebar-user-name{font-size:13px;font-weight:500;color:var(--text)}
.sidebar-user-role{font-size:11px;color:var(--muted);margin-top:1px}

/* ── PAGE TITLE SIZE FIX ─────────────────────────────────── */
.page-title{font-size:16px !important;font-weight:600 !important;letter-spacing:-.01em !important;line-height:1.2 !important;}

/* ── ALERTS 2x2 ──────────────────────────────────────────── */
.alerts-2x2{display:grid !important;grid-template-columns:1fr 1fr !important;gap:12px;margin-top:12px;}

/* ── CAJA KPI CARDS ─────────────────────────────────────── */
#section-caja .kpi-card{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;}
#section-caja .kpi-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;}
#section-caja .kpi-top > div:first-child{display:flex;flex-direction:column;align-items:flex-start;}
#section-caja .kpi-value{font-size:17px;font-weight:700;color:var(--text);margin-top:6px;word-break:break-all;}
#section-caja .kpi-title{font-size:12px;color:var(--muted);min-height:auto;}
#section-caja .kpi-footer{font-size:11px;color:var(--muted-soft);margin-top:10px;line-height:1.4;}

/* ── EMPTY STATE ─────────────────────────────────────────── */
.empty-state{padding:18px;color:var(--muted);background:#f8fafc;border-radius:12px;border:1px dashed var(--line);font-size:13px}
.drag-over{border-color:var(--brand)!important;background:#f0f9ff!important}

/* ── RESPONSIVE EXTRAS ───────────────────────────────────── */
@media(max-width:1200px){.etapas-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.etapas-grid{grid-template-columns:1fr}}
@media(max-width:1100px){.upload-filter-row{grid-template-columns:1fr}.alerts-grid{grid-template-columns:1fr}}
@media print{.sidebar,.header,.export-btns,.reportes-export-bar .export-btns{display:none!important}.layout{grid-template-columns:1fr}.module-hidden{display:block!important}}

/* ============================================================
   NUEVOS ESTILOS — Hitos 2×2 · Reporte mensual · Barras verdes
   ============================================================ */

/* Todas las barras de avance en verde */
.cat-fill,
.etapa-progress-fill,
.progress-fill,
.cat-fill-green,
.prov-bar {
  background: #059669 !important;
}

/* ── HITOS 2×2 ───────────────────────────────────────────── */
.hitos-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 16px 0 4px;
}
.hito-tile {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: var(--transition);
}
.hito-tile:hover { border-color: #cbd5e1; box-shadow: var(--shadow-sm); }
.hito-tile-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hito-tile-icon { font-size: 22px; line-height: 1; }
.hito-tile-label { font-size: 14px; font-weight: 600; color: var(--text); }
.hito-tile-desc { font-size: 12px; color: var(--muted); line-height: 1.45; }

/* ── REPORTE MENSUAL — tarjetas en grid ──────────────────── */
.reporte-mensual-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  padding: 16px 0 4px;
}
.reporte-mes-card {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
}
.reporte-mes-card:hover { border-color: #cbd5e1; box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.reporte-mes-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.reporte-mes-nombre { font-size: 13px; font-weight: 700; color: var(--text); }
.reporte-mes-docs { font-size: 11px; color: var(--muted-soft); background: var(--line-soft); border-radius: 999px; padding: 2px 8px; }
.reporte-mes-monto { font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: -.02em; margin-bottom: 2px; }
.reporte-mes-footer { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); }

@media (max-width: 900px) {
  .hitos-2x2 { grid-template-columns: 1fr; }
  .reporte-mensual-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .reporte-mensual-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   ESTILOS NUEVOS — Modal · Filtros · Reportes · Budget · Etapas
   ============================================================ */

/* ── MODAL EDITAR GASTO ──────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-hidden { display: none !important; }
.modal-box {
  background: #fff; border-radius: 20px;
  box-shadow: 0 20px 60px rgba(15,23,42,.2);
  width: 100%; max-width: 640px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--line);
}
.modal-title { font-size: 15px; font-weight: 700; color: var(--text); }
.modal-close { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--muted); line-height: 1; padding: 4px; border-radius: 8px; }
.modal-close:hover { background: #f1f5f9; color: var(--text); }
.modal-body { padding: 20px 24px; overflow-y: auto; max-height: 60vh; }
.modal-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.modal-field { display: flex; flex-direction: column; gap: 5px; }
.modal-field-full { grid-column: 1 / -1; }
.modal-field label { font-size: 12px; font-weight: 600; color: var(--muted); }
.modal-field input, .modal-field select {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 12px; font-size: 13px; outline: none;
  background: #f8fafc; color: var(--text);
  transition: border-color .15s, background .15s;
}
.modal-field input:focus, .modal-field select:focus {
  border-color: #059669; background: #fff;
  box-shadow: 0 0 0 3px rgba(5,150,105,.1);
}
.modal-footer {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--line);
  background: #f8fafc;
}
.modal-btn-cancel {
  background: #fff; border: 1px solid var(--line); color: var(--muted);
  border-radius: 10px; padding: 9px 18px; font-size: 13px; font-weight: 500; cursor: pointer;
}
.modal-btn-cancel:hover { background: #f1f5f9; }
.modal-btn-save {
  background: #059669; color: #fff; border: none;
  border-radius: 10px; padding: 9px 20px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.modal-btn-save:hover { background: #047857; }

/* ── GASTOS TABLE — con columna checkbox ─────────────────── */
.gastos-head, .gastos-row {
  grid-template-columns: 36px .7fr 1.5fr .85fr .5fr .9fr .85fr .75fr .85fr .3fr .8fr .55fr !important;
}
.doc-actions { display: flex; gap: 4px; align-items: center; }
.action-btn {
  background: none; border: none; cursor: pointer;
  font-size: 14px; padding: 3px 4px;
  border-radius: 6px; opacity: .7;
  transition: opacity .15s, background .15s;
  line-height: 1;
}
.action-btn:hover { opacity: 1; background: #f1f5f9; }

/* Fila seleccionada */
.row-selected { background: #f0fdf4 !important; }
.row-selected:hover { background: #dcfce7 !important; }

/* Checkbox estilo limpio */
.row-chk, #chk-all {
  width: 15px; height: 15px; cursor: pointer;
  accent-color: #059669;
}

/* ── BARRA SELECCIÓN MASIVA ──────────────────────────────── */
.bulk-bar {
  display: flex; align-items: center; gap: 12px;
  background: #0f172a; color: #fff;
  border-radius: 12px; padding: 10px 16px;
  margin: 10px 0 12px;
  transition: all .2s ease;
  flex-wrap: wrap;
}
.bulk-bar-hidden { display: none !important; }
.bulk-count { font-size: 13px; font-weight: 600; flex: 1; }
.bulk-delete-btn {
  background: #e11d48; color: #fff; border: none;
  border-radius: 8px; padding: 7px 14px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .15s;
}
.bulk-delete-btn:hover { background: #be123c; }
.bulk-cancel-btn {
  background: rgba(255,255,255,.12); color: #fff; border: none;
  border-radius: 8px; padding: 7px 12px;
  font-size: 13px; cursor: pointer;
  transition: background .15s;
}
.bulk-cancel-btn:hover { background: rgba(255,255,255,.22); }

/* ── PRESUPUESTO EDITABLE ────────────────────────────────── */
.budget-edit-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.budget-edit-label { font-size: 14px; font-weight: 500; color: var(--text); }
.budget-edit-controls { display: flex; gap: 10px; align-items: center; }
.budget-input {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 14px; font-size: 14px; width: 200px; outline: none;
  background: #f8fafc; color: var(--text);
}
.budget-input:focus { border-color: #059669; background: #fff; box-shadow: 0 0 0 3px rgba(5,150,105,.1); }
.budget-save-btn {
  background: #059669; color: #fff; border: none;
  border-radius: 10px; padding: 9px 18px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.budget-save-btn:hover { background: #047857; }

/* ── ETAPAS CARDS GRID (Control + Reportes) ──────────────── */
.etapas-cards-grid, .rw-etapas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  padding: 16px 0 4px;
}
.etapa-card-item {
  background: #f8fafc; border: 1px solid var(--line);
  border-radius: 14px; padding: 16px 18px;
  display: flex; flex-direction: column;
  transition: var(--transition);
}
.etapa-card-item:hover { border-color: #cbd5e1; box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.etapa-card-top {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; margin-bottom: 8px;
}
.etapa-card-pct { font-size: 12px; font-weight: 700; color: #059669; white-space: nowrap; }
.etapa-card-monto { font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: -.02em; }
.etapa-card-sub { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* ── REPORTES CONFIG ─────────────────────────────────────── */
.report-config-title { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 12px; }
.report-config-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.report-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: #f1f5f9; border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 14px;
  font-size: 12px; font-weight: 500; color: var(--muted);
  cursor: pointer; transition: var(--transition);
}
.report-chip:hover { background: #e2e8f0; color: var(--text); }
.chip-active { background: var(--green-soft) !important; color: var(--green) !important; border-color: #a7f3d0 !important; font-weight: 600 !important; }

/* ── REPORTES WIDGETS ────────────────────────────────────── */
#reportes-widgets { display: flex; flex-direction: column; gap: 16px; }
.report-widget-card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: 20px 22px;
}
.report-widget-title { font-size: 14px; font-weight: 700; color: var(--text); }
.report-widget-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.report-widget-body { margin-top: 4px; }

/* KPI row en reportes */
.rw-kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 16px 0 4px; }
.rw-kpi { background: #f8fafc; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.rw-kpi-label { font-size: 12px; color: var(--muted); }
.rw-kpi-val { font-size: 22px; font-weight: 700; color: var(--text); margin-top: 6px; letter-spacing: -.02em; }

/* Avance widget */
.rw-avance { padding: 16px 0 4px; }
.rw-avance-pct { font-size: 42px; font-weight: 700; color: #059669; letter-spacing: -.03em; line-height: 1; }
.rw-avance-bar { margin: 12px 0 8px; height: 10px !important; }
.rw-avance-bar .cat-fill { height: 10px !important; }
.rw-avance-detail { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }

/* ── HITOS 2×2 ───────────────────────────────────────────── */
.hitos-2x2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 16px 0 4px; }
.hito-tile { background: #f8fafc; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; transition: var(--transition); }
.hito-tile:hover { border-color: #cbd5e1; box-shadow: var(--shadow-sm); }
.hito-tile-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hito-tile-icon { font-size: 22px; line-height: 1; }
.hito-tile-label { font-size: 14px; font-weight: 600; color: var(--text); }
.hito-tile-desc { font-size: 12px; color: var(--muted); line-height: 1.45; }

/* ── BARRAS VERDES (todas) ───────────────────────────────── */
.cat-fill, .etapa-progress-fill, .progress-fill, .prov-bar { background: #059669 !important; }

/* ── SQL NOTE ────────────────────────────────────────────── */
.sql-note { margin-top: 10px; padding: 10px 14px; background: #f0fdf4; border: 1px solid #a7f3d0; border-radius: 10px; font-size: 12px; color: #047857; }

/* ── RESPONSIVE NUEVOS ───────────────────────────────────── */
@media (max-width: 900px) {
  .hitos-2x2 { grid-template-columns: 1fr; }
  .etapas-cards-grid, .rw-etapas-grid { grid-template-columns: 1fr 1fr; }
  .rw-kpi-row { grid-template-columns: 1fr 1fr; }
  .modal-grid { grid-template-columns: 1fr; }
  .budget-edit-row { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  .etapas-cards-grid, .rw-etapas-grid { grid-template-columns: 1fr; }
  .rw-kpi-row { grid-template-columns: 1fr; }
}