/* ══════════════════════════════════════════════════════════════════════════
   PANTALLA DE ACCESO Y BOTÓN DE PANEL
   ══════════════════════════════════════════════════════════════════════════ */

.acceso-sec {
  min-height: calc(100svh - var(--nav-h));
  display: grid;
  place-items: center;
}

.acceso-caja {
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
  padding: clamp(1.75rem, 1rem + 3vw, 3rem);
  text-align: center;
}

.acceso-panel[hidden] { display: none; }
.acceso-panel .hud { display: block; margin-bottom: var(--sp-3); }
.acceso-panel h1 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.3rem); margin-bottom: var(--sp-3); }
.acceso-panel .lead { margin-inline: auto; }
.acceso-panel form { text-align: left; }

/* El icono grande de cada estado: se entiende antes de leer nada */
.acceso-icono {
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  margin: 0 auto var(--sp-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--glass-border-hi);
  background: var(--grad-brand-soft);
}
.acceso-icono .ic { width: 28px; height: 28px; }
.acceso-icono.ok     { color: var(--ok);     border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.acceso-icono.espera { color: var(--wait);   border-color: color-mix(in srgb, var(--wait) 45%, transparent); }
.acceso-icono.admin  { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, transparent);
                       box-shadow: var(--glow-accent); }

.acceso-acciones {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.acceso-acciones .btn { width: 100%; }

.acceso-pie {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--glass-border);
  font-size: var(--t-xs);
  color: var(--fg-subtle);
}
.acceso-pie a, .acceso-pie .btn-link { color: var(--accent); }
.acceso-pie b { color: var(--fg-muted); font-weight: 500; }

/* Rueda de carga: es el primer estado, para que no parpadee el formulario
   mientras se comprueba si ya había sesión abierta */
.acceso-spinner {
  width: 34px; height: 34px;
  margin: 0 auto var(--sp-4);
  border: 2px solid var(--glass-border-hi);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: acceso-gira .8s linear infinite;
}
@keyframes acceso-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .acceso-spinner { animation-duration: 2s; }
}

/* ── Solicitudes pendientes (solo administración) ───────────────────────── */
.acceso-solicitudes {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--glass-border);
  text-align: left;
}
.acceso-solicitudes h2 {
  font-size: 1rem;
  margin-bottom: var(--sp-4);
}
.solicitud {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  background: var(--glass-bg);
}
.solicitud b { display: block; font-size: var(--t-sm); color: var(--fg-strong); }
.solicitud span { font-size: var(--t-xs); color: var(--fg-muted); }
.solicitud p { margin-top: .4rem; font-size: var(--t-xs); color: var(--fg-subtle); font-style: italic; }
.solicitud > .anillo { margin-left: auto; flex: none; }

.acceso-panel code {
  padding: .12rem .4rem;
  border-radius: var(--r-sm);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  font-family: var(--font-mono);
  font-size: .82em;
  color: var(--accent);
}

/* ══════════════════════════════════════════════════════════════════════════
   BOTÓN DE ACCESO EN LA NAVEGACIÓN
   Arriba a la derecha en todas las páginas. Cambia de texto según haya sesión
   o no, pero el texto es solo texto: quien manda es el servidor.
   ══════════════════════════════════════════════════════════════════════════ */
.btn-acceso {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem 1rem;
  border: 1px solid var(--glass-border-hi);
  border-radius: var(--r-pill);
  background: var(--glass-bg);
  color: var(--fg-strong);
  font-size: var(--t-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: border-color var(--d-fast) var(--e-out),
              background-color var(--d-fast) var(--e-out);
}
.btn-acceso:hover { border-color: var(--accent); background: var(--glass-bg-hover); }
.btn-acceso .ic { width: 16px; height: 16px; }

/* Con sesión abierta se marca con un punto vivo, para que se note de un vistazo */
.btn-acceso.con-sesion { border-color: color-mix(in srgb, var(--ok) 50%, transparent); }
.btn-acceso.con-sesion .dot { width: 6px; height: 6px; }

@media (max-width: 560px) {
  .btn-acceso .txt { display: none; }
  .btn-acceso { padding: .55rem .7rem; }
}

/* El título de cada panel es un h2 (el h1 del documento es único y va oculto
   para lectores de pantalla), pero visualmente manda igual que un h1. */
.acceso-titulo {
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.3rem);
  margin-bottom: var(--sp-3);
}