:root {

    --min-fundo: #f4f6f8;

    --min-card: #ffffff;

    --min-principal: #24364b;

    --min-secundaria: #687787;

    --min-destaque: #2f80ed;

    --min-destaque-claro: #edf4ff;

    --min-borda: #dfe5eb;

    --min-sombra:
        0 5px 22px rgba(0, 0, 0, .07);

}


/* =========================================================
   PÁGINA
========================================================= */

.ministracoes-page {

    min-height: 100vh;

    padding:
        38px
        30px
        60px;

    box-sizing: border-box;


    /* =====================================================
       FUNDO COM IDENTIDADE VISUAL
    ====================================================== */

    background-image:

        linear-gradient(
            rgba(244, 246, 248, 0.88),
            rgba(244, 246, 248, 0.88)
        ),

        url("../../img/Login.png");


    background-size:
        cover;


    background-position:
        center;


    background-repeat:
        no-repeat;


    background-attachment:
        fixed;


    color:
        var(--min-principal);

}


/* =========================================================
   TOPO
========================================================= */

.ministracoes-topo {

    width: 100%;

    max-width: 1250px;

    margin:
        0 auto 25px;

}


.ministracoes-subtitulo {

    color:
        var(--min-destaque);

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;

}


.ministracoes-topo h1 {

    margin:
        4px 0;

    font-size:
        32px;

}


.ministracoes-topo p {

    max-width:
        650px;

    margin:
        0;

    color:
        var(--min-secundaria);

    font-size:
        13px;

}


/* =========================================================
   CATEGORIAS
========================================================= */

.ministracoes-categorias {

    width:
        100%;

    max-width:
        1250px;

    margin:
        0 auto 18px;

}


.categorias-lista {

    display:
        flex;

    gap:
        8px;

    overflow-x:
        auto;

    padding-bottom:
        4px;

}


.categoria-btn {

    padding:
        9px 16px;

    flex-shrink:
        0;

    border:
        1px solid
        var(--min-borda);

    border-radius:
        30px;

    background:
        white;

    color:
        var(--min-principal);

    cursor:
        pointer;

    font-size:
        12px;

    font-weight:
        600;

    transition:
        .2s;

}


.categoria-btn:hover {

    border-color:
        var(--min-destaque);

}


.categoria-btn.ativo {

    border-color:
        var(--min-destaque);

    background:
        var(--min-destaque);

    color:
        white;

}


/* =========================================================
   PLAYER PRINCIPAL
========================================================= */

.ministracao-principal {

    width:
        100%;

    max-width:
        1250px;

    margin:
        0 auto 28px;

    background:
        rgba(255, 255, 255, 0.96);

    border:
        1px solid
        var(--min-borda);

    border-radius:
        13px;

    overflow:
        hidden;

    box-shadow:
        var(--min-sombra);

}


.ministracao-player-container {

    width:
        100%;

    aspect-ratio:
        16 / 9;

    background:
        #10151b;

}


.ministracao-player-container iframe {

    width:
        100%;

    height:
        100%;

    display:
        block;

    border:
        none;

}


.ministracao-player-vazio {

    width:
        100%;

    height:
        100%;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    color:
        white;

    text-align:
        center;

}


.ministracao-player-vazio > div {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

}


.player-vazio-icone {

    width:
        55px;

    height:
        55px;

    margin-bottom:
        12px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    border:
        1px solid
        rgba(255, 255, 255, .2);

    border-radius:
        50%;

    background:
        rgba(255, 255, 255, .08);

}


.ministracao-player-vazio strong {

    font-size:
        15px;

}


.ministracao-player-vazio p {

    margin:
        4px 0 0;

    color:
        #aeb8c3;

    font-size:
        11px;

}


/* =========================================================
   INFO PLAYER
========================================================= */

.ministracao-principal-info {

    padding:
        20px 23px;

}


.video-principal-categoria {

    color:
        var(--min-destaque);

    font-size:
        10px;

    font-weight:
        700;

    text-transform:
        uppercase;

}


.ministracao-principal-info h2 {

    margin:
        4px 0;

    font-size:
        21px;

}


#videoPrincipalData {

    color:
        var(--min-secundaria);

    font-size:
        11px;

}


/* =========================================================
   BIBLIOTECA
========================================================= */

.ministracoes-conteudo {

    width:
        100%;

    max-width:
        1250px;

    margin:
        auto;

    background:
        rgba(255, 255, 255, 0.96);

    border:
        1px solid
        var(--min-borda);

    border-radius:
        12px;

    overflow:
        hidden;

    box-shadow:
        var(--min-sombra);

}


.ministracoes-lista-topo {

    padding:
        19px 22px;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    border-bottom:
        1px solid
        var(--min-borda);

}


.ministracoes-lista-topo > div {

    display:
        flex;

    flex-direction:
        column;

}


.ministracoes-lista-topo span {

    color:
        var(--min-secundaria);

    font-size:
        9px;

    text-transform:
        uppercase;

}


.ministracoes-lista-topo h2 {

    margin:
        3px 0 0;

    font-size:
        18px;

}


#quantidadeVideos {

    min-width:
        32px;

    height:
        32px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    border-radius:
        50%;

    background:
        var(--min-destaque-claro);

    color:
        var(--min-destaque);

    font-size:
        11px;

}


/* =========================================================
   LISTA DE VÍDEOS
========================================================= */

.ministracoes-lista {

    display:
        flex;

    flex-direction:
        column;

}


.ministracao-item {

    width:
        100%;

    padding:
        14px 20px;

    box-sizing:
        border-box;

    display:
        grid;

    grid-template-columns:
        90px
        1fr
        auto;

    gap:
        18px;

    align-items:
        center;

    border:
        none;

    border-bottom:
        1px solid
        #edf0f3;

    background:
        white;

    color:
        inherit;

    text-align:
        left;

    cursor:
        pointer;

    transition:
        .15s;

}


.ministracao-item:last-child {

    border-bottom:
        none;

}


.ministracao-item:hover {

    background:
        #f8fafc;

}


.ministracao-item.ativo {

    background:
        var(--min-destaque-claro);

}


.ministracao-data {

    display:
        flex;

    flex-direction:
        column;

}


.ministracao-data strong {

    font-size:
        12px;

}


.ministracao-data span {

    margin-top:
        2px;

    color:
        var(--min-secundaria);

    font-size:
        9px;

    text-transform:
        uppercase;

}


.ministracao-item-info {

    min-width:
        0;

}


.ministracao-item-info strong {

    display:
        block;

    overflow:
        hidden;

    font-size:
        13px;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;

}


.ministracao-item-info span {

    margin-top:
        3px;

    display:
        block;

    color:
        var(--min-secundaria);

    font-size:
        10px;

}


.ministracao-play {

    width:
        37px;

    height:
        37px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    border-radius:
        50%;

    background:
        #f0f3f6;

    color:
        var(--min-principal);

    font-size:
        11px;

}


.ministracao-item.ativo
.ministracao-play {

    background:
        var(--min-destaque);

    color:
        white;

}


/* =========================================================
   ESTADOS
========================================================= */

.ministracoes-vazio {

    padding:
        40px 20px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    color:
        var(--min-secundaria);

    text-align:
        center;

}


.ministracoes-vazio strong {

    color:
        var(--min-principal);

}


.ministracoes-vazio span {

    margin-top:
        5px;

    font-size:
        11px;

}


.ministracoes-carregando {

    color:
        var(--min-secundaria);

    font-size:
        11px;

}

.ministracao-principal,
.ministracoes-conteudo {

    background:
        rgba(255, 255, 255, 0.96);

    backdrop-filter:
        blur(4px);

}


/* =========================================================
   RESPONSIVO
========================================================= */

@media (
    max-width: 700px
) {

    .ministracoes-page {

        padding:
            25px 12px
            50px;

    }


    .ministracoes-topo h1 {

        font-size:
            26px;

    }


    .ministracao-principal-info {

        padding:
            16px;

    }


    .ministracao-principal-info h2 {

        font-size:
            17px;

    }


    .ministracao-item {

        grid-template-columns:
            72px
            1fr
            35px;

        gap:
            10px;

        padding:
            13px;

    }

}

/* =========================================================
   E7.2 — PLAYER PRIVADO GOOGLE DRIVE
========================================================= */

.ministracao-player-container .ministracao-player-video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: #000;
}


/* =========================================================
   E7.4C11 — MINISTRAÇÕES | DESIGN SYSTEM IECJS
========================================================= */

.ministracoes-page {
    background: var(--bg-page, #F8F6F0) !important;
    background-image: none !important;
    color: var(--text-primary, #17324A) !important;
}

.ministracoes-topo h1,
.ministracao-principal-info h2,
.ministracoes-lista-topo h2,
.ministracao-item-info strong,
.ministracoes-vazio strong {
    color: var(--text-primary, #17324A) !important;
}

.ministracoes-topo p,
#videoPrincipalData,
.ministracao-item-info span,
.ministracao-data span,
.ministracoes-vazio,
.ministracoes-carregando {
    color: var(--text-secondary, #79869F) !important;
}

.ministracoes-subtitulo,
.video-principal-categoria,
.ministracoes-lista-topo span {
    color: var(--primary, #22B8EF) !important;
}

.ministracoes-categorias {
    padding: 10px;
    border: 1px solid var(--border-soft, rgba(23,50,74,.14)) !important;
    border-radius: var(--radius-md, 12px);
    background: var(--bg-surface, #FEFEFE) !important;
}

.categoria-btn {
    min-height: 40px;
    border: 1px solid var(--border-soft, rgba(23,50,74,.14)) !important;
    border-radius: 999px !important;
    background: var(--bg-surface-elevated, #F2F6F8) !important;
    color: var(--text-primary, #17324A) !important;
}

.categoria-btn:hover {
    background: var(--primary-soft, rgba(34,184,239,.12)) !important;
    color: var(--primary, #22B8EF) !important;
    border-color: var(--border-strong, rgba(34,184,239,.35)) !important;
}

.categoria-btn.ativo {
    background: linear-gradient(135deg, var(--primary, #22B8EF), var(--primary-hover, #46C3F1)) !important;
    color: #09131D !important;
    border-color: transparent !important;
    box-shadow: 0 7px 16px rgba(34,184,239,.14);
}

.ministracao-principal,
.ministracoes-conteudo {
    background: var(--bg-surface, #FEFEFE) !important;
    color: var(--text-primary, #17324A) !important;
    border-color: var(--border-soft, rgba(23,50,74,.14)) !important;
    border-radius: var(--radius-lg, 16px) !important;
    box-shadow: var(--shadow-sm, 0 6px 18px rgba(23,50,74,.07)) !important;
    backdrop-filter: none !important;
}

.ministracao-player-vazio {
    background: var(--bg-section, #F2F6F8) !important;
    color: var(--text-secondary, #79869F) !important;
}

.player-vazio-icone,
.ministracao-play,
#quantidadeVideos {
    background: var(--primary-soft, rgba(34,184,239,.12)) !important;
    color: var(--primary, #22B8EF) !important;
}

.ministracao-item {
    background: transparent !important;
    color: var(--text-primary, #17324A) !important;
    border-color: var(--border-soft, rgba(23,50,74,.14)) !important;
}

.ministracao-item:hover {
    background: var(--bg-surface-elevated, #F2F6F8) !important;
}

.ministracao-item.ativo {
    background: var(--primary-soft, rgba(34,184,239,.12)) !important;
}

.ministracao-item.ativo .ministracao-play {
    background: var(--primary, #22B8EF) !important;
    color: #09131D !important;
}

html[data-theme="dark"] .ministracoes-page :is(
    .ministracoes-categorias,.ministracao-principal,.ministracoes-conteudo
) {
    background: var(--bg-surface, #102536) !important;
    color: var(--text-primary, #F8F6F0) !important;
}

html[data-theme="dark"] .ministracoes-page :is(h1,h2,h3,strong,.ministracao-item-info strong) {
    color: var(--text-primary, #F8F6F0) !important;
}

html[data-theme="dark"] .ministracoes-page :is(p,small,.ministracao-item-info span,.ministracao-data span,.ministracoes-vazio,.ministracoes-carregando) {
    color: var(--text-secondary, #ABB8C4) !important;
}

html[data-theme="dark"] .ministracoes-page .categoria-btn {
    background: var(--bg-surface-elevated, #17354A) !important;
    color: var(--text-primary, #F8F6F0) !important;
}

html[data-theme="dark"] .ministracoes-page .categoria-btn.ativo {
    background: linear-gradient(135deg, var(--primary, #38C7FA), var(--primary-hover, #65D5FD)) !important;
    color: #09131D !important;
}

html[data-theme="dark"] .ministracoes-page .ministracao-item:hover {
    background: var(--bg-surface-elevated, #17354A) !important;
}

@media (max-width: 700px) {
    .ministracoes-page {
        padding: 24px 14px 50px !important;
    }

    .ministracoes-categorias {
        margin-bottom: 14px;
    }

    .categorias-lista {
        padding-bottom: 2px;
    }

    .ministracao-principal,
    .ministracoes-conteudo {
        border-radius: var(--radius-md, 12px) !important;
    }

    .ministracao-item {
        grid-template-columns: 64px minmax(0,1fr) 36px !important;
    }
}

