:root{
  --navy:#0b1d3a;
  --orange:#ff7a00;
  --white:#fff;
  --muted:#8aa0c6;
  --bg:#f6f8fc;
  --card:#ffffff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%; /* Adicionado para centralização */ background:var(--bg);color:#0c1c35;font-family:Inter,system-ui,Arial,sans-serif;
line-height:1.5;

}
a{color:var(--orange);text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:24px}
.nav{background:var(--navy);color:var(--white);position:sticky;top:0;z-index:10}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav .brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700}
.logo{height:36px}
.nav nav{display:flex;gap:16px;align-items:center}
.nav nav a{color:#fff;opacity:.9}
.nav nav a:hover{opacity:1}
.btn,.btn-outline{
  display:inline-block;
  padding:10px 16px;
  border-radius:999px;
  font-weight:700;
  text-align:center;
  transition:all .2s
}
.btn-navy{background:var(--navy);color:var(--white);border:2px solid var(--navy)}
.btn-navy:hover{background:#081427;border-color:#081427}
.btn-outline{background:transparent;color:var(--navy);border:2px solid var(--navy)}
.btn-outline:hover{background:var(--navy);color:var(--white)}
.card{background:var(--card);padding:24px;border-radius:8px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.form{max-width:450px;margin:0 auto}
.form input[type=text],.form input[type=email],.form input[type=password],.form input[type=date],.form input[type=number],.form textarea, .form select{
  width:100%;
  padding:10px 12px;
  margin-top:4px;
  margin-bottom:16px;
  border:1px solid #ccc;
  border-radius:4px;
  box-sizing:border-box;
  font-size:16px
}
.form textarea{resize:vertical}
.form label{display:block;font-weight:600;margin-top:8px}
.login-card{padding:32px 40px}

/* --- Alertas de Mensagens --- */
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-weight: 600;
}
.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}
.alert-error {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}


/* --- Estilos do Perfil (perfil.php) --- */

.profile-tabs { 
    display: flex; 
    border-bottom: 2px solid #eee; 
    margin-bottom: 20px;
    overflow-x: auto;
}
.profile-tabs button {
    background: none; 
    border: none; 
    padding: 10px 20px; 
    cursor: pointer;
    font-weight: 600; 
    color: var(--muted); 
    transition: color 0.3s;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px; 
    white-space: nowrap;
}
.profile-tabs button.active {
    color: var(--navy); 
    border-bottom: 2px solid var(--orange);
}
.tab-content { 
    display: none; 
}
.tab-content.active { 
    display: block; 
}

/* * NOVAS REGRAS PARA QR CODE E RESPONSIVIDADE 
 */

/* Garante o comportamento do flexbox no container principal do formulário */
.form-group-flex { 
    display: flex; 
    gap: 20px; 
    margin-bottom: 10px;
}

/* Área do Formulário (Ocupa 2/3 em telas maiores) */
.profile-form-area {
    flex: 2; 
    min-width: 0; /* Permite o encolhimento */
}

/* Área do QR Code (Ocupa 1/3 em telas maiores) */
.qr-code-area {
    flex: 1; 
    text-align: center; 
    border-left: 1px solid #eee; 
    padding-left: 20px;
    padding-top: 10px; /* Para alinhar melhor com o topo das abas */
    min-width: 250px; /* Garante que o QR Code não fique muito pequeno */
}

.qr-code-area .btn-outline {
    /* Ajuste para o botão de visualização no QR Code */
    padding: 8px 16px;
    font-size: 0.9em;
    border-color: var(--navy); 
    color: var(--navy);
}

.qr-code-area .qr-info {
    max-width: 200px;
    margin: 0 auto 10px auto;
}


/* --- Estilo do Plano (Badge) --- */
.plano-badge {
    display: inline-block;
    background: var(--orange);
    color: var(--navy);
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.6em; 
    font-weight: 800;
    text-transform: uppercase;
}

/* Responsividade para telas pequenas (empilha as colunas) */
@media (max-width: 768px) {
    .form-group-flex {
        flex-direction: column;
        gap: 0;
    }
    
    .qr-code-area {
        border-left: none;
        border-top: 1px solid #eee;
        padding-left: 0;
        margin-top: 20px;
    }
}

/* --- Estilos do Footer --- */
.footer {
  background: var(--navy);
  color: var(--white);
  padding: 30px 0;
  margin-top: 40px;
}
.footer .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
.footer h4, .footer h5 {
  margin-top: 0;
  color: var(--orange);
  font-size: 1.1em;
}
.footer p, .footer li {
  font-size: 0.9em;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}
.footer ul {
  list-style: none;
  padding: 0;
}
.footer ul a {
  color: var(--muted);
  display: block;
  margin-bottom: 5px;
}
.footer ul a:hover {
  color: var(--white);
}
.copyright {
  text-align: center;
  margin-top: 20px;
  padding-top: 10px;
  border-top: 1px solid #081427;
  font-size: 0.8em;
  color: var(--muted) !important;
}

/* Responsividade do Footer */
@media (max-width: 600px) {
  .footer .grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* --- Centralização de Conteúdo Único (como Formulários de Cadastro/Login) --- */
.content-center {
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: flex-start; /* Alinha ao topo */
    min-height: calc(100vh - 80px); /* Garante que ocupe a altura restante da viewport (ajuste 80px conforme altura do seu header/footer) */
    padding: 24px;
}