:root{
   --fluencia-azul: #1769aa;
   --fluencia-turquesa: #0faaa5;
   --fluencia-texto: #17345f;
   --fluencia-borda: #d6e8f5;
}

*{ box-sizing: border-box; }

body{
   margin: 0;
   color: var(--fluencia-texto);
   background: linear-gradient(180deg, #fff, #f2f9fd);
}

.fluenciaPagina{
   width: min(1120px, calc(100% - 32px));
   min-height: 75vh;
   margin: 0 auto;
   padding: 34px 0 64px;
}

.fluenciaCabecalho{
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   margin-bottom: 22px;
   border: 1px solid var(--fluencia-borda);
   border-radius: 24px;
   padding: 28px 32px;
   background: linear-gradient(135deg, #fff 35%, #e5f7fb);
   box-shadow: 0 10px 30px rgba(30,75,110,.08);
}

.fluenciaCabecalho h1,
.fluenciaPainelTitulo h2{ margin: 3px 0; }
.fluenciaCabecalho p,
.fluenciaPainelTitulo p{ margin: 3px 0 0; color: #64748b; }
.fluenciaDestaque{ color: var(--fluencia-turquesa); font-size: .78rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.fluenciaVoltar{ border: 1px solid #b9d9ea; border-radius: 13px; padding: 12px 18px; color: var(--fluencia-azul); font-weight: 800; text-decoration: none; background: #fff; }

.fluenciaPainel{
   border: 1px solid var(--fluencia-borda);
   border-radius: 24px;
   padding: clamp(22px, 4vw, 36px);
   background: rgba(255,255,255,.97);
   box-shadow: 0 10px 30px rgba(30,75,110,.08);
}

.fluenciaPainelTitulo{ display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.fluenciaPainelTitulo > span{ display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #fff; font-weight: 900; background: linear-gradient(135deg, var(--fluencia-azul), var(--fluencia-turquesa)); }
.fluenciaTipos{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fluenciaTipo{ position: relative; display: grid; gap: 4px; border: 2px solid var(--fluencia-borda); border-radius: 18px; padding: 20px 20px 20px 54px; cursor: pointer; background: #fff; }
.fluenciaTipo.ativo{ border-color: var(--fluencia-turquesa); background: #effcfb; box-shadow: 0 7px 18px rgba(15,170,165,.12); }
.fluenciaTipo input{ position: absolute; top: 24px; left: 20px; width: 20px; height: 20px; accent-color: var(--fluencia-turquesa); }
.fluenciaTipo strong{ font-size: 1.12rem; }
.fluenciaTipo span{ color: #64748b; }

.fluenciaFiltros{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.fluenciaFiltros[hidden]{ display: none; }
.fluenciaFiltros fieldset{ min-width: 0; margin: 0; border: 1px solid var(--fluencia-borda); border-radius: 17px; padding: 18px; }
.fluenciaFiltros legend{ padding: 0 7px; font-weight: 900; }
.fluenciaChecks{ display: flex; flex-wrap: wrap; gap: 10px; }
.fluenciaChecks label{ display: flex; align-items: center; gap: 7px; border-radius: 999px; padding: 9px 13px; background: #edf6fb; cursor: pointer; }
.fluenciaChecks input{ width: 18px; height: 18px; accent-color: var(--fluencia-turquesa); }
.fluenciaSeparadorFiltros{ display: flex; align-items: center; gap: 10px; margin: 16px 0; color: #64748b; font-size: .75rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.fluenciaSeparadorFiltros::before,
.fluenciaSeparadorFiltros::after{ content: ""; height: 1px; flex: 1; background: var(--fluencia-borda); }
.fluenciaSeparadorFiltros span{ flex: 0 0 auto; }
.fluenciaFiltrosTabuada{ border: 1px solid var(--fluencia-borda); border-radius: 17px; padding: 18px; background: #f8fcff; }

.fluenciaCampo{ display: grid; gap: 7px; font-weight: 800; }
.fluenciaCampo select,
.fluenciaCampo input{ width: 100%; height: 52px; border: 1px solid #b9d5e7; border-radius: 13px; padding: 0 14px; color: var(--fluencia-texto); background: #fff; font: inherit; }
.fluenciaRodapeConfig{ display: grid; grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) auto; align-items: start; gap: 20px; margin-top: 24px; border-top: 1px solid var(--fluencia-borda); padding-top: 22px; }
.fluenciaCampoQuantidade,
.fluenciaCampoTempo{ width: min(360px, 100%); }
.fluenciaCampoQuantidade > div,
.fluenciaCampoTempo > div{ display: grid; grid-template-columns: 110px auto; align-items: center; gap: 10px; }
.fluenciaCampoTempo small{ color: #64748b; font-weight: 500; }
.fluenciaIniciar{ height: 52px; min-height: 52px; align-self: start; margin-top: 26px; border: 0; border-radius: 15px; padding: 0 26px; color: #fff; font-size: 1rem; font-weight: 900; background: linear-gradient(135deg, var(--fluencia-azul), var(--fluencia-turquesa)); box-shadow: 0 9px 20px rgba(23,105,170,.22); cursor: pointer; }
.fluenciaIniciar:disabled{ opacity: .65; cursor: wait; }
.fluenciaMensagem{ margin: 18px 0 0; border: 1px solid #f3b1bf; border-radius: 12px; padding: 12px 14px; color: #a11d3a; background: #fff2f5; }

.fluenciaTelaApresentacao{ display: block; min-height: 100vh; margin: 0; padding: 18px 0 0; background: #f2f9fd; }
.fluenciaApresentacao{ width: 100%; min-height: calc(100vh - 18px); margin: 0; background: transparent; }
.fluenciaApresentacao[hidden]{ display: none; }
.fluenciaApresentacao:fullscreen{ width: 100vw; height: 100vh; border: 0; border-radius: 0; background: #f5fbff; }
.fluenciaBarra{ display: grid; grid-template-columns: auto minmax(100px, 1fr) auto repeat(3, 48px); width: min(1180px, calc(100% - 36px)); align-items: center; gap: 16px; margin: 0 auto; border: 1px solid var(--fluencia-borda); border-radius: 24px; padding: 14px 20px; background: #fff; box-shadow: 0 10px 28px rgba(23,52,95,.08); }
.fluenciaBarra > div:first-child{ display: grid; }
.fluenciaBarra span{ color: var(--fluencia-turquesa); font-size: .78rem; font-weight: 900; text-transform: uppercase; }
.fluenciaBarra button{ min-height: 44px; border: 1px solid #b9d5e7; border-radius: 12px; padding: 0 16px; color: var(--fluencia-texto); font-weight: 800; background: #fff; cursor: pointer; }
.fluenciaBarra #btPausar,
.fluenciaBarra #btTelaCheia,
.fluenciaBarra #btEncerrar{ display: grid; width: 48px; height: 48px; min-width: 48px; min-height: 48px; place-items: center; padding: 0; }
.fluenciaBarra #btPausar img,
.fluenciaBarra #btTelaCheia img,
.fluenciaBarra #btEncerrar img{ display: block; width: 25px; height: 25px; object-fit: contain; }
.fluenciaProgresso{ height: 8px; overflow: hidden; border-radius: 999px; background: #dcecf6; }
.fluenciaProgresso span{ display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--fluencia-azul), var(--fluencia-turquesa)); }
.fluenciaControleTempo{ display: grid; height: 48px; grid-template-columns: 48px minmax(30px, auto) 48px 25px; align-items: center; gap: 5px; }
.fluenciaControleTempo button{ display: grid; width: 48px; height: 48px; min-height: 48px; place-items: center; border-radius: 12px; padding: 0; font-size: 1.45rem; }
.fluenciaControleTempo strong{ min-width: 30px; font-size: 1.35rem; text-align: center; }
.fluenciaControleTempo .fluenciaTempoIcone{ display: block; width: 24px; height: 24px; object-fit: contain; }
.fluenciaPalco{ display: flex; width: 100%; min-height: calc(100vh - 118px); flex-direction: column; align-items: center; justify-content: center; margin-top: 18px; border-top: 1px solid var(--fluencia-borda); padding: 40px 24px; text-align: center; background: radial-gradient(circle at center, #fff 20%, #eff9fd 100%); }
.fluenciaRotulo{ margin-bottom: 18px; color: var(--fluencia-turquesa); font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.fluenciaValor{ max-width: calc(100vw - 48px); color: var(--fluencia-texto); font-size: clamp(2rem, 12vw, 10rem); line-height: 1.05; white-space: nowrap; overflow-wrap: normal; word-break: keep-all; }
.fluenciaResposta{ min-height: 1.2em; margin-top: 18px; color: #dc3b66; font-size: clamp(3rem, 8vw, 7rem); font-weight: 900; opacity: 0; transform: scale(.75); transition: opacity .22s ease, transform .22s ease; }
.fluenciaResposta.visivel{ opacity: 1; transform: scale(1); }
.fluenciaMensagemPalco{ max-width: 620px; }
.fluenciaReiniciar{ min-height: 52px; margin-top: 24px; border: 0; border-radius: 14px; padding: 0 28px; color: #fff; font-size: 1rem; font-weight: 900; background: linear-gradient(135deg, var(--fluencia-azul), var(--fluencia-turquesa)); box-shadow: 0 9px 20px rgba(23,105,170,.22); cursor: pointer; }
.fluenciaReiniciar[hidden]{ display: none; }

@media(max-width: 680px){
   .fluenciaPagina{ width: min(100% - 20px, 1120px); padding-top: 18px; }
   .fluenciaCabecalho{ align-items: flex-start; padding: 22px 18px; }
   .fluenciaCabecalho p{ display: none; }
   .fluenciaTipos,
   .fluenciaFiltros{ grid-template-columns: 1fr; }
   .fluenciaRodapeConfig{ display: flex; align-items: stretch; flex-direction: column; }
   .fluenciaTelaApresentacao{ padding-top: 8px; }
   .fluenciaApresentacao{ min-height: calc(100vh - 8px); }
   .fluenciaIniciar{ width: 100%; margin-top: 0; }
   .fluenciaBarra{ grid-template-columns: auto auto repeat(3, 44px); gap: 4px; padding: 8px; }
   .fluenciaBarra .fluenciaProgresso{ display: none; }
   .fluenciaControleTempo{ height: 44px; grid-template-columns: 44px minmax(18px, auto) 44px 16px; gap: 0; }
   .fluenciaControleTempo button{ width: 44px; height: 44px; min-height: 44px; }
   .fluenciaControleTempo strong{ min-width: 18px; font-size: 1.2rem; }
   .fluenciaControleTempo .fluenciaTempoIcone{ width: 16px; height: 16px; }
   .fluenciaBarra #btPausar,
   .fluenciaBarra #btTelaCheia,
   .fluenciaBarra #btEncerrar{ width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
   .fluenciaPalco{ min-height: calc(100vh - 108px); margin-top: 8px; padding: 28px 14px; }
   .fluenciaValor{ max-width: calc(100vw - 28px); }
}