/* Acceso del visitante y del panel: bloques amplios, centrados y sin desbordes. */
.account-access-step h2,
.account-access-step > p {
  white-space: normal !important;
  overflow-wrap: anywhere;
  max-width: min(100%, 48rem);
  margin-inline: auto;
}

.account-access-step h2 {
  text-wrap: balance;
  line-height: 1.08;
}

.admin-login-screen {
  /* Azul grisáceo elegido para el acceso de administración. */
  --panel-access-bg: #657F9F;
  --panel-access-deep: #26343D;
  --panel-access-soft: #EAF0F6;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: max(1.5rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
  background: var(--panel-access-bg) !important;
}

.admin-login-screen::before,
.admin-login-screen::after,
.admin-login-brand {
  display: none !important;
}

.admin-login-card {
  width: min(100%, 38rem) !important;
  padding: clamp(1.25rem, 3vw, 2.5rem) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff !important;
}

.admin-login-card h2 {
  max-width: 100%;
  margin: 0 0 .55rem !important;
  color: #fff !important;
  font-size: 0 !important;
  line-height: .98 !important;
  letter-spacing: -.045em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.admin-login-card h2::after {
  content: "Bienvenido";
  display: block;
  font-family: "Outfit", var(--font-heading), sans-serif;
  font-size: clamp(2.4rem, 5vw, 3.65rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.055em;
}

html[lang="ca"] .admin-login-card h2::after { content: "Benvingut"; }

.admin-login-intro,
.admin-login-meta {
  max-width: 42rem;
  color: #fff !important;
  font-size: clamp(1rem, 2vw, 1.2rem) !important;
  line-height: 1.45;
}

/* La primera ventana se concentra en las credenciales; el resto aparece en
   los pasos de recuperación o doble verificación cuando corresponde. */
.admin-login-card .admin-login-intro,
.admin-login-card > :is(.admin-login-meta) {
  display: none !important;
}

.admin-login-form {
  display: grid;
  gap: .65rem;
  margin-top: 1.55rem;
}

.admin-login-form label {
  color: #fff !important;
  font-size: .95rem;
  font-weight: 800;
}

.admin-login-form input {
  min-height: 3.15rem;
  padding: .65rem .9rem;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: #2c3338 !important;
  box-shadow: none !important;
  font-size: 1.08rem;
}

.admin-login-form .admin-login-submit,
.admin-login-form .admin-login-back {
  min-height: 3.05rem;
  margin: .25rem 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: var(--panel-access-deep) !important;
  box-shadow: none !important;
  font-size: 1rem;
  font-weight: 850;
}

.admin-login-form .admin-login-back {
  margin-top: .2rem !important;
  background: rgba(38, 52, 61, .20) !important;
  color: #fff !important;
  text-decoration: none;
}

.admin-login-form .admin-login-back:hover,
.admin-login-form .admin-login-back:focus-visible {
  background: rgba(38, 52, 61, .38) !important;
}

.admin-login-error {
  margin: 0;
  padding: .85rem 1rem;
  background: #FCE7E5 !important;
  color: #842C32 !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.admin-login-form input:focus {
  outline: 3px solid var(--panel-access-soft) !important;
  outline-offset: 3px;
}

@media (max-width: 560px) {
  .admin-login-card { width: min(100%, 27rem) !important; padding: 1.25rem 0 !important; }
  .admin-login-card h2::after { font-size: clamp(2.25rem, 13vw, 3.2rem); }
  .admin-login-form { margin-top: 1.35rem; }
  .admin-login-form input { min-height: 3.35rem; }
  .admin-login-form .admin-login-submit,
  .admin-login-form .admin-login-back { min-height: 3.2rem; }
}

/* El acceso de visitante conserva siempre su tratamiento editorial: texto y
   bloques de acción blancos, incluso cuando el usuario elige un fondo oscuro. */
.account-access-screen {
  --account-access-foreground: #fff !important;
}

.account-access-screen .account-access-step,
.account-access-screen .account-access-step h2,
.account-access-screen .account-access-step > p,
.account-access-screen .account-access-step label,
.account-access-screen .account-phone-icon,
.account-access-screen .account-access-close {
  color: #fff !important;
}

/* La cuadrícula cuadrada es exclusiva del móvil vertical. Al ampliar la
   ventana, se restablece expresamente la navegación de escritorio para que
   no conserve las dimensiones compactas del breakpoint anterior. */
@media (min-width: 768px) {
  .visitor-account .visitor-account-nav {
    display: flex !important;
    grid-area: auto !important;
    grid-template-columns: none !important;
    flex-direction: column !important;
    gap: .45rem !important;
    width: 100% !important;
    margin-top: clamp(2rem, 7vh, 4.8rem) !important;
  }

  .visitor-account .visitor-account-nav button {
    display: flex !important;
    aspect-ratio: auto !important;
    grid-template-rows: none !important;
    place-items: initial !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .8rem !important;
    min-width: 0 !important;
    padding: .9rem 1rem !important;
    text-align: left !important;
  }

  .visitor-account .visitor-account-nav button .visitor-nav-icon {
    align-self: auto !important;
    width: 1.1rem !important;
    font-size: 1.05rem !important;
  }

  .visitor-account .visitor-account-nav button .visitor-nav-label {
    align-self: auto !important;
    width: auto !important;
    font-size: inherit !important;
    line-height: normal !important;
  }

  .visitor-account .visitor-account-nav .danger {
    display: flex !important;
  }
}

/* Accesibilidad de las pantallas a altura completa: el panel completo debe
   desplazarse, no solo una columna. De este modo el botón final permanece
   alcanzable con ratón, trackpad, teclado y lectores de pantalla. */
.visitor-account {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.visitor-account .visitor-account-main {
  min-height: 100dvh;
  overflow: visible !important;
}

@media (min-width: 601px) {
  .visitor-account .visitor-account-sidebar {
    min-height: 100dvh;
  }
}

/* Los accesos y los diálogos pueden crecer sin perder sus acciones finales. */
.account-access-screen,
.visitor-delete-dialog-backdrop,
.media-details-backdrop {
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.visitor-delete-dialog,
.media-details-dialog {
  max-height: calc(100dvh - max(2rem, env(safe-area-inset-top) + env(safe-area-inset-bottom))) !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}