/* Santuário ao Vivo: seletor de câmera de ponta a ponta e o player ([a12_celebracoes_cameras]).
   Cores dos tokens do kit (a paleta do núcleo pinta por cima); nenhuma regra mira id de elemento.
   A lista de missas do dia usa o desenho da programação da TV (CSS do a12-programacao). */
.a12-cel-cam { --cel-marca: var(--e-global-color-a12marca, #7B4A32); --cel-escura: var(--e-global-color-a12marcaescura, #4B2D22); --cel-sup: var(--e-global-color-a12superficie, #EFE1D8); --cel-sutil: var(--e-global-color-a12superficiesutil, #FAF5F2); --cel-fio: color-mix(in srgb, var(--cel-marca) 22%, transparent); display: grid; gap: 20px; font-family: var(--e-global-typography-text-font-family, Roboto), sans-serif; color: var(--cel-marca); }

/* o botão do seletor: cartão largo com a câmera escolhida */
.a12-cel-cam__sel { position: relative; }
.a12-cel-cam__atual.a12-cel-cam__atual { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; align-items: center; gap: 20px; width: 100%; min-height: 114px; margin: 0; padding: 12px 20px 12px 12px; border: 1px solid var(--cel-fio); border-radius: 20px; background: var(--cel-sup); color: var(--cel-marca); font: inherit; text-align: left; text-transform: none; letter-spacing: normal; cursor: pointer; transition: background-color .2s, box-shadow .2s; }
.a12-cel-cam__atual.a12-cel-cam__atual:hover { background: color-mix(in srgb, var(--cel-sup) 82%, var(--cel-marca)); color: var(--cel-marca); }
.a12-cel-cam__atual.a12-cel-cam__atual:focus-visible { outline: 2px solid var(--cel-escura); outline-offset: 2px; }
.a12-cel-cam__atual[aria-expanded="true"] { box-shadow: 0 2px 6px rgba(75, 45, 34, .12); }
.a12-cel-cam__foto { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: 12px; object-fit: cover; background: var(--cel-sutil); }
.a12-cel-cam__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.a12-cel-cam__rot { font-family: var(--e-global-typography-075d21b-font-family, inherit), sans-serif; font-size: .95rem; text-transform: uppercase; letter-spacing: .03em; color: var(--cel-marca); }
.a12-cel-cam__nome { font-size: 1.5rem; line-height: 1.25; font-weight: 600; color: var(--cel-escura); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a12-cel-cam__estado { display: inline-flex; align-items: center; gap: 0; min-width: 0; font-size: .95rem; line-height: 1.4; color: var(--cel-marca); }
.a12-cel-cam__estado-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a12-cel-cam__estado .a12-cel-pt { flex: none; }
.a12-cel-cam__estado:not(.is-missa) .a12-cel-pt { animation: none; opacity: .55; } /* câmera sempre no ar; só a missa pulsa */
.a12-cel-cam__estado:not(.is-missa) .a12-cel-pt::after { display: none; }
.a12-cel-cam__estado.is-missa { font-weight: 600; color: var(--cel-escura); }
.a12-cel-cam__trocar { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px 0 18px; border-radius: 22px; background: #fff; color: var(--cel-marca); font-size: .95rem; font-weight: 500; }
.a12-cel-cam__trocar svg { transition: transform .2s; }
.a12-cel-cam__atual[aria-expanded="true"] .a12-cel-cam__trocar svg { transform: rotate(180deg); }

/* a lista: painel por cima do player, duas colunas no desktop */
.a12-cel-cam__lista { position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; right: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; max-height: min(70vh, 620px); margin: 0; padding: 8px; overflow-y: auto; overscroll-behavior: contain; list-style: none; border-radius: 20px; background: #fff; box-shadow: 0 8px 28px rgba(43, 26, 19, .22), 0 2px 6px rgba(43, 26, 19, .12); scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--cel-marca) 35%, transparent) transparent; }
.a12-cel-cam__lista[hidden] { display: none; }
.a12-cel-cam__lista:focus { outline: none; }
.a12-cel-cam__opcao { display: grid; grid-template-columns: 128px minmax(0, 1fr) 22px; align-items: center; gap: 14px; margin: 0; padding: 8px; border-radius: 14px; cursor: pointer; transition: background-color .15s; }
.a12-cel-cam__opcao:hover, .a12-cel-cam__opcao.is-ativa { background: var(--cel-sutil); }
.a12-cel-cam__lista:focus-visible .a12-cel-cam__opcao.is-ativa { box-shadow: inset 0 0 0 2px var(--cel-escura); }
.a12-cel-cam__opcao[aria-selected="true"] { background: var(--cel-sup); }
.a12-cel-cam__opcao .a12-cel-cam__nome { font-size: 1.05rem; }
.a12-cel-cam__opcao .a12-cel-cam__estado { font-size: .875rem; }
.a12-cel-cam__check { color: var(--cel-marca); visibility: hidden; }
.a12-cel-cam__opcao[aria-selected="true"] .a12-cel-cam__check { visibility: visible; }

/* o player */
.a12-cel-cam__player { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: var(--cel-escura); scroll-margin-top: 120px; }
.a12-cel-cam__poster, .a12-cel-cam__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; display: block; }
.a12-cel-cam__poster { transition: transform .5s ease; }
.a12-cel-cam__play.a12-cel-cam__play { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; cursor: pointer; background: linear-gradient(to top, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 55%); transition: background-color .2s; }
.a12-cel-cam__play span { position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%; background: rgba(255, 255, 255, .92); transition: transform .2s ease, background-color .2s ease; }
.a12-cel-cam__play span::after { content: ""; position: absolute; left: 35px; top: 27px; border-left: 26px solid var(--cel-marca); border-top: 17px solid transparent; border-bottom: 17px solid transparent; transition: border-left-color .2s; }
.a12-cel-cam__player:hover .a12-cel-cam__poster { transform: scale(1.02); }
.a12-cel-cam__player:hover .a12-cel-cam__play, .a12-cel-cam__play:focus-visible { background-color: rgba(43, 26, 19, .18); }
.a12-cel-cam__player:hover .a12-cel-cam__play span, .a12-cel-cam__play:focus-visible span { transform: scale(1.08); background: var(--cel-marca); }
.a12-cel-cam__player:hover .a12-cel-cam__play span::after, .a12-cel-cam__play:focus-visible span::after { border-left-color: #fff; }
.a12-cel-cam__play:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.a12-cel-cam__legenda { position: absolute; left: 20px; top: 20px; display: inline-flex; align-items: center; padding: 7px 16px; border-radius: 32px; background: rgba(255, 255, 255, .92); color: var(--cel-escura); font-size: .95rem; font-weight: 500; pointer-events: none; }
.a12-cel-cam__abrir { position: absolute; right: 16px; bottom: 16px; z-index: 2; padding: 6px 14px; border-radius: 32px; background: rgba(255, 255, 255, .92); color: var(--cel-escura); font-size: .85rem; font-weight: 500; text-decoration: none; opacity: 0; transition: opacity .2s; }
.a12-cel-cam__abrir:hover { color: var(--cel-escura); text-decoration: underline; }
.a12-cel-cam__player:hover .a12-cel-cam__abrir, .a12-cel-cam__abrir:focus-visible { opacity: 1; }
.a12-cel-cam__player.is-tocando .a12-cel-cam__poster, .a12-cel-cam__player.is-tocando .a12-cel-cam__play, .a12-cel-cam__player.is-tocando .a12-cel-cam__legenda, .a12-cel-cam__player.is-tocando .a12-cel-cam__abrir { display: none; }
/* anúncio da troca de câmera só para leitor de tela: quem vê já tem o seletor */
.a12-cel-cam__aviso { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* missas do dia: o nome é o caminho para a câmera do lugar */
.a12-cel-pg .a12-pg__item[data-camera] .a12-pg__nome a { cursor: pointer; }
.a12-cel-pg .a12-pg__item.is-camera-atual { box-shadow: inset 4px 0 0 var(--cel-marca, #7B4A32); }

@media (max-width: 1024px) {
	.a12-cel-cam__abrir { opacity: 1; }
}
@media (max-width: 767px) {
	.a12-cel-cam__atual.a12-cel-cam__atual { grid-template-columns: 104px minmax(0, 1fr) auto; gap: 12px; min-height: 0; padding: 10px 12px 10px 10px; border-radius: 16px; }
	.a12-cel-cam__nome { font-size: 1.15rem; }
	.a12-cel-cam__estado { font-size: .85rem; }
	.a12-cel-cam__trocar { width: 44px; padding: 0; justify-content: center; }
	.a12-cel-cam__trocar span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.a12-cel-cam__lista { grid-template-columns: minmax(0, 1fr); max-height: 65vh; }
	.a12-cel-cam__opcao { grid-template-columns: 96px minmax(0, 1fr) 22px; gap: 12px; }
	.a12-cel-cam__player { border-radius: 16px; }
	.a12-cel-cam__play span { width: 68px; height: 68px; margin: -34px 0 0 -34px; }
	.a12-cel-cam__play span::after { left: 27px; top: 21px; border-left-width: 20px; border-top-width: 13px; border-bottom-width: 13px; }
	.a12-cel-cam__legenda { left: 12px; top: 12px; padding: 5px 12px; font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) {
	.a12-cel-cam__poster, .a12-cel-cam__play span, .a12-cel-cam__trocar svg { transition: none; }
	.a12-cel-cam__player:hover .a12-cel-cam__poster { transform: none; }
}