/* Estilos Principales - Tema Negro & Verde Neón (Cultivo de Lulo) */
:root {
  --bg-dark: #070908;
  --bg-card: rgba(15, 23, 18, 0.85);
  --neon-green: #39ff14;
  --neon-green-glow: rgba(57, 255, 20, 0.35);
  --neon-green-subtle: rgba(57, 255, 20, 0.12);
  --text-light: #e5f9eb;
  --text-muted: #b8d5c1; /* Color verde/gris claro de mayor contraste */
  --border-neon: rgba(57, 255, 20, 0.25);
  --gold-accent: #ffb703;
  /* Alto fijo del footer con el mensaje en movimiento (ticker). Se usa
     también para reservarle su espacio al sidebar y al contenido, así
     el footer siempre queda pegado abajo del todo sin tapar nada. */
  --footer-h: 46px;
}

body.dark-theme {
  background-color: var(--bg-dark) !important;
  color: var(--text-light);
  font-family: 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
  overflow-x: hidden;
}

/* Canvas de Animación de Fondo */
#bgCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}

/* Esferas de Brillo Neón Ambiental */
.ambient-neon-glow-1,
.ambient-neon-glow-2 {
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
  animation: neonGlowPulse 8s ease-in-out infinite alternate;
}

.ambient-neon-glow-1 {
  top: -10%;
  left: -10%;
  width: 50vw;
  height: 50vw;
  background: radial-gradient(circle, rgba(57, 255, 20, 0.14) 0%, rgba(0, 0, 0, 0) 70%);
}

.ambient-neon-glow-2 {
  bottom: -15%;
  right: -10%;
  width: 55vw;
  height: 55vw;
  background: radial-gradient(circle, rgba(57, 255, 20, 0.11) 0%, rgba(0, 0, 0, 0) 70%);
  animation-delay: -4s;
}

@keyframes neonGlowPulse {
  0% {
    transform: scale(0.9) translate(0, 0);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.15) translate(20px, -20px);
    opacity: 0.9;
  }
  100% {
    transform: scale(1) translate(-15px, 15px);
    opacity: 0.7;
  }
}

/* Contenedor del Login Dividido */
.login-split-wrapper {
  position: relative;
  z-index: 1;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-card-container {
  width: 100%;
  max-width: 1000px;
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-neon);
  border-radius: 20px;
  box-shadow: 0 0 35px rgba(0, 0, 0, 0.9), 0 0 20px var(--neon-green-glow);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.login-card-container:hover {
  box-shadow: 0 0 45px rgba(0, 0, 0, 0.95), 0 0 25px rgba(57, 255, 20, 0.45);
}

/* Lado Izquierdo: Formulario */
.login-form-side {
  padding: 3.5rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  min-height: 520px;
}

/* Transición Suave de Formularios (Login <-> Registro) */
.form-panel {
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s ease;
  width: 100%;
}

.form-panel.panel-visible {
  opacity: 1;
  transform: translateX(0) scale(1);
  visibility: visible;
  position: relative;
  z-index: 2;
}

.form-panel.panel-hidden {
  opacity: 0;
  transform: translateX(-30px) scale(0.96);
  visibility: hidden;
  position: absolute;
  top: 3.5rem;
  left: 3rem;
  right: 3rem;
  width: calc(100% - 6rem);
  pointer-events: none;
  z-index: 1;
}

/* Logo Insignia Centrado Neón */
.brand-logo-badge {
  width: 75px;
  height: 75px;
  background: rgba(57, 255, 20, 0.1);
  border: 2px solid var(--neon-green);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 22px var(--neon-green-glow);
  margin-bottom: 0.75rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.brand-logo-badge:hover {
  transform: scale(1.08);
  box-shadow: 0 0 32px rgba(57, 255, 20, 0.75);
}

.brand-logo-badge i {
  color: var(--neon-green) !important;
  font-size: 2.2rem;
  filter: drop-shadow(0 0 8px var(--neon-green-glow));
}

.brand-logo-badge .brand-logo-icon {
  width: 42px;
  height: 42px;
  filter: drop-shadow(0 0 8px var(--neon-green-glow));
}

.form-panel-centered {
  max-width: 400px;
  margin: 0 auto;
}

.login-title {
  font-size: 2rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.5px;
}

.login-title span {
  color: var(--neon-green);
  text-shadow: 0 0 10px var(--neon-green-glow);
}

.login-subtitle {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 2rem;
}

/* Inputs con estilo Neón con Ícono Verde Neón */
.form-neon-label {
  color: var(--text-light);
  font-weight: 600;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.4rem;
}

.input-group-neon {
  position: relative;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: stretch;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-neon) !important;
  background: rgba(0, 0, 0, 0.6);
  transition: all 0.3s ease;
}

.input-group-neon:focus-within {
  border-color: var(--neon-green) !important;
  box-shadow: 0 0 18px var(--neon-green-glow) !important;
  background: rgba(0, 0, 0, 0.85);
}

.input-group-neon .input-group-text {
  background: rgba(57, 255, 20, 0.12) !important;
  border: none !important;
  color: var(--neon-green) !important;
  padding: 0.75rem 1.1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.25rem !important;
  border-right: 1px solid var(--border-neon) !important;
  transition: all 0.3s ease;
}

.input-group-neon:focus-within .input-group-text {
  background: rgba(57, 255, 20, 0.22) !important;
  border-right-color: var(--neon-green) !important;
}

.input-group-neon .input-group-text i {
  color: var(--neon-green) !important;
  filter: drop-shadow(0 0 8px rgba(57, 255, 20, 0.9));
}

.input-group-neon .form-control {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.95rem;
  border-radius: 0 12px 12px 0 !important;
}

.input-group-neon .form-control::placeholder {
  color: rgba(160, 200, 170, 0.55) !important;
}

.input-group-neon .form-control:focus {
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  color: #ffffff !important;
}

/* Botón Neón Principal */
.btn-neon-primary {
  background: var(--neon-green);
  color: #000000;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.8rem 1.5rem;
  border-radius: 12px;
  border: none;
  box-shadow: 0 0 20px var(--neon-green-glow);
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.btn-neon-primary:hover {
  background: #32e010;
  color: #000000;
  box-shadow: 0 0 30px rgba(57, 255, 20, 0.7);
  transform: translateY(-2px);
}

/* Botón Neón Secundario (Outline) */
.btn-neon-outline {
  background: transparent;
  color: var(--neon-green);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  border: 1px solid var(--neon-green);
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.btn-neon-outline:hover {
  background: var(--neon-green-subtle);
  color: var(--neon-green);
  box-shadow: 0 0 15px var(--neon-green-glow);
  transform: translateY(-2px);
}

.link-neon {
  color: var(--neon-green);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.link-neon:hover {
  color: #ffffff;
  text-shadow: 0 0 10px var(--neon-green-glow);
}

/* Lado Derecho: Visual Cultivo de Lulo */
.login-visual-side {
  position: relative;
  background: linear-gradient(180deg, rgba(7, 9, 8, 0.10) 0%, rgba(7, 9, 8, 0.45) 45%, rgba(15, 23, 18, 0.94) 100%),
              url('../img/lulo_finca.jpg') center top/cover no-repeat;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 3rem 2.5rem;
  overflow: hidden;
  border-left: 1px solid var(--border-neon);
}

.login-visual-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 20%, rgba(57, 255, 20, 0.15), transparent 70%),
              linear-gradient(to top, rgba(7, 9, 8, 0.95) 10%, rgba(7, 9, 8, 0.3) 60%, rgba(7, 9, 8, 0.6));
  z-index: 1;
}

.login-visual-content {
  position: relative;
  z-index: 2;
}

.lulo-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(57, 255, 20, 0.15);
  border: 1px solid var(--neon-green);
  color: var(--neon-green);
  padding: 0.35rem 0.9rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1rem;
  box-shadow: 0 0 12px var(--neon-green-glow);
}

.lulo-headline {
  font-size: 2.1rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.25;
  margin-bottom: 0.75rem;
}

.lulo-headline span {
  color: var(--neon-green);
  text-shadow: 0 0 15px var(--neon-green-glow);
}

.lulo-description {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.lulo-features {
  display: flex;
  gap: 1.5rem;
}

.lulo-feature-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-light);
  font-size: 0.85rem;
  font-weight: 600;
}

.lulo-feature-item i {
  color: var(--neon-green);
  font-size: 1.1rem;
}

/* Footer Ticker Animado Continuo (Sin Espacios Vacíos) */
/* Páginas que no usan el layout con sidebar (el bloque "full_content" por
   defecto de base.html): igual les reserva el espacio del footer fijo
   abajo, para que no les tape el último pedazo de contenido. */
body > main.flex-shrink-0 {
  padding-bottom: var(--footer-h);
}

.footer-lulo {
  background-color: rgba(5, 7, 6, 0.95) !important;
  border-top: 1px solid var(--border-neon);
  /* Fijo abajo del todo, siempre lo último que se ve por encima de
     cualquier otra cosa, en vez de quedar sujeto al alto de cada
     página (eso era lo que antes hacía que tapara el sidebar o el
     contenido en páginas con poco contenido). */
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: var(--footer-h);
  /* Por encima del sidebar incluso en el modo móvil (que usa 1050 al
     abrirse), para que quede como último respaldo aunque algo cambie
     de tamaño por un pixel de más. */
  z-index: 2000;
  align-items: center;
  padding: 0;
  overflow: hidden;
  display: flex;
}

.footer-ticker-track {
  display: flex;
  width: max-content;
  animation: marqueeContinuous 30s linear infinite;
  will-change: transform;
}

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

.footer-ticker-content {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  white-space: nowrap;
  padding-right: 1.5rem;
  color: var(--neon-green);
  font-size: 0.93rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-shadow: 0 0 10px rgba(57, 255, 20, 0.6), 0 0 20px rgba(57, 255, 20, 0.25);
}

.ticker-divider {
  color: rgba(57, 255, 20, 0.4);
  font-size: 1.1rem;
}

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

/* Sidebar Lateral Izquierda Minimalista Ultra-Limpia */
.dashboard-wrapper {
  display: flex;
  min-height: 100vh;
  position: relative;
  z-index: 2;
}

.sidebar-lulo {
  width: 60px; /* Únicamente espacio para el botón ☰ cuando está cerrado */
  flex-shrink: 0;
  background: rgba(8, 12, 10, 0.95);
  backdrop-filter: blur(18px);
  border-right: 1px solid var(--border-neon);
  display: flex;
  flex-direction: column;
  box-shadow: 5px 0 30px rgba(0, 0, 0, 0.85), 0 0 20px rgba(57, 255, 20, 0.12);
  position: fixed;
  top: 0;
  /* Se detiene justo donde empieza el footer fijo, para que nunca quede
     ni un pedazo del sidebar (como el botón "Cerrar Sesión") tapado
     por el footer. */
  bottom: var(--footer-h);
  left: 0;
  z-index: 100;
  padding: 0.85rem 0.4rem;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.35s ease;
  overflow-x: hidden;
  /* Si el menú (con todas sus opciones + usuario + Cerrar Sesión) no
     alcanza a caber en el alto disponible, que se pueda desplazar por
     dentro del propio sidebar en vez de quedar un botón inalcanzable
     por fuera de la pantalla. */
  overflow-y: auto;
  white-space: nowrap;
}

.sidebar-lulo.expanded {
  width: 260px;
  padding: 1.2rem 0.9rem;
}

/* Botón Principal de Menú (☰) */
.btn-toggle-menu {
  background: rgba(57, 255, 20, 0.1);
  border: 1px solid var(--border-neon);
  color: var(--neon-green);
  border-radius: 12px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 12px rgba(57, 255, 20, 0.2);
  margin: 0 auto;
}

.sidebar-lulo.expanded .btn-toggle-menu {
  width: 100%;
  justify-content: flex-start;
  padding: 0 0.85rem;
  gap: 0.85rem;
}

.btn-toggle-menu i {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.btn-toggle-menu:hover {
  background: var(--neon-green-subtle);
  border-color: var(--neon-green);
  box-shadow: 0 0 20px var(--neon-green-glow);
  color: var(--neon-green);
}

/* Ocultar completamente todo elemento adicional al estar cerrado */
.sidebar-lulo:not(.expanded) .sidebar-nav-content {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  height: 0;
  overflow: hidden;
}

.sidebar-lulo.expanded .sidebar-nav-content {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.3s ease 0.1s;
}

.sidebar-brand-title {
  color: #ffffff;
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.5px;
}

.sidebar-brand-title span {
  color: var(--neon-green);
  text-shadow: 0 0 12px var(--neon-green-glow);
}

/* Lista de 9 Opciones del Menú */
.sidebar-menu {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.65rem 0.85rem;
  color: var(--text-light);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  border-radius: 12px;
  transition: all 0.25s ease;
  border: 1px solid transparent;
  width: 100%;
  cursor: pointer;
}

/* Insignias de Íconos Neón Estéticos del Menú */
.nav-icon-box {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(57, 255, 20, 0.1);
  border: 1px solid rgba(57, 255, 20, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: var(--neon-green);
  box-shadow: 0 0 10px rgba(57, 255, 20, 0.15);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.sidebar-link:hover .nav-icon-box {
  transform: scale(1.12);
  box-shadow: 0 0 16px var(--neon-green-glow);
  border-color: var(--neon-green);
  background: rgba(57, 255, 20, 0.2);
}

.sidebar-link.active .nav-icon-box {
  background: var(--neon-green) !important;
  color: #050806 !important;
  border-color: var(--neon-green) !important;
  box-shadow: 0 0 14px var(--neon-green-glow) !important;
  font-weight: bold;
}

.sidebar-link:hover {
  color: #ffffff;
  background: rgba(57, 255, 20, 0.1);
  border-color: rgba(57, 255, 20, 0.2);
}

.sidebar-link.active {
  color: #ffffff !important;
  background: rgba(57, 255, 20, 0.18) !important;
  border-color: var(--border-neon) !important;
  box-shadow: 0 0 18px var(--neon-green-glow) !important;
  font-weight: 700;
}

.sidebar-link.link-logout:hover {
  background: rgba(255, 77, 77, 0.15);
  border-color: rgba(255, 77, 77, 0.4);
  color: #ff4d4d;
}

.sidebar-link.link-logout:hover i {
  color: #ff4d4d;
  filter: drop-shadow(0 0 6px rgba(255, 77, 77, 0.6));
}

/* Permite que las etiquetas largas del menú (ej. "Gastos del Cultivo de Lulo")
   se envuelvan en dos líneas sin cortarse, sin afectar los demás enlaces */
.sidebar-link-text-wrap {
  white-space: normal;
  line-height: 1.15;
}

.main-content-lulo {
  flex-grow: 1;
  margin-left: 60px;
  padding: 2.5rem 2.2rem;
  /* Espacio extra abajo del alto del footer fijo, para que el contenido
     real de la página (botones, tarjetas, etc.) nunca quede escondido
     detrás de él al llegar al final. */
  padding-bottom: calc(2.5rem + var(--footer-h));
  min-height: 100vh;
  transition: margin-left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Variante para páginas con poco contenido (ej. Calendario): que el
   footer quede justo debajo del contenido en vez de dejar un espacio
   vacío enorme forzado a 100vh. */
.dashboard-wrapper-auto {
  min-height: 0;
}

.main-content-lulo-auto {
  min-height: 0;
}

.sidebar-lulo.expanded ~ .main-content-lulo {
  margin-left: 260px;
}

/* Tarjetas Indicadoras del Dashboard */
.indicator-card {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-neon);
  border-radius: 18px;
  padding: 1.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  height: 100%;
}

.indicator-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--neon-green), transparent);
  opacity: 0.6;
}

.indicator-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.9), 0 0 25px var(--neon-green-glow);
  border-color: var(--neon-green);
}

.indicator-title {
  color: #c0d8c7;
  font-size: 0.84rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 0.4rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.text-muted {
  color: #b8d5c1 !important;
}

.indicator-value {
  color: #ffffff;
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.indicator-value.highlight-green {
  color: var(--neon-green) !important;
  text-shadow: 0 0 12px var(--neon-green-glow);
}

.indicator-icon-badge {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(57, 255, 20, 0.12);
  border: 1px solid var(--neon-green);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--neon-green);
  font-size: 1.5rem;
  box-shadow: 0 0 15px var(--neon-green-glow);
  flex-shrink: 0;
}

@media (max-width: 991.98px) {
  .sidebar-lulo {
    position: fixed;
    width: 270px;
    /* Antes tenía "height: 100vh" fijo, y eso hacía que ganara sobre
       "bottom" y el menú terminara tapado por el footer fijo de abajo
       (incluido el botón "Cerrar Sesión"). Con top y bottom nada más,
       el alto se ajusta solo y se detiene justo antes del footer. */
    left: 0;
    top: 0;
    bottom: var(--footer-h);
    transform: translateX(-100%);
    box-shadow: 10px 0 35px rgba(0, 0, 0, 0.95);
    z-index: 1050;
    padding: 1.5rem 1rem;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .sidebar-lulo.expanded {
    transform: translateX(0);
    width: 270px;
  }

  .sidebar-lulo.expanded .sidebar-text {
    display: inline-block;
    opacity: 1;
  }

  .main-content-lulo {
    margin-left: 0 !important;
    padding: 1.25rem 1rem;
    padding-bottom: calc(1.25rem + var(--footer-h));
  }

  .dashboard-wrapper {
    flex-direction: column;
  }

  .mobile-nav-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1rem;
    background: rgba(8, 12, 10, 0.95);
    border-bottom: 1px solid var(--border-neon);
    position: sticky;
    top: 0;
    z-index: 99;
    margin: -1.25rem -1rem 1.5rem -1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
  }
}

.mobile-nav-header {
  display: none;
}

/* Temas Neón de Color Dinámicos (Verde, Azul, Naranja) */
body.theme-blue {
  --neon-green: #00f0ff;
  --neon-green-glow: rgba(0, 240, 255, 0.38);
  --neon-green-subtle: rgba(0, 240, 255, 0.14);
  --border-neon: rgba(0, 240, 255, 0.3);
}

body.theme-orange {
  --neon-green: #ff8800;
  --neon-green-glow: rgba(255, 136, 0, 0.38);
  --neon-green-subtle: rgba(255, 136, 0, 0.14);
  --border-neon: rgba(255, 136, 0, 0.3);
}

/* Adaptación de Esferas Ambientales de Brillo de Fondo */
body.theme-blue .ambient-neon-glow-1 {
  background: radial-gradient(circle, rgba(0, 240, 255, 0.16) 0%, rgba(0, 0, 0, 0) 70%);
}
body.theme-blue .ambient-neon-glow-2 {
  background: radial-gradient(circle, rgba(0, 240, 255, 0.12) 0%, rgba(0, 0, 0, 0) 70%);
}

body.theme-orange .ambient-neon-glow-1 {
  background: radial-gradient(circle, rgba(255, 136, 0, 0.16) 0%, rgba(0, 0, 0, 0) 70%);
}
body.theme-orange .ambient-neon-glow-2 {
  background: radial-gradient(circle, rgba(255, 136, 0, 0.12) 0%, rgba(0, 0, 0, 0) 70%);
}

/* Único Botón Flotante de Rayo (Abajo a la Derecha) */
.theme-lightning-btn {
  position: fixed;
  /* Antes quedaba a 25px del fondo real de la pantalla, y como el footer
     fijo mide --footer-h (46px), el botón le quedaba metido por detrás
     y se veía tapado/cortado. Ahora se cuenta desde arriba del footer,
     con espacio de sobra, para celular y computador por igual. */
  bottom: calc(var(--footer-h) + 16px);
  right: 25px;
  z-index: 1000;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(8, 12, 10, 0.94);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-neon);
  color: var(--neon-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.85), 0 0 15px var(--neon-green-glow);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
  outline: none;
}

.theme-lightning-btn:hover {
  transform: scale(1.15) rotate(15deg);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.95), 0 0 25px var(--neon-green-glow);
  background: var(--neon-green-subtle);
  color: var(--neon-green);
}

.theme-lightning-btn i {
  filter: drop-shadow(0 0 8px var(--neon-green-glow));
  transition: color 0.3s ease, filter 0.3s ease;
}

/* Tarjetas de Gráficos del Dashboard */
.chart-card {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-neon);
  border-radius: 18px;
  padding: 1.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
  transition: all 0.3s ease;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.chart-card:hover {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.85), 0 0 20px var(--neon-green-glow);
  border-color: var(--neon-green);
}

.chart-container-box {
  position: relative;
  width: 100%;
  height: 280px;
}

/* ============================= */
/* Calendario de Cultivos        */
/* ============================= */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.calendar-day-header {
  text-align: center;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-weight: 700;
  padding-bottom: 4px;
}

.calendar-day {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 8px;
  border: 1px solid var(--border-neon);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text-light);
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.calendar-day-tags {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 6px;
}

.calendar-day-tag-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.calendar-day:hover:not(.calendar-day-empty) {
  border-color: var(--neon-green);
  box-shadow: 0 0 12px var(--neon-green-glow);
}

.calendar-day-empty {
  border-color: transparent;
  background: transparent;
}

.calendar-day-today {
  border-color: var(--neon-green) !important;
  background: rgba(57, 255, 20, 0.15);
  color: var(--neon-green);
  font-weight: 800;
  box-shadow: 0 0 14px var(--neon-green-glow);
}

.calendar-day-highlight {
  border-color: #4cc9f0;
  background: rgba(76, 201, 240, 0.12);
}

.calendar-legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  vertical-align: middle;
}

.calendar-legend-dot-today {
  background: var(--neon-green);
  box-shadow: 0 0 6px var(--neon-green-glow);
}

.calendar-legend-dot-highlight {
  background: #4cc9f0;
  box-shadow: 0 0 6px rgba(76, 201, 240, 0.6);
}

@media (max-width: 576px) {
  .calendar-day {
    font-size: 0.7rem;
    border-radius: 6px;
  }
}

/* ==========================================================================
   Overlay de Carga (Loading) con el mismo diseño neón del fondo del sitio
   ========================================================================== */
.page-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 12% 12%, rgba(57, 255, 20, 0.14) 0%, rgba(0, 0, 0, 0) 55%),
    radial-gradient(circle at 88% 88%, rgba(57, 255, 20, 0.10) 0%, rgba(0, 0, 0, 0) 55%),
    var(--bg-dark);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.page-loading-overlay.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.page-loading-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.15rem;
}

.page-loading-ring-wrap {
  position: relative;
  width: 68px;
  height: 68px;
}

.page-loading-ring-wrap::before {
  content: '';
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  border: 1px solid var(--border-neon);
  animation: pageLoadingPulse 1.7s ease-out infinite;
}

.page-loading-ring {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 3px solid rgba(57, 255, 20, 0.15);
  border-top-color: var(--neon-green);
  box-shadow: 0 0 22px var(--neon-green-glow);
  animation: pageLoadingSpin 0.85s linear infinite;
}

.page-loading-logo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--neon-green);
  text-shadow: 0 0 10px var(--neon-green-glow);
}

.page-loading-text {
  color: var(--text-light);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(57, 255, 20, 0.2);
}

.page-loading-text span {
  color: var(--neon-green);
}

@keyframes pageLoadingSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pageLoadingPulse {
  0% {
    transform: scale(0.82);
    opacity: 0.65;
  }
  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

/* ===== Landing page (templates/landing/index.html) ===== */
.landing-nav {
  position: sticky;
  top: 0;
  z-index: 1030;
  padding: 14px 0;
  background: rgba(7, 9, 8, 0.78);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-neon);
}
.landing-marca {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  font-weight: 800;
  font-size: 1.15rem;
  text-decoration: none;
}
.landing-marca:hover { color: #ffffff; }
.landing-marca-texto { color: #ffffff; }
.landing-marca-texto, .landing-nav .btn { white-space: nowrap; }
.landing-nav .btn { padding-top: 0.45rem; padding-bottom: 0.45rem; font-size: 0.82rem; }
@media (max-width: 575.98px) { .landing-marca-texto { font-size: 1rem; } }
.landing-marca-texto span { color: var(--neon-green); }
.landing-logo.brand-logo-badge { width: 38px; height: 38px; margin: 0 !important; }
.landing-logo .brand-logo-icon { width: 22px; height: 22px; }
.landing-nav-links { gap: 28px; }
.landing-nav-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  transition: color 0.2s ease;
}
.landing-nav-links a:hover { color: var(--neon-green); }

.landing-hero { position: relative; z-index: 1; padding: 72px 0 64px; }
.landing-titulo {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  font-weight: 800;
  line-height: 1.12;
  color: #ffffff;
  margin: 0 0 18px;
}
.landing-titulo span,
.landing-encabezado h2 span,
.landing-cta h2 span { color: var(--neon-green); text-shadow: 0 0 22px var(--neon-green-glow); }
.landing-texto { color: var(--text-muted); font-size: 1.08rem; line-height: 1.7; max-width: 560px; }
.landing-mini-datos { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 28px; }
.landing-mini-datos div { color: var(--text-muted); font-size: 0.88rem; }
.landing-mini-datos i { color: var(--neon-green); margin-right: 6px; }

.landing-hero-imagen { position: relative; max-width: 460px; margin: 0 auto; }
.landing-hero-imagen img {
  width: 100%;
  border-radius: 24px;
  border: 1px solid var(--border-neon);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55), 0 0 40px var(--neon-green-subtle);
  display: block;
}
.landing-tarjeta-flotante {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(13, 24, 17, 0.92);
  border: 1px solid var(--border-neon);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  animation: landing-flotar 5s ease-in-out infinite;
}
.landing-tarjeta-flotante i { font-size: 1.3rem; color: var(--neon-green); }
.landing-tarjeta-flotante small { display: block; color: var(--text-muted); font-size: 0.72rem; }
.landing-tarjeta-flotante strong { color: #ffffff; font-size: 0.88rem; }
.landing-tarjeta-1 { top: 12%; left: -34px; }
.landing-tarjeta-2 { bottom: 14%; right: -30px; animation-delay: -2.5s; }
.landing-tarjeta-2 i { color: var(--gold-accent); }
@keyframes landing-flotar { 50% { transform: translateY(-10px); } }

.landing-seccion { position: relative; z-index: 1; padding: 80px 0; }
/* Al saltar desde el menú, la sección no queda tapada por la barra fija */
.landing-seccion { scroll-margin-top: 72px; }
.landing-seccion-alterna { background: linear-gradient(180deg, transparent, rgba(57, 255, 20, 0.035), transparent); }
.landing-encabezado { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.landing-etiqueta {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--border-neon);
  border-radius: 999px;
  color: var(--neon-green);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.landing-encabezado h2,
.landing-cta h2 { color: #ffffff; font-weight: 800; font-size: clamp(1.7rem, 3.5vw, 2.4rem); margin-bottom: 14px; }
.landing-encabezado p { color: var(--text-muted); font-size: 1.02rem; line-height: 1.7; }

.landing-tarjeta {
  height: 100%;
  padding: 26px;
  border-radius: 18px;
  background: var(--bg-card);
  border: 1px solid rgba(57, 255, 20, 0.14);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.landing-tarjeta:hover {
  transform: translateY(-6px);
  border-color: var(--border-neon);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4), 0 0 24px var(--neon-green-subtle);
}
.landing-tarjeta h3, .landing-paso h3 { color: #ffffff; font-size: 1.08rem; font-weight: 700; margin: 16px 0 8px; }
.landing-tarjeta p, .landing-paso p { color: var(--text-muted); font-size: 0.92rem; line-height: 1.6; margin: 0; }
.landing-icono {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  color: var(--neon-green);
  background: var(--neon-green-subtle);
  border: 1px solid var(--border-neon);
}

.landing-paso { text-align: center; padding: 10px 8px; }
.landing-paso-numero {
  width: 58px;
  height: 58px;
  margin: 0 auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 800;
  color: #07100a;
  background: var(--neon-green);
  box-shadow: 0 0 24px var(--neon-green-glow);
}

.landing-cta {
  padding: 56px 48px;
  border-radius: 24px;
  border: 1px solid var(--border-neon);
  background-size: cover;
  background-position: center;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}
.landing-cta p { color: var(--text-muted); font-size: 1.05rem; max-width: 460px; margin-bottom: 26px; }

.landing-pie {
  position: relative;
  z-index: 1;
  padding: 26px 0 calc(26px + var(--footer-h));
  border-top: 1px solid rgba(57, 255, 20, 0.12);
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
}
.landing-pie strong { color: #ffffff; }
.landing-pie strong span { color: var(--neon-green); }

@media (max-width: 991.98px) {
  .landing-hero { padding: 48px 0 40px; text-align: center; }
  .landing-hero .d-flex, .landing-mini-datos { justify-content: center; }
  .landing-texto { margin: 0 auto; }
  .landing-tarjeta-1 { left: -8px; }
  .landing-tarjeta-2 { right: -8px; }
}
@media (max-width: 575.98px) {
  .landing-seccion { padding: 56px 0; }
  .landing-cta { padding: 36px 24px; text-align: center; }
  .landing-cta .d-flex { justify-content: center; }
  .landing-tarjeta-flotante { padding: 9px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-tarjeta-flotante { animation: none; }
}

/* ===== Animaciones de la landing (static/js/landing.js) ===== */

/* 1. Cursor del efecto de escritura del título */
.cursor-escritura {
  display: inline-block;
  width: 0.07em;
  height: 0.95em;
  margin-left: 0.08em;
  vertical-align: -0.1em;
  background: var(--neon-green);
  box-shadow: 0 0 12px var(--neon-green-glow);
  animation: cursor-parpadeo 0.85s step-end infinite;
}
@keyframes cursor-parpadeo { 50% { opacity: 0; } }

/* 2. Aparición al bajar (solo si hay JavaScript; sin JS todo se ve normal) */
.js-animaciones .revelar {
  opacity: 0;
  transform: translateY(36px) scale(0.98);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: var(--retraso, 0ms);
}
.js-animaciones .revelar.visible { opacity: 1; transform: none; }

/* 3. Pasos con flechas */
.landing-pasos { display: flex; align-items: flex-start; }
.landing-pasos .landing-paso { flex: 1 1 0; min-width: 0; }
.landing-flecha {
  flex: 0 0 72px;
  position: relative;
  height: 58px;
  display: flex;
  align-items: center;
}
.landing-flecha-linea {
  height: 3px;
  width: calc(100% - 10px);
  border-radius: 3px;
  background: repeating-linear-gradient(90deg, var(--neon-green) 0 10px, transparent 10px 16px);
  background-size: 32px 100%;
  box-shadow: 0 0 10px var(--neon-green-glow);
  animation: flecha-flujo 0.9s linear infinite;
}
.landing-flecha i {
  position: absolute;
  right: -2px;
  color: var(--neon-green);
  font-size: 1.15rem;
  text-shadow: 0 0 10px var(--neon-green-glow);
}
@keyframes flecha-flujo { to { background-position: 32px 0; } }

.js-animaciones .landing-pasos .landing-paso {
  opacity: 0.25;
  transform: translateY(18px) scale(0.94);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.js-animaciones .landing-pasos .landing-paso.activo { opacity: 1; transform: none; }
.js-animaciones .landing-paso.activo .landing-paso-numero { animation: paso-encendido 0.7s ease; }
@keyframes paso-encendido {
  0% { transform: scale(0.6); box-shadow: 0 0 0 0 var(--neon-green-glow); }
  60% { transform: scale(1.15); box-shadow: 0 0 0 14px rgba(57, 255, 20, 0); }
  100% { transform: scale(1); }
}
.js-animaciones .landing-flecha .landing-flecha-linea { width: 0; transition: width 0.45s ease; }
.js-animaciones .landing-flecha i { opacity: 0; transform: translateX(-12px); transition: opacity 0.3s ease 0.3s, transform 0.3s ease 0.3s; }
.js-animaciones .landing-flecha.activo .landing-flecha-linea { width: calc(100% - 10px); }
.js-animaciones .landing-flecha.activo i { opacity: 1; transform: none; }

@media (max-width: 991.98px) {
  .landing-pasos { flex-direction: column; align-items: center; }
  .landing-pasos .landing-paso { flex: none; width: 100%; max-width: 340px; }
  .landing-flecha { flex: none; width: 64px; height: 44px; transform: rotate(90deg); margin: 2px 0; }
}

/* 4. Tarjeta final en movimiento: flota y su ilustración se desplaza */
.landing-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.landing-cta::before {
  content: '';
  position: absolute;
  inset: -8%;
  z-index: -2;
  background: var(--cta-fondo) center / cover no-repeat;
  animation: cta-fondo-mover 16s ease-in-out infinite alternate;
}
.landing-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(7, 9, 8, 0.94) 0%, rgba(7, 9, 8, 0.75) 55%, rgba(7, 9, 8, 0.35) 100%);
}
html:not(.js-animaciones) .landing-cta,
.landing-cta.visible { animation: cta-flotar 6s ease-in-out 0.8s infinite; }
@keyframes cta-fondo-mover {
  from { transform: scale(1) translateX(0); }
  to   { transform: scale(1.12) translateX(-4%); }
}
@keyframes cta-flotar {
  0%, 100% { translate: 0 0; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 0 rgba(57, 255, 20, 0); }
  50%      { translate: 0 -10px; box-shadow: 0 40px 70px rgba(0, 0, 0, 0.55), 0 0 34px var(--neon-green-subtle); }
}
@media (max-width: 575.98px) {
  .landing-cta::after { background: linear-gradient(180deg, rgba(7, 9, 8, 0.9), rgba(7, 9, 8, 0.75)); }
}

@media (prefers-reduced-motion: reduce) {
  .cursor-escritura, .landing-flecha-linea, .landing-cta, .landing-cta::before { animation: none !important; }
}

/* Botón "Volver al inicio" del login (lleva a la landing page) */
.login-volver { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto 14px; }
.login-volver .btn { white-space: nowrap; }

/* Login en celular: las 3 características del panel derecho bajan de línea
   si no caben (antes "Balance Financiero" quedaba cortado). */
@media (max-width: 575.98px) {
  .lulo-features { flex-wrap: wrap; gap: 12px 20px; }
}

/* Lista de reglas de contraseña (registro, recuperación y cambio obligatorio) */
.reglas-contrasena { font-size: 0.78rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
.reglas-contrasena li { color: #8aa593; transition: color 0.2s ease; }
.reglas-contrasena li i { font-size: 0.7rem; margin-right: 4px; }
.reglas-contrasena li.cumple { color: var(--neon-green); }
@media (max-width: 400px) { .reglas-contrasena { grid-template-columns: 1fr; } }

/* Notificaciones flotantes (templates/partials/notificaciones.html) */
.notificaciones {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1090;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}
.notificacion {
  --color: #4cc9f0;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px 16px;
  border-radius: 14px;
  background: rgba(13, 24, 17, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 4px solid var(--color);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 18px color-mix(in srgb, var(--color) 25%, transparent);
  backdrop-filter: blur(8px);
  color: #e5f9eb;
  overflow: hidden;
  pointer-events: auto;
  animation: notificacion-entra 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
.notificacion-success { --color: #39ff14; }
.notificacion-danger  { --color: #ff4d4d; }
.notificacion-warning { --color: #ffb703; }
.notificacion-info    { --color: #4cc9f0; }
.notificacion-icono {
  flex: 0 0 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  color: var(--color);
  background: color-mix(in srgb, var(--color) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--color) 40%, transparent);
}
.notificacion-texto { flex: 1; min-width: 0; line-height: 1.35; }
.notificacion-texto strong { display: block; color: var(--color); font-size: 0.9rem; margin-bottom: 2px; }
.notificacion-texto span { font-size: 0.86rem; color: #cfe3d6; }
.notificacion-cerrar {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: #8aa593;
  padding: 2px 4px;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease;
}
.notificacion-cerrar:hover { color: #ffffff; }
.notificacion-progreso {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--color);
  opacity: 0.8;
  transform-origin: left;
  transform: scaleX(1);
}
.notificacion.saliendo { animation: notificacion-sale 0.3s ease-in forwards; }
@keyframes notificacion-entra {
  from { opacity: 0; transform: translateX(40px) scale(0.96); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes notificacion-sale {
  to { opacity: 0; transform: translateX(40px) scale(0.96); }
}
@media (max-width: 576px) {
  .notificaciones { top: 12px; right: 50%; transform: translateX(50%); }
  @keyframes notificacion-entra {
    from { opacity: 0; transform: translateY(-20px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .notificacion, .notificacion.saliendo { animation-duration: 0.01ms; }
}

/* Código de verificación en 6 casillas (static/js/codigo-casillas.js) */
.codigo-casillas {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
}
.codigo-casilla {
  width: 50px;
  height: 58px;
  padding: 0;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--neon-green);
  caret-color: var(--neon-green);
  background: rgba(7, 9, 8, 0.85);
  border: 1.5px solid var(--border-neon);
  border-radius: 12px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.codigo-casilla:focus {
  border-color: var(--neon-green);
  box-shadow: 0 0 0 3px var(--neon-green-subtle), 0 0 16px var(--neon-green-glow);
  transform: translateY(-2px);
}
.codigo-casilla.llena {
  border-color: var(--neon-green);
  background: rgba(57, 255, 20, 0.08);
}
.codigo-casillas-error {
  margin-top: 10px;
  text-align: center;
  color: #ff4d4d;
  font-size: 0.85rem;
}
@media (max-width: 400px) {
  .codigo-casillas { gap: 6px; }
  .codigo-casilla { width: 42px; height: 52px; font-size: 1.35rem; }
}

/* ================================================================
   Don Pancho Lulero: guía para usuarios nuevos (partials/don_pancho.html
   + static/js/don-pancho.js). Va por encima de todo, incluido el menú
   lateral en celular (z-index 1050).
   ================================================================ */
.don-pancho[hidden] { display: none; }

/* Capa invisible que evita clics en la página mientras Don Pancho habla.
   Cuando no está señalando nada, oscurece toda la pantalla. */
.don-pancho-bloqueo {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: transparent;
}
.don-pancho.sin-foco .don-pancho-bloqueo { background: rgba(0, 0, 0, 0.72); }

/* Recuadro que resalta lo que Don Pancho está explicando: todo lo demás
   queda oscuro gracias a la sombra gigante. */
.don-pancho-foco {
  position: fixed;
  z-index: 3001;
  border-radius: 14px;
  border: 2px solid var(--neon-green);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.72), 0 0 22px var(--neon-green-glow);
  pointer-events: none;
  transition: left 0.3s ease, top 0.3s ease, width 0.3s ease, height 0.3s ease;
}

.don-pancho-globo {
  position: fixed;
  z-index: 3002;
  width: 440px;
  max-width: calc(100vw - 24px);
  display: flex;
  gap: 14px;
  align-items: stretch;
  padding: 14px;
  background: rgba(8, 12, 10, 0.97);
  border: 1px solid var(--border-neon);
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.9), 0 0 25px var(--neon-green-glow);
  color: var(--text-light);
  white-space: normal;
}
.don-pancho-globo.centrado {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 520px;
}
.don-pancho-globo.entrando { animation: donPanchoEntra 0.3s ease-out; }

@keyframes donPanchoEntra {
  from { opacity: 0; scale: 0.94; }
  to   { opacity: 1; scale: 1; }
}

.don-pancho-img {
  width: 112px;
  height: auto;
  align-self: center;
  flex-shrink: 0;
  border-radius: 14px;
  border: 1px solid var(--border-neon);
  object-fit: cover;
  aspect-ratio: 303 / 508;
}
.don-pancho-globo.centrado .don-pancho-img { width: 150px; }

.don-pancho-cuerpo {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.don-pancho-nombre {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--gold-accent);
}
.don-pancho-titulo {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--neon-green);
  margin: 2px 0 6px;
}
.don-pancho-texto {
  font-size: 0.95rem;
  line-height: 1.45;
  margin: 0 0 12px;
  flex: 1;
}
.don-pancho-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.don-pancho-progreso {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.don-pancho-botones {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-left: auto;
}
/* Los botones neón de la app son grandes; aquí van compactos para que los
   tres quepan en una sola fila dentro del globo. */
.don-pancho-botones .btn {
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  letter-spacing: 0.3px;
  white-space: nowrap;
  width: auto;
}
/* Bootstrap le quita el fondo a un botón cuando tiene el foco del teclado;
   "Siguiente" arranca con el foco, así que se le devuelve su verde. */
.don-pancho-botones .btn-neon-primary:focus,
.don-pancho-botones .btn-neon-primary:focus-visible,
.don-pancho-botones .btn-neon-primary:active {
  background: var(--neon-green);
  color: #000;
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85), 0 0 20px var(--neon-green-glow);
}
.don-pancho-saltar {
  color: var(--text-muted);
  text-decoration: underline;
}
.don-pancho-saltar:hover { color: var(--text-light); }

/* Botón con la cara de Don Pancho: queda encima del botón del rayo. */
.don-pancho-ayuda {
  position: fixed;
  bottom: calc(var(--footer-h) + 16px + 48px + 12px);
  right: 22px;
  z-index: 1000;
  width: 54px;
  height: 54px;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--neon-green);
  background: #fff;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.85), 0 0 15px var(--neon-green-glow);
  cursor: pointer;
  transition: transform 0.25s ease;
}
.don-pancho-ayuda img { width: 100%; height: 100%; object-fit: cover; display: block; }
.don-pancho-ayuda:hover,
.don-pancho-ayuda:focus-visible { transform: scale(1.1) rotate(-6deg); }

/* En celular, el globo va abajo a lo ancho para no tapar lo que señala. */
@media (max-width: 767.98px) {
  .don-pancho-globo,
  .don-pancho-globo.centrado {
    left: 12px;
    right: 12px;
    top: auto;
    bottom: calc(var(--footer-h) + 12px);
    width: auto;
    max-width: none;
    transform: none;
    padding: 12px;
    gap: 10px;
  }
  .don-pancho-img,
  .don-pancho-globo.centrado .don-pancho-img { width: 64px; align-self: flex-start; }
  .don-pancho-botones { width: 100%; justify-content: flex-end; }
  .don-pancho-botones .btn { padding: 0.3rem 0.6rem; font-size: 0.75rem; }
  .don-pancho-titulo { font-size: 1.02rem; }
  .don-pancho-texto { font-size: 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .don-pancho-globo.entrando { animation: none; }
  .don-pancho-foco { transition: none; }
}

/* ================================================================
   Panel del administrador (auth/dashboard_admin.html): minimalista,
   solo porcentajes, sin cifras de los cultivadores.
   ================================================================ */
.panel-admin-seccion {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 12px;
}
.panel-admin-seccion i { color: var(--neon-green); margin-right: 6px; }

.panel-admin-aviso {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(255, 183, 3, 0.08);
  border: 1px solid rgba(255, 183, 3, 0.45);
  color: var(--text-light);
}
.panel-admin-aviso > i { color: var(--gold-accent); font-size: 1.3rem; }
.panel-admin-aviso .btn { padding: 0.4rem 1rem; font-size: 0.8rem; }

.panel-admin-anillo-tarjeta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}
/* Anillo de porcentaje: --pct (0-100) y --color los pone la plantilla. */
.panel-admin-anillo {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--color) calc(var(--pct) * 1%), rgba(255, 255, 255, 0.08) 0);
  position: relative;
}
.panel-admin-anillo::before {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: #0b120d;
}
.panel-admin-anillo span {
  position: relative;
  font-size: 1.9rem;
  font-weight: 900;
  color: var(--text-light);
}
.panel-admin-anillo-texto { color: var(--text-muted); font-size: 0.92rem; line-height: 1.4; }
.panel-admin-anillo-texto strong { color: var(--text-light); }

.panel-admin-nota { color: var(--text-muted); font-size: 0.82rem; }
.panel-admin-nota i { margin-right: 4px; }

.panel-admin-barra { margin-bottom: 14px; color: var(--text-light); font-size: 0.92rem; }
.panel-admin-barra strong { color: var(--neon-green); }
.panel-admin-barra-fondo {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.panel-admin-barra-fondo > div {
  height: 100%;
  border-radius: 999px;
  background: var(--neon-green);
  box-shadow: 0 0 10px var(--neon-green-glow);
}

.panel-admin-recientes li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text-light);
}
.panel-admin-recientes li:last-child { border-bottom: none; }
.panel-admin-recientes li a {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 4px 8px;
  margin: -4px -8px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  transition: background 0.2s ease;
}
.panel-admin-recientes li a:hover,
.panel-admin-recientes li a:focus-visible { background: rgba(57, 255, 20, 0.08); }
.panel-admin-recientes .bi-person-circle { color: var(--neon-green); font-size: 1.2rem; }
.panel-admin-recientes-flecha { color: var(--text-muted); }
.panel-admin-recientes-nombre { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.panel-admin-recientes-cuando { margin-left: auto; color: var(--text-muted); font-size: 0.85rem; white-space: nowrap; }

/* Ficha de un cultivador (auth/detalle_cultivador.html) */
.ficha-estado {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.ficha-estado.gana { background: var(--neon-green); color: #000; }
.ficha-estado.pierde { background: #ff4d4d; color: #000; }
.ficha-estado.sin-datos { border: 1px solid rgba(255, 255, 255, 0.25); color: var(--text-muted); }

.ficha-cultivo { border-top: 4px solid var(--color-cultivo, var(--neon-green)); }
.ficha-cultivo-titulo { font-size: 1.15rem; font-weight: 800; color: var(--text-light); margin: 0; }
.ficha-cultivo-datos { color: var(--text-muted); font-size: 0.85rem; }
.ficha-pastel-titulo {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 8px;
}
.ficha-pastel { position: relative; height: 230px; }
.ficha-vacio {
  height: 230px;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.88rem;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 12px;
}

/* El contenido principal puede encogerse dentro del wrapper flexible: sin
   esto, los gráficos de Chart.js lo empujan más ancho que la pantalla. */
.main-content-lulo { min-width: 0; }

/* Nombre del cultivador en Usuarios: abre su ficha en porcentajes */
.link-ficha { text-decoration: none; }
.link-ficha i { color: var(--neon-green); font-size: 0.8rem; margin-left: 2px; }
.link-ficha:hover { color: var(--neon-green) !important; text-decoration: underline; }

   Don Pancho pregunta por los trabajos sin marcar
   (partials/pendientes_don_pancho.html + js/pendientes-don-pancho.js)
   ================================================================ */
.pancho-pregunta {
  position: fixed;
  inset: 0;
  z-index: 2990;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.pancho-pregunta.visible { opacity: 1; pointer-events: auto; }
.pancho-pregunta.saliendo { opacity: 0; }

.pancho-pregunta-fondo {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
}

.pancho-pregunta-tarjeta {
  position: relative;
  width: 560px;
  max-width: 100%;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: rgba(8, 12, 10, 0.98);
  border: 1px solid var(--border-neon);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9), 0 0 25px var(--neon-green-glow);
  color: var(--text-light);
  white-space: normal;
}
.pancho-pregunta.visible .pancho-pregunta-tarjeta { animation: donPanchoEntra 0.3s ease-out; }

.pancho-pregunta-cabeza {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 14px;
}
.pancho-pregunta-cabeza img {
  width: 96px;
  height: auto;
  flex-shrink: 0;
  border-radius: 14px;
  border: 1px solid var(--border-neon);
}
.pancho-pregunta-nombre {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--gold-accent);
}
.pancho-pregunta-titulo {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--neon-green);
  margin: 2px 0 6px;
}
.pancho-pregunta-texto {
  font-size: 0.95rem;
  line-height: 1.45;
  margin: 0;
}

.pancho-pregunta-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pancho-pregunta-item {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 4px solid var(--color-tarea, var(--neon-green));
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease;
}
.pancho-pregunta-item.hecha { background: rgba(57, 255, 20, 0.1); border-color: var(--neon-green); }
.pancho-pregunta-item.todavia { background: rgba(255, 183, 3, 0.08); }
.pancho-pregunta-item.quitando { opacity: 0; transform: translateX(30px); }

.pancho-pregunta-info { min-width: 0; flex: 1 1 220px; }
.pancho-pregunta-tarea { font-weight: 700; font-size: 0.98rem; }
.pancho-pregunta-cuando { color: var(--text-muted); font-weight: 600; }
.pancho-pregunta-cuando.atrasada { color: #ff8800; }
.pancho-pregunta-detalle { color: var(--text-muted); font-size: 0.82rem; margin-top: 2px; }
.pancho-pregunta-respuesta { color: var(--neon-green); font-size: 0.85rem; font-weight: 700; margin-top: 4px; }
.pancho-pregunta-respuesta:empty { display: none; }
.pancho-pregunta-item.todavia .pancho-pregunta-respuesta { color: var(--gold-accent); }

.pancho-pregunta-botones { display: flex; gap: 6px; flex-wrap: wrap; }
.pancho-pregunta-botones .btn {
  padding: 0.4rem 0.8rem;
  font-size: 0.8rem;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.pancho-pregunta-botones .btn-neon-primary:focus,
.pancho-pregunta-botones .btn-neon-primary:focus-visible {
  background: var(--neon-green);
  color: #000;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85), 0 0 20px var(--neon-green-glow);
}

.pancho-pregunta-pie {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.pancho-pregunta-despues { color: var(--text-muted); text-decoration: underline; }
.pancho-pregunta-despues:hover { color: var(--text-light); }

@media (max-width: 575.98px) {
  .pancho-pregunta-tarjeta { padding: 16px; }
  .pancho-pregunta-cabeza img { width: 70px; }
  .pancho-pregunta-titulo { font-size: 1.08rem; }
  .pancho-pregunta-botones { width: 100%; }
  .pancho-pregunta-botones .btn { flex: 1; }
}

/* Estado de los trabajos en el calendario (hecho / pendiente) */
.etiqueta-estado {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 999px;
  margin-left: 4px;
  vertical-align: middle;
}
.etiqueta-estado.hecha { color: #000; background: var(--neon-green); }
.etiqueta-estado.pendiente { color: #ff8800; border: 1px solid #ff8800; }
.etiqueta-estado.programada { color: var(--text-muted); border: 1px solid rgba(255, 255, 255, 0.25); }
.etiqueta-hecha-texto { text-decoration: line-through; opacity: 0.7; }