/* =====================================================================
   legado.css
   Estilos (visual novo / Tailwind) para as classes antigas que ainda são
   geradas pelo JavaScript (static/js) e pelo HTML montado nas views.
   NÃO remover: o JS existente continua criando estes elementos.
   ===================================================================== */

/* ---------- Utilitário de visibilidade usado pelo JS ---------- */
.invisivel { display: none !important; }

/* ---------- Overlay de loading / mensagens (loading.js / mostramensagem.js) ---------- */
.containerMensagem {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background-color: rgba(17, 24, 39, 0.55);
  backdrop-filter: blur(2px);
}
.c-loader {
  width: 72px;
  height: 72px;
  border-radius: 9999px;
  border: 6px solid rgba(255, 255, 255, 0.35);
  border-top-color: #22c55e;
  border-right-color: #3b82f6;
  animation: legado-spin 0.9s linear infinite;
}
@keyframes legado-spin { to { transform: rotate(360deg); } }

.centericon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 340px;
  padding: 1.75rem 1.5rem 1.25rem;
  background: #fff;
  color: #1f2937;
  border-radius: 1rem;
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.35);
  text-align: center;
}
.centericon i { font-size: 3rem; }
.centericon h2 { font-size: 1.25rem; font-weight: 700; }
.centericon p { font-size: 0.95rem; color: #4b5563; }
.centericon > button {
  margin-top: 0.75rem;
  width: 100%;
  padding: 0.6rem 1rem;
  border: none;
  border-radius: 0.5rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  background-image: linear-gradient(to right, #3b82f6, #22c55e);
  transition: filter .2s;
}
.centericon > button:hover { filter: brightness(1.08); }
.centericon.erro    { border-top: 6px solid #ef4444; }
.centericon.erro i  { color: #ef4444; }
.centericon.sucesso   { border-top: 6px solid #22c55e; }
.centericon.sucesso i { color: #22c55e; }
.centericon.aviso   { border-top: 6px solid #3b82f6; }
.centericon.aviso i { color: #3b82f6; }

/* ---------- Botões e links antigos ---------- */
.bpadrao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 1.4rem;
  border: none;
  border-radius: 0.75rem;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.4;
  color: #fff;
  cursor: pointer;
  background-image: linear-gradient(to right, #3b82f6, #22c55e);
  box-shadow: 0 4px 10px -4px rgba(34, 197, 94, 0.5);
  transition: transform .2s, filter .2s, opacity .2s;
}
.bpadrao:hover { filter: brightness(1.08); transform: translateY(-1px); }
.bpadrao:disabled,
.bpadrao.button-disable,
.button-disable {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(35%);
  transform: none;
}
.linkpadrao { color: #2563eb; font-weight: 500; text-decoration: none; }
.linkpadrao:hover { text-decoration: underline; }

/* ---------- Abas de "Meus dados" (mostracampo.js usa .bseletor / .foco) ---------- */
.bseletor {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  color: #3b82f6;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.bseletor:hover { background: #eff6ff; }
.bseletor.foco,
.mainMeusDados form .seletoresCampos button.bseletor.foco {
  color: #fff;
  background-image: linear-gradient(to right, #3b82f6, #4ade80);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* ---------- Inputs gerados pelas views (agência / cidade com datalist) ---------- */
input.patrick {
  display: block;
  width: 100%;
  padding: 0.5rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  background: #fff;
  color: #1f2937;
  font-size: 0.95rem;
}
input.patrick:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, .2); }

/* ---------- Mensagens inline (mensagens.js) ---------- */
.Message { border-radius: 0.75rem !important; }
.Message img { width: 28px; height: 28px; }

/* ---------- Cards de oferta montados pela view (emprestimos) ---------- */
.mainEmprestimos .emprestimos { gap: 1.5rem; flex-wrap: wrap; justify-content: center; }
.mainEmprestimos .emprestimo {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 10px 25px -12px rgba(0, 0, 0, 0.25);
  margin: 0 !important;
  min-width: 240px;
}
.mainEmprestimos .emprestimo .topo {
  margin: 0;
  background-image: linear-gradient(to right, #3b82f6, #22c55e);
  border-radius: 0;
}
.mainEmprestimos .emprestimo .topo h3 { display: flex; flex-direction: column; gap: 0.15rem; }
.mainEmprestimos .emprestimo .baixo { margin: 0; background: #fff; }
.mainEmprestimos .emprestimo .baixo .icon {
  display: inline-flex; align-items: center; justify-content: center;
  background-image: linear-gradient(to right, #3b82f6, #22c55e);
}
.mainEmprestimos > div h1 { font-size: 1.5rem; font-weight: 700; color: #1f2937; margin: 1rem 0; }
.mainEmprestimos .outrosValores {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 10px 25px -12px rgba(0, 0, 0, 0.25);
  padding: 1.5rem;
}
.mainEmprestimos .outrosValores h2 { font-size: 1.25rem; font-weight: 600; color: #1f2937; margin-bottom: 1rem; }
.mainEmprestimos .inputsValores { gap: 1rem; align-items: flex-end; }
.mainEmprestimos .resultados h3 { font-size: 1.1rem; }

/* ---------- Conteúdo do contrato (HTML vindo da view) ---------- */
#contrato ul { list-style: disc; padding-left: 1.25rem; }
#contrato ol { list-style: decimal; padding-left: 1.25rem; }
#contrato p, #contrato li { line-height: 1.5; }
#contrato .buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: flex-end; margin-top: 1rem; }

/* ---------- Tela "carregando" (telacarregando.js) ---------- */
.containerLoading {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(2px);
  color: #374151;
}
.centerloading { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.centerloading i { font-size: 3rem; color: #22c55e; animation: legado-spin 1.2s linear infinite; }
.centerloading p { font-size: 1.25rem; font-weight: 700; }

/* ---------- Opções de recuperação de senha (HTML vindo da view) ---------- */
#painel input[type="radio"] { margin-right: 0.5rem; accent-color: #16a34a; width: 1rem; height: 1rem; vertical-align: middle; }
#painel label { color: #374151; font-size: 0.95rem; }

/* ---------- select2 no visual Tailwind (Meus dados) ---------- */
.select2-container { width: 100% !important; max-width: 100% !important; }
.select2-container--default .select2-selection--single {
  height: 42px;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 40px; padding-left: 1rem; color: #1f2937; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; right: 8px; }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.2); }
.select2-dropdown { border-color: #d1d5db; border-radius: 0.5rem; overflow: hidden; }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: #3b82f6; }

/* ---------- Meus dados: formulário no visual novo ---------- */
.mainMeusDados form { border-radius: 1rem; background: #fff; }
.mainMeusDados .campoForm { gap: 0; }
.mainMeusDados .campoForm #botaoprosseguir,
.mainMeusDados .campoForm #processar { margin: 1.5rem auto 0; }
@media (max-width: 640px) { .mainMeusDados form { padding: 1.5rem !important; } }

/* ---------- Modais antigos (mostramodais.js alterna .invisivel) ---------- */
.modalContainer { z-index: 60 !important; background-color: rgba(17, 24, 39, 0.55) !important; padding: 1rem; }
.modalContainer .modal { border-radius: 1rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35); }
.modal .Top { align-items: center; }
.modal .Top h2 { margin-top: 0 !important; font-weight: 700; color: #1f2937; }
@media (max-width: 800px) { .modalContainer .modal { margin: 0.5rem; margin-top: 0; } }
@media (max-width: 640px) { .mainEmprestimos > div { padding: 1.25rem !important; } }