/*
|--------------------------------------------------------------------------
| JUNTOS - AUTH / SPLASH / ONBOARDING
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| VARIABLES - MODO CLARO
|--------------------------------------------------------------------------
|
| El modo base será claro.
| Más abajo usamos prefers-color-scheme
| para cambiar automáticamente a oscuro.
|
*/

:root {

  color-scheme: light dark;

  --bg: #f8fafc;

  --bg-gradient-start: #f8fafc;
  --bg-gradient-end: #eef4f8;

  --panel: #ffffff;
  --panel-alpha: rgba(255, 255, 255, .88);

  --panel-2: #f1f5f9;

  --line: #d9e2ec;

  --text: #0f172a;

  --muted: #64748b;

  --label: #475569;

  --input-bg: #ffffff;

  --secondary-text: #334155;

  --sky: #0284c7;

  --sky-soft: rgba(14, 165, 233, .10);

  --green: #10b981;

  --danger: #e11d48;

  --danger-soft: #be123c;

  --shadow:
    0 20px 60px rgba(15, 23, 42, .10);

  --splash-bg: #f8fafc;

  --splash-muted: #64748b;

  --progress-off: #dbe4ee;
}


/*
|--------------------------------------------------------------------------
| TEMA OSCURO DEL DISPOSITIVO
|--------------------------------------------------------------------------
*/

@media (prefers-color-scheme: dark) {

  :root {

    --bg: #07111f;

    --bg-gradient-start: #07111f;
    --bg-gradient-end: #091426;

    --panel: #0f1b2e;
    --panel-alpha: rgba(15, 27, 46, .86);

    --panel-2: #132238;

    --line: #24344d;

    --text: #f8fafc;

    --muted: #91a2b8;

    --label: #b8c5d6;

    --input-bg: #081322;

    --secondary-text: #d9e4f0;

    --sky: #38bdf8;

    --sky-soft: rgba(56, 189, 248, .10);

    --green: #34d399;

    --danger: #fb7185;

    --danger-soft: #fda4af;

    --shadow:
      0 20px 60px rgba(0, 0, 0, .26);

    --splash-bg: #07111f;

    --splash-muted: #93a4bc;

    --progress-off: #26364e;
  }
}


/*
|--------------------------------------------------------------------------
| RESET
|--------------------------------------------------------------------------
*/

* {
  box-sizing: border-box;
}


html,
body {

  min-height: 100%;
}


body {

  margin: 0;

  font-family:
    'Plus Jakarta Sans',
    sans-serif;

  background:
    radial-gradient(
      circle at top,
      rgba(56, 189, 248, .10),
      transparent 32rem
    ),
    linear-gradient(
      180deg,
      var(--bg-gradient-start) 0%,
      var(--bg-gradient-end) 100%
    );

  color:
    var(--text);

  -webkit-tap-highlight-color:
    transparent;

  transition:
    background .25s ease,
    color .25s ease;
}


/*
|--------------------------------------------------------------------------
| AUTH SHELL
|--------------------------------------------------------------------------
*/

.auth-shell {

  width:
    min(100%, 430px);

  min-height:
    100vh;

  margin:
    auto;

  padding:
    28px 20px;

  display:
    flex;

  flex-direction:
    column;
}


/*
|--------------------------------------------------------------------------
| BRAND
|--------------------------------------------------------------------------
*/

.brand {

  text-align:
    center;

  margin:
    auto 0 30px;
}


.brand-logo {

  width:
    104px;

  height:
    104px;

  object-fit:
    contain;

  margin:
    0 auto 14px;

  filter:
    drop-shadow(
      0 18px 28px
      rgba(0, 0, 0, .14)
    );
}


.brand h1 {

  margin:
    0;

  font-size:
    28px;

  line-height:
    1;

  letter-spacing:
    .08em;

  font-weight:
    800;
}


.brand p {

  margin:
    10px auto 0;

  max-width:
    300px;

  color:
    var(--muted);

  font-size:
    12px;

  text-transform:
    uppercase;

  letter-spacing:
    .12em;

  line-height:
    1.55;
}


/*
|--------------------------------------------------------------------------
| AUTH CARD
|--------------------------------------------------------------------------
*/

.auth-card {

  background:
    var(--panel-alpha);

  border:
    1px solid var(--line);

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);

  border-radius:
    26px;

  padding:
    22px;

  box-shadow:
    var(--shadow);
}


.eyebrow {

  color:
    var(--sky);

  font-size:
    11px;

  text-transform:
    uppercase;

  letter-spacing:
    .12em;

  font-weight:
    800;
}


.auth-card h2 {

  margin:
    6px 0 8px;

  font-size:
    22px;

  color:
    var(--text);
}


.auth-card .lead {

  margin:
    0 0 20px;

  color:
    var(--muted);

  font-size:
    13px;

  line-height:
    1.55;
}


/*
|--------------------------------------------------------------------------
| CAMPOS
|--------------------------------------------------------------------------
*/

.field-group {

  margin-top:
    13px;
}


.field-group label {

  display:
    block;

  color:
    var(--label);

  font-size:
    12px;

  margin-bottom:
    6px;
}


.field {

  width:
    100%;

  border:
    1px solid var(--line);

  background:
    var(--input-bg);

  color:
    var(--text);

  border-radius:
    14px;

  padding:
    13px 14px;

  font:
    inherit;

  font-size:
    14px;

  outline:
    none;

  transition:
    border-color .2s ease,
    background .2s ease,
    color .2s ease,
    box-shadow .2s ease;
}


.field::placeholder {

  color:
    var(--muted);

  opacity:
    .70;
}


.field:focus {

  border-color:
    var(--sky);

  box-shadow:
    0 0 0 3px
    rgba(56, 189, 248, .10);
}


/*
|--------------------------------------------------------------------------
| BOTONES
|--------------------------------------------------------------------------
*/

.primary-btn,
.secondary-btn {

  width:
    100%;

  border:
    0;

  border-radius:
    14px;

  padding:
    13px 15px;

  font:
    inherit;

  font-weight:
    800;

  cursor:
    pointer;

  transition:
    transform .12s ease,
    opacity .2s ease;
}


.primary-btn:active,
.secondary-btn:active {

  transform:
    scale(.985);
}


.primary-btn:disabled,
.secondary-btn:disabled {

  opacity:
    .55;

  cursor:
    not-allowed;
}


.primary-btn {

  margin-top:
    18px;

  background:
    linear-gradient(
      135deg,
      #38bdf8,
      #22d3ee
    );

  color:
    #062233;
}


.primary-btn.green {

  background:
    linear-gradient(
      135deg,
      #34d399,
      #10b981
    );

  color:
    #05281e;
}


.secondary-btn {

  margin-top:
    10px;

  color:
    var(--secondary-text);

  background:
    var(--panel-2);

  border:
    1px solid var(--line);
}


/*
|--------------------------------------------------------------------------
| HELPERS
|--------------------------------------------------------------------------
*/

.helper {

  text-align:
    center;

  color:
    var(--muted);

  font-size:
    12px;

  margin:
    18px 0 0;
}


.helper a {

  color:
    var(--sky);

  text-decoration:
    none;

  font-weight:
    800;
}


.error {

  min-height:
    18px;

  color:
    var(--danger);

  font-size:
    12px;

  margin-top:
    12px;

  line-height:
    1.4;
}


/*
|--------------------------------------------------------------------------
| PASSWORD
|--------------------------------------------------------------------------
*/

.password-wrap {

  position:
    relative;
}


.password-wrap .field {

  padding-right:
    48px;
}


.eye-btn {

  position:
    absolute;

  top:
    50%;

  right:
    8px;

  transform:
    translateY(-50%);

  width:
    36px;

  height:
    36px;

  border:
    0;

  border-radius:
    10px;

  background:
    transparent;

  color:
    var(--muted);

  cursor:
    pointer;
}


/*
|--------------------------------------------------------------------------
| FOOTER
|--------------------------------------------------------------------------
*/

.footer-note {

  margin-top:
    auto;

  text-align:
    center;

  color:
    var(--muted);

  opacity:
    .70;

  font-size:
    10px;

  padding-top:
    24px;
}


/*
|--------------------------------------------------------------------------
| SPLASH
|--------------------------------------------------------------------------
*/

.splash {

  position:
    fixed;

  inset:
    0;

  z-index:
    999;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:

    radial-gradient(
      circle at center,
      rgba(56, 189, 248, .12),
      transparent 20rem
    ),

    var(--splash-bg);

  color:
    var(--text);

  transition:
    opacity .35s ease,
    visibility .35s ease;
}


.splash.hide {

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;
}


.splash-inner {

  text-align:
    center;

  padding:
    24px;
}


.splash-logo-completo {

  width:
    min(82vw, 360px);

  height:
    auto;

  display:
    block;

  margin:
    0 auto;

  object-fit:
    contain;

  animation:
    splash-pop .7s ease both;
}


.splash-title {

  margin:
    18px 0 0;

  font-weight:
    800;

  font-size:
    31px;

  letter-spacing:
    .12em;

  color:
    var(--text);
}


.splash-subtitle {

  color:
    var(--splash-muted);

  text-transform:
    uppercase;

  font-size:
    11px;

  letter-spacing:
    .14em;

  margin-top:
    10px;

  line-height:
    1.5;
}


/*
|--------------------------------------------------------------------------
| SPLASH DOTS
|--------------------------------------------------------------------------
*/

.dots {

  display:
    flex;

  justify-content:
    center;

  gap:
    7px;

  margin-top:
    28px;
}


.dots span {

  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

  background:
    var(--sky);

  animation:
    pulse 1.1s infinite ease-in-out;
}


.dots span:nth-child(2) {

  animation-delay:
    .14s;
}


.dots span:nth-child(3) {

  animation-delay:
    .28s;
}


/*
|--------------------------------------------------------------------------
| ANIMACIONES
|--------------------------------------------------------------------------
*/

@keyframes pulse {

  0%,
  80%,
  100% {

    opacity:
      .25;

    transform:
      scale(.75);
  }


  40% {

    opacity:
      1;

    transform:
      scale(1);
  }
}


@keyframes splash-pop {

  from {

    opacity:
      0;

    transform:
      scale(.88);
  }


  to {

    opacity:
      1;

    transform:
      scale(1);
  }
}


/*
|--------------------------------------------------------------------------
| ONBOARDING
|--------------------------------------------------------------------------
*/

.onboarding-shell {

  width:
    min(100%, 470px);

  min-height:
    100vh;

  margin:
    auto;

  padding:
    20px;
}


.onboarding-head {

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  margin-bottom:
    24px;
}


.onboarding-head img {

  width:
    50px;

  height:
    50px;

  object-fit:
    contain;
}


.onboarding-head strong {

  display:
    block;

  letter-spacing:
    .08em;

  color:
    var(--text);
}


.onboarding-head span {

  display:
    block;

  color:
    var(--muted);

  font-size:
    11px;

  margin-top:
    2px;
}


/*
|--------------------------------------------------------------------------
| PROGRESS
|--------------------------------------------------------------------------
*/

.progress-wrap {

  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    7px;

  margin:
    18px 0 24px;
}


.progress-wrap span {

  height:
    5px;

  border-radius:
    999px;

  background:
    var(--progress-off);
}


.progress-wrap span.active {

  background:
    var(--sky);
}


/*
|--------------------------------------------------------------------------
| STEP CARD
|--------------------------------------------------------------------------
*/

.step-card {

  background:
    var(--panel-alpha);

  border:
    1px solid var(--line);

  border-radius:
    26px;

  padding:
    22px;

  box-shadow:
    var(--shadow);
}


.step-card h1 {

  font-size:
    23px;

  margin:
    7px 0 8px;

  color:
    var(--text);
}


.step-card p {

  color:
    var(--muted);

  font-size:
    13px;

  line-height:
    1.55;
}


.step {

  display:
    none;
}


.step.active {

  display:
    block;
}


/*
|--------------------------------------------------------------------------
| GRID
|--------------------------------------------------------------------------
*/

.two-col {

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    10px;
}


.actions {

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    10px;

  margin-top:
    20px;
}


.actions.single {

  grid-template-columns:
    1fr;
}


/*
|--------------------------------------------------------------------------
| SUMMARY
|--------------------------------------------------------------------------
*/

.summary-box {

  padding:
    14px;

  background:
    var(--panel-2);

  border:
    1px solid var(--line);

  border-radius:
    16px;

  margin-top:
    15px;
}


.summary-box span {

  display:
    block;

  color:
    var(--muted);

  font-size:
    11px;
}


.summary-box strong {

  display:
    block;

  color:
    var(--text);

  font-size:
    15px;

  margin-top:
    3px;
}


/*
|--------------------------------------------------------------------------
| SUCCESS
|--------------------------------------------------------------------------
*/

.success-icon {

  width:
    68px;

  height:
    68px;

  border-radius:
    22px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  margin:
    8px auto 16px;

  background:
    rgba(52, 211, 153, .12);

  border:
    1px solid
    rgba(52, 211, 153, .22);

  color:
    var(--green);

  font-size:
    30px;
}


/*
|--------------------------------------------------------------------------
| RESPONSIVE
|--------------------------------------------------------------------------
*/

@media (max-width: 430px) {

  .two-col {

    grid-template-columns:
      1fr;
  }
}