/* ============================================================
   GEA ADMIN — CAPA DE UI MODERNA (reskin sobre Jazzmin/AdminLTE)
   Paleta alineada al L&F del dashboard del proyecto:
   violeta de marca #9B59FF + cian #00D4E8 + neutros slate.
   Esta capa solo redefine apariencia. Los estilos funcionales
   (select2, banner dev, reportes) se conservan más abajo.
   ============================================================ */

:root {
  --gea-brand: #9b59ff;          /* violeta de marca (gradiente/charts) */
  /* CAMBIAR AQUÍ: color del resaltado del menú/tabs (item activo).
     Actual = #9B59FF (violeta de marca). Alternativa que probamos: #BF8FF7
     (más claro). Si piden ese, reemplazar el valor de abajo por #bf8ff7. */
  --gea-highlight: #9b59ff;      /* violeta LC de resaltado (item activo del menú/tabs) */
  --gea-primary: #7c3aed;        /* violet-600: botones/activos */
  --gea-primary-dark: #6d28d9;   /* violet-700: hover */
  --gea-primary-soft: #f3e8ff;   /* violet-100: hover suave */
  --gea-accent: #00d4e8;         /* cian secundario */
  --gea-accent-soft: #ecfeff;    /* cyan-50 */
  --gea-bg: #f1f5f9;             /* slate-100 */
  --gea-surface: #ffffff;
  --gea-border: #e2e8f0;         /* slate-200 */
  --gea-text: #1e293b;           /* slate-800 */
  --gea-muted: #64748b;          /* slate-500 */
  --gea-radius: 12px;            /* rounded-xl */
  --gea-radius-sm: 8px;
  --gea-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  --gea-shadow-md: 0 10px 25px rgba(124, 58, 237, 0.18);
}

/* ---------- Base ---------- */
body,
.wrapper {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: var(--gea-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.content-wrapper,
.wrapper {
  background-color: var(--gea-bg) !important;
}

a {
  color: var(--gea-primary);
}
a:hover {
  color: var(--gea-primary-dark);
}

/* ---------- Navbar superior ---------- */
.main-header.navbar {
  background: var(--gea-surface) !important;
  border-bottom: 1px solid var(--gea-border) !important;
  box-shadow: var(--gea-shadow);
  /* Header PdC compacto: menos alto */
  min-height: 2.9rem !important;
  padding-top: 0.15rem !important;
  padding-bottom: 0.15rem !important;
}
.main-header .nav-link {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}
/* Encabezado de contenido (título + breadcrumb) compacto */
.content-header {
  padding: 0.5rem 0.5rem 0.35rem !important;
}
.content-header h1 {
  margin-bottom: 0.15rem;
}
.main-header .nav-link {
  color: var(--gea-text) !important;
  border-radius: var(--gea-radius-sm);
  transition: background-color 0.15s ease;
}
.main-header .nav-link:hover {
  background-color: var(--gea-bg);
}

/* ---------- Sidebar ---------- */
.main-sidebar {
  background: var(--gea-surface) !important;
  border-right: 1px solid var(--gea-border);
  box-shadow: none !important;
}
.brand-link {
  border-bottom: 1px solid var(--gea-border) !important;
  background: var(--gea-surface) !important;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Solo el logo en la marca: ocultamos el texto "[DEV] GEA" / "GEA" */
.brand-link .brand-text {
  display: none !important;
}
/* Logo de marca: quitar el circle + sombra (elevation) de AdminLTE para
   mostrar el logo completo y limpio */
.brand-link .brand-image,
.brand-link img.brand-image {
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  max-height: 40px !important;
  width: auto !important;
  margin: 0 !important;
  opacity: 1 !important;
  float: none !important;
  line-height: normal !important;
}

/* Ocultar el panel de usuario del sidebar */
.user-panel {
  display: none !important;
}

/* Encabezados de sección del menú */
.nav-sidebar .nav-header {
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.07em;
  font-weight: 600;
  color: var(--gea-muted) !important;
  padding: 0.6rem 1.25rem 0.3rem;
}
/* El primer nav-header (justo tras el Dashboard) sin margen extra arriba */
.nav-sidebar .nav-header:first-child {
  padding-top: 0.25rem;
}
/* Al ocultar el user-panel, que el menú arranque pegado al logo */
.main-sidebar .sidebar > nav.mt-2 {
  margin-top: 0.25rem !important;
}

/* Ítems del menú: pill redondeado, compacto */
.nav-sidebar .nav-item > .nav-link {
  color: #4a5268 !important;
  border-radius: var(--gea-radius-sm);
  margin: 1px 8px;
  padding: 0.34rem 0.7rem;
  font-weight: 500;
  line-height: 1.25;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-sidebar .nav-item > .nav-link .nav-icon {
  color: var(--gea-muted) !important;
  font-size: 14px !important;
  width: 1.4rem;
}
.nav-sidebar .nav-item > .nav-link:hover {
  background-color: var(--gea-primary-soft) !important;
  color: var(--gea-primary) !important;
}
.nav-sidebar .nav-item > .nav-link:hover .nav-icon {
  color: var(--gea-primary) !important;
}
.nav-sidebar .nav-item > .nav-link.active {
  background: var(--gea-highlight) !important;   /* ver --gea-highlight (CAMBIAR AQUÍ arriba) */
  color: #fff !important;
  box-shadow: 0 2px 5px rgba(155, 89, 255, 0.32);
}
.nav-sidebar .nav-item > .nav-link.active .nav-icon,
.nav-sidebar .nav-item > .nav-link.active .right {
  color: #fff !important;
}
/* Submenús (treeview) */
.nav-sidebar .nav-treeview .nav-link {
  border-radius: var(--gea-radius-sm);
  margin: 1px 10px 1px 18px;
  padding: 0.45rem 0.8rem;
  font-size: 13px;
}
.nav-sidebar .nav-treeview .nav-link.active {
  background: var(--gea-accent-soft) !important;
  color: var(--gea-primary) !important;
  box-shadow: none;
}

/* ---------- Menú colapsable (grupos acordeón) ---------- */
/* El JS marca cada .nav-header como grupo clickeable y le agrega un caret.
   Los items del grupo se ocultan con .gea-hidden. */
.nav-sidebar .nav-header.gea-group {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  user-select: none;
}
.nav-sidebar .nav-header.gea-group:hover {
  color: var(--gea-primary) !important;
}
/* Caret indicador de colapsable: triángulo CSS pegado al label — robusto, no
   depende de FontAwesome ni pelea con el innerHTML de getSlide().
   Expandido = ▾, colapsado = ▸. */
.nav-sidebar .nav-header.gea-group::after {
  content: "\25BE";
  margin-left: 8px;
  font-size: 21px;
  line-height: 1;
  opacity: 0.9;
}
.nav-sidebar .nav-header.gea-collapsed::after {
  content: "\25B8";
}
/* Colapso animado: en vez de display:none (tosco), transicionamos max-height +
   opacidad. La transición solo se activa con body.gea-menu-anim (que el JS
   agrega tras el primer paint), para que el estado inicial NO anime. */
.nav-sidebar .nav-item {
  overflow: hidden;
  max-height: 80px;   /* alto de sobra para un item (incluye labels de 2 líneas) */
}
body.gea-menu-anim .nav-sidebar .nav-item {
  transition: max-height 0.24s ease, opacity 0.18s ease;
}
.nav-sidebar .nav-item.gea-hidden {
  max-height: 0 !important;
  opacity: 0;
}

/* ---------- Sidebar mini (colapsado a solo íconos) ---------- */
/* Marca de marca: en mini recortamos al monograma "LC" (el logo es horizontal,
   sin versión cuadrada) mostrando su borde izquierdo. */
.sidebar-mini.sidebar-collapse .brand-link {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.sidebar-mini.sidebar-collapse .brand-link .brand-image {
  /* height FIJO (no solo max-height): con height auto el box mantenía el aspect
     3:1 del logo y object-fit:cover no recortaba nada. Con box ~42x30 (aspect
     1.4) cover recorta el ancho y muestra el monograma "LC" de la izquierda.
     !important porque la regla base .brand-link .brand-image usa width:auto!.*/
  height: 30px !important;
  width: 42px !important;
  max-height: 30px !important;
  object-fit: cover !important;
  object-position: left center !important;
}
/* En mini, los headers de sección no aportan (no hay texto): ocultarlos */
.sidebar-mini.sidebar-collapse .nav-sidebar .nav-header {
  display: none !important;
}
/* En mini ignoramos el colapso del acordeón: TODOS los ítems se ven como
   íconos. Si no, los grupos colapsados desaparecen y sin header no hay forma
   de reabrirlos. */
.sidebar-mini.sidebar-collapse .nav-sidebar .nav-item.gea-hidden {
  max-height: none !important;
  opacity: 1 !important;
  overflow: visible;
}
/* Pill de item compacto y centrado en mini */
.sidebar-mini.sidebar-collapse .nav-sidebar .nav-item > .nav-link {
  margin: 1px 6px;
  padding: 0.4rem 0;
  justify-content: center;
}
.sidebar-mini.sidebar-collapse .nav-sidebar .nav-item > .nav-link .nav-icon {
  margin-right: 0 !important;
}

/* ---------- Tabs del home (Inicio / Dashboard) ---------- */
.gea-home-tabs {
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--gea-border);
  padding-bottom: 6px;
}
.gea-home-tabs .tab-btn {
  background-color: transparent;
  color: var(--gea-muted);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
  margin: 0;
  border-radius: var(--gea-radius-sm) var(--gea-radius-sm) 0 0;
}
.gea-home-tabs .tab-btn:hover {
  background-color: var(--gea-primary-soft);
  color: var(--gea-primary);
}
.gea-home-tabs .tab-btn.active {
  background-color: var(--gea-highlight);
  color: #fff;
}

/* ---------- Cards ---------- */
.card {
  border: none !important;
  border-radius: var(--gea-radius);
  box-shadow: var(--gea-shadow);
  margin-bottom: 1.25rem;
}
.card-header {
  background: var(--gea-surface);
  border-bottom: 1px solid var(--gea-border);
  border-top-left-radius: var(--gea-radius);
  border-top-right-radius: var(--gea-radius);
  font-weight: 600;
  padding: 0.95rem 1.25rem;
}
.card-header .card-title {
  font-weight: 600;
}
/* Borde superior de color en cards "outline" → barra de acento sutil */
.card.card-primary.card-outline {
  border-top: 3px solid var(--gea-primary) !important;
}
.card-primary:not(.card-outline) > .card-header {
  background: var(--gea-primary);
  color: #fff;
}

/* ---------- Botones ---------- */
.btn {
  border-radius: var(--gea-radius-sm);
  font-weight: 500;
  padding: 0.45rem 0.95rem;
  box-shadow: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.05s ease;
}
.btn:active {
  transform: translateY(1px);
}
.btn-primary,
.btn-info {
  background-color: var(--gea-primary);
  border-color: var(--gea-primary);
}
.btn-primary:hover,
.btn-info:hover {
  background-color: var(--gea-primary-dark);
  border-color: var(--gea-primary-dark);
}
.btn-outline-primary,
.btn-outline-info {
  color: var(--gea-primary);
  border-color: var(--gea-primary);
}
.btn-outline-primary:hover,
.btn-outline-info:hover {
  background-color: var(--gea-primary);
  border-color: var(--gea-primary);
}
.btn:focus,
.btn.focus {
  box-shadow: 0 0 0 3px rgba(0, 212, 232, 0.30) !important;
}
/* Botones de acción del submit row del admin */
.submit-row .default,
.submit-row input[type="submit"].default {
  background-color: var(--gea-primary);
  border-color: var(--gea-primary);
  border-radius: var(--gea-radius-sm);
}

/* ---------- Formularios / inputs ---------- */
.form-control,
.custom-select,
textarea,
.dal-forward-conf + .select2 .select2-selection,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border-radius: var(--gea-radius-sm) !important;
  border: 1px solid var(--gea-border) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:focus,
.custom-select:focus,
textarea:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--gea-accent) !important;
  box-shadow: 0 0 0 3px rgba(0, 212, 232, 0.22) !important;
}
label,
.form-group > label {
  font-weight: 600;
  color: var(--gea-text);
}
/* Tags seleccionados de select2 múltiple con look moderno */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--gea-primary);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--gea-primary-soft);
  border: 1px solid #ddd6fe;
  border-radius: 6px;
  color: var(--gea-primary-dark);
}

/* ---------- Tablas ---------- */
.table thead th {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--gea-muted);
  border-bottom: 1px solid var(--gea-border) !important;
  border-top: none !important;
}
.table td,
.table th {
  padding: 0.72rem 0.9rem;
  vertical-align: middle;
  border-top: 1px solid var(--gea-border);
}
.table-hover tbody tr:hover,
#result_list tbody tr:hover {
  background-color: var(--gea-primary-soft);
}
#changelist .results {
  border-radius: var(--gea-radius);
  overflow: hidden;
  box-shadow: var(--gea-shadow);
  background: var(--gea-surface);
}

/* ---------- Breadcrumb / encabezado de contenido ---------- */
.content-header h1 {
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
}
.breadcrumb {
  background: transparent;
  padding-left: 0;
}
.breadcrumb-item a {
  color: var(--gea-muted);
}

/* ---------- Badges, alerts, paginación ---------- */
.badge {
  border-radius: 6px;
  font-weight: 600;
  padding: 0.35em 0.6em;
}
.badge-primary,
.badge-info {
  background-color: var(--gea-primary);
}
.alert {
  border: none;
  border-radius: var(--gea-radius-sm);
  box-shadow: var(--gea-shadow);
}
.pagination .page-link {
  border-radius: var(--gea-radius-sm);
  margin: 0 2px;
  border-color: var(--gea-border);
  color: var(--gea-primary);
}
.pagination .page-item.active .page-link {
  background-color: var(--gea-primary);
  border-color: var(--gea-primary);
}

/* ============================================================
   LOGIN — MARCA CRONOS
   La puerta de entrada del panel lleva la marca de la casa (Cronos),
   no la del producto: el resto del PdC sigue con la paleta violeta/cian
   de Loyalty Club definida arriba.

   Todo va scopeado a `body.jazzmin-login-page` — la clase que pone
   jazzmin en `registration/base.html` — para que ni un color se filtre
   al panel. OJO: la clase NO es `.login-page` (esa es de AdminLTE y en
   este proyecto nunca se aplica).

   Paleta tomada de cronos-website-astro/src/styles/global.css.
   ============================================================ */

:root {
  --cronos-navy: #003e7e;
  --cronos-navy-deep: #0f2a4f;
  --cronos-navy-soft: #1a4f8f;
  --cronos-orange: #f47b20;
  --cronos-orange-dark: #d9660f;
  --cronos-steel: #d8dde5;
  --cronos-ink: #0a1929;
}

body.jazzmin-login-page {
  /* Fondo BLANCO. El anillo de Saturno de Cronos queda como textura muy tenue,
     y va como background-image (un SVG inline), NO como pseudo-elemento
     posicionado: un elemento más ancho que el viewport genera scroll horizontal
     — `overflow-x: hidden` en `body` no lo contiene de forma confiable porque el
     overflow se propaga al viewport. Los fondos nunca producen scroll ni
     interceptan clicks. */
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 900'%3E%3Cellipse cx='600' cy='450' rx='565' ry='195' fill='none' stroke='rgba(244,123,32,0.16)' stroke-width='2' transform='rotate(-18 600 450)'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 132% auto;
  /* `fixed` mantiene el fondo cubriendo el viewport aunque la página crezca y
     haya que scrollear; si no, queda una franja sin pintar abajo. */
  background-attachment: fixed;

  /* El centrado se declara ACÁ y no se hereda de jazzmin a propósito.
     Jazzmin centra con un `body.jazzmin-login-page { display:flex; ... }` de
     misma especificidad que esta regla, así que cualquier cambio de orden de
     carga o una copia vieja del CSS de jazzmin dejaba el formulario pegado
     arriba (que es como se veía). Repetirlo lo vuelve independiente. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;

  /* Jazzmin fija `height: 100vh`. Con varios callouts de error (usuario mal,
     clave mal, sesión cerrada en otro dispositivo) la card pasa el alto del
     viewport y quedaría cortada, sin forma de llegar al botón. `min-height`
     centra igual cuando sobra espacio y deja crecer cuando falta.

     El `!important` NO es pereza: AdminLTE viene con `loginRegisterAutoHeight`
     activo y su `fixLoginRegisterHeight()` hace, ya cargada la página,
     `$('body').css('min-height', $('.login-box').height())` — o sea le clava al
     body la altura de la card (~378px). Al escribirlo jQuery como estilo INLINE,
     una regla normal pierde por más específica que sea, el body se achica y
     `justify-content: center` centra dentro de esos 378px: el formulario
     "salta" hacia arriba un instante después de cargar. Ese cálculo es para el
     layout del panel (header/sidebar/footer), que en el login no existe, así
     que anularlo acá es correcto. `!important` de autor sí le gana al inline. */
  height: auto;
  min-height: 100vh !important;

  color: var(--cronos-ink);
}

/* El JS (`custom_static/js/main.js`) inyecta en el login un footer fijo y le
   mete un `padding-bottom` INLINE al body. Al ser inline le gana a cualquier
   regla, así que el centrado tiene que convivir con él: con `border-box` el
   padding se descuenta del alto y la card queda centrada en el espacio útil,
   sin taparse con el footer. */

body.jazzmin-login-page .login-box {
  width: 420px;
  max-width: 100%;
}

/* El footer del login lo pinta el JS con `color:#fff` inline. Sobre el fondo
   blanco quedaría texto blanco invisible, así que se le pone base navy.
   En dev gana la regla naranja de `body.dev-environment` (misma especificidad,
   declarada más abajo en este archivo). */
body.jazzmin-login-page .main-footer {
  background-color: var(--cronos-navy);
  border-top: none;
}

/* ---------- Logo ---------- */
body.jazzmin-login-page .login-logo {
  margin-bottom: 1.75rem;
}
body.jazzmin-login-page .login-logo h1 {
  margin: 0;
}
body.jazzmin-login-page .login-logo img {
  width: min(300px, 68vw);
  height: auto;
  object-fit: contain;
}

/* ---------- Card ---------- */
/* Sobre el fondo blanco una card blanca sin borde no se ve: el contorno lo da
   un borde steel de 1px + una sombra suave y neutra (la sombra navy fuerte era
   para el fondo oscuro y acá ensuciaría). */
body.jazzmin-login-page .login-box .card {
  border: 1px solid var(--cronos-steel);
  border-radius: 16px;
  box-shadow: 0 10px 30px -12px rgba(10, 25, 41, 0.18);
}
body.jazzmin-login-page .login-box .card-body {
  padding: 2rem 2.25rem;
}
body.jazzmin-login-page .login-box-msg {
  color: var(--cronos-ink);
  font-weight: 600;
  font-size: 1rem;
  padding: 0 0 1.25rem;
}

/* ---------- Campos ---------- */
body.jazzmin-login-page .form-control {
  border-color: var(--cronos-steel);
  border-right: none;
  border-radius: 8px 0 0 8px;
  height: calc(2.25rem + 8px);
  color: var(--cronos-ink);
}
body.jazzmin-login-page .form-control::placeholder {
  color: #8494a8;
}
body.jazzmin-login-page .form-control:focus {
  border-color: var(--cronos-orange);
  box-shadow: 0 0 0 3px rgba(244, 123, 32, 0.22);
}
body.jazzmin-login-page .input-group-text {
  background: #fff;
  border-color: var(--cronos-steel);
  border-left: none;
  border-radius: 0 8px 8px 0;
  color: var(--cronos-navy);
}
/* El input de contraseña reserva espacio a la derecha para el ojo; el ojo
   se dibuja sobre el borde, así que va en el navy de la marca. */
body.jazzmin-login-page .toggle-password {
  color: var(--cronos-navy);
}
body.jazzmin-login-page .toggle-password:hover {
  color: var(--cronos-orange);
}

/* ---------- Botón ---------- */
body.jazzmin-login-page .btn-primary {
  background-color: var(--cronos-orange);
  border-color: var(--cronos-orange);
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.6rem 1rem;
  box-shadow: 0 8px 18px -8px rgba(244, 123, 32, 0.75);
}
body.jazzmin-login-page .btn-primary:hover,
body.jazzmin-login-page .btn-primary:focus,
body.jazzmin-login-page .btn-primary:active {
  background-color: var(--cronos-orange-dark);
  border-color: var(--cronos-orange-dark);
}
body.jazzmin-login-page .btn-primary:focus {
  box-shadow: 0 0 0 3px rgba(244, 123, 32, 0.35);
}

/* ---------- Enlaces ---------- */
body.jazzmin-login-page a {
  color: var(--cronos-navy);
}
body.jazzmin-login-page a:hover {
  color: var(--cronos-orange);
}
body.jazzmin-login-page .password-reset-link {
  font-size: 0.875rem;
}

/* ---------- Scrollbar fino ---------- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: #cfd6e6;
  border-radius: 8px;
  border: 2px solid var(--gea-bg);
}
::-webkit-scrollbar-thumb:hover {
  background: #b6c0d8;
}

/* ============================================================
   ESTILOS FUNCIONALES PRESERVADOS (no tocar — afectan reportes,
   select2 y banner de entorno)
   ============================================================ */

.select2-selection__choice__display {
  color: black;
}
.select2-container {
  min-width: 200px !important;
}
.map_canvas_wrapper {
  margin-left: 0px;
}
.main-footer {
  color: #ffffff;
  background-color: #183484;
}
/*Centrar x de botones para select multiple*/
.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice__remove {
  margin-left: 0px;
  padding: 0px 3px;
}
/*Para que los campos seleccionados se encuentren dentro de la caja de opciones*/
.text-sm .select2-container--default .select2-selection--multiple {
  display: inline-block;
  min-width: -webkit-fill-available;
}
/*Agregar bold a link de menu seleccionado*/
.nav-link.active {
  font-weight: bold;
}
/*Estilos iconos slide menu*/
.user-panel {
  margin-top: 26px !important;
}
.user-panel .info a,
.user-panel .info span {
  color: #333 !important;
}

.custom-header {
  display: flex;
}

.custom-title {
  display: flex;
}

.custom-title i {
  font-size: 18px;
  margin-right: 10px !important;
  color: #2fa4e7;
}

.header-icon p {
  margin-bottom: 0px;
  font-weight: bold;
}

.nav-item .nav-icon {
  font-size: 12px !important;
}

/*Header reports */

.header-report {
  margin-left: 25px !important;
  margin-top: 10px !important;
}

.pvtFilterBox {
  top: initial !important;
}
.pvtFilterBox label {
  text-wrap: initial;
}

.tabs {
  display: flex;
  justify-content: center;
  /* align-items:center evita que los botones se estiren a la altura completa si
     .tabs termina dentro de un contenedor flex (p.ej. el .row de Jazzmin).
     flex-wrap deja que los botones bajen de línea en pantallas angostas. */
  align-items: center;
  flex-wrap: wrap;
}

.tab-btn {
  cursor: pointer;
  background-color: #f1f1f1;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  margin: 5px;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.tab-btn:hover {
  background-color: #017bfe;
  color: white;
}

.tab-btn.active {
  background-color: #2ea4e6;
  color: white;
}

.tab-content1 {
  display: none;
  padding: 10px;
}

.tab-content1.active {
  display: block;
}

#pivotTable {
  display: flex;
  justify-content: center;
}

.modal-body {
  max-height: 400px; /* Establece la altura máxima según tus necesidades */
  overflow-y: auto;
}

.hover-effect:hover {
  background-color: #ededed;
}

/* El tamaño del logo del login lo fija el bloque "LOGIN — MARCA CRONOS"
   de arriba. La regla que vivía acá forzaba un cuadrado de 25rem, pensado
   para el logo cuadrado de LC; con el logo horizontal de Cronos dejaba una
   franja vacía enorme sobre la card. */

/* Banner de entorno de desarrollo */
.dev-environment-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  background-color: #e67e22;
  color: #fff;
  text-align: center;
  padding: 4px 0;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

body.dev-environment {
  padding-top: 26px !important;
}

body.dev-environment .main-header {
  margin-top: 26px;
}

body.dev-environment .main-sidebar {
  padding-top: 26px;
}

/* Colores de desarrollo para el footer */
body.dev-environment .main-footer {
  background-color: #e67e22;
}