/* ============================================================
   [UI-8] Pantalla de acceso "papel recortado"
   Réplica del login de ARASYS (css/login-papel.css) adaptada al portal:
   mismos colores, escena de hojas con el isotipo y paralaje. Los textos
   del portal no cambian.
   • Claro y oscuro: sigue :root[data-tema] (tema del sistema hasta que
     el cliente elige con el botón; ver tema-inicial.js).
   • La escena y el paralaje los arma acceso-papel.js.
   • Para volver al diseño anterior: copia de vuelta los archivos de la
     carpeta Respaldo-UI7 (index.html, app.js, tema-inicial.js).
   ============================================================ */

/* ---------- Paleta (claro por defecto en el portal) ---------- */
.lgp-pantalla {
  --lgp-pagina: #e8eef6;
  --lgp-card: #ffffff;
  --lgp-borde: rgba(15, 43, 69, .08);
  --lgp-borde-campo: rgba(15, 43, 69, .16);
  --lgp-texto: #0b1e2d;
  --lgp-texto2: #4a5d74;
  --lgp-texto3: #5f6e85;
  --lgp-primario: #1673e6;
  --lgp-primario-h: #0f63cc;
  --lgp-foco: #1673e6;
  --lgp-rojo: #b4233a;
  /* hojas: de la de arriba (k1 = color de la tarjeta) a la más profunda */
  --pl-1: var(--lgp-card);
  --pl-2: #eef5fd;
  --pl-3: #d3e8fa;
  --pl-4: #9fd6f8;
  --pl-5: #4ea6f4;
  --pl-6: #0f2b45;
  --pl-sombra: rgba(15, 43, 69, .28);
  --iso-base: #f4f9ff;
  --fondo-a: rgba(30, 144, 255, .20);
  --fondo-b: rgba(117, 208, 250, .30);
  --fondo-hex: rgba(30, 144, 255, .14);
  --lgp-sombra-card: 0 40px 90px rgba(15, 43, 69, .16), 0 6px 18px rgba(15, 43, 69, .06);
  --lgp-out: cubic-bezier(.16, 1, .3, 1);
}
:root[data-tema="oscuro"] .lgp-pantalla {
  --lgp-pagina: #060a13;
  --lgp-card: #0d1424;
  --lgp-borde: rgba(234, 240, 250, .08);
  --lgp-borde-campo: rgba(234, 240, 250, .16);
  --lgp-texto: #eaf0fa;
  --lgp-texto2: #a3b1c7;
  --lgp-texto3: #8090a8;
  --lgp-primario: #2f8bff;
  --lgp-primario-h: #4a9bff;
  --lgp-foco: #38d3f5;
  --lgp-rojo: #ffb3bd;
  --pl-2: #111d33;
  --pl-3: #15284a;
  --pl-4: #1a3966;
  --pl-5: #1f5096;
  --pl-6: #0a1428;
  --pl-sombra: rgba(0, 0, 0, .55);
  --iso-base: #12213d;
  --fondo-a: rgba(47, 139, 255, .22);
  --fondo-b: rgba(56, 211, 245, .14);
  --fondo-hex: rgba(47, 139, 255, .16);
  --lgp-sombra-card: 0 40px 100px rgba(0, 0, 0, .55), 0 2px 0 rgba(255, 255, 255, .02) inset;
}

.lgp-pantalla {
  position: fixed; inset: 0; z-index: 30;
  display: flex; /* con margin:auto en la tarjeta: centrada y, si no cabe, se puede desplazar sin cortar el borde de arriba */
  padding: calc(24px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--lgp-pagina);
  color: var(--lgp-texto);
  font-family: var(--familia, "Inter", system-ui, sans-serif);
  color-scheme: light;
  transition: background-color .3s ease;
}
:root[data-tema="oscuro"] .lgp-pantalla { color-scheme: dark; }

/* ---------- Fondo detrás de la tarjeta ---------- */
.lgp-fondo { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.lgp-mancha, .lgp-hexfondo { position: absolute; will-change: transform; }
.lgp-mancha { border-radius: 50%; filter: blur(60px); }
.lgp-m1 { width: 46vmax; height: 46vmax; left: -12vmax; top: -14vmax; background: var(--fondo-a); animation: lgpDeriva1 26s ease-in-out infinite alternate; }
.lgp-m2 { width: 40vmax; height: 40vmax; right: -14vmax; bottom: -16vmax; background: var(--fondo-b); animation: lgpDeriva2 32s ease-in-out infinite alternate; }
.lgp-m3 { width: 22vmax; height: 22vmax; right: 18vw; top: -8vmax; background: var(--fondo-a); opacity: .6; animation: lgpDeriva1 38s ease-in-out -12s infinite alternate; }
.lgp-hexfondo { fill: var(--fondo-hex); filter: blur(14px); }
.lgp-h1 { width: 220px; left: 6vw; bottom: 8vh; animation: lgpGira 60s linear infinite; }
.lgp-h2 { width: 140px; right: 8vw; top: 10vh; filter: blur(22px); animation: lgpGira 80s linear -20s infinite reverse; }
@keyframes lgpDeriva1 { to { transform: translate(8vw, 6vh) scale(1.08); } }
@keyframes lgpDeriva2 { to { transform: translate(-7vw, -5vh) scale(1.12); } }
@keyframes lgpGira { from { transform: rotate(0) translateY(0); } 50% { transform: rotate(180deg) translateY(-20px); } to { transform: rotate(360deg) translateY(0); } }

/* ---------- Tarjeta ---------- */
.lgp-card {
  position: relative; isolation: isolate; margin: auto; flex: 0 0 auto; align-self: flex-start;
  width: min(1040px, 100%); min-height: min(640px, calc(100dvh - 48px));
  display: grid; grid-template-columns: minmax(340px, 440px) 1fr;
  background: var(--lgp-card);
  border: 1px solid var(--lgp-borde);
  border-radius: 28px;
  box-shadow: var(--lgp-sombra-card);
  overflow: hidden;
  transition: background-color .3s ease;
}

/* ---------- Escena de papel ---------- */
.lgp-escena { position: absolute; inset: 0 0 0 340px; z-index: 0; overflow: hidden; }
.lgp-escena svg { width: 100%; height: 100%; display: block; }
.lgp-hoja { will-change: transform; }
.lgp-hoja path { filter: drop-shadow(10px 8px 12px var(--pl-sombra)); transition: fill .3s ease; }
.lgp-k1 { fill: var(--pl-1); filter: drop-shadow(12px 10px 16px var(--pl-sombra)) !important; }
.lgp-k2 { fill: var(--pl-2); }
.lgp-k3 { fill: var(--pl-3); }
.lgp-k4 { fill: var(--pl-4); }
.lgp-k5 { fill: var(--pl-5); }
.lgp-k6 { fill: var(--pl-6); transition: fill .3s ease; }
.lgp-iso-base { fill: var(--iso-base); filter: drop-shadow(8px 10px 14px rgba(0, 0, 0, .35)); transition: fill .3s ease; }
.lgp-iso-logo { filter: drop-shadow(1.6px 2.2px 2.2px rgba(4, 16, 36, .45)); }
.lgp-iso-luz { animation: lgpBrillo 7s ease-in-out 1.2s infinite; }
@keyframes lgpBrillo { 0% { transform: skewX(-18deg) translateX(0); } 40%, 100% { transform: skewX(-18deg) translateX(320px); } }

/* ---------- Columna del formulario ---------- */
.lgp-form {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  padding: 32px 48px 18px;
}
.lgp-arriba { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lgp-marca { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.lgp-marca .logo { height: 40px; width: auto; }
.lgp-marca .lgp-lema {
  margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--lgp-texto3);
}

/* Botón de tema (el mismo del portal, con el aspecto del login de ARASYS) */
.lgp-pantalla .tema-boton {
  flex: 0 0 auto; margin: 0;
  min-height: 44px; height: auto; padding: 0 12px; border-radius: 999px;
  background: transparent; border: 1px solid var(--lgp-borde); color: var(--lgp-texto3);
  transition: border-color .15s ease, color .15s ease;
}
.lgp-pantalla .tema-boton:hover { border-color: var(--lgp-primario); color: var(--lgp-texto); }
.lgp-pantalla .tema-boton:focus-visible { outline: 2px solid var(--lgp-foco); outline-offset: 2px; }
.lgp-pantalla .tema-boton .tema-pista {
  display: block; border: 0; height: 12px;
  background: color-mix(in srgb, var(--lgp-texto) 10%, transparent);
}
.lgp-pantalla .tema-perilla { width: 18px; height: 18px; top: -3px; left: -1px; background: var(--lgp-primario); }
.lgp-pantalla .tema-boton { gap: 8px; }

/* ---------- Cuerpo: textos y campos del portal ---------- */
.lgp-cuerpo { margin: auto 0; padding: 28px 0 16px; }
.lgp-cuerpo h1 {
  margin: 0; font-family: var(--titulos, inherit);
  font-size: 34px; font-weight: 750; letter-spacing: -.025em; line-height: 1.1;
  color: var(--lgp-texto);
}
.lgp-cuerpo > p { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--lgp-texto2); max-width: 40ch; }

.lgp-puntos { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.lgp-puntos li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.4; color: var(--lgp-texto2); }
.lgp-puntos .ic { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--lgp-primario); }

.lgp-cuerpo .campo { margin: 22px 0 0; }
.lgp-cuerpo .campo label { color: var(--lgp-texto); font-size: 14px; }
.lgp-cuerpo .campo .ayuda { color: var(--lgp-texto3); }
.lgp-cuerpo .entrada {
  min-height: 54px; border-radius: 16px;
  background: color-mix(in srgb, var(--lgp-texto) 3%, var(--lgp-card));
  border: 1px solid var(--lgp-borde-campo); color: var(--lgp-texto);
  box-shadow: none;
}
.lgp-cuerpo .entrada::placeholder { color: var(--lgp-texto3); opacity: .7; }
.lgp-cuerpo .entrada:focus { border-color: var(--lgp-primario); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lgp-primario) 30%, transparent); }
.lgp-cuerpo .entrada[aria-invalid="true"] { border-color: var(--lgp-rojo); }
.lgp-cuerpo .error { color: var(--lgp-rojo); }
.lgp-cuerpo .error:empty { display: none; }

/* Botón principal: píldora como «Continuar con Google» de ARASYS */
.lgp-cuerpo .boton {
  min-height: 54px; border-radius: 999px;
  background: var(--lgp-primario); color: #fff; border: 0;
  font-size: 15.5px; font-weight: 600;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--lgp-primario) 35%, transparent);
  transition: background-color .15s ease, transform .15s var(--lgp-out), box-shadow .15s var(--lgp-out);
}
.lgp-cuerpo form .boton { margin-top: 16px; }
.lgp-cuerpo .boton:hover { background: var(--lgp-primario-h); filter: none; transform: translateY(-1px); }
.lgp-cuerpo .boton:active { transform: translateY(0); box-shadow: none; }
.lgp-cuerpo .boton:focus-visible { outline: 3px solid var(--lgp-foco); outline-offset: 3px; }
.lgp-cuerpo .boton[disabled] { transform: none; box-shadow: none; }
.lgp-cuerpo .boton.boton-secundario {
  background: transparent; color: var(--lgp-texto);
  border: 1px solid var(--lgp-borde-campo); box-shadow: none; font-size: 14.5px;
}
.lgp-cuerpo .boton.boton-secundario:hover { border-color: var(--lgp-primario); background: transparent; }
.lgp-cuerpo .fila-botones { margin-top: 10px; grid-template-columns: 1fr; gap: 10px; }
.lgp-cuerpo .fila-botones .boton { padding: 10px 12px; font-size: 14px; }

.lgp-cuerpo .nota-qr {
  margin-top: 20px; padding: 12px 14px 12px 18px; font-size: 13.5px; line-height: 1.45;
  color: var(--lgp-texto2); border: 1px solid var(--lgp-borde); border-radius: 14px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--lgp-primario) 9%, transparent), transparent 70%), var(--lgp-card);
  box-shadow: none;
}
.lgp-cuerpo .nota-qr::before { background: var(--lgp-primario); }
.lgp-cuerpo .pie { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--lgp-texto3); }
.lgp-cuerpo .pie a { color: var(--lgp-primario); }

/* ---------- Diseñado por Onara Studio ---------- */
.lgp-onara {
  display: inline-flex; align-items: center; align-self: flex-start;
  min-height: 44px; text-decoration: none; border-radius: 6px;
}
.lgp-onara:focus-visible { outline: 2px solid var(--lgp-foco); outline-offset: 2px; }
.lgp-onara img { height: 40px; width: auto; }
.lgp-onara .onara-oscuro { display: none; }
.lgp-onara .onara-claro { mix-blend-mode: multiply; }
:root[data-tema="oscuro"] .lgp-onara .onara-oscuro { display: block; }
:root[data-tema="oscuro"] .lgp-onara .onara-claro { display: none; }

/* ---------- Entrada ---------- */
.lgp-pantalla .lgp-card { animation: lgpCard .3s var(--lgp-out) both; }
.lgp-pantalla .lgp-cuerpo { animation: lgpSube .3s var(--lgp-out) .12s both; }
.lgp-pantalla.lgp-sin-entrada .lgp-card { animation: none; }
.lgp-pantalla.lgp-sin-entrada .lgp-cuerpo { animation-delay: 0s; }
@keyframes lgpCard { from { opacity: 0; transform: translateY(12px); } }
@keyframes lgpSube { from { opacity: 0; transform: translateY(8px); } }

/* Pestaña oculta */
.lgp-pantalla.lgp-pausa *, .lgp-pantalla.lgp-pausa *::before { animation-play-state: paused !important; }

/* ---------- Celular: la escena llena la tarjeta y el formulario flota encima ---------- */
@media (max-width: 760px) {
  .lgp-pantalla { padding: calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom)); }
  .lgp-card { width: 100%; margin: 0; }
  .lgp-card {
    grid-template-columns: 1fr; min-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    border-radius: 24px; padding-top: min(26vh, 220px);
  }
  .lgp-escena { inset: 0; }
  .lgp-escena svg { position: absolute; top: -4%; right: -6%; width: 160%; height: auto; aspect-ratio: 680 / 640; }
  .lgp-form {
    margin: auto 14px 14px; padding: 22px 20px 10px; border-radius: 22px;
    background: color-mix(in srgb, var(--lgp-card) 86%, transparent);
    border: 1px solid var(--lgp-borde);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
  }
  .lgp-marca .logo { height: 34px; }
  .lgp-cuerpo { padding: 24px 0 14px; }
  .lgp-cuerpo h1 { font-size: 28px; }
  .lgp-puntos { display: none; }
  .lgp-h1, .lgp-h2 { display: none; }
}
@media (max-width: 400px) {
  .lgp-form { margin-left: 8px; margin-right: 8px; padding-left: 16px; padding-right: 16px; }
  .lgp-pantalla .tema-boton .tema-pista { display: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (max-width: 760px) { .lgp-form { background: var(--lgp-card); } }
}

/* ---------- Reducir movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  .lgp-pantalla *, .lgp-pantalla *::before, .lgp-pantalla *::after { animation: none !important; transition-duration: 0s !important; }
  .lgp-hoja { transform: none !important; }
  .lgp-iso-luz { display: none; }
}