/* Portada de acceso: el panel (datos de demostración) detrás de un vidrio esmerilado y una tarjeta nítida. */
:root {
  --fondo: #F6F4F0;
  --tarjeta: rgb(255 255 255 / .92);
  --borde: rgb(255 255 255 / .7);
  --texto: #15171C;
  --texto-suave: #5A6170;
  --campo: #FFFFFF;
  --campo-borde: #CFC8BC;
  --acento: #C2372B;
  --acento-hover: #A82E23;
  --sobre-acento: #FFFFFF;
  --mal: #BF2A2A;
  --mal-fondo: #F8E1DF;
  --velo: rgb(246 244 240 / .18);
  --sombra: 0 30px 80px -24px rgb(30 25 15 / .45), 0 2px 6px rgb(30 25 15 / .06);
  --imagen: url("fondo-claro.png");
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0C0E13;
    --tarjeta: rgb(20 23 31 / .9);
    --borde: rgb(255 255 255 / .08);
    --texto: #EEF0F4;
    --texto-suave: #98A1B0;
    --campo: #1A1E28;
    --campo-borde: #343B4C;
    --acento: #FF7A6B;
    --acento-hover: #FF9487;
    --sobre-acento: #0C0E13;
    --mal: #FF7676;
    --mal-fondo: #331818;
    --velo: rgb(12 14 19 / .3);
    --sombra: 0 30px 80px -20px rgb(0 0 0 / .7), 0 0 0 1px rgb(255 255 255 / .04);
    --imagen: url("fondo-oscuro.png");
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--fondo);
  color: var(--texto);
  font-family: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  min-height: 100dvh;
  overflow: hidden;
}

/* el panel de fondo, ampliado un poco para que el desenfoque no deje bordes */
.fondo {
  position: fixed;
  inset: -40px;
  background: var(--imagen) 30% top / cover no-repeat;
  filter: blur(9px) saturate(1.2);
  transform: scale(1.03);
}
/* vidrio esmerilado: velo de color + textura de grano muy suave */
.vidrio {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(900px 500px at 50% 30%, transparent, var(--velo) 70%),
    var(--velo);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.vidrio::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.tarjeta {
  position: relative;
  width: min(400px, 100%);
  padding: 36px 32px 28px;
  border-radius: 24px;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra);
  text-align: center;
  animation: aparecer .5s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes aparecer { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .tarjeta { animation: none; } .logo { animation: none !important; } }

.logo {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  box-shadow: 0 10px 30px -10px rgb(194 55 43 / .55);
  animation: latido 2.4s ease-in-out infinite;
}
@keyframes latido {
  0%, 60%, 100% { transform: scale(1); }
  10% { transform: scale(1.06); }
  20% { transform: scale(1); }
  30% { transform: scale(1.04); }
}

h1 {
  margin: 16px 0 4px;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -.01em;
}
h1 strong { font-weight: 800; }
.lema { margin: 0 0 24px; color: var(--texto-suave); font-size: .95rem; }

form { display: grid; gap: 6px; text-align: left; }
label { font-size: .85rem; font-weight: 600; color: var(--texto-suave); margin-top: 8px; }
input {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--texto);
  background: var(--campo);
  border: 1px solid var(--campo-borde);
  border-radius: 12px;
  padding: 12px 14px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
input:focus-visible {
  border-color: var(--acento);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--acento) 22%, transparent);
}
.campo-clave { position: relative; }
.campo-clave input { padding-right: 46px; }
.ver {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: none;
  color: var(--texto-suave);
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
}
.ver:hover, .ver[aria-pressed="true"] { color: var(--acento); }
.ver:focus-visible { outline: 2px solid var(--acento); }

.entrar {
  margin-top: 18px;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  color: var(--sobre-acento);
  background: var(--acento);
  border: 0;
  border-radius: 12px;
  padding: 13px 16px;
  cursor: pointer;
  transition: background .15s, transform .05s;
}
.entrar:hover { background: var(--acento-hover); }
.entrar:active { transform: translateY(1px); }
.entrar:focus-visible { outline: 3px solid color-mix(in oklab, var(--acento) 40%, transparent); outline-offset: 2px; }
.entrar[disabled] { opacity: .7; cursor: progress; }

.aviso {
  margin: 0 0 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--mal-fondo);
  color: var(--mal);
  font-size: .9rem;
  font-weight: 600;
}
.pie { margin: 22px 0 0; font-size: .78rem; color: var(--texto-suave); }

@media (max-width: 420px) {
  .tarjeta { padding: 28px 20px 22px; border-radius: 20px; }
}