/* ============================================================
   Prefeitura Municipal de Estância — Atualização de E-mail
   Design system alinhado ao brasão do município.
   Sem dependências externas (fontes/ícones inline).
   ============================================================ */

:root {
  /* Tinturas do brasão */
  --azul-900: #1a1a45;
  --azul-800: #23235c;
  --azul-700: #2a2a6b;
  --azul:     #303078;   /* primária */
  --azul-600: #3d3d96;
  --azul-500: #4c4cb0;
  --azul-200: #b9b9e0;
  --azul-100: #e2e2f2;
  --azul-050: #f1f1f9;

  --prata:    #c0c0c0;
  --vermelho: #c00018;   /* alerta / heráldica */
  --verde:    #489048;   /* sucesso / heráldica */
  --ouro:     #b8860b;

  --tinta:    #21243a;   /* texto forte */
  --cinza-700:#3d4256;
  --cinza-500:#697089;
  --cinza-300:#b7bccb;
  --cinza-200:#d8dbe6;
  --cinza-100:#eceef4;
  --papel:    #eef0f6;   /* fundo institucional (não creme, não preto) */
  --branco:   #ffffff;

  --raio:   10px;
  --raio-g: 18px;
  --sombra-1: 0 1px 3px rgba(26,26,69,.08);
  --sombra-2: 0 6px 22px rgba(26,26,69,.13);
  --sombra-3: 0 18px 50px rgba(26,26,69,.22);
  --transic: .28s cubic-bezier(.4,0,.2,1);

  --serif: Georgia, 'Times New Roman', 'Noto Serif', serif;
  --sans:  'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
}

* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  color: var(--tinta);
  background:
    radial-gradient(1200px 600px at 100% -10%, var(--azul-100) 0%, transparent 55%),
    radial-gradient(900px 500px at -10% 110%, #e6e8f4 0%, transparent 50%),
    var(--papel);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 18px;
  line-height: 1.5;
}

/* ===== Régua heráldica (assinatura) ============================ */
.regua-heraldica {
  height: 5px; width: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg,
    var(--azul) 0 40%, var(--vermelho) 40% 62%, var(--verde) 62% 82%, var(--prata) 82% 100%);
}

/* ===== Lockup institucional (brasão + wordmark) ================ */
.lockup { display: flex; align-items: center; gap: 15px; }
.lockup .brasao {
  flex-shrink: 0;
  width: 58px; height: auto;
  filter: drop-shadow(0 2px 4px rgba(26,26,69,.25));
}
.lockup .marca { line-height: 1.15; }
.lockup .marca .orgao {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .1px;
  color: var(--azul);
}
.lockup .marca .sub {
  font-size: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--cinza-500);
  margin-top: 3px;
}

/* ===== Painel / card ========================================== */
.painel {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: var(--branco);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-3);
  overflow: hidden;
  border: 1px solid #e6e8f2;
}
.painel-corpo { padding: 30px 34px 32px; }
.painel-topo { padding: 22px 34px 18px; }
.painel-topo .regua-heraldica { margin-top: 16px; }

/* ===== Cabeçalho de seção ===================================== */
.secao-titulo {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 700;
  color: var(--azul-800);
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 6px;
}
.secao-sub {
  font-size: 13.5px;
  color: var(--cinza-500);
  margin-bottom: 22px;
}
.secao-sub strong, .secao-titulo strong { color: var(--azul); }

/* ===== Bloco de destaque ====================================== */
.destaque {
  background: linear-gradient(135deg, var(--azul-050), var(--azul-100));
  border-left: 4px solid var(--azul);
  border-radius: var(--raio);
  padding: 15px 17px;
  margin: 18px 0 22px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--azul-800);
  text-align: left;
}
.destaque .destaque-tit {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; color: var(--azul-700);
  font-size: 14px; margin-bottom: 10px;
}
.destaque ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.destaque li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; }
.destaque li .mk { flex-shrink: 0; color: var(--verde); margin-top: 1px; }

/* Item de alerta dentro do destaque (mesma paleta do .prazo) */
.destaque li.alerta {
  margin-top: 3px;
  padding: 9px 11px;
  border-radius: var(--raio);
  background: #fdecee;
  border: 1px solid rgba(192,0,24,.25);
  color: var(--vermelho);
  font-weight: 700;
}
.destaque li.alerta .mk { color: var(--vermelho); }

/* ===== Ícones inline (SVG) ==================================== */
.ic { width: 1em; height: 1em; display: inline-block; vertical-align: -.125em; fill: currentColor; }
.ic-lg { width: 34px; height: 34px; }

/* ===== Selo circular (aviso / sucesso) ======================== */
.selo {
  width: 74px; height: 74px; margin: 4px auto 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.selo-aviso   { background: linear-gradient(135deg,#fff4d6,#ffe9a8); color: var(--ouro); box-shadow: 0 4px 16px rgba(184,134,11,.18); }
.selo-sucesso { background: linear-gradient(135deg,#dcefdc,#c4e4c4); color: #256b25;   box-shadow: 0 4px 16px rgba(72,144,72,.20);
                animation: selo-pop .5s ease forwards; }
@keyframes selo-pop { 0%{transform:scale(0);opacity:0} 60%{transform:scale(1.12)} 100%{transform:scale(1);opacity:1} }

/* ===== Campos de formulário =================================== */
.campo { margin-bottom: 17px; }
.campo > label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--cinza-700); margin-bottom: 6px;
}
.campo .req { color: var(--vermelho); margin-left: 2px; }
.campo .dica {
  display: block; font-weight: 400; font-size: 11.5px;
  color: var(--cinza-500); margin-top: 2px;
}
.campo .dica strong { color: var(--azul); font-weight: 600; }

.entrada {
  display: flex; align-items: center;
  background: var(--branco);
  border: 1.5px solid var(--cinza-200);
  border-radius: var(--raio);
  transition: border-color var(--transic), box-shadow var(--transic);
}
.entrada:focus-within { border-color: var(--azul-500); box-shadow: 0 0 0 4px rgba(48,48,120,.12); }
.entrada.erro    { border-color: var(--vermelho); box-shadow: 0 0 0 4px rgba(192,0,24,.10); }
.entrada.ok      { border-color: var(--verde);    box-shadow: 0 0 0 4px rgba(72,144,72,.10); }

.entrada .ent-ic {
  flex-shrink: 0; width: 44px;
  display: flex; align-items: center; justify-content: center;
  color: var(--cinza-500); font-size: 16px;
  transition: color var(--transic);
}
.entrada:focus-within .ent-ic { color: var(--azul); }
.entrada input {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: transparent;
  padding: 12px 14px 12px 0;
  font: inherit; font-size: 14.5px; color: var(--tinta);
}
.entrada input::placeholder { color: var(--cinza-300); }
.entrada .olho {
  flex-shrink: 0; width: 42px; background: none; border: 0; cursor: pointer;
  color: var(--cinza-500); display: flex; align-items: center; justify-content: center;
  font-size: 16px; transition: color var(--transic);
}
.entrada .olho:hover { color: var(--azul); }

.campo-erro {
  display: none; font-size: 12px; color: var(--vermelho);
  margin-top: 5px; align-items: center; gap: 5px;
}
.campo-erro.exibe { display: flex; }

/* ===== Botões ================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 13px 22px;
  border: 0; border-radius: var(--raio);
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  text-decoration: none;
  transition: transform var(--transic), box-shadow var(--transic), background var(--transic);
}
.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--azul-700), var(--azul-500));
  box-shadow: 0 4px 14px rgba(48,48,120,.30);
}
.btn-primary:hover  { transform: translateY(-1px); box-shadow: 0 7px 22px rgba(48,48,120,.36); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-outline {
  background: transparent; color: var(--azul-600);
  border: 1.5px solid var(--azul-200); margin-top: 10px;
}
.btn-outline:hover { background: var(--azul-050); border-color: var(--azul-500); }

/* ===== Rodapé do painel ====================================== */
.painel-rodape {
  margin-top: 22px; padding-top: 15px;
  border-top: 1px solid var(--cinza-100);
  font-size: 11.5px; color: var(--cinza-500); line-height: 1.6;
}
.painel-rodape a { color: var(--azul); text-decoration: none; font-weight: 600; }
.painel-rodape a:hover { text-decoration: underline; }

/* ===== Spinner =============================================== */
.spinner {
  width: 19px; height: 19px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ===== Overlay / modal (popup) =============================== */
.overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(26,26,69,.62);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease;
}
.overlay.ativo { opacity: 1; visibility: visible; }
.modal {
  width: 100%; max-width: 460px;
  max-height: 94vh; overflow-y: auto;
  background: var(--branco); border-radius: var(--raio-g);
  box-shadow: 0 24px 64px rgba(26,26,69,.4);
  animation: modal-in .38s ease forwards;
}
@keyframes modal-in { from{opacity:0; transform: scale(.94) translateY(20px)} to{opacity:1; transform:none} }
.modal-topo { padding: 20px 28px 0; }
.modal-corpo { padding: 6px 28px 28px; text-align: center; }
.modal-corpo p { font-size: 14px; color: var(--cinza-500); line-height: 1.65; }

.check {
  display: flex; align-items: flex-start; gap: 10px; text-align: left;
  margin: 18px 0 20px; padding: 12px 14px;
  background: var(--cinza-100); border-radius: var(--raio);
}
.check input { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--azul); cursor: pointer; }
.check label { font-size: 13px; color: var(--cinza-700); cursor: pointer; user-select: none; }
.check label strong { color: var(--tinta); }

/* ===== Selo de prazo ========================================= */
.prazo {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 4px auto 20px;
  padding: 9px 16px; border-radius: 999px;
  background: #fdecee; color: var(--vermelho);
  border: 1px solid rgba(192,0,24,.25);
  font-size: 13.5px; font-weight: 600;
}
.prazo .ic { width: 16px; height: 16px; }
.prazo strong { font-weight: 800; }

/* ===== Responsivo ============================================ */
@media (max-width: 480px) {
  .painel-corpo { padding: 24px 20px 26px; }
  .painel-topo  { padding: 18px 20px 14px; }
  .lockup .marca .orgao { font-size: 16px; }
  .lockup .brasao { width: 48px; }
  .secao-titulo { font-size: 18px; }
  .modal-corpo, .modal-topo { padding-left: 20px; padding-right: 20px; }
}

/* ===== Acessibilidade ======================================= */
:focus-visible { outline: 3px solid var(--azul-500); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}