/* =============================================================================
   Ammia Core · Puente temporal para las pantallas actuales (PLAN_MENU_LATERAL §9, F6)

   Las pantallas siguen en Bootstrap 3 (dentro de .content-page y en los modales). Este archivo
   solo cambia COLOR y TIPOGRAFÍA, tomados de los tokens del DS, para que se vean homogéneas con
   el shell y con la marca del tenant (--brand-*). NO cambia tamaños, espaciados, grid ni HTML.

   - Sin capa: debe ganarle a Bootstrap. index.html lo carga antes que el CSS de Angular, por eso
     cada regla lleva el prefijo .content-page / .modal (una clase más de especificidad).
   - El CSS de cada componente (encapsulado) se carga después y conserva lo que define: el puente
     solo reemplaza los valores por defecto de Bootstrap y las clases globales del tema.
   - Cada bloque está en REGISTRO_AJUSTES.md (AJ-10 a AJ-16). Se retira por tandas.
   - Para desactivarlo: quitar su <link> de index.html.
   ============================================================================= */

/* AJ-10 · RETIRADO (15 oct, QA). Cambiar la letra del contenido a DM Sans, más ancha que Gilroy,
   partía textos en dos líneas y desbordaba las tarjetas de alto fijo (p. ej. Clientes: height 650px
   en línea). Las pantallas actuales conservan Gilroy hasta su tanda. */

/* AJ-11 · Botón principal del tema (.btn-srx, 753 usos): de #326173 a la marca del tenant.
   El tema lo declara con !important; aquí también, con una clase más. */
.content-page .btn-srx,
.modal .btn-srx {
  color: var(--brand-on-primary) !important;
  background-color: var(--brand-primary) !important;
}
.content-page button.btn-srx:hover,
.modal button.btn-srx:hover {
  color: var(--brand-on-primary) !important;
  background-color: var(--brand-primary-hover) !important;
}

/* AJ-12 · Botón secundario del tema (.btn-custom, 929 usos): de #EFF1F7 / #448AA6 a los tonos
   suaves de la marca. */
.content-page .btn-custom,
.modal .btn-custom {
  background-color: var(--brand-soft);
  border-color: var(--brand-soft);
  color: var(--brand-text);
}
.content-page .btn-custom:hover,
.content-page .btn-custom:focus,
.modal .btn-custom:hover,
.modal .btn-custom:focus {
  background-color: var(--brand-soft-strong);
  border-color: var(--brand-soft-strong);
  color: var(--brand-text);
}

/* AJ-13 · Botones de Bootstrap con color de marca (.btn-primary, .btn-link) y enlaces sin clase. */
.content-page .btn-primary,
.modal .btn-primary {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--brand-on-primary);
}
.content-page .btn-primary:hover,
.content-page .btn-primary:focus,
.modal .btn-primary:hover,
.modal .btn-primary:focus {
  background-color: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
  color: var(--brand-on-primary);
}
.content-page .btn-primary:active,
.content-page .btn-primary.active,
.modal .btn-primary:active,
.modal .btn-primary.active {
  background-color: var(--brand-primary-active);
  border-color: var(--brand-primary-active);
  color: var(--brand-on-primary);
}
.content-page .btn-link,
.content-page a:not([class]),
.modal .btn-link,
.modal a:not([class]) {
  color: var(--brand-text);
}

/* AJ-14 · Títulos y encabezados del tema: .title-section (#448AA6) y .thead-srx (#011641).
   Algunas pantallas pintan .title-section en línea con shared.gSkin (#448AA6): !important lo iguala
   solo en lo visual; la variable y la lógica no cambian. */
.content-page .title-section {
  color: var(--brand-text) !important;
}
.content-page .thead-srx,
.modal .thead-srx {
  background-color: var(--brand-text-strong);
  color: var(--primitive-neutral-0);
}

/* AJ-15 · Formularios: etiquetas y foco con los tokens de campo del DS (sin cambiar tamaños). */
.content-page form label,
.modal form label {
  color: var(--text-secondary);
}
.content-page .form-control:focus,
.modal .form-control:focus {
  border-color: var(--field-border-focus);
  box-shadow: var(--focus-shadow);
}

/* AJ-16 · Pestañas y paginación de Bootstrap / ngx-bootstrap: activo con la marca. */
.content-page .nav-tabs > li.active > a,
.content-page .nav-tabs > li.active > a:hover,
.content-page .nav-tabs > li.active > a:focus {
  color: var(--brand-text);
}
.content-page .pagination > .active > a,
.content-page .pagination > .active > a:hover,
.content-page .pagination > .active > a:focus,
.content-page .pagination > .active > span {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--brand-on-primary);
}
.content-page .pagination > li > a {
  color: var(--brand-text);
}