/* ═══════════════════════════════════════════════════════════════════════════
   Onomy OS · Sistema de diseño
   Limpio, neutro, modo claro/oscuro. Tipografía Inter. Estilo Figma/Vercel/Stripe.
   Color SOLO funcional (verde/rojo) para datos financieros y estados.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tokens · modo claro ── */
:root {
  color-scheme: light;

  --bg:            #f7f7f8;
  --surface:       #ffffff;
  --surface-2:     #f4f4f5;
  --row-alt:       #fafafb;
  --border:        #e7e7ea;
  --border-strong: #d4d4d8;

  --text:          #18181b;
  --text-2:        #52525b;
  --text-3:        #8a8a93;

  --primary:        #18181b;
  --primary-text:   #ffffff;
  --primary-hover:  #000000;

  --pos:     #15803d;  --pos-bg: #e8f5ec;
  --neg:     #b91c1c;  --neg-bg: #fdeaea;

  --ring:    rgba(24,24,27,0.13);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow:    0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-lg: 0 12px 34px rgba(0,0,0,0.13);

  --radius:    10px;
  --radius-sm: 7px;

  --sidebar-bg:     #ffffff;
  --sidebar-border: var(--border);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ── Tokens · modo oscuro ── */
[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #0a0a0b;
  --surface:       #161618;
  --surface-2:     #202023;
  --row-alt:       #1b1b1e;
  --border:        #29292e;
  --border-strong: #3a3a41;

  --text:          #fafafa;
  --text-2:        #a1a1aa;
  --text-3:        #71717a;

  --primary:        #fafafa;
  --primary-text:   #18181b;
  --primary-hover:  #e4e4e7;

  --pos:     #4ade80;  --pos-bg: rgba(34,197,94,0.16);
  --neg:     #f87171;  --neg-bg: rgba(248,113,113,0.16);

  --ring:    rgba(250,250,250,0.16);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow:    0 1px 3px rgba(0,0,0,0.55);
  --shadow-lg: 0 12px 34px rgba(0,0,0,0.6);

  --sidebar-bg:     #0d0d0e;
  --sidebar-border: #1f1f22;
}

/* ── Reset y base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.oculto { display: none !important; }
::selection { background: var(--text); color: var(--bg); }

/* Foco visible y accesible */
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* ── Layout ── */
.layout { display: flex; min-height: 100vh; }

/* ── Sidebar ── */
.sidebar {
  width: 224px; flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; height: 100vh;
  overflow-y: auto; z-index: 100;
}
.sidebar-marca {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 1.4rem 1.3rem 1.2rem;
  border-bottom: 1px solid var(--sidebar-border);
}
.marca-logo { width: 34px; height: 34px; flex-shrink: 0; }
.marca-logo-img { width: 100%; height: 100%; object-fit: contain; }
[data-theme="dark"] .marca-logo-img { filter: brightness(0) invert(1); }
.marca-nombre { color: var(--text); font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; }
.marca-sub { color: var(--text-3); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; }

.nav-lista { list-style: none; padding: 0.8rem 0.6rem; flex: 1; display: flex; flex-direction: column; gap: 0.1rem; }
.nav-item {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.55rem 0.75rem; border-radius: var(--radius-sm);
  color: var(--text-2); cursor: pointer;
  font-size: 0.875rem; font-weight: 500;
  transition: background 0.13s, color 0.13s;
}
.nav-item:hover { color: var(--text); background: var(--surface-2); }
.nav-item.activo { color: var(--text); background: var(--surface-2); font-weight: 600; }
.nav-punto {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-3); flex-shrink: 0; opacity: 0.7;
}
.nav-item.activo .nav-punto { background: var(--text); opacity: 1; }

.sidebar-footer {
  padding: 0.9rem 1.1rem 1.1rem;
  border-top: 1px solid var(--sidebar-border);
}

/* ── Contenido ── */
.contenido { margin-left: 224px; flex: 1; padding: 0 2.4rem 4rem; min-width: 0; }
.contenido-header {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.8rem 0 1.3rem; margin-bottom: 1.8rem;
  border-bottom: 1px solid var(--border);
}
.contenido-header h1 {
  font-size: 1.875rem; font-weight: 600; color: var(--text);   /* 30px · título de página (H1) */
  letter-spacing: -0.02em;
}
.header-acciones { display: flex; align-items: center; gap: 0.6rem; }

/* ── Botones de ícono (tema, menú) ── */
.header-izq { display: flex; align-items: center; gap: 0.8rem; min-width: 0; }
.btn-icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex-shrink: 0;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); color: var(--text-2);
  cursor: pointer; transition: all 0.15s;
}
.btn-icono:hover { color: var(--text); border-color: var(--text-3); }
.btn-icono svg { width: 17px; height: 17px; }
.btn-tema svg { width: 17px; height: 17px; }
.btn-tema .ico-sol { display: none; }
.btn-tema .ico-luna { display: inline-flex; }
[data-theme="dark"] .btn-tema .ico-sol { display: inline-flex; }
[data-theme="dark"] .btn-tema .ico-luna { display: none; }

/* ── Botones ── */
.btn-agregar, .login-btn {
  background: var(--primary); color: var(--primary-text); border: none;
  border-radius: var(--radius-sm); padding: 0.6rem 1.2rem;
  font-family: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
.btn-agregar:hover, .login-btn:hover { background: var(--primary-hover); }

.btn-exportar, .btn-cancelar-form, .btn-importar, .btn-ci-refrescar, .btn-cols {
  background: var(--surface); border: 1px solid var(--border-strong);
  color: var(--text-2); border-radius: var(--radius-sm);
  padding: 0.5rem 1rem; font-size: 0.85rem; font-family: inherit; font-weight: 500;
  cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.btn-exportar:hover, .btn-cancelar-form:hover,
.btn-importar:hover, .btn-ci-refrescar:hover, .btn-cols:hover { border-color: var(--text-3); color: var(--text); }

/* Menú lateral oculto: la tabla gana todo el ancho */
.layout.menu-oculto .sidebar { display: none; }
.layout.menu-oculto .contenido { margin-left: 0; }

/* Barra de acciones de tabla + paneles de Filtrar / Ordenar */
.tabla-acciones { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.fo-seccion-tit {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-3); font-weight: 600; margin: 1.1rem 0 0.55rem;
}
.fo-seccion-tit:first-child { margin-top: 0; }
.fo-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.fo-chip {
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--text-2);
  border-radius: 20px; padding: 0.32rem 0.75rem; font-family: inherit; font-size: 0.8rem;
  cursor: pointer; transition: all 0.13s;
}
.fo-chip:hover { border-color: var(--text-3); color: var(--text); }
.fo-chip.activa { background: var(--primary); border-color: var(--primary); color: var(--primary-text); }
.fo-manual-fila { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.5rem; }
.fo-manual-fila label { white-space: nowrap; }
.fo-manual-fila select { width: 62%; }
.fo-ord-fila { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.45rem 0; border-bottom: 1px solid var(--border); }
.fo-ord-fila:last-child { border-bottom: none; }
.fo-ord-col { font-size: 0.88rem; color: var(--text); }
.fo-ord-dirs { display: flex; gap: 0.35rem; }
.fo-dir {
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--text-2);
  border-radius: var(--radius-sm); padding: 0.28rem 0.6rem; font-family: inherit; font-size: 0.78rem;
  cursor: pointer; transition: all 0.13s; white-space: nowrap;
}
.fo-dir:hover { border-color: var(--text-3); color: var(--text); }
.fo-dir.activa { background: var(--primary); border-color: var(--primary); color: var(--primary-text); }

/* Popup de columnas */
.cols-lista { display: flex; flex-direction: column; gap: 0.1rem; margin-bottom: 1.3rem; }
.cols-item {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.4rem 0.5rem; border-radius: var(--radius-sm);
  font-size: 0.9rem; color: var(--text); text-transform: none; letter-spacing: 0;
  cursor: pointer;
}
.cols-item:hover { background: var(--surface-2); }
.cols-item input { width: auto; accent-color: var(--text); cursor: pointer; }

/* ── Resumen / Tarjetas ── */
.resumen { display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: 1.8rem; }
.resumen-grupo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; }
.resumen-grupo--2 { grid-template-columns: repeat(2, 1fr); }
.tarjeta--click { cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.tarjeta--click:hover { border-color: var(--text-3); }
.tarjeta--click.activa { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.tarjeta {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.15rem 1.3rem;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 0.4rem;
}
.tarjeta__etiqueta {
  font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3); font-weight: 500;
}
.tarjeta__monto {
  font-size: 1.75rem; color: var(--text); font-weight: 600;   /* 28px · métrica destacada */
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.tarjeta--ingreso .tarjeta__monto { color: var(--pos); }
.tarjeta--egreso  .tarjeta__monto { color: var(--neg); }
.tarjeta--balance .tarjeta__monto { color: var(--text); }
.tarjeta--balance .tarjeta__monto.negativo { color: var(--neg); }

/* ── Secciones ── */
.formulario-seccion, .tabla-seccion {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.5rem 1.6rem;
  box-shadow: var(--shadow-sm); margin-bottom: 1.4rem;
}
.formulario-seccion h2, .tabla-seccion h2 {
  font-size: 1.125rem; font-weight: 600; color: var(--text);   /* 18px · título de tarjeta (H3) */
  letter-spacing: -0.01em; margin-bottom: 1.1rem;
}
.formulario-seccion.en-edicion { border-color: var(--text-3); }

/* ── Formularios ── */
#form-cobros, #form-pagos, #form-ventas, #form-gastos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem; align-items: end;
}
.campo-grupo { display: flex; flex-direction: column; gap: 0.35rem; }
.campo-grupo--wide    { grid-column: 1 / -1; }
.campo-grupo--wide-md { grid-column: span 2; }

label {
  font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-2); font-weight: 500;
}
input, select {
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 0.55rem 0.75rem; font-size: 0.875rem; font-family: inherit;
  background: var(--surface); color: var(--text);
  outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
input::placeholder { color: var(--text-3); }
input:focus, select:focus { border-color: var(--text); box-shadow: 0 0 0 3px var(--ring); }
input[type="number"] { font-variant-numeric: tabular-nums; }

.form-botones { display: flex; gap: 0.7rem; align-items: center; grid-column: 1 / -1; }

/* ── Tabla ── */
.tabla-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.toggle-label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--text-3); cursor: pointer; user-select: none; }
.toggle-label input { accent-color: var(--text); }

/* Scroll horizontal: las filas nunca se parten en dos líneas; si no entran, se desliza. */
.tabla-wrapper { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
thead th {
  text-align: left; font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-3); font-weight: 600;
  padding: 0 0.75rem 0.75rem; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
tbody tr { border-bottom: 1px solid var(--border); transition: background 0.12s; }
tbody tr:last-child { border-bottom: none; }
tbody tr:nth-child(even) { background: var(--row-alt); }   /* filas intercaladas (zebra) */
tbody tr:hover { background: var(--surface-2); }           /* el hover gana al zebra */
tbody tr.fila-cancelada { opacity: 0.45; }
tbody td { padding: 0.7rem 0.75rem; color: var(--text); vertical-align: middle; white-space: nowrap; }

/* ── Badges ── */
.badge {
  display: inline-block; padding: 0.13rem 0.55rem; border-radius: 6px;
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.01em;
  background: var(--surface-2); color: var(--text-2);
}
.badge--ingreso, .badge--cobro, .badge--activo, .badge--fiscal { background: var(--pos-bg); color: var(--pos); }
.badge--egreso, .badge--pago { background: var(--neg-bg); color: var(--neg); }
.badge--cancelado, .badge--na, .badge--no-fiscal,
.badge--ars, .badge--usd, .badge--cafe, .badge--bonificado { background: var(--surface-2); color: var(--text-2); }
.badge-liq-pendiente {
  display: inline-block; padding: 0.1rem 0.45rem; border-radius: 6px;
  font-size: 0.66rem; background: var(--surface-2); color: var(--text-2); margin-left: 0.3rem;
}

.monto--ingreso { color: var(--pos); font-weight: 600; font-variant-numeric: tabular-nums; }
.monto--egreso  { color: var(--neg); font-weight: 600; font-variant-numeric: tabular-nums; }
.bal-positivo   { color: var(--pos); }
.bal-negativo   { color: var(--neg); }

/* ── Botones en tabla ── */
.acciones-celda { white-space: nowrap; text-align: right; }
.btn-tabla {
  background: none; border: none; cursor: pointer;
  padding: 0.22rem 0.4rem; border-radius: 6px; font-size: 0.9rem;
  color: var(--text-3); transition: all 0.13s;
}
.btn-tabla:hover { color: var(--text); background: var(--surface-2); }
.btn-cancelar-mov:hover { color: var(--neg); background: var(--neg-bg); }

.mensaje-vacio { text-align: center; color: var(--text-3); font-size: 0.86rem; padding: 2rem 0; }
.texto-tc-nota { font-size: 0.8rem; color: var(--text-3); margin: 0 0 1rem; }

.buscador {
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 0.45rem 0.85rem; font-size: 0.86rem; font-family: inherit;
  background: var(--surface); color: var(--text); outline: none; width: 240px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.buscador::placeholder { color: var(--text-3); }
.buscador:focus { border-color: var(--text); box-shadow: 0 0 0 3px var(--ring); }

/* ── Dropdowns flotantes (estado cobro/gasto) ── */
#cobro-dropdown, #gasto-estado-dropdown {
  position: absolute; background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); z-index: 1000; min-width: 130px; overflow: hidden;
}
#cobro-dropdown.oculto, #gasto-estado-dropdown.oculto { display: none; }
.cobro-opcion { padding: 0.55rem 1rem; font-size: 0.85rem; cursor: pointer; color: var(--text); transition: background 0.12s; }
.cobro-opcion:hover { background: var(--surface-2); }

/* ── Filtros de columna ── */
#filtros-ventas th, #filtros-gastos th { padding: 0 0.3rem 0.5rem; }
.filtro-col {
  width: 100%; border: 1px solid var(--border-strong); border-radius: 6px;
  padding: 0.2rem 0.45rem; font-size: 0.72rem; font-family: inherit;
  background: var(--surface); color: var(--text); outline: none; transition: border-color 0.15s;
}
.filtro-col:focus { border-color: var(--text); }

/* ── Celdas editables ── */
td[contenteditable="true"] { cursor: text; min-width: 60px; }
td[contenteditable="true"]:hover { background: var(--surface-2); }
td[contenteditable="true"]:focus { background: var(--surface); outline: 2px solid var(--text); border-radius: 4px; }

/* ── Login ── */
.login-pantalla {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  background:
    radial-gradient(circle at 50% 0%, var(--surface-2), transparent 70%),
    var(--bg);
}
.login-card {
  width: 100%; max-width: 380px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow-lg);
  padding: 2.6rem 2.2rem 2.4rem; text-align: center;
}
.login-logo { margin-bottom: 1rem; line-height: 0; }
.login-logo-img { width: 56px; height: 56px; object-fit: contain; }
[data-theme="dark"] .login-logo-img { filter: brightness(0) invert(1); }
.login-marca { color: var(--text); font-size: 1.4rem; font-weight: 600; letter-spacing: -0.02em; }
.login-marca-sub {
  color: var(--text-3); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; margin-bottom: 1.8rem;
}
.login-form { text-align: left; }
.login-form .campo-grupo { margin-bottom: 1rem; }
.login-form label { display: block; margin-bottom: 0.35rem; }
.login-form input { width: 100%; padding: 0.65rem 0.8rem; font-size: 0.92rem; }
.login-error { color: var(--neg); font-size: 0.82rem; margin: -0.2rem 0 0.9rem; }
.login-btn { width: 100%; padding: 0.75rem; margin-top: 0.4rem; font-size: 0.92rem; }

/* ── Sesión en sidebar ── */
.sesion-usuario {
  color: var(--text-3); font-size: 0.72rem; margin-bottom: 0.6rem; word-break: break-all;
}
.btn-logout {
  width: 100%; padding: 0.5rem; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); background: transparent; color: var(--text-2);
  font-family: inherit; font-size: 0.78rem; font-weight: 500; cursor: pointer; transition: all 0.15s;
}
.btn-logout:hover { background: var(--surface-2); color: var(--text); }

/* ── Pestañas (Control Interno, Cuenta Corriente, Configuración) ── */
.ci-tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.ci-tab {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: var(--surface); border: 1px solid var(--border-strong);
  color: var(--text-2); border-radius: var(--radius-sm);
  padding: 0.42rem 0.85rem; font-family: inherit; font-size: 0.85rem; font-weight: 500;
  cursor: pointer; transition: all 0.13s;
}
.ci-tab:hover { border-color: var(--text-3); color: var(--text); }
.ci-tab.activa { background: var(--primary); border-color: var(--primary); color: var(--primary-text); }
.ci-tab-num {
  background: var(--surface-2); color: var(--text-2);
  font-size: 0.7rem; font-weight: 600; min-width: 1.3rem; text-align: center;
  padding: 0.05rem 0.4rem; border-radius: 20px;
}
.ci-tab.activa .ci-tab-num { background: rgba(127,127,127,0.25); color: var(--primary-text); }
.ci-tab-cabecera { display: flex; justify-content: flex-end; gap: 0.5rem; margin-bottom: 0.8rem; }
.ci-check { width: 16px; height: 16px; vertical-align: middle; margin: 0 0.25rem; accent-color: var(--text); cursor: pointer; }
.ci-prob-barra { margin-bottom: 1rem; }
.ci-modulo { margin-bottom: 2rem; }
.ci-modulo-titulo {
  display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
  font-size: 1.125rem; font-weight: 600; color: var(--text);
  border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; margin-bottom: 0.9rem;
}
.ci-modulo-conteo { font-size: 0.78rem; color: var(--text-3); font-weight: 400; }
.ci-problema {
  display: inline-block; background: var(--neg-bg); color: var(--neg);
  font-size: 0.7rem; padding: 0.12rem 0.45rem; border-radius: 6px;
  margin: 0.1rem 0.15rem 0.1rem 0; white-space: nowrap;
}
.ci-problema--dup { background: var(--surface-2); color: var(--text-2); }
.ci-ok { color: var(--pos); font-size: 0.9rem; padding: 1rem 0; }

/* ── Modales (edición y confirmación) ── */
.ci-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center; z-index: 100;
  padding: 1.5rem; backdrop-filter: blur(2px);
}
.ci-modal-caja {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 1.6rem; width: min(520px, 100%);
  max-height: 88vh; overflow-y: auto; box-shadow: var(--shadow-lg);
}
.ci-modal-caja h2 { font-size: 1.125rem; font-weight: 600; color: var(--text); margin-bottom: 1.1rem; }
.ci-campo { margin-bottom: 0.85rem; }
.ci-campo label { display: block; margin-bottom: 0.3rem; }
.ci-campo input, .ci-campo select { width: 100%; }

.fila-inactiva td { opacity: 0.45; }
.fila-inactiva td.acciones-celda { opacity: 1; }

#confirm-modal { z-index: 200; }
.confirm-caja { width: min(440px, 100%); }
.confirm-msg { white-space: pre-line; color: var(--text-2); font-size: 0.92rem; line-height: 1.55; margin-bottom: 1.3rem; }

/* ── Responsivo ── */
@media (max-width: 820px) {
  .sidebar {
    width: 100%; height: auto; position: sticky; top: 0;
    border-right: none; border-bottom: 1px solid var(--sidebar-border);
  }
  .sidebar-marca { padding: 0.9rem 1.1rem; }
  .nav-lista { flex-direction: row; overflow-x: auto; padding: 0.5rem 0.6rem; }
  .nav-item { white-space: nowrap; }
  .nav-item.activo { background: var(--surface-2); }
  .sidebar-footer { display: none; }
  .layout { flex-direction: column; }
  .contenido { margin-left: 0; padding: 0 1.1rem 3rem; }
  .resumen-grupo { grid-template-columns: 1fr 1fr; }
  #form-cobros, #form-pagos, #form-ventas, #form-gastos { grid-template-columns: 1fr; }
  .contenido-header h1 { font-size: 1.3rem; }
}
@media (max-width: 480px) {
  .resumen-grupo { grid-template-columns: 1fr; }
  .buscador { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}