/* ==========================================================================
   Condomínio 360 — interface de operação
   Direção: sala de controle. Fundo escuro (portaria opera de madrugada,
   tela clara cansa), âmbar de sinalização como acento, monoespaçada para
   placas e horários — código alfanumérico se lê melhor em largura fixa.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Chivo:wght@400;500;700;900&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
    /* Paleta 2026-07-30 (v2): dark warm mais amigável, menos "sala de
       operações". Base neutro-quente (não preto puro), superfícies com
       mais respiro, contraste calibrado, secundária violeta pra variedade
       além do âmbar. Radius padrão sobe pra 8px — cara mais atual. */
    --bg:          #0F1218;
    --bg-elev:     #181C25;
    --surface:     #22262F;
    --surface-2:   #2C313B;
    --border:      #3A4051;
    --border-soft: #252A34;

    --text:        #EDF1F7;
    --text-dim:    #A5AEC1;
    --text-faint:  #6C7684;

    /* Âmbar mais dourado, menos alaranjado — puxa pra "hospitalidade" */
    --accent:      #FFB84D;
    --accent-hi:   #FFD088;
    --accent-dark: #D08A20;
    --accent-bg:   rgba(255, 184, 77, .13);

    /* Violeta secundário — usado em chips/etiquetas de destaque neutro
       (comunicado, categoria, etc.) pra sistema não ficar 100% âmbar */
    --accent-2:    #8B7CFF;
    --accent-2-hi: #A99DFF;
    --accent-2-bg: rgba(139, 124, 255, .14);

    --ok:          #4ADE80;
    --ok-bg:       rgba(74, 222, 128, .14);
    --danger:      #F87171;
    --danger-bg:   rgba(248, 113, 113, .14);
    --warn:        #FBBF24;
    --warn-bg:     rgba(251, 191, 36, .14);
    --info:        #60A5FA;
    --info-bg:     rgba(96, 165, 250, .14);

    --mono: 'JetBrains Mono', ui-monospace, monospace;
    --sans: 'Chivo', system-ui, sans-serif;

    --r:      8px;
    --r-sm:   6px;
    --r-lg:   14px;
    --r-full: 999px;

    --shadow:      0 8px 24px rgba(0,0,0,.38);
    --shadow-soft: 0 4px 14px rgba(0,0,0,.22);
    --shadow-elev: 0 20px 44px rgba(0,0,0,.48);
    --shadow-glow: 0 0 0 3px rgba(255, 184, 77, .18), 0 6px 20px rgba(255, 184, 77, .18);

    --grad-accent:   linear-gradient(135deg, #FFC46B 0%, #F58A2E 100%);
    --grad-accent-2: linear-gradient(135deg, #A99DFF 0%, #6B5AE0 100%);
    --grad-ok:       linear-gradient(135deg, #6EE7A5 0%, #22C55E 100%);
    --grad-danger:   linear-gradient(135deg, #FCA5A5 0%, #E14D5A 100%);
    --grad-surface:  linear-gradient(180deg, var(--bg-elev) 0%, var(--bg) 100%);

    --easing:      cubic-bezier(.2, .8, .2, 1);
    --easing-out:  cubic-bezier(.16, 1, .3, 1);
    --easing-in:   cubic-bezier(.4, 0, 1, 1);
    --dur-fast:    120ms;
    --dur:         220ms;
    --dur-slow:    420ms;
}

/* Usuário pediu menos movimento no SO — desliga transições e animações
   longas. Mantemos as curtas (foco, hover) porque são feedback funcional. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --dur:      1ms;
        --dur-slow: 1ms;
    }
    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}

/* -----------------------------------------------------------------------
   Transição de página (fade + scale cross-document) — animação em CSS,
   orquestrada pelo JS em api.js. Funciona em qualquer navegador.
   Perfil: entrada 420ms com curva orgânica (easing-out muito suave),
   saída 260ms rápida com fade + blur sutil. Cards dentro entram em
   cascata (stagger) — sensação de "revelar" ao invés de "aparecer". */
body {
    transition: opacity 320ms var(--easing-out),
                transform 320ms var(--easing-out),
                filter    320ms var(--easing-out);
    transform-origin: 50% 40%;
}
body.pt-entrando {
    animation: pt-enter 420ms cubic-bezier(.16, 1, .3, 1) both;
}
body.pt-saindo {
    opacity: 0;
    transform: scale(1.015) translateY(-6px);
    filter: blur(4px);
    pointer-events: none;
}

@keyframes pt-enter {
    0%   { opacity: 0; transform: scale(.985) translateY(14px); filter: blur(6px); }
    60%  { filter: blur(0); }
    100% { opacity: 1; transform: none; filter: none; }
}

/* Stagger dos cards e stats na entrada — cria o "revelar em cascata".
   O CSS cuida do delay: cada filho da .content ganha um pequeno atraso
   crescente. Isso funciona pra qualquer tela sem alterar HTML. */
body.pt-entrando .content > * {
    animation: pt-child-enter 480ms var(--easing-out) both;
}
body.pt-entrando .content > *:nth-child(1) { animation-delay: 60ms; }
body.pt-entrando .content > *:nth-child(2) { animation-delay: 110ms; }
body.pt-entrando .content > *:nth-child(3) { animation-delay: 160ms; }
body.pt-entrando .content > *:nth-child(4) { animation-delay: 210ms; }
body.pt-entrando .content > *:nth-child(5) { animation-delay: 260ms; }
body.pt-entrando .content > *:nth-child(6) { animation-delay: 310ms; }
body.pt-entrando .content > *:nth-child(n+7) { animation-delay: 360ms; }

@keyframes pt-child-enter {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    body, body.pt-entrando, body.pt-saindo,
    body.pt-entrando .content > * {
        opacity: 1 !important; transform: none !important;
        animation: none !important; filter: none !important;
        transition: none !important;
    }
}

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

body {
    font-family: var(--sans);
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Textura ambiente: três hotspots suaves (âmbar, violeta, azul) que
   trazem calor sem virar "papel de parede colorido". Muito baixa
   opacidade. */
body::before {
    content: '';
    position: fixed; inset: 0;
    background-image:
        radial-gradient(circle at 8% -8%,   rgba(255, 184, 77, .08), transparent 45%),
        radial-gradient(circle at 92% 108%, rgba(139, 124, 255, .07), transparent 42%),
        radial-gradient(circle at 50% 45%,  rgba(96, 165, 250, .03), transparent 55%);
    pointer-events: none;
    z-index: 0;
}

/* ==========================================================================
   Tela de login/cadastro — glassmorphism + fundo animado com skyline
   ==========================================================================
   Sobrescreve o body::before ambient — o login tem sua própria camada
   de fundo (mais dramática) e não deve duplicar o efeito. */
body.tela-login::before { content: none; }

body.tela-login {
    background:
        radial-gradient(ellipse at 20% 10%, #1A0F24 0%, transparent 55%),
        radial-gradient(ellipse at 80% 100%, #12172A 0%, transparent 55%),
        #0A0E14;
    overflow-x: hidden;
}

/* ------ Camadas de fundo ------ */
.login-bg {
    position: fixed; inset: 0; z-index: 0;
    overflow: hidden;
    pointer-events: none;
    perspective: 1400px;
    perspective-origin: 50% 35%;
}

/* Blobs de luz — pulsam devagar, dão movimento sutil ao fundo */
.login-bg-blob {
    position: absolute;
    width: 65vmax; height: 65vmax;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .38;
    animation: bg-blob-flutuar 22s ease-in-out infinite alternate;
    will-change: transform;
}
.login-bg-blob--amber {
    background: radial-gradient(circle, rgba(255, 184, 77, .9), transparent 65%);
    top: -22vmax; left: -12vmax;
}
.login-bg-blob--violet {
    background: radial-gradient(circle, rgba(139, 124, 255, .8), transparent 65%);
    bottom: -22vmax; right: -12vmax;
    animation-delay: -11s;
    animation-duration: 26s;
}
@keyframes bg-blob-flutuar {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(6vmax, -5vmax) scale(1.12); }
    100% { transform: translate(-5vmax, 5vmax) scale(0.94); }
}

/* Canvas WebGL 3D — cena Three.js dos prédios girando. Fica acima dos
   blobs/grid mas transparente, então os blobs aparecem como "céu" atrás. */
.login-3d-canvas {
    position: absolute;
    inset: 0;
    width: 100vw !important;
    height: 100vh !important;
    display: block;
    z-index: 2;
    /* opacity 0 aplicado pelo JS via style inline pra fade-in.
       Se o JS falhar (import error, WebGL ausente), o canvas fica
       transparente por padrão e não bloqueia os blobs ambient atrás. */
    pointer-events: auto;
    cursor: grab;
}
.login-3d-canvas:active { cursor: grabbing; }

/* Em mobile o canvas fica atrás do card (não interage — muitos dedos
   já lidam com o form). Mantém a apresentação sem competir por toque. */
@media (max-width: 620px) {
    .login-3d-canvas { pointer-events: none; }
}

/* Grid sutil (linhas tênues) — recorte no centro pra fundir com o card */
.login-bg-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse at 50% 55%, black 25%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 55%, black 25%, transparent 78%);
    opacity: .8;
}

/* Skyline — duas camadas com parallax seamless.
   O HTML tem um SVG por camada; um pequeno script no login.js clona esse
   SVG e coloca lado a lado (total 200vw). O keyframe move o container
   -50% => o segundo SVG assume a posição do primeiro sem gap. */
.login-bg-skyline {
    position: absolute;
    left: 0; bottom: 0;
    display: flex;
    width: 200vw;
    pointer-events: none;
    will-change: transform;
}
.login-bg-skyline > svg {
    width: 100vw;
    height: 100%;
    display: block;
    flex-shrink: 0;
}
.login-bg-skyline--back {
    height: 220px;
    opacity: .55;
    animation: bg-skyline-back 100s linear infinite;
}
.login-bg-skyline--front {
    height: 300px;
    animation: bg-skyline-front 70s linear infinite;
    filter: drop-shadow(0 -8px 20px rgba(255, 138, 46, .12));
}
@keyframes bg-skyline-back  { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes bg-skyline-front { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Partículas — janelinhas âmbar subindo do chão como faíscas */
.login-bg-particulas {
    position: absolute; inset: 0;
    pointer-events: none;
}
.login-bg-particulas span {
    position: absolute;
    bottom: -20px;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
    opacity: 0;
    animation: bg-particula 14s linear infinite;
}
/* Cada partícula com posição, delay e duração diferentes */
.login-bg-particulas span:nth-child(1)  { left: 6%;  animation-delay:   0s; animation-duration: 15s; }
.login-bg-particulas span:nth-child(2)  { left: 14%; animation-delay:  -3s; animation-duration: 13s; }
.login-bg-particulas span:nth-child(3)  { left: 22%; animation-delay:  -8s; animation-duration: 17s; width: 3px; height: 3px; }
.login-bg-particulas span:nth-child(4)  { left: 30%; animation-delay:  -2s; animation-duration: 12s; }
.login-bg-particulas span:nth-child(5)  { left: 38%; animation-delay:  -5s; animation-duration: 16s; width: 5px; height: 5px; }
.login-bg-particulas span:nth-child(6)  { left: 46%; animation-delay:  -9s; animation-duration: 14s; }
.login-bg-particulas span:nth-child(7)  { left: 54%; animation-delay:  -1s; animation-duration: 18s; width: 3px; height: 3px; }
.login-bg-particulas span:nth-child(8)  { left: 62%; animation-delay:  -6s; animation-duration: 15s; }
.login-bg-particulas span:nth-child(9)  { left: 70%; animation-delay: -10s; animation-duration: 13s; width: 5px; height: 5px; }
.login-bg-particulas span:nth-child(10) { left: 78%; animation-delay:  -4s; animation-duration: 17s; }
.login-bg-particulas span:nth-child(11) { left: 86%; animation-delay:  -7s; animation-duration: 14s; }
.login-bg-particulas span:nth-child(12) { left: 94%; animation-delay: -11s; animation-duration: 16s; width: 3px; height: 3px; }
.login-bg-particulas span:nth-child(13) { left: 10%; animation-delay:  -6s; animation-duration: 19s; background: var(--accent-2); box-shadow: 0 0 8px var(--accent-2); }
.login-bg-particulas span:nth-child(14) { left: 50%; animation-delay: -12s; animation-duration: 20s; background: var(--accent-2); box-shadow: 0 0 8px var(--accent-2); }
.login-bg-particulas span:nth-child(15) { left: 88%; animation-delay:  -8s; animation-duration: 18s; background: var(--accent-2); box-shadow: 0 0 8px var(--accent-2); }

@keyframes bg-particula {
    0%   { transform: translateY(0)     scale(.6); opacity: 0; }
    12%  { opacity: .9; }
    100% { transform: translateY(-105vh) scale(1); opacity: 0; }
}

/* ============ Cluster de prédios 3D flutuando ============
   3 cubos isométricos com faces reais, rotacionando em Y e flutuando em Y.
   Semi-transparentes pra não competir com o card. Posicionados nas
   bordas pra não cobrir a área central onde o card fica. */
.login-bg-cidade {
    position: absolute; inset: 0;
    pointer-events: none;
    transform-style: preserve-3d;
}

.cidade-cubo {
    --lado: 100px;
    --alt: 160px;
    position: absolute;
    width: var(--lado);
    height: var(--alt);
    transform-style: preserve-3d;
    animation: cidade-flutuar 8s ease-in-out infinite alternate,
               cidade-girar 24s linear infinite;
    opacity: .55;
    will-change: transform;
}

.cidade-cubo--1 {
    top: 8%; left: 6%;
    --lado: 90px; --alt: 200px;
    animation-duration: 9s, 28s;
    animation-delay: 0s, 0s;
}
.cidade-cubo--2 {
    top: 14%; right: 8%;
    --lado: 110px; --alt: 240px;
    animation-duration: 11s, 32s;
    animation-delay: -3s, -8s;
}
.cidade-cubo--3 {
    bottom: 22%; right: 22%;
    --lado: 76px; --alt: 140px;
    animation-duration: 7s, 22s;
    animation-delay: -5s, -12s;
    opacity: .4;
}

.cf {
    position: absolute;
    background: linear-gradient(180deg, rgba(46,52,68,.85), rgba(19,23,34,.85));
    border: 1px solid rgba(58,64,81,.6);
    box-shadow: inset 0 -20px 40px rgba(0,0,0,.5);
    box-sizing: border-box;
}
.cf-frente { width: var(--lado); height: var(--alt); transform: translateZ(calc(var(--lado) / 2)); }
.cf-tras   { width: var(--lado); height: var(--alt); transform: rotateY(180deg) translateZ(calc(var(--lado) / 2)); }
.cf-esq    { width: var(--lado); height: var(--alt); transform: rotateY(-90deg) translateZ(calc(var(--lado) / 2)); background: linear-gradient(180deg, rgba(38,43,56,.85), rgba(14,18,32,.85)); }
.cf-dir    { width: var(--lado); height: var(--alt); transform: rotateY(90deg)  translateZ(calc(var(--lado) / 2)); background: linear-gradient(180deg, rgba(54,60,76,.85), rgba(24,28,40,.85)); }
.cf-topo   {
    width: var(--lado); height: var(--lado); top: 0;
    transform: rotateX(90deg) translateZ(calc(var(--lado) / 2));
    transform-origin: top center;
    background: linear-gradient(180deg, rgba(255,208,136,.9), rgba(245,138,46,.9));
    border-color: rgba(255,149,0,.7);
    box-shadow: inset 0 0 12px rgba(255,122,0,.5);
}
.cf-base   {
    width: var(--lado); height: var(--lado); bottom: 0;
    transform: rotateX(-90deg) translateZ(calc(var(--lado) / 2));
    transform-origin: bottom center;
    background: rgba(5,7,12,.9);
}

/* Janelas nas faces frente/trás — grid via repeating-gradient */
.cf-frente::before, .cf-tras::before {
    content: '';
    position: absolute; inset: 12% 15%;
    background:
        repeating-linear-gradient(0deg,
            rgba(255, 184, 77, .55) 0 8%,
            transparent            8% 14%),
        repeating-linear-gradient(90deg,
            rgba(255, 184, 77, .8) 0 22%,
            transparent            22% 33%);
    background-blend-mode: multiply;
    opacity: .75;
    animation: cf-janelas-piscar 3s ease-in-out infinite alternate;
}
@keyframes cf-janelas-piscar {
    from { opacity: .5; }
    to   { opacity: 1;   }
}

@keyframes cidade-girar {
    from { transform: rotateX(-12deg) rotateY(0deg); }
    to   { transform: rotateX(-12deg) rotateY(360deg); }
}
@keyframes cidade-flutuar {
    from { translate: 0 -12px; }
    to   { translate: 0 12px; }
}

@media (max-width: 820px) {
    .cidade-cubo--1 { --lado: 60px; --alt: 130px; opacity: .35; }
    .cidade-cubo--2 { --lado: 70px; --alt: 150px; opacity: .35; }
    .cidade-cubo--3 { display: none; }
}
@media (max-width: 520px) {
    .login-bg-cidade { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cidade-cubo, .cf-frente::before, .cf-tras::before { animation: none !important; }
}

/* Reduz motion — mata blobs e partículas, mantém só a estampa estática */
@media (prefers-reduced-motion: reduce) {
    .login-bg-blob,
    .login-bg-skyline,
    .login-bg-particulas span {
        animation: none !important;
    }
    .login-bg-particulas span { opacity: .5; }
}

/* ------ Wrapper e card ------
   Mobile: single column, card centralizado, slogan oculto.
   Desktop (>=900px): split screen — slogan à esquerda sobre a cena 3D,
   card à direita. Isso libera o meio da tela pros prédios 3D
   aparecerem sem serem cobertos. */
.login-wrap {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    position: relative; z-index: 1;
}

.login-slogan {
    display: none;   /* escondido no mobile */
    max-width: 640px;
    color: var(--text);
    animation: slogan-in 1s cubic-bezier(.16, 1, .3, 1) both;
    animation-delay: .3s;
}
.login-slogan-eyebrow {
    font-size: 13px; letter-spacing: 6px; text-transform: uppercase;
    color: var(--text-faint); font-weight: 700;
    margin-bottom: 12px;
    padding-left: 4px;
}
.login-slogan-big {
    font-family: var(--sans);
    font-weight: 900;
    font-size: clamp(120px, 16vw, 220px);
    line-height: .9;
    letter-spacing: -6px;
    color: var(--text);
    display: flex; align-items: flex-start;
    filter: drop-shadow(0 12px 40px rgba(255, 184, 77, .35));
}
.login-slogan-big .num {
    background: linear-gradient(135deg, #FFD088 0%, #F58A2E 60%, #FFB84D 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: slogan-shimmer 6s ease-in-out infinite;
    background-size: 200% 100%;
}
.login-slogan-big .deg {
    font-size: 0.4em;
    color: var(--accent);
    margin-left: 4px;
    margin-top: .05em;
    animation: slogan-degree-rotate 8s linear infinite;
    display: inline-block;
    transform-origin: 50% 65%;
}
.login-slogan-sub {
    font-size: clamp(20px, 2.4vw, 32px);
    font-weight: 500;
    color: var(--text-dim);
    letter-spacing: -.3px;
    margin-top: 4px;
    max-width: 560px;
}
.login-slogan-sub::first-line { color: var(--text); }
.login-slogan-hint {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 28px;
    padding: 8px 14px 8px 12px;
    background: rgba(255, 184, 77, .08);
    border: 1px solid rgba(255, 184, 77, .25);
    border-radius: var(--r-full);
    color: var(--text-dim);
    font-size: 12px;
    letter-spacing: .5px;
}
.login-slogan-hint .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
    animation: slogan-dot-pulso 1.6s ease-in-out infinite;
}

@keyframes slogan-in {
    from { opacity: 0; transform: translateY(24px); filter: blur(6px); }
    to   { opacity: 1; transform: none; filter: none; }
}
@keyframes slogan-shimmer {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
@keyframes slogan-degree-rotate {
    from { transform: rotate(0); }
    to   { transform: rotate(360deg); }
}
@keyframes slogan-dot-pulso {
    0%, 100% { opacity: .5; transform: scale(1); }
    50%      { opacity: 1;  transform: scale(1.25); }
}

/* Desktop: split screen 3D + slogan à esquerda, card à direita */
@media (min-width: 900px) {
    .login-wrap {
        display: grid;
        grid-template-columns: 1fr min(460px, 44vw);
        align-items: center;
        justify-items: center;
        gap: clamp(24px, 4vw, 80px);
        padding: 40px clamp(24px, 5vw, 80px);
    }
    .login-slogan {
        display: block;
        justify-self: start;
    }
    .login-card {
        justify-self: end;
        margin: 0;
    }
}
/* Ultra-wide: dá mais espaço pro slogan respirar */
@media (min-width: 1400px) {
    .login-wrap {
        grid-template-columns: 1.2fr 480px;
        padding: 40px 120px;
    }
}

/* Glassmorphism: fundo translúcido com blur, borda sutil, sombra em camadas */
.login-card {
    width: 100%; max-width: 440px;
    background: rgba(24, 28, 37, 0.55);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-lg);
    padding: 40px 36px 36px;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 184, 77, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    animation: login-card-in .6s cubic-bezier(.16, 1, .3, 1) both;
    position: relative;
    overflow: hidden;
}

/* Mobile: reduz padding/logo/margens pra caber sem scroll em telas
   pequenas (390-414px) sem precisar diminuir zoom. */
@media (max-width: 620px) {
    .login-wrap { padding: 12px; }
    .login-card {
        padding: 24px 20px 20px;
        border-radius: var(--r);
    }
    .login-logo { width: 56px; height: 56px; margin-bottom: 10px; }
    .brand { font-size: 20px; margin-bottom: 4px; }
    .brand-sub {
        font-size: 10px; letter-spacing: 2px;
        margin-bottom: 18px;
    }
    .login-card .campo { margin-bottom: 10px; }
    .login-card .btn-lg { padding: 12px 20px; font-size: 15px; }
    /* Meta viewport respeitando safe areas do notch */
    body.tela-login {
        min-height: 100dvh;    /* dynamic viewport height — desconta barra do browser */
    }
    .login-wrap {
        min-height: 100dvh;
    }
    /* O 3D canvas fica atrás mas em altura reduzida pra não afetar layout */
    .login-3d-canvas {
        height: 100dvh !important;
    }
}
/* Ultra-pequeno (iPhone SE 375, Galaxy S 360) */
@media (max-width: 400px) {
    .login-card { padding: 20px 16px 18px; }
    .login-logo { width: 48px; height: 48px; margin-bottom: 8px; }
    .brand { font-size: 18px; }
    .brand-sub { margin-bottom: 14px; }
}
/* Detalhe: barrinha âmbar no topo (mesma linguagem do logo) */
.login-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: var(--grad-accent);
    opacity: .85;
    box-shadow: 0 0 20px rgba(255, 184, 77, .4);
}

@keyframes login-card-in {
    from { opacity: 0; transform: translateY(24px) scale(.98); filter: blur(6px); }
    to   { opacity: 1; transform: none; filter: none; }
}

/* Logo mark no topo do card */
.login-logo {
    width: 76px; height: 76px;
    margin: 0 auto 16px;
    filter: drop-shadow(0 8px 20px rgba(255, 138, 46, .25));
    animation: login-logo-in .8s cubic-bezier(.16, 1, .3, 1) both;
}
.login-logo svg { width: 100%; height: 100%; display: block; }
@keyframes login-logo-in {
    from { opacity: 0; transform: translateY(-14px) scale(.85); }
    to   { opacity: 1; transform: none; }
}

.brand {
    font-weight: 900;
    font-size: 26px;
    letter-spacing: -.5px;
    text-align: center;
    margin-bottom: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.brand-logo {
    width: 28px; height: 28px;
    flex: 0 0 28px;
    filter: drop-shadow(0 2px 4px rgba(255,167,36,.25));
}
.sidebar .brand .brand-logo { width: 22px; height: 22px; flex-basis: 22px; }
.topbar-brand .brand-logo { width: 20px; height: 20px; flex-basis: 20px; }
.brand span {
    color: var(--accent);  /* fallback pra browsers sem background-clip: text */
    background: var(--grad-accent);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}
.brand-sub {
    color: var(--text-faint);
    font-size: 11.5px;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 32px;
}

/* ---------- Shell ---------- */

.shell { display: flex; min-height: 100vh; position: relative; z-index: 1; }

.sidebar {
    width: 210px;
    flex-shrink: 0;
    background: var(--bg-elev);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: sticky; top: 0; height: 100vh;
}

.sidebar .brand { padding: 20px 20px 18px; font-size: 18px; margin: 0; }

/* flex:1 + min-height:0 + overflow-y:auto = o menu rola internamente quando
   tem mais itens do que cabe na altura da tela. Sem o overflow, os itens
   abaixo (ex.: a partir de Cobranças) ficavam cortados no desktop. O
   min-height:0 é obrigatório: sem ele o filho flex não encolhe pra rolar. */
.nav { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 10px; }
.nav a {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    color: var(--text-dim);
    text-decoration: none;
    border-radius: var(--r);
    font-size: 13.5px;
    font-weight: 500;
    border-left: 2px solid transparent;
    transition: background var(--dur-fast) var(--easing),
                color      var(--dur-fast) var(--easing),
                transform  var(--dur-fast) var(--easing);
}
.nav a:hover { transform: translateX(2px); }
.nav a:hover { background: var(--surface); color: var(--text); }
.nav a.on {
    background: linear-gradient(90deg, var(--accent-bg) 0%, transparent 100%);
    color: var(--accent);
    border-left-color: var(--accent);
}
.nav .ico {
    width: 20px; height: 20px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    opacity: .9;
    transition: transform var(--dur-fast) var(--easing);
}
.nav .ico svg { width: 20px; height: 20px; display: block; }
.nav a:hover .ico { transform: scale(1.15); opacity: 1; }
.nav a.on .ico   { opacity: 1; filter: drop-shadow(0 0 6px currentColor); }

.side-foot {
    padding: 14px 12px;
    border-top: 1px solid var(--border-soft);
    font-size: 12px;
}

/* Bloco clicável do perfil no rodapé do sidebar (Etapa 15) */
.side-perfil {
    display: flex; align-items: center; gap: 10px;
    padding: 8px;
    text-decoration: none;
    border-radius: var(--r);
    color: inherit;
    transition: background var(--dur-fast) var(--easing),
                transform var(--dur-fast) var(--easing);
}
.side-perfil:hover {
    background: var(--surface);
    transform: translateY(-1px);
}
.side-perfil.on {
    background: linear-gradient(90deg, var(--accent-bg) 0%, transparent 100%);
}

.side-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--surface-2);
    border: 2px solid var(--border);
    display: grid; place-items: center;
    color: var(--accent);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
}
.side-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.side-perfil:hover .side-avatar { border-color: var(--accent); }

.side-perfil-info { min-width: 0; flex: 1; }
.side-foot .who { color: var(--text); font-weight: 600; font-size: 13px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-foot .cond { color: var(--accent); font-size: 11px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-foot .perfil {
    color: var(--text-faint);
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ==========================================================================
   Tela de perfil (perfil.html)
   ========================================================================== */
.perfil-wrap {
    max-width: 800px;
    margin: 0 auto;
    display: flex; flex-direction: column; gap: 16px;
}

.perfil-cabec {
    display: flex; align-items: center; gap: 20px;
    padding: 24px;
    flex-wrap: wrap;
}
.perfil-avatar {
    width: 96px; height: 96px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--surface);
    border: 3px solid var(--border);
    display: grid; place-items: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-soft);
}
.perfil-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.perfil-iniciais {
    font-family: var(--sans);
    font-weight: 900;
    font-size: 32px;
    color: var(--accent);
    letter-spacing: 2px;
}

.perfil-cabec-info { flex: 1; min-width: 200px; }
.perfil-nome {
    font-size: 26px; font-weight: 800; letter-spacing: -.3px;
    margin-bottom: 8px;
}
.perfil-meta {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    color: var(--text-dim); font-size: 13px;
}
.perfil-meta-item {
    display: inline-flex; align-items: center; gap: 6px;
}
.perfil-meta-item svg { width: 14px; height: 14px; color: var(--text-faint); }

.perfil-dados {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}
.perfil-linhas {
    display: flex; flex-direction: column; gap: 12px;
}
.perfil-linha {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 8px 0;
}
.perfil-linha-ico {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--accent-bg);
    color: var(--accent);
    display: grid; place-items: center;
    flex-shrink: 0;
}
.perfil-linha-ico svg { width: 16px; height: 16px; }
.perfil-linha-info { flex: 1; min-width: 0; }
.perfil-linha-rot {
    font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
    color: var(--text-faint); font-weight: 700; margin-bottom: 2px;
}
.perfil-linha-val {
    font-size: 14px; color: var(--text);
    word-break: break-word;
}
.perfil-linha-val.faint { color: var(--text-dim); font-family: var(--mono); }

.perfil-unidades {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}
.perfil-unidade {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--r);
    padding: 12px;
    text-align: center;
}
.perfil-unidade-numero {
    font-size: 20px; font-weight: 800;
    color: var(--accent);
    margin-bottom: 4px;
}
.perfil-unidade-papel {
    font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
    color: var(--text-faint);
}

.perfil-form-foto {
    text-align: center;
    padding: 8px 0 16px;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 16px;
}
.perfil-form-foto .perfil-avatar {
    margin: 0 auto 14px;
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    height: 56px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 22px;
    background: rgba(10, 14, 20, .78);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    position: sticky; top: 0; z-index: 20;
}
.topbar h1 { font-size: 16px; font-weight: 700; letter-spacing: -.2px; }

.content {
    padding: 22px;
    flex: 1;
    animation: page-in var(--dur) var(--easing-out) both;
}

/* ---------- Elementos ---------- */

label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 5px; font-weight: 500; }

input, select, textarea {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--r);
    padding: 9px 11px;
    font-family: var(--sans);
    font-size: 14px;
    transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-bg);
}
input::placeholder { color: var(--text-faint); }
.campo { margin-bottom: 14px; }
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 14px; }

.placa-input {
    font-family: var(--mono);
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 3px;
    text-align: center;
    text-transform: uppercase;
    padding: 14px;
}

button, .btn, a.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 9px 15px;
    border-radius: var(--r);
    font-family: var(--sans);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    text-decoration: none;
    transition: transform var(--dur-fast) var(--easing),
                background var(--dur-fast) var(--easing),
                border-color var(--dur-fast) var(--easing),
                box-shadow  var(--dur-fast) var(--easing);
}
a.btn:hover, a.btn:visited { color: var(--text); text-decoration: none; }
button:hover, .btn:hover { background: var(--border); border-color: var(--border); }
button:active { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: not-allowed; }
button:focus-visible, .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-bg);
}

.btn-primary {
    background: var(--grad-accent);
    border-color: transparent;
    color: #17130A;
    box-shadow: 0 4px 14px rgba(255, 122, 0, .28);
}
.btn-primary:hover {
    background: linear-gradient(135deg, #FFB84D 0%, #FF8A1A 100%);
    border-color: transparent;
    box-shadow: 0 6px 20px rgba(255, 122, 0, .38);
    transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

.btn-ok { background: var(--grad-ok); border-color: transparent; color: #06251A; box-shadow: 0 4px 14px rgba(14, 165, 124, .28); }
.btn-ok:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(14, 165, 124, .38); }

.btn-danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--danger-bg); border-color: var(--danger); }

.btn-lg { padding: 15px 26px; font-size: 16px; }
.btn-block { width: 100%; }
.btn-sm { padding: 5px 10px; font-size: 12px; }

.card {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 18px;
    margin-bottom: 16px;
    transition: border-color var(--dur-fast) var(--easing),
                box-shadow  var(--dur-fast) var(--easing);
}
.card:hover { box-shadow: var(--shadow-soft); }
.card-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px; padding-bottom: 12px;
    border-bottom: 1px solid var(--border-soft);
}
.card-head h2 { font-size: 14px; font-weight: 700; letter-spacing: .2px; }

table { width: 100%; border-collapse: collapse; }
th {
    text-align: left;
    font-size: 10.5px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-faint);
    font-weight: 700;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
td { padding: 11px 10px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
tbody tr {
    transition: background var(--dur-fast) var(--easing),
                box-shadow  var(--dur-fast) var(--easing);
}
tbody tr:hover {
    background: var(--surface);
    box-shadow: inset 3px 0 0 var(--accent);
}
.mono { font-family: var(--mono); font-weight: 700; letter-spacing: .5px; }
.dim { color: var(--text-dim); }
.faint { color: var(--text-faint); font-size: 12px; }

.pill {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--r-full);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    transition: transform var(--dur-fast) var(--easing);
}
.pill:hover { transform: translateY(-1px); }
.pill-ok     { background: var(--ok-bg); color: var(--ok); }
.pill-danger { background: var(--danger-bg); color: var(--danger); }
.pill-warn   { background: var(--warn-bg); color: var(--warn); }
.pill-dim    { background: var(--surface-2); color: var(--text-dim); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap: 14px; margin-bottom: 18px; }
.stat {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 16px 18px;
    animation: rise .4s cubic-bezier(.2,.8,.2,1) both;
    position: relative;
    overflow: hidden;
    transition: transform var(--dur-fast) var(--easing),
                border-color var(--dur-fast) var(--easing),
                box-shadow var(--dur-fast) var(--easing);
}
.stat .n { font-size: 30px; font-weight: 900; font-family: var(--mono); letter-spacing: -1px; }
.stat .l { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-faint); margin-top: 2px; }
.stat:nth-child(2) { animation-delay: .06s; }
.stat:nth-child(3) { animation-delay: .12s; }
.stat:nth-child(4) { animation-delay: .18s; }
.stat:nth-child(5) { animation-delay: .24s; }
.stat:nth-child(6) { animation-delay: .30s; }
.stat:nth-child(7) { animation-delay: .36s; }
.stat:nth-child(8) { animation-delay: .42s; }

/* Quadro (Etapa 1.2/1.3): stat clicável com ícone SVG grande no topo */
.stat-quadro { padding-top: 44px; }
.stat-quadro:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: var(--shadow-soft);
}
.stat-ico {
    position: absolute; top: 14px; right: 14px;
    width: 24px; height: 24px;
    color: var(--text-faint);
    transition: color var(--dur-fast) var(--easing);
}
.stat-ico svg { width: 100%; height: 100%; display: block; }
.stat-quadro:hover .stat-ico { color: var(--accent); }

/* Quadro destacado — tem coisa em aberto (usar cor pra chamar atenção) */
.stat-destacado {
    border-color: var(--accent);
    background: linear-gradient(180deg, var(--accent-bg) 0%, var(--bg-elev) 60%);
}
.stat-destacado .n   { color: var(--accent); }
.stat-destacado .stat-ico { color: var(--accent); }

/* resultado da validação da portaria */
.veredito { border-radius: var(--r); padding: 18px 20px; margin-bottom: 16px; border: 1px solid; animation: rise .3s both; }
.veredito.sim { background: var(--ok-bg); border-color: var(--ok); }
.veredito.nao { background: var(--danger-bg); border-color: var(--danger); }
.veredito .t { font-size: 17px; font-weight: 900; letter-spacing: .3px; margin-bottom: 4px; }
.veredito.sim .t { color: var(--ok); }
.veredito.nao .t { color: var(--danger); }
.veredito .m { color: var(--text); font-size: 14px; }

.aviso { background: var(--warn-bg); color: var(--warn); border-left: 3px solid var(--warn); padding: 8px 12px; border-radius: 4px; font-size: 13px; margin-top: 8px; }

.toast-area { position: fixed; top: 16px; right: 16px; z-index: 999; display: flex; flex-direction: column; gap: 8px; }
.toast {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    padding: 12px 16px;
    border-radius: var(--r);
    box-shadow: var(--shadow-elev);
    max-width: 380px;
    font-size: 13.5px;
    animation: slide var(--dur) var(--easing-out) both;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.toast.erro { border-left-color: var(--danger); }
.toast.ok   { border-left-color: var(--ok); }
.toast .tt { font-weight: 700; margin-bottom: 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--text-dim); }

.modal-bg {
    position: fixed; inset: 0;
    background: rgba(5, 7, 10, .68);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    z-index: 100;
    display: grid; place-items: center;
    padding: 20px;
    animation: bg-fade var(--dur) var(--easing) both;
}
.modal {
    background: var(--grad-surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    width: 100%; max-width: 520px;
    box-shadow: var(--shadow-elev);
    animation: modal-pop var(--dur) var(--easing-out) both;
}
.modal-head { padding: 16px 20px; border-bottom: 1px solid var(--border-soft); font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
.modal-body { padding: 20px; max-height: 66vh; overflow-y: auto; }
.modal-foot { padding: 14px 20px; border-top: 1px solid var(--border-soft); display: flex; gap: 10px; justify-content: flex-end; }

@keyframes bg-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-pop {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

/* Saída suave (chamada pelo UI.modal/UI.modalGrande via classe .saindo).
   Duração menor que a entrada — na saída queremos sensação "responsivo",
   não coreografia. Fica em 180ms; se a mídia pedir reduced-motion, o
   próprio --dur/--dur-slow já foram zerados no bloco global. */
.modal-bg.saindo { animation: bg-fade-out 180ms var(--easing) both; pointer-events: none; }
.modal-bg.saindo .modal { animation: modal-pop-out 180ms var(--easing) both; }

@keyframes bg-fade-out  { to { opacity: 0; } }
@keyframes modal-pop-out {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateY(6px) scale(.985); }
}

.vazio { text-align: center; padding: 44px 20px; color: var(--text-faint); }
.linha { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.entre { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.mt { margin-top: 14px; }
.erro-txt { color: var(--danger); font-size: 13px; min-height: 18px; margin-bottom: 10px; }

.cond-item {
    width: 100%; text-align: left; padding: 13px 15px; margin-bottom: 8px;
    background: var(--surface); border: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center;
}
.cond-item:hover { border-color: var(--accent); background: var(--surface-2); }

@keyframes rise  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes slide { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

/* Entrada padrão de página: fade + rise mínimo. Aplicado em .content
   (via novo padrão) e em cards de destaque. Sutil de propósito — o app
   é operacional, transição longa atrasa o usuário. */
@keyframes page-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================================
   ShowLoading — cubo 3D girando (metáfora do prédio isométrico do logo)
   Duas variantes:
     - Overlay em tela cheia: usa UI.mostrarLoading(msg) / UI.esconderLoading()
     - Mini dentro de botão: UI.botaoLoading($btn, promise) troca o
       conteúdo por spinner enquanto a promise resolve
   ========================================================================== */

.c360-loading {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(5, 7, 10, .78);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    display: grid; place-items: center;
    animation: fade-in var(--dur-fast) var(--easing) both;
}
.c360-loading-body {
    text-align: center;
    display: flex; flex-direction: column; align-items: center;
    gap: 8px;
}

/* Canvas WebGL do ShowLoading (predio-loading.js renderiza aqui).
   Tamanho fixo pra manter o prédio "em cena" mesmo quando o overlay
   é redimensionado (não estica). O halo âmbar aparece por dentro
   graças à sombra abaixo. */
.c360-canvas-loading {
    width: 320px;
    height: 320px;
    display: block;
    filter: drop-shadow(0 20px 40px rgba(255, 122, 0, .25));
    animation: predio-erguer .6s var(--easing-out) both;
}
@media (max-width: 480px) {
    .c360-canvas-loading { width: 240px; height: 240px; }
}
.c360-loading-msg {
    margin-top: 32px;
    color: var(--text);
    font-family: var(--sans);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    animation: c360-msg-pulso 1.4s infinite ease-in-out;
}
.c360-loading-sub {
    margin-top: 4px;
    color: var(--text-faint);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 1px;
}

/* ShowLoading v3 — prédio isométrico 3D rotacionando. Cena com perspectiva,
   6 faces reais (frente, trás, esq, dir, topo, base), rotação no eixo Y,
   com um sombra circular no chão que pulsa. Windows são grid de divs
   dentro de cada face lateral, acendendo em wave. Mesma linguagem do logo
   mas agora com profundidade real (não é mais silhueta plana).
   Classes .c360-cubo* mantidas escondidas por compat com JS antigo. */
.c360-cubo,
.c360-cubo-face { display: none; }

/* Wrapper com perspective — cria a câmera 3D pra cena inteira */
.c360-cena {
    width: 220px; height: 260px;
    margin: 0 auto;
    perspective: 800px;
    perspective-origin: 50% 45%;
}

/* O prédio: cubo 3D real com transform-style preserve-3d e rotação Y */
.c360-predio-3d {
    --w: 120px;   /* largura das faces frente/trás */
    --d: 80px;    /* profundidade (faces esq/dir) */
    --h: 200px;   /* altura */
    width: var(--w);
    height: var(--h);
    position: relative;
    margin: 0 auto;
    transform-style: preserve-3d;
    animation: predio-3d-orbita 8s linear infinite,
               predio-3d-flutuar 3.6s ease-in-out infinite alternate;
    transform: rotateX(-12deg);
}
@keyframes predio-3d-orbita {
    from { transform: rotateX(-12deg) rotateY(0deg); }
    to   { transform: rotateX(-12deg) rotateY(360deg); }
}
@keyframes predio-3d-flutuar {
    from { translate: 0 -4px; }
    to   { translate: 0 4px; }
}

/* Faces do prédio */
.face {
    position: absolute;
    background: linear-gradient(180deg, #2E3444 0%, #131722 100%);
    border: 1px solid #3A4051;
    box-shadow: inset 0 -30px 60px rgba(0,0,0,.6);
    box-sizing: border-box;
}
.face-frente { width: var(--w); height: var(--h); transform: translateZ(calc(var(--d) / 2)); }
.face-tras   { width: var(--w); height: var(--h); transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); }
.face-esq    { width: var(--d); height: var(--h); left: 0;
               transform: rotateY(-90deg) translateZ(calc(var(--d) / 2));
               transform-origin: left center;
               background: linear-gradient(180deg, #262B38 0%, #0E1220 100%); }
.face-dir    { width: var(--d); height: var(--h); right: 0;
               transform: rotateY(90deg) translateZ(calc(var(--d) / 2));
               transform-origin: right center;
               background: linear-gradient(180deg, #363C4C 0%, #181C28 100%); }
.face-topo   { width: var(--w); height: var(--d); top: 0;
               transform: rotateX(90deg) translateZ(calc(var(--d) / 2));
               transform-origin: top center;
               background: var(--grad-accent);
               border-color: #FF9500;
               box-shadow: inset 0 0 20px rgba(255, 122, 0, .5); }
.face-base   { width: var(--w); height: var(--d); bottom: 0;
               transform: rotateX(-90deg) translateZ(calc(var(--d) / 2));
               transform-origin: bottom center;
               background: #05070C; }

/* Grid de janelas nas 4 faces laterais — 4 cols × 8 rows, cada janela
   é um pontinho âmbar que pulsa em wave */
.face-frente, .face-tras, .face-esq, .face-dir {
    display: grid;
    padding: 14px 10px;
    gap: 5px;
}
.face-frente, .face-tras { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(8, 1fr); }
.face-esq,    .face-dir  { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(8, 1fr); }

.janela3d {
    background: var(--accent);
    opacity: .12;
    border-radius: 2px;
    animation: janela3d-pulso 2.5s infinite ease-in-out;
}
@keyframes janela3d-pulso {
    0%, 100% { opacity: .12; box-shadow: none; }
    45%      { opacity: 1;   box-shadow: 0 0 6px rgba(255, 184, 77, .8); }
}
/* Wave delay — cada janela ganha delay pequenino por índice
   (nth-of-type funciona porque todas são .janela3d filhas diretas) */
.janela3d:nth-child(1)  { animation-delay: 0.00s }
.janela3d:nth-child(2)  { animation-delay: 0.08s }
.janela3d:nth-child(3)  { animation-delay: 0.16s }
.janela3d:nth-child(4)  { animation-delay: 0.24s }
.janela3d:nth-child(5)  { animation-delay: 0.05s }
.janela3d:nth-child(6)  { animation-delay: 0.13s }
.janela3d:nth-child(7)  { animation-delay: 0.21s }
.janela3d:nth-child(8)  { animation-delay: 0.29s }
.janela3d:nth-child(9)  { animation-delay: 0.10s }
.janela3d:nth-child(10) { animation-delay: 0.18s }
.janela3d:nth-child(11) { animation-delay: 0.26s }
.janela3d:nth-child(12) { animation-delay: 0.34s }
.janela3d:nth-child(13) { animation-delay: 0.15s }
.janela3d:nth-child(14) { animation-delay: 0.23s }
.janela3d:nth-child(15) { animation-delay: 0.31s }
.janela3d:nth-child(16) { animation-delay: 0.39s }
.janela3d:nth-child(17) { animation-delay: 0.20s }
.janela3d:nth-child(18) { animation-delay: 0.28s }
.janela3d:nth-child(19) { animation-delay: 0.36s }
.janela3d:nth-child(20) { animation-delay: 0.44s }
.janela3d:nth-child(21) { animation-delay: 0.25s }
.janela3d:nth-child(22) { animation-delay: 0.33s }
.janela3d:nth-child(23) { animation-delay: 0.41s }
.janela3d:nth-child(24) { animation-delay: 0.49s }
.janela3d:nth-child(25) { animation-delay: 0.30s }
.janela3d:nth-child(26) { animation-delay: 0.38s }
.janela3d:nth-child(27) { animation-delay: 0.46s }
.janela3d:nth-child(28) { animation-delay: 0.54s }
.janela3d:nth-child(29) { animation-delay: 0.35s }
.janela3d:nth-child(30) { animation-delay: 0.43s }
.janela3d:nth-child(31) { animation-delay: 0.51s }
.janela3d:nth-child(32) { animation-delay: 0.59s }

/* Sombra circular no chão que pulsa conforme o prédio "flutua" */
.c360-cena::after {
    content: '';
    position: absolute;
    left: 50%; bottom: 8px;
    width: 160px; height: 20px;
    margin-left: -80px;
    background: radial-gradient(ellipse at center, rgba(255, 122, 0, .35), transparent 65%);
    filter: blur(6px);
    animation: chao-pulso 3.6s ease-in-out infinite alternate;
}
@keyframes chao-pulso {
    from { transform: scaleX(1);    opacity: .8; }
    to   { transform: scaleX(.85);  opacity: 1; }
}

/* Alias compat pra manter classes antigas funcionando visualmente */
.c360-predio {
    display: grid;
    grid-template-columns: 46px 60px 46px;
    grid-template-rows: 232px;
    gap: 8px;
    align-items: end;
    margin: 0 auto;
    filter: drop-shadow(0 24px 32px rgba(255, 122, 0, .22));
}

.c360-torre {
    position: relative;
    background: linear-gradient(180deg, #2C313B 0%, #141821 100%);
    border: 1px solid #3A4051;
    border-radius: 6px 6px 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 5px;
    padding: 9px 7px 7px;
    animation: predio-erguer .55s var(--easing-out) both;
    box-shadow: inset 0 -6px 14px rgba(0, 0, 0, .35);
}
.c360-torre--esq  { height: 78%;  grid-template-rows: repeat(5, 1fr); animation-delay: .05s; }
.c360-torre--meio { height: 100%; grid-template-rows: repeat(6, 1fr);
    background: linear-gradient(180deg, #343A48 0%, #1A1E27 100%); }
.c360-torre--dir  { height: 65%;  grid-template-rows: repeat(4, 1fr); animation-delay: .12s; }

/* Telhado triangular âmbar na torre central */
.c360-torre--meio::before {
    content: '';
    position: absolute;
    bottom: 100%; left: -3px; right: -3px;
    height: 30px;
    background: var(--grad-accent);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    filter: drop-shadow(0 -2px 6px rgba(255, 138, 26, .5));
}
/* Antena com sinal 360° */
.c360-torre--meio::after {
    content: '';
    position: absolute;
    left: 50%; bottom: calc(100% + 30px);
    width: 3px; height: 22px;
    margin-left: -1.5px;
    background: var(--accent);
    border-radius: 2px;
    box-shadow: 0 -4px 0 var(--accent-hi),
                0 -12px 0 -2px rgba(255, 197, 90, .5);
    animation: predio-antena 1.8s infinite ease-in-out;
}

.c360-janela {
    background: var(--accent);
    opacity: .18;
    border-radius: 2px;
    animation: predio-janela 2s infinite ease-in-out;
}
/* Wave de acendimento — cada janela ganha delay em cascata */
.c360-torre--esq  .c360-janela:nth-child(1)  { animation-delay: .00s }
.c360-torre--esq  .c360-janela:nth-child(2)  { animation-delay: .08s }
.c360-torre--esq  .c360-janela:nth-child(3)  { animation-delay: .16s }
.c360-torre--esq  .c360-janela:nth-child(4)  { animation-delay: .24s }
.c360-torre--esq  .c360-janela:nth-child(5)  { animation-delay: .32s }
.c360-torre--esq  .c360-janela:nth-child(6)  { animation-delay: .40s }
.c360-torre--esq  .c360-janela:nth-child(7)  { animation-delay: .48s }
.c360-torre--esq  .c360-janela:nth-child(8)  { animation-delay: .56s }
.c360-torre--esq  .c360-janela:nth-child(9)  { animation-delay: .64s }
.c360-torre--esq  .c360-janela:nth-child(10) { animation-delay: .72s }
.c360-torre--meio .c360-janela:nth-child(1)  { animation-delay: .04s }
.c360-torre--meio .c360-janela:nth-child(2)  { animation-delay: .12s }
.c360-torre--meio .c360-janela:nth-child(3)  { animation-delay: .20s }
.c360-torre--meio .c360-janela:nth-child(4)  { animation-delay: .28s }
.c360-torre--meio .c360-janela:nth-child(5)  { animation-delay: .36s }
.c360-torre--meio .c360-janela:nth-child(6)  { animation-delay: .44s }
.c360-torre--meio .c360-janela:nth-child(7)  { animation-delay: .52s }
.c360-torre--meio .c360-janela:nth-child(8)  { animation-delay: .60s }
.c360-torre--meio .c360-janela:nth-child(9)  { animation-delay: .68s }
.c360-torre--meio .c360-janela:nth-child(10) { animation-delay: .76s }
.c360-torre--meio .c360-janela:nth-child(11) { animation-delay: .84s }
.c360-torre--meio .c360-janela:nth-child(12) { animation-delay: .92s }
.c360-torre--dir  .c360-janela:nth-child(1)  { animation-delay: .10s }
.c360-torre--dir  .c360-janela:nth-child(2)  { animation-delay: .18s }
.c360-torre--dir  .c360-janela:nth-child(3)  { animation-delay: .26s }
.c360-torre--dir  .c360-janela:nth-child(4)  { animation-delay: .34s }
.c360-torre--dir  .c360-janela:nth-child(5)  { animation-delay: .42s }
.c360-torre--dir  .c360-janela:nth-child(6)  { animation-delay: .50s }
.c360-torre--dir  .c360-janela:nth-child(7)  { animation-delay: .58s }
.c360-torre--dir  .c360-janela:nth-child(8)  { animation-delay: .66s }

/* Janela âmbar central em cada face lateral — piscam em sequência,
   como andares acendendo à noite. */
.c360-cubo-face--frente::after,
.c360-cubo-face--tras::after,
.c360-cubo-face--esq::after,
.c360-cubo-face--dir::after {
    content: '';
    position: absolute;
    top: 30%; left: 30%; width: 40%; height: 40%;
    background: var(--accent);
    border-radius: 3px;
    opacity: .3;
    box-shadow: 0 0 12px var(--accent);
    animation: c360-janela 1.6s infinite ease-in-out;
}
.c360-cubo-face--tras::after   { animation-delay: .4s; }
.c360-cubo-face--esq::after    { animation-delay: .8s; }
.c360-cubo-face--dir::after    { animation-delay: 1.2s; }

@keyframes predio-erguer {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}
@keyframes predio-janela {
    0%, 100% { opacity: .18; box-shadow: none; }
    45%      { opacity: 1;   box-shadow: 0 0 10px rgba(255, 184, 77, .8); }
}
@keyframes predio-antena {
    0%, 100% { opacity: .55; }
    50%      { opacity: 1; }
}
@keyframes c360-msg-pulso {
    0%, 100% { opacity: .55; }
    50%      { opacity: 1;   }
}

/* --- Spinner mini dentro de botão --- */
.c360-cubo-mini {
    display: inline-block;
    vertical-align: middle;
    width: 14px; height: 14px;
    margin-right: 8px;
    position: relative;
    color: currentColor;
}
.c360-cubo-mini::before {
    content: '';
    position: absolute; inset: 0;
    background: currentColor;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    animation: c360-cubo-mini-girar .9s infinite cubic-bezier(.6, .1, .4, .9);
}
@keyframes c360-cubo-mini-girar {
    0%, 100% { transform: rotate(0deg)   scale(1);   opacity: 1;  }
    50%      { transform: rotate(180deg) scale(.72); opacity: .5; }
}

/* Botão em modo carregando: bloqueia clique e reduz opacidade sem sumir */
button.c360-loading-btn,
.btn.c360-loading-btn {
    pointer-events: none;
    opacity: .85;
    cursor: wait;
}

/* ==========================================================================
   Botões-ícone (Etapa 0.4)
   Botão compacto contendo só um SVG. Usar em coluna de ação de tabela.
   Sempre com `title` pra tooltip.
   ========================================================================== */
.btn-ico {
    padding: 6px 8px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 0;
    transition: color var(--dur-fast) var(--easing),
                border-color var(--dur-fast) var(--easing),
                background var(--dur-fast) var(--easing);
}
.btn-ico:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
.btn-ico.btn-ico-ok:hover      { color: var(--ok);      border-color: var(--ok);      background: var(--ok-bg); }
.btn-ico.btn-ico-warn:hover    { color: var(--warn);    border-color: var(--warn);    background: var(--warn-bg); }
.btn-ico.btn-ico-danger:hover  { color: var(--danger);  border-color: var(--danger);  background: var(--danger-bg); }
.btn-ico.btn-ico-info:hover    { color: var(--info);    border-color: var(--info);    background: var(--info-bg); }
.btn-ico svg { width: 16px; height: 16px; display: block; }

/* Coluna de ações: agrupa 2-4 btn-ico com espaçamento uniforme */
.acoes { display: inline-flex; gap: 6px; align-items: center; }

/* ==========================================================================
   Cabeçalho de grupo (Etapa 0.3) — mês/ano em listagens agrupadas
   ========================================================================== */
.grupo-mes {
    display: flex; align-items: center; gap: 10px;
    margin: 18px 0 8px;
    color: var(--text-faint);
    font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
    font-weight: 700;
}
.grupo-mes::before, .grupo-mes::after {
    content: ''; flex: 1; height: 1px; background: var(--border-soft);
}
.grupo-mes .qtd {
    background: var(--surface); border: 1px solid var(--border-soft);
    padding: 2px 8px; border-radius: var(--r-full);
    color: var(--text-dim); font-size: 10px;
}
.grupo-mes.grupo-abertos { color: var(--accent); }
.grupo-mes.grupo-abertos::before,
.grupo-mes.grupo-abertos::after { background: var(--accent-bg); }

/* Cabeçalho de drill-down: botão voltar + título da seção atual.
   Usado em prestadores (categoria) e replicável em qualquer tela com
   padrão "quadros -> lista da categoria". */
.drill-cabec {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 14px; padding: 10px 14px;
    background: var(--bg-elev);
    border: 1px solid var(--border-soft);
    border-radius: var(--r);
    flex-wrap: wrap;
}
.drill-cabec .btn-sm {
    display: inline-flex; align-items: center; gap: 6px;
}
.drill-cabec .btn-sm svg { width: 14px; height: 14px; }
.drill-titulo {
    font-weight: 700; font-size: 16px;
}
.drill-titulo .faint { font-weight: 500; font-size: 13px; }

/* ==========================================================================
   Histórico compartilhado (Etapa 0.2)
   Modal com mensagens síndico/morador em ordem cronológica.
   ========================================================================== */
.hist-lista { display: flex; flex-direction: column; gap: 10px; }
.hist-msg {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--r);
    padding: 10px 12px;
    max-width: 84%;
}
.hist-msg-morador { align-self: flex-start;  border-left: 3px solid var(--info); }
.hist-msg-sindico { align-self: flex-end;    border-left: 3px solid var(--accent); background: var(--accent-bg); }

.hist-msg-cab {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    font-size: 11px;
    margin-bottom: 6px;
}
.hist-autor  { font-weight: 700; color: var(--text); font-size: 13px; }
.hist-papel  {
    padding: 1px 6px; border-radius: var(--r-full);
    background: var(--surface-2); color: var(--text-dim);
    font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase;
}
.hist-quando { color: var(--text-faint); margin-left: auto; font-family: var(--mono); }
.hist-corpo  { color: var(--text); font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
.hist-status {
    margin-top: 6px; font-size: 12px; color: var(--accent);
    font-weight: 600;
}

@media (max-width: 820px) {
    .shell { flex-direction: column; }
    .sidebar { width: 100%; height: auto; position: static; flex-direction: row; align-items: center; overflow-x: auto; }
    .sidebar .brand { padding: 14px; }
    .nav { display: flex; padding: 6px; }
    .nav a { white-space: nowrap; border-left: none; border-bottom: 2px solid transparent; }
    .nav a.on { border-left: none; border-bottom-color: var(--accent); }
    .side-foot { display: none; }
    .content { padding: 14px; }
    /* alvos maiores para a portaria em tablet */
    button, .btn { padding: 12px 18px; }

    /* ======= Tabelas responsivas (Etapa 0.1) =======
       Coluna marcada com .col-secundaria some no mobile. O detalhe
       completo continua no modal que cada tela já tem. Card e content
       não podem estourar horizontalmente. */
    .col-secundaria { display: none !important; }

    .content, .card { overflow-x: hidden; }
    table { width: 100%; table-layout: auto; font-size: 13px; }
    th, td { padding: 8px 6px !important; }
    /* Placa em mono grande pode estourar — reduz no mobile */
    .placa-input { font-size: 22px; letter-spacing: 2px; }
    /* Botões dentro de célula de tabela ficam compactos */
    td .btn-sm, td button.btn-sm { padding: 6px 8px; font-size: 12px; }
    /* Wrapper opcional pra tabela que ainda precisa scroll (raro) */
    .tabela-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}