/* ============================================================
   plataforma.css — camada GLOBAL de plataforma (PC / tablet / celular)
   Ligada em todas as paginas pelo bloco <!-- plataforma --> do <head>.

   Regimes (classes no <html>, decididas ANTES do primeiro paint pelo script
   inline do head e reavaliadas no resize pelo plataforma.js):
     .regime-celular  largura < 768px
     .regime-tablet   largura <= 1366px OU ponteiro grosso (toque/caneta)
     .regime-pc       o resto
     .toque / .ponteiro   pointer: coarse / fine
     .modo-app        display-mode: standalone (instalado)
     .barra-aberta / .barra-fechada   estado da barra lateral (se a pagina tiver)
     .barra-anim      so depois do 1o frame: a barra nao anima no carregamento

   Regra da casa: esta camada NAO mexe em metrica de tela nenhuma. Ela so
   define o comportamento comum (toque, zoom, rolagem, safe-area, movimento)
   e o componente de barra lateral para quem declarar [data-barra-lateral].
   ============================================================ */

:root{
    --barra-w: 240px;
    --barra-w-celular: min(280px, 85vw);
    --alvo: 44px;
    --sa-top: env(safe-area-inset-top, 0px);
    --sa-right: env(safe-area-inset-right, 0px);
    --sa-bottom: env(safe-area-inset-bottom, 0px);
    --sa-left: env(safe-area-inset-left, 0px);
    --vh-cheia: 100vh;
}
@supports (height: 100dvh){
    :root{ --vh-cheia: 100dvh; }
}

/* ── 5. A pagina nunca rola de lado; o que e largo rola dentro de si ── */
html{
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body{ overflow-x: hidden; }
img, video{ max-width: 100%; }
.rolagem-x{
    display: block;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.rolagem-x > table{ width: max-content; min-width: 100%; }
pre{ max-width: 100%; overflow-x: auto; }

/* ── 1. Densidade por regime: grade marcada com [data-grade] ──────
   Tablet: 3 por linha. Celular e PC: a pagina decide (celular ja e
   compacto por media query; PC segue como esta). */
html.regime-tablet [data-grade]{
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ── 3. Toque e caneta ─────────────────────────────────────────── */
html{ touch-action: manipulation; }            /* sem zoom por toque duplo */
a, button, input, select, textarea, label, [role="button"]{
    touch-action: manipulation;
}
html.toque input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.toque select,
html.toque textarea{
    font-size: max(1em, 16px);                 /* < 16px = iOS da zoom no foco */
    min-height: var(--alvo);
}
/* alvo pequeno detectado pelo plataforma.js: area de toque de 44px sem mudar o layout */
[data-alvo-pequeno]::after{
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: max(100%, var(--alvo));
    height: max(100%, var(--alvo));
    transform: translate(-50%, -50%);
}
/* tooltip por toque (o [title] vira data-dica; o js abre a bolha) */
.dica-bolha{
    position: fixed;
    z-index: 1200;
    max-width: min(280px, 90vw);
    padding: 7px 11px;
    border-radius: 6px;
    background: #000;
    border: 1px solid #0ff;
    color: #fff;
    font: 600 .8rem/1.35 'Outfit', system-ui, sans-serif;
    letter-spacing: .3px;
    box-shadow: 0 0 10px rgba(0,255,255,.25);
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s;
}
.dica-bolha.visivel{ opacity: 1; }
@media (prefers-reduced-motion: reduce){ .dica-bolha{ transition: none; } }

/* ── 6. Modo app (instalado): safe-area e altura real ──────────── */
html.modo-app body{
    min-height: var(--vh-cheia);
    padding-left: var(--sa-left);
    padding-right: var(--sa-right);
}

/* ── 7. Movimento reduzido: vale pra tudo, inclusive CSS das paginas ── */
@media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   BARRA LATERAL — componente da camada.
   A pagina declara:
     <button data-barra-btn class="barra-btn">…</button>
     <aside data-barra-lateral class="barra-lateral">…</aside>
     <div data-barra-scrim class="barra-scrim"></div>
   PC: empurra o conteudo (padding-left no body). Tablet: idem, mas nasce
   recolhida. Celular: gaveta por cima com fundo escurecido.
   ============================================================ */
.barra-lateral{
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--barra-w);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: calc(14px + var(--sa-top)) 12px calc(14px + var(--sa-bottom)) calc(12px + var(--sa-left));
    background: #000;
    border-right: 1px solid #111;
    box-shadow: 0 0 24px rgba(0,255,255,.06);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-100%);
    visibility: hidden;
    font-family: 'Outfit', system-ui, sans-serif;
}
html.barra-anim .barra-lateral{ transition: transform .22s ease, visibility 0s linear .22s; }
html.barra-aberta .barra-lateral{ transform: none; visibility: visible; transition-delay: 0s; }
html.regime-celular .barra-lateral{ width: var(--barra-w-celular); }

/* empurra o conteudo (PC e tablet). No celular nada e empurrado. */
html.barra-aberta:not(.regime-celular) body{ padding-left: var(--barra-w); }
html.barra-anim:not(.regime-celular) body{ transition: padding-left .22s ease; }

/* fundo escurecido da gaveta */
.barra-scrim{
    position: fixed; inset: 0;
    z-index: 1090;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
}
html.barra-anim .barra-scrim{ transition: opacity .2s; }
html.regime-celular.barra-aberta .barra-scrim{ opacity: 1; pointer-events: auto; }
html.regime-celular.barra-aberta body{ overflow: hidden; }   /* pagina nao rola por baixo da gaveta */

/* botao de recolher (icone de painel, como no VS Code) */
.barra-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: var(--alvo); height: var(--alvo);
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #9a9a9a;
    cursor: pointer;
    font: inherit;
    -webkit-tap-highlight-color: transparent;
}
.barra-btn svg{ width: 20px; height: 20px; display: block; }
.barra-btn .ico-aberta, .barra-btn .ico-fechada{ display: none; }
html.barra-aberta .barra-btn .ico-aberta{ display: block; }
html.barra-fechada .barra-btn .ico-fechada{ display: block; }
.barra-btn:focus-visible{ outline: 2px solid #0ff; outline-offset: 2px; }
.barra-btn:active{ transform: scale(.94); }
@media (hover: hover){
    .barra-btn:hover{ color: #0ff; border-color: #133; }
}
.so-leitor{                                    /* legenda para leitor de tela */
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* conteudo da barra */
.barra-topo{
    display: flex; align-items: center; justify-content: space-between;
    padding: 2px 6px 10px;
    border-bottom: 1px solid #111;
    margin-bottom: 6px;
}
.barra-marca{
    color: #fff; font-weight: 900; font-size: 1.05rem; letter-spacing: -.5px; text-decoration: none;
}
.barra-marca span{ color: #0ff; font-weight: 600; font-size: .8em; letter-spacing: 1px; }
.barra-secao{
    margin: 10px 8px 4px;
    font-size: .62rem; font-weight: 800; letter-spacing: 2px;
    color: #555; text-transform: uppercase;
}
.barra-nav{ display: flex; flex-direction: column; gap: 2px; }
.barra-nav a, .barra-nav button{
    display: flex; align-items: center; gap: 10px;
    min-height: var(--alvo);
    padding: 0 12px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid transparent;
    color: #bbb;
    font: 700 .84rem/1 'Outfit', system-ui, sans-serif;
    letter-spacing: .5px;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.barra-nav .ico{ width: 22px; text-align: center; font-size: 1rem; }
.barra-nav a:active, .barra-nav button:active{ transform: scale(.98); }
.barra-nav a:focus-visible, .barra-nav button:focus-visible{ outline: 2px solid #0ff; outline-offset: -2px; }
.barra-nav .ativo{ color: #fff; border-color: #133; background: rgba(0,255,255,.06); }
@media (hover: hover){
    .barra-nav a:hover, .barra-nav button:hover{ color: #fff; background: #0a0a0a; }
}
.barra-rodape{
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid #111;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-size: .78rem; color: #888;
}
.barra-rodape .usuario{ color: #fff; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-rodape a, .barra-rodape button{
    min-height: 36px; padding: 0 10px; border-radius: 6px;
    background: transparent; border: 1px solid #222; color: #888;
    font: 800 .7rem/1 'Outfit', system-ui, sans-serif; letter-spacing: 1px;
    text-decoration: none; cursor: pointer; display: inline-flex; align-items: center;
}
@media (hover: hover){
    .barra-rodape a:hover, .barra-rodape button:hover{ color: #f44; border-color: #f44; }
}