/* ══════════════════════════════════════════════════════
   LaboraYa — Registro.css
   Pantalla de registro: splash animado + modal
══════════════════════════════════════════════════════ */

/* ─── Variables de referencia (no depende de styles.css) ─── */
:root {
  --orange:   #FF5722;
  --orange-d: #E64A19;
  --orange-m: #FFEDE8;
  --orange-l: #FFF3F0;
  --green:    #22C55E;
  --red:      #EF4444;
  --yellow:   #F59E0B;
  --gray-50:  #F8F9FA;
  --gray-100: #F1F3F5;
  --gray-200: #E9ECEF;
  --gray-400: #ADB5BD;
  --gray-500: #868E96;
  --gray-600: #6C757D;
  --gray-700: #495057;
  --gray-800: #343A40;
  --gray-900: #1A1D23;
  --black:    #0F1117;
  --white:    #FFFFFF;
  --font-body:'Plus Jakarta Sans', sans-serif;
  --font-head:'Fraunces', serif;
  --ease:     cubic-bezier(.22,1,.36,1);
  --radius:   14px;
  --radius-lg:20px;
  --radius-xl:28px;
  --shadow-md:0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:0 12px 40px rgba(0,0,0,.14);
  --shadow-xl:0 24px 64px rgba(0,0,0,.16);
}

/* Modo oscuro */
[data-theme="dark"] {
  --gray-50:  #161B22; --gray-100:#1E2530; --gray-200:#2D3748;
  --gray-400: #718096; --gray-500:#8A9BB0; --gray-600:#A0AEC0;
  --gray-700: #BDC8D6; --gray-800:#E2E8F0; --gray-900:#F7FAFC;
  --black:    #FFFFFF; --white:   #0D1117;
  --orange-l: rgba(255,87,34,.08); --orange-m:rgba(255,87,34,.15);
  --shadow-md:0 4px 16px rgba(0,0,0,.45);
  --shadow-lg:0 12px 40px rgba(0,0,0,.55);
  --shadow-xl:0 24px 64px rgba(0,0,0,.65);
}

/* ─── RESET BASE ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  font-family: var(--font-body);
  background: var(--gray-50);
  color: var(--gray-800);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
button { font-family: var(--font-body); cursor: pointer; }

/* ══════════════════════════════════════════════════════
   FONDO DECORATIVO
══════════════════════════════════════════════════════ */
.auth-bg {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.bg-blob {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: .18;
  animation: blobDrift 14s ease-in-out infinite alternate;
}
.bb-1 { width:600px; height:600px; background:var(--orange); top:-150px; right:-100px; animation-delay:0s; }
.bb-2 { width:400px; height:400px; background:#FFC107; bottom:-80px; left:-80px;  animation-delay:-5s; }
.bb-3 { width:300px; height:300px; background:var(--orange-d); top:40%; left:30%; animation-delay:-2s; }
@keyframes blobDrift { from{transform:translate(0,0) scale(1);} to{transform:translate(30px,25px) scale(1.07);} }

[data-theme="dark"] .bg-blob { opacity:.06; }

/* ══════════════════════════════════════════════════════
   PANTALLA SPLASH (logo girando)
══════════════════════════════════════════════════════ */
.logo-splash {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  background: var(--white);
  transition: opacity .5s var(--ease), visibility .5s;
}
.logo-splash.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

/* Anillos orbitales */
.splash-ring {
  position: absolute; border-radius: 50%;
  border: 2px solid transparent;
}
.splash-ring-1 {
  width: 100px; height: 100px;
  border-top-color: var(--orange);
  border-right-color: var(--orange);
  animation: spinRing 1s linear infinite;
}
.splash-ring-2 {
  width: 130px; height: 130px;
  border-top-color: rgba(255,87,34,.4);
  border-left-color: rgba(255,87,34,.4);
  animation: spinRing 1.6s linear infinite reverse;
}
.splash-ring-3 {
  width: 165px; height: 165px;
  border-top-color: rgba(255,87,34,.15);
  border-right-color: rgba(255,87,34,.15);
  animation: spinRing 2.4s linear infinite;
}
@keyframes spinRing { to { transform: rotate(360deg); } }

/* Logo central */
.splash-logo {
  position: relative; z-index: 1;
  animation: splashPulse 1.2s ease-in-out infinite;
}
.splash-logo svg {
  display: block;
  filter: drop-shadow(0 6px 20px rgba(255,87,34,.4));
}
@keyframes splashPulse {
  0%,100%{ transform: scale(1); }
  50%     { transform: scale(1.07); }
}

/* ══════════════════════════════════════════════════════
   OVERLAY + MODAL
══════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(15,17,23,.55);
  backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 2rem 1.5rem;
  opacity: 0; visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s;
  overflow-y: auto;
}
.modal-overlay.show { opacity: 1; visibility: visible; }

.modal {
  background: var(--white);
  border-radius: var(--radius-xl);
  width: 100%; max-width: 520px;
  padding: 2.25rem 2.5rem 2.5rem;
  box-shadow: var(--shadow-xl);
  transform: scale(.92) translateY(20px);
  transition: transform .45s var(--ease), opacity .45s var(--ease);
  opacity: 0;
  position: relative;
  border: 1px solid var(--gray-200);
}
.modal-overlay.show .modal { transform: scale(1) translateY(0); opacity: 1; }

/* Header del modal */
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.75rem;
}
.modal-brand {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-body); font-size: 1.05rem; font-weight: 800;
  color: var(--gray-900);
}
.modal-close {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--gray-100); border: 1px solid var(--gray-200);
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-500); transition: background .2s, color .2s, transform .2s;
}
.modal-close svg { width: 16px; height: 16px; }
.modal-close:hover { background: var(--gray-200); color: var(--gray-800); transform: rotate(90deg); }

/* Título del modal */
.modal-title-block { margin-bottom: 2rem; }
.modal-title-block h1 {
  font-family: var(--font-head);
  font-size: 1.65rem; font-weight: 700;
  color: var(--black); line-height: 1.2;
  letter-spacing: -.02em; margin-bottom: .4rem;
}
.modal-title-block h1 em { font-style: italic; color: var(--orange); }
.modal-title-block p { font-size: .875rem; color: var(--gray-500); }

/* ══════════════════════════════════════════════════════
   FORMULARIO
══════════════════════════════════════════════════════ */
.auth-form { display: flex; flex-direction: column; gap: 1.1rem; }

.form-row.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.form-field { display: flex; flex-direction: column; gap: .35rem; }

.form-field label {
  font-size: .82rem; font-weight: 700;
  color: var(--gray-700); letter-spacing: .02em;
}

/* Input wrapper */
.input-wrap {
  position: relative; display: flex; align-items: center;
  background: var(--gray-50);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  transition: border-color .2s, box-shadow .2s, background .2s;
  overflow: hidden;
}
.input-wrap:focus-within {
  border-color: var(--orange);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(255,87,34,.12);
}
.form-field.has-error .input-wrap {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(239,68,68,.1);
}
.form-field.has-success .input-wrap { border-color: var(--green); }

.input-ico {
  width: 16px; height: 16px; flex-shrink: 0;
  margin-left: 12px; color: var(--gray-400);
  pointer-events: none;
}

.input-wrap input {
  flex: 1; border: none; outline: none;
  background: transparent;
  font-family: var(--font-body); font-size: .9rem;
  color: var(--gray-900); padding: .8rem .75rem .8rem .5rem;
}
.input-wrap input::placeholder { color: var(--gray-400); }

/* Ojo para contraseñas */
.eye-btn {
  width: 38px; height: 38px; flex-shrink: 0;
  background: none; border: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-400); padding: 0 10px 0 0;
  transition: color .2s;
}
.eye-btn:hover { color: var(--orange); }
.eye-btn svg { width: 17px; height: 17px; pointer-events: none; }
.eye-btn .eye-shut { display: none; }
.eye-btn.active .eye-open { display: none; }
.eye-btn.active .eye-shut { display: block; }

/* Mensajes de campo */
.field-error {
  font-size: .75rem; font-weight: 600; color: var(--red);
  display: none; align-items: center; gap: 4px;
}
.form-field.has-error .field-error { display: flex; }

.field-hint {
  font-size: .75rem; color: var(--gray-500);
  display: flex; align-items: center; gap: 4px;
}
.field-hint svg { width: 13px; height: 13px; flex-shrink: 0; }

/* Barra de fortaleza de contraseña */
.strength-bar {
  height: 4px; border-radius: 99px;
  background: var(--gray-200); overflow: hidden;
  margin-top: .1rem;
}
.strength-fill {
  height: 100%; width: 0; border-radius: 99px;
  transition: width .4s var(--ease), background .3s;
}
.strength-label {
  font-size: .72rem; font-weight: 700;
  color: var(--gray-500); margin-top: .1rem;
}

/* ── Niveles de fortaleza ── */
.strength-fill.w-25  { width: 25%; background: var(--red); }
.strength-fill.w-50  { width: 50%; background: var(--yellow); }
.strength-fill.w-75  { width: 75%; background: #3B82F6; }
.strength-fill.w-100 { width: 100%; background: var(--green); }

/* ══════════════════════════════════════════════════════
   BOTÓN SUBMIT
══════════════════════════════════════════════════════ */
.auth-submit {
  width: 100%; padding: .9rem 1.5rem;
  background: var(--orange); color: var(--white);
  font-family: var(--font-body); font-size: .975rem; font-weight: 700;
  border: none; border-radius: var(--radius);
  cursor: pointer; position: relative; overflow: hidden;
  transition: background .2s, transform .15s var(--ease), box-shadow .2s;
  box-shadow: 0 4px 20px rgba(255,87,34,.35);
  margin-top: .5rem;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.auth-submit:hover:not(:disabled) {
  background: var(--orange-d);
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(255,87,34,.4);
}
.auth-submit:disabled { opacity: .7; cursor: not-allowed; transform: none; }

.btn-loader { display: none; }
.btn-loader svg {
  width: 18px; height: 18px;
  animation: spinRing 1s linear infinite;
}
.auth-submit.loading .btn-text { display: none; }
.auth-submit.loading .btn-loader { display: flex; }

/* Ripple */
.auth-submit::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255,255,255,.12);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.auth-submit:hover::after { transform: scaleX(1); }

/* Link a login */
.auth-alt {
  text-align: center; font-size: .875rem; color: var(--gray-500); margin-top: .25rem;
}
.auth-alt a { color: var(--orange); font-weight: 700; }
.auth-alt a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════
   MODAL ÉXITO
══════════════════════════════════════════════════════ */
.success-overlay {
  position: fixed; inset: 0; z-index: 600;
  background: rgba(15,17,23,.6);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  opacity: 0; visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s;
}
.success-overlay.show { opacity: 1; visibility: visible; }

.success-box {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 2.5rem 2.25rem;
  max-width: 420px; width: 100%;
  text-align: center;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--gray-200);
  transform: scale(.9);
  transition: transform .45s var(--ease);
}
.success-overlay.show .success-box { transform: scale(1); }

.success-icon {
  width: 72px; height: 72px; margin: 0 auto 1.5rem;
  animation: successPop .6s var(--ease) both;
}
.success-icon svg { width: 100%; height: 100%; }
@keyframes successPop {
  from { transform: scale(.4); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.success-box h2 {
  font-family: var(--font-head); font-size: 1.6rem; font-weight: 700;
  color: var(--black); margin-bottom: .75rem;
}
.success-box p { font-size: .9rem; line-height: 1.7; color: var(--gray-600); margin-bottom: .5rem; }
.success-box strong { color: var(--orange); }
.success-sub { font-size: .82rem; color: var(--gray-400); }

/* Error devuelto por el servidor */
.server-error {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: var(--radius-sm, 8px);
  padding: .75rem 1rem;
  font-size: .85rem; font-weight: 600; color: var(--red);
  text-align: center;
  animation: shakeX .4s ease;
}
[data-theme="dark"] .server-error {
  background: rgba(239,68,68,.1);
  border-color: rgba(239,68,68,.25);
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════ */
@media (max-width: 540px) {
  .modal { padding: 1.75rem 1.5rem 2rem; border-radius: var(--radius-lg); }
  .form-row.two-col { grid-template-columns: 1fr; }
  .modal-title-block h1 { font-size: 1.4rem; }
}

/* ══════════════════════════════════════════════════════
   TARJETAS DE ROL
══════════════════════════════════════════════════════ */
.rol-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.rol-card {
  display: flex; align-items: center; gap: .85rem;
  padding: 1rem 1.1rem;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--gray-50);
  cursor: pointer;
  transition: border-color .2s, background .2s, box-shadow .2s, transform .2s;
}
.rol-card:hover {
  border-color: var(--orange);
  background: var(--orange-l);
  transform: translateY(-2px);
}
.rol-card.selected {
  border-color: var(--orange);
  background: var(--orange-m);
  box-shadow: 0 0 0 3px rgba(255,87,34,.12);
}

.rol-icon {
  font-size: 1.6rem; width: 44px; height: 44px;
  background: var(--white);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--gray-200);
  transition: background .2s;
}
.rol-card.selected .rol-icon { background: var(--orange-l); }

.rol-info strong {
  display: block;
  font-size: .9rem; font-weight: 700;
  color: var(--gray-900);
}
.rol-info span {
  font-size: .75rem;
  color: var(--gray-500);
  margin-top: 2px;
  display: block;
}