@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

/* ============ PALETA DE CORES ============ */
:root{
  --bg:#f7f8f2;--surface:#fff;--surface-2:#f0f4df;--surface-3:#e7edc9;
  --line:#d3dcaa;--text:#171a12;--muted:#626b50;
  --accent:#9dcc00;--accent-strong:#729900;--accent-soft:rgba(157,204,0,.15);
  --danger:#b83232;--success:#327b42;
  --radius-sm:10px;--radius-md:14px;--radius-lg:18px;
  --navbar-h:64px;

  --bs-body-bg:var(--bg);
  --bs-body-color:var(--text);
  --bs-border-color:var(--line);
  --bs-secondary-bg:var(--surface-2);
  --bs-tertiary-bg:var(--surface-3);
  --bs-emphasis-color:var(--text);
  --bs-secondary-color:var(--muted);
  --bs-tertiary-color:var(--muted);
  --bs-link-color:var(--accent-strong);
  --bs-link-hover-color:var(--accent-strong);
  --bs-card-bg:var(--surface);
  --bs-card-border-color:var(--line);
  --bs-card-cap-bg:var(--surface-2);
  --bs-card-cap-color:var(--muted);
}
[data-theme=dark]{
  --bg:#050505;--surface:#101010;--surface-2:#151515;--surface-3:#1b1b1b;
  --line:#30352a;--text:#f7f9f1;--muted:#b9c0ad;
  --accent:#b7f003;--accent-strong:#d5ff5b;--accent-soft:rgba(183,240,3,.13);
  --danger:#ff7777;--success:#7edb8b;
}

/* ============ BASE ============ */
*{box-sizing:border-box;}
body{
  font-family:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--bg);
  color:var(--text);
}
h1{font-size:clamp(1.5rem,3vw,2rem);line-height:1.15;font-weight:800;}
h2{font-size:1.1rem;font-weight:700;}
a{color:inherit;text-decoration:none;}

/* ============ BOOTSTRAP OVERRIDES ============ */

/* Cards */
.card{
  border-radius:var(--radius-lg);
  box-shadow:0 1px 4px rgba(22,34,0,.07),0 4px 16px rgba(22,34,0,.04);
  border-color:var(--line);
}
[data-theme=dark] .card{box-shadow:0 2px 12px rgba(0,0,0,.35);}
.card-header{
  border-bottom-color:var(--line);
  padding:14px 20px;
}

/* Form controls */
.form-control,.form-select{
  background-color:var(--bg);
  border-color:var(--line);
  color:var(--text);
  min-height:48px;
  border-radius:var(--radius-sm);
  font-family:inherit;
}
.form-control:focus,.form-select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 .25rem var(--accent-soft);
  background-color:var(--bg);
  color:var(--text);
}
.form-control:read-only{background-color:var(--surface-2);opacity:1;}
.form-control:disabled,.form-select:disabled{background-color:var(--surface-2);opacity:.65;}
.form-control::placeholder{color:var(--muted);}
.form-check-input{
  background-color:var(--bg);
  border-color:var(--line);
}
.form-check-input:checked{
  background-color:var(--accent);
  border-color:var(--accent);
}
.form-check-input:focus{border-color:var(--accent);box-shadow:0 0 0 .25rem var(--accent-soft);}

/* Buttons */
.btn{
  min-height:44px;
  font-weight:700;
  border-radius:var(--radius-sm);
  font-family:inherit;
  transition:transform .12s ease,background .18s ease,border-color .18s ease,color .18s ease;
}
.btn:active{transform:translateY(1px);}
.btn-primary{
  --bs-btn-bg:var(--accent);
  --bs-btn-border-color:var(--accent);
  --bs-btn-color:#0a0d00;
  --bs-btn-hover-bg:var(--accent-strong);
  --bs-btn-hover-border-color:var(--accent-strong);
  --bs-btn-hover-color:#0a0d00;
  --bs-btn-active-bg:var(--accent-strong);
  --bs-btn-active-border-color:var(--accent-strong);
  --bs-btn-active-color:#0a0d00;
  --bs-btn-disabled-bg:var(--accent);
  --bs-btn-disabled-border-color:var(--accent);
  --bs-btn-disabled-color:#0a0d00;
}
.btn-outline-secondary{
  --bs-btn-color:var(--text);
  --bs-btn-border-color:var(--line);
  --bs-btn-hover-bg:var(--surface-3);
  --bs-btn-hover-border-color:var(--accent);
  --bs-btn-hover-color:var(--text);
  --bs-btn-active-bg:var(--surface-3);
  --bs-btn-active-border-color:var(--accent);
  --bs-btn-active-color:var(--text);
  --bs-btn-disabled-color:var(--muted);
  --bs-btn-disabled-border-color:var(--line);
  background:var(--surface-2);
}
.btn-outline-danger{
  --bs-btn-color:var(--danger);
  --bs-btn-border-color:var(--line);
  --bs-btn-hover-bg:var(--danger);
  --bs-btn-hover-border-color:var(--danger);
  --bs-btn-hover-color:#fff;
  background:var(--surface-2);
}

/* Tables */
.table{
  --bs-table-bg:transparent;
  --bs-table-color:var(--text);
  --bs-table-border-color:var(--line);
  --bs-table-striped-bg:var(--surface-2);
  --bs-table-striped-color:var(--text);
  margin-bottom:0;
}
.table>:not(caption)>*>*{background-color:transparent;}
.table thead th{
  background:var(--surface-2);
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:.75rem;
  font-weight:700;
  border-bottom-color:var(--line);
  padding:12px 16px;
  white-space:nowrap;
}
.table td{padding:14px 16px;}
.table td,.table th{border-color:var(--line);}
.table tbody tr:last-child td{border-bottom:0;}
.table tbody tr{transition:background .12s ease;}
.table tbody tr:hover td{background:var(--surface-2);}

/* Badges */
.badge{font-weight:700;border-radius:6px;padding:.35em .65em;}
.badge-accent{
  background:var(--accent-soft);
  color:var(--accent-strong);
}

/* Alerts */
.alert-success{
  background:var(--accent-soft);
  color:var(--success);
  border-color:color-mix(in srgb,var(--accent) 35%,transparent);
  border-radius:var(--radius-sm);
}

/* Page links / pagination */
.page-link{
  color:var(--text);
  background-color:var(--surface-2);
  border-color:var(--line);
  min-height:40px;
  min-width:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:.875rem;
}
.page-link:hover{
  background-color:var(--surface-3);
  border-color:var(--accent);
  color:var(--text);
}
.page-item.active .page-link{
  background-color:var(--accent);
  border-color:var(--accent);
  color:#0a0d00;
}

/* ============ COMPONENTES CUSTOMIZADOS ============ */

.brand-mark{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:4px 10px;
  border-radius:999px;
  background:var(--accent-soft);
  color:var(--accent-strong);
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.14em;
}

.value-chip{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 12px;
  border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
  border-radius:var(--radius-sm);
  background:var(--accent-soft);
  color:var(--accent-strong);
  font-weight:800;
  white-space:nowrap;
}

.row-inline{
  display:grid;
  grid-template-columns:minmax(0,1fr) 140px;
  gap:12px;
  align-items:end;
}

.summary-total{
  padding:20px;
  margin-bottom:16px;
  border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
  border-radius:var(--radius-md);
  background:var(--accent-soft);
}
.summary-total small{display:block;margin-bottom:6px;color:var(--muted);font-size:.8125rem;}
.summary-total strong{display:block;color:var(--accent-strong);font-size:clamp(1.75rem,4vw,2.5rem);line-height:1.05;overflow-wrap:anywhere;}

.summary-list{display:grid;gap:10px;}
.summary-item{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--surface-2);
  font-size:.9rem;
}
.summary-item span:last-child{color:var(--accent-strong);font-weight:800;white-space:nowrap;}

.summary-helper{margin:14px 0 0;color:var(--muted);font-size:.875rem;}

.kpi{
  padding:18px 20px;
  border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));
  border-radius:var(--radius-md);
  background:var(--accent-soft);
  height:100%;
}
.kpi small{display:block;color:var(--muted);margin-bottom:8px;font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;}
.kpi strong{display:block;color:var(--accent-strong);font-size:clamp(1.4rem,2.5vw,1.9rem);font-weight:800;overflow-wrap:anywhere;}

.form-section+.form-section{
  margin-top:28px;
  padding-top:28px;
  border-top:1px solid var(--line);
}

/* ============ KPI VARIANTES ============ */
.kpi-success{
  border-color:color-mix(in srgb,var(--success) 35%,var(--line));
  background:color-mix(in srgb,var(--success) 10%,transparent);
}
.kpi-success small{color:var(--success);}
.kpi-success strong{color:var(--success);}
.kpi-danger{
  border-color:color-mix(in srgb,var(--danger) 35%,var(--line));
  background:color-mix(in srgb,var(--danger) 10%,transparent);
}
.kpi-danger small{color:var(--danger);}
.kpi-danger strong{color:var(--danger);}

/* ============ STATUS BADGES ============ */
.crm-status-warning{
  background:var(--accent-soft);
  color:var(--accent-strong);
}
.crm-status-success{
  background:color-mix(in srgb,var(--success) 18%,transparent);
  color:var(--success);
}
.crm-status-danger{
  background:color-mix(in srgb,var(--danger) 18%,transparent);
  color:var(--danger);
}

/* ============ NAVBAR CRM ============ */
.crm-navbar{
  background:var(--surface);
  border-bottom:1px solid var(--line);
  min-height:var(--navbar-h);
  padding:0 24px;
  position:sticky;
  top:0;
  z-index:1030;
}
.crm-brand{padding:0;}
.crm-navitem{
  border-radius:var(--radius-sm) !important;
  color:var(--muted) !important;
  font-weight:700;
  font-size:.875rem;
  padding:8px 14px !important;
  transition:background .15s ease,color .15s ease;
}
.crm-navitem:hover{
  background:var(--surface-2);
  color:var(--text) !important;
}
.crm-navitem.active{
  background:var(--accent-soft);
  color:var(--accent-strong) !important;
}
.crm-navbar .btn{
  min-height:36px;
  padding-top:5px;
  padding-bottom:5px;
  font-size:.8125rem;
}
.crm-navbar .navbar-toggler{
  border-color:var(--line);
  padding:6px 10px;
}
.crm-navbar-end{
  display:flex;
  align-items:center;
  gap:8px;
}

.crm-user-badge{
  display:flex;
  align-items:center;
  gap:10px;
}
.crm-user-info strong{
  display:block;
  font-size:.875rem;
  line-height:1.2;
  white-space:nowrap;
}
.crm-user-info small{
  color:var(--muted);
  font-size:.73rem;
  text-transform:capitalize;
  display:block;
}
.crm-user-avatar{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--accent-soft);
  color:var(--accent-strong);
  font-weight:800;
  font-size:.875rem;
  flex-shrink:0;
  border:2px solid color-mix(in srgb,var(--accent) 40%,transparent);
}

/* ============ PAGE LAYOUT ============ */
.crm-page{
  background:var(--bg);
  min-height:calc(100dvh - var(--navbar-h));
  padding:28px 0 48px;
}
.crm-page-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:24px;
}
.crm-page-header h1{
  margin-bottom:2px;
  font-size:clamp(1.4rem,2.5vw,1.75rem);
}
.crm-page-header .crm-page-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  flex-shrink:0;
}

/* Sidebar sticky (budget form / view) */
.crm-sticky-sidebar{
  position:sticky;
  top:calc(var(--navbar-h) + 16px);
}

/* ============ RESPONSIVE ============ */
@media(max-width:991px){
  .crm-navbar{padding:0 16px;}
  .crm-navbar-end{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    padding:12px 0;
  }
  .crm-user-badge{margin-bottom:4px;}
}
@media(max-width:767px){
  .row-inline{grid-template-columns:1fr;}
  .value-chip{justify-content:flex-start;}
  .crm-sticky-sidebar{position:static;}
  .crm-page{padding:20px 0 40px;}
  .crm-page-header{flex-direction:column;align-items:flex-start;}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{transition:none!important;}
}