/* ── 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 { margin: 0; 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;
  /* Contenido del header alineado con el contenido de la landing (.ld-hero:
     78rem de contenido con 1,25rem de padding, 3rem desde 64rem): el logo y los
     links siguen su margen; en pantallas angostas quedan al borde. */
  padding: 0 max(1.25rem, calc((100% - 78rem) / 2)); box-sizing: border-box;
  height: 3.25rem; /* misma altura que .org__head */
  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);
}
@media (min-width: 64rem) { .appnav { padding-inline: max(3rem, calc((100% - 78rem) / 2)); } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .appnav { background: var(--bg, #fff); }
}
.appnav a { color: inherit; text-decoration: none; }
/* Links de texto plano del nav (Panel/Crea tu evento, Registrarse,
   Iniciar sesión) — los iconos (carrito, favoritos) tienen su propio
   estado via appnav__acct/summary, este es solo para los de texto.
   Padding/margin negativo para que no salte el layout al aparecer el
   fondo en hover. */
.appnav__side > a:not(.appnav__icon) {
  padding: .3rem .55rem; margin: -.3rem -.55rem; border-radius: 999px;
  transition: background .15s ease, color .15s ease;
}
.appnav__side > a:not(.appnav__icon):hover { background: var(--accent, #7a8f00); color: var(--accent-fg, #fff); }
/* Marca en verde: usa el acento del tema (lima brillante en noche). En
   claro el acento es el mismo lima brillante, ilegible como texto sobre
   fondo blanco, así que ahí el logo va en negro. */
.appnav a.appnav__brand { font-size: 1.6rem; color: var(--accent, #7a8f00); }
:root[data-theme="lima"] .appnav a.appnav__brand { color: #000; }
.appnav__side { display: flex; gap: 1rem; align-items: center; }
.appnav__navlink { display: none; }
@media (min-width: 62rem) {
  .appnav__navlink { display: inline; color: var(--muted, #666); }
  .appnav__navlink:hover { color: var(--fg, #16161a); background: none; }
}
.appnav__icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; }
.appnav__icon:hover { background: color-mix(in srgb, var(--fg, #16161a) 10%, transparent); }
.appnav__count { position: absolute; top: .05rem; right: .05rem; display: grid; min-width: 1.05rem; height: 1.05rem; padding: 0 .16rem; box-sizing: border-box; place-items: center; border-radius: 999px; background: var(--accent, #7a8f00); color: var(--accent-fg, #fff); font-size: .65rem; font-weight: 700; line-height: 1; }
/* 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); }
/* Los popovers (<details>) aparecen con un fundido corto al abrirse. */
@keyframes appnav-pop-in { from { opacity: 0; transform: translateY(-.35rem); } }
.appnav__acct[open] > .appnav__acct-pop, .appnav__orgs[open] > .appnav__orgs-pop { animation: appnav-pop-in .16s ease-out; }
@media (prefers-reduced-motion: reduce) { .appnav__acct-pop, .appnav__orgs-pop { animation: none !important; } }
.appnav__acct-head { display: flex; align-items: center; gap: .7rem; padding: .5rem .6rem .35rem; }
.appnav__acct-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: color-mix(in srgb, var(--fg, #16161a) 10%, transparent); font-size: .95rem; font-weight: 700; }
.appnav__acct-name { min-width: 0; font-weight: 700; font-size: .95rem; overflow-wrap: anywhere; }
.appnav__acct-wrap { display: inline-flex; }
/* Confirmación de «Cerrar sesión» (fuera del popover, ver shared/_appnav). */
.appnav__dialog { width: min(92vw, 22rem); padding: 1.4rem 1.4rem 1.2rem; border: 1px solid var(--line, #e2e2e2); border-radius: 14px;
  background: var(--bg, #fff); color: var(--fg, #16161a); font: .9rem system-ui, sans-serif; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.appnav__dialog::backdrop { background: rgba(0, 0, 0, .5); backdrop-filter: blur(3px); }
.appnav__dialog h2 { margin: 0 0 .4rem; font-size: 1.1rem; }
.appnav__dialog p { margin: 0 0 1.2rem; color: var(--muted, #6b7280); line-height: 1.45; }
.appnav__dialog-actions { display: flex; justify-content: flex-end; gap: .6rem; }
.appnav__dialog-actions form { margin: 0; }
.appnav__dialog-actions button { padding: .55rem 1rem; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer; }
.appnav__dialog-cancel { border: 1px solid var(--line, #e2e2e2); background: transparent; color: var(--fg, #16161a); }
.appnav__dialog-cancel:hover { background: color-mix(in srgb, var(--fg, #16161a) 8%, transparent); }
.appnav__dialog-confirm { border: 0; background: var(--accent, #7a8f00); color: var(--accent-fg, #fff); }
.appnav__dialog-confirm:hover { background: color-mix(in srgb, var(--accent, #7a8f00) 85%, var(--fg, #16161a)); }
.appnav__acct-sep { height: 1px; background: var(--line, #eee); margin: .3rem 0; }
/* Selector de organización: mismo patrón <details> que appnav__acct,
   pero con summary "con contenido" (icono + nombre + flecha), visible
   solo si el usuario pertenece a más de una organización. */
.appnav__orgs { position: relative; display: inline-flex; }
.appnav__orgs > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .7rem; border-radius: 999px; color: inherit; font-weight: 600;
  background: color-mix(in srgb, var(--accent, #7a8f00) 14%, transparent);
}
.appnav__orgs > summary::-webkit-details-marker { display: none; }
.appnav__orgs > summary svg:first-child { color: var(--accent, #7a8f00); }
.appnav__orgs > summary:hover, .appnav__orgs[open] > summary { background: color-mix(in srgb, var(--accent, #7a8f00) 22%, transparent); }
.appnav__orgs-pop { position: absolute; left: 0; top: calc(100% + .5rem); min-width: 16rem; z-index: 50;
  background: var(--bg, #fff); border: 1px solid var(--line, #e2e2e2); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .14); padding: .6rem; }
.appnav__orgs-eyebrow { margin: 0 0 .35rem; padding: 0 .4rem; font-size: .68rem; font-weight: 700; letter-spacing: .06rem; text-transform: uppercase; color: var(--muted, #888); }
.appnav__orgs-item { display: flex; align-items: center; gap: .6rem; padding: .5rem .4rem; border-radius: 8px; color: inherit; }
.appnav__orgs-item:hover { background: color-mix(in srgb, var(--fg, #16161a) 6%, transparent); }
.appnav__orgs-item > svg:last-child { flex: none; color: var(--accent, #7a8f00); margin-left: auto; }
.appnav__orgs-body { display: flex; flex-direction: column; line-height: 1.3; }
.appnav__orgs-name { font-weight: 600; }
.appnav__orgs-pill { flex: none; margin-left: auto; min-width: 1.4rem; padding: .1rem .5rem; border-radius: 999px; text-align: center; font-size: .75rem; font-weight: 700; line-height: 1.3; color: var(--fg, #16161a); background: color-mix(in srgb, var(--fg, #16161a) 10%, transparent); }
.appnav__orgs-pill + svg { margin-left: 0; }
.appnav__orgs-sub { font-size: .78rem; color: var(--muted, #888); }
/* Toggle día/noche: un círculo que alterna el tema del home (lima ↔ noche) y
   lo deja en cookie. Muestra el ícono del tema al que se cambia: el sol en
   noche, la luna en lima. Mismo toggle que el layout de cuenta. */
.appnav__theme {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; flex: none; padding: 0;
  border: 1px solid var(--line, #ccc); border-radius: 50%; background: transparent;
  color: var(--muted, #888); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.appnav__theme:hover { background: color-mix(in srgb, var(--fg, #16161a) 8%, transparent); color: var(--fg, #16161a); }
.appnav__theme-sun, .appnav__theme-moon { width: 1.05rem; height: 1.05rem; }
:root:not([data-theme="lima"]) .appnav__theme-moon { display: none; }
:root[data-theme="lima"] .appnav__theme-sun { display: none; }


/* ── 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; }

/* Selector de organización al pulsar "Crear mi evento" (shared/_create_event_cta). */
:where(.orgpick) > button { font: inherit; cursor: pointer; }
.orgpick__dialog { width: min(92vw, 24rem); padding: 1.4rem 1.4rem 1.2rem; border: 1px solid color-mix(in srgb, var(--fg, #16161a) 22%, var(--bg, #fff)); border-radius: 14px;
  background: color-mix(in srgb, var(--fg, #16161a) 8%, var(--bg, #fff)); color: var(--fg, #16161a); font: .9rem system-ui, sans-serif; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.orgpick__dialog::backdrop { background: rgba(0, 0, 0, .35); backdrop-filter: blur(3px); }
.orgpick__dialog h2 { margin: 0 0 .4rem; font-size: 1.1rem; }
.orgpick__dialog p { margin: 0 0 1rem; color: var(--muted, #6b7280); line-height: 1.45; }
.orgpick__list { margin: 0 0 1rem; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .4rem; max-height: 50vh; overflow-y: auto; }
.orgpick__item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem .9rem; border: 1px solid color-mix(in srgb, var(--fg, #16161a) 18%, transparent);
  border-radius: 10px; color: var(--fg, #16161a); font-weight: 600; text-decoration: none; }
.orgpick__item:hover { border-color: var(--accent, #7a8f00); background: color-mix(in srgb, var(--fg, #16161a) 6%, transparent); }
.orgpick__name { flex: 1; line-height: 1.2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orgpick__meta { flex: none; line-height: 1.2; color: var(--muted, #6b7280); font-size: .85rem; font-weight: 500; }
.orgpick__go { flex: none; display: block; color: var(--muted, #6b7280); }
.orgpick__item:hover .orgpick__go { color: var(--fg, #16161a); }
.orgpick__actions { display: flex; justify-content: flex-end; }
.orgpick__cancel { padding: .55rem 1rem; border: 1px solid var(--line, #e2e2e2); border-radius: 8px; background: transparent; color: var(--fg, #16161a);
  font: inherit; font-weight: 600; cursor: pointer; }
.orgpick__cancel:hover { background: color-mix(in srgb, var(--fg, #16161a) 8%, transparent); }