@import url('https://fonts.googleapis.com/css2?family=Baloo+2&family=Lato:wght@300&display=swap');



body{
    font-family: 'Baloo 2', cursive;
    background-color: #f7f9ff;
}

.main-content p,
.stats{
    color: #6d6d6d;
}

:root{
  --header-h: 57px;     /* alto de tu .main-header */
  --sidenav-w: 220px;   /* ancho del sidebar interno */
}

/* AdminLTE top-nav quita el sidebar principal */
.layout-top-nav .content-wrapper,
.layout-top-nav .main-footer {
  margin-left: 0 !important;
}

/* Layout lateral normal */
@media (min-width: 768px) {

  body.app-layout-side .content-wrapper,
  body.app-layout-side .main-footer {
    margin-left: 250px !important;
  }

  body.app-layout-side.sidebar-collapse .content-wrapper,
  body.app-layout-side.sidebar-collapse .main-footer {
    margin-left: 4.6rem !important;
  }

  body.app-layout-side .main-footer {
    padding-left: 1rem !important;
  }

  /* HOME */
  body.app-layout-side.home-page .content-wrapper {
  margin-left: 250px !important;
}

body.app-layout-side.home-page .main-footer {
  margin-left: 0 !important;

}

}

/* Móvil */
@media (max-width: 767.98px) {
  body.app-layout-side .content-wrapper,
  body.app-layout-side .main-footer,
  body.app-layout-side.sidebar-collapse .content-wrapper,
  body.app-layout-side.sidebar-collapse .main-footer {
    margin-left: 0 !important;
  }

}

/* Sidebar */
@media (max-width: 1500px) {
  body.app-layout-side .main-sidebar {
    left: 0 !important;
    margin-left: 0 !important;
    transform: translateX(0) !important;
  }

  body.app-layout-side .main-sidebar::before {
    left: 0 !important;
    margin-left: 0 !important;
    transform: translateX(0) !important;
  }

  body.app-layout-side.sidebar-collapse .main-sidebar,
  body.app-layout-side.sidebar-collapse .main-sidebar::before {
    width: 4.6rem !important;
    margin-left: 0 !important;
  }
}

.slide {
  left: 0px;
}

.tablescroll {
    display: block;
    height: calc(100vh - 460px);
    overflow-y:scroll;
  }

.tablescrollmin {
  display: block;
  height: 400px;
  overflow-y:scroll;
}

  table {
    table-layout: fixed;
  }

  th,
  td {
    width: auto;
    min-width: 200px;
    white-space: nowrap;
    overflow: hidden;
}
  th.checkbox, td.checkbox {
    width: 40px;
    /* margin-left:6px; */
  }

  .head {
    position: sticky;
    top: 0; 
    background-color: #f0eeee; 
    z-index: 2;
  }

  .fixed-col th, .fixed-col td {
    background-color: white; /* Cambia según tus necesidades */
  }


  .mtop-400 {
    margin-top: 400px;
  }

  .mtop-300 {
    margin-top: 300px;
  }

  .mtop-200 {
    margin-top: 200px;
  }

  .center {
    padding: 10px;
  }

  .minh-200 {
    min-height: 200px;
  }

  a:hover {
    color: #938f8f;
  }

  .pointer {
    cursor: pointer;
  }

  .header {
    position: sticky;
    top:0;
  }

  @keyframes flash {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

.flash {
    animation: flash 1.5s ease-in-out;
}

  /* Establece un máximo de ancho para el select múltiple */
  .mult-select-tag {
    max-width: 200px; /* Ajusta este valor según tus preferencias */
    background-color: transparent !important;
    font-family: 'Baloo 2', cursive;
  }

  .mult-select-tag .body {

    background: #f7f9ff;
}

.mult-select-tag .drawer {
  background: #f7f9ff;
}

.mult-select-tag .rounded {
    z-index: 3002;
}


.input-group-text {
  display: inline;
}

.custom-ul-right {
  text-align: right; /* Alinea el texto a la derecha dentro del contenedor */
  direction: rtl; /* Cambia la dirección del texto de derecha a izquierda */
}


#report-container {
    width: 100%;
    height: 67vh; /* Ocupa toda la altura de la pantalla */
    display: flex;
    justify-content: center; /* Centra horizontalmente si es necesario */
    align-items: center;   /* Centra verticalmente si es necesario */
    overflow: hidden; /* Evita el scroll */
}

.fullscreen-button {
  margin-left: auto; /* Empuja el botón hacia la derecha */
  margin-bottom: 8px;
  padding: 10px 20px;
  background: #be0f2e;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
}

.fullscreen-button:active {
  background: #be0f2e;
}

.fullscreen-button2 {
  margin-left: auto; /* Empuja el botón hacia la derecha */
  margin-bottom: 8px;
  padding: 10px 20px;
  background: #a3e2ff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
}

.fullscreen-button2:active {
  background: #a3e2ff;
}

   :root { --brand-h: 56px; }

  /* Mantén altura fija del área de marca */
  .brand-wrapper,
  .brand-link {
    height: var(--brand-h) !important;
    min-height: var(--brand-h) !important;
  }

  .brand-link {
    display: flex;
    align-items: center;
    padding-right: 2.25rem; /* espacio para el botón a la derecha */
    white-space: nowrap;
    overflow: hidden;
  }

  .brand-image { max-height: calc(var(--brand-h) - 12px); }

  /* Botón por defecto (menú expandido): pegado a la derecha */
  .brand-toggle {
    position: absolute;
    top: 50%;
    right: .5rem;
    transform: translateY(-50%);
    z-index: 1051;
  }

 /* ============================
   SIDEBAR COLAPSADO FIJO (SIN HOVER)
   ============================ */

/* Estado colapsado: botón centrado */
body.sidebar-mini.sidebar-collapse .main-sidebar .brand-toggle {
  right: auto !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* Ocultar logo en colapsado */
body.sidebar-mini.sidebar-collapse .main-sidebar .brand-link .brand-image {
  display: none !important;
}

/* Centrar contenido */
body.sidebar-mini.sidebar-collapse .main-sidebar .brand-link {
  padding-right: 0 !important;
  justify-content: center !important;
}

/* 🔒 BLOQUEAR completamente el hover de AdminLTE */
body.sidebar-mini.sidebar-collapse .main-sidebar:hover {
  width: 4.6rem !important;
}

body.sidebar-mini.sidebar-collapse .main-sidebar:hover .brand-toggle {
  right: auto !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

body.sidebar-mini.sidebar-collapse .main-sidebar:hover .brand-link .brand-image {
  display: none !important;
}

body.sidebar-mini.sidebar-collapse .main-sidebar:hover .brand-link {
  padding-right: 0 !important;
  justify-content: center !important;
}

/* Ocultar textos siempre en colapsado */
body.sidebar-mini.sidebar-collapse .main-sidebar .brand-text,
body.sidebar-mini.sidebar-collapse .main-sidebar .nav-sidebar .nav-link p,
body.sidebar-mini.sidebar-collapse .main-sidebar .nav-header {
  display: none !important;
  visibility: hidden !important;
}

/* Ocultar siempre submenús en colapsado */
body.sidebar-mini.sidebar-collapse .main-sidebar .nav-treeview,
body.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-treeview {
  display: none !important;
  visibility: hidden !important;
}

/* Mantener resaltado del item activo/padre activo */
body.sidebar-mini.sidebar-collapse .main-sidebar .menu-open > .nav-link,
body.sidebar-mini.sidebar-collapse .main-sidebar .nav-link.active {
  background-color: rgba(255,255,255,0.12) !important;
}

/* Evitar expansión visual por focus cuando el menú está colapsado */
body.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused {
  width: 4.6rem !important;
}

body.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .brand-link {
  padding-right: 0 !important;
  justify-content: center !important;
}

body.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .brand-image,
body.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .brand-text,
body.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .nav-sidebar .nav-link p,
body.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .nav-header,
body.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .nav-treeview {
  display: none !important;
  visibility: hidden !important;
}

body.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .brand-toggle {
  right: auto !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* ============================
   ESTILO MENÚ (lo que ya tenías)
   ============================ */

/* Quitar fondo del item activo */
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active,
.nav-sidebar .nav-treeview .nav-link.active {
  background-color: #0000001c !important;
  box-shadow: none !important;
}

/* Hover limpio */
.sidebar-dark-primary .nav-sidebar .nav-link:hover,
.sidebar-light-primary .nav-sidebar .nav-link:hover {
  background-color: transparent !important;
}

/* Color activo */
.sidebar-dark-primary .nav-sidebar .nav-link.active,
.sidebar-dark-primary .nav-sidebar .menu-open > .nav-link {
  color: #fff;
}

/* ===== JERARQUÍA VISUAL ===== */

/* Nivel 1 */
.nav-sidebar > .nav-item > .nav-link {
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  padding: 12px 16px !important;
  border-left: 3px solid transparent !important;
  transition: all 0.3s ease !important;
}

/* Nivel 1 activo */
.nav-sidebar > .nav-item > .nav-link.active {
  border-left-color: var(--color-primary, #007bff) !important;
  background-color: rgba(255,255,255,0.1) !important;
  font-weight: 700 !important;
}

/* Nivel 2 */
.nav-treeview > .nav-item > .nav-link {
  font-weight: 400 !important;
  font-size: 0.85rem !important;
  padding: 8px 16px 8px 45px !important;
  color: rgba(255,255,255,0.8) !important;
  border-left: 2px solid transparent !important;
  position: relative !important;
}

/* Indicador */
.nav-treeview > .nav-item > .nav-link:before {
  content: "▸" !important;
  position: absolute !important;
  left: 32px !important;
  color: rgba(255,255,255,0.5) !important;
  font-size: 0.7rem !important;
}

/* Nivel 2 activo */
.nav-treeview > .nav-item > .nav-link.active {
  background-color: rgba(255,255,255,0.15) !important;
  border-left-color: var(--color-secondary, #6c757d) !important;
  color: #fff !important;
  font-weight: 500 !important;
}

/* Indicador activo */
.nav-treeview > .nav-item > .nav-link.active:before {
  content: "▾" !important;
  color: var(--color-secondary, #6c757d) !important;
}

/* Nivel 3 */
.nav-treeview .nav-treeview > .nav-item > .nav-link {
  padding-left: 65px !important;
  font-size: 0.8rem !important;
  color: rgba(255,255,255,0.7) !important;
}

/* Indicador nivel 3 */
.nav-treeview .nav-treeview > .nav-item > .nav-link:before {
  content: "•" !important;
  left: 52px !important;
  font-size: 0.8rem !important;
}

/* Hover */
.nav-sidebar .nav-link:hover {
  background-color: rgba(255,255,255,0.08) !important;
  transform: translateX(2px) !important;
}

/* Iconos nivel 1 */
.nav-sidebar > .nav-item > .nav-link .nav-icon {
  font-size: 1.1rem !important;
  margin-right: 10px !important;
  width: 20px !important;
  text-align: center !important;
}

/* Iconos submenú */
.nav-treeview .nav-icon {
  font-size: 0.9rem !important;
  margin-right: 8px !important;
  width: 16px !important;
}

/* Animación */
.nav-treeview {
  transition: all 0.3s ease !important;
}

/* Separadores */
.nav-sidebar > .nav-item:not(:last-child) {
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  margin-bottom: 2px !important;
  padding-bottom: 2px !important;
}

/* Sangrías fallback */
.nav.nav-treeview > .nav-item > .nav-link { padding-left: 2rem !important; }
.nav.nav-treeview .nav.nav-treeview > .nav-item > .nav-link { padding-left: 2.5rem !important; }
.nav.nav-treeview .nav.nav-treeview .nav.nav-treeview > .nav-item > .nav-link { padding-left: 3rem !important; }

.lastmile-table-container #table th,
.lastmile-table-container #table td {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  vertical-align: top;
  word-break: break-word;
  overflow-wrap: anywhere;
}