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

:root {
  --rojo: #cc0000;
  --rojo-claro: #f5e0e0;
  --verde: #1a7a3c;
  --verde-claro: #e0f5e8;
  --gris: #f4f4f6;
  --borde: #ddd;
  --texto: #222;
  --radio: 8px;
}

body { font-family: system-ui, sans-serif; font-size: 14px; color: var(--texto); background: var(--gris); }

/* ── LOGIN ── */
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-box { background: #fff; padding: 2.5rem 2rem; border-radius: var(--radio); box-shadow: 0 4px 20px #0002; width: 320px; }
.login-box h1 { text-align: center; margin-bottom: 1.5rem; font-size: 1.4rem; }
.login-box input { width: 100%; padding: .6rem .8rem; border: 1px solid var(--borde); border-radius: var(--radio); margin-bottom: .8rem; font-size: .95rem; }
.login-box button { width: 100%; padding: .65rem; background: var(--rojo); color: #fff; border: none; border-radius: var(--radio); cursor: pointer; font-size: 1rem; font-weight: 600; }
.login-box button:hover { background: #a00; }
.error { color: var(--rojo); margin-bottom: .8rem; font-size: .875rem; }

/* ── LAYOUT ── */
header { background: var(--rojo); color: #fff; padding: .75rem 1.5rem; display: flex; align-items: center; justify-content: space-between; }
header h1 { font-size: 1.1rem; }
header nav a { color: #ffffffcc; text-decoration: none; margin-left: 1rem; font-size: .875rem; }
header nav a:hover { color: #fff; }
header nav a.active { color: #fff; font-weight: 700; border-bottom: 2px solid #fff; padding-bottom: 1px; }

main { max-width: 1200px; margin: 1.5rem auto; padding: 0 1rem; }

/* ── SUBTABS (Reportes, Gestión, etc.) ── */
.subtabs { display:flex; gap:0; border-bottom:2px solid var(--borde); margin-bottom:1.25rem; }
.subtab-btn, .subtab-link {
  background:none; border:none; padding:.5rem 1.2rem; font-size:.9rem;
  cursor:pointer; color:#888; border-bottom:2px solid transparent; margin-bottom:-2px;
  font-weight:500; transition:color .15s; text-decoration:none; display:inline-block; }
.subtab-btn:hover, .subtab-link:hover { color:#333; }
.subtab-btn.active, .subtab-link.active { color:var(--rojo); border-bottom-color:var(--rojo); font-weight:600; }

/* ── CARDS ── */
.card { background: #fff; border-radius: var(--radio); border: 1px solid var(--borde); padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; }
.card h2 { font-size: 1rem; margin-bottom: 1rem; color: var(--rojo); }

/* ── UPLOAD ── */
.drop-zone {
  border: 2px dashed var(--borde); border-radius: var(--radio);
  padding: 2rem; text-align: center; cursor: pointer; transition: border-color .2s;
}
.drop-zone.drag-over { border-color: var(--rojo); background: var(--rojo-claro); }
.drop-zone p { color: #888; margin-top: .5rem; font-size: .85rem; }
#file-input { display: none; }
#file-list { margin-top: .75rem; font-size: .85rem; color: #555; }

/* ── BOTONES ── */
.btn { padding: .45rem .9rem; border: none; border-radius: var(--radio); cursor: pointer; font-size: .875rem; font-weight: 600; }
.btn-primary { background: var(--rojo); color: #fff; }
.btn-primary:hover { background: #a00; }
.btn-success { background: var(--verde); color: #fff; }
.btn-success:hover { background: #145c2d; }
.btn-outline { background: #fff; color: var(--texto); border: 1px solid var(--borde); }
.btn-outline:hover { background: var(--gris); }
.btn-danger { background: #c00; color: #fff; }
.btn-sm { padding: .25rem .55rem; font-size: .78rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── BARRA HERRAMIENTAS ── */
.toolbar { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.toolbar input, .toolbar select { padding: .4rem .7rem; border: 1px solid var(--borde); border-radius: var(--radio); font-size: .85rem; }
.toolbar input[type=search] { flex: 1; min-width: 160px; }

/* ── TABLA ── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .82rem; }
th { background: var(--gris); padding: .5rem .6rem; text-align: left; border-bottom: 2px solid var(--borde); white-space: nowrap; }
td { padding: .45rem .6rem; border-bottom: 1px solid #eee; vertical-align: middle; }
tr:hover td { background: #fafafa; }

td input, td select { width: 100%; padding: .25rem .4rem; border: 1px solid transparent; border-radius: 4px; font-size: .82rem; background: transparent; }
td input:focus, td select:focus { border-color: var(--rojo); outline: none; background: #fff; }

.badge { display: inline-block; padding: .15rem .5rem; border-radius: 20px; font-size: .75rem; font-weight: 600; }
.badge-ingreso { background: var(--verde-claro); color: var(--verde); }
.badge-egreso  { background: var(--rojo-claro);  color: var(--rojo); }

.valor-ingreso { color: var(--verde); font-weight: 600; }
.valor-egreso  { color: var(--rojo);  font-weight: 600; }

/* ── RESUMEN ── */
.resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.resumen-item { background: #fff; border-radius: var(--radio); border: 1px solid var(--borde); padding: 1rem; }
.resumen-item .label { font-size: .75rem; color: #888; margin-bottom: .25rem; }
.resumen-item .value { font-size: 1.2rem; font-weight: 700; }
.resumen-item.ingreso .value { color: var(--verde); }
.resumen-item.egreso  .value { color: var(--rojo); }

/* ── TOAST ── */
#toast { position: fixed; bottom: 1.5rem; right: 1.5rem; background: #333; color: #fff; padding: .6rem 1rem; border-radius: var(--radio); font-size: .85rem; opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 999; }
#toast.show { opacity: 1; }

/* ── SPINNER ── */
.spinner { display: inline-block; width: 1rem; height: 1rem; border: 2px solid #fff; border-top-color: transparent; border-radius: 50%; animation: spin .6s linear infinite; vertical-align: middle; margin-right: .4rem; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── REPORTES ── */
.report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 1.25rem; }
.table-total td { font-weight: 700; background: var(--gris); border-top: 2px solid var(--borde); }

/* ── PAGINACIÓN ── */
.pagination { display: flex; gap: .4rem; align-items: center; margin-top: .75rem; flex-wrap: wrap; }
.pagination button { padding: .3rem .65rem; border: 1px solid var(--borde); background: #fff; border-radius: 4px; cursor: pointer; font-size: .8rem; }
.pagination button.active { background: var(--rojo); color: #fff; border-color: var(--rojo); }
.pagination button:disabled { opacity: .4; cursor: default; }

/* ── CHARTS ── */
canvas { max-width: 100%; }

/* ── HAMBURGER BUTTON ── */
.nav-toggle {
  display: none; flex-direction: column; justify-content: center;
  gap: 5px; cursor: pointer; padding: .4rem .2rem;
  background: none; border: none; margin-left: auto;
}
.nav-toggle span {
  display: block; width: 22px; height: 2px;
  background: #fff; border-radius: 2px;
  transition: transform .25s, opacity .25s;
}
header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── MOBILE / PWA ── */
@media (max-width: 640px) {
  /* Safe area */
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Header */
  header {
    position: sticky; top: 0; z-index: 200;
    flex-wrap: wrap;
    padding: .6rem 1rem;
    padding-top: max(.55rem, env(safe-area-inset-top));
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    gap: 0;
  }
  header h1 { flex: 1; font-size: 1rem; }

  .nav-toggle { display: flex; }

  header nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    border-top: 1px solid rgba(255,255,255,.25);
    margin-top: .5rem;
    padding-top: .25rem;
  }
  header.nav-open nav { display: flex; }

  header nav a, header nav span {
    display: block;
    margin-left: 0 !important;
    padding: .7rem .25rem;
    border-bottom: 1px solid rgba(255,255,255,.15);
    font-size: .95rem !important;
  }
  header nav a:last-child, header nav span:last-child { border-bottom: none; }

  /* Main */
  main { padding: 0 .75rem; margin: .75rem auto; }

  /* Cards */
  .card { padding: .9rem 1rem; }

  /* Subtabs — scrollable */
  .subtabs {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap; padding-bottom: 2px;
  }
  .subtab-btn, .subtab-link {
    white-space: nowrap; font-size: .82rem; padding: .5rem .85rem;
  }

  /* Report grid — 1 column */
  .report-grid { grid-template-columns: 1fr !important; }

  /* Resumen — 2 columns */
  .resumen { grid-template-columns: repeat(2, 1fr); }
  .resumen-item .value { font-size: 1rem; }

  /* KPI grid */
  .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Toolbar — stack */
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar input[type=search] { min-width: 0; }
  .toolbar select { width: 100%; }

  /* Tables */
  table { font-size: .82rem; }
  th, td { padding: .4rem .5rem; }

  /* Touch targets */
  .btn { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
  .btn-sm { min-height: 34px; }
  .login-box button { min-height: 48px; font-size: 1.05rem; }
  .login-box input { font-size: 1rem; padding: .75rem .8rem; }
  .login-box { width: calc(100% - 2rem); }

  /* Pagination */
  .pagination button { min-height: 36px; padding: .35rem .8rem; }

  /* Chart legend on mobile — top instead of right */
  .chart-grid { grid-template-columns: 1fr !important; }
}