/* ── Layout global: footer pegado abajo (antes inline en application.html.erb) */
/* Footer pegado abajo: el contenido crece y empuja el footer al pie
   aunque la página sea corta (login, registro, etc.). */
body { min-height: 100dvh; display: flex; flex-direction: column; }
/* El header es fijo y sale del flujo → hueco arriba para que no lo tape. */
body > .app-content { flex: 1 0 auto; padding-top: 3rem; }

/* ── Navbar pública (antes inline en shared/_appnav) */
/* Header global: fijo + glass. Los colores salen de las variables de
   tema (home / ficha del evento) con fallback claro para el resto. */
.appnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  font: .85rem system-ui, sans-serif;
  padding: .55rem 1rem;
  display: flex; gap: 1rem; align-items: center; justify-content: space-between;
  color: var(--fg, #16161a);
  border-bottom: 1px solid var(--line, #e8e8e8);
  background: color-mix(in srgb, var(--bg, #fff) 72%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  backdrop-filter: saturate(1.6) blur(12px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .appnav { background: var(--bg, #fff); }
}
.appnav a { color: inherit; text-decoration: none; }
/* Marca en verde: usa el acento del tema (lima brillante en noche, oliva
   en claro) y cae a un verde legible sobre fondo claro donde no hay tema. */
.appnav a.appnav__brand { font-weight: 700; color: var(--accent, #7a8f00); }
.appnav__side { display: flex; gap: 1rem; align-items: center; }
.appnav__icon { display: inline-flex; align-items: center; gap: .25rem; }
.appnav__count { font-size: .8rem; font-weight: 600; }
/* Menú de cuenta: <details> nativo. */
.appnav__acct { position: relative; display: inline-flex; }
.appnav__acct > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; color: inherit; }
.appnav__acct > summary::-webkit-details-marker { display: none; }
.appnav__acct > summary:hover, .appnav__acct[open] > summary { background: color-mix(in srgb, var(--fg, #16161a) 10%, transparent); }
.appnav__acct-pop { position: absolute; right: 0; top: calc(100% + .45rem); min-width: 12rem; z-index: 50;
  background: var(--bg, #fff); border: 1px solid var(--line, #e2e2e2); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .14); padding: .3rem; }
.appnav__acct-pop a, .appnav__acct-pop button { display: block; width: 100%; text-align: left; box-sizing: border-box;
  padding: .5rem .6rem; border: 0; background: none; font: inherit; color: var(--fg, #16161a); border-radius: 6px; cursor: pointer; }
.appnav__acct-pop a:hover, .appnav__acct-pop button:hover { background: color-mix(in srgb, var(--fg, #16161a) 8%, transparent); }
.appnav__acct-sep { height: 1px; background: var(--line, #eee); margin: .3rem 0; }
/* Toggle día/noche: alterna el tema del home (lima ↔ noche) y lo deja en
   cookie. Un switch, no un botón: track + perilla que se desliza. */
.appnav__theme {
  position: relative; display: inline-block;
  width: 2.75rem; height: 1.5rem; flex: none;
  border: 1px solid var(--line, #ccc); border-radius: 999px; padding: 0;
  background: color-mix(in srgb, var(--fg, #16161a) 8%, transparent);
  color: var(--muted, #888); cursor: pointer;
}
.appnav__theme-sun, .appnav__theme-moon {
  position: absolute; top: 50%; z-index: 1;
  width: .78rem; height: .78rem; transform: translateY(-50%);
}
.appnav__theme-sun { left: .3rem; }
/* La luna (feather "moon") no queda ópticamente centrada en su viewBox
   24x24 — el tajo pesa hacia arriba/derecha — así que se corrige a mano. */
.appnav__theme-moon { right: .22rem; transform: translateY(calc(-50% - .04rem)); }
.appnav__theme-knob {
  position: absolute; top: 50%; left: .1875rem; width: 1.0625rem; height: 1.0625rem;
  border-radius: 50%; background: var(--bg, #fff); box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  transform: translateY(-50%); transition: transform .18s ease, background .18s ease;
}
.appnav__theme[aria-checked="true"] .appnav__theme-knob { transform: translateY(-50%) translateX(1.25rem); background: var(--accent, #16161a); }


/* ── Footer público (antes inline en shared/_footer) */
.sitefoot { border-top: 1px solid var(--line, #e8e8e8); margin-top: 3rem; padding: 1.25rem; text-align: center;
  font: .8rem system-ui, sans-serif; color: var(--muted, #777); }
.sitefoot a { color: inherit; text-decoration: none; margin: 0 .5rem; }
.sitefoot a:hover { text-decoration: underline; }