* { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; font-family: 'Poppins', 'Trebuchet MS', Arial, sans-serif; display: flex; align-items: center; justify-content: center; padding: 80px 20px 20px; background: #f5f5f5; } #topo { width: 100%; height: 50px; position: fixed; top: 0; left: 0; background: linear-gradient(to right, #c0392b 47%, #7a4951 73%, #114455 87%); display: flex; align-items: center; z-index: 10; } #textotop { padding-left: 20px; font-size: clamp(22px, 5vw, 38px); color: #fff; } #voltar { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); color: #fff; padding: 6px 16px; border-radius: 6px; font-size: 14px; cursor: pointer; font-family: inherit; transition: background 0.2s; } #voltar:hover { background: rgba(255,255,255,0.3); } .theme-toggle-btn { position: absolute; right: 140px; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); width: 36px; height: 36px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, transform 0.2s; padding: 4px; } .theme-toggle-btn:hover { background: rgba(255,255,255,0.3); transform: translateY(-50%) scale(1.1); } .theme-icon { width: 100%; height: 100%; object-fit: contain; } #log { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 16px; } .titulo-pagina { text-align: center; color: #1f2937; } .subtitulo { text-align: center; color: #6b7280; font-weight: 400; font-size: 15px; } .campo { display: flex; flex-direction: column; gap: 8px; } label { font-weight: 700; color: #1f2937; } input, select { height: 46px; width: 100%; padding: 10px; font-size: 16px; border: 1px solid #c7c7c7; border-radius: 6px; font-family: inherit; background: #fff; } input:disabled { background: #f3f4f6; color: #9ca3af; cursor: not-allowed; } form { display: flex; flex-direction: column; gap: 16px; } .linha-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } #logbtn { align-self: center; width: 50%; padding: 12px; font-size: 18px; font-weight: bold; background-color: #c0392b; color: #fff; border: none; border-radius: 6px; cursor: pointer; transition: background-color 0.2s ease; } #logbtn:hover { background-color: #a03224; } #logbtn:disabled { background-color: #ccc; cursor: not-allowed; } .secao { background: #fff; border-radius: 10px; padding: 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); display: flex; flex-direction: column; gap: 16px; } .secao-titulo { font-size: 16px; font-weight: 700; color: #1f2937; padding-bottom: 10px; border-bottom: 2px solid #f3f4f6; } .secao-descricao { font-size: 13px; color: #6b7280; margin-bottom: 16px; line-height: 1.6; } .acoes-lgpd { display: flex; flex-direction: column; gap: 12px; } .acao-lgpd { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; } .acao-lgpd strong { font-size: 14px; color: #111827; display: block; margin-bottom: 2px; } .acao-lgpd p { font-size: 12px; color: #6b7280; margin: 0; } .acao-lgpd button, .btn-link-politica { flex-shrink: 0; padding: 8px 16px; border: 1px solid #c0392b; border-radius: 6px; background: transparent; color: #c0392b; font-size: 13px; font-family: 'Poppins', sans-serif; cursor: pointer; text-decoration: none; transition: all 0.2s; } .acao-lgpd button:hover, .btn-link-politica:hover { background: #c0392b; color: #fff; } #btnSenha { align-self: center; width: 60%; padding: 12px; font-size: 16px; font-weight: bold; background-color: #114455; color: #fff; border: none; border-radius: 6px; cursor: pointer; transition: background-color 0.2s ease; } #btnSenha:hover { background-color: #0d3644; } #btnSenha:disabled { background-color: #ccc; cursor: not-allowed; } .zona-perigo { background: #fff; border: 1px solid #fca5a5; border-radius: 10px; padding: 20px; display: flex; flex-direction: column; gap: 12px; } .zona-perigo .secao-titulo { color: #b91c1c; border-bottom-color: #fee2e2; } .zona-perigo p { font-size: 13px; color: #6b7280; line-height: 1.5; } #btnExcluirConta { align-self: center; width: 60%; padding: 12px; font-size: 16px; font-weight: bold; background-color: transparent; color: #b91c1c; border: 2px solid #b91c1c; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; } #btnExcluirConta:hover { background-color: #fee2e2; } #btnExcluirConta:disabled { background-color: #ccc; border-color: #ccc; color: #fff; cursor: not-allowed; } #mensagem-erro { background: #fee2e2; border: 1px solid #fca5a5; color: #b91c1c; padding: 10px 14px; border-radius: 6px; font-size: 14px; display: none; } #mensagem-sucesso { background: #d1fae5; border: 1px solid #6ee7b7; color: #065f46; padding: 10px 14px; border-radius: 6px; font-size: 14px; display: none; } [data-theme="dark"] body { background: #121212; color: #e8e8e8; } [data-theme="dark"] .titulo-pagina { color: #e8e8e8; } [data-theme="dark"] .subtitulo { color: #a0a0a0; } [data-theme="dark"] .secao { background: #1e1e1e; box-shadow: 0 1px 4px rgba(0,0,0,0.4); } [data-theme="dark"] .secao-titulo { color: #e8e8e8; border-bottom-color: #333; } [data-theme="dark"] .secao-descricao { color: #a0a0a0; } [data-theme="dark"] label { color: #e8e8e8; } [data-theme="dark"] input, [data-theme="dark"] select { background: #1a1a1a; border-color: #333; color: #e8e8e8; } [data-theme="dark"] input:disabled { background: #161616; color: #555; } [data-theme="dark"] .zona-perigo { background: #1e1e1e; border-color: rgba(252,165,165,0.2); } [data-theme="dark"] .zona-perigo p { color: #a0a0a0; } [data-theme="dark"] #mensagem-erro { background: rgba(254,226,226,0.1); border-color: rgba(252,165,165,0.2); color: #fca5a5; } [data-theme="dark"] #mensagem-sucesso { background: rgba(209,250,229,0.1); border-color: rgba(110,231,183,0.2); color: #6ee7b7; } [data-theme="dark"] a { color: #e8e8e8; } [data-theme="dark"] .acao-lgpd { background: #1a1a1a; border-color: #333; } [data-theme="dark"] .acao-lgpd strong { color: #e8e8e8; } [data-theme="dark"] .acao-lgpd p { color: #a0a0a0; }