@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap");
@import url("./css/erp-ui.css");

:root {
  --font-ui: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-heading: "Poppins", "Inter", system-ui, sans-serif;

  --radius-8: 10px;
  --radius-12: 14px;
  --radius-16: 18px;

  --shadow-soft: 0 8px 28px rgba(15, 23, 42, 0.08);
  --shadow-soft-lg: 0 14px 40px rgba(15, 23, 42, 0.14);

  --layout-gap: 1rem;
  --focus-ring: 0 0 0 0.2rem rgba(31, 111, 235, 0.22);
}

html[data-bs-theme="dark"] {
  --shadow-soft: 0 10px 30px rgba(2, 6, 23, 0.46);
  --shadow-soft-lg: 0 18px 44px rgba(2, 6, 23, 0.58);
  --focus-ring: 0 0 0 0.2rem rgba(96, 165, 250, 0.24);
}

html,
body {
  min-height: 100%;
}

body {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-text);
}

body.erp-app-body {
  background: radial-gradient(circle at 0 0, rgba(15, 76, 129, 0.12), transparent 34%),
    radial-gradient(circle at 95% 5%, rgba(14, 159, 110, 0.09), transparent 38%),
    var(--color-bg);
}

html[data-bs-theme="dark"] body.erp-app-body {
  background: radial-gradient(circle at 0 0, rgba(31, 111, 235, 0.2), transparent 36%),
    radial-gradient(circle at 98% 8%, rgba(14, 159, 110, 0.16), transparent 38%),
    var(--color-bg);
}

body.erp-auth-body {
  background: radial-gradient(circle at 10% 0, rgba(15, 76, 129, 0.2), transparent 42%),
    radial-gradient(circle at 90% 12%, rgba(14, 159, 110, 0.16), transparent 42%),
    var(--color-bg);
}

h1,
h2,
h3,
h4,
.content-title,
.kpi-card__value,
.topbar,
.app-sidebar {
  font-family: var(--font-heading);
}

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

.app-sidebar {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 250, 255, 0.98) 100%);
}

html[data-bs-theme="dark"] .app-sidebar {
  background: linear-gradient(180deg, #0f172a 0%, #111c33 100%);
}

.app-sidebar__brand {
  padding: 1rem;
}

.logo-mark {
  width: 72px;
  height: 72px;
}

.logo-mark__image {
  filter: drop-shadow(0 6px 16px rgba(15, 23, 42, 0.12));
}

.app-sidebar__nav {
  padding: 0.75rem;
  display: grid;
  gap: 0.35rem;
}

.sidebar-link {
  min-height: 42px;
  margin-bottom: 0;
  border-radius: 12px;
}

.sidebar-link__icon {
  width: 32px;
  height: 32px;
}

.app-main {
  min-width: 0;
}

.topbar {
  gap: 0.75rem;
  border-bottom: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.04);
}

html[data-bs-theme="dark"] .topbar {
  background: rgba(17, 24, 39, 0.9);
}

.topbar__search {
  min-width: 260px;
}

.topbar__search .btn {
  white-space: nowrap;
}

/* Resultados del buscador de destinos: "donde se configura X". Cuelgan del
   formulario, que por eso es position:relative. */
.topbar__search {
  position: relative;
}

.topbar__search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 1080;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.busc-item {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  text-align: left;
  text-decoration: none;
  color: var(--bs-body-color);
  border: 0;
  background: transparent;
  border-bottom: 1px solid var(--bs-border-color-translucent);
}

.busc-item:last-child {
  border-bottom: 0;
}

.busc-item:hover,
.busc-item:focus,
.busc-item.is-activo {
  background: var(--bs-secondary-bg);
  color: var(--bs-body-color);
}

.busc-item__donde {
  display: block;
  font-size: 0.78rem;
  opacity: 0.7;
}

.busc-vacio {
  padding: 0.6rem 0.75rem;
  font-size: 0.85rem;
  opacity: 0.75;
}

.topbar-icon-btn,
.topbar-select-btn,
.topbar-user-btn {
  min-height: 38px;
  border-radius: 10px;
  font-weight: 600;
}

.topbar-icon-btn[data-theme-toggle] {
  min-width: 122px;
  justify-content: center;
}

.topbar-pill {
  font-size: 11px;
}

.app-breadcrumbs {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--color-muted);
}

.app-content {
  padding: var(--layout-gap);
}

.content-header {
  margin-bottom: 1rem;
  padding: 0.2rem 0;
}

.content-header__main {
  min-width: 0;
}

.content-header__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.content-title {
  margin-bottom: 0.2rem;
  font-size: clamp(1.25rem, 1.2rem + 0.4vw, 1.5rem);
}

.content-subtitle {
  margin: 0;
  color: var(--color-muted);
}

.card,
.module-card,
.kpi-card,
.data-table,
.modal-content {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-12);
  box-shadow: var(--shadow-soft);
}

.module-card,
.kpi-card,
.data-table,
.card {
  background: var(--color-surface);
}

.module-card__header,
.card-header,
.card-footer,
.modal-header,
.modal-footer {
  background: var(--color-surface-alt);
  border-color: var(--color-border);
}

.kpi-card {
  padding: 1rem;
}

.kpi-card__value {
  margin-bottom: 0.25rem;
}

.nav-pills .nav-link {
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-muted);
  font-weight: 600;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #ffffff;
  border-color: rgba(31, 111, 235, 0.8);
  background: linear-gradient(130deg, rgba(15, 76, 129, 0.95), rgba(31, 111, 235, 0.95));
}

.form-control,
.form-select {
  min-height: 40px;
  border-radius: 10px;
  border-color: var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text);
}

.form-control::placeholder {
  color: color-mix(in srgb, var(--color-muted) 88%, transparent);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.btn:focus-visible,
.dropdown-item:focus-visible,
.nav-link:focus-visible,
a:focus-visible {
  border-color: rgba(31, 111, 235, 0.55);
  box-shadow: var(--focus-ring);
  outline: 0;
}

.form-check-input {
  border-color: var(--color-border);
}

.btn {
  border-radius: 10px;
  font-weight: 600;
}

.btn-sm {
  border-radius: 8px;
}

.status-badge {
  min-width: 88px;
  letter-spacing: 0.01em;
}

.badge.bg-secondary,
.badge.text-bg-secondary {
  background-color: rgba(100, 116, 139, 0.2) !important;
  color: var(--color-text) !important;
}

html[data-bs-theme="dark"] .badge.bg-secondary,
html[data-bs-theme="dark"] .badge.text-bg-secondary {
  background-color: rgba(148, 163, 184, 0.28) !important;
}

.empty-state {
  display: grid;
  gap: 0.4rem;
  justify-items: center;
  padding: 1.5rem;
}

.empty-state__title {
  font-size: 1.05rem;
}

.empty-state__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.data-table .table-responsive {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  max-height: min(68vh, 680px);
  overflow: auto;
}

.data-table.has-open-dropdown {
  overflow: visible;
}

.data-table .table-responsive.has-open-dropdown {
  overflow: visible;
}

.data-table .table-responsive.has-open-dropdown .dropdown-menu {
  z-index: 1080;
}

.data-table .table {
  margin-bottom: 0;
}

.data-table .table > :not(caption) > * > * {
  background-color: transparent;
  color: var(--color-text);
}

.data-table .table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-surface-alt);
  border-bottom-color: var(--color-border);
}

.table-hover > tbody > tr:hover > * {
  --bs-table-bg-state: rgba(15, 76, 129, 0.08);
}

html[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * {
  --bs-table-bg-state: rgba(31, 111, 235, 0.18);
}

.table-light,
.table-light > :not(caption) > * > * {
  --bs-table-bg: var(--color-surface-alt);
  --bs-table-color: var(--color-text);
  --bs-table-border-color: var(--color-border);
  --bs-table-striped-bg: var(--color-surface-alt);
  --bs-table-striped-color: var(--color-text);
  --bs-table-hover-bg: var(--color-surface-alt);
  --bs-table-hover-color: var(--color-text);
  background-color: var(--color-surface-alt) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

tr.table-light > th,
tr.table-light > td {
  --bs-table-bg-state: transparent;
  --bs-table-bg-type: transparent;
  --bs-table-accent-bg: transparent;
  background-color: var(--color-surface-alt) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
  box-shadow: none !important;
}

.bg-white,
.text-bg-light,
.bg-light {
  background-color: var(--color-surface-alt) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

.pagination {
  --bs-pagination-bg: var(--color-surface);
  --bs-pagination-border-color: var(--color-border);
  --bs-pagination-color: var(--color-text);
  --bs-pagination-hover-bg: var(--color-surface-alt);
  --bs-pagination-hover-border-color: var(--color-border);
  --bs-pagination-active-bg: var(--color-primary);
  --bs-pagination-active-border-color: var(--color-primary);
  --bs-pagination-disabled-bg: var(--color-surface-alt);
  --bs-pagination-disabled-border-color: var(--color-border);
}

.app-toast-container .toast {
  border-radius: 12px;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft-lg);
}

.alert-drawer {
  background: var(--color-surface);
}

body.alert-drawer-open,
body.sidebar-open {
  overflow: hidden;
}

/* Cross-link button (Ir a Talentheon) */
.topbar-cross-link {
  background: #4f46e5;
  color: #fff;
  font-weight: 500;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-8, 10px);
  text-decoration: none;
  font-size: 13px;
  white-space: nowrap;
  transition: background 0.2s ease;
}
.topbar-cross-link:hover {
  background: #4338ca;
  color: #fff;
}

@media (max-width: 991.98px) {
  .app-content {
    padding: 0.85rem;
  }

  .content-header {
    flex-direction: column;
    align-items: stretch;
  }

  .topbar {
    gap: 0.6rem;
  }

  .topbar__search {
    order: 3;
    width: 100%;
  }

  .topbar-icon-btn[data-theme-toggle] {
    min-width: unset;
  }

  .data-table .table-responsive {
    max-height: min(62vh, 540px);
  }

  /* Hide cross-link on mobile */
  .topbar-cross-link {
    display: none;
  }

  /* Hide user meta (name/role), keep avatar */
  .user-meta {
    display: none;
  }

  /* Quick action: hide label text, keep icon */
  .topbar-quick-action-text {
    display: none;
  }
}

@media (max-width: 767.98px) {
  /* Very small: compact topbar icon buttons */
  .topbar-icon-btn {
    padding: 0.45rem 0.6rem;
    min-height: 36px;
  }

  .topbar-select-btn {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Tables scroll horizontally */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

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

/* DENSJL Design System alignment - DENSJ ERP 2026 */
:root {
  --font-ui: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-heading: "Poppins", "Inter", system-ui, sans-serif;
  --color-primary: #0f4c81;
  --color-success: #0e9f6e;
  --color-warning: #d97706;
  --color-danger: #c0392b;
  --color-bg: #f4f6f8;
  --color-surface: #ffffff;
  --color-surface-alt: #f8fafc;
  --color-border: #d6dde6;
  --color-text: #0f172a;
  --color-muted: #5b6675;
  --color-topbar-bg: rgba(255, 255, 255, 0.9);
  --focus-ring: 0 0 0 0.2rem rgba(15, 76, 129, 0.2);
  color-scheme: light;
}

html[data-bs-theme="dark"],
html[data-theme="dark"] {
  --color-bg: #0f172a;
  --color-surface: #111827;
  --color-surface-alt: #172033;
  --color-border: #374151;
  --color-text: #e5e7eb;
  --color-muted: #9ca3af;
  --color-topbar-bg: rgba(17, 24, 39, 0.88);
  --color-primary: #60a5fa;
  --color-success: #34d399;
  --color-warning: #fbbf24;
  --color-danger: #f87171;
  --focus-ring: 0 0 0 0.2rem rgba(96, 165, 250, 0.24);
  color-scheme: dark;
}

body {
  font-family: var(--font-ui);
  color: var(--color-text);
}

.topbar,
.app-sidebar {
  font-family: var(--font-ui);
}

h1,
h2,
h3,
h4,
.content-title,
.kpi-card__value,
.logo-title {
  font-family: var(--font-heading);
}

.app-sidebar {
  background: var(--color-surface);
  border-right-color: var(--color-border);
}

html[data-bs-theme="dark"] .app-sidebar,
html[data-theme="dark"] .app-sidebar {
  background: var(--color-surface);
}

.topbar {
  background: var(--color-topbar-bg);
  backdrop-filter: blur(8px);
}

.topbar-icon-btn[data-theme-toggle],
.topbar-theme-btn {
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  justify-content: center;
}

.topbar-icon-btn[data-theme-toggle] svg,
.topbar-theme-btn svg {
  flex: 0 0 auto;
}

.topbar-cross-link {
  background: var(--color-primary);
  color: #ffffff;
  border: 1px solid transparent;
  box-shadow: 0 8px 16px rgba(15, 76, 129, 0.2);
}

.topbar-cross-link:hover {
  background: #123f6c;
  color: #ffffff;
}

html[data-bs-theme="dark"] .topbar-cross-link,
html[data-theme="dark"] .topbar-cross-link {
  background: rgba(96, 165, 250, 0.2);
  border-color: rgba(96, 165, 250, 0.38);
  color: #dbeafe;
  box-shadow: none;
}

.sidebar-link.is-active {
  background: linear-gradient(135deg, rgba(15, 76, 129, 0.24), rgba(31, 111, 235, 0.24));
}

html[data-bs-theme="dark"] .sidebar-link.is-active,
html[data-theme="dark"] .sidebar-link.is-active {
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.28), rgba(14, 159, 110, 0.18));
  color: #ffffff;
}

.module-card,
.erp-card,
.kpi-card,
.data-table,
.card,
.modal-content,
.dropdown-menu {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}

.module-card__header,
.card-header,
.card-footer,
.modal-header,
.modal-footer,
.data-table thead th {
  background-color: var(--color-surface-alt);
  border-color: var(--color-border);
  color: var(--color-text);
}

.form-control:focus,
.form-select:focus,
.btn:focus-visible,
.dropdown-item:focus-visible,
.nav-link:focus-visible,
a:focus-visible {
  box-shadow: var(--focus-ring);
}

@media (max-width: 991.98px) {
  .topbar-icon-btn[data-theme-toggle],
  .topbar-theme-btn {
    min-width: 36px;
    width: 36px;
    height: 36px;
  }
}

/* ============================================================================
   Menu lateral: cabecera pegajosa, scroll y estado retraido
   ----------------------------------------------------------------------------
   La cabecera es sticky, pero tenia un degradado que terminaba en transparente:
   al bajar, los enlaces se veian POR ENCIMA del logo. Necesita fondo opaco.
   ========================================================================== */
.app-sidebar__brand {
  background: #ffffff;
  padding: 0.9rem 1rem;
}

html[data-bs-theme="dark"] .app-sidebar__brand {
  /* Mismo tono con que arranca el degradado del sidebar, para que no se note el corte. */
  background: #0f172a;
}

.app-sidebar__brand::after {
  /* Difumina el borde inferior en vez de cortar en seco lo que pasa por debajo. */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12px;
  height: 12px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.10) 0%, rgba(15, 23, 42, 0) 100%);
  pointer-events: none;
}

/* Barra de scroll discreta: la del navegador se comia ancho y saltaba. */
.app-sidebar {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
  overscroll-behavior: contain;
}

.app-sidebar::-webkit-scrollbar {
  width: 6px;
}

.app-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.app-sidebar::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.35);
  border-radius: 999px;
}

.app-sidebar:hover::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.55);
}

.app-sidebar__nav {
  padding: 0.75rem 0.6rem 1.25rem;
}

/* ── Retraido ─────────────────────────────────────────────────────────────── */
body.sidebar-collapsed .app-sidebar__brand {
  padding: 0.75rem 0.4rem;
}

body.sidebar-collapsed .app-sidebar__logo {
  justify-content: center;
  gap: 0;
}

body.sidebar-collapsed .logo-mark {
  width: 46px;
  height: 46px;
}

body.sidebar-collapsed .app-sidebar__nav {
  padding: 0.6rem 0.4rem 1.25rem;
  justify-items: center;
}

body.sidebar-collapsed .sidebar-link,
body.sidebar-collapsed .sidebar-link--parent {
  width: 100%;
  justify-content: center;
  padding: 0.35rem 0;
  gap: 0;
}

/* Sin la caja alrededor del icono el menu retraido se lee mucho mas limpio:
   queda una columna de siglas, y el pill marca cual esta activa. */
body.sidebar-collapsed .sidebar-link__icon {
  width: 38px;
  height: 38px;
  background: transparent;
  border-color: transparent;
  font-size: var(--size-12);
  font-weight: 600;
}

body.sidebar-collapsed .sidebar-link:hover .sidebar-link__icon {
  background: rgba(148, 163, 184, 0.18);
  border-color: transparent;
}

body.sidebar-collapsed .sidebar-link.is-active {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

body.sidebar-collapsed .sidebar-link.is-active .sidebar-link__icon {
  background: var(--sidebar-pill-active);
  border-color: rgba(31, 111, 235, 0.45);
  color: #ffffff;
}

/* ── Submenu flotante con el menu retraido ────────────────────────────────
   En 84px no cabe un submenu en linea, y el sidebar tiene overflow oculto en X,
   asi que se saca del flujo con position:fixed y lo posiciona el JS contra el
   borde del modulo. Sin esto, las opciones de Configuracion eran inalcanzables
   sin volver a expandir el menu. */
body.sidebar-collapsed .sidebar-submenu.is-flyout {
  position: fixed;
  z-index: 1060;
  display: grid;
  gap: 0.15rem;
  min-width: 210px;
  max-height: 70vh;
  overflow-y: auto;
  max-width: none;
  opacity: 1;
  pointer-events: auto;
  margin: 0;
  padding: 0.4rem;
  border: 1px solid var(--sidebar-border);
  border-radius: var(--radius-8);
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22);
}

html[data-bs-theme="dark"] body.sidebar-collapsed .sidebar-submenu.is-flyout {
  background: #131f36;
}

body.sidebar-collapsed .sidebar-submenu.is-flyout .sidebar-sublink {
  white-space: nowrap;
  padding: 0.45rem 0.6rem;
}

body.sidebar-collapsed .sidebar-submenu.is-flyout::before {
  /* Titulo del modulo: con el menu retraido el icono no alcanza a decir cual es. */
  content: attr(data-modulo);
  display: block;
  padding: 0.25rem 0.6rem 0.4rem;
  font-size: var(--size-12);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sidebar-ink-muted);
}

/* ============================================================================
   Menu lateral en ventana angosta (< 992px)
   ----------------------------------------------------------------------------
   El JS ya trataba esta franja como "movil": al tocar el boton de menu le pone
   al body la clase .sidebar-open y muestra el overlay. Pero el CSS que convierte
   la barra en un panel deslizante NUNCA estuvo en este archivo -vive en
   css/erp-ui.css, que no se carga-, asi que lo unico que pasaba era esto:

       body.sidebar-open { overflow: hidden; }

   La pagina dejaba de scrollear, la barra seguia en su lugar ocupando la mitad
   del ancho, y el overlay aparecia como un div sin estilos. Resultado: la
   ventana quedaba congelada y no se podia hacer nada.

   Las capas importan: el overlay tiene que quedar POR DEBAJO de la barra, o
   tapa el menu y cada clic lo cierra en vez de abrir la opcion.
   ========================================================================== */

.app-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.5);
  z-index: 1040;
}

.app-overlay[hidden] {
  display: none !important;
}

/* El cajon de alertas se abre sobre el overlay, no debajo. */
.alert-drawer {
  z-index: 1050;
}

@media (max-width: 991.98px) {
  .app-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(290px, 86vw);
    max-width: 86vw;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    /* Encima del overlay: si quedara debajo, los clics del menu irian al
       overlay y cada uno cerraria la barra. */
    z-index: 1045;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  body.sidebar-open .app-sidebar {
    transform: translateX(0);
    box-shadow: 0 0 40px rgba(2, 6, 23, 0.45);
  }

  /* La barra sale del flujo: el contenido usa todo el ancho. La regla cubre
     tambien el estado retraido, que se hereda de escritorio via localStorage. */
  .app-main,
  body.sidebar-collapsed .app-main {
    margin-left: 0;
    width: 100%;
  }

  /* En panel siempre se ve completa, aunque el body traiga sidebar-collapsed. */
  body.sidebar-collapsed .app-sidebar {
    width: min(290px, 86vw);
  }

  body.sidebar-collapsed .logo-meta,
  body.sidebar-collapsed .sidebar-group__title,
  body.sidebar-collapsed .sidebar-link__text {
    opacity: 1;
    width: auto;
    height: auto;
    pointer-events: auto;
  }

  /* El submenu flotante es para la barra retraida de escritorio. Aca hay ancho
     de sobra y ademas quedaria fuera de la pantalla. */
  body.sidebar-collapsed .sidebar-submenu.is-flyout {
    position: static;
    min-width: 0;
    max-height: none;
    box-shadow: none;
  }
}

/* Sin sidebar abierta la pagina scrollea normal: el overflow:hidden de
   .sidebar-open solo debe aplicar mientras el panel esta encima. En pantalla
   ancha la barra no es un panel, asi que no corresponde bloquear el scroll. */
@media (min-width: 992px) {
  body.sidebar-open {
    overflow: visible;
  }
}

/* ============================================================================
   Iconos del menu lateral y de la barra superior
   ----------------------------------------------------------------------------
   Misma familia que las sub-pestanas de Configuracion: una faceta rellena, un
   trazo en currentColor encima y un punto de acento. El catalogo esta en
   app/ERP/Support/iconos.php.

   El menu llevaba monogramas de dos letras -"DA", "VE", "CI"- que habia que
   descifrar, y la barra superior seis SVG escritos a mano en su partial, cada
   uno con su grosor: por eso se veia despareja aunque todo estuviera alineado.
   ========================================================================== */
.nav-ico,
.top-ico {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  overflow: visible;
}

.nav-ico .ico-trazo,
.top-ico .ico-trazo,
.sidebar-link__chevron svg .ico-trazo {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-ico .ico-trazo--puntos,
.top-ico .ico-trazo--puntos { stroke-width: 2.6; }
.nav-ico .ico-trazo--tenue,
.top-ico .ico-trazo--tenue { opacity: 0.45; }
.nav-ico .ico-trazo--perforado,
.top-ico .ico-trazo--perforado { stroke-dasharray: 0.06 0.06; }

.nav-ico .ico-faceta,
.top-ico .ico-faceta {
  fill: var(--nav-acc, currentColor);
  opacity: 0.2;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity var(--transition-fast), transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-ico .ico-punto,
.top-ico .ico-punto { fill: var(--nav-acc, currentColor); }

/* ── Menu lateral: cada modulo con su tono ────────────────────────────────── */
.sidebar-link {
  --nav-acc: hsl(var(--nav-h, 210) 66% 44%);
  position: relative;
}

html[data-bs-theme="dark"] .sidebar-link,
html[data-theme="dark"] .sidebar-link {
  --nav-acc: hsl(var(--nav-h, 210) 78% 68%);
}

/* La caja del icono ya no tiene que contener texto: pierde el borde duro y se
   queda con un fondo del propio tono del modulo. */
.sidebar-link__icon {
  width: 32px;
  height: 32px;
  background: hsl(var(--nav-h, 210) 66% 44% / 0.1);
  border: 1px solid hsl(var(--nav-h, 210) 66% 44% / 0.2);
  color: var(--nav-acc);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

html[data-bs-theme="dark"] .sidebar-link__icon,
html[data-theme="dark"] .sidebar-link__icon {
  background: hsl(var(--nav-h, 210) 78% 68% / 0.12);
  border-color: hsl(var(--nav-h, 210) 78% 68% / 0.24);
}

.sidebar-link:hover .sidebar-link__icon { background: hsl(var(--nav-h, 210) 66% 44% / 0.18); }
.sidebar-link:hover .ico-faceta { opacity: 0.34; transform: rotate(-6deg) scale(1.06); }
.sidebar-link:hover { border-color: hsl(var(--nav-h, 210) 66% 44% / 0.3); }

/* El modulo abierto se pinta de SU color y no del azul de todos: con catorce
   entradas, el color es lo que dice donde estas antes de leer. */
.sidebar-link.is-active,
html[data-bs-theme="dark"] .sidebar-link.is-active,
html[data-theme="dark"] .sidebar-link.is-active {
  --nav-acc: #ffffff;
  background: linear-gradient(135deg,
    hsl(var(--nav-h, 210) 62% 46%) 0%,
    hsl(var(--nav-h, 210) 66% 36%) 100%);
  border-color: hsl(var(--nav-h, 210) 62% 46% / 0.55);
  color: #ffffff;
}

.sidebar-link.is-active .sidebar-link__icon {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.26);
  color: #ffffff;
}

/* Una marca en el canto: sobre el degradado, un hover fuerte y el modulo
   abierto se parecen demasiado. */
.sidebar-link.is-active::before {
  content: "";
  position: absolute;
  left: -0.6rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 22px;
  border-radius: 0 3px 3px 0;
  background: hsl(var(--nav-h, 210) 70% 62%);
}

/* ── Submenu ──────────────────────────────────────────────────────────────── */
.sidebar-link__chevron svg { width: 14px; height: 14px; display: block; }

.sidebar-submenu {
  border-left-color: hsl(var(--nav-h, 210) 66% 44% / 0.35);
  transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.28s ease, margin 0.28s ease;
}

/* Vineta en el tono del modulo: liga cada hijo con el padre del que cuelga. */
.sidebar-sublink {
  position: relative;
  padding-left: 1.1rem;
}

.sidebar-sublink::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: hsl(var(--nav-h, 210) 66% 44% / 0.45);
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.sidebar-sublink:hover::before { background: hsl(var(--nav-h, 210) 66% 44% / 0.8); }

.sidebar-sublink.is-active::before {
  background: hsl(var(--nav-h, 210) 66% 46%);
  transform: translateY(-50%) scale(1.5);
}

html[data-bs-theme="dark"] .sidebar-sublink::before,
html[data-theme="dark"] .sidebar-sublink::before { background: hsl(var(--nav-h, 210) 78% 68% / 0.45); }
html[data-bs-theme="dark"] .sidebar-sublink.is-active::before,
html[data-theme="dark"] .sidebar-sublink.is-active::before { background: hsl(var(--nav-h, 210) 78% 68%); }

/* ============================================================================
   Barra superior: mismo alto para todo lo que es un boton
   ----------------------------------------------------------------------------
   Convivian botones de 38px con otros que se estiraban segun su texto, y el
   buscador tenia DOS cajas del mismo peso -el campo y "Buscar"- peleando por el
   mismo trabajo. Ahora la lupa vive dentro del campo y el boton pesa menos.
   ========================================================================== */
.topbar {
  gap: 0.6rem;
  padding: 0.6rem 0.9rem;
}

.topbar__start,
.topbar__end { gap: 0.4rem; }

.topbar-icon-btn,
.topbar-select-btn,
.topbar-user-btn,
.topbar-cross-link,
.topbar-search-btn,
.period-switcher .form-select,
.topbar__search .form-control {
  height: 36px;
  min-height: 36px;
}

/* Los que solo llevan icono son cuadrados: asi la fila tiene un ritmo. */
.topbar-icon-btn,
.topbar-icon-btn[data-theme-toggle],
.topbar-theme-btn {
  width: 36px;
  min-width: 36px;
  padding: 0;
  justify-content: center;
}

.topbar-select-btn,
.topbar-user-btn,
.topbar-cross-link { padding: 0 0.7rem; }

.topbar-icon-btn:hover .ico-faceta,
.topbar-select-btn:hover .ico-faceta,
.topbar-cross-link:hover .ico-faceta { opacity: 0.38; transform: rotate(-6deg) scale(1.06); }

/* La lupa dentro del campo. El formulario ya es position:relative. */
.topbar__search-ico {
  position: absolute;
  left: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  color: var(--color-muted);
  pointer-events: none;
  z-index: 2;
  transition: color var(--transition-fast);
}

.topbar__search .form-control { padding-left: 2.3rem; }

.topbar-search-btn {
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  color: var(--color-text);
  border-radius: var(--radius-8);
  font-size: var(--size-12);
  font-weight: 600;
  padding: 0 0.85rem;
}

.topbar-search-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* El chip de usuario ocupaba el ancho de un boton grande para decir dos datos
   cortos. Se aprieta el interlineado en vez de recortar el nombre. */
.user-avatar { width: 26px; height: 26px; font-size: var(--size-12); }
.user-meta { line-height: 1.15; }
.user-name { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* El contador de alertas colgaba del flujo y ensanchaba el boton; ahora se
   posa sobre la esquina, que es donde se espera un contador. */
.topbar-alerts-btn { position: relative; overflow: visible; }

.topbar-pill {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 17px;
  height: 17px;
  font-size: 10px;
  border: 2px solid var(--color-surface);
}

@media (prefers-reduced-motion: reduce) {
  .nav-ico .ico-faceta,
  .top-ico .ico-faceta,
  .sidebar-submenu,
  .sidebar-sublink::before { transition: none !important; }
  .sidebar-link:hover .ico-faceta,
  .topbar-icon-btn:hover .ico-faceta,
  .topbar-select-btn:hover .ico-faceta,
  .topbar-cross-link:hover .ico-faceta { transform: none; }
}

/* ============================================================================
   Barra de secciones de Configuracion
   ----------------------------------------------------------------------------
   Quince chips grises identicos: para saber en cual estabas habia que leerlos
   todos. Ahora cada uno lleva la marca de SU modulo -la seccion "Tesoreria" de
   Configuracion y el modulo Tesoreria son la misma cosa vista desde dos lados-
   y su tono de la misma rueda que el resto del ERP.

   Son enlaces, no pestanas: cada uno recarga la pantalla. Por eso no hay tinta
   que se deslice, que aqui seria mentir sobre lo que va a pasar al hacer clic.
   ========================================================================== */
.cfg-secciones {
  display: flex;
  align-items: center;
}

.cfg-secciones .cfg-sec {
  --tab-acc: hsl(var(--tab-h, 210) 66% 42%);
  --tab-soft: hsl(var(--tab-h, 210) 66% 42% / 0.1);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  font-size: var(--size-12);
  font-weight: 500;
  transition: background var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast);
}

html[data-bs-theme="dark"] .cfg-secciones .cfg-sec,
html[data-theme="dark"] .cfg-secciones .cfg-sec {
  --tab-acc: hsl(var(--tab-h, 210) 76% 66%);
  --tab-soft: hsl(var(--tab-h, 210) 76% 66% / 0.13);
}

.cfg-secciones .cfg-sec:hover {
  background: var(--tab-soft);
  border-color: hsl(var(--tab-h, 210) 66% 42% / 0.4);
  color: var(--tab-acc);
}

/* La seccion abierta se pinta de SU color y no del azul de todas: con quince
   chips, el color es lo que ubica antes de que alcances a leer. */
.cfg-secciones .cfg-sec.active,
html[data-bs-theme="dark"] .cfg-secciones .cfg-sec.active,
html[data-theme="dark"] .cfg-secciones .cfg-sec.active {
  --tab-acc: #ffffff;
  background: linear-gradient(135deg,
    hsl(var(--tab-h, 210) 62% 46%) 0%,
    hsl(var(--tab-h, 210) 66% 37%) 100%);
  border-color: hsl(var(--tab-h, 210) 62% 46% / 0.6);
  color: #ffffff;
  font-weight: 600;
}

/* .erp-ico es la marca en cualquier sitio que no sea el menu ni la barra
   superior: los chips de seccion y las sub-pestanas de Ventas y Compras. Toma
   su color de --tab-acc, que cada contenedor define a partir de su matiz. */
.erp-ico {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  overflow: visible;
}

.erp-ico .ico-trazo {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.erp-ico .ico-trazo--puntos { stroke-width: 2.6; }
.erp-ico .ico-trazo--tenue { opacity: 0.45; }
.erp-ico .ico-trazo--perforado { stroke-dasharray: 0.06 0.06; }

.erp-ico .ico-faceta {
  fill: var(--tab-acc);
  opacity: 0.22;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity var(--transition-fast), transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.erp-ico .ico-punto { fill: var(--tab-acc); }

.cfg-secciones .cfg-sec:hover .ico-faceta,
.cfg-subnav .cfg-sub:hover .ico-faceta { opacity: 0.36; transform: rotate(-6deg) scale(1.06); }
.cfg-secciones .cfg-sec.active .ico-faceta,
.cfg-subnav .cfg-sub.active .ico-faceta { opacity: 0.34; }

/* El corte entre las secciones de esta pantalla y los mantenedores con ruta
   propia. Era un "|" tipografico, que se apoyaba en la linea base del texto y
   quedaba descolgado respecto de los chips. */
.cfg-secciones__corte {
  width: 1px;
  align-self: stretch;
  min-height: 26px;
  margin: 0 0.35rem;
  background: var(--color-border);
}

@media (prefers-reduced-motion: reduce) {
  .cfg-secciones .cfg-sec,
  .cfg-subnav .cfg-sub,
  .erp-ico .ico-faceta { transition: none !important; }
  .cfg-secciones .cfg-sec:hover .ico-faceta,
  .cfg-subnav .cfg-sub:hover .ico-faceta { transform: none; }
}

/* ============================================================================
   Bloque de marca del menu lateral
   ----------------------------------------------------------------------------
   Estaba forzado a un cuadrado de 78x78 con el nombre al lado. Un logotipo
   apaisado -que es lo que es un logotipo con el nombre escrito- entraba a 78 de
   ancho y quedaba diminuto.

   Ahora la marca ocupa su propia linea a todo el ancho y el texto va debajo:
   asi sirve para cualquier proporcion, la que hay hoy y la que se ponga
   manana, sin tener que tocar el CSS cada vez que cambie el archivo.
   ========================================================================== */
.app-sidebar__logo {
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

.logo-mark {
  width: 100%;
  height: auto;
  max-height: 84px;
}

.logo-mark__image {
  width: 100%;
  height: auto;
  max-height: 84px;
  object-fit: contain;
}

.logo-meta { align-items: center; }

/* Retraido no cabe un logotipo apaisado: se recorta a un cuadrado y se centra
   por su lado mas corto, que es lo unico que se puede hacer sin deformarlo. */
body.sidebar-collapsed .app-sidebar__logo { gap: 0; }

body.sidebar-collapsed .logo-mark,
body.sidebar-collapsed .logo-mark__image {
  width: 52px;
  height: 52px;
  max-height: 52px;
}

/* La bajada quedo sola bajo el logotipo: sin un titulo encima, el margen que la
   separaba de el sobra, y centrada acompana a la marca en vez de colgar de un
   costado. */
.logo-subtitle {
  margin-top: 0;
  text-align: center;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ============================================================================
   Sub-pestanas de Ventas y Compras
   ----------------------------------------------------------------------------
   Eran el tercer estilo de barra de la pantalla: enlaces azules sueltos, uno de
   ellos encajonado. Ahora hablan como las sub-pestanas del resto de
   Configuracion -subrayado, no pildora- para no aplanar la jerarquia con los
   chips de seccion que tienen justo encima.

   Sin tinta que se deslice: estos son enlaces que recargan la pantalla, y una
   tinta viajando prometeria que el cambio es instantaneo.
   ========================================================================== */
.cfg-subnav {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  gap: 2px;
  border-bottom: 1px solid var(--color-border);
}

.cfg-subnav .cfg-sub {
  --tab-acc: hsl(var(--tab-h, 210) 66% 42%);
  --tab-soft: hsl(var(--tab-h, 210) 66% 42% / 0.1);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: var(--radius-8) var(--radius-8) 0 0;
  background: transparent;
  color: var(--color-muted);
  font-size: var(--size-12);
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  transition: background var(--transition-fast), color var(--transition-fast),
    border-color var(--transition-fast);
}

html[data-bs-theme="dark"] .cfg-subnav .cfg-sub,
html[data-theme="dark"] .cfg-subnav .cfg-sub {
  --tab-acc: hsl(var(--tab-h, 210) 76% 66%);
  --tab-soft: hsl(var(--tab-h, 210) 76% 66% / 0.13);
}

.cfg-subnav .cfg-sub:hover {
  background: var(--tab-soft);
  color: var(--tab-acc);
}

/* El subrayado se pinta sobre el borde de la barra, del color de la pestana.
   Es estatico a proposito: la tinta que viaja es de las pestanas que alternan
   paneles sin recargar, y usarla aqui diria algo que no es. */
.cfg-subnav .cfg-sub.active {
  background: var(--tab-soft);
  color: var(--tab-acc);
  border-bottom-color: var(--tab-acc);
  font-weight: 600;
}

.cfg-subnav .cfg-sub:focus-visible {
  outline: 2px solid var(--tab-acc);
  outline-offset: -2px;
}

/* ============================================================================
   Tarjetas de indicador con marca y color
   ----------------------------------------------------------------------------
   Los paneles eran cinco cajas de texto gris identicas: para saber cual era
   cual habia que leer las cinco. Con la marca y el tono, el ojo llega antes que
   la lectura, que es para lo que sirve un panel.

   El matiz lo pone PHP en --kpi-h; la saturacion y la luminosidad viven aca,
   que es donde el tema oscuro puede corregirlas.
   ========================================================================== */
.kpi-af-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.75rem;
}

.kpi-af {
  --kpi-acc: hsl(var(--kpi-h, 210) 64% 42%);
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.9rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-12);
  box-shadow: var(--shadow-soft);
  /* La linea de color es del propio indicador: es lo que lo separa del de al
     lado cuando hay cinco en fila. */
  border-top: 3px solid var(--kpi-acc);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

html[data-bs-theme="dark"] .kpi-af,
html[data-theme="dark"] .kpi-af {
  --kpi-acc: hsl(var(--kpi-h, 210) 76% 66%);
}

.kpi-af:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft-lg);
}

.kpi-af__marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 11px;
  background: hsl(var(--kpi-h, 210) 64% 42% / 0.11);
  color: var(--kpi-acc);
}

html[data-bs-theme="dark"] .kpi-af__marca,
html[data-theme="dark"] .kpi-af__marca {
  background: hsl(var(--kpi-h, 210) 76% 66% / 0.13);
}

.kpi-card__ico {
  width: 21px;
  height: 21px;
  overflow: visible;
}

.kpi-card__ico .ico-trazo {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kpi-card__ico .ico-trazo--puntos { stroke-width: 2.6; }
.kpi-card__ico .ico-trazo--tenue { opacity: 0.45; }
.kpi-card__ico .ico-trazo--perforado { stroke-dasharray: 0.06 0.06; }

.kpi-card__ico .ico-faceta {
  fill: currentColor;
  opacity: 0.22;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity var(--transition-fast), transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.kpi-card__ico .ico-punto { fill: currentColor; }

.kpi-af:hover .ico-faceta { opacity: 0.38; transform: rotate(-6deg) scale(1.08); }

.kpi-af__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.kpi-af__label {
  font-size: var(--size-12);
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.kpi-af__valor {
  font-family: var(--erp-font-mono, monospace);
  font-variant-numeric: tabular-nums;
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--kpi-acc);
  word-break: break-word;
}

.kpi-af__pie {
  font-size: var(--size-12);
  color: var(--color-muted);
}

/* Al entrar, las tarjetas se asientan una tras otra en vez de aparecer todas
   de golpe. El escalonado se corta a la sexta: mas alla la espera se nota. */
@keyframes kpi-af-entra { from { opacity: 0; transform: translateY(8px); } }

.kpi-af { animation: kpi-af-entra 0.34s ease both; }
.kpi-af-grid .kpi-af:nth-child(1) { animation-delay: 0.00s; }
.kpi-af-grid .kpi-af:nth-child(2) { animation-delay: 0.04s; }
.kpi-af-grid .kpi-af:nth-child(3) { animation-delay: 0.08s; }
.kpi-af-grid .kpi-af:nth-child(4) { animation-delay: 0.12s; }
.kpi-af-grid .kpi-af:nth-child(5) { animation-delay: 0.16s; }
.kpi-af-grid .kpi-af:nth-child(n + 6) { animation-delay: 0.20s; }

@media (prefers-reduced-motion: reduce) {
  .kpi-af,
  .kpi-card__ico .ico-faceta { transition: none !important; animation: none !important; }
  .kpi-af:hover { transform: none; }
  .kpi-af:hover .ico-faceta { transform: none; }
}

/* La 5.2 pide que las tarjetas de antiguedad filtren al hacer clic. Al pasar de
   <div> a <a> hay que devolverles el color del texto -si no, heredan el azul de
   enlace- y darles el gesto de que se pueden pulsar. */
.cob-bucket {
  color: inherit;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
    border-color var(--transition-fast);
}

.cob-bucket:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft-lg);
  color: inherit;
}

/* El tramo abierto se marca por dentro y no solo por el borde: con cinco
   tarjetas en fila, un borde de color mas ya lo lleva la que tiene deuda. */
.cob-bucket--activa {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
}

@media (prefers-reduced-motion: reduce) {
  .cob-bucket { transition: none !important; }
  .cob-bucket:hover { transform: none; }
}