@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

:root{
  --preto:#0B0B0B;--painel:#141414;--campo:#1C1C1C;--linha:rgba(255,255,255,.09);
  --prata:#C4C6C9;--fosca:#8A8C90;--branco:#F7F7F8;--verde:#2BD07A;--vermelho:#E4685D;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--preto);color:var(--branco);font-family:'Poppins',system-ui,sans-serif;font-size:14px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font-family:inherit;font-size:14px;color:inherit}
:focus-visible{outline:2px solid var(--prata);outline-offset:2px;border-radius:8px}

.marca{display:flex;align-items:baseline;gap:6px;margin-bottom:22px}
.marca b{font-weight:600;font-size:16px;color:var(--prata)}
.marca span{font-size:8px;letter-spacing:.34em;color:var(--fosca)}

h1{font-size:20px;font-weight:500;letter-spacing:-.01em;margin-bottom:6px}
h2{font-size:15px;font-weight:500;margin:26px 0 12px}
.nota{font-weight:300;font-size:13px;color:var(--fosca);line-height:1.6;margin-bottom:18px}
.alerta{background:rgba(228,104,93,.1);border:1px solid rgba(228,104,93,.28);color:#F0A79F;
        font-weight:300;font-size:13px;padding:11px 14px;border-radius:10px;margin-bottom:16px;line-height:1.5}
.ok{background:rgba(43,208,122,.1);border:1px solid rgba(43,208,122,.28);color:#8FE3B8;
    font-weight:300;font-size:13px;padding:11px 14px;border-radius:10px;margin-bottom:16px}

/* ---------- páginas centradas (login, instalação) ---------- */
.centrado{min-height:100dvh;display:grid;place-items:center;padding:28px 20px}
.caixa{width:100%;max-width:380px;background:var(--painel);border:1px solid var(--linha);border-radius:18px;padding:28px}
.caixa form{display:flex;flex-direction:column;gap:14px;margin-top:6px}

label{display:block;font-size:11.5px;color:var(--fosca)}
label input,label textarea,label select{margin-top:5px}
input,textarea,select{width:100%;background:var(--campo);border:1px solid var(--linha);border-radius:10px;padding:11px 13px}
textarea{min-height:76px;resize:vertical;font-weight:300;line-height:1.55}
input[type=color]{padding:4px;height:42px}
input[type=file]{font-weight:300;font-size:13px}

.bt{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--linha);
    background:transparent;border-radius:10px;padding:11px 16px;cursor:pointer;font-weight:400;transition:.16s}
.bt:hover{border-color:rgba(255,255,255,.24);background:#181818}
.bt.cheio{background:var(--branco);color:#0B0B0B;border-color:var(--branco);font-weight:500}
.bt.cheio:hover{background:#fff}
.bt.perigo{color:var(--vermelho);border-color:rgba(228,104,93,.3)}
.bt.pequeno{padding:7px 11px;font-size:12.5px;border-radius:9px}

/* ---------- cabeçalho do painel ---------- */
.topo{display:flex;align-items:center;gap:16px;padding:14px 22px;border-bottom:1px solid var(--linha);
      position:sticky;top:0;background:var(--preto);z-index:10;flex-wrap:wrap}
.topo .marca{margin:0}
.topo nav{display:flex;gap:6px;margin-left:auto;align-items:center;flex-wrap:wrap}
.topo .quem{font-weight:300;font-size:12.5px;color:var(--fosca)}

.conteudo{max-width:1080px;margin:0 auto;padding:24px 22px 60px}
.duas{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start}
@media (max-width:900px){.duas{grid-template-columns:1fr}}

.painel{background:var(--painel);border:1px solid var(--linha);border-radius:16px;padding:20px}
.painel + .painel{margin-top:18px}
.par{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.par{grid-template-columns:1fr}}
form .campo{margin-bottom:14px}

.tel{display:grid;grid-template-columns:130px minmax(0,1fr) 42px;gap:8px;margin-bottom:8px}
.tel .apagar{border:1px solid var(--linha);background:transparent;border-radius:10px;cursor:pointer;color:var(--fosca)}
.tel .apagar:hover{color:var(--vermelho);border-color:rgba(228,104,93,.3)}

.foto-atual{display:flex;gap:14px;align-items:flex-start}
.foto-atual img{width:70px;height:88px;object-fit:cover;border-radius:10px;border:1px solid var(--linha)}

.qr{background:#fff;border-radius:14px;padding:14px;display:grid;place-items:center;margin-bottom:10px}
.qr canvas,.qr img{width:100%;max-width:210px;height:auto;display:block}
.ligacao{display:flex;gap:8px;margin-bottom:10px}
.ligacao input{font-size:12.5px;font-weight:300}
.acoes{display:flex;gap:8px;flex-wrap:wrap}

.numero{font-size:26px;font-weight:500;letter-spacing:-.02em}
.numero small{display:block;font-size:11.5px;font-weight:300;color:var(--fosca);letter-spacing:0;margin-top:2px}

/* ---------- tabela de utilizadores ---------- */
.tabela{width:100%;border-collapse:collapse}
.tabela th{text-align:left;font-size:11px;font-weight:400;color:var(--fosca);padding:0 12px 10px;white-space:nowrap}
.tabela td{border-top:1px solid var(--linha);padding:13px 12px;vertical-align:middle}
.tabela tr:hover td{background:#171717}
.tabela b{font-weight:500}
.tabela small{display:block;color:var(--fosca);font-weight:300;font-size:11.5px;margin-top:1px}
.etiqueta{display:inline-block;font-size:10.5px;font-weight:300;padding:3px 9px;border-radius:20px;border:1px solid var(--linha);color:var(--prata)}
.etiqueta.on{color:#8FE3B8;border-color:rgba(43,208,122,.3)}
.etiqueta.off{color:#F0A79F;border-color:rgba(228,104,93,.3)}
.rolar{overflow-x:auto}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}