/* ════════════════════════════════════════
   COMPONENTS — Corpocapital Light Theme
   ════════════════════════════════════════ */

/* ─── PAGE HEADER ─── */
.page-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  margin-bottom:28px; gap:12px; flex-wrap:wrap;
}
.page-title { font-size:24px; font-weight:700; color:var(--txt); letter-spacing:-.5px; }
.page-sub { font-size:13px; color:var(--txt3); margin-top:4px; }
.page-header-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* ─── CARDS ─── */
.card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--r3); padding:20px;
  transition:border-color .2s, box-shadow .2s;
  box-shadow:var(--shadow-sm);
  min-width:0; overflow:hidden;
}
.card:hover { border-color:var(--border2); box-shadow:var(--shadow); }
.card-sm { padding:14px 16px; }
.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.card-title { font-size:14px; font-weight:600; color:var(--txt); }
.card-sub { font-size:12px; color:var(--txt3); margin-top:2px; }

.card-glass {
  background:rgba(255,255,255,.7);
  border:1px solid var(--border);
  backdrop-filter:blur(12px);
  border-radius:var(--r3);
}

/* ─── KPI CARDS ─── */
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px; }
@media(max-width:1100px){ .kpi-grid{grid-template-columns:repeat(2,1fr);gap:10px;} }

.kpi-card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--r3); padding:20px;
  display:flex; align-items:center; gap:14px;
  position:relative; overflow:hidden;
  transition:all .2s var(--ease); cursor:default;
  box-shadow:var(--shadow-sm); min-width:0;
}
.kpi-card::after {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:transparent; transition:.2s;
}
.kpi-card:hover { border-color:var(--border2); transform:translateY(-2px); box-shadow:var(--shadow); }
.kpi-card:hover::after { background:var(--accent); }

.kpi-card.blue::after  { background:var(--accent); }
.kpi-card.green::after { background:var(--green); }
.kpi-card.amber::after { background:var(--amber); }
.kpi-card.purple::after{ background:var(--purple); }
.kpi-card.teal::after  { background:var(--teal); }

.kpi-icon {
  width:44px; height:44px; border-radius:var(--r2);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size:20px;
}
.kpi-icon svg { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.kpi-icon.blue   { background:rgba(30,64,175,.08);  color:var(--accent); }
.kpi-icon.green  { background:var(--green-light);   color:var(--green);  }
.kpi-icon.amber  { background:var(--amber-light);   color:var(--amber);  }
.kpi-icon.purple { background:var(--purple-light);   color:var(--purple); }
.kpi-icon.teal   { background:var(--teal-light);    color:var(--teal);   }
.kpi-icon.red    { background:var(--red-light);      color:var(--red);    }
.kpi-icon.cyan   { background:var(--cyan-bg);        color:var(--cyan);   }

.kpi-val   { font-size:24px; font-weight:700; line-height:1.15; letter-spacing:-.5px; color:var(--txt); }
.kpi-label { font-size:12px; color:var(--txt3); margin-top:3px; font-weight:500; }
.kpi-trend { font-size:11px; margin-top:6px; display:flex; align-items:center; gap:3px; font-weight:500; }
.kpi-trend.up   { color:var(--green); }
.kpi-trend.down { color:var(--red); }
.kpi-trend.flat { color:var(--txt3); }

/* ─── GRID ─── */
.row { display:grid; gap:16px; min-width:0; }
.row > * { min-width:0; } /* prevent grid children from overflowing */
.row-2   { grid-template-columns:1fr 1fr; }
.row-3   { grid-template-columns:1fr 1fr 1fr; }
.row-2-1 { grid-template-columns:2fr 1fr; }
.row-1-2 { grid-template-columns:1fr 2fr; }
.row-3-2 { grid-template-columns:3fr 2fr; }
@media(max-width:800px){.row-2,.row-3,.row-2-1,.row-1-2,.row-3-2{grid-template-columns:1fr;}}

/* ─── TABLES ─── */
.tbl-wrap { overflow-x:auto; border-radius:var(--r); }
.tbl-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.tbl-info { font-size:12px; color:var(--txt3); }

table { width:100%; border-collapse:collapse; font-size:13px; }

thead th {
  background:var(--bg4); color:var(--txt3);
  font-weight:600; font-size:11px; letter-spacing:.6px;
  text-transform:uppercase; padding:11px 14px;
  text-align:left; border-bottom:1px solid var(--border);
  white-space:nowrap; user-select:none; cursor:default;
}
thead th:first-child { border-radius:var(--r) 0 0 0; }
thead th:last-child  { border-radius:0 var(--r) 0 0; }
thead th.sortable { cursor:pointer; }
thead th.sortable:hover { color:var(--txt); background:var(--bg5); }
thead th.sort-asc::after  { content:' ↑'; color:var(--accent); }
thead th.sort-desc::after { content:' ↓'; color:var(--accent); }

tbody tr {
  border-bottom:1px solid var(--border);
  transition:background .12s var(--ease);
}
tbody tr:last-child { border-bottom:none; }
tbody tr:hover { background:rgba(30,64,175,.02); }
tbody td { padding:12px 14px; color:var(--txt2); vertical-align:middle; }
.td-muted { color:var(--txt3); font-size:13px; }
.td-mono  { font-family:'IBM Plex Mono', monospace; font-size:12.5px; }

.row-actions { display:flex; gap:5px; opacity:.5; transition:opacity .15s; }
tr:hover .row-actions { opacity:1; }

.tbl-empty { text-align:center; padding:52px 20px; color:var(--txt3); }
.tbl-empty .tbl-empty-icon { font-size:36px; margin-bottom:12px; opacity:.3; }
.tbl-empty p { font-size:13.5px; }

/* ─── BADGES ─── */
.badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:20px;
  font-size:11px; font-weight:600; letter-spacing:.02em;
  white-space:nowrap;
}
.badge-dot { width:6px; height:6px; border-radius:50%; }
.badge-green  { background:var(--green-light); color:var(--green); }
.badge-red    { background:var(--red-light);   color:var(--red);   }
.badge-amber  { background:var(--amber-light); color:var(--amber); }
.badge-blue   { background:rgba(30,64,175,.08); color:var(--accent); }
.badge-purple { background:var(--purple-light); color:var(--purple); }
.badge-teal   { background:var(--teal-light);  color:var(--teal);   }
.badge-cyan   { background:var(--cyan-bg);     color:var(--cyan);   }
.badge-ghost  { background:var(--bg5);         color:var(--txt2);   border:1px solid var(--border); }

/* ─── BUTTONS ─── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:8px 16px; border-radius:var(--r);
  font-size:13px; font-weight:500; cursor:pointer;
  transition:all .15s var(--ease); white-space:nowrap;
  border:1px solid transparent;
}
.btn-primary {
  background:var(--accent); color:#fff; border-color:var(--accent);
}
.btn-primary:hover { background:var(--accent2); border-color:var(--accent2); box-shadow:var(--shadow-accent); transform:translateY(-1px); }
.btn-primary:active { transform:translateY(0); }

.btn-secondary {
  background:var(--bg4); color:var(--txt2);
  border:1px solid var(--border);
}
.btn-secondary:hover { background:var(--bg5); color:var(--txt); border-color:var(--border2); }

.btn-ghost {
  background:transparent; color:var(--txt2);
  border:1px solid transparent;
}
.btn-ghost:hover { background:var(--bg4); color:var(--txt); }

.btn-danger {
  background:var(--red-light); color:var(--red);
  border:1px solid rgba(220,38,38,.15);
}
.btn-danger:hover { background:rgba(220,38,38,.12); }

.btn-success {
  background:var(--green-light); color:var(--green);
  border:1px solid rgba(5,150,105,.15);
}
.btn-success:hover { background:rgba(5,150,105,.12); }

.btn-sm  { padding:6px 10px; font-size:12px; }
.btn-xs  { padding:3px 8px; font-size:11px; }
.btn-lg  { padding:10px 22px; font-size:14px; font-weight:600; }
.btn-icon {
  padding:7px; background:var(--bg4); border:1px solid var(--border);
  border-radius:var(--r); color:var(--txt2);
  display:inline-flex; align-items:center; justify-content:center;
  transition:all .15s var(--ease);
}
.btn-icon:hover { background:var(--bg5); color:var(--txt); border-color:var(--border2); }
.btn-icon.danger:hover { background:var(--red-light); color:var(--red); border-color:rgba(220,38,38,.2); }

/* ─── FORMS ─── */
.form-group { margin-bottom:16px; }
.form-label {
  display:block; font-size:12px; font-weight:500;
  color:var(--txt2); margin-bottom:6px;
}
.form-label .req { color:var(--red); margin-left:2px; }
.form-hint { font-size:11.5px; color:var(--txt3); margin-top:4px; }

.form-control {
  width:100%; background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--r); color:var(--txt);
  padding:9px 12px; font-size:13px;
  transition:all .15s var(--ease);
}
.form-control:hover { border-color:var(--border2); }
.form-control:focus { border-color:var(--accent3); box-shadow:0 0 0 3px var(--accent-glow); }
.form-control::placeholder { color:var(--txt4); }
.form-control:disabled { opacity:.5; cursor:not-allowed; }
select.form-control option { background:var(--bg2); }
textarea.form-control { resize:vertical; min-height:88px; }

.input-with-icon { position:relative; }
.input-with-icon .input-icon { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--txt3); font-size:14px; pointer-events:none; display:flex; }
.input-with-icon .form-control { padding-left:34px; }

.field-error { font-size:11.5px; color:var(--red); margin-top:4px; display:flex; align-items:center; gap:4px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media(max-width:520px){ .form-row{grid-template-columns:1fr;} }

/* Toggle switch */
.toggle-wrap { display:flex; align-items:center; gap:10px; cursor:pointer; }
.toggle-switch {
  width:44px; height:24px; border-radius:12px; position:relative;
  background:var(--border2); transition:.2s; cursor:pointer;
}
.toggle-switch::after {
  content:''; position:absolute; left:3px; top:3px;
  width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:var(--shadow-sm);
  transition:.2s;
}
.toggle-switch.active { background:var(--accent); }
.toggle-switch.active::after { left:23px; }
.toggle-label { font-size:13px; color:var(--txt2); font-weight:500; }

/* ─── MODAL ─── */
.modal-overlay {
  position:fixed; inset:0; background:rgba(15,23,42,.4); z-index:500;
  display:flex; align-items:center; justify-content:center;
  padding:20px; backdrop-filter:blur(8px);
}
.modal-overlay.hidden { display:none; }
.modal {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--r3); width:100%; max-width:520px;
  max-height:90vh; overflow-y:auto;
  animation:modalIn .2s var(--ease); box-shadow:var(--shadow-lg);
}
.modal-lg  { max-width:680px; }
.modal-xl  { max-width:860px; }
@keyframes modalIn { from{transform:scale(.96) translateY(8px);opacity:0;} to{transform:scale(1) translateY(0);opacity:1;} }
.modal-header {
  padding:20px 24px 16px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; background:var(--bg2); z-index:1;
}
.modal-title { font-size:17px; font-weight:600; }
.modal-close {
  width:30px; height:30px; border-radius:var(--r); background:var(--bg4);
  border:1px solid var(--border); display:flex; align-items:center;
  justify-content:center; color:var(--txt3); cursor:pointer; font-size:14px;
  transition:all .15s;
}
.modal-close:hover { background:var(--bg5); color:var(--txt); }
.modal-body   { padding:20px 24px; }
.modal-footer { padding:16px 24px; border-top:1px solid var(--border); display:flex; gap:8px; justify-content:flex-end; }

/* ─── TOAST ─── */
#toast { position:fixed; bottom:24px; right:24px; z-index:1000; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toast-item {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--r2); padding:12px 18px; font-size:13px;
  display:flex; align-items:center; gap:10px;
  min-width:260px; max-width:380px;
  animation:toastIn .25s var(--ease); box-shadow:var(--shadow-lg);
  pointer-events:all;
}
@keyframes toastIn { from{transform:translateX(60px);opacity:0;} to{transform:translateX(0);opacity:1;} }
.toast-item.success { border-left:3px solid var(--green); }
.toast-item.error   { border-left:3px solid var(--red); }
.toast-item.info    { border-left:3px solid var(--accent); }
.toast-item.warning { border-left:3px solid var(--amber); }
.toast-icon { font-size:15px; flex-shrink:0; }

/* ─── CONFIRM DIALOG ─── */
#confirm-overlay {
  position:fixed; inset:0; background:rgba(15,23,42,.4); z-index:600;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(4px);
}
#confirm-overlay.hidden { display:none; }
#confirm-box {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--r3); padding:28px; max-width:400px; width:90%;
  animation:modalIn .2s var(--ease); box-shadow:var(--shadow-lg);
}
#confirm-box h3 { font-size:16px; font-weight:700; margin-bottom:10px; }
#confirm-box p  { font-size:13.5px; color:var(--txt2); margin-bottom:22px; line-height:1.6; }
#confirm-box .btns { display:flex; gap:8px; justify-content:flex-end; }

/* ─── SEARCH ─── */
.search-box { position:relative; }
.search-box input { padding-left:36px; }
.search-box .icon { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--txt3); font-size:14px; pointer-events:none; display:flex; }

/* ─── STAT ROW ─── */
.stat-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.stat-pill {
  background:var(--bg4); border:1px solid var(--border);
  border-radius:20px; padding:6px 14px; font-size:12.5px;
  color:var(--txt2); display:flex; align-items:center; gap:6px;
}
.stat-pill b { color:var(--txt); font-weight:600; }

/* ─── EMPTY STATE ─── */
.empty { text-align:center; padding:56px 20px; color:var(--txt3); }
.empty .empty-icon { font-size:44px; margin-bottom:14px; opacity:.3; }
.empty p { font-size:14px; line-height:1.6; }
.empty .btn { margin-top:16px; }

/* ─── PROGRESS ─── */
.progress { height:6px; background:var(--bg5); border-radius:3px; overflow:hidden; }
.progress-bar { height:100%; border-radius:3px; background:var(--accent); transition:width .4s var(--ease); }
.progress-bar.green  { background:var(--green); }
.progress-bar.amber  { background:var(--amber); }
.progress-bar.red    { background:var(--red); }

/* ─── DIVIDER ─── */
.divider { height:1px; background:var(--border); margin:16px 0; }

/* ─── AVATAR ─── */
.av {
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; flex-shrink:0;
  background:var(--accent); color:#fff;
}
.av-sm { width:26px; height:26px; font-size:10px; }
.av-lg { width:44px; height:44px; font-size:16px; }

/* ─── TABS ─── */
.tab-bar {
  display:flex; gap:2px; background:var(--bg4);
  border:1px solid var(--border); border-radius:var(--r2);
  padding:3px; margin-bottom:20px; width:fit-content;
}
.tab {
  padding:7px 16px; border-radius:var(--r); font-size:13px;
  font-weight:500; color:var(--txt2); cursor:pointer;
  transition:all .15s var(--ease);
}
.tab:hover { color:var(--txt); }
.tab.active { background:var(--bg2); color:var(--txt); box-shadow:var(--shadow-sm); font-weight:600; }

.condo-tab-bar { display:flex; gap:4px; background:var(--bg4); border:1px solid var(--border); border-radius:10px; padding:4px; margin-bottom:20px; }
.condo-tab { flex:1; text-align:center; padding:7px 12px; border-radius:7px; font-size:13px; font-weight:500; color:var(--txt2); cursor:pointer; transition:all .15s; }
.condo-tab.active { background:var(--bg2); color:var(--txt); box-shadow:var(--shadow-sm); }

/* ─── SUMMARY / METRIC BOX ─── */
.metric-box {
  background:var(--bg4); border:1px solid var(--border);
  border-radius:var(--r2); padding:14px 18px;
  display:flex; flex-direction:column; gap:2px;
}
.metric-val  { font-size:20px; font-weight:700; letter-spacing:-.02em; }
.metric-lbl  { font-size:11.5px; color:var(--txt3); font-weight:400; }

.summary-box { background:rgba(30,64,175,.06); border:1px solid rgba(30,64,175,.15); border-radius:var(--r2); padding:14px 18px; display:flex; align-items:center; gap:12px; }
.summary-box .val { font-size:22px; font-weight:700; color:var(--accent); }
.summary-box .lbl { font-size:12px; color:var(--txt3); }

/* ─── CHART ─── */
.chart-wrap { position:relative; }
.chart-legend { display:flex; flex-wrap:wrap; gap:12px; margin-top:12px; }
.chart-legend-item { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--txt2); }
.chart-legend-dot  { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

/* ─── INSIGHT CARD ─── */
.insight-card {
  background:var(--bg4); border:1px solid var(--border);
  border-radius:var(--r2); padding:14px 16px;
  display:flex; align-items:flex-start; gap:12px;
  min-width:0; overflow:hidden;
}
.insight-card .insight-icon {
  width:36px; height:36px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; flex-shrink:0;
}
.insight-card .insight-title { font-size:12.5px; font-weight:600; color:var(--txt); word-break:break-word; }
.insight-card .insight-desc  { font-size:12px; color:var(--txt3); margin-top:2px; line-height:1.5; word-break:break-word; }

/* ─── ACTIVITY FEED ─── */
.activity-item {
  display:flex; align-items:flex-start; gap:12px;
  padding:10px 0; border-bottom:1px solid var(--border);
}
.activity-item:last-child { border-bottom:none; }
.activity-dot { width:8px; height:8px; border-radius:50%; margin-top:5px; flex-shrink:0; background:var(--accent); }
.activity-dot.green  { background:var(--green); }
.activity-dot.amber  { background:var(--amber); }
.activity-dot.red    { background:var(--red); }
.activity-text { font-size:13px; color:var(--txt); line-height:1.5; }
.activity-time { font-size:11.5px; color:var(--txt3); margin-top:2px; }

.export-group { display:flex; gap:5px; }
.export-group .btn { gap:5px; }
.error-msg { color:var(--red); font-size:12.5px; margin-top:4px; }
.input-group { display:flex; gap:8px; }
.input-group .form-control { flex:1; }
.amount-positive { color:var(--green); font-weight:600; }
.amount-negative { color:var(--red);   font-weight:600; }
.amount-neutral  { color:var(--txt2);  font-weight:500; }

.section-title {
  font-size:11px; font-weight:600; letter-spacing:.8px;
  text-transform:uppercase; color:var(--txt3);
  margin-bottom:12px; display:flex; align-items:center; gap:8px;
}
.section-title::after { content:''; flex:1; height:1px; background:var(--border); }

.skeleton {
  background:linear-gradient(90deg, var(--bg4) 25%, var(--bg5) 50%, var(--bg4) 75%);
  background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:var(--r);
}
@keyframes shimmer { from{background-position:200% 0;} to{background-position:-200% 0;} }

.scroll-panel { overflow-y:auto; max-height:320px; }
.scroll-panel::-webkit-scrollbar { width:3px; }
.scroll-panel::-webkit-scrollbar-thumb { background:var(--border2); border-radius:2px; }

/* ─── LOGIN ─── */
@keyframes bgZoom {
  0%   { transform: scale(1);    }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1);    }
}
@keyframes loginCardIn {
  from { transform:translateY(24px); opacity:0; }
  to   { transform:translateY(0);    opacity:1; }
}

#login-page {
  display:flex; align-items:center; justify-content:center;
  min-height:100vh; position:relative; overflow:hidden; padding:40px 20px;
  background:#0a0f1e;
}

/* Imagen de fondo con zoom */
#login-page::before {
  content:'';
  position:absolute; inset:0; z-index:0;
  background: url('../img/fondo.jpg') center center / cover no-repeat;
  animation: bgZoom 14s ease-in-out infinite;
  transform-origin: center center;
}

/* Capa oscura encima para que el card resalte */
#login-page::after {
  content:'';
  position:absolute; inset:0; z-index:0;
  background: linear-gradient(
    135deg,
    rgba(5,10,30,.55) 0%,
    rgba(10,20,50,.45) 50%,
    rgba(5,10,30,.60) 100%
  );
}

#login-page > .login-card { position:relative; z-index:1; }

.login-card {
  /* Vidrio esmerilado semitransparente */
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius:var(--r3); padding:48px 44px 44px;
  width:100%; max-width:440px; min-width:320px;
  box-shadow:
    0 8px 32px rgba(0,0,0,.45),
    0 1px 0 rgba(255,255,255,.07) inset;
  animation: loginCardIn .55s var(--ease);
}

/* Textos más claros sobre el fondo oscuro */
.login-card .login-title { color:#f1f5f9; }
.login-card .login-sub   { color:rgba(255,255,255,.55); }
.login-card .login-hint  { color:rgba(255,255,255,.4); }
.login-card .login-hint b{ color:rgba(255,255,255,.65); }
.login-card .form-label  { color:rgba(255,255,255,.7); }
.login-card .form-control {
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.15);
  color:#f1f5f9;
}
.login-card .form-control::placeholder { color:rgba(255,255,255,.3); }
.login-card .form-control:focus {
  background:rgba(255,255,255,.11);
  border-color:var(--accent);
  box-shadow: 0 0 0 3px rgba(59,130,246,.25);
}
.login-logo {
  width:52px; height:52px; border-radius:14px;
  background:var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-size:24px; margin:0 auto 20px;
}
.login-title { text-align:center; font-size:22px; font-weight:700; margin-bottom:6px; letter-spacing:-.02em; color:var(--txt); }
.login-sub   { text-align:center; font-size:13px; color:var(--txt3); margin-bottom:28px; }
.login-hint  { text-align:center; font-size:12px; color:var(--txt3); margin-top:20px; }
.login-hint b{ color:var(--txt2); }

/* ─── DEUDA SELECTOR ─── */
.deuda-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border:1px solid var(--border);
  border-radius:var(--r); margin-bottom:6px;
  background:var(--bg4); transition:all .15s;
  cursor:pointer;
}
.deuda-item:hover { border-color:var(--border2); background:var(--bg5); }
.deuda-item.selected { border-color:var(--accent); background:rgba(30,64,175,.06); }
.deuda-item input[type="checkbox"] { accent-color:var(--accent); width:16px; height:16px; }

/* ════════════════════════════════════════
   RESPONSIVE MÓDULOS — Corpocapital
   ════════════════════════════════════════ */

/* ── Dashboard strip grupos ── */
@media(max-width:768px) {
  #dash-grupos-strip { overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; }
  #dash-grupos-strip > div { min-width:120px; flex:0 0 auto; }
  #dash-grupo-tabs { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; gap:5px; }
  #dash-grupo-tabs button { flex-shrink:0; font-size:11.5px; padding:5px 10px; }

  /* Dashboard layout: pagos recientes full width, sidebar debajo */
  .row-2-1 { grid-template-columns:1fr !important; }
}

/* ── Pagos ── */
@media(max-width:768px) {
  /* Filtros de pagos apilados */
  #payment-filters { flex-direction:column; align-items:stretch; }
  #payment-filters .form-control,
  #payment-filters select { width:100%; }
  #payment-filters .btn { width:100%; justify-content:center; }

  /* KPI grid de pagos 2 columnas */
  #payment-kpis { grid-template-columns:1fr 1fr !important; }
  #contract-kpis { grid-template-columns:1fr 1fr !important; }
  #balance-kpis  { grid-template-columns:1fr 1fr !important; }
  #cuentas-kpis  { grid-template-columns:1fr 1fr !important; }
  #daily-rep-summary { grid-template-columns:1fr 1fr !important; }
  #imp-kpis      { grid-template-columns:1fr 1fr !important; }
  #ret-rep-kpis  { grid-template-columns:1fr 1fr !important; }
}

@media(max-width:420px) {
  #payment-kpis,#contract-kpis,#balance-kpis,
  #cuentas-kpis,#daily-rep-summary,#imp-kpis,#ret-rep-kpis { grid-template-columns:1fr !important; }
}

/* ── Inquilinos cards ── */
@media(max-width:768px) {
  /* Grid de inquilinos: de 3 a 1 columna */
  #tenants-grid { grid-template-columns:1fr !important; }
  /* Card de inquilino interna */
  .tenant-card-inner { flex-direction:column; }
}

/* ── Formularios modales ── */
@media(max-width:480px) {
  .modal-body .row-2,
  .modal-body .input-group { flex-direction:column; gap:0; }
  .modal-body .row-2 > *,
  .modal-body .input-group > * { width:100%; }
  /* Stat pills en modal */
  .modal-body .stat-row { flex-wrap:wrap; }
}

/* ── Reportes ── */
@media(max-width:768px) {
  /* Tabla de reportes: ocultar columnas menos importantes */
  .rp-col-factura { display:none; }
  /* Gráfico de barras: altura reducida */
  #revenueChart { max-height:140px !important; }
}

/* ── Condominio ── */
@media(max-width:768px) {
  .condo-tab-bar { gap:3px; padding:3px; }
  .condo-tab { font-size:12px; padding:6px 8px; }
}

/* ── Pagos reportados admin ── */
@media(max-width:768px) {
  /* Ocultar columna "Reportado" en móvil */
  th:nth-child(6), td:nth-child(6) { display:none; }
}

/* ── Grupos grid ── */
@media(max-width:768px) {
  #grupos-grid { grid-template-columns:1fr !important; }
}

/* ── Summary boxes ── */
@media(max-width:480px) {
  .summary-box { flex-direction:column; gap:8px; }
  .summary-box .val { font-size:19px; }
  .metric-val { font-size:17px; }
}

/* ── Scroll horizontal en tablas de reportes ── */
.page .tbl-wrap {
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* ═══════════════════════════════════════
   RESPONSIVE UTILITIES
   ═══════════════════════════════════════ */

/* Stats flex row — wraps on mobile */
.stats-flex {
  display:flex; gap:16px; flex-wrap:wrap; align-items:center;
}
@media(max-width:768px) {
  .stats-flex { gap:10px; justify-content:center; }
  .stats-flex > div { min-width:60px; }
}
@media(max-width:420px) {
  .stats-flex { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
  .stats-flex > div { text-align:center; }
}

/* Grupo card header — wraps on mobile */
.grupo-header-flex {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
@media(max-width:520px) {
  .grupo-header-flex { gap:10px; }
  .grupo-header-flex > div:first-child { width:36px; height:36px; font-size:18px; }
}

/* Grupo actions flex */
.grupo-actions {
  display:flex; gap:5px; align-items:center; flex-shrink:0;
}
@media(max-width:520px) {
  .grupo-actions { flex-wrap:wrap; gap:3px; }
  .grupo-actions .btn-icon { width:28px; height:28px; }
}

/* Subgroup row — responsive */
.subgroup-row {
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  background:var(--bg2); border-radius:var(--r2); border:1px solid var(--border);
}
.subgroup-stats {
  display:flex; gap:12px; font-size:12px; flex-shrink:0;
}
@media(max-width:768px) {
  .subgroup-row { flex-direction:column; align-items:stretch; gap:8px; }
  .subgroup-stats { justify-content:space-between; flex-wrap:wrap; gap:8px; }
}
@media(max-width:420px) {
  .subgroup-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
  .subgroup-stats > div { text-align:center; font-size:11px; }
}

/* Dashboard grupo detail responsive */
.dash-detail-stats {
  display:flex; gap:20px; flex-wrap:wrap;
}
@media(max-width:520px) {
  .dash-detail-stats {
    display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
  }
  .dash-detail-stats > div { text-align:center; }
}

/* Pagination responsive */
.pagination-bar {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:10px; padding:12px 4px;
}
.pagination-sizes {
  display:flex; align-items:center; gap:6px; font-size:12px; color:var(--txt3);
}
.pagination-nav {
  display:flex; align-items:center; gap:4px;
}
@media(max-width:520px) {
  .pagination-bar { flex-direction:column; gap:8px; }
  .pagination-sizes { flex-wrap:wrap; justify-content:center; }
  .pagination-nav { justify-content:center; }
}

/* Search toolbar responsive */
.search-toolbar {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
@media(max-width:520px) {
  .search-toolbar { flex-direction:column; align-items:stretch; }
  .search-toolbar input,
  .search-toolbar select { width:100% !important; }
  .search-toolbar .btn { width:100%; justify-content:center; }
}

/* ─── CHART RESPONSIVE ─── */
canvas { max-width:100% !important; height:auto !important; }