/* Fuente y configuraciones para toda la página de index */
@import url('https://fonts.googleapis.com/css?family=Muli:300,700|Nunito');
html,
body{
		background-color:  white;
		font-family: 'Nunito', sans-serif;
}

/* Configuración para el div "ruta" que contiene el path de donde se encuentra el usuario ej: gestion > productos > seleccion
y el input con el boton buscar que es una lupa */
.ruta {
    background-color: #F2F2F2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}

.path-ruta{
    display: inline-block;
}

.ruta input[type="text"] {
    margin-right: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
}



.ruta button {
    padding: 5px 10px;
    background-color: #A9F5BC;
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

.ruta button img {
    width: 20px;
    height: 20px;
    margin-right: 5px;
}
/* Titulo: lleva el titulo descriptivo de la sección donde nos encontramos, por ejemplo "Productos", los botones "Nuevo" y "Listar" 
y el mensaje: "Seleccione el dato con la que desea comenzar a trabajar haciendo click sobre alguno de ellos." */
.titulo{
    margin-left: 20%;
}

.titulo .texto {
    font-size: 32px; /* Cambia el tamaño de la letra según tus necesidades */
}

.titulo .subtitulo {
    font-size: 14px; /* Cambia el tamaño de la letra según tus necesidades */
}

.titulo button {
    padding: 5px 10px;
    background-color: #A9F5BC;
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

/* es la tabla (falta hacerla responsive) donde se muestran los datos para seleccionar */

.tabla-centrada {
    margin: 0 auto; /* Centrar la tabla horizontalmente */
    width: 80%; /* Establecer el ancho al 80% de la pantalla */
    border-collapse: collapse; /* Colapsar los bordes de la tabla */
}

.tabla-centrada th,
.tabla-centrada td {
    padding: 8px; /* Añadir espacio interno a las celdas */
    border: 1px solid #ddd; /* Agregar bordes a las celdas */
    text-align: center; /* Centrar el texto en las celdas */
}

.celda-izquierda{
      text-align: left !important; /*  el texto en las celdas a la izquierda */
}


/* Div con el mensaje : ¿Querés crear un nuevo item? Click Aquí */
.texto-al-pie{
    font-size: 24px;
    text-align: center;
    border: 1px solid #ccc; /* Define el borde de 2 píxeles de ancho y color gris claro */
    margin: 35px 25vw;
}

/* Estilos para la paginación de datos de cada index */
.paginacion {
    color: black;
    display: flex;
    justify-content: center;
  }

  .paginacion li {
    list-style: none;
    margin-right: 10px; /* Ajusta el margen entre los elementos según tu diseño */
  }

  .paginacion a {
    padding: 2px;
    color: black;
    text-decoration: none; /* Quita el subrayado predeterminado de los enlaces */
  }
  
  .numero {
    display: inline-block;
    padding: 5px 10px; /* Ajusta el espaciado interno según tus preferencias */
    border-radius: 5px; /* Redondea los bordes del recuadro */
    background-color: #f0f0f0; /* Color de fondo gris claro */
    margin: 0 3px; /* Margen izquierdo y derecho de 5px */
  }

  .page-active{
    background-color: darkslategrey;
    color: white;
  }
  .page-active a{
    padding: 2px;
    background-color: darkslategrey;
    color: white;
  }

/* Colores para configurar clases y estilos rapidamente */

.gris {
	color: gray!important;
}

.gris a{
	color: gray;
}

.blanco a{
	color: white;
	text-decoration: none;
}

.negro a{
	color: black!important;
}

.fondogris {

	background-color: rgb(194, 192, 192);
}

/* renglon de 45px de altura */ 
.renglon45 {
	height:45px;
	white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;

}
/* renglon de 150px de altura */ 
.renglon150 {
	height:150px;
	padding:75px;

}