/* ═══════════════════════════════════════════════════════════════════════════
   VanyCorp · el lockup de marca y la tarjeta de acceso
   ═══════════════════════════════════════════════════════════════════════════
   Necesita `tokens.css` cargado antes.

   La ESTRUCTURA es la de una tarjeta de acceso —tarjeta centrada, jerarquía
   logo → título → subtítulo → campo con ícono → botón de ancho completo → nota
   al pie, sin nada decorativo que compita con el formulario— y los COLORES, la
   TIPOGRAFÍA y el fondo, de la consola de VanySign.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── El lockup: «Producto · CONTEXTO» ─────────────────────────────────────── */
/*
   El separador lo pone el CSS, NO un espacio en el marcado. Dentro de un
   contenedor flex —y el chip del logo lo es— el nodo de texto en blanco entre
   dos elementos se descarta, y las dos palabras quedan pegadas. Fue el fallo
   «VanyMailCONSOLA» del 2026-09-09: el marcado tenía un espacio y aun así se
   veían juntas.

   Uso:  <span class="vc-lockup">VanyMail<span class="vc-lockup__ctx">Consola</span></span>

   El contexto se escribe en capital y minúsculas —«Consola», no «CONSOLA»—: las
   versalitas las pone `text-transform`. Así el texto sigue siendo legible para
   un lector de pantalla, que de lo contrario deletrea C-O-N-S-O-L-A.
*/
.vc-lockup {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--vc-font-sans);
  font-weight: var(--vc-peso-marca);
  font-size: 1.05rem;
  letter-spacing: -0.2px;
  color: var(--vc-tinta);
}

.vc-lockup__ctx {
  font-weight: var(--vc-peso-medio);
  font-size: var(--vc-t-marca);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vc-laton-texto);   /* texto: el latón a secas no llega a 4,5:1 */
}

.vc-lockup__ctx::before {
  content: '\00b7';
  margin: 0 var(--vc-e-2);
  opacity: 0.55;
  letter-spacing: 0;
  font-weight: var(--vc-peso-normal);
  text-transform: none;
}

/* El chip: el lockup sobre una pastilla clara, para la cabecera del acceso. */
.vc-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--vc-e-3) var(--vc-e-5);
  border-radius: var(--vc-radio-lg);
  background: var(--vc-superficie);
  border: 1px solid var(--vc-borde);
  box-shadow: var(--vc-sombra-elevada);
}

/* ── La página de acceso ──────────────────────────────────────────────────── */
.vc-acceso {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--vc-e-5);
  margin: 0;
  background: var(--vc-fondo-acceso);
  background-attachment: fixed;
  color: var(--vc-tinta);
  font-family: var(--vc-font-sans);
  font-size: var(--vc-t-cuerpo);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

/* El ancho cuenta relleno y borde (`border-box`): con `width: 100%` y la caja de
   contenido, en un teléfono de 360 px la tarjeta medía 100 % + 66 px y se salía
   9 px por cada lado (sprint 14, M10). El tope lleva sumados ese relleno y ese
   borde para que en el escritorio mida lo mismo que antes. */
.vc-tarjeta {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(26rem + 2 * var(--vc-e-6) + 2px);
  background: var(--vc-superficie);
  border: 1px solid var(--vc-borde);
  border-radius: var(--vc-radio-tarjeta);
  box-shadow: var(--vc-sombra-tarjeta);
  padding: var(--vc-e-6);
  display: flex;
  flex-direction: column;
  gap: var(--vc-e-4);
}

.vc-tarjeta__marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--vc-e-3);
  text-align: center;
}

.vc-tarjeta h1 {
  margin: 0;
  font-size: var(--vc-t-titulo);
  font-weight: var(--vc-peso-fuerte);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.vc-tarjeta__sub {
  margin: 0;
  font-size: var(--vc-t-cuerpo);
  color: var(--vc-tinta-tenue);
  text-wrap: balance;
}

/* ── Los pasos del acceso ─────────────────────────────────────────────────── */
/*
   El estado inicial lo dice el MARCADO, no el JavaScript: la pantalla tiene que
   ser correcta antes de que corra una sola línea. Y se oculta con una clase, no
   con `style="display:none"` — la CSP de estos productos lleva `style-src` sin
   `unsafe-inline`, y ahí un atributo `style=` no se aplica. Eso fue lo que dejó
   la consola de correo enseñando los tres pasos a la vez.
*/
.vc-paso {
  display: none;
  flex-direction: column;
  gap: var(--vc-e-4);
  margin: 0;
}
.vc-paso--activo { display: flex; }

/* «No pedir el código en este equipo». */
.vc-recordar {
  display: flex;
  align-items: center;
  gap: var(--vc-e-2);
  font-size: var(--vc-t-nota);
  color: var(--vc-tinta-suave);
  cursor: pointer;
}
.vc-recordar input { accent-color: var(--vc-primario); }

/* ── Campos ───────────────────────────────────────────────────────────────── */
.vc-campo {
  display: flex;
  flex-direction: column;
  gap: var(--vc-e-1);
}

.vc-campo > label {
  font-size: var(--vc-t-nota);
  font-weight: var(--vc-peso-medio);
  color: var(--vc-tinta-suave);
}

/* El envoltorio del ícono. El ícono es decorativo y va con `aria-hidden`: lo
   que nombra el campo es su <label>, no un dibujo. */
.vc-entrada {
  position: relative;
  display: flex;
  align-items: center;
}

.vc-entrada__icono {
  position: absolute;
  left: var(--vc-e-3);
  display: inline-flex;
  color: var(--vc-tinta-tenue);
  pointer-events: none;
}

.vc-entrada input {
  width: 100%;
  box-sizing: border-box;
  padding: var(--vc-e-3) var(--vc-e-4) var(--vc-e-3) 2.5rem;
  font: inherit;
  color: var(--vc-tinta);
  background: var(--vc-superficie);
  border: 1px solid var(--vc-borde);
  border-radius: var(--vc-radio-md);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.vc-entrada input::placeholder { color: var(--vc-tinta-ejemplo); opacity: 1; }

.vc-entrada input:focus-visible {
  outline: none;
  border-color: var(--vc-primario);
  box-shadow: 0 0 0 3px var(--vc-primario-suave);
}

/* Sin ícono a la izquierda: el código y la clave llevan el suyo a la derecha. */
.vc-entrada--simple input { padding-left: var(--vc-e-4); }

/* El botón de ver/ocultar la clave. Va DENTRO del campo y es un <button> de
   verdad, con `aria-pressed`, para que se alcance con el tabulador. */
.vc-entrada__ojo {
  position: absolute;
  right: var(--vc-e-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: var(--vc-radio-sm);
  background: none;
  color: var(--vc-tinta-tenue);
  cursor: pointer;
}
.vc-entrada__ojo:hover { color: var(--vc-tinta); background: var(--vc-superficie-2); }

/* El código de un solo uso: cifras grandes y separadas, en monoespaciada. */
.vc-entrada input.vc-codigo {
  font-family: var(--vc-font-mono);
  font-size: 1.3rem;
  letter-spacing: 0.25em;
  text-align: center;
  padding-left: var(--vc-e-4);
}

/* Un campo con error. El borde NO es lo único que lo dice: el mensaje va
   debajo y con `role="alert"`, porque el color solo no es accesible. */
.vc-campo[data-error] .vc-entrada input {
  border-color: var(--vc-error);
}
.vc-campo[data-error] .vc-entrada input:focus-visible {
  box-shadow: 0 0 0 3px var(--vc-error-suave);
}

.vc-campo__error {
  font-size: var(--vc-t-nota);
  color: var(--vc-error);
}

/* ── Botones ──────────────────────────────────────────────────────────────── */
.vc-boton {
  width: 100%;
  padding: var(--vc-e-3) var(--vc-e-4);
  font: inherit;
  font-weight: var(--vc-peso-medio);
  color: var(--vc-primario-fg);
  background: var(--vc-primario);
  border: 1px solid transparent;
  border-radius: var(--vc-radio-md);
  cursor: pointer;
  transition: background 0.15s;
}
.vc-boton:hover:not(:disabled) { background: var(--vc-primario-2); }
.vc-boton:disabled { opacity: 0.55; cursor: not-allowed; }

.vc-boton--suave {
  color: var(--vc-primario);
  background: none;
  border-color: var(--vc-borde);
}
.vc-boton--suave:hover:not(:disabled) { background: var(--vc-primario-suave); }

/* Un enlace de acción dentro del formulario: reenviar, volver, recuperar. */
.vc-enlace {
  /* 24 px de alto para el dedo (WCAG 2.5.8): relleno, y el margen lo devuelve. */
  box-sizing: border-box;
  min-height: 24px;
  padding: 5px 0;
  margin-block: -5px;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--vc-t-nota);
  font-weight: var(--vc-peso-medio);
  color: var(--vc-primario);
  text-decoration: underline;
  cursor: pointer;
}
.vc-enlace:disabled { color: var(--vc-tinta-tenue); text-decoration: none; cursor: default; }

/* ── Avisos ───────────────────────────────────────────────────────────────── */
.vc-aviso {
  margin: 0;
  padding: var(--vc-e-3) var(--vc-e-4);
  border: 1px solid;
  border-radius: var(--vc-radio-md);
  font-size: var(--vc-t-nota);
}
.vc-aviso--ok    { background: var(--vc-primario-suave); border-color: var(--vc-primario); color: var(--vc-tinta); }
.vc-aviso--tibio { background: var(--vc-laton-suave);    border-color: var(--vc-laton);    color: var(--vc-tinta); }
.vc-aviso--error { background: var(--vc-error-suave);    border-color: var(--vc-error);    color: var(--vc-error); }

/* ── El pie: la nota de confianza ─────────────────────────────────────────── */
.vc-pie {
  margin: 0;
  text-align: center;
  font-size: var(--vc-t-nota);
  color: var(--vc-tinta-tenue);
}
.vc-pie a { color: inherit; text-decoration: underline; }
.vc-pie a:hover { color: var(--vc-tinta); }
.vc-pie--separado { margin-top: var(--vc-e-3); }

/* ── Estados de carga ─────────────────────────────────────────────────────── */
.vc-girando {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: vc-giro 0.7s linear infinite;
  vertical-align: -0.15em;
}
@keyframes vc-giro { to { transform: rotate(360deg); } }

/* ── Accesibilidad ────────────────────────────────────────────────────────── */
/* El foco por teclado SIEMPRE se ve. Un `outline: none` sin sustituto deja a
   quien navega con el tabulador sin saber dónde está. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--vc-primario);
  outline-offset: 2px;
}

/* Para el texto que solo tiene que oír un lector de pantalla. */
.vc-solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Móvil ────────────────────────────────────────────────────────────────── */
@media (max-width: 30rem) {
  .vc-acceso { padding: var(--vc-e-4); align-items: start; padding-top: var(--vc-e-6); }
  .vc-tarjeta { padding: var(--vc-e-5); border-radius: var(--vc-radio-lg); }
  .vc-tarjeta h1 { font-size: 1.3rem; }
}