:root {
  --brand: #7bb661;
  --brand-2: #b7e4c7;
  --ink: #1f2a1a;
  --ink-2: #2d3a22;
  --surface: rgba(255, 255, 255, 0.90);
  --surface-2: rgba(255, 255, 255, 0.78);
  --border: rgba(31, 42, 26, 0.10);
  --shadow: 0 14px 40px rgba(0,0,0,0.18);
  --shadow-strong: 0 24px 80px rgba(0,0,0,0.30);
  --neon: rgba(123,182,97,0.90);
  --neon-soft: rgba(123,182,97,0.28);
  --neon-border: rgba(183,228,199,0.55);
  --accent: #FFB703;
}

body {
  background-image:
    radial-gradient(1100px 760px at 18% 12%, rgba(123,182,97,0.28), rgba(0,0,0,0) 60%),
    radial-gradient(900px 620px at 85% 28%, rgba(255,183,3,0.10), rgba(0,0,0,0) 58%),
    linear-gradient(180deg, rgba(9, 22, 12, 0.54), rgba(9, 22, 12, 0.22)),
    url('/static/fondo.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html,
body {
  overflow-x: clip;
}

/* Mobile perf: fixed backgrounds can stutter on some devices */
@media (max-width: 768px) {
  body {
    background-attachment: scroll;
  }
}

/* Tipografía base más cuidada */
p { line-height: 1.6; }

/* Contenedor helper para que elementos "floten" sobre fondos */
.elevated {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 18px;
  box-shadow: var(--shadow-strong);
  backdrop-filter: blur(14px) saturate(120%);
}

.navbar {
  background: linear-gradient(90deg, rgba(123,182,97,0.95) 0%, rgba(183,228,199,0.92) 100%);
  font-size: 1em;
  color: var(--ink-2);
  padding: 10px 14px;
  min-height: 64px;
    display: flex;
    align-items: center;
  gap: 8px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.22);
  border-bottom: 1px solid rgba(255,255,255,0.40);
  justify-content: flex-start;
  position: sticky;
  top: 0;
  z-index: 2000;
  backdrop-filter: blur(10px) saturate(120%);
}

.navbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0), var(--neon), rgba(255,255,255,0));
  opacity: 0.75;
  pointer-events: none;
}

.navbar a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s, background 0.2s;
    margin-right: 6px;
    padding: 8px 12px;
    border-radius: 10px;
}

.navbar a.navbar-item {
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* El dropdown usa <button>, así que no entra en .navbar a.navbar-item */
.navbar .dropdown-btn.navbar-item {
  font-weight: 700;
  letter-spacing: 0.01em;
}

.navbar a:hover, .navbar a.active {
    background: rgba(255,255,255,0.18);
  color: var(--ink-2);
}

.navbar a:hover {
  box-shadow: 0 10px 26px rgba(0,0,0,0.16);
}

/* Botones en navbar (logout) con look de link */
.navbar button.navbar-item {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  margin-right: 6px;
  padding: 8px 12px;
  border-radius: 10px;
}

.navbar button.navbar-item:hover {
  background: rgba(255,255,255,0.18);
  color: var(--ink-2);
  box-shadow: 0 10px 26px rgba(0,0,0,0.16);
}

.navbar-auth {
  margin-left: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.navbar-user {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.26);
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--ink-2);
}

.navbar-logout {
  margin: 0;
}

.navbar a:focus-visible,
.dropdown-btn:focus-visible,
.navbar-search input[type="text"]:focus-visible,
.navbar-search button:focus-visible {
  outline: 3px solid rgba(255,255,255,0.45);
  outline-offset: 2px;
}

.navbar-brand {
    font-size: 1.3em;
    font-weight: 700;
    letter-spacing: 1px;
    margin-right: 40px;
}

.navbar-item {
    font-variant: small-caps;
    font-weight: 500;
}

.navbar-logo {
  height: 64px;
  margin-right: 10px;
    vertical-align: middle;
}

.navbar-search {
  margin-left: auto;
    display: flex;
    align-items: center;
}
.navbar-search input[type="text"] {
  padding: 8px 10px;
  border-radius: 10px 0 0 10px;
  border: 1px solid rgba(255,255,255,0.48);
  background: rgba(255,255,255,0.65);
    outline: none;
    font-size: 1em;
}
.navbar-search button {
  padding: 8px 12px;
    border: none;
  border-radius: 0 10px 10px 0;
  background: rgba(45,58,34,0.78);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.navbar-search button:hover {
  background: rgba(45,58,34,0.92);
}

.navbar-social {
  margin-left: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  position: static;
}
.social-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    transition: transform 0.2s;
}
.social-icon:hover {
    transform: scale(1.15);
}

.home-logo {
  width: 100%;
  max-width: 440px;
  margin-top: 22px;
  border-radius: 18px;
  box-shadow: 0 16px 42px rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.30);
}

.body-content {
  background: var(--surface);
  margin: 28px auto;
  padding: 42px 26px;
  border-radius: 18px;
  box-shadow: var(--shadow-strong);
  border: 1px solid var(--border);
  max-width: 920px;
  backdrop-filter: blur(10px) saturate(120%);
    position: relative;
}

@media (max-width: 520px) {
  .body-content {
    margin: 16px 10px;
    padding: 22px 14px;
    border-radius: 16px;
  }
}

/* Flash messages */
.lj-flash-stack {
  max-width: 920px;
  margin: 14px auto -12px;
  padding: 0 14px;
  display: grid;
  gap: 10px;
}

.lj-flash {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.14);
  color: rgba(31,42,26,0.90);
}

.lj-flash-success {
  border-left: 5px solid rgba(123,182,97,0.95);
}

.lj-flash-error {
  border-left: 5px solid rgba(255,183,3,0.75);
}

/* Chat overlay (authenticated users) */
.lj-chat-fab {
  position: fixed;
  right: 16px;
  bottom: 16px;
  /* Must stay below navbar (z-index: 2000) so dropdowns are clickable */
  z-index: 1800;
}

.lj-chat-panel {
  position: fixed;
  top: var(--lj-chat-top, 92px);
  bottom: 16px;
  right: 16px;
  width: min(420px, calc(100vw - 32px));
  /* Must stay below navbar (z-index: 2000) so dropdowns are clickable */
  z-index: 1800;
  background: var(--surface-2);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-strong);
  backdrop-filter: blur(10px) saturate(120%);
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;

  /* Slide-in animation from the right */
  opacity: 0;
  transform: translateX(110%);
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), opacity 180ms ease;
  pointer-events: none;
  contain: layout paint;
}

.lj-chat-panel.is-open {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .lj-chat-panel {
    transition: none;
  }
}

.lj-chat-panel-header {
  padding: 12px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--border);
}

.lj-chat-panel-title {
  font-weight: 800;
  letter-spacing: 0.01em;
}

.lj-chat-panel-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lj-chat-panel-actions .btn {
  min-height: 40px;
}

.lj-chat-panel-log {
  padding: 12px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.lj-chat-panel-form {
  padding: 12px;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 10px;
}

.lj-chat-suggestions {
  display: grid;
  gap: 8px;
}

.lj-chat-suggestions-label {
  font-size: 13px;
  font-weight: 800;
  color: rgba(31,42,26,0.76);
}

.lj-chat-suggestions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lj-chat-suggestion {
  border: 1px solid rgba(31,42,26,0.12);
  background: rgba(255,255,255,0.72);
  color: var(--ink-2);
  border-radius: 999px;
  padding: 8px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.lj-chat-suggestion:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.88);
  box-shadow: 0 8px 22px rgba(0,0,0,0.10);
}

.lj-chat-suggestion:focus-visible {
  outline: 3px solid rgba(123,182,97,0.25);
  outline-offset: 2px;
}

/* Buttons inside the light chat panel must be readable */
.lj-chat-panel .btn {
  background: rgba(255,255,255,0.70);
  color: var(--ink-2);
  border-color: rgba(31,42,26,0.12);
}

.lj-chat-panel .btn.btn-primary {
  color: #fff;
  border-color: rgba(0,0,0,0.08);
}

.lj-chat-panel .btn.btn-ghost {
  background: rgba(255,255,255,0.50);
}

.lj-chat-msg {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
}

.lj-chat-msg-user {
  background: rgba(31,42,26,0.04);
}

.lj-chat-msg-assistant {
  background: rgba(255,255,255,0.72);
}

.lj-chat-msg-who {
  font-weight: 800;
  margin-bottom: 6px;
}

.lj-chat-msg-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 640px) {
  .lj-chat-fab {
    right: 12px;
    bottom: 12px;
  }

  .lj-chat-panel {
    right: 10px;
    left: 10px;
    bottom: 10px;
    width: auto;
    max-width: none;
    border-radius: 16px;
    transform: translateX(calc(100% + 18px));
  }

  .lj-chat-panel-header,
  .lj-chat-panel-log,
  .lj-chat-panel-form {
    min-width: 0;
  }

  .lj-chat-panel-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .lj-chat-panel-actions {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
}

/* Área Littlejacks */
.lj-area-header {
  display: grid;
  gap: 6px;
}

.lj-area-title {
  margin: 0;
  color: var(--ink-2);
  letter-spacing: -0.01em;
}

.lj-area-subtitle {
  margin: 0;
  color: rgba(31,42,26,0.82);
}

.lj-activity-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.lj-activity-card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.14);
  display: block;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease;
}

.lj-activity-img {
  display: block;
  width: 100%;
  height: auto;
}

.lj-activity-card:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 26px 72px rgba(0,0,0,0.22);
}

.lj-activity-card:active {
  transform: translateY(-1px) scale(1.01);
}

.lj-activity-card:focus-visible {
  outline: 3px solid rgba(123,182,97,0.25);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .lj-activity-card {
    transition: none;
  }

  .lj-activity-card:hover {
    transform: none;
  }
}

.lj-activity-title {
  margin: 0;
  color: var(--ink-2);
  font-size: 1.1rem;
  letter-spacing: -0.01em;
}

.lj-activity-desc {
  margin: 0;
  color: rgba(31,42,26,0.82);
  line-height: 1.55;
}

.lj-activity-actions {
  margin-top: auto;
}

.lj-ringing-page {
  display: grid;
  gap: 20px;
}

.lj-ringing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  gap: 18px;
  padding: 22px;
  border-radius: 28px;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.56), rgba(255,255,255,0) 38%),
    linear-gradient(135deg, #f2e2c6 0%, #dcc099 46%, #c69668 100%);
  box-shadow: 0 24px 70px rgba(73, 40, 15, 0.18);
}

.lj-ringing-hero h1 {
  margin: 0;
  color: #4d2f1a;
}

.lj-ringing-hero-copy {
  display: grid;
  gap: 14px;
  align-content: start;
}

.lj-ringing-hero-copy p {
  margin: 0;
  color: rgba(62, 36, 18, 0.86);
  max-width: 64ch;
  line-height: 1.6;
}

.lj-ringing-hero-actions,
.lj-ringing-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.lj-ringing-hero-card,
.lj-ringing-panel,
.lj-ringing-preview,
.lj-ringing-quiz {
  background: rgba(255, 250, 243, 0.92);
  border: 1px solid rgba(86, 52, 24, 0.12);
  border-radius: 22px;
  box-shadow: 0 18px 42px rgba(52, 31, 14, 0.1);
}

.lj-ringing-hero-card {
  padding: 16px;
  display: grid;
  gap: 14px;
}

.lj-ringing-hero-image {
  width: 100%;
  display: block;
  border-radius: 18px;
}

.lj-ringing-facts {
  display: grid;
  gap: 10px;
}

.lj-ringing-facts div {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(120, 80, 40, 0.06);
}

.lj-ringing-facts strong,
.lj-ringing-panel h2,
.lj-ringing-preview h3,
.lj-ringing-quiz h2 {
  color: #4d2f1a;
}

.lj-ringing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.lj-ringing-panel,
.lj-ringing-quiz {
  padding: 18px;
}

.lj-ringing-panel p {
  margin: 0;
  color: rgba(58, 37, 20, 0.82);
  line-height: 1.6;
}

.lj-ringing-pill-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.lj-ringing-pill-row span,
.lj-ringing-reference span {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(77, 47, 26, 0.08);
  color: rgba(58, 37, 20, 0.82);
  font-weight: 800;
}

.lj-ringing-list {
  margin: 0;
  padding-left: 18px;
  color: rgba(58, 37, 20, 0.84);
}

.lj-ringing-list li + li {
  margin-top: 8px;
}

.lj-ringing-stage {
  display: grid;
  gap: 16px;
  padding: 20px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,247,237,0.94), rgba(244,228,208,0.9));
  border: 1px solid rgba(86, 52, 24, 0.1);
}

.lj-ringing-simulator-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.95fr);
  gap: 16px;
}

.lj-ringing-import-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 16px;
}

.lj-ringing-form,
.lj-ringing-preview {
  padding: 18px;
}

.lj-ringing-form {
  display: grid;
  gap: 12px;
}

.lj-ringing-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.lj-ringing-form-grid--triple {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lj-ringing-form-grid--quad {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lj-ringing-preview-head {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}

.lj-ringing-preview-body {
  color: rgba(58, 37, 20, 0.82);
  line-height: 1.6;
}

.lj-ringing-import-panel {
  display: grid;
  gap: 12px;
}

.lj-ringing-import-panel h3 {
  margin: 0;
  color: #4d2f1a;
}

.lj-ringing-import-form {
  align-content: start;
}

.lj-ringing-manual-form {
  background: rgba(255, 250, 243, 0.92);
  border: 1px solid rgba(86, 52, 24, 0.12);
  border-radius: 22px;
  box-shadow: 0 18px 42px rgba(52, 31, 14, 0.1);
}

.lj-ringing-import-columns {
  display: grid;
  gap: 12px;
}

.lj-ringing-columns-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.lj-ringing-column-card {
  display: grid;
  gap: 6px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255, 250, 243, 0.92);
  border: 1px solid rgba(86, 52, 24, 0.12);
  color: rgba(58, 37, 20, 0.84);
}

.lj-ringing-column-card strong {
  color: #4d2f1a;
}

.lj-ringing-record {
  display: grid;
  gap: 12px;
}

.lj-ringing-record-head {
  display: grid;
  gap: 4px;
}

.lj-ringing-record-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.lj-ringing-record-grid div {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(120, 80, 40, 0.06);
}

.lj-ringing-record-grid dt {
  font-weight: 800;
  color: #4d2f1a;
}

.lj-ringing-record-grid dd {
  margin: 4px 0 0;
}

.lj-ringing-reference {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.lj-ringing-record-note,
.lj-ringing-score {
  margin: 0;
  color: rgba(58, 37, 20, 0.82);
}

.lj-ringing-check-grid {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.lj-ringing-check-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(120, 80, 40, 0.06);
  color: rgba(58, 37, 20, 0.86);
  font-weight: 600;
}

@media (max-width: 980px) {
  .lj-ringing-hero,
  .lj-ringing-simulator-layout,
  .lj-ringing-import-layout,
  .lj-ringing-columns-grid,
  .lj-ringing-grid {
    grid-template-columns: 1fr;
  }

  .lj-ringing-form-grid--triple,
  .lj-ringing-form-grid--quad {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .lj-ringing-form-grid,
  .lj-ringing-record-grid {
    grid-template-columns: 1fr;
  }

  .lj-ringing-hero,
  .lj-ringing-stage,
  .lj-ringing-panel,
  .lj-ringing-preview,
  .lj-ringing-quiz {
    padding: 16px;
  }
}

.lj-quiz-page {
  display: grid;
  gap: 20px;
  position: relative;
}

.lj-quiz-page::before {
  content: "";
  position: absolute;
  inset: -24px 0 auto 0;
  height: 300px;
  border-radius: 28px;
  background:
    radial-gradient(circle at top left, rgba(255, 214, 153, 0.35), transparent 38%),
    radial-gradient(circle at 80% 20%, rgba(123, 182, 97, 0.28), transparent 28%),
    linear-gradient(135deg, rgba(247, 251, 240, 0.92), rgba(228, 242, 230, 0.88));
  z-index: 0;
}

.lj-quiz-page > * {
  position: relative;
  z-index: 1;
}

.lj-quiz-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.9fr);
  gap: 16px;
  align-items: stretch;
}

.lj-quiz-copy,
.lj-quiz-meta-card,
.lj-quiz-panel,
.lj-quiz-empty {
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(31,42,26,0.12);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.12);
}

.lj-quiz-copy {
  padding: 22px;
  background: linear-gradient(145deg, rgba(255,255,255,0.94), rgba(245,250,239,0.9));
}

.lj-quiz-kicker {
  margin: 0 0 8px 0;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  font-weight: 800;
  color: rgba(31,42,26,0.62);
}

.lj-quiz-title {
  margin: 0;
  color: var(--ink-2);
  letter-spacing: -0.02em;
}

.lj-quiz-subtitle {
  margin: 10px 0 0 0;
  color: rgba(31,42,26,0.8);
  line-height: 1.6;
}

.lj-quiz-hero-highlights {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.lj-quiz-hero-highlights span {
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(31,122,46,0.09);
  border: 1px solid rgba(31,122,46,0.12);
  color: rgba(31,42,26,0.8);
  font-size: 0.9rem;
  font-weight: 700;
}

.lj-quiz-meta {
  display: grid;
  gap: 12px;
}

.lj-quiz-meta-card {
  padding: 18px;
  display: grid;
  gap: 6px;
  backdrop-filter: blur(10px);
}

.lj-quiz-meta-card--accent {
  background: linear-gradient(145deg, rgba(31,122,46,0.92), rgba(72,149,81,0.86));
  color: #fff;
}

.lj-quiz-meta-card strong {
  font-size: 2rem;
  line-height: 1;
  color: #1f7a2e;
}

.lj-quiz-meta-card--accent strong,
.lj-quiz-meta-card--accent span {
  color: #fff;
}

.lj-quiz-meta-card span {
  color: rgba(31,42,26,0.78);
}

.lj-quiz-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.95fr);
  gap: 16px;
  align-items: start;
}

.lj-quiz-panel {
  padding: 20px;
  backdrop-filter: blur(12px);
}

.lj-quiz-panel--side {
  position: sticky;
  top: 88px;
}

.lj-quiz-mode-copy {
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(31,122,46,0.07), rgba(255,214,153,0.16));
  border: 1px solid rgba(31,42,26,0.08);
  color: rgba(31,42,26,0.8);
  line-height: 1.55;
}

.lj-quiz-statusbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.lj-quiz-stat-card {
  padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(255,255,255,0.96), rgba(242,248,238,0.86));
  border: 1px solid rgba(31,42,26,0.08);
  display: grid;
  gap: 6px;
  min-height: 90px;
}

.lj-quiz-stat-card--timer {
  background: linear-gradient(145deg, rgba(28,43,25,0.92), rgba(53,76,49,0.9));
}

.lj-quiz-stat-card--timer .lj-quiz-stat-label,
.lj-quiz-stat-card--timer .lj-quiz-stat-value,
.lj-quiz-stat-card--timer .lj-quiz-stat-sub {
  color: #fff;
}

.lj-quiz-stat-card--timer.is-warning {
  background: linear-gradient(145deg, rgba(173,107,0,0.96), rgba(217,136,11,0.92));
}

.lj-quiz-stat-card--timer.is-danger {
  background: linear-gradient(145deg, rgba(141,28,42,0.98), rgba(198,52,70,0.96));
  animation: ljQuizPulse 1s ease-in-out infinite;
}

.lj-quiz-stat-label {
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(31,42,26,0.62);
}

.lj-quiz-stat-value {
  font-size: clamp(1.35rem, 2vw, 2rem);
  line-height: 1;
  color: var(--ink-2);
}

.lj-quiz-stat-sub {
  font-size: 0.88rem;
  color: rgba(31,42,26,0.68);
}

.lj-quiz-progress {
  margin-bottom: 18px;
  display: grid;
  gap: 8px;
}

.lj-quiz-progress-track {
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(31,42,26,0.08);
}

.lj-quiz-progress-bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8bcf5b, #1f7a2e 70%, #0e5d2d);
  transition: width .25s ease;
}

.lj-quiz-progress-copy {
  margin: 0;
  color: rgba(31,42,26,0.72);
  font-weight: 700;
}

.lj-quiz-config {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 180px)) minmax(0, 1fr);
  gap: 12px;
  align-items: end;
  margin-bottom: 16px;
}

.lj-quiz-config-field {
  display: grid;
  gap: 6px;
}

.lj-quiz-config-field span {
  font-size: 0.85rem;
  font-weight: 800;
  color: rgba(31,42,26,0.7);
}

.lj-quiz-config-field select {
  min-height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(31,42,26,0.14);
  padding: 0 12px;
  background: #fff;
  color: var(--ink-2);
  font-weight: 700;
}

.lj-quiz-config-summary {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(31,122,46,0.08);
  display: grid;
  gap: 4px;
}

.lj-quiz-config-summary strong {
  color: var(--ink-2);
}

.lj-quiz-config-summary span {
  color: rgba(31,42,26,0.75);
  font-size: 0.92rem;
}

.lj-quiz-pill {
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(31,122,46,0.08);
  color: rgba(31,42,26,0.86);
  font-weight: 700;
}

.lj-quiz-audio-card {
  display: grid;
  gap: 10px;
  padding: 18px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(221,244,228,0.95), rgba(247,251,240,0.95));
  border: 1px solid rgba(31,122,46,0.1);
  position: relative;
  overflow: hidden;
}

.lj-quiz-audio-card::after {
  content: "";
  position: absolute;
  inset: auto -28px -28px auto;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.5), rgba(255,255,255,0));
}

.lj-quiz-audio-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.lj-quiz-audio-kicker {
  margin: 0 0 6px 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  font-weight: 800;
  color: rgba(31,42,26,0.58);
}

.lj-quiz-audio-title {
  margin: 0;
  color: var(--ink-2);
}

.lj-quiz-key-hint {
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(31,42,26,0.08);
  color: rgba(31,42,26,0.68);
  font-size: 0.85rem;
  font-weight: 700;
}

.lj-quiz-play {
  justify-self: start;
  position: relative;
  z-index: 1;
}

.lj-quiz-player-shell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.lj-quiz-player-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(31,42,26,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.46);
}

.lj-quiz-player-meta {
  display: grid;
  gap: 2px;
}

.lj-quiz-player-meta strong {
  color: var(--ink-2);
  font-size: 0.95rem;
}

.lj-quiz-player-meta span {
  color: rgba(31,42,26,0.68);
  font-size: 0.9rem;
}

.lj-quiz-player-card audio {
  width: 100%;
  min-width: 0;
  height: 42px;
  border-radius: 12px;
  accent-color: #1f7a2e;
}

.lj-quiz-timeattack-gate {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.74);
  border: 1px solid rgba(31,42,26,0.08);
}

.lj-quiz-timeattack-gate[hidden],
[data-lj-quiz-start-time-attack][hidden] {
  display: none !important;
}

.lj-quiz-timeattack-gate-copy {
  margin: 0;
  color: rgba(31,42,26,0.76);
  line-height: 1.5;
}

.lj-quiz-instruction,
.lj-quiz-note,
.lj-quiz-answer-scientific,
.lj-quiz-preview-copy p {
  margin: 0;
  color: rgba(31,42,26,0.76);
}

.lj-quiz-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.lj-quiz-hotkeys {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.lj-quiz-hotkeys span {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.68);
  border: 1px solid rgba(31,42,26,0.08);
  color: rgba(31,42,26,0.72);
  font-size: 0.84rem;
  font-weight: 700;
}

.lj-quiz-option {
  min-height: 74px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(31,42,26,0.12);
  background: rgba(255,255,255,0.92);
  color: var(--ink-2);
  font-weight: 800;
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background-color .14s ease;
  position: relative;
  overflow: hidden;
}

.lj-quiz-option::after {
  content: "";
  position: absolute;
  inset: auto -24px -24px auto;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(123,182,97,0.16), transparent 68%);
}

.lj-quiz-option-name {
  display: block;
}

.lj-quiz-option-scientific {
  display: block;
  margin-top: 6px;
  font-size: 0.88rem;
  font-style: italic;
  font-weight: 500;
  color: rgba(31,42,26,0.72);
}

.lj-quiz-option:hover:not(:disabled),
.lj-quiz-option:focus-visible:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.12);
  border-color: rgba(31,122,46,0.3);
}

.lj-quiz-option:disabled {
  cursor: default;
}

.lj-quiz-option.is-correct {
  background: linear-gradient(135deg, #7bb661, #5aa03f);
  color: #fff;
  border-color: transparent;
}

.lj-quiz-option.is-wrong {
  background: rgba(214,40,57,0.12);
  color: #7b1120;
  border-color: rgba(214,40,57,0.25);
}

.lj-quiz-feedback {
  margin-top: 16px;
  min-height: 28px;
  font-weight: 700;
  color: rgba(31,42,26,0.72);
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(31,42,26,0.04);
  border: 1px solid rgba(31,42,26,0.06);
}

.lj-quiz-feedback.is-success {
  color: #1f7a2e;
  background: rgba(31,122,46,0.08);
  border-color: rgba(31,122,46,0.14);
}

.lj-quiz-feedback.is-error {
  color: #8d1c2a;
  background: rgba(214,40,57,0.08);
  border-color: rgba(214,40,57,0.14);
}

.lj-quiz-round-summary {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(31,42,26,0.05);
  border: 1px solid rgba(31,42,26,0.08);
}

.lj-quiz-round-summary h2 {
  margin: 0 0 8px 0;
  color: var(--ink-2);
  font-size: 1rem;
}

.lj-quiz-round-summary p {
  margin: 0;
  color: rgba(31,42,26,0.76);
}

.lj-quiz-actions {
  margin-top: 18px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.lj-quiz-preview {
  display: grid;
  gap: 12px;
}

.lj-quiz-preview-placeholder {
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(243,248,236,0.95), rgba(255,255,255,0.92));
  border: 1px dashed rgba(31,122,46,0.2);
}

.lj-quiz-preview-placeholder-kicker,
.lj-quiz-preview-kicker {
  margin: 0 0 6px 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  font-weight: 800;
  color: rgba(31,42,26,0.56);
}

.lj-quiz-preview-placeholder h2 {
  margin: 0;
  color: var(--ink-2);
}

.lj-quiz-preview-placeholder p {
  margin: 10px 0 0 0;
  color: rgba(31,42,26,0.74);
  line-height: 1.55;
}

.lj-quiz-preview img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 16px 36px rgba(0,0,0,0.16);
}

.lj-quiz-preview-copy {
  display: grid;
  gap: 8px;
}

.lj-quiz-preview-copy h2,
.lj-quiz-side-title {
  margin: 0;
  color: var(--ink-2);
}

.lj-quiz-answer-scientific,
.lj-quiz-answer-scientific em {
  font-style: italic;
}

.lj-quiz-summary {
  margin-top: 18px;
  display: grid;
  gap: 10px;
}

.lj-quiz-steps {
  margin: 0;
  padding-left: 20px;
  color: rgba(31,42,26,0.82);
}

.lj-quiz-empty {
  padding: 22px;
}

@keyframes ljQuizPulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(198,52,70,0);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 0 0 6px rgba(198,52,70,0.16);
  }
}

@media (max-width: 920px) {
  .lj-quiz-hero,
  .lj-quiz-shell {
    grid-template-columns: 1fr;
  }

  .lj-quiz-panel--side {
    position: static;
    top: auto;
  }

  .lj-quiz-config {
    grid-template-columns: 1fr;
  }

  .lj-quiz-statusbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .lj-quiz-page::before {
    inset: -12px 0 auto 0;
    height: 220px;
  }

  .lj-quiz-options {
    grid-template-columns: 1fr;
  }

  .lj-quiz-player-shell {
    grid-template-columns: 1fr;
  }

  .lj-quiz-statusbar {
    grid-template-columns: 1fr;
  }

  .lj-quiz-audio-head {
    flex-direction: column;
  }

  .lj-quiz-key-hint {
    align-self: start;
  }
}

/* Auth forms */
.lj-auth-form {
  max-width: 560px;
  margin-top: 18px;
}

.lj-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
}

.lj-field label {
  font-weight: 800;
  color: rgba(31,42,26,0.86);
}

.lj-input {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(31,42,26,0.14);
  background: rgba(255,255,255,0.72);
  font-size: 1em;
}

.lj-input:focus {
  outline: 3px solid rgba(123,182,97,0.18);
  outline-offset: 2px;
}

.lj-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-weight: 700;
  color: rgba(31,42,26,0.78);
}

.lj-error {
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,183,3,0.22);
  background: rgba(255,183,3,0.10);
  color: rgba(31,42,26,0.88);
  font-weight: 700;
}

.lj-map-page {
  display: grid;
  gap: 22px;
}

.body-content.lj-map-page--wide {
  max-width: min(1460px, calc(100vw - 36px));
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.lj-map-hero,
.lj-map-form,
.lj-map-sidebar-card,
.lj-observation-preview-card,
.lj-admin-observation-card,
.lj-admin-observation-table {
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(31,42,26,0.1);
  border-radius: 18px;
  box-shadow: 0 18px 42px rgba(0,0,0,0.1);
}

.lj-map-hero {
  position: relative;
  overflow: hidden;
  padding: 34px;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.95fr);
  gap: 22px;
  align-items: stretch;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.72), rgba(255,255,255,0) 34%),
    linear-gradient(135deg, rgba(228,242,233,0.98), rgba(243,234,203,0.94) 55%, rgba(224,238,245,0.92));
}

.lj-map-hero::before,
.lj-map-stage--framed::before,
.lj-map-form::before,
.lj-map-sidebar-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.lj-map-hero::before {
  background:
    radial-gradient(circle at 86% 14%, rgba(255,255,255,0.68), rgba(255,255,255,0) 28%),
    radial-gradient(circle at 84% 82%, rgba(123,182,97,0.18), rgba(123,182,97,0) 32%);
}

.lj-map-hero-copy,
.lj-map-hero-stats,
.lj-map-stage > *,
.lj-map-form > *,
.lj-map-sidebar-card > * {
  position: relative;
  z-index: 1;
}

.lj-map-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(31,42,26,0.08);
  color: rgba(31,42,26,0.72);
  font-size: 0.77rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.lj-map-hero-copy {
  display: grid;
  gap: 14px;
  align-content: center;
}

.lj-map-hero h1 {
  margin: 0;
  max-width: 12ch;
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.lj-map-hero p {
  margin: 0;
  max-width: 68ch;
  font-size: 1.03rem;
}

.lj-map-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

.lj-map-hero-stats {
  display: grid;
  gap: 12px;
  align-content: center;
}

.lj-map-stat-card {
  display: grid;
  gap: 6px;
  padding: 18px;
  border-radius: 20px;
  background: rgba(255,255,255,0.68);
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 18px 34px rgba(48, 65, 34, 0.10);
  backdrop-filter: blur(8px) saturate(120%);
}

.lj-map-stat-card--wide {
  background: linear-gradient(135deg, rgba(31,42,26,0.92), rgba(68,92,54,0.88));
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 22px 42px rgba(31,42,26,0.2);
}

.lj-map-stat-value {
  font-size: clamp(1.9rem, 3vw, 2.8rem);
  line-height: 1;
  font-weight: 900;
  color: var(--ink-2);
}

.lj-map-stat-value--copy {
  font-size: 1.1rem;
  letter-spacing: 0.01em;
}

.lj-map-stat-card--wide .lj-map-stat-value,
.lj-map-stat-card--wide .lj-map-stat-label {
  color: rgba(255,255,255,0.92);
}

.lj-map-stat-label {
  color: rgba(31,42,26,0.72);
  font-weight: 700;
  line-height: 1.45;
}

.lj-map-card-head {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.lj-map-hero h1,
.lj-map-form h2,
.lj-map-sidebar-card h2,
.lj-map-panel h2,
.lj-admin-observation-card h2,
.lj-admin-observation-table h2,
.lj-map-stage-head h2,
.lj-observation-preview-head h3 {
  margin: 0;
  color: var(--ink-2);
}

.lj-map-layout {
  display: grid;
}

.lj-map-form,
.lj-map-sidebar-card,
.lj-admin-observation-card,
.lj-admin-observation-table,
.lj-observation-preview-card {
  padding: 18px;
}

.lj-map-form,
.lj-map-sidebar-card {
  position: relative;
  overflow: hidden;
}

.lj-map-form {
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(246,250,242,0.92));
}

.lj-map-form::before {
  background: radial-gradient(circle at top right, rgba(123,182,97,0.10), rgba(123,182,97,0) 32%);
}

.lj-map-sidebar-card::before {
  background: radial-gradient(circle at top right, rgba(255,183,3,0.12), rgba(255,183,3,0) 28%);
}

.lj-map-stage {
  display: grid;
  gap: 14px;
}

.lj-map-stage--framed {
  position: relative;
  overflow: hidden;
  padding: 22px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(247,250,243,0.9));
  border: 1px solid rgba(31,42,26,0.08);
  box-shadow: 0 24px 52px rgba(0,0,0,0.12);
}

.lj-map-stage--framed::before {
  background:
    radial-gradient(circle at top right, rgba(255,183,3,0.14), rgba(255,183,3,0) 24%),
    linear-gradient(180deg, rgba(123,182,97,0.06), rgba(123,182,97,0));
}

.lj-map-stage-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  align-items: end;
}

.lj-map-stage-head p {
  margin: 0;
  max-width: 62ch;
  color: rgba(31,42,26,0.72);
  line-height: 1.6;
  font-weight: 600;
}

.lj-map-bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.7fr) minmax(280px, 0.7fr);
  gap: 16px;
  align-items: start;
}

.lj-map-toolbar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: end;
  margin-bottom: 0;
}

.lj-map-toolbar--wide {
  padding: 18px 20px;
  border-radius: 18px;
  background: rgba(255,255,255,0.76);
  border: 1px solid rgba(31,42,26,0.1);
  box-shadow: 0 18px 42px rgba(0,0,0,0.1);
  backdrop-filter: blur(10px) saturate(130%);
}

.lj-map-toolbar .lj-field-inline {
  display: grid;
  gap: 6px;
}

.lj-map-toolbar-metrics {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(31,42,26,0.06);
  color: rgba(31,42,26,0.8);
  font-weight: 800;
}

.lj-map-toolbar-copy {
  max-width: 720px;
  color: rgba(31,42,26,0.74);
  line-height: 1.55;
  font-weight: 600;
}

.lj-map-toolbar label,
.lj-map-form label {
  font-weight: 800;
  color: rgba(31,42,26,0.8);
}

.lj-map-select,
.lj-map-input,
.lj-map-textarea {
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(31,42,26,0.14);
  padding: 10px 12px;
  background: rgba(255,255,255,0.92);
  color: var(--ink-2);
}

.lj-map-select:focus,
.lj-map-input:focus,
.lj-map-textarea:focus {
  outline: 0;
  border-color: rgba(123,182,97,0.7);
  box-shadow: 0 0 0 4px rgba(123,182,97,0.16);
}

.lj-map-textarea {
  min-height: 108px;
  resize: vertical;
}

.lj-observations-map {
  width: 100%;
  min-height: 520px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(31,42,26,0.08);
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.72), rgba(255,255,255,0) 38%),
    linear-gradient(180deg, #d3eaef 0%, #9fc7d5 100%);
}

.lj-observations-map--preview {
  min-height: 260px;
  margin: 12px 0;
}

.lj-observations-map--full {
  min-height: clamp(680px, 78vh, 960px);
  border-radius: 24px;
  box-shadow: 0 28px 70px rgba(14, 42, 52, 0.18);
}

.lj-map-supporting {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 16px;
  align-items: center;
}

.lj-map-legend {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 0;
}

.lj-map-legend span,
.lj-map-note,
.lj-observation-preview-copy {
  color: rgba(31,42,26,0.74);
}

.lj-map-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(31,42,26,0.08);
  font-weight: 700;
}

.lj-map-privacy-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.lj-map-privacy-pills span {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(31,42,26,0.06);
  color: rgba(31,42,26,0.72);
  font-weight: 800;
}

.lj-map-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.lj-map-dot--approved { background: #1f7a2e; }
.lj-map-dot--pending { background: #f29f05; }
.lj-map-dot--rejected { background: #c63446; }
.lj-map-dot--cluster { background: #1b5567; }

.lj-map-cluster {
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.92);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 14px 30px rgba(7, 39, 50, 0.24);
}

.lj-map-cluster span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
}

.lj-map-cluster--small span {
  background: radial-gradient(circle at top, #2c8f7f, #1b5567);
}

.lj-map-cluster--medium span {
  background: radial-gradient(circle at top, #d38e2a, #9b5d08);
}

.lj-map-cluster--large span {
  background: radial-gradient(circle at top, #d14e56, #8f2336);
}

.lj-map-form-grid {
  display: grid;
  gap: 12px;
}

.lj-map-form-grid--coords {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lj-map-coordinate-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.lj-map-coordinate-status {
  margin: 0;
  font-size: 0.95rem;
  color: #4a5b42;
}

.lj-map-coordinate-status.is-error {
  color: #9f2738;
}

.lj-map-submit-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  margin-top: 14px;
}

.lj-map-submit-row .lj-map-note {
  max-width: 52ch;
}

.lj-map-help-list,
.lj-map-recent-list {
  margin: 0;
  padding-left: 18px;
  color: rgba(31,42,26,0.8);
}

.lj-map-help-list li,
.lj-map-recent-list li {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.66);
  border: 1px solid rgba(31,42,26,0.06);
}

.lj-map-recent-list li + li,
.lj-map-help-list li + li {
  margin-top: 8px;
}

.lj-map-recent-list li {
  display: grid;
  gap: 4px;
}

.lj-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
}

.lj-status-pill--pending {
  background: rgba(242,159,5,0.14);
  color: #9c6200;
}

.lj-status-pill--approved {
  background: rgba(31,122,46,0.12);
  color: #1f7a2e;
}

.lj-status-pill--rejected {
  background: rgba(198,52,70,0.12);
  color: #8d1c2a;
}

.lj-map-popup {
  display: grid;
  gap: 8px;
  color: rgba(31,42,26,0.84);
}

.lj-map-popup h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--ink-2);
}

.lj-map-popup p {
  margin: 0;
}

.lj-map-popup-media {
  max-width: 220px;
  border-radius: 12px;
}

.lj-map-canvas .leaflet-control-zoom {
  border: 0;
  box-shadow: 0 14px 30px rgba(27, 52, 61, 0.18);
}

.lj-map-canvas .leaflet-control-zoom a {
  width: 36px;
  height: 36px;
  line-height: 36px;
  background: rgba(255,255,255,0.92);
  color: #23434f;
  border-bottom-color: rgba(35,67,79,0.08);
}

.lj-map-canvas .leaflet-control-zoom a:hover {
  background: #ffffff;
  color: #143640;
}

.lj-map-canvas .leaflet-tile-pane {
  filter: saturate(0.92) contrast(1.03) brightness(1.02);
}

.lj-observation-preview-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.lj-observation-preview-head span {
  font-weight: 800;
  color: rgba(31,42,26,0.72);
}

.lj-admin-observation-card {
  display: grid;
  gap: 12px;
}

.lj-admin-observation-list {
  display: grid;
  gap: 14px;
}

.lj-admin-observation-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  color: rgba(31,42,26,0.74);
}

.lj-admin-observation-form {
  display: grid;
  gap: 10px;
}

.lj-admin-observation-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.lj-admin-observation-table table {
  width: 100%;
  border-collapse: collapse;
}

.lj-admin-observation-table th,
.lj-admin-observation-table td {
  padding: 10px 8px;
  border-bottom: 1px solid rgba(31,42,26,0.08);
  text-align: left;
  vertical-align: top;
}

.lj-admin-observation-table th {
  color: rgba(31,42,26,0.64);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

@media (max-width: 920px) {
  .body-content.lj-map-page--wide {
    max-width: calc(100vw - 22px);
  }

  .lj-map-hero {
    grid-template-columns: 1fr;
    padding: 24px;
  }

  .lj-map-stage--framed {
    padding: 18px;
  }

  .lj-map-bottom-grid {
    grid-template-columns: 1fr;
  }

  .lj-map-form-grid--coords {
    grid-template-columns: 1fr;
  }

  .lj-map-coordinate-tools {
    flex-direction: column;
    align-items: stretch;
  }

  .lj-map-toolbar--wide {
    align-items: stretch;
  }

  .lj-map-toolbar-metrics {
    justify-content: center;
  }

  .lj-map-supporting,
  .lj-map-stage-head,
  .lj-map-submit-row {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 640px) {
  .body-content.lj-map-page--wide {
    margin: 16px 10px;
  }

  .lj-map-hero {
    padding: 20px;
    gap: 16px;
  }

  .lj-map-hero h1 {
    max-width: 100%;
  }

  .lj-map-toolbar--wide {
    padding: 16px;
  }

  .lj-observations-map--full {
    min-height: 560px;
    border-radius: 18px;
  }
}

/* Admin: tablas legibles sobre fondo claro */
.lj-admin-table {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.12);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.lj-admin-table table th,
.lj-admin-table table td {
  color: var(--ink-2);
}

.lj-admin-table table thead th {
  font-weight: 900;
  border-bottom: 1px solid rgba(31,42,26,0.10);
}

.lj-admin-table table tbody tr + tr td {
  border-top: 1px solid rgba(31,42,26,0.08);
}

/* Marco degradado sutil para que la card destaque más */
.body-content::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(123,182,97,0.62), rgba(255,183,3,0.18), rgba(255,255,255,0.35));
  z-index: -1;
}

.home-content {
  text-align: center;
}

.home-content h1 {
  color: var(--ink-2);
  font-size: clamp(28px, 3.2vw, 44px);
  letter-spacing: -0.02em;
}

.home-content p {
  color: rgba(31,42,26,0.82);
  font-size: 16px;
}

h1, h2, h3 {
  color: var(--brand);
  margin-top: 0;
}

/* Dropdown (se usaba inline en base.html) */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  z-index: 2500;

  background: var(--surface);
  border-radius: 14px;
  border: 1px solid var(--border);
  backdrop-filter: blur(10px) saturate(120%);
  overflow: hidden;

  /* animación de entrada/salida */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.98);
  pointer-events: none;
  transition: opacity 160ms ease, transform 200ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 200ms;
}

.dropdown-content-right {
  right: 0;
  left: auto;
}

.dropdown-content::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(183,228,199,0.35) inset, 0 0 18px var(--neon-soft);
}

.dropdown-btn {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 10px;
  font-variant: small-caps;
  font-weight: 600;
  transition: background 0.2s, box-shadow 0.2s, transform 0.12s;
}

.dropdown-btn:hover,
.dropdown-btn:focus {
  background: rgba(255,255,255,0.18);
  outline: none;
  box-shadow: 0 10px 26px rgba(0,0,0,0.14);
  transform: translateY(-1px);
}

/* Dropdown del usuario (Hola, ... ) */
.navbar-user-dropdown {
  display: inline-flex;
  align-items: center;
}

.navbar-user-btn {
  appearance: none;
  cursor: pointer;
}

.navbar-user-btn:focus-visible {
  outline: 2px solid rgba(122, 255, 233, 0.55);
  outline-offset: 2px;
}

.dropdown-content a,
.dropdown-content .dropdown-item-btn {
  position: relative;
  z-index: 1;
  color: var(--ink-2);
  padding: 12px 14px;
  text-decoration: none;
  display: block;
  border-radius: 10px;
  font-weight: 700;
  transition: background 0.2s, transform 0.12s;
}

.dropdown-item-form {
  margin: 0;
}

.dropdown-item-btn {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  font: inherit;
}

.dropdown-content a:hover,
.dropdown-content .dropdown-item-btn:hover {
  background: rgba(123,182,97,0.12);
  transform: translateX(2px);
}

.dropdown-content a:focus-visible,
.dropdown-item-btn:focus-visible {
  outline: 3px solid rgba(123,182,97,0.25);
  outline-offset: -3px;
}

/* Modal (ventana emergente) para resultados de búsqueda */
.lj-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 3000;
}

.lj-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 110px);
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-strong);
  padding: 18px 18px 16px;
  z-index: 3100;
  backdrop-filter: blur(10px) saturate(120%);
}

/* En el modal el fondo es claro: reutilizamos el estilo legible de .body-content */
.lj-modal .btn {
  background: rgba(255,255,255,0.70);
  color: var(--ink-2);
  border-color: rgba(31,42,26,0.12);
}

/* Editor dinámico de curiosidades (admin) */
.lj-curiosidades-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 10px;
}

.lj-curiosidades-col {
  flex: 1;
  min-width: 220px;
}

.lj-modal-title {
  margin: 0;
  color: var(--ink-2);
}

.lj-modal-subtitle {
  margin: 6px 0 0;
  color: rgba(31,42,26,0.75);
  font-style: italic;
}

.lj-modal-description {
  margin: 12px 0 0;
  color: rgba(31,42,26,0.86);
}

.lj-modal-close {
  float: right;
}

body.lj-modal-open {
  overflow: hidden;
}
.dropdown-content a:hover {
  background: rgba(123,182,97,0.12);
  transform: translateX(2px);
}
.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition: opacity 160ms ease, transform 200ms cubic-bezier(.2,.8,.2,1), visibility 0s;
}

.dropdown-content a:focus-visible {
  outline: 3px solid rgba(123,182,97,0.25);
  outline-offset: -3px;
}

/* Ajustes responsive navbar */
@media (max-width: 860px) {
  .navbar { flex-wrap: wrap; }
  .navbar-search { width: 100%; margin-left: 0; }
  .navbar-search input[type="text"] { flex: 1; }
}

@media (max-width: 520px) {
  .navbar {
    padding: 8px 10px;
    min-height: 56px;
    gap: 6px;
  }

  .navbar-logo {
    height: 44px;
    margin-right: 6px;
  }

  .navbar a,
  .navbar button.navbar-item,
  .navbar .dropdown-btn.navbar-item {
    padding: 7px 10px;
    margin-right: 0;
  }

  .navbar-search input[type="text"] {
    font-size: 16px; /* avoid iOS zoom */
  }

  .navbar-social {
    margin-left: 0;
  }

  .social-icon {
    width: 28px;
    height: 28px;
  }
}

@media (max-width: 380px) {
  .navbar a.navbar-item {
    font-variant: normal;
  }
}

hr {
    border: none;
    border-top: 1px solid #e3f6e8;
    margin: 32px
}

/* Hero atractivo para la sección Aves */
.aves-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px 12px;
  margin: 6px 0 22px 0;
  position: relative;
  z-index: 2; /* por encima del fondo difuminado */
}

/* Hero más impactante (sin cambiar HTML): panel glass detrás del título */
.aves-hero-inner {
  max-width: 1100px;
  width: 92%;
  padding: 18px 18px;
  background: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.06));
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 20px;
  box-shadow: var(--shadow-strong);
  backdrop-filter: blur(14px) saturate(120%);
  position: relative;
  overflow: hidden;
}

.aves-hero-inner::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0), var(--neon-soft), rgba(255,255,255,0));
  pointer-events: none;
  opacity: 0.65;
}

/* Hero: asegurar recorte y control del tamaño/posición del fondo */
.ave-detail-hero {
  min-height: 100vh;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #101010;  
}

/* botón volver en esquina */
.ave-back{
  position: fixed;
  left: 18px;
  top: 16px;
  z-index: 60;
  background: rgba(0,0,0,0.45);
  color: #fff;
  border: none;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,0.45);
}

@media (max-width: 520px) {
  .ave-back{
    left: 10px;
    top: 10px;
    padding: 8px 10px;
  }
}

/* contenedor centrado y con espacio interior para que la tarjeta no toque los bordes */
.ave-detail-container {
  width: 100%;
  max-width: 1800px;
  padding: 48px 28px;
  box-sizing: border-box;
  z-index: 50;
  margin: 0 auto;
}

@media (max-width: 520px) {
  .ave-detail-container {
    padding: 18px 12px;
  }

  .ave-detail-card{
    padding: 16px;
    gap: 14px;
  }
}

/* si quieres que se muestre toda la imagen sin recortar (pero con posibles barras laterales/verticales) */
.ave-detail-hero.bg-contain {
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}


/* tarjeta glass principal */
.ave-detail-card{
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255,255,255,0.02));
  border-radius: 16px;
  padding: 20px;
  /* sombra reducida para evitar el gran rectángulo oscuro */
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(6px) saturate(110%);
  border: 1px solid rgba(165, 192, 167, 0.722);
}

.btn-play-audio {
    background: #4CAF50;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    margin-left: 10px;
    transition: all 0.3s ease;
}

.btn-play-audio:hover {
    background: #45a049;
    transform: scale(1.05);
}

.btn-play-audio.playing {
    background: #f44336;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(244, 67, 54, 0); }
    100% { box-shadow: 0 0 0 0 rgba(244, 67, 54, 0); }
}

.ave-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

/* asegurar que el contenido (tarjeta, botones) quede por encima */
.ave-detail-container,
.ave-detail-card,
.ave-back {
  position: relative;
  z-index: 50;
}

.ave-detail-title {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(28px, 4.6vw, 56px);
  line-height: 1.02;
  color: #fff;
  text-shadow: 0 6px 20px rgba(0,0,0,0.5);
}

.ave-detail-scientific {
  display: block;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 0.44em;
  font-weight: 600;
  color: rgba(235,245,230,0.9);
  margin-top: 6px;
}

.ave-detail-lead {
  margin-top: 10px;
  color: rgba(240,250,240,0.9);
  font-size: 20px;
  line-height: 1.6;
}

/* cuerpo dividido: main + aside (imagen y meta) */
.ave-body {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 24px;
  align-items: start;
}

@media (max-width: 980px) {
  .ave-body {
    grid-template-columns: 1fr;
  }

  .ave-main{
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .ave-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 520px) {
  .ave-detail-title {
    font-size: clamp(24px, 7.5vw, 40px);
  }

  .ave-detail-lead {
    font-size: 16px;
  }

  .btn-play-audio {
    margin-left: 0;
  }

  .ave-header {
    flex-wrap: wrap;
    align-items: flex-start;
  }
}

/* Main textual: scroll independiente si largo */
.ave-main{
  max-height: calc(100vh - 220px);
  overflow: auto;
  padding-right: 6px;
}

/* aside con imagen */
.ave-aside{
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:center;
}

.ave-figure{
  width:100%;
  border-radius:12px;
  overflow:hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));
  box-shadow: 0 18px 40px rgba(0,0,0,0.5);
}

.ave-figure img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
}

.ave-figure .model-3d-canvas,
.ave-figure .animal-3d-canvas{
  display:block;
  width:100%;
  max-width:none;
  height:auto;
  aspect-ratio:1/1;
  background: radial-gradient(circle at top, rgba(255,255,255,0.2), rgba(0,0,0,0.18));
}

/* meta y acciones */
.ave-meta{
  width:100%;
  background: rgba(0,0,0,0.18);
  padding:10px 12px;
  border-radius:10px;
  color: #eaf9e7;
  font-size:14px;
}

.size-ref{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.size-ref-header{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.size-ref-label{
  font-weight: 800;
  color: rgba(234,249,231,0.92);
}

.size-ref-img{
  width: 100%;
  height: auto;
  max-height: 220px;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
}

.size-ref-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.size-ref-item{
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.size-ref-item.is-active{
  border-color: rgba(97, 222, 43, 0.55);
  box-shadow: 0 0 0 2px rgba(103, 184, 68, 0.18) inset;
  border-width: 3px;
}

.size-ref-item img{
  width: 100%;
  height: 110px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.12);
}

.size-ref-item-label{
  font-weight: 800;
  color: rgba(234,249,231,0.92);
}

.size-ref-item-range{
  font-size: 12px;
  color: rgba(234,249,231,0.72);
}

@media (max-width: 520px){
  .size-ref-grid{
    grid-template-columns: 1fr;
  }
  .size-ref-item img{
    height: 130px;
  }
}

.size-ref-note{
  font-size: 12px;
  color: rgba(234,249,231,0.75);
}
.ave-actions {
  display:flex;
  gap:8px;
  width:100%;
  justify-content:center;
}

/* (sobrescrito arriba) */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.10);
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.14);
  font-weight: 800;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  user-select: none;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.20);
}

.btn:focus-visible {
  outline: 3px solid rgba(123,182,97,0.25);
  outline-offset: 2px;
}

/* Variantes */
.btn.btn-primary {
  background: linear-gradient(135deg, rgba(123,182,97,1), rgba(90,160,63,1));
  border-color: rgba(0,0,0,0.08);
  color: #fff;
  box-shadow: 0 18px 50px rgba(0,0,0,0.26), 0 0 0 1px rgba(255,255,255,0.14) inset;
}

.btn.btn-primary:hover {
  box-shadow: 0 22px 64px rgba(0,0,0,0.30), 0 0 22px var(--neon-soft);
}

.btn.btn-ghost {
  background: rgba(255,255,255,0.12);
}

/* En páginas claras (tarjetas blancas) la .btn por defecto debe ser legible */
.body-content .btn {
  background: rgba(255,255,255,0.70);
  color: var(--ink-2);
  border-color: rgba(31,42,26,0.12);
}

.body-content .btn.btn-primary {
  background: linear-gradient(135deg, rgba(123,182,97,1), rgba(90,160,63,1));
  color: #fff;
  border-color: rgba(0,0,0,0.08);
}

/* Título principal: elegante y responsivo */
.aves-title {
  margin: 0;
  font-family: "Playfair Display", "Georgia", serif;
  font-weight: 700;
  font-size: clamp(28px, 5.6vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-shadow: 0 18px 60px rgba(0,0,0,0.42);
  display: inline-block;
}

/* Acento dentro del título */
.aves-title-accent {
  display: inline-block;
  margin-left: .6rem;
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  font-size: 0.56em;
  color: #eaf9e7;
  background: linear-gradient(90deg, rgba(123,182,97,0.98), rgba(90,160,63,0.95));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding: 2px 8px;
  border-radius: 8px;
  vertical-align: middle;
  box-shadow: 0 6px 20px rgba(90,160,63,0.12);
}

/* Subtítulo más discreto */
.aves-subtitle {
  margin: 10px 0 0 0;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: clamp(12px, 1.8vw, 16px);
  color: rgba(255,255,255,0.94);
  opacity: 0.95;
}

.aves-container {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    justify-content: center;
    margin-top: 32px;
}

@media (max-width: 520px) {
  .aves-container {
    gap: 14px;
    margin-top: 18px;
  }
}

.ave-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(123,182,97,0.10);
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    width: 180px;
}

@media (max-width: 520px) {
  .ave-card {
    width: min(46vw, 220px);
    padding: 12px;
  }

  .ave-img {
    margin-bottom: 10px;
  }
}

@media (max-width: 360px) {
  .ave-card {
    width: 100%;
    max-width: 320px;
  }
}
.ave-card:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 24px rgba(123,182,97,0.18);
}
.ave-img {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 12px;
}
.ave-nombre {
    font-weight: bold;
    color: #7bb661;
    margin: 0;
}
.nombre-cientifico,
.ave-info em {
    font-style: italic;
    font-weight: 400;
    color: #444; /* ajusta color si quieres */
}
.ave-info {
  background: rgba(255,255,255,0.92);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.20);
  border: 1px solid rgba(31, 42, 26, 0.12);
  backdrop-filter: blur(12px) saturate(120%);
    margin: 24px auto 0 auto;
    max-width: 500px;
    padding: 24px;

    opacity: 0;
    transform: translateY(12px) scale(0.98);
    pointer-events: none;
    transition: opacity 320ms ease, transform 320ms cubic-bezier(.2,.8,.2,1);
    will-change: opacity, transform;
    position: relative;
    z-index: 5; /* aseguramos que esté por encima del carrusel */
}

.ave-info h2 {
  margin: 0;
  color: var(--ink-2);
  letter-spacing: -0.01em;
}

.ave-info p {
  margin: 10px 0 0 0;
  color: rgba(31,42,26,0.86);
  line-height: 1.55;
}

/* mejorar visibilidad del enlace "Ver ficha" dentro de .ave-info */
.ave-info a.btn {
  background: transparent;              /* transparente para que no choque con el panel */
  color: #1f7a2e;                       /* color visible (verde oscuro) */
  border: 1px solid rgba(31,122,46,0.12);
  box-shadow: none;
  padding: 6px 10px;
  font-weight: 700;
  text-decoration: none;
}

.ave-info a.btn:hover,
.ave-info a.btn:focus {
  background: rgba(31,122,46,0.08);
  color: #0f4a1a;
  outline: none;
}

.ave-info.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.aves-background {
    /* sustituir la regla antigua por esta versión */
    position: relative;
    min-height: calc(100vh - 80px); /* ajustar si hace falta */
    border-radius: 0;
    padding: 32px 24px;
    margin: 0;
    max-width: 100vw;
    box-sizing: border-box;
    overflow: hidden;
}

.ave-background {
    /* sustituir la regla antigua por esta versión */
    position: relative;
    min-height: calc(100vh - 100px); /* ajustar si hace falta */
    border-radius: 0;
    padding: 0px 0px;
    margin: 0;
    max-width: 100vw;
    box-sizing: border-box;
    overflow: hidden;
}

/* capa con la imagen de fondo y blur */
.aves-background::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('/static/fondo_aves.png') no-repeat center center fixed;
    background-size: cover;
    filter: blur(4px) brightness(1); /* difumina y oscurece un poco */
    transform: scale(1.03); /* evita bordes visibles al difuminar */
    z-index: 0;
    pointer-events: none;
}

  .animals-background--mamiferos::before {
    background-image: url('/static/fondo_mamiferos.png');
  }

  .animals-background--reptiles::before {
    background-image: url('/static/fondo_reptiles.png');
  }

  .animals-background--anfibios::before {
    background-image: url('/static/fondo_anfibios.png');
  }

/* capa con la imagen de fondo y blur */
.ave-background::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('/static/fondo_fichas_detail.png') no-repeat center center fixed;
    background-size: cover;
    filter: blur(0px) brightness(1); /* difumina y oscurece un poco */
    transform: scale(1.03); /* evita bordes visibles al difuminar */
    z-index: 0;
    pointer-events: none;
}

/* overlay semitransparente para mejorar contraste sobre la imagen */
.aves-background::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.12);
    z-index: 0;
    pointer-events: none;
}

/* overlay semitransparente para mejorar contraste sobre la imagen */
.ave-background::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.12);
    z-index: 0;
    pointer-events: none;
}
/* Responsive tweaks */
@media (max-width: 560px) {
  .aves-title { font-size: clamp(20px, 9vw, 32px); }
  .aves-title-accent { display:block; margin-top:6px; font-size:0.9em; }
  .aves-subtitle { font-size: 13px; }
}

/* el contenido debe quedarse por encima de las capas de fondo */
.aves-background > * {
    position: relative;
    z-index: 1;
}

/* ficha: layout */
.ave-page .ave-card {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 24px;
  align-items: start;
  max-width: 1100px;
  margin: 24px auto;
  padding: 18px;
}
.ave-media img { width:100%; height:auto; border-radius:12px; box-shadow:0 12px 36px rgba(0,0,0,0.18); }

/* detalles acordeón estilo claro sobre glass */
.ave-section {
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  margin-bottom: 12px;
  border: 1px solid rgba(255,255,255,0.04);
}
.ave-section summary {
  padding: 12px 14px;
  font-weight: 700;
  cursor: pointer;
  color: #eaf9e7;
  list-style: none;
  font-size: clamp(16px, 2.2vw, 20px);
}
.ave-section[open] { box-shadow: 0 10px 28px rgba(0,0,0,0.06); }
.ave-section-body {
  padding: 10px 14px 16px;
  color: rgba(240,250,240,0.95);
  line-height: 1.6;
  font-size: clamp(15px, 1.9vw, 18px);
}

/* Dimorfismo (detalle de ave) */
.ave-dimorfismo-layout {
  display: grid;
  grid-template-columns: minmax(0, 600px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin: 10px 0 12px;
}

.ave-dimorfismo-media {
  min-width: 0;
}

.ave-dimorfismo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.ave-dimorfismo-figure {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  box-shadow: 0 14px 34px rgba(0,0,0,0.22);
  display: flex;
  flex-direction: column;
}

.ave-dimorfismo-figure img {
  width: 100%;
  height: 280px;
  display: block;
  object-fit: contain;
  background: linear-gradient(180deg, rgba(0,0,0,0.22), rgba(0,0,0,0.34));
  padding: 8px;
}

.ave-dimorfismo-figure figcaption {
  padding: 10px 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: #eaf9e7;
  background: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.30));
}

.ave-dimorfismo-text {
  margin-top: 0;
}

@media (max-width: 680px) {
  .ave-dimorfismo-layout { grid-template-columns: 1fr; }
  .ave-dimorfismo-grid { grid-template-columns: 1fr; }
  .ave-dimorfismo-figure img { height: 240px; }
}

/* responsive: en móviles la tarjeta pasa a columna y la imagen arriba */
@media (max-width: 980px){
  .ave-body { grid-template-columns: 1fr; }
  .ave-aside { order: -1; }
  .ave-detail-card { padding: 16px; }
  .ave-detail-container { padding: 20px; }
  .ave-section summary { font-size: 15px; padding: 10px 12px; }
  .ave-section-body { font-size: 14px; padding: 10px 12px; line-height: 1.6; }
}

@media (max-width: 520px){
  .ave-detail-container { padding: 18px 12px; }
}

/* mejorar legibilidad del fondo cuando la imagen es muy clara */
.ave-detail-hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.42));
  z-index: 40;
  pointer-events: none;
}

/* asegurar que el contenido principal esté por encima del overlay y hero */
.ave-detail-container, .ave-back { position: relative; z-index: 60; }

/* Carrusel: reglas deterministas para evitar saltos */
:root {
  --item-width: 420px; /* ajusta al tamaño que quieras (px) */
  --gap: 20px;
  --edge-buffer: 12px; /* espacio extra para evitar recortes en los márgenes */
}

/* Botones de ordenación posicionados fuera del flujo */
.sort-buttons {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 6;
}
/* Evitar que los botones tapen controles importantes */
.sort-buttons .sort-button {
  min-width: 140px;
}
/* estilo base (ya existente) */
.sort-button {
  display: inline-block;
  padding: 10px 14px;
  background: linear-gradient(135deg,#f7faf6,#f0f8ec);
  color: #2d3a22;
  text-decoration: none;
  border-radius: 12px;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  border: 1px solid rgba(0,0,0,0.04);
}

/* testigo visual cuando está activo */
.sort-button.active {
  background: linear-gradient(135deg,#7bb661,#5aa03f);
  color: #fff;
  box-shadow: 0 18px 50px rgba(90,160,63,0.26), 0 0 22px var(--neon-soft);
  transform: translateY(-3px);
  border-color: rgba(0,0,0,0.08);
  position: relative;
}

/* pequeño icono ✓ a la derecha indicando activo */
.sort-button.active::after {
  content: "✓";
  display: inline-block;
  margin-left: 10px;
  font-weight: 900;
  color: rgba(255,255,255,0.95);
  background: rgba(0,0,0,0.08);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-size: 12px;
  vertical-align: middle;
}

/* accesibilidad: apariencia cuando aria-pressed true (por si JS cambia estado) */
.sort-button[aria-pressed="true"] {
  outline: 3px solid rgba(123,182,97,0.18);
  outline-offset: 3px;
}
.sort-button:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 30px rgba(0,0,0,0.22);
  opacity: 0.98;
}

.carousel-container {
  position: relative; /* contenedor relativo para posicionar los botones sin afectar el flujo */
  display: flex;
  align-items: center;
  justify-content: center; /* mantiene el carrusel siempre en el centro */
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  margin: 40px 0;
}

/* Base del carrusel con más presencia */
.carousel-container::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(1200px, 96vw);
  height: min(560px, 70vh);
  background: radial-gradient(closest-side, rgba(123,182,97,0.22), rgba(0,0,0,0));
  filter: blur(2px);
  pointer-events: none;
  z-index: 0;
}
/* Responsive: en pantallas pequeñas, colocar los botones encima del carrusel (ya no absolutos) */
@media (max-width: 760px) {
  .carousel-container {
    flex-direction: column;
    align-items: center;
  }
  .sort-buttons {
    position: static;
    transform: none;
    margin-bottom: 12px;
    flex-direction: row;
    gap: 8px;
  }
}
.carousel-viewport {
  width: 80vw;
  max-width: 1100px;
  /* mantener overflow:hidden para recortar scroll visual, pero la pista tendrá buffer */
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  border-radius: 22px;
}

.carousel-viewport::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.05));
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: inherit;
  box-shadow: 0 26px 80px rgba(0,0,0,0.22);
  backdrop-filter: blur(12px) saturate(120%);
  pointer-events: none;
  z-index: 0;
}

.carousel-viewport::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 1px var(--neon-border) inset, 0 0 38px var(--neon-soft);
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}

/* Track con padding inline calculado para centrar items exactamente
   y añadir un buffer extra para que las imágenes no se corten en los bordes */
.carousel-track {
  display: flex;
  gap: var(--gap);
  align-items: center;
  padding-left: calc((100vw - var(--item-width)) / 2 + var(--edge-buffer));
  padding-right: calc((100vw - var(--item-width)) / 2 + var(--edge-buffer));
  box-sizing: content-box;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overflow: visible; /* la pista puede pintar fuera del viewport para evitar recortes */
  scroll-snap-type: none;
  transition: transform 360ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
  position: relative;
  z-index: 1;
}

/* Items con ancho fijo para evitar variaciones */
.carousel-item {
  flex: 0 0 var(--item-width);
  width: var(--item-width);
  box-sizing: border-box;
  transition: transform 300ms ease, opacity 300ms ease;
  cursor: pointer;
  text-align: center;
  user-select: none;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  outline: none;
}

.carousel-item:focus-visible {
  outline: 3px solid rgba(123,182,97,0.32);
  outline-offset: 6px;
  border-radius: 18px;
}

.carousel-item img {
  width: 100%;
  /* mantener relación de aspecto sin recortar */
  height: auto;
  max-height: calc(70vh); /* evita que la imagen desborde verticalmente */
  object-fit: contain; /* <- cambio clave: no recorta la imagen */
  border-radius: 18px;
  display: block;
  margin: 0 auto;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
  background: #fffefeb3; /* fondo para imágenes con áreas transparentes o diferente ratio */
}

/* Extra énfasis al elemento central */
.carousel-item.is-center img,
.carousel-item.is-center .model-3d-canvas,
.carousel-item.is-center .animal-3d-canvas {
  box-shadow: 0 26px 84px rgba(0,0,0,0.30);
  border: 1px solid rgba(255,255,255,0.32);
  filter: drop-shadow(0 0 18px var(--neon-soft));
}

/* Center / side / hidden styling */
.carousel-item.is-center { transform: scale(1.06); z-index: 3; opacity: 1; }
.carousel-item.is-side   { transform: scale(0.82); z-index: 2; opacity: 0.95; }
.carousel-item.is-hidden { transform: scale(0.6);  z-index: 1; opacity: 0.45; }

.carousel-item.is-center {
  filter: saturate(1.05) contrast(1.02);
}

/* Buttons */
.carousel-btn {
  background: linear-gradient(135deg, rgba(123,182,97,0.98), rgba(90,160,63,0.98));
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  font-size: 2em;
  line-height: 1;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 38px rgba(0,0,0,0.22);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease, opacity .12s ease;
  backdrop-filter: blur(10px) saturate(120%);
}
.carousel-btn:hover {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.02);
  box-shadow: 0 20px 46px rgba(0,0,0,0.28);
}

.carousel-btn:active { transform: translateY(-1px) scale(1.01); }

.carousel-btn:focus-visible {
  outline: 3px solid rgba(255,255,255,0.38);
  outline-offset: 3px;
}

.carousel-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}

/* Responsive */
@media (max-width: 900px) {
  :root { --item-width: 320px; }
  .carousel-viewport { width: 92vw; padding: 0; }
  .carousel-track { padding-left: calc((100vw - var(--item-width)) / 2); padding-right: calc((100vw - var(--item-width)) / 2); }
  .carousel-item img { height: 50vh; }
}
@media (max-width: 480px) {
  :root { --item-width: 260px; }
  .carousel-item img { height: 40vh; }
}

.alphabet-list {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  grid-template-columns: repeat(2, min-content);
  gap: 8px 10px; /* fila / columna */
  max-height: calc(100vh - 140px);
  overflow: auto;
  padding: 8px;
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(10px) saturate(120%);
  border-radius: 14px;
  z-index: 60;
  box-shadow: 0 16px 42px rgba(0,0,0,0.16);
  border: 1px solid rgba(31,42,26,0.10);
}

/* Ajustes responsive extra: evita que el panel y listas tapen contenido */
@media (max-width: 760px) {
  .aves-hero-inner { padding: 14px; border-radius: 18px; }
}

/* botones (mantener/ajustar tus reglas existentes) */
.alphabet-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(31,42,26,0.10);
  color: var(--ink-2);
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(0,0,0,0.10);
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.alphabet-btn:hover {
  transform: translateY(-2px);
  background: rgba(247, 255, 246, 0.98);
  box-shadow: 0 14px 30px rgba(0,0,0,0.14);
}

.alphabet-btn:focus-visible {
  outline: 3px solid rgba(123,182,97,0.28);
  outline-offset: 2px;
}

/* responsive: en pantallas pequeñas colocarlos en fila debajo del carrusel */
@media (max-width: 760px) {
  .alphabet-list {
    position: static;
    top: auto;
    right: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    background: transparent;
    padding: 0;
    box-shadow: none;
    max-height: none;
    transform: none;
  }
  .alphabet-btn { height: 34px; min-width: 30px; }
}

/* estilos para widget de datos curiosos */
.curiosidades-widget {
  display: grid;
  gap: 10px;
  align-items: start;
  padding: 12px;
}

.curiosidades-widget .fact-title {
  color: #FFB703;              /* amarillo-anaranjado vibrante */
  font-weight: 800;
  text-shadow: 0 4px 18px rgba(0,0,0,0.35);
}

.curiosidades-widget .fact-text {
  color: #DFF7E4;              /* verde-menta claro para buen contraste sobre el fondo oscuro */
  font-size: 1.02rem;
}

/* acento visual a la izquierda para destacar la tarjeta */
.curiosidades-widget .fact-display {
  border-left: 4px solid rgba(255,183,3,0.14);
  padding-left: 12px;
}

/* ajustar también cuando hay título + texto para separación */
.curiosidades-widget .fact-title + .fact-text {
  display: block;
  margin-top: 6px;
}

.fact-display {
  min-height: 72px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  color: inherit;
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.6;
  transition: opacity 260ms ease, transform 260ms ease;
  opacity: 1;
}
.fact-display.fade-out {
  opacity: 0;
  transform: translateY(6px);
}
.curiosidades-controls {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.curiosidades-controls .ctrl {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.06);
  color: #fff;
  padding:6px 10px;
  border-radius:8px;
  cursor:pointer;
  font-weight:700;
}
.curiosidades-controls .ctrl[aria-pressed="true"] {
  background: rgba(123,182,97,0.95);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.curiosidades-controls .ctrl.like[aria-pressed="true"] {
  background: linear-gradient(135deg, #ef476f, #d62839);
  border-color: rgba(255,255,255,0.12);
}
.curiosidades-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.curiosidades-footer .progress {
  color: rgba(255,255,255,0.7);
  font-size: 13px;
}
.curiosidades-footer .likes-status {
  color: rgba(255,255,255,0.82);
  font-size: 13px;
}
@media (max-width:760px){
  .curiosidades-controls { justify-content: space-between; }
  .fact-display { font-size: 15px; }
}

.model-3d-canvas {
    width: 100%;
    max-width: 300px;
    height: 300px;
    border-radius: 15px;
    cursor: pointer;
}

.carousel-item .model-3d-canvas {
    object-fit: cover;
}

.model-3d-canvas:hover {
    cursor: pointer;
}

/* Loader opcional */
.model-loading::before {
    content: "🔄 Cargando...";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 10px;
    border-radius: 5px;
    z-index: 10;
}