.drive-player-wrapper {
    position: relative;
    width: 100%;
    height: 60px;
    overflow: hidden;
    border-radius: 0.5rem;
    background-color: #1e293b;
}
.drive-player-wrapper iframe {
    position: absolute;
    top: -260px;
    left: 0;
    width: 100%;
    height: 706px;
    border: 0;
}
#modal-admin { transition: opacity 0.2s; }
#painel-admin { transition: opacity 0.2s; }

/* Estilização e contenção de scroll para Menus Laterais (Mobile e Desktop) */
.sidebar-scroll-container {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(71, 85, 105, 0.8) rgba(15, 23, 42, 0.4);
}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.4);
    border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(71, 85, 105, 0.8);
    border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 1);
}

/* Estilos para Painéis Expansíveis (Accordions) */
.accordion-content {
    transition: max-height 0.25s ease-in-out, opacity 0.2s ease-in-out;
}
.accordion-arrow {
    transition: transform 0.2s ease-in-out;
}
.accordion-open .accordion-arrow {
    transform: rotate(180deg);
}

/* Estilo para preview de imagem de eventos */
.event-banner-preview {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* ===================== SAFE AREA & SUPORTE MOBILE NATIVO ===================== */
:root {
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);

    /* TOKENS OFICIAIS DA MARCA LITURGE */
    --liturge-gold-50: #FFFBEB;
    --liturge-gold-100: #FEF3C7;
    --liturge-gold-200: #FDE68A;
    --liturge-gold-300: #FCD34D;
    --liturge-gold-400: #FBBF24;
    --liturge-gold-500: #F59E0B;
    --liturge-gold-600: #D97706;
    --liturge-gold-700: #B45309;
    --liturge-gold-800: #92400E;
    --liturge-gold-900: #78350F;
    --liturge-gold-950: #451A03;

    --liturge-night-800: #111827;
    --liturge-night-850: #0D1526;
    --liturge-night-900: #0B111E;
    --liturge-night-950: #070B14;
}

/* EFEITOS E TEXTURAS DO BRANDBOOK OFICIAL */
.glow-amber {
    filter: drop-shadow(0 0 25px rgba(245, 166, 35, 0.45));
}
.glow-node {
    filter: drop-shadow(0 0 8px rgba(255, 213, 79, 0.8));
}
.matrix-bg-dark {
    background-image: radial-gradient(rgba(245, 158, 11, 0.08) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* Aplicação de Safe Area no body para respeitar a câmera frontal e barra de gestos */
body {
    padding-top: var(--safe-area-top);
    padding-bottom: var(--safe-area-bottom);
    padding-left: var(--safe-area-left);
    padding-right: var(--safe-area-right);
    box-sizing: border-box;
}

/* Suporte rigoroso de Safe Area para o Painel Administrativo e Menus Laterais Fixos */
#painel-admin {
    padding-top: max(var(--safe-area-top), env(safe-area-inset-top, 0px));
    padding-bottom: max(var(--safe-area-bottom), env(safe-area-inset-bottom, 0px));
    padding-left: max(var(--safe-area-left), env(safe-area-inset-left, 0px));
    padding-right: max(var(--safe-area-right), env(safe-area-inset-right, 0px));
    box-sizing: border-box;
}

#admin-sidebar-menu,
#sidebar-menu {
    padding-top: max(var(--safe-area-top), env(safe-area-inset-top, 0px), 1.5rem) !important;
    padding-bottom: max(var(--safe-area-bottom), env(safe-area-inset-bottom, 0px), 1.5rem) !important;
}

/* Modais em tela cheia com respeito a Safe Area */
.modal-safe-area,
[id^="modal-"] {
    padding-top: max(var(--safe-area-top), env(safe-area-inset-top, 0px), 0.5rem);
    padding-bottom: max(var(--safe-area-bottom), env(safe-area-inset-bottom, 0px), 0.5rem);
    padding-left: max(var(--safe-area-left), env(safe-area-inset-left, 0px), 0.5rem);
    padding-right: max(var(--safe-area-right), env(safe-area-inset-right, 0px), 0.5rem);
    box-sizing: border-box;
}

/* Otimização especial para celular na horizontal (Landscape / Modo Estante/Palco) */
@media (orientation: landscape) and (max-height: 540px) {
    .modal-cifra-card,
    .modal-letra-card {
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        border: 0 !important;
        padding: 0.5rem !important;
    }
}

/* ===================== CLASSES UTILITÁRIAS OFICIAIS LITURGE ===================== */
.badge-gold {
    background-color: rgba(245, 158, 11, 0.1);
    color: #FBBF24;
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 9999px;
    padding: 0.125rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.btn-liturge-primary {
    background: linear-gradient(to right, #F59E0B, #D97706);
    color: #070B14;
    font-weight: 700;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 10px 15px -3px rgba(245, 158, 11, 0.2);
}
.btn-liturge-primary:hover {
    background: linear-gradient(to right, #FBBF24, #F59E0B);
}

.btn-liturge-secondary {
    background-color: #1E293B;
    color: #E2E8F0;
    border: 1px solid rgba(51, 65, 85, 0.8);
    transition: all 0.2s ease-in-out;
}
.btn-liturge-secondary:hover {
    background-color: #334155;
    color: #FFFFFF;
    border-color: rgba(245, 158, 11, 0.4);
}

.glow-amber {
    filter: drop-shadow(0 0 25px rgba(245, 166, 35, 0.45));
}

.glow-node {
    filter: drop-shadow(0 0 8px rgba(255, 213, 79, 0.8));
}

.matrix-bg-dark {
    background-image: radial-gradient(rgba(245, 158, 11, 0.1) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* ===================== TEMA CLARO (LIGHT MODE) ===================== */

/* 1. Mapeamento de superfícies e cores no modo claro */
html.theme-light,
.theme-light {
    --theme-night-800: #e2e8f0;
    --theme-night-800-rgb: 226 232 240;
    --theme-night-850: #f1f5f9;
    --theme-night-850-rgb: 241 245 249;
    --theme-night-900: #ffffff;
    --theme-night-900-rgb: 255 255 255;
    --theme-night-950: #f8fafc;
    --theme-night-950-rgb: 248 250 252;

    --theme-slate-700: #cbd5e1;
    --theme-slate-700-rgb: 203 213 225;
    --theme-slate-800: #e2e8f0;
    --theme-slate-800-rgb: 226 232 240;
    --theme-slate-850: #f1f5f9;
    --theme-slate-850-rgb: 241 245 249;
    --theme-slate-900: #ffffff;
    --theme-slate-900-rgb: 255 255 255;
    --theme-slate-950: #f8fafc;
    --theme-slate-950-rgb: 248 250 252;

    color-scheme: light;
}

/* 2. Fundo geral e texto base */
html.theme-light body {
    background-color: #f8fafc !important;
    color: #1e293b;
}

/* 3. Textos e títulos de alto contraste */
html.theme-light h1,
html.theme-light h2,
html.theme-light h3,
html.theme-light h4,
html.theme-light h5 {
    color: #0f172a;
}

/* Inversão de texto branco para escuro, preservando botões coloridos, badges e banners */
html.theme-light .text-white:not(.btn-liturge-primary):not([class*="bg-amber-"]):not([class*="bg-liturge-"]):not([class*="bg-emerald-"]):not([class*="bg-indigo-"]):not([class*="bg-purple-"]):not([class*="bg-blue-"]):not([class*="bg-rose-"]):not([class*="bg-red-"]):not([class*="from-"]):not([class*="to-"]):not(.badge-gold):not(.no-light-invert) {
    color: #0f172a;
}

/* Inversão forçada e contraste estrito para classes text-slate no tema claro */
html.theme-light .text-slate-950,
html.theme-light .text-slate-900,
html.theme-light [class*="text-slate-900"],
html.theme-light [class*="text-slate-950"] {
    color: #0f172a !important;
}

html.theme-light .text-slate-850,
html.theme-light .text-slate-800,
html.theme-light [class*="text-slate-800"] {
    color: #1e293b !important;
}

html.theme-light .text-slate-700,
html.theme-light [class*="text-slate-700"] {
    color: #334155 !important;
}

html.theme-light .text-slate-600,
html.theme-light [class*="text-slate-600"] {
    color: #475569 !important;
}

html.theme-light .text-slate-500,
html.theme-light [class*="text-slate-500"] {
    color: #64748b !important;
}

html.theme-light .text-slate-100,
html.theme-light .text-slate-200 {
    color: #1e293b;
}

html.theme-light .text-slate-300 {
    color: #334155;
}

html.theme-light .text-slate-400 {
    color: #64748b;
}

/* 4. Bordas e sombras para cartões no modo claro */
html.theme-light .border-slate-800,
html.theme-light .border-slate-700 {
    border-color: #e2e8f0;
}

html.theme-light .border-slate-800\/60,
html.theme-light .border-slate-800\/80,
html.theme-light .border-slate-700\/50,
html.theme-light .border-slate-700\/80 {
    border-color: rgba(226, 232, 240, 0.9);
}

html.theme-light .bg-night-900,
html.theme-light .bg-night-900\/90,
html.theme-light .bg-night-900\/95,
html.theme-light .bg-slate-900,
html.theme-light .bg-slate-900\/90 {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
}

/* 5. Inputs, textareas e selects no tema claro */
html.theme-light input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]),
html.theme-light select,
html.theme-light textarea {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

html.theme-light input:focus,
html.theme-light select:focus,
html.theme-light textarea:focus {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 1px #f59e0b;
}

html.theme-light input::placeholder,
html.theme-light textarea::placeholder {
    color: #94a3b8 !important;
}

/* 6. Botões secundários */
html.theme-light .btn-liturge-secondary {
    background-color: #f1f5f9;
    color: #1e293b;
    border-color: #cbd5e1;
}

html.theme-light .btn-liturge-secondary:hover {
    background-color: #e2e8f0;
    color: #0f172a;
    border-color: #94a3b8;
}

/* 7. Menus, Sidebar e Barras de Navegação */
html.theme-light #sidebar-menu,
html.theme-light #admin-sidebar-menu {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}

html.theme-light #fixed-player-bar {
    background-color: rgba(255, 255, 255, 0.96) !important;
    border-color: #e2e8f0 !important;
}
html.theme-light #fixed-player-bar #nowPlayingTitle {
    color: #0f172a !important;
}

html.theme-light #user-session-bar {
    background-color: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.07);
}

html.theme-light #btn-toggle-theme {
    background-color: #ffffff;
    border-color: #e2e8f0;
    color: #334155;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
html.theme-light #btn-toggle-theme:hover {
    background-color: #f1f5f9;
    color: #0f172a;
}

html.theme-light #btn-toggle-theme-sidebar {
    color: #334155;
}
html.theme-light #btn-toggle-theme-sidebar:hover {
    background-color: #f1f5f9;
    color: #0f172a;
}

/* 8. Hovers de listas e botões de navegação */
html.theme-light .hover\:bg-slate-800\/50:hover,
html.theme-light .hover\:bg-slate-800:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

/* 9. Texturas e Matrizes */
html.theme-light .matrix-bg-dark {
    background-image: radial-gradient(rgba(245, 158, 11, 0.15) 1px, transparent 1px);
}

/* 10. Scrollbar personalizada no modo claro */
html.theme-light .custom-scrollbar {
    scrollbar-color: rgba(148, 163, 184, 0.8) rgba(241, 245, 249, 0.8);
}
html.theme-light .custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(241, 245, 249, 0.8);
}
html.theme-light .custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.8);
}
html.theme-light .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 1);
}

/* 11. Calendário Flatpickr no tema claro */
html.theme-light .flatpickr-calendar {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1) !important;
}
html.theme-light .flatpickr-day {
    color: #334155 !important;
}
html.theme-light .flatpickr-day:hover {
    background: #f1f5f9 !important;
}
html.theme-light .flatpickr-day.selected {
    background: #f59e0b !important;
    color: #070b14 !important;
}
html.theme-light .flatpickr-current-month,
html.theme-light .flatpickr-monthDropdown-months,
html.theme-light span.flatpickr-weekday {
    color: #0f172a !important;
}

/* Adaptações do Modo Claro para Destaques de Escala e Agenda */
html.theme-light .text-emerald-300,
html.theme-light .text-emerald-200,
html.theme-light .text-emerald-400 {
    color: #047857 !important;
}
html.theme-light .bg-emerald-950,
html.theme-light .bg-emerald-950\/80,
html.theme-light .bg-emerald-950\/90,
html.theme-light .bg-emerald-950\/40,
html.theme-light .bg-emerald-950\/30,
html.theme-light .bg-emerald-950\/20 {
    background-color: #ecfdf5 !important;
}
html.theme-light .border-emerald-800,
html.theme-light .border-emerald-800\/60,
html.theme-light .border-emerald-700\/80,
html.theme-light .border-emerald-500\/50,
html.theme-light .border-emerald-500\/60,
html.theme-light .border-emerald-500\/70 {
    border-color: #10b981 !important;
}
html.theme-light .bg-cyan-950,
html.theme-light .bg-cyan-950\/80 {
    background-color: #e0f2fe !important;
}
html.theme-light .text-cyan-300 {
    color: #0369a1 !important;
}
html.theme-light .border-cyan-800\/60 {
    border-color: #7dd3fc !important;
}
html.theme-light .bg-purple-950,
html.theme-light .bg-purple-950\/80 {
    background-color: #f3e8ff !important;
}
html.theme-light .text-purple-300 {
    color: #7e22ce !important;
}
html.theme-light .border-purple-800\/60 {
    border-color: #d8b4fe !important;
}

/* Utilitários para navegação fluida de abas e cards */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}