@import url('https://fonts.googleapis.com/css2?family=Special+Gothic+Expanded+One&family=DM+Sans:wght@300;400;500;600&display=swap');

:root {
  --negro: #0d0d0d;
  --blanco: #ffffff;
  --crema: #f7f5f0;
  --verde-lima: #b8e04a;
  --verde-lima-hover: #a6cc3a;
  --verde-oscuro: #1a2e0f;
  --gris-texto: #3a3a3a;
  --gris-claro: #e8e8e3;
  --gris-medio: #8a8a82;
  --font-titulo: 'Special Gothic Expanded One', sans-serif;
  --font-cuerpo: 'DM Sans', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 17px; }

body {
  font-family: var(--font-cuerpo);
  color: var(--negro);
  background: var(--blanco);
  overflow-x: hidden;
}

/* ===== NAVBAR ===== */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 16px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.35s ease;
  background: rgba(13,13,13,0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

nav.dark-bg {
  background: rgba(13,13,13,0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ── Variante clara (quitar clase "nav-clara" del <nav> para volver al oscuro) ── */
nav.nav-clara,
nav.nav-clara.dark-bg {
  background: #d6d6d6;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid #999;
}
nav.nav-clara .nav-links a       { color: rgba(30,30,30,0.85); }
nav.nav-clara .nav-links a:hover { color: var(--verde-oscuro); }
nav.nav-clara .nav-contact       { color: rgba(30,30,30,0.85); }
nav.nav-clara .nav-user          { color: rgba(30,30,30,0.7); }
nav.nav-clara .nav-logout        { color: rgba(30,30,30,0.6); border-color: rgba(30,30,30,0.25); }
nav.nav-clara .nav-logout:hover  { color: rgba(30,30,30,0.9); border-color: rgba(30,30,30,0.4); background: rgba(30,30,30,0.06); }
nav.nav-clara .lang-selector select { color: rgba(30,30,30,0.7); }
nav.nav-clara .hamburger span    { background: #333; }

nav.light-mode {
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gris-claro);
}

nav.light-mode .nav-links a,
nav.light-mode .nav-contact { color: var(--negro); }

.nav-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.nav-logo svg { width: 152px; height: auto; }

.nav-links {
  display: flex;
  gap: 28px;
  list-style: none;
}

.nav-links a {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  font-weight: 400;
  transition: color 0.2s;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  gap: 20px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.nav-links::-webkit-scrollbar {
  display: none;
}

.nav-links a:hover { color: var(--verde-lima); }

.nav-collapse {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  margin-left: 32px;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-contact {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-size: 0.82rem;
}

.nav-logout {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  font-size: 0.78rem;
  padding: 6px 14px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 100px;
  transition: all 0.2s;
}

.nav-logout:hover {
  color: rgba(255,255,255,0.9);
  border-color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.1);
}

.lang-selector select {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}

.lang-selector select:hover {
  color: var(--verde-lima);
}

.lang-selector select option {
  background: var(--negro);
  color: white;
}

.nav-user {
  color: rgba(255,255,255,0.7);
  font-size: 0.8rem;
}

.btn-sumate {
  background: var(--verde-lima);
  color: var(--negro);
  border: none;
  padding: 10px 22px;
  border-radius: 100px;
  font-family: var(--font-cuerpo);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s, transform 0.15s;
}

.btn-sumate:hover {
  background: var(--verde-lima-hover);
  transform: translateY(-1px);
}

/* ===== BOTONES GENERALES ===== */
.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 100px;
  font-family: var(--font-cuerpo);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
  border: none;
}

.btn-pill.verde {
  background: var(--verde-lima);
  color: var(--negro);
}
.btn-pill.verde:hover { background: var(--verde-lima-hover); transform: translateY(-1px); }

.btn-pill.outline-blanco {
  background: transparent;
  color: var(--blanco);
  border: 1.5px solid rgba(255,255,255,0.6);
}
.btn-pill.outline-blanco:hover { border-color: var(--blanco); background: rgba(255,255,255,0.08); }

.btn-pill.outline-negro {
  background: transparent;
  color: var(--negro);
  border: 1.5px solid var(--negro);
}
.btn-pill.outline-negro:hover { background: var(--negro); color: var(--blanco); }

.btn-pill.danger {
  background: #fee2e2;
  color: #991b1b;
  border: 1.5px solid #fee2e2;
}
.btn-pill.danger:hover { background: #fecaca; border-color: #fecaca; }

/* ===== SECCIÓN LABEL ===== */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris-medio);
  margin-bottom: 20px;
}

.section-label::before {
  content: '';
  width: 20px;
  height: 1.5px;
  background: var(--gris-medio);
  display: block;
}

/* ===== HERO ===== */
.hero {
  position: relative;
  height: 100vh;
  min-height: 700px;
  overflow: hidden;
  margin-top: 0;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: url('../img/hero.png') center/cover no-repeat;
  filter: brightness(0.87);
  transform: scale(1.03);
  transition: transform 8s ease;
}

.hero:hover .hero-bg { transform: scale(1); }

.hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 48px 80px;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 120px;
}

.hero h1 {
  font-family: var(--font-titulo);
  font-size: clamp(2.4rem, 5vw, 4.8rem);
  font-weight: 300;
  color: var(--blanco);
  line-height: 1.05;
  max-width: 780px;
  margin-bottom: 24px;
}

.hero-sub {
  color: rgba(255,255,255,1);
  font-size: 1rem;
  max-width: 480px;
  margin-bottom: 36px;
  line-height: 1.65;
}

.hero-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-caption {
  position: absolute;
  bottom: 20px;
  right: 48px;
  color: rgba(255,255,255,0.45);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}

/* ===== QUÉ ESTÁ PASANDO ===== */
.que-pasa {
  background: var(--crema);
  padding: 100px 48px;
}

.que-pasa-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}



.que-pasa h2 {
  font-family: var(--font-titulo);
  font-size: clamp(2.4rem, 4vw, 3.8rem);
  font-weight: 900;
  line-height: 1.05;
  margin-bottom: 20px;
}

.que-pasa h2 span {
  color: #2a6e2a;
}

.que-pasa-stats {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.stat-item {
  background: var(--blanco);
  border-radius: 14px;
  padding: 22px 26px;
  border: 1px solid var(--gris-claro);
}

.stat-item .num {
  font-family: var(--font-titulo);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--negro);
  line-height: 1;
  margin-bottom: 5px;
}

.stat-item .label {
  font-size: 0.85rem;
  color: var(--gris-texto);
  line-height: 1.4;
}

/* Chart area */
.chart-area {
  background: var(--blanco);
  border-radius: 16px;
  padding: 28px;
  border: 1px solid var(--gris-claro);
  margin-top: 24px;
}

.chart-bar-container {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 120px;
  margin-bottom: 10px;
}

.chart-bar {
  flex: 1;
  background: #d4ead4;
  border-radius: 4px 4px 0 0;
  position: relative;
  transition: background 0.2s;
  cursor: pointer;
}

.chart-bar:hover { background: var(--verde-lima); }

.chart-bar.highlight { background: #6ab86a; }

.chart-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  color: var(--gris-medio);
}

.btn-ver-datos {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--negro);
  text-decoration: none;
  font-weight: 600;
  margin-top: 16px;
  border-bottom: 1.5px solid var(--verde-lima);
  padding-bottom: 2px;
  transition: color 0.2s;
}

/* ===== SOMOS UNA RED (full bg) ===== */
.somos-red {
  position: relative;
  height: 70vh;
  min-height: 500px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;
}

.somos-red-bg {
  position: absolute;
  inset: 0;
  background: url('https://images.unsplash.com/photo-1542601906990-b4d3fb778b09?w=1600&q=80') center/cover;
  filter: brightness(0.82);
}

.somos-red-content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}


.somos-red-right {
  max-width: 380px;
}

.somos-red-right p {
  color: rgba(255,255,255,0.8);
  font-size: 1rem;
  line-height: 1.65;
  margin-bottom: 8px;
}

.somos-red-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  display: block;
}

/* ===== CÓMO ACTUAMOS ===== */
.como-actuamos {
  padding: 120px 48px;
  background: var(--blanco);
  text-align: center;
}

.como-actuamos-inner {
  max-width: 900px;
  margin: 0 auto;
}

.como-actuamos h2 {
  font-family: var(--font-titulo);
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 900;
  line-height: 1.0;
  margin-bottom: 24px;
}

.como-actuamos .sub {
  font-size: 1rem;
  color: var(--gris-texto);
  max-width: 560px;
  margin: 0 auto 48px;
  line-height: 1.65;
}

/* MODELO - CARD CON FONDO DE IMAGEN */
.modelo-card-bg {
  position: relative;
  width: 100%;
  max-width: 700px;
  margin: 40px auto 0;
  border-radius: 20px;
  overflow: hidden;
  background: url('../img/canvas.png') center/cover no-repeat;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modelo-card-overlay {
  display: none;
}

.modelo-card-text {
  position: relative;
  z-index: 2;
  padding: 48px 32px;
  text-align: center;
}

.modelo-card-text p {
  color: var(--negro);
  font-size: 1.05rem;
  line-height: 1.7;
  margin: 0;
  max-width: 600px;
}

@media (max-width: 768px) {
  .modelo-card-bg {
    min-height: 200px;
    border-radius: 14px;
  }
  .modelo-card-text {
    padding: 32px 20px;
  }
  .modelo-card-text p {
    font-size: 0.92rem;
    line-height: 1.6;
  }
}

@media (max-width: 480px) {
  .modelo-card-bg {
    min-height: 180px;
    border-radius: 12px;
  }
  .modelo-card-text {
    padding: 24px 16px;
  }
  .modelo-card-text p {
    font-size: 0.85rem;
    line-height: 1.55;
  }
}

.trazable-note {
  font-size: 0.82rem;
  color: var(--gris-medio);
  margin-top: 24px;
}

.trazable-note a {
  color: var(--negro);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ===== YA PROTEGIMOS ===== */
.ya-protegimos {
  background: var(--crema);
  padding: 48px 48px 32px;
  text-align: center;
}

.ya-protegimos h2 {
  font-family: var(--font-titulo);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 900;
  margin-bottom: 6px;
}

.ya-protegimos .sub {
  color: var(--gris-medio);
  font-size: 0.9rem;
  margin-bottom: 24px;
}

/* Marquee logos */
.marquee-wrap {
  overflow: hidden;
  position: relative;
  margin: 0 -48px;
}

.marquee-wrap::before,
.marquee-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 100px;
  z-index: 2;
}

.marquee-wrap::before { left: 0; background: linear-gradient(to right, var(--crema), transparent); }
.marquee-wrap::after { right: 0; background: linear-gradient(to left, var(--crema), transparent); }

.marquee-track {
  display: flex;
  gap: 0;
  animation: marquee 30s linear infinite;
  width: max-content;
}

.marquee-track:hover { animation-play-state: paused; }

.marquee-item {
  padding: 12px 28px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gris-texto);
  white-space: nowrap;
  border-right: 1px solid var(--gris-claro);
  letter-spacing: 0.03em;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.ya-protegimos-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 24px;
}

/* ===== CARRUSEL LECTURAS ===== */
.lecturas-carousel {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}
.lecturas-track {
  display: flex;
  gap: 12px;
  transition: transform 0.5s ease;
}
.lectura-slide {
  min-width: calc(33.333% - 8px);
  height: 480px;
  flex-shrink: 0;
  border-radius: 16px;
  overflow: hidden;
  cursor: default;
}
.lectura-slide .novedad-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lectura-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.45);
  color: white;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lectura-btn:hover { background: rgba(0,0,0,0.7); }
.lectura-btn.prev { left: 14px; }
.lectura-btn.next { right: 14px; }
.lectura-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}
.lectura-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  cursor: pointer;
  transition: background 0.2s;
}
.lectura-dot.active { background: #fff; }

/* ===== NOVEDADES ===== */
.novedades {
  padding: 48px 48px;
  background: var(--blanco);
}

.novedades-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.novedades-header {
  margin-bottom: 48px;
}

.novedades-header h2 {
  font-family: var(--font-titulo);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 900;
  max-width: 500px;
  line-height: 1.15;
}

.novedades-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 20px;
  align-items: start;
}

.novedad-card {
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform 0.3s ease;
  text-decoration: none;
  display: block;
}

.novedad-card:hover { transform: scale(1.02); }

.novedad-img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
}

.novedad-card.large .novedad-img { aspect-ratio: 4/5; }

.novedad-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 28px 22px 22px;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);
  color: var(--blanco);
}

.novedad-tag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--verde-lima);
  margin-bottom: 8px;
  display: block;
}

.novedad-title {
  font-family: var(--font-titulo);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 10px;
}

.novedad-meta {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.6);
}

.novedades-footer {
  margin-top: 36px;
  text-align: left;
}

/* ===== CTA FINAL ===== */
.cta-final {
  position: relative;
  height: 70vh;
  min-height: 500px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.cta-final-bg {
  position: absolute;
  inset: 0;
  background: url('../img/cta-bosque.jpg') center/cover;
  filter: brightness(0.45);
}

.cta-final-content {
  position: relative;
  z-index: 2;
  padding: 0 24px;
}

.cta-final h2 {
  font-family: var(--font-titulo);
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 900;
  color: var(--blanco);
  line-height: 1.05;
  margin-bottom: 18px;
}

.cta-final p {
  color: rgba(255,255,255,1);
  font-size: 1rem;
  margin-bottom: 36px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* ===== FOOTER ===== */
footer {
  background: var(--negro);
  color: var(--blanco);
  padding: 60px 48px 30px;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}

.footer-brand p {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.65;
  margin-top: 16px;
  max-width: 240px;
}

.footer-col h4 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 16px;
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col ul a {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  font-size: 0.88rem;
  transition: color 0.2s;
}

.footer-col ul a:hover { color: var(--verde-lima); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.35);
}

.footer-legal {
  display: flex;
  gap: 20px;
}

.footer-legal a {
  color: rgba(255,255,255,0.35);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-legal a:hover { color: var(--blanco); }

/* ===== CONTACTO ===== */
.contacto-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.form-card {
  background: white;
  border-radius: 24px;
  padding: 48px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.08);
}

.form-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gris-medio);
  margin-bottom: 8px;
}

.form-field {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid #e4e8ed;
  border-radius: 10px;
  font-size: 0.95rem;
  font-family: var(--font-cuerpo);
  background: #f8fafb;
  color: var(--negro);
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  box-sizing: border-box;
}

.form-field:focus {
  border-color: var(--verde-lima);
  background: white;
}

.form-field::placeholder { color: #aab0b8; }

.info-card {
  background: white;
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.08);
}

.info-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid #f0f2f4;
}

.info-row:last-child { border-bottom: none; padding-bottom: 0; }
.info-row:first-child { padding-top: 0; }

.info-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.1rem;
}

.info-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gris-medio);
  margin-bottom: 4px;
}

.info-value {
  font-size: 0.95rem;
  color: var(--negro);
  line-height: 1.5;
}

/* ===== FOTO DE UBICACIÓN (contenedor imagen + caption) ===== */
.foto-ubicacion {
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 32px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}

.foto-ubicacion img {
  width: 100%;
  display: block;
}

.foto-ubicacion-caption {
  background: var(--negro);
  padding: 16px 24px;
  color: white;
  text-align: center;
}

.foto-ubicacion-caption p {
  font-size: 0.9rem;
  margin: 0;
}

/* ===== TARJETAS DE ALIANZAS / CERTIFICACIONES ===== */
.alianza-card {
  background: var(--blanco);
  border-radius: 16px;
  padding: 32px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, box-shadow 0.2s;
  display: block;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.alianza-card-dark {
  background: rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 32px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s;
  display: block;
}

.alianza-card-nombre {
  font-weight: 900;
  font-size: 1.3rem;
  color: var(--verde-lima);
  margin-bottom: 8px;
}

.alianza-card-label {
  font-size: 1rem;
  font-weight: 900;
  color: var(--verde-lima);
  margin-bottom: 8px;
  letter-spacing: 0.05em;
}

/* ===== SECCIONES DE PÁGINAS INTERNAS ===== */
.section-blanco {
  padding: 80px 48px;
  background: var(--blanco);
}

.section-crema {
  padding: 80px 48px;
  background: var(--crema);
}

.section-negro {
  padding: 80px 48px;
  background: var(--negro);
  color: white;
}

@media (max-width: 768px) {
  .section-blanco,
  .section-crema,
  .section-negro {
    padding: 60px 24px;
  }
}

/* ===== OTRAS PÁGINAS ===== */
.page-hero {
  padding-top: 160px;
  padding-bottom: 80px;
  background: var(--negro);
  color: var(--blanco);
  padding-left: 48px;
  padding-right: 48px;
}

.page-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.page-hero h1 {
  font-family: var(--font-titulo);
  font-size: clamp(2.4rem, 5vw, 4.8rem);
  font-weight: 300;
  line-height: 1.05;
  margin-bottom: 20px;
  max-width: 700px;
}

.page-hero p {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.7);
  max-width: 520px;
  line-height: 1.65;
}

.page-section {
  padding: 100px 48px;
  max-width: 1200px;
  margin: 0 auto;
}

/* ===== DONACIONES ===== */
.niveles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 60px;
}

.nivel-card {
  border-radius: 20px;
  padding: 36px 28px;
  background: var(--crema);
  border: 1.5px solid var(--gris-claro);
  position: relative;
  transition: transform 0.25s, box-shadow 0.25s;
}

.nivel-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}

.nivel-card.featured {
  background: var(--negro);
  color: var(--blanco);
  border-color: var(--negro);
}

.nivel-badge {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--verde-lima);
  color: var(--negro);
  padding: 4px 12px;
  border-radius: 100px;
  display: inline-block;
  margin-bottom: 20px;
}

.nivel-emoji {
  font-size: 2.5rem;
  margin-bottom: 16px;
  display: block;
}

.nivel-nombre {
  font-family: var(--font-titulo);
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.nivel-precio {
  font-size: 1rem;
  font-weight: 700;
  color: #2a6e2a;
  margin-bottom: 16px;
}

.nivel-card.featured .nivel-precio { color: var(--verde-lima); }

.nivel-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--gris-texto);
  margin-bottom: 20px;
}

.nivel-card.featured .nivel-desc { color: rgba(255,255,255,0.7); }

.nivel-beneficios {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 28px;
  font-size: 0.95rem;
}

.nivel-beneficios li {
  display: flex;
  gap: 10px;
  color: var(--gris-texto);
  line-height: 1.4;
}

.nivel-card.featured .nivel-beneficios li { color: rgba(255,255,255,1); }

.nivel-beneficios li::before {
  content: '✓';
  color: var(--verde-lima);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

.nivel-full {
  background: var(--crema);
  border-radius: 20px;
  padding: 48px;
  margin-top: 20px;
  border: 1.5px solid var(--gris-claro);
  grid-column: 1 / -1;
}

/* ===== PAGO MODAL ===== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.7);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-overlay.active {
  display: flex;
}

.modal-content {
  background: var(--blanco);
  border-radius: 24px;
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 32px;
  position: relative;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--gris-medio);
}

.modal-content h2 {
  font-family: var(--font-titulo);
  font-size: 1.8rem;
  font-weight: 900;
  margin-bottom: 8px;
}

.nivel-info {
  color: var(--verde-lima);
  font-weight: 600;
  margin-bottom: 20px;
  font-size: 0.9rem;
}

.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.col-6 {
  width: 50%;
}

.text-danger {
  color: #dc3545;
  font-size: 0.85rem;
  margin-top: 4px;
}

.modal-content .nivel-info {
  color: var(--verde-lima);
  font-weight: 600;
  margin-bottom: 24px;
}

.modal-form {
  margin-top: 20px;
}

.modal-form .form-group {
  margin-bottom: 16px;
}

.modal-form .form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--gris-texto);
}

.modal-form .form-group input,
.modal-form .form-group select {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--gris-claro);
  border-radius: 10px;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s;
}

.modal-form .form-group input:focus {
  border-color: var(--verde-lima);
}

.modal-form button[type="submit"] {
  width: 100%;
  padding: 14px;
  background: var(--verde-lima);
  color: var(--negro);
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
  transition: background 0.2s;
}

.modal-form button[type="submit"]:hover {
  background: var(--verde-lima-hover);
}

.modal-form button[type="submit"]:disabled {
  background: var(--gris-claro);
  cursor: not-allowed;
}

.gateway-section {
  margin: 20px 0;
}

.gateway-section h4 {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--gris-texto);
}

.gateway-btns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.gateway-btn {
  padding: 10px 8px;
  border: 1.5px solid var(--gris-claro);
  border-radius: 8px;
  background: var(--blanco);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
  text-align: center;
  transition: all 0.2s;
}

.gateway-btn:hover {
  border-color: var(--verde-lima);
}

.gateway-btn.active {
  background: var(--verde-lima);
  border-color: var(--verde-lima);
  color: var(--negro);
}

.alert-container {
  margin-top: 16px;
}

.alert {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 0.85rem;
}

.alert-danger {
  background: #fee2e2;
  color: #991b1b;
}

.alert-success {
  background: #dcfce7;
  color: #166534;
}

/* ===== TARJETAS DE PASOS ===== */
.pasos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
}

.paso-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  height: 312px;
  text-align: center;
}

.paso-card img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.paso-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,0.78) 100%);
}

.paso-card-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  z-index: 1;
}

.paso-num {
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--verde-lima);
  margin-bottom: 6px;
}

.paso-title {
  font-size: 0.85rem;
  margin-bottom: 4px;
  font-weight: 700;
  color: var(--blanco);
}

.paso-desc {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.1;
  margin: 0;
}

/* ===== STATS GRANDES ===== */
.stats-grandes {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  margin: 20px 0;
}

.stat-grande { text-align: center; }

.stat-grande-num {
  font-size: 3rem;
  font-weight: 900;
  color: var(--verde-lima);
}

.stat-grande-label {
  font-size: 0.85rem;
  color: var(--gris-texto);
}

/* ===== NOTA MODELO ===== */
.modelo-nota {
  background: var(--crema);
  border-radius: 16px;
  padding: 20px 28px;
  display: inline-block;
  margin-bottom: 24px;
}

.modelo-nota span {
  font-size: 0.82rem;
  color: var(--gris-medio);
}

/* ===== SECCIÓN KPI LINK ===== */
.kpi-link-section {
  background: var(--negro);
  padding: 48px;
  text-align: center;
}

.kpi-link {
  color: rgba(255,255,255,0.55);
  font-size: 0.95rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.25);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}

.kpi-link:hover {
  color: var(--verde-lima);
  border-color: var(--verde-lima);
}

/* ===== TOAST ===== */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--negro);
  color: var(--blanco);
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 0.9rem;
  z-index: 9999;
  display: none;
  font-family: var(--font-cuerpo);
}

.toast.show { display: block; }
.toast.success { border-left: 4px solid var(--verde-lima); }
.toast.error   { border-left: 4px solid #e74c3c; }
.toast.warn    { border-left: 4px solid #fbbf24; }

/* ===== ADMIN PAGES ===== */
.admin-section {
  padding: 24px 48px;
  background: var(--blanco);
}

.admin-container {
  max-width: 1200px;
  margin: 0 auto;
}

.admin-filters {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 0 20px;
}

.admin-filters input,
.admin-filters select {
  padding: 9px 14px;
  border: 1.5px solid var(--gris-claro);
  border-radius: 100px;
  font-size: 0.85rem;
  font-family: var(--font-cuerpo);
  background: var(--blanco);
  outline: none;
  transition: border-color 0.2s;
  appearance: none;
  -webkit-appearance: none;
}

.admin-filters input:focus,
.admin-filters select:focus {
  border-color: var(--verde-lima);
}

.admin-filters input { min-width: 200px; }

.admin-table-wrap {
  background: var(--blanco);
  border-radius: 16px;
  border: 1px solid var(--gris-claro);
  overflow: hidden;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  font-family: var(--font-cuerpo);
}

.admin-table th {
  padding: 14px 20px;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris-medio);
  border-bottom: 1px solid var(--gris-claro);
  white-space: nowrap;
}

.admin-table td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--gris-claro);
  color: var(--negro);
  vertical-align: middle;
}

.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: var(--crema); }

.admin-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 700;
}

.admin-badge.activo   { background: #dcfce7; color: #166534; }
.admin-badge.borrador { background: #f3f4f6; color: #6b7280; }
.admin-badge.on       { background: rgba(184,224,74,0.2); color: #3a6e1a; }
.admin-badge.off      { background: var(--gris-claro); color: var(--gris-medio); }

.admin-chip {
  display: inline-block;
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px solid;
}

.admin-chip.tag     { background: rgba(184,224,74,0.1); color: #3a6e1a; border-color: rgba(184,224,74,0.3); }
.admin-chip.kml     { background: rgba(56,189,248,0.1); color: #0369a1; border-color: rgba(56,189,248,0.25); }
.admin-chip.global  { background: rgba(184,224,74,0.06); color: #5a8a2e; border-color: rgba(184,224,74,0.15); }

.admin-thumb {
  width: 48px;
  height: 36px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--gris-claro);
  display: block;
}

.admin-thumb-placeholder {
  width: 48px;
  height: 36px;
  border-radius: 6px;
  background: var(--crema);
  border: 1px solid var(--gris-claro);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.admin-use-count { font-size: 0.78rem; color: var(--gris-medio); }
.admin-use-count.used { color: #fbbf24; }

.admin-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--gris-medio);
  font-size: 0.9rem;
}

/* ===== OVERRIDES GLOBALES ===== */
.admin-table-wrap { border-color: #333; }
.admin-table th, .admin-table td { border-bottom-color: #333; }
.admin-filters input, .admin-filters select { border-color: #333; }
.admin-filters input:focus, .admin-filters select:focus { border-color: var(--negro); }
.page-hero { border-bottom-color: #333; }
.kpi-back-link { color: var(--negro); }
.kpi-back-link:hover { color: var(--verde-lima); }
.act-chip { color: #0d1f04; background: rgba(184,224,74,0.28); border-color: #0d1f04; }
.stat-item { padding: 12px 16px; }

/* ===== PAGE HERO VARIANTE CLARA ===== */
.page-hero.light {
  background: var(--gris-claro);
  color: var(--negro);
  border-bottom-color: var(--gris-claro);
  padding-top: 100px;
  padding-bottom: 40px;
}
.page-hero-sub { font-size: 0.9rem; margin-top: 4px; }
.page-hero.light .page-hero-sub { color: var(--gris-texto); }

/* ===== ADMIN UTILITIES ===== */
.visitas-stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 24px; }
.stat-item.dark { text-align: center; background: var(--gris-claro); border-color: var(--negro); }
.admin-section-block { margin-bottom: 24px; }
.admin-section-title { font-family: var(--font-titulo); font-size: 1.1rem; font-weight: 700; margin: 0 0 12px; }
.admin-count-sub { font-size: 0.8rem; font-weight: 400; color: var(--gris-medio); }
.admin-count-label { font-size: 0.8rem; color: var(--gris-medio); margin-left: auto; }

#ci-acts { min-height: 90px; }
.modal-content.md { max-width: 560px; }
.modal-content.sm { max-width: 420px; }
.modal-form-hint { font-size: 0.75rem; color: var(--gris-medio); margin-top: 4px; }
.modal-stars { display: flex; gap: 8px; margin-top: 4px; }
.modal-star  { font-size: 1.4rem; cursor: pointer; opacity: 0.3; }
.modal-form-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

#hist-empty, #ci-fecha-out-wrap, #ci-val-wrap, #empty-msg { display: none; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.td-img    { display: flex; }
.td-titulo { max-width: 220px; word-break: break-word; }
.td-meta   { max-width: 160px; word-break: break-word; font-size: 0.8rem; color: var(--gris-medio); }
.btn-toggle { background: none; border: none; cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 2px 4px; }
.btn-pill.sm { font-size: 0.78rem; padding: 6px 14px; }
.btn-pill.pg { padding: 6px 12px; }

.modal-close-btn { position:absolute; top:16px; right:16px; background:transparent; border:none; color:var(--gris-medio); font-size:1.4rem; cursor:pointer; line-height:1; }
.modal-close-btn:hover { color: var(--negro); }
.modal-content.lg { max-width: 680px; }
.modal-content.xs { max-width: 400px; }

.admin-stats-grid { display:grid; gap:12px; margin-bottom:24px; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }

.admin-actions-row { display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; align-items:center; }

.form-user-selected { font-size:0.8rem; color:var(--verde-lima-hover); margin-top:4px; }

.th-right  { text-align:right; }
.td-center { text-align:center; }
.td-right  { text-align:right; white-space:nowrap; }

.pagination-ellipsis { color:var(--gris-medio); }

.detail-section       { margin-bottom:16px; }
.detail-section-title { color:var(--negro); font-size:0.9rem; margin:0 0 10px; border-bottom:1px solid var(--gris-claro); padding-bottom:6px; font-weight:700; }
.detail-grid          { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.detail-label         { font-size:0.75rem; color:var(--gris-medio); }
.detail-highlight     { color:var(--verde-lima-hover); font-weight:700; }
.detail-money         { color:var(--verde-lima-hover); }
.detail-break         { font-size:0.8rem; word-break:break-all; }
.detail-notes         { color:var(--gris-medio); font-size:0.875rem; }
.modal-confirm-text   { color:var(--gris-medio); }
.admin-container.narrow { max-width: 900px; }
.text-error { color: #e53935; }
.resp-hilo-title { font-size:0.75rem; font-weight:700; color:var(--gris-medio); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:8px; }
.msg-registered { font-size:0.78rem; color:var(--gris-medio); }
.reply-box { display: none; }

.visit-row-actions { display: flex; gap: 6px; margin-left: auto; flex-shrink: 0; }
.kml-group-count   { font-size: 0.75rem; opacity: 0.6; }

.td-loading { text-align: center; padding: 30px; color: var(--gris-medio); }
.td-id      { color: var(--gris-medio); font-size: 0.78rem; }
.td-name    { font-weight: 600; }
.td-email   { font-size: 0.75rem; color: var(--gris-medio); }
.td-nowrap  { white-space: nowrap; }
.td-actions { display: flex; gap: 5px; white-space: nowrap; }

.stars-empty { color: var(--gris-medio); font-size: 0.75rem; }
.stars-gold  { color: #fbbf24; }
.stars-dim   { opacity: 0.25; }

/* ===== VISITAS ADMIN — light-mode component styles ===== */
.kml-group { margin-bottom: 18px; }
.kml-group-title {
  font-size: 0.85rem; font-weight: 700; color: var(--verde-lima-hover);
  padding: 6px 0; border-bottom: 1px solid var(--gris-claro); margin-bottom: 8px;
}
.visit-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--gris-claro); flex-wrap: wrap;
}
.visit-row:last-child { border-bottom: none; }
.visit-name { font-weight: 600; font-size: 0.88rem; min-width: 140px; }
.visit-meta { font-size: 0.78rem; color: var(--gris-texto); flex: 1; }
.visit-acts { display: flex; flex-wrap: wrap; gap: 4px; }
.act-chip {
  background: rgba(184,224,74,0.12); color: var(--verde-lima-hover);
  border: 1px solid rgba(184,224,74,0.3);
  border-radius: 10px; padding: 2px 8px; font-size: 0.72rem;
}

/* ===== PANEL USUARIOS — light-mode component styles ===== */
.users-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.user-card {
  background: var(--blanco); border-radius: 10px; padding: 16px;
  cursor: pointer; transition: all 0.2s; border: 2px solid var(--gris-claro);
}
.user-card:hover { border-color: var(--gris-medio); background: var(--crema); }
.user-card.selected { border-color: var(--verde-lima-hover); background: rgba(184,224,74,0.08); }
.user-name  { font-weight: 700; font-size: 1rem; margin-bottom: 4px; color: var(--negro); }
.user-email { font-size: 0.85rem; color: var(--gris-medio); margin-bottom: 6px; }
.user-meta  { font-size: 0.75rem; color: var(--gris-medio); display: flex; gap: 6px; flex-wrap: wrap; }
.user-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.detail-card { background: var(--blanco); border-radius: 10px; padding: 20px; border: 1px solid var(--gris-claro); }
.detail-card h4 { color: var(--negro); margin: 0 0 16px; font-family: var(--font-titulo); font-size: 1rem; font-weight: 700; }
.detail-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--gris-claro); }
.detail-row:last-child { border-bottom: none; }
.detail-label { color: var(--gris-medio); font-size: 0.85rem; }
.detail-value { font-weight: 500; font-size: 0.9rem; color: var(--negro); }
.stats-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 16px;
}
@media (max-width: 768px) {
  .user-detail { grid-template-columns: 1fr; }
}

/* ===== SUSCRIPCIONES ADMIN — light-mode component styles ===== */
.pagination { display: flex; gap: 6px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.user-search-wrapper { position: relative; }
.user-suggestions {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--blanco); border: 1px solid var(--gris-claro); border-radius: 8px;
  max-height: 180px; overflow-y: auto; z-index: 100; display: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.user-suggestion-item { padding: 8px 12px; cursor: pointer; font-size: 0.85rem; }
.user-suggestion-item:hover { background: var(--crema); }

/* ===== DARK ADMIN PAGES (visitas-admin, panel-usuarios, suscripciones-admin) ===== */
/* Shared dark-admin layout */
body.dark-admin {
  background: #1a1a1a;
  color: white;
  font-family: system-ui, sans-serif;
}
.dark-admin .da-container {
  padding: 125px 20px 60px;
  max-width: 1200px;
  margin: 0 auto;
}
.dark-admin .da-container.wide { max-width: 1400px; }
.dark-admin .back-btn {
  color: #b8e04a;
  cursor: pointer;
  margin-bottom: 20px;
  display: inline-block;
  text-decoration: none;
  font-size: 0.9rem;
}
.dark-admin .back-btn:hover { text-decoration: underline; }
.dark-admin h1 {
  font-family: Fraunces, serif;
  font-size: 1.8rem;
  font-weight: 900;
  color: #b8e04a;
  margin: 0 0 24px;
}
.dark-admin .da-section {
  background: rgba(255,255,255,0.05);
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 24px;
}
.dark-admin .da-section h3 {
  color: #b8e04a;
  margin: 0 0 16px;
  font-family: Fraunces, serif;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dark-admin .da-section h3.plain { font-size: 1.2rem; }
.dark-admin .stats-row {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.dark-admin .stat-card {
  background: rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 16px 20px;
  text-align: center;
  flex: 1;
  min-width: 110px;
}
.dark-admin .stat-number { font-size: 1.7rem; font-weight: bold; color: #b8e04a; }
.dark-admin .stat-label  { font-size: 0.75rem; color: rgba(255,255,255,0.55); margin-top: 4px; }
.dark-admin .filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.dark-admin .filters-grid.wide { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.dark-admin .filter-input {
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.18);
  background: #2a2a2a;
  color: white;
  width: 100%;
  font-size: 0.88rem;
}
.dark-admin .filter-input:focus { outline: none; border-color: #b8e04a; }
.dark-admin .btn {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
}
.dark-admin .btn.lg { padding: 10px 18px; font-size: 0.9rem; }
.dark-admin .btn-primary { background: #b8e04a; color: #000; }
.dark-admin .btn-primary:hover { background: #c9ef5a; }
.dark-admin .btn-secondary {
  background: rgba(255,255,255,0.1);
  color: white;
  border: 1px solid rgba(255,255,255,0.2);
}
.dark-admin .btn-secondary:hover { background: rgba(255,255,255,0.16); }
.dark-admin .btn-danger { background: #e74c3c; color: white; }
.dark-admin .btn-danger:hover { background: #c0392b; }
.dark-admin .btn-sm { padding: 5px 10px; font-size: 0.78rem; }
.dark-admin .btn-sm.lg { padding: 6px 12px; font-size: 0.8rem; }
.dark-admin .btn-email  { background: #2196F3; color: white; }
.dark-admin .btn-stats  { background: #4CAF50; color: white; }
.dark-admin .actions-row {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.dark-admin .actions-row.mb { margin-bottom: 16px; }
.dark-admin table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.dark-admin th, .dark-admin td {
  padding: 11px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.dark-admin table.lg th,
.dark-admin table.lg td { padding: 12px 10px; }
.dark-admin th {
  color: #b8e04a;
  font-weight: 600;
  font-size: 0.78rem;
  background: rgba(0,0,0,0.2);
  white-space: nowrap;
}
.dark-admin table.lg th { font-size: 0.8rem; }
.dark-admin tr:hover td { background: rgba(255,255,255,0.03); }
.dark-admin .badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 0.73rem;
  font-weight: 600;
}
.dark-admin .badge.lg { padding: 3px 8px; font-size: 0.75rem; border-radius: 20px; }
.dark-admin .badge-active    { background: rgba(184,224,74,0.2); color: #b8e04a; }
.dark-admin .badge-completed  { background: rgba(100,100,255,0.15); color: #9090ff; }
.dark-admin .badge-paused     { background: rgba(255,165,0,0.2); color: orange; }
.dark-admin .badge-cancelled  { background: rgba(231,76,60,0.2); color: #e74c3c; }
.dark-admin .badge-stripe     { background: rgba(99,91,255,0.2); color: #9b93ff; }
.dark-admin .badge-mp         { background: rgba(0,174,243,0.2); color: #00aef3; }
.dark-admin .badge-paypal     { background: rgba(0,48,135,0.2); color: #6699cc; }
.dark-admin .badge-admin-role,
.dark-admin .badge-admin { background: #9C27B0; color: white; }
.dark-admin .badge-user-role,
.dark-admin .badge-user  { background: #2196F3; color: white; }
.dark-admin .badge-verified   { background: #4CAF50; color: white; }
.dark-admin .badge-unverified { background: #FF9800; color: white; }
.dark-admin .stars { color: #fbbf24; font-size: 0.85rem; letter-spacing: 1px; }
.dark-admin .empty-msg { text-align: center; padding: 36px; color: rgba(255,255,255,0.35); font-size: 0.9rem; }
.dark-admin .empty-msg.lg { padding: 40px; }
/* Activos por KML */
.dark-admin .kml-group { margin-bottom: 18px; }
.dark-admin .kml-group-title {
  font-size: 0.85rem; font-weight: 700; color: #b8e04a;
  padding: 6px 0; border-bottom: 1px solid rgba(184,224,74,0.2); margin-bottom: 8px;
}
.dark-admin .visit-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05); flex-wrap: wrap;
}
.dark-admin .visit-row:last-child { border-bottom: none; }
.dark-admin .visit-name { font-weight: 600; font-size: 0.88rem; min-width: 140px; }
.dark-admin .visit-meta { font-size: 0.78rem; color: rgba(255,255,255,0.45); flex: 1; }
.dark-admin .visit-acts { display: flex; flex-wrap: wrap; gap: 4px; }
.dark-admin .act-chip {
  background: rgba(184,224,74,0.1); color: #b8e04a;
  border: 1px solid rgba(184,224,74,0.2);
  border-radius: 10px; padding: 2px 8px; font-size: 0.72rem;
}
/* Panel usuarios */
.dark-admin .users-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.dark-admin .user-card {
  background: rgba(255,255,255,0.08); border-radius: 10px; padding: 16px;
  cursor: pointer; transition: all 0.2s; border: 2px solid transparent;
}
.dark-admin .user-card:hover { border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.12); }
.dark-admin .user-card.selected { border-color: #b8e04a; background: rgba(184,224,74,0.1); }
.dark-admin .user-name  { font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
.dark-admin .user-email { font-size: 0.85rem; color: rgba(255,255,255,0.6); margin-bottom: 4px; }
.dark-admin .user-meta  { font-size: 0.75rem; color: rgba(255,255,255,0.4); }
.dark-admin .user-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dark-admin .detail-card { background: rgba(255,255,255,0.05); border-radius: 10px; padding: 20px; }
.dark-admin .detail-card h4 { color: #b8e04a; margin: 0 0 16px; font-family: Fraunces, serif; }
.dark-admin .detail-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.dark-admin .detail-row:last-child { border-bottom: none; }
.dark-admin .detail-label { color: rgba(255,255,255,0.6); font-size: 0.85rem; }
.dark-admin .detail-value { font-weight: 500; font-size: 0.9rem; }
.dark-admin .search-box { margin-bottom: 16px; }
.dark-admin .search-box input {
  width: 100%; padding: 12px 16px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.1); color: white; font-size: 0.9rem;
}
.dark-admin .search-box input:focus { outline: none; border-color: #b8e04a; }
.dark-admin .stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px;
}
.dark-admin .stat-item { background: rgba(255,255,255,0.05); border-radius: 8px; padding: 12px; text-align: center; }
.dark-admin .stat-value { font-size: 1.5rem; font-weight: 700; color: #b8e04a; }
.dark-admin .form-group { margin-bottom: 12px; }
.dark-admin .form-group label { display: block; font-size: 0.8rem; color: rgba(255,255,255,0.6); margin-bottom: 4px; }
.dark-admin .form-group input { width: 100%; padding: 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.2); background: #1a1a1a; color: white; }
.dark-admin .form-group input:focus { outline: none; border-color: #b8e04a; }
.dark-admin .form-group.lg label  { font-size: 0.78rem; color: rgba(255,255,255,0.45); margin-bottom: 5px; }
.dark-admin .form-group.lg input,
.dark-admin .form-group.lg select,
.dark-admin .form-group.lg textarea { width: 100%; padding: 9px 11px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.18); background: #2a2a2a; color: white; font-size: 0.88rem; }
.dark-admin .form-group.lg input:focus,
.dark-admin .form-group.lg select:focus,
.dark-admin .form-group.lg textarea:focus { outline: none; border-color: #b8e04a; }
.dark-admin .form-group.lg textarea { resize: vertical; min-height: 72px; }
.dark-admin .btn-row { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.dark-admin .empty { text-align: center; padding: 40px; color: rgba(255,255,255,0.4); }
/* Suscripciones */
.dark-admin .pagination { display: flex; gap: 6px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.dark-admin .page-btn { padding: 6px 12px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.2); background: transparent; color: white; cursor: pointer; font-size: 0.85rem; }
.dark-admin .page-btn.active { background: #b8e04a; color: #000; border-color: #b8e04a; }
.dark-admin .page-btn:hover:not(.active) { background: rgba(255,255,255,0.1); }
/* Dark modal (used by visitas-admin, suscripciones-admin, panel-usuarios) */
.dark-admin .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 2000; align-items: center; justify-content: center; padding: 20px; }
.dark-admin .modal-overlay.active { display: flex; }
.dark-admin .modal-overlay.open   { display: flex; }
.dark-admin .modal { background: #1e1e1e; border-radius: 16px; padding: 28px; width: 100%; max-width: 540px; max-height: 90vh; overflow-y: auto; position: relative; }
.dark-admin .modal.sm { max-width: 420px; }
.dark-admin .modal.md { max-width: 560px; }
.dark-admin .modal.lg { max-width: 680px; }
.dark-admin .modal.xl { max-width: 400px; }
.dark-admin .modal h3 { color: #b8e04a; margin: 0 0 20px; font-family: Fraunces, serif; font-size: 1.2rem; }
.dark-admin .modal h3.lg { font-size: 1.3rem; }
.dark-admin .modal-close { position: absolute; top: 16px; right: 16px; background: transparent; border: none; color: rgba(255,255,255,0.5); font-size: 1.4rem; cursor: pointer; line-height: 1; }
.dark-admin .modal-footer { display: flex; gap: 10px; margin-top: 20px; justify-content: flex-end; }
.dark-admin .modal-footer.actions { justify-content: flex-end; margin-top: 20px; }
.dark-admin .form-control { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2); background: #2a2a2a; color: white; font-size: 0.9rem; }
.dark-admin .form-control:focus { outline: none; border-color: #b8e04a; }
.dark-admin .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* User search dropdown (suscripciones) */
.dark-admin .user-search-wrapper { position: relative; }
.dark-admin .user-suggestions { position: absolute; top: 100%; left: 0; right: 0; background: #2a2a2a; border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; max-height: 180px; overflow-y: auto; z-index: 100; display: none; }
.dark-admin .user-suggestion-item { padding: 8px 12px; cursor: pointer; font-size: 0.85rem; }
.dark-admin .user-suggestion-item:hover { background: rgba(184,224,74,0.15); }
/* Detail sections (suscripciones modal) */
.dark-admin .detail-section { margin-bottom: 16px; }
.dark-admin .detail-section h4 { color: #b8e04a; font-size: 0.9rem; margin: 0 0 10px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 6px; }
.dark-admin .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dark-admin .detail-item label { font-size: 0.75rem; color: rgba(255,255,255,0.5); display: block; }
.dark-admin .detail-item span  { font-size: 0.9rem; }
.dark-admin .donations-mini-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; margin-top: 8px; }
.dark-admin .donations-mini-table th { color: rgba(255,255,255,0.5); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.dark-admin .donations-mini-table td { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.06); }
@media (max-width: 768px) {
  .dark-admin .user-detail { grid-template-columns: 1fr; }
  .dark-admin .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .dark-admin .detail-grid { grid-template-columns: 1fr; }
  .dark-admin .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .dark-admin .filters-grid { grid-template-columns: 1fr 1fr; }
  .dark-admin table th:nth-child(n+5), .dark-admin table td:nth-child(n+5) { display: none; }
}
@media (max-width: 768px) {
  .dark-admin .filters-grid.wide { grid-template-columns: 1fr 1fr; }
  .dark-admin table.lg th:nth-child(n+6), .dark-admin table.lg td:nth-child(n+6) { display: none; }
}

/* ===== KPI PAGES ===== */
body.kpi-page {
  background: #0d0d0d;
  color: white;
}
/* Shared page-header for KPI pages */
.kpi-page-header {
  padding: 120px 40px 40px;
  background: linear-gradient(180deg, #0d0d0d 0%, #1a2e0f 60%, #0d0d0d 100%);
}
.kpi-page-header h1 { font-family: var(--font-titulo); font-size: 2.5rem; font-weight: 900; }
.kpi-page-header h1 span { color: #b8e04a; }
.kpi-page-header p { color: rgba(255,255,255,0.6); margin-top: 8px; }
.kpi-page-header.compact { padding: 110px 40px 28px; background: linear-gradient(180deg,#0d0d0d 0%,#0d1f0a 100%); }
.kpi-page-header.compact h1 { font-size: 1.9rem; }
.kpi-page-header.slim { padding: 120px 40px 32px; }
.kpi-page-header.slim h1 { font-size: 2rem; }
.kpi-back-link {
  color: rgba(255,255,255,0.4);
  text-decoration: none;
  font-size: 0.85rem;
  display: inline-block;
  margin-bottom: 16px;
}
.kpi-back-link.mb12 { margin-bottom: 12px; }
.kpi-back-link.mb10 { margin-bottom: 10px; }
.kpi-back-link:hover { color: #b8e04a; }
.kpi-content { max-width: 1200px; margin: 0 auto; padding: 40px; }
.kpi-content.md { max-width: 1100px; padding: 28px 32px 60px; }
.kpi-content.sm { max-width: 900px; padding: 32px 40px; }
/* Stats row */
.kpi-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 40px;
}
.kpi-stat-card { background: rgba(255,255,255,0.05); border-radius: 12px; padding: 20px; text-align: center; }
.kpi-stat-card .num { font-size: 2.2rem; font-weight: 900; color: #b8e04a; }
.kpi-stat-card .label { font-size: 0.8rem; color: rgba(255,255,255,0.5); margin-top: 4px; }
/* Section title */
.kpi-section-title {
  font-family: var(--font-titulo);
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: white;
}
.kpi-section-title.divider {
  font-size: 1rem;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 32px 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.kpi-section-title.divider::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.07); }
/* KPI cards */
.kpi-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin-bottom: 48px;
}
.kpi-item {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 20px;
  position: relative;
}
.kpi-item-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.kpi-item-nombre { font-weight: 600; font-size: 0.95rem; }
.kpi-item-categoria { font-size: 0.7rem; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.05em; }
.semaforo { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.semaforo.verde    { background: #22c55e; box-shadow: 0 0 8px #22c55e; }
.semaforo.amarillo { background: #eab308; box-shadow: 0 0 8px #eab308; }
.semaforo.rojo     { background: #ef4444; box-shadow: 0 0 8px #ef4444; }
.semaforo.gris     { background: rgba(255,255,255,0.2); }
.kpi-valor { font-size: 2rem; font-weight: 900; color: #b8e04a; }
.kpi-fecha { font-size: 0.75rem; color: rgba(255,255,255,0.3); margin-top: 4px; }
/* Campanas table */
.campanas-table { width: 100%; border-collapse: collapse; }
.campanas-table th { text-align: left; padding: 10px 16px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,0.4); border-bottom: 1px solid rgba(255,255,255,0.1); }
.campanas-table td { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 0.9rem; }
/* Estado badges */
.estado-badge { display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: 0.72rem; font-weight: 600; }
.estado-pendiente   { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); }
.estado-en_progreso { background: rgba(251,191,36,0.15); color: #fbbf24; }
.estado-completada  { background: rgba(34,197,94,0.15); color: #22c55e; }
.estado-cancelada   { background: rgba(239,68,68,0.15); color: #f87171; }
.kpi-loading { text-align: center; padding: 60px; color: rgba(255,255,255,0.3); }
/* Botones KPI */
.kpi-item-btns { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.btn-calcular { background: rgba(184,224,74,0.15); color: #b8e04a; border: 1px solid rgba(184,224,74,0.3); padding: 6px 14px; border-radius: 100px; font-size: 0.75rem; cursor: pointer; }
.btn-calcular:hover { background: rgba(184,224,74,0.25); }
.btn-calcular:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-detalle { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.12); padding: 6px 14px; border-radius: 100px; font-size: 0.75rem; cursor: pointer; }
.btn-detalle:hover { background: rgba(255,255,255,0.1); color: white; }
/* KPI tooltip */
.kpi-item[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  background: #1e1e1e; border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.85);
  font-size: 0.73rem; line-height: 1.6; padding: 10px 14px; border-radius: 10px;
  width: 260px; white-space: pre-line; pointer-events: none; opacity: 0;
  transition: opacity 0.18s ease; z-index: 100; box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.kpi-item[data-tooltip]::before {
  content: ''; position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: rgba(255,255,255,0.15);
  pointer-events: none; opacity: 0; transition: opacity 0.18s ease; z-index: 100;
}
.kpi-item[data-tooltip]:hover::after,
.kpi-item[data-tooltip]:hover::before { opacity: 1; }
/* Modal detalle KPI */
.det-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 2000; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 40px 16px; }
.det-modal.open { display: flex; }
.det-box { background: #111; border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; width: 100%; max-width: 860px; padding: 28px 32px; position: relative; margin: auto; }
.det-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.det-title { font-family: var(--font-titulo); font-size: 1.2rem; color: #b8e04a; }
.det-subtitle { font-size: 0.78rem; color: rgba(255,255,255,0.4); margin-top: 3px; }
.det-close { background: transparent; border: none; color: rgba(255,255,255,0.5); font-size: 1.4rem; cursor: pointer; line-height: 1; padding: 0 4px; }
.det-close:hover { color: white; }
.det-resumen { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.det-stat { background: rgba(255,255,255,0.05); border-radius: 8px; padding: 10px 16px; display: flex; flex-direction: column; gap: 2px; }
.det-stat-label { font-size: 0.68rem; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.04em; }
.det-stat-val { font-size: 1rem; font-weight: 700; color: #b8e04a; }
.det-table-wrap { overflow-x: auto; margin-bottom: 20px; }
.det-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.det-table th { background: rgba(184,224,74,0.1); color: #b8e04a; padding: 8px 10px; text-align: left; white-space: nowrap; border-bottom: 1px solid rgba(184,224,74,0.2); }
.det-table td { padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.05); color: rgba(255,255,255,0.8); }
.det-table tr:last-child td { border-bottom: none; }
.det-table tr:hover td { background: rgba(255,255,255,0.03); }
.det-calculo { background: rgba(184,224,74,0.05); border: 1px solid rgba(184,224,74,0.15); border-radius: 8px; padding: 12px 16px; }
.det-calculo-label { font-size: 0.68rem; color: rgba(255,255,255,0.35); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.det-calculo-formula { font-family: monospace; font-size: 0.85rem; color: #b8e04a; line-height: 1.6; word-break: break-word; }
.det-empty { text-align: center; padding: 40px; color: rgba(255,255,255,0.35); font-size: 0.85rem; }
/* kpis-full: module cards */
.modulos { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: 14px; margin-bottom: 36px; }
.mod-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 18px 16px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; transition: all .2s; text-decoration: none; color: white; }
.mod-card:hover { border-color: var(--mc); background: rgba(255,255,255,0.06); transform: translateY(-2px); }
.mod-num { font-size: 1.85rem; font-weight: 900; color: var(--mc); }
.mod-label { font-size: 0.95rem; color: rgba(255,255,255,0.4); }
.mod-sub { font-size: 0.91rem; color: rgba(255,255,255,0.25); margin-top: 2px; }
/* kpis-full: KPI semaforo row */
.kpi-sem-row { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 14px; margin-bottom: 8px; }
.kpi-sem-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 18px; }
.kpi-sem-header { display: flex; justify-content: space-between; align-items: flex-start; }
.kpi-sem-nombre { font-weight: 700; font-size: 0.9rem; }
.semaforo.sm { width: 12px; height: 12px; margin-top: 3px; }
.sem-verde    { background: #4ade80; box-shadow: 0 0 8px #4ade8066; }
.sem-amarillo { background: #fbbf24; box-shadow: 0 0 8px #fbbf2466; }
.sem-rojo     { background: #f87171; box-shadow: 0 0 8px #f8717166; }
.sem-gris     { background: rgba(255,255,255,0.2); }
.kpi-sem-val  { font-size: 1.5rem; font-weight: 900; color: #b8e04a; margin: 8px 0 2px; }
.kpi-sem-meta { font-size: 0.72rem; color: rgba(255,255,255,0.3); }
/* kpis-full: activity */
.activity-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.activity-block { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; padding: 18px; }
.activity-block h3 { font-size: 0.8rem; font-weight: 600; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 14px; }
.act-item { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 0.83rem; }
.act-item:last-child { border-bottom: none; }
.act-label { color: rgba(255,255,255,0.75); }
.act-val  { color: #b8e04a; font-weight: 600; font-size: 0.82rem; }
.act-date { color: rgba(255,255,255,0.3); font-size: 0.75rem; }
.empty-block { color: rgba(255,255,255,0.2); font-size: 0.82rem; text-align: center; padding: 20px 0; }
/* kpis-full: charts */
.charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.chart-box { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; padding: 18px; }
.chart-box h3 { font-size: 0.8rem; font-weight: 600; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 14px; }
.chart-box canvas { max-height: 200px; }
/* kpis-full: embedded mode */
body.embedded .kpi-page-header { padding-top: 14px; }
/* kpi-usuarios: table */
.kpi-users-table { width: 100%; border-collapse: collapse; }
.kpi-users-table th { text-align: left; padding: 10px 16px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,0.35); border-bottom: 1px solid rgba(255,255,255,0.1); }
.kpi-users-table td { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 0.88rem; vertical-align: middle; }
.kpi-users-table tr:hover td { background: rgba(255,255,255,0.02); }
.kpi-avatar { width: 34px; height: 34px; border-radius: 50%; background: #1a2e0f; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; color: #b8e04a; margin-right: 10px; flex-shrink: 0; }
.kpi-user-cell { display: flex; align-items: center; }
.kpi-user-name { font-weight: 600; }
.kpi-user-email { font-size: 0.75rem; color: rgba(255,255,255,0.4); }
.kpi-date-cell { font-size: 0.78rem; color: rgba(255,255,255,0.4); }
.kpi-btn-sm { padding: 6px 14px; font-size: 0.78rem; border-radius: 100px; cursor: pointer; border: none; }
.kpi-btn-primary  { background: #b8e04a; color: #0d0d0d; border: none; padding: 10px 20px; border-radius: 100px; font-weight: 600; cursor: pointer; font-size: 0.9rem; }
.kpi-btn-primary:hover { background: #a6cc3a; }
.kpi-btn-asignar { background: rgba(184,224,74,0.15); color: #b8e04a; }
.kpi-btn-cambiar { background: rgba(255,255,255,0.08); color: white; }
.kpi-btn-revocar { background: rgba(239,68,68,0.12); color: #f87171; }
.rol-badge { display: inline-block; padding: 4px 12px; border-radius: 100px; font-size: 0.75rem; font-weight: 600; }
.rol-administrador { background: rgba(239,68,68,0.15); color: #f87171; }
.rol-operador      { background: rgba(251,191,36,0.15); color: #fbbf24; }
.rol-lector        { background: rgba(34,197,94,0.15); color: #86efac; }
.rol-none          { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.35); }
.roles-legend { background: rgba(255,255,255,0.03); border-radius: 10px; padding: 16px 20px; margin-bottom: 28px; }
.roles-legend h3 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,0.35); margin-bottom: 12px; }
.legend-row { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 8px; font-size: 0.82rem; }
.legend-row:last-child { margin-bottom: 0; }
/* kpi-docs: markdown body */
.md-body h1 { font-family: var(--font-titulo); font-size: 1.9rem; font-weight: 900; margin: 0 0 8px; color: white; }
.md-body h2 { font-family: var(--font-titulo); font-size: 1.35rem; font-weight: 800; margin: 48px 0 14px; color: #b8e04a; border-bottom: 1px solid rgba(184,224,74,0.2); padding-bottom: 8px; }
.md-body h3 { font-size: 1.05rem; font-weight: 700; margin: 28px 0 10px; color: white; }
.md-body h4 { font-size: 0.95rem; font-weight: 700; margin: 20px 0 8px; color: rgba(255,255,255,0.8); }
.md-body p { font-size: 0.9rem; line-height: 1.75; color: rgba(255,255,255,0.75); margin: 0 0 12px; }
.md-body ul, .md-body ol { padding-left: 22px; margin: 0 0 12px; }
.md-body li { font-size: 0.88rem; line-height: 1.7; color: rgba(255,255,255,0.7); margin-bottom: 4px; }
.md-body strong { color: white; font-weight: 700; }
.md-body em { color: rgba(255,255,255,0.6); }
.md-body hr { border: none; border-top: 1px solid rgba(255,255,255,0.08); margin: 36px 0; }
.md-body code { background: rgba(184,224,74,0.1); color: #b8e04a; padding: 2px 6px; border-radius: 4px; font-size: 0.82rem; font-family: monospace; }
.md-body pre { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 18px 20px; overflow-x: auto; margin: 12px 0 20px; }
.md-body pre code { background: none; color: #e2e8f0; padding: 0; font-size: 0.83rem; line-height: 1.6; }
.md-body table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; font-size: 0.84rem; }
.md-body th { background: rgba(184,224,74,0.1); color: #b8e04a; font-weight: 700; padding: 10px 14px; text-align: left; border-bottom: 1px solid rgba(184,224,74,0.2); }
.md-body td { padding: 9px 14px; border-bottom: 1px solid rgba(255,255,255,0.06); color: rgba(255,255,255,0.7); vertical-align: top; }
.md-body tr:last-child td { border-bottom: none; }
.md-body tr:hover td { background: rgba(255,255,255,0.02); }
.md-body blockquote { border-left: 3px solid rgba(184,224,74,0.4); margin: 0 0 16px; padding: 8px 16px; color: rgba(255,255,255,0.5); font-style: italic; }
.doc-wrap { max-width: 860px; margin: 0 auto; padding: 40px 40px 80px; }
/* kpis-config: tab system */
.kpi-tabs { display: flex; gap: 4px; margin-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.kpi-tab { padding: 10px 20px; cursor: pointer; font-size: 0.9rem; border-bottom: 2px solid transparent; color: rgba(255,255,255,0.5); }
.kpi-tab.active { color: #b8e04a; border-bottom-color: #b8e04a; }
.kpi-tab-panel { display: none; }
.kpi-tab-panel.active { display: block; }
.kpi-toolbar { display: flex; gap: 12px; margin-bottom: 20px; }
/* kpis-config: kpi list */
.kpi-list { display: grid; gap: 12px; }
.kpi-row-item { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 16px 20px; display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 16px; }
.kpi-row-nombre { font-weight: 600; font-size: 0.95rem; }
.kpi-row-meta { font-size: 0.78rem; color: rgba(255,255,255,0.4); margin-top: 4px; display: flex; gap: 12px; flex-wrap: wrap; }
.kpi-actions { display: flex; gap: 8px; padding-top: 2px; }
.btn-ver-calc { background: none; border: none; color: rgba(184,224,74,0.5); font-size: 0.72rem; cursor: pointer; padding: 0; margin-top: 7px; display: inline-flex; align-items: center; gap: 5px; letter-spacing: 0.02em; }
.btn-ver-calc:hover { color: #b8e04a; }
.kpi-desc { display: none; margin-top: 10px; padding: 12px 14px; background: rgba(255,255,255,0.03); border-left: 2px solid rgba(184,224,74,0.2); border-radius: 0 8px 8px 0; font-size: 0.79rem; color: rgba(255,255,255,0.55); line-height: 1.75; white-space: pre-wrap; word-break: break-word; }
.kpi-desc.open { display: block; }
.kpi-btn-sm { padding: 6px 14px; font-size: 0.78rem; border-radius: 100px; cursor: pointer; border: none; }
.kpi-btn-editar    { background: rgba(255,255,255,0.08); color: white; }
.kpi-btn-desactivar { background: rgba(239,68,68,0.12); color: #f87171; }
.kpi-inactivo { opacity: 0.4; }
/* kpis-config: category badges */
.cat-badge { display: inline-block; padding: 2px 8px; border-radius: 100px; font-size: 0.68rem; }
.cat-ambiental  { background: rgba(59,130,246,0.2);  color: #93c5fd; }
.cat-forestacion { background: rgba(34,197,94,0.2);  color: #86efac; }
.cat-flora      { background: rgba(168,85,247,0.2);  color: #d8b4fe; }
.cat-fauna      { background: rgba(249,115,22,0.2);  color: #fdba74; }
.cat-resumen    { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); }
/* kpis-config: tipos list */
.tipos-list { display: grid; gap: 10px; }
.tipo-row-item { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 14px 18px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }
.tipo-row-nombre { font-weight: 600; font-size: 0.9rem; }
.tipo-row-meta { font-size: 0.77rem; color: rgba(255,255,255,0.4); margin-top: 3px; }
/* kpis-config: modal */
.kpi-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 1000; align-items: center; justify-content: center; }
.kpi-modal-overlay.open { display: flex; }
.kpi-modal { background: #111; border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; padding: 32px; width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; }
.kpi-modal.sm { max-width: 440px; }
.kpi-modal h2 { font-family: var(--font-titulo); font-size: 1.3rem; margin-bottom: 20px; }
.kpi-modal h2.mb8 { margin-bottom: 8px; }
.kpi-modal-user { font-size: 0.85rem; color: rgba(255,255,255,0.5); margin-bottom: 20px; }
.kpi-form-group { margin-bottom: 14px; }
.kpi-form-group label { display: block; font-size: 0.78rem; color: rgba(255,255,255,0.5); margin-bottom: 5px; }
.kpi-form-group input, .kpi-form-group select, .kpi-form-group textarea { width: 100%; box-sizing: border-box; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15); color: white; padding: 9px 12px; border-radius: 8px; font-size: 0.85rem; outline: none; }
.kpi-form-group input:focus, .kpi-form-group select:focus { border-color: #b8e04a; }
.kpi-form-row   { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.kpi-form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kpi-modal-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 20px; }
.kpi-btn-cancel { background: rgba(255,255,255,0.08); color: white; border: none; padding: 10px 20px; border-radius: 100px; cursor: pointer; }
.kpi-search-input { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15); color: white; padding: 9px 14px; border-radius: 8px; font-size: 0.85rem; outline: none; min-width: 240px; }
.kpi-search-input:focus { border-color: #b8e04a; }
.kpi-search-input::placeholder { color: rgba(255,255,255,0.3); }
.kpi-empty { text-align: center; padding: 48px; color: rgba(255,255,255,0.3); font-size: 0.85rem; }
/* ── KPI module data pages (fauna, flora, campanas, lluvias, mediciones, pesca, social…) ── */
body.kpi-page table { width: 100%; border-collapse: collapse; }
body.kpi-page th { text-align: left; padding: 10px 16px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,0.35); border-bottom: 1px solid rgba(255,255,255,0.1); }
body.kpi-page td { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 0.88rem; vertical-align: middle; }
body.kpi-page tr:hover td { background: rgba(255,255,255,0.02); }
body.kpi-page input[type=date] { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15); color: white; padding: 9px 14px; border-radius: 8px; font-size: 0.85rem; outline: none; }
/* Cards */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap: 14px; }
.kpi-grid.md { grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: 16px; }
.kpi-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 18px 20px; }
.kpi-card:hover { border-color: rgba(184,224,74,0.3); }
.kpi-card-nombre { font-weight: 700; font-size: 0.95rem; }
.kpi-card-cientifico { font-size: 0.78rem; color: rgba(255,255,255,0.4); font-style: italic; margin-top: 2px; }
.kpi-card-meta { font-size: 0.78rem; color: rgba(255,255,255,0.35); margin-top: 8px; }
.kpi-card-actions { display: flex; gap: 8px; margin-top: 12px; }
.kpi-btn-agregar { background: rgba(184,224,74,0.15); color: #b8e04a; border: none; }
.kpi-btn-eliminar { background: rgba(239,68,68,0.12); color: #f87171; border: none; }
/* Summary row (lluvias, etc.) */
.kpi-summary-row { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: 14px; margin-bottom: 32px; }
.kpi-summary-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 18px; text-align: center; }
.kpi-summary-card .num { font-size: 1.8rem; font-weight: 900; color: #b8e04a; }
.kpi-summary-card .label { font-size: 0.78rem; color: rgba(255,255,255,0.45); margin-top: 4px; }
/* Fauna/pesca specific badges */
.cat-ave      { background: rgba(59,130,246,0.2);  color: #93c5fd; }
.cat-mamifero { background: rgba(34,197,94,0.2);   color: #86efac; }
.cat-reptil   { background: rgba(249,115,22,0.2);  color: #fdba74; }
.cat-anfibio  { background: rgba(168,85,247,0.2);  color: #d8b4fe; }
.cat-pez      { background: rgba(6,182,212,0.2);   color: #67e8f9; }
.cat-insecto  { background: rgba(234,179,8,0.2);   color: #fde047; }
/* Flora badges */
.badge-forma      { display: inline-block; padding: 2px 8px; border-radius: 100px; font-size: 0.66rem; font-weight: 600; background: rgba(34,197,94,0.15); color: #86efac; margin-top: 6px; }
.badge-invasora   { display: inline-block; padding: 2px 8px; border-radius: 100px; font-size: 0.66rem; font-weight: 700; background: rgba(239,68,68,0.18); color: #fca5a5; margin-left: 4px; }
.badge-indicadora { display: inline-block; padding: 2px 8px; border-radius: 100px; font-size: 0.66rem; font-weight: 700; background: rgba(245,158,11,0.18); color: #fcd34d; margin-left: 4px; }
.badge-eavc       { display: inline-block; padding: 2px 8px; border-radius: 100px; font-size: 0.66rem; font-weight: 700; background: rgba(239,68,68,0.18); color: #fca5a5; margin-left: 4px; }
.badge-estado     { display: inline-block; padding: 2px 8px; border-radius: 100px; font-size: 0.65rem; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.55); margin-right: 4px; }
.badge-estadio    { display: inline-block; padding: 2px 8px; border-radius: 100px; font-size: 0.65rem; background: rgba(184,224,74,0.12); color: #b8e04a; margin-right: 4px; }
/* Lluvias bar chart */
.mm-bar { display: flex; align-items: center; gap: 10px; }
.mm-val { font-weight: 700; color: #b8e04a; min-width: 50px; }
.kpi-bar { flex: 1; height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; }
.kpi-bar-fill { height: 100%; background: #b8e04a; border-radius: 3px; }
.origen-badge { display: inline-block; padding: 2px 8px; border-radius: 100px; font-size: 0.68rem; }
.origen-local { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); }
.origen-smn   { background: rgba(59,130,246,0.2);  color: #93c5fd; }
/* Avistajes / inventario items */
.kpi-data-item { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: start; }
.kpi-data-especie { font-weight: 600; font-size: 0.9rem; }
.kpi-data-meta    { font-size: 0.75rem; color: rgba(255,255,255,0.4); margin-top: 3px; }
.kpi-data-cantidad { font-size: 1.3rem; font-weight: 900; color: #b8e04a; text-align: right; }
.evidencia-badge  { display: inline-block; padding: 2px 8px; border-radius: 100px; font-size: 0.68rem; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); margin-top: 4px; }
/* Check row (checkboxes in forms) */
.check-row { display: flex; gap: 20px; margin-top: 4px; flex-wrap: wrap; }
.check-row label { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: rgba(255,255,255,0.7); cursor: pointer; }
.check-row input[type=checkbox] { width: 16px; height: 16px; accent-color: #b8e04a; cursor: pointer; }
/* Tipo-medicion pill/badge */
.pill-ambiental   { background: rgba(96,165,250,0.15); color: #60a5fa; }
.pill-forestacion { background: rgba(74,222,128,0.15); color: #4ade80; }
.pill-fauna       { background: rgba(251,191,36,0.15); color: #fbbf24; }
.pill-flora-kpi   { background: rgba(134,239,172,0.15); color: #86efac; }
.kpi-cat-pill { display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: 0.7rem; font-weight: 700; }
.kpi-cat-section { margin-bottom: 36px; }
.kpi-cat-title { display: flex; align-items: center; gap: 10px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.tipos-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 12px; }
.tipo-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 18px 20px; }
.tipo-nombre { font-weight: 700; font-size: 0.95rem; margin-bottom: 6px; }
.tipo-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.tipo-desc { font-size: 0.78rem; color: rgba(255,255,255,0.35); line-height: 1.5; }
.tipo-valores { font-size: 0.72rem; color: rgba(255,255,255,0.3); margin-top: 6px; font-style: italic; }
.tipo-actions { display: flex; gap: 6px; margin-top: 12px; }
.badge-unidad   { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); }
.badge-tipo-val { background: rgba(184,224,74,0.12); color: #b8e04a; }
.badge-seleccion { background: rgba(147,197,253,0.15); color: #93c5fd; }
.kpi-tipo-hint { font-size: 0.72rem; color: rgba(255,255,255,0.3); margin-top: 4px; }
/* Social: stat bars */
.stat-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.stat-bar-label { font-size: 0.78rem; color: rgba(255,255,255,0.45); min-width: 80px; }
.stat-bar-track { flex: 1; height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; }
.stat-bar-fill { height: 100%; background: #c084fc; border-radius: 3px; }
.stat-bar-val { font-size: 0.8rem; font-weight: 700; color: #c084fc; min-width: 40px; text-align: right; }
/* Social: entrevista */
.entrevista-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 20px; margin-bottom: 14px; }
.entrevista-header { display: flex; justify-content: space-between; align-items: flex-start; }
.entrevista-nombre { font-weight: 700; font-size: 1rem; }
.entrevista-meta { font-size: 0.78rem; color: rgba(255,255,255,0.4); margin-top: 4px; }
.entrevista-texto { font-size: 0.85rem; color: rgba(255,255,255,0.6); margin-top: 12px; line-height: 1.6; white-space: pre-wrap; }
/* Pesca: temp item */
.temp-item { background: rgba(6,182,212,0.06); border: 1px solid rgba(6,182,212,0.2); border-radius: 10px; padding: 12px 16px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.temp-val { font-size: 1.4rem; font-weight: 900; color: #67e8f9; }
.temp-meta { font-size: 0.78rem; color: rgba(255,255,255,0.4); }
/* Campanas cards */
.campana-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 20px 24px; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: start; }
.campana-card:hover { border-color: rgba(184,224,74,0.3); }
.campana-nombre { font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
.campana-meta { font-size: 0.8rem; color: rgba(255,255,255,0.45); display: flex; gap: 16px; flex-wrap: wrap; }
.campana-actions { display: flex; gap: 8px; }
.campanas-grid { display: grid; gap: 16px; }
.kpi-btn-ver { background: rgba(184,224,74,0.15); color: #b8e04a; border: none; }
.kpi-btn-outline { background: transparent; border: 1px solid rgba(255,255,255,0.2); color: white; padding: 9px 18px; border-radius: 100px; cursor: pointer; font-size: 0.85rem; }
.kpi-btn-outline:hover { border-color: #b8e04a; color: #b8e04a; }
/* menukpis: hero */
.kpi-hero {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 110px 24px 40px;
  background: url('../img/indicadores.jpg') center/cover no-repeat;
  position: relative;
}
.kpi-hero::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,13,13,0.75) 0%, rgba(26,46,15,0.85) 100%);
  z-index: 1;
}
.kpi-hero h1, .kpi-hero p, .kpi-hero .no-acceso { position: relative; z-index: 2; }
.kpi-hero h1 span { color: #b8e04a; }
.kpi-hero p { font-size: 0.95rem; color: rgba(255,255,255,0.7); max-width: 580px; margin-bottom: 10px; line-height: 1.5; }
.no-acceso { background: rgba(255,100,100,0.1); border: 1px solid rgba(255,100,100,0.3); border-radius: 12px; padding: 20px 32px; color: rgba(255,255,255,0.7); margin-bottom: 24px; display: none; }
/* menukpis: sections */
.sections-wrap { max-width: 1200px; margin: 48px auto 80px; padding: 0 24px; display: flex; flex-direction: column; gap: 48px; }
.section-block {}
.section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.section-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 14px; border-radius: 100px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.pill-stats  { background: rgba(184,224,74,0.12);  color: #b8e04a; }
.pill-reg    { background: rgba(251,191,36,0.12);  color: #fbbf24; }
.pill-tables { background: rgba(96,165,250,0.12);  color: #60a5fa; }
.pill-config { background: rgba(248,113,113,0.12); color: #f87171; }
.section-desc { font-size: 0.95rem; color: rgba(255,255,255,0.35); margin-left: 4px; }
/* menukpis: kpi-grid cards */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.kpi-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 22px 18px; text-decoration: none; color: white; transition: all 0.25s; display: flex; flex-direction: column; gap: 10px; position: relative; }
.kpi-card:hover { transform: translateY(-3px); }
.kpi-card.s-stats:hover  { background: rgba(184,224,74,0.08);  border-color: rgba(184,224,74,0.5); }
.kpi-card.s-reg:hover    { background: rgba(251,191,36,0.08);  border-color: rgba(251,191,36,0.5); }
.kpi-card.s-tables:hover { background: rgba(96,165,250,0.08);  border-color: rgba(96,165,250,0.5); }
.kpi-card.s-config:hover { background: rgba(248,113,113,0.08); border-color: rgba(248,113,113,0.5); }
.kpi-card.featured { border-color: rgba(184,224,74,0.25); background: rgba(184,224,74,0.05); }
.kpi-card-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; background: rgba(255,255,255,0.06); }
.kpi-card h3 { font-family: var(--font-titulo); font-size: 1.1rem; font-weight: 700; margin: 0; line-height: 1.3; }
.kpi-card p  { font-size: 0.95rem; color: rgba(255,255,255,0.45); margin: 0; line-height: 1.5; }
.kpi-badge { font-size: 0.9rem; padding: 2px 9px; border-radius: 100px; width: fit-content; }
.kpi-badge-admin { background: rgba(239,68,68,0.15); color: #f87171; }
/* menukpis: tooltip on kpi-card */
.kpi-card[data-tooltip]::after {
  content: attr(data-tooltip); position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  background: #1e1e1e; border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.85);
  font-size: 0.9rem; line-height: 1.5; padding: 10px 14px; border-radius: 10px; width: 240px;
  white-space: normal; pointer-events: none; opacity: 0; transition: opacity 0.18s ease; z-index: 999;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.kpi-card[data-tooltip]::before {
  content: ''; position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: rgba(255,255,255,0.15);
  pointer-events: none; opacity: 0; transition: opacity 0.18s ease; z-index: 999;
}
.kpi-card[data-tooltip]:hover::after,
.kpi-card[data-tooltip]:hover::before { opacity: 1; }
@media (max-width: 700px) {
  .activity-grid { grid-template-columns: 1fr; }
  .charts-grid   { grid-template-columns: 1fr; }
}
/* mensajes-admin: message cards */
.msg-card { background: #fff; border-radius: 14px; padding: 20px 24px; box-shadow: 0 2px 12px rgba(0,0,0,0.07); margin-bottom: 14px; border-left: 4px solid #e4e8ed; }
.msg-card.no-leido { border-left-color: var(--verde-lima); }
.msg-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.msg-badge { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; }
.msg-badge.no-leido { background: #dff0c8; color: #2e6b00; }
.msg-badge.leido    { background: #f0f2f4; color: #888; }
.msg-nombre  { font-weight: 700; font-size: 1rem; }
.msg-email   { color: #666; font-size: 0.88rem; }
.msg-tema    { font-size: 0.8rem; background: #eef4ff; color: #3366cc; padding: 3px 10px; border-radius: 20px; }
.msg-tipo    { font-size: 0.8rem; background: #f5f0ff; color: #6633cc; padding: 3px 10px; border-radius: 20px; }
.msg-body    { color: #333; line-height: 1.6; white-space: pre-wrap; word-break: break-word; margin: 10px 0; }
.msg-fecha   { font-size: 0.78rem; color: #aaa; }
.msg-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
.resp-hilo { margin-top: 14px; padding-top: 12px; border-top: 1px solid #f0f2f4; }
.resp-item { background: #f6fbf0; border-left: 3px solid var(--verde-lima); border-radius: 8px; padding: 12px 16px; margin-bottom: 8px; }
.resp-item .resp-meta { font-size: 0.78rem; color: #888; margin-bottom: 6px; }
.resp-item .resp-body { font-size: 0.9rem; color: #333; white-space: pre-wrap; word-break: break-word; }
.reply-box { margin-top: 12px; padding: 14px 16px; background: #f8fafb; border: 1.5px solid #e4e8ed; border-radius: 10px; }
.reply-box textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1.5px solid #e4e8ed; border-radius: 8px; font-size: 0.92rem; font-family: var(--font-cuerpo); resize: vertical; background: #fff; outline: none; transition: border-color 0.2s; }
.reply-box textarea:focus { border-color: var(--verde-lima); }
.reply-box-actions { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.reply-status { font-size: 0.82rem; margin-left: 4px; }
.reply-status.ok  { color: #2e6b00; }
.reply-status.err { color: #c62828; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; align-items: center; }
.filter-bar select { padding: 8px 12px; border: 1.5px solid #e4e8ed; border-radius: 8px; font-size: 0.88rem; background: #f8fafb; }
/* mensajes-admin action buttons */
.msg-btn { font-size: 0.8rem; padding: 6px 14px; border: none; border-radius: 6px; cursor: pointer; }
.msg-btn-leido   { background: var(--verde-lima); color: #000; font-weight: 600; }
.msg-btn-reply   { background: #ddeaf7; color: #1a3a6b; }
.msg-btn-delete  { background: #fdecea; color: #c62828; }
.msg-btn-send    { background: var(--verde-lima); color: #000; font-size: 0.85rem; padding: 7px 18px; font-weight: 700; }
.msg-btn-cancel  { background: #f0f2f4; color: #555; font-size: 0.85rem; padding: 7px 14px; }
.reply-label     { font-size: 0.8rem; font-weight: 700; color: #555; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.05em; }

/* ===== MOBILE ===== */
.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--blanco);
  border-radius: 2px;
  transition: all 0.3s;
}

nav.nav-open .hamburger span:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }
nav.nav-open .hamburger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
nav.nav-open .hamburger span:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); }

@media (max-width: 768px) {
  nav { padding: 14px 20px; top: 0; }
  .hamburger { display: flex; }

  .nav-collapse {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin-left: 0;
    background: #0d0d0d;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 0 24px 20px;
    z-index: 500;
  }
  nav.nav-open .nav-collapse { display: flex; }

  nav.nav-open .nav-links {
    flex-direction: column;
    gap: 6px;
    overflow: visible;
    width: 100%;
    padding: 16px 0 12px;
  }
  nav.nav-open .nav-links a { font-size: 0.9rem; }

  nav.nav-open .nav-right {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 12px 0 0;
    border-top: 1px solid rgba(255,255,255,0.12);
  }

  .hero h1 { font-size: 2rem; }
  .hero-content { padding: 0 24px 60px; }

  .que-pasa { padding: 60px 24px; }
  .que-pasa-inner { grid-template-columns: 1fr; gap: 40px; }

  .somos-red { padding: 0 24px; height: auto; min-height: auto; padding: 80px 24px; }
  .somos-red-content { flex-direction: column; gap: 32px; }

  .como-actuamos { padding: 80px 24px; }

  .ya-protegimos { padding: 60px 24px; }
  .marquee-wrap { margin: 0 -24px; }

  .novedades { padding: 60px 24px; }
  .novedades-grid { grid-template-columns: 1fr; }

  footer { padding: 48px 24px 28px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
  .footer-legal { justify-content: center; }

  .niveles-grid { grid-template-columns: 1fr; }
  .impacto-grid { grid-template-columns: 1fr 1fr; }
  .modelo-grid { grid-template-columns: 1fr 1fr; }
  .equipo-grid { grid-template-columns: 1fr 1fr; }
  .contacto-grid { grid-template-columns: 1fr; gap: 40px; }

  .page-hero { padding: 120px 24px 60px; }
  .page-section { padding: 60px 24px; }

  .gateway-btns { grid-template-columns: 1fr; }

  .admin-section { padding: 16px 24px; }
  .pasos-grid { grid-template-columns: repeat(2, 1fr); }
  .paso-card { height: 260px; }
  .stats-grandes { gap: 24px; }
  .stat-grande-num { font-size: 2.2rem; }
  .kpi-link-section { padding: 40px 24px; }
}

@media (max-width: 480px) {
  .footer-top { grid-template-columns: 1fr; gap: 28px; }

  .admin-filters input { min-width: auto; width: 100%; }

  .pasos-grid { grid-template-columns: 1fr; }
}

/* ===== SELECT OSCURO (dark pages) ===== */
.select-dark {
  background: #2a2a2a;
  border: 1px solid rgba(255,255,255,0.2);
  color: white;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-family: var(--font-cuerpo);
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='rgba(255,255,255,0.4)' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  transition: border-color 0.18s;
}
.select-dark:focus {
  border-color: rgba(184,224,74,0.6);
}
.select-dark option {
  background: #2a2a2a;
  color: white;
}

/* ===== UPLOAD WIDGET ===== */
.upload-area { display: flex; align-items: center; gap: 10px; border: 2px dashed transparent; border-radius: 10px; padding: 6px 8px; transition: border-color .15s, background .15s; }
.upload-area.upload-area-over { border-color: #b8e04a; background: rgba(184,224,74,0.06); }
.upload-drop-hint { font-size: 0.72rem; color: rgba(255,255,255,0.3); }
/* Zona de drop prominente (full-width) */
.upload-area-full { flex-direction: column; justify-content: center; align-items: center; gap: 8px; width: 100%; min-height: 110px; border: 2px dashed rgba(255,255,255,0.18); border-radius: 12px; padding: 20px; box-sizing: border-box; text-align: center; cursor: pointer; }
.upload-area-full .upload-drop-hint { font-size: 0.8rem; color: rgba(255,255,255,0.4); margin-top: 2px; }
.upload-area-full .upload-drop-icon { font-size: 1.6rem; line-height: 1; }
.upload-area-full:hover, .upload-area-full.upload-area-over { border-color: #b8e04a; background: rgba(184,224,74,0.05); }
.upload-btn {
  background: rgba(255,255,255,0.08);
  border: 1px dashed rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.7);
  padding: 9px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.18s, border-color 0.18s;
}
.upload-btn:hover { background: rgba(255,255,255,0.13); border-color: rgba(184,224,74,0.5); color: white; }
.upload-progress { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.upload-bar { flex: 1; height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; }
.upload-fill { height: 100%; background: #b8e04a; width: 0%; transition: width 0.15s; }
.upload-pct { font-size: 0.75rem; color: rgba(255,255,255,0.5); min-width: 32px; }
.upload-result { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.upload-preview { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; border: 1px solid rgba(255,255,255,0.15); }
.upload-chip { display: flex; align-items: center; gap: 8px; background: rgba(184,224,74,0.1); border: 1px solid rgba(184,224,74,0.25); border-radius: 8px; padding: 6px 10px; flex: 1; min-width: 0; }
.upload-chip-name { font-size: 0.82rem; color: #b8e04a; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-chip-size { font-size: 0.72rem; color: rgba(255,255,255,0.4); white-space: nowrap; }
.upload-chip-clear { background: none; border: none; color: rgba(255,255,255,0.4); cursor: pointer; font-size: 0.9rem; padding: 0 2px; line-height: 1; }
.upload-chip-clear:hover { color: #e74c3c; }

/* ===== DROPDOWN ===== */
.dropdown { position: relative; }

.dropdown-toggle { 
    cursor: pointer; 
    display: inline-flex; 
    align-items: center; 
    gap: 4px; 
    background: var(--verde-lima); 
    color: var(--negro); 
    border: none; 
    padding: 10px 22px; 
    border-radius: 100px; 
    font-family: var(--font-cuerpo); 
    font-size: 0.82rem; 
    font-weight: 600; 
    text-decoration: none;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--negro);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    padding: 8px 0;
    min-width: 200px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
    z-index: 1000;
}

.dropdown.active .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    margin: 4px 10px;
    border-radius: 100px;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    transition: all 0.15s;
}

.dropdown-menu a.donar {
    background: var(--verde-lima);
    color: var(--negro);
}

.dropdown-menu a.donar:hover { background: var(--verde-lima-hover); transform: translateY(-1px); }

.dropdown-menu a.suscribirse {
    background: #6a9e3a;
    color: white;
}

/* =====================================================
   Sistema de iconos Lucide (HPM)
   Activo cuando ICON_MODE = 'lucide' en icons.js
===================================================== */

.hpm-icon {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  opacity: .92;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
  display: inline-block;
  transition:
    transform .18s ease,
    opacity   .18s ease,
    stroke    .18s ease;
}

/* Wrapper visual opcional */
.icon-wrap {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(74,124,89,.10), rgba(74,124,89,.05));
  border: 1px solid rgba(74,124,89,.08);
  backdrop-filter: blur(4px);
  transition:
    transform  .18s ease,
    background .18s ease,
    border-color .18s ease;
}

.icon-wrap:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(74,124,89,.16), rgba(74,124,89,.10));
  border-color: rgba(74,124,89,.18);
}

/* Tamaños contextuales */
.sidebar .hpm-icon        { width: 19px; height: 19px; }
button  .hpm-icon         { width: 17px; height: 17px; }
th      .hpm-icon,
td      .hpm-icon         { width: 15px; height: 15px; }

/* Estados semáforo */
.estado-ok      .hpm-icon { stroke: #3d7a46; }
.estado-alerta  .hpm-icon { stroke: #b28a2e; }
.estado-critico .hpm-icon { stroke: #b0413e; }

/* ── KPI elements inside admin-section: light theme ────────────────────── */
.admin-section .kpi-card {
  background: #fff;
  border-color: #e5e7eb;
  color: var(--negro);
}
.admin-section .kpi-card h3 { color: var(--negro); }
.admin-section .kpi-card p  { color: var(--gris-texto); }
.admin-section .kpi-card-nombre  { color: var(--negro); }
.admin-section .kpi-card-cientifico,
.admin-section .kpi-card-meta    { color: var(--gris-texto); }
.admin-section .kpi-summary-card { background: #f5f7fa; border-color: #e5e7eb; }
.admin-section .kpi-summary-card .label { color: var(--gris-texto); }
.admin-section .kpi-row-item { background: #f5f7fa; border-color: #e5e7eb; }
.admin-section .kpi-desc    { color: var(--gris-texto); background: rgba(0,0,0,0.03); }
.admin-section table th     { color: var(--gris-medio); border-bottom-color: #e5e7eb; }
.admin-section table td     { color: var(--negro); border-bottom-color: #f0f0f0; }
.admin-section table tr:hover td { background: rgba(0,0,0,0.02); }
.admin-section .kpi-users-table th { color: var(--gris-medio); border-bottom-color: #e5e7eb; }
.admin-section .kpi-user-name  { color: var(--negro); }
.admin-section .kpi-user-email,
.admin-section .kpi-date-cell  { color: var(--gris-texto); }
.admin-section input[type=date],
.admin-section input[type=text],
.admin-section input[type=number],
.admin-section select,
.admin-section textarea        { background: #fff; border-color: #d1d5db; color: var(--negro); }
.admin-section input::placeholder,
.admin-section textarea::placeholder { color: #9ca3af; }
.admin-section .kpi-search-input { background: #fff; border-color: #d1d5db; color: var(--negro); }
.admin-section .kpi-search-input::placeholder { color: #9ca3af; }
.admin-section .kpi-btn-editar,
.admin-section .kpi-btn-cambiar,
.admin-section .kpi-btn-cancel { background: rgba(0,0,0,0.07); color: var(--negro); }
.admin-section .kpi-empty      { color: var(--gris-medio); }
.admin-section .section-header { border-bottom-color: #e5e7eb; }
.admin-section .kpi-tab        { color: var(--gris-texto); border-bottom-color: transparent; }
.admin-section .kpi-tab.active { color: var(--verde-lima); border-bottom-color: var(--verde-lima); }
.page-hero.light .kpi-back-link       { color: var(--gris-texto); }
.page-hero.light .kpi-back-link:hover { color: var(--negro); }

.dropdown-menu a.suscribirse:hover { background: #5a8a2e; transform: translateY(-1px); }

/* ── Nuestros Proyectos — dropdown de dos niveles ──────────── */
.nav-proyectos-toggle {
  font-weight: 700 !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--verde-lima) !important;
}
.nav-proy-arrow { font-size: 0.7rem; opacity: 0.6; transition: transform 0.18s; }
.nav-proyectos.open .nav-proyectos-toggle .nav-proy-arrow { transform: rotate(90deg); }
.nav-proyectos-drop {
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #111;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 6px 0;
  min-width: 200px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 600;
}
.nav-proyectos-drop.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-proyectos-drop > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 16px;
  color: rgba(255,255,255,0.85) !important;
  font-size: 0.82rem !important;
  font-weight: 400;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.nav-proyectos-drop > li > a:hover { background: rgba(255,255,255,0.06); color: #fff !important; }

/* Segundo nivel */
.nav-subdrop-item { position: relative; }
.nav-subdrop {
  list-style: none;
  position: absolute;
  top: -6px;
  left: calc(100% + 4px);
  background: #111;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 6px 0;
  min-width: 140px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 601;
}
.nav-subdrop-item:hover .nav-subdrop {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.nav-subdrop li a {
  display: block;
  padding: 9px 16px;
  color: rgba(255,255,255,0.8) !important;
  font-size: 0.82rem !important;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.nav-subdrop li a:hover { background: rgba(184,224,74,0.1); color: #b8e04a !important; }

/* ===== AUTH (login / register) ===== */
.auth-page {
  min-height: 100vh;
  background: var(--negro);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px 20px 40px;
}

.auth-card {
  background: var(--blanco);
  border-radius: 24px;
  padding: 48px 40px;
  width: 100%;
  max-width: 420px;
}

.auth-card .nav-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
  text-decoration: none;
}

.auth-card h1 {
  font-family: var(--font-titulo);
  font-size: 1.8rem;
  font-weight: 900;
  margin-bottom: 8px;
  text-align: center;
}

.auth-card .subtitle {
  color: var(--gris-medio);
  text-align: center;
  margin-bottom: 32px;
  font-size: 0.9rem;
}

.auth-form .form-group {
  margin-bottom: 20px;
}

.auth-form .form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--gris-texto);
}

.auth-form .form-group input {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--gris-claro);
  border-radius: 10px;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s;
  background: #fff;
  color: #333;
}

.auth-form .form-group input::placeholder {
  color: #999;
}

.auth-form .form-group input:focus {
  border-color: var(--verde-lima);
}

.auth-form .btn-submit {
  width: 100%;
  padding: 16px;
  background: var(--verde-lima);
  color: var(--negro);
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
  transition: background 0.2s;
}

.auth-form .btn-submit:hover {
  background: var(--verde-lima-hover);
}

.auth-form .btn-submit:disabled {
  background: var(--gris-claro);
  cursor: not-allowed;
}

.auth-footer {
  text-align: center;
  margin-top: 24px;
  font-size: 0.9rem;
  color: var(--gris-texto);
}

.auth-footer a {
  color: var(--verde-lima);
  font-weight: 600;
  text-decoration: none;
}

.auth-footer a:hover {
  text-decoration: underline;
}

.auth-alert {
  padding: 14px 16px;
  border-radius: 10px;
  margin-bottom: 20px;
  font-size: 0.9rem;
}

.auth-alert.error   { background: #fee2e2; color: #991b1b; }
.auth-alert.success { background: #dcfce7; color: #166534; }
.auth-alert.info    { background: #e0f2fe; color: #0369a1; }

.password-wrapper {
  position: relative;
}

.password-wrapper input {
  padding-right: 46px !important;
}

.toggle-password {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--gris-medio);
  display: flex;
  align-items: center;
  touch-action: manipulation;
}

.toggle-password:hover { color: var(--verde-oscuro); }

.back-link {
  text-align: center;
  margin-top: 20px;
}

.back-link a {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  font-size: 0.85rem;
}

.back-link a:hover { color: var(--verde-lima); }

.donation-reminder {
  background: var(--crema);
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 24px;
  text-align: center;
}

.donation-reminder strong { color: var(--verde-oscuro); }

.google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: var(--blanco);
  color: var(--gris-texto);
  border: 1.5px solid var(--gris-claro);
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  margin-top: 16px;
  transition: all 0.2s;
}

.google-btn:hover {
  border-color: var(--gris-medio);
  background: var(--gris-claro);
}

.google-btn svg { width: 20px; height: 20px; }

.divider {
  display: flex;
  align-items: center;
  margin: 24px 0;
  color: var(--gris-medio);
  font-size: 0.85rem;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gris-claro);
}

.divider span { padding: 0 12px; }

/* ===== MAPA ===== */
body.mapa-body { background: #333 !important; margin: 0 !important; overflow: hidden !important; }
.map-wrapper { display: flex; height: 100vh; padding-top: 112px; }
#mapid { flex: 1; height: calc(100vh - 112px); }
#zones-panel { width: 350px; background: #333; color: white; padding: 20px; overflow-y: auto; height: calc(100vh - 112px); }
.zone-type { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 700; }
.type-semilla { background: #4CAF50; }
.type-brote   { background: #8BC34A; }
.type-arbol   { background: #FF9800; }
.type-bosque  { background: #795548; }
.type-especial { background: #9C27B0; }
.zone-card { background: rgba(255,255,255,0.05); border-radius: 12px; padding: 12px; margin-bottom: 10px; cursor: pointer; }
.zone-card:hover { background: rgba(255,255,255,0.1); }
.zone-card.active { border: 2px solid #b8e04a; }
.zone-card.deleted { opacity: 0.5; }
.zone-stats { font-size: 0.8rem; color: rgba(255,255,255,0.7); margin-top: 6px; }
.btn-detail { background: rgba(184,224,74,0.2); border: 1px solid #b8e04a; color: #b8e04a; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 0.75rem; margin-top: 8px; width: 100%; }
.btn-detail:hover { background: rgba(184,224,74,0.3); }
.layer-control { position: absolute; top: 10px; right: 10px; z-index: 999; background: white; border-radius: 8px; padding: 8px; }
.layer-btn { display: block; width: 100%; padding: 8px 16px; border: none; background: transparent; cursor: pointer; border-radius: 6px; font-size: 0.85rem; }
.layer-btn.active { background: #b8e04a; color: #0d0d0d; font-weight: bold; }
.btn-add { background: #b8e04a; color: #0d0d0d; border: none; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; font-size: 16px; font-weight: bold; }
.filter-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.legend-item { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 0.85rem; }
.legend-color { width: 16px; height: 16px; border-radius: 4px; }
.mapa-btn { background: #b8e04a; color: #0d0d0d; border: none; padding: 10px 16px; border-radius: 8px; cursor: pointer; font-weight: 600; width: 100%; margin-top: 8px; }
.mapa-btn:hover { opacity: 0.9; }
.mapa-btn.danger   { background: #e74c3c; color: white; }
.mapa-btn.outline  { background: transparent; border: 1px solid rgba(255,255,255,0.3); color: white; }
.mapa-btn.secondary { background: #666; color: white; }
/* Alias sin prefijo para compatibilidad con HTML generado por JS */
.mapa-body .btn            { background: #b8e04a; color: #0d0d0d; border: none; padding: 10px 16px; border-radius: 8px; cursor: pointer; font-weight: 600; width: 100%; margin-top: 8px; }
.mapa-body .btn:hover      { opacity: 0.9; }
.mapa-body .btn-danger     { background: #e74c3c; color: white; }
.mapa-body .btn-outline    { background: transparent; border: 1px solid rgba(255,255,255,0.3); color: white; }
.mapa-body .btn-secondary  { background: #666; color: white; }
.stats-box { background: rgba(255,255,255,0.05); border-radius: 8px; padding: 12px; margin: 12px 0; }
.mapa-body .stat-row { display: flex; justify-content: space-between; padding: 4px 0; }
.back-btn { color: #b8e04a; cursor: pointer; margin-bottom: 12px; }
.back-btn:hover { text-decoration: underline; }
.mapa-body .form-section { background: rgba(255,255,255,0.05); border-radius: 12px; padding: 16px; margin-top: 16px; }
.mapa-body .form-section h4 { color: #b8e04a; margin: 0 0 12px; }
.mapa-body .form-section input { width: 100%; padding: 8px; margin-bottom: 10px; border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; background: rgba(255,255,255,0.1); color: white; }
.mapa-body .form-section .select-dark { width: 100%; margin-bottom: 10px; }
.mapa-body .form-row { display: flex; gap: 10px; }
.mapa-body .form-row > * { flex: 1; }
body.mapa-body nav#navbar { z-index: 1100 !important; }
.mapa-tabs-bar { position: fixed; top: 70px; left: 0; right: 0; z-index: 1050; background: #0d0d0d; padding: 6px 20px; border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; gap: 6px; }
.draw-instructions { background: rgba(184,224,74,0.2); border: 2px dashed #b8e04a; border-radius: 8px; padding: 16px; margin: 12px 0; text-align: center; }
.draw-instructions h5 { margin: 0 0 8px; color: #b8e04a; }
.draw-instructions p { margin: 0; font-size: 0.85rem; color: rgba(255,255,255,0.8); }
.vertex-marker { background: #b8e04a; border: 2px solid white; border-radius: 50%; width: 20px; height: 20px; }
.preview-rect { stroke: #b8e04a; stroke-width: 3; stroke-dasharray: 5,5; fill: rgba(184,224,74,0.2); }
.drag-marker { cursor: move !important; }
.view-tabs { display: flex; gap: 6px; background: rgba(255,255,255,0.06); border-radius: 10px; padding: 4px; }
.view-tab  { padding: 6px 16px; border-radius: 7px; border: 1px solid rgba(255,255,255,0.18); cursor: pointer; font-size: 0.9rem; font-weight: 600; transition: all .18s; background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.5); }
.view-tab.active { background: #b8e04a; color: #0d0d0d; border-color: #b8e04a; }
.view-tab:hover:not(.active) { color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.32); }
#kpi-frame-wrap, #exp-frame-wrap { display: none; position: fixed; top: 112px; left: 0; right: 0; bottom: 0; z-index: 100; background: #0d0d0d; }
#kpi-frame, #exp-frame { width: 100%; height: 100%; border: none; }
#checkin-view-wrap { display: none; width: 350px; flex-shrink: 0; background: #333; color: white; padding: 20px; overflow-y: auto; height: calc(100vh - 112px); }
body.admin-mode #zones-panel { width: 460px; }
.map-info { position: absolute; bottom: 20px; left: 10px; z-index: 999; background: white; padding: 8px 12px; border-radius: 8px; font-size: 0.75rem; font-family: system-ui, sans-serif; }
.checkin-panel-title { font-size: 0.88rem; font-weight: 700; color: #b8e04a; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.1); }

@media (max-width: 768px) {
  body.mapa-body { overflow-y: auto !important; }
  .map-wrapper { flex-direction: column; height: auto; overflow: visible; }
  #mapid { flex: none; height: 65vw; min-height: 300px; max-height: 480px; width: 100%; }
  #zones-panel,
  #checkin-view-wrap { width: 100% !important; height: auto; max-height: none; }
  #kpi-frame-wrap,
  #exp-frame-wrap { top: 112px; }
}


/* ===== MI-BANDV ===== */
.mbv-header { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; }
.mbv-header h1 { margin: 0; }
.mbv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 20px; margin-bottom: 40px; }
.mbv-card { background: var(--blanco); border-radius: 20px; padding: 28px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); border: 1px solid var(--gris-claro); }
.mbv-card h3 { font-family: var(--font-titulo); font-size: 1.1rem; font-weight: 900; margin: 0 0 16px; display: flex; align-items: center; gap: 8px; }
.mbv-stat { font-size: 2.2rem; font-weight: 900; color: var(--verde-oscuro); line-height: 1; margin-bottom: 4px; }
.mbv-stat-label { font-size: 0.85rem; color: var(--gris-medio); }
.mbv-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.mbv-table th { text-align: left; padding: 10px 12px; border-bottom: 2px solid var(--gris-claro); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--gris-medio); }
.mbv-table td { padding: 10px 12px; border-bottom: 1px solid var(--gris-claro); }
.mbv-table tr:last-child td { border-bottom: none; }
.mbv-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 0.78rem; font-weight: 600; }
.mbv-badge.active    { background: rgba(184,224,74,0.2); color: #5a8a1e; border: 1px solid #b8e04a; }
.mbv-badge.cancelled { background: rgba(200,200,200,0.15); color: #999; border: 1px solid #ccc; }
.mbv-badge.past_due  { background: rgba(231,76,60,0.15); color: #c0392b; border: 1px solid #e74c3c; }
/* Alias sin prefijo para compatibilidad con HTML generado por JS */
.badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 0.78rem; font-weight: 600; }
.badge.active    { background: rgba(184,224,74,0.2); color: #5a8a1e; border: 1px solid #b8e04a; }
.badge.cancelled { background: rgba(200,200,200,0.15); color: #999; border: 1px solid #ccc; }
.badge.past_due  { background: rgba(231,76,60,0.15); color: #c0392b; border: 1px solid #e74c3c; }
.mbv-empty { text-align: center; padding: 40px; color: var(--gris-medio); }
.mbv-empty p { font-size: 0.95rem; margin-bottom: 16px; }
.mbv-section-title { font-family: var(--font-titulo); font-size: 1.3rem; font-weight: 900; margin: 32px 0 16px; }
.mbv-loading { text-align: center; padding: 60px; color: var(--gris-medio); }
.mbv-card--flush { padding: 0; overflow: hidden; }
.mbv-parcela-mini { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 4px; }
.mbv-parcela-grid { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.mbv-parcela-item { width: 16px; height: 16px; border-radius: 3px; }

/* ===== SUSCRIPCIONES ===== */
.freq-page-btn { flex: 1; min-width: 90px; padding: 12px 8px; border: 1px solid #ddd; border-radius: 10px; background: #fff; cursor: pointer; font-size: 0.9rem; font-weight: 500; transition: all 0.2s; text-align: center; }
.freq-page-btn.active { background: #b8e04a; border: 2px solid #b8e04a; color: #000; font-weight: 700; }
.freq-page-btn:not(.active):hover { border-color: #b8e04a; }
.amount-chip { padding: 8px 18px; border: 1px solid #ddd; border-radius: 20px; background: #fff; cursor: pointer; font-size: 0.9rem; transition: all 0.2s; }
.amount-chip.active, .amount-chip:hover { background: #b8e04a; border-color: #b8e04a; font-weight: 600; }
#page-parcel-breakdown { display: flex; gap: 8px; flex-wrap: wrap; min-height: 36px; }
.suscripciones-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.suscripciones-table th { padding: 10px 12px; text-align: left; border-bottom: 2px solid rgba(255,255,255,0.2); font-weight: 600; opacity: 0.8; }
.suscripciones-table td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.badge-status { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 0.78rem; font-weight: 600; }
.badge-status.active           { background: rgba(184,224,74,0.2); color: #b8e04a; border: 1px solid #b8e04a; }
.badge-status.cancelled        { background: rgba(200,200,200,0.15); color: #aaa; border: 1px solid #555; }
.badge-status.past_due         { background: rgba(231,76,60,0.2); color: #e74c3c; border: 1px solid #e74c3c; }
.badge-status.pending_approval { background: rgba(251,191,36,0.2); color: #f59e0b; border: 1px solid #f59e0b; }
.btn-cancelar { background: transparent; border: 1px solid rgba(255,255,255,0.3); color: rgba(255,255,255,0.7); padding: 6px 14px; border-radius: 16px; font-size: 0.8rem; cursor: pointer; transition: all 0.2s; }
.btn-cancelar:hover { background: rgba(231,76,60,0.2); border-color: #e74c3c; color: #e74c3c; }
.selector-card { background: #fff; border-radius: 16px; padding: 28px; max-width: 560px; margin: 0 auto; box-shadow: 0 4px 24px rgba(0,0,0,0.08); }
.selector-card label { display: block; margin-bottom: 8px; font-weight: 600; color: #333; font-size: 0.95rem; }
.selector-card input[type=number] { width: 100%; padding: 12px 16px; border: 1.5px solid #ddd; border-radius: 10px; font-size: 1.1rem; outline: none; transition: border 0.2s; box-sizing: border-box; }
.selector-card input[type=number]:focus { border-color: #b8e04a; }
.alert-verde {
  margin-top: 20px;
  padding: 16px 24px;
  background: rgba(184,224,74,0.2);
  border: 1px solid var(--verde-lima);
  border-radius: 12px;
  color: var(--verde-lima);
}
.alert-verde a { color: var(--verde-lima); font-weight: 600; }

/* ── Etiqueta de sección dentro de formularios de auth / registro ── */
.auth-section-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--gris-medio);
  margin: 20px 0 14px;
  padding-top: 16px;
  border-top: 1px solid var(--gris-claro);
}

.auth-section-label:first-child,
.auth-section-label--first {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  margin-bottom: 14px;
}

/* ── Mobile: segundo nivel inline/accordion ─────────────────────────────── */
@media (max-width: 768px) {
  /* Sobreescribir posición absoluta → inline debajo del proyecto */
  .nav-subdrop-item { position: static; }
  .nav-subdrop,
  .nav-subdrop-item:hover .nav-subdrop {
    position: static !important;
    left: auto !important; top: auto !important;
    opacity: 1 !important; visibility: visible !important;
    transform: none !important;
    background: transparent;
    border: none; box-shadow: none; border-radius: 0;
    min-width: 0; padding: 0; margin: 0 0 0 20px;
    border-left: 2px solid rgba(184,224,74,0.2);
    /* oculto por max-height */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.22s ease;
  }
  .nav-subdrop-item.open .nav-subdrop {
    max-height: 200px !important;
  }
  .nav-subdrop li a {
    padding: 7px 10px 7px 14px !important;
    font-size: 0.82rem !important;
    color: rgba(184,224,74,0.9) !important;
    border-bottom: none;
  }
  .nav-subdrop li a:hover { background: rgba(184,224,74,0.08); }
  /* Flecha gira al abrir */
  .nav-subdrop-item.open > a .nav-proy-arrow { transform: rotate(90deg); }
}

/* ===== PANEL USUARIOS ADMIN ===== */
.admin-container.wide { max-width: 1400px; }
#user-detail-section { display: none; margin-top: 24px; }
.user-stats-detail { margin-top: 16px; }

/* ===== CAMPOS ADMIN ===== */
.campos-table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.campos-table th, .campos-table td { padding: 14px 12px; text-align: left; border-bottom: 1px solid var(--gris-claro); }
.campos-table th { color: var(--negro); font-weight: 600; font-size: 0.85rem; }
.campos-table td { font-size: 0.9rem; }
.campos-table tr:hover td { background: var(--crema); }
.campo-name { font-weight: 600; }
.campo-preview { width: 40px; height: 40px; border-radius: 8px; display: inline-block; }
.color-preview { display: inline-block; width: 24px; height: 24px; border-radius: 4px; vertical-align: middle; margin-right: 8px; }
.color-input-row { display: flex; gap: 10px; align-items: center; }
.color-input-picker { width: 50px; height: 38px; padding: 2px; border-radius: 6px; border: 1px solid var(--gris-claro); cursor: pointer; }
.color-input-text { flex: 1; }
.filter-box { margin-bottom: 16px; }
.filter-box input { padding: 12px 16px; font-size: 1rem; width: 100%; border: 1px solid var(--gris-claro); border-radius: 8px; outline: none; font-family: var(--font-cuerpo); }
.filter-box input:focus { border-color: var(--negro); }
.form-edit-row { display: none; background: var(--crema); padding: 16px; border-radius: 8px; margin-top: 12px; }
.form-edit-row.active { display: block; }
.form-edit-row .btn-row { display: flex; gap: 10px; }
.help-text { font-size: 0.75rem; color: var(--gris-medio); margin-top: 4px; }
.stats-row { display: flex; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.stat-card { background: var(--crema); border: 1px solid var(--gris-claro); border-radius: 12px; padding: 16px 24px; text-align: center; flex: 1; min-width: 100px; }
.stat-card.clickable { cursor: pointer; }
.stat-card.clickable:hover { border-color: var(--verde-lima); background: rgba(184,224,74,0.08); }
.stat-number { font-size: 1.8rem; font-weight: bold; color: var(--negro); font-family: var(--font-titulo); }
.stat-label { font-size: 0.8rem; color: var(--gris-medio); margin-top: 4px; }
.admin-section-box { background: var(--crema); border: 1px solid var(--gris-claro); border-radius: 12px; padding: 24px; margin-bottom: 24px; }
.admin-section-box h3 { font-family: var(--font-titulo); font-size: 1.2rem; font-weight: 700; color: var(--negro); margin: 0 0 16px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .form-group.full { grid-column: 1 / -1; }
.admin-row-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ===== SETTINGS ADMIN ===== */
.settings-table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.settings-table th, .settings-table td { padding: 14px 12px; text-align: left; border-bottom: 1px solid var(--gris-claro); }
.settings-table th { color: var(--negro); font-weight: 600; font-size: 0.85rem; }
.settings-table td { font-size: 0.9rem; }
.settings-table tr:hover td { background: var(--crema); }
.key-col { font-family: monospace; color: var(--negro); min-width: 150px; font-weight: 600; }
.value-col { font-family: monospace; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gris-texto); }
.desc-col { color: var(--gris-medio); font-size: 0.8rem; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-col { font-family: monospace; color: var(--gris-medio); font-size: 0.8rem; width: 60px; }
.type-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.7rem; background: var(--gris-claro); color: var(--gris-texto); }

/* ===== NEWSLETTER ADMIN ===== */
.toggle-switch { position: relative; width: 48px; height: 26px; display: inline-block; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--gris-claro); transition: 0.3s; border-radius: 26px; }
.toggle-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 4px; bottom: 4px; background-color: white; transition: 0.3s; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.toggle-switch input:checked + .toggle-slider { background-color: var(--verde-lima); }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(22px); }
.toggle-switch input:disabled + .toggle-slider { opacity: 0.5; cursor: not-allowed; }
.users-table { width: 100%; border-collapse: collapse; }
.users-table th, .users-table td { padding: 14px 12px; text-align: left; border-bottom: 1px solid var(--gris-claro); }
.users-table th { color: var(--negro); font-weight: 600; font-size: 0.85rem; background: var(--crema); }
.users-table tr:hover td { background: var(--crema); }
.user-date { font-size: 0.85rem; color: var(--gris-medio); }
.sort-select { margin-top: 8px; width: 100%; }

/* ===== DONATION TYPES ADMIN ===== */
.type-card { background: var(--crema); border: 1px solid var(--gris-claro); border-radius: 10px; padding: 16px 20px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.type-info { flex: 1; }
.type-name { font-weight: 700; font-size: 1rem; margin-bottom: 4px; color: var(--negro); }
.type-meta { font-size: 0.8rem; color: var(--gris-medio); display: flex; gap: 16px; flex-wrap: wrap; }
.badge-semilla { background: #4CAF50; color: #000; display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 0.72rem; font-weight: 600; }
.badge-brote   { background: #8BC34A; color: #000; display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 0.72rem; font-weight: 600; }
.badge-arbol   { background: #FF9800; color: #000; display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 0.72rem; font-weight: 600; }
.badge-bosque  { background: #795548; color: #fff; display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 0.72rem; font-weight: 600; }
.badge-especial { background: #9C27B0; color: #fff; display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 0.72rem; font-weight: 600; }
.badge-manual  { background: rgba(33,150,243,0.15); color: #1565C0; border: 1px solid #2196F3; display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 0.72rem; font-weight: 600; }
.badge-auto    { background: rgba(76,175,80,0.15); color: #2E7D32; border: 1px solid #4CAF50; display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 0.72rem; font-weight: 600; }
.checkbox-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.checkbox-row input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--verde-lima); cursor: pointer; }
.checkbox-row label { font-size: 0.9rem; color: var(--gris-texto); cursor: pointer; margin: 0; }
.color-input-hex { font-size: 0.85rem; color: var(--gris-texto); }
.form-actions { display: flex; gap: 10px; margin-top: 16px; }

/* ===== TRANSLATIONS ADMIN ===== */
.locale-tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.locale-tab { padding: 8px 20px; border-radius: 8px; cursor: pointer; font-size: 0.9rem; font-weight: 600; border: 1.5px solid var(--gris-claro); background: transparent; color: var(--gris-texto); transition: all 0.2s; font-family: var(--font-cuerpo); }
.locale-tab:hover { border-color: var(--negro); color: var(--negro); }
.locale-tab.active { background: var(--negro); color: var(--blanco); border-color: var(--negro); }
.locale-flag { margin-right: 6px; }
.filter-row { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.filter-row input { padding: 10px 14px; border-radius: 8px; border: 1px solid var(--gris-claro); background: var(--blanco); color: var(--negro); font-size: 0.9rem; flex: 1; min-width: 200px; outline: none; font-family: var(--font-cuerpo); }
.filter-row input:focus { border-color: var(--negro); }
.translations-table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.translations-table th { color: var(--negro); font-weight: 600; font-size: 0.8rem; text-align: left; padding: 12px; border-bottom: 2px solid var(--gris-claro); position: sticky; top: 0; background: var(--blanco); }
.translations-table td { padding: 12px; border-bottom: 1px solid var(--gris-claro); vertical-align: top; }
.translations-table tr:hover td { background: var(--crema); }
.group-col { font-family: monospace; color: var(--negro); font-size: 0.8rem; white-space: nowrap; font-weight: 600; }
.trans-input { width: 100%; min-width: 150px; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--gris-claro); background: var(--blanco); color: var(--negro); font-size: 0.9rem; font-family: var(--font-cuerpo); }
.trans-input:focus { outline: none; border-color: var(--negro); }
.trans-input.es { border-left: 3px solid var(--verde-lima); }
.trans-input.en { border-left: 3px solid #3498db; }
.trans-input.pt { border-left: 3px solid #27ae60; }
.trans-input.fr { border-left: 3px solid #e67e22; }
.trans-input:disabled { opacity: 0.5; cursor: not-allowed; background: var(--crema); }
.group-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.7rem; background: rgba(184,224,74,0.15); color: #3a6e1a; border: 1px solid rgba(184,224,74,0.3); }
.table-wrap { overflow-x: auto; }
.save-all-btn { position: fixed; bottom: 80px; right: 24px; padding: 12px 24px; font-size: 1rem; z-index: 1000; box-shadow: 0 4px 20px rgba(0,0,0,0.15); }
.add-form { background: var(--crema); padding: 20px; border-radius: 10px; margin-bottom: 20px; border: 1px solid var(--gris-claro); }
.add-form-row { display: grid; grid-template-columns: 150px 200px 1fr; gap: 12px; margin-bottom: 12px; align-items: end; }
.add-form-row.langs { grid-template-columns: repeat(4, 1fr); }

/* ===== LISTADOS ADMIN ===== */
.tables-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 20px; }
.table-card { background: var(--crema); border-radius: 8px; padding: 16px; cursor: pointer; border: 2px solid var(--gris-claro); transition: all 0.2s; text-align: center; }
.table-card:hover { border-color: var(--negro); background: rgba(184,224,74,0.08); }
.table-card.active { border-color: var(--negro); background: rgba(184,224,74,0.12); }
.table-card .icon { font-size: 32px; margin-bottom: 8px; }
.table-card .name { font-weight: 600; font-size: 0.9rem; color: var(--negro); }
.table-card .count { font-size: 0.75rem; color: var(--gris-medio); margin-top: 4px; }
.data-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 0.85rem; }
.data-table th { background: var(--crema); padding: 10px 12px; text-align: left; font-weight: 600; color: var(--negro); border-bottom: 2px solid var(--negro); }
.data-table td { padding: 10px 12px; border-bottom: 1px solid var(--gris-claro); }
.data-table tr:hover td { background: var(--crema); }
.data-table .badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.7rem; font-weight: 600; }
.badge-available { background: #4CAF50; color: white; }
.badge-occupied { background: #e74c3c; color: white; }
.badge-admin { background: #9C27B0; color: white; }
.badge-user { background: #2196F3; color: white; }
.badge-completed { background: #4CAF50; color: white; }
.badge-pending { background: #FF9800; color: white; }
.badge-cancelled { background: #e74c3c; color: white; }
.search-box { margin-bottom: 16px; }
.search-box input { width: 100%; padding: 12px 16px; border-radius: 8px; border: 1px solid var(--gris-claro); background: var(--blanco); color: var(--negro); font-size: 0.9rem; outline: none; font-family: var(--font-cuerpo); }
.search-box input:focus { border-color: var(--negro); }
.table-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.table-info .count { font-size: 0.85rem; color: var(--gris-medio); }
.btn-export { background: #4CAF50; color: white; margin-left: 8px; }
.filters-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.filter-item { display: flex; flex-direction: column; }
.filter-item label { font-size: 0.8rem; color: var(--gris-texto); margin-bottom: 4px; font-weight: 500; }
.filter-item input, .filter-item select { padding: 10px; border-radius: 6px; border: 1px solid var(--gris-claro); background: var(--blanco); color: var(--negro); font-size: 0.9rem; outline: none; font-family: var(--font-cuerpo); }
.filter-item input:focus, .filter-item select:focus { border-color: var(--negro); }
.report-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 0.85rem; }
.report-table th { background: rgba(184,224,74,0.15); padding: 10px 12px; text-align: left; font-weight: 600; color: var(--negro); border-bottom: 2px solid var(--negro); }
.report-table td { padding: 10px 12px; border-bottom: 1px solid var(--gris-claro); }
.report-table tr:hover td { background: var(--crema); }
.report-table td.number { text-align: right; }
.report-table tfoot td { padding: 12px 12px; font-weight: bold; background: rgba(184,224,74,0.15); border-top: 2px solid var(--negro); }
.loading { text-align: center; padding: 40px; color: var(--gris-medio); }
.empty { text-align: center; padding: 40px; color: var(--gris-medio); }

/* ===== MAPA TIPOS ADMIN ===== */
.layer-card { background: var(--crema); border: 1px solid var(--gris-claro); border-radius: 8px; padding: 16px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }
.layer-card.active { border: 2px solid var(--negro); background: rgba(184,224,74,0.08); }
.layer-info { flex: 1; }
.layer-name { font-weight: 600; font-size: 1rem; color: var(--negro); }
.layer-desc { font-size: 0.8rem; color: var(--gris-medio); }
.layer-badge { font-size: 0.7rem; padding: 2px 8px; border-radius: 10px; margin-left: 8px; color: white; }
.badge-sat { background: #2196F3; }
.badge-street { background: #4CAF50; }
.badge-custom { background: #9C27B0; }
.tab-buttons { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.tab-btn { padding: 10px 20px; border-radius: 8px; border: 1.5px solid var(--gris-claro); background: transparent; color: var(--gris-texto); cursor: pointer; font-family: var(--font-cuerpo); font-size: 0.9rem; transition: all 0.2s; }
.tab-btn:hover { border-color: var(--negro); color: var(--negro); }
.tab-btn.active { background: var(--negro); color: var(--blanco); border-color: var(--negro); font-weight: 600; }
.hidden { display: none; }
#preview-map { height: 300px; border-radius: 8px; margin-top: 16px; }
.upload-zone { border: 2px dashed var(--gris-claro); border-radius: 12px; padding: 30px; text-align: center; cursor: pointer; transition: all 0.2s; background: var(--crema); }
.upload-zone:hover { border-color: var(--negro); background: rgba(184,224,74,0.06); }
.upload-zone.dragover { border-color: var(--negro); background: rgba(184,224,74,0.1); }
.upload-icon { font-size: 40px; margin-bottom: 10px; }
.grid-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.option-card { background: var(--crema); border: 2px solid var(--gris-claro); border-radius: 8px; padding: 16px; cursor: pointer; transition: all 0.2s; }
.option-card:hover { border-color: var(--gris-medio); }
.option-card.selected { border-color: var(--negro); background: rgba(184,224,74,0.1); }
.option-title { font-weight: 600; margin-bottom: 4px; color: var(--negro); }
.option-desc { font-size: 0.8rem; color: var(--gris-medio); }
.coords-input { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.coords-input input { padding: 8px; border-radius: 4px; border: 1px solid var(--gris-claro); background: var(--blanco); color: var(--negro); font-size: 0.85rem; outline: none; }
.coords-input input:focus { border-color: var(--negro); }
.file-list { margin-top: 16px; }
.file-item { display: flex; justify-content: space-between; align-items: center; background: var(--crema); border: 1px solid var(--gris-claro); padding: 12px; border-radius: 8px; margin-bottom: 8px; }
.file-info { flex: 1; }
.file-name { font-weight: 600; font-size: 0.9rem; color: var(--negro); }
.file-meta { font-size: 0.75rem; color: var(--gris-medio); }
.upload-form-wrap { margin-top: 20px; }
.btn-w-full { width: 100%; }
.btn-w-full-mt8 { margin-top: 8px; width: 100%; }
.info-box-blue { margin-top: 20px; padding: 16px; background: rgba(33,150,243,0.08); border-radius: 8px; border: 1px solid rgba(33,150,243,0.2); }
.mapa-tipos-form-row { display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.mapa-tipos-form-row > div { flex: 1; min-width: 180px; }
.mapa-tipos-form-row label { display: block; font-size: 0.75rem; color: var(--gris-medio); margin-bottom: 4px; font-weight: 500; }
.mapa-tipos-form-row input, .mapa-tipos-form-row select { width: 100%; padding: 10px; border-radius: 6px; border: 1px solid var(--gris-claro); background: var(--blanco); color: var(--negro); font-family: var(--font-cuerpo); outline: none; font-size: 0.9rem; }
.mapa-tipos-form-row input:focus, .mapa-tipos-form-row select:focus { border-color: var(--negro); }
.mapa-tipos-form-row input[type=range] { padding: 4px 0; border: none; }
.mapa-tipos-help-text { font-size: 0.75rem; color: var(--gris-medio); margin-top: 4px; }
.mapa-tipos-section-box { background: var(--crema); border: 1px solid var(--gris-claro); border-radius: 12px; padding: 20px; margin-bottom: 20px; }
.mapa-tipos-section-box h3 { font-family: var(--font-titulo); font-size: 1.1rem; font-weight: 700; color: var(--negro); margin: 0 0 16px; }
.mapa-tipos-h4 { font-family: var(--font-titulo); font-size: 1rem; font-weight: 700; color: var(--negro); margin: 0 0 12px; }
.mapa-tipos-h5 { font-size: 0.9rem; font-weight: 600; color: var(--negro); margin: 16px 0 8px; }
.mapa-tipos-subtitle { font-size: 0.85rem; color: var(--gris-medio); margin-bottom: 16px; }
.mapa-tipos-no-layers { font-size: 0.85rem; color: var(--gris-medio); }
.mapa-tipos-hr { border: none; border-top: 1px solid var(--gris-claro); margin: 20px 0; }
.mapa-tipos-section-h4 { font-family: var(--font-titulo); font-size: 1rem; color: var(--negro); margin: 0 0 12px; font-weight: 700; }
.info-box-blue strong { color: #1565C0; }
.mapa-tipos-opacity-val { font-size: 0.8rem; color: var(--gris-texto); margin-left: 8px; }