/* ===== PMZ Picture — estilos compartilhados ===== */
:root{
  --azul:#0090D8; --amarelo:#FCB400; --vermelho:#D80000;
  --preto:#181818; --bg:#FFFFFF; --card:#FFFFFF;
  --texto:#181818; --texto-suave:#5F5E5A; --texto-mudo:#9a9892;
  --borda:#EAE7E1; --borda-2:#DED9D0; --muted:#F7F5F1; --radius:12px;
  --font-corpo:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-titulo:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:var(--font-corpo);background:var(--bg);color:var(--texto);-webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:var(--font-titulo);}
a{color:inherit;}
.hidden{display:none !important;}

/* logo empilhada */
.logo{display:inline-flex;flex-direction:column;align-items:center;gap:4px;line-height:1;user-select:none;}
.logo img{display:block;}
.logo .suf{font-family:var(--font-titulo);font-weight:600;letter-spacing:4px;text-transform:uppercase;}
.logo-hdr img{height:30px;width:auto;}
.logo-hdr .suf{font-size:11px;color:#fff;}

/* header app */
.app-header{background:var(--preto);padding:0 28px;height:64px;display:flex;align-items:center;justify-content:space-between;}
.app-header .nav-r{display:flex;align-items:center;gap:22px;}
.app-header .nav-r a{color:#c9c9c9;font-size:14px;text-decoration:none;font-weight:500;cursor:pointer;}
.app-header .nav-r a:hover,.app-header .nav-r a.on{color:#fff;}
.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--azul),var(--vermelho));display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:600;flex-shrink:0;}
.app-header .nav-r a{white-space:nowrap;}
.logo-hdr img,.logo-hdr .suf{transition:none;}

/* agrupa os links de navegação; no desktop é uma linha, no celular vira menu suspenso */
.app-header{position:relative;}
.nav-links{display:flex;align-items:center;gap:22px;}
.nav-toggle{display:none;background:none;border:none;color:#c9c9c9;font-size:22px;line-height:1;
  cursor:pointer;padding:4px 6px;border-radius:8px;}
.nav-toggle:hover{color:#fff;background:rgba(255,255,255,.08);}

/* ---- header em telas estreitas (celular) ----
   Com os 4 links em linha o header exigia 483px e estourava a tela em 390px.
   Abaixo de 560px eles passam para um menu ☰, o que resolve até larguras de 320px.
   A logo e o avatar continuam sempre visíveis. */
@media (max-width:560px){
  .app-header{padding:0 16px;height:58px;}
  .app-header .nav-r{gap:12px;}
  .nav-toggle{display:block;}
  .nav-links{
    display:none;
    position:absolute; top:100%; right:16px;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--preto); border:1px solid #333; border-radius:12px;
    padding:6px; min-width:190px; z-index:40;
    box-shadow:0 12px 34px rgba(0,0,0,.4);
  }
  .nav-links.aberto{display:flex;}
  .app-header .nav-links a{padding:12px 14px;border-radius:8px;font-size:14.5px;}
  .app-header .nav-links a:hover{background:rgba(255,255,255,.08);}
  .app-header .nav-links a.on{color:#fff;background:rgba(255,255,255,.06);}
}

/* botões */
.btn{font-family:var(--font-corpo);font-weight:600;font-size:14px;border-radius:10px;cursor:pointer;border:none;display:inline-flex;align-items:center;gap:8px;transition:filter .15s,transform .1s;text-decoration:none;}
.btn-primary{background:var(--azul);color:#fff;padding:12px 22px;}
.btn-primary:hover{filter:brightness(1.08);}
.btn-dark{background:var(--preto);color:#fff;padding:12px 22px;}
.btn-ghost{background:var(--card);color:var(--preto);border:1.5px solid var(--borda-2);padding:11px 20px;}
.btn-ghost:hover{border-color:var(--preto);}
.btn:disabled{opacity:.5;cursor:not-allowed;}

.wrap{max-width:1080px;margin:0 auto;padding:32px 28px 60px;}

/* cards e forms */
.card{background:var(--card);border:1px solid var(--borda);border-radius:var(--radius);padding:22px;}
.field{margin-bottom:18px;}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:7px;}
.field input,.field select{width:100%;padding:12px 14px;border-radius:10px;border:1.5px solid var(--borda-2);font-family:var(--font-corpo);font-size:14px;color:var(--texto);outline:none;transition:border-color .15s;background:#fff;}
.field input:focus,.field select:focus{border-color:var(--azul);}
.field .hint{font-size:12px;color:var(--texto-mudo);margin-top:6px;}

.msg{padding:11px 14px;border-radius:10px;font-size:13px;margin-bottom:14px;}
.msg-erro{background:#fdeaea;color:#a12020;border:1px solid #f3caca;}
.msg-ok{background:#e9f7ee;color:#1a7e42;border:1px solid #c5e8d1;}

/* ---- botões de ação das listas (editar / excluir) ----
   Mesmo tamanho e mesmo traço nas duas listas. O "perigo" só muda a cor no hover:
   sinaliza a ação destrutiva sem chamar atenção o tempo todo. */
.btn-acao{
  background:none; border:none; cursor:pointer; padding:0;
  width:34px; height:34px; border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--texto-mudo); transition:color .15s, background .15s;
}
.btn-acao svg{width:18px; height:18px; display:block;}
.btn-acao:hover{color:var(--texto); background:var(--muted);}
.btn-acao.perigo:hover{color:var(--vermelho); background:#fdeaea;}
.btn-acao:focus-visible{outline:2px solid var(--azul); outline-offset:2px;}

/* colunas numéricas/curtas: cabeçalho e valor compartilham o centro da coluna.
   Alinhar à esquerda só funciona quando os dois textos têm largura parecida —
   "USOS" tem 34px e o valor "1" tem 5px, e a diferença lê como desalinhamento. */
.celula-centro{text-align:center;}

/* tags de formato */
.tag{font-size:11px;font-weight:600;padding:3px 9px;border-radius:6px;color:#fff;display:inline-block;}
.t-perfil{background:var(--azul);}
.t-story{background:var(--amarelo);color:#5a3f00;}
.t-retrato{background:var(--vermelho);}

/* ---- ajustes de celular que precisam vir DEPOIS das regras base ----
   Media query não aumenta especificidade: se estas regras ficassem lá em cima,
   as definições base de .wrap e .btn-acao (mais abaixo no arquivo) venceriam. */
@media (max-width:560px){
  /* no celular, 28px de cada lado custam caro na largura útil da lista */
  .wrap{padding:24px 16px 48px;}
  /* alvo de toque maior para o dedo, com o ícone levemente menor */
  .btn-acao{width:36px; height:36px; border-radius:10px;}
  .btn-acao svg{width:17px; height:17px;}
}