.ss-main .ss-values .ss-value,
.ss-main .ss-values .ss-max {
  background-color: #ad48ec !important;
}



#nav-sidebar .h-\[65px\] {
  height: 165px;
}

#nav-sidebar .h-9 {
  height: 9rem;
}

#nav-sidebar .h-5 {
  height: 5rem;
}

#nav-sidebar .h-4 {
  height: 4rem;
  margin-bottom: 1rem;
}

#nav-sidebar .flex a:first-child {
  margin-left: auto;
  margin-right: auto;
}


/* Flexbox - Grid*/
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}


.grid-flow-col {
  grid-auto-flow: column;
}

.grid-rows-4 {
  grid-template-rows: repeat(4, minmax(0, 1fr));
}

.grid-rows-5 {
  grid-template-rows: repeat(5, minmax(0, 1fr));
}

.grid-rows-6 {
  grid-template-rows: repeat(6, minmax(0, 1fr));
}

/* -------- */

.card {
  background-color: #f9f9f9;
  border-radius: 10px;
  padding: 1rem 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.label {
  font-weight: 500;
}

.value {
  /* float: right; */
  font-weight: bold;
}

/* dark:text-font-important-light */
.dark\:text-font-important-light {
  color: #dbeafe !important;
}

.bg-blue-100 {
    background-color: #dbeafe !important
}
.dark .bg-blue-900 {
    background-color: #1e3a8a !important;
    
}


/* Colores específicos para valores */
/* Colores específicos para valores */
.bg-orange {
  /* background-color: #f973167c !important; */
  background-color: rgba(141, 68, 175, 0.3) !important;
  margin-bottom: 2rem;
}

/* amarillo */
.bg-yellow {
  background-color: #eab3087c !important;
  margin-bottom: 2rem;
}

/* azul */
.bg-blue {
  /* background-color: #3b82f67c !important; */
  background-color: rgba(1, 126, 217, 0.3) !important;
  margin-bottom: 2rem;
}

/* azul al 80% */
.bg-blue-80 {
  background-color: #3b82f6cc !important;
  margin-bottom: 2rem;
}

/* azul al 60% */
.bg-blue-60 {
  background-color: #3b82f699 !important;
  margin-bottom: 2rem;
}

/* azul al 40% */
.bg-blue-40 {
  background-color: #3b82f666 !important;
  margin-bottom: 2rem;
}

/* verde */
.bg-green {
  /* background-color: #22c55e7c !important; */
  background-color: rgba(248, 178, 36, 0.3) !important;
  margin-bottom: 2rem;
}

/* rojo */
.bg-red {
  background-color: #ef44447c !important;
  margin-bottom: 2rem;
}

/* rojo */
.bg-pink {
  background-color: #ec48997c !important;
  margin-bottom: 2rem;
}



.orange {
  color: #f97316;
}

/* naranja */
.yellow {
  color: #eab308;
}

/* amarillo */
.blue {
  color: #3b82f6;
}

/* azul */
.green {
  color: #22c55e;
}

/* verde */
.red {
  color: #ef4444;
}

/* rojo */
.pink {
  color: #ec4899;
}

/* rosa */

/* Modo oscuro */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #1a1a1a;
    color: #f3f3f3;
  }

  .card {
    background-color: #2a2a2a;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  }
}

tbody a{
  text-decoration: underline;
  font-weight: 600;
}

.h-6 {
  height: 1.5rem;
}

.w-6 {
  width: 1.5rem;
}

.mb-24 {
  margin-bottom: 12rem;
}


/* Estilos responsivos personalizados basados en las clases de Tailwind */
.card-responsive {
  width: 100%;
}

@media (min-width: 768px) {
  .card-responsive {
    width: 50%;
  }
}

@media (min-width: 1024px) {
  .card-responsive {
    width: 33.333333%;
  }
}

@media (min-width: 1536px) {
  .card-responsive {
    width: 20%;
  }
}

.title-card{
  font-size: 1.1rem !important;
  font-weight: 600;
  margin-bottom: 1.5rem !important;
}

.w-\[50px\]{
  width: 50px;
}

.footer-text, .footer-image{
  text-align: center;
}

.footer-image{
  display: flex;
  justify-content: center;
  text-align: center;
}

.justify-between {
  justify-content: space-between;
}

/* @media (min-width: 1024px) {
  .footer-text {
    text-align: right;
  }
  .footer-image {
    justify-content: flex-start;
  }
  .lg\:justify-between {
    justify-content: space-between;
  }

} */

.text-font-important-dark{
  font-weight: bold;
}

.tabla-contendor{
  /*width: 100vw;     /* Toma el ancho total de la ventana */
  /*height: 100vh;    /* Toma el alto total de la ventana */
  overflow: auto;   /* Agrega scroll horizontal y vertical cuando sea necesario */
  border: 1px solid #ccc;
}

.container-kpi{
  display: grid;
  gap: 10px;
  margin-bottom: 1rem;
  grid-template-columns: 1fr; /* Móviles por defecto */
  grid-auto-flow: row; /* Orden por filas inicialmente */
}


/* Tablet vertical: 2 columnas */
@media (min-width: 480px) {
  .container-kpi {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(9, auto);
    grid-auto-flow: column;
  }
}

/* Tablet horizontal: 3 columnas, ítems más compactos */
@media (min-width: 768px) {
  .container-kpi {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(6, auto);
    grid-auto-flow: column;
  }

}

/* Escritorio: 3 columnas, ítems más espaciosos */
@media (min-width: 992px) {
  .container-kpi {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
  }
}

/* Escritorio: 3 columnas, ítems más espaciosos */
@media (min-width: 1200px) {
  .container-kpi {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
  }
}

.subrayado-discontinuo {
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-underline-offset: 4px;  /* separa el subrayado */
  text-decoration-thickness: 1px; /* opcional: ajusta el grosor */
  cursor: help;
  position: relative;
}

/* Tooltip personalizado */
.subrayado-discontinuo:hover::after {
  content: attr(data-tooltip); /* toma el contenido del atributo personalizado */
  position: absolute;
  bottom: 125%;
  left: 0;
  background-color: #333;
  color: #fff;
  padding: 6px 8px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 14px;
  z-index: 10;
  opacity: 1;
}

.subrayado-discontinuo::after {
  content: "";
  opacity: 0;
  transition: opacity 0.3s;
}