/* ==========================================================================
   Biblioteca IPB Campos do Jordão — tema "estante da igreja"
   Verde-pinheiro, papel envelhecido e dourado de corte de página.
   ========================================================================== */

:root {
    --verde-pinheiro: #20483A;
    --verde-escuro: #183429;
    --dourado: #A67C1C;
    --papel: #F6F2E8;
    --superficie: #FFFDF8;
    --tinta: #2B2620;
    --tinta-suave: #6B6357;
    --linha: #E2DACA;
    --vermelho: #9C3425;
    --fonte-serif: 'Fraunces', Georgia, serif;
    --fonte-corpo: 'Source Sans 3', 'Segoe UI', sans-serif;
}

html, body {
    font-family: var(--fonte-corpo);
    background-color: var(--papel);
    color: var(--tinta);
    margin: 0;
}

.titulo-marca {
    font-family: var(--fonte-serif) !important;
    letter-spacing: .01em;
}

.eyebrow {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--dourado);
    outline-offset: 2px;
}

/* O roteador foca o h1 ao navegar (acessibilidade); sem contorno visual nele. */
h1:focus, h1:focus-visible {
    outline: none;
}

/* Link ativo legível no drawer verde-escuro */
.mud-drawer .mud-nav-link:hover {
    background: rgba(255, 255, 255, .05);
}

.mud-drawer .mud-nav-link.active {
    background: rgba(255, 255, 255, .09);
    color: #F6F2E8 !important;
    border-right: 3px solid var(--dourado);
}

.mud-drawer .mud-nav-link.active .mud-nav-link-icon {
    color: #D9B85C !important;
}

#blazor-error-ui {
    background: var(--superficie);
    border-top: 3px solid var(--vermelho);
    bottom: 0;
    box-shadow: 0 -2px 12px rgba(43, 38, 32, .2);
    display: none;
    left: 0;
    padding: .8rem 1.2rem;
    position: fixed;
    width: 100%;
    z-index: 3000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: .75rem;
    top: .5rem;
}

/* ==========================================================================
   Catálogo público
   ========================================================================== */

.catalogo-hero {
    background:
        linear-gradient(160deg, rgba(24, 52, 41, .0) 0%, rgba(16, 36, 28, .35) 100%),
        var(--verde-pinheiro);
    color: #F0EADA;
    padding: 3rem 1.5rem 4.5rem;
    position: relative;
}

.catalogo-hero-conteudo {
    margin: 0 auto;
    max-width: 1100px;
}

.catalogo-hero .eyebrow {
    color: #C9BE9F;
    margin: 0 0 .75rem;
}

.catalogo-hero h1 {
    font-family: var(--fonte-serif);
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    font-weight: 600;
    line-height: 1.1;
    margin: 0;
}

.catalogo-lema {
    color: #D8D0BC;
    font-size: 1.05rem;
    margin: .75rem 0 0;
    max-width: 34rem;
}

.catalogo-login {
    color: #E9E2D2;
    border: 1px solid rgba(233, 226, 210, .4);
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
    padding: .45rem 1.1rem;
    position: absolute;
    right: 1.5rem;
    text-decoration: none;
    top: 1.5rem;
    transition: background-color .15s ease, border-color .15s ease;
}

.catalogo-login:hover {
    background: rgba(233, 226, 210, .12);
    border-color: rgba(233, 226, 210, .7);
}

.catalogo-corpo {
    margin: 0 auto;
    max-width: 1100px;
    padding: 0 1.5rem 4rem;
}

/* A busca "sobe" para dentro da faixa verde — ela é a porta de entrada do acervo. */
.catalogo-busca {
    margin-top: -1.9rem;
    position: relative;
    z-index: 2;
}

.busca-campo .mud-input-outlined {
    background: var(--superficie);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(24, 52, 41, .18);
}

.catalogo-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1.25rem 0 1.75rem;
}

/* Etiquetas de categoria tingidas com a própria cor (com fallback para
   navegadores sem color-mix: fundo claro e texto padrão). */
.chip-categoria {
    background: var(--superficie);
    background: color-mix(in srgb, var(--cor-chip, var(--tinta-suave)) 9%, var(--superficie));
    border: 1px solid var(--linha);
    border-color: color-mix(in srgb, var(--cor-chip, var(--tinta-suave)) 30%, transparent);
    border-left: 4px solid var(--cor-chip, var(--tinta-suave));
    border-radius: 4px 8px 8px 4px;
    color: var(--tinta);
    color: color-mix(in srgb, var(--cor-chip, var(--tinta-suave)) 68%, var(--tinta));
    cursor: pointer;
    font-family: var(--fonte-corpo);
    font-size: .84rem;
    font-weight: 700;
    padding: .34rem .8rem;
    transition: background-color .15s ease, color .15s ease;
}

.chip-categoria:hover {
    background: color-mix(in srgb, var(--cor-chip, var(--tinta-suave)) 18%, var(--superficie));
}

.chip-categoria.ativa {
    background: var(--cor-chip, var(--verde-pinheiro));
    border-color: var(--cor-chip, var(--verde-pinheiro));
    color: #FFFDF8;
}

.contagem-acervo {
    color: var(--tinta-suave);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .1em;
    margin: 0 0 1.1rem;
    text-transform: uppercase;
}

.livro-grade {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}

/* O card É um livro deitado de capa para cima: lombada larga na cor da
   categoria, vinco de charneira e fita marcadora (como as de hinário)
   indicando a disponibilidade. */
.livro-card {
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-left: none;
    border-radius: 4px 10px 10px 4px;
    box-shadow: 0 1px 3px rgba(43, 38, 32, .08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 1.05rem 1.15rem .95rem 1.9rem;
    position: relative;
    transition: transform .15s ease, box-shadow .15s ease;
}

.livro-card::before {
    background: var(--lombada, var(--tinta-suave));
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--lombada, var(--tinta-suave)) 86%, #FFFDF8) 0%,
        var(--lombada, var(--tinta-suave)) 26%,
        color-mix(in srgb, var(--lombada, var(--tinta-suave)) 82%, #000) 100%);
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    top: 0;
    width: 15px;
}

/* vinco entre a lombada e a capa */
.livro-card::after {
    background: linear-gradient(90deg, rgba(43, 38, 32, .16), rgba(43, 38, 32, 0));
    bottom: 0;
    content: "";
    left: 15px;
    position: absolute;
    top: 0;
    width: 7px;
}

.livro-card:hover {
    box-shadow: 0 10px 24px rgba(43, 38, 32, .14);
    transform: translateY(-2px);
}

/* fita marcadora pendurada no topo */
.livro-fita {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 7px), 0 100%);
    height: 46px;
    position: absolute;
    right: 18px;
    top: 0;
    width: 17px;
}

.livro-fita.disponivel {
    background: linear-gradient(180deg, #4A7D57, #3E6E4A);
}

.livro-fita.emprestado {
    background: linear-gradient(180deg, #BCB29B, #A89D86);
}

.livro-categoria {
    color: var(--lombada, var(--tinta-suave));
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .13em;
    margin: 0 2.6rem .45rem 0;
    text-transform: uppercase;
}

.livro-titulo {
    font-family: var(--fonte-serif);
    font-size: 1.18rem;
    font-weight: 600;
    line-height: 1.22;
    margin: 0 2.4rem .3rem 0;
}

.livro-autor {
    color: var(--tinta-suave);
    font-size: .92rem;
    margin: 0 0 .9rem;
}

.livro-rodape {
    align-items: baseline;
    border-top: 1px solid var(--linha);
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .7rem;
    margin-top: auto;
    padding-top: .7rem;
}

.livro-status {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.livro-status.disponivel {
    color: #2E5638;
}

.livro-status.emprestado {
    color: #8A8174;
}

.livro-qtd {
    color: var(--tinta-suave);
    font-size: .8rem;
}

.catalogo-vazio {
    border: 1px dashed var(--linha);
    border-radius: 12px;
    color: var(--tinta-suave);
    margin-top: 1rem;
    padding: 3rem 1.5rem;
    text-align: center;
}

.catalogo-rodape {
    color: var(--tinta-suave);
    font-size: .85rem;
    margin-top: 3.5rem;
    text-align: center;
}

/* ==========================================================================
   Login — cartão estilo ex libris
   ========================================================================== */

.login-fundo {
    align-items: center;
    background:
        linear-gradient(160deg, rgba(24, 52, 41, 0) 0%, rgba(16, 36, 28, .4) 100%),
        var(--verde-pinheiro);
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem;
}

.login-cartao {
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: 4px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
    max-width: 400px;
    outline: 1px solid var(--dourado);
    outline-offset: -8px;
    padding: 2.5rem 2.25rem 2rem;
    text-align: center;
    width: 100%;
}

.login-eyebrow {
    color: var(--tinta-suave);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    margin: 0 0 1rem;
    text-transform: uppercase;
}

.login-titulo {
    font-family: var(--fonte-serif);
    font-size: 2.3rem;
    font-weight: 600;
    margin: 0;
}

.login-subtitulo {
    border-bottom: 1px solid var(--linha);
    color: var(--tinta-suave);
    font-size: .95rem;
    margin: .3rem 0 1.6rem;
    padding-bottom: 1.4rem;
}

.login-campo {
    margin-bottom: 1rem;
    text-align: left;
}

.login-campo label {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: .3rem;
}

.login-campo input {
    background: #FFF;
    border: 1px solid var(--linha);
    border-radius: 8px;
    box-sizing: border-box;
    font-family: var(--fonte-corpo);
    font-size: 1rem;
    padding: .6rem .75rem;
    width: 100%;
}

.login-campo input:focus {
    border-color: var(--verde-pinheiro);
    outline: 2px solid rgba(32, 72, 58, .25);
}

.login-campo .validation-message {
    color: var(--vermelho);
    display: block;
    font-size: .82rem;
    margin-top: .25rem;
}

.login-erro {
    background: rgba(156, 52, 37, .1);
    border-radius: 8px;
    color: var(--vermelho);
    font-size: .88rem;
    font-weight: 600;
    margin: 0 0 1rem;
    padding: .55rem .75rem;
}

.login-botao {
    background: var(--verde-pinheiro);
    border: none;
    border-radius: 8px;
    color: #F6F2E8;
    cursor: pointer;
    font-family: var(--fonte-corpo);
    font-size: 1rem;
    font-weight: 700;
    padding: .7rem;
    transition: background-color .15s ease;
    width: 100%;
}

.login-botao:hover {
    background: var(--verde-escuro);
}

.login-voltar {
    color: var(--tinta-suave);
    display: inline-block;
    font-size: .88rem;
    margin-top: 1.5rem;
    text-decoration: none;
}

.login-voltar:hover {
    color: var(--verde-pinheiro);
    text-decoration: underline;
}

/* ==========================================================================
   Área administrativa
   ========================================================================== */

.pagina-titulo {
    font-family: var(--fonte-serif) !important;
    margin-bottom: .25rem !important;
}

.pagina-subtitulo {
    color: var(--tinta-suave);
    margin-bottom: 1.5rem;
}

.cartao-indicador {
    border: 1px solid var(--linha);
    border-radius: 12px !important;
    height: 100%;
}

.indicador-numero {
    font-family: var(--fonte-serif);
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1.1;
}

.indicador-rotulo {
    color: var(--tinta-suave);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.lombada-tabela {
    border-radius: 3px;
    display: inline-block;
    height: 1.5rem;
    margin-right: .5rem;
    vertical-align: middle;
    width: 5px;
}

.linha-atrasada {
    background: rgba(156, 52, 37, .07);
}

@media (max-width: 600px) {
    .catalogo-hero {
        padding: 4.5rem 1.25rem 4rem;
    }

    .catalogo-login {
        right: 1.25rem;
    }

    .catalogo-corpo {
        padding: 0 1.25rem 3rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}