/* ====== TOPO DA PÁGINA DE LIVROS ====== */
.livros-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e7c9a7;
}

.livros-header h1 { margin: 0; }
.livros-header .contador {
    color: #777;
    font-size: 14px;
}

/* Caixa de busca simples (filtro só no front por enquanto) */
.search-box input {
    padding: 8px 12px;
    border: 1px solid #c9a87d;
    border-radius: 6px;
    font-size: 14px;
    width: 240px;
    background: #fff;
}
.search-box input:focus {
    outline: none;
    border-color: #c66446;
}


/* ====== GRID DE LIVROS ======
   "auto-fill" + "minmax(160px, 1fr)" = a cada largura de tela cabem
   quantos livros couberem, sempre com no mínimo 160px de largura.
   É o jeito moderno de fazer grid responsivo sem framework. */
.livros-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 22px;
}


/* ====== CARD INDIVIDUAL ====== */
.livro-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;             /* faz a capa respeitar o border-radius */
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;        /* o card inteiro vira um <a> */
    color: inherit;
    display: flex;
    flex-direction: column;
}

.livro-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}


/* ====== CAPA DO LIVRO ======
   Moldura com proporção 2:3 (padrão de capa de livro).
   A URL da capa vem do backend (livro.capa_url, buscada por services/capas.py).
   Se o livro não tem capa, mostramos um placeholder com as iniciais do título
   e uma das 6 paletas (cor consistente pelo codigo_acervo). */
.capa {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;          /* mantém formato de capa real */
    background: #f0e5d6;          /* cor de "pergaminho" enquanto img carrega */
    overflow: hidden;
}

.capa img {
    width: 100%;
    height: 100%;
    object-fit: cover;            /* preenche sem deformar */
    display: block;
}

/* ====== PLACEHOLDER ESTILIZADO ======
   Aparece quando o livro não tem capa_url. Usa as iniciais do título
   e uma das 6 paletas determinadas pelo codigo_acervo. */
.capa .placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px;
    text-align: center;
    color: white;
    box-sizing: border-box;
    position: relative;
    /* "Lombada" sutil no canto esquerdo pra parecer livro */
    border-left: 4px solid rgba(0,0,0,0.18);
}

.capa .placeholder::after {
    /* Tracejado de "selo" no fundo */
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px dashed rgba(255,255,255,0.25);
    border-radius: 4px;
    pointer-events: none;
}

.capa .placeholder .iniciais {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 56px;
    font-weight: 700;
    letter-spacing: 3px;
    line-height: 1;
    text-shadow: 0 2px 6px rgba(0,0,0,0.25);
    margin-bottom: 16px;
}

.capa .placeholder .titulo-mini {
    font-size: 11px;
    line-height: 1.3;
    opacity: 0.92;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 0 8px;
}

/* ====== 6 PALETAS (cor consistente por codigo_acervo % 6) ======
   Tons quentes e neutros que combinam com a estética marrom/laranja do site. */
.capa .placeholder.paleta-0 { background: linear-gradient(135deg, #c66446 0%, #7d3823 100%); }
.capa .placeholder.paleta-1 { background: linear-gradient(135deg, #5b8ea0 0%, #2c4a5c 100%); }
.capa .placeholder.paleta-2 { background: linear-gradient(135deg, #a98253 0%, #574028 100%); }
.capa .placeholder.paleta-3 { background: linear-gradient(135deg, #8a4d6a 0%, #4e2438 100%); }
.capa .placeholder.paleta-4 { background: linear-gradient(135deg, #6b8859 0%, #38502c 100%); }
.capa .placeholder.paleta-5 { background: linear-gradient(135deg, #c39548 0%, #7a5a22 100%); }


/* ====== INFO DEBAIXO DA CAPA ====== */
.livro-info {
    padding: 12px 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.livro-info h3 {
    margin: 0 0 6px;
    font-size: 15px;
    color: #2d2d2d;
    /* Trunca em 2 linhas — evita card crescer só porque um título é gigante */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.livro-info .autor {
    color: #888;
    font-size: 13px;
    margin: 0 0 8px;
}

.livro-info .meta {
    margin-top: auto;             /* empurra pro fundo do card */
    font-size: 12px;
    color: #aaa;
}


/* ====== PÁGINA DE DETALHE (estilo "ficha do livro") ====== */
.detalhe-grid {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 30px;
    align-items: start;
    background: white;
    padding: 28px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin-bottom: 22px;
}

@media (max-width: 600px) {
    .detalhe-grid { grid-template-columns: 1fr; }
}

.detalhe-grid .capa {
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    aspect-ratio: 2 / 3;
}

.detalhe-info h1 {
    margin: 0 0 6px;
    color: #c66446;
    font-size: 28px;
}

.detalhe-info .subtitulo {
    color: #888;
    margin: 0 0 18px;
    font-size: 15px;
}

.detalhe-info .ficha {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}
.detalhe-info .ficha li {
    padding: 6px 0;
    border-bottom: 1px dashed #eee;
    font-size: 14px;
    color: #555;
}
.detalhe-info .ficha li strong {
    display: inline-block;
    width: 110px;
    color: #53392d;
}

.detalhe-acoes {
    margin-top: 14px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.btn-primary, .btn-outline {
    padding: 8px 14px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
}
.btn-primary { background: #c66446; color: white; }
.btn-primary:hover { background: #a44d34; }
.btn-outline {
    background: white;
    color: #c66446;
    border: 2px solid #c66446;
}
.btn-outline:hover { background: #fbe9df; }


/* ====== SEÇÕES DE AVALIAÇÕES E RESENHAS ====== */
.detalhe-secao {
    background: white;
    padding: 22px 28px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin-bottom: 18px;
}
.detalhe-secao h2 {
    margin: 0 0 12px;
    font-size: 18px;
    color: #53392d;
    border-bottom: 2px solid #f7e1ca;
    padding-bottom: 8px;
}

.item {
    background: #faf3ec;
    padding: 12px 14px;
    border-left: 3px solid #c66446;
    border-radius: 6px;
    margin-bottom: 8px;
}
.estrelas {
    color: #f5c842;
    font-weight: bold;
    letter-spacing: 1px;
}

.back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 20px;
    padding: 8px 16px;
    background: white;
    color: #c66446;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    border: 2px solid #c66446;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s, transform 0.15s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.back:hover {
    background: #c66446;
    color: white;
    text-decoration: none;
    transform: translateX(-2px);
}

/* ====== AVALIAÇÃO POR ESTRELAS ====== */
.avaliacao-widget {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.estrelas-input {
    display: flex;
    gap: 6px;
    cursor: pointer;
}

.estrela {
    font-size: 36px;        /* era 28px */
    color: #ddd;
    transition: color 0.15s, transform 0.1s;
    user-select: none;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}

.estrela.hover {
    color: #f5a623;
    transform: scale(1.18);
}

.estrela.ativa {
    color: #f5a623;
    filter: drop-shadow(0 1px 3px rgba(245,166,35,0.5));
}

.estrelas-media {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    color: #555;
    margin-bottom: 10px;
}

.estrelas-media .estrela-cheia { color: #f5a623; }
.estrelas-media .estrela-vazia { color: #ddd; }

.livro-info .autor {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    font-size: 13px;
    color: #666;
}