/* Solo variables de marca.css, ningún color literal (docs/estilo.md). */
.tarjeta {
  width: 100%; max-width: 23rem; margin: 4rem auto;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 4px;
  padding: 2rem 1.75rem;
  /* Las etiquetas son de bloque y ocupan el ancho entero de la tarjeta, así que
   * sin esto la franja vacía a la derecha de "Correo electrónico" muestra el
   * cursor de escritura. Los controles se lo vuelven a poner más abajo. */
  cursor: default;
}
.logo {
  display: block; width: 100%; max-width: 16rem; height: auto;
  margin: 2rem auto 0;
}
.tarjeta h1 { font-size: 1.35rem; margin: 0 0 .25rem; }
.sub { color: var(--tinta-suave); font-size: .9rem; margin: 0 0 1.75rem; }

label { display: block; font-weight: 500; font-size: .85rem; margin-bottom: .35rem; }
input[type=email], input[type=password], input[type=text] {
  width: 100%; box-sizing: border-box; padding: .6rem .7rem; margin-bottom: 1.1rem;
  cursor: text;
  border: 1px solid var(--borde); border-radius: 3px; font: inherit;
  background: var(--superficie); color: var(--tinta);
}

button {
  width: 100%; padding: .7rem; border: 0; border-radius: 3px; cursor: pointer;
  background: var(--accion); color: var(--superficie);
  font-family: var(--fuente-titulo); font-weight: 700; font-size: .9rem;
}
button:hover { background: var(--tinta); }

/* El error va en tinta con una marca naranja al costado, porque el naranja da
 * 3.5:1 sobre el fondo y el texto normal exige 4.5:1. */
.error {
  border-left: 3px solid var(--alerta); background: var(--fondo);
  padding: .6rem .75rem; margin-bottom: 1.1rem; font-size: .9rem;
}

.ver { display: flex; align-items: center; gap: .4rem; margin: -.6rem 0 1.1rem;
       font-size: .85rem; color: var(--tinta-suave); cursor: pointer; }
.ver input { width: auto; margin: 0; }

.pie { margin-top: 1.25rem; font-size: .85rem; text-align: center; }

.fondo {
  position: fixed; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  /* Con z-index -1 quedaría detrás del fondo del body, que es opaco y lo
   * taparía. Con 0 se pinta encima de ese fondo y la tarjeta sube a 1. */
  z-index: 0;
  /* Es decoración y no debe interceptar ningún clic, aunque cubra la ventana. */
  pointer-events: none;
}
/* La tarjeta se mantiene opaca para que el texto nunca quede sobre el video y
 * los contrastes medidos sigan valiendo. */
.tarjeta { position: relative; z-index: 1; box-shadow: 0 2px 24px rgb(0 0 0 / .18); }