/* ============================================================================
   mh-theme.css — Sistema de diseño "Precision Auto Ledger" (MH-163)
   ----------------------------------------------------------------------------
   Este archivo es la CAPA COMPARTIDA de diseño del dashboard: los tokens y las
   primitivas (cards, botones, inputs, tablas, badges, alerts, shell de la app).
   Vive aparte del HTML a propósito, para que los módulos que se sirven como
   páginas sueltas (/kpi, /planner, /playa) puedan linkearlo y verse igual que
   el SPA en vez de duplicar CSS. La especificación está en DESIGN.md (raíz).

   REGLAS AL EDITAR
   - Los NOMBRES de las variables no se cambian: hay ~550 usos de var(--…) en el
     JSX de public/index.html que dependen de ellos. Se retunean los VALORES.
   - Nada de hex sueltos en el JSX nuevo: si falta un color, se agrega un token acá.
   - Lo específico de un módulo (gantt, roadmap, aging de Cartera, etc.) NO va acá:
     va en el <style> de su propio HTML.
   ========================================================================== */

:root {
  /* ===== Marca ===== */
  /* "Midnight Navy" es el ancla de autoridad del sistema. --primary-deep es el
     casi-negro azulado de DESIGN.md, para el tile del logo y los textos de mayor
     jerarquía; --primary-light es el azul técnico de estados interactivos. */
  --primary: #001f3f;
  --primary-deep: #000613;
  --primary-light: #3f5f92;
  --secondary: #3f5f92;
  --secondary-soft: #a5c5fe;
  --on-secondary-soft: #305183;
  --primary-tint: #eef3fa;        /* fondo de estado activo/hover sobre blanco */
  --primary-tint-strong: #dfe8f4;

  /* ===== Superficies y texto ===== */
  --bg: #f8f9fa;
  --card: #fff;
  --surface-lowest: #fff;
  --surface-low: #f3f4f5;
  --surface: #edeeef;
  --surface-high: #e7e8e9;
  --border: #e1e3e4;
  --outline: #74777f;
  --outline-variant: #c4c6cf;
  --text: #191c1d;
  --muted: #43474e;               /* on-surface-variant: más contraste que el gris viejo */
  --muted-soft: #74777f;          /* texto terciario (hints, timestamps) */

  /* Alias heredados. Cobranzas y Gerencia 360° escriben `var(--navy,#0b1d3a)` y
     `var(--bg3,#e5e7eb)` en estilos inline, pero --navy y --bg3 NUNCA se definieron:
     el fallback ganaba siempre y de ahí venía el segundo azul (#0b1d3a contra el
     #0a2647 del resto). Definirlos acá alinea esas ~15 ocurrencias con la paleta sin
     tocar el JSX. No usar en código nuevo: van --primary y --surface-high. */
  --navy: #001f3f;
  --bg3: #e7e8e9;

  /* ===== Semánticos ===== */
  --green: #16a34a; --yellow: #d97706; --orange: #ea580c; --red: #ba1a1a; --purple: #7c3aed;
  --link: #2f486a;

  /* ===== Espaciado (escala 4px) ===== */
  --gap-xs: 4px; --gap-sm: 8px; --gap: 12px; --gap-md: 16px; --gap-lg: 24px; --gap-xl: 32px;
  --section-gap: 24px;            /* separación entre módulos/cards (DESIGN.md) */
  --pad-card: 20px;               /* padding interno de una card de métrica */
  --pad-cell: 0.75rem;            /* data-density-padding: denso a propósito en tablas */
  /* MH-166: sin tope de ancho. DESIGN.md especifica 1360px, pero con el sidebar
     comiéndose 244px eso dejaba ~160px de aire muerto a cada lado en un monitor de
     1920 y la información se leía "despegada" de los costados (pedido de Dario). El
     contenido ahora ocupa la columna completa y el único margen es el padding de
     .container, que además queda alineado con el del topbar. */
  --container-max: 100%;

  /* ===== Radios ===== */
  /* MH-168: vuelven los radios de antes del rediseño (5/8/10/12). Los de DESIGN.md
     (2/4/6/8) daban esquinas más duras y es parte de lo que hacía que las tarjetas se
     vieran distintas. --radius-xs y --radius-full son nuevos y no existían antes, así
     que se quedan: los usa el shell (barra de acento del sidebar, avatar). */
  --radius-xs: 2px; --radius-sm: 5px; --radius: 8px; --radius-lg: 10px; --radius-xl: 12px;
  --radius-full: 9999px;

  /* ===== Elevación ===== */
  /* MH-168: vuelven las sombras de antes. El rediseño las había cambiado por "borde de
     1px y nada de sombra", y eso es justamente lo que le cambiaba el carácter a las
     tarjetas. Con estas, .kpi vuelve a leerse como una tarjeta apoyada sobre el fondo. */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);

  /* ===== Tipografía ===== */
  /* MH-168: vuelve la tipografía de antes del rediseño. Las tres familias de DESIGN.md
     (Hanken Grotesk para cifras, Inter para cuerpo, IBM Plex Sans en versalitas para
     etiquetas) se reemplazan por la fuente del sistema, que es lo que había.
     Los tres tokens se conservan apuntando al MISMO stack a propósito: hay decenas de
     reglas que los usan y así el cambio es un solo lugar. Si algún día se quiere volver
     a diferenciar titulares de cuerpo, se cambia acá y nada más.
     Ojo: al no haber fuentes externas, los <link> de Google Fonts se sacaron del HTML. */
  --font-display: 'Segoe UI',system-ui,-apple-system,sans-serif;
  --font-body: 'Segoe UI',system-ui,-apple-system,sans-serif;
  --font-label: 'Segoe UI',system-ui,-apple-system,sans-serif;

  --fs-xs: 0.7rem;                /* labels muy chicos, hints */
  --fs-sm: 0.78rem;               /* tablas dense, footers */
  --fs-base: 0.85rem;             /* body de cards/tablas */
  --fs-md: 0.9rem;                /* botones, headers de filtro */
  --fs-lg: 1rem;                  /* títulos de sección */
  --fs-xl: 1.15rem;               /* H principales */
  --fs-metric: 1.7rem;            /* cifra de una tarjeta KPI (era 2rem en el rediseño) */
  --fs-metric-sm: 1.3rem;         /* cifra en filas de muchas tarjetas */

  /* ===== Shell ===== */
  --nav-w: 244px;
  --nav-rail: 72px;
  --topbar-h: 62px;

  /* ===== Alerts (consistencia entre ErrorBanner, EmptyState, notas inline) ===== */
  --alert-info-bg: #eff6ff; --alert-info-border: #bfdbfe; --alert-info-text: #1e40af;
  --alert-warning-bg: #fffbeb; --alert-warning-border: #fde68a; --alert-warning-text: #92400e;
  --alert-error-bg: #ffdad6; --alert-error-border: #fecaca; --alert-error-text: #93000a;
  --alert-success-bg: #f0fdf4; --alert-success-border: #bbf7d0; --alert-success-text: #166534;

  /* ===== Aging y categorías de cobranza (MH-049 ui-005) ===== */
  --aging-al-dia: #16a34a;
  --aging-30: #d97706;
  --aging-60: #ea580c;
  --aging-90: #dc2626;
  --aging-180: #b91c1c;
  --aging-180plus: #7f1d1d;
  --cat-cuotas: #3f5f92;
  --cat-intereses: #ea580c;
  --cat-entrega: #10b981;
  --cat-contado: #7c3aed;
  --cat-vpp: #ec4899;
  --cat-recupero: #14b8a6;
  --cat-otros: #74777f;
}

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

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* MH-168: se quitó el `font-variant-numeric: tabular-nums` que había puesto el rediseño.
   Cambia el ancho de los dígitos, así que es parte de "el tipo de letra" y el pedido fue
   volver al anterior. Alineaba mejor las columnas de plata; si en algún momento se quiere
   de vuelta sin tocar nada más, es este bloque solo. */

/* ============================================================================
   SHELL DE LA APP — topbar full-width + sidebar + contenido
   ========================================================================== */

.app { min-height: 100vh; display: flex; flex-direction: column; }

/* --- Topbar --- */
.topbar {
  position: sticky; top: 0; z-index: 900;
  flex: 0 0 auto; height: var(--topbar-h);
  display: flex; align-items: center; gap: var(--gap-md);
  padding: 0 var(--gap-lg);
  /* Translúcido con blur: el topbar es sticky y el contenido pasa por debajo al
     scrollear. El fallback sólido va primero para navegadores sin backdrop-filter. */
  background: var(--card);
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--border);
}
.topbar-brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand-tile {
  width: 36px; height: 36px; flex: 0 0 36px;
  border-radius: var(--radius);
  background: var(--primary-deep); color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 0.95rem; letter-spacing: 0.02em;
}
.brand-name {
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
  color: var(--text); white-space: nowrap; letter-spacing: -0.01em;
}
/* Nombre de la vista activa, separado de la marca por una línea vertical: sirve de
   orientación cuando el sidebar está en rail de iconos o cerrado en mobile. */
.topbar-view {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-display); font-size: 1rem; font-weight: 600;
  color: var(--muted); white-space: nowrap; min-width: 0;
}
.topbar-view::before { content: ''; width: 1px; height: 22px; background: var(--border); flex: 0 0 1px; }
.topbar-spacer { flex: 1 1 auto; }
.topbar-meta {
  text-align: right; line-height: 1.45;
  font-size: var(--fs-xs); color: var(--muted); white-space: nowrap;
}
.topbar-meta strong { color: var(--text); font-weight: 600; }

/* Hamburguesa: solo existe cuando el sidebar es drawer (<=1024px). */
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: 0 0 38px;
  background: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); cursor: pointer;
}
.nav-toggle:hover { background: var(--surface-low); }

/* --- Cuerpo: sidebar + contenido --- */
/* minmax(0,1fr) y no 1fr: un track `1fr` no baja de su min-content, y con las tablas
   anchas (.table-fit usa width:max-content) el contenido empujaba la columna más allá
   del viewport y toda la página scrolleaba al costado — se cortaban los botones de la
   derecha y las tarjetas del final. Con minmax(0,…) el track sí se achica y el scroll
   horizontal queda donde corresponde: adentro del .table-wrap. */
.app-body { flex: 1 1 auto; display: grid; grid-template-columns: var(--nav-w) minmax(0,1fr); align-items: start; }
.app.nav-collapsed .app-body { grid-template-columns: var(--nav-rail) minmax(0,1fr); }

.sidenav {
  position: sticky; top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  display: flex; flex-direction: column;
  background: var(--card); border-right: 1px solid var(--border);
  z-index: 880;
}
.sidenav-scroll { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: var(--gap) 10px; }
.nav-group-t {
  font-family: var(--font-label); font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-soft);
  padding: 14px 12px 6px; white-space: nowrap;
}
.nav-group-t:first-child { padding-top: 2px; }

.nav-item {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 10px 12px; margin-bottom: 2px;
  background: none; border: none; border-radius: var(--radius);
  font-family: var(--font-body); font-size: var(--fs-md); font-weight: 500;
  color: var(--muted); text-align: left; white-space: nowrap; cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.nav-item:hover { background: var(--surface-low); color: var(--primary); }
.nav-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.nav-item.active { background: var(--primary-tint); color: var(--primary); font-weight: 700; }
/* La barra de acento se apoya en el borde del sidebar (el scroll tiene 10px de
   padding, de ahí el left negativo) — es el marcador de "estás acá". */
.nav-item.active::before {
  content: ''; position: absolute; left: -10px; top: 5px; bottom: 5px;
  width: 3px; border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  background: var(--primary);
}
.nav-ico { flex: 0 0 20px; width: 20px; height: 20px; display: grid; place-items: center; }
.nav-ico svg { width: 19px; height: 19px; display: block; }
.nav-label { overflow: hidden; text-overflow: ellipsis; }
/* Los destinos que salen del SPA (Planner, KPIs, Playa) llevan una marca discreta. */
.nav-item .nav-ext { margin-left: auto; font-size: 0.62rem; color: var(--muted-soft); opacity: 0.75; }

.sidenav-foot { flex: 0 0 auto; border-top: 1px solid var(--border); padding: 10px; }
.sidenav-user { display: flex; align-items: center; gap: 10px; padding: 6px 4px 10px; min-width: 0; }
.u-avatar {
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: var(--radius-full);
  background: var(--primary-tint-strong); color: var(--primary);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 0.8rem;
}
.u-meta { min-width: 0; line-height: 1.3; }
.u-name { font-size: var(--fs-base); font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-role { font-size: var(--fs-xs); color: var(--muted-soft); white-space: nowrap; }

.nav-mini {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card); color: var(--muted);
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
  white-space: nowrap; transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.nav-mini + .nav-mini { margin-top: 6px; }
.nav-mini:hover { background: var(--surface-low); color: var(--primary); border-color: var(--outline-variant); }
.nav-mini svg { width: 16px; height: 16px; flex: 0 0 16px; }

/* --- Estado colapsado (rail de iconos) --- */
.app.nav-collapsed .nav-label,
.app.nav-collapsed .nav-group-t,
.app.nav-collapsed .u-meta,
.app.nav-collapsed .nav-ext,
.app.nav-collapsed .nav-mini-label { display: none; }
.app.nav-collapsed .nav-item { justify-content: center; padding: 11px 0; gap: 0; }
.app.nav-collapsed .nav-item.active::before { left: -10px; }
.app.nav-collapsed .nav-group-t + .nav-item { margin-top: 8px; }
.app.nav-collapsed .sidenav-user { justify-content: center; padding: 6px 0 10px; }
.app.nav-collapsed .nav-mini { padding: 8px 0; }

.nav-backdrop { display: none; }

/* --- Contenido --- */
/* min-width:0 es obligatorio: .container es un grid item y los grid items tienen
   min-width:auto, o sea que no bajan del min-content de lo que contienen. Las tablas
   anchas (.table-fit, width:max-content) daban un min-content de ~1200px y empujaban
   la columna fuera del viewport: la página entera scrolleaba al costado y se cortaban
   los botones de la derecha. Con min-width:0 la columna manda y el scroll horizontal
   queda adentro del .table-wrap, que es para lo que tiene overflow:auto. */
/* width:100% + min-width:0 son las dos mitades del mismo arreglo, y ninguna sobra:
   `margin:0 auto` en un grid item CANCELA el stretch (los márgenes auto absorben el
   espacio libre), así que sin width:100% el contenedor se dimensionaba por su
   contenido — la tabla más ancha lo estiraba a ~1270px dentro de una columna de
   1163px y la página entera scrolleaba al costado. El margin auto sigue haciendo
   falta para centrar cuando la columna es más ancha que --container-max. */
.container { width: 100%; min-width: 0; max-width: var(--container-max); margin: 0 auto; padding: var(--gap-lg) var(--gap-lg) var(--gap-xl); }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gap-md); flex-wrap: wrap; margin-bottom: var(--gap-lg); }
.page-title { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.page-sub { font-size: var(--fs-base); color: var(--muted); margin-top: 2px; }

.footer { text-align: center; padding: var(--gap-md); color: var(--muted-soft); font-size: var(--fs-xs); }

/* ============================================================================
   MENÚ DESPLEGABLE (⚙️ Configuración del topbar)
   ========================================================================== */
.cfg-wrap { position: relative; }
.cfg-btn {
  display: flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 13px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--muted); font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.cfg-btn:hover { background: var(--surface-low); color: var(--primary); }
.cfg-btn.active { background: var(--primary-tint); border-color: var(--secondary-soft); color: var(--primary); }
.cfg-btn svg { width: 17px; height: 17px; flex: 0 0 17px; }
.cfg-btn .cfg-caret { font-size: 0.6rem; opacity: 0.7; }
.cfg-menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px;
  background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 7px; z-index: 1200;
}
.cfg-menu-title {
  font-family: var(--font-label); font-size: 0.66rem; text-transform: uppercase;
  letter-spacing: 0.07em; font-weight: 700; color: var(--muted-soft); padding: 6px 10px 5px;
}
.cfg-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: none; border-radius: var(--radius-sm);
  color: var(--text); font-family: var(--font-body); font-size: var(--fs-md); font-weight: 500;
  padding: 9px 10px; cursor: pointer;
}
.cfg-item:hover, .cfg-item.active { background: var(--primary-tint); color: var(--primary); font-weight: 600; }
.cfg-item svg { width: 17px; height: 17px; flex: 0 0 17px; }

/* ============================================================================
   TABS — sub-navegación interna (Gerencia 360°, changelog, etc.)
   La nav principal es el sidebar; estas clases quedan porque varias vistas
   tienen sub-vistas propias y las siguen usando.
   ========================================================================== */
.tabs {
  display: flex; gap: 2px; overflow-x: auto;
  background: none; border-bottom: 1px solid var(--border);
  margin-bottom: var(--section-gap); box-shadow: none;
}
.tab {
  padding: 11px 18px; cursor: pointer; white-space: nowrap;
  font-family: var(--font-body); font-size: var(--fs-md); font-weight: 600; color: var(--muted);
  border-bottom: 3px solid transparent; margin-bottom: -1px;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.tab:hover { color: var(--primary); background: var(--surface-low); }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); background: none; }

/* ============================================================================
   TARJETAS DE MÉTRICA
   Una sola receta para .kpi, .kcard, .private-kpi y .cc: blanco, borde fino,
   sin sombra en reposo. La cifra en Hanken Grotesk, la etiqueta en versalitas.
   ========================================================================== */
.kpi-row { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--gap-md); margin-bottom: var(--section-gap); }

/* MH-168: vuelve la tarjeta de antes del rediseño. Diferencias con la versión premium:
   sombra en vez de borde, padding más chico, borde de 2px transparente que se pinta al
   activarse (en vez de la banda de acento superior), y hover con scale en vez de
   translateY. La cifra vuelve a Segoe UI 800 en --primary, no Hanken Grotesk 700 en el
   casi-negro. Es lo que pidió la jefa de Dario: le gustó el sidebar y cómo quedaron los
   módulos, pero prefería estas tarjetas y esta tipografía. */
.kpi { background: var(--card); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-sm); transition: transform 0.1s, box-shadow 0.15s; }
.kcard { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 13px 15px; box-shadow: var(--shadow-sm); }
.private-kpi { background: var(--card); border-radius: var(--radius-lg); padding: 14px; box-shadow: var(--shadow-sm); }
.cc { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 15px 16px; }

.kpi.clickable { cursor: pointer; border: 2px solid transparent; }
.kpi.clickable:hover { transform: scale(1.02); box-shadow: var(--shadow-md); }
.kpi.clickable.active { border-color: var(--primary); background: var(--primary-tint); }

/* Etiqueta / cifra / sub-línea — el trío que se repite en todo el dashboard. */
.kpi .label {
  font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase;
  font-weight: 600; letter-spacing: 0.4px; margin-bottom: 4px;
}
.kcard-l, .private-kpi .label, .cc-t {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--muted); font-weight: 700; margin-bottom: 4px;
}
.g-section-lbl { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); font-weight: 700; margin-bottom: 10px; }
.cc-t { margin-bottom: 11px; }
.kpi .val { font-size: var(--fs-metric); font-weight: 800; color: var(--primary); }
.kcard-v { font-size: 1.4rem; font-weight: 800; color: var(--primary); margin-bottom: 2px; }
.private-kpi .val { font-size: 1.5rem; font-weight: 800; color: var(--primary); margin-top: 2px; }
.kpi .sub { font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }
.kcard-s { font-size: var(--fs-sm); color: var(--muted); }

/* Grids gerenciales */
.g-kpi-grid { display: grid; gap: var(--gap); margin-bottom: var(--section-gap); }
.g-chart-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--gap-md); margin-bottom: var(--section-gap); }

/* ============================================================================
   FILTROS E INPUTS
   ========================================================================== */
/* MH-168: vuelve la barra de filtros de MH-138 — borde propio, franja de acento a la
   izquierda que la ancla y sombra media. El rediseño la había dejado como una card
   blanca más; MH-138 existió justamente porque así se perdía contra la página. */
.filters {
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: end; margin-bottom: 16px;
  background: var(--card); padding: 14px 16px;
  border: 1px solid #d5dce6; border-left: 4px solid var(--primary);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.fg { display: flex; flex-direction: column; gap: 4px; }
.fg label {
  font-size: var(--fs-xs); font-weight: 700; color: var(--primary);
  text-transform: uppercase; letter-spacing: 0.6px;
}
/* Los checkbox/radio que viven dentro de un .fg (ej. "solo con mora") no llevan
   el sizing de campo: quedarían de 38px de alto y 150px de ancho. */
/* MH-168: inputs con padding en vez de alto fijo, como antes. Se conserva la exclusión de
   checkbox/radio (los hay dentro de un .fg, ej. "solo con mora"): sin ella tomaban el
   min-width de un campo y quedaban deformes. */
.fg select,
.fg input:not([type="checkbox"]):not([type="radio"]) {
  padding: 7px 10px;
  border: 1.5px solid #c3ccd9; border-radius: var(--radius-sm);
  font-size: var(--fs-base); color: var(--text);
  background: var(--card); min-width: 140px;
}
.fg select:hover, .fg input:not([type="checkbox"]):not([type="radio"]):hover { border-color: var(--primary-light); }
.fg select:focus-visible,
.fg input:not([type="checkbox"]):not([type="radio"]):focus-visible {
  outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary);
}
.fg input[type="checkbox"], .fg input[type="radio"] { accent-color: var(--primary); cursor: pointer; }

/* ============================================================================
   BOTONES — altura compacta (DESIGN.md: 36-40px para eficiencia administrativa)
   ========================================================================== */
/* MH-168: botones con padding, como antes, en vez de alto fijo de 38/31/25px. Se mantiene
   inline-flex para que los que llevan icono queden centrados; con `padding` el alto lo
   define el contenido igual que en la versión previa al rediseño. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 14px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font-size: var(--fs-base); font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.05s;
}
.btn-sm { padding: 4px 10px; font-size: var(--fs-sm); }
.btn-xs { padding: 2px 8px; font-size: var(--fs-xs); gap: 4px; }
.btn:disabled { opacity: 0.55; cursor: wait; }
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn:active:not(:disabled) { transform: scale(0.985); }
.btn svg { width: 16px; height: 16px; flex: 0 0 16px; }

.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--primary-light); }
.btn-outline { background: var(--card); color: var(--secondary); border-color: var(--secondary); }
.btn-outline:hover:not(:disabled) { background: var(--primary-tint); color: var(--primary); border-color: var(--primary); }
.btn-export { background: var(--green); color: #fff; }
.btn-export:hover:not(:disabled) { filter: brightness(1.07); }

/* ============================================================================
   ALERTS
   ========================================================================== */
.alert {
  padding: 12px 15px; border-radius: var(--radius); margin-bottom: var(--gap);
  border: 1px solid; font-size: var(--fs-base); line-height: 1.5;
}
.alert-info { background: var(--alert-info-bg); border-color: var(--alert-info-border); color: var(--alert-info-text); }
.alert-warning { background: var(--alert-warning-bg); border-color: var(--alert-warning-border); color: var(--alert-warning-text); }
.alert-error { background: var(--alert-error-bg); border-color: var(--alert-error-border); color: var(--alert-error-text); }
.alert-success { background: var(--alert-success-bg); border-color: var(--alert-success-border); color: var(--alert-success-text); }

/* ============================================================================
   TABLAS — densidad alta a propósito: se ve premium arriba, denso acá.
   ========================================================================== */
.table-wrap {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: none;
  overflow: auto; max-height: 65vh;
}
/* MH-168: tipografía de tabla como antes — encabezado en 600 sin versalitas ni
   interletrado, y los tamaños/padding de siempre. El fondo navy del encabezado se
   mantiene (no cambió con el rediseño). */
table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
th {
  background: var(--primary); color: #fff;
  padding: 9px 10px; text-align: left; white-space: nowrap; cursor: pointer;
  position: sticky; top: 0; z-index: 1;
  font-size: 0.78rem; font-weight: 600;
}
th:hover { background: var(--primary-light); }
td { padding: 7px 10px; border-bottom: 1px solid #f0f0f0; }
/* La zebra SÍ se conserva: no es tipografía ni tarjeta, y en las tablas anchas de
   Vehículos y Cartera ayuda a no perder la fila. Es muy sutil (--bg sobre blanco) y va
   con :where() para especificidad CERO, así cualquier fila con clase propia
   (.factura-row, .cuota-row, .sub-row…) conserva su tinte de jerarquía.
   Si la jefa prefiere las filas todas blancas como antes, se borra esta línea y listo. */
:where(.table-wrap tbody tr:nth-child(even)) { background: var(--bg); }
tr:hover td { background: #f5f8ff; }
tr.expanded td { background: #e8eef6; }

/* ============================================================================
   BADGES
   ========================================================================== */
/* MH-168: badge como antes — radio --radius (8px, no 2px) y peso 600 sin interletrado. */
.badge {
  display: inline-block; padding: 2px 7px; border-radius: var(--radius);
  font-size: 0.68rem; font-weight: 600;
  white-space: nowrap;
}
.b-green,  .badge-success { background: #dcfce7; color: #166534; }
.b-yellow, .badge-warning { background: #fef3c7; color: #92400e; }
.b-orange { background: #ffedd5; color: #9a3412; }
.b-red,    .badge-danger  { background: var(--alert-error-bg); color: var(--alert-error-text); }
.b-purple { background: #ede9fe; color: #5b21b6; }
.b-blue   { background: #d4e3ff; color: #2f486a; }
.b-gray   { background: var(--surface); color: var(--muted); }

/* Tramos de cartera */
.ps-normal { background: #dcfce7; color: #166534; }
.ps-30 { background: #fef3c7; color: #92400e; }
.ps-60 { background: #ffedd5; color: #9a3412; }
.ps-90 { background: var(--alert-error-bg); color: var(--alert-error-text); }
.ps-pre_legal { background: #fce4ec; color: #880e4f; }
.ps-legal { background: #e8eaf6; color: #283593; }

/* ============================================================================
   PAGINACIÓN, LINKS, LOADING
   ========================================================================== */
.pagination { display: flex; justify-content: center; align-items: center; gap: var(--gap-sm); margin-top: var(--gap-md); }
.pagination button {
  height: 33px; padding: 0 13px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card); color: var(--muted);
  font-family: var(--font-body); font-size: var(--fs-base); font-weight: 500; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.05s;
}
.pagination button:hover:not(:disabled) { background: var(--primary-tint); border-color: var(--primary); color: var(--primary); }
.pagination button:active:not(:disabled) { transform: translateY(1px); }
.pagination button:disabled { opacity: 0.35; cursor: not-allowed; }

.odoo-link { color: var(--link); text-decoration: none; font-weight: 500; }
.odoo-link:hover { text-decoration: underline; }
.link-icon { font-size: 0.65rem; margin-left: 3px; opacity: 0.5; }
.link-mini { font-size: var(--fs-sm); color: var(--link); text-decoration: none; }
.link-mini:hover { text-decoration: underline; }
.expand-btn { cursor: pointer; user-select: none; font-size: 0.8rem; margin-right: 4px; color: var(--muted-soft); }

.loading { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 70vh; gap: var(--gap-md); color: var(--muted); }
.spinner { width: 34px; height: 34px; border: 3px solid var(--surface-high); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes mh-spin { to { transform: rotate(360deg); } }
.mh-spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: mh-spin 0.6s linear infinite; vertical-align: -2px; margin-right: 6px; }

@keyframes mh-toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mh-toast-out { to { opacity: 0; transform: translateY(-8px); } }
.mh-toast { animation: mh-toast-in 0.2s ease-out; }
.mh-toast.fade-out { animation: mh-toast-out 0.2s ease-in forwards; }

.progress-track { height: 8px; background: var(--surface); border-radius: var(--radius-full); overflow: hidden; margin-top: var(--gap-sm); }
.progress-bar { height: 100%; background: linear-gradient(90deg, var(--primary), var(--primary-light)); }

/* ============================================================================
   LOGIN
   ========================================================================== */
/* MH-168: login como antes — degradado lineal, tarjeta de 360px con radio 14 y la sombra
   de siempre. Se conserva el arreglo de MH-166 (sin subtítulo, y el margen con los campos
   viviendo en el h2). */
.login-bg {
  display: flex; justify-content: center; align-items: center; min-height: 100vh;
  padding: var(--gap-lg);
  background: linear-gradient(135deg, var(--primary), #1a4a7a);
}
.login-card {
  background: var(--card); border-radius: 14px; padding: 36px;
  width: min(360px, 92vw); box-shadow: 0 16px 48px rgba(0,0,0,0.25);
}
/* MH-166: el margen de separación con los campos vive en el h2 y no en .sub, porque
   el login ya no tiene subtítulo. .sub se conserva por si vuelve a hacer falta. */
.login-card h2 { font-size: 1.4rem; font-weight: 700; color: var(--primary); text-align: center; margin-bottom: 24px; }
.login-card h2:has(+ .sub) { margin-bottom: 4px; }
.login-card .sub { color: var(--muted); text-align: center; margin-bottom: 24px; font-size: 0.88rem; }
.login-card .form-g { margin-bottom: var(--gap-md); }
.login-card label { display: block; margin-bottom: 5px; font-size: 0.8rem; font-weight: 600; color: var(--text); }
.login-card input { width: 100%; padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.9rem; color: var(--text); }
.login-card .btn { width: 100%; padding: 12px; background: var(--primary); color: #fff; border: none; border-radius: var(--radius); font-size: 0.95rem; font-weight: 600; margin-top: var(--gap-sm); }
.login-card .btn:hover { background: var(--primary-light); }
.login-card .error { background: var(--alert-error-bg); color: var(--alert-error-text); padding: 11px 13px; border-radius: var(--radius); font-size: var(--fs-base); margin-top: var(--gap); }

/* ============================================================================
   RESPONSIVE
   ========================================================================== */

/* Tablet y abajo: el sidebar pasa a drawer off-canvas. */
@media (max-width: 1024px) {
  .app-body, .app.nav-collapsed .app-body { grid-template-columns: minmax(0,1fr); }
  .nav-toggle { display: inline-flex; }
  .sidenav {
    position: fixed; left: 0; top: 0; height: 100vh;
    width: min(284px, 84vw); z-index: 1000;
    transform: translateX(-100%); transition: transform 0.22s ease;
    box-shadow: var(--shadow-lg);
  }
  .app.nav-open .sidenav { transform: none; }
  .app.nav-open .nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,6,19,0.45); z-index: 990; }
  /* En modo drawer nunca se colapsa a rail: hay lugar para el texto. */
  .app.nav-collapsed .nav-label,
  .app.nav-collapsed .nav-group-t,
  .app.nav-collapsed .u-meta,
  .app.nav-collapsed .nav-mini-label { display: revert; }
  .app.nav-collapsed .nav-item { justify-content: flex-start; padding: 10px 12px; gap: 12px; }
  .app.nav-collapsed .sidenav-user { justify-content: flex-start; padding: 6px 4px 10px; }
  .nav-collapse-btn { display: none; }
  /* El drawer necesita su propia cabecera con la marca, porque el topbar queda detrás. */
  .sidenav-brand { display: flex; align-items: center; gap: 11px; height: var(--topbar-h); padding: 0 16px; border-bottom: 1px solid var(--border); flex: 0 0 auto; }

  .kpi-row { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--gap); }
  .g-chart-row { grid-template-columns: 1fr; }
  .container { padding: var(--gap-md); }
  .topbar { padding: 0 var(--gap-md); }
}
/* En desktop el drawer no existe: la marca vive en el topbar. */
@media (min-width: 1025px) { .sidenav-brand { display: none; } }

@media (max-width: 768px) {
  .topbar { gap: var(--gap-sm); }
  .topbar-meta { font-size: 0.66rem; }
  .brand-name { display: none; }
  .cfg-btn .cfg-label, .cfg-btn .cfg-caret { display: none; }
  .cfg-btn { padding: 0 10px; }
  .cfg-menu { max-width: calc(100vw - 24px); }
  .kpi-row { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--gap-sm); }
  .kpi { padding: 14px 15px; }
  .kpi .val { font-size: var(--fs-metric-sm); }
  .filters { flex-direction: column; align-items: stretch; padding: 14px; }
  .filters > div { min-width: 100%; }
  .fg select, .fg input:not([type="checkbox"]):not([type="radio"]) { min-width: 100%; }
  .table-wrap { font-size: var(--fs-xs); }
  /* En mobile el grupo de acciones (export/limpiar) se apila full-width. */
  .filters > div[style*="margin-left:auto"] { width: 100%; flex-direction: column !important; gap: var(--gap-sm) !important; }
  .filters > div[style*="margin-left:auto"] > button { width: 100%; }
  /* Scroll-indicator horizontal: el gradient con background-attachment local se
     mueve con el scroll y muestra sombra a la derecha mientras haya overflow. */
  .table-wrap {
    background-image: linear-gradient(to right, transparent calc(100% - 20px), rgba(0,6,19,0.10) 100%);
    background-repeat: no-repeat; background-attachment: local;
    background-position: right center; background-size: 100% 100%;
  }
}

@media (max-width: 480px) {
  .kpi-row { grid-template-columns: 1fr; }
  .table-wrap { font-size: 0.72rem; }
  .btn { width: 100%; }
  .btn-sm, .btn-xs { width: auto; }
}

/* Touch targets >=44px donde el puntero es grueso. */
@media (pointer: coarse) {
  .btn, button:not(.tab):not(.toast-close):not(.btn-xs):not(.btn-sm) { min-height: 44px; }
  .tab { min-height: 44px; }
  .nav-item { padding-top: 12px; padding-bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}