/* ==========================================================================
   estilo.css — Nebuloza v3  ·  "O PAINEL DE LADRILHOS"

   THESIS: o logo já é um ladrilho (anéis concêntricos + estrela de 4 pontas =
   o motivo mais clássico da azulejaria luso-brasileira, desenhado como
   nebulosa). O Core inteiro é uma PAREDE DE LADRILHOS: cada app é uma peça,
   cada pessoa é uma peça, e o padrão só fecha porque as peças convivem lado a
   lado. Recusa o hub SaaS escuro de hero centralizado + grade de cards com
   glow, e recusa também o seu oposto previsível (landing clara minimalista de
   tipografia gigante e ilustração isométrica).

   OWN-WORLD: cimento pigmentado. Fundo de cimento escuro (#131418), peças em
   #1C1E23 separadas por JUNTA — vão escuro de 3px, nunca borda de 1px —, cal
   quente (#F2F0EA) como ação, e pigmento chapado ocupando região inteira:
   cobalto de azulejo (#1C4FA1), ocre queimado (#C87A2B), terracota, jade.
   Canto quase reto (6px); o redondo é privilégio do desenho de dentro da peça
   e do avatar. Archivo (grotesca larga, letreiro pintado) + Chivo, ambas da
   Omnibus-Type. O motivo (anéis + estrela) é o único ornamento do sistema.

   FORM: ladrilho hidráulico brasileiro — 4ª da lista ordenada por ressonância,
   com a encenação "junta que atravessa" no hero da landing.
   Seed key: 5c5a2253 (direction/persuade).

   Regra permanente: junta, não borda. Se você desenhou um contorno de 1px pra
   separar duas superfícies, você desenhou errado — é `gap:3px` sobre fundo
   escuro. Ver DESIGN.md.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@100..125,400..800&family=Chivo:wght@300..700&display=swap');

:root{
    /* --- O cimento --- */
    --junta:#08090B;
    --cimento-fundo:#131418;
    --cimento:#1C1E23;
    --cimento-claro:#262930;
    --cimento-alto:#32363F;
    /* --- A cal --- */
    --cal:#F2F0EA;
    --cal-2:#B9B7B0;
    --cal-3:#7C7B77;
    /* --- Os pigmentos (campo, nunca pincelada) --- */
    --cobalto:#1C4FA1;
    --cobalto-claro:#3E7BD1;
    --cobalto-fundo:#102B57;
    --ocre:#C87A2B;
    --ocre-claro:#E2A15A;
    --terracota:#A8442A;
    --jade:#2E8B72;

    /* --- Aliases legados: os NOMES continuam (perfil.html e historico.html os
       referenciam inline), os VALORES são os do ladrilho. --cor-borda virou a
       cor da JUNTA de propósito: onde havia contorno claro, agora há vão. --- */
    --cor-bg:var(--cimento-fundo);
    --cor-surface:var(--cimento);
    --cor-surface-2:var(--cimento-claro);
    --cor-elev:var(--cimento-alto);
    --cor-borda:var(--junta);
    --cor-borda-2:var(--cimento-alto);
    --cor-texto:var(--cal);
    --cor-texto-2:var(--cal-2);
    --cor-texto-3:var(--cal-3);
    --cor-violeta:var(--cobalto-claro);
    --cor-magenta:var(--ocre-claro);
    --grad-marca:var(--cobalto);
    --cor-sucesso:#35A47F;
    --cor-erro:#DF6046;
    --cor-alerta:#D99A16;

    --focus:var(--cobalto-claro);
    --junta-l:3px;
    --raio:6px;
    --raio-lg:6px;
    --raio-sm:3px;
    --transicao:180ms cubic-bezier(.2,0,0,1);
    --fonte-titulo:'Archivo',system-ui,sans-serif;
    --fonte-corpo:'Chivo',system-ui,sans-serif;

    /* O motivo da marca: dois anéis + a estrela de 4 pontas. Usado como MÁSCARA
       (herda currentColor) — é o único ornamento do sistema. */
    --motivo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Ccircle cx='12' cy='12' r='6.6' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M12 5.6c.4 3.5 2.5 5.6 6 6-3.5.4-5.6 2.5-6 6-.4-3.5-2.5-5.6-6-6 3.5-.4 5.6-2.5 6-6Z' fill='%23000'/%3E%3C/svg%3E");
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
    font-family:var(--fonte-corpo);
    background:var(--cimento-fundo);
    color:var(--cal);
    line-height:1.62;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    min-height:100dvh;
}
h1,h2,h3,h4{font-family:var(--fonte-titulo);font-weight:700;font-stretch:112%;
    letter-spacing:-.015em;line-height:1.05}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
img{max-width:100%;display:block}
::selection{background:var(--cobalto);color:var(--cal)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--cimento-alto);border-radius:0;border:3px solid var(--cimento-fundo)}
::-webkit-scrollbar-track{background:transparent}

/* ---- O motivo, como elemento reutilizável ---- */
.motivo{display:inline-block;width:1em;height:1em;background:currentColor;flex-shrink:0;
    -webkit-mask:var(--motivo) center/contain no-repeat;mask:var(--motivo) center/contain no-repeat}

/* ---- Lockup da marca ---- */
.marca-texto{font-family:var(--fonte-titulo);font-weight:800;font-stretch:118%;
    letter-spacing:-.02em;text-transform:uppercase;color:var(--cal);white-space:nowrap}

/* ---- Rótulo gravado na borda do ladrilho ---- */
.rotulo-micro{display:inline-flex;align-items:center;gap:8px;font-family:var(--fonte-titulo);
    font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--cal-3)}
.rotulo-micro::before{content:'';width:.85em;height:.85em;background:currentColor;
    -webkit-mask:var(--motivo) center/contain no-repeat;mask:var(--motivo) center/contain no-repeat}

/* ---- Botões: peças que se pressionam ---- */
.btn-primario{
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    background:var(--cal);color:var(--junta);
    font-family:var(--fonte-titulo);font-weight:700;font-size:.86rem;font-stretch:105%;
    text-transform:uppercase;letter-spacing:.06em;
    padding:0 26px;height:50px;border-radius:var(--raio);transition:var(--transicao);cursor:pointer;
}
.btn-primario:hover:not(:disabled){background:#E4E1D8;transform:translateY(1px)}
.btn-primario:disabled{opacity:.5;cursor:not-allowed}
.btn-primario svg{width:18px;height:18px}
.btn-secundario{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    background:var(--cimento-claro);color:var(--cal);
    font-family:var(--fonte-titulo);font-weight:700;font-size:.8rem;
    text-transform:uppercase;letter-spacing:.06em;
    padding:0 20px;height:48px;border-radius:var(--raio);transition:var(--transicao);cursor:pointer;
}
.btn-secundario:hover{background:var(--cimento-alto)}
.btn-secundario svg{width:17px;height:17px}
.btn-acento{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    background:var(--cobalto);color:var(--cal);
    font-family:var(--fonte-titulo);font-weight:700;font-size:.8rem;
    text-transform:uppercase;letter-spacing:.06em;
    padding:0 20px;height:48px;border-radius:var(--raio);transition:var(--transicao);cursor:pointer;
}
.btn-acento:hover{background:#225CBB}
.btn-perigo{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    background:var(--cor-erro);color:#1B0A06;
    font-family:var(--fonte-titulo);font-weight:700;font-size:.8rem;
    text-transform:uppercase;letter-spacing:.06em;
    padding:0 18px;height:48px;border-radius:var(--raio);transition:var(--transicao);cursor:pointer;
}
.btn-perigo:hover{background:#E97A63}
.link-acento{color:var(--cobalto-claro);font-weight:700;cursor:pointer;transition:var(--transicao)}
.link-acento:hover{color:var(--cal)}

/* ---- Campos: escavados no ladrilho (mais escuros que a peça em volta) ---- */
input[type="text"],input[type="email"],input[type="password"],input[type="tel"],select{
    width:100%;min-height:50px;padding:0 15px;
    background:var(--cimento-fundo);border:none;border-radius:var(--raio-sm);
    color:var(--cal);font-family:inherit;font-size:.94rem;outline:none;transition:var(--transicao);
    appearance:none;-webkit-appearance:none;
}
input:focus,select:focus{background:var(--cimento);box-shadow:0 0 0 3px var(--cobalto-claro)}
input::placeholder{color:var(--cal-3)}
input:disabled{opacity:.5;cursor:not-allowed}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23B9B7B0' stroke-width='2'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}

.campo{margin-bottom:18px}
.campo label{display:block;font-family:var(--fonte-titulo);font-size:.68rem;font-weight:700;
    text-transform:uppercase;letter-spacing:.14em;color:var(--cal-3);margin-bottom:8px}
.campo-senha{position:relative}
.campo-senha input{padding-right:52px}
.btn-olho{
    position:absolute;top:50%;right:6px;transform:translateY(-50%);
    width:40px;height:40px;border-radius:var(--raio-sm);display:flex;align-items:center;justify-content:center;
    color:var(--cal-3);transition:var(--transicao);cursor:pointer;
}
.btn-olho:hover{color:var(--cal);background:var(--cimento-claro)}
.btn-olho svg{width:19px;height:19px}
.dica-campo{font-size:.8rem;color:var(--cal-3);margin-top:7px;min-height:1.1em;transition:var(--transicao)}
.dica-campo.ok{color:var(--cor-sucesso)}
.dica-campo.erro{color:var(--cor-erro)}
.dica-campo.carregando{color:var(--cal-2)}

/* Força de senha: quatro ladrilhos que vão sendo assentados */
.forca-senha{display:flex;gap:var(--junta-l);margin-top:9px}
.forca-senha span{flex:1;height:5px;border-radius:2px;background:var(--junta);transition:var(--transicao)}
.forca-1 .forca-senha span:nth-child(-n+1){background:var(--terracota)}
.forca-2 .forca-senha span:nth-child(-n+2){background:var(--ocre)}
.forca-3 .forca-senha span:nth-child(-n+3){background:var(--cobalto-claro)}
.forca-4 .forca-senha span{background:var(--cor-sucesso)}

/* ---- Spinner: o anel externo do motivo girando ---- */
.spinner{
    width:18px;height:18px;border-radius:50%;
    border:2.5px solid rgba(8,9,11,.25);border-top-color:transparent;
    animation:girar .7s linear infinite;display:inline-block;
}
@keyframes girar{to{transform:rotate(360deg)}}

.oculto{display:none!important}

/* ==========================================================================
   TELA DE CARREGAMENTO — o ladrilho sendo assentado
   ========================================================================== */
#tela-carregando{position:fixed;inset:0;z-index:500;background:var(--cimento-fundo);display:flex;
    flex-direction:column;align-items:center;justify-content:center;gap:26px;transition:opacity 400ms ease}
#tela-carregando img{width:86px;border-radius:var(--raio);animation:assentar 2.6s cubic-bezier(.2,0,0,1) infinite}
#tela-carregando .spinner{width:20px;height:20px;border-color:var(--cimento-alto);border-top-color:var(--cobalto-claro)}
#tela-carregando.sumindo{opacity:0;pointer-events:none}
@keyframes assentar{0%,100%{opacity:.55;transform:scale(.96)}50%{opacity:1;transform:scale(1)}}

/* ==========================================================================
   AUTENTICAÇÃO (/entrar.html) — parede de ladrilhos à esquerda, formulário à direita
   ========================================================================== */
.auth-tela{display:grid;grid-template-columns:1.05fr 1fr;gap:var(--junta-l);
    background:var(--junta);min-height:100dvh}

.auth-visual{
    position:relative;overflow:hidden;
    display:flex;flex-direction:column;align-items:center;
    padding:96px 48px 40px;text-align:center;
    background:var(--cobalto-fundo);
}
/* A parede: o motivo repetido em baixo contraste, como um ladrilho estampado */
.auth-visual::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.09;
    background-image:var(--motivo);background-size:104px 104px;background-repeat:repeat;
    background-position:center}
.auth-visual > *{position:relative;z-index:1}
.auth-visual .marca-topo{position:absolute;top:30px;left:34px;display:flex;align-items:center;gap:11px;z-index:2}
.auth-visual .marca-topo img{height:34px;width:34px;border-radius:var(--raio-sm)}
.auth-visual .marca-topo .marca-texto{font-size:1.0rem}
.auth-visual .miolo{max-width:420px;width:100%}
.auth-visual .logo-grande{display:flex;flex-direction:column;align-items:center;gap:20px;margin:0 auto 26px}
.auth-visual .logo-grande img{width:104px;height:104px;border-radius:var(--raio)}
.auth-visual .logo-grande .marca-texto{font-size:1.9rem;line-height:1}
.auth-visual .tagline h2{font-family:var(--fonte-titulo);font-size:1.14rem;font-weight:700;color:var(--cal);margin-bottom:10px}
.auth-visual .tagline p{color:rgba(242,240,234,.76);font-size:.94rem;line-height:1.6}

/* Vitrine dos apps: ladrilhos empilhados com junta */
.auth-apps{max-width:420px;width:100%;margin-top:38px;text-align:left}
.auth-apps .rotulo-micro{display:flex;justify-content:center;margin-bottom:14px;color:rgba(242,240,234,.6)}
.auth-app-item{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:var(--raio);
    background:rgba(8,9,11,.42);margin-bottom:var(--junta-l)}
.auth-app-item img,.auth-app-item .auth-app-ico{width:38px;height:38px;border-radius:var(--raio-sm);object-fit:cover;
    background:var(--cobalto);display:flex;align-items:center;justify-content:center;color:var(--cal);
    font-family:var(--fonte-titulo);font-weight:800;font-size:.94rem;flex-shrink:0}
.auth-app-item b{display:block;font-family:var(--fonte-titulo);font-size:.94rem;color:var(--cal)}
.auth-app-item span{display:block;font-size:.74rem;color:rgba(242,240,234,.6);margin-top:2px;line-height:1.4}

.auth-visual .rodape-marca{margin-top:auto;padding-top:36px;color:rgba(242,240,234,.42);
    font-family:var(--fonte-titulo);font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase}

/* Poeira de estrela do fundo do logo — discreta, sem brilho difuso */
.estrela{position:absolute;border-radius:50%;background:var(--cal);pointer-events:none;
    animation:cintilar 5s ease-in-out infinite}
@keyframes cintilar{0%,100%{opacity:.1}50%{opacity:.4}}

.auth-form-lado{display:flex;align-items:center;justify-content:center;padding:48px 32px;
    background:var(--cimento-fundo);position:relative}
.auth-voltar{position:absolute;top:28px;right:32px;display:inline-flex;align-items:center;gap:7px;
    color:var(--cal-3);font-family:var(--fonte-titulo);font-size:.74rem;font-weight:700;
    text-transform:uppercase;letter-spacing:.12em;transition:var(--transicao)}
.auth-voltar:hover{color:var(--cal)}
.auth-voltar svg{width:15px;height:15px}
.auth-card{width:100%;max-width:396px;animation:surgir 420ms cubic-bezier(.2,0,0,1)}
@keyframes surgir{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.auth-card .logo-mobile{display:none;flex-direction:column;align-items:center;gap:12px;margin:0 auto 30px}
.auth-card .logo-mobile img{width:76px;height:76px;border-radius:var(--raio)}
.auth-card .logo-mobile .marca-texto{font-size:1.4rem}

/* Abas: duas peças coladas, a ativa é cal */
.auth-abas{display:flex;gap:var(--junta-l);margin-bottom:30px;background:var(--junta);
    padding:var(--junta-l);border-radius:var(--raio)}
.auth-abas button{flex:1;padding:12px 8px;font-family:var(--fonte-titulo);font-size:.8rem;font-weight:700;
    text-transform:uppercase;letter-spacing:.1em;color:var(--cal-3);background:var(--cimento);
    border-radius:var(--raio-sm);transition:var(--transicao)}
.auth-abas button:hover{color:var(--cal-2);background:var(--cimento-claro)}
.auth-abas button.ativa{color:var(--junta);background:var(--cal)}

.auth-vista{display:none}
.auth-vista.ativa{display:block;animation:surgir 300ms ease}
.auth-vista h1{font-size:1.9rem;font-stretch:118%;text-transform:uppercase;line-height:.98;margin-bottom:10px}
.auth-vista .subtitulo{color:var(--cal-2);margin-bottom:28px;font-size:.94rem}
.auth-vista .btn-primario{width:100%;margin-top:6px}
.auth-vista .rodape-form{margin-top:24px;text-align:center;color:var(--cal-2);font-size:.94rem}

/* ==========================================================================
   PAINEL (/painel.html) — a parede do usuário
   ========================================================================== */
.painel{max-width:1180px;margin:0 auto;padding:44px 20px 90px}
.painel-cabecalho{margin-bottom:30px}
.painel-cabecalho .rotulo-micro{margin-bottom:14px}
.painel-cabecalho h1{font-size:clamp(1.9rem,6vw,3.1rem);font-stretch:118%;text-transform:uppercase;line-height:.94}
.painel-cabecalho p{color:var(--cal-2);margin-top:10px;font-size:1.0rem;max-width:52ch}
.painel-secao-titulo{display:flex;align-items:center;justify-content:space-between;gap:14px;
    margin:0 0 var(--junta-l);padding:14px 18px;background:var(--cimento-claro);
    border-radius:var(--raio) var(--raio) 0 0}
.painel-secao-titulo h2{font-family:var(--fonte-titulo);font-size:.8rem;font-weight:700;
    text-transform:uppercase;letter-spacing:.18em;color:var(--cal-2)}
.painel-secao-titulo .btn-secundario{height:36px;padding:0 14px;font-size:.68rem;background:var(--cimento-alto)}
.painel-secao-titulo .btn-secundario:hover{background:var(--cal);color:var(--junta)}
.secao-acoes{display:flex;align-items:center;gap:10px}

/* A parede de apps: peças com junta de 3px sobre o vão escuro */
.grid-apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
    gap:var(--junta-l);background:var(--junta);padding:var(--junta-l);border-radius:0 0 var(--raio) var(--raio)}
.card-app{
    position:relative;background:var(--cimento);border:none;border-radius:var(--raio-sm);
    padding:22px;transition:var(--transicao);
    display:flex;flex-direction:column;gap:7px;cursor:pointer;overflow:hidden;
}
/* Ornamento: o motivo gravado no canto da peça, quase invisível até o hover */
.card-app::before{content:'';position:absolute;right:-26px;bottom:-26px;width:112px;height:112px;
    background:var(--cal);opacity:.03;transition:var(--transicao);pointer-events:none;
    -webkit-mask:var(--motivo) center/contain no-repeat;mask:var(--motivo) center/contain no-repeat}
.card-app:hover{background:var(--cimento-claro)}
.card-app:hover::before{opacity:.08}
.card-app .app-icone{
    width:52px;height:52px;border-radius:var(--raio-sm);object-fit:cover;background:var(--cobalto);
    display:flex;align-items:center;justify-content:center;color:var(--cal);
    font-family:var(--fonte-titulo);font-weight:800;font-size:1.4rem;margin-bottom:12px;
}
.card-app h3{font-family:var(--fonte-titulo);font-size:1.0rem;font-weight:700;font-stretch:110%}
.card-app p{color:var(--cal-2);font-size:.86rem;line-height:1.5}
.card-app .app-abrir{margin-top:auto;padding-top:16px;display:flex;align-items:center;gap:6px;
    color:var(--cal-3);font-family:var(--fonte-titulo);font-weight:700;font-size:.68rem;
    text-transform:uppercase;letter-spacing:.14em;transition:var(--transicao)}
.card-app:hover .app-abrir{color:var(--cobalto-claro)}
.card-app.inativo{opacity:.45}
/* Mobile: 3 peças por linha, sem rolagem — só ícone + nome. A junta continua junta. */
@media(max-width:520px){
    .grid-apps{grid-template-columns:repeat(3,1fr)}
    .card-app{padding:14px 6px;gap:0;align-items:center;text-align:center;min-height:0}
    .card-app .app-icone{width:42px;height:42px;font-size:1.0rem;margin-bottom:9px}
    .card-app h3{font-size:.74rem;line-height:1.25;font-weight:700;letter-spacing:0}
    .card-app p,.card-app .app-abrir{display:none}
    .card-app::before{display:none}
    .badge-inativo{font-size:.62rem;padding:2px 5px;top:4px;right:4px}
    .card-app.editavel .admin-acoes{top:3px;right:3px}
    .card-app .admin-acoes button{width:26px;height:26px}
    .card-app.editavel .badge-inativo{display:none}
}
.badge-inativo{position:absolute;top:12px;right:12px;font-family:var(--fonte-titulo);font-size:.62rem;
    font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:3px 8px;border-radius:2px;
    background:var(--cor-alerta);color:#1B1204;z-index:2}
.card-app .admin-acoes{display:none;position:absolute;top:10px;right:10px;z-index:3;gap:var(--junta-l)}
.card-app.editavel .admin-acoes{display:flex}
.card-app.editavel .badge-inativo{right:88px}
.card-app .admin-acoes button{width:32px;height:32px;border-radius:var(--raio-sm);background:var(--junta);
    display:flex;align-items:center;justify-content:center;color:var(--cal-2);transition:var(--transicao)}
.card-app .admin-acoes button:hover{color:var(--junta);background:var(--cal)}
.card-app .admin-acoes svg{width:15px;height:15px}

/* Peça vazia à espera de ser assentada */
.card-add{background:var(--cimento-fundo);display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:10px;min-height:172px;color:var(--cal-3);
    font-family:var(--fonte-titulo);font-weight:700;font-size:.74rem;text-transform:uppercase;
    letter-spacing:.14em;border-radius:var(--raio-sm);transition:var(--transicao);cursor:pointer}
.card-add:hover{background:var(--cimento-claro);color:var(--cal)}
.card-add svg{width:28px;height:28px}

/* Sugestões de app (catálogo estático) */
.card-app.sugestao{cursor:default;background:var(--cimento-fundo)}
.card-app.sugestao:hover{background:var(--cimento-fundo)}
.badge-sugestao{position:absolute;top:12px;right:12px;font-family:var(--fonte-titulo);font-size:.62rem;
    font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:3px 8px;border-radius:2px;
    background:var(--cobalto);color:var(--cal);z-index:2}
.sugestao-acoes{margin-top:auto;padding-top:16px;display:flex;gap:var(--junta-l);flex-wrap:wrap}
.sugestao-acoes button{height:38px;padding:0 12px;font-size:.68rem;flex:1;min-width:0}

.estado-vazio{text-align:center;padding:56px 22px;color:var(--cal-2);background:var(--cimento);
    border-radius:var(--raio-sm)}
.estado-vazio svg{width:38px;height:38px;color:var(--cal-3);margin:0 auto 14px}
.estado-vazio::before{content:'';display:block;width:44px;height:44px;margin:0 auto 16px;
    background:var(--cimento-alto);
    -webkit-mask:var(--motivo) center/contain no-repeat;mask:var(--motivo) center/contain no-repeat}
.estado-vazio h3{margin-bottom:6px;font-size:1.0rem}
.estado-vazio p{font-size:.94rem}

.selo-admin{display:inline-flex;align-items:center;gap:6px;font-family:var(--fonte-titulo);font-size:.62rem;
    font-weight:700;text-transform:uppercase;letter-spacing:.14em;padding:5px 11px;border-radius:2px;
    color:var(--cal);background:var(--terracota)}

/* ---- Compartilhamentos: peças largas, uma por linha ---- */
.grid-compartilhamentos{display:flex;flex-direction:column;gap:var(--junta-l);
    background:var(--junta);padding:var(--junta-l);border-radius:0 0 var(--raio) var(--raio)}
.grid-compartilhamentos:empty{display:none}
.card-share{display:flex;align-items:center;gap:14px;padding:15px 18px;
    background:var(--cimento);border-radius:var(--raio-sm);transition:var(--transicao)}
.card-share:hover{background:var(--cimento-claro)}
/* Convite pendente = a peça ainda não assentou: campo de cobalto inteiro */
.card-share.pendente{background:var(--cobalto-fundo)}
.share-icone{width:44px;height:44px;border-radius:var(--raio-sm);object-fit:cover;background:var(--cobalto);
    display:flex;align-items:center;justify-content:center;color:var(--cal);
    font-family:var(--fonte-titulo);font-weight:800;font-size:1.0rem;flex-shrink:0}
.share-info{flex:1;min-width:0}
.share-info strong{display:block;font-family:var(--fonte-titulo);font-size:.94rem;font-weight:700}
.share-info small{color:var(--cal-2);font-size:.8rem;display:block;margin-top:2px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.share-acoes{display:flex;gap:var(--junta-l);flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
.share-acoes .btn-secundario,.share-acoes .btn-perigo,.share-acoes .btn-acento{height:38px;padding:0 13px;font-size:.68rem}
.compart-vazio{padding:32px 20px;text-align:center;color:var(--cal-3);font-size:.94rem;
    background:var(--cimento);border-radius:var(--raio-sm)}

/* ==========================================================================
   MODAIS DO PORTAL — a peça erguida da parede
   ========================================================================== */
.modal-fundo{position:fixed;inset:0;z-index:200;background:rgba(8,9,11,.82);backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);display:flex;align-items:center;justify-content:center;padding:20px;
    opacity:0;visibility:hidden;transition:var(--transicao)}
.modal-fundo.aberto{opacity:1;visibility:visible}
.modal{width:100%;max-width:440px;max-height:90dvh;overflow-y:auto;background:var(--cimento);
    border-radius:var(--raio);padding:26px;transform:translateY(8px);
    transition:var(--transicao);box-shadow:0 34px 70px rgba(0,0,0,.62)}
.modal-fundo.aberto .modal{transform:none}
.modal-largo{max-width:640px}
.modal-cabecalho{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.modal-cabecalho h3{font-size:1.14rem;font-stretch:112%}
.modal-sub{color:var(--cal-2);font-size:.86rem;line-height:1.5;margin:-12px 0 20px}

/* Tour de onboarding (primeiro login) — sem overlay escuro de propósito (ele
   ficaria abaixo do header no stacking context dele e escureceria o destaque). */
.nb-tour-fundo{position:fixed;inset:0;z-index:3000;pointer-events:none}
.nb-tour-card{position:fixed;width:280px;pointer-events:auto;background:var(--cobalto);
    border-radius:var(--raio);padding:18px;box-shadow:0 34px 70px rgba(0,0,0,.62);color:var(--cal)}
.nb-tour-card strong{display:block;font-family:var(--fonte-titulo);font-size:1.0rem;margin-bottom:8px}
.nb-tour-card p{color:rgba(242,240,234,.82);font-size:.86rem;line-height:1.5}
.nb-tour-acoes{display:flex;justify-content:space-between;align-items:center;margin-top:16px}
.nb-tour-pular{background:none;border:none;color:rgba(242,240,234,.6);font-size:.86rem;cursor:pointer;padding:8px 4px}
.nb-tour-prox{background:var(--cal);color:var(--junta);border:none;border-radius:var(--raio-sm);
    font-family:var(--fonte-titulo);font-weight:700;font-size:.74rem;text-transform:uppercase;
    letter-spacing:.1em;padding:11px 18px;cursor:pointer}
.nb-tour-passo{display:block;text-align:right;color:rgba(242,240,234,.55);font-size:.74rem;margin-top:10px}
.nb-tour-alvo{outline:3px solid var(--cobalto-claro);outline-offset:3px;border-radius:var(--raio-sm)}

/* Banner de convite no cadastro (chega via link do WhatsApp) */
.banner-convite{display:flex;align-items:center;gap:11px;background:var(--cobalto);
    border-radius:var(--raio);padding:14px 16px;margin-bottom:20px;
    color:rgba(242,240,234,.88);font-size:.94rem;line-height:1.45}
.banner-convite strong{color:var(--cal);font-weight:700}
.banner-convite::before{content:'';width:20px;height:20px;flex-shrink:0;background:var(--cal);
    -webkit-mask:var(--motivo) center/contain no-repeat;mask:var(--motivo) center/contain no-repeat}

/* Modal de webapp (admin): fundo do ícone, sugestões de logo, picker de usuários */
.wa-fundos{display:flex;gap:var(--junta-l)}
.wa-fundo{width:40px;height:40px;border-radius:var(--raio-sm);cursor:pointer;
    display:flex;align-items:center;justify-content:center;color:var(--cal-2);
    font-family:var(--fonte-titulo);font-weight:700;transition:var(--transicao)}
.wa-fundo.sel{box-shadow:0 0 0 3px var(--cobalto-claro)}
.wa-logo-sug{width:54px;height:54px;border-radius:var(--raio-sm);overflow:hidden;
    cursor:pointer;background:var(--cimento-fundo);padding:5px;transition:var(--transicao)}
.wa-logo-sug:hover{box-shadow:0 0 0 3px var(--cobalto-claro)}
.wa-logo-sug img{width:100%;height:100%;object-fit:contain;display:block}
.wa-userlist{display:flex;flex-direction:column;gap:var(--junta-l);max-height:200px;overflow-y:auto}
.wa-user-item{display:flex;align-items:center;gap:10px;padding:9px;border-radius:var(--raio-sm);border:none;
    background:var(--cimento-fundo);cursor:pointer;text-align:left;width:100%;color:var(--cal);transition:var(--transicao)}
.wa-user-item:hover{background:var(--cimento-claro)}
.wa-user-item img,.wa-user-ini{width:34px;height:34px;border-radius:50%;object-fit:cover;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;background:var(--cobalto);color:var(--cal);
    font-family:var(--fonte-titulo);font-weight:800;font-size:.8rem}
.wa-user-item span{display:flex;flex-direction:column;font-weight:700;font-size:.94rem}
.wa-user-item small{color:var(--cal-3);font-weight:400;font-size:.8rem}
.wa-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 7px 6px 12px;border-radius:var(--raio-sm);
    background:var(--cobalto);color:var(--cal);font-size:.8rem;font-weight:700}
.wa-chip button{width:20px;height:20px;border-radius:2px;border:none;background:none;cursor:pointer;
    color:rgba(242,240,234,.7);display:flex;align-items:center;justify-content:center}
.wa-chip button svg{width:12px;height:12px}
.wa-chip button:hover{color:var(--cal)}
.modal-fechar{width:38px;height:38px;border-radius:var(--raio-sm);color:var(--cal-2);display:flex;
    align-items:center;justify-content:center;transition:var(--transicao);cursor:pointer}
.modal-fechar:hover{background:var(--cimento-alto);color:var(--cal)}
.modal-fechar svg{width:20px;height:20px}
.modal .btn-primario{width:100%;margin-top:8px}
.avatar-editor{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:10px}
.avatar-previa{width:90px;height:90px;border-radius:50%;object-fit:cover;background:var(--cobalto);
    display:flex;align-items:center;justify-content:center;color:var(--cal);
    font-family:var(--fonte-titulo);font-weight:800;font-size:1.9rem}

/* ==========================================================================
   MODERAÇÃO DE USUÁRIOS (admin)
   ========================================================================== */
.mod-lista{display:flex;flex-direction:column;gap:var(--junta-l);background:var(--junta);
    padding:var(--junta-l);border-radius:var(--raio)}
.mod-user{display:flex;gap:13px;align-items:center;padding:13px 15px;
    border-radius:var(--raio-sm);background:var(--cimento);transition:var(--transicao)}
.mod-user:hover{background:var(--cimento-claro)}
.mod-avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;background:var(--cobalto);
    display:flex;align-items:center;justify-content:center;color:var(--cal);
    font-family:var(--fonte-titulo);font-weight:800;font-size:.94rem;flex-shrink:0;cursor:pointer}
.mod-info{flex:1;min-width:0;cursor:pointer}

/* ---- Detalhe do membro (modal) ---- */
.detalhe-secao{margin-bottom:22px}
.detalhe-secao:last-child{margin-bottom:0}
.detalhe-secao h4{font-family:var(--fonte-titulo);font-size:.68rem;text-transform:uppercase;
    letter-spacing:.2em;color:var(--cal-3);font-weight:700;margin-bottom:10px}
.detalhe-vazio{color:var(--cal-3);font-size:.86rem}
.detalhe-linha{display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:11px 13px;border-radius:var(--raio-sm);background:var(--cimento-fundo);
    margin-bottom:var(--junta-l);font-size:.86rem}
.detalhe-linha small{color:var(--cal-3);font-size:.74rem;white-space:nowrap}
.detalhe-tag{font-family:var(--fonte-titulo);font-weight:700;padding:3px 9px;border-radius:2px;font-size:.68rem;
    text-transform:uppercase;letter-spacing:.08em}
.detalhe-tag.android-app{background:var(--jade);color:#04140F}
.detalhe-tag.android-web,.detalhe-tag.ios,.detalhe-tag.desktop{background:var(--cimento-alto);color:var(--cal-2)}
.detalhe-chips{display:flex;flex-wrap:wrap;gap:var(--junta-l)}
.detalhe-chip{padding:7px 13px;border-radius:var(--raio-sm);background:var(--cimento-alto);
    font-size:.8rem;font-weight:700}
.mod-info .nome{font-family:var(--fonte-titulo);font-weight:700;display:flex;align-items:center;gap:8px;
    flex-wrap:wrap;font-size:.94rem}
.mod-info small{display:block;color:var(--cal-2);font-size:.8rem;margin-top:2px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mod-status{font-family:var(--fonte-titulo);font-size:.62rem;font-weight:700;text-transform:uppercase;
    letter-spacing:.1em;padding:3px 8px;border-radius:2px}
.mod-status.ativo{background:var(--jade);color:#04140F}
.mod-status.bloqueado{background:var(--cor-alerta);color:#1B1204}
.mod-status.excluido{background:var(--cor-erro);color:#1B0A06}
.mod-acoes{display:flex;gap:var(--junta-l);flex-wrap:wrap;justify-content:flex-end}
.mod-btn{padding:9px 12px;border-radius:var(--raio-sm);font-family:var(--fonte-titulo);font-size:.68rem;
    font-weight:700;text-transform:uppercase;letter-spacing:.08em;border:none;
    color:var(--cal-2);background:var(--cimento-alto);transition:var(--transicao);white-space:nowrap;cursor:pointer}
.mod-btn:hover{color:var(--junta);background:var(--cal)}
.mod-btn.alerta{color:#1B1204;background:var(--cor-alerta)}
.mod-btn.alerta:hover{background:#E8AE33}
.mod-btn.perigo{color:#1B0A06;background:var(--cor-erro)}
.mod-btn.perigo:hover{background:#E97A63}
.mod-btn.ok{color:#04140F;background:var(--cor-sucesso)}
.mod-btn.ok:hover{background:#48B892}
.mod-paginacao{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:20px;flex-wrap:wrap}

/* ---- Gestão de compartilhamento (modal) ---- */
.gestao-titulo{font-family:var(--fonte-titulo);font-size:.68rem;font-weight:700;text-transform:uppercase;
    letter-spacing:.2em;color:var(--cal-3);margin:18px 0 8px}
.gestao-linha{display:flex;align-items:center;gap:11px;padding:9px 0}
.gestao-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;background:var(--cobalto);
    display:flex;align-items:center;justify-content:center;color:var(--cal);
    font-family:var(--fonte-titulo);font-weight:800;font-size:.8rem;flex-shrink:0}
.gestao-info{flex:1;min-width:0}
.gestao-info strong{display:block;font-family:var(--fonte-titulo);font-size:.86rem;font-weight:700}
.gestao-info small{color:var(--cal-3);font-size:.74rem}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media(max-width:900px){
    .auth-tela{grid-template-columns:1fr}
    .auth-visual{display:none}
    .auth-card .logo-mobile{display:flex}
    .auth-voltar{top:20px;right:18px}
    .painel{padding:30px 14px 70px}
}
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}