/* ============================================================================
   LINK ADVANCE — CHASIS DE ESCRITORIO
   Login partido (héroe + panel), sidebar oscuro, topbar translúcida y área de
   contenido. Depende de tokens.css y base.css.
   ============================================================================ */

/* ============================================================================
   LOGIN — dos columnas: héroe de marca a la izquierda, formulario a la derecha.
   El héroe vende; el panel resuelve. Bajo 860px el héroe se colapsa a una
   franja compacta arriba (no se oculta del todo: es lo que da identidad).
   ============================================================================ */
#login-view { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(27rem, .9fr); }

#login-hero {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(2rem, 5vw, 4rem);
  color: #fff;
  background:
    linear-gradient(145deg, rgba(12, 23, 38, .18), transparent 55%),
    var(--gradient-brand);
}
/* Anillos de luz: el mismo recurso de Academia. Decorativos, sin eventos. */
#login-hero::before, #login-hero::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
#login-hero::before {
  top: -11rem; right: -9rem; width: 31rem; height: 31rem;
  border: 5rem solid rgba(255, 255, 255, .05);
}
#login-hero::after {
  right: 10%; bottom: -8rem; width: 22rem; height: 22rem;
  background: #fff; opacity: .07;
}
#login-hero > * { position: relative; z-index: 1; }

.hero-badge {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  padding: 8px 16px; border-radius: var(--r-pill);
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  background: rgba(255, 255, 255, .15);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hero-txt { margin: auto 0; max-width: 42rem; }
.hero-txt .eyebrow {
  margin-bottom: var(--space-4);
  color: var(--blue-200); font-size: .77rem; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase;
}
.hero-txt h1 {
  max-width: 13ch; color: #fff;
  font-size: clamp(2.2rem, 5vw, 4.2rem); font-weight: 750;
  letter-spacing: -.05em; line-height: 1.02;
}
.hero-txt p { max-width: 34rem; margin-top: var(--space-5); color: var(--blue-100); font-size: clamp(1rem, 1.6vw, 1.15rem); }

/* Prueba de confianza al pie del héroe: un punto vivo y una línea. */
.hero-proof { display: flex; align-items: center; gap: 10px; color: var(--blue-100); font-size: 13px; }
.hero-proof .dot {
  width: .55rem; height: .55rem; flex: none; border-radius: 50%;
  background: #5ee0a1; box-shadow: 0 0 0 .35rem rgba(94, 224, 161, .14);
}

#login-panel { display: grid; place-items: center; padding: clamp(1.5rem, 5vw, 4rem); background: var(--surface-muted); }
#login-panel .box { width: min(100%, 29rem); }
#login-panel h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
#login-panel .sub { color: var(--text-muted); margin: 6px 0 var(--space-6); }
#login-err { min-height: 18px; margin-top: 4px; color: var(--danger); font-size: 13px; }
.form-note { margin-top: var(--space-4); color: var(--text-muted); font-size: 12px; text-align: center; }

/* Separador "o" entre contraseña y biometría. */
.login-sep {
  display: flex; align-items: center; gap: 10px;
  margin: var(--space-5) 0 var(--space-4);
  color: var(--text-muted); font-size: 12px;
}
.login-sep::before, .login-sep::after { content: ""; flex: 1; height: 1px; background: var(--border); }

@media (max-width: 860px) {
  #login-view { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  #login-hero { padding: calc(var(--space-6) + env(safe-area-inset-top)) var(--space-5) var(--space-6); }
  #login-hero::before, #login-hero::after { display: none; }
  .hero-txt h1 { font-size: 1.9rem; max-width: none; }
  .hero-txt p, .hero-proof { display: none; }
  #login-panel { background: var(--surface); align-items: start; }
}

/* ============================================================================
   MARCA (lockup reutilizable: cuadro con el ícono + nombre en dos líneas)
   ============================================================================ */
.brand-lockup { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  display: grid; place-items: center; flex: none;
  width: 3rem; height: 3rem; border-radius: var(--r-md);
  color: #fff; background: var(--gradient-brand);
  box-shadow: 0 10px 24px rgba(9, 81, 162, .25);
  font-family: var(--font-display); font-weight: 800;
}
.brand-copy { display: grid; line-height: 1.15; }
.brand-copy strong { font-family: var(--font-display); font-size: .98rem; font-weight: 800; color: var(--text-strong); }
.brand-copy span   { font-size: .78rem; font-weight: 700; color: var(--primary); }
#login-hero .brand-mark { color: var(--ink-950); background: #fff; }
#login-hero .brand-copy strong, #login-hero .brand-copy span { color: #fff; }

/* ============================================================================
   SIDEBAR — azul marino, no negro. Colapsable a íconos.
   ============================================================================ */
#app-view { display: none; min-height: 100dvh; }
#app-view.active { display: block; }

.sidebar {
  position: fixed; z-index: 40; top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  display: flex; flex-direction: column;
  color: var(--dark-text);
  background: linear-gradient(180deg, var(--dark-bg) 0%, var(--dark-bg-2) 100%);
  padding-top: env(safe-area-inset-top);
  transition: width var(--t), transform var(--t);
}
.sidebar .brand { display: flex; align-items: center; gap: 10px; height: var(--topbar-h); padding: 0 var(--space-5); }
.sidebar .brand b { font-family: var(--font-display); color: #fff; display: grid; line-height: 1.15; font-size: 15px; }
.sidebar .brand b span { font-size: 11.5px; font-weight: 600; color: var(--dark-muted); }
.side-nav { flex: 1; overflow-y: auto; padding: var(--space-2) var(--space-3) var(--space-6); }
.side-label {
  padding: var(--space-4) var(--space-3) var(--space-2);
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--dark-muted);
}
.side-item {
  display: flex; align-items: center; gap: 12px;
  min-height: var(--row-h); margin-bottom: 2px; padding: 0 var(--space-3);
  border-radius: var(--r-md);
  color: var(--dark-text); font-size: 13.5px; font-weight: 600;
  transition: background var(--t-fast), color var(--t-fast);
}
.side-item .ico { width: 19px; height: 19px; flex: none; }
.side-item:active { background: var(--dark-hover); }
@media (hover: hover) { .side-item:hover { background: var(--dark-hover); color: #fff; text-decoration: none; } }
.side-item.active { background: var(--primary); color: #fff; box-shadow: var(--shadow-brand); }

body.side-min .sidebar { width: var(--sidebar-w-min); }
body.side-min .side-item span, body.side-min .side-label, body.side-min .brand b { display: none; }
body.side-min .main { margin-left: var(--sidebar-w-min); }

/* ============================================================================
   TOPBAR — translúcida y pegajosa; se lee sobre el contenido al hacer scroll.
   ============================================================================ */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  height: calc(var(--topbar-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--space-5) 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface-chrome);
  backdrop-filter: var(--blur-chrome); -webkit-backdrop-filter: var(--blur-chrome);
}
.topbar h1 { display: flex; align-items: center; gap: 8px; font-size: 17px; }
.topbar h1 .ico { width: 20px; height: 20px; color: var(--primary); }

.main { margin-left: var(--sidebar-w); min-height: 100dvh; transition: margin var(--t); }
.page {
  max-width: var(--content-max); margin: 0 auto;
  padding: var(--space-6) var(--space-5) calc(var(--space-12) + env(safe-area-inset-bottom));
}

/* Píldora de contexto (evento / faena / curso activo) en la topbar. */
.context-pill {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface); color: var(--text-strong);
  font-size: 13px; font-weight: 600; max-width: 240px;
}
.context-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Estado de sincronización: en terreno el operador tiene que verlo sin abrir nada. */
.sync-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.sync--ok   { color: var(--success-fg); }
.sync--wait { color: var(--warning-fg); }
.sync--off  { color: var(--danger-fg); }

/* ── Móvil: el sidebar pasa a cajón deslizante ── */
@media (max-width: 899px) {
  .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
  body.side-open .sidebar { transform: none; }
  .main { margin-left: 0; }
  .topbar { padding-inline: var(--space-4); }
  .page { padding-inline: var(--space-4); }

  /* Topbar de teléfono: hamburguesa · título · UNA acción contextual.
     El selector de contexto y el estado de sync se mudan al cajón; si se dejan
     aquí, la barra desborda y aparece scroll horizontal en todo el documento. */
  .topbar .sync-status,
  .topbar .context-pill { display: none; }
  .topbar h1 { min-width: 0; }
  .topbar h1 span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (min-width: 900px) {
  .side-scrim, #btn-burger { display: none; }
}
.side-scrim {
  position: fixed; inset: 0; z-index: 39;
  background: rgba(6, 24, 46, .45);
  opacity: 0; pointer-events: none; transition: opacity var(--t);
}
body.side-open .side-scrim { opacity: 1; pointer-events: auto; }