:root{
  --blue: #0046ff;
  --blue-strong: #0a3fdc;
  --magenta: #ff00ff;
  --magenta-2: #ff00e6;
  --purple: #7a14ff;
  --celeste: #9fb7ff;
  --sidebar-bg: #f6f6f6;
  --muted: #9aa0ad;
  --divider: #dfe6f0;
  --dot: #bdbdbd;
  --white: #ffffff;
  --body-bg: #fff;
  --font-sans: 'Montserrat', sans-serif;
  --chart-height-sm: 90px;
  --chart-height-md: 120px;
  --chart-height-trend: 220px;
  --donut-big-size: 220px;
  --donut-small-size: 140px;
}

/* =========================
   Reset & Base
   ========================= */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  background:var(--body-bg);
  color:#222;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Utility */
.hidden{display:none !important}
.text-center{text-align:center}
.flex{display:flex}
.flex-column{display:flex;flex-direction:column}

/* =========================
   App layout (sidebar + main)
   ========================= */
.app{display:flex;min-height:100vh}
.sidebar{
  width:200px;
  background:var(--sidebar-bg);
  border-right:1px solid var(--divider);
  flex-shrink:0;
}
.logo-wrap{height:76px;display:flex;align-items:center;padding-left:18px}
.side-menu{padding-top:8px}
.side-menu a{display:block;padding:14px 18px;color:#222;text-decoration:none;font-weight:600}
.side-menu a.active{background:var(--blue);color:#fff}
.side-divider{height:1px;background:var(--divider);margin:0 12px}

/* Top nav (compartido) */
.topbar{height:76px;border-bottom:1px solid var(--divider);display:flex;align-items:center;justify-content:center;background:var(--white)}
.topnav{display:flex;gap:56px;align-items:center}
.topnav a{text-decoration:none;color:var(--muted);font-weight:600;padding:8px 0}
.topnav a.active{color:var(--blue);position:relative}
.topnav a.active::after{content:"";position:absolute;left:8px;right:8px;bottom:-18px;height:3px;background:var(--blue)}

/* Container helpers */
.container, .container-area{padding:34px 48px;max-width:1200px;margin:0 auto}
@media (max-width:1100px){ .container, .container-area{padding:20px 22px} }

/* =========================
   LOGIN / Landing screen
   ========================= */
.login-bg{
  background: linear-gradient(135deg,#ff00ff,#3b24ff 60%);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
}
.login-box{
  width:420px;max-width:90%;padding:32px;border-radius:12px;text-align:center;background:rgba(255,255,255,0.06)
}
.login-logo{font-size:48px;font-weight:800;color:#fff;margin-bottom:24px}
.login-h1{font-size:34px;font-weight:800;margin:0 0 8px}
.login-sub{font-size:18px;margin-bottom:18px}
.input{width:100%;padding:12px 14px;border-radius:8px;border:none;margin-bottom:12px;font-size:15px}
.btn-primary{background:var(--white);color:var(--blue);padding:10px 16px;border-radius:8px;border:none;font-weight:800}

/* =========================
   Dashboard / Meses y LÍNEAS
   ========================= */
/* month columns (row of months) */
.month-row{display:flex;gap:0}
.month-col{
  flex:1;
  padding:2rem;
  border-right:1px dashed var(--divider);
  min-height:220px;
  background:transparent;
}
.month-col:last-child{border-right:none}
.month-col h5{font-weight:600;text-align:center;margin-bottom:1rem}
.month-text{margin-top:1.25rem;font-size:0.9rem;color:#6c757d;text-align:center;line-height:1.4}

/* line charts container */
.line-row{display:flex;gap:0;margin-bottom:18px}
.line-col{flex:1;padding:10px;border-right:1px dashed var(--divider);min-height:var(--chart-height-md);display:flex;flex-direction:column;align-items:center;justify-content:center}
.line-col:last-child{border-right:none}
.line-title{font-weight:700;color:var(--blue);margin-bottom:8px}
.line-canvas{width:100%;height:var(--chart-height-md);position:relative}
.line-canvas canvas{width:100% !important;height:100% !important;display:block}

/* trend area (shaded vertical bars + separators) */
.trend-wrap{position:relative;padding:22px 14px 8px;background:transparent;margin-top:18px}
.trend-wrap .shade{position:absolute;top:0;bottom:0;width:25%}
.trend-wrap .shade.s1{left:0;background:rgba(0,42,255,0.03)}
.trend-wrap .shade.s2{left:25%;background:rgba(0,42,255,0.00)}
.trend-wrap .shade.s3{left:50%;background:rgba(0,42,255,0.03)}
.trend-wrap .shade.s4{left:75%;background:rgba(0,42,255,0.00)}
.trend-wrap .sep{position:absolute;top:0;bottom:0;width:0;border-right:1px dashed var(--divider);z-index:3}
.trend-wrap .sep.s1{left:25%}.trend-wrap .sep.s2{left:50%}.trend-wrap .sep.s3{left:75%}
.trend-canvas{position:relative;z-index:4;height:var(--chart-height-trend);padding:0 12px}
.trend-canvas canvas{width:100% !important;height:100% !important;display:block}

/* date ticks row below trend */
.date-row{display:flex;justify-content:space-between;gap:6px;padding:6px 8px;margin-top:10px}
.date-row .tick{flex:1;text-align:center;color:#9aa0ab;font-size:.78rem;padding-top:8px}
.date-row .box{display:inline-block;padding:6px 10px;border-radius:4px;background:var(--blue);color:#fff;font-weight:700;font-size:.78rem}
.date-row .box-mag{background:var(--magenta)}

  .top-nav .sucursal-wrapper { position: relative; display: inline-flex; align-items: center; gap:8px; }
.top-nav .profile-btn { display:flex; align-items:center; gap:8px; border-radius:999px; padding:6px 8px; background:#fff; border:1px solid #e6e9ef; cursor:pointer; }
.top-nav .profile-circle { width:36px; height:36px; border-radius:50%; overflow:hidden; flex-shrink:0; background:#f2f4f8; border:1px solid #eef2f6; }
.top-nav .profile-circle img{ width:100%; height:100%; object-fit:cover; display:block; }
.top-nav .profile-label { font-size:13px; color:#102a43; font-weight:600; margin-left:4px; }
.top-nav .chev { font-size:12px; color:#6b7280; margin-left:4px; }

/* dropdown */
.top-nav .dropdown-menu { position:absolute; right:0; top:calc(100% + 8px); min-width:260px; background:#fff; border-radius:10px; box-shadow:0 8px 24px rgba(2,6,23,0.12); border:1px solid #e6e9ef; padding:6px; z-index:1200; display:none; }
.top-nav .dropdown-menu.show { display:block; }
.top-nav .sucursal-item { display:flex; gap:10px; align-items:center; padding:8px; border-radius:8px; cursor:pointer; }
.top-nav .sucursal-item:hover { background:#f5f8ff; }
.top-nav .mini { width:40px; height:40px; border-radius:8px; overflow:hidden; background:#eee; border:1px solid #f0f2f5; }
.top-nav .meta { font-size:13px; color:#0f1724; }
.top-nav .meta small { display:block; color:#6b7280; font-weight:500; font-size:12px; }
.top-nav .dropdown-footer { padding-top:6px; border-top:1px dashed #eef2f6; margin-top:8px; font-size:13px; color:#6b7280; text-align:center; }


.modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 9999; }
.modal.open { display:flex; }
.modal-backdropp{ position:absolute; inset:0; background:rgba(0,0,0,0.5); }
.modal-panel{ position:relative; background:#fff; max-width:420px; width:90%; border-radius:12px; padding:20px; box-shadow:0 8px 30px rgba(0,0,0,0.3); z-index:2; }
.modal-close{ position:absolute; right:10px; top:6px; background:transparent; border:0; font-size:22px; cursor:pointer; }
.modal-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:14px; }
.btn{ padding:8px 14px; border-radius:8px; border:0; cursor:pointer; }
.btn-confirm{ background:#e53935 !important; color:white; }
.btn-cancel{ background:#f0f0f0; }
@media (prefers-reduced-motion: no-preference){
  .modal-panel{ transform:translateY(8px); transition: transform .18s ease, opacity .18s ease; }
  .modal.open .modal-panel{ transform:translateY(0); }
}

/* Ajustes visuales — adapta colores a tu tema */
#navNotifications { position: relative; }

.notif-dropdown{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  max-width: 320px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  padding: 12px;
  display: none;
  z-index: 2000;
  font-size: 14px;
}

.notif-dropdown.open { display: block; animation: pop .12s ease; }
@keyframes pop { from { transform: translateY(-6px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }

.notif-content { display:flex; gap:8px; align-items:center; justify-content:center; padding:6px 4px; color:#333; }
.notif-empty { padding:8px 10px; border-radius:6px; background:rgba(0,0,0,0.03); width:100%; text-align:center; }

/* Opcional: estilo para enfoque (accesibilidad) */
#notifBtn:focus { outline: 2px solid #8fc5fe; border-radius:4px; }

/* ---------------------------
   Ajustes globales del layout
   --------------------------- */
.d-flex.vh-100 {
  display: flex !important;
  min-height: 100vh !important;
  height: 100vh !important;
  overflow: hidden;
  background: var(--body-bg);
}

/* Sidebar */
.sidebar {
  width: 220px;              /* ancho igual al de la imagen */
  background: var(--sidebar-bg);
  border-right: 1px solid var(--divider);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  padding-top: 10px;
}
.sidebar .p-3 { padding: 18px; }
.sidebar .p-3 img { width: 140px; display:block; }

/* Menú lateral: estilo de links (nav-pills usados en tu HTML) */
#menuprincipal,
#menumesas,
#menuconfig {
  padding: 8px 12px;
}
#menuprincipal .nav-link,
#menumesas .nav-link,
#menuconfig .nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: #2b2b2b;
  text-decoration: none;
  font-weight: 700;
  border-radius: 10px;
  margin: 6px 6px;
  transition: all .14s ease;
  background: transparent;
  border: none;
}
#menuprincipal .nav-link:hover,
#menumesas .nav-link:hover,
#menuconfig .nav-link:hover {
  background: rgba(15,66,255,0.04);
}
#menuprincipal .nav-link.active,
#menumesas .nav-link.active,
#menuconfig .nav-link.active {
  color: #fff;
  background: linear-gradient(90deg, #8fc5fe 0%, #6fa8ff 100%);
  box-shadow: 0 10px 28px rgba(34, 102, 255, 0.08);
  font-weight: 800;
}

/* fuerza pequeños iconos circulares si decides añadirlos */
.sidebar .nav-link .icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #eef6ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Footer / Cerrar sesión (pegar abajo) */
.sidebar a#logout {
  margin: 18px;
  border-radius: 12px;
  padding: 10px 12px;
  text-align: center;
  font-weight: 700;
  color: #c53030;
  background: #fff;
  border: 1px solid #f3dede;
}

/* ---------------------------
   Top navigation (barra superior)
   --------------------------- */
/* tu HTML usa .top-nav, así que definimos .top-nav explícitamente */
.top-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 18px 28px;
  border-bottom: 1px solid var(--divider);
  background: var(--white);
  width: 100%;
  box-sizing: border-box;
  z-index: 100;
}
.top-nav .nav-item { position: relative; display: flex; align-items: center; }
.top-nav .nav-link {
  color: var(--muted);
  text-decoration: none;
  font-weight: 700;
  padding: 6px 2px;
}
.top-nav .nav-link.active {
  color: var(--blue);
}
.top-nav .nav-item .nav-link.active::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: -16px;
  height: 3px;
  background: var(--blue);
  border-radius: 3px;
}

/* reloj y campana a la derecha */
.top-nav li.ms-auto { margin-left: auto; display:flex; align-items:center; gap:12px; }

/* Notificaciones (dropdown) */
#navNotifications { position: relative; }
.notif-dropdown { right: 0; top: calc(100% + 8px); }

/* ---------------------------
   Selector de sucursal / perfil (botón derecho)
   --------------------------- */
.sucursal-wrapper { position: relative; display:inline-flex; align-items:center; gap:8px; }
.profile-btn {
  display:flex;
  align-items:center;
  gap:8px;
  border-radius:999px;
  padding:6px 10px;
  background:#fff;
  border: 1px solid #eef2f6;
  cursor: pointer;
  font-weight:700;
}
.profile-circle { width:38px; height:38px; border-radius:50%; overflow:hidden; background:#f2f4f8; border:1px solid #eef2f6; display:inline-block; }
.profile-circle img{ width:100%; height:100%; object-fit:cover; display:block; }
.profile-label { font-size:13px; color:#102a43; font-weight:700; }

/* Dropdown menu (perfil) */
.dropdown-menu { position:absolute; right:0; top: calc(100% + 10px); min-width:260px; background:#fff; border-radius:10px; box-shadow:0 8px 24px rgba(2,6,23,0.12); border:1px solid #eef2f6; padding:8px; display:none; z-index:1200; }
.dropdown-menu.show { display:block; }

/* ---------------------------
   Contenido principal
   --------------------------- */
.flex-grow-1 {
  flex: 1 1 auto;
  overflow: auto;
  min-height: 0; /* importante para que el scroll funcione correctamente */
  background: transparent;
}

/* Ajuste del contenedor principal (dentro del flex-grow) */
.container-fluid#main {
  padding: 26px 34px;
  background: #fff;
  min-height: calc(100vh - 76px);
}

/* ---------------------------
   Estética y detalles
   --------------------------- */
body, .top-nav, .sidebar { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
a:focus { outline: 2px solid rgba(143,197,254,0.45); outline-offset: 2px; border-radius:6px; }

/* Mobile responsive (simple) */
@media (max-width: 900px) {
  .sidebar { width: 72px; }
  .sidebar .p-3 img { width: 48px; }
  .profile-label { display: none; }
  .top-nav { padding: 12px 14px; gap: 14px; }
}


/* DASHBOARD GENERAL */
.dt-dashboard{ max-width:1200px; margin:0 auto; padding:8px 6px 40px; box-sizing:border-box; font-family: 'Montserrat',sans-serif; }
.dt-header{ display:flex; gap:12px; align-items:center; justify-content:space-between; margin-bottom:14px; }
.dt-header .title { font-size:18px; font-weight:800; color:#111827; }
.dt-header .sub { color:var(--muted); font-size:13px; margin-top:4px; font-weight:600; }
.dt-header .actions { display:flex; gap:8px; align-items:center; }
.dt-btn { border:0; background:linear-gradient(90deg,#5fd3ff,#6f41ff); color:#fff; padding:8px 12px; border-radius:999px; font-weight:800; cursor:pointer; box-shadow: 0 6px 18px rgba(20,36,64,0.06); }
.dt-date { border-radius:999px; border:1px solid #eef2f6; padding:8px 12px; background:#fff; font-weight:700; color:var(--muted); }

/* KPI cards: iconos INSIDE, sin salirse */
.dt-kpis { display:grid; grid-template-columns: repeat(4,1fr); gap:18px; margin-bottom:18px; }
.dt-card { background: linear-gradient(180deg, rgba(255,255,255,0.95), #fff); border-radius: 12px; padding:18px 16px 16px; box-shadow: 0 8px 30px rgba(20,36,64,0.06); border: 1px solid #eef2f6; display:flex; flex-direction:column; gap:8px; min-height:92px; position:relative; overflow:visible; }
/* Icon inside card (no overflow) */
.dt-card .kpi-icon { position:absolute; top:16px; left:16px; width:40px; height:40px; border-radius:8px; display:flex; align-items:center; justify-content:center; box-shadow: 0 8px 20px rgba(34,102,255,0.06); background: linear-gradient(135deg,#9fe7ff,#c78bff); }
.dt-card .kpi-icon svg { width:20px; height:20px; display:block; }
/* add left padding to content so icon doesn't overlap */
.dt-card .caption { font-size:12px; color:var(--muted); font-weight:800; display:flex; justify-content:space-between; align-items:center; margin-left:64px; }
.dt-card .value { font-size:22px; font-weight:900; color:#0f1724; margin-left:64px; }
.dt-badge { font-size:12px; font-weight:800; padding:6px 8px; border-radius:999px; background:#eef9f3; color:#16a34a; }

/* Main grid */
.dt-main-grid { display:grid; grid-template-columns: 1fr 320px; gap:14px; margin-bottom:18px; align-items:start; }
.dt-chart-panel { background:#fff; border-radius:12px; padding:18px; border:1px solid #eef2f6; box-shadow:0 6px 18px rgba(20,36,64,0.06); min-height:220px; }
.dt-chart-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.dt-chart-title h4 { margin:0; font-size:15px; font-weight:800; color:#0f1724; }
.dt-toggle { display:flex; gap:8px; }
.dt-toggle button { background:#f6f9ff; border:0; padding:6px 12px; border-radius:999px; font-weight:800; cursor:pointer; }
.dt-toggle button.active { background: linear-gradient(90deg,#7ad0ff,#a85bff); color:#fff; box-shadow: 0 8px 24px rgba(106,58,255,0.12); }

/* SVG chart styling */
.chart-wrap { background: linear-gradient(180deg,#fbfdff,#f7f9ff); border-radius:10px; padding:6px; }
svg .bar-group rect { transition: height 600ms cubic-bezier(.2,.9,.2,1), y 600ms cubic-bezier(.2,.9,.2,1); }
svg text { font-family: 'Montserrat', sans-serif; }

.dt-side { display:flex; flex-direction:column; gap:12px; }
.dt-side .mini { padding:12px; border-radius:12px; background: linear-gradient(180deg,#f8fbff,#fff); border:1px solid #eef2f6; box-shadow:0 6px 18px rgba(20,36,64,0.04); }
.mini .label { font-size:12px; color:var(--muted); font-weight:700; }
.mini .big { font-size:20px; font-weight:900; margin-top:6px; color:#0f1724; }

.dt-bottom-strip { margin-top:18px; border-radius:14px; padding:18px; color:#fff; display:flex; gap:22px; align-items:center; justify-content:space-between; background: linear-gradient(90deg,#57c7ff,#7a4bff); box-shadow: 0 12px 36px rgba(46,64,94,0.12); }
.dt-strip-item { flex:1; text-align:center; }
.dt-strip-item .num { font-size:28px; font-weight:900; }
.dt-strip-item .lbl { font-size:14px; opacity:0.95; font-weight:800; }

@media (max-width: 1000px){
.dt-main-grid { grid-template-columns: 1fr; }
.dt-kpis { grid-template-columns: repeat(2,1fr); }
.dt-bottom-strip { flex-direction:column; gap:12px; text-align:center; }
}

  /*TRANSACCIONES*/

  /* ===== Transacciones: estilos (pegar en style.css) ===== */
.transacciones-container {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  padding: 24px;
  color: #1f2937;
  background: #f6f8fb;
}

/* Header */
.transacciones-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.transacciones-title h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
}

.transacciones-title .muted {
  margin-top: 4px;
  color: #6b7280;
  font-size: 13px;
}

/* Controls */
.transacciones-controls {
  display: flex;
  gap: 10px;
  align-items: center;
}

.search-wrap {
  display:flex;
  align-items:center;
  gap:6px;
  background:#fff;
  padding:6px;
  border-radius:8px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.05);
}

.search-wrap input {
  border: none;
  outline: none;
  width: 220px;
  padding: 6px 8px;
  font-size: 14px;
  background: transparent;
}

.btn {
  border: none;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  background: white;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}

.btn.outline {
  background: #fff;
  border: 1px solid #e6e9ef;
}

.btn.icon-btn {
  display:flex;
  align-items:center;
  justify-content:center;
  background: transparent;
  padding: 6px;
}

/* gradient export */
.btn.gradient {
  background: linear-gradient(90deg, #7c5cff 0%, #00c2ff 100%);
  color: white;
  box-shadow: 0 6px 18px rgba(44, 120, 255, 0.12);
}

/* ===== Stats cards ===== */
.transacciones-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  margin: 10px 0 22px;
}

.stat-card {
  background: #fff;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(15,23,42,0.04);
  display:flex;
  flex-direction:column;
  gap:8px;
}

.stat-head {
  display:flex;
  align-items:center;
  gap:12px;
}

.stat-icon {
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f3f6ff;
  border-radius:10px;
  font-size:18px;
}

.stat-label {
  font-size:13px;
  color: #6b7280;
}

.stat-value {
  font-weight:700;
  font-size:20px;
  color: #0b1220;
}

.stat-sub {
  color:#10b981; /* verde para incremento */
  font-size:13px;
}

/* ===== Table ===== */
.transacciones-table-wrap {
  background: transparent;
  overflow: auto;
  border-radius: 12px;
  padding-bottom: 8px;
}

.transacciones-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  box-shadow: 0 6px 18px rgba(15,23,42,0.04);
  border-radius: 12px;
  overflow: hidden;
}

.transacciones-table thead th {
  text-align: left;
  padding: 16px 18px;
  font-size: 13px;
  color: #6b7280;
  border-bottom: 1px solid #eef2f6;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 2;
}

.transacciones-table tbody tr {
  border-top: 1px solid #f2f4f7;
}

.transacciones-table td {
  padding: 14px 18px;
  vertical-align: middle;
  font-size: 14px;
  color: #111827;
  max-width: 320px;
}

.transacciones-table td.id {
  font-weight:700;
  color:#374151;
}

.transacciones-table .muted {
  color:#6b7280;
  font-size:13px;
}

/* Pills and status */
.pill {
  display:inline-block;
  padding:6px 10px;
  border-radius: 999px;
  background: #eef9ff;
  color: #0369a1;
  font-size: 13px;
  border: 1px solid #e6f6ff;
}

.pill.light {
  background: #f0f7ff;
  color: #0ea5a5;
  border: 1px solid #e6f7ff;
}

.status {
  display:inline-block;
  padding:6px 12px;
  border-radius: 999px;
  font-weight:600;
  font-size:13px;
}

.status.approved {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #bbf7d0;
}

/* small helper */
.small { font-size:13px; color:#111827; }
.muted { font-size:13px; color:#6b7280; }

/* Responsive adjustments */
@media (max-width: 900px) {
  .transacciones-stats {
    grid-template-columns: 1fr;
  }
  .search-wrap input { width: 140px; }
  .transacciones-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .transacciones-controls { width:100%; justify-content:flex-start; gap:8px; }
}


/* ===== Departamentos: card idéntica + stats + búsqueda ===== */
.dept-wrap {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  padding: 22px;
  background: #f4f7fb;
  color: #0b1220;
}

/* Header */
.dept-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:12px;
}
.dept-header h1 { margin:0; font-size:20px; font-weight:700; }
.dept-header .muted { margin:4px 0 0; color:#6b7280; font-size:13px; }

.dept-controls { display:flex; gap:10px; align-items:center; }
.dept-search {
  padding:8px 12px;
  border-radius:12px;
  border:1px solid #e6eef7;
  background:#fff;
  outline:none;
  width:320px;
  box-shadow: 0 2px 8px rgba(12,17,25,0.04);
}

/* STATS row */
.dept-stats {
  display:flex;
  gap:12px;
  margin:12px 0 18px;
  flex-wrap:wrap;
}
.stat-card.stat-small {
  display:flex;
  align-items:center;
  gap:12px;
  background:#fff;
  padding:12px 14px;
  border-radius:12px;
  min-width:24%;
  box-shadow: 0 6px 18px rgba(15,23,42,0.04);
  border:1px solid #f0f3f7;
}
.stat-icon {
  width:44px;
  height:44px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
}
.stat-icon.blue { background: linear-gradient(180deg,#e6f6ff,#d8f1ff); color:#0369a1; }
.stat-icon.pink { background: linear-gradient(180deg,#fff0f6,#ffeef1); color:#e11d48; }
.stat-icon.amber { background: linear-gradient(180deg,#fff7ed,#fff4e6); color:#b45309; }
.stat-icon.green { background: linear-gradient(180deg,#ecfdf5,#e6f9ef); color:#059669; }

.stat-info { display:flex; flex-direction:column; gap:2px; }
.stat-label { color:#6b7280; font-size:13px; }
.stat-value { font-weight:800; font-size:18px; color:#0b1220; }

/* GRID */
.dept-grid {
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:18px;
}

/* Card container */
.dept-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 10px 28px rgba(12,17,25,0.06);
  border: 2px solid rgba(28,199,255,0.08);
  min-height: 300px;
  display:flex;
  flex-direction:column;
  gap:14px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.dept-card:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(12,17,25,0.08); }

/* Top row: titulo + badge */
.card-top {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
.card-title { margin:0; font-size:20px; font-weight:700; color:#0b1220; }

/* badge */
.badge {
  padding:6px 10px;
  border-radius:999px;
  font-weight:700;
  font-size:12px;
  display:inline-block;
}
.badge.red { background: linear-gradient(180deg,#ffecf0,#fff5f7); color:#d0234e; border:1px solid #ffd6e0; }
.badge.gray { background:#f8fafc; color:#6b7280; border:1px solid #e6eef5; }
.badge.orange { background: linear-gradient(180deg,#fff7ed,#fff4e6); color:#b45309; border:1px solid #fde6c9; }

/* Meta rows */
.card-meta { display:flex; flex-direction:column; gap:8px; }
.meta-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  color:#6b7280;
  font-size:13px;
}
.meta-label { color:#6b7280; }
.meta-value { color:#0b1220; font-weight:700; }

/* separador fino */
.card-sep {
  height:1px;
  background: linear-gradient(90deg, rgba(14,30,37,0.03), rgba(14,30,37,0.02));
  margin: 4px 0 0;
}

/* Saldo Mensual */
.card-saldo { display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.saldo-title { font-weight:700; color:#6b7280; font-size:13px; }

.saldo-used-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  color:#6b7280;
  font-size:13px;
}
.used-text strong { color:#0b1220; font-weight:700; }
.used-percent { font-weight:800; color:#374151; }

/* progress */
.saldo-progress { display:block; }
.progress-track {
  width:100%;
  height:12px;
  background:#eef2f6;
  border-radius:999px;
  overflow:hidden;
  border: 1px solid rgba(14,30,37,0.03);
}
.progress-fill {
  height:100%;
  background: linear-gradient(90deg, #f6c200 0%, #f5b300 100%);
  width:0%;
  transition: width .8s cubic-bezier(.2,.9,.2,1);
}
.progress-fill.danger { background: linear-gradient(90deg,#f87171,#ef4444); }

/* saldo foot */
.saldo-foot {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  font-size:13px;
  color:#6b7280;
}
.foot-amount { font-weight:800; color:#0b1220; margin-left:6px; }
.foot-amount.positive { color:#059669; }

/* botones */
.btn {
  border:none;
  padding:12px 14px;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
  font-size:15px;
}
.btn.fullwidth { width:100%; margin-top:2px; }
.btn.gradient {
  background: linear-gradient(90deg,#3ec7ff 0%,#7c5cff 100%);
  color:white;
  box-shadow: 0 10px 28px rgba(124,92,255,0.12);
}
.btn.outline {
  background:#fff;
  border:1px solid #e6eef7;
  color:#0b1220;
  padding:8px 12px;
  border-radius:10px;
  font-weight:700;
}

/* Responsive */
@media (max-width:1100px) {
  .dept-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dept-search { width:220px; }
}
@media (max-width:700px) {
  .dept-grid { grid-template-columns: 1fr; }
  .dept-header { flex-direction:column; align-items:flex-start; gap:10px; }
  .dept-search { width:160px; }
}

/** RESIDENTES **/

/* ===== Residentes Registrados ===== */
.res-wrap {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  padding: 20px;
  background: #f6f8fb;
  color: #0b1220;
}

/* Header */
.res-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:16px;
}
.res-header h1 { margin:0; font-size:20px; font-weight:700; }
.res-header .muted { margin-top:4px; color:#6b7280; font-size:13px; }

.res-controls { display:flex; gap:10px; align-items:center; }
.res-search {
  padding:8px 12px;
  border-radius:10px;
  border:1px solid #e6eef7;
  background:#fff;
  outline:none;
  width:360px;
  box-shadow: 0 2px 10px rgba(12,17,25,0.04);
}
.btn.small { padding:8px 10px; border-radius:8px; }

/* Grid layout */
.res-grid {
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:18px;
}

/* Card */
.res-card {
  background:#fff;
  border-radius:10px;
  overflow:hidden;
  box-shadow: 0 10px 28px rgba(12,17,25,0.06);
  border:1px solid #eef4f8;
  display:flex;
  flex-direction:column;
}

/* Card head - gradient bar */
.res-card-head {
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  background: linear-gradient(90deg,#7c5cff 0%, #3ec7ff 100%);
  color:#fff;
}
.res-head-left { display:flex; gap:10px; align-items:center; }
.icon-user { opacity:0.95; color:rgba(255,255,255,0.95); }
.res-head-title { font-weight:700; font-size:14px; }
.res-head-sub { font-size:12px; opacity:0.9; }

/* list */
.res-list { padding:12px; display:flex; flex-direction:column; gap:8px; }

/* item */
.res-item {
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:10px;
  border-radius:8px;
  border:1px solid #f0f6fb;
  background:#fff;
}
.res-avatar {
  width:40px;
  height:40px;
  border-radius:50%;
  background: linear-gradient(90deg,#7c5cff,#3ec7ff);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:14px;
  flex-shrink:0;
}
.res-body { flex:1; display:flex; flex-direction:column; gap:6px; }

/* top line: name + badge */
.res-line-top { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.res-name { font-weight:800; color:#0b1220; }
.res-badge {
  display:inline-block;
  font-size:12px;
  padding:4px 8px;
  border-radius:999px;
  background: #fff0f6;
  color:#d0234e;
  border:1px solid #ffd6e0;
  font-weight:700;
}

/* subline */
.res-line-sub { color:#6b7280; font-size:13px; }

/* contacts */
.res-contacts {
  display:flex;
  gap:16px;
  margin-top:4px;
}
.res-contact { display:flex; gap:8px; align-items:center; color:#6b7280; font-size:13px; }
.res-contact .icon { opacity:0.85; }

/* small icons color */
.res-contact svg { color:#6b7280; }

/* hover */
.res-item:hover { box-shadow: 0 8px 20px rgba(12,17,25,0.04); transform: translateY(-2px); transition: all .12s ease; }

/* Responsive */
@media (max-width:1100px) {
  .res-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .res-search { width:240px; }
}
@media (max-width:700px) {
  .res-grid { grid-template-columns: 1fr; }
  .res-header { flex-direction:column; align-items:flex-start; gap:12px; }
  .res-search { width:100%; }
}