/* ============================================================================
   Agenia — pantalla de acceso

   Solo la disposicion de esta pantalla. Los campos, el boton y la caja de aviso
   son los del sistema (assets/css/componentes.css) y no se redefinen aqui.
   ========================================================================== */

.acceso {
  min-height: 100vh;
  min-height: 100dvh;          /* evita el salto por la barra del navegador movil */
  display: grid;
  grid-template-columns: 1fr;  /* movil primero: una sola columna */
  background: var(--color-superficie);
}

.acceso__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--esp-6) var(--esp-4);
}

.acceso__caja {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.acceso__marca {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  margin-bottom: var(--esp-6);
}

.acceso__logo {
  width: 46px; height: 46px;
  flex-shrink: 0;
  border-radius: var(--radio-md);
  /* El isotipo trae su propio fondo claro: el borde lo separa del blanco de la
     tarjeta sin que parezca un recorte. */
  border: 1px solid var(--color-borde);
  object-fit: cover;
}

.acceso__nombre { font-size: var(--texto-xl); font-weight: 600; margin: 0; letter-spacing: -.03em; }
.acceso__bajada { font-size: var(--texto-sm); color: var(--color-texto-suave); margin: 0; }

.acceso__titulo { font-size: var(--texto-2xl); margin: 0 0 var(--esp-1); }
.acceso__subtitulo { color: var(--color-texto-suave); margin: 0 0 var(--esp-5); font-size: var(--texto-sm); }

/* El boton de ingresar ocupa el ancho de la caja: es la unica accion de la
   pantalla y no compite con nada. */
.acceso__enviar { width: 100%; margin-top: var(--esp-2); }

.acceso__pie {
  margin-top: var(--esp-6);
  padding-top: var(--esp-4);
  border-top: 1px solid var(--color-borde-suave);
  font-size: var(--texto-xs);
  color: var(--color-texto-tenue);
  text-align: center;
}

/* --- Panel de portada: solo desde escritorio ----------------------------- */
.acceso__vitrina { display: none; }

@media (min-width: 900px) {
  .acceso { grid-template-columns: minmax(440px, 46%) 1fr; }

  .acceso__panel { padding: var(--esp-8); }

  .acceso__vitrina {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--esp-6);
    padding: var(--esp-8);
    /* Tinte claro emparentado con el fondo propio de la portada, para que la
       imagen no se lea como un recorte pegado sobre otro color. Se mantiene
       claro tambien en tema oscuro: la obra esta disenada sobre claro. */
    background: linear-gradient(160deg, var(--color-vitrina-1) 0%, var(--color-vitrina-2) 100%);
  }

  /* La portada va como tarjeta con sombra y no a sangre: la obra es 1.83:1 y el
     panel es mas alto que ancho, asi que un object-fit:cover recortaria mas de
     la mitad del logotipo. Como tarjeta se ve entera y se lee intencional. */
  .acceso__portada {
    width: 100%;
    max-width: 560px;
    aspect-ratio: 1600 / 873;
    object-fit: contain;
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra-lg);
  }

  .acceso__lema { max-width: 46ch; text-align: center; }
  .acceso__lema h2 {
    font-size: var(--texto-2xl);
    margin: 0 0 var(--esp-2);
    color: var(--color-vitrina-titulo);
  }
  .acceso__lema p { margin: 0; color: var(--color-vitrina-texto); font-size: var(--texto-sm); }
}