/* ============================================================ Sistema de temas — 3 ejes independientes y combinables: 1) Paleta de color -> [data-palette="..."] (variables --brand-*) 2) Tipografía -> [data-font="..."] (variable --font-sans) 3) Claro / Oscuro -> clase .dark en Se aplican desde JS según lo guardado en localStorage. ============================================================ */ /* ---------- Tipografías ---------- */ :root, [data-font="inter"] { --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif; } [data-font="poppins"] { --font-sans: 'Poppins', ui-sans-serif, system-ui, sans-serif; } [data-font="nunito"] { --font-sans: 'Nunito', ui-sans-serif, system-ui, sans-serif; } [data-font="system"] { --font-sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } /* ---------- Paletas de color (valores RGB para permitir opacidad) ---------- */ /* Campo (verde-agro) — por defecto */ :root, [data-palette="campo"] { --brand-50: 241 248 237; --brand-100: 220 237 208; --brand-200: 188 221 166; --brand-300: 147 197 115; --brand-400: 111 172 76; --brand-500: 82 143 49; --brand-600: 61 113 36; --brand-700: 49 89 31; --brand-800: 41 71 29; --brand-900: 35 60 27; --brand-950: 15 33 9; } /* Océano (teal) */ [data-palette="oceano"] { --brand-50: 240 253 250; --brand-100: 204 251 241; --brand-200: 153 246 228; --brand-300: 94 234 212; --brand-400: 45 212 191; --brand-500: 20 184 166; --brand-600: 13 148 136; --brand-700: 15 118 110; --brand-800: 17 94 89; --brand-900: 19 78 74; --brand-950: 4 47 46; } /* Tierra (ámbar) */ [data-palette="tierra"] { --brand-50: 255 251 235; --brand-100: 254 243 199; --brand-200: 253 230 138; --brand-300: 252 211 77; --brand-400: 251 191 36; --brand-500: 217 119 6; --brand-600: 180 83 9; --brand-700: 146 64 14; --brand-800: 120 53 15; --brand-900: 105 47 15; --brand-950: 69 26 3; } /* Índigo */ [data-palette="indigo"] { --brand-50: 238 242 255; --brand-100: 224 231 255; --brand-200: 199 210 254; --brand-300: 165 180 252; --brand-400: 129 140 248; --brand-500: 99 102 241; --brand-600: 79 70 229; --brand-700: 67 56 202; --brand-800: 55 48 163; --brand-900: 49 46 129; --brand-950: 30 27 75; } /* Vino (rosa/borravino) */ [data-palette="vino"] { --brand-50: 255 241 242; --brand-100: 255 228 230; --brand-200: 254 205 211; --brand-300: 253 164 175; --brand-400: 251 113 133; --brand-500: 244 63 94; --brand-600: 225 29 72; --brand-700: 190 18 60; --brand-800: 159 18 57; --brand-900: 136 19 55; --brand-950: 76 5 25; } /* --------------------------------------------------------------------------- Marcadores del mapa de almacenamientos (los usa wwwroot/js/mapa-almacenamientos.js). Van acá y no en Tailwind porque las clases viven en un .js y el build las purgaría. --------------------------------------------------------------------------- */ .alm-pin { display: flex; flex-direction: column; align-items: center; line-height: 1; } .alm-pin svg { width: 30px; height: 30px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); } .alm-pin-casa { fill: rgb(var(--brand-600)); stroke: #fff; stroke-width: 1.2; } .alm-pin-casa-vacia { fill: #64748b; } .alm-pin-badge { margin-top: 2px; padding: 1px 6px; border-radius: 9999px; white-space: nowrap; font-size: 11px; font-weight: 700; color: #fff; background: rgba(15, 23, 42, .82); border: 1px solid rgba(255, 255, 255, .35); } .alm-pin-nombre { margin-top: 2px; font-size: 10px; font-weight: 600; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.9); white-space: nowrap; } /* Etiqueta del campo (sobre el área dibujada) */ .leaflet-tooltip.alm-campo-tip { background: rgba(15, 23, 42, .72); border: 0; color: #fff; font-weight: 600; box-shadow: none; padding: 2px 8px; } .leaflet-tooltip.alm-campo-tip::before { display: none; }