/* =========================================================================
   UpInvoices — tema para Bootstrap 5 (Web Forms / cualquier sitio .NET)
   Requiere Bootstrap 5.2 o superior (usa las variables CSS --bs-*).
   Cárgalo SIEMPRE después de bootstrap.min.css.
   ========================================================================= */

:root{
  /* --- Tokens de marca --------------------------------------------------- */
  --up-brand-500:#38b2da;   /* Azul logo — solo decorativo/isotipo, ≥24px  */
  --up-brand-700:#24738d;   /* Variante accesible del azul (texto/botones) */
  --up-brand-100:#eaf6fa;   /* Lavado claro de azul (fondos suaves)        */
  --up-ink:#154251;         /* Azul marino — texto principal               */
  --up-ink-muted:#4f5965;   /* Gris logo — texto secundario                */
  --up-success-500:#76cf13; /* Verde — solo decorativo, ≥24px              */
  --up-success-700:#1c6e42; /* Verde con más separación de tono respecto a brand-700/info (antes casi se confundían) */
  --up-danger:#c0392b;
  --up-warning:#8c5e08;
  --up-surface-000:#ffffff;
  --up-surface-100:#f1f1f1; /* Gris claro — fondo de página                */
  --up-border:#d9dee2;

  --up-space-1:4px;
  --up-space-2:8px;
  --up-space-3:16px;
  --up-space-4:24px;
  --up-space-5:48px;

  --up-radius-sm:4px;
  --up-radius-md:6px;
  --up-radius-lg:8px;
  --up-radius-pill:999px;

  --up-shadow-sm:0 1px 2px rgba(21,66,81,.08);
  --up-shadow-md:0 4px 12px rgba(21,66,81,.12);

  /* --- Overrides de las variables globales de Bootstrap 5 ---------------- */
  --bs-primary: var(--up-brand-700);
  --bs-primary-rgb: 36,115,141;
  --bs-secondary: var(--up-ink-muted);
  --bs-secondary-rgb: 79,89,101;
  --bs-success: var(--up-success-700);
  --bs-success-rgb: 28,110,66;
  --bs-danger: var(--up-danger);
  --bs-danger-rgb: 192,57,43;
  --bs-warning: var(--up-warning);
  --bs-warning-rgb: 140,94,8;
  --bs-info: var(--up-brand-700);
  --bs-info-rgb: 36,115,141;
  --bs-light: var(--up-surface-100);
  --bs-light-rgb: 241,241,241;
  --bs-dark: var(--up-ink);
  --bs-dark-rgb: 21,66,81;

  --bs-body-color: var(--up-ink);
  --bs-body-bg: var(--up-surface-000);
  --bs-emphasis-color: var(--up-ink);
  --bs-secondary-color: var(--up-ink-muted);
  --bs-border-color: var(--up-border);
  --bs-border-radius: var(--up-radius-md);
  --bs-border-radius-sm: var(--up-radius-sm);
  --bs-border-radius-lg: var(--up-radius-lg);
  --bs-border-radius-pill: var(--up-radius-pill);
  --bs-body-font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --bs-link-color: var(--up-brand-700);
  --bs-link-color-rgb: 36,115,141;
  --bs-link-hover-color: var(--up-ink);
}

/* --- Tipografía ---------------------------------------------------------- */
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
  font-weight:500;
  line-height:1.2;
  color:var(--up-ink);
}
.lead{ font-weight:300; }
small,.small{ color:var(--up-ink-muted); }
/* Excepción: dentro de un botón, el <small> es solo para achicar la letra
   ("Agregar un ticket", "Buscar una factura", los badges "Pendientes ##"),
   no para el texto secundario silenciado — debe heredar el color de texto
   del botón (blanco casi siempre), si no, queda invisible sobre fondos
   oscuros como .btn-default (mismo tono que el ink-muted forzado arriba). */
.btn small,
.btn .small{ color:inherit; }
/* Mismo problema que el de arriba, pero en tarjetas con encabezado de color
   (.text-bg-info/.text-bg-danger/.text-bg-warning/etc, p.ej. la fecha del
   "Tablero" de comunicados en Inicio.aspx): el <small> queda con el gris
   silenciado en vez del color claro del encabezado, y se pierde por bajo
   contraste sobre el fondo oscuro. Hereda el color del contenedor. */
[class*="text-bg-"] small,
[class*="text-bg-"] .small{ color:inherit; }
code,kbd,pre{ font-family:SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace; }

/* --- Botones: texto blanco garantizado sobre los tonos accesibles -------- */
.btn-primary{
  --bs-btn-color:#fff;
  --bs-btn-bg:var(--up-brand-700);
  --bs-btn-border-color:var(--up-brand-700);
  --bs-btn-hover-bg:var(--up-ink);
  --bs-btn-hover-border-color:var(--up-ink);
  --bs-btn-active-bg:var(--up-ink);
  --bs-btn-active-border-color:var(--up-ink);
  --bs-btn-focus-shadow-rgb:36,115,141;
}
.btn-success{
  --bs-btn-color:#fff;
  --bs-btn-bg:var(--up-success-700);
  --bs-btn-border-color:var(--up-success-700);
}
.btn-outline-primary{
  --bs-btn-color:var(--up-brand-700);
  --bs-btn-border-color:var(--up-brand-700);
  --bs-btn-hover-bg:var(--up-brand-700);
  --bs-btn-hover-color:#fff;
}

/* --- Corrección de Bootswatch "spacelab" ---------------------------------
   bootstrapTheme.css es el tema Bootswatch "spacelab": pinta navbar/botones
   con gradientes y bordes en HEX fijo (no usan var(--bs-*)), así que tapan
   los colores de marca de arriba. Quitamos el gradiente para que se vea el
   background-color plano que sí respeta las variables.                 --- */
.navbar.bg-primary,
.navbar.bg-secondary,
.navbar.bg-success,
.navbar.bg-info,
.navbar.bg-warning,
.navbar.bg-danger,
.navbar.bg-light,
.navbar.bg-dark,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger,
.btn-light,
.btn-dark{
  background-image:none;
}
.btn-primary:not(.disabled):hover,
.btn-secondary:not(.disabled):hover,
.btn-success:not(.disabled):hover,
.btn-info:not(.disabled):hover,
.btn-warning:not(.disabled):hover,
.btn-danger:not(.disabled):hover,
.btn-light:not(.disabled):hover,
.btn-dark:not(.disabled):hover{
  background-image:none;
}
/* --- Navbar en azul marino, separado del azul de botones/enlaces ---------
   bg-primary (brand-700) se queda para botones y links del contenido; el
   navbar usa su propio tono (ink, el azul marino más oscuro) para que no
   todo el sitio se vea del mismo azul "plano".                          --- */
.bg-brand-navbar{
  background-color:var(--up-ink);
}
.btn-primary,
.btn-primary:not(.disabled):hover{
  border-color:var(--up-brand-700);
}
.btn-primary:not(.disabled):hover{
  border-color:var(--up-ink);
}
.btn-success,
.btn-success:not(.disabled):hover{
  border-color:var(--up-success-700);
}

/* --- Restaura ".form-inline" (helper de Bootstrap 3/4, eliminado en 5) ---
   Se usa en ~24 pantallas (filtros de búsqueda, etc.) para poner varios
   campos en una sola línea. Bootstrap 5 ya no trae esta clase, y su propia
   regla ".row > *{ width:100% }" hace que cualquier .row o columna sin
   clase col-* ocupe todo el ancho, apilando verticalmente lo que antes iba
   en línea (ej. EstatusPagos.aspx). Se recrea el comportamiento con flex,
   pero SOLO a partir de tablet (≥768px): en teléfono cada campo se queda
   apilado a lo ancho completo, que es más fácil de tocar y leer que
   comprimir varios inputs en una sola línea angosta.                   --- */
@media (min-width:768px){
  .row > .form-inline,
  .form-inline > .row,
  .form-inline .row > *,
  .form-inline [class*="col-"]{
    width:auto;
    flex:0 0 auto;
  }
  .form-inline{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    column-gap:1.5rem;
    row-gap:.5rem;
  }
  .form-inline .form-control,
  .form-inline .form-select{
    display:inline-block;
    width:auto;
    vertical-align:middle;
  }
  .form-inline h5,
  .form-inline h6{
    display:inline;
    font-size:inherit;
    font-weight:inherit;
    margin:0;
  }
}

/* --- ".form-group"/".form-group1" sueltos dentro de un .row --------------
   Mismo problema que ".form-inline": si el campo queda como hijo directo
   de un .row sin clase col-*, Bootstrap 5 lo estira a 100% y lo apila.
   Aquí sí queremos que respete su ancho de contenido en cualquier tamaño
   de pantalla (no es un layout "en línea", solo evita el estirón).      --- */
.row > .form-group,
.row > .form-group1{
  width:auto;
  flex:0 0 auto;
}

/* --- ".d-contents": para cuando un <asp:Panel> envuelve una columna ------
   Un <asp:Panel> siempre genera su propio <div> sin clase de columna. Si
   queda como hijo directo de un ".row" (ej. OrdenViatico.aspx: el Panel de
   "Agregar evidencia"/"Buscar una factura" alrededor de un ".col-md-*"),
   Bootstrap le da 100% de ancho a ese <div> y empuja todo lo siguiente a su
   propia línea, aunque la columna de adentro esté bien armada. "display:
   contents" hace que el <div> del Panel "desaparezca" del layout y sus
   hijos (la columna real) se comporten como si fueran hijos directos del
   .row. Agregar CssClass="d-contents" al <asp:Panel> en cuestión.        --- */
.d-contents{ display:contents; }

/* --- <hr> como hijo directo de un .row (varias pantallas lo tienen así) --
   Bootstrap 5 pone margin-top:0 a TODO hijo directo de .row (para controlar
   el espacio entre columnas), incluido un <hr> colado ahí por error de
   markup. Sin margen superior la línea queda pegada al elemento de arriba
   (se ve "cortada"/superpuesta), y si debajo no sigue más contenido de la
   página, termina casi tocando el <hr> del pie de página del sitio,
   pareciendo una línea duplicada. Se le devuelve al <hr> su margen normal
   sin tener que mover el markup de cada pantalla.                       --- */
.row > hr{
  margin-top:1rem;
  width:100%;
}

/* --- Tablas sin ".table-responsive" en teléfono ---------------------------
   Ningún GridView del sitio está envuelto en un div .table-responsive, así
   que en pantallas angostas las tablas con muchas columnas (pagos, órdenes,
   facturas) desbordan el ancho y rompen el layout completo de la página.
   Se agrega scroll horizontal contenido directamente en la tabla, sin
   necesidad de envolver cada GridView en un div nuevo.                  --- */
@media (max-width:767.98px){
  .table{
    display:block;
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .table > :is(thead,tbody) > tr > :is(th,td){
    white-space:nowrap;
  }
}

/* --- Botones/insignias legacy de Bootstrap 3/4 ----------------------------
   ".btn-default" se renombró a ".btn-secondary" en Bootstrap 5 y ya no trae
   estilos propios (queda sin color). ".label"/".label-primary"/".label-
   success" se renombraron a ".badge"/".text-bg-*". Se replica el look aquí
   para no tener que tocar el markup de los ~14 archivos que las usan.   --- */
.btn-default{
  --bs-btn-color:#fff;
  --bs-btn-bg:var(--up-ink-muted);
  --bs-btn-border-color:var(--up-ink-muted);
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:var(--up-ink);
  --bs-btn-hover-border-color:var(--up-ink);
  --bs-btn-active-color:#fff;
  --bs-btn-active-bg:var(--up-ink);
  --bs-btn-active-border-color:var(--up-ink);
  background-image:none;
}
.label{
  display:inline-block;
  padding:.35em .65em;
  font-size:.75em;
  font-weight:700;
  line-height:1;
  color:#fff;
  text-align:center;
  white-space:nowrap;
  vertical-align:baseline;
  border-radius:var(--up-radius-sm);
  background-color:var(--up-ink-muted);
}
.label-primary{ background-color:var(--up-brand-700); }
.label-success{ background-color:var(--up-success-700); }

/* --- ".panel"/".panel-default"/".panel-info" + ".panel-heading/-body/-footer"
   (componente "Panel" de Bootstrap 3, reemplazado por ".card" en 4/5 y ya
   sin estilos propios). EmpresaAvanzada.aspx (dentro de ".card") y
   ConfigFlujo.aspx (como contenedor propio) todavía usan este markup; se
   replica aquí el look de tarjeta para no reescribir esas pantallas.   --- */
.panel{
  background-color:var(--up-surface-000);
  border:1px solid var(--up-border);
  border-radius:var(--up-radius-lg);
  margin-bottom:var(--up-space-4);
}
.panel-info{ border-color:var(--up-brand-700); }
.panel-heading{
  padding:var(--up-space-2) var(--up-space-3);
  border-bottom:1px solid var(--up-border);
  border-top-left-radius:calc(var(--up-radius-lg) - 1px);
  border-top-right-radius:calc(var(--up-radius-lg) - 1px);
}
.panel-info > .panel-heading{
  background-color:var(--up-brand-700);
  color:var(--up-surface-000);
}
.panel-body{
  padding:var(--up-space-3);
}
.panel-footer{
  padding:var(--up-space-2) var(--up-space-3);
  background-color:var(--up-surface-100);
  border-top:1px solid var(--up-border);
  border-bottom-left-radius:calc(var(--up-radius-lg) - 1px);
  border-bottom-right-radius:calc(var(--up-radius-lg) - 1px);
}

/* --- ".thumbnail" (Bootstrap 3, eliminado en 4/5) — AprobacionViatico.aspx
   lo usa para enmarcar cada adjunto de la galería de evidencias.       --- */
.thumbnail{
  display:block;
  padding:var(--up-space-1);
  background-color:var(--up-surface-000);
  border:1px solid var(--up-border);
  border-radius:var(--up-radius-md);
}

/* --- ".jumbotron" (Bootstrap 3/4, eliminado en 5) — Default.aspx lo usa
   para el bloque de bienvenida con el logo.                            --- */
.jumbotron{
  padding:var(--up-space-5) var(--up-space-4);
  background-color:var(--up-surface-000);
  border-radius:var(--up-radius-lg);
  box-shadow:var(--up-shadow-sm);
  text-align:center;
}

/* --- ".sr-only" (Bootstrap 3/4, renombrado ".visually-hidden" en 5) ------
   Replica exacta de la regla ".visually-hidden" del tema, para los dos
   botones de cierre de modal que aún usan el nombre viejo.             --- */
.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

/* --- ".control-label" (Bootstrap 3, renombrado ".form-label" en 4/5) ----- */
.control-label{
  margin-bottom:var(--up-space-1);
  display:inline-block;
}

/* --- ".btn-xs" (Bootstrap 3, ya no existe en 5 — solo quedan .btn-sm/.btn-lg)
   Sin esto el botón cae al tamaño normal de ".btn", mucho más grande de lo
   pensado para caber en una fila de tabla o lista (OrdenViatico.aspx y
   otras 5 pantallas de Comprobantes lo usan, ~40 botones en total).     --- */
.btn-xs{
  --bs-btn-padding-y:.1rem;
  --bs-btn-padding-x:.4rem;
  --bs-btn-font-size:.7rem;
  --bs-btn-border-radius:var(--up-radius-sm);
}

/* --- ".checkbox"/".radio" como wrapper (patrón Bootstrap 3, reemplazado
   por ".form-check" en Bootstrap 5) -----------------------------------
   Sin el CSS viejo, el checkbox/radio queda pegado al texto de su label
   en vez de alineado con sangría. Se recrea el comportamiento original. */
.checkbox,
.radio{
  position:relative;
  display:block;
  margin-bottom:.5rem;
}
.checkbox label,
.radio label{
  padding-left:1.5rem;
  margin-bottom:0;
  font-weight:400;
  cursor:pointer;
}
.checkbox input[type="checkbox"],
.radio input[type="radio"]{
  position:absolute;
  margin-left:-1.5rem;
  margin-top:.25rem;
}

/* --- Botón de cierre legacy en alertas ------------------------------------
   Varias pantallas arman el HTML del alert por código con la clase vieja de
   Bootstrap 3/4 (class="close" data-dismiss="alert" + &times;), que ya no
   existe en Bootstrap 5 (ahora es .btn-close). Sin estilos, el <button> sale
   con el look nativo del navegador y se monta encima del texto. Se restyla
   aquí para que combine con el resto de las alertas sin tocar ese código.  */
.alert .close{
  float:right;
  margin:-.35rem -.35rem -.35rem 1rem; /* compensa el padding para que el tamaño visual no cambie */
  padding:.35rem; /* área táctil algo más grande que el glifo solo, sin tocar el markup */
  background-color:transparent;
  border:0;
  border-radius:var(--up-radius-sm); /* así el anillo de foco (:focus-visible, más abajo) siga una esquina redonda en vez de un cuadro duro */
  font-size:1.15rem; /* antes 1.5rem: junto con el anillo de foco se veía como un recuadro enorme sobre un ícono chico */
  font-weight:700;
  line-height:1;
  color:inherit;
  opacity:.5;
  cursor:pointer;
}
.alert .close:focus-visible{
  outline-offset:1px; /* más ceñido que el offset general (2px) para que el anillo no infle aún más este botón, ya de por sí achicado arriba */
}
.alert .close:hover,
.alert .close:focus{
  opacity:.85;
}

/* --- Pills activos (nav-pills) con azul de Bootswatch sin marca ----------
   ".nav-pills .nav-link.active" (ej. filtros "Sin Factura/Revisión/
   Rechazado/..." de Órdenes de compra) usa un azul hardcodeado del tema
   Bootswatch (#446e9b) en vez de nuestra variable de marca, y el badge del
   contador (bg-primary, nuestro teal) queda casi del mismo tono que ese
   fondo — se pierde el contraste. Se alinea el fondo del pill activo a la
   marca y se aclara el badge para que el número siga siendo legible.    --- */
.nav-pills{
  --bs-nav-pills-link-active-bg:var(--up-brand-700);
}
/* El fondo del pill activo ya cambia a brand-700 (arriba), pero el texto
   se quedaba heredando el color de cuerpo (ink, navy oscuro) en vez del
   blanco que trae Bootstrap por defecto para el pill activo: navy sobre
   brand-700 da 2:1 de contraste, casi ilegible. Se fija el texto en blanco
   explícitamente (5.4:1 sobre brand-700). */
.nav-pills .nav-link.active,
.nav-pills .nav-link.active small,
.nav-pills .nav-link.active .small{
  color:var(--up-surface-000)!important;
}
.nav-pills .nav-link.active .badge{
  background-color:rgba(255,255,255,.25)!important;
  color:#fff!important;
}

/* --- Encabezado de modal: título y botón de cerrar -----------------------
   En casi todos los modales del sitio el <button class="btn-close"> va
   ANTES que el <h4 class="modal-title"> en el HTML (al revés de lo que
   espera Bootstrap). El margin-left:auto de .btn-close asume que él es el
   ÚLTIMO elemento del header para empujarse a la derecha; si va primero,
   se empuja a sí mismo y dejar al título apachurrado justo a su lado en
   vez de a la izquierda. Se reordena con flexbox (sin tocar el markup de
   los ~40 modales) para que el título siempre quede a la izquierda y el
   botón de cerrar a la derecha, sin importar el orden en el HTML.       --- */
.modal-header .modal-title{
  order:1;
  flex:1 1 auto;
}
.modal-header .btn-close{
  order:2;
  margin-left:0;
}

/* --- Foco visible, accesible sobre cualquier fondo claro ----------------- */
:focus-visible{
  outline:2px solid var(--up-brand-700);
  outline-offset:2px;
}

/* --- Tarjetas: bordes en vez de sombra (marca minimalista) --------------- */
.card{
  border-color:var(--up-border);
  box-shadow:none;
}
.dropdown-menu,.modal-content{
  box-shadow:var(--up-shadow-md);
}

/* --- Utilidades propias de marca que Bootstrap no cubre ------------------ */
.text-ink{ color:var(--up-ink)!important; }
.text-ink-muted{ color:var(--up-ink-muted)!important; }
.bg-brand-500{ background-color:var(--up-brand-500)!important; }
.bg-brand-100{ background-color:var(--up-brand-100)!important; }
.shadow-brand-sm{ box-shadow:var(--up-shadow-sm)!important; }
.shadow-brand-md{ box-shadow:var(--up-shadow-md)!important; }

/* --- Ítems de lista con encabezado mal anidado ---------------------------
   Varias pantallas (p.ej. "Solicitudes pendientes") meten un <h5> dentro de
   .list-group-item solo para agrupar texto, no como título real. Con el
   tamaño/peso de encabezado de arriba se ve gigante y descuadrado frente al
   resto del card, así que aquí se normaliza a texto de cuerpo.          --- */
.list-group-item h5{
  font-size:1rem;
  font-weight:400;
  line-height:1.4;
  margin-bottom:0;
}

/* --- Insignias de estado de factura --------------------------------------
   Uso: <span class="badge rounded-pill badge-pagada">Pagada</span>          */
.badge-pagada{ background-color:var(--up-success-700); color:#fff; }
.badge-vencida{ background-color:var(--up-danger); color:#fff; }
.badge-pendiente{ background-color:var(--up-warning); color:#fff; }

/* --- Logotipo: crédito discreto al pie de página, no en la navbar --------
   UpInvoices funciona como "marca blanca" para sus clientes: no debe sentirse
   como el protagonista del proceso, así que el logo se retira de la barra
   superior (donde competía visualmente con el contenido del cliente) y baja
   al pie de cada página como un crédito pequeño y de bajo contraste,
   alineado a la derecha. Sigue funcionando como enlace a Inicio.        --- */
.footer-brand{
  display:inline-flex;
  align-items:center;
  opacity:.55;
  transition:opacity .15s ease-in-out;
}
.footer-brand:hover,
.footer-brand:focus-visible{ opacity:1; }
.footer-brand img{
  height:18px;
  width:auto;
  display:block;
}
.brand-tagline{ color:var(--up-ink-muted); font-size:.75rem; letter-spacing:.02em; }

/* --- Nombre del usuario y "Cerrar": más contraste en el navbar -----------
   navbar-dark deja los nav-link al 55% de opacidad blanca por defecto,
   bien para el menú principal, pero apaga el nombre de quien inició
   sesión y el enlace para salir. Se sube solo ese bloque (todo lo que
   viene después de #p1: nombre, soporte y cerrar), sin tocar el resto
   del menú ni el markup.                                               --- */
#p1 .nav-link,
#p1 ~ li .nav-link{
  color:rgba(255,255,255,.85);
}
#p1 .nav-link:hover,
#p1 .nav-link:focus,
#p1 ~ li .nav-link:hover,
#p1 ~ li .nav-link:focus{
  color:#fff;
}

/* .align-middle en Bootstrap solo funciona puesto en <tr>/<td>/<th>; en varias tablas del sitio
   se puso en el <table> (ej. GridViews de comprobaciones), donde vertical-align no tiene efecto.
   Esta regla hace que ese uso existente sí centre verticalmente el contenido de cada celda. */
.table.align-middle td, .table.align-middle th { vertical-align: middle; }

/* Los badges de estatus con mensaje largo (validaciones fallidas, "Factura duplicada",
   fechas fuera de rango, etc.) usan .badge de Bootstrap, que por defecto trae
   white-space:nowrap - obliga a que el mensaje completo quepa en un solo renglon y
   ensancha la columna (y la tabla entera) para lograrlo, apretando las columnas de
   Concepto/Comentario. Solo se ajustan los colores danger/warning porque son los que
   usa el codigo para mensajes de validacion; los badges cortos (ej. success = "Correcta")
   no se ven afectados, ya que un texto corto no necesita partirse en varias lineas. */
.table .badge.text-bg-danger,
.table .badge.text-bg-warning {
    white-space: normal;
    max-width: 220px;
    display: inline-block;
    text-align: left;
    font-size: .875em;
}

/* Los badges usados como mensaje de resultado condicional (ej. lblResCC en el modal
   "Cambio de centro de costo" de AprobacionGastoSinOrden.aspx) se dejan en el markup
   con Text="" cuando todavia no hay nada que mostrar. Bootstrap le da a .badge
   padding/altura incluso sin contenido, asi que se ve como una barra de color solida
   ("linea cafe") en vez de no mostrarse. :empty lo oculta solo cuando de verdad no
   tiene texto, sin afectar los badges que si traen contenido. */
.badge:empty {
    display: none;
}

/* Mismo problema que el bloque de arriba (badges usados para mensajes de validacion
   largos), pero cuando el badge esta suelto dentro de un modal en vez de una celda de
   tabla (ej. lblResCC en "Cambio de centro de costo" de AprobacionGastoSinOrden.aspx).
   Ahi no aplica el max-width:220px pensado para no ensanchar una columna - lo que se
   quiere es lo contrario: que ocupe todo el ancho del modal en vez de quedar en una
   caja angosta y apretada. Tambien se quita el font-weight:bold que trae .badge por
   defecto (pensado para etiquetas cortas como "Aceptada"), que en un parrafo largo se
   ve pesado, y se sube el tamano de letra a la escala de .small que se usa en el resto
   del sitio para que sea comodo de leer. */
.modal-body .badge.text-bg-danger,
.modal-body .badge.text-bg-warning {
    display: block;
    width: 100%;
    white-space: normal;
    text-align: left;
    font-weight: 400;
    font-size: .875em;
}

/* .box: usada en los recuadros de "arrastra tus archivos" (RegistroViaje1.aspx, OrdenViatico.aspx)
   para darles una altura minima y un borde, separandolos visualmente del boton "Siguiente" que
   viene despues. Antes solo estaba definida en un <style> local de OrdenViatico.aspx, por lo que
   RegistroViaje1.aspx (que ya usaba class="box" en su caja de adjuntos "boxAdj") se quedaba sin
   este estilo. Se centraliza aqui para que aplique a cualquier pagina que use la clase. */
.box {
    min-height: 180px;
    border-style: solid;
    border-width: thin;
}


/* Summernote (editor de texto de MiPortal/Comunicacion.aspx) fue construido para Bootstrap 3,
   donde .popover viene oculto por defecto (display:none) y posicionado con position:absolute;
   el propio JS de Summernote solo alterna esto con jQuery .show()/.hide(). Bootstrap 5 ya no
   define esas dos reglas en .popover (sus popovers se generan dinamicamente via JS/Popper), asi
   que los popovers de imagen/enlace/tabla que Summernote pre-renderiza en el DOM (ocultos, en teoria)
   quedan visibles y sin posicionar, apareciendo como iconos sueltos al final de la pagina. Se
   restablece aqui solo para los popovers de Summernote (.note-popover), sin tocar el .popover
   general de Bootstrap usado por el resto del sitio. */
.note-popover.popover {
    display: none;
    position: absolute;
}

/* Mismo tipo de incompatibilidad que la de arriba, pero con los "tooltips" de los
   botones de la barra de herramientas de Summernote (ej. "Underline (CTRL+U)").
   Summernote le pide a Bootstrap que cree esos tooltips dentro del propio editor
   en vez de en el <body>; cuando por esto el posicionamiento dinamico de
   Bootstrap/Popper no llega a aplicarse, el tooltip se queda sin "position" y,
   al ser display:block, se estira al ancho completo del editor en vez de verse
   como una etiqueta flotante junto al boton. Se agrega un position:absolute de
   respaldo (sin !important, para no interferir si Bootstrap si logra
   posicionarlo por su cuenta via estilo inline). .note-editor y .note-toolbar ya
   son position:relative, asi que sirven de referencia para este respaldo. */
.note-editor .tooltip {
    position: absolute;
}