.pagina-acceso { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; background-image: radial-gradient(ellipse at 50% 42%, #e7f1eb 0, transparent 65%); }
.cabecera-acceso { min-height: 94px; padding: 24px 4.6%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.nombre-sistema { color: var(--secundario); font-size: .875rem; }
.contenido-acceso { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 20px 38px; }
.tarjeta-acceso { width: 100%; max-width: 466px; padding: 36px 38px 0; border: 1px solid #e0e8e3; border-radius: 18px; background: white; box-shadow: 0 18px 55px -25px #164a3533, 0 2px 5px #164a3505; }
.icono-acceso { display: inline-flex; width: 47px; height: 47px; align-items: center; justify-content: center; background: var(--verde-claro); color: var(--verde); border: 1px solid #d9e9de; border-radius: 13px; margin-bottom: 20px; }
.icono-acceso .icono { width: 24px; height: 24px; }
.sobretitulo { margin: 0 0 8px; color: var(--verde); font-size: .75rem; letter-spacing: .105em; font-weight: 700; }
h1 { margin: 0; font-size: 2rem; letter-spacing: -.045em; line-height: 1.2; font-weight: 680; }
.descripcion { margin: 12px 0 27px; color: var(--secundario); font-size: .9375rem; }
.tarjeta-acceso > .mensaje { margin: 0 0 20px; }
.campo { margin-bottom: 19px; }
.campo label { display: block; margin: 0 0 8px; font-size: .875rem; font-weight: 650; }
.entrada-con-icono { display: flex; align-items: center; position: relative; }
.entrada-con-icono > .icono { position: absolute; left: 14px; color: #84928d; pointer-events: none; }
.entrada-con-icono input { min-width: 0; width: 100%; height: 50px; padding: 12px 14px 12px 45px; border: 1px solid #ccd8d1; border-radius: 8px; outline: none; color: var(--tinta); background: #fff; }
.entrada-con-icono input::placeholder { color: #75827d; font-size: .875rem; }
.entrada-con-icono input:focus { border-color: var(--verde); box-shadow: 0 0 0 3px #09654c15; }
.entrada-con-icono input[aria-invalid="true"] { border-color: var(--rojo); }
.entrada-contrasena input { padding-right: 52px; }
.boton-ojo { position: absolute; right: 3px; width: 44px; height: 44px; display: grid; place-items: center; background: transparent; color: #687a73; border: 0; border-radius: 6px; }
.boton-ojo:hover { color: var(--verde); background: var(--verde-claro); }
.error-campo { margin: 6px 0 0; font-size: .875rem; color: var(--rojo); }
.fila-recuperacion { display: flex; justify-content: flex-end; margin: -2px 0 24px; }
.fila-recuperacion a { font-weight: 600; font-size: .875rem; text-decoration: none; }
.fila-recuperacion a:hover { text-decoration: underline; }
.boton-ingresar { width: 100%; justify-content: space-between; padding-left: 20px; margin-bottom: 0; }
.ayuda-acceso { display: flex; justify-content: center; align-items: center; gap: 7px; color: var(--secundario); margin: 19px 0 26px; }
.ayuda-acceso .icono { width: 16px; height: 16px; }
.ayuda-acceso p { margin: 0; font-size: .8125rem; }
.nota-acceso { margin: 23px 0 0; color: var(--secundario); font-size: .875rem; text-align: center; }
.pie-acceso { padding: 19px 4.6%; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; border-top: 1px solid #e2e9e4; color: var(--secundario); font-size: .75rem; }
.pie-acceso > span:first-child { letter-spacing: .07em; font-weight: 600; }
.volver { display: inline-flex; align-items: center; gap: 8px; margin: 25px 0; text-decoration: none; font-weight: 600; font-size: .875rem; }
.volver:hover { text-decoration: underline; }
.aviso-recuperacion { font-size: .875rem; color: var(--secundario); margin: 0 0 22px; padding-left: 13px; border-left: 2px solid #b4d1c0; }
.tarjeta-recuperacion { padding-bottom: 4px; }
@media (max-width: 540px) {
  .cabecera-acceso { min-height: 78px; padding: 20px; }
  .nombre-sistema { display: none; }
  .contenido-acceso { padding: 13px 16px 32px; }
  .tarjeta-acceso { padding: 28px 24px 0; border-radius: 14px; }
  h1 { font-size: 1.875rem; }
  .pie-acceso { padding: 16px 20px; }
  .tarjeta-recuperacion { padding-bottom: 4px; }
}
@media (max-width: 360px) { .tarjeta-acceso { padding-left: 19px; padding-right: 19px; } }