/*----COLOR Y LINEAS NAV,SIDEBAR,FOOTER*/
:root {
  --layout-bg: #f8f8f9;
  --ui-line: #edecf0;
  --content-bg: #ffffff;
}

/* =========================
   1) TODO EL CONTENIDO: BLANCO
   ========================= */
html,
body,
#main-wrapper,
.content-body,
.content-body .container-fluid,
.container-fluid,
.page-titles,
.page-wrapper,
.main-content {
  background: var(--content-bg);
}

/* =========================
   2) SOLO NAVBAR + SIDEBAR + ESQUINA: layout-bg
   ========================= */
.nav-header,
.nav-header .brand-logo,
.nav-header .brand-logo a,
.nav-control,
.hamburger,
.header,
.header-left,
.header-content,
.nk-sidebar,
.nk-sidebar .nk-nav-scroll,
.nk-sidebar .metismenu {
  background: var(--layout-bg) !important;
  box-shadow: none !important;
}

/* =========================
   FIX ESQUINA SUPERIOR IZQUIERDA
   ========================= */

/* fuerza el fondo del bloque del logo aunque esté vacío */
.nav-header {
  background: var(--layout-bg) !important;
  min-height: 64px;
  /* asegura que cubra el alto del header */
}

/* cuando el logo está comentado, este pseudo-elemento tapa el blanco */
.nav-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--layout-bg);
  z-index: -1;
}

/* asegura que nada transparente muestre el body */
.nav-header,
.nav-header * {
  background-color: var(--layout-bg) !important;
}

/* ___________________________________________Nuevo CSS Para Responsive__________________________________________________*/

@media (min-width: 992px) {
  .w-lg-auto {
    width: auto !important;
  }
}

@media (min-width: 768px) {
  .w-md-auto {
    width: auto !important;
  }
}

.titulo-bienvenida {
  font-size: 2.2rem;
  line-height: 1.2;
}


@media (max-width: 767px) {
  .titulo-bienvenida {
    font-size: 1.8rem;
  }

  .subtituloPanel {
    font-size: 1.4rem;
    word-wrap: break-word;
  }

  /* Aquí podrás agregar más ajustes para tablets en el futuro */
}

@media (min-width: 576px) {
  .w-sm-auto {
    width: auto !important;
  }
}

@media (max-width: 350px) {

  /* CSS PARA VISTA DE INICIO */
  .titulo-bienvenida {
    font-size: 1.3rem;
    word-wrap: break-word;
  }

  .subtituloPanel {
    font-size: 0.9rem;
    word-wrap: break-word;
  }

  /* CSS PARA VISTA DE METADATOS */

  .gestion-metadatos {
    padding: 15px !important;
  }

  .modal-body {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}



/* ___________________________________________Nuevo CSS Para Responsive__________________________________________________*

/* =========================
   3) LÍNEAS
   ========================= */
.header {
  border-bottom: 1px solid var(--ui-line) !important;
}

.nav-header {
  border-bottom: 1px solid var(--ui-line) !important;
  border-right: 1px solid var(--ui-line) !important;
}

.nk-sidebar {
  border-right: 1px solid var(--ui-line) !important;
}

/* =========================
   FOOTER COMO HEADER (CIERRA ESQUINA)
   ========================= */

.footer {
  background: var(--layout-bg) !important;

  /* líneas */
  border-top: 1px solid var(--ui-line) !important;
  /* línea horizontal */
  border-left: 1px solid var(--ui-line) !important;
  /* 👈 CIERRA LA ESQUINA */

  box-shadow: none !important;
}

/* opcional: alinear contenido del footer */
.footer .copyright {
  background: transparent !important;
  padding-left: 18px;
  /* mismo aire que header/sidebar */
}



/* -----------------imagen---------------------------------------------*/

/* --- FIX: el template está ocultando los logos --- */
.nav-header .brand-logo a {
  display: flex !important;
  align-items: center !important;
}

/* Mostrar logo grande por defecto */
.nav-header .brand-title {
  display: block !important;
  /* <- el template lo deja en none */
}

.nav-header .brand-title img {
  height: 44px !important;
  width: auto !important;
  max-width: none !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Ocultar mini por defecto */
.nav-header .logo-abbr {
  display: none !important;
}

.nav-header .logo-abbr img {
  height: 32px !important;
  width: auto !important;
  max-width: none !important;
  opacity: 1 !important;
  filter: none !important;
}

/* --- Cuando el sidebar está colapsado (menu-toggle o mini) --- */
[data-sidebar-style="full"][data-layout="vertical"] .menu-toggle .nav-header .brand-title,
[data-sidebar-style="mini"] .nav-header .brand-title {
  display: none !important;
}

[data-sidebar-style="full"][data-layout="vertical"] .menu-toggle .nav-header .logo-abbr,
[data-sidebar-style="mini"] .nav-header .logo-abbr {
  display: block !important;
}

.nav-header .brand-logo,
.nav-header .brand-logo a,
.nav-header .brand-logo img {
  opacity: 1 !important;
  filter: none !important;
}

/* ------------------navbar a la derecha-----------------------------------------*/

.user-toggle {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  gap: 12px !important;
  padding: 10px 16px !important;
  text-decoration: none !important;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #6D7F4F;
  flex: 0 0 auto;
}

.user-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}

.user-role {
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #111111;
}

.user-org {
  font-size: 13px;
  color: #606060;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-chevron {
  margin-left: auto !important;
  font-size: 16px;
  color: #111111;
  flex: 0 0 auto;
}



/* ---------------- Dropdown perfil  ------------------------------ */
.header-right .dropdown-profile.dropdown-menu {
  min-width: 250px !important;
  max-height: 3500px !important;
  padding: 0 !important;
  border: 1px solid #ececec !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .12) !important;
  overflow: hidden !important;
}

.profile-dd-head {
  padding: 6px 16px 10px !important;
  /* sin left extra */
  border-bottom: 1px solid #edecf0 !important;
}

.profile-dd-role,
.profile-dd-name,
.profile-dd-email {
  margin-left: 24px !important;
  /* 👈 esto sí o sí se nota */
}

/* ROL */
.profile-dd-role {
  font-size: 11px !important;
  letter-spacing: .08em !important;
  font-weight: 700 !important;
  color: #606060 !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}

/* NOMBRE (pegado al rol) */
.profile-dd-name {
  margin-top: 6px !important;
  /* 👈 controla separación rol->nombre */
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #111111 !important;
  line-height: 1.1 !important;
}

/* CORREO (pegado al nombre) */
.profile-dd-email {
  margin-top: 4px !important;
  font-size: 13px !important;
  color: #606060 !important;
  line-height: 1.1 !important;
}

/* Lista */
.profile-dd-list {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.profile-dd-list li {
  padding: 0 12px !important;
  /* margen lateral global */
}

/* Links */
.profile-dd-list li a {
  display: inline-flex !important;
  /* 👈 CLAVE */
  align-items: center !important;
  gap: 12px !important;

  padding: 10px 14px !important;
  margin: 6px 0 !important;

  border-radius: 10px !important;
  text-decoration: none !important;
  color: #606060 !important;

  width: auto !important;
  /* 👈 se adapta al texto */
}

.profile-dd-list li a span {
  white-space: nowrap !important;
  /* 👈 nunca baja */
}


/* Iconos */
.profile-dd-parent .profile-dd-toggle i,
.profile-dd-list li a i {
  font-size: 20px !important;
  width: 20px !important;
  min-width: 20px !important;
  text-align: center !important;
  color: #1e1e1e !important;
}

/* Hover */
.profile-dd-list li a:hover {
  background: #e8e7ec !important;
  border-radius: 10px !important;
}

/* Hover: items normales -> verde (texto e ícono) */
.profile-dd-list li:not(.logout-item):not(.profile-dd-divider) a:hover {
  color: #6D7F4F !important;
  font-weight: 600 !important;
}

.profile-dd-list li:not(.logout-item):not(.profile-dd-divider) a:hover i {
  color: #6D7F4F !important;
}

/* Hover: logout -> rojo (texto e ícono) + pill gris */
.profile-dd-list .logout-item a:hover {
  background: #e8e7ec !important;
  color: #c73631 !important;
}

.profile-dd-list .logout-item a:hover i {
  color: #c73631 !important;
}


.profile-dd-list>li.profile-dd-divider {
  padding: 0 !important;
}

/* Divider igual a la línea del header (1px, full width, sin “banda”) */
.profile-dd-divider {
  display: block !important;
  width: 100% !important;
  height: 1px !important;
  /* solo 1px */
  margin: 14px 0 !important;
  padding: 0 !important;
  background: #edecf0 !important;
  /* la línea */
  border: 0 !important;

  /* mata cualquier estilo heredado del template */
  line-height: 0 !important;
  font-size: 0 !important;
  min-height: 0 !important;
}

/* LOGOUT = pill completo */
.profile-dd-list .logout-item a {
  display: flex !important;
  /* 👈 vuelve a flex */
  width: 100% !important;
  /* 👈 ocupa todo el card */
  justify-content: flex-start !important;

  padding: 12px 16px !important;
  margin: 6px 0 !important;

  border-radius: 10px !important;
  background: transparent !important;

  color: #c73631 !important;
  font-weight: 600 !important;
}

/* Hover del logout */
.profile-dd-list .logout-item a:hover {
  background: #e8e7ec !important;
  /* pill completo */
}

/* Ícono logout */
.profile-dd-list .logout-item a i {
  color: #c73631 !important;
}


/*PARA PADRE E HIJO */

/* Padre */
.profile-dd-parent .profile-dd-toggle {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
}

.profile-dd-parent .parent-chevron {
  margin-left: auto !important;
  transition: transform .2s ease;
  font-size: 14px;
}

/* Hijos: colapsado por defecto */
.profile-dd-children {
  display: none;
  padding-left: 34px;
  /* indent del hijo */
  margin: 0;
}

/* Cuando está abierto */
.profile-dd-parent.is-open .profile-dd-children {
  display: block;
}

.profile-dd-parent.is-open .parent-chevron {
  transform: rotate(90deg);
}

/* Estilo hijo (más compacto y “dentro”) */
.profile-dd-children a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;

  padding: 8px 14px !important;
  margin: 2px 0 !important;

  border-radius: 10px !important;
  color: #606060 !important;
  text-decoration: none !important;
}

.profile-dd-children a:hover {
  background: #e8e7ec !important;
  color: #6D7F4F !important;
}

.profile-dd-children a:hover i {
  color: #6D7F4F !important;
}

.profile-dd-toggle {
  border: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  width: 100% !important;

  padding: 10px 14px !important;
  margin: 6px 0 !important;
  border-radius: 10px !important;

  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: #606060 !important;
  text-align: left !important;
}

.profile-dd-toggle:hover {
  background: #e8e7ec !important;
}

/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*CSS SIDEBAR*/
:root {
  --sb-text: #606060;
  --sb-muted: #929292;
  --sb-green: #6D7F4F;
  --sb-pill: #E8E7EC;
}

/* LABELS */
.nk-sidebar .nav-label {
  margin: 18px 14px 8px !important;
  padding: 0 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--sb-muted) !important;
  background: transparent !important;
}

/* ITEMS */
.nk-sidebar .metismenu>li:not(.nav-label)>a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;

  padding: 10px 12px !important;
  margin: 4px 12px !important;

  border-radius: 6px !important;
  background: transparent !important;
  text-decoration: none !important;
  color: var(--sb-text) !important;
}

/* ICON */
.nk-sidebar .metismenu>li:not(.nav-label)>a .menu-icon {
  font-size: 16px !important;
  color: var(--sb-text) !important;
  flex: 0 0 auto !important;
}

/* TEXTO: 1 línea si cabe, si es muy largo que baje a 2 líneas (sin cortar con ...) */
.nk-sidebar .metismenu>li:not(.nav-label)>a .nav-text {
  color: var(--sb-text) !important;
  white-space: normal !important;
  line-height: 1.2 !important;

  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
}

/* HOVER */
.nk-sidebar .metismenu>li:not(.nav-label):not(.mm-active)>a:hover {
  background: var(--sb-pill) !important;
}

.nk-sidebar .metismenu>li:not(.nav-label):not(.mm-active)>a:hover .nav-text,
.nk-sidebar .metismenu>li:not(.nav-label):not(.mm-active)>a:hover .menu-icon {
  color: var(--sb-green) !important;
  font-weight: 600 !important;
}

/* ACTIVO */
.nk-sidebar .metismenu>li.mm-active>a {
  background: var(--sb-pill) !important;
}

.nk-sidebar .metismenu>li.mm-active>a .nav-text,
.nk-sidebar .metismenu>li.mm-active>a .menu-icon {
  color: var(--sb-green) !important;
  font-weight: 600 !important;
}

/* más aire entre secciones */
.nk-sidebar li:not(.nav-label)+.nav-label {
  margin-top: 22px !important;
}

/*----------------TITULO DE PAGINA-------------------*/

/* =========================
   BREADCRUMB – OVERRIDE FINAL
   ========================= */

/* Breadcrumb separators: recuperar estilo */
.page-titles .breadcrumb {
  background: transparent !important;
  padding-left: 0 !important;
}

.page-titles .breadcrumb-item+.breadcrumb-item::before {
  color: #b5b5b5 !important;
  padding-right: .5rem !important;
  padding-left: .25rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* Último en verde */
.page-titles .breadcrumb-item.active,
.page-titles .breadcrumb-item.active a {
  color: #4d5a38 !important;
  font-weight: 600 !important;
}

/*-----------------------logo layout------------------*/
/* Texto base */
.nav-header .brand-logo h2 {
  margin: 0 !important;
  font-weight: 700;
  color: #111111;
  /* Esenth */
}

/* Parte verde */
.nav-header .brand-logo .brand-accent {
  color: #6D7F4F;
  /* ia */
}

/* perfil */
.profile-page {
  margin-top: 32px;
}

/* HEADER */
.profile-header {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 32px;
}

.profile-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #6D7F4F;
  color: #fff;
  font-size: 36px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-header-info h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  color: #111;
}

.profile-sub {
  margin-top: 6px;
  color: #606060;
  font-size: 15px;
}

/* CARD */
.profile-card {
  background: #fff;
  border: 1px solid #edecf0;
  border-radius: 16px;
  padding: 24px;
}

.profile-card h4 {
  margin-bottom: 20px;
  font-weight: 700;
}

/* GRID */
.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 32px;
}

.profile-grid label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #929292;
}

.profile-grid p {
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: #111;
}

/* ACCIONES */
.profile-actions {
  margin-top: 24px;
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid #edecf0;
  color: #6D7F4F;
  font-weight: 600;
  text-decoration: none;
}

.btn-outline:hover {
  background: #e8e7ec;
}

/* =========================================================
   FIX RESPONSIVO: SIDEBAR MÓVIL (OVERLAY PURO, SIN VERSIÓN MINI)
   ========================================================= */
@media (max-width: 768px) {

  /* 1. Ocultar completamente el sidebar por defecto (fuera de la pantalla izquierda) */
  [data-sidebar-style="mini"] .nk-sidebar,
  [data-sidebar-style="compact"] .nk-sidebar,
  [data-sidebar-style="overlay"] .nk-sidebar,
  .nk-sidebar {
    position: fixed !important;
    left: -300px !important;
    width: 260px !important;
    height: 100vh !important;
    z-index: 9999 !important;
    transition: all 0.3s ease !important;
  }

  /* 2. Mostrar el sidebar como "Overlay" cuando se presiona la hamburguesa */
  #main-wrapper.menu-toggle .nk-sidebar,
  #main-wrapper.show-menu .nk-sidebar,
  body.menu-toggle .nk-sidebar {
    left: 0 !important;
    box-shadow: 4px 0 15px rgba(0, 0, 0, 0.15) !important;
  }

  /* 3. Forzar que SIEMPRE se vean los textos en el menú móvil (Anula el modo "solo íconos") */
  .nk-sidebar .metismenu>li>a .nav-text {
    display: -webkit-box !important;
    /* Mantiene tu estilo original */
    opacity: 1 !important;
    visibility: visible !important;
  }

  .nk-sidebar .nav-label {
    display: block !important;
  }

  /* 4. Asegurar que los íconos y el texto se alineen bien en móvil */
  .nk-sidebar .metismenu>li:not(.nav-label)>a {
    justify-content: flex-start !important;
    padding: 12px 16px !important;
  }

  /* 5. El contenido principal siempre ocupa todo el ancho y no es empujado */
  .content-body,
  .footer {
    margin-left: 0 !important;
  }

  /* 6. Arreglar la cabecera superior (Header) */
  .nav-header {
    width: 60px !important;
    /* Deja solo el espacio para el logo pequeño */
  }

  .header {
    width: calc(100% - 60px) !important;
    margin-left: 60px !important;
  }

  /* 7. Ocultar logo grande y forzar que se vea el pequeño centrado */
  .nav-header .brand-title {
    display: none !important;
  }

  .nav-header .logo-abbr {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 300px) {

  /* Ahora estas reglas SOLO se activarán cuando estemos en el inicio */
  .vista-dashboard-inicio .header-right {
    padding-left: 0 !important;
  }

  .vista-dashboard-inicio .nav-header {
    width: 50px !important;
  }

  .vista-dashboard-inicio .header {
    width: calc(100% - 50px) !important;
    margin-left: 50px !important;
  }
}


/* =========================================================
   FIX: LOGO SIN SALTOS VERTICALES Y HAMBURGUESA SIEMPRE VISIBLE
   ========================================================= */

/* 1. Eliminar los paddings raros que el template le pone al logo al colapsar */
.nav-header .brand-logo,
.nav-header .brand-logo a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  padding: 0 !important;
  /* Esto evita que el logo salte hacia abajo */
  margin: 0 !important;
}

/* 2. Forzar que las 3 barras (hamburguesa) jamás desaparezcan en escritorio */
.header .nav-control,
[data-sidebar-style="mini"] .nav-control,
[data-sidebar-style="compact"] .nav-control {
  display: flex !important;
  align-items: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 99 !important;
}

.header .nav-control .hamburger {
  display: block !important;
}



@media (min-width: 768px) and (max-width: 1199px) {


  /* 1. Expandir la barra lateral a su tamaño original */
  #main-wrapper.menu-toggle .nk-sidebar {
    width: 15.1875rem !important;
  }

  /* 2. Mostrar los textos y las etiquetas que estaban ocultas */
  #main-wrapper.menu-toggle .nk-sidebar .nav-text {
    display: -webkit-box !important;
  }

  #main-wrapper.menu-toggle .nk-sidebar .nav-label {
    display: block !important;
  }

  /* 3. Alinear el ícono y el texto a la izquierda */
  #main-wrapper.menu-toggle .nk-sidebar .metismenu>li>a {
    justify-content: flex-start !important;
    padding: 10px 12px !important;
  }

  /* 4. Expandir la zona del logo para que vuelva el logo completo */
  #main-wrapper.menu-toggle .nav-header {
    width: 15.1875rem !important;
  }

  #main-wrapper.menu-toggle .nav-header .brand-title {
    display: block !important;
  }

  #main-wrapper.menu-toggle .nav-header .logo-abbr {
    display: none !important;
  }

  /* 5. Empujar el contenido, la cabecera y el footer hacia la derecha */
  #main-wrapper.menu-toggle .header {
    width: calc(100% - 15.1875rem) !important;
    margin-left: 15.1875rem !important;
  }

  #main-wrapper.menu-toggle .content-body {
    margin-left: 15.1875rem !important;
  }

  #main-wrapper.menu-toggle .footer {
    padding-left: 15.1875rem !important;
  }
}

/*--------------------------------------------------------------------------------css dashboard-----------------------------------------------------------------*/


.body-campana {
  position: relative;
  /* 🔥 obligatorio */
  background: transparent !important;
  border: 2px solid #85b8b5;
  border-radius: 24px;
  padding: 20px 16px 16px 16px;
  /* más espacio arriba */
}

.dashboard-section-floating {
  position: absolute;
  top: -12px;
  /* 🔥 lo saca hacia arriba */
  left: 20px;

  background: #f8f8f9;
  /* 🔥 MISMO fondo del dashboard */
  padding: 0 10px;

  font-size: 14px;
  font-weight: 700;
  color: #1f2937;
}

.body-ejecutivo {
  position: relative;
  background: transparent !important;
  border: 2px solid #b7adbe;
  border-radius: 24px;
  padding: 20px 16px 16px 16px;
  margin-top: 28px;
}

.dashboard-section-floating-ejecutivo {
  position: absolute;
  top: -12px;
  /* 🔥 lo saca hacia arriba */
  left: 20px;

  background: #f8f8f9;
  /* 🔥 MISMO fondo del dashboard */
  padding: 0 10px;

  font-size: 14px;
  font-weight: 700;
  color: #050505;
}

.body-tareas {
  position: relative;
  background: transparent !important;
  border: 2px solid #daaebb;
  border-radius: 24px;
  padding: 20px 16px 16px 16px;
  margin-top: 28px;
}

.dashboard-section-floating-tareas {
  position: absolute;
  top: -12px;
  /* 🔥 lo saca hacia arriba */
  left: 20px;

  background: #f8f8f9;
  /* 🔥 MISMO fondo del dashboard */
  padding: 0 10px;

  font-size: 14px;
  font-weight: 700;
  color: #050505;
}

/* ================== FILTROS ================== */
.dashboard-filter-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin-bottom: 18px;
}

.dashboard-topbar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  flex-wrap: nowrap;
}

.dashboard-title-inline {
  font-size: 18px;
  font-weight: 700;
  color: #1f1f1f;
  margin: 0 !important;
  line-height: 1.1;
}

/* CONTENEDOR FILTROS */
.dashboard-filters-inline {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: nowrap;
  min-width: 0;
  width: 100%;
}

.filter-inline-reload {
  margin-left: auto !important;
}

/* GRUPO DE FILTROS */
.filter-inline-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 0 14px;
  border-right: 1px solid #e7e7eb;
  min-height: auto;
}

.filter-inline-group:last-child {
  border-right: 0;
  padding-right: 0;
}

/* LABEL */
.filter-inline-label {
  font-size: 12px;
  color: #5e7833;
  font-weight: 600;
  margin-bottom: 0;
}


/* SELECT */
.filter-inline-control {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 14px;
  font-weight: 500;
  color: #1f1f1f;
  padding: 0;
}

.filter-inline-control option {
  background: #fff;
  color: #1f1f1f;
}


select {
  color-scheme: light;
}

.filter-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: auto;
  min-width: 0;
}

.filter-inline-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent !important;
  padding-right: 14px !important;
  min-width: 0 !important;
  max-width: 180px;
  width: 100% !important;
}


.filter-inline-select,
.filter-inline-date {
  width: 150px;
  margin-top: 0;
}


.filter-select-icon {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: #1f1f1f;
  pointer-events: none;
  line-height: 1;
}

.filter-inline-date {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 14px;
  font-weight: 500;
  width: 150px;
  min-width: 150px;
  padding: 0 !important;
  margin: 0 !important;
}

.filter-inline-group label[for="fecha_inicio"],
.filter-inline-group label[for="fecha_fin"] {
  transform: translateY(10px);
}

/* ================== mensajes FILTRO ================== */

.filter-inline-group {
  display: flex;
  flex-direction: column;
}

.filter-inline-error {
  min-height: 18px;
  margin-bottom: 3px;
  font-size: 11px;
  line-height: 15px;
  color: #dc3545;
  font-weight: 500;
}

.filter-inline-control.is-invalid,
.filter-inline-date.is-invalid {
  border-color: #dc3545 !important;
}

.filter-inline-control.is-invalid:focus,
.filter-inline-date.is-invalid:focus {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 0.15rem rgba(220, 53, 69, 0.15) !important;
}

/* ================== BOTONES FILTRO ================== */
/* ================== BOTONES FILTRO ================== */
.filter-inline-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}


/* ================== TAMAÑO COMÚN ================== */
.btn-filter-inline,
.btn-clear-inline,
.btn-PDF-inline {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;

  padding: 0 18px !important;
  border-radius: 20px !important;

  font-size: 14px !important;
  font-weight: 600;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  line-height: 1 !important;
  box-sizing: border-box !important;
  white-space: nowrap;
}

/* ================== BOTÓN FILTRAR ================== */
.btn-filter-inline {
  background: #72864f;
  border: 1px solid #72864f;
  color: #fff;
}

.btn-filter-inline:hover,
.btn-filter-inline:focus,
.btn-filter-inline:active {
  border: 1px solid #72864f !important;
  background: #667947;
  color: #fff;
  box-shadow: none !important;
  outline: none !important;
}


/* ================== BOTÓN LIMPIAR ================== */
.btn-clear-inline {
  background: #fff;
  border: 1px solid #d7dbe2;
  color: #4b5563;
}

.btn-clear-inline:hover,
.btn-clear-inline:focus,
.btn-clear-inline:active {
  border: 1px solid #d7dbe2 !important;
  background: #f5f5f5;
  color: #4b5563;
  box-shadow: none !important;
  outline: none !important;
}


/* ================== BOTÓN PDF ================== */
.btn-PDF-inline {
  background: #ff3131;
  border: 1px solid #ff3131;
  color: #fff;
  gap: 8px;
}

.btn-PDF-inline i {
  font-size: 14px;
  line-height: 1;
}

.btn-PDF-inline:hover,
.btn-PDF-inline:focus,
.btn-PDF-inline:active {
  background: #e92727 !important;
  border-color: #e92727 !important;
  color: #fff !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ================== KPI CARDS ================== */
/* ================== KPI CARDS ================== */
/* ================== KPI CARDS ================== */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 320px));
  justify-content: center;
  gap: 25px;
}

.kpi-grid-item {
  min-width: 0;
}

.kpi-card {
  position: relative;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #edf0f4;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.05);
  overflow: hidden;
  width: 100%;
  height: 90px;
}

.kpi-card .card-body {
  height: 100%;
  padding: 8px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.kpi-card-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.kpi-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.kpi-card-label {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  color: #111827;
}

.kpi-card-icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 7px;
  background: #ffffff;
  border: 1px solid #edf0f4;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.kpi-card-value {
  font-size: 32px;
  font-weight: 800;
  margin: 10px 0 0;
  color: #050505;
  line-height: 1;
  text-align: center;
  letter-spacing: -.5px;
}

.kpi-card-percent {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  background: transparent !important;
  border: 0 !important;
  padding: 0;
}

.kpi-card-content-chart {
  height: 100%;
}

/* ===== ACEPTADOS / RECHAZADOS CON DONUT RESPONSIVO ===== */
.kpi-card--with-chart .kpi-card-content-chart {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(65px, 24%, 90px);
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.kpi-card--with-chart .kpi-card-left {
  min-width: 0;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
}

.kpi-card--with-chart .kpi-card-number {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kpi-card--with-chart .kpi-card-value {
  margin: 0;
  transform: none !important;
  text-align: center;
  white-space: nowrap;
  font-size: clamp(28px, 5vw, 42px);
}

.kpi-mini-donut {
  width: 65px;
  height: 65px;
  min-width: 65px;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}

.kpi-card--with-chart .kpi-mini-donut {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  min-width: 0;
  position: relative;
  transform: none !important;
}

.kpi-mini-donut::after {
  content: "";
  position: absolute;
  inset: 10px;
  background: #ffffff;
  border-radius: 50%;
}

.kpi-mini-donut--aceptados {
  background: conic-gradient(#22c55e calc(var(--value) * 1%), #bbf7d0 0);
}

.kpi-mini-donut--rechazados {
  background: conic-gradient(#ef233c calc(var(--value) * 1%), #fecaca 0);
}

/* Colores iconos */
.kpi-card--cargados .kpi-card-icon {
  color: #2563eb;
}

.kpi-card--aceptados .kpi-card-icon {
  color: #16a34a;
}

.kpi-card--rechazados .kpi-card-icon {
  color: #ef233c;
}

.kpi-card--error .kpi-card-icon {
  color: #f97316;
}

.kpi-card--no_procesados .kpi-card-icon {
  color: #7c3aed;
}

.kpi-card--procentaje_audio_promedio .kpi-card-icon {
  color: #2563eb;
}

/* Porcentajes */
.kpi-card-percent--apruebo {
  display: flex;
  align-items: center;
  gap: 4px;
}

.kpi-card-percent--apruebo i {
  color: #1c9f58;
  font-size: 9px;
  line-height: 1;
}

.kpi-card-percent--apruebo span {
  color: #1c9f58;
  font-weight: 700;
}

.kpi-card-percent--rechazo {
  display: flex;
  align-items: center;
  gap: 4px;
}

.kpi-card-percent--rechazo i {
  color: #ef233c;
  font-size: 9px;
  line-height: 1;
}

.kpi-card-percent--rechazo span {
  color: #ef233c;
  font-weight: 700;
}

/* Espacio fantasma para cards que no tienen porcentaje */
.kpi-card--cargados .card-body::after,
.kpi-card--procentaje_audio_promedio .card-body::after {
  content: "";
  display: block;
  height: 15px;
  min-height: 15px;
}

/* ================== PANTALLA GRANDE ================== */
/* ================== PANTALLA GRANDE ================== */
@media (min-width: 1400px) {
  .kpi-grid {
    width: 100%;

    /*
      4 columnas reales:
      col 1 = cargados/audio más ancha
      col 2 = error/no procesados más ancha
      col 3 = aceptados más angosta
      col 4 = rechazados más angosta
    */
    grid-template-columns: 1fr 1fr 1fr 1fr;

    grid-template-areas:
      "cargados error aceptados rechazados"
      "audio no_procesados aceptados rechazados";

    justify-content: stretch;
    align-items: stretch;
    gap: 20px;
  }

  .kpi-area-cargados {
    grid-area: cargados;
  }

  .kpi-area-audio {
    grid-area: audio;
  }

  .kpi-area-error {
    grid-area: error;
  }

  .kpi-area-no-procesados {
    grid-area: no_procesados;
  }

  .kpi-area-aceptados {
    grid-area: aceptados;
  }

  .kpi-area-rechazados {
    grid-area: rechazados;
  }

  .kpi-card {
    width: 100%;
    height: 90px;
  }

  .kpi-area-aceptados .kpi-card,
  .kpi-area-rechazados .kpi-card {
    width: 100%;
    height: 200px;
  }

  .kpi-area-aceptados .kpi-card-content-chart,
  .kpi-area-rechazados .kpi-card-content-chart {
    grid-template-columns: minmax(0, 1fr) clamp(90px, 30%, 125px);
    gap: 18px;
  }

  .kpi-area-aceptados .kpi-card-value,
  .kpi-area-rechazados .kpi-card-value {
    font-size: 44px;
    transform: none !important;
    margin: 0;
    text-align: center;
  }

  .kpi-area-aceptados .kpi-mini-donut,
  .kpi-area-rechazados .kpi-mini-donut {
    width: 100%;
    height: auto;
    min-width: 0;
    transform: none !important;
  }

  .kpi-area-aceptados .kpi-mini-donut::after,
  .kpi-area-rechazados .kpi-mini-donut::after {
    inset: 24px;
  }

  .kpi-area-aceptados .kpi-card-left,
  .kpi-area-rechazados .kpi-card-left {
    height: 100%;
    display: grid;
    grid-template-rows: 1fr auto;
  }

  .kpi-area-aceptados .kpi-card-number,
  .kpi-area-rechazados .kpi-card-number {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .kpi-area-aceptados .kpi-card-percent,
  .kpi-area-rechazados .kpi-card-percent {
    align-self: end;
    justify-self: start;
  }
}

/* ================== NOTEBOOK / TABLET ================== */
@media (max-width: 1399px) {

  .kpi-card--cargados,
  .kpi-card--procentaje_audio_promedio,
  .kpi-card--aceptados,
  .kpi-card--error,
  .kpi-card--no_procesados,
  .kpi-card--rechazados {
    grid-area: auto;
  }
}

/* ================== RESPONSIVE ================== */
@media (max-width: 992px) {
  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kpi-card--with-chart .kpi-card-value {
    transform: none !important;
    text-align: center;
  }
}

@media (max-width: 576px) {
  .kpi-grid {
    display: flex;
    flex-direction: column;
  }

  .kpi-area-aceptados .kpi-card,
  .kpi-area-rechazados .kpi-card {
    height: 130px;
  }

  .kpi-area-aceptados .kpi-card-content-chart,
  .kpi-area-rechazados .kpi-card-content-chart {
    grid-template-columns: minmax(0, 1fr) 82px;
    gap: 10px;
    height: 100%;
    position: static;
  }

  .kpi-area-aceptados .kpi-card-left,
  .kpi-area-rechazados .kpi-card-left {
    height: 100%;
    display: grid;
    grid-template-rows: 1fr auto;
  }

  .kpi-area-aceptados .kpi-card-number,
  .kpi-area-rechazados .kpi-card-number {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .kpi-area-aceptados .kpi-card-value,
  .kpi-area-rechazados .kpi-card-value {
    margin: 0;
    transform: none !important;
    text-align: center;
    font-size: 32px;
  }

  .kpi-area-aceptados .kpi-card-percent,
  .kpi-area-rechazados .kpi-card-percent {
    align-self: end;
    justify-self: start;
  }

  .kpi-area-aceptados .kpi-mini-donut,
  .kpi-area-rechazados .kpi-mini-donut {
    width: 82px;
    height: 82px;
    min-width: 0;
    position: relative;
    transform: none !important;
  }

  .kpi-area-aceptados .kpi-mini-donut::after,
  .kpi-area-rechazados .kpi-mini-donut::after {
    inset: 14px;
  }

  .kpi-area-cargados {
    order: 1;
  }

  .kpi-area-aceptados {
    order: 2;
  }

  .kpi-area-rechazados {
    order: 3;
  }

  .kpi-area-error {
    order: 4;
  }

  .kpi-area-no-procesados {
    order: 5;
  }

  .kpi-area-audio {
    order: 6;
  }
}


/* ================== CHART ================== */
.dashboard-chart-card {
  background: #ffffff;
  border: 1px solid #efefef;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.dashboard-chart-card .card-body {
  padding: 14px;
}

.chart-top-ejecutivos-wrap {
  position: relative;
  height: 320px;
  min-width: 100%;
}

/* ================== RESPONSIVE ================== */


.dashboard-sales-card .card-body {
  padding: 14px
}

.dashboard-chart-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.dashboard-chart-title {
  margin: 0 0 4px 0;
  font-size: clamp(16px, 1.2vw, 18px);
  font-weight: 700;
  color: #232323;
  line-height: 1.15;
}

.dashboard-chart-legend-custom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  font-size: clamp(11px, 0.9vw, 12px);
  color: #555;
  font-weight: 500;
}

.dashboard-chart-legend-custom span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.top10-gauge-legend-eje .legend-dot {
  margin-top: 4px;
  flex-shrink: 0;
}

.legend-dot--green {
  background: #5f9206;
}

.legend-dot--red {
  background: #ef4444;
}

.estado-gauge-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.estado-gauge-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.estado-gauge-item::after {
  display: none !important;
}

.estado-gauge-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
}

.estado-gauge-value {
  display: none;
}

.estado-gauge-dot {
  width: 7px;
  height: 7px;
  min-width: 7px;
}

@media (max-width: 420px) {
  .estado-gauge-item {
    padding: 0 4px;
  }

  .estado-gauge-title {
    font-size: 10px;
    gap: 4px;
  }

  .estado-gauge-value {
    font-size: 22px;
  }
}

.gauge-chart-card .card-body {
  padding: 16px;
}

.gauge-chart-container {
  height: 220px !important;
  max-width: 300px;
  margin: 0 auto;
  position: relative;
}

#estadoRegistrosLegend.estado-gauge-legend {
  position: static;
  top: auto;
  margin-top: 30px;
  margin-bottom: 18px;
}

.gauge-legend-custom {
  display: flex;
  flex-direction: column;
  /* 🔥 clave */
  align-items: flex-start;
  /* alineado a la izquierda */
  gap: 6px;
  /* espacio entre items */
  margin-top: 10px;
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
}

.gauge-legend-custom span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.top10-card {
  background: #ffffff;
  border: 1px solid #efefef;
  border-radius: 18px;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.04);
  height: 100%;
}

.top10-card .card-body {
  padding: 16px;
}



.top10-gauge-wrap {
  height: 170px;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  position: relative;
}

.chart-container-sales {
  height: 300px !important;
}



@media (max-width: 768px) {
  .chart-container-sales {
    height: 240px !important;
  }

  .gauge-chart-container {
    height: 240px !important;
  }

  .dashboard-chart-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .dashboard-topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .dashboard-filters-inline {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 12px;
    overflow: visible;
  }

  .filter-inline-group {
    width: 100%;
    padding: 0;
    border-right: 0;
    border-bottom: 1px solid #e7e7eb;
    padding-bottom: 10px;
  }

  .filter-inline-group:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .filter-select-wrap {
    width: 100%;
  }

  .filter-inline-select,
  .filter-inline-date,
  .filter-inline-control {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
  }

  .filter-inline-actions {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .btn-filter-inline,
  .btn-clear-inline {
    width: 100%;
    max-width: 220px;
  }

  .filter-inline-group label[for="fecha_inicio"],
  .filter-inline-group label[for="fecha_fin"] {
    transform: none;
  }
}

.detail-errors-card .card-body {
  padding: 16px;
}

.detail-errors-header {
  min-height: 60px;
  /* 🔥 ajusta este valor */
  display: flex;
  align-items: flex-start;
}

.detail-errors-title {
  margin: 0;
  font-size: clamp(16px, 1.15vw, 18px);
  font-weight: 700;
  color: #232323;
  line-height: 1.15;
  word-break: break-word;
}

.detail-errors-subtitle {
  margin: 2px 0 0 0;
  font-size: clamp(11px, 0.9vw, 13px);
  color: #8b8f97;
  line-height: 1.25;
}

.detail-errors-divider {
  border-top: 1px solid #ececec;
  margin-bottom: 18px;
}

.top-tareas-card .card-body {
  padding: 16px 18px 18px;
}

.top-tareas-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.top-tareas-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #232323;
  line-height: 1.2;
}

.top-tareas-subtitle {
  margin: 2px 0 0 0;
  font-size: 12px;
  color: #9aa0a6;
  line-height: 1.3;
  font-weight: 500;
}

.top-tareas-divider {
  border-top: 1px solid #ececec;
  margin-bottom: 18px;
}

.top-tareas-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.top-tarea-row {
  display: grid;
  grid-template-columns: 200px 1fr 36px;
  /* antes 78px */
  align-items: center;
  gap: 8px;
  /* antes 14px */
}


.top-tarea-name {
  font-size: 12px;
  font-weight: 500;
  color: #232323;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-tarea-bar-bg {
  width: 100%;
  height: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: #ffdaa6;
}

.top-tarea-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: #f89007;
}

.top-tarea-values {
  display: flex;
  justify-content: flex-start;
  /* antes flex-end */
  align-items: center;
  white-space: nowrap;
}

.top-tarea-total {
  font-size: 13px;
  font-weight: 700;
  color: #232323;
  min-width: 0px;
  text-align: left;
  line-height: 1;
}

.top-tareas-empty {
  font-size: 14px;
  color: #8b8f97;
  margin-top: 4px;
}

/* EMPTY PRINCIPAL DASHBOARD */
.empty-dashboard-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.empty-main-icon {
  font-size: 65px;
  color: #c3cbd4;
  /* verde del dashboard */

}

@media (max-width: 992px) {
  .top-tarea-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .top-tarea-values {
    justify-content: center;
    text-align: center;
  }

  .top-tarea-name {
    white-space: normal;
  }
}

@media (max-width: 1400px) {
  .dashboard-topbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .dashboard-filters-inline {
    width: 100%;
    flex-wrap: nowrap;
    gap: 0;
    overflow-x: auto;
  }

  .filter-inline-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0px;
    padding: 0 14px;
    border-right: 1px solid #e7e7eb;
    min-height: auto;
  }

  .filter-inline-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    flex-shrink: 0;
    width: auto;
    justify-content: flex-start;
    padding-left: 18px;
    padding-top: 0;
  }

  .filter-inline-date {
    width: 128px;
    min-width: 128px;
    padding: 0 !important;
  }

  .filter-inline-date::-webkit-datetime-edit-fields-wrapper {
    display: flex;
    align-items: center;
    height: 34px;
  }
}

@media (max-width: 991px) {
  .dashboard-filters-inline {
    flex-wrap: wrap;
    gap: 15px;
    overflow-x: visible;
  }

  .filter-inline-actions {
    padding-left: 0;
  }
}

.page-loader[hidden] {
  display: none !important;
}

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(248, 248, 249, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.page-loader__box {
  min-width: 220px;
  padding: 22px 26px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid #ececec;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
}

.page-loader__spinner {
  width: 42px;
  height: 42px;
  border: 4px solid #e5e7eb;
  border-top-color: #72864f;
  border-radius: 50%;
  animation: pageLoaderSpin .8s linear infinite;
}

.page-loader__text {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #4b5563;
}

@keyframes pageLoaderSpin {
  to {
    transform: rotate(360deg);
  }
}

/* top 3 ejecutivos */
.top10-gauge-legend-eje {
  display: flex;
  flex-direction: column;
  /* 🔥 en columna (listado) */
  align-items: flex-start;
  /* 🔥 alineado a la izquierda */
  gap: 6px;
  margin-top: 10px;
}

.top10-gauge-legend-eje span {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.top10-gauge-legend-eje p {
  margin: 0;
  font-size: 12px;
}

@media (max-width: 1366px) {

  .dashboard-chart-card .card-body,
  .dashboard-sales-card .card-body,
  .detail-errors-card .card-body {
    padding: 12px;
  }

  .dashboard-chart-title,
  .detail-errors-title {
    font-size: 15px;
  }

  .detail-errors-subtitle {
    font-size: 12px;
  }

  .chart-container-sales {
    height: 260px !important;
  }

  .chart-container {
    height: 230px;
  }

  .dashboard-chart-legend-custom {
    gap: 6px 10px;
    font-size: 11px;
  }

  .gauge-legend-custom {
    gap: 6px 10px;
    font-size: 11px;
  }
}



.chart-container-template {
  height: 220px !important;
  max-width: 300px;
  margin: 0 auto;
  position: relative;
}

#chartDetalleErroresTemplate {
  width: 100%;
  height: 220px !important;
  margin-top: 0 !important;
}

#chartDetalleErrores {
  height: 230px !important;
  min-height: 230px !important;
  flex: 0 0 260px !important;
  margin-top: 15px;
}


@media (max-width: 480px) {
  #detalleErroresLegend {
    grid-template-columns: 1fr;
    padding: 0 20px;
  }
}

@media (max-width: 768px) {
  .chart-container-detalle {
    height: 360px !important;
  }
}



.chart-scroll-x {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;

  scrollbar-width: thin;
  scrollbar-color: #b8b8b8 transparent;
}

/* Chrome */
.chart-scroll-x::-webkit-scrollbar {
  height: 3px;
}

.chart-scroll-x::-webkit-scrollbar-track {
  background: transparent;
}

.chart-scroll-x::-webkit-scrollbar-thumb {
  background: #b8b8b8;
  border-radius: 999px;
}

@media (max-width: 768px) {
  #chartTopMejoresEjecutivosWrap {
    min-width: 850px;
  }

  #chartTopMejoresEjecutivos {
    min-width: 850px;
  }
}

.chart-todos-ejecutivos-wrap {
  position: relative;
  height: 420px;
  min-width: 100%;
}

#chartLineasEjecutivosWrap {
  min-width: 100% !important;
}



/* COMPARACION RESULTADO REGISTROS */
.dashboard-comparison-table {
  font-size: 13px;
}

.dashboard-comparison-table thead th {
  color: #6b7280;
  font-weight: 700;
  border-bottom: 1px solid #ececec;
}

.dashboard-comparison-table tbody td {
  vertical-align: middle;
  color: #232323;
  font-weight: 600;
  border-bottom: 1px solid #f1f1f1;
}

.comparison-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 82px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.comparison-badge--good {
  color: #25881e;
  background: rgba(37, 136, 30, 0.12);
}

.comparison-badge--bad {
  color: #dc2626;
  background: rgba(220, 38, 38, 0.12);
}

.comparison-header-title {
  font-size: 13px;
  font-weight: 800;
  color: #232323;
  line-height: 1.1;
}

.comparison-header-date {
  margin-top: 3px;
  font-size: 11px;
  font-weight: 600;
  color: #8b8f97;
  line-height: 1.1;
  white-space: nowrap;
}

/* grafico comparacion registros  */

.comparison-graphic {
  width: max-content;
  min-width: 980px;
  padding: 8px 6px 4px;
}

.comparison-graphic-head {
  display: grid;
  grid-template-columns: 1fr 140px 1fr 105px 105px;
  gap: 16px;
  align-items: center;
  margin-bottom: 14px;
}

.comparison-period-box {
  width: 210px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 8px 12px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .06);
  text-align: center;
}

.comparison-period-box--actual {
  border-left: 4px solid #2f8fa3;
}

.comparison-period-box--anterior {
  border-left: 4px solid #86b817;
}

.comparison-period-title {
  font-size: 13px;
  font-weight: 800;
  color: #111827;
}

.comparison-period-date {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
}

.comparison-graphic-body {
  display: grid;
  grid-template-columns: 1fr 140px 1fr 105px 105px;
  gap: 16px;
  align-items: stretch;
}

.comparison-bars-column {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 18px;
  padding: 10px 0;
}

.comparison-center-tower {
  background: #fff;
  border-radius: 14px;
  padding: 12px 8px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .12);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 12px;
}

.comparison-center-item {
  min-height: 48px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.comparison-center-icon {
  font-size: 22px;
  line-height: 1;
  margin-bottom: 4px;
}

.comparison-center-name {
  font-size: 11px;
  font-weight: 800;
  color: #1f2937;
  line-height: 1.1;
}

.comparison-bar-side {
  height: 22px;
  display: flex;
  align-items: center;
}

.comparison-bar-side--actual {
  justify-content: flex-end;
}

.comparison-bar-side--anterior {
  justify-content: flex-start;
}

.comparison-bar-fill {
  position: relative;
  height: 18px;
  min-width: 44px;
  border-radius: 999px;
}

.comparison-bar-fill--actual {
  background: #2f8fa3;
}

.comparison-bar-fill--anterior {
  background: #86b817;
}

.comparison-dot-value {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #fff;
  box-shadow: 0 6px 14px rgba(15, 23, 42, .18);
}

.comparison-bar-fill--actual .comparison-dot-value {
  left: -21px;
  background: #2f8fa3;
}

.comparison-bar-fill--anterior .comparison-dot-value {
  right: -21px;
  background: #86b817;
}

.comparison-badges-column {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 18px;
  padding: 10px 0;
}

.comparison-graphic-label {
  font-size: 12px;
  font-weight: 800;
  color: #111827;
  text-align: center;
}

.comparison-mini-badge {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 72px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.comparison-mini-badge--good {
  color: #25881e;
  background: rgba(37, 136, 30, .12);
}

.comparison-mini-badge--bad {
  color: #dc2626;
  background: rgba(220, 38, 38, .12);
}

.comparison-mini-badge--neutral {
  color: #6b7280;
  background: rgba(107, 114, 128, .14);
}

#chartEstadoRegistrosGauge {
  width: 100%;
  height: 220px !important;
}

.dashboard-sales-card {
  overflow: hidden;
}

.chart-container-sales {
  width: 100%;
  height: 390px;
  overflow: hidden;
}

.chart-am5-evaluaciones {
  width: 100%;
  height: 100%;
  max-width: 100%;
}

.chart-container-sales-am5 {
  width: 100%;
  height: 500px !important;
  min-height: 500px !important;
  overflow: hidden;
}

.chart-container-sales-am5 .chart-scroll-mobile {
  width: 100%;
  height: 500px !important;
  min-height: 500px !important;
  overflow-x: hidden;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.chart-line-custom-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 18px;
  width: 100%;
  min-width: 100%;
  height: 500px;
}

#chartLineEvaluaciones {
  width: 100%;
  min-width: 0;
  height: 500px !important;
  min-height: 500px !important;
}

.legend-line-custom {
  width: 280px;
  min-width: 280px;
  padding: 8px 4px;
  max-height: 500px;
  overflow-y: auto;
}

.legend-line-item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 55px;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 10px;
  color: #222;
}

.legend-line-color {
  width: 18px;
  height: 2px;
  border-radius: 2px;
}

.legend-line-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.legend-line-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#chartTopErroresTareasWrap {
  width: 100%;
  min-width: 100%;
}

@media (max-width: 768px) {
  #chartTopErroresTareasWrap {
    min-width: 780px;
  }

  #chartTopErroresTareas {
    min-width: 780px;
    height: 340px !important;
  }
}

@media (max-width: 768px) {
  .chart-container-sales-am5 .chart-scroll-mobile {
    overflow-x: auto;
    overflow-y: hidden;
  }

  .chart-line-custom-wrapper {
    grid-template-columns: 900px 260px;
    width: 1160px;
    min-width: 1160px;
  }

  #chartLineEvaluaciones {
    width: 900px !important;
    min-width: 900px !important;
  }

  .legend-line-custom {
    width: 260px;
    min-width: 260px;
  }
}

#legendCalidadEjecutivos {
  display: flex;
  gap: 30px;
  align-items: center;
  margin: 10px 0 4px 6px;
  white-space: nowrap;
}

@media (max-width: 768px) {

  #chartTopMejoresEjecutivosWrap,
  #chartTopPeoresEjecutivosWrap {
    min-width: 620px;
    height: 300px !important;
  }

  #chartTopMejoresEjecutivos,
  #chartTopPeoresEjecutivos {
    min-width: 620px;
    height: 300px !important;
  }
}

.top10-gauge-wrap-registros {
  height: clamp(235px, 22vw, 300px);
  overflow: visible;
  margin-top: clamp(-25px, -2vw, -5px);
  margin-bottom: clamp(-45px, -3vw, -20px);
}

#chartRegistrosConErrores {
  width: 100%;
  height: clamp(235px, 22vw, 300px);
}

#chartTareasUnSoloNo {
  width: 100%;
  height: clamp(235px, 22vw, 300px);
}

#chartTareasConDosNo {
  width: 100%;
  height: clamp(235px, 22vw, 300px);
}

/* Leyendas de todos los gráficos tipo donut */

#legendRegistrosConErrores,
#legendTareasUnSoloNo,
#legendTareasConDosNo,
#detalleErroresLegend {
  margin-top: -20px;
  font-size: 11px;
  color: #222;
}

#legendRegistrosConErrores span,
#legendTareasUnSoloNo span,
#legendTareasConDosNo span,
#detalleErroresLegend .detalle-legend-item {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

#legendRegistrosConErrores p,
#legendTareasUnSoloNo p,
#legendTareasConDosNo p,
#detalleErroresLegend .detalle-legend-label {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  color: #222;
  line-height: 1.25;
}

#legendRegistrosConErrores .legend-dot,
#legendTareasUnSoloNo .legend-dot,
#legendTareasConDosNo .legend-dot,
#detalleErroresLegend .detalle-legend-marker {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Estado de Registros */

#estadoRegistrosLegend .estado-gauge-title,
#estadoRegistrosLegend .estado-gauge-value {
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  color: #222;
  line-height: 1.25;
}

#detalleErroresLegend {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 18px;
  row-gap: 8px;
}

#detalleErroresLegend .detalle-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

#chartCalidadEjecutivos {
  width: 100%;
  height: 430px;
}

#chartDetalleErrores {
  position: relative;
  z-index: 1;
}

#detalleErroresLegend {
  position: relative;
  z-index: 20;
}

#detalleErroresLegend .detalle-legend-item {
  position: relative;
  z-index: 21;
  cursor: pointer;
  pointer-events: auto;
}

.detalle-errores-legend-template {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 18px;
  row-gap: 10px;
  margin-top: 10px;
  padding: 0 6px 4px;
}

.detalle-template-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 500;
  color: #222;
  line-height: 1.25;
}

.detalle-template-legend-dot {
  width: 8px;
  height: 8px;
  min-width: 8px;
  border-radius: 50%;
}

.detalle-template-legend-text {
  display: block;
}

/* ===============================
   DOBLE GAUGE TEMPLATE AMCHARTS
   =============================== */

.doble-gauge-card .card-body {
  padding: 14px 16px;
}

.doble-gauge-chart {
  width: 100%;
  height: 170px !important;
  min-height: 170px !important;
}

.doble-gauge-box {
  height: 205px;
}

.doble-gauge-divider {
  border-top: 1px solid #ececec;
  margin: 4px 0 12px;
}

.doble-gauge-template-card .card-body {
  padding: 14px 16px;
}

.doble-gauge-template-block {
  height: 205px;
}

.doble-gauge-template-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 800;
  color: #232323;
  line-height: 1.1;
  margin-bottom: 0;
}

.doble-gauge-template-title i {
  font-size: 27px;
  color: #4056f4;
}

.doble-gauge-template-chart {
  width: 100%;
  height: 175px;
  margin-top: -4px;
}

.doble-gauge-template-divider {
  border-top: 1px solid #ececec;
  margin: 4px 0 12px;
}

@media (max-width: 1366px) {
  .doble-gauge-template-block {
    height: 185px;
  }

  .doble-gauge-template-chart {
    height: 155px;
  }

  .doble-gauge-template-title {
    font-size: 15px;
  }

  .doble-gauge-template-title i {
    font-size: 24px;
  }
}

/* ========================================================================== 
   AJUSTE FINAL COMPACTO — DASHBOARD 1
   Este bloque debe permanecer al final del archivo.
   Reduce cards, gráficos y tipografías sin ocultar información.
   ========================================================================== */

:root {
  --dash-section-radius: 18px;
  --dash-card-radius: 12px;
  --dash-card-shadow: 0 4px 14px rgba(15, 23, 42, 0.055);
  --dash-title-size: 14px;
  --dash-subtitle-size: 10.5px;
  --dash-body-padding: 10px;
}

/* ---------- Contenedores generales ---------- */
.body-campana,
.body-tareas,
.body-ejecutivo {
  border-radius: var(--dash-section-radius);
  padding: 16px 12px 12px;
}

.body-tareas,
.body-ejecutivo {
  margin-top: 22px;
}

.dashboard-section-floating,
.dashboard-section-floating-tareas,
.dashboard-section-floating-ejecutivo {
  top: -10px;
  left: 16px;
  padding: 0 8px;
  font-size: 12px;
  line-height: 20px;
}

.body-campana .row,
.body-tareas .row,
.body-ejecutivo .row {
  --bs-gutter-x: 14px;
  --bs-gutter-y: 14px;
}

.body-campana .mb-4,
.body-tareas .mb-4,
.body-ejecutivo .mb-4 {
  margin-bottom: 14px !important;
}

/* ---------- Filtros compactos ---------- */
.dashboard-filter-card {
  margin-bottom: 12px;
}

.dashboard-title-inline {
  font-size: 16px;
}

.dashboard-topbar {
  gap: 3px;
}

.filter-inline-group {
  padding: 0 10px;
}

.filter-inline-label {
  font-size: 10.5px;
  line-height: 1.15;
}

.filter-inline-control,
.filter-inline-date {
  font-size: 12px;
  line-height: 30px;
}

.filter-inline-select,
.filter-inline-date {
  width: 132px;
}

.filter-inline-select {
  max-width: 158px;
}

.btn-filter-inline,
.btn-clear-inline {
  height: 32px;
  padding: 0 14px;
  border-radius: 16px;
  font-size: 12px;
}

.filter-inline-actions {
  gap: 7px;
}

/* ---------- KPI: tamaño general ---------- */
.kpi-grid {
  gap: 12px;
}

.kpi-card {
  height: 74px;
  border-radius: 9px;
  box-shadow: var(--dash-card-shadow);
}

.kpi-card .card-body {
  padding: 6px 8px;
}

.kpi-card-title {
  gap: 7px;
  min-width: 0;
}

.kpi-card-label {
  font-size: 10px;
  line-height: 1.15;
  white-space: normal;
  overflow-wrap: anywhere;
}

.kpi-card-icon {
  width: 23px;
  height: 23px;
  min-width: 23px;
  border-radius: 6px;
  font-size: 12px;
}

.kpi-card-value {
  margin-top: 4px;
  font-size: clamp(25px, 2.2vw, 30px);
  line-height: .95;
}

.kpi-card-percent {
  margin-top: 2px;
  font-size: 9.5px;
  line-height: 1.1;
}

.kpi-card-percent--apruebo,
.kpi-card-percent--rechazo {
  gap: 3px;
}

.kpi-card--cargados .card-body::after,
.kpi-card--procentaje_audio_promedio .card-body::after {
  height: 10px;
  min-height: 10px;
}

.kpi-card--with-chart .kpi-card-content-chart {
  grid-template-columns: minmax(0, 1fr) clamp(54px, 22%, 68px);
  gap: 7px;
}

.kpi-card--with-chart .kpi-card-value {
  font-size: clamp(27px, 3.1vw, 36px);
  max-width: 100%;
}

.kpi-mini-donut::after {
  inset: 9px;
}

@media (min-width: 1400px) {
  .kpi-grid {
    gap: 12px;
  }

  .kpi-card {
    height: 74px;
  }

  .kpi-area-aceptados .kpi-card,
  .kpi-area-rechazados .kpi-card {
    height: 160px;
  }

  .kpi-area-aceptados .kpi-card-content-chart,
  .kpi-area-rechazados .kpi-card-content-chart {
    grid-template-columns: minmax(0, 1fr) clamp(72px, 28%, 96px);
    gap: 10px;
  }

  .kpi-area-aceptados .kpi-card-value,
  .kpi-area-rechazados .kpi-card-value {
    font-size: clamp(32px, 2.8vw, 39px);
  }

  .kpi-area-aceptados .kpi-mini-donut::after,
  .kpi-area-rechazados .kpi-mini-donut::after {
    inset: 18px;
  }
}

/* ---------- Todas las cards de gráficos ---------- */
.dashboard-chart-card,
.top10-card,
.top-tareas-card {
  border-radius: var(--dash-card-radius);
  box-shadow: var(--dash-card-shadow);
  overflow: hidden;
}

.dashboard-chart-card .card-body,
.dashboard-sales-card .card-body,
.gauge-chart-card .card-body,
.detail-errors-card .card-body,
.top10-card .card-body,
.doble-gauge-card .card-body,
.top-tareas-card .card-body {
  padding: var(--dash-body-padding);
}

.detail-errors-header {
  min-height: 42px;
}

.detail-errors-title,
.dashboard-chart-title {
  font-size: var(--dash-title-size);
  line-height: 1.15;
}

.detail-errors-subtitle,
.top-tareas-subtitle {
  font-size: var(--dash-subtitle-size);
  line-height: 1.2;
}

.detail-errors-divider,
.top-tareas-divider {
  margin-bottom: 10px;
}

.top-tareas-header {
  gap: 10px;
  margin-bottom: 6px;
}

.top-tareas-title {
  font-size: 14px;
}

.top-tareas-empty {
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 12px;
}

/* ---------- Card Estado de Registros ---------- */
.gauge-chart-container,
#chartEstadoRegistrosGauge {
  height: 170px !important;
  max-width: 250px;
}

#estadoRegistrosLegend.estado-gauge-legend {
  margin-top: 8px;
  margin-bottom: 4px;
  gap: 4px;
}

.estado-gauge-title,
#estadoRegistrosLegend .estado-gauge-title {
  font-size: 10px;
  line-height: 1.15;
}

.estado-gauge-dot {
  width: 6px;
  height: 6px;
  min-width: 6px;
}

/* ---------- Card doble gauge ---------- */
.doble-gauge-card .card-body {
  display: flex;
  flex-direction: column;
}

.doble-gauge-box {
  height: 158px;
  min-height: 0;
}


.doble-gauge-chart {
  height: 132px !important;
  min-height: 132px !important;
}

.doble-gauge-divider {
  margin: 2px 0 8px;
}

/* ---------- Card Registros Procesados ---------- */
.chart-container-template,
#chartDetalleErroresTemplate {
  height: 170px !important;
  max-width: 250px;
}

.detalle-errores-legend-template {
  column-gap: 10px;
  row-gap: 5px;
  margin-top: 5px;
  padding: 0 2px 2px;
}

.detalle-template-legend-item {
  gap: 5px;
  font-size: 9.5px;
  line-height: 1.15;
  min-width: 0;
}

.detalle-template-legend-dot {
  width: 6px;
  height: 6px;
  min-width: 6px;
}

.detalle-template-legend-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ---------- Evaluación de ventas por día ---------- */
.chart-container-sales-am5,
.chart-container-sales-am5 .chart-scroll-mobile,
.chart-line-custom-wrapper,
#chartLineEvaluaciones {
  height: 360px !important;
  min-height: 360px !important;
}

.chart-line-custom-wrapper {
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 10px;
}

.legend-line-custom {
  width: 220px;
  min-width: 220px;
  max-height: 360px;
  padding: 5px 2px;
}

.legend-line-item {
  grid-template-columns: 18px minmax(0, 1fr) 45px;
  gap: 6px;
  margin-bottom: 7px;
  font-size: 10.5px;
}

.legend-line-color {
  width: 14px;
}

/* ---------- Tres cards de errores de tareas ---------- */
.top10-gauge-wrap-registros,
#chartRegistrosConErrores,
#chartTareasUnSoloNo,
#chartTareasConDosNo {
  height: 190px !important;
  min-height: 190px !important;
}

.top10-gauge-wrap-registros {
  margin-top: -12px;
  margin-bottom: -24px;
}

.top10-gauge-legend-eje {
  gap: 4px;
  margin-top: 5px;
}

.top10-gauge-legend-eje span {
  gap: 5px;
}

.top10-gauge-legend-eje p,
#legendRegistrosConErrores p,
#legendTareasUnSoloNo p,
#legendTareasConDosNo p {
  font-size: 9.5px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

#legendRegistrosConErrores,
#legendTareasUnSoloNo,
#legendTareasConDosNo {
  margin-top: -8px;
}

#legendRegistrosConErrores span,
#legendTareasUnSoloNo span,
#legendTareasConDosNo span {
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 5px;
  margin-bottom: 5px;
}

/* ---------- Errores más comunes en tareas ---------- */
#chartTopErroresTareas {
  height: 330px !important;
}

/* ---------- Calidad por ejecutivo ---------- */
#legendCalidadEjecutivos {
  gap: 16px;
  margin: 4px 0 2px 2px;
  font-size: 10.5px;
}

#chartCalidadEjecutivos,
.chart-todos-ejecutivos-wrap {
  height: 350px !important;
}

/* ---------- Top mejores / peores ejecutivos ---------- */
.chart-top-ejecutivos-wrap,
#chartTopMejoresEjecutivos,
#chartTopPeoresEjecutivos {
  height: 320px !important;
}

/* ---------- Scrolls: visibles pero discretos ---------- */
.chart-scroll-x,
.chart-container-sales-am5 .chart-scroll-mobile {
  scrollbar-width: thin;
  scrollbar-color: #aeb4bc transparent;
}

.chart-scroll-x::-webkit-scrollbar,
.chart-container-sales-am5 .chart-scroll-mobile::-webkit-scrollbar {
  height: 5px;
}

.chart-scroll-x::-webkit-scrollbar-thumb,
.chart-container-sales-am5 .chart-scroll-mobile::-webkit-scrollbar-thumb {
  background: #aeb4bc;
  border-radius: 999px;
}

/* ---------- Notebook ---------- */
@media (max-width: 1366px) and (min-width: 769px) {
  :root {
    --dash-body-padding: 9px;
    --dash-title-size: 13px;
    --dash-subtitle-size: 10px;
  }

  .body-campana,
  .body-tareas,
  .body-ejecutivo {
    padding-left: 10px;
    padding-right: 10px;
  }

  .gauge-chart-container,
  #chartEstadoRegistrosGauge,
  .chart-container-template,
  #chartDetalleErroresTemplate {
    height: 158px !important;
  }

  .doble-gauge-box {
    height: 148px;
  }

  .doble-gauge-chart {
    height: 122px !important;
    min-height: 122px !important;
  }

  .chart-container-sales-am5,
  .chart-container-sales-am5 .chart-scroll-mobile,
  .chart-line-custom-wrapper,
  #chartLineEvaluaciones {
    height: 330px !important;
    min-height: 330px !important;
  }

  .legend-line-custom {
    max-height: 330px;
  }

  #chartCalidadEjecutivos,
  .chart-todos-ejecutivos-wrap {
    height: 330px !important;
  }
}

/* ---------- Tablet ---------- */
@media (max-width: 992px) {
  .kpi-grid {
    gap: 10px;
  }

  .kpi-card {
    height: 78px;
  }

  .detail-errors-header {
    min-height: 38px;
  }

  .detalle-errores-legend-template {
    grid-template-columns: 1fr;
  }
}

/* ---------- Móvil ---------- */
@media (max-width: 768px) {

  .body-campana,
  .body-tareas,
  .body-ejecutivo {
    border-radius: 14px;
    padding: 15px 8px 9px;
  }

  .dashboard-section-floating,
  .dashboard-section-floating-tareas,
  .dashboard-section-floating-ejecutivo {
    left: 12px;
    font-size: 11px;
  }

  .dashboard-filters-inline {
    gap: 8px;
  }

  .filter-inline-group {
    padding-bottom: 7px;
  }

  .filter-inline-label {
    font-size: 10px;
  }

  .filter-inline-control,
  .filter-inline-date {
    font-size: 12px;
  }

  .btn-filter-inline,
  .btn-clear-inline {
    height: 32px;
    max-width: none;
  }

  .kpi-grid {
    gap: 8px;
  }

  .kpi-card {
    height: 72px;
  }

  .kpi-area-aceptados .kpi-card,
  .kpi-area-rechazados .kpi-card {
    height: 112px;
  }

  .kpi-area-aceptados .kpi-card-content-chart,
  .kpi-area-rechazados .kpi-card-content-chart {
    grid-template-columns: minmax(0, 1fr) 68px;
    gap: 7px;
  }

  .kpi-area-aceptados .kpi-card-value,
  .kpi-area-rechazados .kpi-card-value {
    font-size: 29px;
  }

  .kpi-area-aceptados .kpi-mini-donut,
  .kpi-area-rechazados .kpi-mini-donut {
    width: 68px;
    height: 68px;
  }

  .kpi-area-aceptados .kpi-mini-donut::after,
  .kpi-area-rechazados .kpi-mini-donut::after {
    inset: 12px;
  }

  .dashboard-chart-card .card-body,
  .dashboard-sales-card .card-body,
  .gauge-chart-card .card-body,
  .detail-errors-card .card-body,
  .top10-card .card-body,
  .doble-gauge-card .card-body,
  .top-tareas-card .card-body {
    padding: 9px;
  }

  .gauge-chart-container,
  #chartEstadoRegistrosGauge {
    height: 185px !important;
  }

  .doble-gauge-box {
    height: 155px;
  }

  .doble-gauge-chart {
    height: 130px !important;
    min-height: 130px !important;
  }

  .chart-container-template,
  #chartDetalleErroresTemplate {
    height: 180px !important;
  }

  .detalle-errores-legend-template {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    font-size: 9px;
  }

  .chart-container-sales-am5,
  .chart-container-sales-am5 .chart-scroll-mobile,
  .chart-line-custom-wrapper,
  #chartLineEvaluaciones {
    height: 350px !important;
    min-height: 350px !important;
  }

  .chart-line-custom-wrapper {
    grid-template-columns: 760px 210px;
    width: 980px;
    min-width: 980px;
    gap: 10px;
  }

  #chartLineEvaluaciones {
    width: 760px !important;
    min-width: 760px !important;
  }

  .legend-line-custom {
    width: 210px;
    min-width: 210px;
    max-height: 350px;
  }

  .top10-gauge-wrap-registros,
  #chartRegistrosConErrores,
  #chartTareasUnSoloNo,
  #chartTareasConDosNo {
    height: 205px !important;
    min-height: 205px !important;
  }

  #chartTopErroresTareasWrap,
  #chartTopErroresTareas {
    min-width: 700px;
  }

  #chartTopErroresTareas {
    height: 320px !important;
  }

  #chartCalidadEjecutivos,
  .chart-todos-ejecutivos-wrap {
    height: 340px !important;
  }

  #chartTopMejoresEjecutivosWrap,
  #chartTopPeoresEjecutivosWrap,
  #chartTopMejoresEjecutivos,
  #chartTopPeoresEjecutivos {
    min-width: 580px;
    height: 290px !important;
  }
}

@media (max-width: 420px) {
  .kpi-card-label {
    font-size: 9.5px;
  }

  .kpi-card-value {
    font-size: 25px;
  }

  .detalle-errores-legend-template {
    grid-template-columns: 1fr;
  }

  .detalle-template-legend-item {
    font-size: 9.5px;
  }
}


/* ------------------------------------------------------------- ------------------dashboard comparativo --------------------------------------------------------------*/
/* =====================================================
   DASHBOARD COMPARATIVO + COMPARATIVO POR FECHAS
   CSS UNIFICADO Y LIMPIO
===================================================== */

/* =====================================================
   ESTRUCTURA GENERAL
===================================================== */

.dashboard-comparativo {
  min-height: 120px;
  background: #f7f7f8;
  border-radius: 22px;
}

.dashboard-comparativo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.dashboard-title {
  margin-bottom: 10px;
  color: #1f1f1f;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
}

.dashboard-reload-box {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dashboard-reload-box select {
  width: 150px;
}

/* =====================================================
   FILTROS
===================================================== */

.filtro-card {
  padding: 14px;
  background: #f8f8f9;
  border: 2px dashed #a6b293;
  border-radius: 25px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.filtro-resumen-pro {
  display: flex;
  align-items: center;
  gap: 28px;
  width: 100%;
  padding: 14px 18px;
  background: #ffffff;
  border: 1px solid #dce0d4;
  border-radius: 14px;
}

.filtro-resumen-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.filtro-resumen-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: #6d7f4f;
  font-size: 20px;
  background: #edf3e9;
  border-radius: 14px;
}

.filtro-resumen-item p {
  margin: 0 0 4px;
  color: #7b8493;
  font-size: 12px;
  font-weight: 600;
}

.filtro-resumen-item strong {
  color: #111827;
  font-size: 15px;
  font-weight: 800;
}

.filtro-resumen-divider {
  width: 1px;
  height: 42px;
  background: #e5e7eb;
}

.btn-toggle-filtros {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  margin-left: auto;
  padding: 0 18px;
  color: #4f6334;
  font-weight: 700;
  background: #ffffff;
  border: 1px solid #cbd8c0;
  border-radius: 20px;
}

.btn-toggle-filtros:hover {
  background: #f3f7f0;
}

.filtro-detalle-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.filtro-detalle-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #536a35;
  font-size: 14px;
  font-weight: 800;
}

.filtro-detalle-grid {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 26px;
  align-items: flex-start;
}

.filtro-fechas-pro {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  justify-content: flex-start;
  gap: 18px;
  padding-right: 26px;
  border-right: 1px solid #e4eadc;
}

#contenedorComparaciones.comparaciones-pro {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding-right: 8px;
}

#contenedorComparaciones .comparacion-item {
  padding: 14px;
  background: #ffffff;
  border: 1px solid #b1b7ab;
  border-radius: 16px;
}

.comparacion-title {
  margin-bottom: 10px;
  color: #536a35;
  font-size: 13px;
  font-weight: 800;
}

/* Dashboard comparativo normal */
.comparacion-campos-pro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

/* Dashboard comparativo por fechas */
.comparacion-campos-fechas {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.comparacion-campos-fechas .btnEliminarComparacion {
  position: absolute;
  top: -42px;
  right: -10px;
}

.comparacion-campos-fechas.sin-cliente {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.comparacion-campos-fechas.sin-cliente .campo-campana {
  grid-column: 1 / -1;
}

.comparacion-campos-fechas.sin-cliente .campo-fecha-desde {
  grid-column: 1;
}

.comparacion-campos-fechas.sin-cliente .campo-fecha-hasta {
  grid-column: 2;
}

.error-comparacion {
  margin-left: 8px;
  color: #dc3545;
  font-size: 12px;
  font-weight: 600;
}

.campo-error {
  display: none;
  margin-top: 6px;
  color: #dc3545;
  font-size: 12px;
}

.is-invalid-custom {
  border-color: #dc3545 !important;
}

/* =====================================================
   INPUTS
===================================================== */

.form-control,
.form-select-2 {
  width: 100%;
  height: 32px;
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: 13px;
  border: 1px solid #d8dee8;
  border-radius: 9px;
}

.form-control:focus,
.form-select-2:focus {
  border-color: #8ca76d;
  box-shadow: 0 0 0 3px rgba(109, 127, 79, 0.12);
}

/* =====================================================
   ACCIONES Y BOTONES
===================================================== */

.acciones-dashboard,
.acciones-dashboard-pro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #e5ebdd;
}

.acciones-finales-pro {
  display: flex;
  gap: 12px;
}

.btn-verde {
  padding: 7px 18px;
  color: #ffffff;
  font-weight: 600;
  background: #6f8345;
  border: 1px solid #6f8345;
  border-radius: 18px;
}

.btn-verde:hover {
  color: #ffffff;
  background: #5f713b;
}

.btn-limpiar {
  padding: 7px 18px;
  color: #ffffff;
  font-weight: 600;
  background: #000000;
  border: 1px solid #b8bfb0;
  border-radius: 18px;
}

.btn-limpiar:hover,
.btn-limpiar:focus,
.btn-limpiar:active {
  color: #ffffff !important;
  background: #3f3d3d !important;
  border-color: #a9a3a3 !important;
  box-shadow: none;
}

.btn-agregar {
  margin-right: auto;
  padding: 6px 14px;
  color: #6f8345;
  font-size: 13px;
  font-weight: 600;
  background: #ffffff;
  border: 1px solid #b9bec8;
  border-radius: 18px;
}

.btn-agregar span {
  display: block;
  font-size: 20px;
  line-height: 8px;
}

.btn-eliminar {
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  color: #ff3434 !important;
  font-size: 16px;
  background: #ffffff !important;
  border: 1px solid #ffd0d0 !important;
  border-radius: 999px !important;
}

/* =====================================================
   ESTADO INICIAL
===================================================== */

.empty-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 170px;
  padding: 10px;
  text-align: center;
  background: #ffffff;
  border: 1px solid #6d7f4f;
  border-radius: 18px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.bi-file-earmark-bar-graph-2 {
  color: #b8c0cc;
  font-size: 60px;
}

.empty-title {
  font-size: 14px;
  font-weight: 600;
}

.empty-text {
  color: #8b98aa;
}

/* =====================================================
   CARDS KPI COMPARTIDAS
   Se aplican a ambos dashboards porque ambos usan
   #bloqueResultadosFechas.
===================================================== */

#bloqueResultadosFechas .kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  grid-template-areas: none !important;
  gap: 14px !important;
}

#bloqueResultadosFechas .kpi-grid-item {
  grid-area: auto !important;
  min-width: 0;
}

#bloqueResultadosFechas .kpi-card,
#bloqueResultadosFechas .kpi-area-aceptados .kpi-card,
#bloqueResultadosFechas .kpi-area-rechazados .kpi-card {
  width: 100% !important;
  height: 110px !important;
}

#bloqueResultadosFechas .kpi-card .card-body {
  position: relative;
  z-index: 2;
}

#bloqueResultadosFechas .kpi-card-value {
  font-size: 28px !important;
}

#bloqueResultadosFechas .kpi-card:not(.kpi-card--with-chart) .card-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#bloqueResultadosFechas .kpi-card:not(.kpi-card--with-chart) .kpi-card-value {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateY(8px);
}

#bloqueResultadosFechas .kpi-card--with-chart .kpi-card-content-chart {
  grid-template-columns: minmax(0, 1fr) 58px !important;
  align-items: center !important;
  gap: 8px !important;
}

#bloqueResultadosFechas .kpi-card--with-chart .kpi-card-number {
  display: flex;
  align-items: center;
  min-height: 42px;
}

#bloqueResultadosFechas .kpi-card--with-chart .kpi-card-value {
  margin: 0 !important;
}

#bloqueResultadosFechas .kpi-mini-donut {
  width: 58px !important;
  min-width: 58px !important;
  height: 58px !important;
}

#bloqueResultadosFechas .kpi-mini-donut::after {
  inset: 9px !important;
}

#bloqueResultadosFechas .kpi-area-cumplimiento .kpi-card-value,
#bloqueResultadosFechas .kpi-area-aprobados .kpi-card-value {
  transform: translateY(0) !important;
}


#bloqueResultadosFechas .kpi-card-wave::after {
  right: 0 !important;
  bottom: 0 !important;
  z-index: 0 !important;
  width: 95px !important;
  height: 45px !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

/* =====================================================
   GRÁFICOS COMPARTIDOS
===================================================== */

.chart-scroll-x {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

#contenedorGraficoResumen,
#contenedorGraficoPorcentajes {
  width: 100%;
  min-width: 100%;
  height: auto !important;
  min-height: 0 !important;
}

#graficoResumenRegistros,
#graficoPorcentajes {
  width: 100% !important;
  height: 360px !important;
  min-height: 360px !important;
}

.card,
.dashboard-chart-card,
.dashboard-chart-card .card-body,
#contenedorGraficoResumen,
#contenedorGraficoPorcentajes {
  overflow-y: visible;
}

.chart-scroll-x::-webkit-scrollbar {
  height: 6px;
}

.chart-scroll-x::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 10px;
}

.chart-scroll-x::-webkit-scrollbar-thumb {
  background: #94a3b8;
  border-radius: 10px;
}

.chart-scroll-x::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* =====================================================
   TABLA DETALLE COMPARTIDA
===================================================== */

.comparativa-tabla-card {
  width: 100%;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.comparativa-tabla-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 10px;
}

.comparativa-tabla-title {
  margin: 0;
  color: #334155;
  font-size: 15px;
  font-weight: 700;
}

.comparativa-tabla-subtitle {
  margin: 4px 0 0;
  color: #94a3b8;
  font-size: 12px;
}

.comparativa-tabla-scroll {
  width: 100%;
  padding: 0 18px 18px;
  overflow-x: hidden;
}

.comparativa-tabla {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: collapse;
}

.comparativa-tabla th {
  padding: 8px 6px;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  white-space: normal;
  word-break: break-word;
  border-bottom: 1px solid #e9edf2;
}

.comparativa-tabla td {
  padding: 8px 6px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.25;
  vertical-align: middle;
  white-space: normal;
  word-break: break-word;
  border-bottom: 1px solid #edf1f5;
}

.comparativa-tabla th.text-end,
.comparativa-tabla td.text-end {
  text-align: right;
}

.comparativa-tabla tbody tr {
  transition: background-color 0.2s ease;
}

.comparativa-tabla tbody tr:hover {
  background: #f8fafc;
}

.comparativa-tabla tbody tr:last-child td {
  border-bottom: 1px solid #e2e8f0;
}

.comparativa-cliente {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.comparativa-cliente-avatar {
  display: inline-flex;
  flex: 0 0 24px;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: #4f75d8;
  font-size: 10px;
  font-weight: 700;
  background: #eef4ff;
  border-radius: 50%;
}

.comparativa-cliente-nombre {
  font-size: 12px;
  min-width: 0;
  color: #475569;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.comparativa-campana {
  color: #64748b;
  font-weight: 500;
  overflow-wrap: anywhere;
  font-size: 12px;
}

.comparativa-periodo {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.2;
}

.comparativa-periodo i {
  color: #94a3b8;
  font-size: 10px;
}

.comparativa-numero {
  color: #475569;
  font-weight: 700;
  font-size: 12px;
}

.comparativa-numero--aceptado {
  color: #22a447;
}

.comparativa-numero--rechazado {
  color: #e25555;
}

.comparativa-metrica {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.comparativa-metrica-punto {
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.metrica-positiva {
  color: #39bd63;
}

.metrica-advertencia {
  color: #f59d50;
}

.metrica-negativa {
  color: #e45c5c;
}

.comparativa-tabla-vacia {
  padding: 24px !important;
  color: #94a3b8 !important;
  text-align: center !important;
}

/* Anchos de columnas */
.comparativa-tabla th:nth-child(1),
.comparativa-tabla td:nth-child(1) {
  width: 13%;
}

.comparativa-tabla th:nth-child(2),
.comparativa-tabla td:nth-child(2) {
  width: 14%;
}

.comparativa-tabla th:nth-child(3),
.comparativa-tabla td:nth-child(3) {
  width: 15%;
}

.comparativa-tabla th:nth-child(4),
.comparativa-tabla td:nth-child(4),
.comparativa-tabla th:nth-child(5),
.comparativa-tabla td:nth-child(5),
.comparativa-tabla th:nth-child(6),
.comparativa-tabla td:nth-child(6) {
  width: 9%;
}

.comparativa-tabla th:nth-child(7),
.comparativa-tabla td:nth-child(7),
.comparativa-tabla th:nth-child(8),
.comparativa-tabla td:nth-child(8),
.comparativa-tabla th:nth-child(9),
.comparativa-tabla td:nth-child(9) {
  width: 10.33%;
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1200px) {
  .filtro-detalle-grid {
    grid-template-columns: 1fr;
  }

  .filtro-fechas-pro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-right: 0;
    border-right: 0;
  }

  #contenedorComparaciones.comparaciones-pro {
    grid-template-columns: 1fr;
  }

  #graficoResumenRegistros,
  #graficoPorcentajes {
    height: 340px !important;
    min-height: 340px !important;
  }
}

@media (max-width: 1100px) {
  .comparativa-tabla-scroll {
    overflow-x: auto;
  }

  .comparativa-tabla {
    min-width: 920px;
    table-layout: auto;
  }

  .comparativa-tabla th,
  .comparativa-tabla td {
    white-space: nowrap;
    word-break: normal;
  }

  .comparativa-cliente-nombre,
  .comparativa-campana {
    overflow-wrap: normal;
  }
}

@media (max-width: 992px) {
  #bloqueResultadosFechas .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #graficoResumenRegistros,
  #graficoPorcentajes {
    height: 320px !important;
    min-height: 320px !important;
  }
}

@media (max-width: 768px) {
  .filtro-resumen-pro {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .filtro-resumen-divider {
    width: 100%;
    height: 1px;
  }

  .btn-toggle-filtros {
    width: 100%;
    justify-content: center;
  }

  .comparacion-campos-pro,
  .comparacion-campos-fechas {
    grid-template-columns: 1fr;
  }

  .comparacion-campos-fechas.sin-cliente {
    grid-template-columns: 1fr;
  }

  .comparacion-campos-fechas.sin-cliente .campo-campana,
  .comparacion-campos-fechas.sin-cliente .campo-fecha-desde,
  .comparacion-campos-fechas.sin-cliente .campo-fecha-hasta {
    grid-column: 1;
  }

  .filtro-fechas-pro {
    grid-template-columns: 1fr;
  }

  .acciones-dashboard,
  .acciones-dashboard-pro,
  .acciones-finales-pro {
    flex-direction: column;
    width: 100%;
  }

  .acciones-dashboard button,
  .acciones-dashboard .btn,
  .acciones-dashboard-pro button,
  .acciones-dashboard-pro .btn {
    width: 100%;
  }

  #graficoResumenRegistros,
  #graficoPorcentajes {
    height: 300px !important;
    min-height: 300px !important;
  }

  .comparativa-tabla-card {
    border-radius: 12px;
  }

  .comparativa-tabla-header {
    padding: 14px 12px 8px;
  }

  .comparativa-tabla-title {
    font-size: 14px;
  }

  .comparativa-tabla-subtitle {
    font-size: 10px;
  }

  .comparativa-tabla-scroll {
    padding: 0 8px 12px;
    overflow-x: auto;
  }

  .comparativa-tabla {
    min-width: 850px;
    table-layout: auto;
  }

  .comparativa-tabla th,
  .comparativa-tabla td {
    padding: 7px 6px;
    font-size: 10px;
    white-space: nowrap;
  }

  .comparativa-cliente-avatar {
    flex-basis: 22px;
    width: 22px;
    height: 22px;
    font-size: 8px;
  }

  .comparativa-metrica {
    font-size: 9px;
  }
}

@media (max-width: 576px) {
  .container-tabla {
    padding-right: 10px;
    padding-left: 10px;
  }

  #bloqueFiltrosDetalle .filtro-detalle-pro {
    padding: 18px 14px;
  }

  #contenedorComparaciones.comparaciones-pro {
    display: grid;
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .comparacion-item {
    width: 100%;
  }

  #bloqueResultadosFechas .kpi-grid {
    grid-template-columns: 1fr !important;
  }

  #graficoResumenRegistros,
  #graficoPorcentajes {
    height: 285px !important;
    min-height: 285px !important;
  }
}




/* Onda gris */
.kpi-card-wave::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100px;
  height: 65px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,\
%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80'%3E\
%3Cdefs%3E\
%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E\
%3Cstop offset='0%25' stop-color='%23ececec'/%3E\
%3Cstop offset='100%25' stop-color='%23ffffff'/%3E\
%3C/linearGradient%3E\
%3C/defs%3E\
%3Cpath d='M0 80 C40 80 45 25 80 25 S120 70 150 35 S180 0 200 0 L200 80 Z' fill='url(%23g)'/%3E\
%3Cpath d='M0 80 C40 80 45 25 80 25 S120 70 150 35 S180 0 200 0' fill='none' stroke='%23d7d7d7' stroke-width='2'/%3E\
%3C/svg%3E");
}

.kpi-wave-pdf::after {
  display: none !important;
}

/* =====================================================
   SCROLL EXCLUSIVO COMPARATIVO POR FECHAS
===================================================== */

.chart-scroll-comparativa-fechas {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
}

.chart-scroll-comparativa-fechas #contenedorGraficoResumen,
.chart-scroll-comparativa-fechas #contenedorGraficoPorcentajes {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.chart-scroll-comparativa-fechas #graficoResumenRegistros,
.chart-scroll-comparativa-fechas #graficoPorcentajes {
  width: 100% !important;
  min-width: 0 !important;
}

/* Solamente móvil */
@media (max-width: 768px) {

  .chart-scroll-comparativa-fechas {
    display: block;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
  }

  .chart-scroll-comparativa-fechas #contenedorGraficoResumen,
  .chart-scroll-comparativa-fechas #contenedorGraficoPorcentajes {
    width: 1200px !important;
    min-width: 1200px !important;
    max-width: none !important;
    flex: none !important;
  }

  .chart-scroll-comparativa-fechas #graficoResumenRegistros,
  .chart-scroll-comparativa-fechas #graficoPorcentajes {
    width: 1200px !important;
    min-width: 1200px !important;
    max-width: none !important;
  }
}

/* chats interno */
.pdf-attachment {
  display: flex;
  align-items: center;
  gap: 12px;

  background: #ffffff;
  border: 1px solid #e5e7eb;

  border-radius: 14px;

  padding: 12px 14px;

  text-decoration: none !important;

  transition: all 0.2s ease;

  max-width: 340px;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.pdf-attachment:hover {
  transform: translateY(-1px);

  background: #fafafa;

  border-color: #d1d5db;

  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10);
}

.pdf-icon {
  width: 44px;
  height: 44px;

  border-radius: 12px;

  background: linear-gradient(135deg, #6D7F4F, #6D7F4F);

  display: flex;
  align-items: center;
  justify-content: center;

  color: white;
  font-size: 18px;

  flex-shrink: 0;

  box-shadow: 0 3px 8px rgba(94, 147, 37, 0.35);
}

.pdf-info {
  display: flex;
  flex-direction: column;
}

.pdf-title {
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
}

.pdf-subtitle {
  font-size: 11px;
  color: #6b7280;
  margin-top: 2px;
}

/* ------------------------------------------------------------------------css reportes-----------------------------------------------------------------*/

:root {
  --report-primary: #72864f;
  --report-primary-hover: #637644;
  --report-primary-soft: #f1f4ec;
  --report-border: #e4e7ec;
  --report-text: #20252b;
  --report-muted: #7a8088;
}

.report-page {
  width: 100%;
}

/* ENCABEZADO */
.report-page-header {
  margin-bottom: 16px;
}

.report-page-title {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
  color: var(--report-text);
}

.report-page-subtitle {
  margin: 0;
  font-size: 12px;
  color: var(--report-muted);
}

/* TARJETAS */
.report-card {
  background: #fff;
  border: 1px solid var(--report-border);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.035);
}

/* FILTROS */
.report-filter-card {
  padding: 18px 20px;
  margin-bottom: 18px;
}

.report-section-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 20px;
  color: #536a35;
}

.report-section-title i {
  font-size: 17px;
  color: #60656c;
}

.report-filter-grid {
  display: grid;
  gap: 14px;
  align-items: start;
}

/* Cuando aparece Cliente */
.report-filter-grid.with-client {
  grid-template-columns:
    minmax(160px, 1fr) minmax(180px, 1fr) minmax(155px, 1fr) minmax(155px, 1fr);
}

/* Cuando NO aparece Cliente */
.report-filter-grid.without-client {
  grid-template-columns:
    minmax(190px, 1fr) minmax(155px, 1fr) minmax(155px, 1fr);
}

.report-field {
  min-width: 0;
}

.report-label {
  font-size: 12px;
  color: #5e7833;
  font-weight: 600;
  margin-bottom: 0;
}


.report-control {
  width: 100%;
  height: 38px;
  padding: 0 11px;
  box-sizing: border-box;
  border: 1px solid #d9dde3;
  border-radius: 7px;
  background: #fff;
  color: #23272d;
  font-size: 13px;
  outline: none;
}

.report-control:focus {
  border-color: var(--report-primary);
  box-shadow: 0 0 0 3px rgba(114, 134, 79, .12);
}

select.report-control {
  cursor: pointer;
}

.report-error {
  display: none;
  margin-top: 5px;
  font-size: 11px;
  color: #dc2626;
}

/* BOTONES DE FILTRO */
.report-filter-actions {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.report-btn {
  min-width: 130px;
  height: 36px;
}

.report-btn-primary {
  background: var(--report-primary);
  border: 1px solid var(--report-primary);
  color: #fff;
}

.report-btn-primary:hover,
.report-btn-primary:focus {
  background: var(--report-primary-hover);
  border-color: var(--report-primary-hover);
  color: #fff;
  box-shadow: none;
}

.report-btn-secondary {
  background: #fff;
  border: 1px solid #d8dce2;
  color: #30353b;
}

.report-btn-secondary:hover,
.report-btn-secondary:focus {
  background: #f5f6f7;
  border-color: #ced3da;
  color: #30353b;
  box-shadow: none;
}

/* ESTADO INICIAL */
.report-empty-card {
  padding: 34px 24px;
  text-align: center;
}

.report-empty-icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 13px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 45px;
  color: #8898aa;

}

.report-empty-title {
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: 500;
  color: var(--report-text);
}

.report-empty-text {
  margin: 0;
  font-size: 12px;
  color: var(--report-muted);
}

/* RESUMEN */
.report-result-card {
  padding: 24px;
}

.report-result-layout {
  display: grid;
  grid-template-columns: minmax(190px, .9fr) minmax(0, 3fr);
  gap: 24px;
  align-items: center;
}

.report-ready {
  min-height: 130px;
  padding-right: 22px;
  border-right: 1px solid var(--report-border);
  display: flex;
  align-items: center;
  gap: 15px;
}

.report-ready-icon {
  flex: 0 0 78px;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: var(--report-primary-soft);
  color: var(--report-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 35px;
  position: relative;
}

.report-ready-check {
  position: absolute;
  right: 2px;
  bottom: 3px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--report-primary);
  border: 3px solid #fff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.report-ready-title {
  margin: 0 0 5px;
  font-size: 17px;
  font-weight: 700;
  color: var(--report-text);
}

.report-ready-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--report-muted);
}

.report-summary-area {
  min-width: 0;
}

.report-summary-grid {
  display: grid;
  grid-template-columns:
    minmax(120px, 1fr) minmax(145px, 1.2fr) minmax(130px, 1fr) minmax(130px, 1fr);
  gap: 15px;
  align-items: start;
}

.report-summary-item {
  text-align: center;
  min-width: 0;
}

.report-summary-icon {
  width: 38px;
  height: 38px;
  margin: 0 auto 8px;
  border-radius: 50%;
  background: var(--report-primary-soft);
  color: var(--report-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

.report-summary-label {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
  font-weight: 700;
  color: var(--report-text);
}

.report-summary-value {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: #343940;
  overflow-wrap: anywhere;
}

.report-summary-number {
  margin: 0;
  font-size: 23px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--report-primary);
}

/* DESCARGA */
.report-download-area {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.report-download-button {
  min-width: 220px;
  height: 42px;
  padding: 0 24px;
  border-radius: 8px;
  background: var(--report-primary);
  border: 1px solid var(--report-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-decoration: none;
  transition: background-color .2s ease, transform .2s ease;
}

.report-download-button:hover,
.report-download-button:focus {
  background: var(--report-primary-hover);
  border-color: var(--report-primary-hover);
  color: #fff;
  transform: translateY(-1px);
}

/* INFORMACIÓN */
.report-info {
  margin-top: 16px;
  padding: 12px 16px;
  border: 1px solid #fadd7a;
  border-radius: 9px;
  background: #fbe8a4;
  color: #000000;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}

.report-info i {
  color: #000000;
  font-size: 17px;
}

/* RESPONSIVE */
@media (max-width: 1200px) {
  .report-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .report-filter-actions {
    flex-direction: row;
    padding-top: 0;
  }

  .report-filter-actions .report-btn {
    min-width: 135px;
  }

  .report-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 22px;
  }
}

@media (max-width: 900px) {
  .report-result-layout {
    grid-template-columns: 1fr;
  }

  .report-ready {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--report-border);
    padding: 0 0 20px;
    justify-content: center;
  }
}

@media (max-width: 650px) {
  .report-page-title {
    font-size: 19px;
  }

  .report-filter-card,
  .report-result-card {
    padding: 17px 14px;
  }

  .report-filter-grid,
  .report-filter-grid.with-client,
  .report-filter-grid.without-client {
    grid-template-columns: minmax(0, 1fr);
  }

  .report-field {
    width: 100%;
    min-width: 0;
  }

  .report-control {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .report-filter-actions {
    flex-direction: column;
  }

  .report-filter-actions .report-btn {
    width: 100%;
  }

  .report-ready {
    flex-direction: column;
    text-align: center;
  }

  .report-ready-icon {
    flex-basis: 68px;
    width: 68px;
    height: 68px;
    font-size: 31px;
  }

  .report-summary-grid {
    grid-template-columns: 1fr;
  }

  .report-download-button {
    width: 100%;
    min-width: 0;
  }
}

/*------------------------------------------------------------------------------page inicio---------------------------------------------------------------------*/
/* Contenedor principal */
.content-principal {
  background-color: #f8f9fa;
  border-radius: 24px;
  min-height: 80vh;
  padding: 30px 20px 60px;
}

/* Encabezado */
.encabezado-bienvenida {
  border-bottom: 1px solid #edecf0;
  max-width: 900px;
}

.badge-usuario {
  background-color: #eaffdc;
  color: #407a15;
  padding: 6px 14px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 11px;
  border: 1px solid #b9d885;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
}

.titulo-bienvenida {
  letter-spacing: -0.5px;
}

.subtitulo-panel {
  font-size: 15px;
}

/* Grilla */
.grilla-botones {
  max-width: 1050px;
  width: 100%;
}

.contenedor-tarjeta {
  padding: 15px;
}

/* Tarjeta */
.tarjeta-menu {
  border-radius: 20px;
  background: #ffffff;
  padding: 40px 20px 20px;
  position: relative;
  box-shadow: 0 50px 70px rgba(0, 0, 0, 0.45);
}

/* Ícono flotante */
.icono-tarjeta {
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  background-color: #ffffff;
  border-radius: 50%;
  border: 3px solid #6d7f4f;
  color: #6d7f4f;
  font-size: 24px;
  z-index: 2;
}

/* Contenido tarjeta */
.contenido-tarjeta {
  margin-top: 20px;
}

.titulo-tarjeta {
  font-size: 18px;
}

.descripcion-tarjeta {
  line-height: 1.5;
  min-height: 42px;
}

.boton-ingresar {
  border-radius: 24px;
  font-weight: 600;
  font-size: 14px;
  padding: 10px;
}

/* Fecha */
.fecha-dashboard {
  font-size: 13px;
}

/* Carga Registros */
.btn-carga-reg {
  background-color: #95a38e;
  border-color: #65715e;
  color: #ffffff !important;
}

.btn-carga-reg:hover {
  background-color: #7a8874;
  border-color: #7a8874;
  color: #ffffff !important;
}

/* Chat Interno */
.btn-chat-int {
  background-color: #d1dbc8;
  border-color: #a2b394;
  color: #212529 !important;
}

.btn-chat-int:hover {
  background-color: #b8c4ae;
  border-color: #88a273;
  color: #212529 !important;
}

/* Chat Grupal */
.btn-chat-grp {
  background-color: #f5e1e1;
  border-color: #b69292;
  color: #212529 !important;
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.2);
}

.btn-chat-grp:hover {
  background-color: #e8cfcf;
  border-color: #c07e7e;
}

/* Gestión de pautas */
.btn-gestion-pautas {
  background-color: #80a4ca;
  border-color: #6591c0;
  color: #ffffff !important;
}

.btn-gestion-pautas:hover {
  background-color: #59789c;
  border-color: #6591c0;
  color: #ffffff !important;
}

/* ------------------------------------------------------------------------css chat grupal-----------------------------------------------------------------*/

/* Adjuntos PDF: evita que nombres largos salgan de la tarjeta */
.pdf-attachment {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  padding: 12px 14px;
  border-radius: 14px;
  background: #ffffff;
  text-decoration: none !important;
  color: inherit !important;
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease;
}

.pdf-attachment:hover {
  transform: translateY(-1px);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.10),
    0 2px 6px rgba(0, 0, 0, 0.06);
}

.pdf-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background-color: #6D7F4F;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(109, 127, 79, 0.22);
}

.pdf-icon i {
  font-size: 21px;
}

.pdf-info {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  line-height: 1.2;
}

.pdf-title {
  display: block;
  width: 100%;
  max-width: 100%;
  font-weight: 600;
  font-size: 14px;
  color: #212529;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.3;
}

.pdf-subtitle {
  margin-top: 4px;
  font-size: 12px;
  color: #8b8f97;
  white-space: normal;
}

/* ------------------------------------------------------------------------css chat privado-----------------------------------------------------------------*/

.pdf-attachment {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  padding: 12px 14px;
  border-radius: 14px;
  background: #ffffff;
  text-decoration: none !important;
  color: inherit !important;
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease;
}

.pdf-attachment:hover {
  transform: translateY(-1px);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.10),
    0 2px 6px rgba(0, 0, 0, 0.06);
}

.pdf-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background-color: #6D7F4F;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(109, 127, 79, 0.22);
}

.pdf-icon i {
  font-size: 21px;
}

.pdf-info {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  line-height: 1.2;
}

.pdf-title {
  display: block;
  width: 100%;
  max-width: 100%;
  font-weight: 600;
  font-size: 14px;
  color: #212529;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.3;
}

.pdf-subtitle {
  margin-top: 4px;
  font-size: 12px;
  color: #8b8f97;
  white-space: normal;
}

/* Burbuja de mensajes: se ajusta al contenido real */
#chat-box .chat-message-content {
  display: inline-flex !important;
  flex-direction: column !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 75% !important;
  flex: 0 1 auto !important;
}

#chat-box .chat-message-bubble {
  display: inline-block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 10px 14px !important;
  align-self: inherit;
}

/* Cuando existe PDF, permitimos una tarjeta más ancha */
#chat-box .chat-message-bubble.has-file {
  width: min(520px, 100%) !important;
}

#chat-box .chat-message-text {
  display: inline !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}


/* ------------------------------------------------------------------------css PDF DASHBOARD-----------------------------------------------------------------*/

#encabezadoPdfHtml {
  position: fixed;
  left: -10000px;
  top: 0;

  width: 1120px;

  background: #ffffff;

  font-family: Arial, sans-serif;
  color: #333;

  box-sizing: border-box;

  padding: 22px 28px 22px 28px;
}

#encabezadoPdfHtml .header-pdf-dashboard {
  position: relative;

  border-bottom: 3px solid #6d7f4f;

  padding-bottom: 18px;
}

#encabezadoPdfHtml .logo {
  width: 220px;
  height: auto;
  display: block;
}

#encabezadoPdfHtml .titulo {
  position: absolute;

  left: 0;
  right: 0;

  top: 24px;

  text-align: center;

  color: #111;

  font-size: 30px;

  font-weight: 700;
}

#encabezadoPdfHtml .datos-llamada {
  margin-top: 18px;

  margin-bottom: 10px;

  line-height: 1.65;

  font-size: 18px;
}

#encabezadoPdfHtml .datos-llamada strong {
  font-weight: 700;
}