/* Arquivo: app.css
   Estilo base do app. O grosso do layout é feito com classes do Tailwind
   (carregado por CDN em src/cabeca.php); aqui fica o que o Tailwind não
   resolve bem:

   1. As cores do tema, como variáveis CSS. O @theme do Tailwind aponta pra
      elas, então trocar uma cor aqui muda o app inteiro, nas duas versões.
   2. O primeiro pintar da tela. Este arquivo é CSS de verdade e chega antes
      do Tailwind compilar; sem ele a tela piscaria branca ao abrir.
   3. Componentes que o JavaScript liga e desliga (gaveta do menu, indicador
      de puxar). Classe própria é mais confiável do que trocar utilitário na
      mão durante uma animação.
*/

/* ------------------------------------------------------------ paleta */
/* Escuro é o padrão: o app é usado de madrugada. */

:root {
    --fundo: #0b0d12;
    --fundo-alto: #11151e;
    --cartao: rgba(255, 255, 255, .045);
    --cartao-cheio: #141824;
    --linha: rgba(255, 255, 255, .09);
    --linha-forte: rgba(255, 255, 255, .16);
    --texto: #f4f6fa;
    --suave: #8b94a7;
    --marca: #ff7fa8;
    --marca-2: #ffb582;
    --marca-forte: #ff5f92;
    --contraste: #1a0b12;
    --ok: #5fe0a0;
    --perigo: #ff8080;
    --brilho: rgba(255, 127, 168, .17);
    --sombra: 0 18px 40px -22px rgba(0, 0, 0, .9);
}

@media (prefers-color-scheme: light) {
    :root {
        --fundo: #f5f6fa;
        --fundo-alto: #ffffff;
        --cartao: #ffffff;
        --cartao-cheio: #ffffff;
        --linha: rgba(15, 23, 42, .09);
        --linha-forte: rgba(15, 23, 42, .16);
        --texto: #10131b;
        --suave: #667085;
        --marca: #e05c8d;
        --marca-2: #ef8f5a;
        --marca-forte: #cf4a7c;
        --contraste: #ffffff;
        --ok: #12a05e;
        --perigo: #d64545;
        --brilho: rgba(224, 92, 141, .12);
        --sombra: 0 16px 34px -24px rgba(15, 23, 42, .5);
    }
}

/* -------------------------------------------------------------- base */

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    background: var(--fundo);
    color: var(--texto);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    /* Sem isso o iOS estica a página inteira quando você puxa pra baixo, e o
       efeito elástico briga com o gesto de atualizar. */
    overscroll-behavior-y: contain;
}

/* Brilho quente atrás do topo — é o que tira a cara de "fundo chapado". */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 380px;
    background: radial-gradient(78% 100% at 50% 0, var(--brilho), transparent 72%);
    pointer-events: none;
    z-index: 0;
}

/* Respeitar o notch e a barra inferior do iPhone */
.seguro-topo    { padding-top: max(env(safe-area-inset-top), 14px); }
.seguro-baixo   { padding-bottom: max(env(safe-area-inset-bottom), 18px); }
.seguro-lados   { padding-left: max(env(safe-area-inset-left), 20px);
                  padding-right: max(env(safe-area-inset-right), 20px); }

/* Números de horário alinhados em coluna */
.tabular { font-variant-numeric: tabular-nums; }

/* O número grande da tela inicial, com um leve degradê pro rosa da marca:
   dá acabamento sem atrapalhar a leitura de madrugada, que é o que importa. */
.destaque {
    background-image: linear-gradient(158deg, var(--texto) 58%, var(--marca) 125%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Some com a barra de rolagem sem perder a rolagem */
.sem-barra { scrollbar-width: none; }
.sem-barra::-webkit-scrollbar { display: none; }

/* ------------------------------------------------- puxar para atualizar */

.puxar {
    position: fixed;
    top: max(env(safe-area-inset-top), 6px);
    left: 50%;
    z-index: 30;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--linha);
    background: var(--cartao-cheio);
    box-shadow: var(--sombra);
    color: var(--marca);
    font-size: 18px;
    line-height: 1;
    opacity: 0;
    transform: translate(-50%, -60px);
    pointer-events: none;
}

/* Só transiciona quando o dedo solta: durante o arrasto o ícone precisa
   acompanhar o dedo na hora, sem atraso. */
.puxar.soltando {
    transition: transform .22s ease, opacity .22s ease;
}

/* Quem gira é o glifo de dentro — a bolinha de fora está ocupada com o
   translate que a posiciona. */
.puxar.girando > span {
    animation: girar .7s linear infinite;
}

@keyframes girar {
    to { transform: rotate(360deg); }
}

.girando.botao-gira {
    animation: girar .7s linear infinite;
    color: var(--marca);
}

/* ---------------------------------------------------------- menu ☰ */

body.sem-rolagem {
    overflow: hidden;
}

.menu-fundo {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(4, 6, 10, .62);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}

.menu-fundo.aberto {
    opacity: 1;
    visibility: visible;
}

.menu-gaveta {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    width: min(300px, 86vw);
    background: var(--fundo-alto);
    border-left: 1px solid var(--linha);
    box-shadow: -30px 0 60px -30px rgba(0, 0, 0, .8);
    transform: translateX(101%); /* 101% esconde a sombra da borda */
    visibility: hidden;
    transition: transform .24s cubic-bezier(.32, .72, 0, 1), visibility .24s;
}

.menu-gaveta.aberto {
    transform: translateX(0);
    visibility: visible;
}