:root {
  /* --- NUEVA PALETA DE COLORES (AZULES Y CELESTES) --- */
  --primary-color: #3674b5; /* Azul principal (para botones, header, etc.) */
  --primary-hover: #578fca; /* Azul más claro/dinámico (para el hover) */
  --accent-soft: #d1f8ef; /* Tono pastel claro (para badges y fondos ligeros) */
  --accent-text: #3674b5; /* Texto sobre fondo accent-soft */

  /* --- FONDOS Y SUPERFICIES --- */
  --bg-main: #f8fafc; /* Gris/Azul ultra claro para el fondo de la página */
  --bg-card: #ffffff; /* Blanco puro para tarjetas y headers */

  /* --- TIPOGRAFÍA Y TEXTOS --- */
  --font-main: "Poppins", sans-serif;
  --font-main2: "Alata", sans-serif;
  --font-main3: "Quicksand", sans-serif;
  --font-p: "Kedebideri", sans-serif;
  --text-dark: #1e293b; /* Gris muy oscuro para títulos principales */
  --text-muted: #64748b; /* Gris medio para subtítulos y textos secundarios */

  /* --- BORDES Y SOMBRAS --- */
  --border-color: #e2e8f0; /* Líneas de división sutiles */
  --radius-sm: 8px; /* Redondeado para botones e inputs */
  --radius-md: 12px; /* Redondeado para tarjetas */
  --radius-full: 9999px; /* Redondeado tipo píldora (para badges) */

  /* --- ELEVACIÓN (SOMBRAS) --- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-card:
    0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --shadow-hover:
    0 10px 15px -3px rgba(54, 116, 181, 0.15),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

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

body {
  min-height: 100vh;
  width: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: var(--bg-main);
}

.form-container {
  background-color: azure;
  width: 50vw;
  min-height: 80vh;
  border-radius: 10px;
  display: flex;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.left-panel-registration-form {
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  text-align: justify;
}

.icono {
  width: 100%;
  height: 20%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 3rem;
}

.icono-perfil {
  width: 160px;
  height: 163px;
  object-fit: cover;
}

.mensaje-bienvenida {
  width: 100%;
  height: 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0% 5%;
}

.mensaje-bienvenida h3 {
  text-align: justify;
  margin: 0.5rem;
  font-family: "Alata";
  font-weight: 200;
}

.mensaje-bienvenida p {
  text-align: justify;
  line-height: 1.5rem;
  margin-top: 0.5rem;
  font-family: "Kedebideri";
}

.fondo-form {
  width: 100%;
  height: 40%;
  height: auto;
  object-fit: cover;

  margin-bottom: 1rem;
}

.esquina-form {
  height: 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.right-panel-registration-form {
  width: 60%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.5rem 3rem;
}

.title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 20%;
}

.title h2 {
  font-family: "Quicksand";
  font-weight: 100;
  font-size: 3rem;
  padding: 1.5rem 0;
  text-align: center;
  color: var(--accent-text);
}

.form-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 2rem;
}

.registration-body {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  gap: 1.5rem;
}

.top-row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.top-row label {
  width: 200px;
  text-align: center;
}

.top-row input {
  text-align: center;
  width: 200px;
}

.registration-body label {
  font-family: var(--font-main2);
  font-size: 1.5rem;
  font-weight: lighter;
}

.registration-body input {
  border: none;
  border-bottom: 2px solid var(--border-color);
  font-family: var(--font-p);
  font-size: 1.3rem;
  background: transparent;
  outline: none;
  padding: 0 0rem;
}

.second-row,
.third-row,
.final-row {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
  gap: 3rem;
  margin-top: 2rem;
 
}

.first-item-second-row,
.second-item-second-row,
.first-item-third-row,
.second-item-third-row,
.first-item-final-row,
.second-item-final-row  {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.first-item-second-row input,
.first-item-second-row label,
.second-item-second-row input,
.second-item-second-row label,
.first-item-third-row input,
.first-item-third-row label,
.second-item-third-row input,
.second-item-third-row label,
.first-item-final-row input,
.first-item-final-row label,
.second-item-final-row input {
  text-align: center;
  width: 100%;
}



.second-item-final-row label {
  white-space: nowrap; /* Evita que el texto baje a la segunda línea */
  font-size: 1.3rem;
}

.registration-btn {
  margin-top: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
 
}

.reg-btn {
  width: 50%;
  height: 3rem; 
  border-radius: 10px;
  background-color: var(--primary-color);
  color: white;
  font-family: var(--font-main2);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-top: 0;
}

.reg-btn:hover {
  background-color: var(--primary-hover);
}
.swal2-popup {
  font-family: var(--font-p), sans-serif !important;
  border-radius: 12px !important;
}

.swal2-title {
  /* color: #1a365d !important; */
  color: var(--accent-text);
  font-size: 50px !important;
  font-family: var(--font-main3);
}

.swal2-html-container {
  color: #4a5568 !important;
}

.swal2-styled.swal2-confirm {
  width: 8rem;
}
/* 
.some-test {
  clase personalizada para sweet alert
} */


@media screen and (max-width: 850px) {
  body {
    padding: 1rem;
  }

  /* Cambiamos el contenedor principal de filas a columna */
  .form-container {
    flex-direction: column;
    width: 100%;
    min-height: auto;
  }

  /* El panel izquierdo pasa arriba y ocupa todo el ancho */
  .left-panel-registration-form {
    width: 100%;
    padding: 1.5rem;
  }

  /* Ocultamos elementos decorativos grandes en pantallas muy chicas si estorban, o los ajustamos */
  .fondo-form {
    display: none; 
  }

  .icono-perfil {
    width: 100px;
    height: 100px;
  }

  /* El panel derecho ocupa todo el ancho */
  .right-panel-registration-form {
    width: 100%;
    padding: 1.5rem 1rem;
  }

  /* Convertimos las filas dobles (Apellidos, Contraseñas, etc.) en columnas para celulares */
  .second-row,
  .third-row,
  .final-row {
    flex-direction: column;
    gap: 1.2rem;
  }

  .first-item-second-row,
  .second-item-second-row,
  .first-item-third-row,
  .second-item-third-row,
  .first-item-final-row,
  .second-item-final-row {
    width: 100%;
  }

  .second-item-final-row label {
    white-space: normal; /* Permite que el texto baje si es necesario en pantallas chicas */
  }

  .reg-btn {
    width: 100%; /* Botón de ancho completo en celulares para mayor comodidad táctil */
  }
}

  /* --- Quita el rectángulo del autocomplete --- */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
  /* Forzamos a que el fondo siga siendo transparente o del color de tu tarjeta */
  -webkit-box-shadow: 0 0 0 30px var(--bg-card) inset !important;
  /* Mantenemos el color del texto original para que no cambie */
  -webkit-text-fill-color: var(--text-dark) !important;
  /* Transición suave para evitar parpadeos */
  transition: background-color 5000s ease-in-out 0s;
}