/* =============================================
   Apa! Barna — Formularis (login + registre)
   ============================================= */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Poppins', sans-serif;
  background-color: #0B0B0B;
  display: flex;
  justify-content: center;
  min-height: 100dvh;
}

/* ---- Pantalla ---- */

.pantalla-form {
  width: 100%;
  max-width: 430px;
  min-height: 100dvh;
  background-image: url('../../img/grafics/fonsforms.jpg');
  background-size: cover;
  background-position: center top;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
}

/* ---- Estrelles animades de fons ---- */

.estrelles-form {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 260px;
  pointer-events: none;
  overflow: hidden;
}

.sf {
  position: absolute;
  display: block;
}

.sf svg { width: 100%; height: auto; }

.sf1 { width: 24px; top:  90px; left: 63%; animation: parpelleig 5s   ease-in-out infinite,      flotar 7s ease-in-out infinite; }
.sf2 { width: 13px; top:  30px; left: 20%; animation: parpelleig 6.5s ease-in-out infinite 1.4s, flotar 8s ease-in-out infinite 0.8s; }

.punt-form {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  animation: parpelleig 6s ease-in-out infinite;
}

.pf1 { width: 6px;  height: 6px;  top: 195px; left: 17%; animation-delay: 0.6s; }
.pf2 { width: 6px;  height: 6px;  top: 130px; left: 83%; animation-delay: 2.1s; }
.pf3 { width: 9px;  height: 9px;  top:  55px; left: 78%; animation-delay: 1.5s; }
.pf4 { width: 5px;  height: 5px;  top: 175px; left: 48%; animation-delay: 0.3s; }
.pf5 { width: 7px;  height: 7px;  top: 220px; left: 68%; animation-delay: 2.8s; }

@keyframes parpelleig { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes flotar     { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* ---- Capçalera (zona del fons) ---- */

.cap-form {
  padding: 56px 24px 24px;
  flex: 1;
}

.enrere {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}

/* ---- Targeta blanca ---- */

.targeta-form {
  background: #fff;
  border-radius: 30px 30px 0 0;
  padding: 44px 20px 40px;
  min-height: calc(100dvh - 220px);
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Login: alçada targeta ~685px */
.targeta-login {
  min-height: 685px;
}

/* Login: gap de 49px entre grup-titol i form */
.targeta-login > .grup-titol {
  margin-bottom: 21px; /* 32px gap + 17px = 49px total */
}

/* ---- Títol i subtítol ---- */

.grup-titol {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.titol-form {
  font-size: 32px;
  font-weight: 600;
  color: #000;
  text-align: center;
  line-height: 1.2;
}

.subtitol-form {
  font-size: 16px;
  font-weight: 400;
  color: #000;
  text-align: center;
  line-height: 1.6;
}

.subtitol-primera {
  font-weight: 500;
}

/* ---- Camps amb icona ---- */

.camps {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.camp-icona {
  position: relative;
  display: flex;
  align-items: center;
}

.camp-icona .icona,
.camp-icona > svg {
  position: absolute;
  left: 18px;
  width: 18px;
  height: 18px;
  color: #717171;
  pointer-events: none;
}

.camp-icona input {
  width: 100%;
  background: rgba(184, 184, 184, 0.25);
  border: none;
  border-radius: 999px;
  padding: 0 24px 0 50px;
  height: 60px;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #222;
  outline: none;
  transition: background 0.2s ease;
}

.camp-icona input::placeholder {
  color: #717171;
}

.camp-icona input:focus {
  background: #E8E8E8;
}

/* ---- Forms com a flex column ---- */

.targeta-form form {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

/* Registre: espai entre camps i botó */
.form-registre .camps {
  margin-bottom: 58px;
}

/* Login: link oblidat */
.link-oblidat {
  text-align: right;
  font-size: 14px;
  font-weight: 500;
  color: #000;
  text-decoration: none;
  display: block;
  margin-top: 12px;
}

/* Login: espai entre link i botó (original) */
.form-login .btn-form {
  margin-top: 53px;
}

/* ---- Botó principal (negre) ---- */

.btn-form {
  width: 100%;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 30px;
  padding: 14px 28px;
  height: 55px;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-form:active {
  background: #333;
}

/* ---- Divisor "Continuar amb" ---- */

.divisor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #000;
}

.divisor::before,
.divisor::after {
  content: '';
  flex: 0 0 95px;
  height: 2px;
  background: #000;
  border-radius: 999px;
}

/* ---- Icones socials ---- */

.socials {
  display: flex;
  justify-content: center;
  gap: 32px;
  align-items: center;
}

.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.15s ease;
}

.social-btn:active {
  opacity: 0.5;
}

/* ---- Text baix ---- */

.canvi-form {
  text-align: center;
  font-weight: 400;
  font-size: 14px;
  color: #000;
}

/* ---- Missatge d'error (pill flotant, no afecta layout) ---- */

.missatge-error {
  position: absolute;
  bottom: 63px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FFE0E0;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #D63031;
  animation: apareixer 0.2s ease;
}

.missatge-error svg {
  flex-shrink: 0;
}

@keyframes apareixer {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.canvi-form a {
  font-weight: 600;
  text-decoration: none;
  background: linear-gradient(to right, #FF6600 4%, #FF0000 24%, #0D00FF 60%, #00EAFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}