<div class="page" id="page-profile">
  <div class="ph"><div><div class="pt">Mi perfil</div><div class="ps">Gestiona tu cuenta</div></div></div>
  <div class="cfg-card">
    <div class="chd"><div class="ctit">Información de cuenta</div></div>
    <div style="display:flex;align-items:center;gap:14px;margin-bottom:18px">
      <div style="width:48px;height:48px;border-radius:50%;background:<?= htmlspecialchars($user['color']) ?>;display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-weight:700;font-size:18px;color:#fff"><?= strtoupper(substr($user['name'],0,2)) ?></div>
      <div><div style="font-family:var(--fh);font-size:15px;font-weight:700"><?= htmlspecialchars($user['name']) ?></div><div style="font-size:12px;color:var(--m)"><?= htmlspecialchars($user['email']) ?> · <?= $user['role']==='admin'?'Administrador':'Cliente' ?></div></div>
    </div>
    <form method="POST" action="api/update-profile.php">
      <div class="mf"><label>Nombre</label><input type="text" name="name" value="<?= htmlspecialchars($user['name']) ?>" required></div>
      <div class="mf"><label>Nueva contraseña (dejar vacío para no cambiar)</label><input type="password" name="password" placeholder="Nueva contraseña (mín 6 caracteres)"></div>
      <div class="mf"><label>Confirmar nueva contraseña</label><input type="password" name="password2" placeholder="Repite la contraseña"></div>
      <button type="submit" class="pr-btn">Guardar cambios</button>
      <span id="profile-msg" style="font-size:12px;margin-left:10px"></span>
    </form>
  </div>
  <div class="cfg-card" style="border-color:rgba(232,39,42,.2)">
    <div class="chd"><div class="ctit" style="color:var(--red)">Cerrar sesión</div></div>
    <p style="font-size:13px;color:var(--m);margin-bottom:12px">Tu sesión actual en el Super Cerebro DIMARK</p>
    <a href="logout.php"><button style="padding:8px 18px;border-radius:7px;font-size:13px;background:var(--rl);border:1px solid var(--rb);color:var(--red);cursor:pointer;font-family:var(--fb)">→ Cerrar sesión</button></a>
  </div>
</div>
