/* ===========================================================================
                         Tela de entrada (entrar.css)
   ======================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
:root { --cor-principal: #5b21b6; --cor-fundo: #f8fafc; }
.oculto { display: none !important; }


/* ---------------------------------------------------------------------------
                                    Layout
   ------------------------------------------------------------------------ */
.container { display: flex; height: 100vh; }
.login-section { width: 40%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; background: white; z-index: 10; }
.visual-section { width: 60%; background: linear-gradient(135deg, var(--cor-principal), #3b0764); position: relative; overflow: hidden; }

/* ---------------------------------------------------------------------------
                                  Formulário
   ------------------------------------------------------------------------ */
.logo { width: 150px; height: auto; display: block; margin-bottom: 1rem; }
#titulo { margin-bottom: 2rem; color: #333; font-size: 1.5rem; }
#form-login, #form-recuperar { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 1rem; }
.recuperar-texto { color: #555; font-size: 0.85rem; line-height: 1.4; }
label { font-size: 0.85rem; font-weight: bold; color: #555; }
input { width: 100%; padding: 0.8rem; border: 1px solid #ccc; border-radius: 5px; outline: none; margin-top: 5px; }
input:focus { border-color: var(--cor-principal); }

/* Campo de senha com o botão Mostrar/Ocultar dentro dele, à direita. */
.campo-senha { position: relative; margin-top: 5px; }
.campo-senha input { margin-top: 0; padding-right: 5rem; }
.btn-olho { position: absolute; top: 50%; right: 0.4rem; transform: translateY(-50%); margin: 0; padding: 0.35rem 0.5rem; background: none; color: var(--cor-principal); font-size: 0.75rem; }
.btn-olho:hover { background: #f3e8ff; }


/* ---------------------------------------------------------------------------
                                    Botões
   ------------------------------------------------------------------------ */
button { padding: 0.8rem; border-radius: 5px; cursor: pointer; font-weight: bold; border: none; transition: 0.2s; margin-top: 0.5rem; }
.btn-principal { background: var(--cor-principal); color: white; }
.btn-principal:hover { background: #4c1d95; }
.btn-secundario { background: transparent; color: var(--cor-principal); border: 1px solid var(--cor-principal); }
.btn-secundario:hover { background: #f3e8ff; }
.login-message { padding: 0.7rem; border-radius: 5px; color: #913f3c; background: #fff0ee; font-size: 0.85rem; }
.login-message.sucesso { color: #4c1d95; background: #f3e8ff; }
.link-esqueci { background: none; color: var(--cor-principal); font-weight: 600; font-size: 0.85rem; padding: 0.3rem; margin-top: 0; text-decoration: underline; }
.link-esqueci:hover { color: #4c1d95; }
button:disabled { opacity: 0.65; cursor: wait; }

/* ---------------------------------------------------------------------------
                      Formas decorativas do lado direito
   ------------------------------------------------------------------------ */
.forma-decorativa { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.05); }
.forma-1 { width: 400px; height: 400px; top: -100px; left: -100px; }
.forma-2 { width: 600px; height: 600px; bottom: -200px; right: -150px; }
.forma-3 { width: 200px; height: 200px; top: 40%; left: 30%; border: 4px dashed rgba(255,255,255,0.1); background: transparent; }

/* ---------------------------------------------------------------------------
                                   Celular
   ------------------------------------------------------------------------ */
@media (max-width: 700px) {
    .login-section { width: 100%; min-height: 100vh; }
    .visual-section { display: none; }
}