:root {
    --bg-dark: #07090e;
    --bg-panel: #0d1017;
    --bg-card-preparo: rgba(239, 68, 68, 0.05);
    --border-card-preparo: rgba(239, 68, 68, 0.15);
    --text-preparo: #f87171;
    --bg-card-pronto: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --text-pronto: #ffffff;
    --text-muted: #64748b;
    --font-sans: 'Plus Jakarta Sans', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --shadow-glow: 0 0 2.3vh rgba(16, 185, 129, 0.4);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
}

body {
    background: var(--bg-panel, #ffffff) !important;
    color: var(--text-main, #111827);
    font-family: var(--font-sans);
    overflow: hidden;
    width: 100vw;
    height: 100vh;
}

/* Transições e estados ocultos */
.hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: scale(0.95);
}

/* Container de Mídia (Slide Retrato 9:16 Estilo Instagram Reels / Shorts / TikTok) */
#media-container {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100vh * 9 / 16);
    max-width: 40vw;
    height: 100vh;
    z-index: 10;
    background-color: #000000;
    border-right: 0.3vh solid var(--border-color, rgba(255, 255, 255, 0.1));
    box-shadow: 0.8vw 0 2.8vw rgba(0, 0, 0, 0.5);
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    justify-content: center;
    align-items: center;
}

#media-container img, #media-container video, #media-container iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform, opacity;
}

.slide-carousel-active {
    animation: slideFromBottom 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* Animações Configuráveis de Carrossel de Mídia */
.carousel-anim-bottom-to-top .slide-carousel-active {
    animation: slideFromBottom 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.carousel-anim-top-to-bottom .slide-carousel-active {
    animation: slideFromTop 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.carousel-anim-left-to-right .slide-carousel-active {
    animation: slideFromLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.carousel-anim-right-to-left .slide-carousel-active {
    animation: slideFromRight 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.carousel-anim-fade .slide-carousel-active {
    animation: fadeInMedia 0.8s ease-in-out forwards !important;
}

@keyframes slideFromBottom {
    0% { opacity: 0; transform: translateY(100%); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes slideFromTop {
    0% { opacity: 0; transform: translateY(-100%); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes slideFromLeft {
    0% { opacity: 0; transform: translateX(-100%); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes slideFromRight {
    0% { opacity: 0; transform: translateX(100%); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInMedia {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Regra estrita para ocultar cronômetro dos cards quando showCardTime for falso */
body.hide-card-time .senha-tempo,
body.hide-card-time .col-pronto .senha-tempo,
body.hide-card-time .col-preparo .senha-tempo,
body.hide-card-time div.senha-tempo {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.average-time-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4vh;
    width: 100%;
    max-width: min(25vw, 480px);
    background: var(--bg-average-time, rgba(15, 23, 42, 0.85));
    border: var(--border-average-time, 0.22vh solid #f59e0b);
    border-radius: 1.8vh;
    padding: 0.8vh 1.4vw !important;
    margin-top: 0 !important;
    box-shadow: 0 0.9vh 2.8vh rgba(0, 0, 0, 0.35), 0 0 1.8vh rgba(245, 158, 11, 0.2);
    backdrop-filter: blur(1.5vh);
    transition: all 0.3s ease;
    z-index: 2;
    position: relative;
    box-sizing: border-box;
}

.average-time-box.hidden {
    display: none !important;
}

.average-time-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5vw;
}

.average-time-icon {
    font-size: clamp(14px, 2vh, 22px);
    line-height: 1;
}

#average-time-label {
    font-size: clamp(10px, 1.3vh, 14px);
    font-weight: 800;
    letter-spacing: 0.1vw;
    text-transform: uppercase;
    color: var(--text-average-time-label, #fde68a);
}

#average-time-value {
    font-size: var(--font-size-average-time-num, clamp(20px, 3.7vh, 40px));
    font-weight: 900;
    color: var(--text-average-time, #fbbf24);
    letter-spacing: 0.08vw;
    line-height: 1.1;
    text-shadow: 0 0.2vh 1.1vh rgba(245, 158, 11, 0.4);
}

.media-footer {
    display: none !important;
}

/* Container do Painel Principal (Encolhimento e Expansão Estilo TV Broadcast) */
#painel-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    z-index: 20;
    display: flex;
    flex-direction: column;
    padding: 0 !important; /* Painel base sem recuo para permitir topo e rodapé full bleed */
    background: var(--bg-panel, #ffffff);
    transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.8s ease;
    box-sizing: border-box;
    overflow: hidden;
}

#painel-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-panel-overlay, transparent); /* Transparência padrão para respeitar o bg-panel */
    pointer-events: none;
    z-index: 1;
}

#painel-container > * {
    position: relative;
    z-index: 2;
}

/* Cabeçalho Topo Full Bleed */
.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--padding-header, 1.3vh 2.5vw) !important;
    background: var(--bg-header, #ffc107);
    color: var(--text-header, var(--text-main, #111827));
    border-bottom: var(--border-header, none);
    border-radius: 0 !important;
    box-shadow: var(--shadow-header, 0 0.4vh 1.4vh rgba(0, 0, 0, 0.08));
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex-shrink: 0;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 1.2vw;
}

.logo-box {
    width: clamp(38px, 6.5vh, 70px);
    height: clamp(38px, 6.5vh, 70px);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 0.8vh 1.5vh rgba(0, 0, 0, 0.2);
}

.logo-box img {
    max-width: 85%;
    max-height: 85%;
    object-fit: contain;
}

#panel-title {
    font-size: clamp(20px, 3.5vh, 38px);
    font-weight: 800;
    letter-spacing: -0.05vw;
    color: var(--text-header, var(--text-main, #ffffff));
}

.time-box {
    text-align: right;
}

body.hide-clock .time-box {
    display: none !important;
}

#clock-time {
    display: block;
    font-family: var(--font-family-clock, var(--font-mono));
    font-size: var(--font-size-clock, clamp(24px, 3.9vh, 42px));
    font-weight: 800;
    color: var(--text-clock, var(--text-header, #111827)) !important;
    line-height: 1;
}

#clock-date {
    display: block;
    font-family: var(--font-family-clock, inherit);
    font-size: calc(var(--font-size-clock, clamp(24px, 3.9vh, 42px)) * 0.38);
    font-weight: 600;
    color: var(--text-clock, var(--text-header, #111827)) !important;
    opacity: 0.88;
}

/* Corpo do Painel */
.panel-body {
    display: flex;
    flex: 1;
    gap: 2vw;
    padding: 2.2vh 2.5vw 4.5vh 2.5vw !important; /* Afastado proporcionalmente do topo e rodapé */
    margin: 0 !important;
    min-height: 0;
    width: 100% !important;
    box-sizing: border-box !important;
}

.col-preparo, .col-pronto {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.col-atual {
    flex: 1.15;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 0;
    gap: 1.4vh;
    width: 100%;
}

.col-title {
    font-size: clamp(16px, 2.9vh, 32px) !important;
    font-weight: 800;
    padding: 1.4vh 1.2vw !important;
    min-height: 6.5vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 1.8vh;
    text-align: center;
    margin-top: 0.5vh !important;
    margin-bottom: 1.8vh !important;
    letter-spacing: 0.05vw;
    box-sizing: border-box !important;
}

.col-preparo .col-title {
    background-color: var(--bg-title-preparo, var(--bg-badge-preparo, rgba(239, 68, 68, 0.12)));
    color: var(--text-title-preparo, var(--text-badge-preparo, #f87171));
    border: var(--border-title-preparo, 1px solid rgba(239, 68, 68, 0.2));
}

.col-pronto .col-title {
    background-color: var(--bg-title-pronto, var(--bg-badge-pronto, rgba(16, 185, 129, 0.12)));
    color: var(--text-title-pronto, var(--text-badge-pronto, #34d399));
    border: var(--border-title-pronto, 1px solid rgba(16, 185, 129, 0.2));
}

/* Central: Senha Atual */
.atual-card {
    position: relative !important;
    overflow: hidden !important; /* Circuncreve a imagem e marca d'água 100% dentro dos limites e bordas arredondadas do card */
    background: var(--bg-card-atual, linear-gradient(135deg, #1e293b 0%, #0f172a 100%));
    border: var(--border-card-atual, 0.25vh solid var(--bg-header, #ffc107)) !important;
    box-shadow: var(--shadow-card-atual, 0 1.4vh 3.8vh rgba(0, 0, 0, 0.15));
    border-radius: 2.8vh;
    padding: 2.2vh 2vw;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 0;
    transition: all 0.5s ease;
}

.atual-title {
    position: relative !important;
    z-index: 2 !important;
    font-family: var(--font-family-atual-title, inherit) !important;
    font-size: var(--font-size-atual-title, clamp(13px, 2.2vh, 24px)) !important;
    font-weight: 800;
    color: var(--text-atual-title, var(--text-accent, #10b981)) !important;
    letter-spacing: 0.08vw;
    margin-bottom: 0.5vh;
}

.atual-number {
    position: relative !important;
    z-index: 2 !important;
    font-family: var(--font-mono);
    font-size: var(--font-size-atual-num, clamp(90px, 19vh, 220px)) !important;
    font-weight: 900;
    color: var(--text-atual-num, var(--text-main, #ffffff)) !important;
    line-height: 0.92;
    letter-spacing: -0.15vw;
    text-shadow: 0 0 2.3vh rgba(0, 0, 0, 0.05);
}

.atual-footer {
    position: relative !important;
    z-index: 2 !important;
    font-family: var(--font-family-atual-footer, inherit) !important;
    font-size: var(--font-size-atual-footer, clamp(11px, 1.6vh, 18px)) !important;
    font-weight: 800 !important;
    color: var(--text-atual-footer, var(--text-muted, #111827)) !important;
    letter-spacing: 0.08vw !important;
    margin-top: 0.5vh !important;
}

.col-atual {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Imagem Centralizada Customizável (Marca D'água Transparente Interna do Card) */
.center-img-box {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 90% !important;
    height: 90% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    pointer-events: none !important;
    z-index: 1 !important;
    opacity: 0.22 !important; /* Transparência Alpha Elegante Marca D'água */
}

.center-img-box.hidden,
.footer-center-img-box.hidden,
.logo-box.hidden {
    display: none !important;
}

.center-img-box img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    filter: drop-shadow(0 0.6vh 1.5vh rgba(0, 0, 0, 0.15)) !important;
    transition: all 0.3s ease !important;
}

.atual-card {
    position: relative !important;
    z-index: 2 !important; /* Garante que os números fiquem NÍTIDOS na frente da imagem */
}

/* Rodapé / Footer Customizável - 100% Fixo na Base da Tela */
.panel-footer {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: clamp(30px, 4.6vh, 50px) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 1.2vw !important;
    padding: var(--padding-footer, 0.8vh 1.8vw) !important;
    background: var(--bg-footer, #ffc107) !important;
    color: var(--text-footer, var(--text-main, #111827)) !important;
    border-top: var(--border-footer, none) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    z-index: 100 !important;
    box-sizing: border-box !important;
}

.footer-brand {
    position: absolute !important;
    left: 1.8vw !important;
    font-size: clamp(9px, 1.2vh, 13px) !important;
    font-weight: 800 !important;
    letter-spacing: 0.1vw !important;
    text-transform: uppercase !important;
    color: var(--text-footer, var(--text-main, #111827)) !important;
    opacity: 0.65 !important;
    pointer-events: none !important;
}

/* Configuração do Modo Split (Modo 1 e Modo 3: Dividido 50/50 ou Percentual Customizado) */
body.state-media.layout-split #media-container {
    width: var(--split-media-width, 35vw) !important;
    max-width: none !important;
    transform: translateX(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

body.state-media.layout-split #painel-container {
    position: absolute !important;
    top: 0 !important;
    width: var(--split-panel-width, 65vw) !important;
    min-width: 25vw !important;
    height: 100vh !important;
    z-index: 20 !important;
    box-shadow: -1.2vw 0 3vw rgba(0, 0, 0, 0.6);
}

body.state-media.layout-split.media-pos-left #media-container {
    left: 0 !important;
    right: auto !important;
    border-right: 0.3vh solid var(--border-color, rgba(255, 255, 255, 0.1)) !important;
    border-left: none !important;
}

body.state-media.layout-split.media-pos-left #painel-container {
    left: auto !important;
    right: 0 !important;
}

body.state-media.layout-split.media-pos-right #media-container {
    left: auto !important;
    right: 0 !important;
    border-right: none !important;
    border-left: 0.3vh solid var(--border-color, rgba(255, 255, 255, 0.1)) !important;
}

body.state-media.layout-split.media-pos-right #painel-container {
    right: auto !important;
    left: 0 !important;
}

/* Modo 3: Split Fixo - Desativa animação de transição constante */
body.layout-split-fixed #media-container,
body.layout-split-fixed #painel-container {
    transition: none !important;
}

/* Layout Responsivo no Modo Split: Topo (Senha Atual Chamada) + 2 Colunas Inferiores (Em Andamento & Pedido Pronto) */
body.state-media.layout-split .panel-body {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto 1fr !important;
    gap: 1.4vh 1vw !important;
    padding: 1.4vh 1.5vw 4.5vh 1.5vw !important;
    overflow-y: auto !important;
}

/* Card Central (Senha Atual) no TOPO em 100% da largura */
body.state-media.layout-split .col-atual {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    flex: none !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

body.state-media.layout-split .atual-card {
    width: 100% !important;
    margin-top: 0 !important;
    padding: 1.2vh 1.2vw !important;
    border-radius: 2vh !important;
    flex: none !important;
}

body.state-media.layout-split .atual-title {
    font-size: clamp(11px, 1.6vh, 18px) !important;
    margin-bottom: 0.3vh !important;
}

body.state-media.layout-split .atual-number {
    font-size: clamp(55px, 12vh, 130px) !important;
    line-height: 0.9 !important;
    font-weight: 900 !important;
}

body.state-media.layout-split .atual-footer {
    font-size: clamp(10px, 1.3vh, 14px) !important;
    margin-top: 0.3vh !important;
}

body.state-media.layout-split .average-time-box {
    width: 90% !important;
    max-width: min(22vw, 340px) !important;
    margin-top: 0.5vh !important;
    padding: 0.6vh 1vw !important;
    border-radius: 1.5vh !important;
    gap: 0.2vh !important;
}

body.state-media.layout-split .average-time-icon {
    font-size: clamp(12px, 1.6vh, 18px) !important;
}

body.state-media.layout-split #average-time-label {
    font-size: clamp(8px, 1vh, 11.5px) !important;
}

body.state-media.layout-split #average-time-value {
    font-size: clamp(16px, 2.6vh, 28px) !important;
}

/* Coluna EM ANDAMENTO (Preparo) na Esquerda Inferior */
body.state-media.layout-split .col-preparo {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
}

/* Coluna PEDIDOS PRONTOS na Direita Inferior */
body.state-media.layout-split .col-pronto {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
}

body.state-media.layout-split .col-title {
    font-size: clamp(13px, 1.8vh, 20px) !important;
    padding: 0.9vh 0.8vw !important;
    min-height: auto !important;
    margin-bottom: 0.9vh !important;
    border-radius: 1.2vh !important;
}

/* Layout no Modo Split: Ambas as colunas (PREPARANDO e PRONTOS) com cards maiores e letras bem legíveis */
body.state-media.layout-split .col-preparo .senhas-grid,
body.state-media.layout-split .col-pronto .senhas-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: max-content !important;
    grid-template-rows: none !important;
    gap: 1vh 0.8vw !important;
    align-content: start !important;
    align-items: start !important;
    justify-content: stretch !important;
}

body.state-media.layout-split .col-preparo .senhas-grid.cols-1,
body.state-media.layout-split .col-pronto .senhas-grid.cols-1 {
    grid-template-columns: 1fr !important;
}

body.state-media.layout-split .col-preparo .senha-card,
body.state-media.layout-split .col-pronto .senha-card {
    width: 100% !important;
    height: 12vh !important;
    min-height: 12vh !important;
    max-height: 12vh !important;
    flex: none !important;
    padding: 1.2vh 1vw !important;
    border-radius: 1.8vh !important;
    box-sizing: border-box !important;
}

body.state-media.layout-split .col-preparo .senha-card .senha-num,
body.state-media.layout-split .col-pronto .senha-card .senha-num {
    font-size: clamp(34px, 7vh, 76px) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    margin: 0 !important;
}

body.state-media.layout-split .senha-tempo {
    font-size: clamp(9px, 1.3vh, 15px) !important;
    margin-top: 0.4vh !important;
}

.footer-center-img-box img {
    max-height: var(--footer-img-height, clamp(24px, 4vh, 45px));
    object-fit: contain;
}

/* Animação de chamada da senha atual */
@keyframes pulseGlow {
    0% { transform: scale(1); box-shadow: 0 0 1.8vh rgba(16, 185, 129, 0.15); }
    50% { transform: scale(1.06); box-shadow: 0 0 4.5vh rgba(16, 185, 129, 0.6); border-color: #34d399; }
    100% { transform: scale(1); box-shadow: 0 0 1.8vh rgba(16, 185, 129, 0.15); }
}

.atual-card.chamando {
    animation: pulseGlow 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Grid de Senhas (Suporte a 1 ou 2 Colunas com Tamanho Proporcional) */
.senhas-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: max-content !important;
    grid-template-rows: none !important;
    gap: 1.4vh 1vw !important;
    align-content: start !important;
    align-items: start !important;
    justify-content: stretch !important;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

.senhas-grid.cols-1 {
    grid-template-columns: 1fr !important;
}

.senhas-grid.cols-2 {
    grid-template-columns: repeat(2, 1fr) !important;
}

/* Cartões de Senha com Tamanho Proporcional ao Viewport */
.senha-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 2vh;
    padding: 1.3vh 0.8vw !important;
    height: 12.8vh !important;
    min-height: 12.8vh !important;
    max-height: 12.8vh !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box !important;
    flex: none !important;
    overflow: hidden !important;
}

.senhas-grid.cols-1 .senha-card {
    height: 14.8vh !important;
    min-height: 14.8vh !important;
    max-height: 14.8vh !important;
    padding: 1.5vh 1.2vw !important;
}

.senhas-grid.cols-1 .senha-num {
    font-size: clamp(42px, 9.2vh, 100px) !important;
    line-height: 1 !important;
    margin: 0 !important;
}

.senhas-grid.cols-1 .senha-tempo {
    font-size: clamp(10px, 1.5vh, 17px) !important;
    margin-top: 0.5vh !important;
}

/* Grid Vazio / Centralizado no Box */
.senhas-grid.is-empty,
.senhas-grid:has(.empty-state-card) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    min-height: 18vh;
    flex: 1;
}

/* Empty State Card (SEM PEDIDOS / FILA VAZIA) — Discreto e sem herdar cores chamativas de cards */
.senha-card.empty-state-card,
.col-preparo .senha-card.empty-state-card,
.col-pronto .senha-card.empty-state-card {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    min-height: auto !important;
    max-width: min(25vw, 320px);
    width: 85%;
    padding: 1.4vh 1.2vw !important;
    margin: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 1.5vh !important;
    transition: all 0.3s ease;
}

.senha-card.empty-state-card.has-dashed-border {
    border: 1px dashed var(--border-empty-dashed, rgba(255, 255, 255, 0.15)) !important;
}

.senha-card.empty-state-card.no-border {
    border: none !important;
}

.senha-card.empty-state-card .empty-state-text {
    font-size: clamp(12px, 1.8vh, 20px) !important;
    font-weight: 700 !important;
    letter-spacing: 0.1vw !important;
    text-transform: uppercase;
    color: var(--text-muted, #94a3b8) !important;
    opacity: var(--empty-state-alpha, 0.5) !important; /* Discreto e elegante */
    text-align: center;
    line-height: 1.3;
    user-select: none;
}

/* Estilos de Senhas em Andamento */
.col-preparo .senha-card {
    background: var(--bg-card-preparo);
    border: var(--border-card-preparo, 1px solid rgba(255, 255, 255, 0.05));
}

.col-preparo .senha-card .senha-num {
    font-family: var(--font-mono);
    font-size: clamp(34px, 7.5vh, 82px);
    font-weight: 900;
    color: var(--text-preparo, #ffffff);
    line-height: 1;
    margin: 0;
}

/* Estilos de Senhas Prontas */
.col-pronto .senha-card {
    background: var(--bg-card-pronto);
    border: var(--border-card-pronto, none);
}

.col-pronto .senha-card .senha-num {
    font-family: var(--font-mono);
    font-size: clamp(34px, 7.5vh, 82px);
    font-weight: 900;
    color: var(--text-pronto, #ffffff);
    line-height: 1;
    margin: 0;
}

.senha-tempo {
    font-size: clamp(9px, 1.4vh, 15px);
    font-weight: 700;
    margin-top: 0.5vh;
    letter-spacing: 0.04vw;
    line-height: 1;
}

.col-preparo .senha-tempo {
    color: var(--text-tempo-preparo, rgba(255, 255, 255, 0.95));
    text-shadow: 0 0.1vh 0.3vh rgba(0, 0, 0, 0.4);
}

.col-pronto .senha-tempo {
    color: var(--text-tempo-pronto, rgba(255, 255, 255, 0.95));
    text-shadow: 0 0.1vh 0.3vh rgba(0, 0, 0, 0.4);
}

/* Animação de Entrada */
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.85);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Banner de Ativação de Áudio (Autoplay Policy) */
.audio-banner {
    position: fixed !important;
    top: 1.8vh !important;
    right: 1.8vw !important;
    z-index: 9999 !important;
    background: #10b981 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: clamp(11px, 1.4vh, 15px) !important;
    padding: 1.2vh 1.6vw !important;
    border-radius: 2.5vh !important;
    box-shadow: 0 0.9vh 3vh rgba(16, 185, 129, 0.4), 0 0 1.8vh rgba(0, 0, 0, 0.3) !important;
    cursor: pointer !important;
    animation: pulseAudioBanner 2s infinite ease-in-out !important;
    letter-spacing: 0.04vw !important;
}

@keyframes pulseAudioBanner {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Badge de Tempo Médio de Espera no Cabeçalho */
.average-time-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5vw;
    padding: 0.5vh 0.9vw;
    border-radius: 1.8vh;
    background: rgba(0, 0, 0, 0.25);
    color: #ffc107;
    font-size: clamp(10px, 1.4vh, 15px);
    font-weight: 700;
    backdrop-filter: blur(0.9vh);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.average-time-badge strong {
    font-weight: 900;
}

/* Alerta de Nova Senha - Overlay / Modal */
#call-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    background: var(--bg-overlay, rgba(7, 11, 20, 0.88)) !important; /* Fundo escuro fosco de alto contraste que oculta o painel atrás */
    backdrop-filter: blur(2.5vh);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.overlay-card {
    background: var(--bg-overlay-card, #ffffff) !important; /* Fundo 100% opaco para máximo contraste */
    border: var(--border-card-atual, 0.45vh solid var(--text-accent, #10b981)) !important;
    border-radius: 3.5vh !important;
    width: 85vw;
    max-width: min(85vw, 1200px);
    padding: 4.5vh 3vw;
    text-align: center;
    box-shadow: 0 3.5vh 9vh rgba(0, 0, 0, 0.65), 0 0 5.5vh rgba(16, 185, 129, 0.4) !important;
}

.overlay-num-box {
    background: var(--bg-overlay-numbox, rgba(16, 185, 129, 0.07)) !important;
    border: var(--border-overlay-numbox, 0.2vh solid rgba(16, 185, 129, 0.18)) !important;
    border-radius: 2.8vh;
    padding: 1.8vh 2.5vw;
    margin: 1.8vh auto;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 92%;
    box-shadow: inset 0 0.2vh 0.9vh rgba(0, 0, 0, 0.04);
}

.overlay-anim-pop .overlay-card {
    animation: popUp 1.0s cubic-bezier(0.175, 0.885, 0.32, 1.275) both !important;
}

.overlay-anim-zoom .overlay-card {
    animation: zoomModal 1.0s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

.overlay-anim-slide .overlay-card {
    animation: slideDownModal 1.0s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

.overlay-anim-bounce .overlay-card {
    animation: bounceInModal 1.1s cubic-bezier(0.68, -0.55, 0.265, 1.55) both !important;
}

.overlay-anim-fade .overlay-card {
    animation: fadeInModal 1.0s ease-in-out both !important;
}

@keyframes popUp {
    from { opacity: 0; transform: scale(0.6) translateY(9vh); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes zoomModal {
    from { opacity: 0; transform: scale(0.3); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes slideDownModal {
    from { opacity: 0; transform: translateY(-18vh); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes bounceInModal {
    0% { opacity: 0; transform: scale(0.3); }
    50% { opacity: 0.9; transform: scale(1.1); }
    70% { transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes fadeInModal {
    from { opacity: 0; }
    to { opacity: 1; }
}

.overlay-header {
    font-family: var(--font-family-atual-title, inherit) !important;
    font-size: var(--font-size-overlay-title, clamp(18px, 4.8vh, 52px)) !important;
    font-weight: 900 !important;
    color: var(--text-overlay-title, var(--text-atual-title, var(--text-accent, #10b981))) !important;
    letter-spacing: 0.15vw !important;
    margin-bottom: 1.4vh !important;
}

.overlay-number {
    font-family: var(--font-mono);
    font-size: var(--font-size-overlay-num, clamp(90px, 25vh, 280px)) !important;
    font-weight: 900 !important;
    color: var(--text-overlay-num, var(--text-atual-num, var(--text-main, #111827))) !important;
    line-height: 0.85 !important;
    letter-spacing: -0.3vw !important;
    text-shadow: 0 0 3vh rgba(0, 0, 0, 0.08);
    margin: 0 !important;
    display: inline-flex;
    justify-content: center;
    gap: 0.3vw;
    perspective: 1000px !important;
    transform-style: preserve-3d !important;
}

.overlay-number span, .prev-ov-num span {
    display: inline-block;
    opacity: 0;
    transform-style: preserve-3d !important;
    backface-visibility: visible !important;
}

.overlay-footer {
    font-family: var(--font-family-atual-footer, inherit) !important;
    font-size: var(--font-size-overlay-footer, clamp(14px, 3vh, 34px)) !important;
    font-weight: 800 !important;
    color: var(--text-overlay-footer, var(--text-atual-footer, var(--text-muted, #111827))) !important;
    letter-spacing: 0.08vw !important;
    margin-top: 1.4vh !important;
}

/* Modificadores de Velocidade da Animação dos Dígitos */
.overlay-number.speed-fast span, .prev-ov-num.speed-fast span {
    animation-duration: 1.6s !important;
}

.overlay-number.speed-medium span, .prev-ov-num.speed-medium span {
    animation-duration: 2.2s !important;
}

.overlay-number.speed-slow span, .prev-ov-num.speed-slow span {
    animation-duration: 3.0s !important;
}

/* Efeito Digitação Real / Máquina de Escrever (typewriter) */
.char-anim-typewriter span {
    animation-name: charTypewriter !important;
    animation-duration: 3.0s !important;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    animation-iteration-count: infinite !important;
    animation-fill-mode: both !important;
}

/* Efeito Onda / Digitado (wave) */
.char-anim-wave span {
    animation-name: charWave !important;
    animation-duration: 3.0s !important;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    animation-iteration-count: infinite !important;
    animation-fill-mode: both !important;
}

/* Efeito Zoom In (zoom) */
.char-anim-zoom span {
    animation-name: charZoom !important;
    animation-duration: 3.0s !important;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    animation-iteration-count: infinite !important;
    animation-fill-mode: both !important;
}

/* Efeito Giro 3D (flip) */
.char-anim-flip span {
    animation-name: charFlip !important;
    animation-duration: 3.0s !important;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    animation-iteration-count: infinite !important;
    animation-fill-mode: both !important;
}

/* Efeito Quicar (bounce) */
.char-anim-bounce span {
    animation-name: charBounce !important;
    animation-duration: 3.0s !important;
    animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
    animation-iteration-count: infinite !important;
    animation-fill-mode: both !important;
}

/* Sem Animação (none) */
.char-anim-none span {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

@keyframes charTypewriter {
    0% { opacity: 0; transform: scale(0) translateY(1.4vh); }
    10% { opacity: 1; transform: scale(1.35) translateY(-0.5vh); filter: brightness(1.3); }
    20% { opacity: 1; transform: scale(1) translateY(0); filter: brightness(1); }
    65% { opacity: 1; transform: scale(1) translateY(0); }
    78% { opacity: 0; transform: scale(0.5); }
    100% { opacity: 0; transform: scale(0); }
}

@keyframes charWave {
    0% { opacity: 0; transform: translateY(4.5vh) scale(0.65); }
    18% { opacity: 1; transform: translateY(0) scale(1); }
    60% { opacity: 1; transform: translateY(0) scale(1); }
    78% { opacity: 0; transform: translateY(-3.2vh) scale(0.85); }
    100% { opacity: 0; transform: translateY(4.5vh) scale(0.65); }
}

@keyframes charZoom {
    0% { opacity: 0; transform: scale(0.15); }
    18% { opacity: 1; transform: scale(1.25); }
    28% { opacity: 1; transform: scale(1); }
    60% { opacity: 1; transform: scale(1); }
    78% { opacity: 0; transform: scale(0.15); }
    100% { opacity: 0; transform: scale(0.15); }
}

@keyframes charFlip {
    0% { opacity: 0; transform: rotateY(-90deg) scale(0.65); }
    20% { opacity: 1; transform: rotateY(0deg) scale(1); }
    60% { opacity: 1; transform: rotateY(0deg) scale(1); }
    78% { opacity: 0; transform: rotateY(90deg) scale(0.65); }
    100% { opacity: 0; transform: rotateY(-90deg) scale(0.65); }
}

@keyframes charBounce {
    0% { opacity: 0; transform: translateY(-6.5vh) scale(0.65); }
    16% { opacity: 1; transform: translateY(1.5vh) scale(1.15); }
    26% { opacity: 1; transform: translateY(-0.8vh) scale(0.95); }
    34% { opacity: 1; transform: translateY(0) scale(1); }
    60% { opacity: 1; transform: translateY(0) scale(1); }
    78% { opacity: 0; transform: translateY(-4.2vh) scale(0.8); }
    100% { opacity: 0; transform: translateY(-6.5vh) scale(0.65); }
}

/* Indicador de Status do Som */
.sound-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5vw;
    background-color: rgba(239, 68, 68, 0.12);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.2);
    padding: 0.7vh 1vw;
    border-radius: 1vh;
    font-size: clamp(10px, 1.3vh, 14px);
    font-weight: 700;
    margin-right: 1.5vw;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0.4vh 0.9vh rgba(239, 68, 68, 0.1);
}

.sound-status.active {
    background-color: rgba(16, 185, 129, 0.12);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.2);
    box-shadow: 0 0.4vh 0.9vh rgba(16, 185, 129, 0.1);
}

/* Animação dos Caracteres no Modal */
.overlay-number span {
    display: inline-block;
    position: relative;
    animation: popLetter 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) both,
               floatLetter 1.5s ease-in-out infinite alternate;
}

@keyframes popLetter {
    0% {
        opacity: 0;
        transform: scale(0.3) translateY(5.5vh);
        filter: blur(0.7vh);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0);
    }
}

@keyframes floatLetter {
    0% {
        top: 0;
        text-shadow: 0 0 2.8vh rgba(255, 255, 255, 0.2);
    }
    100% {
        top: -2.8vh;
        text-shadow: 0 1.8vh 4.5vh rgba(255, 255, 255, 0.6);
    }
}

/* Mídia 100% Tela Cheia Alternada (Fullscreen Mode) */
body.layout-fullscreen-media #media-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    transform: translateX(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 30 !important;
}

body.layout-fullscreen-media #painel-container {
    display: none !important;
}

/* Transição Estilo Transmissão de TV / Broadcast (Split Mode: Mídia Esquerda 35vw, Painel Direita 65vw) */
body.state-media #media-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: calc(100vh * 9 / 16) !important;
    max-width: 38vw !important;
    height: 100vh !important;
    transform: translateX(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 10 !important;
}

body.state-media #painel-container {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: calc(100vw - (100vh * 9 / 16)) !important;
    min-width: 62vw !important;
    height: 100vh !important;
    z-index: 20 !important;
    padding: 0 !important;
    box-shadow: -1.2vw 0 3vw rgba(0, 0, 0, 0.6);
}

body.state-media .panel-header {
    padding: 1.1vh 2vw !important;
    border-bottom: 2px solid var(--border-color);
    margin: 0 !important;
    display: flex;
    align-items: center;
}
body.state-media .panel-header h1 {
    font-size: clamp(14px, 1.8vh, 20px);
}
body.state-media .panel-header .logo-box {
    width: clamp(28px, 3.8vh, 40px);
    height: clamp(28px, 3.8vh, 40px);
}
body.state-media .panel-header .time-box {
    display: block !important;
}
body.state-media #clock-time {
    font-size: clamp(16px, 2.4vh, 26px) !important;
}
body.state-media #clock-date {
    font-size: clamp(8px, 1vh, 11px) !important;
}

body.state-media .panel-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.4vh !important;
    flex: 1 !important;
    overflow: hidden !important;
}

body.state-media .col-preparo {
    display: none !important; /* esconde em preparo na barra lateral */
}

body.state-media .col-atual {
    flex: 0 0 auto !important;
    margin-bottom: 0.9vh !important;
    width: 100% !important;
}
body.state-media .col-atual .atual-card {
    padding: 1.5vh 1vw !important;
    border-radius: 2.2vh !important;
    background: var(--bg-card-atual, rgba(255, 255, 255, 0.06)) !important;
    border: var(--border-card-atual, 0.25vh solid var(--text-accent, #ffc107)) !important;
    box-shadow: var(--shadow-card-atual, 0 0.9vh 2.8vh rgba(0, 0, 0, 0.25), 0 0 2.3vh rgba(255, 193, 7, 0.2)) !important;
    transition: all 0.4s ease !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}
body.state-media .col-atual .atual-title {
    font-size: clamp(12px, 1.8vh, 20px) !important;
    font-weight: 900 !important;
    letter-spacing: 0.1vw !important;
    color: var(--text-accent, #ffc107) !important;
    margin-bottom: 0.2vh !important;
}
body.state-media .col-atual .atual-number {
    font-size: clamp(70px, 19vh, 210px) !important;
    font-weight: 900 !important;
    line-height: 0.85 !important;
    letter-spacing: -0.2vw !important;
    color: var(--text-atual-num, var(--text-main, #ffffff)) !important;
    margin: 0.2vh 0 0.5vh 0 !important;
    padding: 0 !important;
}
body.state-media .col-atual .atual-footer {
    font-size: clamp(10px, 1.5vh, 16px) !important;
    font-weight: 800 !important;
    letter-spacing: 0.08vw !important;
}
body.state-media .average-time-box {
    padding: 0.7vh 1vw;
    font-size: clamp(9px, 1.2vh, 13px);
    margin-top: 0.5vh;
}

body.state-media .col-pronto {
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    width: 100% !important;
    margin-bottom: 0.5vh !important;
}

body.state-media .col-pronto .col-title {
    font-size: clamp(12px, 1.8vh, 20px) !important;
    padding: 0.6vh 1vw !important;
    min-height: auto !important;
    margin-bottom: 0.8vh !important;
}

body.state-media .col-pronto .senhas-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: max-content !important;
    grid-template-rows: none !important;
    gap: 0.9vh !important;
    align-content: start !important;
    align-items: start !important;
    flex: 1 !important;
    overflow: hidden !important;
    max-height: none !important;
    padding-bottom: 0.5vh !important;
}

body.state-media .col-pronto .senhas-grid.cols-1 {
    grid-template-columns: 1fr !important;
}

body.state-media .col-pronto .senha-card {
    height: 11.5vh !important;
    min-height: 11.5vh !important;
    max-height: 11.5vh !important;
    padding: 1.1vh 0.8vw !important;
    border-radius: 1.6vh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    flex: none !important;
}

body.state-media .col-pronto .senha-num {
    font-size: clamp(30px, 7vh, 78px) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: -0.1vw !important;
    margin: 0 !important;
}

body.state-media .col-pronto .senha-tempo {
    font-size: clamp(8px, 1.3vh, 14px) !important;
    font-weight: 700 !important;
    margin-top: 0.3vh !important;
}

/* Decorações Visuais e Temáticas de Imagens/Cores para Datas Festivas */
.theme-christmas {
    --bg-panel: radial-gradient(circle, #1a0808 0%, #080202 100%);
    --text-accent: #ef4444; /* Vermelho natalino */
    --bg-card-pronto: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%);
}

.theme-junina {
    --bg-panel: radial-gradient(circle, #2d1808 0%, #150a04 100%);
    --text-accent: #f97316; /* Laranja junino */
}

.theme-copa {
    --bg-panel: radial-gradient(circle, #022e11 0%, #011508 100%);
    --text-accent: #eab308; /* Amarelo canarinho */
    --bg-card-pronto: linear-gradient(135deg, #15803d 0%, #166534 100%);
}

.theme-pascoa {
    --bg-panel: radial-gradient(circle, #1e1b4b 0%, #0f0e26 100%);
    --text-accent: #c084fc; /* Roxo pastel */
}

.theme-valentines {
    --bg-panel: radial-gradient(circle, #2e0814 0%, #120207 100%);
    --text-accent: #ec4899; /* Rosa namorados */
}

.theme-carnival {
    --bg-panel: radial-gradient(circle, #1e1b4b 0%, #08031a 100%);
    --text-accent: #f43f5e;
}

.theme-newyear {
    --bg-panel: radial-gradient(circle, #0f172a 0%, #020617 100%);
    --text-accent: #fbbf24;
}

.theme-fathers_day {
    --bg-panel: radial-gradient(circle, #0f172a 0%, #090d16 100%);
    --text-accent: #3b82f6;
}

.theme-mothers_day {
    --bg-panel: radial-gradient(circle, #2e0b1e 0%, #12030b 100%);
    --text-accent: #f472b6;
}

.theme-childrens_day {
    --bg-panel: radial-gradient(circle, #082f49 0%, #031320 100%);
    --text-accent: #38bdf8;
}

.theme-independence {
    --bg-panel: radial-gradient(circle, #022e11 0%, #011407 100%);
    --text-accent: #ffdf00;
}

.theme-voting_day {
    --bg-panel: radial-gradient(circle, #111827 0%, #030712 100%);
    --text-accent: #10b981;
}

.theme-sandwich_day {
    --bg-panel: radial-gradient(circle, #451a03 0%, #1c0a00 100%);
    --text-accent: #f59e0b; /* Amarelo tostado/ouro */
}

.theme-black_friday {
    --bg-panel: radial-gradient(circle, #1e1b4b 0%, #030712 100%);
    --text-accent: #a855f7; /* Roxo Neon / Pink */
    --bg-card-pronto: linear-gradient(135deg, #a855f7 0%, #6b21a8 100%);
}

/* 🍔 Tema Bebelu (Utiliza o layout padrão do sistema com a paleta de cores Bebelu: Fundo Branco, Vermelho e Azul Navy) */
.theme-bebelu {
    --bg-panel: #ffffff;
    --bg-overlay: transparent;
    --text-main: #111827;
    --text-muted: #4b5563;
    --text-accent: #ffc107;
    --bg-card-preparo: #e53935;
    --border-card-preparo: none;
    --text-preparo: #ffffff;
    --bg-card-pronto: #2b5278;
    --border-card-pronto: none;
    --text-pronto: #ffffff;
    --bg-card-atual: transparent;
    --border-card-atual: none;
    --shadow-card-atual: none;
}

.theme-bebelu .atual-number {
    color: #111827 !important;
}

/* Bolinha de status da conexão WebSocket — bem discreta, sem texto, canto inferior direito */
.ws-status-dot {
    position: fixed;
    bottom: 0.6vh;
    right: 0.4vw;
    width: clamp(5px, 0.6vh, 8px);
    height: clamp(5px, 0.6vh, 8px);
    border-radius: 50%;
    background: #ef4444;
    opacity: 0.55;
    z-index: 9999;
    pointer-events: none;
    transition: background-color 0.3s ease;
}
.ws-status-dot.ws-online {
    background: #10b981;
}