/* *********************************************************** */
/* Desarrollado por Herlin R. Espinosa G. (herlin25@gmail.com) */
/* *********************************************************** */
:root {
  --color-style-light: #001f3f;
  --color-style-medium: #001737;
  --color-style-shadow: rgba(0, 31, 63, 0.25);
}

/* Footer fijo en el fondo de la pantalla, independientemente del dispositivo.
   ⚠️ La MISMA paleta está en otros dos archivos: `.welcome-footer` (welcome.css, páginas
   públicas) y `.lmerr-footer` (errors.css, páginas de error). Ninguna de esas pantallas
   carga el CSS de las otras, así que un cambio de colores va en LOS TRES. */
.main-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 16px;
  background-color: rgb(230, 239, 250);  /* Azul muy claro de marca */
  color: #3a4a5c;
  font-weight: 500;
  z-index: 1020;  /* Por debajo de modales (1050) pero encima del contenido */
  border-top: 2px solid #001F3F;  /* Franja navy que lo separa del contenido */
}

.main-footer a {
  color: #001F3F;
  font-weight: 700;
  text-decoration: none;
}

/* En modo noche. ⚠️ Va también el `color`: el #3a4a5c de arriba sobre el gris oscuro
   quedaría ilegible. El motor de modo noche (dark-mode.js) ya pinta estos mismos
   valores en línea, así que esto es el respaldo por si el JS no llega a correr. */
.dark-mode .main-footer {
  background-color: #343a40;
  color: #d0d0d0;
  border-top-color: #495057;
}

.dark-mode .main-footer a {
  color: #64b0ff;
}

/* El footer es fijo, así que NO ocupa lugar en el flujo: sin reservar su alto, el
   final del contenido de CUALQUIER pantalla queda tapado por él aunque se llegue al
   fondo del scroll. Se reserva su alto (42px) más un respiro. */
.wrapper .content-wrapper {
  padding-bottom: 55px;
}

/* Bajo 576px el copyright puede partirse en dos líneas (66px). */
@media (max-width: 575.98px) {
  .wrapper .content-wrapper {
    padding-bottom: 80px;
  }
}

/* Franja navy de separación bajo la barra superior y bajo el logo del menú lateral,
   la misma que el `border-top` del footer: así la línea que cierra el encabezado se lee
   de extremo a extremo (sidebar + navbar) con el color de marca.

   🔴 Los dos selectores llevan una clase de más A PROPÓSITO, por especificidad:
   AdminLTE pinta `[class*=sidebar-dark] .brand-link { border-bottom: 1px solid #4b545c }`
   (0,2,0) y `.main-header { border-bottom: 1px solid #dee2e6 }` (0,1,0). Un `.brand-link`
   a secas perdería contra el primero; con `.main-sidebar .brand-link` se empata la
   especificidad y gana este archivo, que se carga DESPUÉS de `adminlte.min.css`.

   ⚠️ En modo noche manda `dark-mode.js`, que ya escribe `border-bottom-color` en línea
   sobre `.main-header` y `.brand-link` (igual que hace con el `border-top-color` del
   footer): el ancho de 2px se conserva y solo cambia el color. */
.main-header.navbar {
  border-bottom: 2px solid rgb(0, 31, 63);
}

.main-sidebar .brand-link {
  border-bottom: 2px solid rgb(0, 31, 63);
}

.brand-link .brand-image {
  opacity: 0.9 !important;
  background-color: white !important;
}

.icon-admin {
  padding-left: 10px;
  padding-right: 10px;
  background-image: url("/image/icon-admin.png");
  background-size: 16px;
  background-repeat: no-repeat;
  filter: brightness(0) invert(1);
}

.icon-modules {
  padding-left: 10px;
  padding-right: 10px;
  background-image: url("/image/icon-modules.png");
  background-size: 16px;
  background-repeat: no-repeat;
  filter: brightness(0) invert(1);
}

.icon-company {
  padding-left: 10px;
  padding-right: 10px;
  background-image: url("/image/icon-company.png");
  background-size: 16px;
  background-repeat: no-repeat;
  filter: brightness(0) invert(1);
}

.icon-user {
  padding-left: 10px;
  padding-right: 10px;
  background-image: url("/image/icon-user.png");
  background-size: 16px;
  background-repeat: no-repeat;
  filter: brightness(0) invert(1);
}

.icon-permission {
  padding-left: 10px;
  padding-right: 10px;
  background-image: url("/image/icon-permission.png");
  background-size: 16px;
  background-repeat: no-repeat;
  filter: brightness(0) invert(1);
}

.icon-error {
  padding-left: 10px;
  padding-right: 10px;
  background-image: url("/image/icon-error.png");
  background-size: 16px;
  background-repeat: no-repeat;
  filter: brightness(0) invert(1);
}

.icon-mobileapplogs {
  padding-left: 10px;
  padding-right: 10px;
  background-image: url("/image/icon-warning.png");
  background-size: 16px;
  background-repeat: no-repeat;
  filter: brightness(0) invert(1);
}

.icon-task {
  padding-left: 10px;
  padding-right: 10px;
  background-image: url("/image/icon-task.png");
  background-size: 16px;
  background-repeat: no-repeat;
  filter: brightness(0) invert(1);
}

.icon-backup {
  padding-left: 10px;
  padding-right: 10px;
  background-image: url("/image/icon-backup.png");
  background-size: 16px;
  background-repeat: no-repeat;
  filter: brightness(0) invert(1);
}

.icon-customer {
  padding-left: 10px;
  padding-right: 10px;
  background-image: url("/image/icon-customer.png");
  background-size: 16px;
  background-repeat: no-repeat;
  filter: brightness(0) invert(1);
}

.icon-freight {
  padding-left: 10px;
  padding-right: 10px;
  background-image: url("/image/icon-freight.png");
  background-size: 16px;
  background-repeat: no-repeat;
  filter: brightness(0) invert(1);
}

.icon-fuelpercentage {
  padding-left: 10px;
  padding-right: 10px;
  background-image: url("/image/icon-fuelpercentage.png");
  background-size: 16px;
  background-repeat: no-repeat;
  filter: brightness(0) invert(1);
}

.icon-truck {
  padding-left: 10px;
  padding-right: 10px;
  background-image: url("/image/icon-truck.png");
  background-size: 16px;
  background-repeat: no-repeat;
  filter: brightness(0) invert(1);
}

.icon-location {
  padding-left: 10px;
  padding-right: 10px;
  background-image: url("/image/icon-location.png");
  background-size: 16px;
  background-repeat: no-repeat;
  filter: brightness(0) invert(1);
}

.icon-recipient {
  padding-left: 10px;
  padding-right: 10px;
  background-image: url("/image/icon-recipient.png");
  background-size: 16px;
  background-repeat: no-repeat;
  filter: brightness(0) invert(1);
}

.icon-billoflading {
  padding-left: 10px;
  padding-right: 10px;
  background-image: url("/image/icon-billoflading.png");
  background-size: 16px;
  background-repeat: no-repeat;
  filter: brightness(0) invert(1);
}

.icon-invoice {
  padding-left: 10px;
  padding-right: 10px;
  background-image: url("/image/icon-invoice.png");
  background-size: 16px;
  background-repeat: no-repeat;
  filter: brightness(0) invert(1);
}

.icon-creditmemo {
  padding-left: 10px;
  padding-right: 10px;
  background-image: url("/image/icon-creditmemo.png");
  background-size: 16px;
  background-repeat: no-repeat;
  filter: brightness(0) invert(1);
}

.icon-payment {
  padding-left: 10px;
  padding-right: 10px;
  background-image: url("/image/icon-payment.png");
  background-size: 16px;
  background-repeat: no-repeat;
  filter: brightness(0) invert(1);
}

.icon-trailer {
  padding-left: 10px;
  padding-right: 10px;
  background-image: url("/image/icon-trailer.png");
  background-size: 16px;
  background-repeat: no-repeat;
  filter: brightness(0) invert(1);
}

.icon-expense {
  padding-left: 10px;
  padding-right: 10px;
  background-image: url("/image/icon-expense.png");
  background-size: 16px;
  background-repeat: no-repeat;
  filter: brightness(0) invert(1);
}

.icon-notification {
  padding-left: 10px;
  padding-right: 10px;
  background-image: url("/image/icon-notification.png");
  background-size: 16px;
  background-repeat: no-repeat;
  filter: brightness(0) invert(1);
}

.icon-report {
  padding-left: 10px;
  padding-right: 10px;
  background-image: url("/image/icon-report.png");
  background-size: 16px;
  background-repeat: no-repeat;
  filter: brightness(0) invert(1);
}

.icon-senddocument {
  padding-left: 10px;
  padding-right: 10px;
  background-image: url("/image/icon-senddocument.png");
  background-size: 16px;
  background-repeat: no-repeat;
  filter: brightness(0) invert(1);
}

.icon-usstate {
  padding-left: 10px;
  padding-right: 10px;
  background-image: url("/image/icon-usstate.png");
  background-size: 16px;
  background-repeat: no-repeat;
  filter: brightness(0) invert(1);
}

.icon-dailytrip {
  padding-left: 10px;
  padding-right: 10px;
  background-image: url("/image/icon-dailytrip.png");
  background-size: 16px;
  background-repeat: no-repeat;
  filter: brightness(0) invert(1);
}

.icon-messagetemplate {
  padding-left: 10px;
  padding-right: 10px;
  background-image: url("/image/icon-messagetemplate.png");
  background-size: 16px;
  background-repeat: no-repeat;
  filter: brightness(0) invert(1);
}

/* Alerta de error (danger) con fondo rojizo moderno (degradado suave) en vez del rojo sólido de AdminLTE. */
.alert-danger {
  background: linear-gradient(135deg, #fbd6d8 0%, #f6b6ba 100%);
  border: 1px solid #ee9ba1;
  color: #8c2027;
  border-radius: 0.6rem;
  box-shadow: 0 3px 12px rgba(190, 45, 55, 0.14);
}

.alert-danger .close,
.alert-danger a:not(.btn) {
  color: #8c2027;
  opacity: 0.85;
  text-shadow: none;
}

.alert-danger .close:hover {
  opacity: 1;
}

/* Alerta de éxito (success) — verde suave moderno. */
.alert-success {
  background: linear-gradient(135deg, #d6f0de 0%, #b4e4c3 100%);
  border: 1px solid #93d3a6;
  color: #1f6b3b;
  border-radius: 0.6rem;
  box-shadow: 0 3px 12px rgba(35, 140, 70, 0.14);
}

.alert-success .close,
.alert-success a:not(.btn) {
  color: #1f6b3b;
  opacity: 0.85;
  text-shadow: none;
}

.alert-success .close:hover {
  opacity: 1;
}

/* Alerta de advertencia (warning) — ámbar suave moderno. */
.alert-warning {
  background: linear-gradient(135deg, #fbe9c6 0%, #f6d79a 100%);
  border: 1px solid #eec877;
  color: #8a5a0c;
  border-radius: 0.6rem;
  box-shadow: 0 3px 12px rgba(190, 140, 25, 0.14);
}

.alert-warning .close,
.alert-warning a:not(.btn) {
  color: #8a5a0c;
  opacity: 0.85;
  text-shadow: none;
}

.alert-warning .close:hover {
  opacity: 1;
}

/* Alerta informativa (info) — azul suave moderno. */
.alert-info {
  background: linear-gradient(135deg, #d6e6fb 0%, #b3cef5 100%);
  border: 1px solid #93bbee;
  color: #1c4a86;
  border-radius: 0.6rem;
  box-shadow: 0 3px 12px rgba(30, 90, 180, 0.14);
}

.alert-info .close,
.alert-info a:not(.btn) {
  color: #1c4a86;
  opacity: 0.85;
  text-shadow: none;
}

.alert-info .close:hover {
  opacity: 1;
}

/* Iconos Font Awesome del menú lateral: igualar la caja (20px) y el tamaño (16px)
   de los iconos PNG (.icon-*) para que queden alineados con el resto de items.
   Excluye el caret (.right) de los grupos con submenú. */
.main-sidebar .nav-sidebar .nav-link > i.fa:not(.right),
.main-sidebar .nav-sidebar .nav-link > i.fas:not(.right),
.main-sidebar .nav-sidebar .nav-link > i.far:not(.right),
.main-sidebar .nav-sidebar .nav-link > i.fab:not(.right) {
  display: inline-block;
  width: 20px;
  padding: 0;
  /* margin-right negativo compensa el espacio en blanco entre el <i> y el <p>,
     dejando el texto en la misma x que los iconos PNG (.icon-*) de arriba. */
  margin: 0 -3px 0 0;
  font-size: 16px;
  line-height: 1;
  text-align: left;
  vertical-align: middle;
}

/* Menú lateral: el icono y el texto, centrados entre sí.

   El <i> y el <p> son dos cajas en línea dentro del <a>. El <p> se apoyaba en la
   LÍNEA BASE y el icono ya usaba `vertical-align: middle`, así que cada uno se
   alineaba con una referencia distinta y el icono quedaba unos píxeles más alto.
   Con `middle` en los dos, ambos ponen su punto medio en la misma altura -> quedan
   centrados uno respecto del otro. Cubre los iconos Font Awesome y también los PNG
   de marca (`.icon-*`), que no llevan clase `fa*` y se quedaban en la línea base.

   🔴 Se hace con `vertical-align` y NO con flex (como sí hace la barra superior)
   porque en este menú flex rompería dos cosas:
     1. El espacio en blanco entre el <i> y el <p> **desaparece** en un contenedor
        flex, y de él depende la x del texto — el `margin-right: -3px` de la regla
        de arriba está medido para compensarlo.
     2. Un item flex tiene `min-width: auto`, que **ignora el `width: 0`** con el que
        AdminLTE encoge el <p> al colapsar el menú (`sidebar-mini`, activo aquí):
        el texto seguiría ocupando su ancho real.
   El caret de los grupos (`i.right`) se excluye: va `position: absolute`. */
.main-sidebar .nav-sidebar .nav-link > i:not(.right),
.main-sidebar .nav-sidebar .nav-link > p {
  vertical-align: middle;
}

/* Barra superior: centrar verticalmente el contenido de TODOS los enlaces
   (toggle del menú, pantalla completa, modo noche, campana de notificaciones,
   idioma y menú de usuario). Por defecto cada contenido se apoya en la línea
   base del enlace, así que según el glifo unos iconos quedan un par de píxeles
   más altos que otros. AdminLTE ya le da al .nav-link una altura fija, de modo
   que con flex + align-items:center todos quedan en el mismo eje.
   El caret de los desplegables (.dropdown-toggle::after) también se centra:
   como item flex, su `vertical-align` deja de aplicar. */
.main-header.navbar .navbar-nav > .nav-item > .nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Selector de idioma dentro del menú de usuario (debajo de Perfil). Compacto:
   solo los códigos ES/EN, con el activo en una píldora navy.
   Los colores se heredan del .user-footer, que AdminLTE ya tematiza en día y en
   noche, así que no hace falta añadir nada en dark-mode.css. */
.usermenu-lang-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

.usermenu-lang {
  padding: 0.1rem 0.5rem;
  border-radius: 1rem;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.5;
  color: inherit;
}

/* Gris translúcido: se ve igual sobre el fondo claro del día y el oscuro de noche */
.usermenu-lang:hover {
  background-color: rgba(128, 128, 128, 0.25);
  color: inherit;
  text-decoration: none;
}

.usermenu-lang-active,
.usermenu-lang-active:hover {
  background-color: #001f3f;
  color: #fff;
}

/* Selector Día / Noche del menú del usuario (debajo del idioma). Mismo formato que
   el de idioma —las dos opciones a la vista y la activa en una píldora navy—, con
   un poco más de aire porque cada opción lleva icono + palabra.
   ⚠️ La clase `usermenu-theme-active` la pone dark-mode.js (el tema vive en
   localStorage, no en la sesión, así que el servidor no puede marcarla).
   `color: inherit` evita tematizar esto para el modo noche: hereda el color que
   AdminLTE ya le da al .user-footer en cada tema. */
.usermenu-theme-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

.usermenu-theme {
  padding: 0.15rem 0.6rem;
  border-radius: 1rem;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.5;
  color: inherit;
}

.usermenu-theme i {
  margin-right: 0.25rem;
}

.usermenu-theme:hover {
  background-color: rgba(128, 128, 128, 0.25);
  color: inherit;
  text-decoration: none;
}

.usermenu-theme-active,
.usermenu-theme-active:hover {
  background-color: #001f3f;
  color: #fff;
}

.session-subtitle {
  background-color: #f1f1f1; /* Gris claro */
  padding: 5px; /* Espaciado interno */
  border-radius: 0.5rem; /* Bordes redondeados */
  color: var(--color-style-light); /* Texto azul oscuro (opcional) */
  margin-bottom: 1rem; /* Separación inferior */
  border-left: 4px solid var(--color-style-light); /* Línea decorativa opcional */
  text-align: center;
  font-size: 14pt;
  font-weight: bold;
}

.table-responsive-wrapper {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.table-responsive-wrapper::-webkit-scrollbar {
  height: 6px;
}
.table-responsive-wrapper::-webkit-scrollbar-thumb {
  background-color: #bbb;
  border-radius: 3px;
}
.table-responsive-wrapper::-webkit-scrollbar-thumb:hover {
  background-color: #999;
}

.is-invalid-radio {
  color: #dc3545;
}

.dt-row-bold {
  font-weight: bold;
}

.dt-cursor-pointer {
  cursor: pointer;
}

.div-preview {
  display: none;
  margin-bottom: 20px;
}

.image-preview {
  display: none;
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

.error-content {
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 5px;
  overflow-x: auto; /* Allows horizontal scrolling */
  overflow-y: auto; /* Allows vertical scrolling */
  max-height: 400px; /* Optional: Set a maximum height to make scrolling noticeable */
  white-space: pre-wrap; /* Preserves line breaks */
  word-wrap: break-word; /* Breaks long words */
  line-height: 1.6; /* Increases line spacing */
}

.icon-billoflading {
  padding-left: 10px;
  padding-right: 10px;
  background-image: url("/image/icon-billoflading.png");
  background-size: 16px;
  background-repeat: no-repeat;
}

.icon-invoice {
  padding-left: 10px;
  padding-right: 10px;
  background-image: url("/image/icon-invoice.png");
  background-size: 16px;
  background-repeat: no-repeat;
}

.icon-appdownload {
  display: inline-block;
  width: 16px;
  height: 16px;
  mask-image: url("/image/icon-appdownload.png");
  -webkit-mask-image: url("/image/icon-appdownload.png");
  mask-size: 16px 16px;
  -webkit-mask-size: 16px 16px;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  background-color: currentColor;
  vertical-align: -2px;  /* Cambio: de middle a -2px */
}

.log-date {
  font-weight: bold;
}

.log-type-info {
  font-weight: bold;
  color: #0d6efd;
}

.log-type-error {
  font-weight: bold;
  color: #dc3545;
}

.radio-bold {
  color: #869099;
  font-weight: 700;
}

.growlUI-title {
  padding-left: 20px;
  padding-right: 20px;
  color: white;
  font-size: 14pt;
  font-weight: bold;
  text-align: center;
}

.growlUI-message {
  padding-left: 20px;
  padding-right: 20px;
  color: white;
  font-size: 12pt;
  text-align: center;
}

.input-wrapper {
  width: 80%;
}

.company-logo {
  max-width: 150px; /* ancho máximo */
  max-height: 80px; /* alto máximo */
  width: auto; /* ancho automático para mantener proporción */
  height: auto; /* alto automático para mantener proporción */
  display: block; /* para evitar espacios debajo de la imagen */
  object-fit: contain; /* asegura que la imagen se ajuste sin recortarse */
}

@media (max-width: 768px) {
  .input-wrapper {
    width: 100%;
  }
}

.link-label {
  text-decoration: none !important;
  color: #0056b3;
  cursor: pointer;
  font-weight: 500;
  transition: color 0.3s ease;
}

.link-label:hover,
.link-label:focus {
  color: var(--color-style-light);
  text-decoration: underline !important;
}

.input-text-style {
  /* border: 2px solid var(--color-style-light); */
  border-radius: 0.5rem;
  padding: 0.375rem 0.75rem;
  outline: none;
  transition:
    border-color 0.3s,
    box-shadow 0.3s;
  background-color: #fff;
}

.main-sidebar.sidebar-dark-custom {
  background-color: var(--color-style-light);
  color: #fff;
}
.main-sidebar.sidebar-dark-custom .nav-sidebar > .nav-item > .nav-link {
  color: #ccc;
}
.main-sidebar.sidebar-dark-custom .nav-sidebar > .nav-item > .nav-link.active {
  background-color: #345678;
  color: #fff;
}

.input-text-style:focus {
  /* border-color: var(--color-style-medium); */
  /* box-shadow: 0 0 0 0.2rem var(--color-style-shadow); */
}

.input-file-style {
  border: 2px solid var(--color-style-light);
  border-radius: 0.5rem;
  padding: 0.375rem 0.75rem;
  outline: none;
  background-color: #fff;
  transition:
    border-color 0.3s,
    box-shadow 0.3s;
  font-family: inherit;
  font-size: 1rem;
  color: #333;
  cursor: pointer;
}

.input-file-style:focus {
  border-color: var(--color-style-medium);
  box-shadow: 0 0 0 0.2rem var(--color-style-shadow);
}

.select-style {
  /* border: 2px solid var(--color-style  -light); */
  border-radius: 0.5rem;
  padding: 0.375rem 2rem 0.375rem 0.75rem; /* espacio extra a la derecha para la flecha */
  outline: none;
  transition:
    border-color 0.3s,
    box-shadow 0.3s;
  appearance: none;
  background-color: #fff;
  background-image: url('data:image/svg+xml;utf8,<svg fill="%23001f3f" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
}

.select-style:focus {
  /* border-color: var(--color-style-medium);
  box-shadow: 0 0 0 0.2rem var(--color-style-shadow); */
}

.input-text-style,
.select-text-style {
  width: 100%; /* ocupa todo el ancho del contenedor */
  max-width: 100%; /* evita que se desborde */
}

.content-header h1 {
  color: var(--color-style-light); /* Texto azul oscuro (opcional) */
  font-size: 16pt;
  font-weight: bold;
}

.modal-header h1 {
  color: var(--color-style-light); /* Texto azul oscuro (opcional) */
  font-size: 16pt;
  font-weight: bold;
}

/* Estado activo */
.status-1 {
  background-color: #4caf50; /* Verde, color de fondo */
  padding: 0.5rem 1rem; /* Espaciado dentro de la etiqueta */
  font-size: 1rem; /* Tamaño de fuente */
  border-radius: 1rem; /* Bordes redondeados */
}

/* Estado inactivo */
.status-2 {
  background-color: #f44336; /* Rojo, color de fondo */
  padding: 0.5rem 1rem; /* Espaciado dentro de la etiqueta */
  font-size: 1rem; /* Tamaño de fuente */
  border-radius: 1rem; /* Bordes redondeados */
}

/* Estado en progreso */
.status-3 {
  background-color: #ef9a9a; /* Naranja, color de fondo */
  padding: 0.5rem 1rem; /* Espaciado dentro de la etiqueta */
  font-size: 1rem; /* Tamaño de fuente */
  border-radius: 1rem; /* Bordes redondeados */
}

/* Terminado */
.status-4 {
  background-color: #ffc107; /* Naranja, color de fondo */
  padding: 0.5rem 1rem; /* Espaciado dentro de la etiqueta */
  font-size: 1rem; /* Tamaño de fuente */
  border-radius: 1rem; /* Bordes redondeados */
}

/* Estado completo */
.status-5 {
  background-color: #8bc34a; /* Verde claro, color de fondo */
  padding: 0.5rem 1rem; /* Espaciado dentro de la etiqueta */
  font-size: 1rem; /* Tamaño de fuente */
  border-radius: 1rem; /* Bordes redondeados */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra sutil para darle profundidad */
}

/* Estado facturado */
.status-6 {
  background-color: #2196f3; /* Azul, color de fondo */
  padding: 0.5rem 1rem; /* Espaciado dentro de la etiqueta */
  font-size: 1rem; /* Tamaño de fuente */
  border-radius: 1rem; /* Bordes redondeados */
}

/* Estado pagado */
.status-7 {
  background-color: #bdbdbd; /* Verde más oscuro que el de "completo" */
  padding: 0.5rem 1rem; /* Espaciado dentro de la etiqueta */
  font-size: 1rem; /* Tamaño de fuente */
  border-radius: 1rem; /* Bordes redondeados */
  font-weight: bold; /* Hacer el texto más destacado */
}

/* Estado Pendiente pago */
.status-8 {
  background-color: #ff9800; /* Naranja, color de fondo */
  padding: 0.5rem 1rem; /* Espaciado dentro de la etiqueta */
  font-size: 1rem; /* Tamaño de fuente */
  border-radius: 1rem; /* Bordes redondeados */
}

/* Estado pagado */
.status-9 {
  background-color: #bdbdbd; /* Verde más oscuro que el de "completo" */
  padding: 0.5rem 1rem; /* Espaciado dentro de la etiqueta */
  font-size: 1rem; /* Tamaño de fuente */
  border-radius: 1rem; /* Bordes redondeados */
  font-weight: bold; /* Hacer el texto más destacado */
}

/* Estado Disponible */
.status-10 {
  background-color: #4caf50; /* Verde más oscuro que el de "completo" */
  padding: 0.5rem 1rem; /* Espaciado dentro de la etiqueta */
  font-size: 1rem; /* Tamaño de fuente */
  border-radius: 1rem; /* Bordes redondeados */
  font-weight: bold; /* Hacer el texto más destacado */
}

/* Estado En mantenimiento */
.status-11 {
  background-color: #ff9800; /* Verde más oscuro que el de "completo" */
  padding: 0.5rem 1rem; /* Espaciado dentro de la etiqueta */
  font-size: 1rem; /* Tamaño de fuente */
  border-radius: 1rem; /* Bordes redondeados */
  font-weight: bold; /* Hacer el texto más destacado */
}

/* Estado Dañado */
.status-12 {
  background-color: #f44336; /* Verde más oscuro que el de "completo" */
  padding: 0.5rem 1rem; /* Espaciado dentro de la etiqueta */
  font-size: 1rem; /* Tamaño de fuente */
  border-radius: 1rem; /* Bordes redondeados */
  font-weight: bold; /* Hacer el texto más destacado */
}

/* Estado Desactivado */
.status-13 {
  background-color: #f44336; /* Verde más oscuro que el de "completo" */
  padding: 0.5rem 1rem; /* Espaciado dentro de la etiqueta */
  font-size: 1rem; /* Tamaño de fuente */
  border-radius: 1rem; /* Bordes redondeados */
  font-weight: bold; /* Hacer el texto más destacado */
}

/* Estado Pendiente pago */
.status-14 {
  background-color: #ff9800; /* Naranja, color de fondo */
  padding: 0.5rem 1rem; /* Espaciado dentro de la etiqueta */
  font-size: 1rem; /* Tamaño de fuente */
  border-radius: 1rem; /* Bordes redondeados */
}

/* Estado pagado */
.status-15 {
  background-color: #bdbdbd; /* Verde más oscuro que el de "completo" */
  padding: 0.5rem 1rem; /* Espaciado dentro de la etiqueta */
  font-size: 1rem; /* Tamaño de fuente */
  border-radius: 1rem; /* Bordes redondeados */
  font-weight: bold; /* Hacer el texto más destacado */
}

/* Estado Nota de crédito */
.status-16 {
  background-color: #ff9800; /* Naranja, color de fondo */
  padding: 0.5rem 1rem; /* Espaciado dentro de la etiqueta */
  font-size: 1rem; /* Tamaño de fuente */
  border-radius: 1rem; /* Bordes redondeados */
}

/* Actividad: En línea */
.activity-online {
  background-color: #4caf50; /* Verde */
  color: #fff;
  padding: 0.5rem 1rem;
  font-size: 14px;
  border-radius: 1rem;
}

/* Actividad: Última vez visto */
.activity-last_seen {
  background-color: #9e9e9e; /* Gris */
  color: #fff;
  padding: 0.5rem 1rem;
  font-size: 14px;
  border-radius: 1rem;
}

/* Actividad: Sin actividad */
.activity-no_activity {
  background-color: #bdbdbd; /* Gris más claro */
  color: #fff;
  padding: 0.5rem 1rem;
  font-size: 14px;
  border-radius: 1rem;
}

.rounded-pill-yellow {
  background-color: #ffeb3b;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: 1rem;
  color: #000;
}

.rounded-pill-orange {
  background-color: #ff9800;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: 1rem;
  color: #000;
}

.rounded-pill-red {
  background-color: #f44336;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: 1rem;
  color: #000;
}

.rounded-pill-normal {
  /* background-color: #f44336;  */
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: 1rem;
  color: #000;
}

.no-wrap td,
.no-wrap th {
  white-space: nowrap;
}

.now-rap {
  white-space: nowrap;
}

/* Header (thead) compacto para los DataTables con panel de filtros.
   Solo se reduce el padding vertical; la letra queda a su tamaño normal. */
.dt-compact-header thead th {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

/* Card que contiene la tabla en los listados de los módulos: menos aire alrededor
   de la tabla (padding 20px -> 5px en los cuatro lados), para ganar ancho útil en
   móvil. El `pt-0` de Bootstrap (utilidad con !important) sigue mandando en el
   padding superior de las vistas que lo llevan. */
.dt-card-body {
  padding: 5px;
}

/* Separación entre cards más compacta (16px -> 8px). */
.card {
  margin-bottom: 0.5rem;
}

/* ===== Pie de los modales: los botones CENTRADOS ===========================
   Bootstrap alinea el `.modal-footer` a la derecha (`justify-content: flex-end`).
   Aquí van centrados, como ya estaban los 14 modales de informe: el diálogo es
   una caja estrecha y con su propio foco, así que el centro es el sitio donde ya
   está mirando el usuario — a diferencia de una pantalla completa, donde los
   botones se alinean con el resto del contenido.

   El ORDEN dentro del pie sí es el mismo del resto de pantallas: la acción
   primaria primero (Generar, Enviar, Marcar como no leída) y la destructiva al
   final; el Cerrar queda entre medias, porque no decide nada.
   ⚠️ Los 14 modales de informe no dependen de esta regla: sus botones viven en un
   `.row` propio dentro del pie, con su propio `justify-content-center`. */
.modal-footer {
  justify-content: center;
}

/* La acción DESTRUCTIVA del pie va separada del resto, para que no se pulse por
   error junto al botón que se usa siempre (Cerrar). Se hace con un hueco a su
   izquierda y NO empujándola al borde derecho: ahí están los botones flotantes de
   subir/bajar (`#scrollButtons`, fixed abajo a la derecha con z-index 1050) y se
   solaparían. El pie sigue centrado como un bloque.
   Uso: la clase va en el botón destructivo o en el <form> que lo envuelve. */
.modal-footer .lm-footer-danger {
  margin-left: 1.75rem;
}

@media (max-width: 575.98px) {
  /* En móvil el pie envuelve en varias líneas y el hueco grande descuadra: basta
     con un respiro, la separación real la da el salto de línea. */
  .modal-footer .lm-footer-danger {
    margin-left: 0.75rem;
  }
}

/* ===== Barra de acción: en pantallas pequeñas los botones se quedan solo con el
   icono =====================================================================
   Los botones que van debajo del título del módulo (Nuevo, Refrescar, Limpiar,
   acciones masivas...) llevan su texto dentro de un <span class="lm-btn-label">
   y el mismo texto en el atributo `title`. En móvil el texto se oculta: la barra
   se mantiene en UNA línea (con el texto se envolvía en varias y empujaba la
   tabla fuera de la pantalla) y la acción sigue identificable por el icono, el
   tooltip y los lectores de pantalla.

   Uso: contenedor de la barra con la clase `lm-actionbar` y cada botón como
        <i class="fas fa-x"></i><span class="lm-btn-label">Texto</span>
   ⚠️ Con solo iconos, dos acciones parecidas necesitan iconos DISTINTOS. */
/* El texto de un botón de la barra de acción. Ya NO aporta la separación: la pone la
   regla única de abajo sobre el icono. Se conserva la clase porque es la que oculta el
   texto en móvil. */
.lm-btn-label {
  margin-left: 0;
}

@media (max-width: 575.98px) {
  .lm-actionbar .lm-btn-label,
  .modal-footer .lm-btn-label {
    display: none;
  }

  .lm-actionbar .btn {
    padding: 0.3rem 0.6rem;
    font-size: 0.95rem;
  }
}

/* ===== Iconos de acción de las tablas de listado ========================
   Los 22 listados pintan sus acciones como iconos sueltos en la última columna
   (partials/index_actions). Antes TODOS iban en navy (`text-navy`): había que
   leer el tooltip o fijarse en la forma del icono para saber cuál era cuál, y
   la acción destructiva no se distinguía de las demás.

   Reglas de color (2026-08-15):
     · eliminar                    ROJO — destructivo, nunca de otro color
     · ver / editar / leída / no leída
       el MISMO color del texto del encabezado de la tabla (`.text-navy`,
       #002c59), para que la columna de acciones se lea como parte de la tabla
       y el único icono que resalte sea el destructivo.

   Uso: <span title="..." class="lm-action lm-action-<accion>"> + el SVG/icono,
   que hereda el color con fill="currentColor".
   ⚠️ Clases propias: el motor de modo noche no las repinta → su override vive
   en dark-mode.css, donde estos cuatro toman el color que el motor le da al
   encabezado en noche (DARK.text, #d0d0d0). */
.lm-action {
  margin-left: 0.4em;
  transition: color 0.15s ease-in-out;
}

.lm-action-view,
.lm-action-edit,
.lm-action-read,
.lm-action-unread {
  color: #002c59;
}

.lm-action-delete {
  color: #dc3545;
}

/* El icono vive dentro de un <a> o de un .btn-link, que traen su propio color
   de hover: se fuerza el de la acción (más oscuro) para que no cambie. */
a:hover .lm-action-view,
.btn-link:hover .lm-action-view,
a:hover .lm-action-edit,
.btn-link:hover .lm-action-edit,
a:hover .lm-action-read,
.btn-link:hover .lm-action-read,
a:hover .lm-action-unread,
.btn-link:hover .lm-action-unread {
  color: #001f3f;
}

a:hover .lm-action-delete,
.btn-link:hover .lm-action-delete {
  color: #a71d2a;
}

/* ===== Chips de listas (roles, permisos, etiquetas) =====================
   Se usan en las vistas de detalle para listar valores sueltos sin gastar una
   fila por cada uno: /user/{id} (roles y permisos efectivos) y /role/{id}
   (permisos del rol). Mismo tamaño que los badges .activity-* de más arriba.
   ⚠️ Al ser clases propias, el motor de modo noche no las repinta: su override
   vive en dark-mode.css. */
.lm-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.lm-chip {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: 14px;
  line-height: 1;
  border-radius: 1rem;
  background-color: #eef3fb;
  color: #1c4a86;
  border: 1px solid #cfdcf1;
}

.lm-chip-empty {
  font-size: 14px;
  color: #6c757d;
  font-style: italic;
}

/* Chevron del panel de filtros (junto al título): rota según abierto/cerrado.
   Apunta abajo cuando está expandido y a la derecha cuando está colapsado. */
.filter-toggle-chevron {
  transition: transform 0.2s ease;
  font-size: 0.85em;
}

.collapsed-card .filter-toggle-chevron {
  transform: rotate(-90deg);
}

/* Distintivo de "filtros aplicados": badge junto al título del panel de filtros.
   Visible aunque el panel esté colapsado (la cabecera siempre se muestra). */
.filter-active-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  margin-left: 0.5rem;
  border-radius: 9px;
  background-color: #f39c12; /* ámbar: llama la atención sin alarmar */
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

/* Realza el borde de la cabecera cuando hay filtros activos. */
.has-active-filters > .card-header {
  box-shadow: inset 3px 0 0 0 #f39c12;
}

/* Franja superior de las tarjetas `card-outline card-navy` (paneles de Filtros y de
   Estadísticas de los 21 listados): del navy #001f3f al azul #1d63b3, que es el mismo
   `--page-hero-blue` con el que termina el degradado del hero de cada módulo.

   ⚠️ La clase NO se define en el proyecto: viene de AdminLTE
   (`.card-navy.card-outline { border-top: 3px solid #001f3f }` en
   `vendor/adminlte/dist/css/adminlte.min.css`, que es distribución de terceros y no se
   toca). Se sobrescribe aquí con el MISMO selector — misma especificidad (0,2,0) — y gana
   porque `main.css` se carga después. Al ser una regla de CSS cubre los 26 usos de las 21
   vistas sin tocar ningún Blade.

   ⚠️ Esta regla NO cubre el modo noche: ahí manda
   `.dark-mode .card-navy.card-outline` (0,3,0) de AdminLTE, que le gana por especificidad
   — por eso va repetida abajo con la clase delante. El motor de `dark-mode.js` no escribe
   `border-top` sobre las tarjetas, así que las dos reglas bastan. */
.card-navy.card-outline {
  border-top: 3px solid #1d63b3;
}

/* Y en modo noche el mismo azul: AdminLTE pinta ahí su propia variante
   (`.dark-mode .card-navy.card-outline { border-top: 3px solid #002c59 }`, 0,3,0), que le
   gana a la regla de arriba, así que hay que repetirla con la clase `.dark-mode` delante.
   Misma especificidad que la del tema y gana por orden de carga. */
.dark-mode .card-navy.card-outline {
  border-top: 3px solid #1d63b3;
}

.scrollable-table {
  margin-top: 10px !important;
  margin-bottom: 15px !important;
  padding-top: 0px !important;
  overflow-y: auto;
  max-height: 400px; /* Ajusta el valor según sea necesario */
}

.table-responsive-all {
  width: 100%;
  overflow-x: auto;
}

.scrollable-table thead th {
  position: sticky;
  padding-top: 0px !important;
  top: 0;
  background-color: #f8f9fa; /* Color de fondo para los encabezados */
  z-index: 999;
}

/* Define la clase 'attention' */
.attention {
  font-weight: bold; /* Ejemplo de estilo */
  margin: 10px 0; /* Añade margen superior e inferior */
}

/* Define la clase 'list-icon' */
.list-icon {
  position: relative; /* Necesario para posicionar el pseudoelemento */
  padding-left: 1.5em; /* Ajusta el espacio a la izquierda para que la viñeta quede pegada al texto */
  font-style: italic; /* Cambia el estilo de la fuente a cursiva */
  display: flex; /* Utiliza flexbox para alinear la viñeta y el texto */
  align-items: center; /* Centra verticalmente el texto */
}

/* Pseudoelemento para la viñeta */
.list-icon::before {
  content: "•"; /* El carácter de viñeta */
  position: absolute; /* Posiciona el pseudoelemento de forma absoluta */
  left: 0; /* Alinea a la izquierda */
  color: black; /* Color de la viñeta */
  font-size: 1.2em; /* Tamaño de la viñeta */
  line-height: 1; /* Alineación vertical */
}

/* ESTILOS PARA EL REPORTE */
report-body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  font-size: 12pt;
}

.report-header {
  width: 100%;
  border-bottom: 1px solid #000;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.report-logo-img {
  width: 100px;
  height: auto;
}

.report-title {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

.report-subtitle {
  font-size: 14px;
  font-weight: bold;
  margin-top: 20px;
}

.report-div-border-text-200 {
  font-size: 12px;
  border: 1px solid #000; /* Borde sólido de 1px y color negro */
  border-radius: 10px; /* Esquinas redondeadas con un radio de 10px */
  padding: 10px; /* Espacio interno para separar el contenido del borde */
  height: 200px; /* Altura mínima de 100px */
}

.report-div-border-text-100 {
  font-size: 12px;
  border: 1px solid #000; /* Borde sólido de 1px y color negro */
  border-radius: 10px; /* Esquinas redondeadas con un radio de 10px */
  padding: 10px; /* Espacio interno para separar el contenido del borde */
  height: 100px; /* Altura mínima de 100px */
}

.report-div-border-text-80 {
  font-size: 12px;
  border: 1px solid #000; /* Borde sólido de 1px y color negro */
  border-radius: 10px; /* Esquinas redondeadas con un radio de 10px */
  padding: 10px; /* Espacio interno para separar el contenido del borde */
  height: 80px; /* Altura mínima de 100px */
}

.report-div-text {
  font-size: 12px;
  border: 0px; /* Borde sólido de 1px y color negro */
  padding: 5px; /* Espacio interno para separar el contenido del borde */
}

/* ///////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////// */

.report-header .report-left,
.report-header .report-right {
  width: 30px; /* Tamaño de los logos */
}

.report-header .report-left img,
.report-header .report-right img {
  width: 100%;
  height: auto;
}

.report-header .report-center {
  text-align: center;
  font-size: 14pt;
}

.report-content {
  margin: 0 20px;
}

/* ESTILOS PARA EL REPORTE */

.report-row {
  width: 100%;
}

.report-header-origin {
  border: 1px solid #f2f2f2;
  border-radius: 5px;
  background-color: #f2f2f2;
  margin-top: 15px;
}

.report-table {
  margin-top: 10px;
  border-collapse: collapse;
  border: 0px;
  width: 100%;
}

.report-table-th {
  font-size: 10pt;
  font-weight: bold;
  border: 1px solid #ddd;
  background-color: #f2f2f2;
}

.report-table-th-1 {
  font-size: 10pt;
  font-weight: bold;
  border: 1px solid #ddd;
  background-color: #f2f2f2;
  width: 30%;
}

.report-table-th-2 {
  font-size: 10pt;
  font-weight: bold;
  border: 1px solid #ddd;
  background-color: #f2f2f2;
  width: 15%;
}

.report-table-th-3 {
  font-size: 10pt;
  font-weight: bold;
  border: 1px solid #ddd;
  background-color: #f2f2f2;
  width: 55%;
}

.report-table-th-11 {
  font-size: 10pt;
  font-weight: bold;
  border: 1px solid #ddd;
  background-color: #f2f2f2;
  width: 20%;
}

.report-table-th-22 {
  font-size: 10pt;
  font-weight: bold;
  border: 1px solid #ddd;
  background-color: #f2f2f2;
  width: 80%;
}

.report-table-td {
  font-size: 9pt;
  border: 1px solid #ddd;
}

.report-field {
  font-size: 10pt;
  width: 100%;
  margin-top: 10px;
  margin-left: 10px;
  font-weight: bold;
}

.report-value {
  margin-left: 10px;
  font-size: 9pt;
  width: 100%;
}

.report-row-x1 {
  float: left;
  width: 100%;
  text-align: left;
  display: inline;
}

.report-row-x2 {
  float: left;
  width: 50%;
  text-align: left;
  display: inline;
}

.report-row-x3 {
  float: left;
  width: 33%;
  text-align: left;
  display: inline;
}

.report-row-x4 {
  float: left;
  width: 25%;
  text-align: left;
  display: inline;
}

.report-banner {
  width: 100%;
}

.report-banner-logo {
  float: left;
  width: 30%;
  text-align: left;
  display: inline;
}

.report-banner-title {
  float: left;
  width: 70%;
  text-align: center;
  display: inline;
}

.report-footer-left {
  float: left;
  width: 50%;
  text-align: left;
  display: inline;
  font-size: 9pt;
  border-top: 1px solid;
}

.report-footer-right {
  float: left;
  width: 50%;
  text-align: right;
  display: inline;
  font-size: 9pt;
  border-top: 1px solid;
}

.report-signature {
  width: 250px;
  height: auto !important;
}

.report-signature-img {
  width: 250px;
  height: auto;
}

.report-msgend {
  padding-top: 30px;
  text-align: center;
}

.report-signature-1 {
  font-size: 10pt;
}

.page-break-inside {
  page-break-inside: avoid;
  width: 100%;
}

.page-break-inside-table {
  page-break-inside: avoid;
  width: 100%;
  margin-top: 15px;
}

.page-break-inside-table-signature {
  page-break-inside: avoid;
  width: 100%;
  padding-top: 50px;
}

.page-break-inside-tr {
  width: 100%;
}

.page-break-inside-td {
  width: 100%;
}

.table-normal {
  margin-top: 15px;
}

/* Spinner moderno del modal "Por favor espere" (reemplaza el loading.gif viejo).
   Anillo CSS en azul de marca: nítido a cualquier resolución y visible tanto en
   día (modal blanco) como en noche (#1e2130). No usa la paleta del motor JS, así
   que se ve igual en ambos temas. */
.lm-spinner {
  width: 52px;
  height: 52px;
  margin: 6px auto;
  border-radius: 50%;
  border: 4px solid rgba(74, 158, 255, 0.22);
  border-top-color: #2b7de9;
  animation: lm-spin 0.75s linear infinite;
}

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

/* Botón de confirmar de los diálogos SweetAlert (Aceptar / OK).
   Venía con el morado por defecto de SweetAlert2 (#7066e0), que no es de la paleta de
   la app; ahora usa el mismo azul de los botones (#007bff, el .btn-primary).
   ⚠️ `!important` en las dos líneas: SweetAlert2 escribe la variable del halo de foco
   EN LÍNEA sobre el propio botón, y un valor inline solo se puede revertir así.
   El botón de cancelar/denegar conserva su color. */
.swal2-styled.swal2-confirm {
  background-color: #007bff !important;
  --swal2-action-button-focus-box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5) !important;
}

/* Estándar de los botones que NO confirman:

     Cancelar  ->  ROJO  (#dc3545, el mismo rojo de eliminar)  = botón `deny`
     Cerrar    ->  GRIS  (#6c757d, el mismo `.btn-secondary`)  = botón `cancel`

   "Cancelar" aborta una acción que ya se propuso (y en esta app casi siempre es una
   destructiva), así que va en el rojo de la paleta; "Cerrar" solo sale de un diálogo,
   sin decidir nada, y va en el gris neutro — el mismo de los pies de los 17 modales,
   para que el mismo texto no tenga dos colores según dónde aparezca.

   Los dos valores son los de la app, no los de la librería: SweetAlert2 trae el deny en
   un #dc3545 que coincide de casualidad y el cancel en #6e7881, un gris distinto del de
   Bootstrap. Se fijan aquí para que dejen de depender de la versión del CDN (`@11`).
   ⚠️ Misma razón que arriba para el `!important` del halo de foco: SweetAlert2 escribe
   esa variable EN LÍNEA sobre el propio botón. */
.swal2-styled.swal2-deny {
  background-color: #dc3545 !important;
  --swal2-action-button-focus-box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.5) !important;
}

.swal2-styled.swal2-cancel {
  background-color: #6c757d !important;
  --swal2-action-button-focus-box-shadow: 0 0 0 3px rgba(108, 117, 125, 0.5) !important;
}

/* Icono en los botones de los diálogos, como en el resto de la app (todo botón lleva icono).

   Va por CSS y no por JS a propósito: el texto de estos botones se pasa en 97 `confirmButtonText`
   y 41 `denyButtonText` repartidos por 8 archivos, y meter el `<i>` en cada uno serían 138 sitios
   que mantener. Aquí es una regla y cubre cualquier diálogo nuevo sin que haya que acordarse.

   El icono es el mismo que ya usa cada acción en el HTML: `fa-check` para Aceptar y `fa-times` para
   Cerrar (el de los pies de los 17 modales). ⚠️ Cancelar usa **`fa-ban`**, NO `fa-times`: son dos
   botones distintos (rojo/gris) y compartir icono los volvería a mezclar — la misma razón por la
   que los dos borrados masivos de /notification usan `fa-user-slash` y `fa-users-slash`.

   El `margin-right` es el mismo `.25rem` de la regla `.btn > i[class*="fa-"]`, para que la
   separación icono-texto sea idéntica dentro y fuera de los diálogos.

   ⚠️ No estorba al spinner de `Swal.showLoading()`: ese **oculta** el botón de confirmar
   (`display:none`) e inserta el loader como hermano, así que el `::before` desaparece con él. */
.swal2-styled.swal2-confirm::before,
.swal2-styled.swal2-deny::before,
.swal2-styled.swal2-cancel::before {
  font-family: "Font Awesome 5 Free"; /* FA 5.15.4 free: los `fas` son weight 900 */
  font-weight: 900;
  margin-right: 0.25rem;
}

.swal2-styled.swal2-confirm::before {
  content: "\f00c"; /* fa-check */
}

.swal2-styled.swal2-deny::before {
  content: "\f05e"; /* fa-ban */
}

.swal2-styled.swal2-cancel::before {
  content: "\f00d"; /* fa-times */
}

/* ============================================================================
   Separación entre el icono de un botón y su texto: UNA SOLA FORMA.

   Convivían tres: `pr-1` escrito a mano en el <i> (218 sitios), el espacio literal
   que dejaba el componente x-adminlte-button y el `margin-left` de `.lm-btn-label`
   —que además daba 6.4px frente a los 4px de las otras dos—. Ahora la pone el CSS y
   el HTML solo lleva el <i>: no hay forma de olvidarla al escribir un botón nuevo.

   Los `pr-1` que ya existen NO se quitaron de los Blades (218 sitios): se neutralizan
   aquí para que no se sumen. Fuera de un botón siguen funcionando igual.
   ============================================================================ */
/* 🔴 NADA de `:not(:only-child)` aquí: el texto de un botón es un NODO DE TEXTO, no un
   elemento, así que un `<i>` seguido solo de texto SÍ cumple `:only-child` y la regla no
   le aplicaba — que es justo el caso más común (icono + label). Con eso los botones del
   componente quedaron pegados en producción. Se aplica a todos y se exceptúan abajo los
   pocos que son solo icono. */
.btn > i[class*="fa-"],
.btn > span[class*="fa-"] {
  margin-right: 0.25rem;
}

/* Botones que son SOLO icono y llevan el <i> como hijo directo: los buscadores del
   navbar y del menú lateral que trae AdminLTE. Ahí el margen sobra y descentra el
   glifo. (Los de solo icono del proyecto —las dos campanas de /notification— llevan el
   <i> anidado en un <span>, así que el selector de hijo directo ni los alcanza.) */
.main-header .btn > i[class*="fa-"],
.main-sidebar .btn > i[class*="fa-"] {
  margin-right: 0;
}

.btn > i[class*="fa-"].pr-1 {
  padding-right: 0 !important;
}

/* Botón que en móvil se queda SOLO con el icono (el .lm-btn-label se oculta): sin quitar
   el margen, el glifo quedaría descentrado dentro del botón.

   🔴 El `:has(> .lm-btn-label)` NO es decorativo: la regla apuntaba a TODO botón del pie de
   un modal, pero solo pierden el texto los que lo llevan dentro de un `.lm-btn-label`. Los
   botones de los **14 modales de informe** (Generar/Cerrar) y los del envío de documentos de
   la factura escriben su texto como nodo suelto —no se ocultan nunca—, así que en el teléfono
   se quedaban con el icono PEGADO al texto. Con el `:has()` solo se descuenta el margen a los
   que de verdad se quedan sin texto.
   ⚠️ En un navegador sin `:has()` la regla entera se descarta: los botones solo-icono
   conservarían 4px de margen a la derecha (glifo apenas descentrado). Se prefiere ese defecto
   —cosmético y en móvil— a que el texto vuelva a salir pegado al icono. */
@media (max-width: 575.98px) {
  .lm-actionbar .btn:has(> .lm-btn-label) > i[class*="fa-"],
  .modal-footer .btn:has(> .lm-btn-label) > i[class*="fa-"] {
    margin-right: 0;
  }
}

/* ============================================================================
   Navbar sticky (fixed-top) con layout-navbar-fixed.

   Al fijar el navbar, AdminLTE lo saca del flujo. El .brand-link del sidebar
   pierde su fondo y alineación porque su altura no está definida y hereda del
   contenido. Aquí se fija a 60px (altura estándar del navbar) con el color
   del sidebar (#001f3f) y se alinea el contenido centrado.
   ============================================================================ */
body.layout-navbar-fixed .brand-link {
  background-color: #001f3f;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* En modo noche, conservar el fondo oscuro */
@media (prefers-color-scheme: dark) {
  body.layout-navbar-fixed.dark-mode .brand-link {
    background-color: #0a0e1a;
  }
}

/* En pantallas pequeñas (≤575.98px), asegurar que el brand-link mantenga su altura
   incluso con el sidebar colapsado en modo mini */
@media (max-width: 575.98px) {
  body.layout-navbar-fixed.sidebar-mini .brand-link {
    height: 60px;
  }
}

/* Agregar padding superior al content-wrapper cuando el navbar está fijo,
   para un pequeño espaciado visual profesional entre el navbar y el contenido */
body.layout-navbar-fixed .content-wrapper {
  padding-top: 10px;
}