:root{
    --bg-left:#050b16;         /* negro azulado */
    --bg-right:#cacaca;        /* azul rey */
    --card:#ffffff;
    --card-2:#ffffff;
    --text:#050505;
    --muted:#ffffff;
    --input:#ffffff;
    --input-border:#252a34;
    --primary:#000000;         /* azul rey */
    --primary-700:#030303;
    --radius:22px;
    --shadow-lg:0 28px 70px rgba(0,0,0,.55);
  }

  *{box-sizing:border-box}
  html,body{height:100%}
  body{
  margin:0;
  font-family:"Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
 background-image: url('../img/fondo.jpg');
 /* ← tu imagen */
  background-repeat: no-repeat;
  background-size: cover;       /* ocupa toda la pantalla */
  background-position: center;  /* centrada */
  background-attachment: fixed; /* se mantiene fija al hacer scroll */
  min-height:100vh;
  display:grid;
  place-items:center;
}
  


  .card{
    width:min(720px, 94vw);
    background:
     
      linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
    border-radius:var(--radius);
   
    padding:34px 28px 26px;
    position:relative;
  }
  .card::before{
    content:"";
    position:absolute; inset:-6px;
    border-radius:calc(var(--radius) + 6px);
    background: radial-gradient(60% 40% at 50% -10%, rgb(255, 255, 255), transparent 70%);
    filter: blur(18px);
    z-index:-1;
  }

  .header{
    text-align:center;
    margin-bottom:18px;
  }
  .header img{
    width:150px; height:auto; display:block; margin:0 auto 6px;
    user-select:none; -webkit-user-drag:none;
  }
  .header h1{ margin:6px 0 6px; font-size:28px; }
  .header p{ margin:0; color:var(--muted); font-size:14px; }

  form{ display:grid; gap:14px; margin-top:16px; }
  .row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  @media (max-width:600px){ .row{ grid-template-columns:1fr; } }

  label{ font-size:12px; color:#cdd6f5; display:block; margin:2px 2px 6px; }
  .field{
    width:100%;
    background:var(--input);
    border:1px solid var(--input-border);
    color:#e6ebff;
    padding:14px 16px;
    border-radius:12px;
    font-size:15px;
    outline:none;
    transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
  }
  .field::placeholder{ color:#9aa6c2; }
  .field:focus{
    border-color:#3a4150;
    background:#ffffff;
    box-shadow:0 0 0 4px rgba(0,51,160,.20);
  }

  .btn{
    margin-top:6px;
    border:none;
    border-radius:999px;
    padding:14px 18px;
    font-size:15px;
    font-weight:700;
    background:var(--primary);
    color:white;
    cursor:pointer;
    
    transition:transform .06s ease, background .15s ease, box-shadow .15s ease;
  }
  .btn:hover{ background:var(--primary-700); transform:translateY(-1px); }
  .btn:active{ transform:translateY(0); }

  .footer-note{
    margin-top:10px; text-align:center; font-size:13px; color:#000000;
  }
  
  label i {
  color: #000000; /* azul rey */
}

/* Hace que la página se pueda desplazar si el formulario es largo */
body {
  overflow-y: auto;
}
/* ===== Colores de texto estilo "imagen" ===== */
:root{
  --heading: #000000;        /* títulos (Registrarse) */
  --text-body: #767e85;      /* párrafos/ayudas */
  --label: #5b7a95;          /* labels de campos */
  --input-text: #1f2937;     /* texto dentro del input */
  --placeholder: #9db3c5;    /* placeholder */
}

/* Título y subtítulo */
.header h1{ color: var(--heading); }
.header p{ color: var(--text-body); }

/* Labels con icono a la izquierda */
label{
  color: var(--label);
  font-weight: 600;
}
label i{
  color: #000000; /* iconos celestes */
}

/* Inputs claros como la imagen */
.field{
  background: #ffffff;
  border: 1px solid #dbe7f3;
  color: var(--input-text);
}
.field::placeholder{ color: var(--placeholder); }
.field:focus{
  border-color:#000000;
  box-shadow: 0 0 0 3px rgba(24, 24, 24, 0.2);
}

.back-link {
  position: fixed;
  top: 20px;
  left: 24px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 500;
  color: #ffffff; /* azul oscuro del texto */
  text-decoration: none;
  transition: color 0.2s ease;
}

.back-link i {
  color: #ffffff; /* azul celeste del icono */
  font-size: 20px;
}

.back-link:hover {
  color: #ffffff; /* cambia el texto a azul claro al pasar el mouse */
}

/* ================================
   💠 ESTILO PARA EL SELECT (ROL)
   ================================ */

.select-role {
  width: 100%;
  background: #ffffff;
  border: 1px solid #dbe7f3;
  color: var(--input-text);
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 15px;
  outline: none;
  appearance: none;            /* quita la flecha fea nativa */
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  position: relative;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

/* Flecha personalizada */
.select-role::-ms-expand {
  display: none;
}

.select-role-wrapper {
  position: relative;
}

.select-role-wrapper::after {
  content: "\25BC";               /* flechita ▼ */
  font-size: 14px;
  color: #000000;                 /* flecha negra elegante */
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;           /* no estorba al click */
}

/* Hover */
.select-role:hover {
  background: #f7faff;
}

/* Focus */
.select-role:focus {
  border-color: #000000;
  box-shadow: 0 0 0 3px rgba(24, 24, 24, 0.25);
  background: #ffffff;
}

/* Opciones internas */
.select-role option {
  color: #1f2937;
  font-weight: 500;
}

@keyframes revealClean{
  0%{
    opacity:0;
    filter:blur(10px);
    clip-path: inset(10% 12% 12% 10% round var(--radius, 22px));
  }
  100%{
    opacity:1;
    filter:blur(0);
    clip-path: inset(0 0 0 0 round var(--radius, 22px));
  }
}

/* Solo animamos el cuadro de registro (.card) */
.card.animate-in{
  animation: revealClean .6s cubic-bezier(.16,.84,.44,1) both;
  will-change: opacity, filter, clip-path;
}

/* Botón con hover suave (por si aún no lo tienes aquí) */
.card .btn{
  transition: transform .2s ease, box-shadow .2s ease, background .15s ease;
}
.card .btn:hover{
  transform: scale(1.07);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}
.card .btn:active{
  transform: scale(0.96);
}

/* Respeta reduce motion */
@media (prefers-reduced-motion: reduce){
  .animate-in{ animation:none !important; }
}

.swal2-popup,
.swal2-popup * {
    font-family: "Poppins", "Nunito Sans", system-ui, Segoe UI, Roboto, sans-serif !important;
}





/* Fuerza todos los campos a ocupar una sola columna 
.row {
  grid-template-columns: 1fr !important;
}

form {
  gap: 18px;
}


body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70vmax 60vmax at 15% 20%, rgba(0,51,160,.25), transparent 60%),
    radial-gradient(80vmax 70vmax at 85% 85%, rgba(0,51,160,.20), transparent 60%),
    linear-gradient(90deg, #050b16 0%, #0b3ca0 100%);
}*/