/* Acceso (entrar, crear cuenta, recuperar, verificar, acción de correos): una tarjeta oscura centrada sobre el
   mismo degradado arena + naranja de la portada. Reutiliza ui.css (botones, campos, avisos) y tokens.css. */
body.acc { background: #ebe5d9; }

.acc__fondo {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: 1.25rem 0.75rem;
  overflow: hidden;
  background:
    radial-gradient(110% 80% at 88% 112%, #ff8a3c 0%, rgba(255, 160, 96, 0.6) 30%, rgba(255, 190, 140, 0) 62%),
    radial-gradient(80% 60% at 0% 108%, #ffd3b0 0%, rgba(255, 211, 176, 0) 62%),
    linear-gradient(180deg, #ebe5d9 0%, #f2eadc 56%, #f6e3cf 100%);
}

/* La palabra gigante de la portada, apenas visible detrás de la tarjeta */
.acc__fondo::before {
  content: "COTA–CHÍA";
  position: absolute;
  left: 50%;
  bottom: -0.2em;
  transform: translateX(-50%);
  font: 800 clamp(4.5rem, 23.5vw, 27rem)/1 var(--letra-titulo);
  letter-spacing: -0.05em;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.62);
  pointer-events: none;
  user-select: none;
}

.acc__tarjeta {
  position: relative;
  display: grid;
  gap: 1.1rem;
  width: min(100%, 26rem);
  padding: clamp(1.4rem, 5vw, 2.25rem);
  border: 1px solid var(--raya-oscura);
  border-radius: var(--radio-l);
  background: var(--carbon);
  box-shadow: 0 30px 80px rgba(23, 22, 15, 0.35);
}

.acc__logo { display: inline-flex; align-items: center; justify-self: start; gap: 0.6rem; color: var(--hueso);
  font: 700 1rem/1 var(--letra-titulo); letter-spacing: -0.01em; }
.acc__logo svg { width: 2rem; height: 1rem; color: var(--naranja); }

.acc h1 { margin-top: 0.6rem; font: 800 clamp(2rem, 9vw, 2.75rem)/0.98 var(--letra-titulo); text-transform: uppercase;
  letter-spacing: -0.03em; color: var(--hueso); }
.ui .acc__linea { margin-top: -0.5rem; color: var(--gris); }
.ui .acc__linea:empty { display: none; }
.ui .acc__texto { color: var(--arena-2); overflow-wrap: anywhere; }
.acc__texto b { color: var(--hueso); font-weight: 600; }

.acc__form { display: grid; gap: 1rem; }
.acc__aviso[data-tipo="ok"] { box-shadow: none; background: var(--carbon-2); color: var(--arena); }

/* Etiqueta pequeña en mayúsculas encima de cada campo */
.ui .acc .campo label { font: 600 0.6875rem/1 var(--letra-texto); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gris); }
.ui .acc .campo input[aria-invalid] { border-color: var(--naranja); }

/* Contraseña con ojo */
.acc__clave { position: relative; }
.ui .acc__clave input { padding-right: 4.5rem; }
.acc__ojo { position: absolute; top: 0; right: 0; bottom: 0; min-width: var(--ui-toque); padding: 0 0.9rem; border: 0; background: none;
  color: var(--arena-2); font: 600 0.8125rem/1 var(--letra-texto); }
.acc__ojo:hover { color: var(--hueso); }

.acc__enlace, .acc__pie a, .acc__enlace-boton { color: var(--naranja-claro); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.acc__enlace { justify-self: start; padding-block: 0.35rem; font-size: var(--t-chico); }
.acc__enlace-boton { padding: 0.35rem 0; border: 0; background: none; font: inherit; font-weight: 600; }
.acc__pie { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; margin: 0.25rem 0 0; color: var(--gris);
  font-size: var(--t-chico); text-align: center; }
.ui .acc__tarjeta .ui-btn--texto { color: var(--naranja-claro); }

/* "o con tu correo" */
.acc__o { display: flex; align-items: center; gap: 0.75rem; margin: 1.1rem 0 0; color: var(--gris); font-size: var(--t-chico); }
.acc__o::before, .acc__o::after { content: ""; flex: 1; height: 1px; background: var(--raya-oscura); }

/* Regla de la contraseña en vivo */
.acc__reglas { display: grid; gap: 0.3rem; margin: -0.25rem 0 0; padding: 0; list-style: none; font-size: var(--t-chico); }
.acc__reglas li { display: flex; gap: 0.5rem; color: var(--gris); }
.acc__reglas li > span:first-child { width: 1rem; text-align: center; }
.acc__reglas li[data-estado="ok"] { color: var(--hueso); }
.acc__reglas li[data-estado="ok"] > span:first-child { color: var(--naranja); font-weight: 700; }
.acc__reglas li[data-estado="falta"] { color: var(--naranja-claro); }

@media (max-width: 400px) {
  .acc__fondo { padding-inline: 0.5rem; }
}