/* ==========================================================================
   MAD.CEO · Control
   login.css — Pantalla de acceso: tentáculos al fondo, perfiles y clave.

   El acceso se muestra siempre en el Abismo. Los tentáculos ocupan la
   mitad derecha (como el banner del sitio) y el formulario queda a la
   izquierda sobre un velo que asegura el contraste.
   ========================================================================== */

.acceso-body {
  min-height: 100dvh;
  background: var(--fondo);
  overflow-x: hidden;
}

.acceso {
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background:
    radial-gradient(900px 640px at 92% 108%, rgba(58, 99, 81, 0.34), transparent 62%),
    radial-gradient(760px 520px at 62% -10%, rgba(75, 63, 114, 0.26), transparent 60%),
    var(--fondo);
}

.acceso__lienzo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
  opacity: 0;
  animation: emerger 1600ms var(--ease) 120ms forwards;
}
@keyframes emerger {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* Velo: oscurece el lado del formulario sin tapar los tentáculos */
.acceso__velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(18, 18, 18, 0.94) 0%, rgba(18, 18, 18, 0.82) 34%, rgba(18, 18, 18, 0.2) 62%, transparent 80%),
    linear-gradient(0deg, rgba(18, 18, 18, 0.7) 0%, transparent 22%);
}

/* Rejilla tenue, como en el sitio */
.acceso::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background-image:
    linear-gradient(var(--rejilla) 1px, transparent 1px),
    linear-gradient(90deg, var(--rejilla) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse at 30% 40%, #000 0%, transparent 70%);
}

/* --------------------------------------------------------------------------
   Barra superior
   -------------------------------------------------------------------------- */

.acceso__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-6) clamp(1rem, 5vw, 4.5rem);
}

.acceso__marca {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--texto);
  text-decoration: none;
}
.acceso__marca:hover { color: var(--texto); }
.acceso__logo { width: 34px; height: 34px; color: var(--cian); flex: none; }
.acceso__marca-txt { display: grid; line-height: 1.05; }
.acceso__marca-txt strong { font-family: var(--fuente-display); font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em; }
.acceso__marca-txt small {
  font-family: var(--fuente-mono);
  font-size: 0.6875rem;
  color: var(--enlace);
  letter-spacing: 0.08em;
}
.acceso__marca-txt small::before { content: '[ '; color: var(--texto-3); }
.acceso__marca-txt small::after { content: ' ]'; color: var(--texto-3); }

.acceso__volver-sitio {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 40px;
  padding: 0 0.85rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  color: var(--texto-2);
  background: rgba(18, 18, 18, 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: color var(--v-rapida) var(--ease-suave), border-color var(--v-rapida) var(--ease-suave);
}
.acceso__volver-sitio:hover { color: var(--enlace); border-color: rgba(144, 224, 239, 0.4); }

/* --------------------------------------------------------------------------
   Contenido
   -------------------------------------------------------------------------- */

.acceso__contenido {
  display: flex;
  align-items: center;
  padding: var(--e-6) clamp(1rem, 5vw, 4.5rem) var(--e-10);
}

.acceso__columna {
  width: 100%;
  max-width: 460px;
  display: grid;
  gap: var(--e-5);
}

.acceso__columna > * {
  animation: subir 900ms var(--ease) backwards;
}
.acceso__columna > *:nth-child(1) { animation-delay: 80ms; }
.acceso__columna > *:nth-child(2) { animation-delay: 160ms; }
.acceso__columna > *:nth-child(3) { animation-delay: 240ms; }
.acceso__columna > *:nth-child(4) { animation-delay: 320ms; }
.acceso__columna > *:nth-child(5) { animation-delay: 400ms; }
@keyframes subir {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.acceso__ceja {
  font-family: var(--fuente-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--enlace);
}

.acceso__titulo {
  font-family: var(--fuente-display);
  font-size: clamp(2.6rem, 6vw, 4.1rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.acceso__titulo em {
  font-style: italic;
  font-weight: 500;
  color: var(--marca-texto);
}

.acceso__bajada {
  max-width: 38ch;
  font-size: var(--t-md);
  line-height: 1.6;
  color: var(--texto-2);
  text-wrap: pretty;
  margin-top: calc(var(--e-2) * -1);
}

.acceso .avisos { display: grid; gap: var(--e-2); }

/* Marco del formulario: vidrio oscuro con borde de luz */
.acceso__marco {
  position: relative;
  padding: var(--e-5);
  border: 1px solid var(--borde);
  border-radius: var(--r-2xl);
  background: rgba(23, 26, 25, 0.62);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: var(--sombra-lg), inset 0 1px 0 rgba(242, 242, 238, 0.05);
}
@supports not (backdrop-filter: blur(4px)) {
  .acceso__marco { background: var(--superficie); }
}

.acceso__escenario {
  position: relative;
  transition: height var(--v-lenta) var(--ease);
}
/* El recorte sólo se activa cuando login.js controla el alto. */
.acceso__escenario.es-animada { overflow: hidden; }

.acceso__etapa {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: opacity var(--v-lenta) var(--ease-suave) 90ms,
              transform var(--v-lenta) var(--ease) 90ms,
              visibility 0s;
}
.acceso__etapa:not(.es-visible) {
  position: absolute;
  inset: 0 0 auto 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity var(--v-media) var(--ease-suave),
              transform var(--v-lenta) var(--ease),
              visibility 0s linear var(--v-lenta);
}

.acceso__instruccion {
  font-family: var(--fuente-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-3);
  margin-bottom: var(--e-3);
}

/* --------------------------------------------------------------------------
   Etapa 1 · perfiles
   -------------------------------------------------------------------------- */

.perfiles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.perfiles form { margin: 0; }

.perfil {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--e-4);
  padding: var(--e-3) var(--e-4) var(--e-3) var(--e-3);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  background: rgba(28, 32, 30, 0.6);
  color: var(--texto);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--v-media) var(--ease-suave),
              background var(--v-media) var(--ease-suave),
              transform var(--v-media) var(--ease),
              opacity var(--v-media) var(--ease-suave);
}
/* Haz de luz que recorre la tarjeta al pasar el cursor */
.perfil::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(144, 224, 239, 0.08) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 700ms var(--ease);
  pointer-events: none;
}
.perfil:hover {
  border-color: rgba(144, 224, 239, 0.36);
  background: rgba(34, 40, 37, 0.75);
}
.perfil:hover::after { transform: translateX(100%); }
.perfil:active { transform: scale(0.99); }
.perfil:focus-visible { outline: 2px solid var(--enfoque); outline-offset: 2px; }

.perfil__avatar {
  border-radius: var(--r-lg);
  transition: transform var(--v-media) var(--ease-rebote);
}
.perfil:hover .perfil__avatar { transform: scale(1.05) rotate(-2deg); }

.perfil__txt { display: grid; gap: 0.15rem; min-width: 0; }
.perfil__nombre { font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.015em; }
.perfil__cargo {
  font-family: var(--fuente-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.perfil__flecha {
  display: inline-flex;
  color: var(--texto-3);
  transition: transform var(--v-media) var(--ease), color var(--v-media) var(--ease-suave);
}
.perfil:hover .perfil__flecha { color: var(--enlace); transform: translateX(3px); }

/* Salida escalonada al elegir */
.perfiles.se-va .perfil {
  opacity: 0;
  transform: translateX(-12px);
  transition-delay: calc(var(--d, 0) * 40ms);
}
.perfiles.se-va .perfil.es-elegida {
  opacity: 1;
  transform: none;
  border-color: var(--borde-marca);
  background: var(--marca-tenue);
  transition-delay: 0ms;
}

/* --------------------------------------------------------------------------
   Etapa 2 · contraseña
   -------------------------------------------------------------------------- */

.clave { display: grid; gap: var(--e-4); }

.clave__quien { display: flex; align-items: center; gap: var(--e-4); }
.clave__avatar {
  border-radius: var(--r-lg);
  animation: aterrizar var(--v-lenta) var(--ease-rebote) backwards;
}
@keyframes aterrizar {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.clave__nombre { font-family: var(--fuente-display); font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; }
.clave__cargo {
  font-family: var(--fuente-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--marca-texto);
  margin-top: 0.2rem;
}

.clave__formulario { display: grid; gap: var(--e-3); }
.clave__etiqueta { font-size: var(--t-sm); font-weight: 500; color: var(--texto-2); margin-bottom: calc(var(--e-2) * -1); }

.clave__campo { position: relative; display: flex; align-items: center; }
.clave__campo input {
  width: 100%;
  min-height: 48px;
  padding: 0.8rem 2.9rem 0.8rem 2.6rem;
  background: rgba(15, 17, 16, 0.85);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-sm);
  color: var(--texto);
  font-family: var(--fuente-mono);
  font-size: var(--t-md);
  letter-spacing: 0.06em;
  transition: border-color var(--v-rapida) var(--ease-suave), box-shadow var(--v-rapida) var(--ease-suave);
}
.clave__campo input::placeholder { color: var(--texto-3); }
.clave__campo input:focus {
  outline: none;
  border-color: var(--enfoque);
  box-shadow: 0 0 0 3px var(--enfoque-tenue);
}
.clave__icono { position: absolute; left: 0.85rem; color: var(--texto-3); pointer-events: none; }
.clave__ver { position: absolute; right: 0.4rem; width: 34px; height: 34px; }
.clave__ver[aria-pressed='true'] { color: var(--enlace); }

.clave__entrar { min-height: 48px; margin-top: var(--e-1); }
.clave__entrar .ico { transition: transform var(--v-media) var(--ease); }
.clave__entrar:hover .ico { transform: translateX(3px); }

.clave__error {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--r-sm);
  background: var(--tono-rosa-f);
  color: var(--tono-rosa-t);
  font-size: var(--t-sm);
  animation: sacudir 480ms var(--ease-suave);
}
@keyframes sacudir {
  0%, 100% { transform: translateX(0); }
  18%  { transform: translateX(-7px); }
  38%  { transform: translateX(6px); }
  58%  { transform: translateX(-4px); }
  78%  { transform: translateX(3px); }
}

.clave__volver {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 40px;
  border: 0;
  background: none;
  color: var(--texto-3);
  font-size: var(--t-sm);
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: color var(--v-rapida) var(--ease-suave);
}
.clave__volver:hover { color: var(--texto); }
.clave__volver:focus-visible { outline: 2px solid var(--enfoque); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Pie
   -------------------------------------------------------------------------- */

.acceso__pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--e-2) var(--e-6);
  padding: var(--e-5) clamp(1rem, 5vw, 4.5rem) var(--e-6);
  font-size: var(--t-xs);
  color: var(--texto-3);
}
.acceso__lema { font-family: var(--fuente-display); font-size: var(--t-sm); color: var(--texto-2); }
.acceso__lema em { color: var(--marca-texto); }
.acceso__pie-meta { font-family: var(--fuente-mono); letter-spacing: 0.04em; }

/* --------------------------------------------------------------------------
   Pantallas angostas: los tentáculos suben desde abajo, detrás de todo
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .acceso__velo {
    background:
      linear-gradient(180deg, rgba(18, 18, 18, 0.35) 0%, rgba(18, 18, 18, 0.86) 26%, rgba(18, 18, 18, 0.78) 58%, rgba(18, 18, 18, 0.05) 100%);
  }
  .acceso__contenido { align-items: flex-start; padding-top: var(--e-4); }
  .acceso__columna { max-width: 520px; margin: 0 auto; }
  .acceso__volver-sitio span { display: none; }
  .acceso__volver-sitio { width: 40px; padding: 0; justify-content: center; }
}

@media (max-width: 420px) {
  .acceso__marco { padding: var(--e-4); }
  .perfil { gap: var(--e-3); }
  .perfil__nombre { font-size: var(--t-md); }
}

@media (prefers-reduced-motion: reduce) {
  .acceso__lienzo { opacity: 1; animation: none; }
  .acceso__columna > * { animation: none; }
}