/* ============================================================
   EMSERI+ QualiMedico — Formulário de Cadastro
   Tema: Branco gelo | Azul #009BDE | Verde #84C13D
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ── Variáveis ─────────────────────────────────────────────── */
:root {
  --clr-blue:        #009BDE;
  --clr-blue-dark:   #0080b8;
  --clr-blue-light:  #e6f6fd;
  --clr-green:       #84C13D;
  --clr-green-dark:  #6aa52e;
  --clr-green-light: #f1f9e8;

  --clr-bg:          #f0f4f7;   /* branco gelo */
  --clr-surface:     #ffffff;
  --clr-surface-2:   #f7fafb;

  --clr-text:        #0d2d3e;
  --clr-text-soft:   #4a6875;
  --clr-muted:       #8faab5;
  --clr-border:      #d4e6ef;
  --clr-border-soft: #e8f2f7;

  --clr-error:       #e53e3e;
  --clr-error-light: #fff5f5;

  --shadow-sm:  0 1px 3px rgba(0,80,120,.08), 0 1px 2px rgba(0,80,120,.05);
  --shadow-md:  0 4px 16px rgba(0,80,120,.10), 0 2px 6px rgba(0,80,120,.06);
  --shadow-lg:  0 8px 32px rgba(0,80,120,.12), 0 2px 8px rgba(0,80,120,.07);
  --shadow-card:0 2px 12px rgba(0,80,120,.08), 0 1px 3px rgba(0,80,120,.05);

  --shadow-glow:       0 0 0 3px rgba(0,155,222,.18);
  --shadow-green-glow: 0 0 0 3px rgba(132,193,61,.2);

  --radius: 0.5rem;
}

/* ── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--clr-bg);
  color: var(--clr-text);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Fundo branco gelo com orbs suaves ─────────────────────── */
.bg-mesh {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--clr-bg);
  overflow: hidden;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  animation: drift 20s ease-in-out infinite alternate;
}

/* Orb azul suave */
.orb-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(0,155,222,.14) 0%, transparent 65%);
  top: -200px; left: -150px;
  animation-duration: 22s;
}

/* Orb verde suave */
.orb-2 {
  width: 450px; height: 450px;
  background: radial-gradient(circle, rgba(132,193,61,.1) 0%, transparent 65%);
  bottom: -120px; right: -100px;
  animation-duration: 26s;
  animation-delay: -10s;
}

/* Orb azul claro centro */
.orb-3 {
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(0,155,222,.07) 0%, transparent 65%);
  top: 40%; left: 55%;
  animation-duration: 16s;
  animation-delay: -6s;
}

@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(40px, 30px) scale(1.08); }
}

/* ── Layout ────────────────────────────────────────────────── */
.main-container {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 16px 56px;
}

/* ── Header / Logo ─────────────────────────────────────────── */
.form-header {
  text-align: center;
  margin-bottom: 24px;
}

.logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.logo-img {
  height: 72px;
  width: auto;
  display: block;
  filter: drop-shadow(0 3px 8px rgba(0, 60, 100, .18));
}

.header-subtitle {
  font-size: .84rem;
  color: var(--clr-text-soft);
  font-weight: 400;
  letter-spacing: .3px;
  margin-top: 2px;
}

/* ── Card branco ───────────────────────────────────────────── */
.card {
  width: 100%;
  max-width: 520px;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border-soft);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* ── Progress bar azul→verde ───────────────────────────────── */
.progress-wrap {
  height: 4px;
  background: var(--clr-border-soft);
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--clr-blue) 0%, var(--clr-green) 100%);
  transition: width .4s ease;
  border-radius: 0 2px 2px 0;
}

.card-inner {
  padding: 32px 28px 28px;
}

/* Heading com ícone azul */
.card-heading {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 28px;
}

.card-heading-icon {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--clr-blue) 0%, #00b8ff 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 1.3rem;
  box-shadow: 0 4px 14px rgba(0,155,222,.35);
}

.card-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--clr-text);
  letter-spacing: -0.3px;
  margin-bottom: 4px;
  line-height: 1.2;
}

.card-desc {
  font-size: .875rem;
  color: var(--clr-text-soft);
  line-height: 1.55;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.badge-programa {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .3px;
  background: var(--clr-blue-light);
  color: var(--clr-blue-dark);
  border: 1px solid rgba(0,155,222,.25);
  white-space: nowrap;
}

.badge-uti {
  background: var(--clr-green-light);
  color: var(--clr-green-dark);
  border-color: rgba(132,193,61,.3);
}

/* ── Campos ────────────────────────────────────────────────── */
.field-group {
  margin-bottom: 20px;
  position: relative;
}

.field-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--clr-text-soft);
  margin-bottom: 7px;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.label-icon-fa {
  color: var(--clr-blue);
  font-size: .85rem;
  width: 16px;
  text-align: center;
}

.input-wrap { position: relative; }

.field-input {
  width: 100%;
  padding: 12px 44px 12px 14px;
  background: var(--clr-surface-2);
  border: 1.5px solid var(--clr-border);
  border-radius: 10px;
  color: var(--clr-text);
  font-family: inherit;
  font-size: .95rem;
  transition: border-color .2s, box-shadow .2s, background .2s;
  outline: none;
  -webkit-appearance: none;
}

.field-input::placeholder { color: var(--clr-muted); }

.field-input:focus {
  border-color: var(--clr-blue);
  background: var(--clr-surface);
  box-shadow: var(--shadow-glow);
}

.field-input:focus + .input-check,
.field-input:focus ~ .select-arrow { opacity: 0; }

/* Estado válido */
.field-group.is-valid .field-input {
  border-color: var(--clr-green);
  background: var(--clr-green-light);
  box-shadow: var(--shadow-green-glow);
}

.field-group.is-valid .input-check {
  opacity: 1;
  color: var(--clr-green);
}

/* Estado inválido */
.field-group.is-invalid .field-input {
  border-color: var(--clr-error);
  background: var(--clr-error-light);
  box-shadow: 0 0 0 3px rgba(229,62,62,.12);
}

/* Check icon */
.input-check {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--clr-green);
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
  font-size: .85rem;
}

/* Select */
.select-wrap { position: relative; }
.field-select { cursor: pointer; padding-right: 44px; }

.field-select option {
  background: #fff;
  color: var(--clr-text);
}

.select-arrow {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--clr-muted);
  pointer-events: none;
  transition: transform .2s;
}

.field-select:focus ~ .select-arrow {
  transform: translateY(-50%) rotate(180deg);
  color: var(--clr-blue);
}

input[type="month"]::-webkit-calendar-picker-indicator {
  opacity: .5;
  cursor: pointer;
}

/* ── Setor — cards tema claro ──────────────────────────────── */
.setor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.setor-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px;
  background: var(--clr-surface-2);
  border: 1.5px solid var(--clr-border);
  border-radius: 12px;
  cursor: pointer;
  transition: all .2s;
  user-select: none;
  position: relative;
}

.setor-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.setor-card:hover {
  background: var(--clr-blue-light);
  border-color: rgba(0,155,222,.4);
}

.setor-card.selected {
  background: var(--clr-blue-light);
  border-color: var(--clr-blue);
  box-shadow: var(--shadow-glow);
}

.setor-icon-fa {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--clr-blue-light);
  display: flex; align-items: center; justify-content: center;
  color: var(--clr-blue);
  font-size: 1.15rem;
  transition: background .2s, color .2s;
}

.setor-icon-yellow {
  background: #fff8e1;
  color: #d4960a;
}

.setor-icon-red {
  background: #fff0f0;
  color: #c0392b;
}

.setor-card.selected .setor-icon-fa {
  background: var(--clr-blue);
  color: #fff;
}

.setor-card.selected .setor-icon-yellow {
  background: #d4960a;
  color: #fff;
}

.setor-card.selected .setor-icon-red {
  background: #c0392b;
  color: #fff;
}

.setor-name {
  font-size: .78rem;
  font-weight: 600;
  color: var(--clr-text-soft);
  text-align: center;
  line-height: 1.3;
}

.setor-card.selected .setor-name { color: var(--clr-blue-dark); }

/* ── Hint / Erro ───────────────────────────────────────────── */
.field-hint {
  display: block;
  font-size: .78rem;
  color: var(--clr-muted);
  margin-top: 5px;
}

.field-error {
  display: block;
  font-size: .78rem;
  color: var(--clr-error);
  margin-top: 5px;
  min-height: 1em;
}

/* ── Botão Submit ──────────────────────────────────────────── */
.btn-submit {
  width: 100%;
  margin-top: 8px;
  padding: 14px 24px;
  background: linear-gradient(135deg, var(--clr-blue) 0%, var(--clr-green) 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 4px 18px rgba(0,155,222,.35);
  letter-spacing: .2px;
}

.btn-submit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.2) 0%, transparent 55%);
  pointer-events: none;
}

.btn-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,155,222,.45);
}

.btn-submit:active:not(:disabled) { transform: translateY(0); }
.btn-submit:disabled { opacity: .6; cursor: not-allowed; }

.btn-submit.loading .btn-text,
.btn-submit.loading .btn-icon { opacity: 0; }
.btn-submit.loading .btn-loader { display: block; }

.btn-loader {
  display: none;
  width: 20px; height: 20px;
  border: 2.5px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Toast ─────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  border-radius: 12px;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  color: var(--clr-text);
  font-size: .9rem;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  z-index: 999;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), opacity .3s;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  max-width: calc(100vw - 40px);
}

.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.toast.success { border-color: rgba(132,193,61,.5); }
.toast.error   { border-color: rgba(229,62,62,.4); }
.toast-icon    { font-size: 1.1rem; }

/* ── Modal de Sucesso ──────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13,45,62,.4);
  backdrop-filter: blur(6px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}

.modal-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border-soft);
  border-radius: 20px;
  padding: 40px 32px;
  text-align: center;
  max-width: 380px;
  width: 100%;
  box-shadow: var(--shadow-lg);
  transform: scale(.9);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}

.modal-overlay.show .modal { transform: scale(1); }

.modal-check {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--clr-green) 0%, #a8d85a 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  margin: 0 auto 20px;
  box-shadow: 0 6px 20px rgba(132,193,61,.4);
  animation: pop .4s cubic-bezier(.34,1.56,.64,1) .1s both;
}

@keyframes pop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

.modal-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--clr-text);
  margin-bottom: 10px;
}

.modal-desc {
  font-size: .9rem;
  color: var(--clr-text-soft);
  line-height: 1.6;
  margin-bottom: 28px;
}

.btn-modal {
  padding: 12px 32px;
  background: linear-gradient(135deg, var(--clr-blue), var(--clr-green));
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 4px 14px rgba(0,155,222,.35);
}

.btn-modal:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,155,222,.45);
}

/* ── Responsivo Mobile ─────────────────────────────────────── */
@media (max-width: 480px) {
  .card-inner  { padding: 24px 18px 20px; }
  .card-title  { font-size: 1.2rem; }
  .logo-img    { height: 58px; }
}

@media (max-width: 340px) {
  .setor-grid { grid-template-columns: 1fr; }
}

/* ── Foco acessível ────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--clr-blue);
  outline-offset: 2px;
}

/* ── Autocomplete Unidade ──────────────────────────────────── */
.autocomplete-wrap { position: relative; }

/* Botão X de limpar dentro do input */
.autocomplete-clear {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border: none;
  background: var(--clr-border);
  border-radius: 50%;
  color: var(--clr-text-soft);
  font-size: .7rem;
  cursor: pointer;
  transition: background .15s, color .15s;
  padding: 0;
  z-index: 2;
}

.autocomplete-clear:hover {
  background: var(--clr-error);
  color: #fff;
}

/* Lista dropdown */
.autocomplete-list {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: var(--clr-surface);
  border: 1.5px solid var(--clr-blue);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  max-height: 220px;
  overflow-y: auto;
  z-index: 50;
  list-style: none;
  padding: 4px 0;
  margin: 0;
}

.autocomplete-list.open { display: block; }

.ac-item {
  padding: 10px 14px;
  font-size: .9rem;
  color: var(--clr-text);
  cursor: pointer;
  transition: background .12s;
  line-height: 1.4;
}

.ac-item:hover,
.ac-item:focus {
  background: var(--clr-blue-light);
  color: var(--clr-blue-dark);
}

.ac-item strong {
  color: var(--clr-blue);
  font-weight: 700;
}

.ac-empty {
  padding: 12px 14px;
  font-size: .88rem;
  color: var(--clr-muted);
  font-style: italic;
  text-align: center;
}