/* ═══════════════════════════════════════════════════════════════════════════
   SGR · Capa visual — sidebar e indicadores
   ═══════════════════════════════════════════════════════════════════════════

   Va ENCIMA de la plantilla, sin tocar el marcado. El _Layout tiene 1.195 líneas
   y 156 vistas cuelgan de él: reescribir el HTML del menú para cambiar su aspecto
   sería arriesgar todas ellas por un color.

   Referencia de estilo: paneles tipo ECME —fondo claro, bordes finos en lugar de
   sombras, radios amplios, etiquetas pequeñas en mayúsculas, cifras grandes con
   dígitos de ancho fijo—. Paleta: la oficial de SGR Residencia.

   La plantilla traía --primary-bg-color: #032ab8, que es el azul ANTIGUO, y un
   --primary-transparentcolor turquesa que no correspondía a ningún azul. Aquí se
   alinean los dos con la línea gráfica oficial.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Paleta oficial SGR Residencia */
  --sgr-azul:       #005deb;
  --sgr-azul-osc:   #0046b0;
  --sgr-navy:       #002b6b;
  --sgr-turquesa:   #29d9df;
  --sgr-dorado:     #f8b810;
  --sgr-tinta:      #1a1a2e;
  --sgr-apagado:    #6b7a99;
  --sgr-linea:      #e4ebf7;
  --sgr-fondo:      #f4f5f9;
  --sgr-panel:      #ffffff;
  --sgr-pale:       #eef5ff;
  --sgr-alerta:     #e43d4f;
  --sgr-verde:      #14a85a;

  /* Se reescriben las de la plantilla para que TODO el portal siga la misma línea */
  --primary-bg-color:        #005deb;
  --primary-bg-hover:        #0046b0;
  --primary-bg-border:       #005deb;
  --primary-transparentcolor: rgba(0, 93, 235, .12);
  --primary01:               rgba(0, 93, 235, .10);
  --primary02:               rgba(0, 93, 235, .20);
  --primary03:               rgba(0, 93, 235, .30);
}

body { background-color: var(--sgr-fondo); }

/* ── Sidebar ───────────────────────────────────────────────────────────────
   Fondo claro con un borde fino a la derecha. La marca no vive en un bloque
   de color: vive en el elemento activo y en el filo superior. */
.app-sidebar {
  background: var(--sgr-panel) !important;
  border-right: 1px solid var(--sgr-linea) !important;
  box-shadow: none !important;
}
.main-sidebar-header {
  background: var(--sgr-panel) !important;
  border-bottom: 1px solid var(--sgr-linea) !important;
}
/* Filo de marca: las tres bandas en la proporción 58/26/16 */
.main-sidebar-header::after {
  content: ""; display: block; height: 3px; margin: 0 -30px;
  background: linear-gradient(to right,
    var(--sgr-azul) 0 58%, var(--sgr-turquesa) 58% 84%, var(--sgr-dorado) 84%);
}

/* Rótulos de sección: pequeños, en mayúsculas y espaciados. Ordenan sin gritar. */
.side-item-category {
  font-size: 10px !important; font-weight: 700 !important;
  letter-spacing: 1.3px !important; text-transform: uppercase !important;
  color: #93a0bd !important; padding: 20px 22px 8px !important; opacity: 1 !important;
}

.side-menu { padding: 6px 10px !important; }

.side-menu__item {
  border-radius: 10px !important;
  margin: 1px 0 !important;
  padding: 10px 12px !important;
  color: #4a5570 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  border-left: 0 !important;              /* la plantilla marcaba con una barra */
  transition: background-color .14s ease, color .14s ease;
}
.side-menu__item:hover,
.side-menu__item:focus {
  background: #f3f7ff !important;
  color: var(--sgr-azul) !important;
}
/* Activo: pastilla suave y texto de marca. Sin bloque de color saturado. */
.side-menu__item.active,
.slide.sgr-abierto > .side-menu__item {
  background: var(--sgr-pale) !important;
  color: var(--sgr-azul-osc) !important;
  font-weight: 700 !important;
}
.side-menu__icon {
  width: 19px !important; height: 19px !important;
  margin-right: 11px !important;
  fill: currentColor !important; color: inherit !important;
  opacity: .85;
}
.side-menu__item.active .side-menu__icon { opacity: 1; }
.side-menu__label { color: inherit !important; }
.angle { opacity: .5; font-size: 11px !important; }

/* Submenú: se apoya en una guía vertical en vez de repetir fondos */
.slide-menu {
  margin-left: 30px !important;
  border-left: 1.5px solid var(--sgr-linea) !important;
  background: transparent !important;
}
.slide-item {
  padding: 7px 14px !important;
  font-size: 13px !important;
  color: #6b7a99 !important;
  border-radius: 0 8px 8px 0 !important;
}
.slide-item:hover { background: #f3f7ff !important; color: var(--sgr-azul) !important; }
.slide-item.active {
  color: var(--sgr-azul-osc) !important; font-weight: 700 !important;
  background: var(--sgr-pale) !important;
}

/* ── Cabecera ─────────────────────────────────────────────────────────────── */
.main-header {
  background: var(--sgr-panel) !important;
  border-bottom: 1px solid var(--sgr-linea) !important;
  box-shadow: none !important;
}

/* ── Tarjetas e indicadores ───────────────────────────────────────────────── */
.card {
  background: var(--sgr-panel);
  border: 1px solid var(--sgr-linea) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--sgr-linea) !important;
  padding: 16px 20px !important;
}
.card-title { font-weight: 800 !important; letter-spacing: -.2px; color: var(--sgr-tinta); }

/* ── La tarjeta de métrica ─────────────────────────────────────────────────────

   Reescrita. El intento anterior fallaba por una razón que no se ve en el marcado:
   la plantilla declara `.circle-icon { position:absolute; top:40px; right:40px }`.
   Al estar posicionado en absoluto, los márgenes que le puse no hacían nada, y al
   reducir el alto de la tarjeta el icono se salía por abajo y quedaba cortado por
   el `overflow:hidden`. Ahora se ancla arriba a la derecha con su propio offset.

   La rejilla también cambia. El marcado usa `col-md-4`, que deja huérfana la cuarta
   tarjeta de un grupo de cuatro. Con `:has()` se convierte la fila en una rejilla
   que se ajusta al ancho disponible: cuatro en pantalla amplia, dos en tableta, una
   en móvil, y sin huecos. Si el navegador no soporta `:has()` no pasa nada — se
   queda la fila de tres de siempre.
   ───────────────────────────────────────────────────────────────────────────── */

.row:has(> [class*="col-"] > .card.sales-card) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 14px;
  margin: 0 0 14px 0 !important;
}
.row:has(> [class*="col-"] > .card.sales-card) > [class*="col-"] {
  width: 100% !important; max-width: 100% !important;
  flex: none !important; padding: 0 !important;
}
.row:has(> [class*="col-"] > .card.sales-card) > [class*="col-"] > .card {
  height: 100% !important; margin-bottom: 0 !important;
}

.card.sales-card {
  position: relative;
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.card.sales-card:hover {
  border-color: #c1d5f7 !important;
  box-shadow: 0 4px 14px rgba(0, 43, 107, .07) !important;
  transform: translateY(-2px);
}
.card.sales-card a { text-decoration: none !important; display: block; color: inherit; }

/* La plantilla mete el contenido en col-8 / col-4 con paddings de 4 unidades.
   Se compacta: la tarjeta es un indicador, no una sección. */
.card.sales-card .row { margin: 0 !important; }
.card.sales-card .col-8 { width: 100% !important; flex: 0 0 100% !important; padding: 0 !important; }
.card.sales-card .col-8 > div { padding: 14px 66px 14px 16px !important; }
/* CORREGIDO. Aquí ponía `display:none` en esta columna para recuperar el ancho,
   pero el icono es HIJO de ella: ocultarla lo quitaba del render, por muy absoluto
   que estuviera su posicionamiento. Se le quita el ancho sin ocultarla. */
.card.sales-card .col-4 {
  width: 0 !important; flex: 0 0 0 !important;
  padding: 0 !important; overflow: visible !important;
}

.card.sales-card h6 {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .4px !important;
  text-transform: uppercase !important;
  color: #93a0bd !important;
  line-height: 1.45 !important;
  /* Dos líneas reservadas: así la cifra arranca a la misma altura en toda la fila,
     tenga el rótulo una línea o dos. */
  min-height: 2.7em !important;
  margin: 0 0 4px 0 !important;
}
.card.sales-card h4 {
  font-size: 25px !important;
  font-weight: 800 !important;
  letter-spacing: -.9px !important;
  color: var(--sgr-tinta) !important;
  /* Dígitos de ancho fijo: sin esto, dos indicadores en fila bailan al cambiar de cifra. */
  font-variant-numeric: tabular-nums;
  line-height: 1 !important;
  margin: 0 !important;
}

/* El icono: anclado arriba a la derecha, no a 40 px del borde superior. */
.circle-icon {
  position: absolute !important;
  top: 50% !important; right: 14px !important;
  transform: translateY(-50%) !important;
  width: 38px !important; height: 38px !important;
  border-radius: 11px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  margin: 0 !important;
  background: var(--sgr-pale) !important;
}
/* Filo inferior del color del icono. Es una pista visual, no un dato: no hay serie
   temporal detrás de estos contadores, así que dibujar una tendencia sería inventarla. */
.card.sales-card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--sgr-linea); opacity: .9;
}
.card.sales-card:has(.bg-primary-transparent)::after   { background: #005deb; }
.card.sales-card:has(.bg-danger-transparent)::after    { background: #e43d4f; }
.card.sales-card:has(.bg-warning-transparent)::after   { background: #f8b810; }
.card.sales-card:has(.bg-info-transparent)::after      { background: #29d9df; }
.card.sales-card:has(.bg-success-transparent)::after   { background: #14a85a; }
.card.sales-card:has(.bg-secondary-transparent)::after { background: #6b7a99; }

/* La plantilla fuerza line-height 2.4 en el glifo, que lo empuja fuera del cuadro. */
.circle-icon i { font-size: 17px !important; line-height: 1 !important; }

/* ── Tablas ───────────────────────────────────────────────────────────────── */
.table thead th {
  background: var(--sgr-navy) !important; color: #fff !important;
  font-size: 10.5px !important; text-transform: uppercase; letter-spacing: .5px;
  font-weight: 700 !important; border: 0 !important;
}
.table > :not(caption) > * > * { border-color: var(--sgr-linea) !important; }
.table-bordered { border-color: var(--sgr-linea) !important; }

/* ── Botones ──────────────────────────────────────────────────────────────── */
/* El :not() saca de aqui a los iconos de la barra de tablas. DataTables les pone
   btn btn-primary, y estas reglas llevan !important —hacen falta para ganarle a la
   plantilla—, asi que sin la exclusion pintaban de azul los iconos y les imponian
   su radio. Era mi propia regla peleandose consigo misma. */
.btn:not(.sgr-btn-tabla) { border-radius: 9px !important; font-weight: 600; }
.btn-primary:not(.sgr-btn-tabla) {
  background: var(--sgr-azul) !important; border-color: var(--sgr-azul) !important;
}
.btn-primary:not(.sgr-btn-tabla):hover, .btn-primary:not(.sgr-btn-tabla):focus {
  background: var(--sgr-azul-osc) !important; border-color: var(--sgr-azul-osc) !important;
}
.badge { border-radius: 6px !important; font-weight: 700; letter-spacing: .3px; }

/* ── Migas ────────────────────────────────────────────────────────────────── */
.main-content-title {
  font-weight: 900 !important; letter-spacing: -.7px !important;
  color: var(--sgr-tinta) !important;
}

/* ── Modo oscuro ──────────────────────────────────────────────────────────────
   La plantilla ya trae su modo oscuro; aquí solo se reajustan los tokens para
   que la capa no lo rompa. Sin esto, el sidebar quedaría blanco sobre un tema
   oscuro y el texto apagado dejaría de leerse. */
body.dark-theme {
  --sgr-panel:   #1c1f2c;
  --sgr-linea:   #2c3350;
  --sgr-fondo:   #14161f;
  --sgr-tinta:   #e9ecf5;
  --sgr-apagado: #93a0bd;
  --sgr-pale:    rgba(0, 93, 235, .18);
}
body.dark-theme .side-menu__item { color: #b6c0d8 !important; }
body.dark-theme .side-menu__item:hover { background: rgba(0,93,235,.12) !important; }
body.dark-theme .side-menu__item.active { color: #8ab0ff !important; }
body.dark-theme .slide-item { color: #9aa5c0 !important; }
body.dark-theme .card.sales-card h4 { color: #e9ecf5 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   Sidebar · movimiento y modo colapsado
   ═══════════════════════════════════════════════════════════════════════════

   La plantilla ya sabe colapsar —`.app.sidenav-toggled`, 233 reglas en style.css—
   y trae el botón en la cabecera. Lo que no tenía era movimiento: el ancho, las
   etiquetas y los submenús cambiaban de golpe. Aquí se les da transición y se
   ajusta el modo icono a los estilos nuevos.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Ancho y contenido acompañan al colapso. La misma curva y duración en los tres,
   o el contenido "persigue" al sidebar y se nota. */
.app-sidebar,
.main-content,
.main-header {
  transition: width .22s cubic-bezier(.4, 0, .2, 1),
              left .22s cubic-bezier(.4, 0, .2, 1),
              margin-left .22s cubic-bezier(.4, 0, .2, 1),
              padding-left .22s cubic-bezier(.4, 0, .2, 1) !important;
}

/* La etiqueta se desvanece antes de que el ancho termine de cerrarse; si se
   ocultara de golpe, se ve el texto cortado por el borde durante un instante. */
.side-menu__label,
.side-item-category,
.angle {
  transition: opacity .12s ease !important;
}

/* ── Modo icono ────────────────────────────────────────────────────────────── */
.app.sidenav-toggled .side-menu { padding: 6px 8px !important; }
.app.sidenav-toggled .side-menu__item {
  justify-content: center !important;
  padding: 11px 0 !important;
  border-radius: 11px !important;
}
.app.sidenav-toggled .side-menu__icon { margin-right: 0 !important; }
.app.sidenav-toggled .side-menu__label,
.app.sidenav-toggled .angle { opacity: 0 !important; }
/* Los rótulos de sección no caben en 60 px: se sustituyen por un separador. */
.app.sidenav-toggled .side-item-category {
  opacity: 0 !important; height: 1px !important;
  padding: 0 !important; margin: 10px 12px !important;
  overflow: hidden; background: var(--sgr-linea);
}
/* Al pasar el ratón, la plantilla reabre con `sidenav-toggled-open`: se recupera
   todo el estilo expandido para que no quede a medias. */
.app.sidenav-toggled.sidenav-toggled-open .side-menu__item { justify-content: flex-start !important; padding: 10px 12px !important; }
.app.sidenav-toggled.sidenav-toggled-open .side-menu__icon { margin-right: 11px !important; }
.app.sidenav-toggled.sidenav-toggled-open .side-menu__label,
.app.sidenav-toggled.sidenav-toggled-open .angle { opacity: 1 !important; }
.app.sidenav-toggled.sidenav-toggled-open .side-item-category {
  opacity: 1 !important; height: auto !important; background: none !important;
  padding: 20px 22px 8px !important; margin: 0 !important;
}

/* El botón de colapso, con sitio y respuesta al pasar por encima */
.app-sidebar__toggle {
  border-radius: 9px; transition: background-color .14s ease;
}
.app-sidebar__toggle:hover { background: #f3f7ff; }

/* ── Submenú ───────────────────────────────────────────────────────────────
   El comportamiento lo lleva sgr-sidebar.js, que escribe `height` en línea.
   Aquí SOLO va lo que no toca el JS: la transición y el aspecto. Nada de
   `display` ni de `max-height` con !important — eso fue lo que rompió el menú:
   la plantilla anima con jQuery escribiendo estilos en línea, y una hoja de
   estilos que pelee contra ellos o pierde o deja el submenú sin abrir. */
.slide-menu {
  overflow: hidden;
  height: 0;
  transition: height .22s cubic-bezier(.4, 0, .2, 1);
}
.slide.sgr-abierto > .slide-menu { /* el alto lo pone el JS, medido */ }

/* El chevrón gira en lugar de cambiar de icono */
.slide > .side-menu__item .angle {
  transition: transform .2s cubic-bezier(.4, 0, .2, 1) !important;
}
.slide.sgr-abierto > .side-menu__item .angle { transform: rotate(90deg); }

/* La sección abierta se distingue del resto sin gritar */
.slide.sgr-abierto > .side-menu__item {
  color: var(--sgr-azul-osc) !important;
  font-weight: 700 !important;
}

/* Marca de posición: una barra fina a la izquierda del activo. Reemplaza al
   bloque de color de la plantilla y sobrevive al modo icono. */
.side-menu__item.active::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 3px; height: 18px; margin-top: -9px;
  border-radius: 0 3px 3px 0; background: var(--sgr-azul);
}
.side-menu__item { position: relative; }

/* Quien pidió menos movimiento, menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  .app-sidebar, .main-content, .main-header,
  .side-menu__label, .side-item-category, .angle, .slide-menu,
  .slide > .side-menu__item .angle { transition: none !important; }
  .slide.sgr-abierto > .slide-menu > li { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Barra de herramientas de las tablas (DataTables Buttons)
   ═══════════════════════════════════════════════════════════════════════════
   27 tablas del portal usan #file-datatable, así que este bloque las alinea a
   todas. Los botones pasan a ser de icono: la palabra vive en el tooltip y en
   el aria-label, no ocupando ancho. Se agrupan como un único control segmentado
   —exportar a la izquierda, columnas separado— para que se lea que las tres
   primeras acciones son la misma familia.

   TODO va anclado a .sgr-tabla-barra a propósito. DataTables construye su
   envoltorio DENTRO de .table-responsive.export-table, y la plantilla trae:

       @media (min-width: 1319px) {
         .table-responsive.export-table .dt-buttons.btn-group {
           position: absolute; top: 0; left: 172px; }
       }

   —pensado para cuando los botones se colgaban de la columna del selector de
   registros—. Con la barra nueva eso los arrancaba del flujo y los dejaba
   encima de la cabecera de la tabla, apilados y recortados por el overflow del
   contenedor. El prefijo sube cada regla a tres clases y le gana a las dos y
   media de la plantilla, sin necesidad de !important.
   ═══════════════════════════════════════════════════════════════════════════ */

.sgr-tabla-barra {
  align-items: center;
  row-gap: .6rem;
  margin-bottom: 1rem;
}
.sgr-tabla-pie {
  align-items: center;
  row-gap: .6rem;
  margin-top: .9rem;
}

/* Devuelve la barra al flujo: es lo que deshace el position:absolute de arriba. */
.table-responsive.export-table .sgr-tabla-barra .dt-buttons,
.table-responsive.export-table .sgr-tabla-barra .dt-buttons.btn-group,
.sgr-tabla-barra .dt-buttons.btn-group {
  position: static;
  top: auto;
  left: auto;
  float: none;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0;
  width: auto;
}

/* El botón en sí. Sueltos y con aire entre ellos: pegados en grupo segmentado
   se leían como un bloque y los bordes contiguos se pisaban. */
.sgr-tabla-barra .dt-buttons .sgr-btn-tabla,
.sgr-tabla-barra .dt-buttons .sgr-btn-tabla.dt-button,
.sgr-tabla-barra .dt-buttons .sgr-btn-tabla.btn {
  width: 36px;
  min-width: 36px;
  height: 36px;
  flex: 0 0 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sgr-linea);
  border-radius: 9px;
  background: var(--sgr-panel);
  background-image: none;
  color: var(--sgr-apagado);
  box-shadow: none;
  font-size: 0;                      /* mata cualquier texto residual del plugin */
  line-height: 1;
  transition: background-color .15s ease, color .15s ease,
              border-color .15s ease, transform .12s ease;
}
.sgr-tabla-barra .dt-buttons .sgr-btn-tabla i {
  font-size: 16px;
  line-height: 1;
}
.sgr-tabla-barra .dt-buttons .sgr-btn-tabla span { display: contents; }

/* La separación. Un hueco mayor antes del de columnas, porque no es de la misma
   familia: los tres primeros exportan, ese cambia lo que se ve. */
.sgr-tabla-barra .dt-buttons > * + * { margin-left: .5rem; }
.sgr-tabla-barra .dt-buttons .sgr-btn-colvis { margin-left: 1.15rem; position: relative; }
.sgr-tabla-barra .dt-buttons .sgr-btn-colvis::before {
  content: "";
  position: absolute;
  left: -.6rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 18px;
  background: var(--sgr-linea);
}

.sgr-tabla-barra .dt-buttons .sgr-btn-tabla:hover,
.sgr-tabla-barra .dt-buttons .sgr-btn-tabla.dt-button:hover:not(.disabled) {
  background: var(--sgr-pale);
  background-image: none;
  color: var(--sgr-azul);
  border-color: rgba(0, 93, 235, .35);
  transform: translateY(-1px);
}
.sgr-tabla-barra .dt-buttons .sgr-btn-tabla:active,
.sgr-tabla-barra .dt-buttons .sgr-btn-tabla.dt-button.active:not(.disabled) {
  background: var(--sgr-azul);
  background-image: none;
  color: #fff;
  border-color: var(--sgr-azul);
  transform: none;
}
.sgr-tabla-barra .dt-buttons .sgr-btn-tabla:focus,
.sgr-tabla-barra .dt-buttons .sgr-btn-tabla:focus-visible {
  outline: 2px solid var(--sgr-azul);
  outline-offset: 2px;
  box-shadow: none;
}

/* Cada icono con su acento, para distinguirlos de un vistazo sin leer */
.sgr-tabla-barra .dt-buttons .sgr-btn-excel:hover  { color: var(--sgr-verde);  border-color: rgba(20, 168, 90, .35);  background: rgba(20, 168, 90, .07); }
.sgr-tabla-barra .dt-buttons .sgr-btn-pdf:hover    { color: var(--sgr-alerta); border-color: rgba(228, 61, 79, .35);  background: rgba(228, 61, 79, .07); }
.sgr-tabla-barra .dt-buttons .sgr-btn-colvis:hover { color: var(--sgr-navy);   border-color: rgba(0, 43, 107, .30); }

@media (prefers-reduced-motion: reduce) {
  .sgr-tabla-barra .dt-buttons .sgr-btn-tabla { transition: none; }
  .sgr-tabla-barra .dt-buttons .sgr-btn-tabla:hover { transform: none; }
}

/* Desplegable de columnas — se cuelga del body, fuera de la barra */
.dt-button-collection {
  border: 1px solid var(--sgr-linea);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 43, 107, .10);
  padding: .35rem;
  background: var(--sgr-panel);
}
.dt-button-collection .dt-button {
  border: 0;
  border-radius: 6px;
  background: transparent;
  background-image: none;
  color: var(--sgr-tinta);
  font-size: .8125rem;
  padding: .4rem .7rem;
  text-align: left;
}
.dt-button-collection .dt-button:hover { background: var(--sgr-pale); }
.dt-button-collection .dt-button.active {
  background: var(--primary-transparentcolor);
  color: var(--sgr-azul);
  font-weight: 600;
}

/* Buscador y selector de cuántos registros, a juego con los botones */
.sgr-tabla-barra .dataTables_filter,
.sgr-tabla-barra .dataTables_length { margin: 0; }
.sgr-tabla-barra .dataTables_filter label,
.sgr-tabla-barra .dataTables_length label {
  margin: 0;
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .8125rem;
  color: var(--sgr-apagado);
}
.sgr-tabla-barra .dataTables_filter input,
.sgr-tabla-barra .dataTables_length select {
  height: 34px;
  border: 1px solid var(--sgr-linea);
  border-radius: 7px;
  padding: 0 .7rem;
  font-size: .8125rem;
  color: var(--sgr-tinta);
  background-color: var(--sgr-panel);
}
.sgr-tabla-barra .dataTables_filter input { min-width: 220px; }
.sgr-tabla-barra .dataTables_filter input:focus,
.sgr-tabla-barra .dataTables_length select:focus {
  border-color: var(--sgr-azul);
  box-shadow: 0 0 0 3px var(--primary01);
  outline: none;
}

.sgr-tabla-pie .dataTables_info {
  font-size: .8125rem;
  color: var(--sgr-apagado);
  padding: 0;
}

/* En móvil los controles se apilan y el buscador ocupa el ancho disponible */
@media (max-width: 767.98px) {
  .sgr-tabla-barra .dataTables_filter input { min-width: 0; width: 100%; }
  .sgr-tabla-barra .dataTables_filter label { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Conmutador de espacio de trabajo
   ═══════════════════════════════════════════════════════════════════════════
   El menú lateral está escrito a mano, uno por rol, y el de ManagementAdmin ya
   tiene 20 grupos de primer nivel; O6 le suma la contabilidad. En vez de una
   lista más larga, el menú se parte en dos espacios y se conmuta desde aquí.

   Es un control segmentado, no un filtro con casilla: un filtro es un estado
   que se olvida que está puesto y hace pensar que una opción desapareció. Un
   espacio se lee de un vistazo porque el que está activo se ve encendido.
   ═══════════════════════════════════════════════════════════════════════════ */

.sgr-espacios {
  display: inline-flex;
  align-items: center;
  margin-left: 1rem;
  background: var(--sgr-fondo);
  border: 1px solid var(--sgr-linea);
  border-radius: 9px;
  padding: 3px;
  gap: 2px;
}

.sgr-espacio {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  height: 30px;
  padding: 0 .75rem;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--sgr-apagado);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.sgr-espacio i { font-size: 14px; }
.sgr-espacio:hover { color: var(--sgr-azul); }
.sgr-espacio[aria-pressed="true"] {
  background: var(--sgr-panel);
  color: var(--sgr-azul);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 43, 107, .10);
}
.sgr-espacio:focus-visible { outline: 2px solid var(--sgr-azul); outline-offset: 2px; }

/* El filtrado en sí. Se aplica sobre <html> para que valga antes de pintar y no
   se vea el menú completo un instante antes de recortarse. */
/* Regla general, no por parejas: con tres espacios las parejas ya no salen.
   Un grupo sin data-espacio NO se oculta nunca — de eso dependen los menus
   por rol que todavia no se han repartido. */
html[data-espacio-activo="admin"] .side-menu > .slide[data-espacio]:not([data-espacio~="admin"]),
html[data-espacio-activo="conta"] .side-menu > .slide[data-espacio]:not([data-espacio~="conta"]),
html[data-espacio-activo="segu"]  .side-menu > .slide[data-espacio]:not([data-espacio~="segu"]) {
  display: none !important;
}

/* En pantallas estrechas la cabecera va justa: se queda el icono y se va la palabra */
@media (max-width: 991.98px) {
  .sgr-espacio span { display: none; }
  .sgr-espacio { padding: 0 .55rem; }
  .sgr-espacios { margin-left: .5rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Botones de acción de fila
   ═══════════════════════════════════════════════════════════════════════════
   Misma familia visual que los iconos de la barra de tablas, un punto más
   pequeños porque se repiten en cada fila. El color aparece al pasar por
   encima, no en reposo: veinte filas con tres botones de color cada una es
   una tabla que grita.

   El destructivo se distingue en el hover, no por posición, para que no
   dependa de recordar cuál era el tercero.
   ═══════════════════════════════════════════════════════════════════════════ */

.sgr-acciones {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.sgr-accion {
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sgr-linea);
  border-radius: 8px;
  background: var(--sgr-panel);
  color: var(--sgr-apagado);
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.sgr-accion i { font-size: 14px; line-height: 1; }

.sgr-accion:hover        { background: var(--sgr-pale);  color: var(--sgr-azul);   border-color: rgba(0, 93, 235, .35); }
.sgr-accion-inactivar:hover { background: rgba(248, 184, 16, .12); color: #a37605; border-color: rgba(248, 184, 16, .45); }
.sgr-accion-activar:hover   { background: rgba(20, 168, 90, .10);  color: var(--sgr-verde);  border-color: rgba(20, 168, 90, .40); }
.sgr-accion-eliminar:hover  { background: rgba(228, 61, 79, .10);  color: var(--sgr-alerta); border-color: rgba(228, 61, 79, .40); }

.sgr-accion:focus-visible {
  outline: 2px solid var(--sgr-azul);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .sgr-accion { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Submenú: rótulos de grupo y alineación
   ═══════════════════════════════════════════════════════════════════════════
   Dos defectos que introduje al agrupar el menú contable:

   1. Reusé .side-item-category, que es del menú de PRIMER nivel y trae
      height: 15px, white-space: nowrap y margin-top: 25px. Dentro de un
      submenú eso deja un hueco vacío antes de cada rótulo y corta el texto
      ("PRESUPUESTO Y ACTIV…"). Aquí va una clase propia sin altura fija y
      con salto de línea permitido.

   2. La plantilla pinta un marcador absoluto en cada .slide-item
      (content "\f22d", left: 20px), pensado para su padding de 35px. Mi
      padding es de 14px, así que el marcador caía ENCIMA de la primera
      letra. Se retira: la sangría del submenú ya distingue el nivel y el
      punto no aportaba nada.
   ═══════════════════════════════════════════════════════════════════════════ */

.app-sidebar .slide-menu .sgr-sub-rotulo {
  display: block;
  height: auto;
  margin: 14px 0 4px;
  padding: 0 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sgr-apagado);
  opacity: .75;
  white-space: normal;      /* que envuelva en vez de cortarse */
  line-height: 1.4;
}
.app-sidebar .slide-menu .sgr-sub-rotulo:first-child { margin-top: 6px; }

/* El marcador de la plantilla, fuera: se solapaba con el texto */
.app-sidebar .slide-menu .slide-item::before { content: none !important; }

/* Los ítems del submenú, alineados bajo la etiqueta del grupo */
.app-sidebar .slide-menu .slide-item {
  padding-left: 14px !important;
  white-space: normal;      /* un nombre largo envuelve, no desborda */
  line-height: 1.35;
}

/* ═══════════════════════════════════════════════════════════════════════
   Consultas a los libros de propiedad horizontal
   Conversacion de una sola columna: cabecera fija, hilo con scroll propio
   y el campo de escritura anclado abajo. La altura la fija el viewport
   menos la cabecera del portal, para que el hilo scrollee y la pagina no.
   ═══════════════════════════════════════════════════════════════════════ */
.sgr-chat {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 190px);
  min-height: 420px;
  overflow: hidden;
  border: 1px solid var(--sgr-linea);
  border-radius: 12px;
  background: #fff;
}

.sgr-chat-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--sgr-linea);
  background: linear-gradient(90deg,
              rgba(0, 93, 235, .05) 0%, rgba(41, 217, 223, .05) 100%);
}
.sgr-chat-titulo { font-weight: 700; color: var(--sgr-navy); font-size: 15px; }
.sgr-chat-sub    { font-size: 12px; color: var(--sgr-apagado); margin-top: 2px; }

.sgr-chat-limpiar {
  border: 1px solid var(--sgr-linea);
  background: #fff;
  color: var(--sgr-apagado);
  width: 34px; height: 34px;
  border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .15s, border-color .15s;
}
.sgr-chat-limpiar:hover { color: var(--sgr-azul); border-color: var(--sgr-azul); }

.sgr-chat-hilo {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 22px 20px;
  background: var(--sgr-fondo);
}

/* ── Estado inicial ── */
.sgr-chat-vacio { max-width: 620px; margin: 24px auto; text-align: center; }
.sgr-chat-vacio-icono {
  width: 52px; height: 52px; margin: 0 auto 14px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--sgr-azul), var(--sgr-turquesa));
  color: #fff; font-size: 22px;
}
.sgr-chat-sugerencias {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.sgr-chip {
  border: 1px solid var(--sgr-linea);
  background: #fff;
  color: var(--sgr-tinta);
  font-size: 12.5px;
  padding: 7px 13px;
  border-radius: 999px;
  text-align: left;
  transition: border-color .15s, color .15s, background .15s;
}
.sgr-chip:hover {
  border-color: var(--sgr-azul); color: var(--sgr-azul); background: rgba(0, 93, 235, .04);
}

/* ── Mensajes ── */
.sgr-msg { display: flex; margin-bottom: 16px; }
.sgr-msg-yo    { justify-content: flex-end; }
.sgr-msg-libro { justify-content: flex-start; }

.sgr-burbuja {
  max-width: 82%;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.55;
}
.sgr-msg-yo .sgr-burbuja {
  background: var(--sgr-azul);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.sgr-msg-libro .sgr-burbuja {
  background: #fff;
  color: var(--sgr-tinta);
  border: 1px solid var(--sgr-linea);
  border-bottom-left-radius: 4px;
  max-width: 92%;
}
.sgr-burbuja-nada { color: var(--sgr-apagado); font-style: italic; }

/* ── Pasajes citados ── */
.sgr-pasaje { padding: 12px 0; }
.sgr-pasaje + .sgr-pasaje { border-top: 1px solid var(--sgr-linea); }
.sgr-pasaje:first-child { padding-top: 2px; }

.sgr-pasaje-cita {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; color: var(--sgr-navy);
  margin-bottom: 4px;
}
.sgr-pasaje-n {
  flex: 0 0 auto;
  width: 19px; height: 19px;
  border-radius: 6px;
  background: var(--sgr-azul); color: #fff;
  font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.sgr-pasaje-rel {
  margin-left: auto;
  font-size: 10.5px; font-weight: 600;
  color: var(--sgr-apagado);
  background: var(--sgr-fondo);
  border-radius: 999px;
  padding: 2px 8px;
}
.sgr-pasaje-cap {
  font-size: 11.5px; color: var(--sgr-apagado);
  margin-bottom: 7px;
}
.sgr-pasaje-texto {
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.6;
  color: var(--sgr-tinta);
  border-left: 3px solid var(--sgr-turquesa);
  padding-left: 12px;
}

/* ── Espera ── */
.sgr-cargando { display: flex; gap: 5px; align-items: center; padding: 14px 16px; }
.sgr-cargando span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--sgr-apagado);
  animation: sgr-latido 1.3s infinite ease-in-out;
}
.sgr-cargando span:nth-child(2) { animation-delay: .18s; }
.sgr-cargando span:nth-child(3) { animation-delay: .36s; }
@keyframes sgr-latido {
  0%, 70%, 100% { opacity: .28; transform: translateY(0); }
  35%           { opacity: 1;   transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .sgr-cargando span { animation: none; opacity: .5; }
}

/* ── Escritura ── */
.sgr-chat-pie {
  display: flex; align-items: flex-end; gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--sgr-linea);
  background: #fff;
}
.sgr-chat-pie textarea {
  flex: 1 1 auto;
  resize: none;
  border: 1px solid var(--sgr-linea);
  border-radius: 11px;
  padding: 11px 14px;
  font-size: 13.5px;
  line-height: 1.5;
  max-height: 160px;
  color: var(--sgr-tinta);
  transition: border-color .15s, box-shadow .15s;
}
.sgr-chat-pie textarea:focus {
  outline: none;
  border-color: var(--sgr-azul);
  box-shadow: 0 0 0 3px rgba(0, 93, 235, .12);
}
.sgr-chat-pie button {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border: none; border-radius: 11px;
  background: var(--sgr-azul); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, opacity .15s;
}
.sgr-chat-pie button:hover:not(:disabled) { background: var(--sgr-navy); }
.sgr-chat-pie button:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 767px) {
  .sgr-chat { height: calc(100vh - 150px); }
  .sgr-burbuja { max-width: 94%; }
  .sgr-msg-libro .sgr-burbuja { max-width: 98%; }
}

/* ── Respuesta redactada por el modelo ───────────────────────────────────
   Se distingue visiblemente de los pasajes: lo primero lo escribió un modelo
   a partir de lo segundo, y quien lee tiene que poder notar la diferencia. */
.sgr-redaccion {
  border-left: 3px solid var(--sgr-azul);
  background: rgba(0, 93, 235, .04);
  border-radius: 0 9px 9px 0;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.sgr-redaccion-eti {
  font-size: 10.5px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--sgr-azul); margin-bottom: 6px;
}
.sgr-redaccion-txt { font-size: 13.5px; line-height: 1.6; color: var(--sgr-tinta); }
.sgr-redaccion-aviso {
  border-left: 3px solid var(--sgr-dorado);
  background: rgba(248, 184, 16, .07);
  border-radius: 0 9px 9px 0;
  padding: 10px 13px; margin-bottom: 14px;
  font-size: 12.5px; color: var(--sgr-apagado);
}
.sgr-cita {
  display: inline-block; font-size: 11px; font-weight: 700;
  color: var(--sgr-azul); background: rgba(0, 93, 235, .1);
  border-radius: 4px; padding: 0 4px; margin: 0 1px;
}
.sgr-fuentes-eti {
  font-size: 10.5px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--sgr-apagado);
  margin: 4px 0 8px; padding-top: 4px; border-top: 1px solid var(--sgr-linea);
}

/* ── Respuesta de datos ─────────────────────────────────────────────────
   Verde y no azul: la cifra sale de la base, no la redactó un modelo. Quien
   lee tiene que poder distinguirlo de un vistazo. */
.sgr-dato {
  border-left: 3px solid #0a7d43;
  background: rgba(10, 125, 67, .05);
  border-radius: 0 9px 9px 0;
  padding: 12px 14px;
}
.sgr-dato-eti {
  font-size: 10.5px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: #0a7d43; margin-bottom: 6px;
}
.sgr-dato-fuente {
  font-size: 11px; color: var(--sgr-apagado); margin-top: 8px;
  padding-top: 6px; border-top: 1px solid var(--sgr-linea);
}


/* ═══════════════════════════════════════════════════════════════════════
   Envoltorio de contenido repetido
   ═══════════════════════════════════════════════════════════════════════

   El layout ya abre un .main-content.app-content, y 21 vistas abren otro
   dentro. Como la regla de escritorio aparta 240px del menu, el contenido
   acababa desplazado 480px y dejaba una franja de aire entre el menu y las
   tarjetas.

   Se corrige aqui y no en las 21 vistas: una regla no puede romper una
   pagina que no anide, y 21 ediciones de estructura si. */
@media (min-width: 992px) {
  .main-content .main-content,
  .app-content .app-content {
    margin-left: 0;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   El formulario dentro de una modal
   ═══════════════════════════════════════════════════════════════════════

   La misma pantalla, cargada en un iframe, sin la cascara: menu lateral,
   cabecera y pie sobran ahi dentro y dejarian dos menus en pantalla.

   Se oculta con CSS en vez de servir una plantilla distinta: una segunda
   plantilla se queda desfasada el dia que la primera cambie, y ademas
   perderia los estilos y los scripts que el formulario necesita. */
body.sgr-en-modal .app-sidebar,
body.sgr-en-modal .main-header,
body.sgr-en-modal .app-header,
body.sgr-en-modal .main-footer,
body.sgr-en-modal footer,
body.sgr-en-modal .page-header,
body.sgr-en-modal #sgr-enlace-global {
  display: none !important;
}

body.sgr-en-modal .main-content,
body.sgr-en-modal .app-content {
  margin-left: 0 !important;
  padding-top: 0 !important;
}

body.sgr-en-modal .main-container,
body.sgr-en-modal .container-fluid {
  padding-left: .75rem !important;
  padding-right: .75rem !important;
}

/* La modal ya tiene su propio marco: la tarjeta de dentro no necesita otro. */
body.sgr-en-modal .card {
  box-shadow: none !important;
  border: 0 !important;
  margin-bottom: .5rem !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   Menu plegado
   ═══════════════════════════════════════════════════════════════════════

   Al plegar el menu a iconos (80px) el contenido seguia apartado 240 y
   dejaba una franja vacia de 160px. El tema trae la regla
   (.app.sidenav-toggled .app-content), pero otra posterior la gana; en vez
   de perseguir esa cascada se fija aqui, que es la ultima hoja que carga.

   El !important es deliberado y acotado a este caso: sin el, cualquier
   regla del tema que se anada despues vuelve a abrir el hueco. */
@media (min-width: 992px) {
  body.app.sidenav-toggled .main-content,
  body.app.sidenav-toggled .app-content {
    margin-left: 80px !important;
  }

  /* La regla de arriba no debe reabrir el envoltorio anidado. */
  body.app.sidenav-toggled .main-content .main-content,
  body.app.sidenav-toggled .app-content .app-content {
    margin-left: 0 !important;
  }
}

@media (max-width: 991px) {
  body.app.sidenav-toggled .main-content,
  body.app.sidenav-toggled .app-content {
    margin-left: 0 !important;
  }
}

/* ── El logo, dentro de su cabecera ────────────────────────────────────
   La imagen se salia de los 64px del encabezado del menu y se montaba
   sobre la franja de color de abajo. Se contiene en vez de recortarla:
   deformar un logo se nota mas que un logo pequenio. */
.main-sidebar-header {
  height: 64px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.main-sidebar-header .header-brand-img,
.main-sidebar-header img {
  max-height: 42px;
  width: auto;
  object-fit: contain;
}

/* Plegado, solo cabe el icono. */
@media (min-width: 992px) {
  body.app.sidenav-toggled .main-sidebar-header .header-brand-img,
  body.app.sidenav-toggled .main-sidebar-header img {
    max-height: 34px;
  }
}


/* ── La modal de registro, ancha ───────────────────────────────────────
   Con modal-xl el iframe quedaba por debajo de 768px y Bootstrap apilaba
   las columnas del formulario: Manzana y Villa una encima de otra, y la
   pantalla se hacia larguisima para nada.

   Se le da casi toda la ventana para que el formulario respire igual que
   en su pantalla completa, que es donde se diseno. */
.modal-dialog.sgr-modal-ancha {
  max-width: 1400px;
  width: 95vw;
  margin: 4vh auto;
}

.modal-dialog.sgr-modal-ancha .modal-content {
  height: 92vh;
}

@media (max-width: 991px) {
  .modal-dialog.sgr-modal-ancha {
    width: 100vw;
    max-width: none;
    margin: 0;
  }
  .modal-dialog.sgr-modal-ancha .modal-content {
    height: 100vh;
    border-radius: 0;
  }
}


/* ── El panel, por espacio ─────────────────────────────────────────────
   El panel enseñaba la contabilidad tambien en el espacio de Seguridad. Se
   marca cada bloque con data-panel y se oculta igual que el menu.

   Un bloque SIN data-panel se ve siempre: eso mantiene visible lo que aun
   no se ha repartido, en vez de vaciar la pantalla. */
html[data-espacio-activo="admin"] [data-panel]:not([data-panel~="admin"]),
html[data-espacio-activo="conta"] [data-panel]:not([data-panel~="conta"]),
html[data-espacio-activo="segu"]  [data-panel]:not([data-panel~="segu"]) {
  display: none !important;
}

/* ── Tablas: alto acotado y cabecera fija ─────────────────────────────────── */
/* El problema que resuelve: una tabla larga crecia sin limite y empujaba hacia
   abajo todo lo que venia despues —el mapa, las tarjetas de la derecha—, asi que
   para ver el mapa habia que pasar por delante doscientas filas. Ahora la tabla
   tiene su propio scroll y la pagina conserva su forma.

   La cabecera se queda pegada arriba: al desplazar doscientas filas, una columna
   sin titulo es una columna que no se puede leer. Funciona porque .table thead th
   ya lleva fondo opaco (el azul de la marca); si fuera transparente, las filas se
   verian por debajo. */
.table-responsive {
  max-height: 62vh;
  overflow-y: auto;
  /* Que al llegar al final no siga arrastrando la pagina de detras. */
  overscroll-behavior: contain;
}

.table-responsive > table > thead > tr > th,
.table-responsive > table > thead > tr > td,
.table-responsive > .table > thead > tr > th,
.table-responsive > .table > thead > tr > td {
  position: sticky;
  top: 0;
  z-index: 3;
}

/* Barra de scroll discreta: la de serie en Windows es ancha y gris y parte el
   diseno en dos. */
.table-responsive { scrollbar-width: thin; scrollbar-color: #c3cbd9 transparent; }
.table-responsive::-webkit-scrollbar { width: 10px; height: 10px; }
.table-responsive::-webkit-scrollbar-track { background: transparent; }
.table-responsive::-webkit-scrollbar-thumb {
  background: #c3cbd9; border-radius: 8px; border: 2px solid transparent;
  background-clip: content-box;
}
.table-responsive::-webkit-scrollbar-thumb:hover { background: #97a3b8; background-clip: content-box; }

/* Salidas del techo, para los casos donde estorba:
   · dentro de un modal, que ya tiene su propio scroll;
   · al imprimir, donde recortar la tabla seria perder hojas;
   · y una clase para ponerla a mano donde haga falta. */
.modal .table-responsive,
.table-responsive.sgr-sin-techo { max-height: none; overflow-y: visible; }

@media print {
  .table-responsive { max-height: none !important; overflow: visible !important; }
  .table-responsive > table > thead > tr > th { position: static !important; }
}

/* En pantallas bajas el techo en vh deja ver tres filas: se le pone un minimo
   para que siga siendo una tabla y no una rendija. */
@media (max-height: 800px) {
  .table-responsive { max-height: 460px; }
}

/* ═══════════════ SGR UI — correcciones visuales globales ═══════════════
   Inputs más visibles y encabezados de tarjeta de color (el tema los
   dejaba en blanco sobre blanco). Homogeneiza todo el sistema. */
.form-control:not(.is-invalid):not(.is-valid),
.form-select:not(.is-invalid):not(.is-valid),
select.form-control:not(.is-invalid):not(.is-valid) {
    border: 1.5px solid #c3ccdb;
    border-radius: 8px;
}
.form-control:focus:not(.is-invalid):not(.is-valid),
.form-select:focus:not(.is-invalid):not(.is-valid) {
    border-color: #1b4dd1;
    box-shadow: 0 0 0 .18rem rgba(27,77,209,.15);
}
.form-control::placeholder { color: #97a3ba; }
.form-label { font-weight: 600; }
.input-group-text { border: 1.5px solid #c3ccdb; }
.select2-container--default .select2-selection--single {
    border: 1.5px solid #c3ccdb !important;
    border-radius: 8px !important;
}
.card-header.bg-primary { background-color: #1b4dd1 !important; }
.card-header.bg-success { background-color: #0f9d58 !important; }
.card-header.bg-info    { background-color: #0d92b8 !important; }
.card-header.bg-warning { background-color: #e0a106 !important; }
.card-header.bg-danger  { background-color: #dc2626 !important; }
.card-header.bg-primary, .card-header.bg-success, .card-header.bg-info,
.card-header.bg-warning, .card-header.bg-danger { color: #fff !important; }
.card-header.bg-primary h1,.card-header.bg-primary h2,.card-header.bg-primary h3,.card-header.bg-primary h4,.card-header.bg-primary h5,.card-header.bg-primary h6,
.card-header.bg-success h6,.card-header.bg-info h6,.card-header.bg-warning h6,.card-header.bg-danger h6 { color:#fff !important; }
/* ═══════════════ fin SGR UI global ═══════════════ */

/* ═══ SGR: wrapper .main-content.app-content duplicado por las vistas ═══
   _Layout ya envuelve el contenido en .main-content.app-content; 15 vistas
   repiten el wrapper y así duplican el margin-left del sidebar y el min-height.
   Se neutraliza SOLO el interior (el anidado), sin tocar el del layout. */
.main-content.app-content .main-content.app-content {
    margin: 0 !important;
    min-height: 0 !important;
    padding-top: 0 !important;
}
/* ═══ fin wrapper duplicado ═══ */