/* ================================================
   header.css — Estilos do cabeçalho compartilhado
   Importado por todas as 14 telas do Karaokê Flow.
   Para alterar o visual do header, edite apenas aqui.
================================================ */

/* Cabeçalho — barra superior fixa com 3 colunas */
header {
    background: #1a1a2e;
    color: white;
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Coluna esquerda — logo + nome do estabelecimento */
.header-esquerda {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

/* Logotipo do estabelecimento — oculto automaticamente se o arquivo não existir */
.logo-estab {
    height: 48px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

/* Nome do estabelecimento — neon azul com brilho sutil */
.header-nome-estab {
    font-weight: bold;
    font-size: 18px;
    color: #00d1ff;
    text-shadow: 0 0 10px rgba(0, 209, 255, 0.35);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Coluna central — título da tela */
.header-centro {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Título da tela — dourado, uppercase, destaque visível */
.header-titulo {
    font-size: 18px;
    font-weight: bold;
    color: #ffd060;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

/* Variante compacta — usada no index.html (mobile, espaço reduzido) */
.header-titulo-compacto {
    font-size: 14px;
}

/* Coluna direita — crédito do sistema; no index.html também contém botões */
.header-direita {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    flex-shrink: 0;
    flex: 1;
}

/* Bloco de crédito — marca na linha 1, versão na linha 2, ambas à direita */
.header-by {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    white-space: nowrap;
}

/* "by Karaokê Flow®" — neon pink */
.header-by-marca {
    font-size: 15px;
    color: #ff3399;
    letter-spacing: 0.02em;
}

/* Número de versão — mesma cor da marca, fonte menor */
.header-versao {
    font-size: 11px;
    color: #ff3399;
    letter-spacing: 0.04em;
}

/* ================================================
   LAYOUT DE DUAS LINHAS — exclusivo do index.html
   Linha 1: logo + nome do estab. | crédito
   Linha 2: título da tela        | botões do cantor
================================================ */

/* Empilha as duas linhas em coluna */
header.header-duas-linhas {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

/* Linha interna — distribui elementos na horizontal */
.header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
}

/* Linha 2: título alinhado à esquerda, botões à direita */
.header-row-2 .header-titulo,
.header-row-2 .header-titulo-compacto {
    flex: 1;
    text-align: left;
}

/* Barra de retorno — aparece logo abaixo do header quando voltarPara está definido */
.barra-voltar {
    background: #0f0f1a;
    padding: 6px 20px;
    border-bottom: 1px solid #1a1a2e;
}

.barra-voltar-link {
    color: #8888aa;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    transition: color 0.15s;
}

.barra-voltar-link:hover {
    color: #ccccdd;
}

/* Área de botões do cantor (check-in, sair, streaming, acervo) */
#areaHeader {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}