body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  background:#f4f4f4;
  color:#222;
}


/* NAVBAR */

.navbar{
  background:white;
  border-bottom:1px solid #ddd;
}


/* TOPO */

.logo-area{

  display:flex;
  align-items:center;
  justify-content:center;

  gap:30px;

  padding:20px;
}


.logo{
  width:220px;
  height:auto;
}


/* TÍTULO */

.titulo-sistema{

  margin: 0px;

  margin-bottom: 20px;

  font-size:42px;

  font-weight:bold;

  text-align:center;
}


/* MENU */

.menu{

  display:flex;

  align-items:center;

  gap:10px;

  background:#198754;

  padding:0 40px;
}


/* BOTÕES MENU */

.menu button{

  background:transparent;

  color:white;

  border:none;

  padding:18px 20px;

  font-size:15px;

  font-weight:bold;

  cursor:pointer;

  transition:0.2s;
}


/* HOVER */

.menu button:hover{

  background:rgba(255,255,255,0.12);
}

/* CONTAINER */

.container{

  width:82%;

  max-width:1100px;

  margin:auto;

  padding:35px 0;
}


/* CARDS */

.card{

  background:white;

  padding:30px;

  border-radius:14px;

  box-shadow:0 2px 10px rgba(0,0,0,0.08);

  margin-bottom:30px;
}


/* TÍTULOS */

h1{

  margin-top:0;

  margin-bottom:25px;

  font-size:30px;
}


/* INPUTS */

input,
select{

  width:100%;

  padding:14px;

  margin-top:12px;

  border:1px solid #ccc;

  border-radius:8px;

  box-sizing:border-box;

  font-size:15px;
}


/* BOTÃO CADASTRAR */

.btn-cadastrar{

  width:100%;

  margin-top:20px;

  padding:14px;

  background:#198754;

  color:white;

  border:none;

  border-radius:8px;

  font-size:17px;

  font-weight:bold;

  cursor:pointer;

  transition:0.2s;
}


.btn-cadastrar:hover{
  background:#157347;
}


/* TABELAS */

table{

  width:100%;

  border-collapse:collapse;

  overflow:hidden;

  border-radius:10px;

  background:white;
}


/* CABEÇALHO */

thead{

  background:#198754;

  color:white;
}


th{

  padding:16px;

  font-size:16px;
}


/* LINHAS */

td{

  padding:14px;

  border-bottom:1px solid #eee;

  text-align:center;
}


tbody tr:hover {
  background: #f8f8f8;
}


/* ESCONDER ABAS */

.hidden{
  display:none;
}

/* BOTÃO APROVADO */

.btn-aprovado{

  background:#198754;
  color:white;

  border:none;

  padding:8px 14px;

  border-radius:6px;

  cursor:pointer;
}


/* BOTÃO BLOQUEADO */

.btn-bloqueado{

  background:#dc3545;
  color:white;

  border:none;

  padding:8px 14px;

  border-radius:6px;

  cursor:pointer;
}


/* BOTÃO BLOQUEADO */

.btn-bloqueado{

  background:#dc3545;
  color:white;

  border:none;

  padding:8px 14px;

  border-radius:6px;

  cursor:pointer;
}


/* REMOVER */

.btn-remover{

  background:#6c757d;
  color:white;

  border:none;

  padding:8px 14px;

  border-radius:6px;

  cursor:pointer;
}


/* EXCLUIR SELECIONADOS */

.btn-excluir{

  background:#dc3545;
  color:white;

  border:none;

  padding:12px 18px;

  border-radius:8px;

  margin-bottom:20px;

  cursor:pointer;

  font-weight:bold;
}

.filtros {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.filtros input {
  flex: 1;
  margin-top: 0;
}

.filtros select {
  width: 180px;
  margin-top: 0;
}


/* PAINEL DE VERIFICAÇÃO */

.painel-acesso {
  display: flex;
  align-items: center;
  gap: 24px;
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 24px;
  transition: background 0.3s;
}

.painel-acesso.hidden {
  display: none;
}

.painel-acesso.liberado {
  background: #d4edda;
  border: 2px solid #28a745;
}

.painel-acesso.negado {
  background: #f8d7da;
  border: 2px solid #dc3545;
}

.painel-foto {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: #ccc;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: #fff;
}

.painel-foto::before {
  content: '👤';
}

.painel-foto img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.painel-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.painel-info h2 {
  margin: 0;
  font-size: 1.3rem;
  color: #222;
}

.painel-info p {
  margin: 0;
  color: #444;
  font-size: 0.9rem;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-overlay.hidden {
  display: none;
}

.modal-box {
  background: white;
  border-radius: 14px;
  padding: 30px;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.modal-box h2 {
  margin-top: 0;
  margin-bottom: 16px;
}

.foto-cadastro-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.foto-preview {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: #ccc;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
}

.foto-preview::before {
  content: '👤';
}

.foto-preview.tem-foto::before {
  display: none;
}

.foto-preview.tem-foto img {
  display: block;
}

.foto-preview img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.btn-foto {
  background: #198754;
  color: white;
  border: none;
  padding: 10px 22px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.2s;
}

.btn-foto:hover {
  background: #157347;
}

.painel-foto.tem-foto::before {
  display: none;
}

.painel-foto.tem-foto img {
  display: block;
}

.painel-badge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 6px;
  font-weight: bold;
  font-size: 0.95rem;
  margin-top: 6px;
  width: fit-content;
}