/* ==========================================================================
   FORESTANDO JUNTOS - ESTILOS PRINCIPALES
   Diseño Editorial Botánico: Verde Dosel, Verde Esmeralda y Lienzo Natural
   Desarrollado por Nando Compusystem © 2026
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* Paleta Principal */
  --color-canopy: #132B22;          /* Verde Dosel Profundo */
  --color-canopy-light: #1A3A2E;    /* Bosque Medio */
  --color-emerald-primary: #059669; /* Verde Esmeralda Original */
  --color-emerald-dark: #047857;    /* Esmeralda Oscuro */
  --color-emerald-soft: #ECFDF5;    /* Esmeralda Suave */
  --color-ochre: #D99B38;           /* Ámbar Solar */
  --color-ochre-soft: #FEF7EA;      /* Ámbar Suave */
  --color-sage: #4E7C67;            /* Salvia / Musgo */
  --color-sage-soft: #EBF3EF;       /* Salvia Claro */
  --color-canvas: #F8F6F0;          /* Lienzo Natural / Papel */
  --color-surface: #FFFFFF;         /* Superficie Blanca */
  --color-border: #E8E3D7;          /* Borde Suave */
  --color-ink: #192420;             /* Texto Principal */
  --color-ink-muted: #606C66;       /* Texto Secundario */
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  background-color: var(--color-canvas);
  color: var(--color-ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .font-heading {
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.02em;
}

/* Scrollbar refinado */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: #F1ECE1;
}
::-webkit-scrollbar-thumb {
  background: #CFC7B7;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #B2A895;
}

/* Pulso elegante para botón GPS en verde original */
@keyframes ring-emerald {
  0% {
    transform: scale(0.96);
    box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.6);
  }
  70% {
    transform: scale(1.03);
    box-shadow: 0 0 0 10px rgba(5, 150, 105, 0);
  }
  100% {
    transform: scale(0.96);
    box-shadow: 0 0 0 0 rgba(5, 150, 105, 0);
  }
}

.gps-button-active {
  animation: ring-emerald 2s infinite ease-in-out;
}

/* Contenedores de Mapas */
#map-container {
  min-height: 520px;
  height: calc(100vh - 170px);
  width: 100%;
  border-radius: 1.5rem;
  z-index: 10;
  border: 1px solid var(--color-border);
}

#form-map {
  height: 240px;
  width: 100%;
  border-radius: 1rem;
  border: 1px solid var(--color-border);
}

/* Estilos de Popup Leaflet */
.leaflet-popup-content-wrapper {
  background: #FFFFFF !important;
  border-radius: 16px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid #E8E3D7 !important;
  box-shadow: 0 16px 32px -8px rgba(19, 43, 34, 0.12), 0 4px 12px -2px rgba(19, 43, 34, 0.06) !important;
}

.leaflet-popup-content {
  margin: 0 !important;
  width: 270px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.leaflet-popup-tip {
  background: #FFFFFF !important;
  border: 1px solid #E8E3D7 !important;
}

/* Pines personalizados de Leaflet */
.custom-tree-pin-green,
.custom-tree-pin-red {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Dropzone de fotos */
.file-dropzone {
  border: 2px dashed #D9D2C3;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  background: #FAF8F5;
}
.file-dropzone:hover, .file-dropzone.dragover {
  border-color: var(--color-emerald-primary);
  background-color: var(--color-emerald-soft);
}

/* Badges de estado refinados */
.badge-pending {
  background-color: var(--color-ochre-soft);
  color: #8C5B08;
  border: 1px solid #F4DCB1;
}
.badge-approved {
  background-color: var(--color-emerald-soft);
  color: var(--color-canopy);
  border: 1px solid #A7F3D0;
}
.badge-rejected {
  background-color: #FDF0F0;
  color: #A32828;
  border: 1px solid #F5C6C6;
}
.badge-dead {
  background-color: #F8F2EE;
  color: #87381C;
  border: 1px solid #E6CABF;
}

/* Certificado de Siembra */
.certificate-frame {
  background: #FFFFFF;
  border: 12px solid #F4EFE6;
  outline: 2px solid var(--color-emerald-primary);
  outline-offset: -8px;
  position: relative;
}

/* Ocultar elementos no deseados o inyecciones externas */
a[href*="netlify"],
iframe[src*="netlify"],
[class*="netlify"],
[id*="netlify"],
[data-netlify],
[src*="netlify"],
svg[title*="Netlify"],
.netlify-badge,
#netlify-badge,
#netlify-drawer,
.netlify-drawer,
div[style*="z-index: 2147483647"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* ==========================================================================
   MODO OSCURO (NOCHE BOTÁNICA) - PURE CSS OVERRIDES
   Sin alterar la estructura, tamaños ni paleta esmeralda del diseño original
   ========================================================================== */

html.dark {
  color-scheme: dark;
}

html.dark,
html.dark body {
  background-color: #0D1613 !important;
  color: #E2E8F0 !important;
}

/* Fondos y Superficies */
html.dark .bg-canvas {
  background-color: #0D1613 !important;
}

html.dark .bg-surface {
  background-color: #14221D !important;
}

html.dark header nav {
  background-color: rgba(20, 34, 29, 0.95) !important;
  border-color: #20352D !important;
}

html.dark #mobile-menu {
  background-color: #14221D !important;
  border-color: #20352D !important;
}

/* Bordes */
html.dark .border-borderWarm,
html.dark [class*="border-borderWarm"] {
  border-color: #20352D !important;
}

/* Tipografías */
html.dark .text-canopy {
  color: #F1F5F9 !important;
}

html.dark .text-ink {
  color: #E2E8F0 !important;
}

html.dark .text-ink-muted {
  color: #94A3B8 !important;
}

/* Formularios, Inputs y Selects */
html.dark input,
html.dark select,
html.dark textarea {
  color-scheme: dark;
  background-color: #0D1613 !important;
  border-color: #20352D !important;
  color: #F1F5F9 !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #64748B !important;
}

/* Badges y contenedores secundarios */
html.dark .bg-sage-soft {
  background-color: #162B21 !important;
  color: #A7F3D0 !important;
}

html.dark .bg-ochre-soft {
  background-color: #2A2111 !important;
  color: #FCD34D !important;
}

html.dark .bg-emerald-50 {
  background-color: #0F2D20 !important;
  color: #A7F3D0 !important;
}

/* Dropzone de fotos */
html.dark .file-dropzone {
  background-color: #0D1613 !important;
  border-color: #20352D !important;
}

html.dark .file-dropzone:hover,
html.dark .file-dropzone.dragover {
  border-color: #059669 !important;
  background-color: #0F2D20 !important;
}

/* Popups del Mapa Leaflet */
html.dark .leaflet-popup-content-wrapper {
  background: #14221D !important;
  color: #F1F5F9 !important;
  border: 1px solid #20352D !important;
}

html.dark .leaflet-popup-tip {
  background: #14221D !important;
  border: 1px solid #20352D !important;
}

/* Scrollbars */
html.dark ::-webkit-scrollbar-track {
  background: #0D1613;
}
html.dark ::-webkit-scrollbar-thumb {
  background: #20352D;
}
html.dark ::-webkit-scrollbar-thumb:hover {
  background: #2D4A3F;
}

/* El Certificado de Siembra siempre permanece auténtico, blanco y nítido para impresión */
html.dark #certificate-card {
  background-color: #FFFFFF !important;
  color: #192420 !important;
}

html.dark #certificate-card * {
  color-scheme: light;
}

html.dark #certificate-card .text-canopy {
  color: #132B22 !important;
}

html.dark #certificate-card .text-ink-muted {
  color: #606C66 !important;
}

html.dark #certificate-card .bg-canvas\/70 {
  background-color: rgba(248, 246, 240, 0.7) !important;
}

html.dark #certificate-card .border-borderWarm {
  border-color: #E8E3D7 !important;
}