/* ============================================================
   parador.cloud — Login / splash
   Tarjeta flotante: primero el logo en un anillo de carretera
   (como el del logo) mientras carga; luego se despliega el acceso.
   ============================================================ */
:root {
  --noche: #140e0b;
  --carbon: #231a15;
  --crema: #faf4ea;
  --papel: #fffdf9;
  --brasa: #c9581a;
  --brasa-2: #e07a2e;
  --amarillo: #f5c400;
  --tinta: #2b2420;
  --muted: #8a7b6e;
  --linea: #e6d9c6;
  --error: #a3361b;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--tinta);
  background: var(--noche);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Fondo: noche de fogón en Cerro Gordo ---------- */
.fondo {
  position: fixed; inset: 0; overflow: hidden;
  background:
    radial-gradient(120% 70% at 50% 115%, #9a4214 0%, #552511 34%, transparent 64%),
    linear-gradient(180deg, #1d1419 0%, #2a1a1a 38%, #3a2016 70%, #46241a 100%);
}
/* Auroras de brasa: manchas de color grandes, desenfocadas, que se mueven lento */
.aurora { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; mix-blend-mode: screen; will-change: transform; }
.a1 { width: 52vmax; height: 40vmax; left: -12vmax; top: -14vmax; background: radial-gradient(circle, #a8381a, transparent 68%); animation: deriva1 24s ease-in-out infinite alternate; }
.a2 { width: 46vmax; height: 36vmax; right: -14vmax; top: -6vmax; background: radial-gradient(circle, #cf7426, transparent 66%); opacity: .45; animation: deriva2 28s ease-in-out infinite alternate; }
.a3 { width: 60vmax; height: 34vmax; left: 30vmax; bottom: -4vmax; background: radial-gradient(circle, #ff8a2a, transparent 64%); opacity: .5; animation: fogon 5s ease-in-out infinite alternate; }
.a4 { width: 34vmax; height: 30vmax; left: 30vmax; top: 6vmax; background: radial-gradient(circle, #74304f, transparent 66%); opacity: .4; animation: deriva3 32s ease-in-out infinite alternate; }
@keyframes deriva1 { to { transform: translate(12vmax, 8vmax) scale(1.15); } }
@keyframes deriva2 { to { transform: translate(-10vmax, 10vmax) scale(.9); } }
@keyframes deriva3 { to { transform: translate(-14vmax, 4vmax) scale(1.2); } }
@keyframes fogon { 0% { transform: scale(1); opacity: .42; } 40% { opacity: .58; } 100% { transform: scale(1.08) translateY(-1.5vmax); opacity: .5; } }

#chispas { position: absolute; inset: 0; width: 100%; height: 100%; }
.vineta { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 45%, transparent 60%, rgba(0, 0, 0, .35) 100%); pointer-events: none; }
.fondo::after {   /* grano sutil */
  content: ""; position: absolute; inset: 0; opacity: .07; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Escena ---------- */
.escena { position: relative; height: 100%; display: grid; place-items: center; padding: 24px; }
.columna { display: flex; flex-direction: column; align-items: center; gap: 18px; width: min(392px, 100%); }

.tarjeta {
  position: relative; width: 100%;
  background: linear-gradient(180deg, var(--papel), var(--crema));
  border-radius: 28px;
  padding: 26px 30px 28px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .7) inset,
    0 30px 80px -20px rgba(0, 0, 0, .65),
    0 0 0 1px rgba(255, 255, 255, .06);
  animation: aparece .7s cubic-bezier(.2, .9, .25, 1.15) both;
}
@keyframes aparece { from { opacity: 0; transform: translateY(18px) scale(.94); } }
.tarjeta.error { animation: sacude .45s ease; }
@keyframes sacude { 20%, 60% { transform: translateX(-9px); } 40%, 80% { transform: translateX(9px); } }

/* ---------- Logo con anillo de carretera ---------- */
.emblema { position: relative; width: 210px; height: 210px; margin: 0 auto; transition: width .6s ease, height .6s ease, margin .6s ease; }
.emblema img { position: absolute; inset: 24px; width: calc(100% - 48px); height: calc(100% - 48px); object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(35, 26, 21, .25)); transition: inset .6s ease, width .6s ease, height .6s ease; }
.anillo { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); transition: opacity .5s ease, transform .6s ease; }
.anillo .asfalto { fill: none; stroke: #191210; stroke-width: 16; }
.anillo .orilla { fill: none; stroke: #fff; stroke-width: 1.4; }
.anillo .centro { fill: none; stroke: var(--amarillo); stroke-width: 2.4; stroke-dasharray: 7 7; animation: avanza-chico .55s linear infinite; }
@keyframes avanza-chico { to { stroke-dashoffset: -14; } }
.anillo .progreso { fill: none; stroke: var(--brasa-2); stroke-width: 16; stroke-linecap: round; opacity: .18;
  stroke-dasharray: 600; stroke-dashoffset: 600; animation: llena 1.7s ease-in-out forwards; }
@keyframes llena { to { stroke-dashoffset: 0; } }

.cargando { text-align: center; margin-top: 14px; height: 22px; font-size: 14px; color: var(--muted); font-weight: 600; letter-spacing: .2px; }
.cargando span { display: inline-block; animation: frase .45s ease both; }
@keyframes frase { from { opacity: 0; transform: translateY(6px); } }

/* Estado: listo → el anillo se va, el logo se acomoda arriba, se abre el formulario */
.tarjeta.listo .emblema { width: 150px; height: 150px; margin-top: -8px; }
.tarjeta.listo .emblema img { inset: 0; width: 100%; height: 100%; }
.tarjeta.listo .anillo { opacity: 0; transform: rotate(-90deg) scale(1.25); }
.tarjeta.listo .cargando { display: none; }

.acceso { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s cubic-bezier(.2, .8, .2, 1); }
.acceso > div { overflow: hidden; padding: 0 5px 5px; margin: 0 -5px -5px; }
.tarjeta.listo .acceso { grid-template-rows: 1fr; }
.acceso .entra { opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease; }
.tarjeta.listo .acceso .entra { opacity: 1; transform: none; }
.tarjeta.listo .acceso .entra:nth-child(1) { transition-delay: .18s; }
.tarjeta.listo .acceso .entra:nth-child(2) { transition-delay: .26s; }
.tarjeta.listo .acceso .entra:nth-child(3) { transition-delay: .34s; }
.tarjeta.listo .acceso .entra:nth-child(4) { transition-delay: .42s; }
.tarjeta.listo .acceso .entra:nth-child(5) { transition-delay: .5s; }

/* ---------- Formulario ---------- */
form { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; }
.saludo { text-align: center; margin-bottom: 4px; }
.saludo h1 { margin: 0; font-size: 22px; letter-spacing: -.2px; }
.saludo p { margin: 3px 0 0; color: var(--muted); font-size: 14px; }

.campo { position: relative; }
.campo svg.ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #b3a28f; pointer-events: none; transition: color .15s; }
.campo input {
  width: 100%; height: 50px; padding: 0 46px 0 44px;
  font-family: inherit; font-size: 16px; font-weight: 500; color: var(--tinta);
  background: #fff; border: 1.5px solid var(--linea); border-radius: 14px;
  transition: border-color .15s, box-shadow .15s;
}
.campo input::placeholder { color: #b3a594; }
.campo input:focus { outline: none; border-color: var(--brasa); box-shadow: 0 0 0 4px rgba(201, 88, 26, .14); }
.campo:focus-within svg.ico { color: var(--brasa); }
.ver { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px;
  border: 0; background: transparent; border-radius: 9px; color: #a8957f; cursor: pointer; display: grid; place-items: center; }
.ver:hover { background: #f4ece0; color: var(--tinta); }
.mayus { font-size: 12px; color: #8a6206; background: #fdf1d4; border-radius: 8px; padding: 5px 10px; margin-top: -4px; }
.alerta-login { background: #f8e1d8; color: var(--error); font-weight: 600; font-size: 14px; padding: 10px 12px; border-radius: 12px; text-align: center; }

.entrar {
  position: relative; overflow: hidden;
  height: 52px; margin-top: 4px; border: 0; border-radius: 14px; cursor: pointer;
  font-family: inherit; font-size: 16px; font-weight: 700; color: #fff; letter-spacing: .3px;
  background: linear-gradient(180deg, var(--brasa-2), var(--brasa));
  box-shadow: 0 10px 22px -10px rgba(201, 88, 26, .9), 0 1px 0 rgba(255, 255, 255, .25) inset;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: transform .1s, filter .15s;
}
.entrar:hover { filter: brightness(1.05); }
.entrar:active { transform: translateY(1px); }
.entrar .flecha { transition: transform .2s; }
.entrar:hover .flecha { transform: translateX(3px); }
.entrar .ruta { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #191210; opacity: 0; transition: opacity .2s; }
.entrar .ruta::after { content: ""; position: absolute; inset: 1.5px 0; background: repeating-linear-gradient(90deg, var(--amarillo) 0 10px, transparent 10px 20px); animation: ruta .4s linear infinite; }
@keyframes ruta { to { background-position: 20px 0; } }
.entrar.enviando { pointer-events: none; }
.entrar.enviando .ruta { opacity: 1; }
.entrar.enviando .flecha { display: none; }

/* ---------- Pie ---------- */
.pie { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; white-space: nowrap; color: rgba(250, 244, 234, .55); font-size: 12.5px; animation: aparece .8s .3s both; }
.pie b { color: rgba(250, 244, 234, .8); font-weight: 600; }
.instalar {
  display: none; align-items: center; gap: 8px;
  padding: 7px 13px; border-radius: 99px; cursor: pointer;
  border: 1px solid rgba(250, 244, 234, .25); background: rgba(250, 244, 234, .06);
  color: var(--crema); font-family: inherit; font-size: 12.5px; font-weight: 600;
}
.instalar:hover { background: rgba(250, 244, 234, .14); }
.instalar.visible { display: inline-flex; }

@media (max-height: 640px) {
  .emblema { width: 170px; height: 170px; }
  .tarjeta.listo .emblema { width: 110px; height: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}