.dash .tabs-container {
    display: flex;
    border-bottom: 2px solid #007bff;
    margin-bottom: 10px;
}
.dash .tab {
    flex: 1;
    text-align: center;
    padding: 12px 15px;
    cursor: pointer;
    background: #f1f1f1;
    border-radius: 5px 5px 0 0;
    border: 1px solid #ccc;
    border-bottom: none;
    transition: background 0.3s;
}
.dash .tab:hover {
    background: #e0e0e0;
}
.dash .tab.active {
    background: #007bff;
    color: white;
    font-weight: bold;
    border-bottom: 2px solid white;
}
.dash .tab-content {
    display: none;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 0 0 5px 5px;
    background: #fff;

    overflow-x: auto;  /* ✅ Habilita scroll horizontal */
    -webkit-overflow-scrolling: touch;  /* ✅ Suaviza el scroll en iOS */
}
.dash .tab-content.active {
    display: block;
}
.dash select{
    width: 200px; /* Establece el ancho del select */
    padding: 5px; /* Añade espacio interno */
    border: 2px solid #007bff; /* Color y grosor del borde */
    border-radius: 5px; /* Bordes redondeados */
    background-color: #f9f9f9; /* Color de fondo */
    font-size: 16px; /* Tamaño de la fuente */
    color: #333; /* Color del texto */
    cursor: pointer; /* Cambia el cursor cuando pasas el mouse */
}

.dash select:hover {
    border-color: #0056b3; /* Cambia el color del borde al pasar el mouse */
    background-color: #e6f7ff; /* Cambia el fondo para dar un efecto */
}

.dash select:focus {
    outline: none; /* Elimina el contorno azul predeterminado */
    border-color: #003d99; /* Color del borde en el foco */
    box-shadow: 0 0 5px rgba(0, 61, 153, 0.5); /* Sombra cuando se enfoca */
}


.dash table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.dash th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
.dash th { background: #007bff; color: white; }
.dash .container {
display: flex;
align-items: center;
justify-content: space-around;
gap: 5px; /* Espacio entre las tarjetas */
margin: 5px 0;
}
.dash .card {
display: flex;
flex-direction: row;
align-items: center;
border: 1px solid #ddd;
border-radius: 8px;
width: 32%; /* Ajustar al 30% para evitar overflow */
max-height: 80px; /* Incrementar la altura máxima para evitar que el contenido se corte */
padding: 5px; /* Más espacio interno */
box-sizing: border-box; /* Asegurar que padding no cause overflow */
}
.dash .card .icon {
font-size: 20px;
margin-right: 5px; /* Reducir margen para optimización */
flex-shrink: 0; /* Evitar que el ícono se reduzca */
}
.dash .card .text {
display: grid;
grid-template-rows: auto auto; /* Dos filas para el texto */
text-align: left;
row-gap: 3px; /* Espacio más ajustado entre filas */
overflow: hidden; /* Evitar que texto adicional salga del contenedor */
}
.dash .card .text h2 {
margin: 0;
font-size: 18px; /* Reducir tamaño para mejor ajuste */
line-height: 1.2; /* Mejor legibilidad en espacios pequeños */
}
.dash .card .text p {
margin: 0;
font-size: 14px; /* Reducir tamaño para evitar desbordamiento */
line-height: 1.2;
}