/* Estilos para la card de cada libro */


.btn-eliminar a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none; /* Esto asegura que no haya subrayado en el enlace */
    color: inherit; /* Hereda el color del texto del botón */
    font-family: Inter;
    font-size: 14px;
    font-weight: 700;
	
}	

.box-volver {
  	display: flex;
	width: 100%;
	box-sizing: border-box;
	background-color: #fff;
	padding: 16px;
	border-radius: 4px;
	margin-bottom: 16px;
}
.titulo-card {
	color: #000;
	text-align: center;
	font-family: Inter;
	font-size: 24px;
	font-style: normal;
	font-weight: 700;
	line-height: 32px; /* 133.333% */
	padding: 0px 10px;
	margin: 24px 0px 8px 0px;
}
.autor-card {
	color: #3E3E3E;
	text-align: center;
	font-family: Inter;
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	margin-bottom:24px;
}
.notas-card {
	margin: 16px 0px 0px 0px;
	width: 140px;
	color: #3E3E3E;
	font-family: Inter;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	margin-right: 8px;
}
.texto-notas-card {
	color: #666;
	font-family: Inter;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 24px;
	margin-top: 8px;
}
.flex-container-card {
	display: flex;
}
.flex-item {
	width:140px;
	color: #3E3E3E;
	font-family: Inter;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	margin-right: 24px;
}

/* Estilo para móviles */
@media (max-width: 399px) {
  .texto-flex-item {
    width: 140px;
    color: #666;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    margin-bottom: 8px;
  }
}
/* Estilo para el resto de dispositivos */
@media (min-width: 400px) {
  .texto-flex-item {
    width: 140px;
    color: #666;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    margin-top: 8px;
  }
}

.box-card {
	width: 100%;
	box-sizing: border-box;
	background-color: #fff;
	padding: 16px;
	border-radius: 4px;
	margin-bottom: 16px;
	margin: 0 auto;
}
.btn-eliminar {
	height: 40px;
	width: 100%;
	padding: 11px;
	background-color: #F1453D;
	color: #fff;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	text-align: center;
	font-weight:700;
}
.btn-eliminar:hover {
	background-color: #b41010;
}
	.campo-triple-por-gua-eli {
		display: flex;
        flex-direction: column;
        gap: 16px;
	}	
	.input-portada-form-modificar {
    display: inline-block;
    width: 100%;
    height: 40px;
    padding: 10px;
    padding-top: 8px; 
    border-radius: 4px;
    border: 1px solid #CCC;
    background: #FFF;
    color: #666;
    font-family: Inter;
    font-size: 14px;
}
@media (min-width: 400px) {
  /* Estilos para el contenedor del grid */
  .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); /* Ajusta el tamaño mínimo según sea necesario */
    gap: 16px; /* Espacio entre los elementos del grid */
    margin-top: 16px; /* Espacio superior para separar del contenido anterior */
  }
  /* Estilos para los elementos dentro del grid */
  .flex-container-card {
    display: flex;
    flex-direction: column;
    border-radius: 4px;
  }
}


/* Estilos para los botones de anterior/siguiente */

.box-navegacion {
    display: flex;
    justify-content: space-between;
  	margin: 0 auto;	
    margin-top: 16px;
}
.boton-navegacion {
	display: flex;
    padding: 16px;
    background-color: #fff;
  	border-radius: 4px;
}
.btn-navegacion-siguiente {
    background-color: white;
    padding: 10px 20px;
    padding-left: 36px;
    text-decoration: none;
    color: #666;
    border-radius: 4px;
    border: 1px solid #666;
    height: 40px;
  
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22 fill=%22%23666%22 class=%22bi bi-caret-left-fill%22 viewBox=%220 0 16 16%22%3E%3Cpath d=%22m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z%22/%3E%3C/svg%3E');
	background-repeat: no-repeat;
  	background-position: left 12px top 50%;
  	background-size: 16px 16px;
}
.btn-navegacion-anterior {
    background-color: white;
    padding: 10px 20px;
  	padding-right: 36px;
    text-decoration: none;
    color: #666;
    border-radius: 4px;
    border: 1px solid #666;
    height: 40px;
  
	background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22 fill=%22%23666%22 class=%22bi bi-caret-right-fill%22 viewBox=%220 0 16 16%22%3E%3Cpath d=%22m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z%22/%3E%3C/svg%3E');
	background-repeat: no-repeat;
  	background-position: right 12px top 50%;
  	background-size: 16px 16px;
}
.btn-navegacion-siguiente:hover, .btn-navegacion-anterior:hover { 
	background-color: #f2f9ff;
}
.btn-navegacion p {
    margin: 0;
}



@media all and (min-width: 928px) {
	.box-volver {
		margin: 0 auto;	
		width: 896px;
		box-sizing: border-box;
		background-color: #fff;
		padding: 16px;
		border-radius: 4px;
		margin-bottom: 16px;
	}
	.box-card {
		width: 896px;
	}
	.flex-container-card-outer {
		display:flex;
		gap:16px;
	}
	.portada-container {
		width:286px;
	}
	.info-container {
		width: 652px;
	}
	.titulo-card{
		text-align: left;
		margin: 8px 0px 8px 0px;
		padding: 0px;
	}
	.autor-card{
		text-align: left;
	}
	.campo-triple-por-gua-eli {
		display: flex;
        flex-direction: row;
        align-items: flex-end;
        gap: 16px;
	}
	.columna-guardar-eliminar {
		width: 408px;
        position: relative;
	}
  	.box-navegacion {
  		width: 896px;
  	}
}





@media all and (min-width: 1330px) {
	
	.box-card {
        width: 956px;
    }
	.box-volver {
		width: 308px;
		box-sizing: border-box;
		background-color: #fff;
		padding: 16px;
		border-radius: 4px;
		margin-bottom: 16px;
		margin-left: 0px;
	}
	.campo-triple-por-gua-eli {
		display: flex;
        gap: 16px;
		flex-direction: column;		
	}
		.columna-guardar-eliminar {
		width: 100%;
        position: relative;
	}
	    .info-container {
        width: 622px;
    }
    	.box-navegacion {
  		width: 956px;
  	}
}