/* ======= BUSCA DE ATIVIDADES ======= */
/* Versão moderna - Janeiro 2024 */

/* Variáveis para manter consistência com o ad26.css */
:root {
  /* Cores base */
  --busca-primary: #3700FE;
  --busca-primary-dark: #2B00C8;
  --busca-secondary: #00c896;
  --busca-accent: #ffb800;
  --busca-accent-dark: #d99000;
  --busca-success: #00c896;
  --busca-danger: #ff5252;
  --busca-warning: #ffb800;
  --busca-info: #34aadf;
  
  /* Cores de texto */
  --busca-text-dark: #1c1e1f;
  --busca-text-main: #333333;
  --busca-text-secondary: #666666;
  --busca-text-light: #999999;
  --busca-text-white: #ffffff;
  
  /* Cores de fundo */
  --busca-bg-white: #ffffff;
  --busca-bg-light: #f9ffff;
  --busca-bg-light-blue: #f5f9ff;
  
  /* Sombras */
  --busca-shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.05);
  --busca-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --busca-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
  
  /* Transições */
  --busca-transition: all 0.3s ease;
  
  /* Bordas e raios */
  --busca-radius-sm: 4px;
  --busca-radius-md: 8px;
  --busca-radius-lg: 16px;
  --busca-radius-xl: 20px;
  --busca-radius-2xl: 24px;
  --busca-radius-full: 50px;
}








footer {
    margin-top: 0;
}




/* Barra de busca superior */
#bsc-top {
    width: 100%;
    max-width: 800px;
    height: 60px;
    background: var(--busca-bg-white);
    border: none;
    border-radius: var(--busca-radius-lg);
    margin: 2rem auto 2rem auto;
    position: relative;
    text-align: left;
    /* box-shadow: var(--busca-shadow-md); */
    display: flex;
    align-items: center;
    transition: var(--busca-transition);
    overflow: hidden;
    border: 1px solid var(--border-primary);
}

#bsc-top:focus-within {
    box-shadow: 0 5px 15px rgba(55, 0, 254, 0.15);
    transform: translateY(-2px);
}

#bsc-form {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    
}

#bsc-top input {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--busca-text-main);
    padding: 0.75rem 1.25rem;
    border: none;
    background: none;
    outline: none;
    width: 100%;
    flex: 1;
    height: 100%;
    font-family: inherit;
    
}

#bsc-top button {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--busca-text-white);
    border: none;
    background: var(--busca-primary);
    outline: none;
    min-width: 140px;
    height: 100%;
    border-radius: 0 var(--busca-radius-lg) var(--busca-radius-lg) 0;
    font-family: inherit;
    cursor: pointer;
    transition: var(--busca-transition);
    white-space: nowrap;
    padding: 0 1.5rem;
}

#bsc-top button:hover {
    background: var(--busca-primary-dark);
}

#bsc-top button img {
    margin-right: 8px;
    width: 22px;
    height: 22px;
    filter: brightness(0) invert(1);
}


/* Container principal */
#bsc {
    /* background: var(--busca-bg-light); */
    text-align: center;
    padding-top: 2rem;
    width: 100%;
    /* max-width: 1200px; */
    margin: 0 auto;
    padding: 0 1.5rem;


    /* mobile */
    @media only screen and (max-width: 768px) {
        padding: 0;
    }
}



/* pai do aside e section */
#bsc_container_content {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
}



/* Container de filtros  aside*/
#bsc-filtros {
    width: 100%;
    max-width: 220px;
    display: inline-block;
    vertical-align: top;
    text-align: left;
    /* background-color: var(--busca-bg-white); */
    /* border-radius: var(--busca-radius-lg); */
    /* padding: 1.5rem; */
    /* box-shadow: var(--busca-shadow-sm); */
    /* margin-right: 1rem; */
    position: relative;
    transition: var(--busca-transition);
}



/* Container de resultados  section*/
#bsc-resultados {
    /* width: 75%; */
    /* max-width: 800px; */
    display: inline-block;
    vertical-align: top;
    text-align: left;
    padding: 0;

    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
}

/* Item de resultado */
.bsc-item {
    background-color: var(--busca-bg-white);
    border-radius: var(--busca-radius-xl);
    /* padding: 1.5rem; */
    /* box-shadow: var(--busca-shadow-sm); */
    display: flex;
    flex: 1;
    flex-direction: column;
    flex-wrap: wrap;
    /* gap: 1.5rem; */
    transition: var(--busca-transition);
    position: relative;
    border: 1px solid var(--border-primary);
    min-width: 290px;
    width: 100%;
    max-width: 320px;
}

.bsc-item:hover {
    box-shadow: var(--busca-shadow-md);
    transform: translateY(-3px);
}

.bsc-imagem {
    width: 100%;
    height: 140px;
    /* border-radius: var(--busca-radius-lg); */
    overflow: hidden;
    box-shadow: var(--busca-shadow-sm);
    transition: var(--busca-transition);
    position: relative;
}

.bsc-imagem:hover {
    cursor: pointer;
    /* transform: scale(1.04); */
    filter: saturate(1.1);
    /* box-shadow: var(--busca-shadow-md); */
}

.bsc-imagem::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: url('../imagens/jogar-icon.svg') center center no-repeat;
    background-size: 24px;
    background-color: rgba(55, 0, 254, 0.85);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.bsc-imagem:hover::after {
    opacity: 1;
}

.bsc-infos {
    /* min-width: 200px; */
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 16px;
}

.bsc-titulo {
    font-size: 1.5rem;
    font-weight: 700;
    color: #000;
    /* margin-bottom: 0.5rem; */
    line-height: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Estilo do autor */
.bsc-autor {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* margin-bottom: 0.5rem; */
    align-items: center;
    padding: 16px 16px 12px 16px;
    
}


.bsc-autor svg {
    color: var(--busca-primary);
    flex-shrink: 0;
    transition: var(--busca-transition);
}

.bsc-autor:hover svg {
    color: var(--busca-primary-dark);
}

.bsc-autor-nome {
    font-size: 0.875rem;
    font-weight: 500;
    color: #383838;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: var(--busca-transition);
}

.bsc-autor:hover .bsc-autor-nome {
    color: var(--busca-text-main);
}

.bsc-objetivo {
    color: #383838;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    /* margin-bottom: 1.25rem; */
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-grow: 1;
    margin-top: 0;
}

.bsc-infos a.bsc-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 700;
    background-color: var(--busca-primary);
    color: var(--busca-text-white);
    text-decoration: none;
    padding: 0.75rem 1.5rem;
    border-radius: var(--busca-radius-lg);
    transition: var(--busca-transition);
    align-self: flex-start;
}

.bsc-infos a.bsc-botao-externo {
    background-color: var(--busca-accent);
    box-shadow: 0 4px 12px rgba(255, 184, 0, 0.2);
}

.bsc-infos a.bsc-botao:hover {
    background-color: var(--busca-primary-dark);
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(55, 0, 254, 0.25);
}

.bsc-infos a.bsc-botao-externo:hover {
    background-color: var(--busca-accent-dark);
    box-shadow: 0 6px 16px rgba(255, 184, 0, 0.25);
}

.bsc-infos a.bsc-botao img {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
}



.bsc-selos ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
}

/* Badges para disciplinas e tags */
.discX {

    font-size: 0.875rem;
    font-weight: 500;
    text-align: center;
    display: inline-block;
    border-radius: var(--busca-radius-full);
    padding: 0.3rem 0.75rem;
    background: #ffffff;
    color: #333333;
    border: 1px solid #757575;
}

.bnccX {
    color: var(--busca-text-main);
    font-size: 0.875rem;
    font-weight: 500;
    text-align: center;
    display: inline-block;
    border-radius: var(--busca-radius-full);
    padding: 0.3rem 0.75rem;
    background: rgba(52, 170, 223, 0.1);
    color: var(--busca-info);
    border: 1px solid rgba(52, 170, 223, 0.2);
}

.serieX {
    color: white;
    /* width: 28px; */
    /* height: 28px; */
    font-size: 0.875rem;
    font-weight: 400;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    /* box-shadow: var(--busca-shadow-sm); */
    padding: 4.8px 12px;
}

/* Cores específicas para anos escolares */
.serie1 { background: #F5F2FF; color: #4A2C96; border: 1px solid #D1C4E9; }
.serie2 { background: #E8F0FF; color: #1A3A8C; border: 1px solid #BBDEFB; }
.serie3 { background: #E8F7FF; color: #1A5A7A; border: 1px solid #B3E5FC; }
.serie4 { background: #E8FDF8; color: #1A6B5A; border: 1px solid #B2DFDB; }
.serie5 { background: #E8F5EA; color: #2D5A2D; border: 1px solid #C8E6C9; }
.serie6 { background: #F5FCE8; color: #5A6B1A; border: 1px solid #DCEDC8; }
.serie7 { background: #FEFCE8; color: #8C6B1A; border: 1px solid #FFF9C4; }
.serie8 { background: #FEF5E8; color: #B85A1A; border: 1px solid #FFE0B2; }
.serie9 { background: #F5E8E8; color: #6B2D2D; border: 1px solid #FFCDD2; }
.serie10 { background: #FFE8E8; color: #B82D2D; border: 1px solid #FFCDD2; }
.serie11 { background: #F8E8F5; color: #8C2D6B; border: 1px solid #F8BBD9; }
.serie12 { background: #F0E8FF; color: #4A1A8C; border: 1px solid #D1C4E9; }
.serie13 { background: #FFE8E8; color: #B82D2D; border: 1px solid #FFCDD2; }

/* Títulos e cabeçalhos de filtros */
.bsc-q {
    font-size: 1.25rem;
    color: var(--busca-text-dark);
    font-weight: 700;
    margin-bottom: 0.5rem;
    position: relative;
}

.bsc-q h1 {
    font-size: 1.25rem;
    color: var(--busca-text-dark);
    font-weight: 700;
    margin: 0 0 0.75rem 0;
}

.bsc-q h1::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -0.3rem;
    width: 40px;
    height: 3px;
    background-color: var(--busca-primary);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.bsc-q:hover h1::after {
    width: 60px;
}

.bsc-q-results {
    font-size: 0.95rem;
    color: var(--busca-text-secondary);
    font-weight: 400;
    margin-bottom: 1.5rem;
    padding-top: 10px;
}

/* Categorias de disciplinas */
.bsc-discs {
    font-size: 1.1rem;
    color: var(--busca-text-dark);
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding-top: 1.5rem;
}

.bsc-discs-results ul {
    font-size: 0.95rem;
    color: var(--busca-text-main);
    font-weight: 400;
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.bsc-discs-results li {
    display: block;
    padding: 8px 16px;
    border-radius: var(--busca-radius-full);
    transition: var(--busca-transition);
}

.bsc-discs-results a {
    color: inherit;
    text-decoration: none;
    display: block;
}

.bsc-discs-results li:hover {
    color: var(--busca-primary);
    background: rgba(55, 0, 254, 0.08);
    transform: translateX(3px);
}

/* Contador de resultados */
.results-n {
    color: var(--busca-text-light);
    font-size: 0.85rem;
}

/* Paginação */
.bsc-paginacao {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    margin: 2rem 0 1rem;
    font-size: 0.95rem;
}

.bsc-paginacao .pag-numeros {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bsc-paginacao a.pag-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--busca-text-main);
    text-decoration: none;
    border-radius: 50%;
    background: var(--busca-bg-white);
    box-shadow: var(--busca-shadow-sm);
    transition: var(--busca-transition);
}

.bsc-paginacao a.pag-btn:hover {
    background: rgba(55, 0, 254, 0.08);
    transform: translateY(-2px);
    box-shadow: var(--busca-shadow-md);
}

.bsc-paginacao .pag-ellipsis {
    color: var(--busca-text-secondary);
    padding: 0 0.25rem;
}

.bsc-paginacao a.pag-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--busca-text-main);
    text-decoration: none;
    border-radius: 50%;
    background: var(--busca-bg-white);
    box-shadow: var(--busca-shadow-sm);
    transition: var(--busca-transition);
    font-weight: 500;
}

.bsc-paginacao a.pag-num:hover {
    background: rgba(55, 0, 254, 0.08);
    transform: translateY(-2px);
    box-shadow: var(--busca-shadow-md);
}

.bsc-paginacao span.pag-atual {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--busca-text-white);
    font-weight: 700;
    background: var(--busca-primary);
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(55, 0, 254, 0.2);
}

/* Informações sobre resultados */
.bsc-resultados-info {
    text-align: center;
    color: var(--busca-text-secondary);
    font-size: 0.95rem;
    margin-bottom: 2rem;
}

.bsc-resultados-info strong {
    color: var(--busca-primary);
    font-weight: 600;
}

/* Estilo para sem resultados */
.bsc-sem-resultados {
    background-color: var(--busca-bg-white);
    border-radius: var(--busca-radius-lg);
    padding: 3rem 2rem;
    margin: 2rem auto;
    text-align: center;
    max-width: 500px;
    box-shadow: var(--busca-shadow-sm);
}

.bsc-sem-resultados img {
    margin-bottom: 1.5rem;
    opacity: 0.7;
}

.bsc-sem-resultados h3 {
    color: var(--busca-text-dark);
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
}

.bsc-sem-resultados p {
    color: var(--busca-text-secondary);
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

/* Filtros ativos */
.bsc-fativos {
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}

.bsc-fativos ul {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--busca-text-main);
    font-weight: 500;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.bsc-fativos li {
    color: var(--busca-text-main);
    padding: 0.4rem 0.75rem;
    background: rgba(55, 0, 254, 0.08);
    border-radius: var(--busca-radius-full);
    display: flex;
    align-items: center;
    transition: var(--busca-transition);
    padding: 8px 16px;
    gap: 8px;
    justify-content: space-between;
}

.bsc-fativos li a {
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.bsc-fativos li:hover {
    background: var(--busca-danger);
    color: var(--busca-text-white);
    transform: translateY(-2px);
}

/* Botão para mostrar filtros em mobile */
#montrarFiltros {
    display: none;
    text-align: right;
    padding: 1rem;
    cursor: pointer;
}

#montrarFiltros img {
    width: 24px;
    height: 24px;
    transition: var(--busca-transition);
}

#montrarFiltros:hover img {
    transform: scale(1.1);
}

.bsc-filtro-aplicado {
    display: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--busca-danger);
    position: absolute;
    top: 10px;
    right: 10px;
}


@media only screen and (max-width: 768px) {
    .bsc-fativos ul {
        font-size: 0.95rem;
    }

    #bsc-top {
        width: 95%;
        max-width: 95%;
        margin-bottom: 2rem;
        position: relative;
    }

    #bsc-form {
        flex-wrap: nowrap;
    }

    #bsc-top input {
        font-size: 1rem;
        padding: 0.75rem 1rem;
    }

    #bsc-top button {
        width: auto;
        min-width: 60px;
        padding: 0 1rem;
    }

    .btn-buscar-texto {
        display: none;
    }

    #montrarFiltros {
        display: block;
        position: relative;
        text-align: center;
        padding: 0.75rem;
        background-color: var(--busca-bg-white);
        border-radius: var(--busca-radius-full);
        width: 50px;
        height: 50px;
        margin: 0 auto 1.5rem;
        box-shadow: var(--busca-shadow-sm);
    }

    #montrarFiltros:hover {
        box-shadow: var(--busca-shadow-md);
        transform: translateY(-2px);
    }

    #bsc-filtros {
        width: 100%;
        max-width: 90%;
        margin: 0 auto 2rem;
        display: none;
        box-shadow: var(--busca-shadow-md);
    }




    .bsc-discs-results ul {
        font-size: 0.95rem;
    }

    .bsc-discs-results li {
        margin: 0.5rem 0.3rem;
        display: inline-block;
    }

    .bsc-discs {
        margin-top: 2rem;
    }


    .bsc-infos a {
        font-size: 1rem;
        padding: 0.75rem 1.5rem;
        display: inline-flex;
    }

    .bsc-paginacao {
        font-size: 1rem;
    }

    .bsc-item {
        display: block;
    }

    #bsc-resultados {
        width: 90%;
        max-width: 600px;
        margin: 0 auto;
    }

    .bsc-filtro-aplicado {
        display: block;
    }



    

    

    

}

/* Efeito de validação */
#bsc-top input.erro-validacao {
    background-color: rgba(255, 82, 82, 0.1);
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Cabeçalho da página de resultados */
.bsc-cabecalho {
    max-width: 800px;
    margin: 1rem auto 2rem;
    padding: 1.5rem;
    /* background-color: var(--busca-bg-white); */
    border-radius: var(--busca-radius-lg);
    /* box-shadow: var(--busca-shadow-sm); */
    text-align: center;
    transition: var(--busca-transition);
}


.bsc-cabecalho h1 {
    font-size: 1.75rem;
    color: var(--busca-text-dark);
    margin-bottom: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.bsc-cabecalho p {
    color: var(--busca-text-secondary);
    font-size: 1rem;
    line-height: 1.5;
    max-width: 650px;
    margin: 0 auto;
}

.bsc-cabecalho p strong {
    color: var(--busca-primary);
    font-weight: 600;
}

@media only screen and (max-width: 768px) {
    .bsc-cabecalho {
        width: 95%;
        padding: 1.25rem;
        margin: 1rem auto 1.5rem;
    }
    
    .bsc-cabecalho h1 {
        font-size: 1.5rem;
    }
    
    .bsc-cabecalho p {
        font-size: 0.95rem;
    }
}