/* Pantalla de ingreso al panel: la marca a un lado, el formulario al otro.
   En el celular la marca se achica arriba y el formulario queda a mano. */

.acceso { min-height: 100dvh; display: flex; flex-wrap: wrap; }

.acceso__marca {
  flex: 1 1 460px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  padding: 48px; background: #123D2A; color: #F2F7F4;
}
:root[data-tema="oscuro"] .acceso__marca { background: #0F2A1D; }
.acceso__marca .marca__sub { color: #B9D3C4; }
.acceso__logo { width: 42px; height: 42px; background: #F2F7F4; color: #123D2A; }

.acceso__mensaje { max-width: 460px; }
.acceso__mensaje h1 { font-size: 34px; line-height: 1.15; letter-spacing: -.02em; }
.acceso__mensaje p { margin-top: 16px; color: #B9D3C4; font-size: 16px; }
.acceso__mensaje ul { margin: 28px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.acceso__mensaje li { display: flex; gap: 10px; align-items: center; }
.acceso__pie { font-size: var(--t-aux); color: #B9D3C4; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: var(--e-4); }

.acceso__form { flex: 1 1 460px; position: relative; display: flex; align-items: center; justify-content: center; padding: 48px var(--e-6); }
.acceso__tema { position: absolute; top: var(--e-5); right: var(--e-5); }
.acceso__caja { width: 100%; max-width: 380px; gap: 18px; }
.acceso__titulo { font-size: var(--t-titulo-1); font-weight: 700; letter-spacing: -.01em; }
.acceso__comercio { text-align: center; }

#ver-clave[aria-pressed="true"] { color: var(--acento-texto); }

@media (max-width: 760px) {
  .acceso__marca { flex-basis: 100%; padding: 20px var(--e-5); gap: 0; }
  .acceso__mensaje, .acceso__pie { display: none; }
  .acceso__form { padding: 32px var(--e-5) 48px; align-items: flex-start; }
  .acceso__tema { top: -58px; right: var(--e-4); background: transparent; border-color: rgba(255, 255, 255, .2); color: #F2F7F4; }
}