:root {

    --midia-fundo: #f4f6f8;

    --midia-card: #ffffff;

    --midia-texto: #24364b;

    --midia-secundaria: #687787;

    --midia-destaque: #2f80ed;

    --midia-destaque-claro: #edf4ff;

    --midia-borda: #dfe5eb;

    --midia-verde: #229954;

    --midia-vermelho: #d64545;

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

}


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

.admin-midia-page {

    min-height: 100vh;

    padding: 35px;

    box-sizing: border-box;

    background: var(--midia-fundo);

    color: var(--midia-texto);

}


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

.admin-midia-topo {

    width: 100%;

    max-width: 1400px;

    margin: 0 auto 24px;

    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 25px;

}


.admin-midia-subtitulo {

    color: var(--midia-destaque);

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;

}


.admin-midia-topo h1 {

    margin: 4px 0;

    font-size: 30px;

}


.admin-midia-topo p {

    margin: 0;

    color: var(--midia-secundaria);

    font-size: 12px;

}


.admin-midia-topo-acoes {

    display: flex;

    gap: 8px;

}


/* =========================================================
   BOTÕES
========================================================= */

.btn-midia-principal,
.btn-midia-secundario {

    display: inline-flex;

    justify-content: center;
    align-items: center;

    padding: 9px 14px;

    border-radius: 6px;

    cursor: pointer;

    font-size: 11px;
    font-weight: 600;

    text-decoration: none;

}


.btn-midia-principal {

    border: 1px solid var(--midia-destaque);

    background: var(--midia-destaque);

    color: white;

}


.btn-midia-secundario {

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

    background: white;

    color: var(--midia-texto);

}


/* =========================================================
   INDICADORES
========================================================= */

.admin-midia-indicadores {

    width: 100%;

    max-width: 1400px;

    margin: 0 auto 20px;

    display: grid;

    grid-template-columns:
        180px
        180px
        minmax(250px, 1fr);

    gap: 12px;

}


.admin-midia-indicador {

    min-width: 0;

    padding: 17px 19px;

    display: flex;

    flex-direction: column;

    background: white;

    border: 1px solid var(--midia-borda);
    border-radius: 9px;

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

}


.admin-midia-indicador span {

    color: var(--midia-secundaria);

    font-size: 10px;

}


.admin-midia-indicador strong {

    margin-top: 5px;

    font-size: 23px;

}


.admin-midia-indicador
.indicador-evento-atual {

    overflow: hidden;

    font-size: 15px;

    white-space: nowrap;

    text-overflow: ellipsis;

}


/* =========================================================
   CARD
========================================================= */

.admin-midia-card {

    width: 100%;

    max-width: 1400px;

    margin: auto;

    background: white;

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

    border-radius: 11px;

    overflow: hidden;

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

}


.admin-midia-card-topo {

    padding: 20px 22px;

    display: flex;

    justify-content: space-between;
    align-items: flex-end;

    gap: 20px;

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

}


.admin-midia-card-topo > div:first-child {

    display: flex;

    flex-direction: column;

}


.admin-midia-card-topo span {

    color: var(--midia-secundaria);

    font-size: 9px;

    text-transform: uppercase;

}


.admin-midia-card-topo h2 {

    margin: 3px 0;

    font-size: 18px;

}


.admin-midia-card-topo p {

    margin: 0;

    color: var(--midia-secundaria);

    font-size: 11px;

}


/* =========================================================
   FILTROS
========================================================= */

.admin-midia-filtros {

    display: flex;

    gap: 7px;

}


.admin-midia-filtros input,
.admin-midia-filtros select {

    height: 38px;

    padding: 0 10px;

    box-sizing: border-box;

    border: 1px solid var(--midia-borda);
    border-radius: 6px;

    background: white;

    outline: none;

}


.admin-midia-filtros input {

    width: 230px;

}


/* =========================================================
   EVENTOS
========================================================= */

.admin-eventos-lista {

    display: flex;

    flex-direction: column;

}


.admin-evento-item {

    padding: 17px 22px;

    display: grid;

    grid-template-columns:
        115px
        minmax(0, 1fr)
        auto;

    gap: 18px;

    align-items: center;

    border-bottom: 1px solid #edf0f3;

}


.admin-evento-item:last-child {

    border-bottom: none;

}


.admin-evento-data {

    display: flex;

    flex-direction: column;

}


.admin-evento-data strong {

    font-size: 12px;

}


.admin-evento-data span {

    margin-top: 2px;

    color: var(--midia-secundaria);

    font-size: 9px;

    text-transform: uppercase;

}


.admin-evento-info {

    min-width: 0;

}


.admin-evento-info h3 {

    margin: 0;

    font-size: 14px;

}


.admin-evento-info p {

    margin: 4px 0 7px;

    color: var(--midia-secundaria);

    font-size: 10px;

}


.admin-evento-badges {

    display: flex;

    flex-wrap: wrap;

    gap: 5px;

}


.midia-badge {

    padding: 4px 7px;

    border-radius: 20px;

    font-size: 9px;
    font-weight: 700;

}


.midia-badge.ativo {

    background: #e9f7ef;

    color: var(--midia-verde);

}


.midia-badge.inativo {

    background: #f5eaea;

    color: var(--midia-vermelho);

}


.midia-badge.atual {

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

    color: var(--midia-destaque);

}


.admin-evento-acoes {

    display: flex;

    flex-wrap: wrap;

    justify-content: flex-end;

    gap: 6px;

}


.admin-evento-acoes button {

    padding: 7px 9px;

    border: 1px solid var(--midia-borda);
    border-radius: 5px;

    background: white;

    color: var(--midia-texto);

    cursor: pointer;

    font-size: 10px;

}


.admin-evento-acoes
.btn-gerenciar-evento {

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

    color: var(--midia-destaque);

}


.admin-evento-acoes
.btn-definir-atual {

    color: var(--midia-verde);

}


/* =========================================================
   MODAL
========================================================= */

.admin-midia-modal {

    position: fixed;

    inset: 0;

    z-index: 20000;

    padding: 20px;

    display: none;

    justify-content: center;
    align-items: center;

    box-sizing: border-box;

    background: rgba(0, 0, 0, .62);

}


.admin-midia-modal.ativo {

    display: flex;

}


.admin-midia-modal-box {

    width: 100%;

    max-width: 590px;

    max-height: 92vh;

    overflow-y: auto;

    background: white;

    border-radius: 11px;

}


.admin-midia-modal-topo {

    padding: 18px 21px;

    display: flex;

    justify-content: space-between;
    align-items: center;

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

}


.admin-midia-modal-topo span {

    color: var(--midia-secundaria);

    font-size: 9px;

    text-transform: uppercase;

}


.admin-midia-modal-topo h2 {

    color: #000000;
    margin: 3px 0 0;

}


.admin-midia-modal-topo > button {

    width: 34px;
    height: 34px;

    border: none;
    border-radius: 50%;

    background: #f0f2f4;

    cursor: pointer;

    font-size: 20px;

}


#formEvento {

    color: #000000;
    padding: 21px;

}


.campo {

    margin-bottom: 15px;

    display: flex;

    flex-direction: column;

    gap: 5px;

}


.campo label {

    font-size: 11px;
    font-weight: 600;

}


.campo input,
.campo textarea {

    width: 100%;

    padding: 10px;

    box-sizing: border-box;

    border: 1px solid var(--midia-borda);
    border-radius: 6px;

    font: inherit;

    outline: none;

}


.campo textarea {

    resize: vertical;

}


.campo input:focus,
.campo textarea:focus {

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

}


.campo small {

    color: var(--midia-secundaria);

    font-size: 9px;

}


/* =========================================================
   CHECKS
========================================================= */

.admin-midia-check {

    margin-bottom: 10px;

    padding: 12px;

    display: flex;

    gap: 10px;

    border: 1px solid var(--midia-borda);
    border-radius: 7px;

    cursor: pointer;

}


.admin-midia-check.destaque {

    background: #f8fbff;

}


.admin-midia-check input {

    margin-top: 4px;

}


.admin-midia-check div {

    display: flex;

    flex-direction: column;

}


.admin-midia-check strong {

    font-size: 11px;

}


.admin-midia-check span {

    margin-top: 2px;

    color: var(--midia-secundaria);

    font-size: 9px;

}


/* =========================================================
   STATUS
========================================================= */

.admin-midia-status {

    min-height: 18px;

    margin-top: 12px;

    font-size: 10px;

}


.admin-midia-status.erro {

    color: var(--midia-vermelho);

}


.admin-midia-modal-acoes {

    margin-top: 18px;

    display: flex;

    justify-content: flex-end;

    gap: 7px;

}


/* =========================================================
   VAZIO
========================================================= */

.admin-midia-vazio {

    padding: 40px 20px;

    color: var(--midia-secundaria);

    text-align: center;

    font-size: 11px;

}


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

@media (max-width: 800px) {

    .admin-midia-page {

        padding: 22px 12px;

    }


    .admin-midia-topo {

        flex-direction: column;

        align-items: flex-start;

    }


    .admin-midia-indicadores {

        grid-template-columns: 1fr 1fr;

    }


    .admin-midia-indicador:last-child {

        grid-column: 1 / -1;

    }


    .admin-midia-card-topo {

        flex-direction: column;

        align-items: stretch;

    }


    .admin-midia-filtros {

        flex-direction: column;

    }


    .admin-midia-filtros input {

        width: 100%;

    }


    .admin-evento-item {

        grid-template-columns: 1fr;

    }


    .admin-evento-acoes {

        justify-content: flex-start;

    }

}


/* =========================================================
   E7.4C11 — GERENCIAR MÍDIAS | DESIGN SYSTEM IECJS
========================================================= */

.admin-midia-page {
    background: transparent !important;
    color: var(--text-primary, #17324A) !important;
}

.admin-midia-topo h1,
.admin-midia-card-topo h2,
.admin-midia-modal-topo h2,
#formEvento,
.campo label {
    color: var(--text-primary, #17324A) !important;
}

.admin-midia-topo p,
.admin-midia-card-topo p,
.admin-evento-data,
.campo small,
.admin-midia-check span,
.admin-midia-vazio {
    color: var(--text-secondary, #79869F) !important;
}

.admin-midia-subtitulo,
.admin-midia-card-topo > div > span {
    color: var(--primary, #22B8EF) !important;
}

.admin-midia-indicador,
.admin-midia-card,
.admin-evento-item,
.admin-midia-modal-box,
.admin-midia-check {
    background: var(--bg-surface, #FEFEFE) !important;
    color: var(--text-primary, #17324A) !important;
    border-color: var(--border-soft, rgba(23,50,74,.14)) !important;
    box-shadow: var(--shadow-sm, 0 6px 18px rgba(23,50,74,.07)) !important;
}

.admin-midia-check.destaque {
    background: var(--accent-soft, rgba(215,176,124,.16)) !important;
    border-color: color-mix(in srgb, var(--accent, #D7B07C) 45%, var(--border-soft, rgba(23,50,74,.14))) !important;
}

.admin-midia-card-topo,
.admin-midia-modal-topo,
.admin-midia-modal-acoes,
.admin-evento-item {
    border-color: var(--border-soft, rgba(23,50,74,.14)) !important;
}

.admin-midia-filtros :is(input, select),
#formEvento :is(input, select, textarea) {
    background: var(--iecjs-campo, #FEFEFE) !important;
    color: var(--text-primary, #17324A) !important;
    border: 1px solid var(--border-soft, rgba(23,50,74,.14)) !important;
    border-radius: var(--radius-sm, 8px) !important;
}

.admin-midia-filtros :is(input, select):focus,
#formEvento :is(input, select, textarea):focus {
    border-color: var(--primary, #22B8EF) !important;
    box-shadow: 0 0 0 3px var(--primary-soft, rgba(34,184,239,.12));
}

.btn-midia-principal {
    min-height: 42px;
    border-color: transparent !important;
    border-radius: var(--radius-sm, 8px) !important;
    background: linear-gradient(135deg, var(--primary, #22B8EF), var(--primary-hover, #46C3F1)) !important;
    color: #09131D !important;
    font-weight: 700;
    text-decoration: none !important;
    box-shadow: 0 8px 18px rgba(34,184,239,.14);
}

.btn-midia-secundario,
.admin-evento-acoes button {
    min-height: 38px;
    border: 1px solid var(--border-soft, rgba(23,50,74,.14)) !important;
    border-radius: var(--radius-sm, 8px) !important;
    background: var(--bg-surface-elevated, #F2F6F8) !important;
    color: var(--text-primary, #17324A) !important;
    text-decoration: none !important;
}

.admin-evento-acoes .btn-gerenciar-evento {
    border-color: var(--primary, #22B8EF) !important;
    color: var(--primary, #22B8EF) !important;
}

.admin-evento-acoes .btn-definir-atual {
    border-color: color-mix(in srgb, var(--success, #2FBF71) 42%, transparent) !important;
    color: var(--success, #2FBF71) !important;
}

.admin-evento-acoes .btn-excluir-evento {
    border-color: color-mix(in srgb, var(--danger, #E5484D) 38%, transparent) !important;
    color: var(--danger, #E5484D) !important;
}

.admin-midia-modal {
    backdrop-filter: blur(5px);
}

.admin-midia-modal-topo > button {
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--border-soft, rgba(23,50,74,.14)) !important;
    background: var(--bg-surface-elevated, #F2F6F8) !important;
    color: var(--text-primary, #17324A) !important;
}

html[data-theme="dark"] .admin-midia-page :is(
    .admin-midia-indicador,
    .admin-midia-card,
    .admin-evento-item,
    .admin-midia-modal-box,
    .admin-midia-check
) {
    background: var(--bg-surface, #102536) !important;
    color: var(--text-primary, #F8F6F0) !important;
}

html[data-theme="dark"] .admin-midia-page .admin-midia-check.destaque {
    background: var(--accent-soft, rgba(216,180,120,.12)) !important;
}

html[data-theme="dark"] .admin-midia-page :is(h1,h2,h3,strong,label,#formEvento) {
    color: var(--text-primary, #F8F6F0) !important;
}

html[data-theme="dark"] .admin-midia-page :is(p,small,.admin-evento-data,.admin-midia-check span,.admin-midia-vazio) {
    color: var(--text-secondary, #ABB8C4) !important;
}

html[data-theme="dark"] .admin-midia-page :is(input,select,textarea) {
    background: var(--bg-section, #0D1C29) !important;
    color: var(--text-primary, #F8F6F0) !important;
    border-color: var(--border-soft, rgba(171,184,196,.14)) !important;
    color-scheme: dark;
}

@media (max-width: 760px) {
    .admin-midia-page {
        padding: 22px 14px 48px !important;
    }

    .admin-midia-topo {
        align-items: stretch !important;
    }

    .admin-midia-topo-acoes {
        width: 100%;
        display: grid !important;
        grid-template-columns: 1fr 1fr;
    }

    .admin-midia-topo-acoes > * {
        width: 100%;
        box-sizing: border-box;
    }

    .admin-midia-indicadores {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }

    .admin-midia-indicador:last-child {
        grid-column: 1 / -1;
    }

    .admin-midia-card-topo {
        align-items: stretch !important;
    }

    .admin-midia-filtros {
        width: 100%;
        grid-template-columns: 1fr !important;
    }

    .admin-evento-item {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .admin-evento-acoes {
        justify-content: stretch !important;
    }

    .admin-evento-acoes button {
        flex: 1 1 120px;
    }

    .admin-midia-modal {
        padding: 10px;
        align-items: flex-end;
    }

    .admin-midia-modal-box {
        max-height: calc(100dvh - 20px);
        border-radius: var(--radius-md, 12px) var(--radius-md, 12px) 0 0 !important;
    }
}


/* =========================================================
   DRIVE V2 — SELETOR DE PASTAS DE MÍDIAS
========================================================= */

.campo-drive-midias {
    gap: 8px;
}

.midias-drive-selecao {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 13px;
    border: 1px solid var(--border-soft, rgba(23, 50, 74, .14));
    border-radius: var(--radius-sm, 8px);
    background: var(--bg-surface-elevated, #F2F6F8);
}

.midias-drive-selecao-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.midias-drive-selecao-info > span,
.midias-drive-navegador-topo span {
    color: var(--text-secondary, #79869F);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.midias-drive-selecao-info strong,
.midias-drive-navegador-topo strong {
    color: var(--text-primary, #17324A);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.midias-drive-selecao-info small,
.midias-drive-navegador-topo small {
    color: var(--text-secondary, #79869F);
    font-size: 9px;
    overflow-wrap: anywhere;
}

.midias-drive-navegador {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 13px;
    border: 1px solid var(--border-soft, rgba(23, 50, 74, .14));
    border-radius: var(--radius-md, 12px);
    background: var(--bg-surface, #FEFEFE);
    box-shadow: var(--shadow-sm, 0 6px 18px rgba(23, 50, 74, .07));
}

.midias-drive-navegador[hidden] {
    display: none !important;
}

.midias-drive-navegador-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.midias-drive-navegador-topo > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.midias-drive-navegador-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.midias-drive-navegador-acoes .btn-midia-secundario {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 9px;
}

.midias-drive-pesquisa input,
.midias-drive-manual-linha input {
    width: 100%;
    min-height: 40px;
    padding: 9px 10px;
    box-sizing: border-box;
    border: 1px solid var(--border-soft, rgba(23, 50, 74, .14));
    border-radius: var(--radius-sm, 8px);
    background: var(--iecjs-campo, #FEFEFE);
    color: var(--text-primary, #17324A);
    font: inherit;
    outline: none;
}

.midias-drive-pastas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    max-height: 250px;
    overflow-y: auto;
    padding: 2px;
}

.midias-drive-pasta {
    min-width: 0;
    min-height: 45px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border: 1px solid var(--border-soft, rgba(23, 50, 74, .14));
    border-radius: var(--radius-sm, 8px);
    background: var(--bg-surface-elevated, #F2F6F8);
    color: var(--text-primary, #17324A);
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease, background .15s ease;
}

.midias-drive-pasta:hover {
    border-color: var(--primary, #22B8EF);
    transform: translateY(-1px);
}

.midias-drive-pasta strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
}

.midias-drive-pasta-icone {
    color: var(--primary, #22B8EF);
    font-size: 13px;
}

.midias-drive-pasta-seta {
    color: var(--text-secondary, #79869F);
    font-size: 17px;
}

.midias-drive-vazio {
    grid-column: 1 / -1;
    padding: 20px 12px;
    border: 1px dashed var(--border-soft, rgba(23, 50, 74, .14));
    border-radius: var(--radius-sm, 8px);
    color: var(--text-secondary, #79869F);
    text-align: center;
    font-size: 9px;
}

.midias-drive-vazio.erro {
    color: var(--danger, #E5484D);
}

.midias-drive-resumo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 3px;
}

.midias-drive-resumo > span {
    color: var(--text-secondary, #79869F);
    font-size: 9px;
}

.midias-drive-manual {
    padding: 10px 11px;
    border: 1px dashed var(--border-soft, rgba(23, 50, 74, .14));
    border-radius: var(--radius-sm, 8px);
    background: color-mix(in srgb, var(--bg-surface-elevated, #F2F6F8) 72%, transparent);
}

.midias-drive-manual summary {
    color: var(--text-secondary, #79869F);
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
}

.midias-drive-manual-linha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
    margin-top: 9px;
}

.midias-drive-manual > small {
    display: block;
    margin-top: 6px;
}

html[data-theme="dark"] .admin-midia-page :is(
    .midias-drive-selecao,
    .midias-drive-pasta,
    .midias-drive-manual
) {
    background: var(--bg-section, #0D1C29) !important;
    border-color: var(--border-soft, rgba(171, 184, 196, .14)) !important;
}

html[data-theme="dark"] .admin-midia-page .midias-drive-navegador {
    background: var(--bg-surface, #102536) !important;
    border-color: var(--border-soft, rgba(171, 184, 196, .14)) !important;
}

html[data-theme="dark"] .admin-midia-page :is(
    .midias-drive-selecao-info strong,
    .midias-drive-navegador-topo strong,
    .midias-drive-pasta strong
) {
    color: var(--text-primary, #F8F6F0) !important;
}

html[data-theme="dark"] .admin-midia-page :is(
    .midias-drive-selecao-info span,
    .midias-drive-selecao-info small,
    .midias-drive-navegador-topo span,
    .midias-drive-navegador-topo small,
    .midias-drive-resumo > span,
    .midias-drive-manual summary,
    .midias-drive-vazio
) {
    color: var(--text-secondary, #ABB8C4) !important;
}

@media (max-width: 760px) {
    .midias-drive-selecao {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .midias-drive-selecao > button {
        width: 100%;
    }

    .midias-drive-navegador-topo {
        flex-direction: column;
        align-items: stretch;
    }

    .midias-drive-navegador-topo > button {
        width: 100%;
    }

    .midias-drive-navegador-acoes {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .midias-drive-navegador-acoes > button:last-child {
        grid-column: 1 / -1;
    }

    .midias-drive-pastas {
        grid-template-columns: 1fr;
        max-height: 36dvh;
    }

    .midias-drive-resumo {
        flex-direction: column;
        align-items: stretch;
    }

    .midias-drive-resumo > span {
        text-align: center;
    }

    .midias-drive-resumo > button {
        width: 100%;
    }

    .midias-drive-manual-linha {
        grid-template-columns: 1fr;
    }

    .midias-drive-manual-linha > button {
        width: 100%;
    }
}