/* Sólo lo de ESTA pantalla. La paleta, los campos, los botones y las
   versalitas de los rótulos ya vienen de /estilos.css.

   ES LA ÚNICA PANTALLA SIN BARRA LATERAL, y por eso tiene armazón propio:
   mientras no haya sesión no hay a dónde navegar, así que el menú de tres
   enlaces sobra y lo que queda es la hoja partida en dos —la marca a la
   izquierda, el trámite a la derecha—. */

/* ============================== ARMAZÓN ============================== */
.acceso { display: flex; min-height: 100vh; background: var(--fondo); }

/* ============================= EL COSTADO ============================
   El mismo tinta de la barra lateral: quien entra ya está viendo el color
   del sistema al que entra. Los tres bloques van repartidos de arriba a
   abajo —marca, título, pie vacío— para que el título quede a media altura
   sin centrarlo a mano. */
.acceso .costado {
  width: 42%; min-width: 380px;
  background: var(--tinta); color: #E6EBEF;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 40px 48px;
}

/* Los logotipos van uno a cada lado de un filete vertical. Hoy sólo está la
   sigla del módulo, que es la misma de la barra lateral; el día que existan
   los archivos se cambia cada <span class="hueco"> por su <img> y el
   armazón no se toca. */
.acceso .logos { display: flex; align-items: center; gap: 20px; }
.acceso .logos .sigla {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--acento); color: #fff;
  font-family: var(--mono);
  font-size: .8125rem; font-weight: 600; letter-spacing: .04em;
}
.acceso .logos .filete { width: 1px; height: 30px; background: #33474F; display: block; }
.acceso .logos .hueco {
  height: 44px; display: flex; align-items: center;
  font-size: .625rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: #78909F;
}
.acceso .logos img { height: 44px; width: auto; object-fit: contain; }

.acceso .titulo { display: flex; flex-direction: column; gap: 20px; max-width: 420px; }
/* El filete corto de arriba es el mismo gesto que el borde superior de las
   tarjetas: dice dónde empieza el bloque sin meter otro tamaño de letra. */
.acceso .titulo .barra-corta { width: 44px; height: 2px; background: #7FA9C9; }
.acceso .titulo h1 {
  margin: 0; font-size: 1.875rem; line-height: 1.28; font-weight: 600;
  color: #fff; letter-spacing: -.005em; text-wrap: pretty;
}

/* ============================== LA FICHA ============================= */
.acceso .hoja {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
}
.acceso .ficha {
  width: 100%; max-width: 396px;
  background: #fff;
  border: 1px solid var(--linea);
  border-top: 2px solid var(--tinta);
}
.acceso .ficha > header {
  padding: 22px 32px 18px;
  border-bottom: 1px solid #E5E9ED;
}
.acceso .ficha > header h2 {
  margin: 0; font-size: .84375rem; font-weight: 700; color: var(--texto);
  letter-spacing: .06em; text-transform: uppercase;
}
.acceso .ficha .cuerpo {
  padding: 26px 32px 28px;
  display: flex; flex-direction: column; gap: 20px;
}

/* Número y contraseña en monoespaciada: el número de trabajador se teclea
   comparándolo con el del gafete, y en proporcional un 1 y un 7 se parecen
   más de lo que conviene. */
.acceso input[type="text"],
.acceso input[type="password"] {
  font-family: var(--mono); font-size: .875rem; letter-spacing: .06em;
  min-height: 38px;
}

/* El rótulo y el enlace de olvido comparten renglón, alineados por la base
   de la letra y no por la caja: si no, el enlace flota medio píxel alto. */
.acceso .renglon-rotulo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 7px;
}
.acceso .renglon-rotulo label { margin-bottom: 0; }
.acceso .renglon-rotulo a { font-size: .65625rem; }

/* El «Ver» va DENTRO del campo, pegado al borde derecho y con su propio
   filete: es una pestaña del campo, no un botón suelto al lado. El padding
   derecho del input es el que le deja el hueco. */
.acceso .con-ojo { position: relative; }
.acceso .con-ojo input { padding-right: 62px; }
.acceso .con-ojo button {
  position: absolute; right: 1px; top: 1px;
  height: 36px; display: flex; align-items: center; padding: 0 11px;
  font-size: .59375rem; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--gris-2); background: #F4F6F8;
  border: 0; border-left: 1px solid #E5E9ED;
  cursor: pointer; user-select: none;
}
.acceso .con-ojo button:hover { color: var(--texto); }

.acceso .recordar {
  display: flex; align-items: center; gap: 9px;
  cursor: pointer; user-select: none; margin-bottom: 0;
}
/* La casilla es la única etiqueta de la pantalla que se lee en minúsculas:
   es una frase y no un rótulo de campo, así que se sale de las versalitas
   que /estilos.css le pone a todo <label>. */
.acceso .recordar span {
  font-size: .75rem; color: var(--gris-2);
  font-weight: 400; letter-spacing: 0; text-transform: none;
}
.acceso .recordar input { margin: 0; width: 14px; height: 14px; }

.acceso .entrar { width: 100%; min-height: 42px; }

/* El aviso de campos vacíos ocupa sitio SIEMPRE, aunque esté callado: si
   apareciera y desapareciera, el botón daría un salto justo debajo del dedo
   que acaba de pulsarlo. */
.acceso .aviso { min-height: 1rem; margin-top: 8px; font-size: .71875rem; color: var(--mal); }

/* En pantalla angosta el costado se vuelve una banda de encabezado: partir
   la hoja en dos columnas de 190px no deja escribir en ninguna. */
@media (max-width: 768px) {
  .acceso { flex-direction: column; }
  .acceso .costado {
    width: auto; min-width: 0;
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: 20px; padding: 18px 22px;
  }
  .acceso .costado .titulo .barra-corta { display: none; }
  .acceso .costado .titulo h1 { font-size: 1rem; }
  .acceso .costado > span:last-child { display: none; }
  .acceso .hoja { padding: 24px 16px 40px; }
}