/*Este archivo es la hoja de estilos de los bolsilibros*/

h2 {
    color: #A52A2A;
    font-family: sans-serif;
    font-size: 40px;
    text-align: center;
    text-decoration: none;
    }

    .caratula{
        width: 150px;
        height: 230px;
        box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.9);
    }
    
img {
    width: 400px;
    height: 400px;
    display: block;
    margin-left: auto;
    margin-right: auto;
  /* opcional: definir ancho */;
}

p{
    color: #800000;
    font-family:sans-serif;
    font-size: 18px; 
    text-align: justify;
    text-decoration: none;
    margin: 0 6px;
}

span{
  font-style: italic;
  text-decoration: underline;
  color: #007bff;
  font-weight: 800;
}

p1{
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 22px;
    color:#e40303;
    text-decoration: none;
    margin: 0 6px;
    text-align: center;
}

  .contenedor-lista {
  display: flex;
  flex-direction: column;
  gap: 15px; /* Espacio entre cada una de las 8 filas */
  max-width: 600px;
}

/* Cada fila individual */
.fila-elemento {
  display: flex;
  align-items: center; /* Alinea verticalmente al centro */
  justify-content: space-between; /* Pone la imagen a la izq y los botones a la der */
  background-color: #f9f9f9;
  padding: 10px;
  border-radius: 8px;
}

/* Contenedor de los botones */
.botones-derecha {
  display: flex;
  gap: 20px; /* Espacio entre los dos botones */
}

/* Estilos base de los botones */
.btn {
  padding: 8px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-primario {
  background-color: #007bff;
  color: white;
  margin-left: 20px;
}

.btn-secundario {
  background-color: #6c757d;
  color: white;
  margin: 10px 10px;
}

.boton{
  width: 105px;
  height: 40px;
  margin:  2px;
  text-align: center;
  font-family: cambria;
  font-size: 17px;
  color: #0621ea;
  border-radius: 6px;
  border-style: none;
  background-color: #f3cf9c;
  font-weight: 800;
  cursor: pointer;
  font-style: italic;
} 

.boton:hover{
  background-color: #6cf062;
}

.bolsi{
 filter: drop-shadow(8px 10px 10px rgba(25, 25, 31,1));
}