/* ═══════════════════════════════════════════════
   ACCESO CLIENTE
   Boton del portal (QUATRIC Platform). Vive FUERA de la barra: es un hermano
   del <nav id="navbar"> y se coloca justo despues de el, porque la barra tiene
   `transform` y un hijo `fixed` quedaria atado a ella.
   - Arriba de la pagina: pastilla teal en el extremo derecho, sobre la barra.
   - Con scroll: la barra se vuelve cristal flotante y el boton se separa como
     una pieza de cristal propia, a la misma altura central.
   Hoja compartida por todas las paginas con barra completa.
═══════════════════════════════════════════════ */

.acceso-cliente {
  --acc-top: 14px;
  --acc-top-scrolled: 28px;
  position: fixed;
  top: var(--acc-top);
  right: 24px;
  z-index: 1001;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 20px 0 22px;
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(42, 140, 130, 0.7);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 14px rgba(0, 0, 0, 0.22);
  -webkit-tap-highlight-color: transparent;
  transition:
    top 0.42s cubic-bezier(0.25, 1, 0.5, 1),
    background-color 0.42s cubic-bezier(0.25, 1, 0.5, 1),
    border-color 0.3s ease,
    box-shadow 0.42s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 0.2s ease,
    transform 0.2s ease;
}

/* Relleno teal. Va en una capa aparte para poder desvanecerlo al pasar a
   cristal: un degradado no se anima con `transition: background`. */
.acceso-cliente::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(135deg, #20726A 0%, #155F58 100%);
  transition: opacity 0.42s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Flecha dibujada con bordes: indica que sale hacia el portal, sin recurrir al
   icono de usuario que se retiro. */
.acceso-cliente::after {
  content: '';
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  margin-left: 2px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

.acceso-cliente:hover {
  border-color: #3FB3A6;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 20px rgba(0, 0, 0, 0.32);
}

.acceso-cliente:hover::after { transform: translateX(3px) rotate(45deg); }

.acceso-cliente:active { transform: scale(0.97); }

.acceso-cliente:focus-visible {
  outline: 2px solid #3FB3A6;
  outline-offset: 3px;
}

/* Con la barra flotando: cristal, igual que ella, pero como pieza suelta. */
#navbar.scrolled + .acceso-cliente {
  top: var(--acc-top-scrolled);
  background-color: rgba(0, 30, 30, 0.65);
  -webkit-backdrop-filter: blur(10px) saturate(1.8);
  backdrop-filter: blur(10px) saturate(1.8);
  border-color: rgba(42, 140, 130, 0.55);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.28),
    0 2px 8px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

#navbar.scrolled + .acceso-cliente::before { opacity: 0; }

#navbar.scrolled + .acceso-cliente:hover {
  background-color: rgba(21, 95, 88, 0.55);
  border-color: #3FB3A6;
}

/* Escritorio: la barra no puede pisar al boton. Arriba, los enlaces dejan libre
   el espacio que el boton ocupa mas alla del borde del contenedor. Flotando, la
   barra se acorta por la derecha y deja un hueco propio para el boton. Las
   paginas cuya barra se colapsa a una gota (clase nav-gota) conservan lo suyo. */
:root { --acc-reserve: 244px; }

@media (min-width: 1025px) {
  #navbar:not(.scrolled) .nav-inner {
    padding-right: max(0px, calc(var(--acc-reserve) - max(40px, (100vw - 1200px) / 2 + 40px)));
  }
}

/* 1440 en adelante: barra completa. La barra flotante necesita unos 1016px para
   sus siete enlaces, asi que el conjunto barra + boton se centra en la pagina. */
@media (min-width: 1440px) {
  body #navbar .nav-links { gap: 28px; }
  body:not(.nav-gota) #navbar.scrolled {
    left: max(24px, calc((100vw - 1254px) / 2));
    right: 238px;
  }
}

/* De 1025 a 1439: la barra se compacta para que quepan enlaces y boton. */
@media (min-width: 1025px) and (max-width: 1439px) {
  :root { --acc-reserve: 183px; }

  .acceso-cliente {
    --acc-top: 17px;
    --acc-top-scrolled: 31px;
    right: 20px;
    height: 38px;
    padding: 0 14px;
    font-size: 0.64rem;
    letter-spacing: 0.11em;
  }

  .acceso-cliente::after { display: none; }

  body #navbar .nav-links,
  body #navbar.scrolled .nav-links { gap: 16px; }
  body #navbar .nav-links a { font-size: 0.7rem; letter-spacing: 0.07em; }
  body #navbar .nav-inner,
  body #navbar.scrolled .nav-inner { gap: 20px; }
  body:not(.nav-gota) #navbar .nav-logo img,
  body:not(.nav-gota) #navbar.scrolled .nav-logo img { height: 44px; }
  body:not(.nav-gota) #navbar.scrolled { left: 20px; right: 183px; }
}

/* Tactil y pantallas angostas: con la barra colapsada a hamburguesa el boton
   flotante satura la barra y pisa el logo, asi que se oculta. El acceso al
   portal queda en la entrada "Acceso cliente" del menu desplegable, presente
   en todas las paginas. */
@media (max-width: 1024px) {
  .acceso-cliente { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .acceso-cliente,
  .acceso-cliente::before,
  .acceso-cliente::after { transition: none; }
}