/* ── Import root.css: ALL variables defined there ──────────── */
@import url('root.css');

/*
 * app.css · OH WOW! Invoices
 * Structural CSS: reset, layout, components.
 * Variables come exclusively from root.css: never defined here.
 * Fase 3 · 2026-05-28
 */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 15px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  display: flex;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* Titulares en Sora, cuerpo en Helvetica Neue: la pareja del sistema
   canonico de OH WOW!. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-hero);
  font-weight: 600;
}

a { color: var(--primary-link); text-decoration: none; }
/* El hover lleva el enlace al color de TEXTO del tema, nunca a la constante de
   marca. Poner aqui `--ow-ink` (que es el negro fijo #1A1A1A) dejaba cualquier
   enlace hovereado del tema oscuro entre 1,06:1 y 1,16:1, o sea casi negro
   sobre casi negro. Regla general: una constante `--ow-*` dentro de una
   propiedad que depende del tema siempre rompe uno de los dos temas. */
a:hover { color: var(--text); text-decoration: underline; }

/* ════════════════════════════════════════════════════════
   THEME TOGGLE BUTTON
   ════════════════════════════════════════════════════════ */
.theme-toggle {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--text-3);
  font-size: .85rem;
  transition: background .15s, color .15s, border-color .15s;
  flex-shrink: 0;
}
.theme-toggle:hover {
  background: var(--bg-muted);
  color: var(--text);
  border-color: var(--border-strong);
}
/* Icons swap */
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="light"] .theme-toggle .icon-sun  { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* ════════════════════════════════════════════════════════
   SIDEBAR
   ════════════════════════════════════════════════════════ */
.sidebar {
  width: var(--sidebar-w);
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  flex: 0 0 var(--sidebar-w);
  z-index: 100;
  overflow-y: auto;
  transition: width .22s ease, background-color .25s ease, border-color .25s ease;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .9rem 1rem 1.1rem;
  flex-shrink: 0;
  text-decoration: none;
}

.logo-favicon { width: 28px; height: 28px; flex-shrink: 0; object-fit: contain; }

/* Wordmark oficial en SVG. Se sirven las dos variantes (tinta y blanco) y
   el tema decide cuál se ve: un SVG con `fill="black"` no hereda
   `currentColor`, así que no se puede recolorear por CSS.

   OJO con el orden: `.logo-mark { display: block }` y `.logo-on-dark
   { display: none }` tienen la MISMA especificidad, así que gana la última
   declarada. Por eso las reglas de visibilidad van DESPUÉS de las de
   tamaño; al revés se pintan las dos variantes superpuestas. */
.logo-mark {
  height: 18px;
  width: auto;
  flex-shrink: 0;
}

/* Barra expandida: manda el wordmark, el isologo sobra.
   Barra colapsada: no cabe el wordmark, queda el isologo. */
.logo-mark    { display: block; }
.logo-favicon { display: none; }
body.sidebar-collapsed .logo-mark    { display: none; }
body.sidebar-collapsed .logo-favicon { display: block; }

/* Y por encima de todo lo anterior, el tema decide la variante. */
.logo-on-dark { display: none !important; }
[data-theme="dark"] .logo-on-light { display: none !important; }
[data-theme="dark"] .logo-mark.logo-on-dark { display: block !important; }
[data-theme="dark"] body.sidebar-collapsed .logo-mark.logo-on-dark { display: none !important; }
[data-theme="dark"] body.sidebar-collapsed .logo-favicon.logo-on-dark { display: block !important; }
body.sidebar-collapsed .logo-favicon.logo-on-dark { display: none !important; }

.logo-wordmark { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.logo-sub {
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-3);
  transition: color .25s;
}

/* Nav */
.nav-menu { list-style: none; padding: .75rem 0; flex: 1; }

.nav-section {
  font-family: var(--font-sans);
  font-size: .62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-4, var(--text-3));
  padding: 1.1rem 1.1rem .4rem;
}
.nav-divider { height: 1px; background: var(--border); margin: .6rem 1rem; border: 0; }

.nav-item a {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 .55rem;
  padding: .55rem .7rem;
  color: var(--text-2);
  font-size: .9rem;
  font-weight: 500;
  border-radius: var(--r-md);
  transition: color var(--transition), background var(--transition);
  text-decoration: none;
}
.nav-item a svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 1; color: var(--text-3); transition: color var(--transition); }
.nav-item a:hover {
  background: var(--sidebar-item-h);
  color: var(--text);
}
.nav-item a:hover svg { color: var(--text-2); }
.nav-item.active a {
  background: var(--grad-accent);
  color: var(--primary-txt);
  font-weight: 500;
  box-shadow: 0 2px 12px rgba(193,254,26,0.45);
}
.nav-item.active a svg { color: var(--primary-txt); }

/* Sidebar footer */
.sidebar-footer {
  display: flex;
  align-items: center;
  padding: .875rem 1rem;
  border-top: 1px solid var(--border);
  gap: .5rem;
  flex-shrink: 0;
}
.user-info { display: flex; align-items: center; gap: .6rem; flex: 1; min-width: 0; text-decoration: none; }
.user-avatar {
  width: 28px; height: 28px;
  background: var(--primary);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem; font-weight: 700; color: var(--primary-txt);
  flex-shrink: 0; letter-spacing: .5px;
}
.user-details { min-width: 0; }
.user-name  { display: block; font-size: var(--bw-text-sm); color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role  { display: block; font-size: .6rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 1px; }

.btn-logout {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3);
  border-radius: var(--r-sm);
  transition: background var(--transition), color var(--transition);
  flex-shrink: 0;
}
.btn-logout:hover { background: var(--bg-muted); color: var(--text); }
.btn-logout svg { width: 13px; height: 13px; }

/* ── Sidebar header + collapse toggle (Fase 22) ──────────────── */
.sidebar { transition: width .22s ease, background-color .25s ease, border-color .25s ease; }
.sidebar-head { display: flex; align-items: center; gap: .6rem; padding: .9rem 1rem 1.1rem; }
.sidebar-head .sidebar-logo { padding: 0; flex: 1 1 auto; min-width: 0; }
.sidebar-toggle {
  width: 30px; height: 30px; flex: 0 0 30px; margin-left: auto;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--text-3);
  border-radius: var(--r-sm); cursor: pointer;
  transition: background .15s, color .15s;
}
.sidebar-toggle:hover { background: var(--sidebar-item-h); color: var(--text); }
.sidebar-toggle svg { width: 18px; height: 18px; }

body.sidebar-collapsed .sidebar { width: 74px; flex: 0 0 74px; }
body.sidebar-collapsed .main-content { margin-left: 0; }
body.sidebar-collapsed .sidebar-head { flex-direction: column; gap: 10px; padding: .9rem 0 1.1rem; }
body.sidebar-collapsed .sidebar-toggle { margin-left: 0; }
body.sidebar-collapsed .logo-wordmark { display: none; }
body.sidebar-collapsed .nav-section { display: none; }
body.sidebar-collapsed .nav-item a { justify-content: center; gap: 0; margin: 0 .5rem; padding: .6rem 0; font-size: 0; }
body.sidebar-collapsed .nav-item a svg { width: 18px; height: 18px; }
body.sidebar-collapsed .sidebar-footer { flex-direction: column; gap: 8px; align-items: center; }
body.sidebar-collapsed .user-info { justify-content: center; flex: 0 0 auto; }
body.sidebar-collapsed .user-details { display: none; }

/* ════════════════════════════════════════════════════════
   MAIN CONTENT
   ════════════════════════════════════════════════════════ */
/* Columna de contenido: debe crecer para llenar el ancho tras el sidebar */
.shell {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.main-content {
  flex: 1;
  padding: 2rem 2.25rem 3rem;
  min-width: 0;
  transition: background-color .25s;
}

/* ── Page header ─────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.75rem;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.page-header h1 {
  font-family: var(--font-sans);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.header-actions { display: flex; align-items: center; gap: .5rem; }

/* El antetitulo (eyebrow) esta VETADO por la regla de marca: el titulo abre
   solo. La clase `.section-eyebrow` se retira entera, no solo sus usos, para
   que no vuelva por la puerta de atras copiando una vista existente. Donde el
   antetitulo era el unico contexto de la pantalla (numero de factura, vuelta
   al listado) se ha sustituido por jerarquia tipografica real: `.page-kicker`
   para el dato que acompaña al titulo, `.back-link` para la vuelta. */
.page-kicker {
  font-family: var(--font-sans);
  font-size: .82rem;
  font-weight: 500;
  color: var(--text-2);
  margin-top: .3rem;
}
.page-kicker .code,
.page-kicker code {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--text-2);
}

/* ════════════════════════════════════════════════════════
   CARD
   ════════════════════════════════════════════════════════ */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: background-color .25s, border-color .25s, box-shadow .2s ease;
}
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.6rem;
  border-bottom: 1px solid var(--border);
  gap: 1rem; flex-wrap: wrap;
}
.card-header h2, .card-header h3 {
  font-size: var(--bw-text-lg);
  font-weight: 500;
  color: var(--text);
  letter-spacing: -.2px;
}
.card-body { padding: 1.6rem; }
.card-body.p-0 { padding: 0; }
.card-footer {
  padding: .75rem 1.25rem;
  border-top: 1px solid var(--border);
  background: var(--bg-muted);
  transition: background-color .25s;
}

/* ════════════════════════════════════════════════════════
   KPI GRID
   ════════════════════════════════════════════════════════ */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.4rem;
  margin-bottom: 2.25rem;
}
.kpi-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--r-xl);
  padding: 1.7rem 1.6rem;
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: background-color .25s, box-shadow .18s ease, transform .18s ease;
}
.kpi-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

.kpi-label {
  font-family: var(--font-sans);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: .5rem;
}
.kpi-value {
  font-family: var(--font-sans);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.02em;
  line-height: 1.2;
}
.kpi-sub {
  font-size: .72rem;
  color: var(--text-3);
  margin-top: .35rem;
}
.kpi-card .kpi-meta {
  line-height: 1;
}

/* ════════════════════════════════════════════════════════
   TABLE
   ════════════════════════════════════════════════════════ */
.table { width: 100%; border-collapse: collapse; font-size: var(--bw-text-sm); }
.table thead tr { background: var(--bg-muted); border-bottom: 1px solid var(--border); }
/* 11px y gris secundario. Antes iban a .62rem (9,3px) con `--text-3`, que
   sobre el `--bg-muted` de la cabecera daba 4,34:1: por debajo de AA y por
   debajo del minimo de 12px del propio sistema tipografico, en 13 pantallas. */
.table thead th {
  padding: .7rem 1rem;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-2);
  white-space: nowrap;
}
.table tbody tr { border-bottom: 1px solid var(--border-light); transition: background .1s; }
.table tbody tr:last-child { border-bottom: none; }
.table tbody tr:hover { background: var(--bg-muted); }
.table tbody td { padding: .7rem 1rem; vertical-align: middle; color: var(--text); transition: background .1s; }
.table-lineas tbody td { padding: .4rem .75rem; }

/* `.data-table` (las nueve tablas de /fiscal) NO tenia NINGUNA regla en las
   tres hojas: heredaba el user-agent, sin padding y sin separacion, y la
   cabecera se leia corrida ("TrimestreIVA repercutidoIVA soportado"). Hereda
   ahora el mismo tratamiento que `.table`, que es lo que aparentaba tener. */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--bw-text-sm);
}
.data-table thead tr { background: var(--bg-muted); border-bottom: 1px solid var(--border); }
.data-table thead th {
  padding: .6rem 1rem;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-2);
  white-space: nowrap;
}
.data-table tbody tr { border-bottom: 1px solid var(--border-light); }
.data-table tbody tr:last-child { border-bottom: none; }
.data-table tbody td { padding: .55rem 1rem; vertical-align: middle; color: var(--text); }
.data-table tfoot td { padding: .55rem 1rem; font-weight: 600; color: var(--text); border-top: 1px solid var(--border); }
.data-table th.text-right, .data-table td.text-right { text-align: right; }

.actions-cell  { white-space: nowrap; }
.text-right    { text-align: right !important; }
.text-center   { text-align: center !important; }
.text-muted    { color: var(--text-3); }
.text-danger   { color: var(--danger); }
.text-nowrap   { white-space: nowrap; }
.table-responsive { overflow-x: auto; }

/* ════════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .9rem;
  font-family: var(--font-sans);
  font-size: .84rem;
  font-weight: 500;
  border-radius: var(--r-md);
  border: 1px solid var(--border-2);
  cursor: pointer;
  transition: all var(--transition);
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  background: var(--bg-surface);
  color: var(--text);
}
.btn:hover { background: var(--bg-muted); text-decoration: none; }
.btn svg { width: 15px; height: 15px; flex-shrink: 0; }

.btn-primary {
  background: var(--grad-accent);
  color: var(--primary-txt);
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(193,254,26,0.28);
}
.btn-primary:hover {
  background: var(--primary-h);
  border-color: var(--primary-h);
  color: var(--primary-txt);
  box-shadow: var(--shadow-violet);
  transform: translateY(-1px);
}

.btn-outline {
  background: var(--bg-surface);
  border-color: var(--border-2);
  color: var(--text);
}
.btn-outline:hover { background: var(--bg-muted); color: var(--text); border-color: var(--border-2); }

.btn-danger { background: transparent; color: var(--danger); border-color: rgba(229,72,77,.3); }
/* En el hover el texto cae sobre el fondo teñido del propio estado, donde el
   par `--danger`/`--danger-bg` se queda en 3,99:1. De ahi la variante fuerte. */
.btn-danger:hover { background: var(--danger-bg); border-color: var(--danger); color: var(--danger-strong); }

.btn-sm { padding: .35rem .7rem; font-size: var(--bw-text-xs); }
.btn-block { width: 100%; justify-content: center; }

/* ════════════════════════════════════════════════════════
   FORMS
   ════════════════════════════════════════════════════════ */
.form-group { display: flex; flex-direction: column; gap: .35rem; }
.form-group label {
  font-family: var(--font-sans);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2);
}
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.form-group-wide { grid-column: span 2; }
.form-actions { display: flex; gap: .625rem; justify-content: flex-end; margin-top: 1.25rem; flex-wrap: wrap; }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="tel"],
select,
textarea {
  padding: .55rem .875rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: var(--bw-text-base);
  color: var(--text);
  background: var(--bg-input);
  transition: border-color .15s, box-shadow .15s, background-color .25s, color .25s;
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-bg);
}
/* `opacity:.5` sobre el gris muted dejaba el placeholder en ~2,5:1. El color
   ya es el muted del sistema: no hace falta atenuarlo otra vez. */
input::placeholder, textarea::placeholder { color: var(--text-3); opacity: 1; }
textarea { resize: vertical; min-height: 60px; }
input[type="checkbox"], input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  padding-right: 2.25rem;
}

.checkbox-label { display: flex; align-items: center; gap: .5rem; font-size: var(--bw-text-base); cursor: pointer; color: var(--text-3); }
.checkbox-label input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--primary); }

.select-sm { padding: .3rem .7rem; font-size: var(--bw-text-xs); width: auto; }
.input-search { max-width: 280px; }

/* ════════════════════════════════════════════════════════
   ALERTS
   ════════════════════════════════════════════════════════ */
.alert {
  padding: .8rem 1rem;
  border-radius: var(--r-md);
  font-size: var(--bw-text-sm);
  margin-bottom: 1.25rem;
}
.alert-error   { background: var(--danger-bg);  color: var(--danger); }
.alert-success { background: var(--success-bg); color: var(--success); }

/* ════════════════════════════════════════════════════════
   BADGES
   ════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: .22rem .6rem;
  font-family: var(--font-sans);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.badge-draft   { background: var(--status-draft-bg); color: var(--status-draft); }
.badge-sent    { background: var(--primary-bg);      color: var(--primary-muted); }
.badge-paid    { background: var(--status-paid-bg);  color: var(--status-paid); }
.badge-voided  { background: var(--status-void-bg);  color: var(--status-void); }
.badge-admin   { background: var(--primary-bg);      color: var(--primary-muted); }
.badge-usuario { background: var(--status-draft-bg); color: var(--text-3); }
.badge-accepted  { background: var(--status-paid-bg);    color: var(--status-paid); }
.badge-rejected  { background: var(--status-void-bg);    color: var(--status-void); }
.badge-expired   { background: var(--status-overdue-bg); color: var(--status-overdue); }
.badge-invoiced  { background: var(--status-invoiced-bg);color: var(--status-invoiced); }
.badge-active    { background: var(--status-paid-bg);    color: var(--status-paid); }
.badge-paused    { background: var(--status-draft-bg);   color: var(--status-draft); }
.badge-partial   { background: var(--status-overdue-bg); color: var(--status-overdue); }

/* ── Grid utilities (Fase 22 parity) ─────────────────── */
.grid-2    { display: grid; grid-template-columns: 1.55fr 1fr; gap: 1.75rem; align-items: start; }
.grid-2-eq { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; align-items: start; }
.stack     { display: flex; flex-direction: column; gap: 1.15rem; }
@media (max-width: 900px) { .grid-2, .grid-2-eq { grid-template-columns: 1fr; } }

/* Un hijo de grid trae `min-width: auto` de fabrica: si dentro hay una tabla
   ancha, la COLUMNA crece hasta caber la tabla y arrastra a toda la pagina.
   Ese era el desbordamiento de /invoices/create a 375px (524px de documento
   contra 375 de viewport): el ancho no lo ponia ningun elemento suelto, lo
   ponia la columna estirandose por su contenido. Con `min-width: 0` la columna
   respeta su pista y es la tabla la que scrollea dentro de su tarjeta. */
.grid-2 > *, .grid-2-eq > *, .two-col > *, .factura-grid > *, .factura-col { min-width: 0; }

/* ── View-all link (tabla acciones) ──────────────────── */
.view-all {
  font-size: .82rem; font-weight: 500; color: var(--primary-muted);
  text-decoration: none; cursor: pointer;
}
.view-all:hover { text-decoration: underline; }

/* ── Client row (Top clients, rankings) ──────────────── */
.client-row { display: flex; align-items: center; gap: .75rem; padding: .7rem 0; border-top: 1px solid var(--border); }
.client-row:first-child { border-top: 0; }
.rank {
  width: 22px; height: 22px; border-radius: var(--r-pill);
  background: var(--status-draft-bg); color: var(--text-3);
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700; flex: 0 0 22px;
}
.client-row:nth-child(-n+3) .rank { background: var(--primary-bg); color: var(--primary-muted); }
.client-name { font-size: .84rem; font-weight: 500; color: var(--text-2); }
.client-sub  { font-size: .72rem; color: var(--text-3); }
.client-amt  { font-size: .84rem; font-weight: 700; color: var(--text); margin-left: auto; }

/* ── Strong cell ─────────────────────────────────────── */
.strong { font-weight: 700; color: var(--text); }
.code   { font-family: var(--font-mono); font-size: .78rem; color: var(--text-3); }

/* ── Page sub ────────────────────────────────────────── */
.page-sub { font-size: .84rem; color: var(--text-3); margin-top: .2rem; }

/* ── Topbar OH WOW! (Fase 22, copiado literal del prototipo) ── */
.ow-topbar {
  height: 72px; background: var(--bg-surface); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; padding: 0 32px; gap: 16px;
  position: sticky; top: 0; z-index: 50;
}
.ow-search {
  display: flex; align-items: center; gap: 10px;
  background: transparent; border: none; border-radius: var(--r-md);
  padding: 10px 0; width: 440px; max-width: 44vw;
  transition: border-color .15s, box-shadow .15s;
}
.ow-search:focus-within { }
.ow-search svg { width: 16px; height: 16px; stroke: var(--text-3); stroke-width: 2; fill: none; flex: 0 0 16px; }
.ow-search input {
  border: 0; background: transparent; outline: none; font: inherit; font-size: 13.5px;
  color: var(--text); width: 100%;
}
.ow-search input::placeholder { color: var(--text-3); }
.ow-search kbd {
  margin-left: auto; font-size: 11px; color: var(--text-3); background: var(--bg-muted);
  border-radius: 5px; padding: 3px 8px; font-family: inherit; white-space: nowrap; flex: 0 0 auto;
}
.ow-topbar-right { display: flex; align-items: center; gap: 14px; }
.ow-icon-btn {
  position: relative; width: 36px; height: 36px; background: transparent;
  border: 1px solid var(--border); border-radius: var(--r-md);
  cursor: pointer; color: var(--text-2); display: flex; align-items: center; justify-content: center;
  transition: border-color .12s, color .12s, background .12s; text-decoration: none;
}
.ow-icon-btn:hover { background: var(--sidebar-item-h); color: var(--text); }
.ow-icon-btn svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; }

/* ── Chart legend ────────────────────────────────────── */
.legend { display: flex; gap: 1rem; align-items: center; }
.legend span { display: flex; align-items: center; gap: .4rem; font-size: .75rem; color: var(--text-3); }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.b-inv { background: var(--primary); }
.b-col { background: var(--success); }
.b-exp { background: var(--danger); }

.badge-select {
  padding: .2rem .6rem;
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  border: 1px solid var(--border-strong);
  background: var(--bg-muted);
  color: var(--text-3);
  cursor: pointer;
  border-radius: var(--r-pill);
  appearance: none;
}

/* ════════════════════════════════════════════════════════
   FILTERS
   ════════════════════════════════════════════════════════ */
.filters-card { margin-bottom: 1rem; }
.filters-form { padding: .75rem 1rem; display: flex; gap: .625rem; flex-wrap: wrap; align-items: center; }
.filters-form input, .filters-form select { width: auto; }

/* ════════════════════════════════════════════════════════
   INVOICE GRID
   ════════════════════════════════════════════════════════ */
.factura-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 900px) { .factura-grid { grid-template-columns: 1fr; } }
.factura-col { display: flex; flex-direction: column; gap: 1.125rem; }

/* Totals box */
.totales-box {
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  margin: .875rem 0;
  transition: background-color .25s;
}
.total-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: .55rem .875rem;
  font-size: var(--bw-text-sm);
  border-bottom: 1px solid var(--border-light);
  color: var(--text-3);
}
.total-row:last-child { border-bottom: none; }
.total-final {
  background: var(--primary-h);   /* lima oscurecido: encima SIEMPRE tinta, nunca blanco */
  color: var(--primary-txt);
  font-weight: 500;
  font-size: var(--bw-text-base);
  padding: .75rem .875rem;
}

/* ════════════════════════════════════════════════════════
   AUTOCOMPLETE DROPDOWN
   ════════════════════════════════════════════════════════ */
.search-cliente, .search-servicio { position: relative; }
.search-cliente input, .search-servicio input { width: 220px; font-size: var(--bw-text-xs); padding: .375rem .7rem; }

.dropdown-results {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--dropdown-bg);
  border: 1px solid var(--border-strong);
  border-top: none;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
  z-index: 50; max-height: 220px; overflow-y: auto; display: none;
  transition: background-color .25s;
}
.dropdown-results.show { display: block; }
.dropdown-item {
  padding: .6rem .875rem; cursor: pointer;
  font-size: var(--bw-text-sm);
  border-bottom: 1px solid var(--border-light);
  transition: background var(--transition); color: var(--text-3);
}
.dropdown-item:last-child { border-bottom: none; }
.dropdown-item:hover { background: var(--primary-bg); color: var(--text); }
.dropdown-item strong { color: var(--text); font-weight: 500; }
.dropdown-item .item-sub { font-size: var(--bw-text-xs); color: var(--text-3); display: block; margin-top: 1px; }

.col-num    { width: 90px; }
.col-action { width: 36px; }

/* ════════════════════════════════════════════════════════
   MODAL
   ════════════════════════════════════════════════════════ */
/* Sistema de modal UNICO. Se muestra con .open (via JS classList) o con
   display inline (via JS style.display); ambos mecanismos conviven. El velo
   oscuro lo pone .modal; .modal-backdrop (opcional) solo aporta el desenfoque
   y, cuando lleva onclick, el cierre al pulsar fuera. */
.modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 1rem; background: var(--modal-backdrop); }
.modal.open { display: flex; }
.modal-backdrop { position: absolute; inset: 0; backdrop-filter: blur(4px); }
.modal-dialog {
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  width: 100%; max-width: 560px;
  z-index: 1;
  max-height: 90vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.4);
  transition: background-color .25s;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}
.modal-header h3 { font-size: var(--bw-text-lg); font-weight: 500; color: var(--text); letter-spacing: -.02em; }
.modal-close {
  background: none; border: 1px solid transparent; cursor: pointer;
  font-size: .875rem; color: var(--text-3);
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); transition: all var(--transition);
}
.modal-close:hover { color: var(--text); border-color: var(--border-strong); background: var(--bg-muted); }
.modal-body { padding: 1.25rem; overflow-y: auto; flex: 1; }
.modal-footer {
  display: flex; gap: .5rem; justify-content: flex-end;
  padding: .875rem 1.25rem;
  border-top: 1px solid var(--border);
  background: var(--bg-muted);
  transition: background-color .25s;
}

/* ════════════════════════════════════════════════════════
   AUTH
   ════════════════════════════════════════════════════════ */
.auth-body {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh;
  background: var(--bg);
  position: relative;
  overflow: hidden;
  transition: background-color .25s;
}
.auth-body::before {
  content: "";
  position: absolute;
  top: -180px; left: 50%;
  transform: translateX(-50%);
  width: 560px; height: 560px;
  border-radius: 46% 54% 58% 42% / 48% 44% 56% 52%;
  background: var(--grad-iridescent);
  filter: blur(70px);
  opacity: .42;
  pointer-events: none;
}
.auth-container { width: 100%; max-width: 420px; padding: 1rem; position: relative; z-index: 1; }
.auth-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 2.25rem 2rem;
  box-shadow: var(--shadow-lg);
  transition: background-color .25s, border-color .25s;
}
.auth-logo { text-align: center; margin-bottom: 2rem; }
.auth-logo-img { width: 52px; height: 48px; margin: 0 auto 1.25rem; display: block; }
.auth-logo h1 {
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--text);
  letter-spacing: -.03em;
  margin-bottom: .35rem;
}
.auth-logo p { color: var(--text-3); font-family: var(--font-mono); font-size: .65rem; text-transform: uppercase; letter-spacing: .15em; }
.auth-form { display: flex; flex-direction: column; gap: 1.125rem; }

/* ════════════════════════════════════════════════════════
   TAX SUMMARY
   ════════════════════════════════════════════════════════ */
.grid-trimestres {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.125rem;
}
.trimestre-card .card-header { flex-direction: column; align-items: flex-start; gap: .2rem; }
.fiscal-row {
  display: flex; justify-content: space-between;
  padding: .45rem 0; font-size: var(--bw-text-sm);
  border-bottom: 1px solid var(--border-light); color: var(--text-3);
}
.fiscal-row:last-child { border-bottom: none; }
.fiscal-row strong { color: var(--text); }
.fiscal-iva   strong { color: var(--warning); }
.fiscal-total strong { color: var(--success); }

/* ════════════════════════════════════════════════════════
   TABS
   ════════════════════════════════════════════════════════ */
.tabs {
  display: flex; gap: 0;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}
.tab-btn {
  padding: .6rem 1.25rem;
  font-family: var(--font-sans);
  font-size: var(--bw-text-sm); font-weight: 400;
  background: none; border: none; cursor: pointer;
  color: var(--text-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--transition), border-color var(--transition);
}
.tab-btn:hover  { color: var(--text); }
.tab-btn.active { color: var(--primary-link); border-bottom-color: var(--primary); }

/* ════════════════════════════════════════════════════════
   CHART CANVAS
   ════════════════════════════════════════════════════════ */
#grafico-meses { max-height: 200px; }

/* ════════════════════════════════════════════════════════
   SCROLLBAR
   ════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* ════════════════════════════════════════════════════════
   TAB COUNT BADGE (papelera, etc.)
   ════════════════════════════════════════════════════════ */
.tab-count {
  display: inline-block;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: .4rem;
  font-size: .7rem;
  line-height: 20px;
  text-align: center;
  background: var(--surface-alt, #e6e3de);
  color: var(--text-3);
  border-radius: 10px;
  vertical-align: 1px;
}
.tab-btn.active .tab-count {
  background: var(--primary);
  color: var(--primary-txt);
}

/* ════════════════════════════════════════════════════════
   BADGE OVERDUE (dashboard, historial)
   ════════════════════════════════════════════════════════ */
.badge-overdue {
  display: inline-flex;
  align-items: center;
  margin-left: .35rem;
  padding: .22rem .6rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  background: var(--danger-bg);
  color: var(--danger);
  border-radius: var(--r-pill);
}

/* ════════════════════════════════════════════════════════
   IS-LOCKED (facturas/editar: locked fields)
   ════════════════════════════════════════════════════════ */
.is-locked label {
  color: var(--text-3);
}
.is-locked input,
.is-locked textarea {
  background: var(--primary-bg) !important;
  opacity: .7;
  cursor: not-allowed;
}

/* ════════════════════════════════════════════════════════
   PAGINATION DISABLED (actividad)
   ════════════════════════════════════════════════════════ */
.pagination .btn.disabled,
.pagination .btn[aria-disabled="true"] {
  pointer-events: none;
  opacity: .4;
}

/* ═══════════════════════════════════════════════════════════════════
   Expenses module (Fase 5)
   =================================================================== */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--s-4);
    margin-bottom: var(--s-6);
}

.kpi-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--s-5);
    box-shadow: var(--shadow-sm);
}

.kpi-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-3);
}

.kpi-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text);
    margin: 6px 0 4px;
}

.kpi-sub {
    font-size: 12px;
    color: var(--text-3);
}

.cat-badge {
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid;
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    align-items: center;
    padding: var(--s-3) var(--s-4);
}

.filter-bar select,
.filter-bar input[type="text"] {
    width: auto;
    padding: 8px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-2);
    border-radius: var(--r-md);
    color: var(--text);
    font-size: 13px;
}

.filter-bar input[type="text"] {
    flex: 1;
    min-width: 200px;
}

.btn-ghost {
    background: transparent;
    border: none;
    color: var(--text-2);
    cursor: pointer;
    padding: 6px 8px;
    border-radius: var(--r-sm);
    text-decoration: none;
}

.btn-ghost:hover {
    background: var(--bg-hover);
    color: var(--text);
}

.btn-ghost.btn-sm {
    font-size: 14px;
}

.link-receipt {
    color: var(--primary-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
}

.link-receipt:hover {
    text-decoration: underline;
}

/* El sistema de modal unico vive arriba (buscar ".modal {"). Aqui se conserva
   solo lo propio del formulario de gasto, que ahora usa .modal-body/.modal-footer
   como el resto: el form es una columna flex para que el cuerpo scrollee. */
#gasto-form, #sugg-form { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--s-4);
    margin-bottom: var(--s-4);
}

.form-group { margin-bottom: var(--s-4); }
.form-group.form-grow { grid-column: span 2; }

.form-group label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-2);
    margin-bottom: 6px;
}

.required { color: #EF4444; }

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-2);
    border-radius: var(--r-md);
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
}

.form-group textarea { resize: vertical; min-height: 60px; }
/* Checkboxes/radios inside a form-group must NOT stretch to 100% width */
.form-group input[type="checkbox"],
.form-group input[type="radio"] {
    width: 16px;
    height: 16px;
    padding: 0;
    accent-color: var(--primary);
    flex-shrink: 0;
}

/* Detail page */
.two-col {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--s-5);
}

.details-list {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 12px 24px;
    margin: 0;
}

.details-list dt {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-3);
}

.details-list dd {
    font-size: 14px;
    color: var(--text);
    margin: 0;
}

.notes-block {
    margin-top: var(--s-5);
    padding-top: var(--s-5);
    border-top: 1px solid var(--border);
}

.notes-block h4 {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-3);
    margin: 0 0 8px;
}

.receipt-preview {
    max-width: 100%;
    max-height: 320px;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    display: block;
}

.receipt-pdf {
    text-align: center;
    padding: var(--s-8);
    background: var(--bg-muted);
    border-radius: var(--r-md);
}

.pdf-icon { font-size: 48px; display: block; margin-bottom: 8px; }

/* (.btn-danger unificado arriba en la seccion BUTTONS) */

.back-link {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--text-3);
    text-decoration: none;
}

.back-link:hover { color: var(--primary-muted); }

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Sin wrap, la fila de controles no cabe a 375px y empuja el ancho del
       documento entero. */
    flex-wrap: wrap;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-4);
}

.page-info { font-size: 12px; color: var(--text-3); }

.page-nav { display: flex; gap: 4px; flex-wrap: wrap; }

.page-link {
    display: inline-block;
    min-width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: var(--r-sm);
    color: var(--text-2);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
}

.page-link:hover { background: var(--bg-hover); }
.page-link.active {
    background: var(--primary);
    color: var(--primary-txt);
}

.page-sub {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--text-3);
}

@media (max-width: 900px) {
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .two-col { grid-template-columns: 1fr; }
}
/* Reports module (Fase 6) */
.badge-pdf-ok {
    display: inline-block;
    padding: 3px 10px;
    background: #DCFCE7;
    color: #15803D;
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.badge-pdf-pending {
    display: inline-block;
    padding: 3px 10px;
    background: #FEF3C7;
    color: #B45309;
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

/* ════════════════════════════════════════════════════════
   RESPONSIVE: off-canvas sidebar + fluid content (mobile)
   ════════════════════════════════════════════════════════ */
.ow-hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-surface);
    color: var(--text);
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.ow-hamburger:hover { border-color: var(--primary); color: var(--primary-muted); }
.ow-hamburger svg { display: block; stroke: currentColor; }
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 150;
}

@media (max-width: 768px) {
    /* Sidebar becomes an off-canvas panel toggled by the header hamburger */
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        width: min(84vw, 300px);
        flex-basis: min(84vw, 300px);
        height: 100vh;
        transform: translateX(-100%);
        box-shadow: 0 0 40px rgba(0, 0, 0, .28);
        transition: transform .25s ease;
        /* must sit ABOVE the backdrop (z-index 150) so nav links are tappable */
        z-index: 200;
    }
    body.sidebar-open .sidebar { transform: translateX(0); }
    body.sidebar-open .sidebar-backdrop { display: block; }
    /* ignore the desktop icon-collapse state on mobile */
    body.sidebar-collapsed .sidebar { width: min(84vw, 300px); }
    body.sidebar-collapsed .logo-wordmark,
    body.sidebar-collapsed .nav-section,
    body.sidebar-collapsed .user-details { display: revert; }
    body.sidebar-collapsed .nav-item a { justify-content: flex-start; gap: .7rem; font-size: revert; }
    .ow-hamburger { display: inline-flex; }
    .ow-topbar { height: 60px; padding: 0 14px; gap: 10px; }
    .ow-search { min-width: 0; }
    .ow-search kbd { display: none; }
    .main-content { padding: 1.1rem 1rem 2.5rem; }
    .page-header { margin-bottom: 1.25rem; padding-bottom: 1rem; }
    .page-header h1 { font-size: 1.35rem; }
    /* multi-column grids stack to a single column */
    .kpi-grid, .grid-2, .grid-2-eq, .two-col, .factura-grid {
        grid-template-columns: 1fr !important;
    }
    /* tab bars scroll horizontally instead of forcing the page wide */
    .tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .tabs .tab-btn { flex: 0 0 auto; white-space: nowrap; }
    /* wide tables scroll inside their own card, never the page body */
    .card-body.p-0 { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table-responsive { overflow-x: auto; }
}

/* Password visibility toggle (the eye) */
.pw-field { position: relative; display: block; }
.pw-field input { padding-right: 2.6rem; }
.pw-toggle {
  position: absolute; top: 0; right: 0;
  height: 100%; width: 2.6rem;
  display: flex; align-items: center; justify-content: center;
  padding: 0; margin: 0; border: 0; background: transparent;
  color: var(--text-3); cursor: pointer; transition: color .15s;
}
.pw-toggle:hover { color: var(--text); }
.pw-toggle:focus-visible { outline: 2px solid var(--primary-link); outline-offset: -3px; border-radius: 8px; }
.pw-toggle svg { width: 18px; height: 18px; display: block; }
.pw-toggle .icon-on, .pw-toggle .icon-off { display: flex; }
.pw-toggle .icon-off { display: none; }
.pw-toggle.is-on .icon-on { display: none; }
.pw-toggle.is-on .icon-off { display: flex; }