/* Reset y Base */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: #f4f7f6;
    color: #333;
    line-height: 1.6;
}

/* Contenedor Principal */
#cont1 {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    background: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
}

/* Cabecera y Títulos */
h1 {
    padding: 20px;
    font-size: 1.5rem;
    color: #2c3e50;
    text-align: center;
    border-bottom: 2px solid #eee;
}

#binicio {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: #2c3e50;
}
#binicio img {
    width: 40px !important; /* Tamaño fijo iconos menu */
    height: auto;
    filter: brightness(0) invert(1); /* Hace los iconos blancos si son oscuros */
}

/* Buscador */
#buscar {
    padding: 20px;
    background: #ecf0f1;
    display: flex;
    justify-content: center;
}
#buscar form {
    width: 100%;
    max-width: 500px;
    display: flex;
    gap: 10px;
}
input[type='text'] {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}
.form {
    padding: 10px 20px;
    background: #d9534f;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* Listado de Libros */
#cont2 {
    flex-grow: 1;
    padding: 15px;
}

#libro {
    background: #fff !important;
    border: 1px solid #eee !important;
    border-radius: 8px;
    margin-bottom: 15px;
    padding: 15px !important;
    transition: transform 0.2s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
#libro:hover { background: #f9f9f9 !important; }

#libro a {
    color: #2980b9;
    text-decoration: none;
    font-weight: bold;
    display: block;
    margin: 5px 0;
}

/* Vista Detalle */
.detalle-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
}
.foto-libro {
    flex: 1 1 300px;
    text-align: center;
}
.foto-libro img {
    max-width: 100%;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.info-libro {
    flex: 2 1 300px;
}

/* Pie de página y Banner */
#banner {
    margin-top: auto;
    padding: 20px 0;
    border-top: 1px solid #eee;
}
#banner img {
    max-width: 90%;
    height: auto;
}
#pie {
    background: #222;
    color: #fff;
    padding: 15px;
    font-size: 0.8rem;
}
#pie a { color: #009ee0; text-decoration: none; }

/* Media Queries para PC */
@media (min-width: 768px) {
    h1 { font-size: 2.2rem; }
    #cont2 {
        display: grid;
        grid-template-columns: 1fr; /* Puedes cambiar a 1fr 1fr para dos columnas */
        gap: 20px;
    }
}