/* =====================================================================
   MSAT — Sistema de diseño
   Base neutra y moderna con el color corporativo (naranjo) reservado para
   la acción principal y focos puntuales — no como relleno de superficies
   grandes (eso es lo que hacía ver la app "años 90"). Todo se aplica
   globalmente vía variables CSS: ninguna vista necesita cambios para
   heredar el tema.
   ===================================================================== */

@font-face {
  font-family: "Inter";
  src: url("/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/InterVariable-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Monoespaciada — solo para datos tabulares/códigos (montos, factores,
   códigos de instrumento): la variante de diseño 2024 usa una mono para que
   estos valores se alineen visualmente y se distingan del texto de UI. */
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/JetBrainsMono-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Crossfade nativo del navegador entre navegaciones de página completa
   (sin JS; los navegadores sin soporte simplemente ignoran la regla). */
@view-transition {
  navigation: auto;
}

:root {
  /* --- Primario: teal — acción principal, foco, estado activo de nav --- */
  --msat-primary: #0f766e;
  --msat-primary-hover: #0b5f58;
  --msat-primary-active: #094e47;
  --msat-primary-soft: #e1f3f1;

  /* --- Naranjo: reservado exclusivamente a estado "advertencia" (ya no es
     el acento principal — ver --msat-primary arriba) --- */
  --msat-orange: #e66617;
  --msat-orange-hover: #cf5910;
  --msat-orange-active: #b34e10;
  --msat-orange-soft: #fdeee2;

  /* --- Verde: reservado exclusivamente a estado "éxito" --- */
  --msat-green: #2e7d32;
  --msat-green-soft: #eaf5ea;

  /* --- Neutros: la base real de la interfaz --- */
  --msat-ink: #1f2328;
  --msat-ink-soft: #57606a;
  --msat-gray: #6e7781;
  --msat-border: #e1e4f0;
  --msat-border-strong: #c9cfe6;
  --msat-surface: #ffffff;
  --msat-page-bg: #eef1fb;
  --msat-surface-sunken: #eaedf9;
  --msat-sidebar-bg: #ffffff;
  --msat-table-head-bg: #f3f5fc;
  --msat-table-head-fg: #1f2328;

  /* --- Superficie destacada (hero de encabezado de módulo, ver .page-hero) --- */
  --msat-hero-bg: linear-gradient(135deg, #e9edfc, #eef3fc);
  --msat-hero-border: #dde3f7;

  /* --- Semántico --- */
  --msat-success: var(--msat-green);
  --msat-warning: var(--msat-orange);
  --msat-danger: #c53030;
  --msat-danger-soft: #fbe4e2;
  --msat-info: #3182ce;
  --msat-info-soft: #e3edfa;

  --msat-focus-ring: rgba(15, 118, 110, 0.28);
  --msat-shadow-sm: 0 1px 2px rgba(31, 35, 40, 0.07), 0 1px 1px rgba(31, 35, 40, 0.04);
  --msat-shadow-md: 0 4px 10px rgba(31, 35, 40, 0.08), 0 1px 3px rgba(31, 35, 40, 0.06);
  --msat-shadow-header: 0 1px 0 rgba(31, 35, 40, 0.03), 0 2px 8px rgba(31, 35, 40, 0.04);
  --msat-radius: 0.5rem;
  --msat-radius-lg: 0.85rem;
  --msat-radius-xl: 1.1rem;
  --msat-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  margin-bottom: 60px;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  color: var(--msat-ink);
  background: var(--msat-page-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: var(--msat-ink);
  text-wrap: balance;
}

table, .table {
  font-variant-numeric: tabular-nums;
}

/* --- Foco: anillo de marca en vez del azul por defecto de Bootstrap --- */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus,
.form-select:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--msat-focus-ring);
  border-color: var(--msat-primary);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* =====================================================================
   Indicador de carga — barra superior + spinner de botón (site.js)
   ===================================================================== */

.msat-loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform: translateX(-100%) scaleX(0.4);
  transform-origin: left;
  /* Los 3 colores de marca de la app (mismos tokens que .kpi-card) en vez de
     un teal plano — la barra se siente "de MSAT", no un spinner genérico. */
  background: linear-gradient(90deg, var(--msat-info), var(--msat-orange), var(--msat-green));
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
}

.msat-loading-bar.is-active {
  opacity: 1;
  animation: msat-loading-progress 1s ease-in-out infinite;
}

@keyframes msat-loading-progress {
  0% {
    transform: translateX(-100%) scaleX(0.4);
  }
  50% {
    transform: translateX(10%) scaleX(0.6);
  }
  100% {
    transform: translateX(100%) scaleX(0.4);
  }
}

.btn.is-loading {
  pointer-events: none;
  opacity: 0.75;
}

/* Overlay a pantalla completa — la barra superior avisa que hay una carga en
   curso, pero no impide seguir clickeando la pantalla vieja mientras llega la
   nueva. Este overlay bloquea la interacción durante esa espera. */
.msat-loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.55);
  z-index: 1990;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.msat-loading-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

.msat-loading-overlay-spinner {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  /* Anillo con los 3 colores de marca (--msat-info/--msat-orange/--msat-green)
     en vez de un solo color — mismo criterio que la barra superior. */
  background: conic-gradient(var(--msat-info), var(--msat-orange), var(--msat-green), var(--msat-info));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  animation: msat-spin 0.7s linear infinite;
}

.msat-btn-spinner {
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  margin-right: 0.45rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -0.15em;
  animation: msat-spin 0.6s linear infinite;
}

@keyframes msat-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .msat-loading-bar.is-active {
    animation: none;
    opacity: 1;
    transform: translateX(0) scaleX(1);
  }

  .msat-btn-spinner,
  .msat-loading-overlay-spinner {
    animation: none;
  }
}

/* =====================================================================
   Botones — remapeo de variables por-componente de Bootstrap 5
   ===================================================================== */

.btn {
  font-weight: 500;
  border-radius: var(--msat-radius);
  box-shadow: var(--msat-shadow-sm);
  transition: box-shadow 0.15s ease, transform 0.05s ease;
}

.btn:hover {
  box-shadow: var(--msat-shadow-md);
}

.btn:active {
  box-shadow: var(--msat-shadow-sm);
  transform: translateY(1px);
}

.btn-link {
  box-shadow: none;
}

.btn-primary {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: var(--msat-primary);
  --bs-btn-border-color: var(--msat-primary);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--msat-primary-hover);
  --bs-btn-hover-border-color: var(--msat-primary-hover);
  --bs-btn-focus-shadow-rgb: 15, 118, 110;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--msat-primary-active);
  --bs-btn-active-border-color: var(--msat-primary-active);
  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: var(--msat-primary);
  --bs-btn-disabled-border-color: var(--msat-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--msat-primary-active);
  --bs-btn-border-color: var(--msat-primary);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--msat-primary);
  --bs-btn-hover-border-color: var(--msat-primary);
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--msat-primary-hover);
  --bs-btn-active-border-color: var(--msat-primary-hover);
  --bs-btn-focus-shadow-rgb: 15, 118, 110;
}

.btn-secondary, .btn-outline-secondary {
  --bs-btn-color: var(--msat-ink-soft);
  --bs-btn-border-color: var(--msat-border-strong);
  --bs-btn-hover-color: var(--msat-ink);
  --bs-btn-hover-bg: var(--msat-surface-sunken);
  --bs-btn-hover-border-color: var(--msat-border-strong);
  --bs-btn-active-color: var(--msat-ink);
  --bs-btn-active-bg: var(--msat-border);
  --bs-btn-active-border-color: var(--msat-border-strong);
}

.btn-secondary {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: var(--msat-gray);
  --bs-btn-border-color: var(--msat-gray);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #565e67;
  --bs-btn-hover-border-color: #565e67;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #474e56;
  --bs-btn-active-border-color: #474e56;
}

/* =====================================================================
   Pestañas / pills de navegación
   ===================================================================== */

.nav-tabs {
  --bs-nav-tabs-link-active-color: var(--msat-ink);
  --bs-nav-tabs-link-active-border-color: var(--msat-border) var(--msat-border) var(--msat-surface);
  border-bottom-color: var(--msat-border);
}

.nav-tabs .nav-link {
  color: var(--msat-ink-soft);
  font-weight: 500;
}

.nav-tabs .nav-link.active {
  border-top: 2px solid var(--msat-primary);
  border-bottom-color: var(--msat-surface);
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  background-color: var(--msat-primary);
  color: #ffffff;
}

/* =====================================================================
   Alertas / badges
   ===================================================================== */

.alert-warning {
  --bs-alert-color: #7a3c0c;
  --bs-alert-bg: var(--msat-orange-soft);
  --bs-alert-border-color: #f0c9a3;
}

.alert-success {
  --bs-alert-color: #1e5e22;
  --bs-alert-bg: var(--msat-green-soft);
  --bs-alert-border-color: #c3e2c4;
}

.bg-success {
  background-color: var(--msat-success) !important;
}

.badge {
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 999px;
  padding-left: 0.65em;
  padding-right: 0.65em;
}

/* Estado de negocio en tablas (SII, certificados, vencimientos) — mismos
   tonos "soft" que .alert-warning/.alert-success para no competir
   visualmente con --msat-orange como color de acción principal. */
.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  font-size: 0.78rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
}

.badge-status-success {
  background: var(--msat-green-soft);
  color: #1e5e22;
}

.badge-status-warning {
  background: var(--msat-orange-soft);
  color: #7a3c0c;
}

.badge-status-danger {
  background: var(--msat-danger-soft);
  color: #7a1f1a;
}

.badge-status-neutral {
  background: var(--msat-surface-sunken);
  color: var(--msat-ink-soft);
}

/* =====================================================================
   Tarjetas y tablas
   ===================================================================== */

.card {
  border-color: var(--msat-border);
  border-radius: var(--msat-radius-lg);
  box-shadow: var(--msat-shadow-sm);
  /* Sin esto, cualquier contenido que exceda el ancho de la tarjeta (una tabla
     ancha, el wrapper de DataTables) queda visible por fuera del borde
     redondeado en vez de recortarse limpio contra el — "la tarjeta se rompe". */
  overflow: hidden;
}

.card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--msat-border);
  border-top-left-radius: var(--msat-radius-lg) !important;
  border-top-right-radius: var(--msat-radius-lg) !important;
  font-weight: 600;
}

/* DataTables 2.x (site.js) envuelve buscador/paginacion en sus propios
   <div class="row"> de Bootstrap, que traen margenes laterales negativos por
   diseno (para cancelar el padding de sus columnas hijas). Esos <div> quedan
   anidados dentro de .table-responsive (overflow-x: auto) — sin esto, el
   margen negativo se sale del contenedor con scroll y el resultado visual es
   que la tarjeta "se rompe" (el buscador/paginacion se ve cortado o
   desalineado), incluso en tablas que no necesitan scroll horizontal.
*/
.table-responsive .dt-container > .row {
  margin-left: 0;
  margin-right: 0;
}

/* Alineacion y color del toolbar de DataTables — por defecto, "registros",
   "buscar" y "exportar" quedan cada uno con su propio alto/margen (label +
   select vs. input vs. boton no calzan en la misma linea de base), y la
   paginacion activa usa el azul de Bootstrap en vez del naranjo de marca.
   Se reemplaza por un unico renglon de controles arriba y uno abajo,
   alineados por baseline, con los tokens --msat-*. */
.dt-container .dt-layout-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.dt-container .dt-layout-row:first-child {
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--msat-border);
}

.dt-container table.dataTable + .dt-layout-row {
  padding-top: 0.75rem;
  margin-top: 0.75rem;
  border-top: 1px solid var(--msat-border);
}

.dt-length label,
.dt-search label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.82rem;
  color: var(--msat-ink-soft);
  white-space: nowrap;
}

.dt-length select {
  margin: 0 !important;
}

.dt-search {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.dt-search input {
  margin: 0 !important;
  min-width: 200px;
}

.dt-buttons .btn {
  margin: 0;
}

.dt-info {
  padding-top: 0;
  color: var(--msat-ink-soft);
  font-size: 0.82rem;
}

.dt-paging .pagination {
  margin: 0;
  --bs-pagination-color: var(--msat-ink-soft);
  --bs-pagination-bg: transparent;
  --bs-pagination-border-color: var(--msat-border);
  --bs-pagination-hover-color: var(--msat-ink);
  --bs-pagination-hover-bg: var(--msat-surface-sunken);
  --bs-pagination-hover-border-color: var(--msat-border-strong);
  --bs-pagination-focus-color: var(--msat-ink);
  --bs-pagination-focus-bg: var(--msat-surface-sunken);
  --bs-pagination-focus-box-shadow: 0 0 0 0.2rem var(--msat-focus-ring);
  --bs-pagination-active-color: #ffffff;
  --bs-pagination-active-bg: var(--msat-primary);
  --bs-pagination-active-border-color: var(--msat-primary);
  --bs-pagination-disabled-color: var(--msat-gray);
  --bs-pagination-disabled-bg: transparent;
  --bs-pagination-disabled-border-color: var(--msat-border);
}

.dt-paging .page-link {
  border-radius: var(--msat-radius);
  margin-left: 3px;
}

.card-header-rich {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.card-header-rich .card-header-icon {
  color: var(--msat-ink-soft);
  font-size: 1.15rem;
  line-height: 1.35;
  flex-shrink: 0;
}

.card-header-title {
  font-weight: 600;
  color: var(--msat-ink);
  line-height: 1.3;
}

.card-header-subtitle {
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--msat-ink-soft);
  margin-top: 0.1rem;
}

.table {
  --bs-table-border-color: var(--msat-border);
}

.table > thead {
  background-color: var(--msat-table-head-bg);
}

.table > thead th {
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--msat-ink-soft);
  background-color: var(--msat-table-head-bg);
  border-bottom: 1px solid var(--msat-border-strong);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.table-hover > tbody > tr:hover > * {
  background-color: var(--msat-surface-sunken);
}

/* =====================================================================
   Tarjetas KPI (dashboard consolidado de Clientes) — el legado usaba
   colores de marca genericos (teal/naranjo/verde); aca se usan los mismos
   3 tokens de marca de toda la app (--msat-info, --msat-orange, --msat-green)
   para que el dashboard se sienta parte del mismo sistema, no un modulo aparte.
   ===================================================================== */

.kpi-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.35rem;
  border-radius: var(--msat-radius-lg);
  color: #ffffff;
  box-shadow: var(--msat-shadow-md);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(31, 35, 40, 0.18);
}

.kpi-card-total {
  background: linear-gradient(135deg, #2f6690, var(--msat-info));
}

.kpi-card-generadas {
  background: linear-gradient(135deg, var(--msat-orange-active), var(--msat-orange));
}

.kpi-card-pendientes {
  background: linear-gradient(135deg, #1e5e22, var(--msat-green));
}

.kpi-card-number {
  font-size: 2.15rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.kpi-card-label {
  font-size: 0.85rem;
  opacity: 0.92;
}

.kpi-card-icon {
  font-size: 2rem;
  opacity: 0.85;
  flex-shrink: 0;
}

.kpi-chart-container {
  position: relative;
  height: 320px;
}

/* Badge "Contratado" (estado por defecto de las matrices entidad x DJ/certificado)
   — el mismo tono que --msat-info, para diferenciarlo de los badges de estado
   real (badge-status-*) que aparecen al activar "Ver Estados". */
.badge-contratado {
  display: inline-block;
  background: var(--msat-info);
  color: #ffffff;
  font-weight: 600;
  font-size: 0.72rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
}

/* =====================================================================
   App shell: header + sidebar colapsable
   ===================================================================== */

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

.app-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1.25rem;
  background: var(--msat-surface);
  box-shadow: var(--msat-shadow-header);
  position: sticky;
  top: 0;
  z-index: 1030;
}

.sidebar-toggle-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 0.35rem;
  transition: background-color 0.15s ease;
}

.sidebar-toggle-btn:hover {
  background: var(--msat-surface-sunken);
}

.sidebar-toggle-btn span {
  display: block;
  height: 2px;
  border-radius: 1px;
  background: var(--msat-ink-soft);
}

.app-brand img {
  height: 36px;
}

.app-header-spacer {
  flex: 1;
}

.app-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.app-user-name {
  font-weight: 600;
  color: var(--msat-ink);
}

.app-user-meta {
  font-size: 0.78rem;
}

.app-user-toggle {
  padding: 0.25rem 0.4rem;
  border-radius: var(--msat-radius);
  transition: background-color 0.12s ease;
}

.app-user-toggle:hover {
  background: var(--msat-surface-sunken);
}

.app-body {
  display: flex;
  flex: 1;
}

.app-sidebar {
  display: flex;
  flex-direction: column;
  width: 270px;
  flex-shrink: 0;
  background: var(--msat-sidebar-bg);
  border-right: 1px solid var(--msat-border);
  transition: width 0.2s ease, padding 0.2s ease;
  padding: 0;
}

.app-shell.sidebar-collapsed .app-sidebar {
  width: 0;
  padding: 0;
  overflow: hidden;
  border-right: none;
}

.app-content {
  flex: 1;
  padding: 1.75rem;
  min-width: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .app-content {
    animation: msat-fade-in 0.18s ease-out;
  }
}

@keyframes msat-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sidebar-nav .sidebar-link {
  color: var(--msat-ink-soft);
  font-weight: 500;
  padding: 0.6rem 0.9rem;
  border-radius: var(--msat-radius);
  border-left: 3px solid transparent;
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.sidebar-nav .sidebar-link:hover {
  background: var(--msat-surface-sunken);
  color: var(--msat-ink);
}

.sidebar-nav .sidebar-link[aria-expanded="true"],
.sidebar-nav .sidebar-link.active {
  color: var(--msat-ink);
  border-left-color: var(--msat-primary);
  font-weight: 700;
}

.sidebar-nav .sidebar-submenu {
  padding-left: 0.5rem;
  background: transparent;
}

.sidebar-caret {
  font-size: 0.7rem;
  color: var(--msat-gray);
  transition: transform 0.15s ease;
}

.sidebar-link[aria-expanded="true"] .sidebar-caret {
  transform: rotate(180deg);
}

.app-footer {
  margin-top: auto;
  padding: 1rem;
  border-top: 1px solid var(--msat-border);
  background: var(--msat-surface);
}

/* =====================================================================
   Login — panel dividido; único punto donde el acento de marca se usa
   como superficie grande, a propósito, como "momento de marca" de la
   pantalla de acceso (no se repite en el resto de la app).
   ===================================================================== */

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--msat-page-bg);
  padding: 2rem 1rem;
}

.login-shell {
  display: flex;
  width: 100%;
  max-width: 960px;
  min-height: 540px;
  background: var(--msat-surface);
  border-radius: var(--msat-radius-lg);
  box-shadow: var(--msat-shadow-md);
  overflow: hidden;
}

.login-visual {
  flex: 1 1 45%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem;
  background: linear-gradient(135deg, #146d76 0%, #0a4b52 100%);
  color: #ffffff;
  overflow: hidden;
}

.login-visual::before,
.login-visual::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.login-visual::before {
  width: 240px;
  height: 240px;
  background: rgba(230, 102, 23, 0.28);
  top: -70px;
  right: -70px;
}

.login-visual::after {
  width: 170px;
  height: 170px;
  background: rgba(255, 255, 255, 0.08);
  bottom: -50px;
  left: -40px;
}

.login-visual-content {
  position: relative;
  z-index: 1;
}

.login-visual-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 2.5rem;
  justify-content: center;
}

.login-visual-brand img {
  height: 60px;
}

.login-visual h2 {
  font-size: 1.6rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.75rem;
}

.login-visual p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  max-width: 300px;
  line-height: 1.5;
}

.login-form-panel {
  flex: 1 1 55%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem;
}

.login-form-panel h1 {
  color: var(--msat-ink);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.login-form-panel .login-subtitle {
  color: var(--msat-ink-soft);
  font-size: 0.9rem;
  margin-bottom: 2rem;
}

.login-msat-mark {
  width: 200px;
  margin-bottom: 1.5rem;
  align-self: center;
}

.btn-microsoft {
  --bs-btn-color: var(--msat-ink);
  --bs-btn-bg: #ffffff;
  --bs-btn-border-color: var(--msat-border-strong);
  --bs-btn-hover-color: var(--msat-ink);
  --bs-btn-hover-bg: var(--msat-surface-sunken);
  --bs-btn-hover-border-color: var(--msat-border-strong);
  --bs-btn-active-color: var(--msat-ink);
  --bs-btn-active-bg: var(--msat-border);
  padding: 0.65rem 1.25rem;
  font-weight: 600;
}

@media (max-width: 767.98px) {
  .login-shell {
    min-height: 0;
  }
}

/* =====================================================================
   Datos tabulares — monoespaciada para montos/factores/códigos, igual que
   el resto del sistema numérico (font-variant-numeric ya alinea los dígitos
   de la fuente de UI; esto además distingue visualmente "esto es un dato",
   no texto de interfaz).
   ===================================================================== */

.font-mono {
  font-family: var(--msat-font-mono);
  font-variant-numeric: tabular-nums;
}

/* =====================================================================
   Breadcrumb — ruta de navegación sobre el título de página.
   ===================================================================== */

.msat-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--msat-gray);
}

.msat-breadcrumb .msat-breadcrumb-current {
  color: var(--msat-primary);
}

.msat-breadcrumb .bi-chevron-right {
  font-size: 0.65rem;
  color: var(--msat-border-strong);
}

/* =====================================================================
   Encabezado de página — variante simple (título + descripción, sin
   superficie propia) y variante "hero" (superficie destacada con
   eyebrow/ícono, para pantallas de módulo con acciones primarias).
   ===================================================================== */

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.page-header h1 {
  margin-bottom: 0.35rem;
}

.page-header-description {
  color: var(--msat-ink-soft);
  max-width: 60ch;
  margin-bottom: 0;
}

.page-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.page-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
  background: var(--msat-hero-bg);
  border: 1px solid var(--msat-hero-border);
  border-radius: var(--msat-radius-xl);
}

.page-hero-body h1 {
  margin: 0.35rem 0;
}

.page-hero-description {
  color: var(--msat-ink-soft);
  max-width: 56ch;
  margin-bottom: 0;
}

.page-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  flex-shrink: 0;
}

.eyebrow-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--msat-primary-active);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.eyebrow-chip img {
  height: 16px;
}

/* =====================================================================
   Info-tip-card — tarjeta explicativa de pantalla (ícono + título + texto),
   uso puntual en pantallas con flujo no obvio (Home, Consulta en Línea).
   ===================================================================== */

.info-tip-card {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  background: var(--msat-surface);
  border: 1px solid var(--msat-border);
  border-radius: var(--msat-radius-lg);
  padding: 1rem 1.1rem;
  height: 100%;
}

.info-tip-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 1.1rem;
}

.info-tip-icon-primary { background: var(--msat-primary-soft); color: var(--msat-primary-active); }
.info-tip-icon-success { background: var(--msat-green-soft); color: var(--msat-green); }

.info-tip-title {
  font-weight: 600;
  color: var(--msat-ink);
  margin-bottom: 0.2rem;
}

.info-tip-text {
  font-size: 0.85rem;
  color: var(--msat-ink-soft);
  margin-bottom: 0;
}

/* =====================================================================
   Avatar-chip — iniciales circulares (emisor, usuario) con paleta cíclica.
   ===================================================================== */

.avatar-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
}

.avatar-chip-a { background: var(--msat-primary-soft); color: var(--msat-primary-active); }
.avatar-chip-b { background: var(--msat-orange-soft); color: var(--msat-orange-active); }
.avatar-chip-c { background: var(--msat-surface-sunken); color: var(--msat-ink-soft); }
.avatar-chip-d { background: var(--msat-info-soft); color: #1d4e7d; }

/* =====================================================================
   Tag-pill — etiqueta de categoría corta (moneda, tipo) con color estable
   por valor conocido, no por posición — para que la misma moneda siempre
   se vea igual en toda la tabla.
   ===================================================================== */

.tag-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--msat-font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--msat-surface-sunken);
  color: var(--msat-ink-soft);
}

.tag-pill-a { background: var(--msat-primary-soft); color: var(--msat-primary-active); }
.tag-pill-b { background: var(--msat-orange-soft); color: var(--msat-orange-active); }
.tag-pill-c { background: var(--msat-info-soft); color: #1d4e7d; }

/* Código/identificador dentro de una tabla (ej. nombre de instrumento) —
   mismo tratamiento visual que un tag-pill pero neutro, para datos que son
   "un código", no una categoría. */
.code-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--msat-font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 0.4rem;
  background: var(--msat-info-soft);
  color: #1d4e7d;
}

a.code-pill {
  text-decoration: none;
  transition: background-color 0.12s ease;
}

a.code-pill:hover {
  background: #d5e6f8;
}

/* =====================================================================
   Header v2 — marca (donde antes iba el buscador, ver _Layout.cshtml),
   notificaciones y el dropdown "Panel de Control" (menú de cuenta).
   ===================================================================== */

.app-notify-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--msat-ink-soft);
  font-size: 1.15rem;
  transition: background-color 0.12s ease;
}

.app-notify-btn:hover {
  background: var(--msat-surface-sunken);
}

/* =====================================================================
   Sidebar v2 — nav plana de nivel superior con ícono, y tarjeta de usuario
   anclada abajo (indicador de sesión — el menú de cuenta vive en el
   header, ver "Panel de Control" arriba).
   ===================================================================== */

.sidebar-top-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.9rem;
  border-radius: var(--msat-radius);
  color: var(--msat-ink-soft);
  font-weight: 600;
  font-size: 0.92rem;
  border-left: none !important;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.sidebar-top-link i {
  font-size: 1.1rem;
  width: 1.25rem;
  text-align: center;
  flex-shrink: 0;
}

.sidebar-top-link:hover {
  background: var(--msat-surface-sunken);
  color: var(--msat-ink);
}

.sidebar-top-link[aria-expanded="true"],
.sidebar-top-link.active {
  background: var(--msat-primary-soft);
  color: var(--msat-primary-active);
  font-weight: 700;
}

.sidebar-top-link .sidebar-caret {
  margin-left: auto;
}

.sidebar-nav {
  flex: 1;
  padding: 0 0.75rem;
  overflow-y: auto;
}

.sidebar-user-card {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0.75rem;
  padding: 0.6rem 0.75rem;
  flex-shrink: 0;
}

.sidebar-user-avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

.sidebar-user-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--msat-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-status {
  font-size: 0.72rem;
  color: var(--msat-ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-online {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  color: var(--msat-ink-soft);
}

.sidebar-user-online-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--msat-success, #16a34a);
  flex-shrink: 0;
}

.app-shell.sidebar-collapsed .sidebar-user-card {
  display: none;
}