/* Iberik.IA Hub · páginas sin sesión (centralitia_views/hub_acceso_marco.php): entrar, recuperar la contraseña, elegir una
 * nueva, aceptar una invitación, el pase que falla y «tu empresa aún no está». A juego con la entrada de IberCall.IA
 * (ibercallia/web/public/assets/acceso.css): siempre oscura, fondo de haces turquesa a la izquierda y cobre a la derecha
 * (variante propia del hub, hub/public/assets/graficos/acceso-hub-*), logo y lema encima y tarjeta de cristal oscuro con el
 * borde fino luminoso. Autónoma: no carga casa.css ni centralitia.css, y da estilo a las clases c-* que usan las vistas
 * hermanas. Sin estilo ni script en línea. prefers-reduced-motion apaga el movimiento. Contraste AA sobre la tarjeta. */

.hub-acceso {
  color-scheme: dark;
  --noche: #101418;
  --tinta: #f2f5f7;
  --tinta-2: #c9d3da;
  --tinta-3: #a9b5be;
  --trazo: rgb(255 255 255 / 0.12);
  --trazo-fuerte: rgb(255 255 255 / 0.4);
  --peligro-fondo: rgb(150 38 28 / 0.42);
  --exito-fondo: rgb(28 120 80 / 0.38);
  --turquesa: #19c8dc;
  --turquesa-texto: #5fdcea;
  --cobre: #f28c1e;
  --cobre-texto: #f7a95a;
  --foco: #5fdcea;
  --letra: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  margin: 0;
  min-height: 100dvh;
  background: var(--noche);
  color: var(--tinta);
  font-family: var(--letra);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.hub-acceso *, .hub-acceso *::before, .hub-acceso *::after { box-sizing: border-box; }

/* ---- fondo ---- */
.hub-acceso-fondo { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--noche); }
.hub-acceso-fondo picture, .hub-acceso-fondo img { display: block; width: 100%; height: 100%; }
.hub-acceso-fondo img {
  object-fit: cover; object-position: 50% 50%; transform-origin: 50% 50%;
  animation: hub-acceso-aparece 1.6s cubic-bezier(0.22, 1, 0.36, 1) both, hub-acceso-acerca 38s ease-in-out 1.6s infinite alternate;
}
/* Velo central: la tarjeta se lee siempre, sea cual sea el fondo. */
.hub-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.62) 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%);
}
/* La luz respira: un halo turquesa a la izquierda y otro cobre a la derecha que laten despacio. */
.hub-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: hub-acceso-respira 9s ease-in-out infinite alternate;
}
@media (max-aspect-ratio: 1/1) {
  .hub-acceso-fondo::before {
    background:
      radial-gradient(ellipse 72% 34% at 50% 50%, rgb(16 20 24 / 0.64) 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%);
  }
  .hub-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 ---- */
.hub-acceso-pagina { position: relative; z-index: 1; min-height: 100dvh; display: grid; place-items: center; padding: 32px 16px; }
.hub-acceso-columna { width: min(420px, 100%); display: flex; flex-direction: column; align-items: center; gap: 22px; }
.hub-acceso-cabecera { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  animation: hub-acceso-sube 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; }
.hub-acceso-logo { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0; color: #fff; }
.hub-acceso-simbolo { width: 52px; height: 52px; flex: none; overflow: visible;
  filter: drop-shadow(0 0 14px rgb(25 200 220 / 0.28)) drop-shadow(0 0 14px rgb(242 140 30 / 0.2)); }
/* El símbolo del hub, partido: la mitad izquierda turquesa (centralita) y la derecha cobre (call center). */
.hub-acceso-simbolo > g > g > path:first-child { stroke: var(--turquesa); }
.hub-acceso-simbolo > g > g > path:last-child { stroke: var(--cobre); }
.hub-acceso-simbolo > g > circle:nth-of-type(1), .hub-acceso-simbolo > g > path:nth-of-type(odd) { fill: var(--turquesa); }
.hub-acceso-simbolo > g > circle:nth-of-type(2), .hub-acceso-simbolo > g > path:nth-of-type(even) { fill: var(--cobre); }
.hub-acceso-nombre { font-size: 2.35rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: #fff; }
.hub-acceso-ia { color: var(--cobre); }
.hub-acceso-lema { margin: 0; color: var(--tinta-2); font-size: 1.0625rem; font-weight: 600; letter-spacing: 0.01em; text-wrap: balance;
  text-shadow: 0 1px 12px rgb(0 0 0 / 0.6); }

/* ---- tarjeta de cristal ---- */
.hub-acceso-tarjeta {
  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.74) 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: hub-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. */
.hub-acceso-tarjeta::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);
}
.hub-acceso-tarjeta h1, .hub-acceso-tarjeta h2 { color: #fff; font-size: 1.5rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 6px; }
.hub-acceso-tarjeta p { margin: 0 0 14px; color: var(--tinta-2); text-wrap: pretty; }
.hub-acceso-tarjeta strong { color: #fff; font-weight: 600; }
.hub-acceso-tarjeta .c-intro, .hub-acceso-texto { color: var(--tinta-2); margin: 0 0 4px; }
.hub-acceso-tarjeta .c-ayuda { margin: 6px 0 0; color: var(--tinta-3); font-size: 0.84rem; }
.hub-acceso-tarjeta form { margin: 20px 0 0; }
.hub-acceso-tarjeta .c-campos { display: grid; grid-template-columns: 1fr; gap: 14px; }
.hub-acceso-tarjeta .c-campo { display: grid; gap: 6px; min-width: 0; }
.hub-acceso-tarjeta label { color: var(--tinta); font-weight: 600; font-size: 0.875rem; }
.hub-acceso-tarjeta input[type=text], .hub-acceso-tarjeta input[type=email], .hub-acceso-tarjeta input[type=password], .hub-acceso-tarjeta input:not([type]) {
  width: 100%; min-height: 44px; padding: 10px 12px; color: #fff; font: inherit; font-size: 16px; /* 16 px: iOS no amplía al enfocar */
  background: rgb(8 11 14 / 0.55); border: 1px solid var(--trazo-fuerte); border-radius: 8px;
  transition: border-color 150ms, background-color 150ms, box-shadow 150ms;
}
.hub-acceso-tarjeta input:hover { border-color: rgb(255 255 255 / 0.55); }
.hub-acceso-tarjeta 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); }
.hub-acceso :focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

/* Avisos, dentro de la tarjeta. */
.hub-acceso-tarjeta .c-aviso { margin: 16px 0 0; padding: 10px 12px; border-radius: 8px; color: #fff; font-size: 0.92rem; line-height: 1.45;
  background: rgb(255 255 255 / 0.06); border: 1px solid var(--trazo); }
.hub-acceso-tarjeta .c-aviso-error { background: var(--peligro-fondo); border-color: rgb(255 138 122 / 0.45); }
.hub-acceso-tarjeta .c-aviso-ok { background: var(--exito-fondo); border-color: rgb(110 220 160 / 0.45); }

/* Botón principal: el punto partido del hub (turquesa a cobre), con un brillo arriba y una luz que pasa al pasar el ratón.
 * Texto blanco: 5,4:1 en el extremo turquesa y 5,3:1 en el cobre (AA). */
.hub-acceso-tarjeta .c-boton, .hub-acceso-boton {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px; border: 0; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 1rem; font-weight: 700; color: #fff; text-decoration: none;
  background: linear-gradient(100deg, #0f7482 0%, #12707e 30%, #9a4a24 70%, #b8461f 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), 0 6px 18px -6px rgb(25 200 220 / 0.35), 0 6px 18px -6px rgb(242 140 30 / 0.3), 0 1px 2px rgb(0 0 0 / 0.4);
  transition: box-shadow 200ms, transform 100ms cubic-bezier(0.23, 1, 0.32, 1);
}
.hub-acceso-boton { width: 100%; margin-top: 20px; }
.hub-acceso-tarjeta .c-boton::after, .hub-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);
}
.hub-acceso-tarjeta .c-boton:hover, .hub-acceso-boton:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), 0 10px 26px -8px rgb(25 200 220 / 0.45), 0 10px 26px -8px rgb(242 140 30 / 0.4), 0 1px 2px rgb(0 0 0 / 0.4); }
.hub-acceso-tarjeta .c-boton:hover::after, .hub-acceso-boton:hover::after { transform: translateX(120%); }
.hub-acceso-tarjeta .c-boton:active, .hub-acceso-boton:active { transform: scale(0.98); }
.hub-acceso-tarjeta .c-boton:focus-visible, .hub-acceso-boton:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }
.hub-acceso-tarjeta .c-boton:disabled { opacity: 0.7; cursor: progress; }
.hub-acceso-tarjeta .c-boton-secundario {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; border-radius: 8px;
  color: var(--tinta); font-weight: 600; text-decoration: none; background: rgb(255 255 255 / 0.06); border: 1px solid var(--trazo-fuerte);
  transition: background-color 150ms, border-color 150ms;
}
.hub-acceso-tarjeta .c-boton-secundario:hover { background: rgb(255 255 255 / 0.1); border-color: rgb(255 255 255 / 0.55); }
.hub-acceso-tarjeta .c-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.hub-acceso-tarjeta .c-acciones > * { flex: 1 1 auto; }
.hub-acceso-tarjeta > .c-boton, .hub-acceso-tarjeta > .c-boton-secundario, .hub-acceso-tarjeta > p > .c-boton { width: 100%; margin-top: 6px; }
.hub-acceso-olvido { display: block; margin: 12px 0 0; text-align: center; font-size: 0.92rem; }
.hub-acceso-tarjeta a:not(.c-boton):not(.c-boton-secundario):not(.hub-acceso-boton) { color: var(--turquesa-texto); text-underline-offset: 3px; }
.hub-acceso-tarjeta a:not(.c-boton):not(.c-boton-secundario):not(.hub-acceso-boton):hover { color: #8be8f2; }

.hub-acceso-notas { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--trazo); }
.hub-acceso-notas p { color: var(--tinta-3); font-size: 0.875rem; margin: 0 0 6px; }
.hub-acceso-notas p:last-child { margin-bottom: 0; }
.hub-acceso-pie { margin: 0; text-align: center; font-size: 0.82rem; color: var(--tinta-3); text-shadow: 0 1px 10px rgb(0 0 0 / 0.7);
  animation: hub-acceso-sube 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both; }

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

@media (prefers-reduced-motion: reduce) {
  .hub-acceso-fondo img, .hub-acceso-fondo::after, .hub-acceso-cabecera, .hub-acceso-tarjeta, .hub-acceso-pie { animation: none; }
  .hub-acceso-tarjeta .c-boton::after, .hub-acceso-boton::after { transition: none; }
  .hub-acceso-tarjeta .c-boton, .hub-acceso-boton, .hub-acceso-tarjeta input { transition: none; }
}

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

@media (max-width: 480px) {
  .hub-acceso-pagina { padding: 24px 16px; }
  .hub-acceso-logo { gap: 12px; }
  .hub-acceso-simbolo { width: 44px; height: 44px; }
  .hub-acceso-nombre { font-size: 2rem; }
  .hub-acceso-lema { font-size: 1rem; }
  .hub-acceso-tarjeta { padding: 22px 20px 20px; }
}

@media (forced-colors: active) {
  .hub-acceso-fondo, .hub-acceso-tarjeta::before { display: none; }
  .hub-acceso-tarjeta { border: 1px solid CanvasText; }
}