/* Pantalla de entrada (login.php y sso.php): siempre oscura, aunque el resto de la web vaya en claro.
 * Con la marca de IberCall.IA, de fondo la portada del vídeo «IberCall.IA en acción» (turquesa entra,
 * naranja sale, convergen en el centro; ibercallia/video/graficos/optimizar_acceso.py). Con marca blanca,
 * un fondo oscuro neutro con un leve tinte de su color y la misma tarjeta de cristal.
 * Todo en CSS: sin estilo ni script en línea. prefers-reduced-motion apaga el movimiento. */

.acceso-pagina {
  color-scheme: dark;
  --noche: #101418;
  --papel: #101418;
  --hoja: rgb(22 27 32 / 0.62);
  --hundido: rgb(255 255 255 / 0.06);
  --tinta: #f2f5f7;
  --tinta-2: #c9d3da;
  --tinta-3: #a9b5be;
  --tinta-4: #7d8a93;
  --trazo: rgb(255 255 255 / 0.12);
  --trazo-suave: rgb(255 255 255 / 0.07);
  --trazo-fuerte: rgb(255 255 255 / 0.4);
  --peligro: #ff8a7a;
  --peligro-fondo: rgb(150 38 28 / 0.42);
  --entra-texto: #5fdcea;
  --sale-texto: #f7a95a;
  --simbolo-entra: #19c8dc;
  --simbolo-sale: #f28c1e;
  --foco: #5fdcea;
  min-height: 100dvh;
  background: var(--noche);
  color: var(--tinta);
  overflow-x: hidden;
}

/* ---- fondo ---- */
.acceso-fondo { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--noche); }
.acceso-fondo picture, .acceso-fondo img { display: block; width: 100%; height: 100%; }
.acceso-fondo img {
  object-fit: cover;
  object-position: 50% 50%;
  transform-origin: 50% 50%;
  animation: acceso-aparece 1.6s cubic-bezier(0.22, 1, 0.36, 1) both, acceso-acerca 38s ease-in-out 1.6s infinite alternate;
}
/* Velo central: el centro del gráfico ya es oscuro; se refuerza para que la tarjeta se lea siempre. */
.acceso-fondo::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 46% 58% at 50% 50%, rgb(16 20 24 / 0.6) 0%, rgb(16 20 24 / 0.3) 55%, rgb(16 20 24 / 0) 100%),
    linear-gradient(180deg, rgb(16 20 24 / 0.25) 0%, rgb(16 20 24 / 0) 30%, rgb(16 20 24 / 0) 70%, rgb(16 20 24 / 0.45) 100%);
}
/* Respiración de la luz: un halo turquesa a la izquierda y otro cobre a la derecha que laten despacio. */
.acceso-fondo::after {
  content: ""; position: absolute; inset: -10%; z-index: 2; mix-blend-mode: screen;
  background:
    radial-gradient(closest-side at 24% 50%, rgb(25 200 220 / 0.16), rgb(25 200 220 / 0) 70%),
    radial-gradient(closest-side at 76% 50%, rgb(242 140 30 / 0.14), rgb(242 140 30 / 0) 70%);
  animation: acceso-respira 9s ease-in-out infinite alternate;
}
.acceso-fondo-neutro {
  background:
    radial-gradient(ellipse 70% 60% at 50% 38%, color-mix(in oklch, var(--marca) 16%, transparent) 0%, transparent 70%),
    radial-gradient(ellipse 120% 80% at 50% 120%, rgb(255 255 255 / 0.05), transparent 60%),
    linear-gradient(180deg, #151a1f 0%, #0d1013 100%);
}
.acceso-fondo-neutro::after {
  background: radial-gradient(closest-side at 50% 45%, color-mix(in oklch, var(--marca) 12%, transparent), transparent 75%);
}
@media (max-aspect-ratio: 1/1) {
  .acceso-fondo::before {
    background:
      radial-gradient(ellipse 72% 34% at 50% 50%, rgb(16 20 24 / 0.62) 0%, rgb(16 20 24 / 0.3) 60%, rgb(16 20 24 / 0) 100%),
      linear-gradient(180deg, rgb(16 20 24 / 0.2) 0%, rgb(16 20 24 / 0) 25%, rgb(16 20 24 / 0) 75%, rgb(16 20 24 / 0.4) 100%);
  }
  .acceso-fondo::after {
    background:
      radial-gradient(closest-side at 50% 18%, rgb(25 200 220 / 0.16), rgb(25 200 220 / 0) 70%),
      radial-gradient(closest-side at 50% 84%, rgb(242 140 30 / 0.14), rgb(242 140 30 / 0) 70%);
  }
}

/* ---- composición ---- */
.acceso-pagina .acceso { position: relative; z-index: 1; min-height: 100dvh; display: grid; place-items: center; padding: 32px 16px; }
.acceso-columna { width: min(400px, 100%); display: flex; flex-direction: column; align-items: center; gap: 22px; }
.acceso-cabecera { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: #fff;
  animation: acceso-sube 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; }
.acceso-logo .logotipo { gap: 14px; }
.acceso-logo .logotipo-palabra { font-size: 2.35rem; color: #fff; }
.acceso-logo .logotipo-ia { color: var(--simbolo-sale); }
.acceso-logo .simbolo { filter: drop-shadow(0 0 14px rgb(25 200 220 / 0.25)) drop-shadow(0 0 14px rgb(242 140 30 / 0.18)); }
.acceso-logo .lateral-nombre { font-size: 1.6rem; font-weight: 700; color: #fff; }
.acceso-logo .sello { width: 40px; height: 40px; font-size: 1.2rem; }
.acceso-logo-img { height: 52px; width: auto; display: block; }
.acceso-lema { margin: 0; color: var(--tinta-2); font-size: 1.0625rem; font-weight: 600; letter-spacing: 0.01em; text-shadow: 0 1px 12px rgb(0 0 0 / 0.6); }

/* ---- tarjeta de cristal ---- */
.acceso-pagina .acceso-caja.acceso-cristal {
  position: relative; width: 100%; padding: 28px 28px 24px; border-radius: 16px;
  background: linear-gradient(180deg, rgb(30 36 42 / 0.66) 0%, rgb(16 20 24 / 0.72) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
  border: 1px solid rgb(255 255 255 / 0.1);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.08),
    0 1px 2px rgb(0 0 0 / 0.4),
    0 12px 32px -8px rgb(0 0 0 / 0.55),
    0 40px 90px -20px rgb(0 0 0 / 0.7);
  animation: acceso-sube 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}
/* Borde fino luminoso: turquesa arriba a la izquierda, cobre abajo a la derecha. */
.acceso-pagina .acceso-cristal::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgb(25 200 220 / 0.55), rgb(255 255 255 / 0.06) 38%, rgb(255 255 255 / 0.04) 62%, rgb(242 140 30 / 0.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.acceso-blanca .acceso-cristal::before {
  background: linear-gradient(135deg, color-mix(in oklch, var(--marca) 60%, white 10%), rgb(255 255 255 / 0.06) 40%, rgb(255 255 255 / 0.1));
}
.acceso-pagina .acceso-cristal h1 { color: #fff; font-size: var(--t-2xl); margin: 0 0 4px; }
.acceso-texto { color: var(--tinta-2); margin: 0 0 4px; }
.acceso-pagina .acceso form { display: grid; gap: 14px; margin-top: 20px; }
.acceso-pagina .campo label { color: var(--tinta); font-weight: 600; }
.acceso-pagina .acceso input[type=text], .acceso-pagina .acceso input[type=password] {
  min-height: 42px; color: #fff; background: rgb(8 11 14 / 0.55); border: 1px solid var(--trazo-fuerte);
  border-radius: 8px; font-size: 16px; /* 16 px: iOS no amplía al enfocar */
}
.acceso-pagina .acceso input:hover { border-color: rgb(255 255 255 / 0.55); }
.acceso-pagina .acceso input:focus {
  outline: 2px solid var(--foco); outline-offset: 1px; border-color: var(--foco); background: rgb(8 11 14 / 0.7);
  box-shadow: 0 0 0 4px rgb(25 200 220 / 0.18);
}
.acceso-blanca { --foco: color-mix(in oklch, var(--marca) 55%, white); }
.acceso-pagina :focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.acceso-pagina .aviso-error { background: var(--peligro-fondo); color: #fff; border: 1px solid rgb(255 138 122 / 0.45); margin: 16px 0 0; }

/* Botón principal: el «acción» de la marca, con un brillo arriba y una luz que pasa al pasar el ratón. */
.acceso-pagina .acceso-boton {
  position: relative; overflow: hidden; min-height: 44px; margin-top: 6px; border-radius: 8px; font-size: var(--t-l);
  background: linear-gradient(180deg, var(--marca) 0%, var(--marca) 45%, color-mix(in oklch, var(--marca) 86%, black) 100%);
  color: var(--marca-tinta);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), 0 6px 18px -6px color-mix(in oklch, var(--marca) 70%, transparent), 0 1px 2px rgb(0 0 0 / 0.4);
  transition: box-shadow 200ms, transform 100ms var(--salida), filter 200ms;
}
.acceso-pagina .acceso-boton::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / 0.18) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.acceso-pagina .acceso-boton:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), 0 10px 26px -8px color-mix(in oklch, var(--marca) 80%, transparent), 0 1px 2px rgb(0 0 0 / 0.4); }
.acceso-pagina .acceso-boton:hover::after { transform: translateX(120%); }
.acceso-pagina .acceso-boton:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }

.acceso-notas { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--trazo); }
.acceso-notas p { color: var(--tinta-3); font-size: var(--t-s); margin: 0 0 6px; }
.acceso-notas p:last-child { margin-bottom: 0; }
.acceso-pagina .acceso a { color: var(--entra-texto); }

/* ---- movimiento ---- */
@keyframes acceso-aparece { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } }
@keyframes acceso-acerca { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes acceso-respira { from { opacity: 0.35; } to { opacity: 1; } }
@keyframes acceso-sube { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .acceso-fondo img, .acceso-fondo::after, .acceso-cabecera, .acceso-pagina .acceso-caja.acceso-cristal { animation: none; }
  .acceso-pagina .acceso-boton::after { transition: none; }
}

/* Sin desenfoque (navegadores viejos): la tarjeta, más opaca. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .acceso-pagina .acceso-caja.acceso-cristal { background: rgb(18 22 27 / 0.94); }
}

@media (max-width: 480px) {
  .acceso-pagina .acceso { padding: 24px 16px; align-items: center; }
  .acceso-logo .logotipo-palabra { font-size: 2rem; }
  .acceso-pagina .acceso-caja.acceso-cristal { padding: 22px 20px 20px; }
}

@media (forced-colors: active) {
  .acceso-fondo { display: none; }
  .acceso-pagina .acceso-cristal::before { display: none; }
}