/* ════════════════════════════════════════════════════
   LUÍSA DÓRIA CARE — style.css
   Estilos específicos do projeto (complementam Tailwind)
════════════════════════════════════════════════════ */

* { -webkit-tap-highlight-color: transparent; }

body {
  font-family: 'DM Sans', -apple-system, sans-serif;
  background: #FDF2F2;
}

/* ── TABS ── */
.tab-active .tab-label { color: #e11d48; }
.tab-active .tab-icon  { transform: scale(1.15); }
.tab-icon { transition: transform 0.2s ease; font-size: 1.5rem; }

/* ── INPUTS ── */
input, select, textarea { font-size: 16px !important; } /* previne zoom iOS */

/* ── BOTÕES ── */
.btn-primary {
  min-height: 50px;
  background: linear-gradient(135deg, #f43f5e, #e11d48);
}
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── CARDS ── */
.card {
  background: white;
  border-radius: 20px;
  box-shadow: 0 2px 16px rgba(244,63,94,0.08);
}

/* ── SCROLL ── */
::-webkit-scrollbar { display: none; }

/* ── ANIMAÇÕES ── */
@keyframes fadeIn {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:none; }
}
.tab-content { animation: fadeIn 0.25s ease; }

@keyframes shake {
  0%,100% { transform:translateX(0); }
  25%      { transform:translateX(-8px); }
  75%      { transform:translateX(8px); }
}
.shake { animation: shake 0.3s ease; }

@keyframes spin { to { transform: translateY(-50%) rotate(360deg); } }

@keyframes slideUp {
  from { transform:translateY(100%); opacity:0; }
  to   { transform:translateY(0);    opacity:1; }
}

/* ── LOADING BUTTON ── */
.btn-loading { position: relative; pointer-events: none; opacity: 0.7; }
.btn-loading::after {
  content: '';
  position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  border: 2px solid white; border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* ── PIN DOTS ── */
.pin-dot {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2.5px solid #f43f5e;
  transition: all 0.18s cubic-bezier(.34,1.56,.64,1);
}
.pin-dot.filled {
  background: #f43f5e;
  transform: scale(1.2);
  box-shadow: 0 0 0 4px rgba(244,63,94,0.15);
}

/* ── PIN KEYBOARD ── */
.pin-key-btn {
  background: white; border: none; border-radius: 20px;
  padding: 0; height: 64px;
  font-size: 1.5rem; font-weight: 600; color: #1a1a1a;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, background 0.12s;
  box-shadow: 0 2px 12px rgba(244,63,94,0.07), 0 1px 3px rgba(0,0,0,0.06);
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.pin-key-btn:active { transform: scale(0.92); background: #fff0f3; box-shadow: none; }
.pin-key-btn:focus-visible {
  outline: 2px solid #f43f5e;
  outline-offset: 2px;
}

/* ── AVATAR CHIP ── */
.avatar-chip {
  display: inline-flex; align-items: center; gap: 10px;
  background: white; border-radius: 40px; padding: 8px 18px 8px 10px;
  box-shadow: 0 2px 12px rgba(244,63,94,0.1);
}
.avatar-chip-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #f43f5e, #fb7185);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: white;
}

/* ── USER SELECT LIST ── */
.user-item {
  display: flex; align-items: center; gap: 14px;
  background: white; border-radius: 18px; padding: 14px 16px;
  cursor: pointer; border: 2px solid transparent;
  transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s;
  box-shadow: 0 2px 10px rgba(244,63,94,0.06);
}
.user-item:active { transform: scale(0.98); }
.user-item.selected {
  border-color: #f43f5e;
  box-shadow: 0 4px 20px rgba(244,63,94,0.15);
}
.user-item:focus-visible {
  outline: 2px solid #f43f5e;
  outline-offset: 2px;
}

.user-avatar {
  width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0;
  background: linear-gradient(135deg, #f43f5e, #fb7185);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
}

/* ── SPLASH ── */
#ecra-splash {
  position: fixed; inset: 0; z-index: 1000;
  background: linear-gradient(160deg, #fff0f3 0%, #fce7e7 50%, #fff 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: opacity 0.45s ease, transform 0.45s ease;
}
#ecra-splash.fade-out { opacity: 0; transform: scale(1.04); pointer-events: none; }

.splash-crown {
  width: 100px; height: 100px; border-radius: 32px;
  background: linear-gradient(135deg, #f43f5e 0%, #fb7185 60%, #fda4af 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 3.2rem;
  box-shadow: 0 20px 60px rgba(244,63,94,0.35), 0 4px 16px rgba(244,63,94,0.2);
  animation: splashPop 0.55s cubic-bezier(.34,1.56,.64,1) forwards;
  opacity: 0; transform: scale(0.6);
}
@keyframes splashPop { to { opacity: 1; transform: scale(1); } }

.splash-title {
  font-family: 'DM Serif Display', serif;
  font-size: 2rem; color: #1a1a1a; margin-top: 22px; line-height: 1.15;
  opacity: 0; transform: translateY(12px);
  animation: splashSlide 0.45s 0.28s ease forwards;
}
.splash-sub {
  font-size: 0.85rem; color: #f43f5e; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; margin-top: 6px;
  opacity: 0; transform: translateY(8px);
  animation: splashSlide 0.4s 0.42s ease forwards;
}
.splash-bar-wrap {
  margin-top: 48px; width: 56px; height: 3px; border-radius: 99px;
  background: rgba(244,63,94,0.12); overflow: hidden;
  opacity: 0;
  animation: splashSlide 0.3s 0.55s ease forwards;
}
.splash-bar {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, #f43f5e, #fb7185);
  width: 0%;
  animation: splashFill 0.7s 0.6s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes splashSlide { to { opacity: 1; transform: none; } }
@keyframes splashFill  { to { width: 100%; } }

/* ── LOGIN 2 STEPS ── */
.login-step { transition: opacity 0.3s ease, transform 0.3s ease; }
#ecra-login { position: relative; overflow: hidden; }
.login-steps-wrap { position: relative; min-height: 420px; }