/* ============================================================
   ios-login.css — Rediseño iOS-like de la pantalla de login
   Sobrescribe clases Sneat solo dentro de .authentication-wrapper
   (y el fondo de página). Requiere ios-tokens.css cargado antes.
   Sin cambios de estructura HTML: nada se mueve de lugar.
   ============================================================ */

/* Fondo de página (la clase fondobody no existía en ningún CSS) */
body.fondobody {
  font-family: var(--ios-font);
  background: var(--ios-bg-grouped);
}

/* Tarjeta: sombra difusa en lugar de borde duro */
.authentication-wrapper .card {
  background: var(--ios-bg-card);
  border: none;
  border-radius: var(--ios-radius-card);
  box-shadow: var(--ios-shadow-card);
}

.authentication-wrapper .card-body {
  padding: 2.125rem 1.625rem 1.75rem;
}

/* Logo: squircle iOS en lugar de img-thumbnail con borde */
.authentication-wrapper .app-brand {
  margin-bottom: 1.125rem;
}

.authentication-wrapper .img-thumbnail {
  width: 68px;
  height: 68px;
  object-fit: cover;
  padding: 0;
  border: none;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.2);
}

/* Título: jerarquía Large Title */
.authentication-wrapper h4 {
  font-family: var(--ios-font);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ios-label);
}

/* Labels: secundario iOS */
.authentication-wrapper .form-label {
  font-family: var(--ios-font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--ios-label-2);
  margin-left: 4px;
}

/* Campos: fill iOS en lugar de borde gris */
.authentication-wrapper .form-control {
  font-family: var(--ios-font);
  font-size: 16px;
  color: var(--ios-label);
  background: var(--ios-fill-field);
  border: 1px solid transparent;
  border-radius: var(--ios-radius-control);
  padding: 0.8125rem 1rem;
  transition: border-color var(--ios-duration) var(--ios-ease),
    background var(--ios-duration) var(--ios-ease),
    box-shadow var(--ios-duration) var(--ios-ease);
}

.authentication-wrapper .form-control::placeholder {
  color: var(--ios-label-3);
}

.authentication-wrapper .form-control:focus {
  background: var(--ios-bg-card);
  border-color: var(--ios-blue);
  box-shadow: 0 0 0 3.5px rgba(0, 122, 255, 0.22);
}

/* Grupo de clave: el grupo lleva el fill y el radio; input y ojo, transparentes */
.authentication-wrapper .input-group-merge {
  background: var(--ios-fill-field);
  border: 1px solid transparent;
  border-radius: var(--ios-radius-control);
  transition: border-color var(--ios-duration) var(--ios-ease),
    background var(--ios-duration) var(--ios-ease),
    box-shadow var(--ios-duration) var(--ios-ease);
}

.authentication-wrapper .input-group-merge .form-control {
  background: transparent;
  border: none;
  box-shadow: none;
}

.authentication-wrapper .input-group-merge .input-group-text {
  background: transparent;
  border: none;
  color: var(--ios-label-2);
}

.authentication-wrapper .input-group-merge:focus-within {
  background: var(--ios-bg-card);
  border-color: var(--ios-blue);
  box-shadow: 0 0 0 3.5px rgba(0, 122, 255, 0.22);
}

/* Botón: azul sistema, prominente */
.authentication-wrapper .btn-primary {
  font-family: var(--ios-font);
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  background: var(--ios-blue);
  border: none;
  border-radius: var(--ios-radius-control);
  padding: 0.875rem 0;
  transition: transform var(--ios-duration-fast) var(--ios-ease),
    background var(--ios-duration-fast) var(--ios-ease);
}

.authentication-wrapper .btn-primary:hover,
.authentication-wrapper .btn-primary:focus {
  background: var(--ios-blue-press);
}

.authentication-wrapper .btn-primary:active {
  background: var(--ios-blue-press);
  transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
  .authentication-wrapper .form-control,
  .authentication-wrapper .input-group-merge,
  .authentication-wrapper .btn-primary {
    transition: none;
  }
}