/* museu/assets/equipe.css — telas de acesso da EQUIPE do museu (login/): vintage escuro em couro bordô e madeira,
   diferente da galeria preta e dourada dos visitantes. Usado por includes/equipe_acesso_topo.php. */
:root {
  --bordo: #4a1a1c;
  --bordo-escuro: #2a0d0f;
  --madeira: #1c120d;
  --madeira-2: #26180f;
  --ouro: #c9a46c;
  --ouro-claro: #ecd3a6;
  --ouro-escuro: #8a6a3c;
  --creme: #f1dfc0;
  --creme-suave: #c4ad8c;
  --linha: rgba(201, 164, 108, .25);
  --titulo: "Cinzel", Georgia, serif;
  --italico: "Cormorant Garamond", Georgia, serif;
  --texto: "Lora", Georgia, "Times New Roman", serif;
}
body { min-height: 100vh; display: flex; flex-direction: column; color: var(--creme); font-family: var(--texto);
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .06) 0 2px, transparent 2px 9px),
    radial-gradient(ellipse at 50% 35%, #3a2418 0%, var(--madeira-2) 45%, #0f0906 100%);
  background-color: var(--madeira); }
a { color: var(--ouro-claro); }

/* Faixa do topo: avisa que esta é a área da equipe */
.aviso-area { background: var(--bordo-escuro); border-bottom: 1px solid var(--ouro-escuro); font-size: .9rem; color: #d9c4a0; }
.aviso-area .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; padding-top: 9px; padding-bottom: 9px; }
.aviso-area b { color: var(--ouro-claro); font-weight: 600; }
.aviso-area .links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.aviso-area .links a { color: var(--ouro-claro); text-decoration: none; }
.aviso-area .links a:hover { color: #fff3dc; text-decoration: underline; }

.area { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 16px; }
.cartao { display: grid; grid-template-columns: 5fr 6fr; width: 100%; max-width: 920px; border: 1px solid var(--ouro-escuro);
  box-shadow: 0 0 0 5px #160d09, 0 0 0 6px rgba(201, 164, 108, .45), 0 40px 80px -30px #000, 0 0 70px -30px rgba(201, 164, 108, .3); }

/* Esquerda: capa de couro bordô com moldura dourada */
.painel { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 40px; text-align: center; color: var(--ouro-claro);
  background: radial-gradient(ellipse at 50% 40%, #6a2629 0%, var(--bordo) 50%, var(--bordo-escuro) 100%); }
.painel::before { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(201, 164, 108, .55); box-shadow: inset 0 0 0 4px rgba(201, 164, 108, .12); pointer-events: none; }
.canto { position: absolute; width: 74px; height: 74px; background: url("../assets/ornamento-canto.svg") no-repeat center / contain; opacity: .85; pointer-events: none; }
.canto.se { top: 20px; left: 20px; }
.canto.sd { top: 20px; right: 20px; transform: scaleX(-1); }
.canto.ie { bottom: 20px; left: 20px; transform: scaleY(-1); }
.canto.id { bottom: 20px; right: 20px; transform: scale(-1, -1); }
.brasao { width: 82px; height: 82px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--ouro); background: rgba(0, 0, 0, .3); box-shadow: 0 0 0 5px rgba(201, 164, 108, .12); }
.brasao img { width: 54px; height: auto; }
.painel .orgao { margin-top: 18px; font-family: var(--titulo); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ouro); }
.painel .painel-titulo { margin: 6px 0 0; font-family: var(--titulo); font-weight: 700; font-size: 1.9rem; letter-spacing: .08em; line-height: 1.2; color: var(--ouro-claro); }
.divisor { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 230px; margin: 16px auto; color: var(--ouro); }
.divisor::before, .divisor::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--ouro)); }
.divisor::after { background: linear-gradient(90deg, var(--ouro), transparent); }
.divisor i { width: 7px; height: 7px; background: currentColor; transform: rotate(45deg); }
.painel p { margin: 0 0 18px; font-family: var(--italico); font-style: italic; font-size: 1.25rem; line-height: 1.4; color: #e2c9c0; }
.selo { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid rgba(201, 164, 108, .6); background: rgba(0, 0, 0, .2); font-family: var(--titulo); font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ouro-claro); }

/* Direita: formulário sobre madeira escura */
.form-lado { padding: 46px 46px 36px; background: linear-gradient(160deg, #2a1b12, #1a100b); }
.form-lado h1 { margin: 0 0 4px; font-family: var(--titulo); font-weight: 700; font-size: 1.6rem; letter-spacing: .08em; color: var(--ouro-claro); }
.form-lado .sub { margin: 0 0 24px; font-family: var(--italico); font-style: italic; font-size: 1.2rem; color: var(--creme-suave); }
.form-label { margin-bottom: 5px; font-weight: 500; font-size: .92rem; color: var(--creme); }
.campo { position: relative; }
.campo > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #8f7b62; pointer-events: none; transition: color .2s; }
.campo .form-control { height: 48px; padding-left: 42px; border: 1px solid rgba(201, 164, 108, .4); border-radius: 0; background: rgba(8, 5, 3, .6); color: var(--creme); font-family: var(--texto); }
.campo .form-control::placeholder { color: #6f5f4c; }
.campo .form-control:focus { border-color: var(--ouro-claro); background: rgba(8, 5, 3, .75); box-shadow: 0 0 0 3px rgba(201, 164, 108, .18), 0 0 24px -6px rgba(236, 211, 166, .35); }
.campo:focus-within > i { color: var(--ouro); }
.campo .form-control:-webkit-autofill { -webkit-text-fill-color: var(--creme); -webkit-box-shadow: 0 0 0 1000px #140c08 inset; caret-color: var(--creme); }
.campo.senha .form-control { padding-right: 48px; }
.olho { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; background: none; color: #8f7b62; }
.olho:hover { color: var(--ouro-claro); }
.link-pequeno { font-family: var(--italico); font-style: italic; font-size: 1.05rem; text-decoration: none; }
.btn-entrar { height: 52px; border: 1px solid #e9cf9f; border-radius: 0; background: linear-gradient(180deg, #e2c48f, #b8915a); color: #1d120b;
  font-family: var(--titulo); font-weight: 600; font-size: .9rem; letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 8px 22px -10px rgba(201, 164, 108, .7); }
.btn-entrar:hover, .btn-entrar:focus { background: linear-gradient(180deg, #ecd3a6, #c9a46c); color: #1d120b; border-color: #f3dfb8; }
.btn-entrar:disabled { color: #1d120b; }
.alert { display: flex; gap: 10px; align-items: flex-start; border-radius: 0; font-size: .93rem; border-width: 0 0 0 3px; }
.alert i { margin-top: 4px; }
.alert-danger { background: rgba(196, 96, 74, .14); border-color: #c4604a; color: #f3b5a6; }
.alert-warning { background: rgba(214, 160, 70, .13); border-color: #d6a046; color: #f1d39a; }
.alert-info { background: rgba(140, 160, 190, .12); border-color: #8ca0be; color: #cdd8e8; }
.alert-success { background: rgba(90, 170, 120, .13); border-color: #5aaa78; color: #b5e2c4; }
.rodape-form { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--linha); text-align: center; color: var(--creme-suave); }
.rodape-form a { font-weight: 600; text-decoration: none; }

footer { padding: 0 16px 22px; text-align: center; font-size: .85rem; color: #9a8669; }

@media (max-width: 767.98px) {
  .cartao { grid-template-columns: 1fr; box-shadow: 0 0 0 4px #160d09, 0 0 0 5px rgba(201, 164, 108, .45), 0 20px 40px -20px #000; }
  .painel { flex-direction: row; justify-content: flex-start; gap: 16px; padding: 26px 26px; text-align: left; }
  .painel::before { inset: 8px; }
  .canto, .painel p, .divisor { display: none; }
  .brasao { width: 60px; height: 60px; flex-shrink: 0; }
  .brasao img { width: 40px; }
  .painel .orgao { margin-top: 0; font-size: .64rem; }
  .painel .painel-titulo { font-size: 1.3rem; margin: 2px 0 6px; }
  .selo { padding: 3px 10px; font-size: .62rem; }
  .form-lado { padding: 26px 22px 24px; }
  .campo .form-control { font-size: 16px; }
  .area { padding: 22px 16px; align-items: flex-start; }
}

/* Campos extras usados no cadastro */
.campo-erro { display: none; margin-top: 5px; font-size: .85rem; color: #f3b5a6; }
form.validado .mb-3:has(:invalid) .campo-erro, form.validado .mb-4:has(:invalid) .campo-erro { display: block; }
form.validado .campo .form-control:invalid { border-color: #c4604a; }
.aviso-pendente { display: flex; gap: 10px; margin-bottom: 22px; padding: 12px 14px; border: 1px solid var(--linha); background: rgba(201, 164, 108, .07); font-size: .92rem; color: var(--creme-suave); }
.aviso-pendente i { margin-top: 4px; color: var(--ouro); }
.aviso-pendente b { color: var(--creme); font-weight: 600; }
.alert a { color: inherit; font-weight: 600; }
.form-label .dica { font-weight: 400; font-size: .85rem; color: #9a8669; }

/* Página "estática": tudo cabe na tela do computador sem rolar (notebook 1366×768 incluso).
   Espaços enxutos; em telas mais baixas que isso a página volta a rolar em vez de cortar. */
@media (min-width: 768px) {
  .aviso-area .container { padding-top: 7px; padding-bottom: 7px; }
  .area { padding: 18px 16px; }
  .painel { padding: 36px 36px; }
  .canto { width: 60px; height: 60px; }
  .form-lado { padding: 32px 44px 24px; }
  .form-lado h1 { font-size: 1.45rem; }
  .form-lado .sub { margin-bottom: 18px; font-size: 1.12rem; }
  .form-lado .mb-3 { margin-bottom: .85rem !important; }
  .form-lado .mb-4 { margin-bottom: 1.15rem !important; }
  .campo .form-control { height: 44px; }
  .btn-entrar { height: 48px; }
  .alert { margin-bottom: 14px; padding: 9px 12px; }
  .rodape-form { margin-top: 16px; padding-top: 12px; }
  footer { padding-bottom: 12px; font-size: .8rem; }
}
@media (min-width: 768px) {
  /* com mensagem na tela, a frase de baixo do título sai para caber tudo */
  .form-lado:has(.alert) .sub { display: none; }
  .form-lado:has(.alert) h1 { margin-bottom: 14px; }
}

/* Confirmação (ex.: link de nova senha enviado) */
.form-lado { display: flex; flex-direction: column; justify-content: center; }
.confirmacao { text-align: center; }
.selo-ok { display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: 14px; border: 1px solid rgba(201, 164, 108, .6); border-radius: 50%; background: rgba(201, 164, 108, .1); color: var(--ouro-claro); font-size: 1.6rem; }
.dicas { list-style: none; padding: 0; margin: 0 0 22px; text-align: left; }
.dicas li { position: relative; padding: 9px 0 9px 22px; border-top: 1px solid var(--linha); font-size: .95rem; color: var(--creme-suave); }
.dicas li::before { content: ""; position: absolute; left: 3px; top: 1.05em; width: 6px; height: 6px; background: var(--ouro); transform: rotate(45deg); }
.dicas b { color: var(--creme); font-weight: 600; }