/* ==== Theme system (dark/light) ==== */
:root{
  --bg:#0b1020;
  --card:#111827;
  --fg:#e5e7eb;
  --muted:#9ca3af;
  --link:#93c5fd;
  --border:#1f2937;
  --chip:#1f2937;
  --topbar-grad-1:#0f172a;
  --topbar-grad-2:#1a2a44;
  --btn:#374151;
  --btn-hover:#4b5563;
  --pill:#111827;
  --good:#052e1e; --warn:#3a2c07; --bad:#3a0c0c;
}
html[data-theme="light"]{
  --bg:#f6f8fc;
  --card:#ffffff;
  --fg:#0f172a;
  --muted:#6b7280;
  --link:#1d4ed8;
  --border:#e5e7eb;
  --chip:#eef2ff;
  --topbar-grad-1:#e9eefc;
  --topbar-grad-2:#dbe7ff;
  --btn:#eef2ff;
  --btn-hover:#e0e7ff;
  --pill:#f1f5f9;
  --good:#dcfce7; --warn:#fef3c7; --bad:#fee2e2;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--fg); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial; }
a{ color:var(--link); text-decoration:none; }
a:hover{ text-decoration:underline; }
.container{ max-width:1100px; margin:0 auto; padding:16px; }
.topbar{ position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:10px;
  background: linear-gradient(90deg, var(--topbar-grad-1) 0%, var(--topbar-grad-2) 100%); border-bottom:1px solid var(--border); padding:8px 12px; border-radius:0 0 12px 12px; }
.brand img{ display:block; height:28px; width:auto; }
#menuBtn{ background:var(--pill); color:var(--fg); border:1px solid var(--border); border-radius:10px; padding:8px 10px; cursor:pointer; }
.iconbtn{ background:var(--pill); color:var(--fg); border:1px solid var(--border); border-radius:10px; padding:8px 10px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.iconbtn svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
nav.main{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
nav.main a{ background:var(--pill); color:var(--fg); padding:8px 12px; border-radius:10px; display:flex; align-items:center; gap:8px; }
nav.main a:hover{ background:var(--btn-hover); }
nav.main a svg, nav.main form button svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
nav.main .spacer{ flex:1 1 auto; }
nav.main form button.btn{ background:var(--btn); color:var(--fg); border:none; padding:8px 12px; border-radius:10px; display:flex; align-items:center; gap:8px; cursor:pointer; }
nav.main form button.btn:hover{ background:var(--btn-hover); }
h1{ font-size:1.5rem; margin:16px 0; } h2{ font-size:1.25rem; margin:0 0 12px 0; }
.card{ background:var(--card); border:1px solid var(--border); border-radius:14px; padding:14px; margin:12px 0; }
.row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } .row-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.small{ color:var(--muted); font-size:.9rem; }
.badge{ display:inline-block; padding:4px 8px; background:var(--chip); border-radius:999px; font-size:.8rem; }
.badge.green{ background:#02291a; color:#a7f3d0; } .badge.yellow{ background:#2a2206; color:#fde68a; } .badge.red{ background:#2a0b0b; color:#fecaca; }
.primary{ background:#2563eb; color:white; border:none; padding:10px 14px; border-radius:10px; cursor:pointer; } .primary:hover{ background:#1d4ed8; }
.btn{ background:var(--btn); color:var(--fg); border:none; padding:10px 12px; border-radius:10px; cursor:pointer; } .btn:hover{ background:var(--btn-hover); }
input,select,textarea{ width:100%; padding:10px; border-radius:10px; border:1px solid var(--border); background:var(--bg); color:var(--fg); }
table{ width:100%; border-collapse:collapse; } th,td{ padding:10px; border-bottom:1px solid var(--border); text-align:left; }
.grid-stats{ display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; }
.stat{ padding:14px; border-radius:12px; cursor:pointer; } .stat.green{ background:var(--good);} .stat.yellow{ background:var(--warn);} .stat.red{ background:var(--bad); }
.stat .big{ font-size:1.6rem; font-weight:700; }
.card-list .item{ padding:12px; border-bottom:1px solid var(--border); }
.card-list .item:last-child{ border-bottom:none; }
.backbar{ margin-bottom:10px; } .backbar a{ display:inline-block; padding:6px 10px; background:var(--pill); border:1px solid var(--border); border-radius:8px; }
/* Responsive tables */
.table-responsive{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; } .table-responsive table{ min-width: 720px; }
.table-responsive::-webkit-scrollbar{ height:10px; } .table-responsive::-webkit-scrollbar-thumb{ background:var(--btn); border-radius:8px; }
/* Login hero */
.login-hero{ display:flex; justify-content:center; margin:8vh 0 12px; } .login-hero img{ max-width:300px; width:60%; height:auto; }
/* Mobile */
@media (max-width: 720px){
  .brand img{ height:24px; } #menuBtn{ display:block; } nav.main{ display:none; flex-direction:column; gap:8px; } nav.main.open{ display:flex; }
  nav.main a, nav.main form button{ width:100%; text-align:left; } .row, .row-3{ grid-template-columns: 1fr; } .grid-stats{ grid-template-columns: 1fr; }
  .btn, .primary{ width:100%; } .table-responsive table{ font-size:.95rem; } .table-responsive th, .table-responsive td{ white-space:nowrap; }
}


/* Hide calendar icon for auto-managed date inputs */
input[name="quincena1"]::-webkit-calendar-picker-indicator,
input[name="quincena2"]::-webkit-calendar-picker-indicator,
input[name="fecha1"]::-webkit-calendar-picker-indicator,
input[name="fecha2"]::-webkit-calendar-picker-indicator { display:none; }


/* type badges */
.tag{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;line-height:1;vertical-align:middle}
.tag-prestamo{background:#2563eb;color:#fff}
.tag-fin{background:#10b981;color:#04210f}