/*
   Paginas publicas de certificado
   -------------------------------------------------------------------
   Usadas por:
     /cursos/validar/                            (busca por codigo)
     /cursos/<curso>/                            (pagina do treinamento)
     /cursos/<curso>/certificado/<codigo>/       (validacao individual)

   Reaproveita os mesmos tokens, tipografia, botoes e cabecalho das
   demais telas internas do site (assets/css/tela/*.css).
*/

:root {
    --azul: #4b8ef1;
    --azul-escuro: #0d2a78;
    --azul-medio: #2b6df5;
    --ciano: #22d3ee;
    --verde: #25d366;
    --texto: #263238;
    --texto-suave: #6b7280;
    --branco: #ffffff;
    --fundo: #f7fbff;
    --sombra: 0 22px 55px rgba(31, 99, 214, 0.13);
    --sombra-forte: 0 30px 80px rgba(13, 42, 120, 0.25);
    --radius: 26px;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Roboto', sans-serif;
    overflow-x: hidden;
    background: var(--fundo);
    color: var(--texto);
}

/* ---------------------------------------------------------------
   Cabecalho (mesmo padrao das telas internas)
   --------------------------------------------------------------- */

.header-area {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 24px rgba(15, 31, 76, 0.08) !important;
    border-bottom: 1px solid rgba(75, 142, 241, 0.12);
    padding: 12px 0;
    height: auto !important;
    min-height: unset !important;
}

.header-area .main-nav {
    min-height: 72px !important;
    height: 72px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.header-area .logo-wrapper {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    width: 270px;
    max-width: 270px;
    height: 72px !important;
    margin: 0 !important;
    float: none !important;
}

.logo-wrapper img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 42px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.logo-wrapper .logo-branca {
    opacity: 0;
}

.logo-wrapper .logo-azul {
    opacity: 1;
}

.header-area .main-nav .nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    margin: 0;
    height: 72px;
}

.header-area .main-nav .nav li a {
    color: #263238 !important;
    font-weight: 600;
    font-size: 15px;
    padding: 0 13px;
    height: 42px;
    line-height: 42px;
    border-radius: 999px;
    transition: .2s ease;
}

.header-area .main-nav .nav li a.active,
.header-area .main-nav .nav li a:hover {
    color: var(--azul) !important;
}

/* Bootstrap define .nav { flex-wrap: wrap }: sem isto o ultimo item do menu
   cai para uma segunda linha em telas entre 992px e ~1300px. */
.header-area .main-nav .nav {
    flex-wrap: nowrap;
}

.header-area .logo-wrapper {
    flex: 0 1 auto;
}

@media (min-width: 992px) and (max-width: 1299px) {
    .header-area .main-nav {
        gap: 14px;
    }

    .header-area .logo-wrapper {
        width: 215px;
        max-width: 215px;
    }

    .header-area .main-nav .nav li a {
        padding: 0 9px;
        font-size: 14px;
    }
}

/* ---------------------------------------------------------------
   Estrutura da pagina
   --------------------------------------------------------------- */

.pagina-certificado {
    padding: 150px 0 90px;
    min-height: 100vh;
}

.trilha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--texto-suave);
    margin-bottom: 22px;
}

.trilha a {
    color: var(--azul) !important;
}

.trilha i {
    font-size: 10px;
    opacity: .6;
}

.titulo-secao {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 48px;
}

.titulo-secao .mini {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--azul);
    background: rgba(75, 142, 241, .09);
    border-radius: 999px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 900;
    margin-bottom: 16px;
}

.titulo-secao h1,
.titulo-secao h2 {
    color: var(--azul-escuro);
    font-size: 40px;
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: 16px;
}

.titulo-secao h1 em,
.titulo-secao h2 em {
    font-style: normal;
    color: var(--azul);
}

.titulo-secao p {
    color: var(--texto-suave);
    font-size: 17px;
    line-height: 1.75;
    margin: 0;
}

/* ---------------------------------------------------------------
   Cartao principal da validacao
   --------------------------------------------------------------- */

.cartao-certificado {
    position: relative;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--sombra);
    border: 1px solid rgba(75, 142, 241, .10);
    overflow: hidden;
}

.cartao-certificado::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 6px;
    background: linear-gradient(90deg, var(--azul), var(--ciano));
}

.certificado-topo {
    padding: 46px 46px 34px;
    border-bottom: 1px solid rgba(75, 142, 241, .12);
}

.selo-autentico {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-radius: 999px;
    background: rgba(37, 211, 102, .10);
    color: #14884a;
    font-weight: 900;
    font-size: 14px;
    margin-bottom: 24px;
}

.selo-autentico i {
    font-size: 18px;
}

.certificado-topo .rotulo {
    display: block;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--texto-suave);
    margin-bottom: 10px;
}

.certificado-topo .nome-participante {
    color: var(--azul-escuro);
    font-size: 42px;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 18px;
    word-break: break-word;
}

.certificado-topo .frase {
    color: var(--texto-suave);
    font-size: 17px;
    line-height: 1.8;
    margin: 0;
    max-width: 760px;
}

.certificado-topo .frase strong {
    color: var(--texto);
}

.certificado-dados {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(75, 142, 241, .12);
}

.dado {
    background: #fff;
    padding: 26px 30px;
}

.dado .rotulo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: var(--texto-suave);
    margin-bottom: 8px;
}

.dado .rotulo i {
    color: var(--azul);
}

.dado .valor {
    color: var(--azul-escuro);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
    margin: 0;
    word-break: break-word;
}

.dado .valor.codigo {
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 1px;
}

.certificado-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 30px 46px 40px;
    border-top: 1px solid rgba(75, 142, 241, .12);
}

.botao-principal,
.botao-secundario,
.botao-linkedin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    padding: 0 24px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 15px;
    border: 0;
    cursor: pointer;
    transition: .25s ease;
}

.botao-principal {
    color: #fff !important;
    background: linear-gradient(135deg, var(--azul), var(--ciano));
    box-shadow: 0 18px 35px rgba(75, 142, 241, .26);
}

.botao-secundario {
    color: var(--azul-escuro) !important;
    background: rgba(75, 142, 241, .10);
    box-shadow: inset 0 0 0 1px rgba(75, 142, 241, .22);
}

.botao-linkedin {
    color: #fff !important;
    background: #0a66c2;
    box-shadow: 0 18px 35px rgba(10, 102, 194, .24);
}

.botao-principal:hover,
.botao-secundario:hover,
.botao-linkedin:hover {
    transform: translateY(-4px);
}

/* ---------------------------------------------------------------
   Coluna lateral: QR Code, conteudo e aviso
   --------------------------------------------------------------- */

.painel-lateral {
    display: grid;
    gap: 24px;
    align-content: start;
}

.cartao-lateral {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--sombra);
    border: 1px solid rgba(75, 142, 241, .10);
    padding: 30px;
}

.cartao-lateral h3 {
    color: var(--azul-escuro);
    font-size: 19px;
    font-weight: 900;
    margin-bottom: 14px;
}

.cartao-lateral p {
    color: var(--texto-suave);
    font-size: 14px;
    line-height: 1.75;
    margin-bottom: 0;
}

.cartao-qr {
    text-align: center;
}

.cartao-qr img {
    width: 100%;
    max-width: 210px;
    height: auto;
    margin: 0 auto 16px;
    display: block;
    border-radius: 16px;
    border: 1px solid rgba(75, 142, 241, .14);
    padding: 10px;
    background: #fff;
}

.lista-conteudo {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lista-conteudo li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--texto);
    font-size: 14px;
    line-height: 1.65;
    font-weight: 500;
    padding: 9px 0;
    border-bottom: 1px dashed rgba(75, 142, 241, .18);
}

.lista-conteudo li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.lista-conteudo i {
    color: var(--azul);
    margin-top: 4px;
    font-size: 12px;
}

.aviso-autenticidade {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 24px 26px;
    border-radius: 20px;
    background: rgba(75, 142, 241, .07);
    border: 1px solid rgba(75, 142, 241, .16);
    margin-top: 30px;
}

.aviso-autenticidade i {
    color: var(--azul);
    font-size: 20px;
    margin-top: 2px;
}

.aviso-autenticidade p {
    margin: 0;
    color: var(--texto-suave);
    font-size: 14px;
    line-height: 1.75;
}

.aviso-autenticidade strong {
    color: var(--azul-escuro);
}

/* ---------------------------------------------------------------
   Busca por codigo (/cursos/validar/)
   --------------------------------------------------------------- */

.caixa-busca {
    max-width: 720px;
    margin: 0 auto;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--sombra);
    border: 1px solid rgba(75, 142, 241, .10);
    padding: 42px;
    position: relative;
    overflow: hidden;
}

.caixa-busca::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 6px;
    background: linear-gradient(90deg, var(--azul), var(--ciano));
}

.campo-busca {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.campo-busca input {
    flex: 1 1 260px;
    min-height: 54px;
    padding: 0 20px;
    border-radius: 999px;
    border: 1px solid rgba(75, 142, 241, .28);
    background: var(--fundo);
    font-size: 16px;
    font-weight: 600;
    color: var(--texto);
    outline: none;
    transition: .2s ease;
    text-transform: uppercase;
}

.campo-busca input::placeholder {
    color: #9aa5b4;
    font-weight: 500;
    text-transform: none;
}

.campo-busca input:focus {
    border-color: var(--azul);
    box-shadow: 0 0 0 4px rgba(75, 142, 241, .14);
}

.retorno-busca {
    margin-top: 22px;
    padding: 18px 22px;
    border-radius: 18px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.65;
    display: none;
}

.retorno-busca.visivel {
    display: block;
}

.retorno-busca.erro {
    background: rgba(220, 53, 69, .08);
    color: #a52834;
    border: 1px solid rgba(220, 53, 69, .18);
}

.retorno-busca.ok {
    background: rgba(37, 211, 102, .10);
    color: #14884a;
    border: 1px solid rgba(37, 211, 102, .22);
}

/* ---------------------------------------------------------------
   Responsivo
   --------------------------------------------------------------- */

@media (max-width: 1199px) {
    .certificado-dados {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991px) {
    .header-area .main-nav {
        height: 66px !important;
        min-height: 66px !important;
    }

    .header-area .logo-wrapper {
        width: 220px;
        height: 66px !important;
    }

    .logo-wrapper img {
        max-height: 36px;
    }

    .pagina-certificado {
        padding: 120px 0 70px;
    }

    .titulo-secao h1,
    .titulo-secao h2 {
        font-size: 32px;
    }

    .certificado-topo {
        padding: 34px 26px 28px;
    }

    .certificado-topo .nome-participante {
        font-size: 30px;
    }

    .certificado-acoes {
        padding: 24px 26px 30px;
    }

    .painel-lateral {
        margin-top: 26px;
    }

    .caixa-busca {
        padding: 30px 24px;
    }
}

@media (max-width: 575px) {
    .certificado-dados {
        grid-template-columns: 1fr;
    }

    .certificado-topo .nome-participante {
        font-size: 26px;
    }

    .botao-principal,
    .botao-secundario,
    .botao-linkedin {
        width: 100%;
    }
}

/* Menu mobile: mesmo comportamento das demais telas internas */
@media (max-width: 991px) {
    .header-area {
        padding: 8px 0 !important;
    }

    .header-area .main-nav {
        height: 64px !important;
        min-height: 64px !important;
        position: relative;
        overflow: visible !important;
    }

    .header-area .logo-wrapper {
        width: 210px;
        height: 64px !important;
    }

    .logo-wrapper img {
        max-height: 34px;
    }

    .header-area .main-nav .menu-trigger {
        display: block !important;
        float: right;
        margin-top: 18px;
    }

    .header-area .main-nav .menu-trigger.active-menu span {
        background-color: transparent !important;
    }

    .header-area .main-nav .menu-trigger.active-menu span::before {
        top: 0 !important;
        transform: rotate(45deg) !important;
    }

    .header-area .main-nav .menu-trigger.active-menu span::after {
        top: 0 !important;
        transform: rotate(-45deg) !important;
    }

    .header-area .main-nav .nav.active-menu {
        display: flex !important;
    }

    .header-area .main-nav .nav {
        display: none !important;
        position: absolute !important;
        top: calc(100% + 8px) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: auto !important;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        padding: 12px;
        margin: 0;
        background: #fff !important;
        border-radius: 0 0 22px 22px;
        box-shadow: 0 22px 55px rgba(13, 42, 120, 0.16);
        overflow: hidden !important;
        z-index: 10000;
    }

    .header-area .main-nav .nav li {
        width: 100%;
        display: block;
    }

    .header-area .main-nav .nav li a {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 46px !important;
        line-height: 46px !important;
        padding: 0 15px !important;
        color: #263238 !important;
        background: transparent !important;
        border-radius: 14px;
        font-size: 15px;
        font-weight: 700;
    }

    .header-area .main-nav .nav li a:hover,
    .header-area .main-nav .nav li a.active {
        color: var(--azul) !important;
        background: rgba(75, 142, 241, 0.10) !important;
    }
}

@media (max-width: 420px) {
    .header-area .logo-wrapper {
        width: 175px;
    }

    .logo-wrapper img {
        max-height: 30px;
        margin-left: 6px;
    }

    .header-area .main-nav .menu-trigger {
        width: 42px;
        height: 42px;
    }
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
    -moz-transition: all 0.4s !important;
    -o-transition: all 0.4s !important;
    -webkit-transition: all 0.4s !important;
    transition: all 0.4s !important;
    background-color: #2a2a2a !important;
    display: block !important;
    position: absolute;
}

footer {
    margin-top: 0;
    background-color: #eef7ff;
}

/* Impressao: deixa a pagina de validacao legivel em papel */
@media print {

    .header-area,
    .certificado-acoes,
    footer,
    .js-preloader,
    .modal-cliente {
        display: none !important;
    }

    .pagina-certificado {
        padding: 0;
    }

    .cartao-certificado,
    .cartao-lateral {
        box-shadow: none;
        border: 1px solid #cfd8e6;
    }
}