/* =========================================================================
   Lunettic — barra de ambiente de teste
   =========================================================================
   Carregado SO fora de producao, pelo head.php. Nenhuma regra daqui existe
   no site que o cliente ve.

   Deliberadamente fora do sistema visual da marca: ambar e cinza-escuro, nao
   rosa e preto. Se parecesse desenho da Lunettic, alguem revisando o site
   acabaria avaliando a barra como parte da pagina — ou pior, achando que ela
   vai para o ar.

   Tambem NAO usa nenhum token --e-*, --t-* ou --rosa. A barra precisa
   continuar legivel mesmo que alguem quebre os tokens da marca, que e
   exatamente o tipo de coisa que se descobre no staging.
   ========================================================================= */

:root {
    --amb-altura: 34px;
    --amb-fundo:  #1C1B18;
    --amb-borda:  #3A372F;
    --amb-ambar:  #F5B740;
    --amb-texto:  #D8D4CA;
}


/* -------------------------------------------------------------------------
   A barra empurra a pagina para baixo em vez de cobrir o topo.

   O cabecalho do site e sticky em top:0. Se a barra fosse fixed por cima, ela
   taparia o cabecalho justamente na tela que existe para revisar o cabecalho.
   Entao o body ganha um deslocamento e o sticky passa a grudar ABAIXO da
   barra — o layout revisado continua sendo o mesmo que vai ao ar, so que
   deslocado.
   ------------------------------------------------------------------------- */

body.tem-barra-ambiente {
    padding-top: var(--amb-altura);
}

body.tem-barra-ambiente .cabecalho {
    top: var(--amb-altura);
}

.amb {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 200;              /* acima do cabecalho, que fica em 50 */
    height: var(--amb-altura);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 12px;
    background: var(--amb-fundo);
    border-bottom: 1px solid var(--amb-borda);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    line-height: 1;
    color: var(--amb-texto);
}

.amb__id {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.amb__selo {
    flex: none;
    padding: 4px 8px;
    background: var(--amb-ambar);
    color: #1C1B18;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* O texto explicativo some antes do resto: o selo sozinho ja identifica o
   ambiente, e num celular o espaco vale mais para o commit. */
.amb__texto {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amb__meta {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
}

.amb__host   { color: #8C877B; }
.amb__commit { color: var(--amb-ambar); font-variant-numeric: tabular-nums; }

.amb__link {
    color: var(--amb-texto);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.amb__link:hover,
.amb__link:focus-visible { color: #FFF; }


/* -------------------------------------------------------------------------
   Botao de deploy
   Canto inferior direito, longe do conteudo e longe da navegacao. Publicar
   e acao destrutiva o bastante para nao ficar colada num link comum.
   ------------------------------------------------------------------------- */

.amb__deploy {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 200;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    background: var(--amb-ambar);
    color: #1C1B18;
    border: 1px solid #C79427;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
}

.amb__deploy:hover,
.amb__deploy:focus-visible {
    background: #FFCA5C;
}

.amb__deploy:focus-visible {
    outline: 2px solid #FFF;
    outline-offset: 2px;
}


/* -------------------------------------------------------------------------
   Celular
   ------------------------------------------------------------------------- */

@media (max-width: 700px) {
    .amb__texto,
    .amb__host { display: none; }

    .amb__deploy {
        right: 12px;
        bottom: 12px;
        padding: 9px 12px;
    }
}

@media print {
    .amb,
    .amb__deploy { display: none; }

    body.tem-barra-ambiente { padding-top: 0; }
}

/* Indicador da chave secreta da Storefront. Verde quando o arquivo foi
   encontrado, apagado quando nao — nunca mostra o valor. */
.amb__sk {
    padding: 3px 7px;
    border: 1px solid currentColor;
    font-weight: 700;
    letter-spacing: .06em;
}

.amb__sk.is-ok  { color: #6FCF8F; }
.amb__sk.is-off { color: #8C877B; }

@media (max-width: 700px) {
    .amb__sk { display: none; }
}