/* ============================================================
   OASIS Irrigation Control — CSS
   Themes: dark (default) + light
   Responsive: mobile-first → tablet → desktop

   ┌──────────────────────────────────────────────────────────┐
   │  OASIS CARD STANDARD                                     │
   │  (apply to any element that visually behaves as a card)  │
   ├──────────────────────────────────────────────────────────┤
   │  1. contain: paint  on list-item cards (.mmc, .wf-card,  │
   │     .inv-mission-card, .inv-hist-card, .dash-card)       │
   │     → isolates each card so paint pressure in one        │
   │       (image load, animation) doesn't leak to siblings.  │
   │                                                          │
   │  2. NEVER backdrop-filter on overlays over the map.      │
   │     The map's animated SVG patterns + filter chain make  │
   │     blur recalc per-frame ruinously expensive. Use a     │
   │     solid rgba background (0.92-0.96 alpha) instead.     │
   │                                                          │
   │  3. Heights for full-screen panels: max-height: 100dvh   │
   │     (or 88dvh, 92dvh). Plain vh causes layout jumps when │
   │     the mobile keyboard appears or browser chrome moves. │
   │                                                          │
   │  4. Transitions on cards: limit to ONE property          │
   │     (background OR border-color, ≤ 200ms). Avoid         │
   │     `transition: all` — repaints every animatable prop   │
   │     when ANY state changes. Avoid transitions on         │
   │     box-shadow with blur > 8px (large paint area).       │
   │                                                          │
   │  5. No infinite animation on box-shadow. Cards animating │
   │     box-shadow infinitely (was mmc-alta-pulse) repaint   │
   │     each frame. Use a static thicker border + solid      │
   │     shadow if "urgent" emphasis is needed.               │
   │                                                          │
   │  6. When a card overlay covers the map, pause the map's  │
   │     SVG animations: msvg.pauseAnimations() + add         │
   │     .m-svg--interact class. Resume on close via the same │
   │     MutationObserver pattern used by inv-fs/mmp/wl.      │
   │                                                          │
   │  7. Hover effects: prefer color/background changes over  │
   │     transform: scale (scale forces layer promotion +     │
   │     can cause subpixel-rendering hiccups in lists).      │
   └──────────────────────────────────────────────────────────┘
   ============================================================ */

/* ── PWA Install & Update Banners ── */
.pwa-install-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10001;
  display: flex;
  justify-content: center;
  padding: 0 12px 12px;
  pointer-events: none;
  animation: pwa-slide-up 0.35s ease-out;
}
.pwa-install-content {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  max-width: 420px;
  width: 100%;
  pointer-events: auto;
}
.pwa-install-icon {
  font-size: 28px;
  flex-shrink: 0;
}
.pwa-install-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.pwa-install-text strong {
  font-size: 13px;
  color: var(--text-1);
}
.pwa-install-text span {
  font-size: 11px;
  color: var(--text-3);
}
.pwa-install-btn {
  padding: 6px 16px;
  border-radius: 8px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}
.pwa-install-btn:hover {
  filter: brightness(1.15);
}
.pwa-install-close {
  background: none;
  border: none;
  color: var(--text-3);
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}

.pwa-update-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 16px;
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
  border-bottom: 1px solid var(--accent);
  color: var(--text-1);
  font-size: 13px;
  font-weight: 500;
  animation: pwa-slide-down 0.3s ease-out;
}
.pwa-update-btn {
  padding: 4px 14px;
  border-radius: 6px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.pwa-update-btn:hover {
  background: var(--accent);
  color: #fff;
}

@keyframes pwa-slide-up {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes pwa-slide-down {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ── Birthday Banner ── */
.birthday-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10002;
  animation: bday-slide-down 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.birthday-banner-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 11px 52px 11px 16px;
  background: linear-gradient(100deg, #6d28d9, #9333ea, #db2777, #ea580c, #d97706);
  background-size: 300% 100%;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 4px 32px rgba(147, 51, 234, 0.5), 0 2px 8px rgba(0,0,0,0.4);
  position: relative;
  animation: bday-gradient-shift 4s ease infinite;
}
.birthday-banner-emoji {
  font-size: 24px;
  flex-shrink: 0;
  display: inline-block;
  animation: bday-bounce 1s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(255,200,0,0.7));
}
.birthday-banner-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}
.birthday-banner-title {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
  letter-spacing: 0.02em;
  animation: bday-shimmer 2.5s ease-in-out infinite;
}
.birthday-banner-sub {
  font-size: 11.5px;
  color: rgba(255,255,255,0.88);
  font-style: italic;
  letter-spacing: 0.01em;
}
.birthday-banner-close {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.15s;
  flex-shrink: 0;
}
.birthday-banner-close:hover {
  background: rgba(255,255,255,0.32);
  transform: translateY(-50%) scale(1.1);
}
/* Full-page confetti layer */
.bday-confetti-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10001;
  overflow: hidden;
}
.bday-confetti {
  position: absolute;
  top: -36px;
  line-height: 1;
  user-select: none;
  opacity: 0.95;
  animation: confetti-fall linear forwards;
  will-change: transform, opacity;
}
@keyframes bday-slide-down {
  from { transform: translateY(-110%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes bday-gradient-shift {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}
@keyframes bday-bounce {
  0%, 100% { transform: translateY(0)    rotate(-8deg) scale(1);    }
  50%       { transform: translateY(-5px) rotate(8deg)  scale(1.15); }
}
@keyframes bday-shimmer {
  0%, 100% { text-shadow: 0 1px 8px rgba(0,0,0,0.4); }
  50%       { text-shadow: 0 0 20px rgba(255,240,100,0.8), 0 1px 8px rgba(0,0,0,0.4); }
}
@keyframes confetti-fall {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg) scale(1);
    opacity: 0.95;
  }
  20% { transform: translateY(20vh) translateX(calc(var(--drift, 0px) * 0.25)) rotate(200deg) scale(1.05); }
  60% { opacity: 0.9; }
  85% {
    transform: translateY(85vh) translateX(calc(var(--drift, 0px) * 0.85)) rotate(700deg) scale(0.9);
    opacity: 0.75;
  }
  100% {
    transform: translateY(110vh) translateX(var(--drift, 0px)) rotate(960deg) scale(0.7);
    opacity: 0;
  }
}

/* ---- CSS Custom Properties ---- */
:root {
  /* Accent */
  --accent: #00d4ff;
  --accent-dim: #00d4ff30;
  --accent-glow: #00d4ff60;

  /* Zone states */
  --zone-active: #0088ff;
  --zone-active-bg: #0088ff20;
  --zone-active-glow: #0088ff60;
  --zone-inactive: #00b8a9;
  --zone-inactive-bg: #00b8a920;
  --zone-error: #ff4444;
  --zone-error-bg: #ff444420;
  --zone-error-glow: #ff444460;

  /* Irrigation types */
  --type-drip: #00aaff;
  --type-mist: #cc88ff;
  --type-sprinkler: #00ff88;

  /* Status */
  --online: #00ff88;
  --offline: #ff4444;
  --warning: #ffaa44;
  --danger: #ff4444;
  --success: #00ff88;
  --error: #ff5252;

  /* Sizing */
  --header-h: 56px;
  --tabs-h: 44px;
  --bnav-h: 60px;
  --bnav-total: calc(var(--bnav-h) + env(safe-area-inset-bottom, 0px));
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 16px;
}

/* Dark theme */
[data-theme="dark"] {
  --bg-0: #060a14;
  --bg-1: #0a0e1a;
  --bg-2: #0d1525;
  --bg-2-rgb: 13, 21, 37;
  --bg-3: #131d30;
  --bg-3-rgb: 19, 29, 48;
  --bg-card: #0d1525;
  --bg-card-rgb: 13, 21, 37;
  --bg-card-hover: #111b2e;
  --bg-hover: #111b2e;
  --border: #1e3050;
  --border-light: #1a2840;
  --text-1: #eef2f7;
  --text-2: #c9d1e0;
  --text-3: #6b8aad;
  --text-muted: #3a5070;
  --shadow: rgba(0, 0, 0, 0.5);
  --modal-bg: rgba(0, 0, 0, 0.7);
}

/* Light theme */
[data-theme="light"] {
  --bg-0: #f0f4f8;
  --bg-1: #f8fafc;
  --bg-2: #ffffff;
  --bg-2-rgb: 255, 255, 255;
  --bg-3: #e8ecf2;
  --bg-3-rgb: 232, 236, 242;
  --bg-card: #ffffff;
  --bg-card-rgb: 255, 255, 255;
  --bg-card-hover: #f1f5f9;
  --bg-hover: #f1f5f9;
  --border: #d0d8e4;
  --border-light: #e2e8f0;
  --text-1: #0f172a;
  --text-2: #334155;
  --text-3: #64748b;
  --text-muted: #94a3b8;
  --shadow: rgba(0, 0, 0, 0.1);
  --modal-bg: rgba(0, 0, 0, 0.4);
  --accent: #0088cc;
  --accent-dim: #0088cc20;
  --accent-glow: #0088cc40;
  --zone-active: #0066dd;
  --zone-active-bg: #0066dd15;
  --zone-active-glow: #0066dd40;
  --zone-inactive: #00897b;
  --zone-inactive-bg: #00897b15;
  --zone-error: #d32f2f;
  --zone-error-bg: #d32f2f15;
  --zone-error-glow: #d32f2f40;
  --online: #16a34a;
  --offline: #dc2626;
  --warning: #d97706;
  --danger: #dc2626;
  --success: #16a34a;
  --error: #dc2626;
}

/* ---- Reset ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
  -webkit-tap-highlight-color: transparent;
}
body {
  background: var(--bg-1);
  color: var(--text-2);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
button {
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
}
input,
select {
  font: inherit;
  color: inherit;
}
a {
  color: var(--accent);
  text-decoration: none;
}

/* ---- Screens ---- */
.screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- SPLASH ---- */
.splash {
  background: var(--bg-0);
  flex-direction: column;
  animation: splashIn 0.5s ease-out;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.splash-bg-anim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, var(--accent-dim) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, #cc88ff12 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, #00d4aa08 0%, transparent 60%);
  animation: splashBgShift 6s ease-in-out infinite alternate;
  pointer-events: none;
  will-change: transform, opacity;
  transform-origin: center center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
@keyframes splashBgShift {
  0% {
    opacity: 0.4;
    transform: scale(1) rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: scale(1.15) rotate(3deg);
  }
}
.splash-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}
.splash-logo-text {
  user-select: none;
}
.splash-logo-custom {
  max-height: 120px;
  border-radius: 20px;
  box-shadow:
    0 0 40px var(--accent-glow),
    0 8px 32px var(--shadow);
  object-fit: contain;
}
.logo-icon {
  font-size: 64px;
  margin-bottom: 12px;
  filter: drop-shadow(0 0 20px var(--accent-glow));
  animation: splashIconFloat 3s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes splashIconFloat {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-8px);
  }
}
.logo-title {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: 8px;
  color: var(--accent);
  text-shadow: 0 0 30px var(--accent-glow);
}
.logo-subtitle {
  color: var(--text-3);
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-top: 4px;
}
.logo-version-tag {
  margin-top: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--accent);
  opacity: 0.5;
  font-family: "Courier New", monospace;
}
.splash-loader {
  width: 100%;
  max-width: 280px;
  margin: 40px auto 0;
}
.loader-hose {
  position: relative;
  width: 100%;
}
.loader-bar {
  height: 4px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}
.loader-fill {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--accent), var(--type-mist));
  border-radius: 4px;
  animation: loaderGrow 2.2s ease-in-out forwards;
  box-shadow: 0 0 8px var(--accent-glow);
  will-change: transform;
}
/* Nozzle centered below the bar */
.loader-nozzle {
  position: absolute;
  left: 50%;
  top: 2px;
  transform: translateX(-50%);
  opacity: 0;
  animation: nozzleAppear 0.3s ease-out 1.8s forwards;
  will-change: transform, opacity;
}
.nozzle-svg {
  filter: drop-shadow(0 0 4px var(--accent-glow));
}
/* Water drop that falls from the nozzle center */
.loader-drop {
  position: absolute;
  left: 50%;
  top: 28px;
  transform: translateX(-50%) translateY(0) scale(0.6);
  opacity: 0;
  will-change: transform, opacity, filter;
  animation:
    dropGlow 1.6s ease-out 2.1s forwards,
    dropFall 0.7s ease-in 3.7s forwards;
}
.loader-drop svg {
  filter: drop-shadow(0 0 6px var(--accent-glow));
}
@keyframes nozzleAppear {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.5);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}
@keyframes dropGlow {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(0) scale(0.4);
  }
  20% {
    opacity: 1;
    transform: translateX(-50%) translateY(2px) scale(1);
  }
  50% {
    filter: drop-shadow(0 0 12px var(--accent)) brightness(1.4);
  }
  80% {
    filter: drop-shadow(0 0 8px var(--accent-glow)) brightness(1.1);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(2px) scale(1);
    filter: drop-shadow(0 0 6px var(--accent-glow));
  }
}
@keyframes dropFall {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(2px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(44px) scale(0.3);
  }
}
.splash-version {
  margin-top: 24px;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--text-3);
  opacity: 0.6;
  font-family: "Courier New", monospace;
}
@keyframes loaderGrow {
  0% {
    transform: scaleX(0);
  }
  85% {
    transform: scaleX(0.95);
  }
  100% {
    transform: scaleX(1);
  }
}
@keyframes splashIn {
  0% {
    opacity: 0;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ---- LOGIN ---- */
.login {
  background: var(--bg-0);
  overflow: hidden;
  flex-direction: column;
  gap: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.login-bg-pattern {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 60% 50% at 30% 15%,
      var(--accent-dim) 0%,
      transparent 70%
    ),
    radial-gradient(ellipse 50% 40% at 75% 85%, #cc88ff18 0%, transparent 65%),
    radial-gradient(circle at 50% 50%, #00d4aa06 0%, transparent 80%);
  animation: loginBgPulse 8s ease-in-out infinite alternate;
  pointer-events: none;
  will-change: transform, opacity;
  transform-origin: center center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
@keyframes loginBgPulse {
  0% {
    opacity: 0.5;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1.1);
  }
}
.login-card {
  position: relative;
  background: linear-gradient(
    145deg,
    rgba(var(--bg-2-rgb), 0.85),
    rgba(var(--bg-2-rgb), 0.95)
  );
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 24px;
  padding: 36px 28px 30px;
  width: 94%;
  max-width: 400px;
  max-height: 92vh;
  max-height: 92dvh;
  overflow-y: auto;
  scrollbar-width: none;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(0, 212, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  animation: loginCardIn 0.5s ease-out;
  isolation: isolate;
}
.login-card::-webkit-scrollbar {
  display: none;
}
@keyframes loginCardIn {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Login Logo — centered and large */
.login-logo {
  text-align: center;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.login-logo h1 {
  color: var(--accent);
  font-size: 40px;
  letter-spacing: 8px;
  font-weight: 800;
  text-shadow: 0 0 24px var(--accent-glow);
}
.login-logo-custom {
  display: block;
  max-width: 85%;
  max-height: 180px;
  width: auto;
  height: auto;
  border-radius: 20px;
  box-shadow:
    0 0 60px var(--accent-glow),
    0 12px 40px rgba(0, 0, 0, 0.5);
  object-fit: contain;
  margin: 0 auto;
}
.logo-icon-sm {
  font-size: 72px;
  margin-bottom: 8px;
  filter: drop-shadow(0 0 24px var(--accent-glow));
  animation: splashIconFloat 3s ease-in-out infinite alternate;
  will-change: transform;
}
.login-version {
  text-align: center;
  font-size: 10px;
  letter-spacing: 2.5px;
  color: var(--text-3);
  opacity: 0.4;
  margin-bottom: 20px;
  font-family: "Courier New", monospace;
  text-transform: uppercase;
}
.btn-reload-login {
  display: block;
  margin: 12px auto 0;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-3);
  font-size: 12px;
  padding: 6px 18px;
  border-radius: 20px;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.btn-reload-login:hover,
.btn-reload-login:active {
  opacity: 1;
  color: var(--accent);
  border-color: var(--accent);
}
.login-label {
  color: var(--text-2);
  font-size: 14px;
  text-align: center;
  margin-bottom: 20px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 500;
}
.login-greeting {
  color: var(--accent);
  font-size: 17px;
  text-align: center;
  margin-bottom: 8px;
  font-weight: 700;
  text-shadow: 0 0 12px var(--accent-glow);
}

/* User cards — premium style */
.user-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Mode picker cards */
.mode-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mode-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(var(--bg-2-rgb), 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.25s ease;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.mode-card:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 212, 255, 0.15);
}
.mode-card:active {
  transform: translateY(0) scale(0.98);
}
.mode-card-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.mode-card-icon.guest {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), transparent);
  border: 2px solid #10b981;
  color: #10b981;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.3);
}
.mode-card-icon.last-user {
  background: linear-gradient(135deg, var(--accent-dim), transparent);
  border: 2px solid var(--accent);
  color: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}
.mode-card-icon.users {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), transparent);
  border: 2px solid #8b5cf6;
  color: #8b5cf6;
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.3);
}
.mode-card-info h3 {
  color: var(--text-1);
  font-size: 15px;
  font-weight: 600;
}
.mode-card-info p {
  color: var(--text-3);
  font-size: 12px;
  margin-top: 2px;
}
#btn-back-mode {
  margin-top: 12px;
}
.user-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(var(--bg-2-rgb), 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.25s ease;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.user-card:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 212, 255, 0.15);
}
.user-card:active {
  transform: translateY(0) scale(0.98);
}
.user-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-dim), transparent);
  border: 2px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
  flex-shrink: 0;
}
.user-card-info h3 {
  color: var(--text-1);
  font-size: 15px;
  font-weight: 600;
}
.user-card-info p {
  color: var(--text-3);
  font-size: 12px;
  margin-top: 2px;
}

/* PIN pad — refined */
.pin-display {
  display: flex;
  gap: 18px;
  justify-content: center;
  margin-bottom: 24px;
}
.pin-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  transition: all 0.25s ease;
}
.pin-dot.filled {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow:
    0 0 14px var(--accent-glow),
    0 0 4px var(--accent);
  transform: scale(1.15);
}
.pin-error {
  color: var(--zone-error);
  text-align: center;
  font-size: 13px;
  margin-bottom: 12px;
  animation: shake 0.4s;
}
/* Crea tu PIN (PIN propio obligatorio) */
.setpin-hint {
  color: var(--text-2);
  text-align: center;
  font-size: 12.5px;
  line-height: 1.4;
  margin: -8px auto 18px;
  max-width: 280px;
  opacity: 0.85;
}
#setpin-continue {
  width: 100%;
  margin-top: 18px;
}
#setpin-continue:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
@keyframes shake {
  10%,
  90% {
    transform: translateX(-2px);
  }
  20%,
  80% {
    transform: translateX(4px);
  }
  30%,
  50%,
  70% {
    transform: translateX(-6px);
  }
  40%,
  60% {
    transform: translateX(6px);
  }
}

.pin-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 280px;
  margin: 0 auto;
}
.pin-key {
  height: 58px;
  border-radius: 14px;
  background: rgba(var(--bg-2-rgb), 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 24px;
  font-weight: 600;
  color: var(--text-1);
  transition: all 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.pin-key:hover {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(var(--bg-2-rgb), 0.7);
}
.pin-key:active,
.pin-key.kb-press {
  background: var(--accent-dim);
  border-color: var(--accent);
  transform: scale(0.93);
  box-shadow: 0 0 12px var(--accent-glow);
}
.pin-key-empty {
  visibility: hidden;
}
.pin-key-back {
  font-size: 22px;
  color: var(--text-3);
}
.btn-text {
  color: var(--text-3);
  font-size: 13px;
  margin-top: 20px;
  display: block;
  text-align: center;
  letter-spacing: 0.5px;
  transition: color 0.2s;
}
.btn-text:hover {
  color: var(--accent);
}

/* ---- MAIN APP ---- */
.app {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Header */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding: 0 16px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  z-index: 100;
}
.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.header-logo-icon {
  font-size: 24px;
}
.header-logo img {
  height: 32px;
  width: auto;
  border-radius: 4px;
}
.header-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 2px;
}
.header-greeting {
  font-size: 12px;
  color: var(--text-3);
}
.header-right {
  display: flex;
  align-items: center;
  gap: 4px;
}
.header-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 8px;
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.status-dot.online {
  background: var(--online);
  box-shadow: 0 0 6px var(--online);
}
.status-dot.offline {
  background: var(--offline);
  box-shadow: 0 0 6px var(--offline);
}
.status-label {
  font-size: 11px;
  color: var(--text-3);
}
.offline-banner {
  background: var(--warning, #f59e0b);
  color: #000;
  text-align: center;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 999;
}
.header-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background 0.2s;
}
.header-btn:hover {
  background: var(--accent-dim);
}
#btn-lang {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
}

/* Top Tabs */
.top-tabs {
  display: flex;
  gap: 2px;
  padding: 0 12px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.top-tabs::-webkit-scrollbar {
  display: none;
}
.tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  position: relative;
}
.tab:hover {
  color: var(--text-2);
  background: var(--accent-dim);
}
.tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.tab-ipm {
  color: #c084fc;
}
.tab-ipm.active {
  color: #a855f7;
  border-bottom-color: #a855f7;
}
.tab-icon {
  font-size: 14px;
}
.tab-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--zone-error);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 10px;
  min-width: 16px;
  text-align: center;
}

/* Alert banner */
.alert-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--zone-error-bg);
  border-bottom: 1px solid var(--zone-error);
  color: var(--zone-error);
  font-size: 13px;
  flex-shrink: 0;
  animation: slideBannerIn 0.3s;
}
@keyframes slideBannerIn {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
.alert-banner-close {
  color: var(--zone-error);
  font-size: 16px;
  margin-left: auto;
}

/* Content area */
.app-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Bottom Nav */
.bottom-nav {
  display: none;
  flex-shrink: 0;
  height: var(--bnav-total);
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.bnav {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--text-3);
  font-size: 10px;
  transition: color 0.2s;
  position: relative;
}
.bnav.active {
  color: var(--accent);
}
.bnav-icon {
  font-size: 20px;
}
.bnav-label {
  font-size: 10px;
}
.bnav-badge {
  position: absolute;
  top: 4px;
  right: 50%;
  transform: translateX(14px);
  background: var(--zone-error);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 8px;
  min-width: 14px;
  text-align: center;
}

/* More menu */
.more-menu-backdrop {
  position: fixed;
  inset: 0;
  background: var(--modal-bg);
  z-index: 200;
}
.more-menu-panel {
  position: fixed;
  bottom: var(--bnav-h);
  left: 0;
  right: 0;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 8px 0;
  z-index: 201;
  animation: slideUp 0.2s;
}
@keyframes slideUp {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
.more-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 20px;
  font-size: 14px;
  color: var(--text-2);
  transition: background 0.2s;
}
.more-item:hover {
  background: var(--accent-dim);
}
.more-badge {
  background: var(--zone-error);
  color: #fff;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 8px;
  margin-left: auto;
}

/* FAB */
.fab {
  position: fixed;
  bottom: calc(var(--bnav-total) + 12px);
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 4px 20px var(--accent-glow);
  z-index: 50;
  transition: all 0.2s;
}
.fab:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 30px var(--accent-glow);
}
.fab:active {
  transform: scale(0.95);
}
.map-active .fab {
  display: none;
}

/* ---- MODALS ---- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--modal-bg);
}
.modal-card {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
  animation: slideUp 0.25s;
}
.modal-large {
  max-width: 560px;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.modal-header h2 {
  font-size: 16px;
  color: var(--text-1);
}
.modal-close {
  font-size: 20px;
  color: #ff3b3b;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-weight: 700;
  text-shadow: 0 0 6px rgba(255, 59, 59, 0.4);
  transition: all 0.15s;
}
.modal-close:hover {
  background: rgba(255, 59, 59, 0.15);
  color: #ff1a1a;
  text-shadow: 0 0 10px rgba(255, 59, 59, 0.7);
}
.modal-body {
  padding: 16px 20px 24px;
}

/* Search input */
.search-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-1);
  font-size: 14px;
  margin-bottom: 12px;
  outline: none;
  transition: border-color 0.2s;
}
.search-input:focus {
  border-color: var(--accent);
}
.search-input::placeholder {
  color: var(--text-muted);
}

/* Quick irrigation zones list */
.quick-zones {
  max-height: 50vh;
  overflow-y: auto;
}
.quick-zone-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s;
}
.quick-zone-item:hover {
  background: var(--accent-dim);
}
.quick-zone-item .zone-name {
  font-weight: 600;
  color: var(--text-1);
}
.quick-zone-item .zone-esp {
  font-size: 11px;
  color: var(--text-3);
}
.quick-zone-item .zone-type-tag {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
}
.type-drip {
  background: var(--type-drip);
  color: #000;
}
.type-mist {
  background: var(--type-mist);
  color: #000;
}
.type-sprinkler {
  background: var(--type-sprinkler);
  color: #000;
}

/* Duration presets */
.quick-zone-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  text-align: center;
  margin-bottom: 16px;
}
.duration-presets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.dur-btn {
  padding: 12px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  transition: all 0.15s;
}
.dur-btn:hover,
.dur-btn.selected {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
}
.duration-custom {
  margin-bottom: 20px;
}
.duration-custom label {
  display: block;
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 6px;
}
.duration-custom input {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-1);
  text-align: center;
  font-size: 18px;
}

/* Quick Run — Running State */
.quick-running-panel {
  text-align: center;
  padding: 8px 0;
}
.quick-running-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
}
.quick-running-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-1);
}
.quick-running-timer {
  font-size: 48px;
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: 2px;
  margin-bottom: 12px;
}
.quick-running-bar {
  width: 100%;
  height: 6px;
  background: var(--bg-3);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 20px;
}
.quick-running-progress {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 1s linear;
}
.quick-running-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.btn-danger {
  width: 100%;
  padding: 14px;
  background: #ef4444;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border-radius: var(--radius);
  letter-spacing: 1px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-danger:hover {
  background: #dc2626;
}
.btn-danger:active {
  transform: scale(0.98);
}
.btn-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Buttons */
.btn-primary {
  width: 100%;
  padding: 14px;
  background: var(--accent);
  color: #000;
  font-size: 15px;
  font-weight: 700;
  border-radius: var(--radius);
  letter-spacing: 1px;
  transition: all 0.2s;
}
.btn-primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 20px var(--accent-glow);
}
.btn-primary:active {
  transform: scale(0.98);
}
.btn-primary.btn-danger {
  background: var(--zone-error);
}
.btn-large {
  padding: 16px;
  font-size: 16px;
}
.btn-outline {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: 12px;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}
.btn-outline.btn-danger {
  border-color: var(--zone-error);
  color: var(--zone-error);
}
.btn-sm {
  padding: 6px 10px;
  font-size: 11px;
  background: transparent;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-2);
}
.btn-sm:hover {
  background: var(--bg-3);
}

/* Toggle switch */
.toggle {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
}
.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 24px;
  cursor: pointer;
  transition: 0.3s;
}
.toggle-slider::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: var(--text-3);
  border-radius: 50%;
  transition: 0.3s;
}
.toggle input:checked + .toggle-slider {
  background: var(--accent-dim);
  border-color: var(--accent);
}
.toggle input:checked + .toggle-slider::before {
  transform: translateX(17px);
  background: var(--accent);
}

/* Settings — see refined versions below */
.logo-upload {
  display: flex;
  gap: 8px;
}

/* GPH per-zone override section */
.gph-zone-section {
  margin-top: 10px;
}
.gph-zone-toggle {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 0;
  width: 100%;
  text-align: left;
}
.gph-zone-toggle:hover {
  text-decoration: underline;
}
.gph-zone-list {
  margin-top: 8px;
  max-height: 420px;
  overflow-y: auto;
}
.gph-type-group {
  margin-bottom: 10px;
}
.gph-type-hdr {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3);
  padding: 4px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-left: 3px solid transparent;
  margin-bottom: 2px;
}
.gph-type-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.gph-zone-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-left: 3px solid transparent;
  border-radius: 0 6px 6px 0;
  background: var(--bg-3);
  margin-bottom: 3px;
  transition: background 0.15s;
}
.gph-zone-row:hover {
  background: rgba(0, 212, 255, 0.04);
}
.gph-zone-name {
  flex: 1;
  font-size: 13px;
  color: var(--text-1);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gph-zone-input {
  width: 64px;
  height: 30px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  color: var(--text-1);
  font-size: 14px;
  font-weight: 700;
  font-family: "SF Mono", Consolas, monospace;
  outline: none;
}
.gph-zone-input:focus {
  border-color: var(--accent);
  background: rgba(0, 212, 255, 0.06);
}
.gph-zone-input::placeholder {
  color: var(--text-3);
  font-weight: 400;
}
.gph-zone-unit {
  font-size: 10px;
  color: var(--text-3);
  font-weight: 600;
  min-width: 28px;
}
/* Type-colored left borders */
.type-border-drip {
  border-left-color: var(--type-drip) !important;
}
.type-border-mist {
  border-left-color: var(--type-mist) !important;
}
.type-border-sprinkler {
  border-left-color: var(--type-sprinkler) !important;
}

/* ============================================================
   VIEW: Dashboard
   ============================================================ */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.dash-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  /* OASIS card standard: contain:paint + scoped transition (not "all") */
  transition: border-color 0.2s, background-color 0.2s;
  contain: paint;
}
.dash-card:hover {
  border-color: var(--accent);
}
.dash-card-label {
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.dash-card-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--accent);
}
.dash-card-sub {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
}
.dash-card.active .dash-card-value {
  color: var(--zone-active);
}
.dash-card.error .dash-card-value {
  color: var(--zone-error);
}

.dash-section-title {
  font-size: 13px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 20px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

/* Active zones list in dashboard */
.active-zone-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--zone-active-bg);
  border-left: 3px solid var(--zone-active);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  animation: pulseGlow 2s infinite;
}
@keyframes pulseGlow {
  0%,
  100% {
    box-shadow: none;
  }
  50% {
    box-shadow: 0 0 10px var(--zone-active-bg);
  }
}
.active-zone-row .az-name {
  font-weight: 600;
  color: var(--text-1);
  flex: 1;
}
.active-zone-row .az-timer {
  font-family: monospace;
  font-size: 16px;
  color: var(--zone-active);
  font-weight: 700;
}
.active-zone-row .az-stop {
  padding: 4px 10px;
  background: var(--zone-error-bg);
  border: 1px solid var(--zone-error);
  border-radius: var(--radius-sm);
  color: var(--zone-error);
  font-size: 11px;
  font-weight: 600;
}
.active-zone-row .az-stop:hover {
  background: var(--zone-error);
  color: #fff;
}

/* Dashboard status notifications */
.dash-status-notif {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  margin-bottom: 6px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  gap: 8px;
}
.dash-notif-warn {
  background: rgba(234, 179, 8, 0.1);
  border: 1px solid rgba(234, 179, 8, 0.3);
  color: #eab308;
}
.dash-notif-fail {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
}
.dash-notif-x {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  color: inherit;
  opacity: 0.6;
  padding: 2px 6px;
  border-radius: 4px;
  transition: opacity 0.15s;
}
.dash-notif-x:hover {
  opacity: 1;
}

/* Dashboard Quick Run bar */
.dash-qr-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  gap: 12px;
}

/* Dashboard schedule rows */
.dash-scheds-list {
  margin-bottom: 4px;
}
.dash-sched-summary {
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.dash-sched-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 12px;
}
.dash-sched-row:last-child {
  border-bottom: none;
}
.dash-sched-off {
  opacity: 0.45;
}
.dash-sched-time {
  font-weight: 700;
  color: var(--accent);
  min-width: 52px;
}
.dash-sched-zone {
  flex: 1;
  color: var(--text-1);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-sched-days {
  color: var(--text-3);
  font-size: 11px;
  min-width: 70px;
}
.dash-sched-dur {
  color: var(--accent);
  min-width: 44px;
  text-align: right;
  font-weight: 700;
  font-size: 11px;
  background: rgba(0, 212, 255, 0.08);
  padding: 1px 6px;
  border-radius: 6px;
  white-space: nowrap;
}
.dash-sched-st {
  font-size: 13px;
}

/* Dashboard AM/PM mini rows */
.dash-ampm-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-2);
  border-bottom: 1px solid var(--border-light);
}
.dash-ampm-icon {
  font-size: 13px;
}
.dash-ampm-label {
  color: var(--text-1);
  min-width: 22px;
}
.dash-ampm-count {
  font-size: 10px;
  color: var(--accent);
  margin-left: auto;
  font-weight: 600;
}
.dash-seq-hint {
  margin-top: 6px;
  font-size: 11px;
  color: var(--accent);
  padding: 3px 8px;
  background: var(--accent-dim);
  border-radius: 6px;
  text-align: center;
}

/* Dashboard config items (Rain Delay / Override) */
.dash-cfg-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 8px;
}
.dash-cfg-icon {
  font-size: 22px;
}
.dash-cfg-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dash-cfg-text strong {
  font-size: 13px;
  color: var(--text-1);
}
.dash-cfg-desc {
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.3;
}
.dash-cfg-off {
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
}

/* Dashboard pressure indicator */
.dash-pressure-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 12px;
}
.dp-icon {
  font-size: 20px;
  flex-shrink: 0;
}
.dp-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dp-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
}
.dp-high {
  color: #22c55e;
}
.dp-low {
  color: #f59e0b;
}
.dp-off {
  color: var(--text-3);
}
.dp-hint {
  font-size: 11px;
  color: var(--text-3);
}

/* ── Pressure Pill (shared across views) ── */
.pressure-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
  border: 1px solid var(--border);
  background: var(--bg-card);
}
.pressure-pill:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.pp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pp-dot-high {
  background: #22c55e;
  box-shadow: 0 0 6px #22c55e80;
}
.pp-dot-low {
  background: #f59e0b;
  box-shadow: 0 0 6px #f59e0b80;
}
.pp-dot-off {
  background: var(--text-3);
}
.pp-text {
  white-space: nowrap;
}
.pp-high .pp-text {
  color: #22c55e;
}
.pp-low .pp-text {
  color: #f59e0b;
}
.pp-off .pp-text {
  color: var(--text-3);
}
.pp-hint {
  color: var(--text-3);
  font-weight: 400;
  font-size: 10px;
}
.pp-edit {
  font-size: 13px;
  opacity: 0.5;
  transition: opacity 0.2s;
  margin-left: 2px;
}
.pressure-pill:hover .pp-edit {
  opacity: 1;
}

.pp-dash {
  margin-bottom: 10px;
}
.pp-zones {
  margin-bottom: 8px;
}

/* Map pressure pill overlay */
.map-pressure-overlay {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 16;
  pointer-events: auto;
}
.map-pressure-overlay .pressure-pill {
  background: rgba(var(--bg-card-rgb, 30, 30, 30), 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-color: rgba(255, 255, 255, 0.08);
  font-size: 10px;
  padding: 3px 8px;
}

/* At-a-glance status strip on the map (rescued from the removed Dashboard) */
.map-status-strip {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 16;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 72vw;
  pointer-events: auto;
}
.mss-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-1);
  background: rgba(var(--bg-card-rgb, 30, 30, 30), 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 5px 11px;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.mss-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.18);
}
.mss-chip .mss-ic { font-size: 12px; }
.mss-chip b { font-size: 12px; }
.mss-chip.mss-on { border-color: rgba(34, 197, 94, 0.5); color: #22c55e; }
.mss-chip.mss-err { border-color: rgba(239, 68, 68, 0.5); color: #ef4444; }
.mss-chip.mss-turno {
  background: linear-gradient(135deg, #1b5e20, #43a047);
  color: #fff;
  border: none;
}

/* Timeline pressure band */
.sv-tl-pressure-band {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(34, 197, 94, 0.12);
  border-left: 1.5px dashed rgba(34, 197, 94, 0.4);
  border-right: 1.5px dashed rgba(34, 197, 94, 0.4);
  z-index: 2;
  pointer-events: none;
}
.sv-tl-ldot-pressure {
  background: rgba(34, 197, 94, 0.3);
  border: 1.5px dashed rgba(34, 197, 94, 0.6);
}

/* Weekly view pressure window */
.sv-wk-pressure {
  font-size: 9px;
  color: #22c55e;
  font-weight: 600;
  padding: 2px 0;
  opacity: 0.8;
  letter-spacing: 0.3px;
}

/* Pressure schedule editor (settings) */
.ps-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ps-hdr-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 48px;
  gap: 8px;
  padding: 0 4px 6px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.ps-hdr {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.ps-day-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 48px;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-3, #1a1a1a);
  border: 1px solid rgba(255,255,255,.06);
  transition: background .15s, border-color .15s;
}
.ps-day-row:hover {
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.ps-day-row.ps-day-off {
  opacity: .4;
}
.ps-day-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: .3px;
}
.ps-day-sub {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-3);
  margin-top: 1px;
}
.ps-time {
  padding: 8px 6px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-2, #1e1e1e);
  color: var(--text-1);
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  width: 100%;
  text-align: center;
  transition: border-color .15s;
}
.ps-time:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 2px rgba(33,150,243,.2);
}

/* ============================================================
   VIEW: Zones Grid
   ============================================================ */
.zones-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.zones-toolbar .search-input {
  flex: 1;
  min-width: 200px;
  margin-bottom: 0;
}
.filter-btn {
  padding: 6px 12px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 12px;
  color: var(--text-3);
  transition: all 0.2s;
}
.filter-btn.active,
.filter-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}

.zones-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
}
.zone-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  cursor: pointer;
  /* OASIS card standard: dropped transform+box-shadow transition (transform
     forces layer promotion + cascade when many cards mount; box-shadow .25s
     across many cards was hitting paint each hover). Border-color is cheap. */
  transition: border-color 0.18s, background-color 0.18s;
  position: relative;
  overflow: hidden;
  contain: layout paint style;
}
.zone-card.zc-type-drip {
  border-left-color: var(--type-drip);
}
.zone-card.zc-type-mist {
  border-left-color: var(--type-mist);
}
.zone-card.zc-type-sprinkler {
  border-left-color: var(--type-sprinkler);
}
.zone-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px var(--shadow);
}
.zone-card.zc-type-drip:hover {
  border-color: var(--type-drip);
}
.zone-card.zc-type-mist:hover {
  border-color: var(--type-mist);
}
.zone-card.zc-type-sprinkler:hover {
  border-color: var(--type-sprinkler);
}
/* ── Active card: Neon Pulse + Type-colored Beam ── */
.zone-card.active {
  --beam-c1: var(--zone-active);
  --beam-c2: #00ffaa;
  border-color: var(--zone-active);
  border-left-color: var(--zone-active);
  background: var(--zone-active-bg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: zoneActivePulse 3.5s ease-in-out infinite;
  overflow: hidden;
}
/* Type-specific beam colors */
.zone-card.active.zc-type-drip {
  --beam-c1: #00aaff;
  --beam-c2: #00ddff;
}
.zone-card.active.zc-type-sprinkler {
  --beam-c1: #00ff88;
  --beam-c2: #00cc66;
}
.zone-card.active.zc-type-mist {
  --beam-c1: #cc88ff;
  --beam-c2: #aa55ff;
}

/* Border Beam — glowing arc, type-colored, 2px wide */
.zone-card.active::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--beam-angle, 0deg),
    transparent 0deg,
    var(--beam-c1) 25deg,
    var(--beam-c2) 55deg,
    transparent 80deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 2px;
  animation: beamSpin 2.8s linear infinite;
  pointer-events: none;
  z-index: 1;
  opacity: 0.85;
}

@property --beam-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes beamSpin {
  to {
    --beam-angle: 360deg;
  }
}

/* Breathing glow — slow, elegant */
@keyframes zoneActivePulse {
  0%, 100% {
    box-shadow: 0 0 4px rgba(0, 170, 255, 0.1);
  }
  50% {
    box-shadow: 0 0 22px rgba(0, 170, 255, 0.2), 0 0 40px rgba(0, 170, 255, 0.06);
  }
}
.zone-card.error {
  border-color: var(--zone-error);
  border-left-color: var(--zone-error);
  background: var(--zone-error-bg);
}

.zone-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  gap: 6px;
}
.zone-card-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.zc-hdr-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.zone-card-led {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--zone-inactive);
  flex-shrink: 0;
}
.zone-card.active .zone-card-led {
  background: var(--zone-active);
  box-shadow: 0 0 8px var(--zone-active-glow), 0 0 16px var(--zone-active-glow);
  animation: ledBlink 2s ease-in-out infinite;
}
.zone-card.error .zone-card-led {
  background: var(--zone-error);
  box-shadow: 0 0 8px var(--zone-error-glow);
}
@keyframes ledBlink {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 8px var(--zone-active-glow), 0 0 18px var(--zone-active-glow);
  }
  50% {
    opacity: 0.5;
    box-shadow: 0 0 4px var(--zone-active-glow);
  }
}

.zc-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.zone-card-type {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.zone-card-esp {
  font-size: 10px;
  color: var(--text-3);
  font-weight: 500;
}
.zc-gph {
  font-size: 10px;
  color: var(--text-3);
}
.zone-card-timer {
  font-family: monospace;
  font-size: 18px;
  font-weight: 700;
  color: var(--zone-active);
  margin-top: 6px;
  text-shadow: 0 0 8px rgba(0, 170, 255, 0.5);
  letter-spacing: 0.5px;
}
.zc-stop-btn {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 6px 0;
  border: none;
  border-radius: 6px;
  background: var(--danger, #ef4444);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}
.zc-stop-btn:active {
  opacity: 0.7;
}

/* ── Zone card info rows ── */
.zc-info {
  margin-top: 7px;
  border-top: 1px solid var(--border);
  padding-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.zc-info-row {
  display: flex;
  align-items: center;
  gap: 5px;
}
.zc-info-icon {
  font-size: 11px;
  flex-shrink: 0;
  line-height: 1;
}
.zc-info-val {
  color: var(--text-2);
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zc-next-in {
  color: var(--accent);
  font-weight: 700;
}
.zc-none {
  color: var(--text-3);
  font-style: italic;
}
.zc-urg-ok {
  color: #22c55e;
  font-weight: 700;
}
.zc-urg-warn {
  color: #eab308;
  font-weight: 700;
}
.zc-urg-crit {
  color: #ef4444;
  font-weight: 700;
}
.zc-days-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.zc-days-row .zd-day-dot {
  width: 22px;
  height: 22px;
  font-size: 9px;
  font-weight: 800;
}
.zone-card-timer-paused {
  opacity: 0.4;
}
.zc-dome-badge {
  margin-top: 6px;
  font-size: 10px;
  font-weight: 700;
  color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: 6px;
  padding: 3px 8px;
  display: inline-block;
}

/* ── Pending ACK state ── */
.zone-card.pending-ack {
  border-color: #eab308;
  background: rgba(234, 179, 8, 0.08);
  animation: pendingPulse 1.5s infinite;
}
.zone-card.pending-ack .zone-card-led {
  background: #eab308;
  box-shadow: 0 0 8px rgba(234, 179, 8, 0.5);
  animation: ledBlink 0.7s infinite;
}
@keyframes pendingPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 transparent;
    border-color: #eab308;
  }
  50% {
    box-shadow: 0 0 12px rgba(234, 179, 8, 0.2);
    border-color: #ca8a04;
  }
}
.zone-card-pending {
  font-size: 11px;
  color: #eab308;
  margin-top: 4px;
  font-weight: 600;
  animation: pendingTextBlink 1.2s infinite;
}
.zone-card-failed {
  font-size: 11px;
  color: #ef4444;
  margin-top: 4px;
  font-weight: 600;
}
.zone-clear-failed {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 4px;
  padding: 2px 4px;
  transition: background 0.2s;
}
.zone-clear-failed:hover {
  background: #ef444420;
}
.zone-failed-x {
  font-size: 14px;
  opacity: 0.5;
  margin-left: 6px;
}
.zone-clear-failed:hover .zone-failed-x {
  opacity: 1;
}
@keyframes pendingTextBlink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Map SVG pending overlay */
.mz-pend {
  animation: mzPendPulse 1.5s infinite;
}
@keyframes mzPendPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}
.mp-pend-alert {
  border-bottom: none !important;
}

/* ============================================================
   VIEW: Interactive Map v2 — Professional
   ============================================================ */

/* When map view is active, fill remaining space inline (no fullscreen overlay) */
.app-content.m-active {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  max-width: none !important;
  background: #0b1017;
}

/* ── Compact header/clock/tabs when map is active ── */
.map-active .app-header {
  height: 36px;
  padding: 0 10px;
}
.map-active .header-logo-icon {
  font-size: 18px;
}
.map-active .header-logo img {
  height: 24px;
}
.map-active .header-title {
  font-size: 13px;
  letter-spacing: 1.5px;
}
.map-active .header-greeting {
  display: none;
}
.map-active .header-btn {
  width: 28px;
  height: 28px;
  font-size: 13px;
}
.map-active #btn-lang {
  font-size: 10px;
}
.map-active .header-status {
  margin-right: 4px;
}
.map-active .status-label {
  display: none;
}

.map-active .global-clock {
  height: 22px;
  padding: 0 10px;
  gap: 6px;
  border-bottom: none;
}
.map-active .retro-clock-time {
  font-size: 11px;
}
.map-active .retro-clock-ampm {
  font-size: 7px;
}
.map-active #retro-clock-date {
  font-size: 9px;
}
.map-active .rc-sub {
  display: none;
}
.map-active .rc-wk-bar {
  width: 30px;
}
.map-active .retro-clock-week-big {
  font-size: 11px;
}
.map-active .rc-wk-pct {
  font-size: 8px;
}
.map-active .rc-wk-lbl {
  font-size: 8px;
}

.map-active .top-tabs {
  padding: 0 8px;
}
.map-active .tab {
  padding: 5px 10px;
  font-size: 11px;
}
.map-active .tab-icon {
  font-size: 12px;
}

/* Desktop: hide redundant map back/nav (header + tabs already visible) */
@media (min-width: 1025px) {
  .m-active .m-back {
    display: none;
  }
  .m-active .m-nav {
    display: none;
  }
  .m-active .m-title {
    display: none;
  }
  .m-active .m-chip {
    display: none;
  }
}
/* Mobile: hide clock on map to save space */
@media (max-width: 768px) {
  .map-active .global-clock {
    display: none;
  }
}

/* Map floating clock overlay */
.map-clock-overlay {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 16;
  display: none;
  align-items: center;
  gap: 8px;
  /* Fondo SÓLIDO (sin backdrop-filter): el blur sobre el mapa en movimiento se
     recalcula cada frame y el navegador DROPEA la capa → el reloj/fecha "desaparecen"
     al mover (regla OASIS: nunca backdrop-filter sobre el mapa). */
  background: rgba(10, 12, 20, 0.96);
  border: 1px solid rgba(255, 180, 50, 0.2);
  border-radius: 20px;
  padding: 4px 16px;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.5),
    0 0 12px rgba(255, 180, 50, 0.06);
  pointer-events: none;
}
@media (min-width: 769px) {
  .map-clock-overlay {
    display: flex;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .map-clock-overlay {
    bottom: auto;
    top: 10px;
  }
}
.map-clock-time {
  font-family: "Courier New", monospace;
  font-size: 16px;
  font-weight: 900;
  color: #ffb432;
  text-shadow: 0 0 8px rgba(255, 180, 50, 0.5);
  letter-spacing: 1px;
}
.map-clock-sep {
  color: rgba(255, 255, 255, 0.2);
  font-weight: 900;
}
.map-clock-week {
  font-size: 11px;
  font-weight: 800;
  color: #00e5ff;
  text-shadow: 0 0 6px rgba(0, 229, 255, 0.4);
  letter-spacing: 0.5px;
}

/* ── Root container — fills ALL remaining space, split layout on desktop ── */
.m {
  position: relative;
  flex: 1;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: row;
}

/* ── Left side-panel (slide-in on mobile/tablet, fixed on desktop) ── */
.m-side {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 22;
  width: 300px;
  min-width: 260px;
  max-width: 360px;
  background: var(--bg-2);
  border-right: 1px solid var(--border);
  overflow: hidden;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  will-change: transform;
  backface-visibility: hidden;
  box-shadow: 4px 0 24px rgba(0,0,0,0.4);
}
.m-side.ms-open {
  transform: translateX(0);
}
.m-side .m-side-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.m-side.ms-collapsed {
  width: 44px !important;
  min-width: 44px;
}
.m-side.ms-collapsed .m-side-body {
  display: none;
}

/* ── Tab strip (icon buttons on the left edge) ── */
.ms-tabs {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 44px;
  min-width: 44px;
  flex-shrink: 0;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  padding: 4px 0;
}
.ms-tab {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-3);
  cursor: pointer;
  transition: all 0.15s;
  margin: 2px 0;
}
.ms-tab:hover {
  background: var(--accent-dim);
  color: var(--accent);
}
.ms-tab.ms-tab-active {
  background: var(--accent-dim);
  color: var(--accent);
}
.ms-tab-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  min-width: 15px;
  height: 15px;
  border-radius: 8px;
  padding: 0 3px;
  background: #ef4444;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  line-height: 15px;
  text-align: center;
  pointer-events: none;
}
.ms-tab-collapse {
  margin-top: auto;
  margin-bottom: 4px;
}

/* ── Panel content area ── */
.ms-panels {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 11px;
  display: flex;
  flex-direction: column;
}
.ms-panel-tab {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ms-tab-hidden {
  display: none !important;
}

/* Panel titles */
.ms-panel-title {
  display: flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-3);
  margin: 0 0 9px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border);
}

/* Node status chips */
.ms-node-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 11px;
}
.ms-node-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  border: 1px solid var(--border);
}
.ms-nc-on {
  background: rgba(0, 204, 136, 0.12);
  border-color: rgba(0, 204, 136, 0.35);
  color: #00cc88;
}
.ms-nc-off {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.35);
  color: #ef4444;
}
.ms-nc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.ms-nc-id {
  line-height: 1;
}

/* Stat cards (3-col grid) */
.ms-stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-bottom: 11px;
}
.ms-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 5px;
  text-align: center;
}
.ms-stat-accent {
  border-color: rgba(0, 212, 255, 0.35);
  background: rgba(0, 212, 255, 0.07);
}
.ms-stat-warn {
  border-color: rgba(255, 170, 68, 0.35);
  background: rgba(255, 170, 68, 0.07);
}
.ms-stat-ok {
  border-color: rgba(0, 204, 136, 0.35);
  background: rgba(0, 204, 136, 0.07);
}
.ms-stat-val {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-1);
  line-height: 1;
  display: block;
}
.ms-stat-lbl {
  font-size: 9px;
  color: var(--text-3);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
}
.ms-stat-denom {
  font-size: 12px;
  color: var(--text-3);
  font-weight: 600;
}

/* Info / description text */
.ms-info-txt {
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.5;
  margin-bottom: 7px;
}
.ms-info-accent {
  color: var(--accent);
  font-weight: 700;
}

/* Action buttons */
.ms-btn-row {
  display: flex;
  gap: 6px;
  margin-bottom: 7px;
}
.ms-action-btn {
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--text-2);
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
  display: block;
  margin-bottom: 5px;
}
.ms-action-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}
.ms-action-btn.ms-btn-accent {
  background: linear-gradient(135deg, var(--accent), #0088ff);
  color: #000;
  border-color: transparent;
  box-shadow: 0 2px 8px var(--accent-glow);
}
.ms-action-btn.ms-btn-accent:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
.ms-action-btn.ms-btn-green {
  background: linear-gradient(135deg, #00cc88, #00ff88);
  color: #000;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(0, 204, 136, 0.3);
}
.ms-action-btn.ms-btn-green:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
.ms-action-btn.ms-btn-warn {
  background: rgba(255, 170, 68, 0.12);
  color: #ffaa44;
  border-color: rgba(255, 170, 68, 0.3);
}
.ms-action-btn.ms-btn-warn:hover {
  background: rgba(255, 170, 68, 0.22);
}
.ms-action-btn.ms-btn-danger-outline {
  background: transparent;
  color: var(--zone-error);
  border-color: var(--zone-error);
}
.ms-action-btn.ms-btn-danger-outline:hover {
  background: rgba(239, 68, 68, 0.1);
}

/* Rain delay chip options */
.ms-rd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 9px;
}
.ms-rd-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  min-width: 48px;
  border: 1px solid var(--border);
  background: var(--bg-3);
  cursor: pointer;
  transition: all 0.15s;
  gap: 1px;
}
.ms-rd-chip:hover {
  border-color: var(--accent);
  background: rgba(0, 212, 255, 0.08);
}
.ms-rd-chip:hover .ms-rdc-val {
  color: var(--accent);
}
.ms-rdc-val {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-1);
  line-height: 1.1;
  display: block;
}
.ms-rdc-unit {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  display: block;
}

.m-side-hd {
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--bg-2), var(--bg-card));
}
.m-side-hd h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--text-1);
  letter-spacing: 0.3px;
}
.m-side-body {
  flex: 1;
  padding: 14px 16px;
  overflow-y: auto;
}
.m-side-section {
  margin-bottom: 14px;
}

/* Section headers */
.ms-sec-hd {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-3);
  margin: 0 0 8px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.ms-sec-icon {
  font-size: 13px;
}
.ms-sec-pulse {
  animation: mLed 1.5s infinite;
}

/* Stats row */
.m-side-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.m-side-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 0;
  font-size: 12px;
  color: var(--text-2);
}
.msc-stat {
  text-align: center;
  padding: 12px 8px;
}
.msc-stat .msc-val {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-1);
  line-height: 1;
}
.msc-stat .msc-label {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.msc-active .msc-val {
  color: var(--zone-active);
}
.msc-failing .msc-val {
  color: var(--text-3);
}
.msc-failing-active .msc-val {
  color: #ef4444;
}
.msc-missions .msc-val {
  color: var(--text-3);
}
.msc-missions-active .msc-val {
  color: #eab308;
}
.msc-vendidas .msc-val {
  color: #22c55e;
}
.msc-ipm .msc-val {
  color: #a855f7;
}
/* 4-col grid for inventory stats section */
.msc-qty .msc-val {
  color: #60a5fa;
}
#ms-inv-stats {
  grid-template-columns: 1fr 1fr;
}
.msc-clickable {
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.msc-clickable:hover {
  border-color: var(--text-3);
  background: var(--bg-hover);
}
/* ── KPI de lotes con problema (TREATMENT / MIXED / MISSING) ───────────── */
/* Una tarjeta POR problema: son tres cosas distintas que se arreglan de tres
   maneras distintas, y un numero combinado obliga a abrir el panel para saber
   de que se trata. */
.msc-prob .msc-label { font-size: 10px; }
.msc-prob-sub {
  font-size: 9px; color: var(--text-3); margin-top: 3px;
  letter-spacing: 0.2px; min-height: 11px;
}
.msc-prob-active { border-color: #f59e0b44; }

/* Panel: que campos tienen esos lotes */
.mprob-ov {
  position: fixed; inset: 0; z-index: 9000; display: flex;
  align-items: center; justify-content: center;
  background: rgba(3, 8, 18, 0.72); backdrop-filter: blur(3px);
}
.mprob-box {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 16px;
  width: min(440px, 94vw); max-height: 86vh; display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.mprob-hdr {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.mprob-title { font-weight: 800; font-size: 15px; flex: 1; color: var(--text-1); }
.mprob-close {
  background: none; border: none; color: var(--text-3);
  font-size: 24px; cursor: pointer; line-height: 1;
}
.mprob-legend {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  padding: 10px 16px 4px; font-size: 11px; font-weight: 700;
}
.mprob-leg {
  font-size: 11px; font-weight: 700; background: none;
  border: 1px solid; border-radius: 999px; padding: 3px 10px;
  cursor: pointer; font-family: inherit; opacity: 0.65;
  transition: opacity 0.15s, background 0.15s;
}
.mprob-leg:hover { opacity: 1; }
.mprob-leg-on { opacity: 1; background: var(--bg-hover); }
.mprob-sub {
  padding: 2px 16px 10px; font-size: 11px; color: var(--text-3); text-align: center;
}
.mprob-list { overflow: auto; padding: 0 10px 12px; }
.mprob-row {
  width: 100%; display: flex; align-items: center; gap: 10px;
  background: none; border: none; border-radius: 10px;
  padding: 10px 8px; cursor: pointer; font-family: inherit;
  border-bottom: 1px solid var(--border);
}
.mprob-row:hover { background: var(--bg-hover); }
.mprob-field { font-weight: 800; font-size: 13px; color: var(--text-1); min-width: 74px; text-align: left; }
.mprob-chips { flex: 1; display: flex; gap: 5px; flex-wrap: wrap; }
.mprob-chip {
  font-size: 11px; font-weight: 700; border: 1px solid; border-radius: 999px;
  padding: 1px 7px; white-space: nowrap;
}
.mprob-qty { font-size: 11px; color: var(--text-3); min-width: 52px; text-align: right; }
.mprob-empty { padding: 24px; text-align: center; color: var(--text-3); font-size: 12px; }

/* Deshierve KPI (campos por deshierbar) */
.msc-deshierve .msc-val {
  color: var(--text-3);
}
.msc-deshierve-active .msc-val {
  color: #84cc16;
}
/* ── Contador "% Riego de Hoy" (anillo + texto) ──────────────── */
.ms-today-irr {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding: 10px 14px;
}
.ms-tirr-ring {
  flex: 0 0 auto;
  transform: rotate(-90deg);
}
.ms-tirr-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.09);
  stroke-width: 4;
}
.ms-tirr-prog {
  fill: none;
  stroke: #38bdf8;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 119.4;
  stroke-dashoffset: 119.4;
  transition: stroke-dashoffset 0.6s cubic-bezier(0.22, 1, 0.36, 1), stroke 0.4s;
}
.ms-tirr-text {
  min-width: 0;
  line-height: 1.15;
}
.ms-tirr-pct {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-1);
}
.ms-tirr-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.ms-tirr-sub {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 1px;
}
/* KPI "RET hoy" — mismo formato que las otras tarjetas del grid, color dorado */
.msc-ret .msc-val { color: #f5b301; }
.ms-ret-sub { font-size: 11px; color: var(--text-3); margin-top: 7px; }
.ms-ret-sub b { color: var(--text-1); }
/* ── Inventory Chart Modal ───────────────────────────────────── */
.ms-inv-chart-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: all;
}
@media (min-width: 520px) {
  .ms-inv-chart-modal {
    align-items: center;
  }
}
.mchm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(3px);
}
.mchm-panel {
  position: relative;
  z-index: 1;
  background: var(--bg-panel, #111827);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px 16px 0 0;
  width: 100%;
  max-width: 440px;
  max-height: 90svh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 -4px 40px rgba(0,0,0,0.5);
  animation: mchm-slide-up 0.22s ease;
}
@media (min-width: 520px) {
  .mchm-panel {
    border-radius: 16px;
    box-shadow: 0 8px 60px rgba(0,0,0,0.55);
    animation: mchm-pop-in 0.2s ease;
    max-height: 90svh;
  }
}
@keyframes mchm-slide-up {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes mchm-pop-in {
  from { transform: scale(0.94); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
.mchm-header {
  padding: 16px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.mchm-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.mchm-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-1, #f1f5f9);
  letter-spacing: -0.2px;
}
.mchm-close {
  background: rgba(255,255,255,0.08);
  border: none;
  color: var(--text-3, #94a3b8);
  cursor: pointer;
  font-size: 14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.mchm-close:hover { background: rgba(255,255,255,0.15); }
.mchm-kpi-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.mchm-kpi {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.5px;
}
.mchm-delta {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.9;
}
.mchm-chart-wrap {
  padding: 12px 12px 14px;
  position: relative;
  min-height: 60px;
}
.mchm-chart-wrap svg {
  display: block;
  width: 100%;
  height: auto;
}
.mchm-no-data {
  font-size: 11px;
  color: var(--text-3, #94a3b8);
  text-align: center;
  padding: 8px 0 4px;
  opacity: 0.8;
}
.mchm-chart-mode {
  font-size: 10px;
  color: var(--text-3, #94a3b8);
  text-align: right;
  padding: 2px 4px 0;
  opacity: 0.6;
}
/* Chart: toggle de modo evento/tendencia */
.mchm-mode-toggle {
  display: inline-flex;
  gap: 2px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 2px;
  margin: 0 0 8px;
}
.mchm-mode-btn {
  background: none;
  border: none;
  color: var(--text-3, #94a3b8);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.mchm-mode-btn.mchm-mode-on {
  background: rgba(255, 255, 255, 0.14);
  color: var(--text-1, #f1f5f9);
}
/* Selector de periodo del historial (Semana / Mes / 6 Meses / Año) */
.mchm-period-toggle {
  display: flex;
  gap: 4px;
  margin: 0 0 8px;
}
.mchm-period-btn {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-3, #94a3b8);
  font-size: 11px;
  font-weight: 700;
  padding: 6px 4px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mchm-period-btn:hover { background: rgba(255, 255, 255, 0.09); }
.mchm-period-btn.mchm-period-on {
  background: rgba(96, 165, 250, 0.18);
  border-color: rgba(96, 165, 250, 0.5);
  color: var(--text-1, #f1f5f9);
}
.mchm-chart-svg {
  min-height: 60px;
}
.mchm-readout {
  font-size: 11px;
  color: var(--text-2, #cbd5e1);
  text-align: center;
  padding: 6px 4px 0;
  min-height: 16px;
  font-variant-numeric: tabular-nums;
}
/* Chart: puntos de info por evento (tappables) */
.mchm-dot { cursor: pointer; }
.mchm-dot-pt { transition: r 0.12s ease; }
/* Deshierve — filas de campos por deshierbar */
.mchm-desh-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.mchm-desh-meta {
  font-size: 11px;
  color: var(--text-3, #94a3b8);
  padding-left: 23px;
}
/* Top fields section */
.mchm-top-section {
  padding: 6px 0 8px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.mchm-top-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 6px 16px 4px;
}
.mchm-top-list { padding: 0; }
.mchm-top-row {
  display: block;
  width: 100%;
  padding: 6px 16px 8px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--text-1, #f1f5f9);
  transition: background 0.1s;
}
.mchm-top-row:hover { background: rgba(255,255,255,0.05); }
.mchm-top-info {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-bottom: 4px;
}
.mchm-top-rank {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3, #94a3b8);
  min-width: 16px;
  text-align: center;
}
.mchm-top-field {
  font-size: 13px;
  font-weight: 700;
  flex: 1;
}
.mchm-top-val {
  font-size: 12px;
  font-weight: 700;
}
.mchm-bar-bg {
  height: 3px;
  background: rgba(255,255,255,0.09);
  border-radius: 2px;
  overflow: hidden;
}
.mchm-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.45s cubic-bezier(0.22,1,0.36,1);
}
/* All-plants button */
.mchm-allplants-btn {
  display: block;
  width: calc(100% - 32px);
  margin: 4px 16px 14px;
  padding: 10px;
  background: rgba(34,197,94,0.1);
  border: 1px solid rgba(34,197,94,0.3);
  border-radius: 8px;
  color: #4ade80;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, border-color 0.15s;
}
.mchm-allplants-btn:hover { background: rgba(34,197,94,0.2); border-color: rgba(34,197,94,0.55); }
/* ── Header with add-history button ── */
.mchm-header-btns { display: flex; align-items: center; gap: 6px; }
.mchm-add-hist-btn {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 6px;
  color: var(--text-2, #cbd5e1);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.mchm-add-hist-btn:hover { background: rgba(255,255,255,0.14); }
/* ── Manual entry form ── */
.mchm-add-form {
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,0.07);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(0,0,0,0.2);
}
.mchm-af-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1, #f1f5f9);
  margin-bottom: 2px;
}
.mchm-af-hint {
  font-size: 11px;
  color: var(--text-3, #94a3b8);
  margin-bottom: 10px;
}
.mchm-af-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}
.mchm-af-label {
  font-size: 11px;
  color: var(--text-2, #cbd5e1);
  flex: 1;
  min-width: 0;
}
.mchm-af-input {
  width: 120px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 6px;
  color: var(--text-1, #f1f5f9);
  font-size: 12px;
  padding: 5px 8px;
  text-align: right;
}
.mchm-af-input:focus { outline: none; border-color: rgba(255,255,255,0.35); }
.mchm-af-btns { display: flex; gap: 8px; margin-top: 10px; }
.mchm-af-cancel {
  flex: 1;
  padding: 7px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 7px;
  color: var(--text-2, #cbd5e1);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.mchm-af-save {
  flex: 2;
  padding: 7px;
  background: rgba(96,165,250,0.18);
  border: 1px solid rgba(96,165,250,0.4);
  border-radius: 7px;
  color: #93c5fd;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.mchm-af-save:hover { background: rgba(96,165,250,0.3); }
.mchm-af-status { font-size: 11px; margin-top: 6px; min-height: 16px; }
/* ── Manual entries list ── */
.mchm-manual-list {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 6px 0;
}
.mchm-manual-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 16px;
}
.mchm-mr-date {
  font-size: 12px;
  color: var(--text-3, #94a3b8);
  flex: 1;
}
.mchm-mr-val {
  font-size: 12px;
  font-weight: 700;
}
.mchm-mr-del {
  background: none;
  border: none;
  font-size: 13px;
  cursor: pointer;
  opacity: 0.5;
  padding: 0 2px;
  line-height: 1;
}
.mchm-mr-del:hover { opacity: 1; }
/* Top-5 popup inside side panel (legacy — kept for any remaining references) */
.ms-inv-top-popup {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 6px 0 10px;
  overflow: hidden;
}
.ms-itp-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-1);
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
}
.ms-itp-close {
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  font-size: 13px;
  padding: 0 2px;
  line-height: 1;
}
.ms-itp-list {
  padding: 4px 0;
}
.ms-itp-row {
  display: block;
  width: 100%;
  padding: 6px 12px 8px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--text-1);
}
.ms-itp-row:hover {
  background: var(--bg-hover);
}
.ms-itp-top {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-bottom: 4px;
}
.ms-itp-rank {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
  min-width: 14px;
  text-align: center;
}
.ms-itp-field {
  font-size: 13px;
  font-weight: 700;
  flex: 1;
}
.ms-itp-val {
  font-size: 12px;
  font-weight: 700;
}
.ms-itp-bar {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
}
.ms-itp-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease;
}

/* Active zones sidebar list */
.ms-active-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  margin-bottom: 4px;
  background: rgba(0, 136, 255, 0.06);
  border: 1px solid rgba(0, 136, 255, 0.15);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--zone-color, var(--zone-active));
}
.ms-az-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--zone-color, var(--zone-active));
  box-shadow: 0 0 6px var(--zone-color, var(--zone-active));
  animation: mLed 1s infinite;
  flex-shrink: 0;
}
.ms-az-name {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ms-az-timer {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  font-family: "SF Mono", Consolas, monospace;
  background: rgba(0, 136, 255, 0.25);
  background: color-mix(in srgb, var(--zone-color, var(--zone-active)) 28%, transparent);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.5px;
  min-width: 52px;
  text-align: center;
}
.ms-empty {
  font-size: 12px;
  color: var(--text-3);
  padding: 8px 0;
  text-align: center;
}
/* Subgroup headers inside the "Irrigating Now" list (Hoop Houses / Fields) */
.ms-az-group {
  margin-bottom: 10px;
}
.ms-az-group:last-child {
  margin-bottom: 0;
}
.ms-az-group-hd {
  display: flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-3);
  margin: 0 0 5px 2px;
}
.ms-az-group-cnt {
  margin-left: auto;
  min-width: 16px;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  color: var(--text-3);
  background: var(--border);
  border-radius: 999px;
  padding: 0 6px;
  line-height: 16px;
}

/* Feature cards */
.ms-feat-card {
  padding: 12px !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ms-feat-status {
  font-size: 12px;
  color: var(--text-3);
}
.ms-status-on {
  color: var(--zone-active);
  font-weight: 700;
}
.ms-status-warn {
  color: var(--warning, #ffaa44);
}

/* Feature action buttons (premium) */
.ms-feat-btn {
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.ms-btn-accent {
  background: linear-gradient(135deg, var(--accent), #0088ff);
  color: #000;
  box-shadow: 0 2px 8px var(--accent-glow);
}
.ms-btn-accent:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 16px var(--accent-glow);
  transform: translateY(-1px);
}
.ms-btn-warn {
  background: rgba(255, 170, 68, 0.15);
  color: #ffaa44;
  border: 1px solid rgba(255, 170, 68, 0.3);
}
.ms-btn-warn:hover {
  background: rgba(255, 170, 68, 0.25);
}
.ms-btn-green {
  background: linear-gradient(135deg, #00cc88, #00ff88);
  color: #000;
  box-shadow: 0 2px 8px rgba(0, 204, 136, 0.3);
}
.ms-btn-green:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 16px rgba(0, 204, 136, 0.4);
  transform: translateY(-1px);
}

/* Rain delay chip buttons */
.ms-rd-btns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ms-rd-desc {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.5;
  margin-bottom: 4px;
}
.ms-rd-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.ms-rd-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  min-width: 56px;
  border: 1px solid var(--border);
  background: var(--bg-3);
  cursor: pointer;
  transition: all 0.15s;
  gap: 1px;
}
.ms-rd-opt:hover {
  border-color: var(--accent);
  background: rgba(0, 212, 255, 0.08);
}
.ms-rd-opt:hover .ms-rd-val {
  color: var(--accent);
}
.ms-rd-val {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-1);
  line-height: 1.1;
}
.ms-rd-unit {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
}
.ms-rd-off {
  color: var(--text-3);
  font-size: 12px;
}
.ms-rd-active-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(234, 179, 8, 0.08);
  border: 1px solid rgba(234, 179, 8, 0.25);
}
.ms-rd-active-icon {
  font-size: 24px;
}
.ms-rd-active-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ms-rd-active-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--zone-active);
}
.ms-rd-active-time {
  font-size: 12px;
  color: var(--text-2);
}
.ms-btn-danger-outline {
  margin-top: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--zone-error);
  background: transparent;
  color: var(--zone-error);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  width: 100%;
  text-align: center;
}
.ms-btn-danger-outline:hover {
  background: rgba(239, 68, 68, 0.12);
}
/* ── Pausa GLOBAL de riego — botón llamativo ── */
.ms-pause-card--active {
  border-color: rgba(239, 68, 68, 0.5) !important;
  background: rgba(239, 68, 68, 0.06);
}
.ms-pause-btn {
  margin-top: 8px;
  width: 100%;
  padding: 13px 14px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  border: none;
  transition: filter 0.15s, transform 0.05s;
  -webkit-tap-highlight-color: transparent;
}
.ms-pause-btn:active {
  transform: scale(0.98);
}
.ms-pause-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
/* OFF = riego corriendo → botón ROJO "PAUSAR" */
.ms-pause-btn--off {
  background: linear-gradient(180deg, #ef4444, #dc2626);
  color: #fff;
  box-shadow: 0 2px 10px rgba(239, 68, 68, 0.35);
}
.ms-pause-btn--off:hover {
  filter: brightness(1.08);
}
/* ON = riego pausado → botón VERDE "REANUDAR" */
.ms-pause-btn--on {
  background: linear-gradient(180deg, #22c55e, #16a34a);
  color: #fff;
  box-shadow: 0 2px 10px rgba(34, 197, 94, 0.35);
}
.ms-pause-btn--on:hover {
  filter: brightness(1.08);
}
.ms-pause-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  animation: msPausePulse 2s ease-in-out infinite;
}
.ms-pause-banner-ic {
  font-size: 18px;
}
.ms-pause-banner-txt {
  font-size: 12.5px;
  font-weight: 700;
  color: #ef4444;
  line-height: 1.3;
}
[data-theme="light"] .ms-pause-banner-txt {
  color: #dc2626;
}
@keyframes msPausePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.72; }
}
/* Pausa global dentro de la tarjeta de zona (mp-*) — mismo look que el lateral */
.mp-pause-btn{width:100%;padding:11px 12px;border-radius:10px;font-size:14px;font-weight:800;letter-spacing:.4px;cursor:pointer;border:none;transition:filter .15s,transform .05s;-webkit-tap-highlight-color:transparent}
.mp-pause-btn:active{transform:scale(.98)}
.mp-pause-btn:disabled{opacity:.6;cursor:default}
.mp-pause-btn--off{background:linear-gradient(180deg,#ef4444,#dc2626);color:#fff;box-shadow:0 2px 10px rgba(239,68,68,.35)}
.mp-pause-btn--off:hover{filter:brightness(1.08)}
.mp-pause-btn--on{background:linear-gradient(180deg,#22c55e,#16a34a);color:#fff;box-shadow:0 2px 10px rgba(34,197,94,.35)}
.mp-pause-btn--on:hover{filter:brightness(1.08)}
/* Fila Pausar + Detener (vista regando) */
.mp-stop-row{display:flex;gap:6px;margin:6px 0 4px}
.mp-stop-row .zd-act-btn{flex:1;margin:0}
.mp-pause-active-btn{background:linear-gradient(180deg,#f59e0b,#d97706);color:#fff;border:none;font-weight:800}
.mp-pause-active-btn:hover{filter:brightness(1.08)}
.mp-pause-active-btn:disabled{opacity:.6}
.mp-resume-active-btn{background:linear-gradient(180deg,#22c55e,#16a34a);color:#fff;border:none;font-weight:800}
.mp-resume-active-btn:hover{filter:brightness(1.08)}
.zd-banner-paused{background:rgba(245,158,11,.14);border:1px solid rgba(245,158,11,.35);color:#fbbf24;display:flex;align-items:center;justify-content:center;border-radius:8px;font-weight:800}
[data-theme="light"] .zd-banner-paused{color:#b45309}
.ms-ov-active-box {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ms-ov-detail {
  font-size: 12px;
  color: var(--text-2);
}
.ms-chip-btn {
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s;
}
.ms-chip-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}
.ms-chip-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.ms-chip-danger {
  border-color: var(--zone-error);
  color: var(--zone-error);
}
.ms-chip-danger:hover {
  background: var(--zone-error-bg);
}

/* ── Inline schedule form (side panel) ── */
.ms-add-btn {
  margin-left: auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--accent);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.ms-add-btn:hover {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
}
.ms-sched-btns {
  display: flex;
  gap: 6px;
}
.ms-inline-form {
  margin-top: 8px;
  padding: 12px !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--bg-card);
  animation: msFormIn 0.2s ease;
}
@keyframes msFormIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.ms-if-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1);
}
.ms-if-close {
  background: none;
  border: none;
  color: var(--text-3);
  font-size: 18px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}
.ms-if-close:hover {
  color: var(--zone-error);
}
.ms-if-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ms-if-field > label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ms-if-select {
  width: 100%;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--text-1);
  font-size: 12px;
  font-family: inherit;
}
/* Zone radio-button list */
.ms-zone-list {
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-3);
}
.ms-zone-list::-webkit-scrollbar {
  width: 5px;
}
.ms-zone-list::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
.ms-zl-group {
  padding: 0;
}
.ms-zl-group-hd {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 5px 10px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--accent);
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}
.ms-zl-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  cursor: pointer;
  transition: background 0.12s;
  font-size: 12px;
  color: var(--text-1);
}
.ms-zl-item:hover {
  background: rgba(0, 212, 255, 0.07);
}
.ms-zl-item input[type="radio"] {
  accent-color: var(--accent);
  margin: 0;
  flex-shrink: 0;
}
.ms-zl-item input[type="radio"]:checked ~ .ms-zl-name {
  color: var(--accent);
  font-weight: 700;
}
.ms-zl-icon {
  font-size: 13px;
  flex-shrink: 0;
}
.ms-zl-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ms-if-time {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ms-if-sep {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-2);
}
.ms-if-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-3);
}
.ms-if-stepper-wide {
  width: fit-content;
}
.ms-if-step-btn {
  width: 28px;
  height: 28px;
  min-width: 44px;
  min-height: 44px;
  border: none;
  background: transparent;
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ms-if-step-btn:hover {
  background: rgba(0, 212, 255, 0.1);
}
.ms-if-step-val {
  min-width: 28px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-1);
  font-family: "SF Mono", Consolas, monospace;
}
.ms-if-unit {
  font-size: 11px;
  color: var(--text-3);
  margin-left: 6px;
  font-weight: 600;
}
.ms-if-days {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.ms-if-day {
  width: 32px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s;
}
.ms-if-day:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.ms-if-day.active {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
}
.ms-if-submit {
  margin-top: 2px;
}

/* Duration h+m picker (shared across all forms) */
.ms-dur-hm {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ms-dur-lbl {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  min-width: 20px;
}
.ms-dur-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-3);
  width: fit-content;
}
.ms-dur-input {
  width: 38px;
  height: 34px;
  text-align: center;
  border: none;
  background: transparent;
  color: var(--text-1);
  font-size: 16px;
  font-weight: 700;
  outline: none;
  font-family: "SF Mono", Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.ms-dur-input:focus {
  background: rgba(0, 212, 255, 0.06);
}
.ms-dur-step {
  width: 32px;
  height: 34px;
  border: none;
  background: transparent;
  color: var(--accent);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.ms-dur-step:hover {
  background: rgba(0, 212, 255, 0.1);
}
.ms-dur-step:active {
  background: rgba(0, 212, 255, 0.2);
}

/* Compact tp-display variant for side panel */
.tp-display-sm {
  padding: 6px 10px;
}
.tp-display-sm .tp-time-show {
  font-size: 18px;
}

/* Prevent text selection during hold-repeat */
.tp-min-step,
.ms-dur-step,
.ms-if-step-btn {
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

/* ── Sidebar toggle button ── */
.ms-side-toggle {
  display: flex;
  position: absolute;
  top: 52px;
  left: 8px;
  z-index: 25;
  width: 42px;
  height: 42px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(var(--bg-2-rgb, 10, 14, 20), 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text-1);
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, background 0.15s;
}
.ms-side-toggle:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
}
.ms-side-toggle:active {
  transform: scale(0.92);
}
.ms-side-toggle.ms-active {
  transform: translateX(300px);
}
.ms-side-toggle.ms-active:active {
  transform: translateX(300px) scale(0.92);
}

/* ── Sidebar backdrop (mobile/tablet) ── */
.m-side-backdrop {
  position: absolute;
  inset: 0;
  z-index: 21;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.ms-backdrop-show {
  opacity: 1;
  pointer-events: all;
}
@media (min-width: 1025px) {
  .m-side-backdrop { display: none; }
}

/* ── Sidebar header (close btn) ── */
.m-side-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, var(--bg-2), var(--bg-card));
  flex-shrink: 0;
}
.m-side-hdr-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-1);
  letter-spacing: 0.3px;
}
.m-side-close {
  background: rgba(255,59,59,0.1);
  border: none;
  color: #ff3b3b;
  font-size: 26px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 10px;
  border-radius: var(--radius-sm);
  line-height: 1;
  transition: all 0.15s;
  text-shadow: 0 0 6px rgba(255,59,59,0.4);
}
.m-side-close:hover {
  background: rgba(255,59,59,0.2);
  color: #ff1a1a;
  text-shadow: 0 0 12px rgba(255,59,59,0.7);
}

/* ── Tablet (769–1024px): same slide-in as mobile ── */
@media (min-width: 769px) and (max-width: 1024px) {
  .m-side {
    width: 300px;
  }
}

/* ── Desktop (1025px+): sidebar always visible in flow ── */
@media (min-width: 1025px) {
  .ms-side-toggle {
    display: none;
  }
  .m-side-hdr {
    display: none;
  }
  .m-side {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    right: auto;
    display: flex;
    flex-direction: column;
    transform: none;
    box-shadow: none;
    will-change: auto;
  }
  .m-side .m-side-body {
    flex: 1;
    overflow-y: auto;
  }
}
@media (min-width: 1400px) {
  .m-side {
    width: 380px;
  }
}

/* ── Map wrapper — fills remaining space to the right ── */
.m-wrap {
  position: relative;
  flex: 1;
  overflow: hidden;
  /* Contexto de apilamiento propio: las capas del compositor del mapa (img/svg/
     labels/badges) NO se entremezclan con el header/nav. Si una capa grande falla
     al rasterizar, su negro queda confinado al rectángulo del mapa en vez de
     "leerse" hasta las pestañas (el chrome es el mismo #0b1017 → sin costura). No
     usar `contain:paint` aquí: #m-panel es position:fixed y quedaría recortado. */
  isolation: isolate;
  background: #0b1017;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none; /* prevents text selection mid-pinch on iOS/Android */
}
.m-wrap:active {
  cursor: grabbing;
}

/* ── Floating toolbar top-left ── */
.m-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 8px;
  background: transparent;
  pointer-events: auto;
}
@media (min-width: 769px) {
  .m-bar {
    gap: 8px;
    padding: 8px 12px;
  }
}
.m-bar-l {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}
.m-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.m-back:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--bg-card-hover);
}
.m-back:active {
  transform: scale(0.93);
}
.m-bar-r {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.m-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-1);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 768px) {
  .m-title {
    font-size: 12px;
    max-width: 80px;
  }
  .m-chip {
    display: none;
  }
  .m-btn-txt {
    display: none;
  }
  .m-zbtn {
    width: 28px;
    height: 28px;
  }
  .global-clock {
    height: 26px;
    padding: 0 10px;
    gap: 7px;
  }
  .rc-sep-wk {
    display: none;
  }
  .rc-week-row {
    display: none;
  }
  #retro-clock-sub {
    display: none;
  }
}
.m-chip {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--bg-3);
  color: var(--text-3);
  white-space: nowrap;
}
.m-chip-on {
  background: var(--zone-active-bg);
  color: var(--zone-active);
}

/* ── Map top nav icons ── */
.m-nav {
  display: flex;
  align-items: center;
  gap: 1px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-sm);
  padding: 2px;
}
.m-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 28px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 4px;
  border: none;
  background: transparent;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s;
  opacity: 0.55;
}
.m-nav-btn:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.08);
}
.m-nav-btn.m-nav-active {
  opacity: 1;
  background: rgba(0, 212, 255, 0.12);
}

/* ── Buttons ── */
.m-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  line-height: 1.3;
}
.m-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--bg-card-hover);
}
.m-btn:active {
  transform: scale(0.97);
}
.m-btn svg {
  flex-shrink: 0;
}
.m-btn-txt {
}
.m-btn-edit {
  border-color: var(--accent-dim);
  color: var(--accent);
}
/* Vista limpia: botón discreto (solo ícono) + estado activo */
.m-btn-clean {
  padding: 6px 8px;
}
.m-btn-clean svg {
  display: block;
}
.m-btn-clean.active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(var(--accent-rgb, 56, 189, 248), 0.14);
}
/* Toggle puramente CSS: oculta TODOS los overlays (polígonos, nodos, contornos
   ESP, lluvia, labels y badges), dejando solo la imagen del mapa (#m-img). No
   toca el render: las capas siguen en el DOM y reaparecen al instante. */
#imap.m-clean #m-svg,
#imap.m-clean #m-dsv,
#imap.m-clean #m-labels {
  display: none;
}
.m-btn-cy {
  border-color: var(--accent);
  color: var(--accent);
}
#m-draw-circle {
  border-radius: 50px;
  padding: 5px 13px;
  background: rgba(var(--accent-rgb, 56, 189, 248), 0.07);
  letter-spacing: 0.02em;
}
#m-draw-circle svg {
  drop-shadow: 0 0 4px var(--accent);
}
#m-draw-circle:hover {
  background: rgba(var(--accent-rgb, 56, 189, 248), 0.15);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 56, 189, 248), 0.25);
}
#m-draw-circle.m-active {
  background: rgba(var(--accent-rgb, 56, 189, 248), 0.18);
  box-shadow: 0 0 0 2px var(--accent);
}
.m-btn-gn {
  border-color: var(--online);
  color: var(--online);
}
.m-btn-gn:hover {
  background: rgba(0, 255, 136, 0.08);
}
.m-btn-rd {
  border-color: var(--zone-error);
  color: var(--zone-error);
}
.m-btn-rd:hover {
  background: rgba(255, 68, 68, 0.08);
}

/* ── Zoom group — floating top-right ── */
/* ── Map Navigation Control (D-pad + Zoom) ── */
/* Hide old zoom group if still present */
.m-zgrp {
  display: none;
}

/* ── Zoom level indicator ── */
.m-zlvl {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  background: rgba(var(--bg-2-rgb, 10, 14, 20), 0.85);
  border: 1px solid var(--border);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 10px;
  padding: 2px 10px;
  z-index: 12;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.m-zlvl.m-zlvl-show {
  opacity: 1;
}

/* ── Save map view button ── */
/* ── Edit bar — floating overlay below toolbar ── */
.m-ebar {
  position: absolute;
  top: 44px;
  left: 0;
  right: 0;
  z-index: 14;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(var(--bg-3-rgb, 20, 24, 32), 0.88);
  border-bottom: none;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 5px 12px;
  gap: 8px;
  flex-wrap: wrap;
}
.m-ebar[hidden] {
  display: none !important;
}
.m-ehint {
  font-size: 11px;
  color: var(--accent);
  font-weight: 500;
  flex: 1;
  margin: 0;
}
.m-ebtns {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

/* ── Viewport — sized by JS, transform for zoom/pan ── */
.m-vp {
  transform-origin: 0 0;
  /* NO permanent will-change. On mobile a permanent will-change:transform pins
     an oversized backing store (the layer is sized to the image's natural px,
     then scaled), which the GPU tiles and whose off-screen tiles it evicts —
     causing whole map sections to blank while panning and reappear on settle.
     will-change:transform is promoted ONLY during gestures via .m-vp--interact
     (promote-then-demote, per MDN). translateZ(0) keeps one managed layer for
     smooth panning; the browser can collapse/optimize it at rest. */
  transform: translateZ(0);
  backface-visibility: hidden;     /* prevents compositor layer flicker on iOS Safari / old Android */
  -webkit-backface-visibility: hidden;
}
/* Gesture-scoped layer promotion: full-fidelity transform layer only while the
   user is actively panning/zooming, demoted ~280ms after the last frame. */
.m-vp.m-vp--interact {
  will-change: transform;
}
.m-vp.m-smooth {
  transition: transform 0.22s cubic-bezier(0.33, 1, 0.68, 1);
}
/* Hide map viewport during orientation-change refit to prevent wrong-transform flicker */
.m-vp.map-refit {
  opacity: 0 !important;
  transition: none !important;
}

/* ── Background image ── */
.m-img {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
/* El ortomosaico HQ es un raster grande; sin capa propia se re-rasteriza al demotar
   la capa del SVG/viewport al soltar el zoom — el flash es PEOR al ALEJAR (más área
   visible). translateZ(0) lo mantiene como textura GPU cacheada y estable. SCOPED a
   desktop (hover:hover)+(pointer:fine), MISMO criterio que el anti-flash del #m-svg
   (más abajo): en móvil una 2ª capa image-sized dobla el backing-store y arriesga el
   blanqueo de tiles documentado. Validar en teléfono antes de ampliar a touch. */
@media (hover: hover) and (pointer: fine) {
  .m-img {
    transform: translateZ(0);
    /* will-change:transform QUITADO: con el ortho HQ real (8400×5545 = 46.6MP) esa
       capa "caliente" permanente pinea ~186MB (DPR1) a ~745MB (DPR2) de textura GPU
       que el compositor NO puede colapsar; en un zoom/pan agresivo revienta el
       presupuesto, desaloja la capa y pinta NEGRO. translateZ(0) deja UNA capa
       gestionada que el navegador SÍ puede degradar/colapsar en reposo. (Con tiles
       por defecto el #m-img va display:none; esto protege el camino de fallback.) */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    image-rendering: auto;
  }
}
/* LQIP: placeholder borroso del mapa REAL para el primer paint (en vez del mapa
   estático antiguo). Se quita la clase al entrar el HQ → transición suave a nítido. */
.m-img {
  transition: filter 0.3s ease;
}
.m-img--lqip {
  filter: blur(2.5px);
  transform: scale(1.02) translateZ(0); /* preview 480px: blur leve para suavizar el upscale */
}

/* ── Tap-to-zoom: foco en un polígono (F1) ── el seleccionado lleva BORDE BLANCO y un DESTELLO que
   recorre SU CONTORNO (no un glow de relleno): el trazo blanco destella (glow ceñido al borde +
   leve engrosamiento) al tocarlo y se asienta en un borde blanco fino. Ver la regla del trazo abajo. */
@media (max-width: 899px) {
  /* Móvil: las demás zonas se atenúan suave (spotlight) para que la elegida resalte. */
  .m-wrap.m-focus .mz:not(.mz--focus) {
    opacity: 0.45;
    transition: opacity 0.32s ease;
  }
}
/* Transición del zoom de foco y de la VUELTA: larga y elegante (glide suave). */
.m-vp.m-smooth-zoom { transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); }
/* Card de info durante el foco (desktop): más ancha y centrada verticalmente a la derecha,
   equilibrada con el field enfocado a la izquierda. Transición suave al aparecer/cambiar. */
.m-panel.m-panel--focus {
  width: 380px;
  top: 50%;
  bottom: auto;
  right: 20px;
  transform: translateY(-50%);
  max-height: 86dvh;
  transition: width 0.3s ease;
}
/* TABLET (769–1024px): card dockeada a la derecha pero con margen mayor y algo más
   angosta, para que el campo (mapa enfocado) quede bien distribuido a la izquierda y
   no la tape. Se acomoda sola al seleccionar un field. */
@media (min-width: 900px) and (max-width: 1024px) {
  .m-panel.m-panel--focus {
    width: 340px;
    right: 28px;
    max-height: 82dvh;
  }
}

/* ── Canvas de tiles (deep-zoom) ── fondo en #m-wrap, detrás del #m-vp (polígonos).
   Un solo bitmap = sin costuras entre tiles. Cubre el viewport; el motor dibuja
   siguiendo el transform de #m-vp para quedar alineado con el SVG. */
.m-tiles-cv {
  /* SOBREDIMENSIONADO: cubre el viewport + 25% a cada lado (coincide con TILE_OVERDRAW=0.25
     en map.js). #m-wrap (overflow:hidden) recorta el exceso. Durante un pan, el canvas se
     mueve por GPU (translate3d) revelando el margen ya dibujado → arrastre fluido sin negro. */
  position: absolute;
  left: -25%;
  top: -25%;
  width: 150%;
  height: 150%;
  pointer-events: none;
  z-index: 0;
  will-change: transform; /* el canvas se traslada con el pan — capa GPU estable (es chico) */
}

/* ── Empty state ── */
.m-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 40px;
}
.m-empty-lbl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-align: center;
  color: var(--text-3);
  padding: 32px;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  transition:
    border-color 0.2s,
    color 0.2s;
}
.m-empty-lbl:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.m-empty-t {
  font-size: 15px;
  color: var(--text-1);
  font-weight: 600;
}
.m-empty-s {
  font-size: 12px;
  color: var(--text-3);
}

/* ── SVG layers ── */
.m-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.m-dsv {
  pointer-events: none;
}

/* ── HTML labels overlay (spread across polygon area) ── */
.m-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  /* will-change:contents removed: it pinned a SECOND full-image-size layer at
     rest (alongside .m-vp), compounding the GPU memory pressure that drives
     tile eviction. The gesture-scoped `.m-vp--interact #m-labels` rule promotes
     it only while panning/zooming. */
  transform: translateZ(0);
}
.ml-zone {
  position: absolute;
  transform: scale(var(--lbl-scale, 1));
  transform-origin: center;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  overflow: visible;
  text-shadow:
    0 1px 4px rgba(0, 0, 0, 1),
    0 0 8px rgba(0, 0, 0, 0.8);
  transition: transform 0.2s ease-out;
}
@media (hover: hover) {
  .ml-hover {
    transform: scale(calc(var(--lbl-scale, 1) * 1.35)) !important;
    z-index: 10 !important;
  }
  .ml-hover .ml-name {
    background: rgba(0, 0, 0, 0.75);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  }
  .ml-hover .ml-timer {
    font-size: 15px;
    background: rgba(0, 0, 0, 0.75);
  }
}
.ml-name {
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.5px;
  white-space: nowrap;
  text-align: center;
  line-height: 1.2;
  background: rgba(0, 0, 0, 0.45);
  padding: 1px 5px;
  border-radius: 3px;
  max-width: none;
}
.ml-sm .ml-name {
  font-size: 7px;
  letter-spacing: 0.3px;
  padding: 0 3px;
}
.ml-timer {
  font-family: "SF Mono", Consolas, monospace;
  font-size: 13px;
  font-weight: 900;
  color: #fff;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.6);
  padding: 1px 6px;
  border-radius: 4px;
  text-shadow: none;
  line-height: 1.2;
}
.ml-status {
  font-size: 12px;
  line-height: 1;
}
.ml-meta {
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  line-height: 1;
  margin-top: 1px;
  background: rgba(0, 0, 0, 0.5);
  padding: 1px 4px;
  border-radius: 3px;
}
.ml-type-tag {
  font-size: 7px;
  font-weight: 800;
  padding: 1px 3px;
  border-radius: 3px;
  letter-spacing: 0.3px;
  line-height: 1;
}
.ml-urg {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.3px;
}
.ml-on .ml-name {
  color: #80d0ff;
}
.ml-fail .ml-name {
  color: #ff8888;
}
.ml-pend .ml-name {
  color: #fcd34d;
}
.ml-next {
  font-size: 8px;
  font-weight: 700;
  color: rgba(255, 255, 160, 0.95);
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.5);
  padding: 1px 4px;
  border-radius: 3px;
  text-shadow: none;
  line-height: 1.2;
  margin-top: 1px;
}
/* Narrow-tall zone labels (OH hoop houses) */
.ml-narrow {
  gap: 2px;
}
.ml-narrow .ml-name {
  font-size: 8px;
  padding: 1px 3px;
  letter-spacing: 0.3px;
}
.ml-narrow .ml-type-tag {
  font-size: 7px;
  padding: 1px 3px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 3px;
}
.ml-narrow .ml-urg {
  font-size: 10px;
  background: rgba(0, 0, 0, 0.55);
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 900;
}
.ml-narrow .ml-next {
  font-size: 6px;
  padding: 1px 3px;
}

/* ── Zone Badges ── */
.m-badges {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  transform: translateZ(0);
}
.zb-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 4px;
  pointer-events: auto;
  cursor: pointer;
  padding: 5px 9px;
  border-radius: 13px;
  /* Solid bg, NO backdrop-filter: blur over the map re-rasterizes the animated SVG
     patterns behind each badge every transform frame (header rule #2). Same fix already
     applied to .inv-fs-overlay (17679) and .m-wl-backdrop (19534). Higher alpha keeps
     contrast without the blur. */
  background: rgba(20, 24, 36, 0.93);
  border: 1px solid rgba(255,255,255,0.14);
  transform: scale(var(--badge-scale, 0.5)); /* counter-scale PARCIAL (--badge-scale, set en aTx): chico en mapa completo, crece moderado al acercar. transform-origin right top → anclado a la esquina */
  transform-origin: right top;
  transition: opacity 0.18s ease, filter 0.18s ease, transform 0.18s cubic-bezier(.2,.8,.3,1.2), background 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  z-index: 5;
  opacity: 0.92;
}
.zb-badge:hover, .zb-badge:active {
  opacity: 1;
  filter: brightness(1.12);
  transform: scale(calc(var(--badge-scale, 0.5) * 1.32)); /* hover/abierto: ~32% más grande que el reposo */
  background: rgba(24, 30, 44, 0.98);
  border-color: rgba(120, 200, 255, 0.55);
  box-shadow: 0 6px 22px rgba(0,0,0,0.6), 0 0 0 1px rgba(120,200,255,0.18);
  z-index: 30;
}
/* Abierto: el badge queda "activo" e iluminado mientras su panel está desplegado. */
.zb-badge.zb-open {
  opacity: 1;
  transform: scale(calc(var(--badge-scale, 0.5) * 1.32)); /* hover/abierto: ~32% más grande que el reposo */
  background: rgba(26, 33, 49, 0.99);
  border-color: rgba(120, 200, 255, 0.7);
  box-shadow: 0 6px 22px rgba(0,0,0,0.55), 0 0 0 1px rgba(120,200,255,0.3);
  z-index: 31;
}
.zb-desh {
  font-size: 13px;
  line-height: 1;
  filter: saturate(0.75) brightness(0.95);
}
.zb-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 9px;
  background: rgba(200, 64, 64, 0.9);
  color: rgba(255, 255, 255, 0.97);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1;
}
.zb-fail {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-size: 12.5px;
  color: rgba(230, 190, 70, 0.97);
  font-weight: 800;
  line-height: 1;
}

/* ── Capacidad en la esquina del polígono ─────────────────────────────────────
   El porcentaje va con los demás chips del badge, en la esquina superior
   derecha del campo. Antes había que abrir el panel para saber si a un campo le
   quedaba espacio — que es lo primero que uno se pregunta mirando el mapa. */
.zb-cap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 9px;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: var(--zbc-bg);
  color: var(--zbc-fg);
}
.zb-cap-ok    { --zbc-bg: rgba(34, 197, 94, 0.9);  --zbc-fg: #052e16; }
.zb-cap-tight { --zbc-bg: rgba(245, 158, 11, 0.92); --zbc-fg: #451a03; }
.zb-cap-over  { --zbc-bg: rgba(239, 68, 68, 0.92); --zbc-fg: #ffffff; }
.zb-cap-none  { --zbc-bg: rgba(100, 116, 139, 0.85); --zbc-fg: #f1f5f9; }
/* Deducido, no medido: el borde punteado lo dice sin gastar un renglón. */
.zb-cap-aprox { border: 1px dashed rgba(255, 255, 255, 0.75); }

/* ── El detalle, dentro del panel del badge ── */
.zb-capdet {
  margin-top: 4px;
  padding: 7px 8px;
  border-top: 1px solid var(--border, #334155);
  font-size: 11.5px;
  line-height: 1.4;
}
.zb-capdet-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.zb-capdet-n {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text, #e2e8f0);
  font-size: 12.5px;
}
.zb-capdet-sep { color: var(--text-muted, #94a3b8); }
.zb-capdet-lib {
  margin-left: auto;
  color: rgba(74, 222, 128, 0.95);
  font-weight: 700;
}
.zb-capdet-lib.neg { color: rgba(248, 113, 113, 0.97); }
.zb-capdet-foot { margin-top: 5px; }
.zb-capdet-season { color: var(--text-muted, #94a3b8); }
.zb-capdet-season b { color: var(--text, #e2e8f0); }
.zb-capdet-btn {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 7px;
  border: 1px solid var(--border, #334155);
  background: var(--bg-card, #1e293b);
  color: var(--text, #e2e8f0);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.zb-capdet-btn:hover { background: var(--bg-hover, #334155); }
.zb-capdet-btn + .zb-capdet-btn { margin-left: 4px; }
.zb-capdet-warn {
  margin-top: 5px;
  color: rgba(252, 211, 77, 0.95);
  font-size: 10.5px;
  line-height: 1.35;
}
/* El % junto a la cuenta de plantas, dentro del panel, toma el mismo color del
   semáforo — pero como TEXTO, no como pastilla: ahí ya hay fondo de tarjeta. */
.zb-val-sub.zb-cap-ok    { color: rgba(74, 222, 128, 0.95); }
.zb-val-sub.zb-cap-tight { color: rgba(252, 211, 77, 0.97); }
.zb-val-sub.zb-cap-over  { color: rgba(248, 113, 113, 0.97); }

/* ── A dónde aconseja Growing mover este lote ─────────────────────────────────
   Va pegado a la ubicación, no en columna propia: la tabla ya trae 8 columnas y
   en teléfono esconde una. Así se lee como lo que es — "de aquí, para allá". */
.inv-c-dest {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.5;
  white-space: nowrap;
  background: rgba(56, 189, 248, 0.16);
  color: #7dd3fc;
  border: 1px solid rgba(56, 189, 248, 0.32);
}
/* Alta = venta o sanidad de por medio. Se enciende, no se grita. */
.inv-c-dest.alta {
  background: rgba(245, 158, 11, 0.18);
  color: #fcd34d;
  border-color: rgba(245, 158, 11, 0.38);
}
/* Empate por nombre, sin código de artículo: puede no ser este lote exacto.
   El borde punteado y el "?" lo dicen sin gastar un renglón de explicación. */
.inv-c-dest.flojo { border-style: dashed; opacity: 0.82; }
/* El plan la manda ahí, pero la misión todavía no existe. Es una intención, no
   trabajo mandado, y se lee más callado que la misión de verdad. */
.inv-c-dest.plan {
  background: rgba(56, 189, 248, 0.08);
  border-style: dashed;
  opacity: 0.9;
}
/* Ya duerme donde debe. Verde y quieto: es lo único de esta columna que NO
   pide trabajo, y confundirlo con "sin decidir" mandaba a alguien a moverla. */
.inv-c-dest.queda {
  background: rgba(34, 197, 94, 0.15);
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.35);
}
/* Nadie ha decidido. Gris a propósito: no es una advertencia, es un hueco — y
   un hueco confesado se investiga, un verde falso se cree. */
.inv-c-dest.sin {
  background: rgba(148, 163, 184, 0.14);
  color: #cbd5e1;
  border-color: rgba(148, 163, 184, 0.3);
  font-weight: 700;
}
[data-theme="light"] .inv-c-dest.queda {
  background: #dcfce7; color: #15803d; border-color: #86efac;
}
[data-theme="light"] .inv-c-dest.sin {
  background: #f1f5f9; color: #475569; border-color: #cbd5e1;
}
[data-theme="light"] .inv-c-dest {
  background: #e0f2fe; color: #0369a1; border-color: #7dd3fc;
}
[data-theme="light"] .inv-c-dest.alta {
  background: #fef3c7; color: #92400e; border-color: #fcd34d;
}
/* El destino va DEBAJO de la ubicación, en todos los anchos.

   Antes sólo se apilaba en teléfono; en escritorio iba pegado dentro del mismo
   <span>, que es `white-space:nowrap` con `text-overflow:ellipsis`. Con una
   ubicación larga el destino se cortaba con puntos suspensivos o desaparecía
   entero — justo el dato que se viene a mirar.

   No es una novena columna: la rejilla ya tiene ocho y la novena le robaría
   ancho al nombre de la variedad, que es lo único que hay que poder leer
   completo. Apilado ocupa cero ancho y no se corta nunca. */
/* SOLO en las filas de datos. La cabecera usa la misma clase, y apilarla ponía
   la flecha de ordenar debajo del rótulo en vez de al lado. */
.inv-tbl-row:not(.inv-tbl-header) .inv-c-loc{display:flex;flex-direction:column;
  justify-content:center;align-items:flex-start;gap:1px}
.inv-c-sinplan{opacity:.5;font-weight:500}
.inv-c-loc-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.inv-c-dest { display: block; margin: 0; width: fit-content; max-width: 100%; }

/* ── Saltar a otra locación desde el encabezado ─────────────────────────────── */
.inv-fs-jump {
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 8px;
  border: 1px solid var(--border, #334155);
  background: var(--bg-card, #1e293b);
  color: var(--text, #e2e8f0);
  font-size: 12px;
  font-weight: 700;
  max-width: 210px;
  cursor: pointer;
}
.inv-fs-jump:hover { background: var(--bg-hover, #334155); }
@media (max-width: 640px) { .inv-fs-jump { max-width: 130px; font-size: 11px; } }

/* ── El destino en el formulario de misión ─────────────────────────────────── */
.inv-cm-dest { margin: 10px 0 2px; }
.inv-cm-dest-tip {
  margin: 0 0 6px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.45;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: var(--text, #e2e8f0);
}
.inv-cm-dest-tip b { color: #7dd3fc; }
[data-theme="light"] .inv-cm-dest-tip {
  background: #e0f2fe; border-color: #7dd3fc; color: #0c4a6e;
}
[data-theme="light"] .inv-cm-dest-tip b { color: #0369a1; }

/* A dónde va la planta, en la tarjeta de la misión. El origen ya estaba; el
   destino faltaba, así que el trabajador sabía de dónde sacarla y no a dónde
   llevarla. */
.mmc-dest {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 800;
  background: rgba(56, 189, 248, 0.16);
  color: #7dd3fc;
  border: 1px solid rgba(56, 189, 248, 0.32);
}
[data-theme="light"] .mmc-dest {
  background: #e0f2fe; color: #0369a1; border-color: #7dd3fc;
}

/* ── Las camas de un campo, sobre el mapa ─────────────────────────────────────
   Aparecen solo al acercarse. Discretas por diseño: contorno fino, letra gris,
   y el color solo se enciende donde algo está apretado. Un campo tranquilo
   tiene que verse como siempre. */
#m-beds { pointer-events: none; }
/* La cama entera recibe el toque, no solo su borde: `visiblePainted` con relleno
   transparente ya cuenta como pintado, pero se deja explícito porque de esto
   depende que abrir una letra funcione. */
.mb-bed { pointer-events: all; cursor: pointer; }
.mb-bed polygon { pointer-events: all; }
.mb-bed polygon {
  fill: var(--mb-fill, transparent);
  stroke: var(--mb-line, rgba(226, 232, 240, 0.34));
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;   /* la línea no engorda al acercar */
  transition: fill 0.12s ease;
}
.mb-bed:hover polygon { fill: var(--mb-hover, rgba(226, 232, 240, 0.14)); }
/* Que se note que se tocó, antes de que abra el panel. En el campo el dedo tapa
   la letra y sin esto no hay forma de saber si el toque entró. */
.mb-bed:active polygon { fill: var(--mb-hover, rgba(226, 232, 240, 0.28)); }
/* Las letras aparecen al entrar al campo, no de golpe. */
#m-beds > .mb-bed { animation: mbIn 0.18s ease both; }
@keyframes mbIn { from { opacity: 0; } to { opacity: 1; } }
.mb-l {
  fill: var(--mb-txt, rgba(241, 245, 249, 0.72));
  font-size: 13px;
  font-weight: 800;
  text-anchor: middle;
  dominant-baseline: middle;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.55);
  stroke-width: 2.4px;
  pointer-events: none;
  user-select: none;
}
.mb-p {
  fill: var(--mb-pct, rgba(203, 213, 225, 0.62));
  font-size: 9px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: middle;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.5);
  stroke-width: 2px;
  pointer-events: none;
  user-select: none;
}
/* Solo lo apretado se enciende. Verde deliberadamente ausente: si todo lo que
   va bien se pinta, nada resalta y el color deja de significar algo. */
.mb-tight { --mb-fill: rgba(245, 158, 11, 0.15); --mb-line: rgba(245, 158, 11, 0.5);
            --mb-pct: rgba(252, 211, 77, 0.95); }
.mb-over  { --mb-fill: rgba(239, 68, 68, 0.18);  --mb-line: rgba(239, 68, 68, 0.58);
            --mb-pct: rgba(248, 113, 113, 0.97); }
/* Una cama del campo VECINO, dibujada dentro de este polígono. Pasa en los pares
   siameses: OC52 y OC53 son un solo bloque de terreno trabajado como dos campos.
   El borde de puntos dice "esta mitad es del otro" sin gastar una etiqueta. */
.mb-otro polygon { stroke-dasharray: 2 3; }
.mb-otro .mb-l { font-style: italic; }

/* Vacía = espacio disponible. Se marca con línea punteada, no apagándola: es la
   respuesta a "dónde meto lo que sigue", no un hueco de datos. */
.mb-libre polygon { stroke-dasharray: 5 4; stroke: rgba(148, 163, 184, 0.4); }
.mb-libre .mb-l { fill: rgba(203, 213, 225, 0.5); }
/* Sin datos cargados todavía: se dibuja el contorno y ya, sin insinuar nada. */
.mb-sin polygon { stroke: rgba(148, 163, 184, 0.28); }

/* Planta que cayó en una letra que nadie dibujó. Se dice en el mapa: si se
   callara, esa planta desaparecería de la vista sin que nada avisara. */
.mb-huerf { pointer-events: none; }
.mb-huerf text {
  fill: #fcd34d; font-size: 9px; font-weight: 800;
  text-anchor: middle; dominant-baseline: middle;
  paint-order: stroke; stroke: rgba(0, 0, 0, 0.65); stroke-width: 2.4px;
}
[data-theme="light"] .mb-huerf text { fill: #92400e; stroke: rgba(255, 255, 255, 0.85); }

[data-theme="light"] .mb-bed polygon { --mb-line: rgba(51, 65, 85, 0.38); }
[data-theme="light"] .mb-bed:hover polygon { --mb-hover: rgba(15, 23, 42, 0.09); }
[data-theme="light"] .mb-l { fill: #1e293b; stroke: rgba(255, 255, 255, 0.8); }
[data-theme="light"] .mb-p { fill: #475569; stroke: rgba(255, 255, 255, 0.75); }
[data-theme="light"] .mb-tight { --mb-fill: rgba(245, 158, 11, 0.2); --mb-line: #b45309;
                                 --mb-pct: #92400e; }
[data-theme="light"] .mb-over  { --mb-fill: rgba(239, 68, 68, 0.2); --mb-line: #b91c1c;
                                 --mb-pct: #b91c1c; }

/* ── El editor de camas ───────────────────────────────────────────────────────
   Panel flotante sobre el mapa. No es un modal: hay que ver el campo mientras
   se ajusta, o los controles son a ciegas. */
.mbe {
  position: absolute;
  top: 12px; right: 12px;
  width: min(330px, calc(100vw - 24px));
  max-height: calc(100% - 24px);
  overflow: auto;
  z-index: 40;
  padding: 12px 13px 13px;
  border-radius: 14px;
  background: var(--bg-card, #1e293b);
  border: 1px solid var(--border, #334155);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  font-size: 12.5px;
  color: var(--text, #e2e8f0);
}
.mbe-hd { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin-bottom: 10px; }
.mbe-hd b { font-size: 14px; }
.mbe-sub { color: var(--text-muted, #94a3b8); font-size: 11px; flex: 1; }
.mbe-x {
  background: none; border: none; color: var(--text-muted, #94a3b8);
  font-size: 15px; cursor: pointer; padding: 0 3px; line-height: 1;
}
.mbe-x:hover { color: var(--text, #e2e8f0); }
.mbe-row { display: flex; align-items: center; gap: 6px; margin: 7px 0; flex-wrap: wrap; }
.mbe-row > label {
  width: 66px; flex-shrink: 0;
  color: var(--text-muted, #94a3b8); font-size: 11px; font-weight: 700;
}
.mbe-b {
  padding: 4px 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border, #334155);
  background: var(--bg, #0f172a); color: var(--text, #e2e8f0);
  font-size: 12px; font-weight: 700;
}
.mbe-b:hover { background: var(--bg-hover, #334155); }
.mbe-b.on { background: var(--accent, #38bdf8); color: #062736; border-color: transparent; }
.mbe-b-ok { background: #16a34a; border-color: transparent; color: #fff; }
.mbe-b-gh { background: transparent; color: var(--text-muted, #94a3b8); }
.mbe-b-warn { background: rgba(245, 158, 11, 0.18); border-color: rgba(245, 158, 11, 0.4); }
.mbe-b:disabled { opacity: 0.55; cursor: default; }
.mbe-in {
  flex: 1; min-width: 130px; padding: 5px 9px; border-radius: 8px;
  border: 1px solid var(--border, #334155);
  background: var(--bg, #0f172a); color: var(--text, #e2e8f0);
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em;
}
.mbe-hint { color: var(--text-muted, #94a3b8); font-size: 10.5px; line-height: 1.4; }
.mbe-hint-b { margin: 6px 0 9px; }
.mbe-hint code {
  background: var(--bg, #0f172a); padding: 0 4px; border-radius: 4px;
  font-size: 10.5px; letter-spacing: 0.05em;
}
.mbe-lista {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  gap: 4px; margin: 9px 0;
}
.mbe-cama {
  text-align: center; padding: 5px 3px; border-radius: 7px;
  background: var(--bg, #0f172a); border: 1px solid var(--border, #334155);
}
.mbe-cama b { display: block; font-size: 12px; }
.mbe-cama span {
  display: block; font-size: 10px; color: var(--text-muted, #94a3b8);
  font-variant-numeric: tabular-nums;
}
.mbe-acc { display: flex; gap: 7px; justify-content: flex-end; margin-top: 11px; }
.mbe-sep { height: 1px; background: var(--border, #334155); margin: 11px 0 9px; }
/* Camas que no caben con el reparto pedido. Va en ambar y no en rojo: no es un
   error, es la forma del campo — y tiene salida (menos columnas). */
.mbe-aviso {
  margin: 9px 0; padding: 8px 10px; border-radius: 8px;
  font-size: 11.5px; line-height: 1.45;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.38);
}
[data-theme="light"] .mbe-aviso { background: #fef3c7; border-color: #fcd34d; color: #78350f; }
.mbe-pill {
  padding: 3px 9px; border-radius: 8px; font-size: 11.5px; font-weight: 700;
  background: rgba(56, 189, 248, 0.16); color: #7dd3fc;
  border: 1px solid rgba(56, 189, 248, 0.32);
}
[data-theme="light"] .mbe-pill { background: #e0f2fe; color: #0369a1; border-color: #7dd3fc; }

/* ── El dibujo en curso, sobre el mapa ── */
.mbe-p polygon {
  fill: rgba(56, 189, 248, 0.1);
  stroke: rgba(56, 189, 248, 0.75);
  stroke-width: 1.3;
  vector-effect: non-scaling-stroke;
}
.mbe-p text {
  fill: #e0f2fe; font-size: 13px; font-weight: 800;
  text-anchor: middle; dominant-baseline: middle;
  paint-order: stroke; stroke: rgba(0, 0, 0, 0.6); stroke-width: 2.6px;
  pointer-events: none; user-select: none;
}
/* La manija de cada corte: DOS líneas encimadas. La gruesa transparente es la
   que se agarra — 2px en una tablet a pleno sol es inagarrable. La delgada es
   la que se ve. */
.mbe-hit {
  stroke: transparent;
  stroke-width: 22;
  vector-effect: non-scaling-stroke;
  cursor: grab;
}
.mbe-h {
  stroke: #fff;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  cursor: grab;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.8));
}
/* La visible no recibe eventos (la que se agarra es la gruesa de abajo), así que
   `:active` nunca aplicaría. El resalte viene de la clase que se pone en la capa
   mientras dura el arrastre. */
.mbe-hit:active { cursor: grabbing; }
/* La línea que separa las COLUMNAS. Más gruesa y en ámbar: es la división de
   fondo del campo — en un par siamés decide cuánto terreno le toca a cada uno,
   así que no se puede confundir con una línea de cama. */
.mbe-hc {
  stroke: #fbbf24;
  stroke-width: 3.5;
  stroke-dasharray: 7 4;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.85));
}
#m-beds-ed.arrastrando .mbe-hc { stroke: #fff; stroke-width: 4.5; }
[data-theme="light"] .mbe-hc { stroke: #b45309; }
#m-beds-ed.arrastrando .mbe-h { stroke: var(--accent, #38bdf8); stroke-width: 3; }
#m-beds-ed { pointer-events: none; }
#m-beds-ed .mbe-h, #m-beds-ed .mbe-hit { pointer-events: stroke; stroke-linecap: round; }
#m-beds-ed .mbe-p { pointer-events: auto; }
/* La visible no captura: la que recibe el dedo es la gruesa de abajo, y si las
   dos capturaran el `pointerdown` se dispararía dos veces. */
#m-beds-ed .mbe-h { pointer-events: none; }

[data-theme="light"] .mbe-p text { fill: #0c4a6e; stroke: rgba(255, 255, 255, 0.85); }
[data-theme="light"] .mbe-h { stroke: #0f172a; }
@media (max-width: 640px) {
  .mbe { top: auto; bottom: 8px; right: 8px; left: 8px; width: auto; max-height: 52%; }
}

/* ── Badge Quick-Actions Popup ── */
.zb-popup {
  background: var(--bg-card, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 12px;
  padding: 8px;
  min-width: 180px;
  max-width: 220px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
}
.zb-popup-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  padding: 0 4px;
}
.zb-popup-field {
  font-weight: 800;
  font-size: 14px;
  color: var(--text-1, #f1f5f9);
  letter-spacing: 0.3px;
}
.zb-popup-close {
  background: none;
  border: none;
  color: #ff3b3b;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-shadow: 0 0 6px rgba(255, 59, 59, 0.6);
  transition: all 0.15s;
}
.zb-popup-close:hover {
  background: rgba(255, 59, 59, 0.15);
  color: #ff1a1a;
  text-shadow: 0 0 10px rgba(255, 59, 59, 0.8);
}
.zb-popup-actions {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.zb-action {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-1, #f1f5f9);
  cursor: pointer;
  font-size: 12px;
  transition: background 0.12s;
  text-align: left;
}
.zb-action:hover {
  background: var(--hover, rgba(255,255,255,0.08));
}
.zb-action:active {
  background: var(--hover, rgba(255,255,255,0.14));
}
.zb-action-icon {
  font-size: 14px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.zb-action-text {
  flex: 1;
  font-weight: 600;
  font-size: 12.5px;
}
.zb-action-val {
  font-size: 16px;
  font-weight: 800;
  min-width: 32px;
  text-align: right;
  line-height: 1.1;
}
.zb-val-ok { color: #00ff6a; text-shadow: 0 0 6px rgba(0, 255, 106, 0.4); }
.zb-val-warn { color: #ffcc00; text-shadow: 0 0 6px rgba(255, 204, 0, 0.4); }
.zb-val-crit { color: #ff4444; text-shadow: 0 0 6px rgba(255, 68, 68, 0.4); }
.zb-val-muted { color: #7a8ba8; font-weight: 600; font-size: 14px; }
.zb-val-plants { color: #00d4ff; text-shadow: 0 0 8px rgba(0, 212, 255, 0.5); }
.zb-val-ipm { color: #bf5af2; text-shadow: 0 0 8px rgba(191, 90, 242, 0.5); }
.zb-val-sub {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-2, #cbd5e1);
  display: block;
  line-height: 1;
  margin-top: 2px;
  opacity: 0.85;
}
.zb-ipm {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-size: 12.5px;
  color: #d08cf8;
  text-shadow: 0 0 5px rgba(191, 90, 242, 0.6);
  font-weight: 800;
  line-height: 1;
}
.zb-action-plants {
  border-top: 1px solid var(--border, #334155);
  margin-top: 2px;
  padding-top: 4px;
}

/* Badge popup — IPM grouped sub-rows */
.zb-ipm-group {
  border-top: 1px solid var(--border, #334155);
  margin-top: 2px;
  padding-top: 2px;
}
.zb-ipm-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 0;
  font-size: 12px;
  font-weight: 700;
  color: #bf5af2;
}
.zb-action-sub {
  padding-left: 28px;
  font-size: 11.5px;
}
.zb-action-sub .zb-action-icon {
  font-size: 12px;
  width: 16px;
}
.zb-action-sub .zb-action-text {
  font-size: 11.5px;
  font-weight: 500;
}
.zb-action-sub .zb-action-val {
  font-size: 14px;
  font-weight: 700;
}

/* ── Panel de acciones que BROTA del badge (reemplaza la tarjeta flotante .zb-popup) ── */
/* Vive en screen-space (#m-wrap) para no escalar con el zoom del mapa. Crece desde el
   badge: transform-origin sigue al badge vía --zb-ox; un "stem" lo conecta visualmente. */
.zb-panel {
  position: absolute;
  z-index: 60;
  min-width: 204px;
  max-width: 232px;
  padding: 7px;
  border-radius: 14px;
  background: rgba(16, 20, 32, 0.97);
  border: 1px solid rgba(120, 200, 255, 0.28);
  box-shadow: 0 16px 44px rgba(0,0,0,0.62), 0 0 0 1px rgba(0,0,0,0.35);
  pointer-events: auto;
  transform-origin: var(--zb-ox, 100%) top;
  transform: scale(0.82) translateY(-6px);
  opacity: 0;
  transition: transform 0.2s cubic-bezier(.2,.9,.3,1.25), opacity 0.16s ease;
  will-change: transform, opacity;
}
.zb-panel.zb-panel-in { transform: scale(1) translateY(0); opacity: 1; }
/* Stem triangular que ata el panel a su badge */
.zb-panel::before {
  content: "";
  position: absolute;
  top: -5px;
  left: var(--zb-ox, 50%);
  width: 11px;
  height: 11px;
  margin-left: -6px;
  background: rgba(16, 20, 32, 0.97);
  border-left: 1px solid rgba(120, 200, 255, 0.28);
  border-top: 1px solid rgba(120, 200, 255, 0.28);
  transform: rotate(45deg);
  border-radius: 2px;
}
.zb-panel-hd {
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #cfe8ff;
  opacity: 0.9;
  padding: 3px 8px 7px;
}
.zb-panel-actions { display: flex; flex-direction: column; gap: 2px; }
.zb-panel .zb-action { border-radius: 9px; padding: 8px 9px; }
.zb-panel .zb-action:hover { background: rgba(120, 200, 255, 0.13); }
.zb-panel .zb-action:active { background: rgba(120, 200, 255, 0.2); }
/* Revelado escalonado de cada fila (--zb-i = índice) */
.zb-panel-in .zb-action {
  animation: zb-row-in 0.26s both;
  animation-delay: calc(var(--zb-i, 0) * 0.035s + 0.04s);
}
@keyframes zb-row-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .zb-panel { transition: opacity 0.12s ease; transform: none; }
  .zb-panel.zb-panel-in { transform: none; }
  .zb-panel-in .zb-action { animation: none; }
}

/* ── Zone elements ── */
.mz {
  cursor: pointer;
  pointer-events: auto;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.25s ease, filter 0.25s ease;
}
@media (hover: hover) {
  .mz:hover {
    transform: scale(1.06);
    filter: drop-shadow(0 0 6px rgba(0, 212, 255, 0.35));
  }
  .mz:not(.mz--focus):hover rect,
  .mz:not(.mz--focus):hover polygon,
  .mz:not(.mz--focus):hover circle {
    stroke-width: 2.5 !important; /* hover grueso de mouse; excluye el seleccionado (deja vivir su destello/borde blanco) */
  }
  .mz:active {
    transform: scale(1.03);
  }
  /* Active zones: NO scale on hover/touch */
  .mz-on:hover,
  .mz-on:active {
    transform: none !important;
  }
}
/* ── Campo REGANDO: GLOW lento (indicador ÚNICO — reemplaza las gotitas) ─────────
   Un campo activo se marca con un GLOW cian que late LENTO y suave EN EL SITIO (sin
   expandirse fuera del campo). Reemplaza por COMPLETO la lluvia (gotas) en TODOS los
   modos. CSS-only: reutiliza la 1ª capa de gotas (mz-d1, que el generador solo crea en
   zonas activas) como un contorno glow; oculta las capas 2 y 3. Costo: 1 elemento por
   zona activa con drop-shadow de radio FIJO + animación de OPACITY (compositor) → no
   re-rasteriza el blur por frame; muchísimo más barato que la lluvia. La línea sólida +
   el glow latiente = "este campo está regando". */
.mz-on rect[fill="url(#mz-d2)"], .mz-on polygon[fill="url(#mz-d2)"], .mz-on circle[fill="url(#mz-d2)"],
.mz-on rect[fill="url(#mz-d3)"], .mz-on polygon[fill="url(#mz-d3)"], .mz-on circle[fill="url(#mz-d3)"] {
  display: none; /* fuera las capas tupidas de lluvia */
}
.mz-on [fill="url(#mz-d1)"] {
  /* RELLENO del polígono en el MISMO tono cian (translúcido) → el campo regando se ve
     tintado, no solo el contorno. */
  fill: rgba(110, 222, 255, 0.30);
  stroke: rgba(110, 222, 255, 1);
  stroke-width: 3;
  vector-effect: non-scaling-stroke; /* línea constante en px de pantalla a cualquier zoom */
  /* SIN drop-shadow en el elemento ANIMADO: un filtro animado por opacity puede
     re-rasterizar el blur cada frame en SVG de gama baja (Android/iOS) — justo los
     equipos que el modo rápido (ahora default) protege. El "glow" sale del halo
     ESTÁTICO del grupo (.mz-on filter, abajo) + este relleno+línea cian que laten. */
  animation: mLiteGlow 3.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes mLiteGlow {
  /* Late LENTO y suave EN EL SITIO: SOLO opacity (cero expansión del diámetro). El min
     0.5 (no 0) hace que el RELLENO cian SIEMPRE marque la zona; el latido sube a 1. */
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}
.mz-on {
  /* Halo de glow CONSTANTE (no anima) — da el "glow" sin re-rasterizar (drop-shadow de
     radio fijo, GPU-composited, no recorta a alto zoom). Junto a la línea cian latiente
     de arriba y el color de relleno activo, marca la zona incluso cuando el latido se
     oculta (reduced-motion / zoom / off-view). Se quita en pan/zoom/off-view abajo. */
  filter: drop-shadow(0 0 6px rgba(90, 200, 255, 0.42));
  /* contain:paint removed: under the parent .m-vp transform it made the browser
     cull/skip painting whole contained zone subtrees mid-pan on mobile (zones
     vanishing then reappearing on settle), and forced an extra compositor layer
     per active zone that compounded GPU memory pressure → tile eviction. */
}
/* Estado activo del botón ⚡ Modo Ligero (mismo trato que el de vista limpia) */
.m-btn-lite.active {
  color: var(--accent);
  border-color: var(--accent);
}
/* Banner de sugerencia (una sola vez en dispositivos lentos) */
.m-lite-suggest {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 78px);
  transform: translateX(-50%) translateY(12px);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(92vw, 420px);
  padding: 12px 14px;
  background: var(--bg-2, #0c1118);
  border: 1px solid var(--border, #25303d);
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  font-size: 13px;
  color: var(--text-1, #e8eef5);
}
.m-lite-suggest.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.m-lite-suggest-txt { flex: 1; line-height: 1.3; }
.m-lite-suggest-btns { display: flex; gap: 6px; flex-shrink: 0; }
.m-lite-suggest button {
  border: none;
  border-radius: 9px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.m-lite-suggest-yes { background: var(--accent, #00a8ff); color: #00131f; }
.m-lite-suggest-no { background: rgba(255, 255, 255, 0.08); color: var(--text-2, #9fb0c0); }

/* During pan/zoom: pause CSS animations and drop Gaussian-blur SVG filter on active zones.
   pauseAnimations() handles SMIL on patternTransform; this kills the remaining flicker
   sources (CSS opacity pulse + filter="url(#ga)") that compete with the viewport transform. */
.m-svg.m-svg--interact .mz-on rect,
.m-svg.m-svg--interact .mz-on polygon,
.m-svg.m-svg--interact .mz-on circle {
  animation-play-state: paused;
}
/* SVG filter attr beats CSS without !important on some browsers (Samsung Internet); force it */
.m-svg.m-svg--interact .mz-on polygon[filter] {
  filter: none !important;
}
.m-svg.m-svg--interact .mz-on {
  filter: none !important;
}
/* Hide rain pattern overlays entirely during ZOOM only — the user-space pattern tiles
   are the dominant compositor cost during zoom-out (more tiles visible = more rasterization).
   On a pure PAN (m-svg--interact without m-svg--zooming) the drops stay visible but frozen
   (pauseAnimations), so dragging the map no longer makes them vanish & pop back.
   They come back 280ms after the last frame from a stable state. */
.m-svg.m-svg--zooming .mz-on polygon[fill^="url(#mz-d"],
.m-svg.m-svg--zooming .mz-on rect[fill^="url(#mz-d"],
.m-svg.m-svg--zooming .mz-on circle[fill^="url(#mz-d"] {
  visibility: hidden;
}
/* Sprint 5: off-viewport active zones skip rain + glow + CSS pulse permanently.
   When 5+ zones are irrigating but only 2-3 are on-screen at the current pan/zoom,
   this drops compositor work to roughly the visible-zones budget. */
.mz-on.mz-off-view polygon[fill^="url(#mz-d"],
.mz-on.mz-off-view rect[fill^="url(#mz-d"],
.mz-on.mz-off-view circle[fill^="url(#mz-d"] {
  visibility: hidden;
}
.mz-on.mz-off-view polygon[filter],
.mz-on.mz-off-view rect[filter],
.mz-on.mz-off-view circle[filter] {
  filter: none !important;
}
.mz-on.mz-off-view {
  filter: none !important;
}
.mz-on.mz-off-view rect,
.mz-on.mz-off-view polygon,
.mz-on.mz-off-view circle {
  animation-play-state: paused;
}
/* Sprint 5b: reduced-motion users get a static (no rain, no glow, no pulse) map */
@media (prefers-reduced-motion: reduce) {
  .mz-on polygon[fill^="url(#mz-d"],
  .mz-on rect[fill^="url(#mz-d"],
  .mz-on circle[fill^="url(#mz-d"] {
    visibility: hidden;
  }
  .mz-on polygon[filter],
  .mz-on rect[filter],
  .mz-on circle[filter] {
    filter: none !important;
  }
  .mz-on { filter: none !important; }
  .mz-on rect, .mz-on polygon, .mz-on circle {
    animation: none !important;
  }
}
/* Kill label transform transitions during interaction — 51 zones animating their scale
   simultaneously when --lbl-scale updates was costing ~15ms/frame on zoom changes.
   Instant scale during gestures; transitions resume on idle. */
.m-vp.m-vp--interact .ml-zone,
.m-vp.m-vp--interact .zb-badge {
  /* Counter-scale continuo escribe --lbl-scale cada frame; sin esto los badges
     animarían su transform en cada frame del zoom (laggy). Instantáneo en gesto. */
  transition: none !important;
}
/* Cada label como CAPA PROPIA durante el gesto → el counter-scale (--lbl-scale cambia cada
   frame al hacer zoom) lo aplica el COMPOSITOR escalando el bitmap cacheado, en vez de
   RE-RASTERIZAR el texto+sombra por frame = eso era el "flicker un poco" de los textos al
   zoom. Gesture-scoped (promote-then-demote): al asentar se demota y re-rasteriza nítido 1
   vez. Post-tiles hay holgura de GPU (la imagen de 46MP ya no es una capa DOM). */
.m-vp.m-vp--interact .ml-zone {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.m-vp.m-vp--interact #m-badges {
  will-change: transform; /* capa propia del overlay de badges durante el gesto */
}
.m-vp.m-vp--interact #m-labels {
  /* `contents` is non-standard and ignored by engines (it also used to pin a
     second full-image-size layer at rest). Only the transform changes during a
     gesture, so hint transform only. */
  will-change: transform;
}

/* ── Crisp zone borders at all zoom levels ──────────────────────────────────
   The SVG lives inside the #m-vp scale transform, so a plain stroke balloons at
   high zoom (a 2.5px border becomes ~30px at 12×) and goes hairline at low zoom.
   non-scaling-stroke keeps every zone border a constant device-px width =
   crisp and consistent at any zoom. Applies to zone boundary shapes only — NOT
   the edit-handle vertices (.m-vtx) or node markers (.mn), which keep scaling. */
.m-svg g.mz polygon,
.m-svg g.mz line,
.m-svg g.mz rect,
.m-svg g.mz circle:not(.m-vtx) {
  vector-effect: non-scaling-stroke;
}

/* Seleccionado (tap → .mz--focus): BORDE BLANCO + DESTELLO sobre el propio CONTORNO. El trazo se
   pone blanco, destella (glow ceñido + leve engrosamiento) y se asienta en un borde blanco fino.
   SIN !important en stroke-width para que la animación pueda variarlo (el :hover grueso se excluye
   con :not(.mz--focus) más abajo). Las reglas (specificity 0,2,2) ganan sobre el attr inline. */
@keyframes mzFocusEdge {
  0%   { stroke-width: 0.6; filter: drop-shadow(0 0 0.5px rgba(255, 255, 255, 0.5)); }
  25%  { stroke-width: 1.4; filter: drop-shadow(0 0 4px rgba(255, 255, 255, 1)); }
  100% { stroke-width: 0.6; filter: drop-shadow(0 0 1.2px rgba(255, 255, 255, 0.6)); }
}
.m-svg g.mz--focus polygon,
.m-svg g.mz--focus line,
.m-svg g.mz--focus rect,
.m-svg g.mz--focus circle:not(.m-vtx) {
  stroke: #fff;                                            /* BORDE BLANCO */
  stroke-width: 0.6;                                       /* fino en reposo (la animación lo pulsa) */
  filter: drop-shadow(0 0 1.2px rgba(255, 255, 255, 0.6)); /* glow CEÑIDO al contorno (no de relleno) */
  animation: mzFocusEdge 0.6s ease-out;                    /* destello sobre el contorno al seleccionar */
}
/* El indicador de RIEGO persiste aunque la zona esté SELECCIONADA: el borde blanco +
   destello se quedan en la forma BASE del polígono; el relleno + glow cian del riego
   siguen en la capa d1. Una zona regando y seleccionada muestra AMBOS (borde blanco =
   seleccionada, relleno cian latiente = regando). Especificidad (0,3,1) gana a la regla
   .mz--focus de arriba (0,2,2), así que d1 NO se pinta de blanco ni corre mzFocusEdge. */
.m-svg g.mz--focus [fill="url(#mz-d1)"] {
  fill: rgba(110, 222, 255, 0.30);
  stroke: rgba(110, 222, 255, 1);
  stroke-width: 3;
  filter: none;                                    /* no el drop-shadow blanco del focus */
  animation: mLiteGlow 3.6s ease-in-out infinite;  /* mantiene el latido del riego */
}

/* ── Anti-flash on zoom (desktop only) ──────────────────────────────────────
   The #m-svg is vector content nested inside the #m-vp `transform: scale(...)`,
   so the browser RE-RASTERIZES ~54 polygons from vectors every zoom frame =
   the "polygons flash while zooming" symptom (worsened by preserveAspectRatio
   "none" anisotropic raster). Promoting #m-svg to its own compositor layer
   DURING the gesture makes the parent scale transform a cached bitmap instead
   (bitmap-cheap, no flash); removing the class on settle demotes the layer and
   forces ONE crisp re-raster at the final scale.
   SCOPED to (hover:hover)+(pointer:fine) = desktop/trackpad on purpose: on a
   phone this second ~image-sized layer doubles an already-oversized backing
   store and risks the documented mobile tile-eviction/blanking, so touch
   devices keep the current proven behavior until tested on real hardware.
   Excludes m-svg--covered (panel over the map = not a real gesture). */
@media (hover: hover) and (pointer: fine) {
  .m-svg.m-svg--interact:not(.m-svg--covered) {
    will-change: transform;
    transform: translateZ(0);
  }
}
/* Glide de foco/desenfoque (tap-to-zoom y cierre de tarjeta): promueve #m-svg a su capa
   GPU DURANTE el glide discreto de 500ms en TODOS los dispositivos (el JS gatea: la clase
   m-svg--glide NO se pone en equipos ≤2GB). A diferencia de la regla de arriba (gestos
   continuos, solo desktop), aquí es seguro en táctil porque el glide es corto y no carga
   tiles en paralelo → el zoom de reversa anima un bitmap cacheado en vez de re-rasterizar
   los polígonos = sin jank. Se demota al quitar la clase (re-raster nítido al asentar). */
.m-svg.m-svg--glide:not(.m-svg--covered) {
  will-change: transform;
  transform: translateZ(0);
}

/* LED indicator — slower rhythm with halo */
.m-led {
  animation: mLed 2s ease-in-out infinite;
}
@keyframes mLed {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.m-vtx {
  cursor: move;
  transition: r 0.12s;
}
.m-vtx:hover {
  r: 4; /* ultra pequeño en reposo (r=2.4 en el builder) → precisión de colocación; crece poco al hover */
}

/* ── Node dot styles (.mn) ── */
.mn {
  cursor: default;
}
.mn-edit {
  cursor: grab;
}
.mn-drag {
  cursor: grab;
}
.mn:hover circle:not(.mn-drag) {
  filter: brightness(1.2);
}
@keyframes mn-pulse {
  0%,
  100% {
    opacity: 0.07;
    r: 17;
  }
  50% {
    opacity: 0.18;
    r: 22;
  }
}
.mn-pls {
  animation: mn-pulse 2s ease-in-out infinite;
  transform-origin: center;
}

/* ── Node tooltip (.mn-tt) ── */
.mn-tt {
  position: absolute;
  z-index: 120;
  background: rgba(14, 18, 28, 0.97);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 13px;
  min-width: 200px;
  max-width: 240px;
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  pointer-events: none;
  font-size: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.mn-tt-hd {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.mn-tt-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mn-tt-id {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-1);
  letter-spacing: 0.5px;
}
.mn-tt-lbl {
  font-size: 11px;
  color: var(--text-3);
  flex: 1;
}
.mn-tt-stat {
  font-size: 11px;
  font-weight: 600;
  margin-left: auto;
  white-space: nowrap;
}
.mn-tt-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mn-tt-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  gap: 8px;
}
.mn-tt-row span:first-child {
  color: var(--text-3);
  white-space: nowrap;
}
.mn-tt-row span:last-child {
  color: var(--text-1);
  text-align: right;
  font-weight: 500;
}

/* ── Place-node button in edit bar ── */
.m-btn-pu {
  background: rgba(147, 51, 234, 0.18);
  border-color: rgba(147, 51, 234, 0.5);
  color: #c084fc;
}
.m-btn-pu:hover {
  background: rgba(147, 51, 234, 0.32);
  border-color: #c084fc;
}

/* ── Minimap ── */
.m-mini {
  display: none;
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 15;
  width: 120px;
  height: 80px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px;
  opacity: 0.8;
  transition: opacity 0.2s;
  box-shadow: 0 2px 8px var(--shadow);
}
.m-mini:hover {
  opacity: 1;
}
.m-mini svg {
  width: 100%;
  height: 100%;
}

/* ── Detail panel — fixed overlay (no scroll drift) ── */
.m-panel {
  position: fixed;
  top: 8px;
  right: 8px;
  width: 280px;
  max-height: calc(100dvh - 16px);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: 0 4px 24px var(--shadow);
  z-index: 20;
  animation: mSlide 0.2s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  /* Fondo SÓLIDO (sin backdrop-filter): sobre el mapa en movimiento el blur se
     recalcula por frame y parpadea/dropea. Regla OASIS: nunca backdrop sobre el mapa. */
  background: rgba(var(--bg-2-rgb, 10, 14, 20), 0.97);
}
@keyframes mSlide {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Móvil: la tarjeta del campo es un BOTTOM-SHEET ──────────────────────────────
   En vez de tapar el mapa desde arriba-derecha, sube desde abajo (~46dvh) con
   esquinas redondeadas y un handle de arrastre. focusZone (map.js) descuenta su
   alto y encuadra el campo en la franja superior libre → se ve el campo Y la
   tarjeta a la vez. Mismo breakpoint (900px) que el `desktop` de focusZone. */
@media (max-width: 899px) {
  /* .m-panel.m-panel (especificidad 0,2,0) para ganarle a los bloques .m-panel viejos de
     @media max-width:768px (l.~11168) y tablet (l.~11229) que van más abajo en el archivo y,
     a igual especificidad, recortaban el sheet a max-height:60vh + bottom:var(--bnav-h). */
  .m-panel.m-panel,
  .m-panel.m-panel--focus {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    /* Alto FIJO (86dvh); translateY controla cuánto SE VE. Reposo = 52% oculto →
       se ve ~41dvh (parcial, NO completa). El drag (JS, _setSheetY) lo mueve y queda
       donde lo dejes; arrastrar al fondo lo oculta. La transición da el snap suave;
       .mp-sheet-drag la quita para que siga el dedo al instante. */
    height: 86dvh;
    max-height: 86dvh;
    border-radius: 18px 18px 0 0;
    border-bottom: none;
    padding-top: 22px; /* más compacta: menos aire arriba (antes 26px) */
    /* Con el sheet expandido a full, su borde inferior toca el borde físico de la
       pantalla: sin esto el último botón del formulario (deshierbe) queda pegado a
       la barra de gestos de iOS/Android. */
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5);
    /* Prefijo -webkit explícito: iOS Safari es más fiable disparando transitionend
       y componiendo en GPU cuando ambos (estándar + webkit) están presentes. */
    -webkit-transform: translateY(52%);
    transform: translateY(52%);
    -webkit-transition: -webkit-transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
    animation: mSheetUp 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
    /* will-change NO permanente: en iOS un will-change:transform fijo mantiene la
       capa promovida indefinidamente y a veces la "congela" (la card deja de
       responder al siguiente gesto / no se desliza). Lo activamos SOLO durante el
       arrastre (.mp-sheet-drag, abajo). */
    will-change: auto;
    touch-action: pan-y; /* el CONTENIDO scrollea; el header (abajo) arrastra el sheet */
    cursor: default;
  }
  /* El header es la zona de arrastre del sheet (no scrollea, mueve el sheet) */
  .m-panel-hd {
    touch-action: none;
    cursor: grab;
  }
  .m-panel.mp-sheet-drag {
    transition: none;
    will-change: transform; /* capa GPU solo mientras el dedo arrastra */
  }
  /* Handle de arrastre — afordancia de bottom-sheet MÁS visible y agarrable (grip
     más ancho + zona de toque amplia). El header entero arrastra (touch-action:none). */
  .m-panel::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 6px;
    border-radius: 3px;
    background: var(--text-1, #fff);
    opacity: 0.55;
    pointer-events: none;
  }
  /* Zona de agarre ampliada por encima del grip visible (sin cambiar el look): más
     área para iniciar el arrastre de subir/esconder la hoja. */
  .m-panel-hd {
    padding-top: 4px;
    min-height: 40px;
  }
  /* Card un poco más compacta en móvil: menos padding lateral en el cuerpo. */
  .m-panel-bd { padding-left: 12px; padding-right: 12px; }
}
@keyframes mSheetUp {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(52%);
  }
}

.m-panel-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.m-panel-id {
  font-weight: 700;
  color: var(--text-1);
  font-size: 15px;
}
.m-panel-tp {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.m-panel-hd {
  cursor: grab;
  user-select: none;
}
.m-panel-hd:active {
  cursor: grabbing;
}
.m-panel-x {
  margin-left: auto;
  background: rgba(255, 59, 59, 0.1);
  border: none;
  color: #ff3b3b;
  font-size: 28px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 10px;
  border-radius: 8px;
  transition: all 0.15s;
  line-height: 1;
  text-shadow: 0 0 6px rgba(255, 59, 59, 0.4);
}
.m-panel-x:hover {
  background: rgba(255, 59, 59, 0.2);
  color: #ff1a1a;
  text-shadow: 0 0 12px rgba(255, 59, 59, 0.7);
}
.m-panel.mp-dragging {
  transition: none !important;
  animation: none !important;
}

.mp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-3);
  padding: 5px 0;
  border-bottom: 1px solid var(--border-light);
}
.mp-row:last-child {
  border-bottom: none;
}
.mp-v {
  color: var(--text-1);
  font-weight: 600;
}
.mp-timer {
  font-family: "SF Mono", Consolas, monospace;
  font-size: 17px;
  color: var(--zone-active);
}

.mp-act {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  text-align: center;
  border: 1px solid;
  transition: all 0.15s;
}

/* ── Panel stats bar (indicators at the very top — equal columns) ── */
.mp-stats-bar {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 3px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.mp-desh-worker {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -2px 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.mp-dw-icon { font-size: 13px; line-height: 1; }
.mp-dw-lbl { color: var(--text-3); }
.mp-dw-name { color: var(--text-1); font-weight: 700; }
.mp-si {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 7px 3px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.13s;
  text-align: center;
  font: inherit;
  min-width: 0;
}
.mp-si:hover { background: rgba(255,255,255,0.08); }
.mp-si-icon { font-size: 16px; line-height: 1; }
.mp-si-val {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-1);
  line-height: 1.3;
  white-space: nowrap;
}
.mp-si-sub { font-size: 10px; color: var(--text-2); font-weight: 600; }
.mp-si-lbl {
  font-size: 9px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.mp-si-ok  { border-color: rgba(34,197,94,0.3); }
.mp-si-warn { border-color: rgba(234,179,8,0.35); }
.mp-si-warn .mp-si-val { color: #eab308; }
.mp-si-crit { border-color: rgba(239,68,68,0.35); }
.mp-si-crit .mp-si-val { color: #ef4444; }
.mp-si-ipm { border-color: rgba(167,139,250,0.35); }
.mp-si-ipm .mp-si-val { color: #a78bfa; }

/* ── Panel compact info rows ── */
.mp-info {
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.mp-info-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border-bottom: 1px solid var(--border);
}
.mp-info-row:last-child { border-bottom: none; }
.mp-info-link { cursor: pointer; }
.mp-info-link:hover { background: rgba(255,255,255,0.05); }
.mp-info-lbl {
  flex-shrink: 0;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
  min-width: 80px;
  letter-spacing: 0.1px;
}
.mp-info-val {
  flex: 1;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 600;
  min-width: 0;
}
.mp-info-chevron { color: var(--text-3); font-size: 15px; flex-shrink: 0; }
.mp-info-days { display: flex; gap: 3px; }
.mp-day-dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border);
  font-size: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3); font-weight: 700;
}
.mp-day-on { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
/* Días programados a TODO EL ANCHO — grid 7 columnas, táctil (Samsung/iPhone) */
.mp-days-block { margin-top: 8px; }
.mp-days-block .mp-info-lbl { display: block; margin-bottom: 6px; }
.mp-days-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  width: 100%;
}
.mp-days-strip .mp-day-dot {
  width: 100%;
  height: 34px;
  border-radius: 9px;
  font-size: 11px;
  -webkit-tap-highlight-color: transparent;
  /* Ahora es <button> (tocable → hoja del día): reset de estilos de botón */
  background: transparent;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  transition: border-color .15s, transform .05s;
}
.mp-days-strip .mp-day-dot:active { transform: scale(.94); }
.mp-days-strip .mp-day-on { background: var(--accent-dim); }
/* HOY (weekday Pacific): anillo resaltado */
.mp-days-strip .mp-day-today {
  box-shadow: 0 0 0 2px var(--accent);
  font-weight: 800;
}
/* Día con riego CANCELADO (skip para esa fecha): tachado rojo suave */
.mp-days-strip .mp-day-skipped {
  background: rgba(239,68,68,.14);
  border-color: rgba(239,68,68,.45);
  color: #fca5a5;
  text-decoration: line-through;
}
[data-theme="light"] .mp-days-strip .mp-day-skipped { color: #dc2626; }
/* ── Hoja/overlay ligero de la card (día programado, duración hoy) ── */
.qsov { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; }
.qsov-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.qsov-box {
  position: relative; width: min(92vw, 360px); max-height: 80dvh; overflow-y: auto;
  background: var(--bg-card, #101826); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5); padding: 0 0 12px;
  animation: qsovIn .18s ease;
}
@keyframes qsovIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.qsov-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px 8px; }
.qsov-title { font-size: 15px; font-weight: 800; color: var(--text-1); }
.qsov-today-chip { font-size: 10px; font-weight: 800; background: var(--accent); color: #fff; border-radius: 8px; padding: 1px 7px; vertical-align: middle; }
.qsov-x { background: transparent; border: none; color: var(--text-2); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; }
.qsov-bd { padding: 0 14px; }
.qsov-sub { font-size: 12px; font-weight: 700; color: var(--text-2); margin-bottom: 6px; }
.qsov-row { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--text-1); padding: 6px 8px; border-radius: 8px; background: var(--bg-2); margin-bottom: 4px; }
.qsov-row--extra { border: 1px dashed rgba(56,189,248,.4); }
.qsov-row em { font-style: normal; font-size: 10px; color: #7dd3fc; font-weight: 700; }
.qsov-empty { font-size: 13px; color: var(--text-3); padding: 10px 4px; text-align: center; }
.qsov-note { font-size: 12px; font-weight: 700; border-radius: 8px; padding: 7px 10px; margin-top: 8px; }
.qsov-note--skip { color: #fca5a5; background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3); }
.qsov-actions { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.qsov-btn {
  width: 100%; padding: 10px 12px; border-radius: 10px; font-size: 13px; font-weight: 700;
  border: 1px solid var(--border); background: var(--bg-2); color: var(--text-1); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.qsov-btn:hover { border-color: var(--accent); }
.qsov-btn--danger { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.4); color: #fca5a5; }
.qsov-btn--ok { background: linear-gradient(180deg,#22c55e,#16a34a); border: none; color: #fff; font-weight: 800; }
[data-theme="light"] .qsov-btn--danger { color: #dc2626; }
.qsov-hint { font-size: 11px; color: var(--text-3); margin-top: 9px; line-height: 1.4; }
/* Stepper de duración del modal */
.qsov-dur-ctl { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.qsov-dur-lbl { font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.qsov-dur-step { display: inline-flex; align-items: center; gap: 6px; }
.qsov-dur-btn { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-2); color: var(--text-1); font-size: 17px; font-weight: 800; cursor: pointer; }
.qsov-dur-btn:active { transform: scale(.94); }
.qsov-dur-input { width: 58px; height: 32px; text-align: center; font-size: 15px; font-weight: 800; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-2); color: var(--accent); }
.qsov-dur-unit { font-size: 12px; color: var(--text-3); font-weight: 700; }
/* ── Acciones rápidas del próximo riego (posponer / hoy no / duración) ── */
.mp-qs { margin-top: 10px; }
.mp-qs-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mp-qs-btn {
  padding: 9px 6px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-1);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s, border-color .15s;
}
.mp-qs-btn:hover { background: var(--bg-3); border-color: var(--accent); }
.mp-qs-btn:active { transform: scale(.97); }
.mp-qs-btn:disabled { opacity: .45; cursor: default; }
.mp-qs-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mp-qs-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700;
  padding: 4px 9px; border-radius: 14px;
}
.mp-qs-chip--postp { background: rgba(56,189,248,.12); color: #7dd3fc; border: 1px solid rgba(56,189,248,.3); }
.mp-qs-chip--skip  { background: rgba(239,68,68,.12);  color: #fca5a5; border: 1px solid rgba(239,68,68,.3); }
.mp-qs-chip--dur   { background: rgba(34,197,94,.12);  color: #86efac; border: 1px solid rgba(34,197,94,.3); }
.mp-qs-undo {
  background: transparent; border: none; color: inherit; cursor: pointer;
  font-size: 12px; font-weight: 800; opacity: .8; padding: 0 2px;
  -webkit-tap-highlight-color: transparent;
}
.mp-qs-undo:hover { opacity: 1; }
.mp-qs-offline {
  margin-top: 8px; font-size: 11px; font-weight: 600;
  color: #fbbf24; background: rgba(245,158,11,.1);
  border: 1px solid rgba(245,158,11,.28); border-radius: 8px; padding: 6px 9px;
}
[data-theme="light"] .mp-qs-chip--postp { color: #0284c7; }
[data-theme="light"] .mp-qs-chip--skip { color: #dc2626; }
[data-theme="light"] .mp-qs-chip--dur { color: #16a34a; }
/* Stepper de rounds de hoy (+/−) */
.mp-rounds-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.mp-rounds-lbl { font-size: 12px; font-weight: 700; color: var(--text-2); }
.mp-rounds-step { display: inline-flex; align-items: center; gap: 10px; }
.mp-rounds-btn {
  width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-2); color: var(--text-1);
  font-size: 18px; font-weight: 800; cursor: pointer; line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.mp-rounds-btn:hover { border-color: var(--accent); }
.mp-rounds-btn:active { transform: scale(.94); }
.mp-rounds-btn:disabled { opacity: .4; cursor: default; }
.mp-rounds-n { font-size: 15px; font-weight: 800; min-width: 18px; text-align: center; color: var(--accent); }
/* Banner de zona en pausa (estado dominante) */
.mp-zone-paused-banner {
  margin-top: 10px; padding: 9px 12px; border-radius: 9px;
  font-size: 12.5px; font-weight: 800; text-align: center;
  color: #86efac; background: rgba(34,197,94,.1);
  border: 1px solid rgba(34,197,94,.3);
}
[data-theme="light"] .mp-zone-paused-banner { color: #16a34a; }

/* ── Top primary buttons (Ver Plantas + Deshierve) ── */
.mp-top-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 8px;
}
.mp-top-btn {
  padding: 11px 8px;
  font-size: 13px;
  font-weight: 800;
  border-radius: 10px;
  border: 1.5px solid;
  cursor: pointer;
  transition: all 0.14s;
  text-align: center;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.2px;
}
.mp-top-btn-plants {
  color: #22c55e;
  border-color: rgba(34,197,94,0.45);
  background: rgba(34,197,94,0.09);
}
.mp-top-btn-plants:hover { background: rgba(34,197,94,0.18); }
.mp-top-btn-desh {
  color: #4ade80;
  border-color: rgba(74,222,128,0.45);
  background: rgba(74,222,128,0.07);
}
.mp-top-btn-desh:hover { background: rgba(74,222,128,0.15); }

/* ── IPM action row ── */
.mp-ipm-row {
  display: flex;
  gap: 3px;
  margin: 5px 0;
}
.mp-ipm-btn {
  flex: 1;
  padding: 9px 5px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.13s;
  text-align: center;
  line-height: 1.3;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mp-ipm-btn:hover { filter: brightness(1.2); }
/* Individual button colors */
.mp-ipm-report {
  color: #fbbf24;
  border-color: rgba(251,191,36,0.45);
  background: rgba(251,191,36,0.1);
}
.mp-ipm-apply {
  color: #c4b5fd;
  border-color: rgba(196,181,253,0.45);
  background: rgba(196,181,253,0.1);
}
.mp-ipm-hist {
  color: #93c5fd;
  border-color: rgba(147,197,253,0.45);
  background: rgba(147,197,253,0.1);
}
.mp-ipm-cancel {
  flex: 0 0 auto;
  padding: 9px 9px;
  color: #fca5a5;
  border-color: rgba(252,165,165,0.45);
  background: rgba(252,165,165,0.1);
}
.mp-ipm-sched {
  color: var(--accent);
  border-color: rgba(0,212,255,0.45);
  background: rgba(0,212,255,0.08);
  font-size: 12px;
  font-weight: 700;
  padding: 8px 6px;
}

.mp-dur {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 12px;
}
.mp-d {
  padding: 12px 6px;
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}
.mp-d:hover {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
}
.mp-d:active {
  transform: scale(0.95);
}
.mp-custom-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 6px;
  grid-column: 1 / -1;
  flex-wrap: wrap;
}
.mp-custom-row .ms-dur-hm {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.mp-custom-row .ms-dur-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}
.mp-custom-row .ms-dur-input {
  width: 32px;
  text-align: center;
  padding: 6px 2px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-1);
}
.mp-custom-row .ms-dur-lbl {
  font-size: 11px;
  color: var(--text-3);
  margin: 0 2px;
}
.mp-custom-row .ms-dur-step {
  padding: 4px 6px;
  font-size: 14px;
  min-width: 28px;
  border: none;
  background: transparent;
  color: var(--accent);
}
#mp-custom-go {
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
#mp-custom-go:hover {
  background: var(--accent);
  color: #fff;
}

/* ── Enhanced panel sections ── */
.mp-section {
  margin-bottom: 10px;
}
.mp-section:last-of-type {
  margin-bottom: 4px;
}
.mp-section-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding-bottom: 4px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--border-light);
}
.mp-grp-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}
.mp-urg-ok {
  color: #22c55e !important;
}
.mp-urg-warn {
  color: #eab308 !important;
}
.mp-urg-crit {
  color: #ef4444 !important;
}

/* ── Map panel compact card overrides ── */
.m-panel .zd-summary {
  gap: 4px;
  margin-bottom: 8px;
}
.m-panel .zd-sum-card {
  padding: 8px 10px;
  gap: 10px;
}
.m-panel .zd-sum-icon {
  font-size: 18px;
}
.m-panel .zd-sum-label {
  font-size: 11px;
}
.m-panel .zd-sum-value {
  font-size: 14px;
}
.m-panel .zd-day-dot {
  width: 26px;
  height: 26px;
  font-size: 10px;
}
.m-panel .zd-status-banner {
  margin-bottom: 6px;
}
.m-panel .zd-act-btn {
  padding: 10px 8px;
  font-size: 13px;
}
.m-panel .zd-expand-btn {
  padding: 9px;
  font-size: 13px;
}
.m-panel .zd-detail-group {
  margin-bottom: 8px;
}
.m-panel .zd-detail-title {
  font-size: 11px;
}
.m-panel .zd-row {
  padding: 4px 0;
  font-size: 11px;
}
.m-panel .zd-sched-item {
  font-size: 11px;
  padding: 4px 0;
}

/* ── Legend (positioned inside the map area) ── */
.m-leg {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  padding: 4px 12px;
  background: rgba(var(--bg-2-rgb, 10, 14, 20), 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 10px;
  color: var(--text-3);
  z-index: 12;
  white-space: nowrap;
}
.m-leg-g {
  display: flex;
  align-items: center;
  gap: 6px;
}
.m-li {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.m-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.m-leg-bar {
  width: 1px;
  height: 12px;
  background: var(--border);
}
.m-leg-pill {
  font-size: 8px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 4px;
  letter-spacing: 0.4px;
  line-height: 1;
}

/* ============================================================
   VIEW: ESP Nodes
   ============================================================ */
.esp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.esp-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  transition: all 0.2s;
}
.esp-card.online {
  border-left: 3px solid var(--online);
}
.esp-card.offline {
  border-left: 3px solid var(--offline);
}
.esp-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.esp-card-id {
  background: var(--accent);
  color: #000;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}
.esp-card-label {
  font-weight: 600;
  color: var(--text-1);
  font-size: 14px;
}
.esp-rename-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  padding: 2px 4px;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.esp-rename-btn:hover {
  opacity: 1;
}
.esp-card-status {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
}
.esp-card-status.online {
  color: var(--online);
}
.esp-card-status.offline {
  color: var(--offline);
}
.esp-detail {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-3);
  padding: 3px 0;
}
.esp-detail-val {
  color: var(--text-2);
  font-weight: 500;
}
/* Node health warning banners (rtc_extended / tls_error) */
.esp-warn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #eab308;
  background: rgba(234, 179, 8, 0.12);
  border: 1px solid rgba(234, 179, 8, 0.35);
  border-radius: 6px;
  padding: 4px 8px;
  margin: 4px 0 6px;
  cursor: help;
}
.esp-warn-red {
  color: #f87171;
  background: rgba(248, 113, 113, 0.12);
  border-color: rgba(248, 113, 113, 0.35);
}
/* Signal bars — removed: using Unicode block chars instead */

/* ── ESP View Header ── */
.esp-view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 10px;
}
.esp-view-header h2 {
  font-size: 16px;
  color: var(--text-1);
  margin: 0;
}
.esp-summary {
  display: flex;
  gap: 14px;
  font-size: 13px;
  font-weight: 700;
}
.esp-sum-online {
  color: var(--online);
}
.esp-sum-offline {
  color: var(--offline);
}

/* ── Conectar Nodos Section ── */
.esp-conn-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  overflow: hidden;
}
.esp-conn-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  color: var(--accent);
  user-select: none;
  transition: background 0.15s;
}
.esp-conn-hd:hover {
  background: rgba(0, 212, 255, 0.04);
}
.esp-conn-arrow {
  font-size: 16px;
}
.esp-conn-body {
  padding: 0 16px 16px;
}
.esp-conn-intro {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.6;
  margin-bottom: 16px;
  padding: 10px 12px;
  background: var(--bg-3);
  border-radius: var(--radius-sm);
}
.esp-conn-intro code {
  color: var(--accent);
  font-size: 12px;
  background: rgba(0, 212, 255, 0.08);
  padding: 1px 5px;
  border-radius: 3px;
}
.esp-conn-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.esp-conn-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
}
.esp-conn-step p {
  margin: 2px 0 0;
  color: var(--text-3);
  font-size: 12px;
}
.esp-conn-step code {
  color: var(--accent);
  font-size: 11px;
  background: rgba(0, 212, 255, 0.08);
  padding: 1px 5px;
  border-radius: 3px;
}
.esp-conn-step strong {
  color: var(--text-1);
}
.esp-conn-step-num {
  min-width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #000;
  font-weight: 800;
  font-size: 13px;
  border-radius: 50%;
  flex-shrink: 0;
}
.esp-conn-subtitle {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 8px;
}
.esp-conn-table-wrap {
  margin-bottom: 16px;
  overflow-x: auto;
}
.esp-conn-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.esp-conn-table th {
  text-align: left;
  padding: 8px 10px;
  background: var(--bg-3);
  color: var(--text-3);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.esp-conn-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-light, rgba(255, 255, 255, 0.04));
  color: var(--text-2);
}
.esp-conn-table tr:hover td {
  background: rgba(0, 212, 255, 0.02);
}
.esp-conn-node-id {
  background: var(--accent);
  color: #000;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
}
.esp-conn-zones-cell {
  font-size: 11px;
  color: var(--text-3);
  max-width: 260px;
}
.esp-conn-trouble {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.esp-conn-tip {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.5;
  padding: 8px 12px;
  background: var(--bg-3);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
}
.esp-conn-tip strong {
  color: var(--text-1);
}

/* ── ESP Firmware code block ── */
.esp-firmware-code {
  font-family: "Courier New", monospace;
  font-size: 11px;
  line-height: 1.5;
  color: #c9d1d9;
  background: #0d1117;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  overflow-x: auto;
  white-space: pre;
  max-height: 420px;
  overflow-y: auto;
  margin: 0;
  tab-size: 2;
}

/* ── ESP Zone Chips ── */
.esp-zone-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-light, rgba(255, 255, 255, 0.04));
}
.esp-zc {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  position: relative;
}
.esp-zc-off {
  background: var(--bg-3);
  color: var(--text-3);
}
.esp-zc-on {
  background: rgba(34, 197, 94, 0.15);
  color: var(--online);
}
.esp-zc-pend {
  background: rgba(234, 179, 8, 0.15);
  color: #eab308;
}
.esp-zc-hidden {
  opacity: 0.45;
  text-decoration: line-through;
}
.zc-rename-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 10px;
  padding: 0 0 0 3px;
  opacity: 0.5;
  vertical-align: middle;
}
.zc-rename-btn:hover {
  opacity: 1;
}

/* ── Sleep Schedule Panel ── */
.esp-sleep-panel {
  background: var(--bg-2);
  border: 1px solid var(--border-light, rgba(255,255,255,0.07));
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 12px;
}
.esp-sleep-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
  font-weight: 600;
  font-size: 13px;
}
.esp-sleep-sub {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 400;
}
.esp-sleep-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.esp-sleep-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}
.esp-sleep-times {
  display: flex;
  gap: 16px;
  align-items: center;
  font-size: 12px;
}
.esp-sleep-times label {
  display: flex;
  align-items: center;
  gap: 6px;
}
.esp-sleep-times input[type="time"] {
  background: var(--bg-3);
  border: 1px solid var(--border-light, rgba(255,255,255,0.1));
  border-radius: 5px;
  color: var(--text-1);
  padding: 3px 7px;
  font-size: 13px;
}
.esp-sleep-hint {
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.45;
}
.esp-sleep-status {
  font-size: 12px;
  margin-left: 6px;
}

/* ============================================================
   VIEW: Schedules
   ============================================================ */
/* Schedule header bar */
.sched-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 10px;
}
.sched-header h2 {
  font-size: 18px;
  color: var(--text-1);
  font-weight: 700;
}
.sched-header-actions {
  display: flex;
  gap: 8px;
}
.btn-new-sched {
  padding: 9px 18px;
  border-radius: var(--radius);
  background: var(--accent);
  color: #000;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  border: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
  box-shadow: 0 2px 8px var(--accent-glow);
}
.btn-new-sched:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 16px var(--accent-glow);
}
.btn-new-sched:active {
  transform: scale(0.97);
}

/* Schedule list */
.sched-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Próximos Riegos Section (schedules view) ── */
.next-runs-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.next-runs-hd {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 10px;
}
.next-runs-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.next-run-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-3);
}
.next-run-item:hover {
  background: var(--bg-card-hover);
}
.next-run-dim {
  opacity: 0.45;
}
.next-run-day {
  font-weight: 700;
  min-width: 26px;
  color: var(--text-2);
  font-size: 11px;
  text-transform: uppercase;
}
.next-run-time {
  font-weight: 800;
  font-family: "SF Mono", Consolas, monospace;
  color: var(--accent);
  min-width: 72px;
}
.next-run-zone {
  flex: 1;
  font-weight: 600;
  color: var(--text-1);
}
.next-run-dur {
  font-size: 12px;
  color: var(--accent);
  min-width: 55px;
  text-align: right;
  font-weight: 700;
  font-family: "SF Mono", Consolas, monospace;
  background: rgba(0, 212, 255, 0.08);
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.next-blocked {
  font-size: 10px;
  color: var(--danger, #ff4444);
  font-weight: 600;
}

/* ── Sidebar Next Runs Widget ── */
.ms-next-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  padding: 3px 0;
  border-bottom: 1px solid var(--border-light);
}
.ms-next-item:last-child {
  border-bottom: none;
}
.ms-next-dim {
  opacity: 0.4;
}
.ms-next-time {
  font-weight: 700;
  font-family: "SF Mono", Consolas, monospace;
  color: var(--accent);
  min-width: 80px;
}
.ms-next-zone {
  flex: 1;
  font-weight: 600;
  color: var(--text-1);
}
.ms-next-dur {
  font-size: 10px;
  color: var(--accent);
  font-weight: 700;
  font-family: "SF Mono", Consolas, monospace;
  white-space: nowrap;
}
.ms-next-blocked {
  color: var(--danger, #ff4444);
}

/* IPM Treatment list in side panel */
.ms-tx-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ms-tx-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(168, 85, 247, 0.06);
  border: 1px solid rgba(168, 85, 247, 0.15);
  border-radius: var(--radius-sm);
}
.ms-tx-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.ms-tx-zone {
  font-weight: 700;
  font-size: 12px;
  color: #a855f7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ms-tx-product {
  font-size: 11px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ms-tx-plants {
  font-size: 10px;
  color: #86efac;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ms-tx-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.ms-tx-time {
  font-size: 11px;
  font-weight: 600;
  color: #a855f7;
  font-variant-numeric: tabular-nums;
}
.ms-tx-cancel {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(168, 85, 247, 0.3);
  background: transparent;
  color: #a855f7;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.ms-tx-cancel:hover {
  background: rgba(168, 85, 247, 0.15);
}

/* ── IPM Treatment Modal (Professional) ── */
.tx-modal-pro {
  max-width: 480px;
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
}
/* Form top/bottom: mobile passthrough */
.tx-form-top,
.tx-form-bottom {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Plant section */
.tx-section-plants {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Center IPM modal on desktop — !important overrides .modal-content { max-width: 480px } */
@media (min-width: 768px) {
  .modal-ipm {
    align-items: center;
  }
  .tx-modal-pro {
    width: min(92vw, 900px) !important;
    max-width: min(92vw, 900px) !important;
    max-height: 88dvh !important;
    overflow: hidden !important;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(168,85,247,0.25);
  }
  /* Single scrollable column — everything flows together */
  .tx-modal-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 24px;
    gap: 20px;
  }
  /* Product + pest side by side in top row */
  .tx-form-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
  }
  /* Hours + notes side by side, submit spans full width */
  .tx-form-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
  }
  .tx-form-bottom .tx-actions {
    grid-column: 1 / -1;
  }
  /* Plant list: taller on desktop */
  .tx-plant-sel-list {
    max-height: 320px;
  }
  .tx-plant-selected {
    max-height: 80px;
    overflow-y: auto;
  }
}
/* Tablet (768–1023): slightly narrower */
@media (min-width: 768px) and (max-width: 1023px) {
  .tx-modal-pro {
    width: min(95vw, 780px) !important;
    max-width: min(95vw, 780px) !important;
  }
}
/* Mobile plant list improvements */
@media (max-width: 767px) {
  .tx-plant-sel-list {
    max-height: 240px;
    font-size: 14px;
  }
}
.tx-modal-hdr {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(147,51,234,0.18), rgba(168,85,247,0.06));
  border-bottom: 1px solid rgba(168,85,247,0.22);
  flex-shrink: 0;
}
.tx-modal-hdr-icon {
  font-size: 28px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(168,85,247,0.4));
}
.tx-modal-hdr-text {
  flex: 1;
  min-width: 0;
}
.tx-modal-hdr-text h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: #d8b4fe;
  text-shadow: 0 0 8px rgba(168,85,247,0.5);
  letter-spacing: -0.2px;
}
.tx-modal-zone-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-2);
  margin-top: 4px;
  background: rgba(255, 255, 255, 0.04);
  padding: 2px 10px;
  border-radius: 20px;
}
.tx-modal-zone-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.tx-modal-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
/* Sections */
.tx-section {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.tx-sec-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.tx-sec-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(168, 85, 247, 0.15);
  color: #a855f7;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tx-sec-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1);
}
/* Inputs */
.tx-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-3);
  color: var(--text-1);
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.tx-input:focus {
  outline: none;
  border-color: #a855f7;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15);
}
.tx-input::placeholder {
  color: var(--text-3);
  font-size: 13px;
}
select.tx-input {
  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 d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  cursor: pointer;
}
select.tx-input option {
  background: #1e1535;
  color: #f3f4f6;
}
.tx-input-sm {
  width: 80px;
  padding: 8px 10px;
  font-size: 13px;
}
.tx-textarea {
  resize: vertical;
  min-height: 44px;
}
/* Chips */
.tx-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.tx-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--bg-3);
  cursor: pointer;
  transition: all 0.2s;
  min-width: 52px;
}
.tx-chip:hover {
  border-color: rgba(168, 85, 247, 0.4);
  background: rgba(168, 85, 247, 0.06);
}
.tx-chip-active {
  border-color: #a855f7 !important;
  background: rgba(168, 85, 247, 0.15) !important;
  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.2);
}
.tx-chip-val {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-1);
  line-height: 1.1;
}
.tx-chip-active .tx-chip-val {
  color: #c084fc;
}
.tx-chip-unit {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.tx-chip-active .tx-chip-unit {
  color: #a855f7;
}
/* Custom row */
.tx-custom-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tx-custom-lbl {
  font-size: 12px;
  color: var(--text-2);
  font-weight: 600;
}
.tx-custom-unit {
  font-size: 12px;
  color: var(--text-3);
}
/* Preview */
.tx-preview {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(168, 85, 247, 0.06);
  border-radius: 8px;
  border-left: 3px solid #a855f7;
}
.tx-preview strong {
  color: #c084fc;
}
/* Action buttons */
.tx-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tx-btn-submit {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #9333ea, #7c3aed);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.tx-btn-submit:hover {
  background: linear-gradient(135deg, #a855f7, #8b5cf6);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(147, 51, 234, 0.3);
}
.tx-btn-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.tx-btn-cancel {
  width: 100%;
  padding: 10px;
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 10px;
  background: transparent;
  color: #f87171;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.tx-btn-cancel:hover {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.5);
}

/* ── Plant selector in treatment form ── */
.tx-campo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 4px 0 6px;
}
.tx-campo-chip {
  padding: 4px 10px;
  border: 1px solid rgba(168,85,247,0.25);
  border-radius: 20px;
  background: transparent;
  color: #9ca3af;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.tx-campo-chip:hover {
  border-color: rgba(168,85,247,0.5);
  color: #d8b4fe;
}
.tx-campo-chip-active {
  background: rgba(168,85,247,0.2);
  border-color: #a855f7;
  color: #d8b4fe;
}
.tx-plant-toolbar {
  display: flex;
  gap: 6px;
  align-items: center;
}
.tx-ipm-filter-btn {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid rgba(34,197,94,0.35);
  border-radius: 10px;
  background: rgba(34,197,94,0.08);
  color: #86efac;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  text-align: center;
}
.tx-ipm-filter-btn:hover {
  background: rgba(34,197,94,0.18);
  border-color: rgba(34,197,94,0.55);
}
.tx-ipm-filter-btn.tx-ipm-filter-active {
  background: rgba(34,197,94,0.22);
  border-color: #22c55e;
  color: #4ade80;
  box-shadow: 0 0 0 2px rgba(34,197,94,0.15);
}
.tx-plant-selall {
  padding: 8px 12px;
  border: 1px solid rgba(147,51,234,0.3);
  border-radius: 10px;
  background: rgba(147,51,234,0.12);
  color: #e9d5ff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.tx-plant-selall:hover {
  background: rgba(147,51,234,0.25);
  border-color: rgba(147,51,234,0.5);
}
.tx-plant-sel-list {
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  background: rgba(0,0,0,0.25);
  margin-top: 6px;
}
.tx-plant-letter {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 800;
  color: #a855f7;
  background: rgba(30,20,50,0.95);
  border-bottom: 1px solid rgba(147,51,234,0.2);
  letter-spacing: 1px;
}
.tx-plant-sep {
  text-align: center;
  color: #6b7280;
  font-weight: 600;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 4px;
}
.tx-plant-ipm-hdr {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 800;
  color: #facc15;
  background: rgba(30,20,10,0.97);
  border-bottom: 1px solid rgba(234,179,8,0.3);
  letter-spacing: 0.5px;
}
.tx-plant-loc-hdr {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 700;
  color: #9ca3af;
  background: rgba(30,20,50,0.95);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.tx-plant-loc-tag {
  font-size: 10px;
  color: #6b7280;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  padding: 1px 5px;
  flex-shrink: 0;
  white-space: nowrap;
}
.tx-plant-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.15s;
}
.tx-plant-opt:hover {
  background: rgba(147,51,234,0.1);
}
.tx-plant-opt:last-child {
  border-bottom: none;
}
.tx-plant-checked {
  background: rgba(147,51,234,0.15);
}
.tx-plant-ipm-hot {
  background: rgba(234,179,8,0.10);
  box-shadow: inset 3px 0 0 #eab308;
}
.tx-plant-ipm-hot:hover {
  background: rgba(234,179,8,0.18);
}
.tx-plant-ipm-hot.tx-plant-checked {
  background: rgba(234,179,8,0.20);
}
.tx-plant-opt input[type="checkbox"] {
  accent-color: #a855f7;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.tx-plant-name {
  flex: 1;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
}
.tx-plant-info {
  color: #9ca3af;
  font-size: 11px;
}
/* PlantFinder deep-link — wraps vendidas numbers */
a.pf-link {
  text-decoration: none;
  cursor: pointer;
}
a.pf-link:hover { text-decoration: underline; opacity: 0.85; }

.tx-plant-vend {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  flex-shrink: 0;
  background: rgba(34,197,94,0.12);
  color: #4ade80;
}
.tx-plant-status {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  flex-shrink: 0;
  letter-spacing: 0.3px;
  background: rgba(255,255,255,0.08);
  color: #9ca3af;
}
.tx-st-ipm {
  background: rgba(234,179,8,0.18);
  color: #facc15;
}
.tx-st-hold {
  background: rgba(96,165,250,0.15);
  color: #60a5fa;
}
.tx-st-fail {
  background: rgba(239,68,68,0.15);
  color: #f87171;
}
/* avail_comment badges (R/B/CB/BUD/D/E) */
.avail-badge{font-size:10px;font-weight:700;padding:1px 5px;border-radius:4px;flex-shrink:0;letter-spacing:.3px}
.avail-r  {background:rgba(34,197,94,.18);color:#4ade80}
.avail-b  {background:rgba(168,85,247,.18);color:#c4b5fd}
.avail-cb {background:rgba(249,115,22,.18);color:#fb923c}
.avail-bud{background:rgba(234,179,8,.18);color:#fde047}
.avail-d  {background:rgba(107,114,128,.18);color:#9ca3af}
.avail-e  {background:rgba(20,184,166,.18);color:#2dd4bf}
/* Plant memo (small italic note under name) */
.tx-plant-memo{display:block;font-size:10px;font-style:italic;color:#94a3b8;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
/* Sellable=false indicator */
.tx-plant-unavail{font-size:10px;font-weight:700;padding:1px 5px;border-radius:4px;flex-shrink:0;background:rgba(239,68,68,.18);color:#fca5a5;letter-spacing:.3px}
.tx-plant-opt-unavail{opacity:.6}
.gsp-row-unavail{opacity:.55}
.tx-plant-loading {
  padding: 14px;
  text-align: center;
  color: #9ca3af;
  font-size: 13px;
}
.tx-plant-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}
.tx-plant-count {
  color: #a855f7;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  background: rgba(147,51,234,0.15);
  border-radius: 6px;
}
.tx-plant-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: rgba(147,51,234,0.2);
  border: 1px solid rgba(147,51,234,0.3);
  border-radius: 6px;
  color: #e9d5ff;
  font-size: 11px;
}
.tx-plant-badge-x {
  background: none;
  border: none;
  color: #f87171;
  cursor: pointer;
  font-size: 13px;
  padding: 0 2px;
  line-height: 1;
}

@media (max-width: 600px) {
  .tx-plant-sel-list {
    max-height: 260px;
  }
  .tx-plant-opt {
    padding: 10px 10px;
    min-height: 48px;
  }
  .tx-plant-opt input[type="checkbox"] {
    width: 20px;
    height: 20px;
  }
  .tx-plant-name {
    font-size: 14px;
    white-space: normal;
  }
  .tx-plant-ipm-hdr,
  .tx-plant-loc-hdr {
    font-size: 12px;
    padding: 6px 12px;
  }
}

/* ── IPM tab in inventory viewer ── */
.inv-ipm-loading {
  padding: 20px;
  text-align: center;
  color: #9ca3af;
  font-size: 14px;
}
.inv-ipm-hdr {
  padding: 8px 4px;
}
.inv-ipm-total {
  color: #bf5af2;
  font-size: 14px;
  font-weight: 800;
  text-shadow: 0 0 6px rgba(191, 90, 242, 0.4);
}
.inv-ipm-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.inv-ipm-row {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1fr 0.5fr 1fr 1fr;
  gap: 6px;
  padding: 8px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  align-items: center;
  font-size: 13px;
  color: #ddd;
}
.inv-ipm-row-hdr {
  color: #9ca3af;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  position: sticky;
  top: 0;
  background: var(--dp-card, #1e1e2e);
  z-index: 1;
}
.inv-ipm-name {
  color: #fff;
  font-weight: 600;
}
.inv-ipm-count {
  color: #bf5af2;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 0 4px rgba(191, 90, 242, 0.3);
}
.inv-ipm-sec-hdr {
  font-size: 14px;
  font-weight: 700;
  color: #e9d5ff;
  padding: 10px 4px 6px;
  border-bottom: 1px solid rgba(147,51,234,0.2);
}
.inv-ipm-treated {
  background: rgba(34,197,94,0.06);
}
.inv-ipm-active {
  background: rgba(239,68,68,0.06);
}
.inv-ipm-tx-badge {
  display: inline-block;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(34,197,94,0.2);
  color: #86efac;
  font-weight: 600;
  margin-left: 4px;
}
.inv-ipm-treat-btn {
  padding: 4px 10px;
  border: 1px solid rgba(191,90,242,0.35);
  border-radius: 6px;
  background: rgba(191,90,242,0.18);
  color: #e9d5ff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.inv-ipm-treat-btn:hover {
  background: rgba(191,90,242,0.35);
  border-color: rgba(191,90,242,0.6);
  box-shadow: 0 0 8px rgba(191,90,242,0.3);
}
.inv-ipm-tx-sub {
  font-size: 11px !important;
  color: #9ca3af !important;
  border-bottom: 1px solid rgba(255,255,255,0.03) !important;
}
.inv-ipm-tx-sub span {
  color: #9ca3af;
}
@media (max-width: 600px) {
  .inv-ipm-row {
    grid-template-columns: 2fr 0.5fr 1fr 1fr;
  }
  .inv-ipm-row > span:nth-child(2),
  .inv-ipm-row > span:nth-child(3) {
    display: none;
  }
}

/* Treatment labels on map */
.ml-zone.ml-tx {
  box-shadow: inset 0 0 0 1px rgba(168, 85, 247, 0.35);
}
.ml-zone.ml-tx .ml-name {
  font-size: 10px;
  color: #e9d5ff;
}
.ml-sm.ml-tx .ml-name {
  font-size: 7px;
}
.ml-tx-line {
  font-size: 12px;
  font-weight: 900;
  color: #e9d5ff;
  letter-spacing: 1.5px;
  line-height: 1.1;
  white-space: nowrap;
}
.ml-sm .ml-tx-line {
  font-size: 9px;
  letter-spacing: 0.5px;
}
.ml-tx-time {
  font-size: 10px;
  font-weight: 700;
  color: #c084fc;
  font-family: "SF Mono", Consolas, monospace;
  line-height: 1.1;
  white-space: nowrap;
}
.ml-sm .ml-tx-time {
  font-size: 7px;
}
.ml-tx-drip {
  font-size: 7px;
  font-weight: 700;
  color: #86efac;
  line-height: 1.1;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* ── Empty location overlay ──────────────────────────────────────────────────
   Free locations (no plants in inventory) read as muted slate with an
   "EMPTY LOCATION" tag so they stand apart from occupied, active zones. */
.ml-zone.ml-empty {
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.3);
}
.ml-zone.ml-empty .ml-name {
  color: #cbd5e1;
  opacity: 0.85;
}
.ml-empty-tag {
  font-size: 9px;
  font-weight: 800;
  color: #e8eef7;                       /* texto claro */
  letter-spacing: 1px;
  line-height: 1.15;
  white-space: nowrap;
  text-transform: uppercase;
  background: rgba(2, 6, 23, 0.72);     /* fondo oscuro para contraste */
  padding: 2px 5px;
  border-radius: 5px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
/* Hoophouses (angostas-altas): texto vertical para no desbordar a las vecinas */
.ml-empty-tag--v {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 0.5px;
  padding: 5px 2px;
}
.ml-sm .ml-empty-tag {
  font-size: 10px;
  letter-spacing: 0;
}

/* Side panel treatment tags */
.ms-tx-tag {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 4px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.ms-tx-tag-block {
  background: rgba(168, 85, 247, 0.2);
  color: #c084fc;
}
.ms-tx-tag-info {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}
.ms-tx-item.ms-tx-drip {
  border-color: rgba(59, 130, 246, 0.2);
  background: rgba(59, 130, 246, 0.04);
}

/* Next runs treatment info badge */
.ms-next-tx-info {
  color: #a855f7;
  font-size: 10px;
  margin-left: 2px;
}

/* Zone card treatment banner — rich row with icon/label/product/timer */
.zone-card-treatment {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  padding: 5px 8px;
  border-radius: 6px;
  margin: 4px 0 2px;
  font-weight: 600;
}
.zc-tx-block {
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.3);
}
.zc-tx-drip {
  background: rgba(168, 85, 247, 0.08);
  border: 1px solid rgba(168, 85, 247, 0.2);
}
.zc-tx-icon {
  font-size: 13px;
  flex-shrink: 0;
}
.zc-tx-label {
  font-weight: 900;
  color: #c084fc;
  letter-spacing: 1px;
  font-size: 10px;
  text-transform: uppercase;
}
.zc-tx-prod {
  color: #e9d5ff;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zc-tx-timer {
  font-family: "SF Mono", Consolas, monospace;
  font-weight: 700;
  color: #a855f7;
  white-space: nowrap;
  font-size: 10px;
}
.zc-tx-pest {
  font-size: 10px;
  color: #f59e0b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zc-tx-ok {
  font-size: 10px;
  flex-shrink: 0;
}
/* Zone card — purple border when treatment active */
.zone-card:has(.zone-card-treatment) {
  border-color: rgba(168, 85, 247, 0.4) !important;
  border-left-color: #9333ea !important;
}
.zone-card:has(.zone-card-treatment):hover {
  border-color: #9333ea !important;
  box-shadow: 0 4px 15px rgba(147, 51, 234, 0.25);
}
/* Mini IPM button on zone card */
.zc-ipm-btn {
  position: absolute;
  top: 8px;
  right: 38px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(168, 85, 247, 0.3);
  background: rgba(168, 85, 247, 0.08);
  color: #a855f7;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;
  transition: all 0.2s;
}
.zc-ipm-btn:hover {
  background: rgba(168, 85, 247, 0.2);
  border-color: #a855f7;
  transform: scale(1.1);
}

/* Zone detail IPM button row */
.zd-ipm-btns {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  align-items: stretch;
}
.zd-btn-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.zd-btn-row .zd-act-btn {
  min-width: 0;
  font-size: .78rem;
  padding: 7px 4px;
}

/* Quick Run modal treatment lock on zone label */
.qr-area-zone .qr-tx-lock {
  color: #a855f7;
  font-size: 11px;
  margin-left: 2px;
}
.qr-area-zone:has(input:disabled) {
  opacity: 0.5;
  text-decoration: line-through;
  cursor: not-allowed;
}

/* Belt treatment style */
.belt-sched-tx {
  opacity: 0.6;
}
.belt-sched-tx .belt-sched-name {
  color: #a855f7;
}

/* Multi-zone IPM modal — 2-page wizard */
.ms-btn-ipm {
  background: rgba(168, 85, 247, 0.12) !important;
  color: #c084fc !important;
  border-color: rgba(168, 85, 247, 0.3) !important;
  margin-bottom: 10px;
}
.ms-btn-ipm:hover {
  background: rgba(168, 85, 247, 0.22) !important;
  border-color: #a855f7 !important;
}
.tx-modal-multi {
  max-width: 500px;
  overflow: hidden;
}
.txm-pages {
  position: relative;
  overflow: hidden;
}
.txm-page {
  display: none;
  padding: 14px 18px;
  flex-direction: column;
  gap: 10px;
  max-height: 65vh;
  overflow-y: auto;
}
.txm-page-active {
  display: flex;
}
.txm-select-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.txm-sel-btn {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-3);
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s;
}
.txm-sel-btn:hover {
  border-color: #a855f7;
  color: #c084fc;
  background: rgba(168, 85, 247, 0.08);
}
.txm-count {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 600;
  margin-left: auto;
}
.txm-groups {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 50vh;
  overflow-y: auto;
}
/* Type section */
.txm-type-sec {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.015);
}
.txm-type-hd {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1);
  cursor: pointer;
  margin-bottom: 6px;
}
.txm-type-cnt {
  font-weight: 400;
  color: var(--text-3);
  font-size: 11px;
}
/* Series grid */
.txm-series-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 6px;
}
.txm-series-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 8px;
  background: var(--bg-2);
}
.txm-series-hd {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-2);
  cursor: pointer;
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.txm-series-hd strong {
  color: var(--text-1);
  font-size: 11px;
}
/* Zone cell grid */
.txm-cell-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 3px;
}
.txm-cell {
  position: relative;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  color: var(--text-2);
  cursor: pointer;
  padding: 3px 4px;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: all 0.12s;
  white-space: nowrap;
  overflow: hidden;
}
.txm-cell:hover {
  background: rgba(168, 85, 247, 0.08);
  border-color: rgba(168, 85, 247, 0.2);
}
.txm-cell:has(input:checked) {
  background: rgba(168, 85, 247, 0.12);
  border-color: #a855f7;
  color: #c084fc;
}
.txm-cell input {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  accent-color: #a855f7;
}
.txm-cell-lbl {
  overflow: hidden;
  text-overflow: ellipsis;
}
.txm-cell-tx {
  background: rgba(168, 85, 247, 0.05);
}
.txm-cell-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #a855f7;
}
.txm-cell-solo {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 11px;
}
/* Nav & fields */
.txm-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.txm-field-lbl {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
}
.txm-nav {
  display: flex;
  justify-content: flex-end;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.txm-nav-split {
  justify-content: space-between;
}
.txm-nav-btn {
  padding: 8px 18px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.txm-btn-next {
  background: #a855f7;
  color: #fff;
  border-color: #a855f7;
}
.txm-btn-next:hover:not(:disabled) {
  background: #9333ea;
}
.txm-btn-next:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.txm-btn-back {
  background: var(--bg-3);
  color: var(--text-2);
}
.txm-btn-back:hover {
  border-color: #a855f7;
  color: #c084fc;
}

/* ── IPM History View ── */
.ipm-hist-view { padding: 0 4px; max-width: 1400px; margin: 0 auto; }
.ipm-hist-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 14px;
}

/* Two-column layout: main + sidebar */
.ipm-hist-layout {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.ipm-hist-main { flex: 1; min-width: 0; }

/* ── Reports Sidebar ── */
.ipm-reports-sidebar {
  width: 320px;
  flex-shrink: 0;
  position: sticky;
  top: 70px;
  max-height: calc(100dvh - 90px);
  overflow-y: auto;
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(239,68,68,0.03) 0%, rgba(168,85,247,0.03) 100%);
  padding: 14px;
}
.ipm-sidebar-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(239, 68, 68, 0.15);
}
.ipm-sidebar-icon { font-size: 20px; }
.ipm-sidebar-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-1);
  flex: 1;
}
.ipm-sidebar-count {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  font-size: 13px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 10px;
}
.ipm-sidebar-empty {
  text-align: center;
  padding: 28px 10px;
  color: var(--text-3);
  font-size: 14px;
}
.ipm-sidebar-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: default;
}
.ipm-sidebar-section-count {
  background: rgba(168, 85, 247, 0.12);
  color: #a855f7;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 8px;
}
.ipm-sidebar-archive { margin-top: 14px; }
.ipm-sidebar-archive-title { cursor: pointer; user-select: none; }
.ipm-sidebar-archive-title::-webkit-details-marker { display: none; }
.ipm-sidebar-archive[open] > .ipm-sidebar-archive-title::before { content: "▾ "; font-size: 10px; }
.ipm-sidebar-archive:not([open]) > .ipm-sidebar-archive-title::before { content: "▸ "; font-size: 10px; }

/* IPM Varieties grid (Campos con Plantas IPM) */
.ipm-varieties-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  padding: 12px;
}
.ipm-var-card {
  background: var(--bg-1);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ipm-var-field {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: 0.5px;
}
.ipm-var-counts {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ipm-var-cnt {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
}
.ipm-var-cnt-grp { background: rgba(34,197,94,0.15); color: #22c55e; }
.ipm-var-cnt-rpt { background: rgba(239,68,68,0.15); color: #ef4444; }
.ipm-var-cnt-tx  { background: rgba(168,85,247,0.15); color: #a855f7; }
.ipm-var-pests {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.ipm-var-pest-tag {
  font-size: 11px;
  background: rgba(168,85,247,0.1);
  color: var(--text-2);
  border-radius: 4px;
  padding: 2px 6px;
}
.ipm-var-map-btn {
  margin-top: auto;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(59,130,246,0.12);
  color: #3b82f6;
  border: 1px solid rgba(59,130,246,0.3);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
  align-self: flex-start;
}
.ipm-var-map-btn:hover { background: rgba(59,130,246,0.22); }

/* Block letter breakdown table inside IPM var card */
.ipm-var-blocks {
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
  font-size: 12px;
}
.ipm-vb-hdr {
  display: grid;
  grid-template-columns: 48px 1fr 1fr 32px;
  background: var(--bg-card);
  padding: 4px 8px;
  font-weight: 700;
  color: var(--text-3);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 1px solid var(--border);
}
.ipm-vb-row {
  display: grid;
  grid-template-columns: 48px 1fr 1fr 32px;
  padding: 4px 8px;
  border-bottom: 1px solid rgba(var(--border-rgb,255,255,255),0.05);
  align-items: center;
  transition: background 0.1s;
}
.ipm-vb-row:last-child { border-bottom: none; }
.ipm-vb-row:hover { background: rgba(255,255,255,0.03); }
.ipm-vb-row-ipm { background: rgba(34,197,94,0.05); }
.ipm-vb-row-ipm:hover { background: rgba(34,197,94,0.1); }
.ipm-vb-c-key {
  font-weight: 700;
  color: var(--text-2);
  font-size: 13px;
}
.ipm-vb-c-qty { color: var(--text-2); text-align: right; }
.ipm-vb-c-vend { text-align: right; }
.ipm-vb-vend { color: #f59e0b; font-weight: 600; }
.ipm-vb-c-ipm { text-align: center; }
.ipm-vb-ipm-badge {
  display: inline-block;
  background: rgba(34,197,94,0.2);
  color: #22c55e;
  font-weight: 700;
  font-size: 11px;
  border-radius: 10px;
  padding: 0 6px;
  min-width: 18px;
  text-align: center;
}
.ipm-vb-ipm-none { color: var(--text-4, #444); font-size: 10px; }

/* Report Cards */
.ipm-rpt-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
  transition: box-shadow 0.15s;
}
.ipm-rpt-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.ipm-rpt-open { border-left: 3px solid #ef4444; }
.ipm-rpt-done { border-left: 3px solid #22c55e; opacity: 0.7; }
.ipm-rpt-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.ipm-rpt-zone {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-1);
}
.ipm-rpt-date {
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
}
.ipm-rpt-card-body { margin-bottom: 8px; }
.ipm-rpt-body-done { margin-bottom: 0; }
.ipm-rpt-row {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
}
.ipm-rpt-loc { color: var(--text-3); font-size: 12px; }
.ipm-rpt-pest { color: #f59e0b; font-weight: 600; }
.ipm-rpt-notes { font-style: italic; color: var(--text-3); font-size: 12px; margin-top: 2px; }
.ipm-rpt-by { font-size: 11px; color: var(--text-3); }
.ipm-rpt-completed-info { font-size: 12px; color: #22c55e; }
.ipm-rpt-card-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.ipm-rpt-btn-done {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  cursor: pointer;
  transition: background 0.15s;
}
.ipm-rpt-btn-done:hover { background: rgba(34, 197, 94, 0.3); }
.ipm-rpt-btn-del {
  padding: 4px 10px;
  font-size: 12px;
  border: none;
  border-radius: 6px;
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  cursor: pointer;
  transition: background 0.15s;
}
.ipm-rpt-btn-del:hover { background: rgba(239, 68, 68, 0.25); }

@media (max-width: 900px) {
  .ipm-hist-layout { flex-direction: column; }
  .ipm-reports-sidebar {
    width: 100%;
    position: static;
    max-height: none;
    order: -1;
    margin-bottom: 14px;
  }
}
.ipm-hist-active-bar,
.ipm-hist-active-label,
.ipm-hist-active-chips,
.ipm-hist-active-chip { display: none; } /* legacy — replaced by countdown cards */

/* Active Treatments — Countdown Cards */
.ipm-active-section {
  margin-bottom: 16px;
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(168,85,247,0.04) 0%, rgba(59,130,246,0.03) 100%);
}
.ipm-active-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(168, 85, 247, 0.08);
  border-bottom: 1px solid rgba(168, 85, 247, 0.15);
}
.ipm-active-icon { font-size: 20px; }
.ipm-active-title {
  font-size: 14px;
  font-weight: 700;
  color: #a855f7;
  flex: 1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ipm-active-count {
  background: #a855f7;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ipm-active-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  padding: 12px;
}
.ipm-atx-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  position: relative;
  overflow: hidden;
}
.ipm-atx-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #a855f7, #3b82f6);
}
.ipm-atx-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.ipm-atx-zone {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  color: var(--text-1);
  border: 1px solid var(--border);
}
.ipm-atx-zone.ipm-zone-drip { border-left: 3px solid var(--type-drip); }
.ipm-atx-zone.ipm-zone-mist { border-left: 3px solid var(--type-mist); }
.ipm-atx-zone.ipm-zone-sprinkler { border-left: 3px solid var(--type-sprinkler); }
.ipm-atx-countdown {
  font-family: "Courier New", monospace;
  font-size: 18px;
  font-weight: 700;
  color: #a855f7;
  letter-spacing: 1px;
}
.ipm-atx-product {
  font-size: 14px;
  color: var(--text-1);
  font-weight: 600;
  margin-bottom: 4px;
}
.ipm-atx-pest {
  display: inline-block;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 5px;
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  font-weight: 600;
  margin-bottom: 8px;
}
.ipm-atx-bar-wrap {
  height: 6px;
  background: var(--bg-3);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}
.ipm-atx-bar {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #a855f7, #ec4899);
  transition: width 1s linear;
}
.ipm-atx-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-3);
  font-weight: 500;
}
.ipm-atx-exp { text-align: right; }
.ipm-hist-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}
.ipm-hist-count {
  font-size: 12px;
  color: var(--text-3);
  font-weight: 500;
}

/* Bulk delete toolbar */
.ipm-hist-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.ipm-bulk-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-2);
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  padding: 4px 10px;
}
.ipm-select-all-label {
  font-size: 11px;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
}
.ipm-row-chk {
  width: 16px; height: 16px;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: #a855f7;
}

/* Collapsible sections */
.ipm-section {
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.ipm-section-header {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-1);
  padding: 12px 14px;
  background: var(--bg-2);
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ipm-section-header::-webkit-details-marker { display: none; }
.ipm-section-header::before {
  content: "▶";
  display: inline-block;
  margin-right: 8px;
  font-size: 10px;
  transition: transform 0.2s;
}
.ipm-section[open] > .ipm-section-header::before {
  transform: rotate(90deg);
}

/* Charts grid */
.ipm-charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 14px;
}
@media (max-width: 700px) {
  .ipm-charts-grid { grid-template-columns: 1fr; }
}
.ipm-chart-card {
  background: var(--bg-2);
  border-radius: 10px;
  padding: 14px 16px;
  border: 1px solid var(--border);
}

/* Horizontal bar chart */
.ipmch-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 2px;
}
.ipmch-total {
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: 12px;
}
.ipmch-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ipmch-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ipmch-label {
  width: 90px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}
.ipmch-bar-wrap {
  flex: 1;
  height: 22px;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  overflow: hidden;
}
.ipmch-bar {
  height: 100%;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 6px;
  min-width: 24px;
  transition: width 0.4s ease;
}
.ipmch-bar-val {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.ipmch-pct {
  width: 34px;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  text-align: right;
}

/* Expandable row cards */
.ipm-row-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 6px;
  background: var(--bg-1);
  transition: border-color 0.2s;
}
.ipm-row-card:hover { border-color: rgba(168, 85, 247, 0.3); }
.ipm-row-card.ipm-row-expanded { border-color: #a855f7; }
.ipm-row-card.ipm-row-clear { opacity: 0.7; }
.ipm-row-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
  gap: 8px;
}
.ipm-row-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.ipm-row-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.ipm-row-zone { font-size: 14px; color: var(--text-1); }
.ipm-row-product { font-size: 13px; color: var(--text-2); }
.ipm-row-pest {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 5px;
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  font-weight: 600;
}
.ipm-row-hours { font-size: 12px; color: var(--text-3); font-weight: 600; }
.ipm-wx-chip {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(59, 130, 246, 0.1);
  color: var(--text-2);
  white-space: nowrap;
}
.ipm-row-wx-full {
  grid-column: 1 / -1;
  padding-top: 4px;
  border-top: 1px dashed var(--border);
}
.ipm-row-date { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.ipm-row-chevron {
  font-size: 10px;
  color: var(--text-3);
  transition: transform 0.2s;
}
.ipm-row-detail {
  padding: 0 12px 12px;
  border-top: 1px solid var(--border);
}
.ipm-row-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  font-size: 13px;
  color: var(--text-2);
  padding: 12px 0;
}
.ipm-delete-btn { margin-top: 8px; }
.ipm-action-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  white-space: nowrap;
}
.ipm-badge-set { background: rgba(168, 85, 247, 0.15); color: #a855f7; }
.ipm-badge-clear { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.ipm-td-id { font-size: 10px; color: var(--text-3); }
.ipm-td-na { color: var(--text-3); }

/* IPM Grid Table */
.ipm-grid-table {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-1);
}
.ipm-grid-header {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr 1fr auto 1fr auto;
  gap: 0;
  background: rgba(168, 85, 247, 0.08);
  border-bottom: 2px solid rgba(168, 85, 247, 0.2);
}
.ipm-grid-header.ipm-grid-adm {
  grid-template-columns: 30px auto 1fr 1fr 1fr 1fr auto 1fr auto 36px;
}
.ipm-grid-th {
  padding: 12px 10px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-2);
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.ipm-grid-row {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr 1fr auto 1fr auto;
  gap: 0;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.ipm-grid-row:last-child { border-bottom: none; }
.ipm-grid-row:hover { background: rgba(168, 85, 247, 0.04); }
.ipm-grid-row-clear { opacity: 0.65; }
.ipm-grid-td {
  padding: 11px 10px;
  font-size: 14px;
  color: var(--text-2);
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ipm-gcol-chk { width: 30px; justify-content: center; }
.ipm-gcol-action { min-width: 90px; }
.ipm-gcol-date { min-width: 110px; white-space: nowrap; font-size: 13px; color: var(--text-3); }
.ipm-gcol-zone { min-width: 90px; color: var(--text-1); font-size: 14px; }
.ipm-gcol-by { min-width: 70px; font-size: 13px; color: var(--text-3); }
.ipm-gcol-del { width: 36px; justify-content: center; }
.ipm-gcol-del .ipm-delete-btn { padding: 2px 6px; font-size: 12px; }

@media (max-width: 700px) {
  .ipm-charts-grid { grid-template-columns: 1fr; }
  .ipm-grid-table { border-radius: 8px; }
  .ipm-grid-header { display: none; }
  .ipm-grid-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
  }
  .ipm-grid-td { padding: 2px 0; font-size: 13px; }
  .ipm-gcol-product, .ipm-gcol-by, .ipm-gcol-wx { display: none; }
}
/* Pest type optional label */
.tx-sec-opt {
  font-size: 10px;
  color: var(--text-3);
  font-weight: 400;
  margin-left: 4px;
}
.tx-sec-icon {
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-size: 12px;
}

/* ── IPM Live Weather Widget ──────────────────────────────── */
.ipm-live-wx-widget { margin-bottom: 14px; }
.ipm-lwx-bar {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  font-size: 13px;
}
.ipm-lwx-bar-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-3);
  padding: 0 12px;
  white-space: nowrap;
  border-right: 1px solid var(--border);
  align-self: stretch;
  display: flex;
  align-items: center;
}
.ipm-lwx-station {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  flex: 1;
  min-width: 0;
}
.ipm-lwx-st-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.ipm-lwx-st-icon { font-size: 22px; line-height: 1; }
.ipm-lwx-st-info { display: flex; flex-direction: column; line-height: 1.3; }
.ipm-lwx-stname { font-size: 13px; font-weight: 700; color: var(--text-1); }
.ipm-lwx-sttag  { font-size: 11px; color: var(--text-3); }
.ipm-lwx-st-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-wrap: wrap;
}
.ipm-lwx-st-temp  { font-size: 18px; font-weight: 800; color: var(--text-1); letter-spacing: -0.5px; }
.ipm-lwx-st-wind  { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.ipm-lwx-st-sky   { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.ipm-lwx-divider  { width: 1px; align-self: stretch; background: var(--border); flex-shrink: 0; }
.ipm-lwx-meta {
  font-size: 11px;
  color: var(--text-3);
  padding: 0 12px;
  border-left: 1px solid var(--border);
  align-self: stretch;
  display: flex;
  align-items: center;
  white-space: nowrap;
  gap: 4px;
}
.ipm-lwx-src {
  color: var(--accent);
  text-decoration: none;
  opacity: 0.8;
}
.ipm-lwx-src:hover { opacity: 1; text-decoration: underline; }
.ipm-lwx-loading { padding: 10px 14px; font-size: 12px; color: var(--text-3); }
.ipm-lwx-error   { font-size: 12px; color: #f87171; padding: 10px 14px; }
.ipm-lwx-na      { font-size: 12px; color: var(--text-3); }
@media (max-width: 700px) {
  .ipm-lwx-bar-label, .ipm-lwx-meta { display: none; }
  .ipm-lwx-station { padding: 8px 12px; }
  .ipm-lwx-st-temp { font-size: 15px; }
}

.sched-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.sched-card:hover {
  border-left-color: var(--accent);
  box-shadow: 0 2px 12px rgba(0, 212, 255, 0.08);
}
.sched-card.disabled {
  opacity: 0.45;
  border-left-color: var(--border);
}
.sched-time {
  font-size: 22px;
  font-weight: 800;
  color: var(--accent);
  font-family: "SF Mono", Consolas, monospace;
  min-width: 65px;
  letter-spacing: -0.5px;
}
.sched-info {
  flex: 1;
  min-width: 0;
}
.sched-zone {
  font-weight: 600;
  color: var(--text-1);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sched-days {
  display: flex;
  gap: 3px;
  margin-top: 4px;
}
.sched-duration {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
}
.sched-toggle {
  margin-left: auto;
}

/* Empty schedules — big CTA */
.sched-empty {
  text-align: center;
  padding: 48px 20px;
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
}
.sched-empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
}
.sched-empty-title {
  font-size: 16px;
  color: var(--text-1);
  font-weight: 700;
  margin-bottom: 4px;
}
.sched-empty-sub {
  font-size: 13px;
  color: var(--text-3);
  margin-bottom: 16px;
}
.sched-empty .btn-new-sched {
  margin: 0 auto;
}

/* ── Grouped Schedules (sg-*) ── */
.sg-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sg-group {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.sg-group-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-3);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1);
}
.sg-group-icon {
  font-size: 16px;
}
.sg-group-name {
  flex: 1;
}
.sg-group-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  background: var(--bg-card);
  padding: 2px 8px;
  border-radius: 10px;
}
.sg-group-rows {
  display: flex;
  flex-direction: column;
}
/* ── Schedule multi-select toolbar ── */
.sg-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bg-card, rgba(255, 255, 255, 0.02));
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.sg-tb-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sg-tb-selall {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
}
.sg-tb-selall input {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
  cursor: pointer;
}
.sg-tb-filters {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.sg-tb-fbtn {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.sg-tb-fbtn:hover {
  background: rgba(0, 212, 255, 0.08);
}
.sg-tb-fbtn-active {
  background: rgba(0, 212, 255, 0.15);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.sg-tb-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sg-tb-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}
.sg-tb-del {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
}
.sg-tb-del:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.sg-tb-active {
  border-color: rgba(0, 212, 255, 0.3);
  background: rgba(0, 212, 255, 0.04);
}
/* Selection checkbox in rows */
.sg-sel-cb {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}
.sg-row-selected {
  background: rgba(0, 212, 255, 0.06) !important;
}
.sg-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-size: 13px;
  border-top: 1px solid var(--border-light, rgba(255, 255, 255, 0.04));
  transition: background 0.15s;
}
.sg-row:hover {
  background: var(--bg-card-hover, rgba(255, 255, 255, 0.03));
}
.sg-row-off {
  opacity: 0.4;
}
.sg-row-disabled {
  opacity: 0.45;
}
.sg-row-disabled .sg-time,
.sg-row-disabled .sg-zone,
.sg-row-disabled .sg-dur {
  text-decoration: line-through;
}
.sg-toggle {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
}
.sg-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.sg-toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--bg-3);
  border-radius: 9px;
  transition: background 0.2s;
}
.sg-toggle-slider::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  left: 2px;
  bottom: 2px;
  background: var(--text-3);
  border-radius: 50%;
  transition:
    transform 0.2s,
    background 0.2s;
}
.sg-toggle input:checked + .sg-toggle-slider {
  background: var(--accent);
}
.sg-toggle input:checked + .sg-toggle-slider::before {
  transform: translateX(14px);
  background: #fff;
}
.sg-src { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 4px; font-size: 10px; font-weight: 800; color: #fff; flex-shrink: 0; line-height: 1; }
.sg-src-prog { background: #2196F3; }
.sg-src-man { background: #ff9800; }
.sg-src-unk { background: #666; }
.sg-time {
  font-weight: 800;
  font-family: "SF Mono", Consolas, monospace;
  color: var(--accent);
  min-width: 72px;
  font-size: 13px;
}
.sg-zone {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sg-days {
  display: flex;
  gap: 2px;
  min-width: 90px;
}
.sg-day {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  background: rgba(0, 212, 255, 0.08);
  padding: 1px 4px;
  border-radius: 3px;
}
.sg-dur {
  font-size: 12px;
  color: var(--accent);
  font-weight: 700;
  min-width: 48px;
  text-align: right;
  font-family: "SF Mono", Consolas, monospace;
  background: rgba(0, 212, 255, 0.08);
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.sg-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 80px;
  justify-content: flex-end;
}
.sg-edit,
.sg-del {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-3);
  padding: 2px 4px;
  border-radius: 4px;
  transition:
    color 0.15s,
    background 0.15s;
}
.sg-edit:hover {
  color: var(--accent);
  background: rgba(0, 212, 255, 0.1);
}
.sg-del:hover {
  color: var(--danger, #ff4444);
  background: rgba(255, 68, 68, 0.1);
}
.sg-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.sg-status-dot.sg-on {
  background: var(--success, #22c55e);
}
.sg-status-dot.sg-off {
  background: var(--text-3, #888);
  opacity: 0.5;
}
.toggle-sm {
  transform: scale(0.8);
}

@media (max-width: 600px) {
  .sg-row {
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 10px;
  }
  .sg-time {
    min-width: 65px;
    font-size: 12px;
  }
  .sg-zone {
    flex-basis: calc(100% - 75px);
  }
  .sg-days {
    flex-basis: 100%;
    justify-content: flex-start;
  }
  .sg-dur {
    min-width: auto;
    flex: 1;
  }
  .sg-actions {
    flex-shrink: 0;
    justify-content: flex-end;
  }
}

/* ============================================================
   SCHEDULE VIEWS — Tabs, AM/PM, Timeline 24h, Weekly
   ============================================================ */

/* ── View Toggle Tabs ── */
.sv-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  background: var(--bg-3);
  border-radius: var(--radius);
  padding: 4px;
  border: 1px solid var(--border);
}
.sv-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.sv-tab:hover {
  color: var(--text-1);
  background: rgba(255, 255, 255, 0.04);
}
.sv-tab-active {
  background: var(--bg-card);
  color: var(--accent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.sv-tab-icon {
  font-size: 14px;
}
.sv-tab-text {
  white-space: nowrap;
}
.sv-tab-sep {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 4px;
  flex-shrink: 0;
}
.sv-tab-mizona {
  flex: 0 0 auto;
  font-size: 11px;
  padding: 6px 10px;
}
.sv-tab-mizona.sv-tab-active {
  background: var(--accent);
  color: var(--bg-1);
}
.sv-seq-del {
  font-size: 10px;
  padding: 2px 6px;
  margin-left: 8px;
  vertical-align: middle;
}

/* ── Summary Bar ── */
.sv-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 14px;
  margin-bottom: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 12px;
  color: var(--text-2);
}
.sv-sum-item strong {
  color: var(--accent);
  font-weight: 800;
}
.sv-sum-sep {
  color: var(--border);
}
.sv-sum-paused {
  color: var(--text-3);
}

/* ── Type Dot ── */
.sv-type-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.type-bg-drip {
  background: var(--type-drip);
}
.type-bg-mist {
  background: var(--type-mist);
}
.type-bg-sprinkler {
  background: var(--type-sprinkler);
}

/* ── Sequence Detection ── */
.sv-sequences {
  background: var(--bg-card);
  border: 1px solid rgba(0, 212, 255, 0.15);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.sv-seq-hd {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sv-seq-badge {
  font-size: 10px;
  font-weight: 800;
  background: var(--accent);
  color: #000;
  padding: 1px 7px;
  border-radius: 10px;
}
.sv-seq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sv-seq-item {
  background: var(--bg-3);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.sv-seq-zone {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-1);
  margin-bottom: 6px;
}
.sv-seq-freq {
  font-size: 11px;
  font-weight: 800;
  color: var(--accent);
  background: var(--accent-dim);
  padding: 1px 6px;
  border-radius: 8px;
}
.sv-seq-chain {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.sv-seq-time {
  font-weight: 800;
  font-family: "SF Mono", Consolas, monospace;
  font-size: 12px;
  color: var(--accent);
  background: rgba(0, 212, 255, 0.08);
  padding: 2px 8px;
  border-radius: 4px;
}
.sv-seq-arrow {
  color: var(--text-3);
  font-size: 11px;
}
.sv-seq-total {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 4px;
}

/* ── AM/PM Period Sections ── */
.sv-period {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 12px;
}
.sv-period-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.sv-period-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 700;
}
/* Period info grid */
.sv-prd-info {
  padding: 6px 14px 10px;
  border-bottom: 1px solid var(--border);
}
.sv-prd-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 6px;
}
.sv-prd-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 4px;
}
.sv-prd-stat-n {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-1);
}
.sv-prd-stat-l {
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.sv-prd-chips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.sv-prd-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-2);
  border: 1px solid var(--border);
}

/* ── View Filter Bar ── */
.sv-filter-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.sv-fbtn {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  opacity: 0.5;
}
.sv-fbtn:hover {
  opacity: 0.8;
}
.sv-fbtn-active {
  opacity: 1;
  background: rgba(0, 212, 255, 0.1);
  border-color: rgba(0, 212, 255, 0.3);
  color: var(--text-1);
  font-weight: 600;
}
.sv-fbtn-sep {
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 2px;
  flex-shrink: 0;
}
.sv-filter-group-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 2px;
}

/* ── Collapsible delete tools ── */
.sg-del-tools {
  background: var(--bg-card);
  border: 1px solid rgba(255, 80, 80, 0.15);
  border-radius: var(--radius);
  margin-bottom: 8px;
  overflow: hidden;
}
.sg-del-tools-hdr {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: background 0.15s;
}
.sg-del-tools-hdr::-webkit-details-marker {
  display: none;
}
.sg-del-tools-hdr:hover {
  background: rgba(255, 80, 80, 0.05);
}
.sg-del-tools-arrow {
  font-size: 11px;
  color: var(--text-3);
  transition: transform 0.2s;
  margin-left: auto;
}
details[open] > .sg-del-tools-hdr .sg-del-tools-arrow {
  transform: rotate(0deg);
}
details:not([open]) > .sg-del-tools-hdr .sg-del-tools-arrow {
  transform: rotate(-90deg);
}
.sg-del-tools-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 12px 8px;
  border-top: 1px solid rgba(255, 80, 80, 0.1);
  flex-wrap: wrap;
}

/* ── Combined stats bar (top-level) ── */
.sv-prd-info-top {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 8px;
  padding: 8px 14px 10px;
}

/* ── Unified list card ── */
.sv-unified-list {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 12px;
}

/* ── Period divider lines (inside unified list) ── */
.sv-period-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
}
.sv-period-divider.sv-period-am {
  border-bottom: none;
  border-top: none;
}
.sv-period-divider.sv-period-pm {
  border-top: 2px solid rgba(103, 58, 183, 0.3);
  border-bottom: none;
}
.sv-divider-label {
  color: var(--text-1);
  font-size: 13px;
}
.sv-divider-meta {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  margin-left: auto;
}

/* ── Collapsible sections (Próximos / Secuencias) ── */
.sv-collapse-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
}
.sv-collapse-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: background 0.15s;
}
.sv-collapse-hdr::-webkit-details-marker {
  display: none;
}
.sv-collapse-hdr:hover {
  background: rgba(255, 255, 255, 0.03);
}
.sv-collapse-next {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.06), transparent);
  border-bottom: 1px solid rgba(0, 212, 255, 0.12);
}
.sv-collapse-seq {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.04), transparent);
  border-bottom: 1px solid rgba(0, 212, 255, 0.08);
}
.sv-collapse-icon {
  font-size: 16px;
}
.sv-collapse-title {
  color: var(--text-1);
}
.sv-collapse-badge {
  font-size: 10px;
  font-weight: 800;
  background: var(--accent);
  color: #000;
  padding: 1px 7px;
  border-radius: 10px;
}
.sv-collapse-meta {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  margin-left: auto;
}
.sv-collapse-arrow {
  font-size: 12px;
  color: var(--text-3);
  transition: transform 0.2s;
  flex-shrink: 0;
}
details[open] > .sv-collapse-hdr .sv-collapse-arrow {
  transform: rotate(0deg);
}
details:not([open]) > .sv-collapse-hdr .sv-collapse-arrow {
  transform: rotate(-90deg);
}
.sv-collapse-body {
  padding: 8px 14px 12px;
}
.sv-period-am {
  background: linear-gradient(
    135deg,
    rgba(255, 183, 77, 0.1) 0%,
    rgba(255, 235, 59, 0.05) 100%
  );
  border-bottom: 2px solid rgba(255, 183, 77, 0.3);
}
.sv-period-pm {
  background: linear-gradient(
    135deg,
    rgba(103, 58, 183, 0.1) 0%,
    rgba(63, 81, 181, 0.05) 100%
  );
  border-bottom: 2px solid rgba(103, 58, 183, 0.3);
}
.sv-period-icon {
  font-size: 18px;
}
.sv-period-label {
  color: var(--text-1);
  font-size: 14px;
}
.sv-period-range {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 500;
  margin-left: auto;
}
.sv-period-stats {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-dim);
  padding: 2px 8px;
  border-radius: 10px;
}
.sv-period-empty {
  text-align: center;
  padding: 20px;
  color: var(--text-3);
  font-size: 13px;
  font-style: italic;
}
.sv-period-disabled {
  border-color: rgba(255, 255, 255, 0.06);
}
.sv-period-off-hd {
  cursor: pointer;
}
.sv-period-off-hd:hover {
  background: rgba(255, 255, 255, 0.03);
}
.sv-period-chevron {
  margin-left: auto;
  color: var(--text-3);
  transition: transform 0.2s;
}

/* ── Timeline 24h v2 ── */
/* ── Multi-Day Timeline ── */
.sv-tl-multi {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
  overflow-x: auto;
  overflow-y: visible;
}

/* ── Global Clock - compact strip ── */
.global-clock {
  display: flex;
  align-items: center;
  padding: 0 16px;
  height: 30px;
  background: rgba(10, 12, 20, 0.96);
  border-bottom: 1px solid rgba(255, 180, 50, 0.15);
  gap: 10px;
  flex-shrink: 0;
  overflow: hidden;
}
.rc-time {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.retro-clock-time {
  font-family: "Courier New", Consolas, monospace;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: #ffb432;
  text-shadow: 0 0 8px rgba(255, 180, 50, 0.55);
}
.retro-clock-ampm {
  font-family: "Courier New", monospace;
  font-size: 9px;
  font-weight: 800;
  color: #ffb432;
  opacity: 0.7;
  letter-spacing: 1px;
}
.rc-sep {
  color: rgba(255, 255, 255, 0.2);
  font-size: 13px;
}
.rc-date {
  display: flex;
  align-items: center;
  gap: 6px;
}
#retro-clock-date {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-1);
}
.rc-sub {
  font-size: 10px;
  color: var(--text-3);
}
.rc-week-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
}
.rc-wk-lbl {
  font-size: 9px;
  font-weight: 800;
  color: var(--text-3);
  letter-spacing: 1px;
}
.retro-clock-week-big {
  font-family: "Courier New", monospace;
  font-size: 14px;
  font-weight: 900;
  color: #00e5ff;
  text-shadow: 0 0 6px rgba(0, 229, 255, 0.45);
}
.rc-wk-bar {
  width: 40px;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}
.retro-clock-week-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, #00e5ff, #00ff88);
}
.rc-wk-pct {
  font-size: 9px;
  color: var(--text-3);
}

/* Old topbar kept for compat */
.sv-tl-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(
    180deg,
    rgba(0, 20, 40, 0.5) 0%,
    transparent 100%
  );
  gap: 12px;
  flex-wrap: wrap;
}
.sv-tl-topbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.sv-tl-topbar-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
  white-space: nowrap;
}
.sv-tl-topbar-right {
  flex-shrink: 0;
}
.sv-tl-compass-loading {
  font-size: 11px;
  color: var(--text-3);
}

/* Compass */
.sv-compass {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 5px 10px 5px 5px;
}
.sv-compass-svg {
  display: block;
  flex-shrink: 0;
}
.sv-compass-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sv-compass-wx {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-1);
  white-space: nowrap;
}
.sv-compass-wind {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  white-space: nowrap;
}

/* Day section */
.sv-tl-day {
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
}
.sv-tl-day:last-of-type {
  border-bottom: none;
}
.sv-tl-day-today {
  background: rgba(0, 212, 255, 0.02);
}

.sv-tl-day-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 2px 12px;
}
.sv-tl-day-label {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-1);
  white-space: nowrap;
}
.sv-tl-day-count {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 8px;
  border-radius: 10px;
}

/* Per-day weather row (aligned with ruler/tracks) */
.sv-tl-wxrow {
  display: flex;
  align-items: center;
  height: 58px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  overflow: visible;
  position: relative;
}
.sv-tl-wxrow-label {
  width: 110px;
  flex-shrink: 0;
  text-align: center;
  font-size: 14px;
  color: var(--text-3);
}
.sv-tl-wxrow-strip {
  flex: 1;
  position: relative;
  height: 100%;
}
.sv-wxr-cell {
  position: absolute;
  top: 0;
  width: calc(100% / 8);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border-right: 1px solid rgba(255, 255, 255, 0.03);
  cursor: default;
  transition: background 0.15s;
  padding: 2px 0;
}
.sv-wxr-cell:hover {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
}
.sv-wxr-top {
  display: flex;
  align-items: center;
  gap: 3px;
}
.sv-wxr-icon {
  font-size: 18px;
  line-height: 1;
}
.sv-wxr-temp {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-1);
  line-height: 1;
}
.sv-wxr-bottom {
  display: flex;
  align-items: center;
  gap: 2px;
}
.sv-wxr-compass {
  display: block;
  flex-shrink: 0;
}
.sv-wxr-spd {
  font-size: 8px;
  color: var(--text-3);
  font-weight: 600;
  line-height: 1;
}
.sv-wxr-spd small {
  font-size: 6px;
  opacity: 0.7;
}
.sv-wxr-calm {
  font-size: 8px;
  color: var(--text-3);
  opacity: 0.5;
}

/* Weather hover popup */
.sv-wx-popup {
  display: none;
  position: fixed;
  z-index: 999;
  width: 260px;
  background: rgba(18, 22, 36, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding: 14px;
  pointer-events: none;
  animation: wxPopIn 0.15s ease-out;
}
@keyframes wxPopIn {
  0% {
    opacity: 0;
    transform: translateY(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.sv-wx-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.sv-wx-popup-hour {
  font-size: 14px;
  font-weight: 900;
  color: var(--accent);
}
.sv-wx-popup-cond {
  font-size: 13px;
  color: var(--text-1);
}
.sv-wx-popup-body {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.sv-wx-popup-compass {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.sv-wx-popup-wind-label {
  font-size: 11px;
  font-weight: 700;
  color: #00e5ff;
  letter-spacing: 0.5px;
}
.sv-wx-popup-calm {
  font-size: 12px;
  color: var(--text-3);
  text-align: center;
  padding: 20px 0;
}
.sv-wx-popup-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.sv-wx-popup-stat {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sv-wx-popup-stat-icon {
  font-size: 16px;
}
.sv-wx-popup-stat-val {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-1);
  min-width: 50px;
}
.sv-wx-popup-stat-lbl {
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Ruler v2 */
.sv-tl-ruler-v2 {
  position: relative;
  height: 28px;
  border-bottom: 1px solid var(--border);
  margin-left: 110px;
  overflow: hidden;
}
.sv-tl-phase {
  position: absolute;
  top: 0;
  bottom: 0;
  opacity: 0.25;
}
.sv-tl-night-l,
.sv-tl-night-r {
  background: linear-gradient(180deg, #0a0e1a, #141830);
}
.sv-tl-dawn {
  background: linear-gradient(90deg, #1a1040, #ff8c42 80%);
}
.sv-tl-dayphase {
  background: linear-gradient(180deg, #ffa726 0%, #fff3e0 50%, #ffa726 100%);
  opacity: 0.12;
}
.sv-tl-dusk {
  background: linear-gradient(90deg, #ff6f42, #1a1040 80%);
}
.sv-tl-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.06);
}
.sv-tl-tick-major {
  background: rgba(255, 255, 255, 0.12);
}
.sv-tl-tick-lbl {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  color: var(--text-3);
  font-weight: 700;
  white-space: nowrap;
}
.sv-tl-tick-major .sv-tl-tick-lbl {
  font-size: 9px;
  color: var(--text-2);
}

/* Now marker — precise current-time indicator */
.sv-tl-now {
  position: absolute;
  top: -2px;
  bottom: -2px;
  z-index: 8;
  width: 3px;
  background: #ff2222;
  box-shadow:
    0 0 12px 3px rgba(255, 34, 34, 0.8),
    0 0 24px 6px rgba(255, 34, 34, 0.35);
  pointer-events: auto;
  cursor: pointer;
  animation: nowPulse 1.2s ease-in-out infinite;
}
.sv-tl-now::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -6px;
  right: -6px;
  pointer-events: auto;
}
@keyframes nowPulse {
  0%,
  100% {
    box-shadow:
      0 0 12px 3px rgba(255, 34, 34, 0.8),
      0 0 24px 6px rgba(255, 34, 34, 0.35);
    opacity: 1;
  }
  50% {
    box-shadow:
      0 0 22px 8px rgba(255, 34, 34, 1),
      0 0 40px 12px rgba(255, 34, 34, 0.5);
    opacity: 0.8;
  }
}
.sv-tl-now-flag {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  background: #ff2222;
  padding: 3px 9px;
  border-radius: 5px;
  white-space: nowrap;
  letter-spacing: 0.5px;
  box-shadow:
    0 2px 10px rgba(255, 34, 34, 0.7),
    0 0 20px rgba(255, 34, 34, 0.3);
  animation: nowFlagPulse 1.2s ease-in-out infinite;
}
@keyframes nowFlagPulse {
  0%,
  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
    box-shadow: 0 2px 10px rgba(255, 34, 34, 0.7);
  }
  50% {
    opacity: 0.8;
    transform: translateX(-50%) scale(1.1);
    box-shadow:
      0 2px 18px rgba(255, 34, 34, 1),
      0 0 30px rgba(255, 34, 34, 0.5);
  }
}
.sv-tl-now-flag::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #ff2222;
}
.sv-tl-now-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  z-index: 6;
  background: #ff2222;
  box-shadow:
    0 0 12px 3px rgba(255, 34, 34, 0.7),
    0 0 24px 6px rgba(255, 34, 34, 0.3);
  pointer-events: auto;
  cursor: pointer;
  animation: nowPulse 1.2s ease-in-out infinite;
}
.sv-tl-now-line::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -6px;
  right: -6px;
  pointer-events: auto;
}
/* Now-line detail popup */
.sv-now-popup {
  display: none;
  position: fixed;
  z-index: 1000;
  width: 280px;
  background: rgba(18, 22, 36, 0.97);
  border: 1px solid rgba(255, 34, 34, 0.3);
  border-radius: 12px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.7),
    0 0 20px rgba(255, 34, 34, 0.15);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  padding: 16px;
  pointer-events: none;
  animation: wxPopIn 0.15s ease-out;
}
.sv-now-popup-time {
  font-size: 22px;
  font-weight: 900;
  color: #ff4444;
  text-align: center;
  letter-spacing: 1px;
  text-shadow: 0 0 12px rgba(255, 68, 68, 0.6);
}
.sv-now-popup-date {
  font-size: 11px;
  color: var(--text-3);
  text-align: center;
  margin-bottom: 10px;
}
.sv-now-popup-progress {
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  margin: 8px 0 12px;
  overflow: hidden;
}
.sv-now-popup-progress-bar {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #ff4444, #ff8844);
  transition: width 0.3s;
}
.sv-now-popup-pct {
  font-size: 10px;
  color: var(--text-3);
  text-align: center;
  margin-top: -6px;
  margin-bottom: 8px;
}
.sv-now-popup-section {
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin: 8px 0 4px;
  font-weight: 700;
}
.sv-now-popup-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
  color: var(--text-1);
}
.sv-now-popup-item-icon {
  font-size: 14px;
}
.sv-now-popup-item-name {
  font-weight: 700;
  flex: 1;
}
.sv-now-popup-item-time {
  font-size: 11px;
  color: var(--text-3);
}
.sv-now-popup-none {
  font-size: 11px;
  color: var(--text-3);
  font-style: italic;
  padding: 2px 0;
}

/* Schedule tracks v2 */
.sv-tl-tracks-v2 {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 6px 0;
}
.sv-tl-row {
  display: flex;
  align-items: center;
  min-height: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  transition: background 0.1s;
}
.sv-tl-row:hover {
  background: rgba(255, 255, 255, 0.02);
}
.sv-tl-row-label {
  width: 110px;
  flex-shrink: 0;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sv-tl-row-icon {
  font-size: 12px;
}
.sv-tl-row-name {
  overflow: hidden;
  text-overflow: ellipsis;
}
.sv-tl-row-bar {
  flex: 1;
  position: relative;
  height: 24px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 3px;
  overflow: hidden;
}
.sv-tl-bar {
  position: absolute;
  top: 3px;
  bottom: 3px;
  border-radius: 3px;
  min-width: 4px;
  background: var(--bar-clr, #00d4ff);
  opacity: 0.8;
  cursor: default;
  transition:
    opacity 0.15s,
    transform 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 6px rgba(0, 212, 255, 0.4);
  box-shadow: 0 0 6px
    color-mix(in srgb, var(--bar-clr, #00d4ff) 40%, transparent);
}
.sv-tl-bar:hover {
  opacity: 1;
  transform: scaleY(1.3);
  z-index: 3;
}
.sv-tl-bar-text {
  font-size: 8px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  overflow: hidden;
}

/* Legend v2 */
.sv-tl-legend-v2 {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-3);
  font-weight: 600;
  clear: both;
}
.sv-tl-leg2 {
  display: flex;
  align-items: center;
  gap: 4px;
}
.sv-tl-ldot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.sv-tl-ldot-now {
  background: #ff4444;
  box-shadow: 0 0 4px #ff4444;
}
.sv-tl-leg-sep {
  color: var(--border);
  font-weight: 300;
}
.sv-tl-leg-now {
  color: #ff6666;
}

/* Old timeline classes hidden */
.sv-tl-v2 {
  display: none;
}
.sv-tl-wx {
  display: none;
}
.sv-tl-periods {
  display: none;
}
.sv-tl-ruler {
  display: none;
}
.sv-tl-tracks {
  display: none;
}
.sv-tl-noon-line {
  display: none;
}

/* ── Mobile tweaks ── */
@media (max-width: 600px) {
  .retro-clock-bar {
    padding: 8px 10px;
    gap: 10px;
  }
  .retro-clock-time {
    font-size: 20px;
    letter-spacing: 1px;
  }
  .retro-clock-face {
    padding: 6px 10px;
  }
  .retro-clock-date {
    font-size: 10px;
  }
  .retro-clock-sub {
    font-size: 9px;
  }
  .retro-clock-week {
    padding: 4px 10px;
    min-width: 70px;
  }
  .retro-clock-week-big {
    font-size: 22px;
  }
  .sv-tl-topbar {
    padding: 8px 10px;
  }
  .sv-tl-topbar-title {
    font-size: 10px;
  }
  .sv-compass {
    padding: 4px 6px 4px 4px;
    gap: 5px;
  }
  .sv-compass-svg {
    width: 42px;
    height: 42px;
  }
  .sv-compass-wx {
    font-size: 11px;
  }
  .sv-compass-wind {
    font-size: 9px;
  }
  .sv-tl-row-label {
    width: 80px;
    font-size: 10px;
    padding: 0 6px;
  }
  .sv-tl-ruler-v2 {
    margin-left: 80px;
  }
  .sv-tl-wxrow-label {
    width: 80px;
    font-size: 10px;
  }
  .sv-tl-day-hd {
    padding: 6px 8px 2px 8px;
  }
  .sv-tl-day-label {
    font-size: 11px;
  }
  .sv-tl-wxrow {
    height: 52px;
  }
  .sv-wxr-icon {
    font-size: 14px;
  }
  .sv-wxr-temp {
    font-size: 9px;
  }
  .sv-wxr-compass {
    width: 20px;
    height: 20px;
  }
}

/* ── Weekly Calendar ── */
.sv-weekly {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  overflow: hidden;
}
.sv-wk-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.sv-wk-col {
  background: var(--bg-3);
  border-radius: var(--radius-sm);
  padding: 6px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  border: 1px solid transparent;
  transition: border-color 0.2s;
}
.sv-wk-today {
  border-color: var(--accent);
  background: rgba(0, 212, 255, 0.04);
}
.sv-wk-hd {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-bottom: 4px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.sv-wk-day {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-1);
}
.sv-wk-full {
  font-size: 9px;
  color: var(--text-3);
  font-weight: 500;
  display: none;
}
.sv-wk-today-dot {
  color: var(--accent);
  font-size: 8px;
  margin-left: auto;
}
.sv-wk-count {
  font-size: 10px;
  color: var(--text-3);
  font-weight: 600;
  margin-bottom: 6px;
}
.sv-wk-slots {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}
.sv-wk-empty {
  text-align: center;
  color: var(--text-3);
  font-size: 12px;
  opacity: 0.4;
  padding: 10px 0;
}
.sv-wk-slot {
  padding: 4px 5px;
  border-radius: 4px;
  font-size: 10px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-left: 3px solid transparent;
}
.sv-wk-am {
  background: rgba(255, 183, 77, 0.08);
  border-left-color: rgba(255, 183, 77, 0.5);
}
.sv-wk-pm {
  background: rgba(103, 58, 183, 0.08);
  border-left-color: rgba(103, 58, 183, 0.5);
}
.sv-wk-slot-time {
  font-weight: 800;
  font-family: "SF Mono", Consolas, monospace;
  color: var(--accent);
  font-size: 10px;
}
.sv-wk-slot-zone {
  color: var(--text-2);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sv-wk-slot-dur {
  color: var(--text-3);
  font-size: 9px;
}

/* ── Weekly responsive ── */
@media (min-width: 769px) {
  .sv-wk-full {
    display: inline;
  }
}
@media (max-width: 600px) {
  .sv-wk-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .sv-wk-col {
    min-height: 90px;
  }
  .sv-tl-track-label {
    width: 70px;
    font-size: 10px;
  }
  .sv-tab {
    padding: 6px 8px;
    font-size: 11px;
  }
  .sv-tab-icon {
    font-size: 12px;
  }
}
@media (max-width: 400px) {
  .sv-wk-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================================
   VIEW: Logs
   ============================================================ */
.logs-table {
  width: 100%;
  border-collapse: collapse;
}
.logs-table th {
  text-align: left;
  padding: 8px 12px;
  background: var(--bg-3);
  color: var(--accent);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
}
.logs-table td {
  padding: 8px 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--border-light);
}
.logs-table tr:hover td {
  background: var(--bg-card-hover);
}
.log-status {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 600;
  white-space: nowrap;
}
.log-status.completed {
  background: var(--online);
  color: #000;
}
.log-status.interrupted {
  background: var(--warning);
  color: #000;
}
.log-status.failed {
  background: var(--zone-error);
  color: #fff;
}
.log-row-failed td {
  opacity: 0.7;
}
.log-row-failed td:first-child {
  border-left: 3px solid var(--zone-error);
}

/* ══════ Log Checkboxes + Bulk Bar ══════ */
.log-th-cb,
.log-td-cb {
  width: 36px;
  text-align: center;
  padding: 6px 4px !important;
}
.log-cb,
#log-select-all {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--accent);
}
.log-row-selected td {
  background: rgba(0, 212, 255, 0.08) !important;
}
.log-bulk-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  margin-bottom: 8px;
  background: var(--bg-2);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-1);
}
#log-sel-count {
  font-weight: 700;
  color: var(--accent);
}

/* ══════ Log Sub-info Lines ══════ */
.log-zone-id {
  font-size: 10px;
  color: var(--text-3);
  font-weight: 400;
  margin-top: 1px;
}
.log-esp-label {
  font-size: 10px;
  color: var(--text-3);
  font-weight: 400;
  margin-top: 1px;
}
.log-date-rel {
  font-size: 10px;
  color: var(--text-3);
  margin-top: 1px;
}
.log-no-data {
  color: var(--text-3);
}
.recent-failed {
  opacity: 0.7;
  border-left: 3px solid var(--zone-error);
  padding-left: 6px;
}
.zd-log-failed {
  opacity: 0.7;
  border-left: 3px solid var(--zone-error);
  padding-left: 6px;
}

/* ============================================================
   VIEW: Alerts
   ============================================================ */
.alerts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}
.alerts-bulk-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.alerts-select-all-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-2);
  cursor: pointer;
}
.alert-check-label {
  display: flex;
  align-items: center;
  margin-right: 6px;
}
.alert-check {
  cursor: pointer;
  accent-color: var(--accent);
}

/* Base card */
.alert-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--zone-error);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 8px;
  animation: alertSlideIn 0.3s;
}
/* Type-specific left border */
.alert-card--offline { border-left-color: #f59e0b; }
.alert-card--timeout { border-left-color: #ef4444; }
.alert-card--signal  { border-left-color: #6366f1; }
.alert-card--generic { border-left-color: var(--zone-error); }

@keyframes alertSlideIn {
  0% { opacity: 0; transform: translateX(-10px); }
  100% { opacity: 1; transform: translateX(0); }
}
.alert-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

/* Type badge */
.alert-type-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.alert-type-badge--offline { background: rgba(245,158,11,0.15); color: #f59e0b; }
.alert-type-badge--timeout { background: rgba(239,68,68,0.15); color: #ef4444; }
.alert-type-badge--signal  { background: rgba(99,102,241,0.15); color: #6366f1; }
.alert-type-badge--generic { background: rgba(239,68,68,0.15); color: var(--zone-error); }

/* Detail tags (ESP / zone) */
.alert-detail-tags {
  display: flex;
  gap: 4px;
  align-items: center;
}
.alert-esp-tag, .alert-zone-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--bg-2);
  color: var(--text-2);
  border: 1px solid var(--border);
}

.alert-time {
  font-size: 11px;
  color: var(--text-3);
  margin-left: auto;
}
.alert-msg {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.4;
}
.alert-actions {
  margin-top: 8px;
}

/* No data */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-3);
}
.empty-state-icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.5;
}
.empty-state-text {
  font-size: 14px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Mobile: show bottom nav, hide top tabs */
@media (max-width: 768px) {
  .top-tabs {
    display: none;
  }
  .bottom-nav {
    display: flex;
  }
  .fab {
    bottom: calc(var(--bnav-h) + 20px);
  }
  .app-content {
    padding: 10px;
  }
  .dash-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .zones-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .esp-grid {
    grid-template-columns: 1fr;
  }
  .header-greeting {
    display: none;
  }
  .modal-card {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  /* Map mobile */
  .m-bar {
    padding: 4px 6px;
    gap: 4px;
  }
  .m-bar-l {
    gap: 4px;
  }
  .m-title {
    font-size: 13px;
    display: none;
  }
  .m-chip {
    display: none;
  }
  .m-nav {
    gap: 0;
    padding: 1px;
  }
  .m-nav-btn {
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
    font-size: 13px;
  }
  .m-btn-txt {
    display: none;
  }
  .m-btn {
    padding: 4px 7px;
    font-size: 10px;
  }
  .m-mini {
    display: none !important;
  }
  .m-panel {
    position: fixed;
    bottom: var(--bnav-h);
    left: 0;
    right: 0;
    top: auto;
    width: auto;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: 60vh;
    padding: 14px;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }
  .m-ebar {
    flex-direction: column;
    gap: 5px;
    padding: 5px 8px;
  }
  .m-ebtns {
    width: 100%;
  }
  .m-leg {
    font-size: 9px;
    padding: 3px 8px;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 70%;
  }
  .m-leg-bar {
    display: none;
  }
  .m-leg-pill {
    font-size: 7px;
    padding: 1px 4px;
  }

  .logs-table-wrap {
    overflow-x: auto;
  }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
  .bottom-nav {
    display: flex;
  }
  .top-tabs {
    display: none;
  }
  .fab {
    bottom: calc(var(--bnav-h) + 20px);
  }
  .dash-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .zones-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Map tablet */
  .m-panel {
    position: fixed;
    bottom: var(--bnav-h);
    left: 0;
    right: 0;
    top: auto;
    width: auto;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    z-index: 200;
  }
}

/* Desktop: show top tabs, hide bottom nav */
@media (min-width: 1025px) {
  .top-tabs {
    display: flex;
  }
  .bottom-nav {
    display: none;
  }
  .fab {
    bottom: 24px;
    right: 24px;
  }
  .modal-card {
    border-radius: var(--radius-lg);
    max-height: 80vh;
  }
  .modal {
    align-items: center;
  }
  .dash-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .zones-grid {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  }

  /* Map desktop */
  .m-panel {
    width: 320px;
  }
}

/* Large desktop */
@media (min-width: 1400px) {
  .app-content {
    padding: 20px 40px;
  }
  .m-panel {
    width: 360px;
  }
}

/* ============================================================
   SCHEDULE FORM / CONFIG MODALS
   ============================================================ */

/* Config banners (rain delay / override) */
.config-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  font-size: 13px;
  gap: 8px;
}
.rain-delay-banner {
  background: rgba(0, 136, 255, 0.12);
  border: 1px solid rgba(0, 136, 255, 0.3);
  color: var(--text-1);
}
.override-banner {
  background: rgba(255, 170, 68, 0.12);
  border: 1px solid rgba(255, 170, 68, 0.3);
  color: var(--text-1);
}

/* Day chips */
.day-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--border);
  color: var(--text-3);
  background: transparent;
  transition: all 0.15s;
}
.day-chip.active-day {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: var(--accent);
}

/* Schedule delete button */
.sched-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sched-del {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 68, 68, 0.12);
  color: var(--zone-error);
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.sched-del:hover {
  background: rgba(255, 68, 68, 0.25);
}

/* Modal structure for dynamic modals */
.modal-content {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
  animation: slideUp 0.25s;
  z-index: 1;
}
.sched-form-modal {
  max-width: 440px;
}
.modal-content .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.modal-content .modal-header h3 {
  font-size: 15px;
  color: var(--text-1);
  font-weight: 700;
}
.modal-close-x {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 59, 59, 0.08);
  color: #ff3b3b;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 0 6px rgba(255, 59, 59, 0.4);
  transition: all 0.15s;
}
.modal-close-x:hover {
  background: rgba(255, 59, 59, 0.18);
  color: #ff1a1a;
  text-shadow: 0 0 10px rgba(255, 59, 59, 0.7);
}
.modal-content .modal-body {
  padding: 16px 20px;
  max-height: 55vh;
  overflow-y: auto;
}
.modal-content .modal-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
}
@media (min-width: 1025px) {
  .modal-content {
    border-radius: var(--radius-lg);
    max-height: 80vh;
  }
}

/* Schedule form fields */
.sf-field {
  margin-bottom: 14px;
}
.sf-field label {
  display: block;
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: 5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.sf-select,
.sf-input {
  width: 100%;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--text-1);
  font-size: 13px;
  outline: none;
  font-family: inherit;
}
.sf-select:focus,
.sf-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.12);
}
.sf-days {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.sf-range {
  width: 100%;
  -webkit-appearance: none;
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  outline: none;
}
.sf-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}

/* Buttons (modal context) */
.modal-content .btn-primary {
  width: auto;
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--accent);
  color: #000;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: opacity 0.15s;
  letter-spacing: 0;
}
.modal-content .btn-primary:hover {
  opacity: 0.85;
  filter: none;
  box-shadow: none;
}
.modal-content .btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.modal-content .btn-outline {
  padding: 8px 18px;
}
/* Sidebar rain delay chip buttons — see .ms-chip-btn */

/* Override / Quick Run zone groups */
.ov-groups {
  max-height: 40vh;
  overflow-y: auto;
}
.ov-group {
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px;
}
.ov-group-hd {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-1);
}
.ov-zone-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  padding-left: 20px;
}
.ov-zone-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-2);
  cursor: pointer;
}

/* ══════ Quick Run Modal (Tabs) ══════ */
.qr-modal-wide {
  max-width: 520px;
}
.qr-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  padding: 0 16px;
  gap: 2px;
  background: var(--bg-2);
}
.qr-tab {
  flex: 1;
  padding: 10px 4px;
  font-size: 12px;
  font-weight: 600;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  text-align: center;
}
.qr-tab:hover {
  color: var(--text-1);
}
.qr-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.qr-panel {
  padding: 16px 20px;
  max-height: 55vh;
  overflow-y: auto;
}

/* ── Quick Run / Schedule day buttons ── */
.qrs-days {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.qrs-day-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qrs-day-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.qrs-day-btn.active {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
}

/* ── Upcoming / Próximos Riegos list ── */
.qru-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.qru-loading,
.qru-empty {
  text-align: center;
  padding: 24px 0;
  color: var(--text-3);
  font-size: 13px;
}
.qru-alert {
  background: rgba(255, 193, 7, 0.12);
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 12px;
  color: #ffc107;
}
.qru-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.qru-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-3);
  border: 1px solid var(--border);
}
.qru-item.qru-blocked {
  opacity: 0.55;
  border-color: rgba(255, 100, 100, 0.3);
}
.qru-item-left {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.qru-item-right {
  display: flex;
  align-items: center;
  gap: 6px;
}
.qru-item-time {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
}
.qru-item-zone {
  font-size: 11px;
  color: var(--text-3);
}
.qru-item-dur {
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
}
.qru-item-blocked {
  font-size: 14px;
}
.qru-item-ok {
  font-size: 12px;
  color: var(--zone-active);
}

/* Schedule summary inside upcoming tab */
.qru-summary {
  font-size: 12px;
  color: var(--text-2);
  margin-bottom: 8px;
}
.qru-sum-ok {
  color: var(--zone-active);
  font-weight: 600;
}
.qru-sum-off {
  color: var(--text-3);
}
.qru-sched-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  border: 1px solid var(--border);
  margin-bottom: 4px;
}
.qru-sched-left {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.qru-sched-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  flex-shrink: 0;
}
.qru-sched-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qru-sched-zone {
  font-size: 11px;
  color: var(--text-3);
}
.qru-sched-days {
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
}
.qru-sched-dur {
  font-size: 11px;
  color: var(--text-2);
}

/* ── Smart Window ── */
.sw-intro {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
}
.sw-config {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sw-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sw-field-lbl {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
}
.sw-time-sel {
  max-width: 180px;
}
.sw-summary {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 4px;
}
.sw-gap-info {
  font-size: 12px;
  color: var(--accent);
  margin-bottom: 12px;
}
.sw-preview-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 35vh;
  overflow-y: auto;
}
.sw-preview-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
}
.sw-preview-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.sw-preview-time {
  font-weight: 700;
  color: var(--accent);
  min-width: 68px;
}
.sw-preview-zone {
  flex: 1;
  color: var(--text-1);
}
.sw-preview-dur {
  font-size: 11px;
  color: var(--text-3);
}

/* ── Quick Run blue theme overrides (water theme instead of IPM purple) ── */
.qr-btn-run {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #1e90ff, #0070dd);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.qr-btn-run:hover {
  background: linear-gradient(135deg, #3aa0ff, #1e90ff);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(30, 144, 255, 0.3);
}
.qr-btn-run:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ── Zone Type Editor (settings) ── */
.zt-list {
  max-height: 50vh;
  overflow-y: auto;
}
.zt-esp-group {
  margin-bottom: 10px;
}
.zt-esp-hd {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.zt-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--bg-3);
}
.zt-zone-name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zt-zone-id {
  font-size: 11px;
  color: var(--text-3);
  flex-shrink: 0;
  min-width: 80px;
}
.zt-select {
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-1);
  font-size: 12px;
  cursor: pointer;
  flex-shrink: 0;
}
.zv-toggle {
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid;
  font-size: 12px;
  cursor: pointer;
  font-weight: 600;
  flex-shrink: 0;
}
.zv-visible {
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
  border-color: #22c55e44;
}
.zv-hidden {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border-color: #ef444444;
}

/* ── Time Control Stepper ── */
.tc-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tc-label {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 700;
  min-width: 50px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.tc-ctrl {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-2);
}
.tc-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: var(--bg-3);
  color: var(--accent);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tc-btn:hover {
  background: rgba(0, 212, 255, 0.12);
}
.tc-btn:active {
  background: rgba(0, 212, 255, 0.22);
}
.tc-btn-sm {
  width: 30px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
}
.tc-btn-sm:hover {
  color: var(--accent);
}
.tc-val {
  min-width: 40px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-1);
  padding: 0 4px;
  font-variant-numeric: tabular-nums;
}
.tc-unit {
  font-size: 12px;
  color: var(--text-3);
}
.tc-sep {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-2);
  padding: 0 3px;
  align-self: flex-end;
  margin-bottom: 2px;
}
.tc-time-picker {
  display: flex;
  align-items: flex-end;
  gap: 4px;
}
.tc-ampm-picker {
  align-items: center;
}
.tc-ampm-btn {
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid rgba(0, 212, 255, 0.3);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s;
  min-width: 50px;
  text-align: center;
  user-select: none;
}
.tc-ampm-btn:hover {
  background: rgba(0, 212, 255, 0.2);
}

/* ── New Time Picker (AM/PM grid) ── */
.tp-picker {
  position: relative;
}
.tp-display {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-2);
}
.tp-time-show {
  font-size: 22px;
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}
.tp-edit-btn {
  margin-left: auto;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.tp-edit-btn:hover {
  background: rgba(0, 212, 255, 0.12);
}
.tp-dropdown {
  margin-top: 8px;
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-2);
  animation: slideUp 0.15s ease-out;
}
.tp-section {
  margin-bottom: 10px;
}
.tp-section:last-child {
  margin-bottom: 0;
}
.tp-sec-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.tp-hour-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}
.tp-hr-btn {
  height: 38px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--text-1);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tp-hr-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(0, 212, 255, 0.08);
}
.tp-hr-btn.tp-hr-sel {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(0, 212, 255, 0.35);
}
.tp-min-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.tp-min-input {
  width: 52px;
  height: 38px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-1);
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  font-variant-numeric: tabular-nums;
}
.tp-min-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.2);
}
.tp-min-step {
  width: 42px;
  height: 38px;
  font-size: 14px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.tp-ampm-row {
  display: flex;
  gap: 4px;
}
.tp-ampm-opt {
  flex: 1;
  height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--text-2);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 1px;
}
.tp-ampm-opt:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.tp-ampm-opt.tp-ampm-sel {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(0, 212, 255, 0.3);
}

/* ── Quick Run area groups ── */
.qr-area-list {
  max-height: 40vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.qr-area-group {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  background: var(--bg-2);
}
.qr-area-hd {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-1);
}
.qr-area-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.qr-area-cnt {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 400;
}
.qr-area-zones {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  padding-left: 24px;
}
.qr-area-zone {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-2);
  cursor: pointer;
}

/* ── Map panel schedule button ── */
.mp-sched-btn {
  background: rgba(0, 212, 255, 0.1) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(0, 212, 255, 0.25) !important;
  margin-top: 6px;
}
.mp-sched-btn:hover {
  background: rgba(0, 212, 255, 0.2) !important;
}

/* ── Polygon Zone Picker modal ── */
.pzp-modal {
  max-width: 440px;
}
.pzp-search {
  margin-bottom: 12px;
}
.pzp-list {
  max-height: 50vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pzp-group-hd {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.pzp-zone-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-3);
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
  color: var(--text-1);
  font-size: 13px;
  margin-bottom: 3px;
}
.pzp-zone-btn:hover {
  border-color: var(--accent);
  background: rgba(0, 212, 255, 0.06);
}
.pzp-zone-label {
  flex: 1;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pzp-zone-id {
  font-size: 11px;
  color: var(--text-3);
  flex-shrink: 0;
}
.pzp-zone-mode {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--text-3);
  flex-shrink: 0;
}
.pzp-zone-mode.pzp-has-poly {
  background: rgba(0, 212, 255, 0.12);
  color: var(--accent);
}

/* ══════ Schedule Edit Button ══════ */
.sched-edit {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 212, 255, 0.1);
  color: var(--accent);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.sched-edit:hover {
  background: rgba(0, 212, 255, 0.25);
}
.sf-readonly {
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
}

/* ══════ Log Filters ══════ */
.log-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.log-filter-ctrl {
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--text-1);
  font-size: 12px;
  outline: none;
  min-width: 0;
}
.log-filter-ctrl:focus {
  border-color: var(--accent);
}
#log-filter-custom-dates {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.log-count {
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 8px;
}

/* ══════ Zone Detail Panel ══════ */
.zone-detail-modal {
  max-width: 420px;
}
.zone-detail-modal .modal-header {
  display: flex;
  align-items: center;
  gap: 6px;
}
.zone-detail-modal .modal-header h3 {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zd-rename-btn {
  font-size: 14px;
  padding: 2px 6px;
}

/* Status banners */
.zd-status-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 10px;
}
.zd-banner-active {
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
}
.zd-banner-pending {
  background: rgba(234, 179, 8, 0.12);
  color: #eab308;
}
.zd-banner-fail {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}
.zd-banner-treatment {
  background: rgba(168, 85, 247, 0.12);
  color: #a855f7;
}

/* IPM Treatment banners — zone detail panel */
.zd-tx-info-banner,
.zd-tx-block-banner {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
}
.zd-tx-info-banner {
  background: rgba(168, 85, 247, 0.08);
  border: 1px solid rgba(168, 85, 247, 0.25);
}
.zd-tx-block-banner {
  background: rgba(168, 85, 247, 0.15);
  border: 2px solid rgba(168, 85, 247, 0.5);
}
.zd-tx-info-icon,
.zd-tx-block-icon {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}
.zd-tx-info-body,
.zd-tx-block-body {
  flex: 1;
  min-width: 0;
}
.zd-tx-info-title,
.zd-tx-block-title {
  font-weight: 800;
  font-size: 13px;
  color: #a855f7;
}
.zd-tx-block-title {
  color: #c084fc;
}
.zd-tx-info-sub {
  font-size: 11px;
  color: var(--text-2);
  margin-top: 2px;
  opacity: 0.85;
}
.zd-tx-info-time,
.zd-tx-block-time {
  font-size: 12px;
  font-weight: 700;
  color: #a855f7;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.zd-tx-block-product {
  font-size: 12px;
  color: var(--text-1);
  margin-top: 2px;
}
.zd-tx-info-notes,
.zd-tx-block-notes {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 3px;
  font-style: italic;
}
.zd-banner-action {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.zd-compact-timer {
  font-variant-numeric: tabular-nums;
  font-size: 15px;
}

/* Summary cards */
.zd-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.zd-sum-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg-3);
  border-radius: var(--radius-sm);
}
.zd-sum-icon {
  font-size: 16px;
  line-height: 1;
  margin-top: 2px;
}
.zd-sum-info {
  flex: 1;
  min-width: 0;
}
.zd-sum-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3);
  font-weight: 600;
}
.zd-sum-value {
  font-size: 13px;
  color: var(--text-1);
  font-weight: 600;
  margin-top: 2px;
}
.zd-sum-none {
  color: var(--text-3);
  font-weight: 400;
}
.zd-sum-days {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}
.zd-day-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  background: var(--bg-2);
  color: var(--text-3);
  border: 1px solid var(--border);
}
.zd-day-on {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Admin action buttons */
.zd-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.zd-act-btn {
  flex: 1;
  padding: 9px 8px;
  font-size: 12px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  text-align: center;
}
.zd-act-primary {
  background: var(--accent);
  color: #fff;
}
.zd-act-danger {
  background: var(--danger, #ef4444);
  color: #fff;
}
.zd-act-outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-2);
}
.zd-act-treatment {
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.3);
  color: #a855f7;
}
.zd-act-treatment:hover {
  background: rgba(168, 85, 247, 0.25);
}
.zd-act-treatment-cancel {
  background: transparent;
  border: 1px solid rgba(168, 85, 247, 0.3);
  color: #a855f7;
}
.zd-act-treatment-cancel:hover {
  background: rgba(168, 85, 247, 0.1);
}

/* IPM History button */
.zd-act-ipm-hist {
  background: rgba(168, 85, 247, 0.08);
  border: 1px solid rgba(168, 85, 247, 0.2);
  color: #c084fc;
  font-size: 14px;
}
.zd-act-ipm-hist:hover {
  background: rgba(168, 85, 247, 0.18);
}

/* IPM History Modal */
.ipm-hist-modal {
  max-height: 85vh;
}
.ipmh-body {
  overflow-y: auto;
  max-height: 65vh;
  padding-bottom: 12px;
}
.ipmh-loading {
  text-align: center;
  padding: 32px;
  color: var(--text-3);
  font-size: 15px;
}
.ipmh-empty {
  text-align: center;
  padding: 40px 20px;
}
.ipmh-empty-icon {
  font-size: 36px;
  margin-bottom: 8px;
}
.ipmh-empty-text {
  color: var(--text-3);
  font-size: 15px;
  line-height: 1.4;
}
.ipmh-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.ipmh-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(168, 85, 247, 0.08);
  border: 1px solid rgba(168, 85, 247, 0.15);
  border-radius: 10px;
  padding: 10px 8px;
  gap: 3px;
}
.ipmh-stat-val {
  font-size: 22px;
  font-weight: 700;
  color: #c084fc;
}
.ipmh-stat-lbl {
  font-size: 13px;
  color: var(--text-3);
  text-align: center;
  line-height: 1.3;
}
.ipmh-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ipmh-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 14px 16px;
  border-left: 3px solid rgba(168, 85, 247, 0.4);
}
.ipmh-card-clear {
  border-left-color: rgba(239, 68, 68, 0.4);
}
.ipmh-card-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.ipmh-badge {
  font-size: 13px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 10px;
}
.ipmh-badge-set {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
}
.ipmh-badge-clear {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
}
.ipmh-card-date {
  font-size: 13px;
  color: var(--text-3);
  margin-left: auto;
  font-weight: 500;
}
.ipmh-card-details {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ipmh-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  padding: 3px 0;
}
.ipmh-detail-lbl {
  color: var(--text-3);
  font-weight: 500;
  font-size: 13px;
}
.ipmh-detail-val {
  color: var(--text-1);
  text-align: right;
  max-width: 60%;
  word-break: break-word;
  font-size: 14px;
  font-weight: 500;
}
.ipmh-wx {
  font-size: 11px;
  color: var(--text-3);
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
  padding: 4px 8px;
  margin-top: 4px;
}

/* IPM History Tabs */
.ipmh-tabs {
  display: flex; gap: 4px; margin-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 6px;
}
.ipmh-tab {
  flex: 1; padding: 10px 10px; border: none; background: transparent;
  color: var(--text-3); font-size: .95rem; font-weight: 600; cursor: pointer;
  border-radius: 8px 8px 0 0; transition: all .2s;
}
.ipmh-tab:hover { background: rgba(255,255,255,0.04); color: var(--text-1); }
.ipmh-tab-active { background: rgba(168,85,247,0.12); color: #c084fc; }
.ipmh-tab-count {
  font-size: .8rem; font-weight: 700; background: rgba(168,85,247,0.2);
  color: #c084fc; border-radius: 8px; padding: 2px 8px; margin-left: 4px;
}
.ipmh-tab-content { }
.ipmh-empty-sm { text-align: center; color: var(--text-3); padding: 24px; font-size: 1rem; line-height: 1.4; }

/* IPM Groups tab */
.ipmh-groups-list { display: flex; flex-direction: column; gap: 8px; }
.ipmh-group-card {
  background: rgba(168,85,247,0.05);
  border: 1px solid rgba(168,85,247,0.12);
  border-left: 3px solid rgba(168,85,247,0.4);
  border-radius: 10px;
  padding: 14px 16px;
}
.ipmh-group-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.ipmh-group-name {
  font-size: 1.05rem; font-weight: 700; color: var(--text-1);
}
.ipmh-group-date {
  font-size: .9rem; color: var(--text-3); font-weight: 500;
}
.ipmh-group-details {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.ipmh-group-tag {
  font-size: .9rem; color: var(--text-2);
  background: rgba(255,255,255,0.04);
  border-radius: 8px; padding: 4px 10px;
  font-weight: 500;
}

/* Dual-column layout */
.ipm-hist-wide.modal-content,
.ipm-hist-wide.tx-modal-pro { max-width: 92vw !important; width: 850px; }
.ipmh-dual { display: flex; gap: 14px; min-height: 200px; }
.ipmh-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ipmh-col-title {
  font-size: 1.1rem; font-weight: 700; color: var(--text-2);
  margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
}
.ipmh-col-count {
  font-size: .9rem; font-weight: 600; color: var(--text-3);
  background: rgba(255,255,255,0.06); border-radius: 10px; padding: 3px 10px;
}

/* Report card actions */
.ipmh-card-actions { display: flex; gap: 6px; margin-top: 8px; }
.ipmh-btn-done, .ipmh-btn-del {
  flex: 1; padding: 8px 12px; border: none; border-radius: 8px;
  font-size: .9rem; font-weight: 600; cursor: pointer; transition: all .2s;
}
.ipmh-btn-done {
  background: rgba(34,197,94,0.12); color: #22c55e;
}
.ipmh-btn-done:hover { background: rgba(34,197,94,0.25); }
.ipmh-btn-del {
  background: rgba(239,68,68,0.1); color: #ef4444;
}
.ipmh-btn-del:hover { background: rgba(239,68,68,0.2); }

/* Archive section */
.ipmh-archive-title {
  font-size: 1rem; font-weight: 600; color: var(--text-3);
  margin: 14px 0 8px; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.ipmh-archive-list { display: flex; flex-direction: column; gap: 4px; }
.ipmh-row-done {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: rgba(34,197,94,0.04); border-radius: 8px; font-size: .95rem;
  color: var(--text-3);
}
.ipmh-row-done .ipmh-compact-main { font-weight: 500; }
.ipmh-rpt-plant { color: #22c55e; font-size: .95rem; flex-shrink: 0; font-weight: 600; }

@media (max-width: 600px) {
  .ipmh-dual { flex-direction: column; }
  .ipm-hist-wide.modal-content,
  .ipm-hist-wide.tx-modal-pro { max-width: 98vw !important; width: 98vw; }
}

/* Report cards (bigger) */
.ipmh-card-report {
  border-left-color: rgba(251,146,60,0.5);
  background: rgba(251,146,60,0.04);
}
.ipmh-badge-report {
  background: rgba(251,146,60,0.15);
  color: #fb923c;
}

/* Compact treatment rows */
.ipmh-compact-list { display: flex; flex-direction: column; gap: 6px; }
.ipmh-compact-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: rgba(255,255,255,0.02); border-radius: 8px; font-size: 1rem;
}
.ipmh-badge-sm { font-size: 16px; flex-shrink: 0; }
.ipmh-compact-date { color: var(--text-3); min-width: 60px; flex-shrink: 0; font-size: .95rem; font-weight: 500; }
.ipmh-compact-main { color: var(--text-1); font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; }
.ipmh-compact-pest { color: #fb923c; flex-shrink: 0; font-size: .95rem; font-weight: 500; }
.ipmh-compact-hrs { color: var(--text-3); flex-shrink: 0; font-size: .95rem; }
.ipmh-compact-wx { color: var(--text-3); flex-shrink: 0; font-size: .9rem; }
.ipmh-compact-by { color: var(--text-3); flex-shrink: 0; margin-left: auto; font-size: .95rem; }

/* ── IPM Sold button inside history modal ── */
.ipmh-btn-ipm-sold {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: rgba(34,197,94,0.07); border: 1px solid rgba(34,197,94,0.22);
  color: #4ade80; padding: 11px 16px; border-radius: 10px;
  font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.15s;
  margin-bottom: 10px;
}
.ipmh-btn-ipm-sold:hover { background: rgba(34,197,94,0.15); border-color: rgba(34,197,94,0.4); }
.ipmh-sold-arrow { font-size: 16px; opacity: 0.7; }

/* ── Monthly Analysis collapsible ── */
.ipmh-monthly { margin-bottom: 10px; }
.ipmh-monthly-toggle {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
  color: var(--text-3); padding: 8px 14px; border-radius: 8px;
  font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s;
  letter-spacing: 0.3px; text-transform: uppercase;
}
.ipmh-monthly-toggle:hover { background: rgba(255,255,255,0.06); color: var(--text-2); }
.ipmh-toggle-icon { font-size: 16px; }
.ipmh-monthly-content { padding-top: 8px; }

/* ── Checkbox delete ── */
.ipmh-del-bar { display: flex; justify-content: flex-end; padding: 4px 0 8px; }
.ipmh-del-confirm {
  background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.25);
  color: #f87171; padding: 5px 14px; border-radius: 6px; font-size: 12px;
  cursor: pointer; transition: all 0.15s;
}
.ipmh-del-confirm:not(:disabled):hover { background: rgba(239,68,68,0.18); }
.ipmh-del-confirm:disabled { opacity: 0.35; cursor: not-allowed; }
.ipmh-del-chk-wrap {
  display: flex; align-items: center; padding: 2px 6px; border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.08); cursor: pointer; transition: all 0.15s; flex-shrink: 0;
}
.ipmh-del-chk-wrap:hover { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.3); }
.ipmh-del-chk { accent-color: #ef4444; width: 14px; height: 14px; cursor: pointer; }

/* ── IPM Sold modal ── */
.ipm-sold-modal { max-width: 580px; }
.ipm-sold-body {
  padding: 16px 20px; display: flex; flex-direction: column; gap: 14px;
  overflow-y: auto; max-height: calc(85vh - 64px);
}
.ipm-sold-summary {
  background: rgba(34,197,94,0.06); border: 1px solid rgba(34,197,94,0.18);
  border-radius: 12px; padding: 16px 18px;
}
.ipm-sold-total {
  font-size: 36px; font-weight: 800; color: #4ade80; line-height: 1; margin-bottom: 14px;
}
.ipm-sold-total-lbl { font-size: 13px; font-weight: 400; color: var(--text-3); margin-left: 4px; }
.ipm-sold-sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.ipm-sold-size-chip {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px; padding: 8px 14px;
  display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 52px;
}
.ipm-sold-size-lbl { font-size: 10px; color: var(--text-3); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.ipm-sold-size-val { font-size: 20px; font-weight: 800; color: #e2e8f0; }
.ipm-sold-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ipm-sold-chip {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09);
  border-radius: 20px; padding: 5px 12px; font-size: 12px; font-weight: 700;
  color: var(--text-2); cursor: pointer; transition: all 0.15s;
}
.ipm-sold-chip:hover { background: rgba(255,255,255,0.09); }
.ipm-sold-chip-sel { background: rgba(147,51,234,0.18) !important; border-color: #a855f7 !important; color: #e9d5ff; }
.ipm-sold-chip-cnt { background: rgba(255,255,255,0.09); border-radius: 10px; padding: 1px 7px; font-size: 10px; }
.ipm-sold-toolbar { display: flex; align-items: center; gap: 10px; }
.ipm-sold-count { font-size: 12px; color: var(--text-3); }
.ipm-sold-list { display: flex; flex-direction: column; gap: 2px; }
.ipm-sold-campo-hdr {
  font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase;
  letter-spacing: 0.6px; padding: 10px 4px 4px; display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.05); margin-bottom: 2px;
}
.ipm-sold-campo-vend { font-size: 12px; color: #4ade80; font-weight: 700; text-transform: none; letter-spacing: 0; }
.ipm-sold-row {
  display: grid; grid-template-columns: 1fr 88px 46px 48px 68px;
  align-items: center; gap: 6px; padding: 7px 8px;
  border-radius: 6px; transition: background 0.1s;
}
.ipm-sold-row:hover { background: rgba(255,255,255,0.04); }
.ipm-sold-row-hot { background: rgba(234,179,8,0.07); box-shadow: inset 3px 0 0 #eab308; }
.ipm-sold-row-hot:hover { background: rgba(234,179,8,0.13); }
.ipm-sold-name { flex: 1; color: #e2e8f0; font-size: 13px; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ipm-sold-loc { font-size: 11px; color: var(--text-3); min-width: 64px; flex-shrink: 0; }
.ipm-sold-vend { font-size: 13px; font-weight: 700; color: #4ade80; min-width: 70px; text-align: right; flex-shrink: 0; }
.ipm-sold-vend-zero { color: var(--text-3); font-weight: 400; }
.ipm-sold-qty { font-size: 11px; color: var(--text-3); min-width: 48px; text-align: right; flex-shrink: 0; }

/* IPM Sold — KPI blocks */
.ipm-sold-kpis { display: flex; gap: 12px; margin-bottom: 14px; }
.ipm-sold-kpi {
  flex: 1; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px; padding: 14px 18px; display: flex; flex-direction: column; gap: 2px;
}
.ipm-sold-kpi-green { background: rgba(34,197,94,0.08); border-color: rgba(34,197,94,0.22); }
.ipm-sold-kpi-val { font-size: 42px; font-weight: 800; color: #e2e8f0; line-height: 1; letter-spacing: -1.5px; }
.ipm-sold-kpi-green .ipm-sold-kpi-val { color: #4ade80; }
.ipm-sold-kpi-lbl { font-size: 12px; color: var(--text-3); font-weight: 500; margin-top: 5px; }

/* IPM Sold — column header row */
.ipm-sold-list-hdr {
  display: grid; grid-template-columns: 1fr 88px 46px 48px 68px;
  align-items: center; gap: 6px; padding: 4px 8px 7px;
  border-bottom: 1px solid rgba(255,255,255,0.07); margin-bottom: 4px;
}
.ipm-sold-list-hdr span { font-size: 10px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.6px; }

/* IPM Sold — column cells */
.ipm-sold-col-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e2e8f0; font-size: 13px; font-weight: 500; }
.ipm-sold-col-loc { font-size: 11px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ipm-sold-col-st { display: flex; align-items: center; }
.ipm-sold-col-qty { font-size: 12px; color: var(--text-3); text-align: right; }
.ipm-sold-col-vend { font-size: 13px; font-weight: 700; color: #4ade80; text-align: right; }

/* IPM Sold — campo meta (count + sold in campo header) */
.ipm-sold-campo-meta { font-size: 12px; color: #4ade80; font-weight: 700; text-transform: none; letter-spacing: 0; }

/* IPM Sold — print button */
.ipm-sold-print-btn {
  margin-left: auto; padding: 6px 14px; border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.06);
  color: var(--text-2); font-size: 12px; font-weight: 600; cursor: pointer;
  transition: all 0.15s;
}
.ipm-sold-print-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.22); color: #e2e8f0; }

/* Global Sold (All-plants) button — shown inside the Top-5 plants popup */
.ms-itp-allplants-btn {
  display: block; width: calc(100% - 0px); margin: 10px 0 0;
  padding: 9px 14px; border-radius: 9px;
  border: 1px solid rgba(99,215,140,0.35); background: rgba(99,215,140,0.12);
  color: #7de3a0; font-size: 13px; font-weight: 700; cursor: pointer;
  text-align: center; transition: all 0.15s;
}
.ms-itp-allplants-btn:hover { background: rgba(99,215,140,0.22); border-color: rgba(99,215,140,0.55); color: #a3f0bc; }

/* ══ Global Sold / All-Plants modal ═════════════════════════ */
.gsp-modal { width: min(96vw, 720px); max-height: 90vh; }
.gsp-body  { padding: 12px 16px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.gsp-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gsp-search {
  flex: 1; min-width: 180px; padding: 8px 12px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05);
  color: var(--text-1); font-size: 13px; outline: none;
}
.gsp-search:focus { border-color: rgba(99,215,140,0.4); background: rgba(99,215,140,0.07); }
.gsp-sold-toggle {
  padding: 7px 14px; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05); color: var(--text-2);
  transition: all 0.15s; white-space: nowrap;
}
.gsp-sold-toggle-on { background: rgba(99,215,140,0.18); border-color: rgba(99,215,140,0.45); color: #7de3a0; }
/* grid: name / campo / size / st / qty / vendidas */
.gsp-list { display: flex; flex-direction: column; gap: 0; overflow: auto; border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); }
.gsp-list-hdr, .gsp-row {
  display: grid;
  grid-template-columns: 1fr 70px 52px 44px 44px 78px;
  align-items: center; gap: 4px; padding: 6px 10px;
}
.gsp-list-hdr {
  background: rgba(255,255,255,0.05); position: sticky; top: 0; z-index: 1;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.gsp-th {
  font-size: 11px; font-weight: 700; color: var(--text-3); letter-spacing: .04em;
  background: none; border: none; cursor: default; text-align: left; padding: 0;
}
.gsp-th[data-col] { cursor: pointer; transition: color 0.15s; }
.gsp-th[data-col]:hover { color: var(--text-1); }
.gsp-th-active { color: #7de3a0 !important; }
.gsp-th-r { text-align: right; }
.gsp-row { border-bottom: 1px solid rgba(255,255,255,0.04); transition: background 0.12s; }
.gsp-row:last-child { border-bottom: none; }
.gsp-row:hover { background: rgba(255,255,255,0.04); }
.gsp-row-hot { background: rgba(99,215,140,0.04); }
.gsp-row-hot:hover { background: rgba(99,215,140,0.09); }
.gsp-col-name { font-size: 12px; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gsp-col-campo { font-size: 11px; color: var(--text-3); text-align: left; }
.gsp-col-size { font-size: 11px; color: var(--text-3); text-align: left; }
.gsp-col-st { text-align: center; }
.gsp-col-qty { font-size: 12px; color: var(--text-2); text-align: right; }
.gsp-col-vend { font-size: 12px; text-align: right; }
.gsp-col-vend-link { color: #7de3a0; text-decoration: underline; cursor: pointer; }
.gsp-col-vend-link:hover { color: #a3f0bc; }
.gsp-col-vend-zero { color: var(--text-4, #4a5568); }

/* IPM Report Modal */
.ipm-report-modal { max-height: 85vh; }
.rpt-body { padding: 16px 20px; } /* override: use same padding as tx-modal-body */
/* Filters row: IPM toggle + letter chips */
.rpt-filters-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rpt-letter-chips { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.rpt-letter-chip {
  padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04); color: var(--text-2); font-size: 12px;
  font-weight: 700; cursor: pointer; transition: all 0.15s;
}
.rpt-letter-chip:hover { background: rgba(168,85,247,0.12); border-color: rgba(168,85,247,0.3); color: #e9d5ff; }
.rpt-letter-active { background: rgba(168,85,247,0.22) !important; border-color: #c084fc !important; color: #e9d5ff !important; }
.rpt-step-label { font-size: .82rem; font-weight: 600; color: var(--text-2); margin: 10px 0 6px; }
.rpt-block-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.rpt-chip {
  padding: 5px 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03); color: var(--text-2); font-size: .85rem;
  font-weight: 700; cursor: pointer; transition: all .2s;
}
.rpt-chip:hover { background: rgba(168,85,247,0.1); border-color: rgba(168,85,247,0.3); }
.rpt-chip-active { background: rgba(168,85,247,0.2); border-color: #c084fc; color: #c084fc; }
.rpt-plant-list { display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow-y: auto; }
.rpt-plant-btn {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02); border-radius: 8px; color: var(--text-1);
  cursor: pointer; transition: all .15s; text-align: left; font-size: .8rem;
}
.rpt-plant-btn:hover { background: rgba(34,197,94,0.08); border-color: rgba(34,197,94,0.2); }
.rpt-plant-active { background: rgba(34,197,94,0.15); border-color: #22c55e; }
.rpt-plant-name { font-weight: 600; flex: 1; }
.rpt-plant-loc { color: var(--text-3); font-size: .75rem; }
.rpt-plant-qty { color: var(--text-3); font-size: .75rem; min-width: 30px; text-align: right; }
.rpt-pest-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.rpt-selected-plant {
  padding: 8px 12px; background: rgba(34,197,94,0.08); border-radius: 8px;
  font-size: .82rem; color: #22c55e;
}
.rpt-label { font-size: .8rem; color: var(--text-2); display: flex; flex-direction: column; gap: 4px; }
/* IPM block chips — compact card style (both modals) */
.ipm-block-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ipm-block-chip {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: rgba(147,51,234,0.08); border: 1px solid rgba(168,85,247,0.2);
  border-radius: 8px; padding: 5px 10px; cursor: pointer; transition: all 0.15s;
}
.ipm-block-chip:hover { background: rgba(147,51,234,0.18); border-color: rgba(168,85,247,0.45); }
.ipm-bk-label { font-size: 12px; font-weight: 700; color: #e9d5ff; line-height: 1; }
.ipm-bk-qty { font-size: 10px; color: var(--text-3); line-height: 1; }
.ipm-bk-sel { background: rgba(147,51,234,0.28) !important; border-color: #a855f7 !important; box-shadow: 0 0 8px rgba(168,85,247,0.3); }
/* Infestation level chips */
.rpt-inf-section { margin-top: 2px; }
.rpt-inf-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.rpt-inf-chip {
  padding: 7px 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all 0.2s; color: var(--text-2);
}
.rpt-inf-chip:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.2); }
.rpt-inf-y.rpt-inf-active { background: rgba(234,179,8,0.18); border-color: #eab308; color: #fde047; box-shadow: 0 0 8px rgba(234,179,8,0.2); }
.rpt-inf-o.rpt-inf-active { background: rgba(249,115,22,0.18); border-color: #f97316; color: #fdba74; box-shadow: 0 0 8px rgba(249,115,22,0.2); }
.rpt-inf-r.rpt-inf-active { background: rgba(239,68,68,0.18); border-color: #ef4444; color: #fca5a5; box-shadow: 0 0 8px rgba(239,68,68,0.2); }
.rpt-inf-b.rpt-inf-active { background: rgba(59,130,246,0.18); border-color: #3b82f6; color: #93c5fd; box-shadow: 0 0 8px rgba(59,130,246,0.2); }
.rpt-inf-g.rpt-inf-active { background: rgba(16,185,129,0.18); border-color: #10b981; color: #6ee7b7; box-shadow: 0 0 8px rgba(16,185,129,0.2); }
.rpt-label select, .rpt-label input, .rpt-label textarea {
  padding: 7px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04); color: var(--text-1); font-size: .82rem;
}
.rpt-no-plants { color: var(--text-3); text-align: center; padding: 16px; font-size: .82rem; }

/* Pest type chips */
.rpt-pest-chips {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px;
}
.rpt-pest-chip {
  padding: 6px 12px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06); color: var(--text-2);
  font-size: .8rem; font-weight: 500; cursor: pointer; transition: all .2s;
}
.rpt-pest-chip:hover {
  background: rgba(251,146,60,0.1); border-color: rgba(251,146,60,0.3);
}
.rpt-pest-chip-active {
  background: rgba(251,146,60,0.2); border-color: #fb923c; color: #fb923c;
}

/* Report button style */
.zd-act-report {
  background: rgba(251,146,60,0.12); color: #fb923c; border: 1px solid rgba(251,146,60,0.25);
}
.zd-act-report:hover { background: rgba(251,146,60,0.2); }

/* Clickable summary card (irrigation history) */
.zd-sum-clickable {
  cursor: pointer;
  position: relative;
  transition: background 0.2s;
}
.zd-sum-clickable:hover {
  background: rgba(0,170,255,0.08);
}
.zd-sum-clickable:active {
  background: rgba(0,170,255,0.14);
}
.zd-sum-chevron {
  font-size: 18px;
  color: var(--text-3);
  margin-left: auto;
  flex-shrink: 0;
  align-self: center;
}

/* Irrigation History Modal */
.irrh-modal {
  max-height: 85vh;
}
.irrh-body {
  overflow-y: auto;
  max-height: 65vh;
  padding-bottom: 12px;
}
.irrh-loading {
  text-align: center;
  padding: 32px;
  color: var(--text-3);
  font-size: 14px;
}
.irrh-empty {
  text-align: center;
  padding: 40px 20px;
}
.irrh-empty-icon {
  font-size: 36px;
  margin-bottom: 8px;
}
.irrh-empty-text {
  color: var(--text-3);
  font-size: 13px;
}
.irrh-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.irrh-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 10px 12px;
  border-left: 3px solid rgba(0,170,255,0.4);
}
.irrh-card-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.irrh-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}
.irrh-badge-ok {
  background: rgba(34,197,94,0.12);
  color: #4ade80;
}
.irrh-badge-warn {
  background: rgba(245,158,11,0.12);
  color: #fbbf24;
}
.irrh-badge-fail {
  background: rgba(239,68,68,0.12);
  color: #f87171;
}
.irrh-card-date {
  font-size: 12px;
  color: var(--text-3);
  font-weight: 500;
}
.irrh-card-details {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.irrh-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  padding: 2px 0;
}
.irrh-detail-lbl {
  color: var(--text-3);
  font-weight: 500;
}
.irrh-detail-val {
  color: var(--text-1);
  font-weight: 600;
}

/* Expand/collapse */
.zd-expand-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-bottom: 6px;
}
.zd-expand-btn:hover {
  color: var(--text-1);
  border-color: var(--accent);
}
.zd-expand-arrow {
  display: inline-block;
  transition: transform 0.2s;
  font-size: 14px;
}

/* Expandable detail groups */
.zd-expand-section {
  animation: fadeInUp 0.2s ease;
}
.zd-detail-group {
  margin-bottom: 12px;
}
.zd-detail-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
  margin-bottom: 6px;
}
.zd-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.zd-row span:first-child {
  color: var(--text-3);
}
.zd-row span:last-child {
  color: var(--text-1);
  font-weight: 600;
}

/* Existing styles kept */
.zd-info {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.zd-active {
  color: var(--zone-active) !important;
}
.zd-inactive {
  color: var(--text-3) !important;
}
.zd-btn {
  font-size: 13px;
  padding: 10px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  font-weight: 700;
}
.zd-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
  margin: 14px 0 8px;
}
.zd-empty {
  font-size: 12px;
  color: var(--text-3);
  padding: 6px 0;
}
.zd-sched-item {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.zd-sched-time {
  font-weight: 700;
  color: var(--accent);
  min-width: 44px;
}
.zd-sched-days {
  flex: 1;
  color: var(--text-2);
}
.zd-sched-dur {
  color: var(--accent);
  font-weight: 700;
  font-family: "SF Mono", Consolas, monospace;
  background: rgba(0, 212, 255, 0.08);
  padding: 1px 6px;
  border-radius: 5px;
  white-space: nowrap;
}
.zd-enabled {
  color: var(--zone-active);
}
.zd-disabled {
  color: var(--text-3);
}
.zd-log-item {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.zd-log-item span {
  flex: 1;
}
.zd-loading {
  text-align: center;
  padding: 24px 0;
  color: var(--text-3);
}
.zd-sched-form {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin: 4px 0 8px;
}
.zd-sched-form .sf-field {
  margin-bottom: 8px;
}
.zd-sched-form label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 4px;
}
.zd-sched-form .sf-input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-1);
  color: var(--text-1);
  font-size: 13px;
  box-sizing: border-box;
}

/* ══════ Dashboard Recent Activity ══════ */
.dash-recent-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 20px;
}
.recent-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.recent-zone {
  font-weight: 700;
  color: var(--text-1);
  min-width: 70px;
}
.recent-time {
  color: var(--text-3);
  min-width: 50px;
}
.recent-dur {
  color: var(--text-2);
}
.recent-trigger {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-3);
  color: var(--text-3);
}
.empty-state-sm {
  text-align: center;
  padding: 16px 0;
  color: var(--text-3);
  font-size: 13px;
}
.dash-flow-badge {
  font-size: 11px;
  font-weight: 400;
  color: var(--accent);
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(0, 212, 255, 0.1);
}

/* ══════ Settings: Limits ══════ */
.setting-input-sm {
  width: 60px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--text-1);
  font-size: 13px;
  text-align: center;
  outline: none;
}
.setting-input-sm:focus {
  border-color: var(--accent);
}

/* ══════ Settings: Map Tools ══════ */
.stg-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}
/* Grid de anuncios de riego (Ajustes admin): miniaturas con botón ✕ para borrar. */
.stg-riego-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin:6px 0}
.stg-riego-card{position:relative;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--bg-3);aspect-ratio:9/16}
.stg-riego-thumb{width:100%;height:100%;object-fit:cover;display:block}
.stg-riego-del{position:absolute;top:4px;right:4px;width:24px;height:24px;border:0;border-radius:50%;background:rgba(220,38,38,.92);color:#fff;font-weight:900;font-size:13px;cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center}
.stg-tool-card {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stg-tool-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
}
.stg-tool-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}
.stg-tool-preview {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  object-fit: cover;
  background: var(--bg-2);
}
.stg-tool-input {
  width: 100%;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-1);
  font-size: 12px;
  outline: none;
}
.stg-tool-input:focus {
  border-color: var(--accent);
}
.stg-tool-file-btn {
  padding: 4px 10px;
  font-size: 11px;
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  cursor: pointer;
}

/* ══════ GPH Edit (Zone Detail) ══════ */
.zd-gph-edit {
  display: flex;
  align-items: center;
  gap: 6px;
}
.zd-gph-input {
  width: 70px;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--text-1);
  font-size: 13px;
  text-align: center;
  outline: none;
}
.zd-gph-input:focus {
  border-color: var(--accent);
}
.zd-gph-edit span {
  font-size: 12px;
  color: var(--text-3);
}
.zd-gph-save {
  padding: 4px 8px;
  font-size: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  transition: background 0.2s;
}
.zd-gph-save:hover {
  background: var(--accent-dim);
}

/* ══════ Toggle Switch ══════ */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--bg-3);
  border-radius: 22px;
  border: 1px solid var(--border);
  transition: background 0.2s;
  cursor: pointer;
}
.toggle-slider::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 2px;
  bottom: 2px;
  background: var(--text-3);
  border-radius: 50%;
  transition:
    transform 0.2s,
    background 0.2s;
}
.toggle-switch input:checked + .toggle-slider {
  background: var(--accent-dim);
  border-color: var(--accent);
}
.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(18px);
  background: var(--accent);
}

/* ══════ CSV Export ══════ */
#log-export-csv {
  margin-left: auto;
}

/* ══════ Responsive: Log Filters ══════ */
@media (max-width: 600px) {
  .log-filter-ctrl {
    flex: 1 1 45%;
  }
  .zd-log-item {
    font-size: 11px;
    gap: 4px;
  }
  .analytics-summary {
    grid-template-columns: 1fr 1fr;
  }
  .chart-wrap svg {
    height: auto;
  }
}

/* ══════ Log Tabs ══════ */
.log-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 14px;
  border-bottom: 2px solid var(--border);
}
.log-tab {
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition:
    color 0.2s,
    border-color 0.2s;
}
.log-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.log-tab:hover {
  color: var(--text-1);
}

/* ══════ Delete button ══════ */
.log-delete-btn {
  color: var(--danger) !important;
  border-color: var(--danger) !important;
}
.log-delete-btn:hover {
  background: rgba(255, 60, 60, 0.1) !important;
}

/* ══════ Analytics ══════ */
.analytics-period {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}
.analytics-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.analytics-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 10px;
  text-align: center;
}
.analytics-card-val {
  font-size: 22px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1.2;
}
.analytics-card-lbl {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 4px;
}

/* ══════ SVG Charts ══════ */
.chart-wrap {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-bottom: 14px;
}
.chart-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
  margin-bottom: 8px;
}
.chart-empty {
  font-size: 12px;
  color: var(--text-3);
  text-align: center;
  padding: 20px 0;
}
.svg-chart {
  width: 100%;
  max-height: 220px;
}
.svg-chart-lg {
  max-height: none;
  height: auto;
}
.chart-rssi-container {
  position: relative;
}
.chart-label {
  font-size: 9px;
  fill: var(--text-3);
  font-family: inherit;
}
.chart-axis-title {
  font-size: 10px;
  fill: var(--text-3);
  font-weight: 600;
  font-family: inherit;
}
.chart-band-label {
  font-size: 8px;
  font-weight: 600;
  font-family: inherit;
  opacity: 0.6;
}
.chart-grid {
  stroke: var(--border);
  stroke-width: 0.5;
  stroke-dasharray: 3, 3;
}
.chart-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chart-area {
  opacity: 0.15;
}
.chart-dot {
  fill: var(--accent);
  stroke: var(--bg-1);
  stroke-width: 1.5;
  cursor: pointer;
}
.chart-dot:hover {
  r: 5;
}

/* ── Enhanced signal chart styles ── */
.chart-wrap-lg {
  padding: 18px;
}
.chart-wrap-lg .svg-chart {
  max-height: none;
}
.chart-wrap-individual {
  min-width: 0;
}
.signal-individual-hdr {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-2);
  margin: 16px 0 8px;
}
.signal-individual-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

/* Disconnection gap zones */
.chart-gap-zone {
  fill: rgba(239, 68, 68, 0.12);
  stroke: none;
  cursor: help;
}
.chart-gap-zone:hover {
  fill: rgba(239, 68, 68, 0.22);
}

/* Signal line + dot hover effects */
.chart-signal-line {
  transition: opacity 0.15s;
}
.chart-signal-dot {
  cursor: pointer;
  transition: r 0.15s;
}
.chart-signal-dot:hover {
  r: 5.5;
  stroke-width: 2;
}

/* Crosshair line */
.chart-crosshair {
  stroke: var(--text-3);
  stroke-width: 1;
  stroke-dasharray: 4, 3;
  pointer-events: none;
  opacity: 0.5;
}

/* ══════ Top Zones ══════ */
.top-zones-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.top-zone-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.top-zone-name {
  min-width: 100px;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-zone-bar-wrap {
  flex: 1;
  height: 14px;
  background: var(--bg-3);
  border-radius: 7px;
  overflow: hidden;
}
.top-zone-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #22c55e);
  border-radius: 7px;
  transition: width 0.4s ease;
}
.top-zone-stat {
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
}

/* ---- Toast Notifications ---- */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-card);
  color: var(--text-1);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 600;
  z-index: 99999;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
  max-width: 92vw;
  text-align: center;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.5);
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast-error {
  border-color: var(--error);
  background: var(--bg-card);
}
.toast-success {
  border-color: var(--success);
  background: var(--bg-card);
}
.toast-warn {
  border-color: #f59e0b;
  background: #1a150a;
}

/* ---- Map Water Consumption Widget ---- */
.m-water {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 15;
  background: rgba(10, 15, 20, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  display: none;
  align-items: center;
  gap: 10px;
  min-width: 140px;
  transition: opacity 0.3s ease;
}
.m-water-active {
  display: flex;
  border-color: #3b82f6;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.3);
}
.m-water-icon-svg {
  flex-shrink: 0;
  display: block;
}
.m-water-data {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.m-water-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 11px;
  color: var(--text-3);
}
.m-water-val {
  font-size: 16px;
  font-weight: 800;
  color: #3b82f6;
  font-variant-numeric: tabular-nums;
}
.m-water-gal {
  color: #22c55e;
}
.m-water-unit {
  font-size: 10px;
  color: var(--text-3);
}
.m-water-zones {
  font-size: 10px;
  color: var(--text-3);
}
.m-water-zones span {
  font-weight: 700;
  color: var(--accent);
}
@media (max-width: 480px) {
  .m-water {
    bottom: 48px;
    left: 8px;
    padding: 8px 10px;
    min-width: 120px;
  }
  .m-water-val {
    font-size: 14px;
  }
  .m-water-icon-svg {
    width: 18px;
    height: 18px;
  }
  .m-leg {
    bottom: 8px;
    right: 8px;
    padding: 3px 6px;
    font-size: 8px;
    gap: 3px;
    max-width: 60%;
  }
  .m-leg-pill {
    font-size: 6px;
    padding: 1px 3px;
  }
}

/* ── Map Tools FAB ── */
.m-tools {
  position: absolute;
  bottom: 72px;
  right: 14px;
  z-index: 16;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 10px;
}
.m-tools-fab {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--bg-card);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.4),
    0 0 12px var(--accent-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    transform 0.3s,
    box-shadow 0.3s;
  flex-shrink: 0;
}
.m-tools-fab:active {
  transform: scale(0.92);
}
.m-tools-fab svg {
  transition: transform 0.3s ease;
}
.m-tools.open .m-tools-fab svg {
  transform: rotate(45deg);
}
.m-tools-fab:hover {
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.5),
    0 0 18px var(--accent-glow);
}
.m-tools-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.m-tools-ring:empty {
  display: none;
}
.m-tools-item {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transform: scale(0.3);
  opacity: 0;
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.2s ease,
    box-shadow 0.2s ease;
  flex-shrink: 0;
  position: relative;
}
.m-tools.open .m-tools-item {
  display: flex;
  opacity: 1;
  transform: scale(1);
}
.m-tools.open .m-tools-item:hover {
  box-shadow: 0 2px 16px var(--accent-glow);
  border-color: var(--accent);
}
.m-tools-item:nth-child(1) {
  transition-delay: 0ms;
}
.m-tools-item:nth-child(2) {
  transition-delay: 40ms;
}
.m-tools-item:nth-child(3) {
  transition-delay: 80ms;
}
.m-tools-item:nth-child(4) {
  transition-delay: 120ms;
}
.m-tools-item:nth-child(5) {
  transition-delay: 160ms;
}
.m-tools-item:nth-child(6) {
  transition-delay: 200ms;
}
.m-tools-item img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  pointer-events: none;
}
.m-tools-item .m-tools-letter {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  text-shadow: 0 0 8px var(--accent-glow);
}
.m-tools-tip {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: rgba(10, 15, 25, 0.95);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--accent);
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.5),
    0 0 8px var(--accent-glow);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 10;
}
.m-tools-item:hover .m-tools-tip,
.m-tools-item.touched .m-tools-tip {
  opacity: 1;
}

@media (max-width: 480px) {
  .m-tools {
    bottom: 58px;
    right: 10px;
    gap: 8px;
  }
  .m-tools-fab {
    width: 42px;
    height: 42px;
  }
  .m-tools-ring {
    gap: 6px;
  }
  .m-tools-item {
    width: 36px;
    height: 36px;
  }
  .m-tools-item img {
    width: 24px;
    height: 24px;
  }
}

/* ── Botón oculto (culto): link transparente, posicionable en la esquina del mapa ── */
.m-secret-btn {
  position: absolute;
  left: 4%;
  top: 88%;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: transparent;
  border: none;
  z-index: 15;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.m-secret-btn[hidden] {
  display: none;
}
/* Para admin: contorno tenue + agarre "⠿" para poder encontrarlo y arrastrarlo. */
.m-secret-btn.is-admin {
  border: 1px dashed rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.05);
  touch-action: none;
}
.m-secret-btn.is-admin::after {
  content: "⠿";
  position: absolute;
  right: 5px;
  bottom: 2px;
  font-size: 12px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
}
.m-secret-btn.m-secret-dragging {
  border-style: solid;
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 2px var(--accent-glow);
}

/* ---- Deshierve in-panel styles ---- */
.desh-loading, .desh-err {
  text-align: center;
  padding: 30px 0;
  color: #94a3b8;
  font-size: 14px;
}
.desh-err { color: #ef4444; }

.desh-zone-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.desh-zone-icon { font-size: 18px; }
.desh-zone-name {
  font-weight: 700;
  font-size: 16px;
  color: #e2e8f0;
  flex: 1;
}
.desh-zone-lbl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  border-radius: 10px;
}
.desh-zone-lbl-green { color: #22c55e; background: rgba(34,197,94,0.12); }
.desh-zone-lbl-yellow { color: #eab308; background: rgba(234,179,8,0.12); }
.desh-zone-lbl-red { color: #ef4444; background: rgba(239,68,68,0.12); }
.desh-zone-lbl-none { color: #64748b; background: rgba(100,116,139,0.12); }

.desh-zone-days {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 10px;
}
.desh-zone-days-green { background: rgba(34,197,94,0.08); }
.desh-zone-days-yellow { background: rgba(234,179,8,0.08); }
.desh-zone-days-red { background: rgba(239,68,68,0.08); }
.desh-zone-days-none { background: rgba(100,116,139,0.08); }
.desh-zone-days-num {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}
.desh-zone-days-green .desh-zone-days-num { color: #22c55e; }
.desh-zone-days-yellow .desh-zone-days-num { color: #eab308; }
.desh-zone-days-red .desh-zone-days-num { color: #ef4444; }
.desh-zone-days-none .desh-zone-days-num { color: #64748b; }
.desh-zone-days-txt {
  font-size: 13px;
  color: #94a3b8;
}

.desh-zone-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #94a3b8;
  margin-bottom: 12px;
}
.desh-pend {
  font-size: 11px;
  color: #f97316;
  font-weight: 600;
  background: rgba(249,115,22,0.12);
  padding: 2px 8px;
  border-radius: 8px;
}

.desh-section-title {
  font-size: 12.5px;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 14px 0 7px;
}

.desh-last-card {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: #e2e8f0;
  padding: 11px 13px;
  background: rgba(34,197,94,0.06);
  border: 1px solid rgba(34,197,94,0.22);
  border-radius: 11px;
}
.desh-last-none { color: #64748b; background: rgba(255,255,255,0.03); border-color: var(--border, #1e293b); }

.desh-hist-row {
  display: flex;
  gap: 12px;
  font-size: 12.5px;
  color: #94a3b8;
  padding: 6px 12px;
  border-left: 3px solid rgba(34,197,94,0.4);
  margin: 3px 0 3px 4px;
}

.desh-reg-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.desh-reg-form label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  color: #94a3b8;
  font-weight: 500;
}
.desh-reg-form label { font-size: 13px; }
.desh-reg-form select, .desh-reg-form textarea {
  background: var(--bg-1, #080c14);
  color: #e2e8f0;
  border: 1.5px solid var(--border, #1e293b);
  border-radius: 10px;
  padding: 11px 12px;
  font-size: 15px;
  min-height: 46px;
}
.desh-reg-form textarea { resize: vertical; min-height: 60px; }
.desh-btn-save {
  background: #22c55e;
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 14px 20px;
  font-weight: 700;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.2s;
  align-self: stretch;
  width: 100%;
  min-height: 50px;
  box-shadow: 0 4px 14px rgba(34,197,94,0.25);
}
.desh-btn-save:hover { background: #16a34a; }
.desh-btn-save:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

.desh-subs-label {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .95rem; font-weight: 600; color: #cbd5e1; margin-bottom: 8px;
}
.desh-subs-count { color: #64748b; font-weight: 700; font-size: .82rem; }
.desh-subs-all {
  font-size: .82rem; font-weight: 600; padding: 7px 14px; border-radius: 9px;
  border: 1.5px solid #475569; background: transparent; color: #cbd5e1; cursor: pointer;
  min-height: 34px; -webkit-tap-highlight-color: transparent;
}
.desh-subs-all:hover { background: #334155; color: #e2e8f0; }
/* Subdivisiones = tiles GRANDES tocables (letras claras, verde = seleccionado) */
.desh-subs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  gap: 8px; margin-bottom: 14px;
}
.desh-sub-chk {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 54px;
  font-size: 19px; font-weight: 800;
  color: #94a3b8; cursor: pointer;
  background: #0f172a; border: 2px solid #334155; border-radius: 12px;
  transition: background-color .12s, border-color .12s, color .12s, transform .08s;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.desh-sub-chk input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.desh-sub-chk:active { transform: scale(.94); }
.desh-sub-chk--on {
  background: rgba(34,197,94,0.18); border-color: #22c55e; color: #4ade80;
}
.desh-sub-chk--on::after {
  content: "✓"; position: absolute; top: 2px; right: 6px;
  font-size: 12px; font-weight: 900; color: #22c55e;
}
.desh-sub-letter { line-height: 1; }

/* ---- Custom Modal Dialog ---- */
/* ── Anuncio de riego (consejo visual) al encender una zona ──
   Sin backdrop-close ni X: la única salida es el botón "Confirmar riego".
   z-index por encima del panel de zona. Optimizado para celular. */
.riego-ad{position:fixed;inset:0;z-index:10060;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(2,6,16,.85);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:fadein .18s ease-out}
.riego-ad-box{display:flex;flex-direction:column;gap:14px;width:min(440px,94vw);max-height:94vh}
.riego-ad-img{width:100%;max-height:76vh;object-fit:contain;border-radius:16px;box-shadow:0 12px 48px rgba(0,0,0,.6);background:#0006}
.riego-ad-confirm{background:#22c55e;border:0;color:#04150a;font-weight:900;font-size:18px;padding:16px;border-radius:14px;cursor:pointer;box-shadow:0 6px 22px #22c55e55}
.riego-ad-confirm:active{transform:translateY(1px)}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.2s;
}
.modal-overlay.active {
  opacity: 1;
}
.modal-dialog {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  min-width: 320px;
  max-width: 90vw;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.modal-dialog-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 8px;
}
.modal-dialog-msg {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
  margin-bottom: 16px;
  white-space: pre-line;
}
.modal-dialog-input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--text-1);
  font-size: 13px;
  margin-bottom: 16px;
  outline: none;
}
.modal-dialog-input:focus {
  border-color: var(--accent);
}
.modal-dialog-btns {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.modal-btn-cancel {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  font-size: 13px;
}
.modal-btn-cancel:hover {
  background: var(--bg-3);
}
.modal-btn-ok {
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  background: var(--accent);
  color: #000;
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
}
.modal-btn-ok:hover {
  filter: brightness(1.1);
}

/* ---- Zone Groups: Zones View ---- */
.zg-filter {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-1);
  font-size: 12px;
  cursor: pointer;
  min-width: 120px;
}
.filter-btns {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.zg-section {
  margin-bottom: 24px;
}
.zg-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 16px;
  border-left: 4px solid var(--border);
  border-radius: 8px;
  background: var(--bg-2);
  margin-bottom: 10px;
  box-shadow: 0 1px 0 var(--border);
  position: relative;
}
.zg-header::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--border) 0%, transparent 100%);
}
.zg-icon {
  font-size: 20px;
  flex-shrink: 0;
}
.zg-name {
  font-weight: 800;
  font-size: 14px;
  color: var(--text-1);
  letter-spacing: 0.2px;
}
.zg-count {
  font-size: 11px;
  color: var(--text-3);
  background: var(--bg-3);
  padding: 2px 9px;
  border-radius: 10px;
  font-weight: 700;
}
.zg-users {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(0, 212, 255, 0.07);
  border: 1px solid rgba(0, 212, 255, 0.18);
  border-radius: 20px;
  padding: 3px 10px 3px 7px;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}
.zg-badge {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 6px;
  line-height: 1;
}
#zones-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ---- Zone Groups: Settings ---- */
.zg-settings-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--bg-3);
  border-radius: 8px;
  margin-bottom: 6px;
}
.zg-settings-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.zg-settings-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 16px;
}
.zg-settings-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-1);
}
.zg-settings-meta {
  font-size: 11px;
  color: var(--text-3);
}
.zg-settings-actions {
  display: flex;
  gap: 4px;
}
.btn-xs {
  padding: 4px 8px;
  font-size: 11px;
  border-radius: 6px;
}

/* ---- Zone Groups: Editor Modal ---- */
.zg-ed-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  margin: 12px 0 4px;
}
.zg-icon-picker,
.zg-color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.zg-icon-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-3);
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zg-icon-btn.active {
  border-color: var(--accent);
  background: var(--accent-bg, rgba(0, 200, 83, 0.15));
}

/* ── Stepper wide value (duration) ── */
.tc-val-wide {
  min-width: 52px;
}

/* ── Relay Expansion ── */
.relay-exp-intro {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.5;
  padding: 0 0 12px;
}
.relay-esp-group {
  margin-bottom: 16px;
}
.relay-esp-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1);
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.relay-esp-summary {
  font-size: 11px;
  font-weight: 400;
}
.relay-slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 6px;
}
.relay-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 6px;
  border-radius: 8px;
  border: 1px solid var(--border);
  text-align: center;
  min-height: 64px;
  justify-content: center;
  gap: 2px;
  transition:
    border-color 0.2s,
    background 0.2s;
}
.relay-slot-idx {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-3);
  position: absolute;
  top: 3px;
  left: 6px;
}
.relay-slot-name {
  font-size: 11px;
  color: var(--text-1);
  font-weight: 600;
  margin-top: 4px;
  line-height: 1.3;
}
.relay-slot-type {
  font-size: 10px;
  color: var(--text-3);
}
.rs-catalog {
  background: var(--bg-2);
  border-color: var(--border);
}
.rs-custom {
  background: rgba(0, 200, 83, 0.08);
  border-color: rgba(0, 200, 83, 0.35);
}
.rs-custom:hover {
  border-color: var(--accent);
}
.rs-empty {
  background: var(--bg-3);
  border: 1px dashed var(--border);
  cursor: pointer;
}
.rs-empty:hover {
  border-color: var(--accent);
  background: rgba(0, 212, 255, 0.05);
}
.relay-slot-add {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-3);
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
}
.rs-empty:hover .relay-slot-add {
  color: var(--accent);
}
.relay-slot-actions {
  display: flex;
  gap: 2px;
  position: absolute;
  top: 2px;
  right: 2px;
}
.relay-slot-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  padding: 2px;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.relay-slot-btn:hover {
  opacity: 1;
}
.rs-hidden {
  opacity: 0.45;
}

/* ══════ Signal Analytics Tab ══════ */
.signal-view {
  padding-bottom: 32px;
}
.signal-header {
  margin-bottom: 16px;
}
.signal-header h2 {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-1);
}
.signal-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 10px 14px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.signal-periods {
  display: flex;
  gap: 4px;
}
.signal-period-btn {
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.signal-period-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.signal-period-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Signal node filter chips */
.signal-chip-bar {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.signal-chip {
  padding: 4px 10px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.signal-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.signal-chip.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Downtime / Red Muerta Panel */
.signal-downtime-wrap {
  border-left: 3px solid #ef4444;
}
.signal-downtime-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.signal-downtime-node {
  background: var(--bg-3);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.sdn-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.sdn-name {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-1);
}
.sdn-uptime {
  font-size: 12px;
  font-weight: 700;
}
.sdn-ok {
  font-size: 12px;
  color: var(--success);
}
.sdn-bar {
  position: relative;
  height: 10px;
  background: var(--bg-1);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 6px;
}
.sdn-gap {
  position: absolute;
  top: 0;
  height: 100%;
  background: #ef4444;
  opacity: 0.6;
  border-radius: 2px;
}
.sdn-gap.sdn-ongoing {
  background: repeating-linear-gradient(
    90deg,
    #ef4444,
    #ef4444 4px,
    transparent 4px,
    transparent 8px
  );
  opacity: 0.8;
}
.sdn-gaps-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sdn-gap-item {
  font-size: 11px;
  color: var(--text-3);
}
.sdn-gap-item strong {
  color: #ef4444;
}
.sdn-live {
  color: #ef4444;
  font-weight: 700;
  animation: blink 1s step-end infinite;
}
@keyframes blink {
  50% {
    opacity: 0.4;
  }
}

.signal-esp-select {
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--text-1);
  font-size: 12px;
}

/* Signal quality distribution bars */
.signal-quality-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.signal-quality-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.signal-quality-name {
  min-width: 120px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.signal-quality-bar {
  flex: 1;
  height: 22px;
  display: flex;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-3);
}
.sq-segment {
  height: 100%;
  transition: width 0.4s ease;
  min-width: 0;
}
.sq-excellent {
  background: #22c55e;
}
.sq-good {
  background: #eab308;
}
.sq-fair {
  background: #f97316;
}
.sq-weak {
  background: #ef4444;
}
.sq-critical {
  background: #dc2626;
}

/* Signal legend */
.signal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-3);
}
.sl-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.sl-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

/* RSSI chart background bands */
.band-excellent {
  fill: #22c55e;
  opacity: 0.1;
}
.band-good {
  fill: #eab308;
  opacity: 0.1;
}
.band-fair {
  fill: #f97316;
  opacity: 0.1;
}
.band-weak {
  fill: #ef4444;
  opacity: 0.1;
}
.band-critical {
  fill: #dc2626;
  opacity: 0.12;
}

@media (max-width: 600px) {
  .signal-controls {
    flex-direction: column;
    align-items: stretch;
  }
  .signal-quality-name {
    min-width: 80px;
    font-size: 11px;
  }
  .signal-quality-bar {
    height: 18px;
  }
  .signal-individual-grid {
    grid-template-columns: 1fr;
  }
}
.rs-hidden .relay-slot-name {
  text-decoration: line-through;
}

/* Relay slot modal */
.relay-modal-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-2);
}
.relay-modal-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
}
.relay-modal-input {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-1);
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}
.relay-modal-input:focus {
  border-color: var(--accent);
}
.relay-modal-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.zg-color-btn {
  width: 24px;
  height: 24px;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
}
.zg-color-btn.active {
  border-color: var(--text-1);
  box-shadow: 0 0 0 2px var(--bg-1);
}
.zg-zone-list {
  max-height: 180px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 4px;
  padding: 6px;
  background: var(--bg-3);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.zg-zone-cb {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-2);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
}
.zg-zone-cb:hover {
  background: var(--bg-2);
}
.zg-zone-cb input {
  accent-color: var(--accent);
}

/* ---- Full-Screen Settings ---- */
.stg {
  padding: 12px;
}
.stg-header h2 {
  font-size: 20px;
  margin: 0 0 12px;
}
.stg-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.stg-tab {
  padding: 8px 16px;
  border: none;
  background: var(--bg-3);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.stg-tab.active {
  background: var(--accent);
  color: #fff;
}
.stg-panel {
  display: none;
}
.stg-panel.active {
  display: block;
  animation: fadeIn 0.2s;
}
.stg-desc {
  font-size: 12px;
  color: var(--text-3);
  margin: 0 0 12px;
  line-height: 1.5;
}
.stg-loading {
  color: var(--text-3);
  font-size: 12px;
  padding: 16px;
  text-align: center;
}
.stg-empty {
  color: var(--text-3);
  font-size: 12px;
  padding: 16px;
  text-align: center;
  font-style: italic;
}

.setting-group {
  background: var(--bg-2);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
}
.setting-group h3 {
  font-size: 14px;
  margin: 0 0 12px;
  color: var(--text-1);
}
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  gap: 8px;
}
.setting-row:last-child {
  border-bottom: none;
}
.setting-row > span {
  font-size: 13px;
  color: var(--text-2);
}
.setting-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-3);
  color: var(--text-1);
  font-size: 13px;
}
.setting-input-sm {
  width: 80px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-3);
  color: var(--text-1);
  font-size: 13px;
  text-align: center;
}
.setting-row select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-3);
  color: var(--text-1);
  font-size: 13px;
}
.logo-upload {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* ---- Settings: User Cards ---- */
.stg-user-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-3);
  border-radius: 10px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
}
.stg-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  font-weight: 700;
  flex-shrink: 0;
}
.stg-user-avatar-mini {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  flex-shrink: 0;
}
.stg-user-info {
  flex: 1;
  min-width: 0;
}
.stg-user-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-1);
}
.stg-user-role {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
}
.stg-user-id {
  font-family: monospace;
  opacity: 0.7;
}
.stg-user-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.stg-user-group-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
}
.stg-user-no-group {
  font-size: 10px;
  color: var(--text-3);
  font-style: italic;
}
.stg-user-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* ---- Settings: Role badges ---- */
.stg-role-badge{display:inline-block;padding:2px 10px;border-radius:12px;font-size:11px;font-weight:700;letter-spacing:.3px}
.stg-role-admin{background:#7c3aed22;color:#a78bfa;border:1px solid #7c3aed44}
.stg-role-encargado{background:#0369a122;color:#38bdf8;border:1px solid #0369a144}
.stg-role-worker{background:#d9770622;color:#fb923c;border:1px solid #d9770644}
.stg-role-viewer{background:#71717a22;color:#a1a1aa;border:1px solid #71717a44}
/* avatar color per role */
.stg-user-avatar.role-admin{background:#7c3aed}
.stg-user-avatar.role-encargado{background:#0369a1}
.stg-user-avatar.role-worker{background:#d97706}
.stg-user-avatar.role-viewer{background:#71717a}
/* user card actions */
.stg-user-btn{background:transparent;border:1px solid var(--border);color:var(--text-2);padding:5px 10px;border-radius:7px;font-size:12px;cursor:pointer;transition:all .15s}
.stg-user-btn:hover{background:var(--bg-2)}
.stg-user-btn-edit{color:#60a5fa;border-color:#3b82f640}
.stg-user-btn-edit:hover{background:#3b82f620}
.stg-user-btn-dup{color:#a3e635;border-color:#84cc1640}
.stg-user-btn-dup:hover{background:#84cc1620}
.stg-user-btn-del{color:#f87171;border-color:#ef444440}
.stg-user-btn-del:hover{background:#ef444420}
.stg-user-btn-stats{color:#fb923c;border-color:#d9770640}
.stg-user-btn-stats:hover{background:#d9770620}
/* worker stats modal */
.worker-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}
.worker-stat-card{background:var(--bg-3);border-radius:10px;padding:14px;border:1px solid var(--border);text-align:center}
.worker-stat-num{font-size:28px;font-weight:800;color:var(--accent)}
.worker-stat-lbl{font-size:11px;color:var(--text-3);margin-top:4px}
.worker-stat-section{margin-top:16px}
.worker-stat-section h4{font-size:13px;font-weight:700;color:var(--text-2);margin:0 0 10px}
.worker-activity-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);font-size:12px}
.worker-activity-row:last-child{border-bottom:none}
.worker-activity-field{color:var(--text-2);font-weight:600}
.worker-activity-type{color:var(--text-3);font-size:11px}
.worker-activity-date{color:var(--text-3);font-size:11px;white-space:nowrap}
.worker-zf-year{font-size:11px;font-weight:700;color:var(--text-3);margin:10px 0 4px;text-transform:uppercase;letter-spacing:.04em}
/* Worker History Modal */
.wh-modal-content{max-width:720px;width:min(720px,96vw);display:flex;flex-direction:column;max-height:90vh;max-height:90dvh}
.wh-tabs{display:flex;gap:4px;padding:0 20px 0;border-bottom:1px solid var(--border);flex-shrink:0}
.wh-tab{background:none;border:none;border-bottom:2px solid transparent;color:var(--text-3);cursor:pointer;padding:10px 14px;font-size:13px;font-weight:600;transition:color .15s,border-color .15s}
.wh-tab.active{color:var(--accent,#4ade80);border-bottom-color:var(--accent,#4ade80)}
.wh-body{flex:1;overflow-y:auto;min-height:0;padding:16px 20px}
.wh-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;align-items:center}
.wh-filter-sel{background:var(--bg-3);border:1px solid var(--border);color:var(--text-2);border-radius:6px;padding:5px 8px;font-size:12px;min-width:0;max-width:160px}
.wh-count{font-size:11px;color:var(--text-3);white-space:nowrap;margin-left:auto}
.wh-list{display:flex;flex-direction:column;gap:0}
.wh-row{display:grid;grid-template-columns:80px 1fr auto;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.wh-row:last-child{border-bottom:none}
.wh-row-date{font-size:11px;color:var(--text-3);text-align:right;padding-top:2px;line-height:1.4}
.wh-row-time{display:block;font-size:10px;opacity:.7}
.wh-row-main{min-width:0}
.wh-row-title{font-size:13px;color:var(--text-2);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wh-row-meta{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.wh-meta-item{font-size:11px;color:var(--text-3)}
.wh-row-types{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px}
.wh-type-chip{font-size:10px;background:var(--bg-3);border:1px solid var(--border);border-radius:4px;padding:1px 5px;color:var(--text-3)}
.wh-row-notes{font-size:11px;color:var(--text-3);margin-top:4px;font-style:italic;word-break:break-word}
.wh-row-result{font-size:11px;font-weight:700;white-space:nowrap;align-self:start;padding-top:2px}
.wh-empty{text-align:center;padding:32px 16px;color:var(--text-3);font-size:13px}
/* Duo FAB — dos círculos flotantes como ∞, draggable */
/* ── Speed Dial FAB ──────────────────────────────────────────────────────── */
.m-spd-fab{position:fixed;bottom:68px;left:12px;z-index:9200;display:flex;flex-direction:column;align-items:flex-start;gap:10px;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;pointer-events:none}
.m-spd-fab .m-spd-trigger,.m-spd-fab.is-open .m-spd-menu,.m-spd-fab.is-open .m-spd-btn{pointer-events:auto}
.m-spd-trigger{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#00c48c,#006bff);color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:inherit;box-shadow:0 4px 18px rgba(0,107,255,.55),0 2px 6px rgba(0,0,0,.4);transition:box-shadow .2s,transform .15s;flex-shrink:0}
.m-spd-trigger:active{transform:scale(.92)}
.m-spd-trigger svg{transition:transform .25s cubic-bezier(.17,.67,.44,1.27);pointer-events:none}
.m-spd-fab.is-open .m-spd-trigger svg{transform:rotate(45deg)}
.m-spd-fab.is-open .m-spd-trigger{box-shadow:0 4px 22px rgba(0,107,255,.7),0 2px 8px rgba(0,0,0,.5)}
.m-spd-menu{display:flex;flex-direction:column;gap:8px;pointer-events:none;visibility:hidden;opacity:0;transform:translateY(12px) scale(.94);transform-origin:bottom left;transition:opacity .18s,transform .18s,visibility 0s .18s}
.m-spd-fab.is-open .m-spd-menu{pointer-events:auto;visibility:visible;opacity:1;transform:translateY(0) scale(1);transition:opacity .22s,transform .22s}
.m-spd-item{display:flex;align-items:center;gap:8px;opacity:0;transform:translateY(8px);transition:opacity .18s,transform .18s}
.m-spd-fab.is-open .m-spd-item{opacity:1;transform:translateY(0)}
.m-spd-fab.is-open .m-spd-item:nth-child(1){transition-delay:.06s}
.m-spd-fab.is-open .m-spd-item:nth-child(2){transition-delay:.02s}
/* backdrop-filter removed: blur over the animated map SVG re-rasterizes the moving
   scene every frame (same lesson already applied to .m-mmp-overlay above). Solid 92%
   background gives nearly the same look without the per-frame paint. */
.m-spd-lbl{height:32px;padding:0 12px;border-radius:16px;background:rgba(10,10,18,.92);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;white-space:nowrap;pointer-events:none;box-shadow:0 2px 10px rgba(0,0,0,.45)}
.m-spd-btn{width:46px;height:46px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;flex-shrink:0;box-shadow:0 3px 14px rgba(0,0,0,.5);-webkit-tap-highlight-color:transparent}
.m-spd-btn:active{transform:scale(.9)}
.m-spd-btn--ms{background:linear-gradient(135deg,#1e1a00,#3d3000);border:1.5px solid rgba(250,204,21,.5);color:#fde047}
.m-spd-btn--ms svg{width:20px;height:20px;pointer-events:none}
.m-spd-btn--wl{background:linear-gradient(135deg,#00c48c,#0099ff);color:#fff;font-size:22px}
.m-spd-badge{position:absolute;top:-4px;right:-4px;background:#ef4444;color:#fff;border-radius:8px;padding:0 4px;font-size:9px;font-weight:800;min-width:14px;text-align:center;line-height:1.6;pointer-events:none}
.m-spd-fab.m-mmf-dragging{cursor:grabbing!important}
/* ── My Missions Panel ── */
/* Backdrop-filter removed: with the map's animated SVG patterns rendering
   underneath, blur recalculated against a moving scene every scroll frame.
   On mobile that was the dominant cost — solid 92% black gives nearly the
   same visual without the per-frame paint. */
.m-mmp-overlay{position:fixed;inset:0;z-index:400;display:flex;align-items:flex-end;justify-content:center;background:rgba(2,6,14,.92)}
.m-mmp-box{background:var(--bg-2);border-radius:20px 20px 0 0;width:100%;max-width:520px;max-height:88vh;display:flex;flex-direction:column;overflow:hidden;animation:mmp-slidein .3s cubic-bezier(.22,1,.36,1)}
@keyframes mmp-slidein{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes mmp-popin{from{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
@media(min-width:640px){.m-mmp-overlay{align-items:center}.m-mmp-box{border-radius:18px;max-width:620px;max-height:84vh;animation:mmp-popin .22s cubic-bezier(.34,1.4,.64,1)}}
.m-mmp-hdr{display:flex;align-items:center;gap:10px;padding:14px 18px 12px;border-bottom:1px solid var(--border);flex-shrink:0}
.m-mmp-hdr-icon{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;background:#22c55e18;color:#4ade80;flex-shrink:0}
.m-mmp-hdr-title{flex:1;font-weight:700;color:var(--text-1);font-size:16px}
.m-mmp-close{background:none;border:none;color:var(--text-3);font-size:24px;cursor:pointer;padding:0 4px;line-height:1}
/* Stats bar */
.m-mmp-stats-bar{display:flex;gap:6px;padding:10px 10px 8px;border-bottom:1px solid var(--border);flex-shrink:0}
.m-mmp-stat{flex:1;text-align:center;background:var(--bg-3);border-radius:10px;padding:6px 4px 5px;min-width:0}
.m-mmp-stat-n{display:block;font-size:20px;font-weight:900;color:var(--text-1);line-height:1}
.m-mmp-stat-l{display:block;font-size:10px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.3px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-mmp-stat-alta{background:#2d080820;border:1px solid #ef444330}
.m-mmp-stat-alta .m-mmp-stat-n{color:#f87171}
.m-mmp-stat-san{background:#22c55e0a;border:1px solid #22c55e25}
.m-mmp-stat-san .m-mmp-stat-n{color:#4ade80}
.m-mmp-stat-zone{background:#06b6d40a;border:1px solid #06b6d425}
.m-mmp-stat-zone .m-mmp-stat-n{color:#67e8f9}
/* Body */
.m-mmp-body{flex:1;overflow-y:scroll;-webkit-overflow-scrolling:touch;padding:10px 12px 20px;display:flex;flex-direction:column;gap:12px;contain:layout paint;will-change:scroll-position}
.m-mmp-body-compact{gap:5px;padding:8px 10px 20px}
.m-mmp-loading{text-align:center;color:var(--text-3);padding:32px;font-size:14px}
.m-mmp-empty{text-align:center;color:var(--text-3);padding:40px 24px;font-size:14px;line-height:1.5}
.m-mmp-err{color:#f87171}
/* ── Mission cards (mmc) ── */
/* Sprint 1 iter 2: removed content-visibility (placeholder size mismatch
   caused layout cascade during fast scroll → 683ms longtask spikes).
   Removed box-shadow transition (113 transitions firing in parallel during
   scroll oscillation was lighting up the compositor). Kept contain:paint
   for per-card layer isolation — the only directive that consistently helped. */
.mmc{display:flex;border-radius:14px;overflow:hidden;border:1px solid var(--border);cursor:default;-webkit-tap-highlight-color:transparent;margin-bottom:8px;flex-shrink:0;contain:paint;box-shadow:0 2px 8px rgba(0,0,0,.28)}
.mmc:hover{box-shadow:0 5px 18px rgba(0,0,0,.4)}
/* Pastel sticky-note backgrounds — tinted by priority so the urgency signal survives */
.mmc.prio-alta{background:#fff1f1;border-color:#f5b5b5}
.mmc.prio-media{background:#fff9ea;border-color:#f3d499}
.mmc.prio-baja{background:#eef5ff;border-color:#b6d2f5}
.mmc-stripe{width:5px;flex-shrink:0}
.mmc.prio-alta .mmc-stripe{background:linear-gradient(180deg,#ef4444,#dc2626)}
.mmc.prio-media .mmc-stripe{background:linear-gradient(180deg,#f59e0b,#d97706)}
.mmc.prio-baja .mmc-stripe{background:linear-gradient(180deg,#3b82f6,#2563eb)}
.mmc-inner{flex:1;padding:13px 15px;min-width:0;display:flex;flex-direction:column;gap:9px}
/* Top row: location (left) + badges (right) */
.mmc-top-row{display:flex;align-items:flex-start;gap:6px;justify-content:space-between}
.mmc-loc-empty{font-size:13px;color:var(--text-3)}
/* Badge chips */
.mmc-badges{display:flex;align-items:center;gap:5px;flex-wrap:wrap;flex-shrink:0}
.mmc-prio{font-size:13px;font-weight:800;padding:3px 10px;border-radius:20px;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap}
.mmc-cat{font-size:13px;font-weight:700;padding:3px 10px;border-radius:20px;white-space:nowrap}
/* Antigüedad (semáforo por edad: verde reciente → rojo viejo) */
.mmc-age{font-size:13px;font-weight:800;padding:3px 10px;border-radius:20px;white-space:nowrap}
.mmc-age--fresh,.mmc-age--ok{background:#dcfce7;color:#15803d;border:1px solid #86efac}
.mmc-age--warn{background:#fef3c7;color:#b45309;border:1px solid #fcd34d}
.mmc-age--old{background:#fee2e2;color:#b91c1c;border:1px solid #fca5a5}
/* Prio & category badge colors (also used in inventory) */
.prio-badge-alta{background:#ef444430;color:#fca5a5;border:1px solid #ef444455}
.prio-badge-media{background:#f59e0b28;color:#fcd34d;border:1px solid #f59e0b50}
.prio-badge-baja{background:#3b82f628;color:#93c5fd;border:1px solid #3b82f650}
.cat-badge-sanidad{background:#22c55e22;color:#86efac;border:1px solid #22c55e45}
.cat-badge-ventas{background:#eab30822;color:#fde047;border:1px solid #eab30845}
.cat-badge-cultivo{background:#06b6d422;color:#67e8f9;border:1px solid #06b6d445}
.cat-badge-gestion{background:#8b5cf622;color:#c4b5fd;border:1px solid #8b5cf645}
/* On the pastel mission cards the badges need solid light fills + dark ink (scoped
   to .mmc so the inventory badges that reuse these classes stay dark-theme). */
.mmc .prio-badge-alta{background:#fee2e2;color:#b91c1c;border-color:#fca5a5}
.mmc .prio-badge-media{background:#fef3c7;color:#b45309;border-color:#fcd34d}
.mmc .prio-badge-baja{background:#dbeafe;color:#1d4ed8;border-color:#93c5fd}
.mmc .cat-badge-sanidad{background:#dcfce7;color:#15803d;border-color:#86efac}
.mmc .cat-badge-ventas{background:#fef9c3;color:#a16207;border-color:#fde047}
.mmc .cat-badge-cultivo{background:#cffafe;color:#0e7490;border-color:#67e8f9}
.mmc .cat-badge-gestion{background:#ede9fe;color:#6d28d9;border-color:#c4b5fd}
/* Plant name (variedad) — texto MUY grande, grueso y oscuro sobre el pastel (sin recuadro propio) */
.mmc-plant{font-size:27px;font-weight:900;color:#0d1505;line-height:1.25;word-break:break-word;text-shadow:none}
/* Action text (tarea/instrucción) — negro grande y grueso sobre el pastel (sin recuadro propio) */
.mmc-action{font-size:22px;color:#0a0a0a;font-weight:900;line-height:1.35;word-break:break-word;text-shadow:none}
.mmc-action .mmc-detail{font-style:italic;color:#4a3c0e;font-weight:700;font-size:18px}
.mmc-detail{font-style:italic;color:#4a3c0e;font-weight:700}
/* Miniatura del chip de acción (solo si el admin le subió imagen por el ⚙️).
   Inline + vertical-align para no reflowear la tarjeta; lazy en el HTML. */
.mmc-action-thumb{width:32px;height:32px;border-radius:8px;object-fit:cover;border:1.5px solid #ffffff80;box-shadow:0 1px 4px #0003;vertical-align:middle;margin-right:8px;background:#0002}
/* Extra meta (tamaño) */
.mmc-extra{font-size:16px;color:#28323f;margin-top:1px;font-weight:800}
/* Location — grande, negra, gruesa, arriba */
.mmc-loc{font-size:18px;font-weight:800;color:#111;line-height:1.3;flex:1;min-width:0}
.mmc-loc strong{color:#000;font-weight:900;font-size:22px}
.mmc-sep{color:#94a3b8;font-weight:400}
/* Órdenes / envíos próximos */
.mmc-orders{display:flex;flex-wrap:wrap;gap:6px;margin-top:1px}
.mmc-order{font-size:15px;font-weight:700;color:#3a4656;background:rgba(0,0,0,.05);padding:3px 11px;border-radius:8px;white-space:nowrap}
.mmc-order--urgent{background:#fee2e2;color:#b91c1c;border:1px solid #fca5a5}
/* Stats chips */
.mmc-stats{display:flex;flex-wrap:wrap;gap:6px;margin-top:1px}
.mmc-stat{font-size:15px;font-weight:700;padding:4px 12px;border-radius:20px;white-space:nowrap}
.mmc-sq{background:#22c55e22;color:#15803d;border:1px solid #22c55e55}
.mmc-sv{background:#eab30826;color:#a16207;border:1px solid #eab30860}
.mmc-sv-zero{background:#64748b1c;color:#64748b;border-color:#64748b45}
.mmc-sr{background:#06b6d422;color:#0e7490;border:1px solid #06b6d455}
/* Description / instructions — black ink, clearly legible on the pastel note */
.mmc-desc{font-size:20px;color:#0f0f0f;line-height:1.55;white-space:pre-wrap;word-break:break-word;font-weight:700}
.mmc-desc-intro{font-size:18px;color:#161d28;line-height:1.5;margin-bottom:3px;font-weight:700}
.mmc-bullets{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.mmc-bullets li{font-size:20px;color:#0f0f0f;line-height:1.5;padding-left:22px;position:relative;font-weight:700}
.mmc-bullets li::before{content:"▸";position:absolute;left:0;color:#d97706;font-weight:700;font-size:15px}
/* Assignee */
.mmc-assignee{font-size:15px;color:#1d4ed8;font-weight:700}
/* Memo de notas internas (sutil) */
.mmc-memo{font-size:16px;color:#5a4a12;background:#fffbe6;border-left:3px solid #e0c060;border-radius:6px;padding:7px 11px;font-style:italic;font-weight:600;line-height:1.45;white-space:pre-wrap;word-break:break-word}
/* Quién la creó (sutil) */
.mmc-creator{font-size:13px;color:#64748b;font-weight:600;margin-top:1px}
/* Action buttons */
.mmc-btns{display:flex;gap:6px;margin-top:5px}
.mmc-btn{flex:1;min-height:50px;padding:0 10px;border-radius:12px;font-size:17px;font-weight:700;cursor:pointer;border:1.5px solid transparent;transition:background .13s,transform .1s;display:flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap}
.mmc-btn:active{transform:scale(.95)}
/* Done — pastel light green */
.mmc-btn-done{background:#bbf7d0;color:#14532d;border-color:#86efac;flex:2;font-size:19px;font-weight:800;text-shadow:none}
.mmc-btn-done:hover{background:#a7f3c4;border-color:#4ade80;box-shadow:0 0 12px rgba(74,222,128,.35)}
/* Edit — solid full blue */
.mmc-btn-edit{background:#2563eb;color:#ffffff;border-color:#1d4ed8;flex:1;font-size:16px;font-weight:700}
.mmc-btn-edit:hover{background:#1d4ed8;box-shadow:0 0 10px rgba(37,99,235,.45)}
/* Delete — vivid red */
.mmc-btn-del{background:#dc2626;color:#ffffff;border-color:#b91c1c;flex:0 0 50px;font-size:20px;font-weight:800}
.mmc-btn-del:hover{background:#b91c1c;box-shadow:0 0 12px rgba(220,38,38,.5)}
/* 📷 Ver trabajo — botón ancho, grande y llamativo: la foto ES la planta a tratar /
   el trabajo a realizar. Color/contraste ESTÁTICO (sin animación continua) → llamativo
   pero fluido incluso con 150+ tarjetas en Mis Misiones. Objetivo grande = adultos mayores. */
.mmc-btn-work{width:100%;margin-top:7px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:58px;padding:8px 12px;border-radius:14px;cursor:pointer;border:2px solid #a78bfa;background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff;box-shadow:0 3px 10px rgba(124,58,237,.35);transition:transform .1s,box-shadow .13s}
.mmc-btn-work:hover{box-shadow:0 5px 18px rgba(124,58,237,.55)}
.mmc-btn-work:active{transform:scale(.97)}
.mmc-work-main{font-size:19px;font-weight:800;letter-spacing:.2px;line-height:1.15}
.mmc-work-sub{font-size:12.5px;font-weight:600;opacity:.92;line-height:1.1}
@media(min-width:640px){.mmc-btn-work{min-height:54px}.mmc-work-main{font-size:21px}}
/* Progress bar (vendidas / qty) */
.mmc-progress{height:5px;border-radius:3px;background:rgba(0,0,0,.1);overflow:hidden;margin-top:2px}
.mmc-progress-fill{height:100%;border-radius:3px;transition:width .5s ease}
.mmc-pf-ok{background:linear-gradient(90deg,#22c55e,#4ade80)}
.mmc-pf-warn{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.mmc-pf-low{background:linear-gradient(90deg,#ef4444,#f97316)}
/* Alta priority — STATIC visual (replaces animated box-shadow that was
   running on ~39 cards simultaneously and dominated the compositor).
   The card stays clearly "urgente" via a thicker red border + a single
   non-animated red glow. Visually similar to the pulse peak; zero paint cost. */
.mmc.prio-alta{border-color:#ef4444;border-width:1.5px;box-shadow:0 0 0 1px #ef444425,0 3px 12px -2px #ef444433}
/* Sprint 2: filter without rebuild. Cards stay in DOM; CSS class hides them. */
.mmc.mmc-hidden{display:none}
.m-mmp-section-hdr.mmp-sec-empty{display:none}
/* Respect prefers-reduced-motion — disable all non-essential animations */
@media (prefers-reduced-motion: reduce) {
  .mmc{transition:none}
  .mmc-skel::after{animation:none}
  .mmc-progress-fill{transition:none}
  .m-svg .mz-on rect, .m-svg .mz-on polygon, .m-svg .mz-on circle{animation:none}
  .m-svg pattern animateTransform{display:none}
}
/* Skeleton loading cards */
.mmc-skel{height:100px;border-radius:14px;background:var(--bg-3);border:1px solid var(--border);overflow:hidden;position:relative;margin-bottom:6px}
.mmc-skel::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 25%,#ffffff07 50%,transparent 75%);background-size:200% 100%;animation:skel-shine 1.5s infinite}
@keyframes skel-shine{from{background-position:200% 0}to{background-position:-200% 0}}
/* Mobile drag handle */
.m-mmp-drag-handle{width:36px;height:4px;border-radius:2px;background:var(--text-3);opacity:.3;margin:8px auto 2px;flex-shrink:0}
@media(min-width:640px){.m-mmp-drag-handle{display:none}}
/* Desktop: wider, smaller cards */
/* Escritorio: mantener letra grande (adultos mayores). Solo un pelín menos que en móvil. */
@media(min-width:640px){.mmc-inner{padding:13px 16px;gap:9px}.mmc-plant{font-size:24px}.mmc-action{font-size:20px}.mmc-action .mmc-detail{font-size:17px}.mmc-desc,.mmc-bullets li{font-size:18px}.mmc-btn{min-height:48px;font-size:17px}.mmc-btn-done{font-size:18px}}
/* ── Mis Misiones: filter bar ── */
.mmp-fbar{display:flex;align-items:center;gap:8px;padding:8px 12px 6px;flex-wrap:wrap;border-bottom:1px solid #1e3a5a;margin-bottom:4px;flex-shrink:0}
.mmp-fbar-toggle{display:flex;align-items:center;gap:6px;background:#111e2d;border:2px solid #2a3d52;border-radius:10px;color:#8faabf;padding:8px 16px;cursor:pointer;font-size:14px;font-weight:700;transition:all .15s;white-space:nowrap;flex-shrink:0;min-height:40px}
.mmp-fbar-toggle:hover,.mmp-fbar-open{background:#1d4ed8;border-color:#3b82f6;color:#fff;box-shadow:0 2px 12px #3b82f640}
.mmp-fbar-badge{background:#ef4444;border-radius:12px;padding:2px 7px;font-size:11px;color:#fff;font-weight:800;min-width:20px;text-align:center}
.mmp-fbar-pills{display:flex;gap:4px;flex-wrap:wrap;align-items:center;flex:1}
.mmp-fpill{background:#1e3050;border:1px solid #3a5a8a;border-radius:12px;color:#99bbdd;padding:2px 9px;cursor:pointer;font-size:11px;font-weight:600;transition:background .15s,color .15s;white-space:nowrap}
.mmp-fpill:hover{background:#2a4a70;color:#fff;border-color:#6090c0}
/* collapsible filter panel */
.mmp-fpanel{background:#08111c;border-bottom:2px solid #1e3a5a;padding:14px 14px 16px;display:flex;flex-direction:column;gap:12px;margin-bottom:8px;flex-shrink:0}
.mmp-fsec{display:flex;flex-direction:column;gap:8px}
.mmp-fsec-title{font-size:14px;color:#e2e8f0;text-transform:uppercase;letter-spacing:.07em;font-weight:800}
.mmp-fsep{height:1px;background:#1e3a5a;flex-shrink:0}
.mmp-fbtn-grp{display:flex;gap:8px;flex-wrap:wrap}
/* filter option buttons */
.mmp-fpri,.mmp-fcat,.mmp-floc,.mmp-fage{background:#111e2d;border:2px solid #2a3d52;border-radius:10px;color:#8faabf;padding:10px 18px;cursor:pointer;font-size:14px;font-weight:700;transition:all .15s;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center;gap:6px}
.mmp-fpri:hover,.mmp-fcat:hover,.mmp-floc:hover,.mmp-fage:hover{background:#1a2d40;color:#d0e4f0;border-color:#4a6a80}
.mmp-fage.mmp-factive{background:#0e7490;border-color:#0e7490;color:#fff;box-shadow:0 4px 20px #0e749060;font-weight:900}
/* urgencia active states */
.mmp-fpri-red.mmp-factive{background:#ef4444;border-color:#ef4444;color:#fff;box-shadow:0 4px 20px #ef444460;font-weight:900}
.mmp-fpri-amber.mmp-factive{background:#f59e0b;border-color:#f59e0b;color:#1a0800;box-shadow:0 4px 20px #f59e0b60;font-weight:900}
.mmp-fpri-blue.mmp-factive{background:#3b82f6;border-color:#3b82f6;color:#fff;box-shadow:0 4px 20px #3b82f660;font-weight:900}
/* categoría active states */
.mmp-fcat-sanidad.mmp-factive{background:#dc2626;border-color:#dc2626;color:#fff;box-shadow:0 4px 20px #dc262660;font-weight:900}
.mmp-fcat-ventas.mmp-factive{background:#d97706;border-color:#d97706;color:#fff;box-shadow:0 4px 20px #d9770660;font-weight:900}
.mmp-fcat-cultivo.mmp-factive{background:#16a34a;border-color:#16a34a;color:#fff;box-shadow:0 4px 20px #16a34a60;font-weight:900}
.mmp-fcat-gestion.mmp-factive{background:#7c3aed;border-color:#7c3aed;color:#fff;box-shadow:0 4px 20px #7c3aed60;font-weight:900}
/* campo/field buttons */
.mmp-floc{font-size:13px;padding:8px 14px}
.mmp-floc.mmp-factive{background:#1d4ed8;border-color:#3b82f6;color:#fff;box-shadow:0 4px 14px #3b82f650;font-weight:900}
.mmp-floc-cnt{background:#ffffff1a;border-radius:20px;padding:2px 8px;font-size:12px;font-weight:800;color:#c0d8f0;min-width:22px;text-align:center;line-height:1.5}
.mmp-floc.mmp-factive .mmp-floc-cnt{background:#ffffff30;color:#fff}
.mmp-floc-sm{font-size:12px;padding:5px 10px}
.mmp-fgrp-wrap{display:flex;flex-direction:column;gap:8px}
.mmp-fgrp{background:#ffffff05;border-radius:8px;padding:6px 8px}
.mmp-fgrp-hdr{font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.8px;color:#60a5fa;margin-bottom:5px;padding-left:2px}
.mmp-fbtn-grp-sm{gap:4px}
.mmp-fsec-cnt{font-size:10px;font-weight:700;color:var(--text-3);background:#ffffff10;border-radius:20px;padding:1px 7px;margin-left:6px}
/* PlantFinder link in mission cards */
a.mmc-pf-plant{color:#14210a;text-decoration:none;font-weight:800;transition:color .15s,opacity .15s}
a.mmc-pf-plant:hover{color:#2563eb;text-decoration:underline}
/* light theme overrides */
[data-theme="light"] .mmp-fbar{border-bottom-color:var(--border)}
[data-theme="light"] .mmp-fbar-toggle{background:#f0f4f8;border-color:#c0d0e0;color:#445566}
[data-theme="light"] .mmp-fbar-toggle:hover,[data-theme="light"] .mmp-fbar-open{background:#dce8f4;border-color:#7090b0;color:#223344}
[data-theme="light"] .mmp-fpill{background:#dce8f4;border-color:#a0c0d8;color:#334455}
[data-theme="light"] .mmp-fpanel{background:#f4f7fa;border-bottom-color:var(--border)}
[data-theme="light"] .mmp-fsep{background:var(--border)}
[data-theme="light"] .mmp-fsec-title{color:#8899aa}
[data-theme="light"] .mmp-fpri,[data-theme="light"] .mmp-fcat,[data-theme="light"] .mmp-floc,[data-theme="light"] .mmp-fage{background:#e8eef4;border-color:#b0c8dc;color:#445566}
[data-theme="light"] .mmp-fpri:hover,[data-theme="light"] .mmp-fcat:hover,[data-theme="light"] .mmp-floc:hover,[data-theme="light"] .mmp-fage:hover{background:#d4e4f0;color:#223344}
[data-theme="light"] .mmp-floc-cnt{background:rgba(0,0,0,.08);color:#667788}
/* History delete button */
.inv-hist-del{background:none;border:none;color:var(--text-3);cursor:pointer;font-size:14px;padding:2px 6px;border-radius:6px;transition:color .15s,background .15s;margin-left:auto;flex-shrink:0}
.inv-hist-del:hover{color:#f87171;background:#f871711a}
/* workers roster panel */
.stg-wl-grid{display:flex;flex-direction:column;gap:2px;max-height:320px;overflow-y:auto}
.stg-wl-row{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;border-radius:6px;background:var(--bg-3);border:1px solid var(--border);gap:8px}
.stg-wl-row:hover{background:var(--bg-hover,var(--bg-2))}
.stg-wl-name{font-size:13px;color:var(--text-2);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stg-wl-badge{font-size:11px;font-weight:700;flex-shrink:0;width:18px;text-align:center}
.stg-wl-ok{color:var(--success,#4ade80)}
.stg-wl-warn{color:var(--warning,#f59e0b)}
/* ══════════════════════════════════════════════════════════
   Plant Celebration Overlay — mission éxito animation
══════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════
   Plant Celebration — Mission Success
   ══════════════════════════════════════════ */
.plant-cel-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(3,14,8,.94);animation:pcel-in .3s ease}
.plant-cel-overlay.plant-cel-out{animation:pcel-out .4s ease forwards}
@keyframes pcel-in{from{opacity:0}to{opacity:1}}
@keyframes pcel-out{from{opacity:1}to{opacity:0;transform:scale(.95)}}
/* Card */
.plant-cel-box{position:relative;background:linear-gradient(155deg,#061a0e 0%,#0e2d1a 45%,#061a0e 100%);border:1px solid #22c55e45;border-radius:28px;padding:28px;max-width:380px;width:92%;text-align:center;box-shadow:0 40px 120px #000d,0 0 80px #22c55e1a;overflow:hidden;animation:pcel-card-in .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes pcel-card-in{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}
/* Check circle (static, one-shot entrance) */
.pcel-check{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;font-size:30px;font-weight:900;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;box-shadow:0 4px 28px #22c55e55}
/* Text — flower/petals/sparkles/confetti/progress scene removed (caused
   continuous compositor work + card flicker). Phrase is kept. */
.plant-cel-title{font-size:26px;font-weight:900;color:#4ade80;margin-bottom:4px;line-height:1.2;text-shadow:0 0 32px #22c55e70,0 2px 4px #000}
.plant-cel-worker{font-size:15px;color:#86efac;font-weight:700;margin-bottom:10px}
.plant-cel-quote{font-size:14px;color:#bbf7d0;line-height:1.65;margin-bottom:20px}
/* Button */
.plant-cel-btn{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;border:none;border-radius:14px;padding:13px 0;font-size:15px;font-weight:800;cursor:pointer;letter-spacing:.04em;width:100%;box-shadow:0 4px 24px #22c55e40;transition:transform .15s,box-shadow .15s}
.plant-cel-btn:hover{transform:scale(1.03);box-shadow:0 6px 32px #22c55e60}
.plant-cel-btn:active{transform:scale(.97)}
/* user editor modal improvements */
.user-editor-role-desc{font-size:11px;color:var(--text-3);margin-top:6px;padding:8px;background:var(--bg-3);border-radius:6px}
/* zone picker in user editor */
.ue-zones-radio{display:flex;gap:16px;margin:6px 0 8px;font-size:13px}
.ue-zone-radio-opt{display:flex;align-items:center;gap:6px;cursor:pointer}
.ue-zone-search-wrap{margin-bottom:6px}
.ue-zone-list{max-height:140px;overflow-y:auto;display:flex;flex-wrap:wrap;gap:4px;padding:4px;background:var(--bg-3);border-radius:8px;border:1px solid var(--border)}
.ue-zone-chk{display:flex;align-items:center;gap:4px;font-size:11px;padding:3px 8px;border-radius:6px;cursor:pointer;background:var(--bg-2);border:1px solid var(--border);white-space:nowrap}
.ue-zone-chk input{accent-color:var(--accent)}

/* ---- Settings: Group Cards ---- */
.stg-group-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  background: var(--bg-3);
  border-radius: 10px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
}
.stg-group-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.stg-group-info {
  flex: 1;
  min-width: 0;
}
.stg-group-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-1);
}
.stg-group-meta {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 3px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.stg-group-zones {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.stg-zone-chip {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--bg-2);
  color: var(--text-2);
  border: 1px solid var(--border);
}
.stg-zone-more {
  background: var(--accent);
  color: #fff;
  border: none;
  font-weight: 600;
}
.stg-group-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  margin-top: 4px;
}

/* ---- Zone Group Editor Modal ---- */
.zge-modal {
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
}
.zge-row {
  display: flex;
  gap: 16px;
}
.zge-col {
  flex: 1;
}
.zge-esp-group {
  margin-bottom: 8px;
}
.zge-esp-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.zge-esp-zones {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 2px;
}
.zge-zones-scroll {
  max-height: 220px;
  overflow-y: auto;
}
.zge-users-list {
  max-height: 140px;
}
.zg-user-cb {
  display: flex;
  align-items: center;
  gap: 6px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ---- Zone Group Headers: Enhanced ---- */
.zg-header-click {
  transition: background 0.15s;
}
.zg-header-click:hover {
  background: var(--bg-3);
}
.zg-active-badge {
  font-size: 11px;
  color: var(--zone-active);
  font-weight: 700;
  background: var(--zone-active-bg);
  padding: 2px 8px;
  border-radius: 10px;
}
.zg-arrow {
  margin-left: auto;
  font-size: 18px;
  color: var(--text-3);
  transition: transform 0.15s;
}
.zg-header-click:hover .zg-arrow {
  transform: translateX(3px);
  color: var(--accent);
}

/* ============================================
   GROUP DETAIL VIEW (Polygon)
   ============================================ */
.gd {
  padding: 12px;
  animation: fadeIn 0.2s;
}
.gd-header {
  border-bottom: 3px solid var(--accent);
  padding-bottom: 12px;
  margin-bottom: 16px;
}
.gd-back {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
  margin-bottom: 8px;
}
.gd-back:hover {
  text-decoration: underline;
}
.gd-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.gd-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
}
.gd-title {
  font-size: 20px;
  margin: 0;
  color: var(--text-1);
}
.gd-subtitle {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
}

/* Stats row */
.gd-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.gd-stat {
  background: var(--bg-2);
  border-radius: 10px;
  padding: 12px;
  border-left: 3px solid var(--border);
  text-align: center;
}
.gd-stat-val {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-1);
}
.gd-stat-label {
  font-size: 10px;
  color: var(--text-3);
  margin-top: 2px;
}

/* Section titles */
.gd-section {
  margin-bottom: 16px;
}
.gd-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
  margin: 0 0 8px;
}

/* Users */
.gd-users {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gd-user-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg-2);
  border-radius: 20px;
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-1);
}
.gd-user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.gd-user-role {
  font-size: 14px;
}

/* ESP distribution */
.gd-esp-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.gd-esp-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: var(--bg-2);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-1);
  border: 1px solid var(--border);
}
.gd-esp-offline {
  opacity: 0.5;
}
.gd-esp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.gd-dot-on {
  background: var(--success);
}
.gd-dot-off {
  background: var(--danger);
}
.gd-esp-cnt {
  background: var(--bg-3);
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
}

/* Zone Points Grid */
.gd-zone-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gd-zone-point {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-2);
  border-radius: 10px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.15s;
}
.gd-zone-point:hover {
  background: var(--bg-3);
  transform: translateX(3px);
}
.gd-zone-point.gd-zp-active {
  border-color: var(--zone-active);
  background: var(--zone-active-bg);
}

/* Zone dot (colored by type) */
.gd-zp-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}
.type-bg-drip {
  background: var(--type-drip);
}
.type-bg-mist {
  background: var(--type-mist);
}
.type-bg-sprinkler {
  background: var(--type-sprinkler);
}
.gd-zp-pulse {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--zone-active);
  animation: ledBlink 1s infinite;
}

/* Zone info */
.gd-zp-info {
  flex: 1;
  min-width: 0;
}
.gd-zp-name {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-1);
}
.gd-zp-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-3);
}
.gd-zp-esp {
  font-size: 10px;
  background: var(--bg-3);
  padding: 1px 6px;
  border-radius: 6px;
}
.gd-zp-last {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 4px;
  font-size: 11px;
  flex-wrap: wrap;
}
.gd-zp-timer {
  color: var(--zone-active);
  font-weight: 700;
  font-family: monospace;
}
.gd-zp-hours {
  font-weight: 600;
}
.gd-zp-hours.gd-urg-ok {
  color: var(--success);
}
.gd-zp-hours.gd-urg-warn {
  color: var(--warning, #f59e0b);
}
.gd-zp-hours.gd-urg-crit {
  color: var(--danger);
}
.gd-zp-hours.gd-urg-none {
  color: var(--text-3);
}
.gd-zp-trigger {
  font-size: 10px;
  background: var(--bg-3);
  padding: 1px 6px;
  border-radius: 6px;
  color: var(--text-3);
}
.gd-zp-by {
  font-size: 10px;
  color: var(--text-3);
}

/* LED indicator */
.gd-zp-led {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-3);
  opacity: 0.3;
  flex-shrink: 0;
}
.gd-led-on {
  background: var(--zone-active);
  opacity: 1;
  box-shadow: 0 0 6px var(--zone-active-glow);
  animation: ledBlink 1s infinite;
}

/* Responsive - phone */
@media (max-width: 480px) {
  .gd-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .gd-zp-meta {
    flex-wrap: wrap;
  }
}

/* ---- Accessibility ---- */

/* Reduced motion — disable all animations/transitions */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Pause infinite background/ambient animations when tab is hidden (phone locked, SW) */
.page-hidden .splash-bg-anim,
.page-hidden .login-bg-pattern,
.page-hidden .logo-icon,
.page-hidden .logo-icon-sm {
  animation-play-state: paused;
}

/* Suppress all transitions during screen rotation to prevent layout glitches */
.resize-freeze *,
.resize-freeze *::before,
.resize-freeze *::after {
  transition-duration: 0.01ms !important;
  animation-duration: 0.01ms !important;
}

/* ── Landscape on mobile: compact login card ── */
@media (orientation: landscape) and (max-height: 600px) {
  .login-card {
    padding: 10px 20px 14px;
    max-height: calc(96dvh - env(safe-area-inset-top, 0px));
    border-radius: 14px;
  }
  .login-logo {
    margin-bottom: 6px;
  }
  .login-logo-custom {
    max-height: 56px;
  }
  .logo-icon-sm {
    font-size: 48px;
    margin-bottom: 4px;
  }
  .login-version {
    margin-bottom: 8px;
    font-size: 9px;
  }
  .pin-display {
    gap: 12px;
    margin-bottom: 12px;
  }
  .pin-dot {
    width: 14px;
    height: 14px;
  }
  .pin-pad {
    gap: 6px;
    max-width: 220px;
  }
  .pin-key {
    height: 42px;
    font-size: 19px;
    border-radius: 10px;
  }
  .user-card {
    padding: 10px 12px;
  }
}

/* Focus visible — keyboard navigation indicator */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) {
  outline: none;
}

/* Print styles */
@media print {
  body {
    background: #fff;
    color: #000;
    font-size: 12pt;
  }
  .app-header,
  .bottom-nav,
  .top-tabs,
  .fab,
  .more-menu,
  .alert-banner,
  .modal,
  #splash-screen,
  #login-screen,
  .global-clock {
    display: none !important;
  }
  .app-content {
    padding: 0;
    margin: 0;
  }
  .zone-card,
  .esp-card,
  .sched-card {
    break-inside: avoid;
    page-break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
  }
}

/* ═══════════════════════════════════════════════════════
   BELT (Cinta) — 3D horizontal cylinder timeline
   ═══════════════════════════════════════════════════════ */

/* ── Container ── */
.belt-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}

/* ── Day navigation dots ── */
.belt-days {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 10px 0 6px;
}
.belt-day-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 4px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: none;
  color: var(--text-3);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1.1;
}
.belt-day-dot:hover {
  color: var(--text-1);
  background: var(--bg-3);
}
.belt-day-dot.belt-day-active {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(0, 212, 255, 0.08);
}
.belt-day-dot .belt-dd-name {
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.belt-day-dot .belt-dd-num {
  font-size: 14px;
  font-weight: 900;
}

/* ── 3D Scene ── */
.belt-scene {
  perspective: 1200px;
  perspective-origin: 50% 50%;
  width: 100%;
  height: 320px;
  position: relative;
  overflow: hidden;
  cursor: grab;
}
.belt-scene:active {
  cursor: grabbing;
}

.belt-cylinder {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: none;
  will-change: transform;
}
.belt-cylinder.belt-snap {
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ── Each face (1 hour column) ── */
.belt-face {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  padding: 10px 6px 8px;
  box-sizing: border-box;
  border-left: 1px solid rgba(255, 255, 255, 0.04);
  border-right: 1px solid rgba(0, 0, 0, 0.25);
  overflow: visible;
}
/* Remove seam borders on pressure faces for line continuity */
.belt-face.belt-pressure {
  border-left-color: transparent;
  border-right-color: transparent;
}
.belt-face::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 0%,
    transparent 35%,
    rgba(0, 0, 0, 0.12) 100%
  );
  pointer-events: none;
}

/* Pressure zone coloring */
.belt-face.belt-pressure {
  background: linear-gradient(
    180deg,
    rgba(16, 185, 129, 0.13) 0%,
    rgba(5, 150, 105, 0.05) 100%
  );
}

/* ── Fixed-height header section ── */
.belt-face-head {
  min-height: 82px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

/* ── Pressure line — inside head for continuity across faces ── */
.belt-pline {
  width: calc(100% + 40px);
  margin-left: -20px;
  height: 4px;
  flex-shrink: 0;
  margin-top: auto;
  border-radius: 0;
  position: relative;
  z-index: 5;
}
.belt-pline-off {
  background: transparent;
  height: 4px;
  width: calc(100% + 40px);
  margin-left: -20px;
}
.belt-face.belt-pressure .belt-pline {
  background: #00ff88;
  box-shadow:
    0 0 10px 2px #00ff88,
    0 0 25px 4px rgba(0, 255, 136, 0.5);
}
/* Partial pressure line for edge hours (15-min fractions) */
.belt-pline.belt-pline-partial {
  width: 100%;
  margin-left: 0;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
}
.belt-pline.belt-pline-partial::after {
  content: "";
  position: absolute;
  top: 0;
  left: var(--pl, 0%);
  width: var(--pw, 100%);
  height: 100%;
  background: #00ff88;
  box-shadow:
    0 0 10px 2px #00ff88,
    0 0 25px 4px rgba(0, 255, 136, 0.5);
}
.belt-face.belt-no-pressure {
  background: linear-gradient(
    180deg,
    rgba(20, 24, 32, 0.95),
    rgba(15, 18, 25, 0.98)
  );
}

/* Daylight backgrounds — layered on top of pressure */
.belt-face.belt-night {
  --dl-overlay: rgba(10, 12, 25, 0.55);
}
.belt-face.belt-dawn {
  --dl-overlay: linear-gradient(
    180deg,
    rgba(255, 140, 50, 0.1) 0%,
    rgba(255, 100, 30, 0.03) 100%
  );
}
.belt-face.belt-dusk {
  --dl-overlay: linear-gradient(
    180deg,
    rgba(180, 80, 180, 0.1) 0%,
    rgba(120, 50, 140, 0.03) 100%
  );
}
.belt-face.belt-daylight {
  --dl-overlay: rgba(255, 255, 255, 0.03);
}
/* Daylight overlay via pseudo-element (stacks on top of pressure) */
.belt-face.belt-night::before {
  background: var(--dl-overlay, transparent);
}
.belt-face.belt-dawn::before {
  background: linear-gradient(
    180deg,
    rgba(255, 160, 60, 0.12) 0%,
    rgba(255, 120, 40, 0.02) 50%,
    rgba(0, 0, 0, 0.1) 100%
  );
}
.belt-face.belt-dusk::before {
  background: linear-gradient(
    180deg,
    rgba(200, 100, 180, 0.1) 0%,
    rgba(140, 60, 140, 0.03) 50%,
    rgba(0, 0, 0, 0.12) 100%
  );
}
.belt-face.belt-daylight::before {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.01) 35%,
    rgba(0, 0, 0, 0.08) 100%
  );
}
/* Night faces are visibly darker */
.belt-face.belt-night .belt-hr-time {
  opacity: 0.6;
}
.belt-face.belt-night .belt-wx {
  opacity: 0.7;
}
/* Pressure + daylight combo */
.belt-face.belt-pressure.belt-daylight {
  background: linear-gradient(
    180deg,
    rgba(16, 185, 129, 0.16) 0%,
    rgba(34, 197, 94, 0.04) 100%
  );
}
.belt-face.belt-pressure.belt-dawn,
.belt-face.belt-pressure.belt-dusk {
  background: linear-gradient(
    180deg,
    rgba(16, 185, 129, 0.1) 0%,
    rgba(34, 197, 94, 0.03) 50%,
    rgba(255, 140, 60, 0.03) 100%
  );
}
/* Neon line glow per daylight state */
.belt-face.belt-pressure.belt-night .belt-pline {
  box-shadow:
    0 0 8px #00ff88,
    0 0 20px rgba(0, 255, 136, 0.6);
}
.belt-face.belt-pressure.belt-daylight .belt-pline {
  box-shadow:
    0 0 5px #00ff88,
    0 0 10px rgba(0, 255, 136, 0.3);
}

/* ── Face header ── */
.belt-hr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin-bottom: 6px;
  flex-shrink: 0;
  text-align: center;
}
.belt-hr-time {
  font-size: 15px;
  font-weight: 900;
  color: var(--text-1);
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.belt-hr-badge {
  font-size: 8px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 8px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
}
.belt-hr-badge.belt-badge-ok {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}
.belt-hr-badge.belt-badge-low {
  background: rgba(239, 68, 68, 0.1);
  color: rgba(239, 68, 68, 0.7);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

/* ── Now pill ── */
.belt-now-pill {
  text-align: center;
  font-size: 8px;
  font-weight: 800;
  color: #fff;
  background: #ef4444;
  padding: 1px 4px;
  border-radius: 6px;
  white-space: nowrap;
  margin-bottom: 4px;
  flex-shrink: 0;
}

/* ── Schedule groups inside face ── */
.belt-groups {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  scrollbar-width: none;
}
.belt-groups::-webkit-scrollbar {
  display: none;
}

/* ════════════════════════════════════════════════════════════
   Smart Conflict, Mi Zona
   ═══════════════════════════════════════════════════════════ */
.btn-mi-zona {
  padding: 9px 14px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
  border: 1px solid;
}
.btn-mi-zona:hover {
  background: rgba(160, 60, 255, 0.22);
}

/* Smart Conflict styles */
.sf-conflict-warn {
  font-size: 13px;
  font-weight: 600;
  color: var(--warning, #ffa000);
  margin-bottom: 6px;
}
.sf-conflict-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
}
.sf-conflict-list li {
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}
.sf-conflict-limit {
  color: var(--error, #ff5252);
}
.sf-conflict-pressure {
  color: var(--warning, #ffa000);
}

/* Mi Zona */
.mz-users {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mz-user-block {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
}
.mz-user-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.mz-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}
.mz-user-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-1);
}
.mz-user-count {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-3);
}
.mz-zone-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.mz-zone-pick {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 12px;
  border: 1px solid var(--border);
  font-size: 11px;
  cursor: pointer;
  background: var(--bg-card);
  transition: all 0.12s;
}
.mz-zone-pick:has(input:checked) {
  background: rgba(0, 212, 255, 0.12);
  border-color: var(--accent);
}
.mz-zone-pick input {
  display: none;
}

/* My Zones view */
.mzv-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mzv-zone {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
}
.mzv-zone-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.mzv-no-sched {
  font-size: 12px;
  color: var(--text-3);
  font-style: italic;
}
.mzv-sched-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mzv-sched-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  padding: 3px 0;
}


@media (max-width: 600px) {
  .sched-header-actions {
    flex-wrap: wrap;
  }
  .btn-mi-zona {
    font-size: 12px;
    padding: 7px 10px;
  }
}

.belt-grp {
  border-radius: 5px;
  padding: 3px 4px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 2px solid var(--grp-clr, var(--border));
}
.belt-grp-hd {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  font-weight: 700;
  color: var(--text-2);
  margin-bottom: 1px;
  flex-wrap: wrap;
}
.belt-grp-icon {
  font-size: 10px;
}
.belt-grp-name {
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══════════════════════════════════════
   Unified Scheduler (op-*)
   ═══════════════════════════════════════ */
.op-fullscreen {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column;
  background: var(--bg-1, #121212);
  color: var(--text-1, #fff);
  overflow: hidden;
}
.op-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: var(--bg-2, #1e1e1e);
  border-bottom: 1px solid var(--border, #333);
  flex-shrink: 0;
}
.op-header h2 { margin: 0; font-size: 18px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-close-btn {
  background: none; border: none; color: var(--text-2); font-size: 28px;
  cursor: pointer; padding: 0 4px; line-height: 1;
}
.op-body {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 12px 14px 24px;
}
.op-footer {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; background: var(--bg-2, #1e1e1e);
  border-top: 1px solid var(--border, #333);
  flex-shrink: 0;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}
.op-header-right {
  display: flex; align-items: center; gap: 6px;
}
.op-pw-banner {
  background: linear-gradient(135deg, rgba(33,150,243,.15), rgba(76,175,80,.12));
  border: 1px solid rgba(33,150,243,.3);
  border-radius: 8px; padding: 8px 12px;
  font-weight: 600; font-size: 13px;
}
.op-pw-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.op-pw-day {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 4px; border-radius: 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.05);
}
.op-pw-day-off { opacity: .35; }
.op-pw-day-name {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  color: var(--text-2); letter-spacing: .5px;
}
.op-pw-day-val { font-size: 11px; white-space: nowrap; font-weight: 600; }
.op-pw-day-hrs { font-size: 10px; color: var(--text-2); font-weight: 600; }

/* ── Mode toggle (Presión / Manual) ── */
.op-mode-toggle {
  display: flex; gap: 0; margin-bottom: 10px;
  border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.2);
}
.op-mode-btn {
  flex: 1; padding: 10px 14px;
  font-size: 14px; font-weight: 700;
  background: transparent; color: var(--text-2);
  border: none; cursor: pointer;
  transition: background .2s, color .2s;
}
.op-mode-btn:hover { background: rgba(255,255,255,.06); }
.op-mode-btn.op-mode-active {
  background: rgba(33,150,243,.22);
  color: #64b5f6;
  box-shadow: inset 0 -2px 0 #64b5f6;
}
.op-mode-btn[data-mode="manual"].op-mode-active {
  background: rgba(255,152,0,.18);
  color: #ffb74d;
  box-shadow: inset 0 -2px 0 #ffb74d;
}

/* ── Manual time inputs ── */
.op-manual-times {
  background: rgba(255,152,0,.08);
  border: 1px solid rgba(255,152,0,.25);
  border-radius: 10px; padding: 14px 16px;
  margin-bottom: 8px;
}
.op-manual-row {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 8px;
}
.op-manual-row:last-of-type { margin-bottom: 4px; }
.op-manual-label {
  font-size: 13px; font-weight: 600; color: var(--text-2);
  min-width: 80px;
}
.op-manual-input {
  padding: 8px 12px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.3); color: var(--text-1, #fff);
  font-size: 15px; font-weight: 600;
  font-family: inherit;
}
.op-manual-input:focus {
  outline: none; border-color: #ffb74d;
  box-shadow: 0 0 0 2px rgba(255,152,0,.25);
}
.op-manual-window {
  font-size: 12px; font-weight: 600;
  color: var(--text-2); text-align: right;
  margin-top: 4px;
}
@media (max-width: 480px) {
  .op-pw-grid { grid-template-columns: repeat(4, 1fr); }
}
.op-section {
  background: var(--bg-2, #1e1e1e);
  border: 1px solid var(--border, #333);
  border-radius: 12px; margin-bottom: 10px;
  overflow: hidden;
}
/* Type-coded section borders + header tint (blue=sprk, green=drip, orange=mist).
   Same visual language as the row colors and preview columns. */
.op-section-sprk { border-left: 4px solid #2196F3; }
.op-section-drip { border-left: 4px solid #4caf50; }
.op-section-mist { border-left: 4px solid #f59e0b; }
.op-section-sprk > .op-sec-hdr { background: rgba(33,150,243,.10); color: #64b5f6; }
.op-section-drip > .op-sec-hdr { background: rgba(76,175,80,.10); color: #81c784; }
.op-section-mist > .op-sec-hdr { background: rgba(245,158,11,.10); color: #ffb74d; }
.op-sec-hdr {
  padding: 12px 16px; cursor: pointer;
  font-weight: 700; font-size: 16px;
  user-select: none; display: flex; align-items: center; gap: 8px;
  list-style: none;
}
.op-sec-hdr::-webkit-details-marker { display: none; }
.op-section[open] > .op-sec-hdr::before { content: '▾ '; font-size: 12px; }
.op-section:not([open]) > .op-sec-hdr::before { content: '▸ '; font-size: 12px; }
.op-sec-body { padding: 8px 14px 14px; }
.op-sec-badge {
  font-size: 12px; font-weight: 800; background: var(--accent, #2196F3);
  color: #fff; border-radius: 10px; padding: 2px 8px; margin-left: 6px;
}
.op-cfg-row {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-bottom: 8px;
}
.op-cfg-lbl { font-weight: 600; font-size: 14px; min-width: 60px; }
.op-days { display: flex; gap: 5px; flex-wrap: wrap; }
.op-day-btn {
  padding: 6px 11px; border-radius: 8px;
  border: 1px solid var(--border, #444); background: transparent;
  color: var(--text-2); font-size: 13px; font-weight: 700;
  cursor: pointer; transition: background .15s, color .15s, transform .1s;
}
.op-day-btn:active { transform: scale(.95); }
.op-day-btn.active {
  background: var(--accent, #2196F3); color: #fff;
  border-color: var(--accent, #2196F3);
  box-shadow: 0 2px 8px rgba(33,150,243,.25);
}
.op-mode-sel {
  background: var(--bg-3, #2a2a2a); color: var(--text-1);
  border: 1px solid var(--border, #444); border-radius: 6px;
  padding: 5px 8px; font-size: 13px; font-weight: 600;
}
.op-stepper {
  display: inline-flex; align-items: center; gap: 0;
  border: 1px solid var(--border, #444); border-radius: 6px; overflow: hidden;
}
.op-sbtn {
  background: var(--bg-3, #2a2a2a); color: var(--text-1); border: none;
  padding: 4px 10px; font-size: 16px; font-weight: 700;
  cursor: pointer; line-height: 1;
}
.op-sbtn:active { background: var(--accent, #2196F3); }
.op-sval {
  width: 36px; text-align: center; border: none;
  background: var(--bg-2, #1e1e1e); color: var(--text-1);
  font-size: 14px; font-weight: 700; padding: 4px 0;
}
.op-unit { font-size: 11px; color: var(--text-3); margin-left: 4px; }
.op-x { font-weight: 700; color: var(--text-3); font-size: 14px; text-align: center; }
.op-zone-btns {
  display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; align-items: center;
}
.op-slots-row {
  display: flex; gap: 4px; margin-left: auto; align-items: center;
}
.op-slot-btn {
  padding: 4px 10px; font-size: 12px; font-weight: 600;
  background: rgba(255,255,255,.07); color: var(--text-2);
  border: 1px solid rgba(255,255,255,.13); border-radius: 6px;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.op-slot-btn:hover { background: rgba(255,255,255,.13); color: var(--text-1); }
.op-slot-btn.op-slot-sel {
  background: rgba(33,150,243,.25); color: #64b5f6; border-color: #64b5f6;
}
.op-zones-list {
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 6px;
}
/* Grid column header */
/* Unified compact grid (same on desktop and mobile, simpler & consistent UX).
   6 columns instead of 7 — the decorative "×" separator is hidden globally
   because the dur and rnd controls are visually distinct on their own. */
.op-grid-hdr {
  display: grid;
  grid-template-columns: 1.8fr 1fr 36px 48px 1.1fr .9fr;
  align-items: center; gap: 0;
  padding: 8px 0;
  background: rgba(255,255,255,.10);
  border-bottom: 2px solid rgba(255,255,255,.22);
}
/* Hide the decorative "×" separator and its column header */
.op-x { display: none !important; }
.op-grid-hdr .op-gh-x { display: none !important; }
.op-grid-hdr > span {
  font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .8px; color: var(--text-1);
  padding: 4px 10px; text-align: center;
  white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,.15);
}
.op-grid-hdr > span:last-child { border-right: none; }
.op-grid-hdr .op-gh-zona { text-align: left; }

.op-campo-div {
  font-size: 12px; font-weight: 700; color: var(--text-2);
  padding: 6px 0 2px; border-bottom: 1px dashed var(--border, #333);
}
/* Collapsible campo group wrapper */
.op-campo-wrap { margin: 6px 0 2px; border-radius: 10px; overflow: hidden; }
.op-campo-wrap > summary { list-style: none; cursor: pointer; }
.op-campo-wrap > summary::-webkit-details-marker { display: none; }
.op-campo-wrap > summary::marker { display: none; content: ''; }
.op-campo-hdr {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; padding: 10px 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
}
/* Zone count badge (visible when collapsed) */
.op-campo-count {
  font-size: 11px; font-weight: 700; color: var(--text-3);
  background: rgba(255,255,255,.08); border-radius: 10px;
  padding: 1px 7px; min-width: 18px; text-align: center;
}
/* Collapse arrow indicator */
.op-campo-arrow::after { content: '▾'; font-size: 12px; color: var(--text-3); transition: transform .2s; }
.op-campo-wrap:not([open]) .op-campo-arrow::after { content: '▸'; }
/* Hide day buttons when collapsed */
.op-campo-wrap:not([open]) .op-grupo-days { display: none; }
.op-campo-title { font-size: 15px; font-weight: 800; color: var(--text-1); letter-spacing: .3px; }
/* ── Encargado chip in campo headers ── */
.op-campo-enc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  color: var(--text-2);
  border: 1px solid rgba(255,255,255,.12);
  white-space: nowrap;
  text-transform: capitalize;
  letter-spacing: .2px;
}
/* Mine = highlighted (assigned to current logged-in user) */
.op-campo-enc-mine {
  background: rgba(34,197,94,.16);
  color: #4ade80;
  border-color: rgba(34,197,94,.4);
}
/* Sin encargado — needs attention, gentle warning style */
.op-campo-enc-none {
  background: rgba(245,158,11,.12);
  color: #f59e0b;
  border-color: rgba(245,158,11,.3);
  font-style: italic;
  font-weight: 600;
}
@media (max-width: 600px) {
  .op-campo-enc { font-size: 10px; padding: 1px 6px; }
}
.op-campo-days { display: flex; gap: 3px; flex-wrap: wrap; }
.op-campo-days .op-day-btn { padding: 2px 6px; font-size: 10px; }
/* Grupo-level day apply row */
.op-grupo-days { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.op-grupo-days .op-grupo-day {
  padding: 4px 8px; font-size: 12px; border-radius: 6px;
  border: 1px solid var(--border, #444); background: transparent;
  color: var(--text-3); cursor: pointer; font-weight: 700;
  min-width: 30px; text-align: center;
  transition: background .15s, color .15s, transform .1s;
}
.op-grupo-days .op-grupo-day:active { transform: scale(.93); }
.op-grupo-days .op-grupo-day.active {
  background: var(--warning, #ff9800); color: #fff; border-color: var(--warning);
  box-shadow: 0 2px 6px rgba(255,152,0,.25);
}
.op-grupo-apply {
  padding: 3px 8px; font-size: 13px; border-radius: 6px;
  border: 1px solid var(--success, #4caf50); background: rgba(76,175,80,.15);
  color: var(--success, #4caf50); cursor: pointer; font-weight: 700;
  transition: background .15s;
}
.op-grupo-apply:active { background: rgba(76,175,80,.3); }
/* Per-zone day buttons */
.op-zdays {
  display: flex; gap: 5px;
  grid-column: 1 / -1;
  margin-top: 4px; padding: 6px 8px 6px 28px;
  border-right: none !important;
  border-top: 1px solid rgba(255,255,255,.06);
}
.op-zday-btn {
  padding: 6px 10px; font-size: 14px; border-radius: 6px;
  border: 1px solid var(--border, #555); background: rgba(255,255,255,.03);
  color: var(--text-2); cursor: pointer; font-weight: 800;
  min-width: 36px; text-align: center;
  transition: background .15s, color .15s, transform .1s;
}
.op-zday-btn:active { transform: scale(.93); }
.op-zday-btn.active {
  background: var(--accent, #2196F3); color: #fff; border-color: var(--accent);
  box-shadow: 0 1px 4px rgba(33,150,243,.3);
}
.op-zrow {
  display: grid;
  grid-template-columns: 1.8fr 1fr 36px 48px 1.1fr .9fr;
  align-items: center; gap: 0;
  padding: 8px 0;
  background: rgba(255,255,255,.02);
  border-bottom: 1px solid rgba(255,255,255,.15);
  border-left: 4px solid transparent; /* Replaced per-type below */
  transition: background .15s, border-color .15s;
}
.op-zrow:hover { background: rgba(255,255,255,.07); }
.op-zrow:nth-child(even) { background: rgba(255,255,255,.05); }
/* ── Type-based row coloring (sprk = blue, drip = green, mist = orange) ──
   Lets you scan at a glance which kind of zone each row is. */
.op-zrow[data-ztype="sprk"] { border-left-color: #2196F3; }
.op-zrow[data-ztype="drip"] { border-left-color: #4caf50; }
.op-zrow[data-ztype="mist"] { border-left-color: #f59e0b; }
.op-zrow[data-ztype="sprk"]:hover { background: rgba(33,150,243,.10); }
.op-zrow[data-ztype="drip"]:hover { background: rgba(76,175,80,.10); }
.op-zrow[data-ztype="mist"]:hover { background: rgba(245,158,11,.10); }
.op-zrow > * {
  padding: 4px 10px;
  border-right: 1px solid rgba(255,255,255,.12);
}
.op-zrow > *:last-child { border-right: none; }
.op-zrow-off { opacity: .4; }
/* Dimmed campos/zones (not assigned to current user) */
.op-campo-dim { opacity: .5; }
.op-zrow-dim { opacity: .45; }
.op-campo-dim .op-campo-title { font-weight: 600; }
.op-zcb { display: flex; align-items: center; gap: 8px; cursor: pointer; min-width: 0; overflow: hidden; }
.op-zcb-in { width: 22px; height: 22px; accent-color: var(--accent, #2196F3); }
.op-zname {
  font-size: 16px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Last-irrigation cell (two-line: duration + time ago) */
.op-last-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 4px 6px; border-radius: 8px;
  line-height: 1.2; text-align: center;
}
.op-last-dur { font-size: 15px; font-weight: 800; }
.op-last-ago { font-size: 11px; font-weight: 600; opacity: .8; white-space: nowrap; }
.op-last-ok   { background: rgba(76,175,80,.15); color: #66bb6a; }
.op-last-warn { background: rgba(255,152,0,.15); color: #ffa726; }
.op-last-crit { background: rgba(244,67,54,.15); color: #ef5350; }
.op-last-none { background: rgba(255,255,255,.04); color: var(--text-3); }
.op-hist-btn {
  background: none; border: none; cursor: pointer; padding: 4px;
  font-size: 18px; line-height: 1; opacity: .7; transition: opacity .15s;
  justify-self: center;
}
.op-hist-btn:hover { opacity: 1; }
/* History popup */
.op-hist-popup {
  z-index: 100; width: 270px; max-width: calc(100vw - 24px);
  background: var(--bg-2, #1e1e1e); border: 1px solid var(--border, #444);
  border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,.5);
  padding: 10px; font-size: 12px;
}
.op-hist-loading, .op-hist-empty {
  text-align: center; padding: 16px 8px; color: var(--text-3);
}
.op-hist-hdr {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; margin-bottom: 8px; font-size: 12px; color: var(--text-2);
}
.op-hist-close {
  background: none; border: none; color: var(--text-3); cursor: pointer;
  font-size: 16px; padding: 0 2px; line-height: 1;
}
.op-hist-close:hover { color: var(--text-1, #fff); }
.op-hist-rows { display: flex; flex-direction: column; gap: 5px; }
.op-hist-row {
  display: grid; grid-template-columns: 1fr auto auto auto;
  align-items: center; gap: 6px;
}
.op-hist-bar-wrap {
  height: 8px; background: rgba(255,255,255,.06); border-radius: 4px; overflow: hidden;
}
.op-hist-bar {
  height: 100%; border-radius: 4px; min-width: 3px;
  transition: width .3s ease;
}
.op-hist-ok   { background: #66bb6a; }
.op-hist-warn { background: #ffa726; }
.op-hist-crit { background: #ef5350; }
.op-hist-dur { font-weight: 700; color: var(--text-1, #fff); white-space: nowrap; }
.op-hist-date { color: var(--text-3); white-space: nowrap; }
.op-hist-trigger { color: var(--text-3); white-space: nowrap; font-size: 11px; }
.op-order-sel {
  background: var(--bg-3, #2a2a2a); color: var(--text-1);
  border: 1px solid var(--border, #444); border-radius: 6px;
  padding: 6px 8px; font-size: 15px; font-weight: 800;
  min-width: 42px; text-align: center; justify-self: center;
}
.op-dur-wrap {
  display: inline-flex; align-items: center; gap: 0;
  border: 1px solid var(--accent, #2196F3); border-radius: 8px;
  overflow: hidden; background: rgba(33,150,243,.06);
  justify-self: center; min-width: 0;
}
.op-dur-wrap .op-sbtn { padding: 6px 12px; font-size: 18px; }
.op-dur-display {
  padding: 4px 10px; font-size: 16px; font-weight: 800;
  color: var(--accent, #2196F3); min-width: 50px; text-align: center;
  white-space: nowrap;
}
.op-rnd-wrap {
  display: inline-flex; align-items: center; gap: 0;
  border: 1px solid var(--success, #4caf50); border-radius: 8px;
  overflow: hidden; background: rgba(76,175,80,.06);
  justify-self: center; min-width: 0;
}
.op-rnd-wrap .op-sbtn { padding: 6px 12px; font-size: 18px; }
.op-rnd-display {
  padding: 4px 12px; font-size: 17px; font-weight: 900;
  color: var(--success, #4caf50); min-width: 26px; text-align: center;
}
.op-rnd-toggle {
  background: transparent; border: 1px solid var(--border, #444);
  border-radius: 6px; padding: 2px 6px; cursor: pointer;
  font-size: 14px; color: var(--text-3);
}
.op-rnd-toggle.active { background: var(--accent, #2196F3); color: #fff; border-color: var(--accent); }
.op-rnd-lbl { font-size: 13px; }
.op-rounds-row { display: flex; align-items: center; gap: 4px; width: 100%; padding-left: 24px; }
.op-rounds-row.hidden { display: none; }
/* Preview — contain scopes reflow to this subtree; the fade-in animation
   fires when op-preview-updating is removed after innerHTML replacement */
#op-preview {
  contain: layout paint style;
}
@keyframes op-pv-fadein {
  from { opacity: 0.4; }
  to   { opacity: 1; }
}
#op-preview:not(.op-preview-updating) {
  animation: op-pv-fadein 0.12s ease-out;
}
.op-preview-summary {
  background: rgba(33,150,243,.08); border-radius: 10px;
  padding: 10px 14px; margin-bottom: 10px; text-align: center;
  border: 1px solid rgba(33,150,243,.15);
}
.op-ps-main { font-size: 16px; font-weight: 700; color: var(--success, #4caf50); }
.op-ps-detail { font-size: 12px; color: var(--text-3); margin-top: 3px; }
.op-ps-spacing { font-size: 12px; color: var(--warning, #ff9800); margin-top: 3px; }
/* Day tabs */
.op-day-tabs {
  display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; justify-content: center;
}
.op-day-tab {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border, #444);
  background: rgba(255,255,255,.03); color: var(--text-2); cursor: pointer;
  font-size: 12px; font-weight: 600; min-width: 44px; transition: all .15s;
}
.op-day-tab:hover:not([disabled]) { border-color: var(--accent, #2196F3); background: rgba(33,150,243,.08); }
.op-day-tab-sel { background: var(--accent, #2196F3); color: #fff; border-color: var(--accent); box-shadow: 0 2px 8px rgba(33,150,243,.3); }
.op-day-tab-off { opacity: .3; cursor: default; }
.op-dt-label { font-size: 11px; text-transform: uppercase; font-weight: 700; letter-spacing: .5px; }
.op-dt-count { font-size: 14px; font-weight: 800; }
/* ── Resumen Semanal (op-all-days-summary) ── */
.op-all-days-summary {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border, #333);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.op-ads-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-1);
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}
.op-ads-row {
  display: grid;
  grid-template-columns: 22px minmax(70px, 1.3fr) auto auto auto;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,.02);
  border: 1px solid transparent;
  font-size: 12px;
  color: var(--text-2);
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
  text-align: left;
  font-family: inherit;
  width: 100%;
}
.op-ads-row:hover {
  background: rgba(33,150,243,.08);
  border-color: rgba(33,150,243,.3);
}
.op-ads-row:active { transform: scale(.99); }
.op-ads-row-sel {
  background: rgba(33,150,243,.16);
  border-color: rgba(33,150,243,.5);
  color: var(--text-1);
}
.op-ads-row-total {
  background: rgba(34,197,94,.08);
  border-color: rgba(34,197,94,.3);
  cursor: default;
  margin-top: 6px;
}
.op-ads-row-total:hover { background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.3); }
.op-ads-icon { font-size: 14px; text-align: center; line-height: 1; }
.op-ads-day { font-weight: 700; }
.op-ads-act, .op-ads-hrs {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
  text-align: right;
}
.op-ads-act small, .op-ads-hrs small {
  font-size: 9px;
  text-transform: uppercase;
  color: var(--text-3);
  margin-left: 2px;
  font-weight: 600;
}
.op-ads-chips {
  display: inline-flex;
  gap: 6px;
  font-size: 11px;
  color: var(--text-3);
}
.op-ads-chips span {
  background: rgba(255,255,255,.06);
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ── Timeline visualization ── */
.tl-wrap { margin: 12px 0 16px; background: rgba(0,0,0,.2); border-radius: 10px; padding: 10px 12px; overflow: hidden; }
.tl-title { font-size: 13px; font-weight: 700; color: var(--text-2); margin-bottom: 8px; text-align: center; }
.tl-axis { position: relative; min-height: 50px; padding-top: 20px; }
.tl-hour { position: absolute; top: 0; bottom: 0; transform: translateX(-50%); z-index: 2; pointer-events: none; }
.tl-hour-line { display: block; width: 1px; background: rgba(255,255,255,.18); position: absolute; top: 18px; left: 50%; bottom: 0; }
.tl-hour-lbl { display: block; font-size: 10px; font-weight: 700; color: var(--text-2); white-space: nowrap; text-align: center; padding: 0 2px; position: relative; z-index: 3; }
.tl-tick { position: absolute; top: 20px; bottom: 0; width: 1px; background: rgba(255,255,255,.06); z-index: 1; pointer-events: none; }
.tl-lanes { position: relative; display: flex; flex-direction: column; gap: 6px; }
.tl-lane { display: flex; gap: 4px; align-items: stretch; min-height: 24px; }
.tl-lane-hdr { flex-shrink: 0; width: 80px; font-size: 10px; font-weight: 700; color: var(--text-1); display: flex; align-items: center; padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,.04); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.1; }
.tl-lane-body { flex: 1; display: flex; flex-direction: column; gap: 2px; position: relative; min-height: 22px; }
.tl-sublane { position: relative; height: 22px; display: flex; align-items: center; }
.tl-slot-tag { position: absolute; left: -1px; top: 1px; font-size: 10px; font-weight: 800; color: #fff; padding: 1px 3px; border-radius: 3px; z-index: 3; line-height: 1; opacity: .7; }
.tl-block { position: absolute; height: 18px; border-radius: 4px; opacity: .85; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: default; transition: opacity .15s; min-width: 2px; }
.tl-block:hover { opacity: 1; z-index: 10; box-shadow: 0 0 6px rgba(255,255,255,.3); }
.tl-block-lbl { font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 3px; }
@media (max-width: 600px) {
  .tl-lane-hdr { width: 55px; font-size: 11px; }
  .tl-hour-lbl { font-size: 10px; }
  .tl-block-lbl { font-size: 10px; }
}

.op-preview-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.op-pv-col { display: flex; flex-direction: column; gap: 3px; }
.op-pv-col-empty { opacity: .5; }
.op-pv-col-hdr { font-weight: 700; font-size: 13px; padding: 6px 8px; border-radius: 8px; text-align: center; margin-bottom: 4px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.op-pv-col-slots { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.op-pv-col-slots .op-slot-btn { padding: 3px 8px; font-size: 11px; }
/* Type-based column header colors (more reliable than nth-child since the
   number of columns varies — sprk + drip + N HH groups). */
.op-pv-col-sprk .op-pv-col-hdr { background: rgba(33,150,243,.12); color: #2196F3; }
.op-pv-col-drip .op-pv-col-hdr { background: rgba(76,175,80,.12); color: #4caf50; }
.op-pv-col-mist .op-pv-col-hdr { background: rgba(245,158,11,.12); color: #f59e0b; }
/* nth-child fallback for unknown types (no ztype passed) */
.op-pv-col:not([class*="op-pv-col-sprk"]):not([class*="op-pv-col-drip"]):not([class*="op-pv-col-mist"]):nth-child(1) .op-pv-col-hdr { background: rgba(33,150,243,.12); color: #2196F3; }
.op-pv-col:not([class*="op-pv-col-sprk"]):not([class*="op-pv-col-drip"]):not([class*="op-pv-col-mist"]):nth-child(2) .op-pv-col-hdr { background: rgba(76,175,80,.12); color: #4caf50; }
.op-pv-col:not([class*="op-pv-col-sprk"]):not([class*="op-pv-col-drip"]):not([class*="op-pv-col-mist"]):nth-child(3) .op-pv-col-hdr { background: rgba(245,158,11,.12); color: #f59e0b; }
.op-preview-list { display: flex; flex-direction: column; gap: 3px; }
.op-pv-round-sep { height: 1px; background: rgba(255,255,255,.15); margin: 6px 0; }
.op-pv-round-hdr { font-size: 11px; font-weight: 700; color: var(--text-2); padding: 4px 8px; margin: 2px 0; border-radius: 4px; background: rgba(255,255,255,.06); text-align: center; }
.op-pv-row {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px; border-radius: 6px;
  background: rgba(255,255,255,.03);
}
.op-pv-overflow { background: rgba(245,158,11,.08); border-left: 2px solid #f59e0b; }
.op-pv-nextday { font-size: 10px; font-weight: 700; color: #f59e0b; margin-left: 2px; vertical-align: super; }
.op-pv-sprk { border-left: 3px solid #2196F3; }
.op-pv-drip { border-left: 3px solid #4caf50; }
.op-pv-mist { border-left: 3px solid #f59e0b; }
.op-pv-slot { flex-shrink: 0; }
.op-pv-icon { font-size: 13px; flex-shrink: 0; }
.op-pv-name { font-weight: 600; font-size: 13px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-pv-time { font-weight: 700; font-size: 12px; color: var(--success, #4caf50); white-space: nowrap; }
.op-pv-dur { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.op-pv-rnd { font-size: 10px; color: var(--text-3); white-space: nowrap; }
.op-remain { text-align: center; padding: 6px; font-size: 12px; color: var(--success, #4caf50); margin-top: 4px; }
.op-remain-tight { color: var(--warning, #ff9800); }
/* Button in schedules header */
.btn-unified-prog {
  background: linear-gradient(135deg, #2196F3, #4caf50);
  color: #fff; border: none; padding: 6px 14px;
  border-radius: 8px; font-weight: 700; font-size: 13px;
  cursor: pointer;
}
.btn-unified-prog:active { opacity: .8; }
/* Mobile */
@media (max-width: 600px) {
  .op-header { padding: 8px 10px; }
  .op-header h2 { font-size: 15px; }
  .op-body { padding: 8px 8px 16px; }
  .op-footer { padding: 8px 10px; flex-wrap: wrap; }
  .op-sec-body { padding: 6px 8px 10px; }
  /* The compact 6-col grid is the default (defined on .op-zrow /
     .op-grid-hdr at the top of this file). On mobile we just tighten
     vertical paddings; the grid itself stays the same. */
  .op-zrow { padding: 6px 0; }
  .op-grid-hdr { padding: 6px 0; }
  .op-grid-hdr > span { font-size: 10px; padding: 2px 6px; }
  .op-zrow > * { padding: 3px 6px; }
  .op-zname { font-size: 14px; }
  .op-last-dur { font-size: 13px; }
  .op-last-ago { font-size: 10px; }
  .op-dur-wrap .op-sbtn { padding: 4px 8px; font-size: 15px; }
  .op-dur-display { font-size: 14px; padding: 3px 6px; min-width: 32px; }
  .op-rnd-wrap .op-sbtn { padding: 4px 8px; font-size: 15px; }
  .op-rnd-display { font-size: 14px; padding: 3px 6px; min-width: 24px; }
  .op-order-sel { font-size: 13px; padding: 4px 6px; }
  .op-zdays { padding-left: 12px; gap: 4px; }
  .op-zday-btn { font-size: 12px; min-width: 30px; padding: 5px 7px; }
  .op-grupo-days { gap: 3px; }
  .op-grupo-days .op-grupo-day { font-size: 11px; padding: 3px 6px; }
  .op-campo-hdr { padding: 8px 10px; }
  .op-campo-title { font-size: 14px; }
  .op-day-tab { padding: 5px 7px; min-width: 38px; font-size: 11px; }
  .op-dt-label { font-size: 10px; }
  .op-dt-count { font-size: 12px; }
  /* Resumen Semanal — compact mobile layout */
  .op-all-days-summary { padding: 8px 10px; margin-top: 10px; }
  .op-ads-title { font-size: 12px; margin-bottom: 4px; }
  .op-ads-row {
    grid-template-columns: 18px 1fr auto auto;
    gap: 6px;
    padding: 5px 7px;
    font-size: 11px;
  }
  .op-ads-row-total { margin-top: 4px; }
  .op-ads-icon { font-size: 13px; }
  .op-ads-act, .op-ads-hrs { font-size: 11px; }
  .op-ads-chips { gap: 3px; font-size: 10px; }
  .op-ads-chips span { padding: 1px 4px; }
  /* Preview rows — compact */
  .op-pv-row { gap: 5px; padding: 4px 6px; }
  .op-pv-name { font-size: 12px; }
  .op-pv-time { font-size: 11px; }
}

/* ── Smallest screens (iPhone SE / mini): tighter Resumen Semanal ── */
@media (max-width: 400px) {
  .op-ads-row {
    grid-template-columns: 16px 1fr auto;
    font-size: 10px;
    padding: 4px 6px;
  }
  /* Hide the chips row on very narrow screens — info still in row count */
  .op-ads-chips { display: none; }
  .op-ads-act small, .op-ads-hrs small { display: none; }
}

/* ── Field-mode toggle button ── */
.op-field-btn {
  background: none; border: 1px solid var(--border, #444);
  color: var(--text-2, #aaa); font-size: 18px; line-height: 1;
  border-radius: 6px; padding: 3px 7px; cursor: pointer;
  transition: background .15s, color .15s;
}
.op-field-btn:hover { background: rgba(255,255,255,.08); }
.op-field-btn-on {
  background: rgba(255,220,50,.15);
  border-color: #ffd832;
  color: #ffd832;
}

/* ── API status dot ── */
.op-api-dot {
  width: 9px; height: 9px; border-radius: 50%;
  display: inline-block; flex-shrink: 0;
  box-shadow: 0 0 4px currentColor;
}
.op-api-on  { background: #22c55e; color: #22c55e; }
.op-api-off { background: #ef4444; color: #ef4444; }

/* ── Field mode — high contrast for direct sunlight ── */
.op-fullscreen.field-mode {
  background: #000;
  --bg-1: #000; --bg-2: #111; --bg-card: #0d0d0d;
  --border: #555; --text-1: #fff; --text-2: #ddd; --text-3: #bbb;
}
.op-fullscreen.field-mode .op-zname { font-size: 15px; font-weight: 700; }
.op-fullscreen.field-mode .op-dur-display,
.op-fullscreen.field-mode .op-rnd-display { font-size: 15px; font-weight: 700; }
.op-fullscreen.field-mode .op-sbtn {
  min-width: 40px; min-height: 40px; font-size: 20px; font-weight: 700;
}
.op-fullscreen.field-mode .op-slot-btn {
  font-size: 14px; font-weight: 700; min-height: 40px;
}
.op-fullscreen.field-mode .op-pv-row {
  font-size: 13px; font-weight: 600; padding: 8px 8px;
}
.op-fullscreen.field-mode .op-pv-time { font-size: 12px; font-weight: 700; }
.op-fullscreen.field-mode .op-sec-hdr { font-size: 15px; font-weight: 700; }
.op-fullscreen.field-mode .op-campo-title { font-size: 16px; font-weight: 700; }
.op-fullscreen.field-mode .op-zrow { border-bottom: 1px solid #333; padding: 8px 0; }
.op-fullscreen.field-mode .btn-primary { font-size: 16px; font-weight: 800; padding: 12px 24px; }

/* ── Toast: larger on mobile ── */
@media (max-width: 600px) {
  .toast { font-size: 15px; padding: 14px 20px; border-radius: 14px; bottom: 28px; }
  .op-footer { padding: 8px 10px max(8px, env(safe-area-inset-bottom)) 10px; flex-wrap: wrap; }
}

/* ============================================================
   ENCARGADO VIEW
   ============================================================ */
.enc-view { max-width: 900px; margin: 0 auto; padding: 12px; }
.enc-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.enc-title { font-size: 1.4rem; font-weight: 700; margin: 0; }
.enc-share { background: none; border: none; font-size: 1.3rem; cursor: pointer; padding: 6px; border-radius: 8px; }
.enc-share:hover { background: var(--hover-bg, rgba(0,0,0,.06)); }
.enc-empty { text-align: center; padding: 40px 20px; color: var(--text-secondary, #888); }

.enc-group { background: var(--card-bg, #fff); border-radius: 12px; margin-bottom: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.enc-group[open] { box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.enc-group-hdr { padding: 12px 14px; display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; user-select: none; }
.enc-group-hdr::-webkit-details-marker { display: none; }
.enc-gh-icon { font-size: 1.3rem; }
.enc-gh-name { font-weight: 600; font-size: 1.05rem; flex: 1; }
.enc-gh-counts { display: flex; gap: 6px; flex-wrap: wrap; }
.enc-badge { font-size: .75rem; padding: 2px 8px; border-radius: 10px; background: var(--badge-bg, #e8f5e9); color: var(--badge-color, #2e7d32); font-weight: 600; white-space: nowrap; }
.enc-badge-active { background: #e3fcec; color: #0d6; animation: enc-pulse 1.5s infinite; }
@keyframes enc-pulse { 0%,100%{ opacity:1 } 50%{ opacity:.7 } }

.enc-group-body { padding: 0 14px 14px; }
.enc-users { font-size: .85rem; color: var(--text-secondary, #666); margin-bottom: 8px; }

.enc-active-banner { background: linear-gradient(135deg, #e8f5e9, #c8e6c9); padding: 8px 12px; border-radius: 8px; font-size: .88rem; font-weight: 600; margin-bottom: 10px; }
.enc-active-chip { display: inline-flex; align-items: center; gap: 4px; background: rgba(255,255,255,.7); padding: 2px 8px; border-radius: 6px; margin: 2px; }

.enc-next { font-size: .85rem; margin-bottom: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.enc-next-title { font-weight: 600; }
.enc-next-chip { background: var(--chip-bg, #f0f4ff); padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.enc-next-more { color: var(--text-secondary, #888); font-size: .8rem; }

.enc-prog-summary { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; padding: 6px 0; border-bottom: 1px solid var(--border-color, #e0e0e0); }
.enc-ps { font-size: .85rem; }
.enc-ps-paused { color: var(--text-secondary, #999); }

.enc-sched-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.enc-srow { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; background: var(--row-bg, #fafafa); font-size: .88rem; transition: opacity .2s; }
.enc-srow-off { opacity: .5; }
.enc-srow-time { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 52px; }
.enc-srow-zone { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enc-srow-days { display: flex; gap: 2px; }
.enc-sd { font-size: .7rem; font-weight: 600; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--day-bg, #e8f5e9); color: var(--day-color, #2e7d32); }
.enc-srow-dur { font-size: .8rem; color: var(--text-secondary, #666); min-width: 40px; text-align: right; }
.enc-srow-edit { background: none; border: none; cursor: pointer; font-size: 1rem; padding: 2px 4px; border-radius: 6px; }
.enc-srow-edit:hover { background: var(--hover-bg, rgba(0,0,0,.06)); }

.enc-no-scheds { text-align: center; padding: 16px; color: var(--text-secondary, #999); font-size: .88rem; }

.enc-missing { background: #fff8e1; padding: 8px 12px; border-radius: 8px; margin-bottom: 10px; font-size: .85rem; }
.enc-miss-title { font-weight: 600; }
.enc-miss-chip { display: inline-block; margin: 2px 4px; }

.enc-timeline { margin-bottom: 10px; }
.enc-timeline-title { font-size: .85rem; font-weight: 600; margin-bottom: 4px; }

.enc-actions { display: flex; gap: 8px; padding-top: 8px; border-top: 1px solid var(--border-color, #e0e0e0); }
.enc-act-prog { flex: 1; padding: 10px; border: none; border-radius: 10px; background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; font-weight: 700; font-size: .95rem; cursor: pointer; text-align: center; }
.enc-act-prog:hover { filter: brightness(1.05); }

/* Encargado dark mode */
@media (prefers-color-scheme: dark) {
  .enc-group { background: var(--card-bg, #1e1e2e); }
  .enc-badge { background: rgba(34,197,94,.15); color: #4ade80; }
  .enc-badge-active { background: rgba(34,197,94,.2); color: #4ade80; }
  .enc-active-banner { background: linear-gradient(135deg, rgba(34,197,94,.15), rgba(34,197,94,.08)); }
  .enc-active-chip { background: rgba(255,255,255,.1); }
  .enc-next-chip { background: rgba(99,102,241,.15); }
  .enc-srow { background: var(--row-bg, rgba(255,255,255,.04)); }
  .enc-sd { background: rgba(34,197,94,.15); color: #4ade80; }
  .enc-missing { background: rgba(251,191,36,.1); }
}

/* Encargado mobile */
@media (max-width: 600px) {
  .enc-view { padding: 8px; }
  .enc-title { font-size: 1.15rem; }
  .enc-group-hdr { padding: 10px; gap: 6px; }
  .enc-gh-name { font-size: .95rem; }
  .enc-srow { padding: 6px 8px; font-size: .82rem; gap: 5px; }
  .enc-srow-time { min-width: 44px; font-size: .82rem; }
  .enc-sd { width: 16px; height: 16px; font-size: .65rem; }
  .enc-srow-dur { font-size: .75rem; }
  .enc-act-prog { padding: 9px; font-size: .88rem; }
  .op-preview-cols { grid-template-columns: 1fr; }

  /* Programmer mobile: larger touch targets + readable text */
  .op-slot-btn { padding: 10px 14px; font-size: 13px; min-height: 44px; }
  .op-pv-col-slots .op-slot-btn { padding: 8px 10px; font-size: 12px; min-height: 40px; }
  .op-pv-col-hdr { font-size: 14px; padding: 8px 10px; }
  .op-pv-row { padding: 7px 8px; min-height: 36px; font-size: 12px; }
  .op-pv-time { font-size: 11px; }
  .op-pv-dur { font-size: 11px; }
  .op-sbtn { min-width: 36px; min-height: 44px; }
  .op-day-tab { min-height: 36px; padding: 6px 10px; }
  .op-zday-btn { min-width: 40px; min-height: 44px; font-size: 11px; }
  .op-order-sel { min-height: 32px; font-size: 12px; }
  .op-pv-round-hdr { font-size: 12px; padding: 6px 8px; }
  .op-ps-main { font-size: 14px; }
}

/* ── Mi Turno Card ── */
.mi-turno-card { background: linear-gradient(135deg, rgba(99,102,241,.15), rgba(34,197,94,.1)); border: 1px solid rgba(99,102,241,.3); border-radius: 12px; padding: 14px 16px; margin: 12px 0; }
.mi-turno-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; flex-wrap: wrap; gap: 4px; }
.mi-turno-title { font-weight: 700; font-size: 1.05rem; }
.mi-turno-grp { font-size: .82rem; color: var(--text-3); }
.mi-turno-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.mi-turno-stat { font-size: .85rem; color: var(--text-2); }
.mi-turno-stat b { color: var(--text-1); }
.mi-turno-active { color: #4ade80 !important; }
.mi-turno-active b { color: #4ade80; }
.mi-turno-active-list { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.mi-turno-chip { display: inline-flex; align-items: center; gap: 4px; background: rgba(255,255,255,.08); padding: 3px 8px; border-radius: 6px; font-size: .8rem; color: var(--text-2); }
.mi-turno-chip-active { background: rgba(34,197,94,.15); color: #4ade80; }
.mi-turno-next { font-size: .82rem; color: var(--text-2); margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.mi-turno-next-lbl { font-weight: 600; color: var(--text-1); }
.mi-turno-more { font-size: .75rem; color: var(--text-3); }
.mi-turno-btn { background: rgba(99,102,241,.2); color: var(--primary); border: 1px solid rgba(99,102,241,.3); border-radius: 8px; padding: 6px 14px; font-size: .82rem; cursor: pointer; font-weight: 600; }
.mi-turno-btn:hover { background: rgba(99,102,241,.35); }

.belt-grp-user {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  opacity: 0.7;
  white-space: nowrap;
}

.belt-sched {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 1px 0;
  font-size: 11px;
  flex-wrap: wrap;
}
.belt-sched-type {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}
.belt-sched-name {
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90%;
}
.belt-sched-time {
  font-size: 11px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.belt-sched-dur {
  font-size: 11px;
  font-weight: 800;
  color: var(--accent);
  margin-left: auto;
  font-family: "SF Mono", Consolas, monospace;
}

/* ── Empty face ── */
.belt-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: var(--text-3);
  font-size: 10px;
  opacity: 0.4;
}

/* ── Status bar ── */
.belt-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 6px 10px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  border-top: 1px solid var(--border);
  background: var(--bg-2);
}
.belt-status-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.belt-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.belt-status-sun {
  font-size: 10px;
  color: var(--text-2);
  letter-spacing: 0.3px;
}

/* ── Edge fade for 3D illusion ── */
.belt-fade-l,
.belt-fade-r {
  position: absolute;
  top: 0;
  width: 60px;
  height: 100%;
  z-index: 4;
  pointer-events: none;
}
.belt-fade-l {
  left: 0;
  background: linear-gradient(to right, var(--bg-1) 0%, transparent 100%);
}
.belt-fade-r {
  right: 0;
  background: linear-gradient(to left, var(--bg-1) 0%, transparent 100%);
}

/* ═══════════════════════════════════════════
   LIGHT THEME OVERRIDES
   ═══════════════════════════════════════════ */
[data-theme="light"] .tx-modal-pro {
  border-color: rgba(147, 51, 234, 0.25);
  background: #fff;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
[data-theme="light"] .tx-modal-hdr {
  background: linear-gradient(135deg, rgba(147,51,234,0.08), rgba(168,85,247,0.03));
  border-bottom-color: rgba(147,51,234,0.12);
}
[data-theme="light"] .tx-modal-hdr-text h3 { color: #7c3aed; }
[data-theme="light"] .tx-modal-zone-pill { background: rgba(0,0,0,0.04); color: var(--text-2); }
[data-theme="light"] .tx-section { background: rgba(0,0,0,0.02); }

/* Zone panel action buttons */
[data-theme="light"] .zd-act-treatment { background: rgba(147,51,234,0.1); color: #7c3aed; border-color: rgba(147,51,234,0.25); }
[data-theme="light"] .zd-act-treatment-cancel { color: #7c3aed; border-color: rgba(147,51,234,0.25); }
[data-theme="light"] .zd-act-ipm-hist { background: rgba(147,51,234,0.06); border-color: rgba(147,51,234,0.15); color: #7c3aed; }
[data-theme="light"] .zd-act-ipm-hist:hover { background: rgba(147,51,234,0.14); }
[data-theme="light"] .zd-act-report { background: rgba(234,88,12,0.08); color: #c2410c; border-color: rgba(234,88,12,0.2); }
[data-theme="light"] .zd-act-report:hover { background: rgba(234,88,12,0.15); }

/* IPM History modal */
[data-theme="light"] .ipmh-stat { background: rgba(147,51,234,0.06); border-color: rgba(147,51,234,0.12); }
[data-theme="light"] .ipmh-stat-val { color: #7c3aed; }
[data-theme="light"] .ipmh-card { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .ipmh-card-report { background: rgba(234,88,12,0.04); border-left-color: rgba(234,88,12,0.4); }
[data-theme="light"] .ipmh-badge-set { background: rgba(147,51,234,0.1); color: #7c3aed; }
[data-theme="light"] .ipmh-badge-clear { background: rgba(34,197,94,0.1); color: #15803d; }
[data-theme="light"] .ipmh-badge-report { background: rgba(234,88,12,0.1); color: #c2410c; }
[data-theme="light"] .ipmh-compact-row { background: rgba(0,0,0,0.02); }
[data-theme="light"] .ipmh-compact-main { color: var(--text-1); }
[data-theme="light"] .ipmh-compact-pest { color: #c2410c; }
[data-theme="light"] .ipmh-tab-active { background: rgba(147,51,234,0.08); color: #7c3aed; }
[data-theme="light"] .ipmh-tab-count { background: rgba(147,51,234,0.1); color: #7c3aed; }
[data-theme="light"] .ipmh-group-card { background: rgba(147,51,234,0.04); border-color: rgba(147,51,234,0.1); border-left-color: rgba(147,51,234,0.3); }
[data-theme="light"] .ipmh-group-tag { background: rgba(0,0,0,0.04); color: var(--text-2); }
[data-theme="light"] .ipmh-col-title { color: var(--text-1); }
[data-theme="light"] .ipmh-col-count { background: rgba(0,0,0,0.06); color: var(--text-2); }
[data-theme="light"] .ipmh-btn-done { background: rgba(22,163,74,0.1); color: #15803d; }
[data-theme="light"] .ipmh-btn-done:hover { background: rgba(22,163,74,0.2); }
[data-theme="light"] .ipmh-btn-del { background: rgba(220,38,38,0.06); color: #dc2626; }
[data-theme="light"] .ipmh-btn-del:hover { background: rgba(220,38,38,0.12); }
[data-theme="light"] .ipmh-archive-title { color: var(--text-3); border-top-color: rgba(0,0,0,0.08); }
[data-theme="light"] .ipmh-row-done { background: rgba(22,163,74,0.04); color: var(--text-3); }
[data-theme="light"] .ipmh-rpt-plant { color: #15803d; }
[data-theme="light"] .ipmh-wx { background: rgba(0,0,0,0.03); color: var(--text-3); }
[data-theme="light"] .ipmh-card-details { color: var(--text-2); }
[data-theme="light"] .ipmh-detail-lbl { color: var(--text-3); }
[data-theme="light"] .ipmh-detail-val { color: var(--text-1); }

/* IPM Report modal */
[data-theme="light"] .rpt-chip { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); color: var(--text-1); }
[data-theme="light"] .rpt-chip:hover { background: rgba(147,51,234,0.08); border-color: rgba(147,51,234,0.25); }
[data-theme="light"] .rpt-chip-active { background: rgba(147,51,234,0.12); border-color: #7c3aed; color: #7c3aed; }
[data-theme="light"] .rpt-plant-btn { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.08); color: var(--text-1); }
[data-theme="light"] .rpt-plant-btn:hover { background: rgba(22,163,74,0.06); border-color: rgba(22,163,74,0.2); }
[data-theme="light"] .rpt-plant-active { background: rgba(22,163,74,0.1); border-color: #15803d; }
[data-theme="light"] .rpt-plant-name { color: var(--text-1); }
[data-theme="light"] .rpt-plant-loc { color: var(--text-3); }
[data-theme="light"] .rpt-plant-qty { color: var(--text-3); }
[data-theme="light"] .rpt-selected-plant { background: rgba(22,163,74,0.06); color: #15803d; }
[data-theme="light"] .rpt-label { color: var(--text-2); }
[data-theme="light"] .rpt-label select,
[data-theme="light"] .rpt-label input,
[data-theme="light"] .rpt-label textarea {
  background: #f8fafc; border-color: rgba(0,0,0,0.15); color: var(--text-1);
}
[data-theme="light"] .rpt-pest-chip { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); color: var(--text-1); }
[data-theme="light"] .rpt-pest-chip:hover { background: rgba(234,88,12,0.08); border-color: rgba(234,88,12,0.25); }
[data-theme="light"] .rpt-pest-chip-active { background: rgba(234,88,12,0.12); border-color: #c2410c; color: #c2410c; }

/* Deshierbe modal */
[data-theme="light"] .desh-last-card { color: var(--text-1); background: rgba(0,0,0,0.02); border-color: var(--border); }
[data-theme="light"] .desh-hist-row { color: var(--text-3); border-left-color: var(--border); }
[data-theme="light"] .desh-reg-form label { color: var(--text-3); }
[data-theme="light"] .desh-reg-form select,
[data-theme="light"] .desh-reg-form textarea { background: #f8fafc; color: var(--text-1); border-color: var(--border); }
[data-theme="light"] .desh-subs-label { color: var(--text-2); }
[data-theme="light"] .desh-subs-all { border-color: var(--border); color: var(--text-3); }
[data-theme="light"] .desh-subs-all:hover { background: #f1f5f9; color: var(--text-1); }
[data-theme="light"] .desh-sub-chk { background: #f8fafc; border-color: #cbd5e1; color: #64748b; }
[data-theme="light"] .desh-sub-chk--on { background: rgba(34,197,94,0.12); border-color: #22c55e; color: #16a34a; }
[data-theme="light"] .desh-zone-name { color: var(--text-1); }
[data-theme="light"] .desh-pend { color: var(--text-2); background: rgba(0,0,0,0.03); border-color: var(--border); }
[data-theme="light"] .desh-section-title { color: var(--text-2); }

/* ── Indicator triangle (top center) ── */
.belt-indicator {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid var(--accent);
  z-index: 10;
  filter: drop-shadow(0 1px 3px rgba(0, 212, 255, 0.4));
}

/* ── Weather row inside face ── */
.belt-wx {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 9px;
  color: var(--text-3);
  padding: 2px 0 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 4px;
  flex-shrink: 0;
}
.belt-wx-icon {
  font-size: 14px;
  line-height: 1;
}
.belt-wx-temp {
  font-weight: 800;
  color: var(--text-1);
  font-size: 12px;
  line-height: 1;
}
.belt-wx-wind-row {
  display: flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}
.belt-wind-arrow {
  flex-shrink: 0;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4));
}
.belt-wx-wspd {
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
.belt-wx-wunit {
  font-size: 7px;
  color: var(--text-3);
  opacity: 0.7;
}
.belt-wx-wdir {
  font-size: 8px;
  font-weight: 700;
  color: var(--text-2);
  margin-left: 1px;
}

/* ── Filter bar ── */
.belt-filters {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.belt-filters::-webkit-scrollbar {
  display: none;
}
.belt-fbtn {
  flex-shrink: 0;
  padding: 3px 10px;
  min-height: 44px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-3);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.belt-fbtn:hover {
  color: var(--text-1);
  border-color: var(--text-3);
}
.belt-fbtn.belt-fbtn-active {
  background: rgba(0, 212, 255, 0.12);
  color: var(--accent);
  border-color: var(--accent);
}
.belt-fsep {
  color: var(--border);
  font-size: 14px;
  font-weight: 300;
  flex-shrink: 0;
  padding: 0 2px;
}

/* ── Arrow navigation buttons ── */
.belt-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 8;
  width: 44px;
  height: 50px;
  border: none;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.45);
  color: var(--text-1);
  font-size: 22px;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0.6;
}
.belt-arrow:hover {
  opacity: 1;
  background: rgba(0, 212, 255, 0.2);
}
.belt-arrow:active {
  transform: translateY(-50%) scale(0.92);
}
.belt-arrow-l {
  left: 4px;
}
.belt-arrow-r {
  right: 4px;
}

/* ── Duration bar ── */
.belt-dur-bar {
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  overflow: hidden;
  margin: 1px 0 3px;
}
.belt-dur-fill {
  height: 100%;
  border-radius: 2px;
  opacity: 0.7;
  transition: width 0.3s ease;
}

/* ── Phone optimization ── */
@media (max-width: 600px) {
  .belt-scene {
    height: 280px;
  }
  .belt-face {
    padding: 8px 4px 6px;
  }
  .belt-hr-time {
    font-size: 13px;
  }
  .belt-sched-name {
    max-width: 95%;
  }
  .belt-days {
    gap: 3px;
    padding: 8px 0 4px;
  }
  .belt-day-dot {
    padding: 3px 7px;
    font-size: 9px;
  }
  .belt-day-dot .belt-dd-num {
    font-size: 12px;
  }
  .belt-fade-l,
  .belt-fade-r {
    width: 35px;
  }
  .belt-wx-temp {
    font-size: 10px;
  }
  .belt-wx-wspd {
    font-size: 9px;
  }
  .belt-filters {
    padding: 3px 6px 4px;
    gap: 3px;
  }
  .belt-fbtn {
    padding: 2px 7px;
    font-size: 9px;
  }
  .belt-arrow {
    width: 26px;
    height: 40px;
    font-size: 18px;
    opacity: 0.5;
  }
}

/* ══════ Touch Device Fallbacks ══════ */
@media (hover: none) {
  .relay-slot-btn,
  .esp-rename-btn {
    opacity: 0.8;
  }
  .belt-arrow {
    opacity: 0.8;
  }
}

/* ══════ Inventory — Fullscreen Plant & Mission Viewer ══════ */
/* Fix: backdrop-filter blur(4px) was recalculating against the underlying map's
   animated SVG patterns every scroll/paint frame — caused visible translucency
   and incomplete card loads when the panel opened over active zones. Solid
   background with high alpha gives the same visual without the per-frame cost. */
.inv-fs-overlay{position:fixed;inset:0;background:rgba(2,6,14,.94);z-index:9998;display:flex;align-items:center;justify-content:center}
/* dvh handles mobile keyboard / dynamic browser chrome; falls back to vh on older browsers */
.inv-fs{position:relative;background:var(--bg-card,#1a1a2e);border:1px solid var(--border,#333);border-radius:16px;width:min(960px,96vw);height:min(92vh,800px);height:min(92dvh,800px);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.6);contain:layout paint}

/* Header */
.inv-fs-hd{display:flex;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border,#333);background:var(--bg-card,#1a1a2e);flex-shrink:0}
.inv-fs-hd-left{display:flex;align-items:center;gap:12px;flex:1;flex-wrap:wrap}
.inv-fs-title{font-size:20px;font-weight:800;color:#fff;letter-spacing:0.3px}
.inv-fs-stats{font-size:13px;color:var(--text-muted,#888);background:#ffffff08;padding:4px 10px;border-radius:6px}
.inv-fs-week{font-size:11px;font-weight:700;color:#00ff6a;background:#00ff6a18;padding:2px 8px;border-radius:4px;text-shadow:0 0 4px rgba(0,255,106,0.3)}
.inv-fs-cap{font-size:11px;font-weight:700;padding:2px 8px;border-radius:4px}
.inv-cap-ok{background:#00ff6a18;color:#00ff6a;text-shadow:0 0 4px rgba(0,255,106,0.3)}
.inv-cap-high{background:#ffcc0018;color:#ffcc00;text-shadow:0 0 4px rgba(255,204,0,0.3)}
.inv-cap-over{background:#ff444418;color:#ff4444;text-shadow:0 0 4px rgba(255,68,68,0.3)}
.inv-fs-pot{font-size:11px;color:var(--text-muted,#888);background:#ffffff08;padding:2px 8px;border-radius:4px}
.inv-fs-loaded{font-size:11px;color:var(--text-muted,#94a3b8);background:#ffffff08;padding:2px 8px;border-radius:4px;white-space:nowrap}
.inv-fs-close{background:none;border:none;color:#ff3b3b;font-size:30px;font-weight:700;cursor:pointer;padding:0 8px;line-height:1;transition:all .15s;text-shadow:0 0 6px rgba(255,59,59,0.5)}
.inv-fs-close:hover{color:#ff1a1a;text-shadow:0 0 12px rgba(255,59,59,0.7)}

/* Tabs */
.inv-tabs{display:flex;gap:2px;padding:0 20px;border-bottom:1px solid var(--border,#333);background:var(--bg-card,#1a1a2e);flex-shrink:0}
.inv-tab{background:none;border:none;color:var(--text-2,#c9d1e0);font-size:14px;font-weight:700;letter-spacing:.2px;padding:10px 16px;cursor:pointer;border-bottom:2px solid transparent;transition:all .15s}
.inv-tab:hover{color:var(--text-1,#eef2f7)}
.inv-tab-sel{color:#00d4ff;border-bottom-color:#00d4ff;text-shadow:0 0 4px rgba(0,212,255,0.3)}
.inv-tab-body{display:none;flex:1;overflow-y:auto;padding:16px 20px}
.inv-tab-active{display:block}

/* Field sub-tabs (merged zones) */
.inv-field-tabs{display:flex;gap:4px;padding:0 0 12px;border-bottom:1px solid #ffffff12;margin-bottom:14px;flex-wrap:wrap}
.inv-field-tab{background:#ffffff0a;border:1px solid #ffffff15;border-radius:8px;color:var(--text-muted,#999);font-size:13px;font-weight:600;padding:7px 14px;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:6px}
.inv-field-tab:hover{background:#a78bfa18;border-color:#a78bfa44;color:#d4bfff}
.inv-field-tab-sel{background:#a78bfa22;border-color:#a78bfa;color:#d4bfff;box-shadow:0 0 12px #a78bfa33}
.inv-ft-qty{font-size:11px;font-weight:400;color:var(--text-muted,#777);background:#ffffff0a;padding:1px 6px;border-radius:4px}
.inv-field-tab-sel .inv-ft-qty{color:#c4b5fd;background:#a78bfa22}

/* Block chips */
.inv-fs-blocks{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
/* ── Los chips de cama: la LETRA es lo unico que cambia ───────────────────────
   Antes decian "OC63-A", "OC63-B"... y el campo se repetia en toda la barra,
   con la letra —lo unico que distingue un chip del siguiente— a 13px. Ahora la
   letra va sola y grande, y la locacion completa vive en el titulo de la tabla
   y en el title del chip. */
.inv-block-chip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;background:#ffffff08;border:1px solid #ffffff15;border-radius:10px;padding:7px 14px;min-width:62px;cursor:pointer;transition:all .15s}
.inv-block-chip:hover{background:#00d4ff12;border-color:#00d4ff44}
.inv-bk-sel{background:#00d4ff18;border-color:#00d4ff;box-shadow:0 0 14px #00d4ff33}
.inv-bk-letra{font-size:22px;font-weight:800;line-height:1.05;color:var(--text,#e0e0e0);letter-spacing:.5px}
.inv-bk-sel .inv-bk-letra{color:#00d4ff;text-shadow:0 0 12px #00d4ff55}
.inv-bk-todas{font-size:17px;line-height:1.35}
/* Un campo sin letras pone su nombre entero: ahi 22px no cabe. */
.inv-bk-letra-larga{font-size:14px;font-weight:700;letter-spacing:0}
.inv-bk-qty{display:flex;flex-direction:column;align-items:center;gap:0;font-size:11px;line-height:1.25;color:var(--text-muted,#888);font-variant-numeric:tabular-nums}
.inv-bk-qty i{font-style:normal;font-size:10.5px;opacity:.8}
.inv-bk-qty em{font-style:normal;font-weight:700;color:#00d4ff}
/* Compat: alguna vista vieja todavia pinta .inv-bk-label. */
.inv-bk-label{font-size:13px;font-weight:600;color:var(--text,#e0e0e0)}

/* Sortable column headers */
.inv-col-sort,.inv-ms-col-sort{cursor:pointer;user-select:none;transition:color .15s}
.inv-col-sort:hover,.inv-ms-col-sort:hover{color:#60a5fa!important}
.inv-col-active{color:#60a5fa!important}
/* Mission sort header row */
.inv-ms-hdr{display:flex;gap:8px;padding:8px 6px;border-bottom:2px solid var(--border,#444);margin-bottom:4px}
.inv-ms-h{font-size:12px;font-weight:700;color:#aaa;text-transform:uppercase;letter-spacing:.3px;cursor:pointer;user-select:none;transition:color .15s;flex:1;white-space:nowrap}
.inv-ms-h:hover{color:#60a5fa}
.inv-ms-h.inv-col-active{color:#60a5fa}

/* Plant table */
.inv-fs-plant-list{flex:1}
/* La locacion completa vive AQUI, no repetida en cada chip: que se lea. */
.inv-tbl-hd{font-size:17px;font-weight:800;color:#fff;padding:10px 6px;border-bottom:1px solid var(--border,#333);letter-spacing:.2px}
.inv-tbl-hd b{color:#00d4ff;font-weight:800}
.inv-tbl-hd span{font-size:13px;font-weight:600;color:var(--text-muted,#8a8a8a);letter-spacing:0}
.inv-tbl{display:flex;flex-direction:column;border-top:1px solid var(--inv-grid,#ffffff1f)}
/* Cuadrícula tipo Excel: cada fila es grid; líneas verticales entre celdas
   (border-right por celda) + horizontal por fila. `contain:content` aísla el
   reflow por fila (fluidez con bloques grandes). */
/* ── El reparto de ancho ─────────────────────────────────────────────────────
   Esta tabla es la pantalla principal: se lee de pie, en el campo, y lo unico
   que hay que leer ENTERO es el nombre de la planta. Todo lo demas es corto y
   de ancho conocido, asi que se le da su minimo y el resto es del nombre.

   Antes: 2fr 44px 1fr 80px 70px 80px 80px 56px = 410px fijos.
   Ahora:      32px      54px 60px 58px 58px 46px = 308px fijos, y el nombre
   sube de 2fr a 3fr contra la ubicacion. Son ~100px mas de nombre en cualquier
   pantalla, sin quitar ninguna columna.

   Y la de acciones pasa de 56px a 46px porque sus dos botones se apilan: dos
   de 40px en fila necesitaban 86px y se estaban saliendo de la celda. */
.inv-tbl-row{--inv-grid:#ffffff1f;display:grid;grid-template-columns:minmax(0,3fr) 32px minmax(0,1.05fr) 54px 60px 58px 58px 46px;gap:0;align-items:stretch;border-bottom:1px solid var(--inv-grid);font-size:14px;contain:content}
.inv-tbl-row>span{padding:7px 6px;border-right:1px solid var(--inv-grid);display:flex;align-items:center;min-width:0}
.inv-tbl-row>span:last-child{border-right:none}
.inv-tbl-header{font-weight:700;color:#ccc;font-size:12px;text-transform:uppercase;letter-spacing:.5px;position:sticky;top:0;background:var(--bg-card,#1a1a2e);z-index:1;border-bottom:2px solid var(--border,#444)}
/* Nombre = columna (línea de nombre + memo opcional debajo). */
.inv-c-name{color:#fff;font-weight:600;cursor:pointer;flex-direction:column;align-items:flex-start!important;gap:1px;justify-content:center}
/* Dos renglones compactos SIEMPRE, no solo en telefono: cortar
   "Hydrangea paniculata 'Limelight Prime' PP32519" a una linea con puntos
   suspensivos deja fuera justo la parte que distingue una variedad de otra.
   Interlineado apretado para que dos lineas ocupen poco mas que una. */
.inv-c-name-line{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;max-width:100%;line-height:1.18;word-break:break-word;hyphens:auto}
.inv-c-name-line>*{vertical-align:middle}
.inv-c-name.inv-name-expanded .inv-c-name-line{white-space:normal;word-break:break-word}
.inv-c-memo{font-size:11px;color:#94a3b8;font-weight:400;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
/* Badge "ya tiene misión" (informativo) + fila/➕ resaltados. */
.inv-mission-badge{flex:none;font-size:11px;font-weight:800;color:#fbbf24;background:#f59e0b1f;border:1px solid #f59e0b55;border-radius:6px;padding:0 4px;line-height:1.5;cursor:help}
.inv-tbl-row.inv-row-has-mission{background:#f59e0b0e}
.inv-c-act-btn.inv-ptm-hasmission{background:#d97706;border-color:#fbbf24;box-shadow:0 2px 6px rgba(217,119,6,.4)}
.inv-c-act-btn.inv-ptm-hasmission:hover{background:#b45309;box-shadow:0 0 12px #fbbf2488}
.inv-c-loc{font-size:13px;color:#ddd;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* "1 GAL", "2 GAL": dos palabras cortas que caben en su columna sin cortarse. */
.inv-c-size{font-size:12.5px;color:#ddd;font-weight:600;justify-content:center;text-align:center;white-space:nowrap;letter-spacing:-.2px}
.inv-c-st{text-align:center;justify-content:center}
/* Numeros: tabulares para que las unidades queden en columna y la vista compare
   sola de arriba abajo. Sin ellos, "1,200" y "980" bailan y hay que leer cada
   uno. */
.inv-c-qty{justify-content:flex-end;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;color:#fff;font-size:14.5px;white-space:nowrap}
.inv-c-vend{justify-content:flex-end;text-align:right;font-variant-numeric:tabular-nums;color:#00d4ff;font-weight:700;font-size:14.5px;text-shadow:0 0 4px rgba(0,212,255,0.3);white-space:nowrap}
.inv-c-xref{justify-content:center;text-align:center;white-space:nowrap;padding-left:2px!important;padding-right:2px!important}
/* "MORE IN": la senal de que esa misma variedad esta repartida en otros campos.
   Antes era un "+2" gris que parecia un contador de nada; ahora dice de que va
   y se ve, porque es lo que hay que mirar ANTES de mover un lote. */
.inv-xref-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  width:100%;min-height:34px;padding:2px 1px;cursor:pointer;
  background:#f59e0b1f;border:1.5px solid #f59e0b88;border-radius:7px;
  color:#fbbf24;line-height:1;transition:background .15s,box-shadow .15s}
.inv-xref-badge:hover{background:#f59e0b33;box-shadow:0 0 10px #f59e0b55}
.inv-xref-badge b{font-size:14px;font-weight:800}
.inv-xref-badge i{font-size:7.5px;font-style:normal;font-weight:700;letter-spacing:-.2px;opacity:.85;text-transform:uppercase}
.inv-tbl-header .inv-c-xref{font-size:8.5px;letter-spacing:-.2px;line-height:1.1;white-space:normal;text-align:center}
/* Los dos botones, uno encima del otro. Apilados caben en 46px de ancho y
   siguen siendo del tamano de un dedo; en fila pedian 86px y se salian. */
.inv-c-act{justify-content:center;align-items:center;display:flex;flex-direction:column;gap:3px;padding:4px 3px!important}
/* Botón "+" de crear misión: grande, redondo, claro para su propósito (add en esta planta) */
.inv-c-act-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:none;background:#16a34a;border:1.5px solid #22c55e;color:#fff;font-size:18px;font-weight:800;line-height:1;cursor:pointer;border-radius:50%;padding:0;transition:transform .1s,background .15s,box-shadow .15s;box-shadow:0 2px 6px rgba(34,197,94,.35)}
.inv-c-act-btn:hover{background:#15803d;box-shadow:0 0 12px #22c55e66}
.inv-c-act-btn:active{transform:scale(.92)}
/* Botón 🔍 "Solicitar revisión de inventario": azul, distingue del ➕ verde */
.inv-c-act-btn.inv-plant-to-review{background:#0284c7;border-color:#38bdf8;box-shadow:0 2px 6px rgba(56,189,248,.35);font-size:18px}
.inv-c-act-btn.inv-plant-to-review:hover{background:#0369a1;box-shadow:0 0 12px #38bdf866}
/* Hoja "Solicitar revisión" — chips multi-select + envío */
.inv-pr-sub{font-size:12px;color:var(--text-2);margin:-8px 0 12px;font-weight:600}
.inv-pr-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.inv-pr-chip{font-size:13px;font-weight:600;color:var(--text-1);background:var(--bg-3);border:1.5px solid var(--border);border-radius:16px;padding:8px 13px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .15s,border-color .15s}
.inv-pr-chip-sel{background:#0284c7;border-color:#38bdf8;color:#fff}
.inv-pr-send{width:100%;margin-top:14px}
.inv-cd-ipm-photo-btn--gal{color:#7dd3fc;background:#38bdf81a;border-color:#38bdf855}
/* Variante en planta RESERVADA por propagación: morado (cuidado, va a salir el aviso) */
.inv-c-act-btn.inv-ptm-reserved{background:#7c3aed;border-color:#a78bfa;box-shadow:0 2px 6px rgba(124,58,237,.4)}
.inv-c-act-btn.inv-ptm-reserved:hover{background:#6d28d9;box-shadow:0 0 12px #a78bfa88}
.inv-badge{display:inline-block;padding:3px 8px;border-radius:5px;font-size:11px;font-weight:700;letter-spacing:.3px}
.inv-badge-lnd{background:#22c55e35;color:#4ade80;text-shadow:0 0 4px rgba(34,197,94,0.3)}
.inv-badge-hold{background:#f59e0b35;color:#fde047;text-shadow:0 0 4px rgba(245,158,11,0.3)}
.inv-badge-ipm{background:#a855f735;color:#d8b4fe;text-shadow:0 0 4px rgba(168,85,247,0.3)}
.inv-badge-failing{background:#ef444435;color:#ff6b6b;text-shadow:0 0 4px rgba(239,68,68,0.3)}
.inv-badge-treatment{background:#f59e0b35;color:#fcd34d;text-shadow:0 0 4px rgba(245,158,11,0.3)}
.inv-badge-week{background:#38bdf835;color:#7dd3fc;text-shadow:0 0 4px rgba(56,189,248,0.3)}
/* Colores de fila por categoría (acordado con Fabian):
   FAILING→rojo · IPM→morado · TREATMENT→amarillo · status semanal (26040)→azul
   clarito · propagación (reserved)→gris claro. Barra izquierda para reconocer de
   un vistazo. */
.inv-row-failing{background:#ef444418;box-shadow:inset 4px 0 0 #ef4444}
.inv-row-ipm{background:#a855f71f;box-shadow:inset 4px 0 0 #a855f7}
.inv-row-treatment{background:#f59e0b1f;box-shadow:inset 4px 0 0 #f59e0b}
.inv-row-hold{background:#f59e0b12}
.inv-row-week{background:#38bdf818;box-shadow:inset 4px 0 0 #38bdf8}
/* Planta RESERVADA por propagación: GRIS CLARO + barra izquierda gris.
   Selector más específico (.inv-tbl-row.inv-row-reserved) para ganar sobre las demás. */
.inv-tbl-row.inv-row-reserved{background:#94a3b81f;box-shadow:inset 4px 0 0 #94a3b8}
.inv-tbl-row.inv-row-reserved:hover{background:#94a3b82e}

/* Empty state */
.inv-empty-state{text-align:center;padding:40px 20px;color:var(--text-muted,#888);font-size:14px}

/* ── Mission cards ──
   contain:paint isolates each card so paint pressure from one (e.g. a card
   with image lazy-load) doesn't bleed across siblings during scroll.
   Removed transitions on opacity/transform that fired in cascades when many
   cards mounted at once — they didn't add visual value but cost paint. */
.inv-mission-card{background:#0f1e14;border:1px solid #ffffff18;border-radius:14px;padding:14px 16px;margin-bottom:10px;border-left:5px solid #3b82f6;contain:paint}
.inv-pri-alta{background:linear-gradient(135deg,#2d0a0a,#1a0505);border-left-color:#ef4444;border-color:#ef444430}
.inv-pri-media{background:linear-gradient(135deg,#2d1800,#150c00);border-left-color:#f59e0b;border-color:#f59e0b30}
.inv-pri-baja{background:linear-gradient(135deg,#071528,#040c18);border-left-color:#3b82f6;border-color:#3b82f630}
.inv-mc-header{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.inv-mc-pri{font-size:13px;font-weight:800;letter-spacing:.4px;padding:3px 10px;border-radius:20px}
.inv-pri-alta .inv-mc-pri{background:#ef444425;color:#fca5a5}
.inv-pri-media .inv-mc-pri{background:#f59e0b25;color:#fcd34d}
.inv-pri-baja .inv-mc-pri{background:#3b82f625;color:#93c5fd}
.inv-mc-type{font-size:12px;color:var(--text-muted,#888);background:#ffffff08;padding:3px 10px;border-radius:6px;text-transform:uppercase;font-weight:600;letter-spacing:.3px}
.inv-mt-failing{background:#ef444430;color:#ff6b6b;text-shadow:0 0 4px rgba(239,68,68,0.3)}
.inv-mt-ipm{background:#bf5af228;color:#d8b4fe;text-shadow:0 0 4px rgba(191,90,242,0.3)}
.inv-mt-hold{background:#3b82f628;color:#60a5fa}
.inv-mt-vendidas{background:#00d4ff20;color:#00d4ff;text-shadow:0 0 4px rgba(0,212,255,0.3)}
.inv-mt-overcap{background:#f9731628;color:#fb923c}
.inv-mt-vencido{background:#bf5af725;color:#d8b4fe;text-shadow:0 0 4px rgba(191,90,242,0.3)}
.inv-mt-slow-mover{background:#14b8a628;color:#2dd4bf}
.inv-mt-rotacion{background:#6366f128;color:#818cf8}
.inv-mt-custom{background:#6b728028;color:#9ca3af}
/* ── Mission filter chips ── */
.inv-mf-bar{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid #ffffff10}
.inv-mf-chip{border:1px solid #ffffff18;background:#ffffff08;color:#bbb;padding:5px 12px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;text-transform:uppercase;letter-spacing:.3px;transition:all .2s}
.inv-mf-chip:hover{background:#ffffff15;color:#fff}
.inv-mf-active{border-color:#7c3aed;background:#7c3aed25;color:#c4b5fd;box-shadow:0 0 8px #7c3aed40}
.inv-mf-failing.inv-mf-active{border-color:#ef4444;background:#ef444430;color:#fca5a5;box-shadow:0 0 8px #ef444440}
.inv-mf-ipm.inv-mf-active{border-color:#bf5af2;background:#bf5af230;color:#d8b4fe;box-shadow:0 0 10px #bf5af250}
.inv-mf-hold.inv-mf-active{border-color:#3b82f6;background:#3b82f630;color:#93c5fd;box-shadow:0 0 8px #3b82f640}
.inv-mf-vendidas.inv-mf-active{border-color:#00d4ff;background:#00d4ff25;color:#00e5ff;box-shadow:0 0 10px #00d4ff40}
.inv-mf-overcap.inv-mf-active{border-color:#f97316;background:#f9731630;color:#fdba74;box-shadow:0 0 8px #f9731640}
.inv-mf-vencido.inv-mf-active{border-color:#bf5af7;background:#bf5af730;color:#d8b4fe;box-shadow:0 0 10px #bf5af740}
.inv-mf-slow-mover.inv-mf-active{border-color:#14b8a6;background:#14b8a630;color:#5eead4;box-shadow:0 0 8px #14b8a640}
.inv-mf-rotacion.inv-mf-active{border-color:#6366f1;background:#6366f130;color:#a5b4fc;box-shadow:0 0 8px #6366f140}
.inv-mf-custom.inv-mf-active{border-color:#6b7280;background:#6b728030;color:#d1d5db;box-shadow:0 0 8px #6b728040}
/* ── Mission filter panel ── */
.inv-mf-toolbar{display:flex;align-items:center;gap:8px;padding:8px 12px 6px;flex-wrap:wrap;border-bottom:1px solid #1e3a5a;margin-bottom:4px}
.inv-mf-toggle{display:flex;align-items:center;gap:6px;background:#111e2d;border:2px solid #2a3d52;border-radius:10px;color:#8faabf;padding:8px 16px;cursor:pointer;font-size:14px;font-weight:700;transition:all .15s;white-space:nowrap;flex-shrink:0;min-height:40px}
.inv-mf-toggle:hover,.inv-mf-toggle-open{background:#1d4ed8;border-color:#3b82f6;color:#fff;box-shadow:0 2px 12px #3b82f640}
.inv-mf-toggle-badge{background:#ef4444;border-radius:12px;padding:2px 7px;font-size:11px;color:#fff;font-weight:800;min-width:20px;text-align:center}
.inv-mf-pills{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.inv-mf-pill{background:#1e3050;border:1px solid #3a5a8a;border-radius:12px;color:#99bbdd;padding:2px 9px;cursor:pointer;font-size:11px;font-weight:600;transition:background .15s,color .15s;white-space:nowrap}
.inv-mf-pill:hover{background:#2a4a70;color:#fff;border-color:#6090c0}
/* ── Mission filter panel — large, vivid, field-ready ── */
.inv-mf-panel{background:#08111c;border-bottom:2px solid #1e3a5a;padding:14px 14px 16px;display:flex;flex-direction:column;gap:12px;margin-bottom:8px}
.inv-mf-section{display:flex;flex-direction:column;gap:8px}
.inv-mf-section-title{font-size:14px;color:#e2e8f0;text-transform:uppercase;letter-spacing:.07em;font-weight:800}
.inv-mf-sep{height:1px;background:#1e3a5a}
.inv-mf-btn-group{display:flex;gap:8px;flex-wrap:wrap}
/* base buttons — large tap targets */
.inv-mf-pri-btn,.inv-mf-cat-btn,.inv-mf-loc-btn,.inv-mf-age-btn{background:#111e2d;border:2px solid #2a3d52;border-radius:10px;color:#8faabf;padding:10px 18px;cursor:pointer;font-size:14px;font-weight:700;transition:all .15s;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center;gap:6px}
.inv-mf-pri-btn:hover,.inv-mf-cat-btn:hover,.inv-mf-loc-btn:hover,.inv-mf-age-btn:hover{background:#1a2d40;color:#d0e4f0;border-color:#4a6a80}
.inv-mf-age-btn.inv-mf-active{border-color:#0e7490;background:#0e749030;color:#67e8f9;box-shadow:0 0 8px #0e749050}
/* urgencia — full fill when active */
.inv-mf-pri-red.inv-mf-active{background:#ef4444;border-color:#ef4444;color:#fff;box-shadow:0 4px 20px #ef444460;font-weight:900}
.inv-mf-pri-amber.inv-mf-active{background:#f59e0b;border-color:#f59e0b;color:#1a0800;box-shadow:0 4px 20px #f59e0b60;font-weight:900}
.inv-mf-pri-blue.inv-mf-active{background:#3b82f6;border-color:#3b82f6;color:#fff;box-shadow:0 4px 20px #3b82f660;font-weight:900}
/* categoría — vivid full fill */
.inv-mf-cat-sanidad.inv-mf-active{background:#dc2626;border-color:#dc2626;color:#fff;box-shadow:0 4px 20px #dc262660;font-weight:900}
.inv-mf-cat-ventas.inv-mf-active{background:#d97706;border-color:#d97706;color:#fff;box-shadow:0 4px 20px #d9770660;font-weight:900}
.inv-mf-cat-cultivo.inv-mf-active{background:#16a34a;border-color:#16a34a;color:#fff;box-shadow:0 4px 20px #16a34a60;font-weight:900}
.inv-mf-cat-gestion.inv-mf-active{background:#7c3aed;border-color:#7c3aed;color:#fff;box-shadow:0 4px 20px #7c3aed60;font-weight:900}
/* location */
.inv-mf-loc-btn{font-size:13px;padding:8px 14px}
.inv-mf-loc-btn.inv-mf-active{background:#1d4ed8;border-color:#3b82f6;color:#fff;box-shadow:0 4px 14px #3b82f650;font-weight:900}
.inv-mf-loc-cnt{background:#ffffff1a;border-radius:20px;padding:2px 8px;font-size:12px;font-weight:800;color:#c0d8f0;min-width:22px;text-align:center;line-height:1.5}
.inv-mf-loc-btn.inv-mf-active .inv-mf-loc-cnt{background:#ffffff30;color:#fff}
/* vendidas → PF link en mission card (solo aplica a <a>, no a span fallback) */
a.inv-mc-vend-pf{color:#00d4ff!important;text-decoration:none;font-weight:700;transition:color .15s,opacity .15s}
a.inv-mc-vend-pf:hover{color:#00f0ff!important;text-decoration:underline;opacity:.85}
/* light theme */
[data-theme="light"] .inv-mf-toolbar{border-bottom-color:var(--border)}
[data-theme="light"] .inv-mf-toggle{background:#f0f4f8;border-color:#c0d0e0;color:#445566}
[data-theme="light"] .inv-mf-toggle:hover,[data-theme="light"] .inv-mf-toggle-open{background:#dce8f4;border-color:#7090b0;color:#223344}
[data-theme="light"] .inv-mf-pill{background:#dce8f4;border-color:#a0c0d8;color:#334455}
[data-theme="light"] .inv-mf-panel{background:#f4f7fa;border-bottom-color:var(--border)}
[data-theme="light"] .inv-mf-sep{background:var(--border)}
[data-theme="light"] .inv-mf-section-title{color:#8899aa}
[data-theme="light"] .inv-mf-pri-btn,[data-theme="light"] .inv-mf-cat-btn,[data-theme="light"] .inv-mf-loc-btn{background:#e8eef4;border-color:#b0c8dc;color:#445566}
[data-theme="light"] .inv-mf-pri-btn:hover,[data-theme="light"] .inv-mf-cat-btn:hover,[data-theme="light"] .inv-mf-loc-btn:hover{background:#d4e4f0;color:#223344}
[data-theme="light"] .inv-mf-loc-cnt{background:rgba(0,0,0,.08);color:#667788}
.inv-mc-title{font-size:20px;font-weight:900;color:#fff;margin-bottom:8px;line-height:1.3;text-shadow:0 0 12px rgba(74,222,128,.6),0 0 28px rgba(74,222,128,.28)}
.inv-mc-loc{font-size:14px;font-weight:700;color:#00e5ff;background:rgba(0,229,255,.16);padding:3px 10px;border-radius:6px;margin-left:6px;white-space:nowrap;text-shadow:0 0 10px rgba(0,229,255,.85),0 0 22px rgba(0,229,255,.4);box-shadow:0 0 8px rgba(0,212,255,.22),inset 0 0 6px rgba(0,212,255,.1)}
.inv-mc-desc{font-size:13px;color:#ccc;margin-bottom:8px;line-height:1.4}
.inv-mc-details{display:flex;flex-wrap:wrap;gap:6px 12px;margin-bottom:10px}
.inv-mc-det{font-size:13px;color:#ddd;white-space:nowrap}
.inv-mc-actions{display:flex;gap:6px;align-items:center;margin-top:2px}
.inv-mc-complete-btn{background:#16a34a;color:#fff;border:none;padding:8px 14px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;transition:background .15s;flex:1;text-align:center}
.inv-mc-complete-btn:hover{background:#15803d}
.inv-mc-edit{background:#3b82f620;color:#60a5fa;border:1px solid #3b82f640;padding:8px 12px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;transition:all .15s;white-space:nowrap}
.inv-mc-edit:hover{background:#3b82f640;border-color:#60a5fa}
.inv-mc-dismiss{background:#ef444418;color:#f87171;border:1px solid #ef444435;padding:8px 10px;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;transition:all .15s;line-height:1}
.inv-mc-dismiss:hover{background:#ef444435;border-color:#f87171}
.inv-mission-card{cursor:pointer}
.inv-mc-actions button:active{transform:scale(0.95)}
/* result buttons color coding */
.inv-cd-res-ok.inv-cd-res-sel{background:#16a34a;color:#fff;border-color:#16a34a}
.inv-cd-res-partial.inv-cd-res-sel{background:#d97706;color:#fff;border-color:#d97706}
.inv-cd-res-fail.inv-cd-res-sel{background:#dc2626;color:#fff;border-color:#dc2626}
.inv-cd-confirm-dismiss{background:#dc2626!important;border-color:#dc262660}

/* ── Variety cross-ref badge ── */
.inv-xref-badge{display:inline-flex;align-items:center;gap:2px;background:#bf5af222;color:#d8b4fe;border:1px solid #bf5af240;padding:1px 7px;border-radius:10px;font-size:10px;font-weight:700;cursor:pointer;margin-left:6px;vertical-align:middle;transition:all .2s;line-height:1.4}
.inv-xref-badge:hover{background:#bf5af240;color:#e9d5ff;border-color:#bf5af2;box-shadow:0 0 8px #bf5af240}

/* ── Variety comparison modal ── */
.variety-modal-box{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--card-bg,#1a1a2e);border:1px solid #ffffff15;border-radius:16px;width:min(94vw,700px);max-height:80vh;display:flex;flex-direction:column;z-index:10001;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.variety-modal-hdr{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #ffffff10}
.variety-modal-title{font-size:16px;font-weight:700;color:#fff}
.variety-modal-close{background:none;border:none;color:#ff3b3b;font-size:22px;font-weight:700;cursor:pointer;padding:4px 8px;border-radius:6px;transition:all .15s;text-shadow:0 0 6px rgba(255,59,59,0.5)}
.variety-modal-close:hover{background:rgba(255,59,59,0.12);color:#ff1a1a;text-shadow:0 0 12px rgba(255,59,59,0.7)}
.variety-modal-body{padding:16px 20px;overflow-y:auto;flex:1}
.variety-summary{font-size:13px;color:#bbb;margin-bottom:12px;padding:8px 12px;background:#ffffff06;border-radius:8px;text-align:center}
.variety-tbl{display:flex;flex-direction:column;gap:1px}
.variety-tbl-hdr{background:#ffffff08;font-weight:700;font-size:11px;color:#999;text-transform:uppercase;letter-spacing:.3px;position:sticky;top:0}
.variety-tbl-row{display:grid;grid-template-columns:88px 90px 65px 90px 70px 40px 70px 70px;gap:4px;padding:8px 6px;border-bottom:1px solid #ffffff06;font-size:12px;color:#ddd;align-items:center}
.vt-pri{text-align:center;justify-self:center}
/* El lote ancla —la fila desde la que se abrio el panel— va primero y con
   marca propia. Los demas se atenuan un punto: la pregunta de este panel es
   "y esta contra las otras", asi que la referencia tiene que saltar. */
.vt-current{background:#7c3aed22;border-left:3px solid #7c3aed;font-weight:700;color:#fff}
.vt-esta{display:inline-block;background:#7c3aed;color:#fff;font-size:8.5px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;padding:1.5px 5px;border-radius:4px;vertical-align:middle;white-space:nowrap}
.variety-tbl-row:not(.vt-current) .vt-field{opacity:.92}
/* Mismo galón que la planta ancla: fila resaltada + marca ◆. */
.vt-samesize{background:#22c55e12;box-shadow:inset 3px 0 0 #22c55e}
.vt-samesize.vt-current{box-shadow:inset 3px 0 0 #22c55e,inset 6px 0 0 #7c3aed}
.vt-samesize-mark{color:#4ade80;font-size:10px}
.variety-modal-size{font-size:12px;font-weight:700;color:#86efac;background:#22c55e1f;border:1px solid #22c55e55;border-radius:6px;padding:1px 6px;margin-left:6px;vertical-align:middle}
.variety-summary-size{font-size:12px;color:#86efac;text-align:center;margin:-6px 0 8px}
.variety-only-size{display:block;margin:0 auto 12px;background:#22c55e14;border:1.5px solid #22c55e55;color:#86efac;border-radius:20px;padding:6px 16px;font-size:12.5px;font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent}
.variety-only-size-on{background:#22c55e30;border-color:#22c55e}
.variety-field-sep{grid-column:1/-1;font-size:11px;font-weight:800;letter-spacing:.4px;color:#93c5fd;background:#3b82f60f;padding:5px 8px;margin-top:2px;text-transform:uppercase}
.vt-field{font-weight:600;color:#60a5fa}
.vt-loc{color:#ccc}
.vt-size{color:#bbb}
.vt-pd{color:#a78bfa;font-weight:600}
.vt-st{text-align:center}
.vt-qty{text-align:right;font-weight:600}
.vt-vend{text-align:right;color:#888}

/* ── Hoja de contexto ANTES de crear la misión (_preMissionSheet) ── */
.pre-mission-ov{z-index:10060}
.pre-mission-box{width:min(94vw,440px);max-height:88vh;overflow-y:auto;background:var(--bg-card,#141428);border:1px solid #ffffff18;border-radius:16px;padding:16px;box-shadow:0 24px 70px rgba(0,0,0,.6)}
.pm-hd{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.pm-hd-name{font-size:17px;font-weight:800;color:#fff;line-height:1.2}
.pm-hd-meta{font-size:12.5px;color:#94a3b8}
.pm-stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.pm-stat{font-size:13px;color:#cbd5e1;background:#ffffff08;border:1px solid #ffffff12;border-radius:10px;padding:6px 12px}
.pm-stat b{color:#fff;font-variant-numeric:tabular-nums}
.pm-stat-sold b{color:#00d4ff}
.pm-memo{font-size:12.5px;color:#cbd5e1;background:#3b82f60f;border-left:3px solid #3b82f6;border-radius:6px;padding:7px 10px;margin-bottom:10px;line-height:1.35}
.pm-warn{font-size:12.5px;color:#fde68a;background:#f59e0b14;border:1px solid #f59e0b44;border-radius:10px;padding:9px 11px;margin-bottom:10px;font-weight:600}
.pm-warn-list{font-weight:400;color:#fcd34d;font-size:11.5px;margin-top:4px;line-height:1.4}
.pm-groups{background:#ffffff06;border:1px solid #ffffff0f;border-radius:10px;padding:9px 11px;margin-bottom:10px;min-height:38px}
.pm-groups-loading,.pm-groups-none{font-size:12px;color:#94a3b8;font-style:italic}
.pm-groups-t{font-size:12.5px;font-weight:700;color:#e2e8f0;margin-bottom:4px}
.pm-groups-sum{font-size:11.5px;color:#94a3b8;margin-bottom:8px}
.pm-groups-sum b{color:#e2e8f0;font-variant-numeric:tabular-nums}
.pm-grp-lbl{font-size:11px;font-weight:800;color:#93c5fd;margin:6px 0 3px;letter-spacing:.3px}
.pm-grp-lbl b{color:#bae6fd}
/* Mini-tabla de grupos alternos: ubic · estado · cant · vend · sembrado/edad. */
.pm-table{display:flex;flex-direction:column;border:1px solid #ffffff12;border-radius:8px;overflow:hidden;margin-bottom:6px}
.pm-row{display:grid;grid-template-columns:1fr 62px 52px 60px 1.15fr;gap:0;align-items:center;font-size:11.5px}
.pm-row>span{padding:5px 6px;border-right:1px solid #ffffff0d;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-row>span:last-child{border-right:none}
.pm-row:not(:last-child){border-bottom:1px solid #ffffff0d}
.pm-row-hd{background:#ffffff08;font-weight:700;color:#94a3b8;font-size:10px;text-transform:uppercase;letter-spacing:.3px}
.pm-c-loc{color:#e2e8f0;font-weight:600}
.pm-c-qty{text-align:right;font-variant-numeric:tabular-nums;color:#fff;font-weight:700}
.pm-c-vend{text-align:right;font-variant-numeric:tabular-nums;color:#7dd3fc}
.pm-c-age{color:#cbd5e1;font-size:10.5px}
.pm-st-badge{display:inline-block;padding:1px 5px;border-radius:5px;font-size:9.5px;font-weight:700;background:#ffffff12;color:#cbd5e1}
/* Color del badge de estado por categoría (misma paleta que las filas). */
.pm-row.inv-row-failing .pm-st-badge{background:#ef444435;color:#ff8a8a}
.pm-row.inv-row-ipm .pm-st-badge{background:#a855f735;color:#d8b4fe}
.pm-row.inv-row-treatment .pm-st-badge{background:#f59e0b35;color:#fcd34d}
.pm-row.inv-row-week .pm-st-badge{background:#38bdf835;color:#7dd3fc}
.pm-row.inv-row-failing{background:#ef44440e}
.pm-row.inv-row-ipm{background:#a855f70e}
.pm-row.inv-row-treatment{background:#f59e0b0e}
.pm-row.inv-row-week{background:#38bdf80e}
.pm-invdate{font-size:11.5px;color:#94a3b8;text-align:center;margin-bottom:12px}
.pm-actions{display:flex;gap:8px}
.pm-cancel,.pm-create{flex:1;border-radius:11px;padding:11px;font-size:14px;font-weight:800;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pm-cancel{background:#ffffff0d;border:1px solid #ffffff22;color:#cbd5e1}
.pm-create{background:#16a34a;border:1.5px solid #22c55e;color:#fff;box-shadow:0 2px 8px rgba(34,197,94,.35)}
.pm-create:active{transform:scale(.98)}
[data-theme="light"] .pre-mission-box{background:var(--bg-card);border-color:var(--border)}
[data-theme="light"] .pm-hd-name{color:var(--text-1)}
[data-theme="light"] .pm-stat{color:var(--text-2);background:rgba(0,0,0,.03);border-color:var(--border)}
[data-theme="light"] .pm-stat b{color:var(--text-1)}
[data-theme="light"] .pm-memo{color:var(--text-2)}
[data-theme="light"] .pm-groups-t{color:var(--text-1)}
[data-theme="light"] .pm-table{border-color:var(--border)}
[data-theme="light"] .pm-row>span{border-right-color:rgba(0,0,0,.06)}
[data-theme="light"] .pm-row:not(:last-child){border-bottom-color:rgba(0,0,0,.06)}
[data-theme="light"] .pm-row-hd{background:rgba(0,0,0,.04);color:var(--text-3)}
[data-theme="light"] .pm-c-loc{color:var(--text-1)}
[data-theme="light"] .pm-c-qty{color:var(--text-1)}
[data-theme="light"] .pm-c-age{color:var(--text-2)}

/* ── History cards ── */
.inv-hist-card{background:#ffffff06;border:1px solid #ffffff08;border-radius:10px;padding:12px 14px;margin-bottom:8px;contain:paint}
.inv-hist-hd{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.inv-hist-icon{font-size:16px;flex-shrink:0}
.inv-hist-hd-meta{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.inv-hist-type-lbl{font-size:12px;font-weight:700;color:var(--text,#e0e0e0);line-height:1.2}
.inv-hist-loc{font-size:11px;color:var(--text-muted,#888);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inv-hist-title{font-size:13px;font-weight:600;color:var(--text,#e0e0e0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inv-hist-date{font-size:11px;color:var(--text-muted,#666);white-space:nowrap;flex-shrink:0}
.inv-hist-mtitle{font-size:12px;color:var(--text-2,#b0b0b0);margin-bottom:6px;padding-left:24px;white-space:normal;overflow-wrap:anywhere}
.inv-hist-details{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:11px;color:var(--text-muted,#888)}
.inv-hist-result{padding:1px 6px;border-radius:4px;font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.3px}
.inv-hist-r-exito{background:#00ff6a20;color:#00ff6a}
.inv-hist-r-completed{background:#00ff6a20;color:#00ff6a}
.inv-hist-r-parcial{background:#ffcc0020;color:#ffcc00}
.inv-hist-r-no-pudo{background:#ff444420;color:#ff4444}
.inv-hist-r-dismissed{background:#ff444415;color:#ff6666}
/* Photo — lazy loaded */
.inv-hist-photo{margin-top:8px;border-radius:8px;overflow:hidden;background:#ffffff08;min-height:48px;display:flex;align-items:center;justify-content:center}
.inv-hist-photo-lazy{width:100%;max-height:220px;object-fit:cover;border-radius:8px;display:block;opacity:0;transition:opacity .25s}
.inv-hist-photo-lazy[src]:not([src=""]){opacity:1}
/* Worker row */
.inv-hist-worker-row{display:flex;align-items:center;gap:6px;margin-top:8px;flex-wrap:wrap}
.inv-hist-av{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#00c48c,#0099ff);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;text-transform:uppercase}
.inv-hist-wname{font-size:12px;color:var(--text-2,#b0b0b0);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Chips row */
.inv-hist-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.inv-hist-chip{padding:2px 7px;border-radius:10px;font-size:10px;font-weight:600;background:#ffffff10;color:var(--text-muted,#aaa);border:1px solid #ffffff10}
.inv-hist-chip-plant{background:#00c48c18;color:#00c48c;border-color:#00c48c25}
.inv-hist-pri-alta{background:#ff444418;color:#ff7777;border-color:#ff444428}
.inv-hist-pri-media{background:#ffcc0018;color:#ffcc44;border-color:#ffcc0028}
.inv-hist-pri-baja{background:#00bfff15;color:#66d4ff;border-color:#00bfff25}
/* Notes */
.inv-hist-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.inv-hist-mchip{font-size:11px;font-weight:600;color:#cbd5e1;background:#ffffff0d;border:1px solid #ffffff1f;border-radius:8px;padding:3px 8px;white-space:nowrap}
[data-theme="light"] .inv-hist-mchip{color:var(--text-2);background:var(--bg-3,#0000000a);border-color:var(--border)}
.inv-hist-notes{font-size:12px;color:var(--text-muted,#999);font-style:italic;margin-top:6px;padding-left:8px;border-left:2px solid #ffffff15}
/* Línea "📦 Inventario actualizado por X" — quién marcó este update como revisado en el digest. */
.inv-hist-reviewed{font-size:11.5px;font-weight:600;color:#34d399;margin-top:7px;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
[data-theme="light"] .inv-hist-reviewed{color:#0a8f5f}
/* Legacy: old photo button (kept for compat) */
.inv-hist-photo-btn{background:none;border:1px solid #ffffff18;border-radius:6px;color:var(--text-muted,#888);cursor:pointer;font-size:11px;padding:3px 10px;transition:border-color .15s,color .15s}
.inv-hist-photo-btn:hover{border-color:#ffffff35;color:var(--text,#e0e0e0)}
.inv-hist-photo-img{max-width:100%;border-radius:8px;margin-top:4px;display:block;cursor:pointer}
.inv-hist-no-photo{font-size:11px;color:var(--text-muted,#888);font-style:italic}
/* Light theme */
[data-theme="light"] .inv-hist-photo{background:var(--bg-2)}
[data-theme="light"] .inv-hist-chip{background:var(--bg-2);color:var(--text-3);border-color:var(--border)}
[data-theme="light"] .inv-hist-chip-plant{background:#00c48c12;color:#009966;border-color:#00c48c22}
[data-theme="light"] .inv-hist-pri-alta{background:#ff000010;color:#cc3333;border-color:#ff000020}
[data-theme="light"] .inv-hist-pri-media{background:#ff990010;color:#996600;border-color:#ff990020}
[data-theme="light"] .inv-hist-pri-baja{background:#0077ff10;color:#0055bb;border-color:#0077ff20}
[data-theme="light"] .inv-hist-notes{border-left-color:var(--border);color:var(--text-3)}
[data-theme="light"] .inv-hist-av{background:linear-gradient(135deg,#00a876,#0077cc)}
[data-theme="light"] .inv-hist-photo-btn{border-color:var(--border);color:var(--text-3)}
[data-theme="light"] .inv-hist-photo-btn:hover{border-color:var(--text-3);color:var(--text)}

/* ── Completion dialog ── */
.inv-complete-dialog{position:fixed;inset:0;z-index:10001}
.inv-cd-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.inv-cd-box{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--bg-card,#1a1a2e);border:1px solid var(--border,#333);border-radius:14px;padding:20px;width:min(400px,90vw);box-shadow:0 12px 40px rgba(0,0,0,.5)}
.inv-cm-box{display:flex;flex-direction:column;max-height:85vh;padding:16px}
.inv-cm-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding-right:4px}
.inv-cm-footer{display:flex;gap:10px;padding-top:14px;border-top:1.5px solid #22c55e35;margin-top:8px;flex-shrink:0;background:rgba(253,248,220,.06);border-radius:0 0 12px 12px;margin:8px -16px -16px;padding:14px 16px 16px}
/* ── Complete-mission modal — mobile-first redesign ──
   - Label/text sizes bumped to 13-15px (was 11-13) so they're readable
     at arm's length in field conditions.
   - Notes textarea: 16px font-size prevents iOS Safari zoom-in on focus.
   - Result buttons taller (44px min) for thumb-friendly tap targets.
   - Photo: 2 buttons side-by-side (camera + gallery), 48px min height. */
.inv-cd-title{font-size:18px;font-weight:700;color:var(--text,#e0e0e0);margin-bottom:4px}
.inv-cd-mission{font-size:15px;color:var(--text,#e0e0e0);margin-bottom:16px;line-height:1.35;font-weight:600}
.inv-cd-label{font-size:13px;font-weight:700;color:var(--text-2);text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px;display:block}
/* Fila del label de conteo + referencia de inventario (dato informativo, sin juicio) */
.inv-cd-label--counts{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.inv-cd-count-ref{font-size:11px;font-weight:700;text-transform:none;letter-spacing:0;
  color:#7dd3fc;background:rgba(56,189,248,.1);border:1px solid rgba(56,189,248,.22);
  border-radius:12px;padding:2px 9px;white-space:nowrap}
[data-theme="light"] .inv-cd-count-ref{color:#0284c7;background:rgba(2,132,199,.08);border-color:rgba(2,132,199,.2)}
.inv-cd-results{display:flex;gap:8px;margin-bottom:16px}
.inv-cd-res{flex:1;background:#ffffff08;border:1.5px solid #ffffff15;color:var(--text-2);padding:12px 6px;border-radius:10px;cursor:pointer;font-size:14px;font-weight:700;text-align:center;transition:background-color .15s,border-color .15s;min-height:44px}
.inv-cd-res:hover{border-color:#22c55e44}
.inv-cd-res-sel{background:#22c55e20;border-color:#22c55e;color:#22c55e}
/* Jerarquía: "Terminado" es la acción principal (más ancha y visible); "Parcial"
   y "No se pudo" quedan más chicos/discretos para no competir visualmente. Su
   color de seleccionado (ámbar/rojo) ya está definido más arriba y gana sobre esto. */
.inv-cd-res-ok{flex:1.5;font-size:15px}
.inv-cd-res-partial,.inv-cd-res-fail{flex:.82;font-size:11.5px;font-weight:600;color:var(--text-3);padding-left:3px;padding-right:3px}
.inv-cd-res-partial.inv-cd-res-sel,.inv-cd-res-fail.inv-cd-res-sel{font-weight:700}
/* Notes: 16px prevents iOS zoom-in; bigger touch target; better focus state */
.inv-cd-notes{width:100%;background:var(--bg-2);border:1.5px solid #ffffff20;border-radius:10px;color:var(--text-1);font-size:16px;line-height:1.45;padding:12px 14px;resize:vertical;margin-bottom:16px;font-family:inherit;min-height:90px;box-sizing:border-box}
.inv-cd-notes:focus{outline:none;border-color:#3b82f6;background:#0c1424;box-shadow:0 0 0 3px rgba(59,130,246,.18)}
.inv-cd-notes::placeholder{color:#64748b}
.inv-cd-photo-wrap{margin-bottom:16px}
/* Two photo buttons side-by-side: camera + gallery. */
.inv-cd-photo-actions{display:flex;gap:16px}
.inv-cd-photo-hint{font-size:12px;color:var(--text-3,#8aa);margin-top:6px;text-align:center;line-height:1.35}
.inv-cd-photo-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;background:#ffffff10;border:1.5px dashed #ffffff30;color:var(--text-2);padding:16px 10px;border-radius:10px;cursor:pointer;font-size:14px;font-weight:700;transition:background-color .15s,border-color .15s,color .15s;min-height:54px;text-align:center;-webkit-tap-highlight-color:transparent}
/* Botón único de foto (form crear: solo cámara para el ANTES) — acción primaria */
.inv-cd-photo-btn--solo{min-height:58px;font-size:15px}
.inv-cd-photo-btn--cam:hover,.inv-cd-photo-btn--cam.inv-cd-photo-btn--has{background:#22c55e20;border-color:#22c55e80;color:#4ade80;border-style:solid}
.inv-cd-photo-btn--gal:hover,.inv-cd-photo-btn--gal.inv-cd-photo-btn--has{background:#3b82f620;border-color:#3b82f680;color:#93c5fd;border-style:solid}
.inv-cd-photo-preview{display:flex;align-items:center;gap:10px;margin-top:10px;background:#ffffff08;border-radius:10px;padding:8px}
.inv-cd-photo-thumb{width:88px;height:66px;object-fit:cover;border-radius:8px;border:1px solid #ffffff20;flex-shrink:0}
.inv-cd-photo-clear{background:#ff4d4d20;border:1px solid #ff4d4d40;color:#f87171;padding:6px 14px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:700;margin-left:auto}
.inv-cd-btns{display:flex;gap:8px;justify-content:flex-end}
.inv-cd-cancel{flex:1;background:#ef444414;border:1.5px solid #ef444445;color:#f87171;padding:12px 18px;border-radius:10px;cursor:pointer;font-size:14px;font-weight:600;min-height:44px}
.inv-cd-cancel:hover{background:#ef444425;border-color:#ef444470}
.inv-cd-confirm{flex:1.4;background:#22c55e;border:none;color:#fff;padding:12px 22px;border-radius:10px;cursor:pointer;font-size:15px;font-weight:700;min-height:44px}
.inv-cd-confirm:hover{background:#16a34a}
/* ── Tier 1 fields: health pills, pest chips, qty input ──
   All optional; tap-friendly (≥40px), mobile-first sizes. */
.inv-cd-opt{font-size:11px;font-weight:500;color:#64748b;text-transform:none;letter-spacing:0;margin-left:6px}

/* Health: 3 large pills (single-select, toggleable) */
.inv-cd-health{display:flex;gap:8px;margin-bottom:16px}
.inv-cd-hpill{flex:1;background:#ffffff08;border:1.5px solid #ffffff15;color:var(--text-2);padding:11px 6px;border-radius:10px;cursor:pointer;font-size:14px;font-weight:700;text-align:center;transition:background-color .15s,border-color .15s;min-height:44px}
.inv-cd-hpill--good.inv-cd-hpill-sel{background:#22c55e22;border-color:#22c55e;color:#86efac}
.inv-cd-hpill--mid.inv-cd-hpill-sel {background:#f59e0b22;border-color:#f59e0b;color:#fcd34d}
.inv-cd-hpill--bad.inv-cd-hpill-sel {background:#ef444422;border-color:#ef4444;color:#fca5a5}

/* Pests: multi-select chips, wrapping */
.inv-cd-pests{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.inv-cd-pchip{background:#ffffff08;border:1.5px solid #ffffff15;color:var(--text-2);padding:8px 12px;border-radius:20px;cursor:pointer;font-size:13px;font-weight:600;transition:background-color .15s,border-color .15s;-webkit-tap-highlight-color:transparent}
.inv-cd-pchip-sel{background:#a855f730;border-color:#a855f7;color:#e9d5ff}
/* Conteos compactos (cut back/retail/muertas/vivas) — 4 campos que llenan el ancho, deslizables si no caben */
.inv-cd-counts{display:flex;gap:5px;margin-bottom:16px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;scrollbar-width:thin}
.inv-cd-counts::-webkit-scrollbar{height:5px}
.inv-cd-counts::-webkit-scrollbar-thumb{background:#ffffff20;border-radius:3px}
.inv-cd-count{flex:1 1 0;display:flex;flex-direction:column;gap:2px;background:#ffffff08;border:1.5px solid #ffffff15;border-radius:9px;padding:5px 6px;min-width:58px}
.inv-cd-count:focus-within{border-color:#3b82f680}
.inv-cd-count-lbl{font-size:10px;font-weight:600;color:var(--text-3);white-space:nowrap}
.inv-cd-count-input{width:100%;min-width:0;background:transparent;border:none;outline:none;color:var(--text-1);font-size:16px;font-weight:700;padding:0}
.inv-cd-count-input::placeholder{color:#475569;font-weight:600}
/* Total Qty = RET + CB (computado, solo lectura) */
.inv-cd-count--total{background:#22c55e12;border-color:#22c55e40}
/* Total ahora es EDITABLE: cursor de texto. En modo manual cambia a ámbar y sale ↺. */
.inv-cd-count-input--computed{color:#4ade80}
.inv-cd-count-input--manual{color:#fcd34d}
.inv-cd-count-auto{font-size:8px;font-weight:600;color:#22c55e99;white-space:nowrap;letter-spacing:.2px;margin-top:-1px}
.inv-cd-total-reset{background:#f59e0b22;border:1px solid #f59e0b66;color:#fcd34d;border-radius:6px;font-size:11px;line-height:1;padding:2px 5px;margin-top:1px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.inv-cd-total-reset:active{transform:scale(.9)}
/* Per-field count colors */
.inv-cd-count--ret{background:#10b98112;border-color:#10b98140}
.inv-cd-count--ret:focus-within{border-color:#10b98170}
.inv-cd-count--ret .inv-cd-count-lbl{color:#34d399}
.inv-cd-count--ret .inv-cd-count-input{color:#6ee7b7}
.inv-cd-count--lnd{background:#3b82f612;border-color:#3b82f640}
.inv-cd-count--lnd:focus-within{border-color:#3b82f670}
.inv-cd-count--lnd .inv-cd-count-lbl{color:#60a5fa}
.inv-cd-count--lnd .inv-cd-count-input{color:#93c5fd}
.inv-cd-count--cb{background:#f59e0b12;border-color:#f59e0b40}
.inv-cd-count--cb:focus-within{border-color:#f59e0b70}
.inv-cd-count--cb .inv-cd-count-lbl{color:#fbbf24}
.inv-cd-count--cb .inv-cd-count-input{color:#fde68a}
.inv-cd-count--dead{background:#ef444412;border-color:#ef444440}
.inv-cd-count--weekly{background:#06b6d412;border-color:#06b6d440}
.inv-cd-count--dead:focus-within{border-color:#ef444470}
.inv-cd-count--dead .inv-cd-count-lbl{color:#f87171}
.inv-cd-count--dead .inv-cd-count-input{color:#fca5a5}
/* Checkbox: solicitar actualización de inventario */
.inv-cd-check{display:flex;align-items:center;gap:10px;background:#ffffff08;border:1.5px solid #ffffff15;border-radius:10px;padding:11px 14px;margin-bottom:16px;cursor:pointer;min-height:44px;-webkit-tap-highlight-color:transparent}
/* Nota del auto-marcado por discrepancia (aparece bajo el checkbox 🛒) */
.inv-cd-disc-note{margin:-10px 0 14px;font-size:11.5px;font-weight:700;color:#fbbf24;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);border-radius:8px;padding:7px 10px;line-height:1.4}
/* ── 🥀 Selector de CAUSA del failing (aparece al escribir muertas > 0) ──
   Tiles estilo "rueda de diagnóstico": borde degradado por causa, glow al
   seleccionar, pop al aparecer. 1 tap = seleccionar; tap de nuevo = quitar. */
.inv-cd-failwhy{margin:10px 0;padding:12px;border-radius:14px;border:1px solid rgba(198,40,40,.5);background:linear-gradient(160deg,rgba(198,40,40,.12),rgba(198,40,40,.03));animation:fcPop .28s cubic-bezier(.34,1.4,.64,1)}
@keyframes fcPop{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}
.inv-cd-failwhy-t{font-weight:800;font-size:13.5px;color:#ef9a9a;margin-bottom:9px}
.inv-cd-failwhy-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media(max-width:560px){.inv-cd-failwhy-grid{grid-template-columns:repeat(2,1fr)}}
.inv-cd-fc{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border-radius:12px;border:2px solid transparent;background:linear-gradient(var(--bg-card,#0f1c33),var(--bg-card,#0f1c33)) padding-box,linear-gradient(135deg,var(--fc1),var(--fc2)) border-box;color:var(--text-1);cursor:pointer;transition:transform .12s,box-shadow .15s}
.inv-cd-fc-ic{font-size:26px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
.inv-cd-fc-lb{font-size:11px;font-weight:700;text-align:center;line-height:1.15}
.inv-cd-fc:active{transform:scale(.93)}
.inv-cd-fc--on{background:linear-gradient(135deg,var(--fc1),var(--fc2)) border-box;box-shadow:0 0 16px var(--fc2);color:#fff}
.inv-cd-fc--on .inv-cd-fc-lb{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}
/* Icono de causa junto al número 🥀 en la tarjeta del Work Log (tooltip = label) */
.wf-stat-cause{font-size:12px;margin-left:3px;cursor:help}
.wf-stat-cause-img{width:14px;height:14px;border-radius:4px;object-fit:cover;vertical-align:-2px}
/* Tile de causa con FOTO REAL subida por el admin (editor ⚙️) */
.inv-cd-fc--img{padding:0 0 6px;overflow:hidden}
.inv-cd-fc-img{width:100%;height:52px;object-fit:cover;border-radius:10px 10px 0 0;display:block}
/* Chip 🧩 grupo dividido (junto al 📦 Inventario del label de conteo) */
.inv-cd-sib-chip{color:#c4b5fd;background:rgba(139,92,246,.1);border-color:rgba(139,92,246,.25)}
[data-theme="light"] .inv-cd-disc-note{color:#b45309}
.inv-cd-check:has(.inv-cd-check-box:checked){background:#f59e0b1a;border-color:#f59e0b}
.inv-cd-check-box{width:20px;height:20px;flex-shrink:0;accent-color:#f59e0b;cursor:pointer}
.inv-cd-check-txt{font-size:13px;font-weight:600;color:var(--text-2);line-height:1.3}

/* Helpers: multi-select chips (checkbox-style behaviour) */
.inv-cd-helpers{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.inv-cd-helper-chip{background:#ffffff08;border:1.5px solid #ffffff15;color:var(--text-2);padding:9px 13px;border-radius:20px;cursor:pointer;font-size:13px;font-weight:600;transition:background-color .15s,border-color .15s;-webkit-tap-highlight-color:transparent;min-height:40px}
.inv-cd-helper-chip-sel{background:#3b82f626;border-color:#3b82f6;color:#93c5fd}
.inv-cd-helper-chip-sel::before{content:"✓ ";font-weight:800}

/* Worker dropdown: bigger + readable on mobile */
.inv-cm-worker-wrap{margin-bottom:16px}
.inv-cm-worker{width:100%;background:var(--bg-2);border:1.5px solid #ffffff20;border-radius:10px;color:var(--text-1);font-size:16px;padding:12px 14px;font-family:inherit;-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,#94a3b8 50%),linear-gradient(135deg,#94a3b8 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}

/* ── Create mission from plant dialog ── */
.inv-cm-header{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.inv-cm-header-icon{font-size:22px;line-height:1}
.inv-cm-header-text{font-size:18px;font-weight:700;color:var(--text,#e0e0e0);flex:1}
.inv-cm-close{background:none;border:none;color:#ff3b3b;font-size:28px;font-weight:700;line-height:1;cursor:pointer;padding:0 6px;transition:all .15s;text-shadow:0 0 6px rgba(255,59,59,0.5)}
.inv-cm-close:hover{color:#ff1a1a;text-shadow:0 0 12px rgba(255,59,59,0.7)}
.inv-cm-plant-card{display:flex;align-items:center;gap:10px;background:#ffffff06;border:1px solid #ffffff12;border-radius:10px;padding:10px 12px;margin-bottom:16px}
.inv-cm-plant-icon{font-size:22px;flex-shrink:0}
.inv-cm-plant-details{min-width:0}
.inv-cm-plant-name{font-size:14px;font-weight:600;color:var(--text,#e0e0e0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inv-cm-plant-meta{font-size:12px;color:var(--text-muted,#888);margin-top:2px}
/* Comentario del inventario (memo de la planta ancla) — se arrastra a la misión */
.inv-cm-plant-memo{font-size:12px;color:#fcd34d;background:#f59e0b15;border-left:3px solid #f59e0b80;padding:4px 8px;border-radius:0 6px 6px 0;margin-top:5px;line-height:1.3;white-space:normal;overflow-wrap:break-word}
.inv-cm-plant-memo-tag{color:#a3a3a3;font-weight:600;font-size:10.5px;font-style:italic;white-space:nowrap}
/* Action chips: compact mobile-first grid (3 cols mobile, 4 cols tablet/desktop).
   Color-coded by category — selected state matches the category palette so the
   user sees at a glance what mix is selected. White text always (NO grayed-out
   "deselected" state — visible labels are essential in field/sunlight). */
.inv-cm-actions-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:14px}
@media(min-width:480px){.inv-cm-actions-grid{grid-template-columns:repeat(4,1fr)}}
/* Secciones nombradas: el contenedor externo deja de ser grid cuando agrupa
   secciones (cada sección trae su propio grid interno). */
.inv-cm-actions-grid:has(> .inv-cm-sec){display:block;gap:0}
.inv-cm-sec{margin-bottom:12px}
.inv-cm-sec:last-child{margin-bottom:0}
.inv-cm-sec-h{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--text-3,#94a3b8);margin:2px 2px 6px;padding-bottom:4px;border-bottom:1px solid #ffffff12}
.inv-cm-sec-grid{margin-bottom:0}
/* Feedback táctil más nítido en móvil (tiles de acción/plaga/estado) y
   encabezados de sección compactos para no comer altura del modal. */
@media(hover:none),(pointer:coarse){
  .cm-tile:active{transform:scale(.94);transition:transform .06s ease}
  .inv-cm-sec{margin-bottom:9px}
  .inv-cm-sec-h{font-size:10.5px;margin:0 2px 5px;padding-bottom:3px}
}

.inv-cm-act{
  background:#0f172a; border:1.5px solid #1e293b; color:var(--text-1);
  padding:9px 6px; border-radius:9px; cursor:pointer;
  font-size:12px; font-weight:700; line-height:1.15;
  text-align:center; transition:background-color .15s,border-color .15s;
  position:relative; min-height:44px;
  display:flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent;
  word-break:break-word; overflow-wrap:break-word; hyphens:none;
}
.inv-cm-act:hover{border-color:#3b82f680;background:#162033}
/* "Otro" spans the full row at the bottom, dashed border */
.inv-cm-act-otro{grid-column:1 / -1;border-style:dashed}

/* ── Color palettes per category (only applied when SELECTED) ────────────── */
.inv-cm-act--rev.inv-cm-act-sel    {background:#06b6d420;border-color:#06b6d4;color:#67e8f9}
.inv-cm-act--poda.inv-cm-act-sel   {background:#22c55e20;border-color:#22c55e;color:#86efac}
.inv-cm-act--manejo.inv-cm-act-sel {background:#3b82f622;border-color:#3b82f6;color:#93c5fd}
.inv-cm-act--cuid.inv-cm-act-sel   {background:#f97316 ;background:#f9731620;border-color:#fb923c;color:#fdba74}
.inv-cm-act--limp.inv-cm-act-sel   {background:#a855f720;border-color:#a855f7;color:#e9d5ff}
.inv-cm-act--del.inv-cm-act-sel    {background:#ef444420;border-color:#ef4444;color:#fca5a5}
.inv-cm-act--otro.inv-cm-act-sel   {background:#f59e0b22;border-color:#f59e0b;color:#fcd34d}

/* Hover hints per category (subtle) */
.inv-cm-act--rev:hover    {border-color:#06b6d480}
.inv-cm-act--poda:hover   {border-color:#22c55e80}
.inv-cm-act--manejo:hover {border-color:#3b82f680}
.inv-cm-act--cuid:hover   {border-color:#fb923c80}
.inv-cm-act--limp:hover   {border-color:#a855f780}
.inv-cm-act--del:hover    {border-color:#ef444480}
.inv-cm-act--otro:hover   {border-color:#f59e0b80}
.inv-cm-otro-wrap{margin:-6px 0 12px}
/* Edit-mission editable subject fields (location / size / qty) */
.inv-em-fields-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;margin:4px 0 6px}
.inv-em-fields-grid label{display:flex;flex-direction:column;gap:4px}
.inv-em-fields-grid label:first-child{grid-column:1 / -1}
.inv-em-fields-grid .inv-cm-otro-input{margin-top:2px}
.inv-cm-otro-input{width:100%;background:#ffffff08;border:1px solid #ffffff20;border-radius:8px;color:var(--text,#e0e0e0);font-size:13px;padding:9px 12px;font-family:inherit;transition:border-color .15s}
.inv-cm-otro-input::placeholder{color:var(--text-muted,#666)}
.inv-cm-otro-input:focus{outline:none;border-color:#3b82f6}
/* Asignar — campo principal */
.inv-cd-label-main{font-size:12px;color:#4ade80;letter-spacing:.3px;margin-bottom:8px}
.inv-em-main-badge{background:#22c55e20;color:#4ade80;border-radius:8px;padding:1px 7px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;margin-left:6px;vertical-align:middle}
.inv-cm-worker-wrap{margin-bottom:14px}
.inv-cm-worker{width:100%;background:#ffffff08;border:1px solid #ffffff20;border-radius:8px;color:var(--text,#e0e0e0);font-size:14px;padding:11px 12px;font-family:inherit;cursor:pointer;appearance:auto}
.inv-cm-worker-main{border-color:#22c55e50;font-size:15px;padding:12px 14px}
.inv-cm-worker-main:focus{outline:none;border-color:#22c55e;box-shadow:0 0 0 3px #22c55e18}
.inv-cm-worker:focus{outline:none;border-color:#3b82f6}
.inv-cm-worker option{background:#1e1e2e;color:var(--text-1)}
.inv-mc-assignee{font-size:12px;color:#60a5fa;margin:2px 0 4px;font-weight:500}
/* Priority compact */
.inv-cm-priorities{display:flex;gap:6px;margin-bottom:14px}
.inv-cm-priorities-compact{gap:4px}
.inv-cm-pri{flex:1;background:#ffffff08;border:2px solid #ffffff12;color:#aaa;padding:8px 4px;border-radius:10px;cursor:pointer;font-size:12px;font-weight:600;text-align:center;transition:all .15s}
.inv-cm-pri:hover{border-color:#f59e0b55;color:var(--text-1)}
.inv-cm-pri-sel{font-weight:800}
.inv-cm-pri-alta.inv-cm-pri-sel{background:#ef444428;border-color:#ef4444;color:#fca5a5}
.inv-cm-pri-media.inv-cm-pri-sel{background:#f59e0b28;border-color:#f59e0b;color:#fcd34d}
.inv-cm-pri-baja.inv-cm-pri-sel{background:#22c55e28;border-color:#22c55e;color:#86efac}
.inv-cm-opt{font-weight:400;color:var(--text-muted,#666);text-transform:none;letter-spacing:0}
/* Large description textarea */
.inv-cd-notes-lg{min-height:110px;font-size:15px!important;line-height:1.5;resize:vertical}
/* My Missions card — tappable */
.m-mmp-card-tap{cursor:pointer;transition:filter .15s}
.m-mmp-card-tap:active{filter:brightness(1.12)}
.m-mmp-tap-hint{font-size:12px;color:var(--text-3);opacity:.7;flex:1;align-self:center}
.m-mmp-assignee{background:#3b82f618!important;color:#60a5fa!important;font-weight:600}
/* Section headers — Asignadas a mí vs Mis Zonas */
.m-mmp-section-hdr{display:flex;align-items:center;justify-content:space-between;padding:7px 12px 6px;margin-top:6px;margin-bottom:4px;border-radius:10px;background:var(--bg-3);border:1px solid var(--border)}
.m-mmp-sec-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.6px}
.m-mmp-sec-assigned .m-mmp-sec-label{color:#60a5fa}
.m-mmp-sec-zone .m-mmp-sec-label{color:#4ade80}
.m-mmp-sec-auto .m-mmp-sec-label{color:#c084fc}
.m-mmp-sec-count{font-size:11px;font-weight:800;min-width:20px;text-align:center;padding:2px 8px;border-radius:20px;background:var(--bg-1,#0f1a12);color:var(--text-2)}
.m-mmp-sec-divider{height:1px;background:var(--border);margin:10px 0 6px;opacity:.4}
.m-mmp-stat-assigned{background:#3b82f60a;border:1px solid #3b82f625}
.m-mmp-stat-assigned .m-mmp-stat-n{color:#60a5fa}
.m-mmp-stat-auto{background:#a855f70a;border:1px solid #a855f725}
.m-mmp-stat-auto .m-mmp-stat-n{color:#c084fc}
.m-mmp-stat-auto-badge{display:inline-block;font-size:9px;font-weight:700;color:#c084fc;background:#a855f720;border:1px solid #a855f740;border-radius:20px;padding:1px 5px;vertical-align:middle;margin-left:3px;line-height:1.4}

/* ── Pickup (Recoger) Tab ── */
.inv-pk-header{margin-bottom:12px}
.inv-pk-title{font-size:15px;font-weight:800;color:#ff6b6b;text-shadow:0 0 4px rgba(239,68,68,0.3)}
.inv-pk-table{border:1px solid #ffffff12;border-radius:10px;overflow:hidden;margin-bottom:14px}
.inv-pk-row{display:grid;grid-template-columns:1.5fr 1fr 0.6fr 0.7fr 1.2fr;gap:4px;padding:8px 12px;align-items:center;border-bottom:1px solid #ffffff08;font-size:13px}
.inv-pk-row-hd{background:#ffffff08;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted,#999)}
.inv-pk-row:last-child{border-bottom:none}
.inv-pk-c-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.inv-pk-c-name:active,.inv-pk-c-name.inv-pk-expanded{white-space:normal;word-break:break-word}
.inv-pk-c-exp{text-align:center;color:#ffcc00;font-weight:700;text-shadow:0 0 4px rgba(255,204,0,0.3)}
.inv-pk-c-act{text-align:center}
.inv-pk-input{width:80px;background:#ffffff08;border:1px solid #ffffff20;border-radius:6px;color:var(--text,#e0e0e0);font-size:13px;padding:5px 8px;text-align:center;font-family:inherit}
.inv-pk-input:focus{outline:none;border-color:#3b82f6}
.inv-pk-footer{display:flex;gap:10px;align-items:flex-end;margin-bottom:20px}
.inv-pk-notes{flex:1;background:#ffffff08;border:1px solid #ffffff20;border-radius:8px;color:var(--text,#e0e0e0);font-size:13px;padding:8px 10px;font-family:inherit;resize:vertical}
.inv-pk-notes::placeholder{color:var(--text-muted,#666)}
.inv-pk-notes:focus{outline:none;border-color:#3b82f6}
.inv-pk-register{background:#ef4444;color:#fff;border:none;border-radius:8px;padding:10px 18px;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;transition:all .15s;text-shadow:0 0 3px rgba(0,0,0,0.3);box-shadow:0 0 8px rgba(239,68,68,0.3)}
.inv-pk-register:hover{background:#dc2626;box-shadow:0 0 14px rgba(239,68,68,0.5)}
.inv-pk-register:disabled{opacity:.5;cursor:not-allowed}
.inv-pk-hist-title{font-size:14px;font-weight:700;margin:18px 0 10px;color:var(--text-muted,#aaa);border-top:1px solid #ffffff10;padding-top:14px}
.inv-pk-hist-card{background:#ffffff06;border:1px solid #ffffff10;border-radius:10px;padding:12px;margin-bottom:10px}
.inv-pk-hist-hd{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px;font-size:12px}
.inv-pk-hist-date{font-weight:700;color:#e0e0e0}
.inv-pk-hist-by{color:#60a5fa}
.inv-pk-hist-totals{color:var(--text-muted,#999);margin-left:auto}
.inv-pk-hist-items{display:flex;flex-direction:column;gap:2px}
.inv-pk-hist-item{display:grid;grid-template-columns:1.5fr 1fr 0.6fr 0.6fr auto;gap:4px;padding:3px 8px;font-size:12px;border-radius:4px;align-items:center}
.inv-pk-eq{color:var(--text-muted,#888)}
.inv-pk-less{background:#ff444412;color:#ff6b6b}
.inv-pk-more{background:#00d4ff10;color:#00d4ff}
.inv-pk-hi-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;cursor:pointer}
.inv-pk-hi-name:active,.inv-pk-hi-name.inv-pk-expanded{white-space:normal;word-break:break-word}
.inv-pk-hi-exp,.inv-pk-hi-act{text-align:center}
.inv-pk-hi-diff{font-weight:700;font-size:11px}
.inv-pk-hist-notes{font-style:italic;color:var(--text-muted,#888);font-size:12px;margin-top:6px}

/* ── Orders expansion (per-plant sales detail) ── */
.inv-c-vend-has{cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px}
.inv-c-vend-has:hover{color:#00e5ff;text-shadow:0 0 6px rgba(0,229,255,0.4)}
.inv-c-vend-open{color:#00e5ff!important;text-shadow:0 0 6px rgba(0,229,255,0.4)}
.inv-orders-row{grid-column:1/-1;background:#ffffff06;border:1px solid #ffffff10;border-radius:8px;padding:8px 10px;margin:-4px 0 4px;overflow-x:auto}
.inv-orders-hdr{display:grid;grid-template-columns:40px 1fr 70px 50px 70px 80px 50px;gap:4px;padding:4px 6px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:#999;border-bottom:1px solid #ffffff10;margin-bottom:2px}
.inv-orders-item{display:grid;grid-template-columns:40px 1fr 70px 50px 70px 80px 50px;gap:4px;padding:4px 6px;font-size:12px;color:#ddd;border-bottom:1px solid #ffffff06;align-items:center}
.inv-orders-item:last-child{border-bottom:none}
.inv-ord-shipped{text-decoration:line-through;opacity:.5}
.inv-ord-urgent{background:#ef444412;border-radius:4px}
.inv-ord-pri{text-align:center;font-weight:700;color:#ffcc00;text-shadow:0 0 4px rgba(255,204,0,0.3)}
.inv-ord-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.inv-ord-date{font-weight:600;font-size:11px}
.inv-ord-qty{text-align:center;font-weight:700;color:#00d4ff;text-shadow:0 0 4px rgba(0,212,255,0.3)}
.inv-ord-id{font-size:11px;color:#999;font-variant-numeric:tabular-nums}
.inv-ord-fob{font-size:10px;color:#bf5af2;text-shadow:0 0 3px rgba(191,90,242,0.3)}
.inv-ord-st{text-align:center;font-size:14px}
.inv-mc-det-urgent{background:#ef444425;color:#ff6b6b;padding:2px 8px;border-radius:5px;font-weight:700;text-shadow:0 0 4px rgba(239,68,68,0.3)}

/* ── Tablet (641–1024): las ocho columnas caben, pero justas ───────────────
   Es el ancho donde la tabla se rompe sin darse cuenta: entra todo y el nombre
   se queda en dos palabras. Se aprieta lo corto —tamano, status, numeros— para
   que el nombre siga leyendose entero. */
@media(min-width:641px) and (max-width:1024px){
  .inv-tbl-row{grid-template-columns:minmax(0,2.6fr) 30px minmax(0,0.95fr) 50px 54px 54px 52px 42px;font-size:12.5px}
  .inv-tbl-row>span{padding:6px 5px}
  .inv-tbl-header{font-size:10px}
  .inv-c-qty,.inv-c-vend{font-size:13.5px}
  .inv-c-size{font-size:11.5px;letter-spacing:-.3px}
  .inv-c-act{padding:4px 2px!important}
  .inv-c-act-btn{width:33px;height:33px;font-size:17px}
  /* Mismo regalo que en telefono: la fila ya mide 78px por los botones. */
  .inv-c-name-line{-webkit-line-clamp:3}
  .inv-xref-badge{min-height:31px}
  .inv-xref-badge b{font-size:13px}
  .inv-xref-badge i{font-size:7px}
}

/* ── Pantalla ancha: el nombre se lo lleva casi todo ───────────────────────
   Con sitio de sobra no tiene sentido repartirlo a partes iguales: lo corto ya
   se lee y lo unico que gana con mas ancho es el nombre. */
@media(min-width:1400px){
  .inv-tbl-row{grid-template-columns:minmax(0,4fr) 34px minmax(0,1fr) 58px 64px 62px 62px 48px}
  .inv-c-name-line{-webkit-line-clamp:2}
}

/* ── Responsive ── */
@media(max-width:640px){
  .inv-fs{width:100vw;height:100vh;border-radius:0}
  /* Móvil: se OCULTA la columna Vendidas (menos crítica para crear misión) → 7
     columnas y más ancho para el nombre, que ahora puede ir en 2 líneas. La
     cuadrícula tipo Excel se mantiene en cada celda. */
  /* Telefono: se oculta Vendidas —la menos critica para crear una mision— y el
     nombre se lleva todo lo que suelta. Numericas al minimo legible; los dos
     botones siguen apilados y siguen siendo del tamano de un dedo. */
  .inv-tbl-row{grid-template-columns:minmax(0,2.3fr) 26px minmax(0,0.72fr) 44px 44px 46px 38px;font-size:11px}
  .inv-tbl-row>span{padding:5px 4px}
  .inv-tbl-header{font-size:9px;letter-spacing:.2px}
  /* Tiene que ser >.inv-c-vend y no .inv-c-vend a secas: la regla de arriba es
     .inv-tbl-row>span{display:flex} y por especificidad (0,1,1 contra 0,1,0) le
     ganaba a este display:none. La columna NUNCA se ocultaba, y como aqui solo
     hay 7 pistas para 8 celdas, la octava caia en una pista implicita de ~146px
     que se comia el nombre. */
  .inv-tbl-row>.inv-c-vend{display:none}
  /* TRES renglones, no dos. La fila ya mide 76px porque los dos botones
     apilados le fijan esa altura, y el nombre a dos lineas solo gasta 25: habia
     ~50px verticales tirados en CADA fila. El tercer renglon no alarga nada y
     pasa de ~48 caracteres visibles a ~72, que es el nombre entero. */
  .inv-c-name-line{-webkit-line-clamp:3;line-height:1.15}
  .inv-c-memo{font-size:10px;-webkit-line-clamp:1}
  .inv-c-qty{font-size:12.5px}
  .inv-c-size{font-size:10.5px;letter-spacing:-.3px}
  .inv-c-act{padding:4px 1px!important;gap:3px}
  .inv-c-act-btn{width:32px;height:32px;font-size:17px;padding:0}
  .inv-xref-badge{min-height:30px}
  .inv-xref-badge b{font-size:12px}
  .inv-xref-badge i{font-size:6.5px}
  .inv-mission-badge{font-size:9.5px;padding:0 3px}
  .inv-badge{padding:2px 5px;font-size:9px}
  .inv-fs-hd{padding:12px 14px}
  .inv-fs-hd-left{gap:6px}
  .inv-fs-title{font-size:16px}
  .inv-fs-stats{font-size:11px;padding:3px 7px}
  .inv-fs-cap,.inv-fs-pot,.inv-fs-week{font-size:11px}
  .inv-tabs{padding:0 8px;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .inv-tab{font-size:12px;padding:8px 10px;white-space:nowrap}
  .inv-tab-body{padding:12px 10px}
  .inv-block-chip{padding:6px 10px;min-width:54px}
  .inv-bk-letra{font-size:19px}
  .inv-bk-letra-larga{font-size:12.5px}
  .inv-bk-qty{font-size:10px}
  .inv-bk-qty i{font-size:9.5px}
  .inv-tbl-hd{font-size:15px}
  .inv-mc-title{font-size:14px}
  .inv-mc-actions{flex-wrap:nowrap;gap:4px}
  .inv-mc-complete-btn,.inv-mc-edit,.inv-mc-dismiss{padding:6px 10px;font-size:11px}
  .inv-mission-card{padding:10px 12px}
  .inv-hist-card{padding:10px 12px}
  .inv-hist-hd{gap:5px;flex-wrap:wrap}
  .inv-pk-row{grid-template-columns:1fr 0.8fr 0.5fr 0.5fr 0.7fr;font-size:11px;padding:6px 8px;gap:3px}
  .inv-pk-c-size{display:none}
  .inv-pk-input{width:56px;font-size:12px;padding:4px 4px}
  .inv-pk-footer{flex-direction:column}
  .inv-pk-row-hd{font-size:10px}
  .inv-pk-hist-item{grid-template-columns:1fr 0.8fr 0.5fr 0.5fr auto;font-size:11px}
  .inv-cm-actions-grid{grid-template-columns:1fr 1fr;gap:5px;margin-bottom:8px}
  .inv-cm-box{max-height:90vh;max-height:90dvh;width:min(400px,94vw);padding:12px}
  .inv-cm-header{margin-bottom:8px}
  .inv-cm-header-text{font-size:16px}
  .inv-cm-plant-card{padding:8px 10px;margin-bottom:10px;gap:8px}
  .inv-cm-plant-name{font-size:14px}
  .inv-cm-act{font-size:12px;padding:8px 6px}
  .inv-cm-worker{font-size:16px;padding:11px 10px}
  .inv-cm-worker-main{font-size:16px;padding:12px 12px}
  .inv-cm-pri{padding:7px 4px;font-size:11px}
  .inv-cd-notes{font-size:16px}
  .inv-cd-notes-lg{font-size:16px!important;min-height:120px}
  .inv-cm-footer .inv-cd-cancel,.inv-cm-footer .inv-cd-confirm{padding:10px 14px;font-size:13px}
  .inv-orders-hdr{grid-template-columns:28px 1fr 52px 36px 52px 56px 32px;font-size:9px;gap:2px;padding:3px 4px}
  .inv-orders-item{grid-template-columns:28px 1fr 52px 36px 52px 56px 32px;font-size:10px;gap:2px;padding:3px 4px}
  .inv-orders-row{padding:4px 6px}
}
/* ── MÓVIL: el form de Completar Misión llena la pantalla (mejor uso del espacio,
   menos "tarjeta flotante"). Solo el modal de completar/crear (.inv-cm-box). ── */
@media(max-width:640px){
  .inv-cd-box.inv-cm-box{
    width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;
    top:0;left:0;transform:none;border-radius:0;border:none;padding:14px 14px 0;
  }
  .inv-cm-box .inv-cm-footer{margin:8px -14px 0;border-radius:0}
  .inv-cm-scroll{max-height:none}
}
/* ── TABLET VERTICAL (portrait): pantalla completa. Landscape NO (queda acotado
   centrado abajo, no tan ancho). Rango tablet 641–1024px. ── */
@media(min-width:641px) and (max-width:1024px) and (orientation:portrait){
  .inv-cd-box.inv-cm-box{
    width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;
    top:0;left:0;transform:none;border-radius:0;border:none;padding:18px 20px 0;
  }
  .inv-cm-box .inv-cm-footer{margin:8px -20px 0;border-radius:0}
  .inv-cm-scroll{max-height:none}
}
@media(min-width:641px) and (max-width:1024px) and (orientation:landscape){
  /* Horizontal: NO a lo ancho — tarjeta acotada y alta, centrada. */
  .inv-cd-box.inv-cm-box{width:min(560px,80vw);max-height:94vh;max-height:94dvh}
}
@media(max-height:500px){
  .inv-cm-box{max-height:96vh;max-height:96dvh;top:50%;width:min(440px,96vw)}
  .inv-cm-scroll{max-height:calc(96dvh - 110px)}
  .inv-cm-plant-card{padding:6px 8px;margin-bottom:6px}
  .inv-cd-label{margin-bottom:3px;font-size:10px}
  .inv-cm-actions-grid{gap:4px;margin-bottom:6px}
  .inv-cm-act{padding:6px 4px;font-size:11px}
  .inv-cm-pri{padding:6px 4px;font-size:11px}
  .inv-cm-worker-wrap{margin-bottom:6px}
  .inv-cm-otro-wrap{margin:-4px 0 6px}
  .inv-cm-priorities{margin-bottom:6px}
}

/* ── Light theme: Mode toggle + Manual times ── */
[data-theme="light"] .op-mode-toggle {
  border-color: rgba(0,0,0,.12); background: rgba(0,0,0,.04);
}
[data-theme="light"] .op-mode-btn { color: var(--text-2); }
[data-theme="light"] .op-mode-btn:hover { background: rgba(0,0,0,.06); }
[data-theme="light"] .op-mode-btn.op-mode-active {
  background: rgba(33,150,243,.12); color: #1976d2;
  box-shadow: inset 0 -2px 0 #1976d2;
}
[data-theme="light"] .op-mode-btn[data-mode="manual"].op-mode-active {
  background: rgba(245,124,0,.1); color: #e65100;
  box-shadow: inset 0 -2px 0 #e65100;
}
[data-theme="light"] .op-manual-times {
  background: rgba(255,152,0,.06);
  border-color: rgba(245,124,0,.2);
}
[data-theme="light"] .op-manual-input {
  background: #fff; border-color: rgba(0,0,0,.15); color: var(--text-1);
}
[data-theme="light"] .op-manual-input:focus {
  border-color: #e65100;
  box-shadow: 0 0 0 2px rgba(245,124,0,.15);
}

/* ══════ Light theme: Inventory Panel ══════ */
[data-theme="light"] .inv-fs{background:var(--bg-card);border-color:var(--border);box-shadow:0 20px 60px rgba(0,0,0,.15)}
[data-theme="light"] .inv-fs-hd{background:var(--bg-card);border-bottom-color:var(--border)}
[data-theme="light"] .inv-fs-title{color:var(--text-1)}
[data-theme="light"] .inv-fs-stats{color:var(--text-2);background:rgba(0,0,0,.04)}
[data-theme="light"] .inv-fs-pot{color:var(--text-3);background:rgba(0,0,0,.04)}
[data-theme="light"] .inv-fs-close{color:#e11d48;text-shadow:none}
[data-theme="light"] .inv-fs-close:hover{color:#be123c}

/* Light: Tabs */
[data-theme="light"] .inv-tabs{background:var(--bg-card);border-bottom-color:var(--border)}
[data-theme="light"] .inv-tab{color:var(--text-2)}
[data-theme="light"] .inv-tab:hover{color:var(--text-1)}

/* Light: Field sub-tabs */
[data-theme="light"] .inv-field-tabs{border-bottom-color:var(--border)}
[data-theme="light"] .inv-field-tab{background:rgba(0,0,0,.03);border-color:var(--border);color:var(--text-3)}
[data-theme="light"] .inv-field-tab:hover{background:rgba(139,92,246,.06);border-color:rgba(139,92,246,.3);color:#7c3aed}
[data-theme="light"] .inv-field-tab-sel{background:rgba(139,92,246,.08);border-color:#7c3aed;color:#6d28d9}
[data-theme="light"] .inv-ft-qty{color:var(--text-3);background:rgba(0,0,0,.04)}
[data-theme="light"] .inv-field-tab-sel .inv-ft-qty{color:#7c3aed;background:rgba(139,92,246,.1)}

/* Light: Block chips */
[data-theme="light"] .inv-block-chip{background:rgba(0,0,0,.03);border-color:var(--border)}
[data-theme="light"] .inv-block-chip:hover{background:rgba(2,132,199,.06);border-color:rgba(2,132,199,.3)}
[data-theme="light"] .inv-bk-sel{background:rgba(2,132,199,.1);border-color:#0284c7}
[data-theme="light"] .inv-bk-label,[data-theme="light"] .inv-bk-letra{color:var(--text-1)}
[data-theme="light"] .inv-bk-sel .inv-bk-letra{color:#0284c7;text-shadow:none}
[data-theme="light"] .inv-bk-qty em{color:#0284c7}
[data-theme="light"] .inv-bk-qty{color:var(--text-3)}

/* Light: Plant table */
[data-theme="light"] .inv-tbl-hd{color:var(--text-1);border-bottom-color:var(--border)}
[data-theme="light"] .inv-tbl-header{color:var(--text-3);background:var(--bg-card);border-bottom-color:var(--border)}
[data-theme="light"] .inv-tbl-row{--inv-grid:rgba(0,0,0,.1);border-bottom-color:rgba(0,0,0,.1)}
[data-theme="light"] .inv-tbl{border-top-color:rgba(0,0,0,.1)}
[data-theme="light"] .inv-c-memo{color:var(--text-3,#64748b)}
[data-theme="light"] .inv-c-name{color:var(--text-1)}
[data-theme="light"] .inv-c-loc{color:var(--text-2)}
[data-theme="light"] .inv-c-size{color:var(--text-2)}
[data-theme="light"] .inv-c-qty{color:var(--text-1)}
[data-theme="light"] .inv-c-vend{color:#0284c7;text-shadow:none}
[data-theme="light"] .inv-c-act-btn{background:#16a34a;border-color:#22c55e;color:#fff}
[data-theme="light"] .inv-c-act-btn:hover{background:#15803d}
[data-theme="light"] .inv-c-act-btn.inv-ptm-reserved{background:#7c3aed;border-color:#a78bfa;color:#fff}
[data-theme="light"] .inv-row-failing{background:rgba(239,68,68,.1);box-shadow:inset 4px 0 0 #ef4444}
[data-theme="light"] .inv-tbl-row.inv-row-reserved{background:rgba(148,163,184,.16);box-shadow:inset 4px 0 0 #94a3b8}
[data-theme="light"] .inv-row-ipm{background:rgba(168,85,247,.1);box-shadow:inset 4px 0 0 #a855f7}
[data-theme="light"] .inv-row-treatment{background:rgba(245,158,11,.12);box-shadow:inset 4px 0 0 #f59e0b}
[data-theme="light"] .inv-row-week{background:rgba(56,189,248,.12);box-shadow:inset 4px 0 0 #38bdf8}
[data-theme="light"] .inv-row-hold{background:rgba(245,158,11,.06)}

/* Light: Sort headers */
[data-theme="light"] .inv-ms-hdr{border-bottom-color:var(--border)}
[data-theme="light"] .inv-ms-h{color:var(--text-3)}

/* Light: Mission cards */
[data-theme="light"] .inv-mission-card{background:var(--bg-1);border-color:var(--border)}
[data-theme="light"] .inv-mc-type{background:rgba(0,0,0,.05);color:var(--text-2)}
[data-theme="light"] .inv-mc-title{color:var(--text-1)}
[data-theme="light"] .inv-mc-desc{color:var(--text-2)}
[data-theme="light"] .inv-mc-det{color:var(--text-2)}
[data-theme="light"] .inv-mc-assignee{color:#2563eb}
[data-theme="light"] .inv-mc-edit{background:rgba(59,130,246,.06);color:#2563eb;border-color:rgba(59,130,246,.25)}
[data-theme="light"] .inv-mc-edit:hover{background:rgba(59,130,246,.12);border-color:#3b82f6}
[data-theme="light"] .inv-mc-dismiss{background:rgba(239,68,68,.06);color:#dc2626;border-color:rgba(239,68,68,.2)}
[data-theme="light"] .inv-mc-dismiss:hover{background:rgba(239,68,68,.12);border-color:#ef4444}

/* Light: Mission filter chips */
[data-theme="light"] .inv-mf-chip{border-color:var(--border);background:rgba(0,0,0,.03);color:var(--text-2)}
[data-theme="light"] .inv-mf-chip:hover{background:rgba(0,0,0,.06);color:var(--text-1)}
[data-theme="light"] .inv-mf-bar{border-bottom-color:rgba(0,0,0,.06)}

/* Light: History cards */
[data-theme="light"] .inv-hist-card{background:var(--bg-1);border-color:var(--border)}

/* Light: Completion & Create-mission dialog */
[data-theme="light"] .inv-cd-box{background:var(--bg-card);border-color:var(--border);box-shadow:0 12px 40px rgba(0,0,0,.12)}
[data-theme="light"] .inv-cm-plant-card{background:rgba(0,0,0,.03);border-color:var(--border)}
[data-theme="light"] .inv-cm-footer{border-top-color:var(--border)}
[data-theme="light"] .inv-cm-act{background:rgba(0,0,0,.03);border-color:var(--border);color:var(--text-2)}
[data-theme="light"] .inv-cm-act:hover{border-color:rgba(59,130,246,.3);background:rgba(59,130,246,.04)}
[data-theme="light"] .inv-cm-act-sel{background:rgba(59,130,246,.08);border-color:#3b82f6;color:#2563eb}
[data-theme="light"] .inv-cm-pri{background:rgba(0,0,0,.03);border-color:var(--border);color:var(--text-2)}
[data-theme="light"] .inv-cm-pri:hover{border-color:rgba(245,158,11,.3)}
[data-theme="light"] .inv-cm-otro-input{background:#fff;border-color:var(--border);color:var(--text-1)}
[data-theme="light"] .inv-cm-worker{background:#fff;border-color:var(--border);color:var(--text-1)}
[data-theme="light"] .inv-cm-worker option{background:#fff;color:var(--text-1)}
[data-theme="light"] .inv-cd-res{background:rgba(0,0,0,.03);border-color:var(--border);color:var(--text-3)}
[data-theme="light"] .inv-cd-res:hover{border-color:rgba(34,197,94,.3)}
[data-theme="light"] .inv-cd-res-sel{background:rgba(34,197,94,.1);border-color:#16a34a;color:#15803d}
[data-theme="light"] .inv-cd-notes{background:#fff;border-color:var(--border);color:var(--text-1)}
[data-theme="light"] .inv-cd-cancel{background:#fee2e2;border-color:#ef4444;color:#dc2626}

/* Light: Pickup tab */
[data-theme="light"] .inv-pk-table{border-color:var(--border)}
[data-theme="light"] .inv-pk-row{border-bottom-color:rgba(0,0,0,.06)}
[data-theme="light"] .inv-pk-row-hd{background:rgba(0,0,0,.03);color:var(--text-3)}
[data-theme="light"] .inv-pk-input{background:#fff;border-color:var(--border);color:var(--text-1)}
[data-theme="light"] .inv-pk-notes{background:#fff;border-color:var(--border);color:var(--text-1)}
[data-theme="light"] .inv-pk-hist-title{color:var(--text-2);border-top-color:var(--border)}
[data-theme="light"] .inv-pk-hist-card{background:var(--bg-1);border-color:var(--border)}
[data-theme="light"] .inv-pk-hist-date{color:var(--text-1)}
[data-theme="light"] .inv-pk-hist-by{color:#2563eb}
[data-theme="light"] .inv-pk-eq{color:var(--text-3)}
[data-theme="light"] .inv-pk-less{background:rgba(239,68,68,.08);color:#dc2626}
[data-theme="light"] .inv-pk-more{background:rgba(59,130,246,.08);color:#2563eb}

/* Light: Variety comparison modal */
[data-theme="light"] .variety-modal-box{background:var(--bg-card);border-color:var(--border)}
[data-theme="light"] .variety-modal-hdr{border-bottom-color:var(--border)}
[data-theme="light"] .variety-modal-title{color:var(--text-1)}
[data-theme="light"] .variety-modal-close{color:#e11d48;text-shadow:none}
[data-theme="light"] .variety-modal-close:hover{background:rgba(225,29,72,0.08);color:#be123c}
[data-theme="light"] .variety-summary{color:var(--text-2);background:rgba(0,0,0,.03)}
[data-theme="light"] .variety-tbl-hdr{background:rgba(0,0,0,.03);color:var(--text-3)}
[data-theme="light"] .variety-tbl-row{border-bottom-color:rgba(0,0,0,.05);color:var(--text-2)}
[data-theme="light"] .vt-current{background:rgba(124,58,237,.06)}
[data-theme="light"] .vt-field{color:#2563eb}
[data-theme="light"] .vt-loc{color:var(--text-2)}
[data-theme="light"] .vt-pd{color:#7c3aed}

/* Light: Cross-ref badge */
[data-theme="light"] .inv-xref-badge{background:rgba(124,58,237,.08);color:#7c3aed;border-color:rgba(124,58,237,.25)}
[data-theme="light"] .inv-xref-badge:hover{background:rgba(124,58,237,.15);color:#6d28d9;border-color:#7c3aed}

/* Light: Orders expansion */
[data-theme="light"] .inv-c-vend-has:hover{color:#0369a1}
[data-theme="light"] .inv-c-vend-open{color:#0369a1!important}
[data-theme="light"] .inv-orders-row{background:rgba(0,0,0,.02);border-color:var(--border)}
[data-theme="light"] .inv-orders-hdr{color:var(--text-3);border-bottom-color:var(--border)}
[data-theme="light"] .inv-orders-item{color:var(--text-2);border-bottom-color:rgba(0,0,0,.05)}
[data-theme="light"] .inv-ord-shipped{opacity:.45}
[data-theme="light"] .inv-ord-urgent{background:rgba(239,68,68,.06)}
[data-theme="light"] .inv-ord-pri{color:#d97706}
[data-theme="light"] .inv-ord-qty{color:#2563eb}
[data-theme="light"] .inv-ord-id{color:var(--text-3)}
[data-theme="light"] .inv-ord-fob{color:#7c3aed}
[data-theme="light"] .inv-mc-det-urgent{background:rgba(239,68,68,.1);color:#dc2626}

/* ══════ Landscape: Full Inventory Panel ══════ */
@media(max-height:500px){
  .inv-fs{height:100vh;height:100dvh;border-radius:0}
  .inv-fs-hd{padding:6px 12px}
  .inv-fs-title{font-size:15px}
  .inv-fs-stats,.inv-fs-cap,.inv-fs-pot,.inv-fs-week{font-size:10px;padding:2px 6px}
  .inv-fs-close{font-size:22px}
  .inv-tabs{padding:0 8px;gap:0}
  .inv-tab{font-size:12px;padding:5px 10px}
  .inv-tab-body{padding:8px 12px}
  .inv-field-tabs{padding:0 0 6px;margin-bottom:8px;gap:3px}
  .inv-field-tab{padding:4px 10px;font-size:11px}
  .inv-fs-blocks{gap:4px;margin-bottom:8px}
  .inv-block-chip{padding:5px 9px;border-radius:8px;min-width:48px}
  .inv-bk-letra{font-size:18px}
  .inv-bk-letra-larga{font-size:11.5px}
  .inv-bk-todas{font-size:14px}
  .inv-bk-qty{font-size:9.5px}
  .inv-bk-qty i{font-size:9px}
  .inv-tbl-hd{font-size:14px}
  .inv-tbl-header{font-size:10px;padding:5px 4px}
  .inv-tbl-row{padding:5px 4px;font-size:12px}
  .inv-c-qty,.inv-c-vend{font-size:13px}
  .inv-mission-card{padding:8px 10px;margin-bottom:6px;border-radius:8px}
  .inv-mc-title{font-size:13px;margin-bottom:3px}
  .inv-mc-desc{font-size:11px;margin-bottom:4px}
  .inv-mc-details{gap:4px 8px;margin-bottom:6px}
  .inv-mc-det{font-size:11px}
  .inv-mc-complete-btn,.inv-mc-edit,.inv-mc-dismiss{padding:5px 8px;font-size:11px}
  .inv-mf-bar{gap:4px;margin-bottom:8px;padding-bottom:6px}
  .inv-mf-chip{padding:3px 8px;font-size:10px}
  .inv-mf-toolbar{padding:4px 6px 3px;gap:4px}
  .inv-mf-toggle{padding:4px 8px;font-size:11px}
  .inv-mf-panel{padding:6px 8px}
  .inv-mf-section{padding:0 8px 0 0}
  .inv-mf-pri-btn,.inv-mf-cat-btn,.inv-mf-loc-btn{padding:3px 7px;font-size:10px}
  .inv-mf-loc-cnt{font-size:9px;padding:0 3px}
  .inv-ms-hdr{padding:4px 4px;margin-bottom:2px}
  .inv-ms-h{font-size:10px}
  .inv-hist-card{padding:8px 10px;margin-bottom:6px}
  .inv-hist-hd{margin-bottom:2px}
  .inv-hist-title{font-size:12px}
  .inv-hist-details{font-size:10px}
  .inv-pk-row{padding:5px 8px;font-size:11px}
  .inv-pk-input{width:60px;font-size:11px;padding:3px 4px}
  .inv-pk-footer{gap:6px;margin-bottom:10px}
  .inv-pk-notes{font-size:12px;padding:6px 8px}
  .inv-pk-register{padding:7px 14px;font-size:12px}
  .inv-pk-hist-title{margin:10px 0 6px;padding-top:8px;font-size:12px}
  .inv-pk-hist-card{padding:8px 10px;margin-bottom:6px}
  .inv-pk-hist-item{font-size:11px;padding:2px 6px}
  .inv-empty-state{padding:16px 12px;font-size:12px}
  .inv-orders-row{padding:4px 6px}
  .inv-orders-hdr{font-size:9px;gap:2px;padding:2px 4px}
  .inv-orders-item{font-size:10px;gap:2px;padding:2px 4px}
}

/* ── Zone Badges: light theme ── */
[data-theme="light"] .zb-badge {
  background: rgba(240, 242, 248, 0.95);
  border-color: rgba(0,0,0,0.12);
}
[data-theme="light"] .zb-badge:hover, [data-theme="light"] .zb-badge:active {
  opacity: 1;
  filter: brightness(1.05);
  transform: scale(calc(var(--badge-scale, 0.5) * 1.32));
  background: rgba(255,255,255,0.98);
  border-color: rgba(0,0,0,0.22);
  box-shadow: 0 4px 18px rgba(0,0,0,0.18);
  z-index: 20;
}

/* ── Mission Analytics (msa) ── */
.msa-view { padding: 8px 12px 32px; max-width: 1200px; margin: 0 auto; }
.msa-loading, .msa-error { text-align: center; padding: 60px 16px; color: var(--text-3); font-size: 1.05rem; }
.msa-spin { display: inline-block; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Header */
.msa-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.msa-title { font-size: 1.2rem; font-weight: 700; margin: 0; color: var(--text-1); }
.msa-period-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.msa-period-label { font-size: 0.8rem; color: var(--text-3); }
.msa-period-btn { background: var(--card-bg); border: 1px solid var(--border); color: var(--text-2); border-radius: 6px; padding: 3px 10px; font-size: 0.8rem; cursor: pointer; }
.msa-period-btn--active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Summary chips */
.msa-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 20px; }
.msa-chip { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.msa-chip-icon { font-size: 1.4rem; }
.msa-chip-val { font-size: 1.4rem; font-weight: 700; color: var(--text-1); }
.msa-chip-lbl { font-size: 0.72rem; color: var(--text-3); text-align: center; }

/* Section grid */
.msa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 680px) { .msa-grid { grid-template-columns: 1fr; } }
.msa-section { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.msa-section--wide { grid-column: 1 / -1; }
.msa-section-title { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); margin: 0 0 10px; }
.msa-nodata { color: var(--text-3); font-size: 0.85rem; text-align: center; padding: 20px 0; margin: 0; }

/* Team table */
.msa-table-wrap { overflow-x: auto; }
.msa-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.msa-table th { text-align: left; padding: 6px 10px; color: var(--text-3); font-weight: 600; font-size: 0.75rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.msa-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); color: var(--text-1); }
.msa-table tr:last-child td { border-bottom: none; }
.msa-worker-name { font-weight: 600; }
.msa-num { text-align: right; font-variant-numeric: tabular-nums; }
.msa-age { color: var(--text-3); font-size: 0.82rem; text-align: right; }
.msa-dim { opacity: 0.6; }

/* Bar chart */
.msa-bars { display: flex; flex-direction: column; gap: 6px; }
.msa-bar-row { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; }
.msa-bar-lbl { width: 38px; color: var(--text-3); text-align: right; flex-shrink: 0; }
.msa-bar-track { flex: 1; height: 10px; background: var(--border); border-radius: 5px; overflow: hidden; }
.msa-bar-fill { height: 100%; background: var(--accent); border-radius: 5px; transition: width .3s; }
.msa-bar-count { width: 28px; color: var(--text-2); font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* By-field */
.msa-field-list { display: flex; flex-direction: column; gap: 5px; }
.msa-field-row { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; }
.msa-field-name { width: 64px; color: var(--text-2); font-weight: 600; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msa-field-bar { height: 8px; }
.msa-field-count { width: 28px; color: var(--text-3); font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* Donut + legend */
.msa-type-wrap { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.msa-donut { width: 96px; height: 96px; flex-shrink: 0; }
.msa-type-legend { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.msa-legend-row { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; }
.msa-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.msa-legend-type { flex: 1; color: var(--text-2); text-transform: capitalize; }
.msa-legend-count { color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Backlog */
.msa-backlog { display: flex; flex-direction: column; gap: 10px; }
.msa-backlog--warn { border: 1px solid var(--warn, #f59e0b); border-radius: 8px; padding: 8px; }
.msa-backlog-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem; padding: 4px 0; border-bottom: 1px solid var(--border); }
.msa-backlog-row:last-child { border-bottom: none; }
.msa-backlog-total { font-weight: 600; color: var(--text-1); }
.msa-backlog-stuck { color: var(--warn, #f59e0b); }
/* New visual hero + stacked age bar */
.msa-bl-hero{display:flex;align-items:baseline;gap:8px;padding:2px 0}
.msa-bl-hero-val{font-size:2.1rem;font-weight:800;color:var(--text-1);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.msa-bl-hero-lbl{font-size:0.8rem;color:var(--text-3);font-weight:600}
.msa-bl-bar{display:flex;width:100%;height:10px;border-radius:6px;overflow:hidden;background:#ffffff08;border:1px solid #ffffff10}
.msa-bl-bar-seg{height:100%;transition:width .25s ease}
.msa-bl-seg--fresh{background:#22c55e}
.msa-bl-seg--week{background:#facc15}
.msa-bl-seg--mid{background:#fb923c}
.msa-bl-seg--old{background:#ef4444}
.msa-bl-legend{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:0.76rem;color:var(--text-3)}
.msa-bl-leg{display:inline-flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums}
.msa-bl-leg strong{color:var(--text-1);font-weight:700}
.msa-bl-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.msa-bl-leg--fresh .msa-bl-dot{background:#22c55e}
.msa-bl-leg--week  .msa-bl-dot{background:#facc15}
.msa-bl-leg--mid   .msa-bl-dot{background:#fb923c}
.msa-bl-leg--old   .msa-bl-dot{background:#ef4444}
.msa-bl-leg--old strong{color:#fca5a5}
.msa-bl-rows{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--border,#ffffff10);padding-top:4px}
.msa-age-warn{color:var(--danger,#ef4444);font-weight:700}
.msa-age-warn { color: var(--danger, #ef4444); font-weight: 700; }
.msa-chip--warn { background: var(--card-bg); border: 1px solid var(--warn, #f59e0b); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.msa-chip--warn .msa-chip-val { color: var(--warn, #f59e0b); }
.msa-rate-warn { color: var(--warn, #f59e0b) !important; font-weight: 700; }
.msa-today { display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 14px; font-size: 0.875rem; flex-wrap: wrap; }
.msa-today--zero { opacity: 0.6; }
.msa-today-label { font-weight: 700; color: var(--text-3); font-size: 0.78rem; text-transform: uppercase; letter-spacing: .04em; }
.msa-today-stat strong { color: var(--text-1); }
.msa-today-sep { color: var(--text-3); }

/* ── KPI hero — 3-up headline metrics ── */
.msa-hero{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px}
.msa-hero-kpi{position:relative;background:linear-gradient(135deg,#ffffff08,#ffffff03);border:1px solid #ffffff14;border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:2px;overflow:hidden;min-width:0}
.msa-hero-kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#3b82f6;border-top-left-radius:14px;border-bottom-left-radius:14px}
.msa-hero-kpi--rate.msa-hero--good::before{background:#22c55e}
.msa-hero-kpi--rate.msa-hero--ok::before{background:#0ea5e9}
.msa-hero-kpi--rate.msa-hero--warn::before{background:#f59e0b}
.msa-hero-kpi--rate.msa-hero--neutral::before{background:#475569}
.msa-hero-kpi--done::before{background:#22c55e}
.msa-hero-kpi--open::before{background:#f59e0b}
.msa-hero-val{font-size:2.1rem;font-weight:800;color:var(--text-1);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.msa-hero-val small{font-size:1.1rem;font-weight:700;color:var(--text-2);margin-left:1px}
.msa-hero-kpi--rate.msa-hero--good .msa-hero-val{color:#4ade80}
.msa-hero-kpi--rate.msa-hero--warn .msa-hero-val{color:#fbbf24}
.msa-hero-kpi--rate.msa-hero--neutral .msa-hero-val{color:var(--text-3)}
.msa-hero-lbl{font-size:0.78rem;font-weight:700;color:var(--text-1);margin-top:3px;letter-spacing:.01em}
.msa-hero-sub{font-size:0.7rem;color:var(--text-3);font-variant-numeric:tabular-nums}
.msa-chips--sec{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin-bottom:14px}
.msa-chips--sec .msa-chip{padding:7px 10px;flex-direction:row;align-items:center;gap:7px;border-radius:9px}
.msa-chips--sec .msa-chip-icon{font-size:1rem}
.msa-chips--sec .msa-chip-val{font-size:1rem}
.msa-chips--sec .msa-chip-lbl{font-size:0.7rem;text-align:left}
.msa-chip--muted{opacity:.7}
.msa-chip--disc{border-color:#ef444430}
.msa-chip--disc .msa-chip-val{color:#f87171}
.msa-chip--retail{border-color:#fbbf2455;background:rgba(251,191,36,.08)}
.msa-chip--retail .msa-chip-val{color:#fbbf24}
/* Lente de calidad de producción + roll-up por categoría */
.msa-bar-fill--cat-sanidad{background:#c084fc}
.msa-bar-fill--cat-cultivo{background:#4ade80}
.msa-bar-fill--cat-ventas{background:#fbbf24}
.msa-bar-fill--cat-gestion{background:#60a5fa}
.msa-bar-fill--retail{background:#fbbf24}
.msa-bar-fill--landscape{background:#4ade80}
.msa-bar-fill--poor{background:#f87171}
.msa-quality-subhd{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-2);margin:14px 0 8px}
.msa-quality-subhd:first-child{margin-top:0}
.msa-quality-foot{font-size:.7rem;margin-top:12px}
.msw-stat--retail{color:#fbbf24;font-weight:600}
@media (max-width:680px){
  .msa-hero{grid-template-columns:1fr 1fr;gap:8px}
  .msa-hero-kpi{padding:11px 12px}
  .msa-hero-val{font-size:1.7rem}
  .msa-hero-kpi--rate{grid-column:1 / -1}
}
@media (max-width:380px){
  .msa-hero{grid-template-columns:1fr}
  .msa-hero-kpi--rate{grid-column:auto}
}

/* ── Unified status banner — HOY + Pendientes ── */
.msa-banner{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:9px 14px;background:#ffffff05;border:1px solid #ffffff10;border-radius:10px;margin-bottom:14px;font-size:0.85rem}
.msa-banner--zero{opacity:.65}
.msa-bnr-block{display:flex;align-items:center;gap:8px;min-width:0}
.msa-bnr-label{font-weight:700;color:var(--text-3);font-size:0.7rem;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.msa-bnr-vals{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;color:var(--text-2)}
.msa-bnr-vals strong{color:var(--text-1);font-variant-numeric:tabular-nums}
.msa-bnr-dim{color:var(--text-3);font-size:0.78rem}
.msa-bnr-today .msa-bnr-vals strong{font-size:1.05rem}
.msa-bnr-pri{display:inline-flex;align-items:center;gap:4px;font-weight:600;white-space:nowrap}
.msa-bnr-pri--alta strong{color:#f87171}
.msa-bnr-pri--media strong{color:#fcd34d}
.msa-bnr-pri--baja strong{color:#93c5fd}
.msa-bnr-pri--unas strong{color:var(--text-2)}
.msa-bnr-pri--unas{color:var(--text-3);font-size:0.78rem}
@media (max-width:680px){
  .msa-banner{padding:8px 10px;gap:6px 14px;font-size:0.8rem}
  .msa-bnr-block{width:100%}
  .msa-bnr-today{border-bottom:1px solid #ffffff0a;padding-bottom:6px}
}
.msa-field-last { width: 28px; color: var(--text-3); font-size: 0.78rem; text-align: right; flex-shrink: 0; }
.msa-field-stale .msa-field-name { color: var(--warn, #f59e0b); }
.msa-inactive-fields { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 0.8rem; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.msa-inactive-label { color: var(--warn, #f59e0b); font-weight: 600; }
.msa-inactive-tag { background: var(--border); color: var(--text-2); border-radius: 6px; padding: 2px 8px; font-size: 0.78rem; }

/* ── Priority strip (global) ── */
.msw-pri-strip{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;padding:8px 14px;background:#ffffff05;border:1px solid #ffffff0e;border-radius:10px;margin-bottom:14px;font-size:0.85rem}
.msw-ps-item{display:flex;align-items:center;gap:5px;font-weight:600;color:var(--text-2)}
.msw-ps-item strong{font-size:1rem;color:var(--text-1)}
.msw-ps-alta strong{color:#f87171}
.msw-ps-media strong{color:#fcd34d}
.msw-ps-baja strong{color:#93c5fd}
.msw-ps-unas strong{color:var(--text-3)}
.msw-ps-sep{color:var(--text-3);font-size:1.1rem}

/* ── Worker section container ── */
.msw-section{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:16px}
.msw-workers{display:flex;flex-direction:column;gap:6px}

/* ── Worker accordion ── */
.msw-worker{border:1px solid #ffffff10;border-radius:10px;overflow:hidden;transition:border-color .15s}
.msw-worker[open]{border-color:#3b82f640}
.msw-worker--unassigned{border-color:#f59e0b20}
.msw-worker--unassigned[open]{border-color:#f59e0b60}

.msw-worker-hd{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;background:#ffffff05;list-style:none;user-select:none;min-height:48px}
.msw-worker-hd::-webkit-details-marker{display:none}
.msw-worker-hd:hover{background:#ffffff0c}
.msw-worker[open]>.msw-worker-hd{background:#3b82f60e;border-bottom:1px solid #3b82f620}
.msw-worker--unassigned[open]>.msw-worker-hd{background:#f59e0b08;border-bottom:1px solid #f59e0b20}

.msw-medal{font-size:1.3rem;width:32px;text-align:center;flex-shrink:0;line-height:1;color:var(--text-3);font-weight:800}
.msw-hd-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.msw-worker-name{font-size:0.95rem;font-weight:700;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msw-zones-row{display:flex;flex-wrap:wrap;gap:3px}
.msw-zone{background:#1e3a5a;color:#7db8e8;border-radius:4px;padding:1px 6px;font-size:0.72rem;font-weight:600;white-space:nowrap}
.msw-zone--more{background:#ffffff10;color:var(--text-3)}
.msw-dim{color:var(--text-3);font-size:0.8rem}

.msw-hd-stats{display:flex;align-items:center;gap:10px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
.msw-stat{font-size:0.82rem;color:var(--text-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.msw-stat--pend{color:#fbbf24;font-weight:700}
.msw-stat--done{color:#4ade80;font-weight:700}
.msw-stat--partial{color:#fbbf24;font-weight:700}
.msw-stat--helper{color:#7dd3fc;font-weight:700}
.msw-stat--auto{color:#818cf8;font-weight:600}
.msw-stat--plants{color:#34d399;font-weight:600}
.msw-stat--disc{color:#f87171;font-weight:700}
.msw-stat--rem{color:var(--text-3);font-weight:600;opacity:.75}
.msw-stat--warn{color:var(--warn,#f59e0b)!important;font-weight:700}
.msw-stat--last{color:var(--text-3);font-size:0.75rem}
.msw-chevron{color:var(--text-3);font-size:0.75rem;flex-shrink:0;transition:transform .2s}
.msw-worker[open] .msw-chevron{transform:rotate(180deg)}

/* ── Worker body ── */
.msw-worker-body{padding:8px 12px 12px}

/* ── Mission table (compact) ── */
.msw-table-wrap{overflow-x:auto;border-radius:6px;border:1px solid #ffffff0e}
.msw-mis-table{width:100%;border-collapse:collapse;font-size:0.8rem}
.msw-mis-table thead th{background:#ffffff06;color:var(--text-3);font-weight:700;font-size:0.7rem;text-transform:uppercase;letter-spacing:.04em;padding:7px 10px;border-bottom:1px solid #ffffff10;white-space:nowrap;text-align:left;position:sticky;top:0;z-index:1}
.msw-mis-table thead th:first-child{width:32px;text-align:center}
.msw-mis-row td{padding:9px 10px;border-bottom:1px solid #ffffff0a;vertical-align:middle;color:var(--text-1)}
.msw-mis-row:last-child td{border-bottom:none}
.msw-mis-row:hover td{background:#ffffff08}
.msw-mis-row.msw-row--alta td{border-left:3px solid #ef4444aa}
.msw-mis-row.msw-row--media td{border-left:3px solid #f59e0b66}
.msw-mis-row.msw-row--baja td{border-left:3px solid #22c55e44}
.msw-mis-row.msw-row--alta td:first-child{border-left:none}
.msw-mis-row.msw-row--media td:first-child{border-left:none}
.msw-mis-row.msw-row--baja td:first-child{border-left:none}
.msw-mis-pri{text-align:center;width:28px;font-size:0.95rem}
.msw-mis-name{vertical-align:top;max-width:280px}
.msw-mis-field{color:var(--text-2);white-space:nowrap;font-size:0.78rem}
.msw-mis-loc{white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis}
.msw-loc-tag{font-size:0.75rem;color:#7dd3fc;background:#0ea5e920;padding:1px 6px;border-radius:4px}
.msw-loc-pin{display:inline-flex;align-items:center;gap:4px;font-size:0.76rem;color:#7dd3fc;background:#0ea5e918;padding:2px 7px;border-radius:10px;border:1px solid #0ea5e928;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msw-loc-pin--field{color:#fbbf24;background:#f59e0b14;border-color:#f59e0b25}
.msw-th-loc{min-width:120px}
.msw-row-hidden{display:none !important}
.msw-mis-age{white-space:nowrap;text-align:center}
.msw-mis-act{white-space:nowrap;text-align:right}
.msw-empty-cell{padding:14px 8px;text-align:center;color:var(--text-3);font-size:0.82rem}

/* ── Filter chip bar (above table, in .msw-table-wrap) ── */
.msw-flt-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:7px 8px;background:#ffffff04;border-bottom:1px solid #ffffff0c;position:relative}
.msw-flt-chip-wrap{position:relative}
.msw-flt-chip{display:inline-flex;align-items:center;gap:5px;background:#ffffff08;border:1px solid #ffffff14;color:var(--text-1);border-radius:14px;padding:4px 10px;font-size:0.76rem;font-weight:600;cursor:pointer;line-height:1.2;transition:background .15s,border-color .15s}
.msw-flt-chip:hover{background:#ffffff12;border-color:#ffffff22}
.msw-flt-chip--active{background:#3b82f622;border-color:#3b82f680;color:#dbeafe}
.msw-flt-chip--active:hover{background:#3b82f635}
.msw-flt-count{font-size:0.7rem;color:#fbbf24;font-weight:700}
.msw-flt-caret{font-size:0.65rem;opacity:.7}
.msw-flt-pop{position:absolute;top:calc(100% + 4px);left:0;z-index:50;background:#0d1c2a;border:1px solid #3b82f640;border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.55),0 0 0 1px #3b82f615;min-width:200px;max-width:280px;padding:6px;display:flex;flex-direction:column;gap:4px}
.msw-flt-pop[hidden]{display:none}
.msw-flt-pop-hd{display:flex;gap:5px;padding:2px 2px 5px;border-bottom:1px solid #ffffff0e}
.msw-flt-pop-list{display:flex;flex-direction:column;gap:1px;max-height:280px;overflow-y:auto}
.msw-flt-row{display:flex;align-items:center;gap:7px;padding:4px 6px;border-radius:5px;cursor:pointer;font-size:0.78rem;color:var(--text-1);user-select:none}
.msw-flt-row:hover{background:#ffffff08}
.msw-flt-cb{width:13px;height:13px;accent-color:#3b82f6;cursor:pointer;flex-shrink:0;margin:0}
.msw-flt-row span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msw-flt-mini{flex:1;background:#ffffff06;border:1px solid #ffffff12;color:var(--text-2);border-radius:5px;padding:3px 8px;font-size:0.72rem;cursor:pointer;font-weight:600}
.msw-flt-mini:hover{background:#3b82f620;border-color:#3b82f650;color:#dbeafe}
.msw-flt-clear{background:#ef444418;border:1px solid #ef444440;color:#fca5a5;border-radius:14px;padding:4px 10px;font-size:0.74rem;font-weight:700;cursor:pointer;line-height:1.2}
.msw-flt-clear:hover{background:#ef444428;color:#fff}
.msw-flt-sep{width:1px;height:18px;background:#ffffff16;margin:0 3px}
.msw-flt-global{background:#ffffff08;border:1px solid #ffffff18;color:var(--text-2);border-radius:13px;padding:4px 10px;font-size:0.72rem;font-weight:600;cursor:pointer;line-height:1.2}
.msw-flt-global:hover{background:#ffffff16;color:var(--text-1)}
.msw-flt-print{background:#22c55e16;border:1px solid #22c55e44;color:#86efac;border-radius:13px;padding:4px 10px;font-size:0.72rem;font-weight:700;cursor:pointer;line-height:1.2}
.msw-flt-print:hover{background:#22c55e2a;color:#fff}
.msw-flt-summary{font-size:0.72rem;color:var(--text-3);margin-left:auto;font-weight:600}
@media (max-width:680px){
  .msw-flt-bar{padding:6px}
  .msw-flt-chip{padding:4px 8px;font-size:0.72rem}
  .msw-flt-pop{min-width:180px;max-width:calc(100vw - 32px)}
  .msw-flt-summary{width:100%;margin-left:0;text-align:right}
}

/* ── Age tags ── */
.msw-age{display:inline-block;padding:1px 7px;border-radius:12px;font-size:0.72rem;font-weight:700;white-space:nowrap}
.msw-age--unknown{color:var(--text-3);background:transparent}
.msw-age--new{background:#16a34a20;color:#4ade80;border:1px solid #16a34a30}
.msw-age--ok{background:#0891b220;color:#38bdf8;border:1px solid #0891b230}
.msw-age--mid{background:#d9770620;color:#fb923c;border:1px solid #d9770630}
.msw-age--old{background:#dc262620;color:#f87171;border:1px solid #dc262630;font-weight:900}

/* ── Action buttons in table ── */
.msw-edit,.msw-del{background:#ffffff08;border:1px solid #ffffff14;border-radius:5px;padding:3px 7px;font-size:0.82rem;cursor:pointer;transition:background .15s,border-color .15s;line-height:1}
.msw-edit:hover{background:#3b82f625;border-color:#3b82f660}
.msw-del:hover{background:#ef444425;border-color:#ef444460}
.msw-edit:disabled,.msw-del:disabled{opacity:.4;cursor:not-allowed}

/* ── Edit overlay (floating modal) ── */
#msw-edit-overlay{position:fixed;inset:0;z-index:9900;display:flex;align-items:center;justify-content:center;padding:16px}
.msw-ov-bg{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(3px)}
.msw-ov-box{position:relative;background:#0d1c2a;border:1px solid #3b82f640;border-radius:14px;padding:20px;width:100%;max-width:420px;box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 0 1px #3b82f620}
.msw-ov-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-weight:700;color:var(--text-1);font-size:0.95rem}
.msw-ov-close{background:transparent;border:none;color:var(--text-3);font-size:1.3rem;cursor:pointer;line-height:1;padding:2px 6px;border-radius:4px}
.msw-ov-close:hover{background:#ffffff10;color:#fff}
.msw-ov-plant{color:#60a5fa;font-weight:600;font-size:0.88rem;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid #ffffff10}
.msw-ov-field{color:var(--text-3);font-size:0.8rem}
.msw-ov-form{display:flex;flex-direction:column;gap:10px}
.msw-form-row{display:flex;align-items:center;gap:10px}
.msw-form-row label{font-size:0.78rem;color:var(--text-3);width:88px;flex-shrink:0;font-weight:600;text-align:right}
.msw-form-row select,.msw-form-row input{flex:1;background:#081420;border:1px solid #3a5a7a;border-radius:7px;color:var(--text-1);padding:6px 10px;font-size:0.87rem;outline:none;min-width:0}
.msw-form-row select:focus,.msw-form-row input:focus{border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f625}
.msw-form-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}
.msw-btn-cancel{background:transparent;border:1px solid #ffffff20;color:var(--text-3);border-radius:7px;padding:7px 16px;font-size:0.85rem;cursor:pointer}
.msw-btn-cancel:hover{background:#ffffff10}
.msw-btn-save{background:linear-gradient(135deg,#1d4ed8,#2563eb);border:none;color:#fff;border-radius:7px;padding:7px 18px;font-size:0.85rem;font-weight:700;cursor:pointer;box-shadow:0 2px 10px #1d4ed840}
.msw-btn-save:hover{background:linear-gradient(135deg,#2563eb,#3b82f6)}
.msw-btn-save:disabled{opacity:.45;cursor:not-allowed}

/* ── Mission table — grid borders & column sizing (5 cols) ── */
.msw-mis-table thead th:not(:last-child){border-right:1px solid #ffffff10}
.msw-mis-row td:not(:last-child){border-right:1px solid #ffffff07}
.msw-th-pri{width:36px;text-align:center}
.msw-th-name{min-width:180px}
.msw-th-type{min-width:110px}
.msw-mis-type{white-space:nowrap;vertical-align:middle}
.msw-th-age{width:64px;text-align:center}
.msw-th-act{width:70px;text-align:right}

/* ── Plant name + subloc + description in row ── */
.msw-plant-name{font-weight:800;font-size:0.92rem;color:var(--text-1);line-height:1.3}
.msw-mis-subloc{font-size:0.75rem;color:#7dd3fc;margin-top:2px;font-weight:600}
.msw-mis-desc{font-size:0.75rem;color:var(--text-3);margin-top:3px;font-style:italic;line-height:1.3}

/* ── Type chips — large, icon-forward ── */
.msw-type-chip{display:inline-flex;align-items:center;gap:3px;padding:3px 9px;border-radius:6px;font-size:0.78rem;font-weight:700;background:#1e3a5a;color:#93c5fd;border:1px solid #3b82f635;margin:1px 2px 1px 0;white-space:nowrap;line-height:1.4}
.msw-type-custom{background:#2d1f4a;color:#c4b5fd;border-color:#7c3aed35}

/* ── Rank badge (replaces medals — consistent numbering) ── */
.msw-rank{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:28px;border-radius:8px;font-size:0.72rem;font-weight:800;background:#ffffff08;color:var(--text-3);border:1px solid #ffffff12;flex-shrink:0;padding:0 5px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.msw-rank--gold{background:#fbbf2418;color:#fbbf24;border-color:#fbbf2440;font-size:0.78rem}
.msw-rank--silver{background:#e2e8f018;color:#cbd5e1;border-color:#e2e8f030}
.msw-rank--bronze{background:#d9770618;color:#fb923c;border-color:#d9770640}
.msw-rank--unas{background:#f59e0b10;color:#f59e0b;border-color:#f59e0b30;font-size:0.9rem}
.msw-rank--all{background:#3b82f618;color:#93c5fd;border-color:#3b82f640;font-size:0.9rem}
.msw-worker--allopen>summary{border-left:2px solid #3b82f655}

/* ── Inactive worker — readable but subdued ── */
.msw-worker--inactive{border-style:dashed;border-color:#ffffff08}
.msw-worker--inactive>.msw-worker-hd{background:#ffffff02}
.msw-worker--inactive .msw-worker-name{color:var(--text-2)}
.msw-worker--inactive .msw-hd-stats{opacity:0.5}
.msw-zone-none{font-size:0.75rem;color:var(--text-3);font-style:italic}
.msw-no-activity{padding:10px 12px;font-size:0.82rem;color:var(--text-3);font-style:italic;text-align:center}
/* ── History section (collapsed, expandable) ── */
.msw-hist-btn{background:transparent;border:1px solid #ffffff12;color:var(--text-3);border-radius:6px;padding:4px 10px;font-size:0.75rem;cursor:pointer;transition:background .1s,color .1s;margin-top:8px}
.msw-hist-btn:hover{background:#ffffff08;color:var(--text-2)}
.msw-hist-wrap{margin-top:8px;border-top:1px solid #ffffff0a;padding-top:8px}
.msw-hist-loading{font-size:0.78rem;color:var(--text-3);padding:6px 0;font-style:italic}
.msw-hist-list{display:flex;flex-direction:column;gap:2px;max-height:280px;overflow-y:auto}
.msw-hist-list::-webkit-scrollbar{width:4px}.msw-hist-list::-webkit-scrollbar-thumb{background:#ffffff20;border-radius:2px}
.msw-hist-row{display:grid;grid-template-columns:70px 1fr 90px 48px;gap:6px;align-items:center;padding:5px 6px;border-radius:5px;background:#ffffff04;font-size:0.76rem}
.msw-hist-row:hover{background:#ffffff08}
.msw-hist-date{color:var(--text-3);font-size:0.7rem;white-space:nowrap}
.msw-hist-title{color:var(--text-1);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msw-hist-sub{color:var(--text-3);font-size:0.68rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msw-hist-field{color:var(--text-2);font-size:0.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msw-hist-result--ok{color:#4ade80;font-weight:700;font-size:0.7rem;white-space:nowrap}
.msw-hist-result--dis{color:#f87171;font-size:0.7rem;white-space:nowrap}
.msw-hist-qty{color:#818cf8;font-size:0.7rem;white-space:nowrap;text-align:right}
.msw-hist-empty{font-size:0.78rem;color:var(--text-3);font-style:italic;padding:8px 0;text-align:center}

/* ── Section header with manage button ── */
.msw-section-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.msw-total-badge{display:inline-block;margin-left:8px;font-size:0.72rem;font-weight:700;background:#1e3a5a;color:#7db8e8;border-radius:20px;padding:2px 10px;vertical-align:middle}
.msw-manage-btn{background:#1e3a5a;border:1px solid #3b82f640;color:#7db8e8;border-radius:7px;padding:4px 12px;font-size:0.78rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s;flex-shrink:0}
.msw-manage-btn:hover{background:#2a4a6a;border-color:#3b82f680}
.msw-hd-btns{display:flex;align-items:center;gap:6px;flex-shrink:0}
.msw-new-btn{background:#14532d;border:1px solid #22c55e40;color:#86efac;border-radius:7px;padding:4px 12px;font-size:0.78rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s}
.msw-new-btn:hover{background:#166534;border-color:#22c55e80}
.msw-complete{background:#22c55e0f;border:1px solid #22c55e25;border-radius:5px;padding:3px 7px;font-size:0.82rem;cursor:pointer;transition:background .15s,border-color .15s;line-height:1}
.msw-complete:hover{background:#22c55e25;border-color:#22c55e60}
.msw-complete:disabled{opacity:.4;cursor:not-allowed}
.msw-mis-qa{padding:4px 6px;min-width:100px}
.msw-th-qa{font-size:0.68rem;color:var(--text-3);font-weight:700;letter-spacing:.5px;white-space:nowrap;padding:6px 8px}
.msw-quick-assign{background:#22c55e12;border:1px solid #22c55e40;border-radius:8px;color:#bbf7d0;font-size:0.82rem;font-weight:600;padding:7px 9px;cursor:pointer;width:100%;min-width:128px;font-family:inherit;transition:border-color .15s,background .15s}
.msw-quick-assign:hover,.msw-quick-assign:focus{border-color:#22c55e80;background:#22c55e1f;outline:none}
.msw-quick-assign:has(option:checked[value=""]){color:#86efac;background:#22c55e0e;border-style:dashed}
.msw-quick-assign option{background:#1e1e2e;color:#e0e0e0}
.msw-quick-assign:disabled{opacity:.5;cursor:wait}
.msw-cr-input{margin-bottom:10px;display:block}

/* ── Worker manager modal ── */
.msw-mg-box{max-width:440px!important}
.msw-mg-hint{font-size:0.78rem;color:var(--text-3);margin-bottom:12px;padding:8px 10px;background:#ffffff05;border-radius:6px;border:1px solid #ffffff0a;line-height:1.5}
.msw-mg-list{display:flex;flex-direction:column;gap:3px;max-height:320px;overflow-y:auto;margin-bottom:10px;padding-right:2px}
.msw-mg-list::-webkit-scrollbar{width:4px}
.msw-mg-list::-webkit-scrollbar-thumb{background:#ffffff20;border-radius:2px}
.msw-mg-row{display:flex;align-items:center;gap:8px;padding:7px 10px;background:#ffffff06;border-radius:6px;border:1px solid #ffffff0e;transition:background .1s}
.msw-mg-row:hover{background:#ffffff0c}
.msw-mg-num{font-size:0.7rem;font-weight:800;color:var(--text-3);width:20px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums}
.msw-mg-name{flex:1;font-size:0.88rem;color:var(--text-1);font-weight:500}
.msw-mg-del{background:transparent;border:1px solid transparent;color:#ef444480;cursor:pointer;font-size:0.8rem;padding:2px 7px;border-radius:5px;line-height:1;transition:background .1s,color .1s,border-color .1s;flex-shrink:0}
.msw-mg-del:hover{background:#ef444420;color:#ef4444;border-color:#ef444440}
.msw-mg-empty{padding:16px;text-align:center;color:var(--text-3);font-size:0.85rem;font-style:italic}
.msw-mg-add-row{display:flex;gap:8px;margin-top:2px}
.msw-mg-input{flex:1;background:#081420;border:1px solid #3a5a7a;border-radius:7px;color:var(--text-1);padding:7px 10px;font-size:0.87rem;outline:none;min-width:0}
.msw-mg-input:focus{border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f625}
.msw-mg-add-btn{background:#1e3a5a;border:1px solid #3b82f640;color:#7db8e8;border-radius:7px;padding:7px 13px;font-size:0.82rem;font-weight:700;cursor:pointer;white-space:nowrap}
.msw-mg-add-btn:hover{background:#2a4a6a}
.msw-mg-count{font-size:0.74rem;color:var(--text-3);text-align:right;margin-top:6px}

/* ── Worker name row ── */
.msw-worker-name-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.msw-orphan-tag{font-size:0.65rem;font-weight:700;color:var(--text-3);background:#ffffff0a;border:1px solid #ffffff18;border-radius:4px;padding:1px 5px;white-space:nowrap}

/* ── Centralized team manager modal — full-screen on desktop ── */
.msw-tm-box{
  position:fixed!important;
  top:50%!important;left:50%!important;
  transform:translate(-50%,-50%)!important;
  width:min(1100px,96vw)!important;
  max-width:none!important;
  max-height:92vh!important;
  max-height:92dvh!important;
  display:flex;flex-direction:column;
}
.msw-tm-box .inv-cm-scroll{flex:1;overflow-y:auto;overflow-x:hidden;min-height:0}
.msw-tm-list{display:flex;flex-direction:column;gap:6px;max-height:none;overflow-y:visible;padding-right:2px}
.msw-tm-list::-webkit-scrollbar{width:4px}
.msw-tm-list::-webkit-scrollbar-thumb{background:#ffffff20;border-radius:2px}
@media(max-width:640px){
  .msw-tm-box{width:min(100vw,96vw)!important;max-height:96dvh!important}
  .msw-tm-list{max-height:none;overflow-y:visible}
}

/* Row — 2-line card: header (avatar+name+buttons) + zones row below */
.msw-tm-row{border-radius:8px;border:1px solid #ffffff0d;overflow:hidden;transition:border-color .15s}
.msw-tm-row-hd{display:grid;grid-template-columns:34px 1fr auto auto;align-items:center;gap:8px 10px;padding:10px 12px 6px;background:#ffffff05}
.msw-tm-zones-row{display:flex;flex-wrap:wrap;gap:4px;padding:0 12px 10px 56px}
.msw-tm-row:has(.msw-tm-picker:not([hidden])){border-color:#3b82f640}
.msw-tm-row:has(.msw-tm-picker:not([hidden])) .msw-tm-row-hd{background:#3b82f60a}

/* Avatar */
.msw-tm-av{width:34px;height:34px;border-radius:50%;background:#1e3a5a;color:#7db8e8;font-size:0.8rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* Name + role */
.msw-tm-info{display:flex;flex-direction:column;gap:2px;overflow:hidden}
.msw-tm-name{font-size:0.83rem;font-weight:700;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msw-tm-role{font-size:0.65rem;font-weight:700;border-radius:3px;padding:2px 6px;display:inline-block;width:fit-content;white-space:nowrap}
.msw-tm-role--admin{background:#7c3aed20;color:#c4b5fd;border:1px solid #7c3aed30}
.msw-tm-role--worker{background:#1e3a5a;color:#7db8e8;border:1px solid #3b82f628}
.msw-tm-role--enc{background:#0d4a3a;color:#34d399;border:1px solid #10b98130}
.msw-tm-role--viewer{background:#ffffff08;color:var(--text-3);border:1px solid #ffffff12}

/* Zone chips — wrapping row below the header */
.msw-tm-zones-area{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.msw-tm-zc{background:#1e3a5a;color:#7db8e8;border-radius:4px;padding:1px 5px;font-size:0.66rem;font-weight:600;white-space:nowrap;flex-shrink:0}
.msw-tm-zc--more{background:#ffffff10;color:var(--text-2)}
.msw-tm-zc-empty{font-size:0.7rem;color:var(--text-2);font-style:italic;white-space:nowrap}

/* Edit zones button */
.msw-tm-zn-btn{background:#1e3a5a50;border:1px solid #3b82f630;color:#7db8e8;border-radius:6px;padding:5px 10px;font-size:0.75rem;cursor:pointer;white-space:nowrap;transition:background .1s,border-color .1s,color .1s;font-weight:600}
.msw-tm-zn-btn:hover{background:#3b82f628;border-color:#3b82f660;color:#93c5fd}
.msw-tm-zn-btn--open{background:#3b82f630;border-color:#3b82f680;color:#bfdbfe}

/* 📋 toggle (last column) — hides native checkbox, uses emoji with opacity */
.msw-tm-tog{display:flex;align-items:center;justify-content:center;cursor:pointer;padding:4px;border-radius:5px;transition:background .1s}
.msw-tm-tog:hover{background:#ffffff10}
.msw-tm-chk{display:none}
.msw-tm-tog-lbl{display:block;font-size:1.1rem;opacity:0.25;transition:opacity .15s,filter .15s;filter:grayscale(1);user-select:none}
.msw-tm-tog:has(input:checked) .msw-tm-tog-lbl{opacity:1;filter:none}

/* ── Zone picker panel ── */
.msw-tm-picker{border-top:1px solid #ffffff0a;padding:8px 10px 10px;background:#060f18}
.msw-tm-picker-loading{font-size:0.78rem;color:var(--text-3);padding:6px 0;font-style:italic}
.msw-tm-flt{width:100%;background:#0a1929;border:1px solid #3a5a7a60;border-radius:6px;color:var(--text-1);padding:5px 10px;font-size:0.8rem;outline:none;margin-bottom:8px;box-sizing:border-box}
.msw-tm-flt:focus{border-color:#3b82f6}
.msw-tm-picker-body{display:flex;flex-direction:column;gap:8px;max-height:220px;overflow-y:auto}
.msw-tm-picker-body::-webkit-scrollbar{width:4px}
.msw-tm-picker-body::-webkit-scrollbar-thumb{background:#ffffff20;border-radius:2px}
.msw-tm-grp{display:flex;flex-direction:column;gap:4px}
.msw-tm-grp-hd{font-size:0.66rem;font-weight:800;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;padding:0 2px;margin-bottom:2px}
.msw-tm-grp-checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:1px 4px}
.msw-tm-clbl{display:flex;align-items:center;gap:4px;font-size:0.76rem;color:var(--text-2);cursor:pointer;padding:3px 5px;border-radius:4px;transition:background .1s;white-space:nowrap;overflow:hidden}
.msw-tm-clbl:hover{background:#ffffff0c;color:var(--text-1)}
.msw-tm-clbl input{accent-color:#3b82f6;width:13px;height:13px;flex-shrink:0;cursor:pointer}
.msw-tm-clbl:has(input:checked){color:#7db8e8;background:#1e3a5a40}

.msw-tm-save-note{font-size:0.78rem;margin-top:8px;min-height:1.2em}
[data-theme="light"] .zb-popup {
  background: #ffffff;
  border-color: #d0d8e4;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .zb-panel {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(2, 132, 199, 0.28);
  box-shadow: 0 16px 44px rgba(15, 23, 42, 0.18);
}
[data-theme="light"] .zb-panel::before {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(2, 132, 199, 0.28);
}
[data-theme="light"] .zb-panel-hd { color: #0369a1; opacity: 1; }
[data-theme="light"] .zb-panel .zb-action:hover { background: rgba(2, 132, 199, 0.1); }
[data-theme="light"] .zb-panel .zb-action:active { background: rgba(2, 132, 199, 0.16); }
[data-theme="light"] .zb-badge.zb-open {
  background: rgba(255, 255, 255, 0.99);
  border-color: rgba(2, 132, 199, 0.55);
  box-shadow: 0 6px 22px rgba(15,23,42,0.2), 0 0 0 1px rgba(2,132,199,0.28);
}
[data-theme="light"] .zb-action:hover {
  background: rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .zb-action-plants {
  border-top-color: #d0d8e4;
}
[data-theme="light"] .zb-ipm-group {
  border-top-color: #d0d8e4;
}
[data-theme="light"] .zb-ipm-header {
  color: #9333ea;
}
[data-theme="light"] .zb-popup-close { color: #e11d48; text-shadow: none; }
[data-theme="light"] .zb-popup-close:hover { background: rgba(225, 29, 72, 0.1); color: #be123c; }
[data-theme="light"] .m-panel-x { color: #e11d48; background: rgba(225, 29, 72, 0.08); text-shadow: none; }
[data-theme="light"] .m-panel-x:hover { color: #be123c; background: rgba(225, 29, 72, 0.15); }
[data-theme="light"] .m-side-close { color: #e11d48; background: rgba(225, 29, 72, 0.08); text-shadow: none; }
[data-theme="light"] .m-side-close:hover { color: #be123c; background: rgba(225, 29, 72, 0.15); }
[data-theme="light"] .inv-cm-close { color: #e11d48; text-shadow: none; }
[data-theme="light"] .variety-modal-close { color: #e11d48; text-shadow: none; }
[data-theme="light"] .zb-val-ok { color: #059669; text-shadow: none; }
[data-theme="light"] .zb-val-warn { color: #d97706; text-shadow: none; }
[data-theme="light"] .zb-val-crit { color: #dc2626; text-shadow: none; }
[data-theme="light"] .zb-val-muted { color: #94a3b8; }
[data-theme="light"] .zb-val-plants { color: #0284c7; text-shadow: none; }
[data-theme="light"] .zb-val-ipm { color: #9333ea; text-shadow: none; }

/* ════════════════════════════════════════════════════════════
   DOME MIST SCHEDULE PANEL
   ════════════════════════════════════════════════════════════ */
.btn-dome-mist {
  background: linear-gradient(135deg, #1b5e20, #43a047);
  color: #fff;
  border: none;
  padding: 6px 14px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: filter .15s;
}
.btn-dome-mist:hover { filter: brightness(1.15); }
.btn-dome-mist:active { opacity: .8; }

/* Overlay + panel shell */
.dm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .72);
  z-index: 9100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.dm-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .55);
}

/* Header */
.dm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 12px;
}
.dm-header-title { display: flex; align-items: center; gap: 12px; }
.dm-header-icon { font-size: 26px; line-height: 1; }
.dm-header-name { font-size: 15px; font-weight: 700; color: var(--text-1); }
.dm-header-sub { font-size: 12px; color: var(--text-3); margin-top: 1px; }
.dm-close {
  background: none;
  border: none;
  color: var(--text-3);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.dm-close:hover { background: rgba(239,68,68,.12); color: #ef4444; }

/* Scrollable body */
.dm-body {
  overflow-y: auto;
  padding: 14px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

/* Sections */
.dm-section {
  background: var(--bg-2, rgba(255,255,255,.04));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
}
.dm-section-status { padding: 12px 14px; }
.dm-section-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .7px;
  margin-bottom: 12px;
}

/* Status badge */
.dm-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 8px;
  margin-bottom: 10px;
}
.dm-status-active  { background: rgba(76,175,80,.14); color: #38a169; border: 1px solid rgba(76,175,80,.25); }
.dm-status-paused  { background: rgba(234,179,8,.12);  color: #ca8a04; border: 1px solid rgba(234,179,8,.25); }
.dm-status-off     { background: var(--bg-1, rgba(148,163,184,.08)); color: var(--text-3); border: 1px solid var(--border); }
.dm-status-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #38a169;
  box-shadow: 0 0 6px #38a16988; flex-shrink: 0;
  animation: dm-pulse 2s infinite;
}
@keyframes dm-pulse {
  0%,100% { opacity: 1; }
  50% { opacity: .4; }
}
.dm-status-note { font-size: 11px; font-weight: 400; opacity: .75; margin-left: 4px; }

/* ── Dome geodesic hero card (zone detail) ── */
.dm-hero {
  margin-top: 10px;
  padding: 14px;
  border-radius: 14px;
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(34,197,94,.16), transparent 60%),
    var(--bg-2, rgba(34,197,94,.05));
  border: 1px solid rgba(34,197,94,.28);
}
.dm-hero-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.dm-hero-ic {
  font-size: 24px; line-height: 1;
  width: 42px; height: 42px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: rgba(34,197,94,.14);
  border: 1px solid rgba(34,197,94,.3);
}
.dm-hero-title { font-size: 15px; font-weight: 800; color: var(--text-1); line-height: 1.2; }
.dm-hero-sub { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.dm-hero-body { min-height: 32px; }
.dm-loading { font-size: 12px; color: var(--text-3); }
.dm-next {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 8px 11px; margin-bottom: 9px;
  border-radius: 10px;
  background: rgba(34,197,94,.10);
  border: 1px solid rgba(34,197,94,.22);
}
.dm-next-lbl { font-size: 11.5px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.dm-next-val { font-size: 15px; font-weight: 800; color: #22c55e; text-align: right; }
.dm-next-in { font-size: 11px; font-weight: 600; color: var(--text-3); }
.dm-next-tmw { font-size: 13px; font-weight: 700; color: var(--text-2); }
.dm-prog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dm-pg-cell {
  display: flex; flex-direction: column; gap: 1px;
  padding: 8px 10px; border-radius: 10px;
  background: var(--bg-1, rgba(148,163,184,.06));
  border: 1px solid var(--border);
}
.dm-pg-ic { font-size: 13px; }
.dm-pg-v { font-size: 12.5px; font-weight: 800; color: var(--text-1); }
.dm-pg-l { font-size: 10px; color: var(--text-3); line-height: 1.3; }
.dm-warn { font-size: 11px; color: #ca8a04; margin-top: 8px; }
.dm-hero-rows { margin-top: 11px; display: flex; flex-direction: column; gap: 1px; }
.dm-hrow {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 2px; border-top: 1px solid var(--border);
}
.dm-hrow:first-child { border-top: none; }
.dm-hrow-lbl { font-size: 11.5px; font-weight: 600; color: var(--text-3); white-space: nowrap; }
.dm-hrow-val { font-size: 12px; font-weight: 700; color: var(--text-1); text-align: right; }
.dm-mono { font-family: ui-monospace, monospace; font-size: 11px; }
.dm-auto-ok .dm-hrow-val { color: #22c55e; }
.dm-auto-warn .dm-hrow-val { color: #ca8a04; }
.dm-cfg-btn {
  width: 100%; margin-top: 12px;
  background: linear-gradient(135deg, #1b5e20, #43a047);
  color: #fff; border: none; font-weight: 700;
}
.dm-hero-titles { min-width: 0; }

/* Live "misting now" banner */
.dm-running {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; margin-bottom: 10px;
  border-radius: 10px;
  background: rgba(34,197,94,.14);
  border: 1px solid rgba(34,197,94,.34);
}
.dm-running-lbl {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; color: #22c55e; text-transform: uppercase; letter-spacing: .4px;
}
.dm-running-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #22c55e;
  box-shadow: 0 0 7px #22c55eaa; animation: dm-pulse 1.6s infinite;
}
.dm-running-timer {
  font-family: ui-monospace, monospace; font-size: 16px; font-weight: 800; color: #22c55e;
}

/* Manual mist presets (10 / 20 / 30 min) */
.dm-manual { margin-top: 12px; }
.dm-manual-lbl {
  font-size: 11px; font-weight: 800; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .6px; margin-bottom: 8px;
}
.dm-manual-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dm-mbtn {
  padding: 12px 6px; border-radius: 10px;
  background: rgba(34,197,94,.10);
  border: 1px solid rgba(34,197,94,.30);
  color: var(--text-1); font-size: 14px; font-weight: 700;
  cursor: pointer; transition: background .15s, transform .1s, box-shadow .15s;
}
.dm-mbtn:hover { background: rgba(34,197,94,.20); box-shadow: 0 2px 10px rgba(34,197,94,.18); }
.dm-mbtn:active { transform: scale(.96); }
.dm-mbtn:disabled { opacity: .6; cursor: default; }
.dm-stop-btn { width: 100%; margin-top: 12px; }

/* Next-mist live countdown */
.dm-cd { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-2); }

/* Smaller "last mist" days counter (de-emphasized in the dome card) */
.dm-hrow-val-sm { font-size: 10px; font-weight: 600; }

/* Toggle cards */
.dm-controls-row { display: flex; flex-direction: column; gap: 8px; }
.dm-toggle-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-1, rgba(255,255,255,.03));
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: opacity .2s;
}
.dm-toggle-card-text { display: flex; flex-direction: column; gap: 2px; }
.dm-toggle-title { font-size: 13px; font-weight: 600; color: var(--text-1); }
.dm-toggle-desc { font-size: 11.5px; color: var(--text-3); line-height: 1.4; }

/* Toggle switch */
.dm-toggle-switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
  flex-shrink: 0;
}
.dm-toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.dm-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--border);
  border-radius: 26px;
  transition: .25s;
}
.dm-slider:before {
  content: "";
  position: absolute;
  width: 20px; height: 20px;
  left: 3px; top: 3px;
  background: var(--bg-card);
  border-radius: 50%;
  transition: .25s;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.dm-toggle-switch input:checked + .dm-slider { background: #38a169; }
.dm-toggle-switch input:checked + .dm-slider.dm-slider-warn { background: #eab308; }
.dm-toggle-switch input:checked + .dm-slider:before { transform: translateX(20px); }

/* Fields */
.dm-field { margin-bottom: 14px; }
.dm-field:last-of-type { margin-bottom: 0; }
.dm-field-label { margin-bottom: 8px; }
.dm-field-name { display: block; font-size: 13px; font-weight: 600; color: var(--text-1); margin-bottom: 3px; }
.dm-field-hint {
  display: block;
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.5;
}
.dm-field-hint em { font-style: normal; color: var(--text-2); font-weight: 600; }
.dm-divider { height: 1px; background: var(--border); margin: 12px 0; }

/* Input group with steppers */
.dm-input-group {
  display: flex;
  align-items: center;
  gap: 4px;
}
.dm-input-group-center { justify-content: center; }
.dm-input {
  width: 62px;
  padding: 7px 6px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--bg-1);
  color: var(--text-1);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  transition: border-color .15s;
}
.dm-input:focus { outline: none; border-color: var(--accent); }
.dm-input-date { width: 160px; text-align: left; font-size: 13px; font-weight: 400; padding: 7px 10px; }
.dm-unit { font-size: 12px; color: var(--text-3); white-space: nowrap; margin-left: 2px; }
.dm-stepper {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--bg-1);
  color: var(--text-2);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: all .15s;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dm-stepper:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.dm-stepper:active { transform: scale(.93); }

/* Calc result */
.dm-calc-preview { margin-top: 10px; }
.dm-calc-result {
  font-size: 12px;
  color: var(--text-3);
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  line-height: 1.5;
}
.dm-calc-result strong { color: var(--text-2); }

/* Solar offsets layout */
.dm-solar-offsets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.dm-offset-box {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
}
.dm-offset-label { font-size: 11.5px; color: var(--text-3); margin-bottom: 8px; font-weight: 600; }

/* Solar preview block */
.dm-solar-preview {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
}
.dm-solar-bar { display: flex; flex-direction: column; gap: 0; }
.dm-solar-row { display: flex; align-items: center; gap: 8px; }
.dm-solar-icon { font-size: 18px; width: 24px; text-align: center; flex-shrink: 0; }
.dm-solar-times { display: flex; align-items: center; gap: 6px; flex: 1; flex-wrap: wrap; }
.dm-solar-time-pair { display: flex; flex-direction: column; align-items: center; min-width: 48px; }
.dm-solar-time-pair.dm-solar-active strong { color: #38a169; font-size: 16px; }
.dm-solar-time-pair strong { font-size: 14px; color: var(--text-1); }
.dm-solar-muted { font-size: 10px; color: var(--text-3); }
.dm-solar-arrow-lbl { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.dm-solar-duration {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-3);
  text-align: center;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.dm-solar-duration strong { color: var(--text-2); }

/* Phases */
.dm-phases-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.dm-phase-hdr {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 2px 10px;
}
.dm-phase-row {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
}
.dm-ph-week, .dm-ph-interval { width: 54px; }
.dm-phase-week-lbl { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.dm-phase-arrow { font-size: 14px; color: var(--text-3); }
.dm-phase-unit { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.dm-phase-del {
  background: none;
  border: none;
  color: var(--text-3);
  font-size: 20px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  margin-left: auto;
  border-radius: 4px;
  transition: color .15s, background .15s;
}
.dm-phase-del:hover { background: rgba(239,68,68,.12); color: #ef4444; }
.dm-no-phases {
  font-size: 12.5px;
  color: var(--text-3);
  padding: 12px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--bg-1);
}
.dm-add-phase {
  background: none;
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px;
  width: 100%;
  text-align: center;
  transition: all .15s;
  margin-bottom: 10px;
}
.dm-add-phase:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim, rgba(0,136,204,.06)); }
.dm-phases-example {
  font-size: 11.5px;
  color: var(--text-3);
  background: var(--bg-1);
  border-radius: 8px;
  padding: 8px 12px;
  line-height: 1.5;
}
.dm-phases-example strong { color: var(--text-2); }

/* Footer */
.dm-footer {
  display: flex;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.dm-btn-cancel {
  flex: 1;
  padding: 11px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: none;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.dm-btn-cancel:hover { background: var(--bg-hover, rgba(148,163,184,.1)); }
.dm-btn-save {
  flex: 2;
  padding: 11px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #1b5e20, #43a047);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(67,160,71,.35);
  transition: all .15s;
}
.dm-btn-save:hover { filter: brightness(1.08); box-shadow: 0 4px 20px rgba(67,160,71,.5); }
.dm-btn-save:active { transform: scale(.97); }
.dm-btn-save:disabled { opacity: .55; cursor: not-allowed; transform: none; filter: none; box-shadow: none; }

/* Mobile — bottom sheet */
@media (max-width: 520px) {
  .dm-overlay { align-items: flex-end; padding: 0; }
  .dm-panel { max-height: 96dvh; border-radius: 16px 16px 0 0; max-width: 100%; }
  .dm-solar-offsets { grid-template-columns: 1fr; }
}

/* Light theme overrides */
[data-theme="light"] .dm-panel { box-shadow: 0 8px 40px rgba(0,0,0,.18); }
[data-theme="light"] .dm-section { background: #f8fafc; }
[data-theme="light"] .dm-toggle-card { background: #fff; }
[data-theme="light"] .dm-input { background: #fff; }
[data-theme="light"] .dm-stepper { background: #f1f5f9; }
[data-theme="light"] .dm-stepper:hover { background: var(--accent); color: #fff; }
[data-theme="light"] .dm-calc-result { background: #f8fafc; }
[data-theme="light"] .dm-solar-preview { background: #f8fafc; }
[data-theme="light"] .dm-offset-box { background: #fff; }
[data-theme="light"] .dm-phase-row { background: #fff; }
[data-theme="light"] .dm-no-phases { background: #f8fafc; }
[data-theme="light"] .dm-phases-example { background: #f1f5f9; }
[data-theme="light"] .dm-slider { background: #cbd5e1; }
[data-theme="light"] .dm-slider:before { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
[data-theme="light"] .dm-status-active { background: rgba(56,161,105,.1); }
[data-theme="light"] .dm-status-paused { background: rgba(202,138,4,.08); }
[data-theme="light"] .dm-status-off { background: #f1f5f9; }
[data-theme="light"] .dm-btn-cancel:hover { background: #f1f5f9; }

/* Reiniciar contador de semanas (dentro del modal de niebla) */
.dm-reset-counter {
  margin-top: 8px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1.5px dashed rgba(67,160,71,.55);
  background: rgba(67,160,71,.10);
  color: #43a047;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, filter .15s;
}
.dm-reset-counter:hover { background: rgba(67,160,71,.18); filter: brightness(1.05); }
.dm-reset-counter:active { transform: scale(.98); }

/* ════════════════════════════════════════════════
   Bitácora de Propagación — Domos (.pj-*)
   ════════════════════════════════════════════════ */
.pj-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.72);
  z-index: 9100;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.pj-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 100%; max-width: 560px; max-height: 92vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.55);
}
.pj-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 14px; border-bottom: 1px solid var(--border);
  flex-shrink: 0; gap: 12px;
}
.pj-header-title { display: flex; align-items: center; gap: 12px; }
.pj-header-icon { font-size: 26px; line-height: 1; }
.pj-header-name { font-size: 15px; font-weight: 700; color: var(--text-1); }
.pj-header-sub { font-size: 12px; color: var(--text-3); margin-top: 1px; }
.pj-close {
  background: none; border: none; color: var(--text-3);
  font-size: 24px; line-height: 1; cursor: pointer;
  padding: 4px 8px; border-radius: 8px; flex-shrink: 0;
  transition: background .15s, color .15s;
}
.pj-close:hover { background: rgba(239,68,68,.12); color: #ef4444; }
.pj-body { padding: 14px 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pj-footer { padding: 12px 16px; border-top: 1px solid var(--border); flex-shrink: 0; }
.pj-btn-new {
  width: 100%; padding: 12px; border-radius: 12px; border: none;
  background: linear-gradient(135deg, #1b5e20, #43a047);
  color: #fff; font-size: 14px; font-weight: 700; cursor: pointer;
  box-shadow: 0 2px 12px rgba(67,160,71,.35); transition: filter .15s, transform .1s;
}
.pj-btn-new:hover { filter: brightness(1.08); }
.pj-btn-new:active { transform: scale(.98); }
.pj-empty { text-align: center; color: var(--text-3); font-size: 13px; padding: 34px 10px; line-height: 1.6; }

/* Batch card */
.pj-card {
  border: 1px solid var(--border); border-radius: 14px;
  padding: 12px 13px; margin-bottom: 12px;
  background: var(--bg-elev, rgba(148,163,184,.05));
  border-left: 3px solid #43a047;
}
.pj-card-dim { opacity: .62; border-left-color: var(--text-3); }
.pj-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.pj-card-variety {
  font-family: Georgia, "Times New Roman", serif; font-style: italic;
  font-size: 16px; font-weight: 700; color: var(--text-1); line-height: 1.25;
}
.pj-card-status { flex-shrink: 0; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.pj-st-active { background: rgba(67,160,71,.16); color: #43a047; }
.pj-st-grad { background: rgba(59,130,246,.16); color: #3b82f6; }
.pj-st-disc { background: rgba(148,163,184,.16); color: var(--text-3); }
.pj-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.pj-week-badge {
  font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 8px;
  background: linear-gradient(135deg, #1b5e20, #43a047); color: #fff;
}
.pj-meta-bit { font-size: 12px; color: var(--text-3); }
.pj-card-notes { margin-top: 8px; font-size: 12.5px; color: var(--text-2); line-height: 1.4; }

/* Weekly thumbnail strip */
.pj-strip {
  display: flex; gap: 8px; margin-top: 10px; padding-bottom: 4px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.pj-noentries { font-size: 12px; color: var(--text-3); font-style: italic; padding: 4px 0; }
.pj-thumb { position: relative; flex-shrink: 0; width: 74px; text-align: center; }
.pj-thumb-img {
  width: 74px; height: 74px; border-radius: 10px;
  background: rgba(148,163,184,.14) center/cover no-repeat;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; cursor: pointer; transition: filter .15s;
}
.pj-thumb-loaded { cursor: zoom-in; }
.pj-thumb-loaded:hover { filter: brightness(1.06); }
.pj-thumb-wk { display: block; margin-top: 3px; font-size: 11px; font-weight: 700; color: var(--text-2); }
.pj-thumb-del {
  position: absolute; top: -6px; right: -6px;
  width: 20px; height: 20px; border-radius: 50%;
  border: none; background: #ef4444; color: #fff;
  font-size: 13px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.pj-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.pj-btn-entry {
  flex: 1; min-width: 150px; padding: 9px; border-radius: 10px; border: none;
  background: rgba(67,160,71,.14); color: #43a047; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background .15s;
}
.pj-btn-entry:hover { background: rgba(67,160,71,.24); }
.pj-status-sel {
  padding: 8px 10px; border-radius: 10px; border: 1.5px solid var(--border);
  background: var(--bg-card); color: var(--text-2); font-size: 13px; cursor: pointer;
}
.pj-btn-del {
  padding: 8px 11px; border-radius: 10px; border: 1.5px solid var(--border);
  background: none; color: var(--text-3); font-size: 14px; cursor: pointer; transition: background .15s, color .15s;
}
.pj-btn-del:hover { background: rgba(239,68,68,.12); color: #ef4444; }

/* Fullscreen photo viewer */
.pj-viewer {
  position: fixed; inset: 0; z-index: 9300;
  background: rgba(0,0,0,.92);
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  cursor: zoom-out; padding: 12px;
}
.pj-viewer img { max-width: 100%; max-height: 88vh; border-radius: 10px; object-fit: contain; }
.pj-viewer-hint { margin-top: 14px; color: rgba(255,255,255,.75); font-size: 13px; }

/* Forms (new batch / add entry) */
.pj-form-ov {
  position: fixed; inset: 0; z-index: 9200;
  background: rgba(0,0,0,.66);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.pj-form {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px;
  width: 100%; max-width: 440px; max-height: 92vh; overflow-y: auto;
  padding: 16px 18px 18px; box-shadow: 0 24px 64px rgba(0,0,0,.55);
}
.pj-form-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 15px; font-weight: 700; color: var(--text-1); margin-bottom: 12px;
}
.pj-form-x { background: none; border: none; color: var(--text-3); font-size: 22px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 8px; }
.pj-form-x:hover { background: rgba(239,68,68,.12); color: #ef4444; }
.pj-form-variety { font-family: Georgia, serif; font-style: italic; font-weight: 700; font-size: 15px; color: var(--text-1); margin-bottom: 12px; }
.pj-flabel { display: block; font-size: 12px; font-weight: 700; color: var(--text-2); margin: 10px 0 5px; }
.pj-fhint { font-weight: 400; color: var(--text-3); font-size: 11px; }
.pj-input {
  width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 1.5px solid var(--border); background: var(--bg-elev, rgba(148,163,184,.06));
  color: var(--text-1); font-size: 14px; box-sizing: border-box;
}
.pj-input:focus { outline: none; border-color: #43a047; }
.pj-textarea { resize: vertical; min-height: 44px; font-family: inherit; }
.pj-check { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-size: 12.5px; color: var(--text-2); line-height: 1.4; cursor: pointer; }
.pj-check input { margin-top: 2px; flex-shrink: 0; }
/* Variety suggestions */
.pj-suggest { max-height: 0; overflow: hidden; transition: max-height .15s; }
.pj-suggest-open { max-height: 260px; overflow-y: auto; margin-top: 6px; border: 1px solid var(--border); border-radius: 10px; }
.pj-sugg-item { padding: 8px 11px; cursor: pointer; border-bottom: 1px solid var(--border); }
.pj-sugg-item:last-child { border-bottom: none; }
.pj-sugg-item:hover { background: rgba(67,160,71,.10); }
.pj-sugg-name { display: block; font-size: 13px; font-weight: 600; color: var(--text-1); }
.pj-sugg-meta { display: block; font-size: 11px; color: var(--text-3); margin-top: 1px; }
/* Photo slot */
.pj-photo-slot {
  width: 100%; aspect-ratio: 4/3; border-radius: 12px;
  border: 2px dashed var(--border); background: rgba(148,163,184,.06);
  display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer;
}
.pj-photo-ph { text-align: center; color: var(--text-3); font-size: 13px; line-height: 1.5; }
.pj-photo-preview { width: 100%; height: 100%; object-fit: cover; }
.pj-photo-btns { display: flex; gap: 8px; margin-top: 8px; }
.pj-photo-btn {
  flex: 1; padding: 10px; border-radius: 10px; border: 1.5px solid var(--border);
  background: var(--bg-elev, rgba(148,163,184,.06)); color: var(--text-2);
  font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s;
}
.pj-photo-btn:hover { background: rgba(67,160,71,.12); }
.pj-form-actions { display: flex; gap: 10px; margin-top: 16px; }
.pj-form-cancel {
  flex: 1; padding: 11px; border-radius: 10px; border: 1.5px solid var(--border);
  background: none; color: var(--text-2); font-size: 14px; font-weight: 600; cursor: pointer;
}
.pj-form-cancel:hover { background: var(--bg-hover, rgba(148,163,184,.1)); }
.pj-form-save {
  flex: 2; padding: 11px; border-radius: 10px; border: none;
  background: linear-gradient(135deg, #1b5e20, #43a047); color: #fff;
  font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 2px 12px rgba(67,160,71,.35);
}
.pj-form-save:hover { filter: brightness(1.08); }
.pj-form-save:disabled { opacity: .55; cursor: not-allowed; filter: none; box-shadow: none; }

@media (max-width: 520px) {
  .pj-overlay, .pj-form-ov { align-items: flex-end; padding: 0; }
  .pj-panel { max-height: 96dvh; border-radius: 16px 16px 0 0; max-width: 100%; }
  .pj-form { border-radius: 16px 16px 0 0; max-width: 100%; max-height: 94dvh; }
}
@media (prefers-reduced-motion: reduce) {
  .pj-btn-new, .pj-btn-new:active, .pj-thumb-img, .dm-reset-counter:active { transition: none; transform: none; }
}
[data-theme="light"] .pj-panel, [data-theme="light"] .pj-form { box-shadow: 0 8px 40px rgba(0,0,0,.18); }
[data-theme="light"] .pj-card { background: #f8fafc; }
[data-theme="light"] .pj-input, [data-theme="light"] .pj-photo-btn { background: #fff; }
[data-theme="light"] .pj-status-sel { background: #fff; }

[data-theme="light"] .zb-val-sub { color: #475569; }
[data-theme="light"] .zb-ipm { color: #9333ea; text-shadow: none; }

/* ════════════════════════════════════════════════
   Map Work Log FAB + Drawer
   ════════════════════════════════════════════════ */
/* m-wl-fab styles now in .m-spd-btn--wl above */
/* OASIS card overlay standard: backdrop-filter removed (was recalculating
   against the animated map SVG every frame → translucid panels + paint
   pressure). Solid rgba background gives the same visual at zero cost. */
.m-wl-backdrop{position:fixed;inset:0;background:rgba(2,6,14,.55);z-index:140;opacity:0;pointer-events:none;transition:opacity .25s}
.m-wl-backdrop--open{opacity:1;pointer-events:auto}
.m-wl-drawer{position:fixed;bottom:0;left:0;right:0;z-index:150;background:var(--bg-card,#0f172a);border-radius:20px 20px 0 0;box-shadow:0 -8px 40px rgba(0,0,0,.4);transform:translateY(100%);transition:transform .3s cubic-bezier(.32,.72,0,1);display:flex;flex-direction:column;max-height:88dvh;contain:layout paint}
.m-wl-drawer--open{transform:translateY(0)}
.m-wl-drawer-handle{width:36px;height:4px;background:#ffffff22;border-radius:2px;margin:10px auto 0;flex-shrink:0}
.m-wl-drawer-hd{display:flex;align-items:center;gap:10px;padding:12px 16px 10px;border-bottom:1px solid #ffffff0a;flex-shrink:0}
.m-wl-drawer-title{flex:1;font-size:15px;font-weight:700;color:var(--text-1,#e0e0e0)}
.m-wl-export-btn{background:#1d4ed822;border:1px solid #2563eb55;color:#93c5fd;font-size:12px;font-weight:700;cursor:pointer;padding:5px 11px;line-height:1;border-radius:8px;transition:background .15s}
.m-wl-export-btn:hover{background:#1d4ed840}
.m-wl-export-btn[hidden]{display:none}
.m-wl-drawer-close{background:none;border:none;color:var(--text-2,#888);font-size:20px;cursor:pointer;padding:0 4px;line-height:1;border-radius:6px;transition:color .15s}
.m-wl-drawer-close:hover{color:var(--text-1)}
.m-wl-drawer-body{overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch}
/* Fondo del feed con PROFUNDIDAD: un poco más oscuro que las tarjetas para que
    estas no se pierdan en el negro plano (se notaba sobre todo en PC). */
.m-wl-drawer-body{background:#080d17}
[data-theme="light"] .m-wl-drawer-body{background:#eef2f7}
[data-theme="light"] .m-wl-drawer{background:#fff}
[data-theme="light"] .m-wl-drawer-hd{border-color:var(--border)}
/* En pantallas grandes (PC): más aire alrededor + tarjetas con más presencia */
@media (min-width:900px){
  .m-wl-drawer-body .wf-feed{padding-top:6px}
  .m-wl-drawer-body .wf-card{box-shadow:0 4px 20px rgba(0,0,0,.32)}
}

/* ════════════════════════════════════════════════
   Work Feed (wf-*) — Cards profesionales
   ════════════════════════════════════════════════ */
.wf-feed{padding:0 0 80px;max-width:560px;margin:0 auto}
.wf-list{display:flex;flex-direction:column;gap:14px;padding:0 10px}
.wf-empty{text-align:center;color:var(--text-2);padding:48px 16px;font-size:14px}
.wf-noresults{text-align:center;color:var(--text-2);padding:36px 16px;font-size:13px}
/* Meta bar: contador de resultados + estado de carga del historial */
.wf-meta-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 16px 8px;min-height:16px}
.wf-resultcount{font-size:11px;font-weight:700;color:var(--text-2);letter-spacing:.2px}
.wf-loadstatus{font-size:11px;font-weight:600;color:#7dd3fc}

/* Cabecera FIJA (sticky) del feed: buscador + filtros no se van con el scroll de las
   fotos. Compacta para no robar espacio. Fondo sólido para que las tarjetas pasen por
   debajo sin transparentar. */
.wf-sticky-head{position:sticky;top:0;z-index:20;background:var(--bg-1);
  border-bottom:1px solid var(--border);
  box-shadow:0 2px 6px rgba(0,0,0,.18)}

/* Buscador global del feed (variedad/tipo/trabajador/campo/notas) */
.wf-search-wrap{padding:6px 12px 0}
.wf-search{width:100%;box-sizing:border-box;background:var(--bg-2);border:1px solid var(--border);border-radius:10px;color:var(--text-1);font-size:13px;padding:7px 12px;outline:none}
.wf-search:focus{border-color:var(--accent)}
.wf-search::placeholder{color:var(--text-3)}

/* Filter bar (compacta) */
.wf-filter-bar{display:flex;gap:5px;padding:6px 12px;overflow-x:auto;scrollbar-width:none}
.wf-filter-bar::-webkit-scrollbar{display:none}
.wf-filter-btn{padding:4px 11px;border-radius:16px;border:1px solid var(--border);background:transparent;color:var(--text-2);font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.wf-filter-btn--active{background:var(--accent);color:#fff;border-color:var(--accent)}
/* Chip 🥀 Failing activo en rojo: filtra tarjetas que reportan planta tirándose (dumps) */
.wf-filter-btn--failing.wf-filter-btn--active{background:#c62828;border-color:#c62828}
/* Sección "En Riego Ahora": sub-bloques de PAUSAS siempre visibles (nada pausado
   sin que se note). Ámbar = riego pausado con tiempo guardado; rojo = zona en pausa. */
.ms-paused-hd{margin:10px 2px 4px;font-size:11px;font-weight:800;letter-spacing:.3px}
.ms-paused-hd--run{color:#fbbf24}
.ms-paused-hd--zone{color:#ef9a9a}
.ms-paused-row{opacity:.95}
.ms-paused-row--run{--zone-color:#f59e0b}
.ms-paused-row--run .ms-az-timer{color:#fbbf24}
.ms-paused-row--zone{--zone-color:#ef4444}
.ms-paused-row--zone .ms-az-timer{color:#ef9a9a;font-size:11px}

/* Fila de chips de MES (server-side): scrollable horizontal en móvil */
.wf-month-bar{margin-top:6px;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.wf-month-bar::-webkit-scrollbar{display:none}
.wf-month-bar .wf-month-btn{flex:0 0 auto}
/* Resumen 🥀 al filtrar failing: total + grupos top para guiar los dumps */
.wf-fail-summary{margin:8px 0 10px;padding:10px 12px;border:1px solid rgba(198,40,40,.45);border-radius:12px;background:rgba(198,40,40,.08)}
.wf-fs-head{font-weight:700;font-size:13px;color:#ef9a9a;margin-bottom:4px}
.wf-fs-row{font-size:12.5px;color:var(--text-2,#cbd5e1);padding:1px 0}
.wf-fs-n{display:inline-block;min-width:34px;font-weight:700;color:#ef5350;text-align:right;margin-right:8px}

/* Card */
/* Perf: contain:paint isolates each card's paint layer — the ONE directive proven to
   help on the sibling .mmc list (see css:15083). Dropped the box-shadow transition:
   it never fires (no .wf-card:hover rule exists) and that exact transition was what
   "lit up the compositor during scroll" on .mmc. With the feed unvirtualized (it loads
   the whole history into the DOM), this is what keeps per-scroll paint cost bounded. */
.wf-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 2px 14px rgba(0,0,0,.2);contain:paint}

/* Worker row — top of card */
.wf-card-hd{display:flex;align-items:center;gap:10px;padding:14px 14px 10px}
.wf-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#00c48c,#0099ff);color:#fff;font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;text-transform:uppercase}
.wf-worker-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.wf-worker-name{font-size:14px;font-weight:700;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wf-field-badge{font-size:11px;color:var(--accent);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
/* Ubicación GRANDE y resaltada en el header (lo que Fabian quiere ver de un vistazo). */
.wf-loc-badge{font-size:15px;font-weight:800;color:#38bdf8;background:rgba(56,189,248,.12);border:1px solid rgba(56,189,248,.3);border-radius:8px;padding:2px 9px;letter-spacing:.02em;white-space:nowrap}
[data-theme="light"] .wf-loc-badge{color:#0284c7;background:rgba(2,132,199,.1);border-color:rgba(2,132,199,.25)}
.wf-hd-right{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0}
.wf-time{font-size:11px;color:var(--text-2);white-space:nowrap}
.wf-result{font-size:10px;font-weight:700;padding:2px 7px;border-radius:8px;white-space:nowrap}
.wf-result--ok{background:#00ff6a18;color:#00c462}
.wf-result--partial{background:#ffcc0018;color:#d4a800}
.wf-result--no{background:#ff444418;color:#ff6666}

/* Mission row */
.wf-mission-row{display:flex;align-items:flex-start;gap:10px;padding:0 14px 10px}
.wf-type-icon{font-size:20px;flex-shrink:0;line-height:1.2}
.wf-mission-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.wf-type-label{font-size:13px;font-weight:700;color:var(--text-1)}
.wf-mission-title{font-size:12px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wf-plant-tag{font-size:12px;color:#00c48c;font-weight:600}

/* Photo */
.wf-photo-wrap{width:100%;position:relative;background:var(--bg-2);min-height:200px;overflow:hidden;cursor:zoom-in}
/* Perf: shimmer animations are PAUSED by default and run ONLY while a photo is
   actually loading (.is-loading is set by the IntersectionObserver in mission-feed.js
   when the card nears the viewport). Before, every not-yet-loaded card ran 2 infinite
   animations forever — hundreds of offscreen compositor ticks in the unvirtualized feed. */
.wf-photo-shimmer{position:absolute;inset:0;background:linear-gradient(90deg,var(--bg-2) 25%,var(--bg-card) 50%,var(--bg-2) 75%);background-size:200% 100%;animation:wf-shimmer 1.4s infinite;animation-play-state:paused}
.wf-photo-shimmer::before{content:"";position:absolute;top:50%;left:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border:2.5px solid rgba(255,255,255,.12);border-top-color:rgba(255,255,255,.55);border-radius:50%;animation:wf-shimmer-spin .75s linear infinite;animation-play-state:paused}
.wf-photo-wrap.is-loading .wf-photo-shimmer,.wf-photo-wrap.is-loading .wf-photo-shimmer::before{animation-play-state:running}
.wf-photo-shimmer::after{content:"Cargando foto…";position:absolute;bottom:10px;left:0;right:0;text-align:center;font-size:11px;color:var(--text-2);opacity:.7}
@keyframes wf-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes wf-shimmer-spin{to{transform:rotate(360deg)}}
.wf-photo{width:100%;display:block;object-fit:cover;max-height:520px;min-height:200px;transition:opacity .25s;position:relative;z-index:1}
.wf-photo[src=""]{opacity:0}
.wf-photo:not([src=""]){opacity:1}
/* Lightbox */
.wf-lightbox{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.93);display:flex;align-items:center;justify-content:center;cursor:zoom-out;animation:wf-lb-in .15s ease}
@keyframes wf-lb-in{from{opacity:0}to{opacity:1}}
.wf-lightbox-img{max-width:100%;max-height:90dvh;object-fit:contain;border-radius:4px;display:block;box-shadow:0 8px 40px rgba(0,0,0,.7)}
.wf-lightbox-spin{width:38px;height:38px;border:3px solid rgba(255,255,255,.18);border-top-color:#fff;border-radius:50%;animation:wf-shimmer-spin .75s linear infinite}

/* Download card button */
.wf-dl-row{display:flex;justify-content:flex-end;gap:8px;padding:4px 12px 12px}
.wf-del-btn{display:inline-flex;align-items:center;justify-content:center;padding:7px 12px;background:rgba(248,113,113,0.07);border:1px solid rgba(248,113,113,0.28);border-radius:20px;color:#f87171;font-size:13px;cursor:pointer;transition:background .2s,transform .1s;-webkit-tap-highlight-color:transparent}
.wf-del-btn:hover{background:rgba(248,113,113,0.16);border-color:rgba(248,113,113,0.45)}
.wf-del-btn:active{transform:scale(.94)}
.wf-del-btn:disabled{opacity:.55;cursor:wait}
.wf-dl-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;background:rgba(0,212,255,0.07);border:1px solid rgba(0,212,255,0.22);border-radius:20px;color:#00d4ff;font-size:12px;font-weight:600;cursor:pointer;transition:background .2s,transform .1s,opacity .2s;-webkit-tap-highlight-color:transparent;white-space:nowrap}
.wf-dl-btn:hover{background:rgba(0,212,255,0.16);border-color:rgba(0,212,255,0.4)}
.wf-dl-btn:active{transform:scale(.96)}
.wf-dl-btn:disabled{opacity:.55;cursor:wait}
/* Botón Editar (admin) en la tarjeta del Work Log */
.wf-edit-btn{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;background:rgba(251,191,36,.09);border:1px solid rgba(251,191,36,.30);border-radius:20px;color:#fbbf24;font-size:12px;font-weight:600;cursor:pointer;transition:background .2s,transform .1s;-webkit-tap-highlight-color:transparent;white-space:nowrap}
.wf-edit-btn:hover{background:rgba(251,191,36,.18);border-color:rgba(251,191,36,.5)}
.wf-edit-btn:active{transform:scale(.95)}
/* Botón "Revisar" (admin/inventario) — verde al marcar */
.wf-review-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.28);border-radius:20px;color:#4ade80;font-size:12px;font-weight:600;cursor:pointer;transition:background .2s,transform .1s,box-shadow .2s;-webkit-tap-highlight-color:transparent;white-space:nowrap}
.wf-review-btn:hover{background:rgba(34,197,94,.16)}
.wf-review-btn:active{transform:scale(.95)}
.wf-review-btn:disabled{opacity:.55;cursor:wait}
.wf-review-btn--on{background:rgba(34,197,94,.28);border-color:#22c55e;color:#bbf7d0;box-shadow:0 0 10px rgba(34,197,94,.3)}
/* Casilla con palomita SIEMPRE visible: apagada = contorno + palomita tenue
   (se nota que es un check sin marcar); prendida = caja verde sólida + palomita
   blanca con glow (destaca más, misma palomita). */
.wf-review-box{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;flex:0 0 17px;border:2px solid rgba(74,222,128,.55);border-radius:5px;font-size:11px;line-height:1;font-weight:900;color:rgba(74,222,128,.45);background:rgba(34,197,94,.06);transition:background .2s,color .2s,border-color .2s,box-shadow .2s}
.wf-review-btn--on .wf-review-box{background:#22c55e;border-color:#22c55e;color:#fff;box-shadow:0 0 8px rgba(34,197,94,.6)}
/* Botón 🏷️ categorizar */
.wf-cat-btn{display:inline-flex;align-items:center;justify-content:center;padding:7px 11px;background:rgba(192,132,252,.09);border:1px solid rgba(192,132,252,.3);border-radius:20px;font-size:14px;cursor:pointer;transition:background .2s,transform .1s;-webkit-tap-highlight-color:transparent}
.wf-cat-btn:hover{background:rgba(192,132,252,.18)}
.wf-cat-btn:active{transform:scale(.94)}
/* Ribbon "revisado" + chips de categorías en la tarjeta */
.wf-card--reviewed{border-color:rgba(34,197,94,.4)}
.wf-reviewed-ribbon{background:rgba(34,197,94,.14);color:#4ade80;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:3px 12px;border-bottom:1px solid rgba(34,197,94,.22)}
.wf-cats{display:flex;flex-wrap:wrap;gap:5px;padding:8px 12px 0}
.wf-cat-chip{font-size:11px;font-weight:700;padding:3px 9px;border-radius:12px;background:rgba(192,132,252,.14);color:#d8b4fe;border:1px solid rgba(192,132,252,.28)}
[data-theme="light"] .wf-cat-chip{background:rgba(147,51,234,.1);color:#7c3aed;border-color:rgba(147,51,234,.25)}
/* Picker de categorías (hoja modal) */
.wf-catpick{background:var(--bg-card);border-radius:16px;max-width:420px;width:92%;margin:auto;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.wf-catpick-hd{display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:800;padding:14px 16px;border-bottom:1px solid var(--border);color:var(--text-1)}
.wf-catpick-body{display:flex;flex-wrap:wrap;gap:8px;padding:16px;max-height:58vh;overflow-y:auto}
.wf-catpick-grp{width:100%;font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--text-2);margin:6px 0 0}
.wf-catpick-grp:first-child{margin-top:0}
.wf-catpick-grp-chips{width:100%;display:flex;flex-wrap:wrap;gap:8px}
.wf-catpick-chip{font-size:13px;font-weight:600;color:var(--text-1);background:var(--bg-3);border:1.5px solid var(--border);border-radius:16px;padding:8px 13px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.wf-catpick-chip--sel{background:#9333ea;border-color:#a855f7;color:#fff}
.wf-catpick-empty{color:var(--text-2);font-size:13px;padding:8px}
.wf-catpick-save{width:calc(100% - 32px);margin:0 16px 16px;padding:12px;border-radius:10px;border:none;background:#22c55e;color:#fff;font-size:15px;font-weight:700;cursor:pointer}
.wf-catpick-save:disabled{opacity:.6}
/* Modal de edición (reusa el shell .wf-detail / .wf-dt-hd) */
.wf-edit .wf-edit-body{padding:6px 14px 18px;display:flex;flex-direction:column;gap:0}
.wf-edit-sec{padding:11px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.wf-edit-sec:last-of-type{border-bottom:none}
.wf-edit-f{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--text-3);font-weight:700;margin-bottom:9px}
.wf-edit-f>span{text-transform:uppercase;letter-spacing:.4px}
.wf-edit-f input,.wf-edit-f select,.wf-edit-obs{width:100%;box-sizing:border-box;background:var(--bg-2,#0f1a2e);border:1px solid var(--border,#1e3050);border-radius:8px;color:var(--text-1,#e2e8f0);padding:9px 11px;font-size:14px;font-weight:500;font-family:inherit}
.wf-edit-f input:focus,.wf-edit-f select:focus,.wf-edit-obs:focus{outline:none;border-color:#38bdf8;box-shadow:0 0 0 2px rgba(56,189,248,.2)}
.wf-edit-obs{width:100%;box-sizing:border-box;resize:vertical;min-height:64px;line-height:1.45}
.wf-edit-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wf-edit-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:9px}
.wf-edit-grid4 .wf-edit-f{margin-bottom:0}
.wf-edit-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-1);font-weight:600;cursor:pointer;padding:4px 0}
.wf-edit-check input{width:18px;height:18px;accent-color:#38bdf8}
.wf-edit-photo{border-radius:10px;overflow:hidden;background:#0006;min-height:60px;margin-bottom:9px;display:flex;align-items:center;justify-content:center}
.wf-edit-photo img{display:block;width:100%;height:auto;max-height:260px;object-fit:cover}
.wf-edit-photo-empty{color:var(--text-3);font-size:12px;padding:22px}
.wf-edit-photo-btns{display:flex;gap:8px}
.wf-edit-photobtn{flex:1;background:var(--bg-2,#15253f);border:1px solid var(--border,#2b4b6f);border-radius:9px;color:var(--text-1,#e2e8f0);padding:9px;font-size:13px;font-weight:600;cursor:pointer;transition:background .15s}
.wf-edit-photobtn:hover{background:#1e3a5f}
/* Slots ANTES/DESPUÉS del editor: rehacer la foto con 1 o 2 imágenes */
.wf-edit-slot-hint{font-size:11px;color:var(--text-3,#7b8ba3);margin:2px 0 7px;line-height:1.35}
.wf-edit-slots{display:flex;align-items:stretch;gap:7px;margin-bottom:2px}
.wf-edit-slot{flex:1;min-width:0;background:var(--bg-2,#15253f);border:1.5px dashed var(--border,#2b4b6f);border-radius:10px;padding:7px;display:flex;flex-direction:column;gap:6px;transition:border-color .2s}
.wf-edit-slot--filled{border-style:solid;border-color:rgba(34,197,94,.5)}
.wf-edit-slot-t{font-size:10px;font-weight:800;letter-spacing:.6px;color:var(--text-2,#9fb0c8);text-align:center}
.wf-edit-slot-prev{border-radius:7px;overflow:hidden;background:#0006;height:72px;display:flex;align-items:center;justify-content:center}
.wf-edit-slot-prev img{width:100%;height:100%;object-fit:cover;display:block}
.wf-edit-slot-plus{font-size:20px;color:var(--text-3,#7b8ba3)}
.wf-edit-slot-btns{display:flex;gap:5px}
.wf-edit-slotbtn{flex:1;background:var(--bg-3,#1b2c49);border:1px solid var(--border,#2b4b6f);border-radius:7px;color:var(--text-1,#e2e8f0);padding:5px 0;font-size:13px;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent}
.wf-edit-slotbtn:hover{background:#1e3a5f}
.wf-edit-slotbtn--x{flex:0 0 30px;color:#f87171;font-weight:700}
.wf-edit-swapbtn{align-self:center;flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:var(--bg-3,#1b2c49);border:1px solid var(--border,#2b4b6f);color:var(--text-1,#e2e8f0);font-size:15px;line-height:1;cursor:pointer;transition:opacity .15s,transform .1s}
.wf-edit-swapbtn:active{transform:rotate(180deg)}
.wf-edit-swapbtn:disabled{opacity:.35;cursor:default}
/* 🔄 Voltear antes/después: parte el collage a la mitad e invierte izquierda↔derecha */
.wf-edit-flipbtn{width:100%;margin-top:8px;background:linear-gradient(135deg,#7c3aed,#6d28d9);border:none;border-radius:9px;color:#fff;padding:10px;font-size:13px;font-weight:700;cursor:pointer;transition:opacity .15s,transform .06s}
.wf-edit-flipbtn:hover{opacity:.92}
.wf-edit-flipbtn:active{transform:scale(.98)}
.wf-edit-flipbtn:disabled{opacity:.4;cursor:default}
/* Campo 'trabajador' bloqueado en sí mismo para el no-admin (edita solo SUS misiones) */
.wf-edit-locked{background:#0d1a2e!important;color:var(--text-2,#94a3b8)!important;cursor:not-allowed}
.wf-edit-lock-ic{position:absolute;right:9px;bottom:9px;font-size:12px;opacity:.75;pointer-events:none}
.wf-edit-f{position:relative}
.wf-edit-status{font-size:12.5px;color:#7dd3fc;min-height:17px;padding:6px 0 2px;text-align:center}
.wf-edit-actions{display:flex;gap:9px;margin-top:8px}
.wf-edit-cancel{flex:0 0 auto;background:transparent;border:1px solid var(--border,#2b4b6f);border-radius:10px;color:var(--text-2,#94a3b8);padding:11px 18px;font-size:14px;font-weight:600;cursor:pointer}
.wf-edit-save{flex:1;background:linear-gradient(135deg,#1d4ed8,#2563eb);border:none;border-radius:10px;color:#fff;padding:11px;font-size:14px;font-weight:700;cursor:pointer;transition:opacity .2s}
.wf-edit-save:disabled{opacity:.55;cursor:wait}
[data-theme="light"] .wf-edit-f input,[data-theme="light"] .wf-edit-f select,[data-theme="light"] .wf-edit-obs{background:#f8fafc;border-color:#d5dde8;color:#0f172a}
.wf-dl-icon{font-size:14px;line-height:1}

/* Employee speech bubble */
.wf-bubble{margin:0 12px 10px;display:flex;gap:8px;align-items:flex-start}
.wf-bubble-icon{font-size:16px;flex-shrink:0;line-height:1.4}
.wf-bubble-body{background:var(--bg-2);border-radius:0 12px 12px 12px;padding:10px 12px;border:1px solid var(--border);flex:1;min-width:0}
.wf-bubble-text{font-size:13px;color:var(--text-1);line-height:1.55;white-space:pre-wrap;word-break:break-word}
.wf-bubble-by{display:block;font-size:11px;color:var(--text-2);margin-top:4px;font-style:italic}
/* Botón "Traducir" de la observación (solo en inglés, bajo demanda). */
.wf-translate-btn{margin-top:6px;font-size:11px;font-weight:600;color:#7dd3fc;background:rgba(56,189,248,.1);border:1px solid rgba(56,189,248,.25);border-radius:14px;padding:3px 10px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.wf-translate-btn:disabled{opacity:.6;cursor:default}
[data-theme="light"] .wf-translate-btn{color:#0284c7;background:rgba(2,132,199,.08);border-color:rgba(2,132,199,.2)}

/* Chips */
/* Franja de stats dedicada (RET/CB/Total = organizado · Failing aparte) */
.wf-stats{display:flex;align-items:stretch;gap:6px;margin:0 14px 10px;padding:8px 4px;background:#ffffff05;border:1px solid var(--border);border-radius:12px}
.wf-stat{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;text-align:center;padding:2px 4px}
.wf-stat-n{font-size:19px;font-weight:800;line-height:1;color:var(--text-1);font-variant-numeric:tabular-nums}
.wf-stat-l{font-size:9px;font-weight:600;letter-spacing:.2px;color:var(--text-3);white-space:nowrap}
.wf-stat--ret   .wf-stat-n{color:#22c55e}
.wf-stat--cb    .wf-stat-n{color:#4ade80}
.wf-stat--total .wf-stat-n{color:#10b981}
.wf-stat--total{background:#10b98112;border-radius:9px}
.wf-stat--fail  .wf-stat-n{color:#ef4444}
.wf-stat--fail{background:#ef444410;border-radius:9px}
/* Divisor: deja Failing visualmente "aparte" de lo contado */
.wf-stat-div{flex:0 0 1px;align-self:stretch;background:var(--border);margin:2px 2px}
[data-theme="light"] .wf-stats{background:#f8fafc}
.wf-chips{display:flex;flex-wrap:wrap;gap:5px;padding:0 14px 10px}
.wf-chip{font-size:11px;padding:3px 9px;border-radius:20px;background:var(--bg-2);color:var(--text-2);border:1px solid var(--border);white-space:nowrap}
.wf-chip--pri{font-weight:700;border:none}
.wf-chip--meta{background:rgba(59,130,246,.10);border-color:rgba(59,130,246,.25);color:#93c5fd;font-weight:600}
/* Chip de plagas con miniatura(s) del admin: thumbs inline antes del texto.
   Solo aplica si hubo imágenes; si no, es un wf-chip--meta normal. */
.wf-chip--pests{display:inline-flex;align-items:center;gap:4px;padding-left:4px}
.wf-chip-thumb{width:18px;height:18px;border-radius:5px;object-fit:cover;border:1px solid var(--border);flex-shrink:0}
.wf-chip--assignee{background:rgba(168,85,247,.12);border-color:rgba(168,85,247,.28);color:#c4b5fd;font-weight:600}
/* Instrucciones de la orden de trabajo (description original) */
.wf-order{display:flex;gap:7px;align-items:flex-start;margin:0 14px 10px;padding:8px 10px;background:#ffffff05;border-left:2px solid var(--border);border-radius:0 8px 8px 8px}
.wf-order-ic{font-size:13px;flex-shrink:0;line-height:1.4}
.wf-order-tx{font-size:12px;color:var(--text-2);line-height:1.45;white-space:pre-wrap;word-break:break-word}
[data-theme="light"] .wf-order{background:#f8fafc}
/* ── Bloques por origen del dato (Work Log reorganizado) ── */
.wf-blk{margin:0 14px 10px;padding:9px 11px;border-radius:10px;border:1px solid var(--border);background:#ffffff05}
/* Primer bloque con un poco de aire arriba para no pegarse al header */
.wf-blk--inv{margin-top:2px}
.wf-blk-h{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.wf-blk-body{font-size:12px;color:var(--text-1);line-height:1.45;overflow-wrap:anywhere}
.wf-blk-sub{font-size:11px;color:var(--text-3);margin-top:3px}
.wf-blk-sub--stale{color:#fbbf24}
.wf-blk-meta{color:var(--text-3);font-weight:500}
.wf-blk-who{font-weight:700}
.wf-blk-arrow{color:var(--text-3)}
.wf-blk-robot{color:var(--text-2);font-weight:600}
.wf-blk--inv{background:rgba(56,189,248,.06);border-color:rgba(56,189,248,.22)}
.wf-blk--inv .wf-blk-h{color:#7dd3fc}
/* Orden de trabajo: más simple/elegante y un poco más pequeño (Fabian). Fondo casi
   plano, borde tenue, texto compacto. */
.wf-blk--order{background:rgba(192,132,252,.04);border-color:rgba(192,132,252,.14);padding:6px 10px}
.wf-blk--order .wf-blk-h{color:#c4b5fd;font-size:9px;margin-bottom:2px}
.wf-blk--order .wf-blk-body{font-size:11.5px}
.wf-blk--order .wf-blk-who{font-weight:600}
.wf-blk--order .wf-blk-meta{font-size:10.5px}
.wf-blk--done{background:rgba(34,197,94,.06);border-color:rgba(34,197,94,.22)}
.wf-blk--done .wf-blk-h{color:#4ade80}
.wf-done-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.wf-avatar--sm{width:24px;height:24px;font-size:11px;flex:none}
/* Avatar del trabajador: MÁS GRANDE y principal (quién hizo el trabajo destaca) */
.wf-avatar--lg{width:42px;height:42px;font-size:17px;flex:none;box-shadow:0 2px 8px rgba(0,153,255,.35);border:2px solid rgba(255,255,255,.12)}
.wf-done-who{display:flex;flex-direction:column;gap:2px;min-width:0}
.wf-done-who .wf-blk-who{font-size:14px;font-weight:800}
.wf-blk--done .wf-stats{margin:8px 0 0}
/* Fila comparativa Inventario → Contado (verde si coincide, ámbar si no) */
.wf-cmp{display:flex;align-items:center;gap:8px;margin-top:8px;padding:6px 10px;border-radius:8px;font-size:12.5px;font-weight:700;flex-wrap:wrap}
.wf-cmp--ok{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.28)}
.wf-cmp--off{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3)}
.wf-cmp-cell{display:inline-flex;align-items:center;gap:4px;color:var(--text-1)}
.wf-cmp-ic{font-size:11px}
.wf-cmp-inv{color:#7dd3fc}
.wf-cmp-cnt{color:#4ade80}
.wf-cmp-arrow{color:var(--text-3);font-weight:800}
.wf-cmp-mark{margin-left:auto;font-weight:800}
.wf-cmp--ok .wf-cmp-mark{color:#4ade80}
.wf-cmp--off .wf-cmp-mark{color:#fbbf24}
.wf-cmp-delta{font-weight:700;font-size:11.5px}
/* Desglose de vendidas en la fila comparativa: "📦 120 +💰35" */
.wf-cmp-vend{font-size:10.5px;font-weight:700;color:#fbbf24;margin-left:4px}
[data-theme="light"] .wf-cmp-vend{color:#b45309}
[data-theme="light"] .wf-cmp-inv{color:#0284c7}
[data-theme="light"] .wf-cmp-cnt{color:#16a34a}
/* Estado original: badge de color por categoría */
.wf-st-badge{display:inline-block;padding:1px 6px;border-radius:5px;font-size:10px;font-weight:700;background:#ffffff12;color:var(--text-2)}
.wf-st-badge.wf-st-ipm{background:rgba(168,85,247,.22);color:#d8b4fe}
.wf-st-badge.wf-st-failing{background:rgba(239,68,68,.22);color:#fca5a5}
.wf-st-badge.wf-st-treatment{background:rgba(245,158,11,.22);color:#fcd34d}
.wf-st-badge.wf-st-week{background:rgba(56,189,248,.22);color:#7dd3fc}
/* Comentario de orden + memo de inventario (cajita tenue anexa) */
.wf-order-note{font-size:12px;color:var(--text-2);margin-top:5px;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere}
.wf-order-note .wf-order-ic{opacity:.8}
.wf-memo{font-size:11.5px;color:var(--text-2);margin-top:6px;padding:5px 8px;background:#ffffff08;border:1px solid var(--border);border-radius:7px;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere}
.wf-memo-ic{opacity:.8}
/* Discrepancias — resalte SUTIL: línea con ícono + color, SIN caja de fondo */
.wf-discs{display:flex;flex-direction:column;gap:2px;margin:0 14px 8px}
/* BUG FIX: `.wf-discs{display:flex}` pisaba el atributo [hidden] (display:none del UA)
   → el panel nunca se ocultaba/desplegaba bien. Regla explícita para que [hidden] gane. */
.wf-discs[hidden]{display:none}
.wf-disc{font-size:11.5px;font-weight:700;display:flex;align-items:baseline;gap:6px;line-height:1.35}
.wf-disc-ic{flex:none;font-size:11px}
.wf-disc-sub{font-weight:500;color:var(--text-3)}
.wf-disc--alert{color:#f87171}
.wf-disc--info{color:#7dd3fc}
/* Discrepancias (solo admin): botón DISCRETO que despliega al tocar. Chip mínimo,
   tono apagado; ámbar solo si hay alertas reales. */
.wf-disc-wrap{margin:0 14px 8px}
.wf-dt-disc-wrap{margin:0}
.wf-disc-toggle{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;
  color:var(--text-3);background:transparent;border:1px solid var(--border);
  border-radius:14px;padding:3px 9px;cursor:pointer;-webkit-tap-highlight-color:transparent;
  opacity:.72;transition:opacity .15s,color .15s,border-color .15s}
.wf-disc-toggle:hover{opacity:1}
.wf-disc-toggle-ic{font-size:10px;filter:grayscale(.4)}
.wf-disc-toggle-caret{font-size:9px;transition:transform .15s}
.wf-disc-toggle--open{opacity:1}
.wf-disc-toggle--open .wf-disc-toggle-caret{transform:rotate(180deg)}
.wf-disc-toggle--alert{color:#f59e0b;border-color:rgba(245,158,11,.35);opacity:.9}
.wf-disc-toggle--alert .wf-disc-toggle-ic{filter:none}
.wf-disc-wrap .wf-discs{margin:6px 0 0}
[data-theme="light"] .wf-disc-toggle--alert{color:#b45309;border-color:rgba(180,83,9,.3)}
[data-theme="light"] .wf-blk{background:#00000005}
[data-theme="light"] .wf-blk--inv{background:rgba(14,165,233,.07)}
[data-theme="light"] .wf-blk--order{background:rgba(147,51,234,.07)}
[data-theme="light"] .wf-blk--done{background:rgba(22,163,74,.07)}
[data-theme="light"] .wf-disc--alert{color:#dc2626}
[data-theme="light"] .wf-disc--info{color:#0284c7}
[data-theme="light"] .wf-memo{background:#00000006}
/* Header limpio: field badge + tiempo a la derecha del row de misión */
.wf-mission-row--hd .wf-hd-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
/* Fila de tipo/título tappable → abre el detalle */
.wf-mission-row--tap{cursor:pointer;position:relative;border-radius:8px;transition:background .12s}
.wf-mission-row--tap:hover{background:#ffffff06}
.wf-mission-row--tap::after{content:"›";position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--text-3);font-size:18px;font-weight:700;opacity:.5}
/* El header ya lleva field+tiempo a la derecha → sin chevron para no encimar. */
.wf-mission-row--hd.wf-mission-row--tap::after{content:none}
.wf-mission-row--hd{align-items:center}
/* ── Modal "Ver detalle completo" (read-only) ── */
/* Fondo SÓLIDO (sin backdrop-filter): el blur sobre el feed del Work Log (150+ tarjetas con
   foto) + el mapa se re-rasteriza en cada repaint → jank al abrir/escribir/scrollear. Regla
   OASIS: nunca backdrop-filter sobre overlays pesados/mapa. Un fondo más oscuro da el mismo
   contraste sin costo de composición. */
.wf-detail-ov{position:fixed;inset:0;z-index:10000;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.72);padding:0}
@media(min-width:520px){.wf-detail-ov{align-items:center;padding:16px}}
.wf-detail{position:relative;width:100%;max-width:460px;max-height:90svh;overflow-y:auto;overscroll-behavior:contain;background:var(--bg-panel,#111827);border:1px solid rgba(255,255,255,.10);border-radius:16px 16px 0 0;box-shadow:0 -4px 40px rgba(0,0,0,.5);animation:mchm-slide-up .22s ease}
@media(min-width:520px){.wf-detail{border-radius:16px;animation:mchm-pop-in .2s ease}}
.wf-dt-hd{display:flex;align-items:center;gap:10px;padding:14px 14px 12px;border-bottom:1px solid rgba(255,255,255,.07);position:sticky;top:0;background:var(--bg-panel,#111827);z-index:1}
.wf-dt-icon{font-size:22px;flex-shrink:0}
.wf-dt-hd-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.wf-dt-type{font-size:15px;font-weight:700;color:var(--text-1)}
.wf-dt-sub{font-size:11px;color:var(--text-3)}
.wf-dt-close{background:rgba(255,255,255,.08);border:none;color:var(--text-3);cursor:pointer;width:28px;height:28px;border-radius:50%;flex-shrink:0;font-size:13px}
.wf-dt-close:hover{background:rgba(255,255,255,.15)}
.wf-dt-body{padding:6px 14px 16px}
.wf-dt-sec{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.wf-dt-sec:last-child{border-bottom:none}
.wf-dt-sec-t{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-3);margin-bottom:7px}
.wf-dt-row{display:flex;gap:10px;padding:3px 0;font-size:13px;align-items:baseline}
.wf-dt-k{flex:0 0 38%;color:var(--text-3);font-size:12px}
.wf-dt-v{flex:1;min-width:0;color:var(--text-1);font-weight:600;word-break:break-word}
.wf-dt-notes{font-size:13px;color:var(--text-1);line-height:1.5;white-space:pre-wrap;word-break:break-word;background:#ffffff05;border-radius:8px;padding:9px 11px}
.wf-dt-stats{margin:0 0 8px}
.wf-dt-photo{margin-top:10px;border-radius:10px;overflow:hidden;background:#0006;min-height:60px;position:relative}
.wf-dt-img{display:block;width:100%;height:auto}
[data-theme="light"] .wf-detail{background:#fff}
[data-theme="light"] .wf-dt-hd{background:#fff}
[data-theme="light"] .wf-mission-row--tap:hover{background:#0000000a}
.wf-pri--alta{background:rgba(239,68,68,.15);color:#ef4444}
.wf-pri--media{background:rgba(234,179,8,.12);color:#ca8a04}
.wf-pri--baja{background:rgba(99,102,241,.12);color:#818cf8}

/* Reactions footer */
.wf-reactions{display:flex;gap:6px;padding:8px 12px 12px;border-top:1px solid #ffffff08}
.wf-react{display:flex;align-items:center;gap:5px;background:var(--bg-2);border:1px solid var(--border);border-radius:20px;padding:6px 12px;font-size:12px;font-weight:600;color:var(--text-2);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.wf-react:active{transform:scale(.94)}
/* 3 tap reactions, distinct color palettes so users see at a glance which is which */
/* 👍 like — sky blue */
.wf-react--liked{background:rgba(59,130,246,.15);color:#60a5fa;border-color:rgba(59,130,246,.35)}
/* 💪 fuerza/apoyo — emerald green */
.wf-react--fuerza-on{background:rgba(16,185,129,.15);color:#34d399;border-color:rgba(16,185,129,.4)}
/* ❤️ corazón — classic red */
.wf-react--corazon-on{background:rgba(239,68,68,.15);color:#f87171;border-color:rgba(239,68,68,.4)}
.wf-fuerza-count,.wf-corazon-count{font-weight:700;min-width:10px;text-align:left}
.wf-react--loading{opacity:.5;pointer-events:none}
.wf-react-icon{font-size:15px;line-height:1}

/* People filter — collapsible 2-column checkbox grid */
.wf-people-toggle{display:inline-flex;align-items:center;gap:5px}
.wf-people-caret{font-size:11px;opacity:.8;transition:transform .2s}
.wf-people-open .wf-people-caret{transform:rotate(180deg)}
.wf-people-count{font-size:11px;font-weight:800;color:#fbbf24}
.wf-people-panel{margin:6px 12px 8px;padding:10px;background:#0b1322;border:1px solid #1e2a3f;border-radius:12px}
.wf-people-actions{display:flex;gap:8px;margin-bottom:10px;border-bottom:1px solid #1e2a3f;padding-bottom:10px}
.wf-people-mini{background:#1e3a5f;border:none;color:#93c5fd;padding:6px 14px;border-radius:6px;font-size:12px;font-weight:700;cursor:pointer;transition:background-color .15s}
.wf-people-mini:hover{background:#2553a5}
.wf-people-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px}
.wf-people-row{display:flex;align-items:center;gap:8px;padding:7px 4px;border-radius:8px;cursor:pointer;transition:background-color .12s;-webkit-tap-highlight-color:transparent;min-height:40px}
.wf-people-row:hover{background:#ffffff08}
.wf-people-cb{width:18px;height:18px;accent-color:#3b82f6;cursor:pointer;flex-shrink:0}
.wf-people-row .wf-person-av{width:26px;height:26px;border-radius:50%;background:#3b82f6;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;overflow:hidden}
.wf-people-row .wf-person-av-img{width:100%;height:100%;object-fit:cover}
.wf-person-nm{font-size:13px;color:#e2e8f0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
@media(max-width:480px){
  .wf-people-grid{grid-template-columns:1fr 1fr;gap:4px 8px}
  .wf-person-nm{font-size:12px}
}

/* Visual separator between photo filter and date chips */
.wf-filter-sep{display:inline-block;width:1px;background:#1e2a3f;margin:0 4px;align-self:stretch}

/* "Más filtros" panel — same family as people-panel */
.wf-more-toggle{display:inline-flex;align-items:center;gap:5px}
.wf-more-count{font-size:11px;font-weight:800;color:#fbbf24}
.wf-more-panel{margin:6px 12px 8px;padding:10px;background:#0b1322;border:1px solid #1e2a3f;border-radius:12px}
.wf-more-sec{margin-bottom:12px}
.wf-more-sec:last-of-type{margin-bottom:0}
.wf-more-label{font-size:11px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px}
.wf-more-chips{display:flex;flex-wrap:wrap;gap:6px}
.wf-more-chip{background:#ffffff08;border:1.5px solid #ffffff15;color:#cbd5e1;padding:7px 12px;border-radius:18px;cursor:pointer;font-size:13px;font-weight:600;transition:background-color .15s,border-color .15s;-webkit-tap-highlight-color:transparent;min-height:36px}
.wf-more-chip-sel{background:#3b82f626;border-color:#3b82f6;color:#93c5fd}
.wf-more-chip-res-ok.wf-more-chip-sel {background:#22c55e22;border-color:#22c55e;color:#86efac}
.wf-more-chip-res-mid.wf-more-chip-sel{background:#f59e0b22;border-color:#f59e0b;color:#fcd34d}
.wf-more-chip-res-bad.wf-more-chip-sel{background:#ef444422;border-color:#ef4444;color:#fca5a5}
.wf-more-empty{color:#64748b;font-size:12px;font-style:italic}
.wf-more-actions{display:flex;justify-content:flex-end;padding-top:8px;border-top:1px solid #1e2a3f;margin-top:4px}

/* Helpers collapsible toggle in mission-complete modal */
.inv-cd-helpers-toggle{width:100%;display:flex;align-items:center;gap:8px;background:#ffffff08;border:1.5px solid #ffffff15;color:var(--text-2);padding:10px 14px;border-radius:10px;cursor:pointer;font-size:13px;font-weight:600;margin-bottom:8px;text-align:left;-webkit-tap-highlight-color:transparent;min-height:44px}
.inv-cd-helpers-toggle:hover{background:#ffffff10;border-color:#3b82f640}
.inv-cd-helpers-toggle-icon{font-size:16px}
.inv-cd-helpers-toggle-text{flex:1;text-transform:uppercase;font-size:13px;font-weight:700;letter-spacing:.3px;color:var(--text-2)}
.inv-cd-helpers-toggle-text .inv-cd-opt{text-transform:none;font-weight:500;letter-spacing:0}
.inv-cd-helpers-count{font-size:12px;font-weight:800;color:#fbbf24}
.inv-cd-helpers-caret{font-size:12px;color:var(--text-3);transition:transform .2s}
.inv-cd-helpers-toggle.inv-cd-helpers-open .inv-cd-helpers-caret{transform:rotate(180deg)}
.inv-cd-helpers-toggle.inv-cd-helpers-open{background:#3b82f615;border-color:#3b82f640;color:#93c5fd}
/* Pest toggle — purple override */
#inv-cd-pests-toggle{border-color:#a855f730}
#inv-cd-pests-toggle:hover{background:#a855f712;border-color:#a855f750}
#inv-cd-pests-toggle.inv-cd-helpers-open{background:#a855f718;border-color:#a855f770;color:#d8b4fe}
#inv-cd-pests-toggle .inv-cd-helpers-count{color:#c084fc}

/* Multi-plant selector in create-mission modal — scrollable rich-info list.
   Each row shows: name (full, wraps), status chip, location/size/item_code,
   qty/vendidas, memo. Larger min-height to accommodate the multi-line layout. */
.inv-cm-plants-list{margin-bottom:14px;background:#0b1322;border:1.5px solid #1e2a3f;border-radius:10px;padding:8px;max-height:380px;overflow-y:auto;contain:paint}
.inv-cm-plants-quick{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid #1e2a3f}

/* Legacy single-line row (kept for fallbacks) */
.inv-cm-plant-row{display:flex;align-items:flex-start;gap:10px;padding:10px 8px;border-radius:8px;cursor:pointer;transition:background-color .12s;-webkit-tap-highlight-color:transparent;min-height:44px;border-bottom:1px solid #ffffff08}
.inv-cm-plant-row:last-child{border-bottom:none}
.inv-cm-plant-row:hover{background:#ffffff06}
.inv-cm-plant-cb{width:20px;height:20px;accent-color:#3b82f6;cursor:pointer;flex-shrink:0;margin-top:2px}

/* Rich multi-line row */
.inv-cm-plant-row--rich .inv-cm-plant-row-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.inv-cm-plant-row-line1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.inv-cm-plant-row-name{font-size:14px;font-weight:800;color:var(--text-1);line-height:1.3;word-break:break-word;flex:1;min-width:0}
.inv-cm-plant-status{font-size:10px;font-weight:800;padding:2px 7px;border-radius:8px;letter-spacing:.3px;flex-shrink:0;line-height:1.4}
.inv-cm-plant-status-fail{background:#ef444425;color:#fca5a5;border:1px solid #ef444460}
.inv-cm-plant-status-ipm{background:#a855f725;color:#e9d5ff;border:1px solid #a855f760}
.inv-cm-plant-row-meta-full{font-size:11px;color:var(--text-2);line-height:1.4;font-weight:500}
.inv-cm-plant-row-stats{font-size:11px;color:#86efac;font-weight:700}
.inv-cm-plant-row-memo{font-size:11px;color:#fcd34d;background:#f59e0b15;border-left:2px solid #f59e0b80;padding:3px 7px;border-radius:0 6px 6px 0;font-style:italic;margin-top:2px}

@media(max-width:480px){
  .inv-cm-plant-row-name{font-size:13px}
  .inv-cm-plant-row-meta-full,.inv-cm-plant-row-stats,.inv-cm-plant-row-memo{font-size:10px}
}
.wf-like-count{font-weight:700;min-width:8px}
.wf-like-names{font-size:10px;color:var(--text-2);font-weight:400;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wf-react--tip:hover{background:rgba(234,179,8,.1);color:#d4a800;border-color:rgba(234,179,8,.3)}

/* Tips / comments section */
.wf-tips-section{padding:0 12px 14px;display:flex;flex-direction:column;gap:10px}
.wf-tips-list{display:flex;flex-direction:column;gap:8px}
.wf-tip-item{display:flex;gap:8px;align-items:flex-start}
.wf-tip-av{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;text-transform:uppercase}
.wf-tip-body{flex:1;min-width:0;background:var(--bg-2);border-radius:0 10px 10px 10px;padding:8px 10px;border:1px solid var(--border)}
.wf-tip-name{font-size:12px;font-weight:700;color:var(--text-1);display:block;margin-bottom:2px}
.wf-tip-text{margin:0;font-size:12px;color:var(--text-2);line-height:1.5;white-space:pre-wrap;word-break:break-word}
.wf-tip-time{display:block;font-size:10px;color:var(--text-2);margin-top:4px}
.wf-tip-form{display:flex;gap:6px;flex-direction:column}
.wf-tip-input{background:var(--bg-2);border:1px solid var(--border);border-radius:10px;color:var(--text-1);font-size:13px;padding:8px 10px;resize:none;width:100%;box-sizing:border-box;font-family:inherit;transition:border-color .15s}
.wf-tip-input:focus{outline:none;border-color:var(--accent)}
.wf-tip-submit{align-self:flex-end;background:linear-gradient(135deg,#00c48c,#0099ff);color:#fff;border:none;border-radius:10px;padding:7px 14px;font-size:12px;font-weight:700;cursor:pointer;transition:opacity .15s}
.wf-tip-submit:disabled{opacity:.5;cursor:default}

/* Load more */
.wf-load-more{display:block;margin:20px auto 0;padding:11px 32px;border-radius:24px;background:var(--bg-card);border:1px solid var(--border);color:var(--text-1);font-size:14px;font-weight:600;cursor:pointer;transition:background .15s}
.wf-load-more:hover{background:var(--bg-2)}
.wf-load-more:active{transform:scale(.97)}
/* ⏬ Cargar TODO el historial (elección explícita al filtrar — audita sin perder misiones) */
.wf-load-all{display:block;margin:8px auto 0;padding:8px 26px;border-radius:24px;background:none;border:1px dashed var(--border);color:var(--text-3);font-size:12.5px;font-weight:600;cursor:pointer}
.wf-load-all:hover{color:var(--text-1);border-style:solid}

/* Light theme overrides */
[data-theme="light"] .wf-card{box-shadow:0 2px 12px rgba(0,0,0,.08);background:#fff}
[data-theme="light"] .wf-photo-wrap{background:#f1f5f9}
[data-theme="light"] .wf-photo-shimmer{background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%);background-size:200% 100%}
[data-theme="light"] .wf-bubble-body{background:#f8fafc;border-color:var(--border)}
[data-theme="light"] .wf-chip{background:#f1f5f9}
[data-theme="light"] .wf-reactions{border-top-color:var(--border)}
[data-theme="light"] .wf-react{background:#f1f5f9}
[data-theme="light"] .wf-tip-body{background:#f8fafc;border-color:var(--border)}
[data-theme="light"] .wf-tip-input{background:#f1f5f9}
[data-theme="light"] .wf-load-more{background:#fff}

/* Historial lazy hint */
.inv-hist-lazy-hint{text-align:center;color:var(--text-2);padding:32px 16px;font-size:13px}

/* Avatar with profile photo */
.wf-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#00c48c,#0099ff);color:#fff;font-size:15px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;text-transform:uppercase;overflow:hidden}
.wf-avatar-img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.wf-avatar-initial{line-height:1;font-size:13px;letter-spacing:-.3px}

/* Person filter chips */
.wf-person-btn{display:flex;align-items:center;gap:5px;padding:5px 10px 5px 5px}
.wf-person-av{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.wf-person-av-img{width:100%;height:100%;object-fit:cover;border-radius:50%}

/* Settings — profile photo section */
.stg-profile-section{display:flex;gap:16px;align-items:flex-start}
.stg-profile-avatar{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#00c48c,#0099ff);color:#fff;font-size:26px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;box-shadow:0 2px 10px rgba(0,196,140,.3)}
.stg-profile-img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.stg-profile-initial{line-height:1}
.stg-profile-info{display:flex;flex-direction:column;gap:4px;min-width:0}
.stg-profile-name{font-size:16px;font-weight:700;color:var(--text-1)}
.stg-profile-role{font-size:12px;color:var(--text-2);text-transform:capitalize;margin-bottom:4px}
.stg-profile-actions{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.stg-profile-upload-lbl{cursor:pointer}
.stg-profile-hint{font-size:11px;color:var(--text-2);font-style:italic}

/* Mobile */
@media(max-width:520px){
  .wf-list{padding:0 6px;gap:10px}
  .wf-photo{max-height:420px}
  .m-spd-fab{bottom:58px;left:8px}
  .wf-card-hd{padding:12px 12px 8px}
  .wf-mission-row,.wf-chips{padding-left:12px;padding-right:12px}
  .wf-bubble{margin-left:10px;margin-right:10px}
  .wf-reactions{padding:6px 10px 10px}
}

/* Card header */
.wf-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 8px;
}
.wf-type-badge {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}
.wf-card-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wf-type-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wf-field-tag {
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.wf-time {
  font-size: 11px;
  color: var(--text-2);
  flex-shrink: 0;
  white-space: nowrap;
}

/* Card title */
.wf-card-title {
  padding: 0 16px 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.3;
}

/* Photo */
.wf-photo-wrap {
  width: 100%;
  background: var(--bg-2);
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: zoom-in;
}
.wf-photo {
  width: 100%;
  display: block;
  object-fit: cover;
  max-height: 520px;
  min-height: 200px;
  background: var(--bg-2);
  transition: opacity .2s;
}
.wf-photo[src=""] { opacity: 0; }

/* Card body */
.wf-card-body {
  padding: 12px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wf-worker {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wf-worker-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.wf-worker-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
}
.wf-notes {
  margin: 0;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
  white-space: pre-wrap;
}
.wf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.wf-chip {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--bg-2);
  color: var(--text-2);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.wf-chip--pri { font-weight: 600; border: none; }
.wf-pri--alta { background: rgba(239,68,68,.15); color: #ef4444; }
.wf-pri--media { background: rgba(234,179,8,.12); color: #ca8a04; }
.wf-pri--baja { background: rgba(99,102,241,.12); color: #818cf8; }

/* Load more */
.wf-load-more {
  display: block;
  margin: 24px auto 0;
  padding: 12px 32px;
  border-radius: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-1);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.wf-load-more:hover { background: var(--bg-2); }
.wf-load-more:active { transform: scale(.97); }

/* Light theme */
[data-theme="light"] .wf-card {
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  background: #fff;
}
[data-theme="light"] .wf-photo-wrap { background: #f1f5f9; }
[data-theme="light"] .wf-chip { background: #f1f5f9; }
[data-theme="light"] .wf-load-more { background: #fff; }
[data-theme="light"] .wf-load-more:hover { background: #f8fafc; }

/* Mobile */
@media (max-width: 520px) {
  .wf-list { padding: 0 8px; gap: 12px; }
  .wf-photo { max-height: 420px; }
}

/* ── Work Log — paleta PASTEL apagada sobre el tema oscuro (2026-06-14) ───────
   Un solo bloque al final → gana en cascada sobre el bloque activo (19564+) y el
   legacy (19905+) sin tocarlos. Acentos suaves/lavados; la card sigue oscura. */
.wf-card{border-color:rgba(184,176,214,.16);box-shadow:0 2px 16px rgba(35,25,65,.26)}
.wf-avatar{background:linear-gradient(135deg,#b9a7e6,#9fc0e8);color:#2b2747}
.wf-field-badge{color:#b3a6e6}
.wf-plant-tag{color:#8fd3b0}
.wf-result--ok{background:rgba(134,209,169,.14);color:#9adcb6}
.wf-result--partial{background:rgba(240,210,140,.14);color:#ecd28e}
.wf-result--no{background:rgba(244,160,170,.14);color:#f4a8b2}
.wf-chip{background:rgba(184,176,214,.10);color:#cbc4e4;border-color:rgba(184,176,214,.22)}
.wf-chip--meta{background:rgba(140,184,230,.12);border-color:rgba(140,184,230,.26);color:#aecdef}
.wf-pri--alta{background:rgba(244,160,170,.16);color:#f4a8b2}
.wf-pri--media{background:rgba(240,210,140,.16);color:#ecd28e}
.wf-pri--baja{background:rgba(184,176,214,.18);color:#c2bbec}
.wf-bubble-body{background:rgba(184,176,214,.07);border-color:rgba(184,176,214,.16)}
.wf-react--liked{background:rgba(140,184,230,.16);color:#aecdef;border-color:rgba(140,184,230,.32)}
.wf-react--fuerza-on{background:rgba(134,209,169,.16);color:#9adcb6;border-color:rgba(134,209,169,.32)}
.wf-react--corazon-on{background:rgba(244,160,170,.16);color:#f4a8b2;border-color:rgba(244,160,170,.32)}

/* ── Inventory Digest View (docs/PLAN-INVENTORY-DIGEST.md F6) ─────────────── */
.idc-shell{padding:12px;max-width:800px;margin:0 auto}
/* Cabecera FIJA (sticky): título+stats+filtros no se van con el scroll de las fotos.
   Márgenes negativos para pegar al borde del scroll y fondo sólido opaco. Compacta. */
.idc-sticky-head{position:sticky;top:0;z-index:20;
  margin:-12px -12px 10px;padding:8px 12px 6px;
  background:var(--bg-1);border-bottom:1px solid var(--border);
  box-shadow:0 2px 6px rgba(0,0,0,.18)}
.idc-topbar{display:flex;align-items:center;justify-content:space-between;
            margin-bottom:6px;flex-wrap:wrap;gap:6px}
.idc-title{font-size:15px;font-weight:800;color:var(--text-1);margin:0}
.idc-stat{font-size:12px;font-weight:700;padding:2px 9px;border-radius:20px;
          background:var(--bg-3);color:var(--text-2)}
.idc-stat--pending{background:#fef3c7;color:#92400e;border:1px solid #fcd34d}

/* Filtros (compactos) */
.idc-filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:0}
.idc-filter-input{flex:1;min-width:110px;padding:6px 10px;border-radius:8px;
                  border:1px solid var(--border);background:var(--bg-3);
                  color:var(--text-1);font-size:13px}
.idc-filter-toggle{display:flex;align-items:center;gap:5px;font-size:12px;
                   color:var(--text-2);cursor:pointer;padding:5px 9px;
                   border-radius:8px;border:1px solid var(--border)}

/* Lista */
.idc-list{display:flex;flex-direction:column;gap:10px}
.idc-list--loading{opacity:.55;transition:opacity .15s ease}
.idc-empty{text-align:center;padding:40px;color:var(--text-2);font-size:15px}
.idc-loading{text-align:center;padding:20px;color:var(--text-2);font-size:14px}
.idc-error{padding:16px;color:#ef4444;background:#1c0404;border-radius:8px}

/* Tarjeta */
.idc-card{border-radius:16px;overflow:hidden;border:1px solid var(--border);
          background:var(--bg-card);cursor:default;contain:paint;
          box-shadow:0 2px 12px rgba(0,0,0,.10);
          transition:opacity .2s,box-shadow .2s}
.idc-card:hover{box-shadow:0 6px 22px rgba(0,0,0,.16)}
.idc-card--reviewed{opacity:.55}
.idc-card--reviewed .idc-update-badge{display:none}
/* Badge de discrepancia (faltante/sobrante fuera de banda) — prioriza al revisar */
.idc-disc-badge{font-size:10.5px;font-weight:800;color:#fff;background:linear-gradient(180deg,#ef4444,#dc2626);border-radius:10px;padding:2px 8px;box-shadow:0 1px 5px rgba(239,68,68,.4)}
/* Badge de cambio de estatus (RET↔LND) — inventario debe actualizar el grupo */
.idc-flip-badge{font-size:10.5px;font-weight:800;color:#fff;background:linear-gradient(180deg,#8b5cf6,#7c3aed);border-radius:10px;padding:2px 8px;box-shadow:0 1px 5px rgba(139,92,246,.4)}
/* Sub-nota de grupo dividido bajo la fila comparativa */
.idc-cmp-sib{margin:0 14px 6px;font-size:11px;font-weight:600;color:#6b7280;line-height:1.35}
/* Faltante explicado por 🥀 failing: dump pendiente, no plantas perdidas */
.idc-cmp-fail{margin:0 14px 6px;font-size:11px;font-weight:600;color:#c62828;line-height:1.35}
/* Fila comparativa banda [qty..qty+vendidas] en la tarjeta del digest */
.idc-cmp{display:flex;align-items:center;gap:8px;margin:6px 14px;padding:6px 10px;border-radius:8px;font-size:12.5px;font-weight:700;flex-wrap:wrap}
.idc-cmp--ok{background:rgba(34,197,94,.09);border:1px solid rgba(34,197,94,.3);color:#166534}
.idc-cmp--off{background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.4);color:#92400e}
.idc-cmp-arrow{opacity:.6}
.idc-cmp-mark{margin-left:auto;font-weight:800}
.idc-cmp-vend{font-size:10.5px;margin-left:3px;opacity:.85}

.idc-prio--alta{background:#fff1f1;border-color:#f5b5b5}
.idc-prio--media{background:#fff9ea;border-color:#f3d499}
.idc-prio--baja{background:#eef5ff;border-color:#b6d2f5}

/* Header */
.idc-header{display:flex;justify-content:space-between;align-items:center;
            padding:14px 16px 2px;gap:10px;flex-wrap:wrap}
/* Subdivisión por letra (p.ej. OC72-L) — identificador grande y prominente */
.idc-loc{flex:1;min-width:0;font-size:26px;font-weight:900;color:#0b1220;
         letter-spacing:.4px;line-height:1.05;word-break:break-word}
.idc-badges{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.idc-prio-badge,.idc-update-badge,.idc-reviewed-badge{font-size:11px;font-weight:700;
  padding:3px 8px;border-radius:20px;white-space:nowrap}
.idc-prio--alta  .idc-prio-badge{background:#fee2e2;color:#b91c1c;border:1px solid #fca5a5}
.idc-prio--media .idc-prio-badge{background:#fef3c7;color:#b45309;border:1px solid #fcd34d}
.idc-prio--baja  .idc-prio-badge{background:#dbeafe;color:#1d4ed8;border:1px solid #93c5fd}
.idc-update-badge{background:#e0f2fe;color:#0369a1;border:1px solid #7dd3fc}
.idc-reviewed-badge{background:#dcfce7;color:#15803d;border:1px solid #86efac}

/* Planta */
.idc-plant{display:flex;align-items:center;gap:8px;margin:10px 14px 0;padding:10px 12px;
           background:linear-gradient(135deg,#e7efd3,#d6e3bd);
           border-left:4px solid #7d9054;border-radius:8px}
.idc-plant-icon{font-size:18px}
.idc-plant-name{font-size:19px;font-weight:900;color:#14210a;flex:1;min-width:0;
                word-break:break-word}
/* Conteo destacado: pill con número grande */
.idc-plant-qty{font-size:13px;color:#3a4d18;font-weight:800;white-space:nowrap;
               background:rgba(125,144,84,.22);border:1px solid rgba(125,144,84,.5);
               padding:4px 11px;border-radius:20px;line-height:1}
.idc-plant-qty b{font-size:17px;font-weight:900;color:#28350f}

/* Divider */
.idc-divider{border:none;border-top:1px solid rgba(0,0,0,.08);margin:10px 14px}

/* Acción / descripción — grande y negrita para lectura rápida */
.idc-action-row{display:flex;align-items:center;gap:10px;padding:2px 16px;
                flex-wrap:wrap}
.idc-action{font-size:18px;font-weight:900;color:#0b1220;flex:1;min-width:0;
            line-height:1.25;word-break:break-word}
.idc-result{font-size:13px;font-weight:800;padding:4px 11px;border-radius:20px;
            background:#f0fdf4;color:#15803d;border:1px solid #86efac;
            white-space:nowrap}

/* Metadatos estructurados (salud / conteos / plagas) — chips traducidos */
.idc-meta{display:flex;flex-wrap:wrap;gap:6px;padding:6px 14px 2px}
.idc-meta-chip{font-size:12px;font-weight:800;color:#3a4d18;line-height:1.4;
               background:rgba(125,144,84,.18);border:1px solid rgba(125,144,84,.42);
               padding:3px 10px;border-radius:20px;white-space:nowrap}

/* Notas — la observación libre del trabajador, resaltada en negrita */
.idc-notes{font-size:15px;color:#1f2937;font-weight:800;font-style:italic;
           padding:9px 14px;margin:6px 14px;background:rgba(0,0,0,.05);
           border-radius:6px;line-height:1.35}
.idc-notes-text{display:block}
.idc-translate-btn{display:inline-block;margin-top:6px;font-size:11px;font-weight:600;
  font-style:normal;color:#0284c7;background:rgba(2,132,199,.08);
  border:1px solid rgba(2,132,199,.22);border-radius:14px;padding:3px 10px;
  cursor:pointer;-webkit-tap-highlight-color:transparent}
.idc-translate-btn:disabled{opacity:.6;cursor:default}
.idc-crew{font-size:12px;color:#6b7280;padding:0 14px 4px}

/* Foto inline — tap para ampliar (lightbox) */
.idc-photo{margin:8px 14px;position:relative;cursor:zoom-in}
.idc-photo img{width:100%;max-height:420px;object-fit:cover;border-radius:10px;
               border:1px solid rgba(0,0,0,.12);display:block}
.idc-photo-hint{position:absolute;bottom:10px;right:10px;
                background:rgba(0,0,0,.62);color:#fff;font-size:11px;font-weight:700;
                padding:4px 9px;border-radius:20px;pointer-events:none}
.idc-photo--loading{height:150px;border-radius:10px;background:rgba(120,120,140,.12);
                    animation:idc-photo-pulse 1.2s ease-in-out infinite}
@keyframes idc-photo-pulse{0%,100%{opacity:.45}50%{opacity:.9}}

/* Footer */
.idc-footer{display:flex;align-items:center;justify-content:space-between;
            padding:10px 14px 12px;flex-wrap:wrap;gap:8px}
.idc-worker{display:flex;align-items:center;gap:8px}
.idc-avatar{width:26px;height:26px;border-radius:50%;background:#3b82f6;color:#fff;
            display:flex;align-items:center;justify-content:center;
            font-weight:900;font-size:13px;flex-shrink:0}
.idc-worker-name{font-size:13px;font-weight:700;color:#374151}
.idc-date{font-size:12px;color:#9ca3af;margin-left:4px}
.idc-actions{display:flex;gap:6px}
.idc-btn{font-size:12px;font-weight:700;padding:6px 12px;border-radius:8px;
         border:1px solid transparent;cursor:pointer;text-decoration:none;
         display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.idc-btn--photo{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}
.idc-btn--photo:hover{background:#dbeafe}
.idc-btn--review{background:#f0fdf4;color:#15803d;border-color:#86efac}
.idc-btn--review:hover{background:#dcfce7}
.idc-btn--reload{background:var(--bg-3);color:var(--text-2);
                 border-color:var(--border)}

/* ════════════ Dossier privado (vista fabian) ════════════ */
.dsr-shell{max-width:920px;margin:0 auto;padding:16px}
.dsr-loading,.dsr-error{text-align:center;padding:48px 16px;color:var(--text-3)}
.dsr-error small{color:var(--text-3)}
.dsr-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;
             flex-wrap:wrap;margin-bottom:16px}
.dsr-tb-title{font-weight:800;font-size:1.05rem}
.dsr-tb-sub{color:var(--text-3);font-size:.8rem;margin-left:8px}
.dsr-tb-right{display:flex;gap:8px;align-items:center}
.dsr-pick{padding:8px 10px;border-radius:8px;background:var(--bg-3);color:var(--text);
          border:1px solid var(--border)}
.dsr-btn{padding:9px 16px;border-radius:8px;border:none;cursor:pointer;font-weight:700}
.dsr-print{background:#2d6a4f;color:#fff}
.dsr-print:hover{background:#1b4332}

/* Papel — se ve como el documento impreso (también sirve de preview de la impresión) */
.dsr-paper{background:#fbfaf7;color:#1a1a1a;border-radius:10px;padding:48px 56px;
           box-shadow:0 8px 40px rgba(0,0,0,.4);font-family:Georgia,'Times New Roman',serif;
           line-height:1.55}
.dsr-head{border-bottom:2px solid #1a1a1a;padding-bottom:14px;margin-bottom:28px}
.dsr-brand{font-size:2.4rem;font-weight:700;letter-spacing:.18em}
.dsr-brand-sub{font-style:italic;color:#555;margin-top:2px}
.dsr-confidential{margin-top:10px;font-family:system-ui,sans-serif;font-size:.7rem;
                  letter-spacing:.15em;text-transform:uppercase;color:#8a1c1c;font-weight:800}
.dsr-asof{font-family:system-ui,sans-serif;font-size:.72rem;color:#666;margin-top:6px}
.dsr-asof code{background:#eee;padding:1px 5px;border-radius:3px}
.dsr-rep{margin:34px 0;page-break-inside:avoid}
.dsr-h2{font-size:1.4rem;border-bottom:1px solid #ccc;padding-bottom:6px;margin-bottom:10px}
.dsr-lead{font-style:italic;color:#444;margin:0 0 16px}
.dsr-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
           font-family:system-ui,sans-serif}
.dsr-stat{border:1px solid #ddd;border-radius:8px;padding:14px;background:#fff}
.dsr-stat-v{font-size:1.7rem;font-weight:800;font-variant-numeric:tabular-nums;color:#1b4332}
.dsr-stat-l{font-size:.8rem;font-weight:700;margin-top:2px}
.dsr-stat-s{font-size:.72rem;color:#777;margin-top:2px}
.dsr-callout{margin-top:18px;padding:14px 16px;border-left:4px solid #2d6a4f;
             background:#f0f5f2;font-size:.95rem}
.dsr-quote{border-left:4px solid #999;margin:14px 0;padding:8px 16px;font-style:italic;
           color:#333;background:#f6f5f2}
.dsr-list{margin:12px 0;padding-left:22px}
.dsr-list li{margin:5px 0}
.dsr-note{font-family:system-ui,sans-serif;font-size:.82rem;background:#fff7e6;
          border:1px solid #f0d9a0;border-radius:6px;padding:10px 12px;margin-top:14px}
.dsr-table{width:100%;border-collapse:collapse;margin:10px 0;font-size:.92rem}
.dsr-table th{text-align:left;width:34%;vertical-align:top;padding:7px 10px;background:#f2f1ed;
              border:1px solid #e0ded8}
.dsr-table td{padding:7px 10px;border:1px solid #e0ded8}
.dsr-val{text-align:center;margin:16px 0}
.dsr-val-big{font-size:2.2rem;font-weight:800;color:#1b4332}
.dsr-val-sub{font-family:system-ui,sans-serif;font-size:.78rem;color:#777}
.dsr-foot{margin-top:30px;border-top:1px solid #ccc;padding-top:10px;
          font-family:system-ui,sans-serif;font-size:.68rem;color:#888;text-align:center}
/* Filtro de reporte por el selector */
.dsr-paper[data-show="r1"] .dsr-rep:not([data-rep="r1"]),
.dsr-paper[data-show="r2"] .dsr-rep:not([data-rep="r2"]),
.dsr-paper[data-show="r3"] .dsr-rep:not([data-rep="r3"]),
.dsr-paper[data-show="r4"] .dsr-rep:not([data-rep="r4"]){display:none}
@media(max-width:640px){
  .dsr-paper{padding:24px 18px}
  .dsr-stats{grid-template-columns:1fr 1fr}
}
/* Impresión: solo el papel, a página completa */
@media print{
  /* :has() scopea el reset SOLO cuando el dossier está montado en el DOM; sin esto, Ctrl+P en
     CUALQUIER otra vista imprimía en blanco (este body * pisaba el @media print de tarjetas ~l.16121). */
  body:has(.dsr-shell) *{visibility:hidden}
  .dsr-shell,.dsr-shell *{visibility:visible}
  .no-print{display:none!important}
  .dsr-shell{position:absolute;left:0;top:0;width:100%;max-width:none;padding:0;margin:0}
  .dsr-paper{box-shadow:none;border-radius:0;background:#fff;padding:0 8mm}
  .dsr-rep{page-break-inside:avoid}
  @page{margin:14mm}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Form de misiones v2 — tiles con miniatura, URGENTE, notas inteligentes,
   validaciones suaves, editor admin ⚙️ y celebración con frases del equipo.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tiles (miniatura + nombre) ── */
.cm-tiles{display:grid;gap:8px}
.cm-tiles-3{grid-template-columns:repeat(3,1fr)}
.cm-tiles-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:380px){.cm-tiles-4{grid-template-columns:repeat(3,1fr)}}
.cm-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;background:#ffffff08;border:1.5px solid #ffffff15;border-radius:14px;padding:8px 4px 7px;cursor:pointer;min-height:86px;text-align:center;transition:background-color .15s,border-color .15s,transform .1s;-webkit-tap-highlight-color:transparent;contain:paint}
.cm-tile:active{transform:scale(.96)}
/* Miniatura MÁS GRANDE = más clara. La imagen del admin rellena casi todo el
   ancho del tile; el emoji default también crece. */
.cmt-media{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:12px;background:#ffffff0a;overflow:hidden;flex:none}
.cmt-img{width:100%;height:100%;object-fit:cover;border-radius:12px;display:block}
.cmt-emoji{font-size:32px;line-height:1}
.cmt-name{font-size:11.5px;font-weight:700;line-height:1.15;color:#cbd5e1;overflow-wrap:break-word;max-width:100%}
/* ── Tile CON imagen: la foto llena TODO el marco, nombre sobrepuesto abajo ── */
.cm-tile--img{padding:0;overflow:hidden;justify-content:flex-end;min-height:104px}
.cm-tile--img .cmt-media{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;background:none}
.cm-tile--img .cmt-img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
/* Nombre sobre la foto SIN caja/sombreado negro: el texto se lee por su CONTORNO (sombras
   que abrazan las letras, dejando ver la imagen alrededor) + tipografía grande y blanca.
   Más claro y legible sobre fotos claras (Retail/Landscape/Semanal) sin el velo oscuro. */
.cm-tile--img .cmt-name{position:relative;z-index:1;width:100%;box-sizing:border-box;padding:8px 5px 8px;color:#fff;font-size:13.5px;font-weight:800;letter-spacing:.2px;background:none;text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 3px rgba(0,0,0,.8),-1px -1px 1px rgba(0,0,0,.55),1px -1px 1px rgba(0,0,0,.55),-1px 1px 1px rgba(0,0,0,.55),1px 1px 1px rgba(0,0,0,.55)}
/* Sobre la foto el texto SIEMPRE va blanco (también en tema claro): la regla clara de .cmt-name
   lo volvería oscuro e ilegible sobre la imagen. Mayor especificidad → gana. */
[data-theme="light"] .cm-tile--img .cmt-name{color:#fff}
.cmt-check{position:absolute;top:5px;right:5px;width:18px;height:18px;border-radius:50%;background:#22c55e;color:#04150a;font-size:12px;font-weight:900;line-height:18px;text-align:center;opacity:0;transform:scale(.5);transition:opacity .15s,transform .15s;pointer-events:none}
.cm-tile.inv-cd-hpill-sel .cmt-check,
.cm-tile.inv-cd-pchip-sel .cmt-check,
.cm-tile.inv-cm-act-sel .cmt-check{opacity:1;transform:scale(1)}
/* Los tiles heredan los colores de selección de sus clases lógicas existentes
   (inv-cd-hpill--good/-mid/-bad, inv-cd-pchip-sel, inv-cm-act--cat) — el borde
   y fondo seleccionados ya vienen de esas reglas. Ajustes de forma solamente: */
.cm-tile.inv-cd-hpill{flex:none;padding:9px 4px 7px;font-size:11.5px}
.cm-tile.inv-cd-pchip{border-radius:14px;padding:9px 4px 7px;font-size:11.5px;border-color:#a855f730;background:#a855f708}
.cm-tile.inv-cd-pchip .cmt-name{color:#d8b4fe}
.cm-tile.inv-cd-pchip:hover{border-color:#a855f760;background:#a855f712}
/* "Planta sana": chip verde, ocupa toda la fila como primera opción destacada. */
/* "Planta sana": botón principal del panel — un poco más presente que las plagas
   (más alto, borde más marcado, nombre en negrita) pero misma familia visual. */
.cm-tile.inv-cd-pchip--sana{grid-column:1 / -1;flex-direction:row;min-height:52px;gap:9px;justify-content:center;border-width:2px;border-color:#22c55e55;background:#22c55e14}
.cm-tile.inv-cd-pchip--sana .cmt-name{color:#86efac;font-size:14px;font-weight:800}
.cm-tile.inv-cd-pchip--sana .cmt-media{width:30px;height:30px;flex:none}
.cm-tile.inv-cd-pchip--sana .cmt-emoji{font-size:22px}
.cm-tile.inv-cd-pchip--sana:hover{border-color:#22c55e80;background:#22c55e1f}
.cm-tile.inv-cd-pchip--sana.inv-cd-pchip-sel{background:#22c55e33;border-color:#22c55e;box-shadow:0 0 0 2px #22c55e55}
.cm-tile.inv-cd-pchip--sana.inv-cd-pchip-sel .cmt-name{color:#dcfce7}
/* Con PNG del admin: la imagen va como ícono redondo a la izquierda (NO llena el
   tile como las plagas), manteniendo el layout de botón horizontal. */
.cm-tile.inv-cd-pchip--sana.cm-tile--img{padding:8px 12px;justify-content:center;flex-direction:row}
.cm-tile.inv-cd-pchip--sana.cm-tile--img .cmt-media{position:static;width:34px;height:34px;border-radius:8px;overflow:hidden}
.cm-tile.inv-cd-pchip--sana.cm-tile--img .cmt-img{width:100%;height:100%;object-fit:cover;border-radius:8px}
.cm-tile.inv-cd-pchip--sana.cm-tile--img .cmt-name{position:static;color:#86efac;font-size:14px;font-weight:800;background:none;text-shadow:none;width:auto;padding:0}
.cm-tile.inv-cm-act{font-size:11.5px}
.cm-tile.inv-cm-act-otro{grid-column:1 / -1;flex-direction:row;min-height:48px;justify-content:center}
.cm-tile.inv-cm-act-otro .cmt-media{width:30px;height:30px}
.cm-tile.inv-cm-act-otro .cmt-emoji{font-size:20px}
/* El panel de plagas colapsable antes era flex; como grid ya lo maneja .cm-tiles */
.inv-cd-pests.cm-tiles{margin:4px 0 2px}
/* IPM inline: nivel de infestación (aparece al marcar plaga → genera reporte IPM). */
.inv-cd-ipm{margin:2px 0 12px;padding:9px 10px;background:#f59e0b0d;border:1px solid #f59e0b30;border-radius:10px}
.inv-cd-ipm-h{font-size:11px;font-weight:800;color:#fbbf24;text-transform:uppercase;letter-spacing:.4px;margin-bottom:7px}
.inv-cd-ipm-chips{display:flex;flex-wrap:wrap;gap:6px}
.inv-cd-ipm-chip{font-size:12px;font-weight:600;color:var(--text-2);background:#ffffff0d;border:1.5px solid #ffffff1a;border-radius:16px;padding:5px 11px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .12s,border-color .12s}
.inv-cd-ipm-chip:hover{border-color:#ffffff33}
.inv-cd-ipm-chip.rpt-inf-y.inv-cd-ipm-chip-sel{background:rgba(234,179,8,.18);border-color:#eab308;color:#fde047}
.inv-cd-ipm-chip.rpt-inf-o.inv-cd-ipm-chip-sel{background:rgba(249,115,22,.18);border-color:#f97316;color:#fdba74}
.inv-cd-ipm-chip.rpt-inf-r.inv-cd-ipm-chip-sel{background:rgba(239,68,68,.18);border-color:#ef4444;color:#fca5a5}
.inv-cd-ipm-chip.rpt-inf-b.inv-cd-ipm-chip-sel{background:rgba(59,130,246,.18);border-color:#3b82f6;color:#93c5fd}
.inv-cd-ipm-chip.rpt-inf-g.inv-cd-ipm-chip-sel{background:rgba(16,185,129,.18);border-color:#10b981;color:#6ee7b7}
[data-theme="light"] .inv-cd-ipm-chip{color:var(--text-2);background:rgba(0,0,0,.03);border-color:var(--border)}
.inv-cd-ipm-photo{display:flex;align-items:center;gap:8px;margin-top:8px}
.inv-cd-ipm-photo-btn{font-size:12px;font-weight:600;color:#fcd34d;background:#f59e0b1a;border:1.5px dashed #f59e0b55;border-radius:10px;padding:6px 12px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.inv-cd-ipm-photo-ok{color:#4ade80;font-weight:800;font-size:14px}
/* Spin de agua ligero: una gota que gira suave junto al texto del botón mientras
   sube (Completar / Crear misión). Reusa el lenguaje visual del loader de agua. */
.cm-water-spin{display:inline-block;font-size:1em;line-height:1;transform-origin:50% 55%;animation:cm-water-twirl 1s linear infinite;filter:drop-shadow(0 0 3px var(--accent-glow,rgba(56,189,248,.5)))}
@keyframes cm-water-twirl{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.cm-water-spin{animation-duration:2.4s}}
/* Lightbox GRANDE de miniatura (doble-click / long-press) — la foto ocupa casi
   toda la pantalla sobre fondo oscuro, POR ENCIMA del modal (z-index > 10001 de
   .inv-complete-dialog). Tap en cualquier lado cierra. */
.tile-preview-ov{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:10050;display:flex;align-items:center;justify-content:center;animation:tile-pv-in .16s ease-out}
@keyframes tile-pv-in{from{opacity:0}to{opacity:1}}
.tile-preview-card{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:92vw;padding:8px;animation:tile-pv-pop .2s cubic-bezier(.2,.9,.3,1.2)}
@keyframes tile-pv-pop{from{transform:scale(.9)}to{transform:scale(1)}}
.tile-preview-img{max-width:88vw;max-height:76vh;object-fit:contain;border-radius:14px;display:block;box-shadow:0 16px 60px rgba(0,0,0,.7);border:2px solid #ffffff26}
.tile-preview-lbl{color:#f1f5f9;font-size:17px;font-weight:700;text-align:center;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.tile-preview-hint{color:#94a3b8;font-size:12.5px;text-align:center}
/* ── Visor foto de misión (botón 📷 de la tarjeta) — pantalla completa, tap = volver ── */
.mph-ov{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:10060;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:16px;animation:tile-pv-in .16s ease-out;cursor:zoom-out}
.mph-img{max-width:96vw;max-height:82vh;object-fit:contain;border-radius:14px;box-shadow:0 16px 60px rgba(0,0,0,.7);border:2px solid #ffffff26;animation:tile-pv-pop .2s cubic-bezier(.2,.9,.3,1.2)}
.mph-hint{color:#cbd5e1;font-size:15px;font-weight:600;text-align:center;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.mph-empty{color:#94a3b8;font-size:16px;text-align:center}
.mph-spin{width:44px;height:44px;border-radius:50%;border:4px solid rgba(255,255,255,.18);border-top-color:#a78bfa;animation:mph-spin .8s linear infinite}
@keyframes mph-spin{to{transform:rotate(360deg)}}
[data-theme="light"] .cm-tile{background:rgba(0,0,0,.03);border-color:var(--border)}
[data-theme="light"] .cmt-media{background:rgba(0,0,0,.05)}
[data-theme="light"] .cmt-name{color:var(--text-2)}

/* ── Engrane admin en el header del form ── */
.inv-cm-gear{background:none;border:0;font-size:19px;cursor:pointer;opacity:.75;padding:4px 6px;line-height:1;flex:none}
.inv-cm-gear:hover{opacity:1}

/* ── Prioridad URGENTE (botón del form) ── */
.inv-cm-pri-urgente{border-color:#f59e0b33}
.inv-cm-pri-urgente.inv-cm-pri-sel{background:linear-gradient(135deg,#7c2d12,#b91c1c);border-color:#fbbf24;color:#fef3c7;box-shadow:0 0 14px #f59e0b55}
.inv-cm-urgent-hint{margin:6px 2px 0;font-size:12px;color:#fbbf24;font-weight:600}

/* ── Tarjeta de misión URGENTE: azul especial con glow pulsante ── */
.mmc.prio-urgente{background:linear-gradient(160deg,#0b1a33 0%,#10284d 100%);border:2px solid #38bdf8;position:relative;overflow:hidden;animation:mmc-urgent-glow 2.4s ease-in-out infinite}
@keyframes mmc-urgent-glow{0%,100%{box-shadow:0 0 8px 1px #0ea5e955,0 2px 8px rgba(0,0,0,.28)}50%{box-shadow:0 0 24px 5px #38bdf8aa,0 2px 8px rgba(0,0,0,.28)}}
@media (prefers-reduced-motion:reduce){.mmc.prio-urgente{animation:none;box-shadow:0 0 14px 2px #38bdf877}}
/* Texto claro sobre fondo azul oscuro */
.mmc.prio-urgente .mmc-plant{color:#e0f2fe}
.mmc.prio-urgente .mmc-action{color:#fff}
.mmc.prio-urgente .mmc-action .mmc-detail{color:#7dd3fc}
.mmc.prio-urgente .mmc-extra,.mmc.prio-urgente .mmc-desc,.mmc.prio-urgente .mmc-bullets li{color:#bae6fd}
.mmc.prio-urgente .mmc-loc,.mmc.prio-urgente .mmc-loc strong{color:#fff}
.mmc.prio-urgente .mmc-creator,.mmc.prio-urgente .mmc-loc-empty{color:#bae6fd}
.mmc.prio-urgente .mmc-stripe{width:8px;background:linear-gradient(180deg,#7dd3fc,#38bdf8,#0284c7)}
/* Badge 🔥 URGENTE rojo: alto contraste contra el azul = destaca como tag */
.prio-badge-urgente{background:#dc2626;color:#fff;border:1px solid #f87171}
.mmc .prio-badge-urgente{background:#dc2626;color:#fff;border-color:#f87171}

/* ── Tarjeta con FOTO de creación (evidencia de urgencia como fondo) ──
   La foto entra lazy (_hydrateMissionCardPhotos); mientras no cargue, la
   tarjeta se ve normal. Al cargar: foto cover + velo oscuro para lectura. */
.mmc--cphoto{position:relative}
.mmc-photo-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;pointer-events:none}
.mmc-photo-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,11,22,.9) 0%,rgba(7,11,22,.64) 45%,rgba(7,11,22,.9) 100%)}
.mmc--photo-on .mmc-stripe,.mmc--photo-on .mmc-inner{position:relative;z-index:1}
/* Texto claro sobre la foto (mismo esquema legible que la urgente azul) */
.mmc--photo-on .mmc-plant{color:#e0f2fe}
.mmc--photo-on .mmc-action{color:#fff}
.mmc--photo-on .mmc-action .mmc-detail{color:#bae6fd}
.mmc--photo-on .mmc-extra,.mmc--photo-on .mmc-desc,.mmc--photo-on .mmc-desc-intro,.mmc--photo-on .mmc-bullets li{color:#dbeafe}
.mmc--photo-on .mmc-loc,.mmc--photo-on .mmc-loc strong{color:#fff}
.mmc--photo-on .mmc-creator,.mmc--photo-on .mmc-loc-empty,.mmc--photo-on .mmc-assignee,.mmc--photo-on .mmc-memo{color:#cbe7fb}
/* Chip discreto: fecha de la foto de creación */
.mmc-cphoto-date{font-size:10.5px;font-weight:700;color:#fff;background:rgba(2,6,16,.55);border:1px solid #ffffff30;border-radius:999px;padding:2px 8px;white-space:nowrap;line-height:1.5}

/* ── Banner "el ANTES ya viene" en el form de completar ── */
.inv-cd-antes-banner{display:flex;align-items:center;gap:10px;background:#0ea5e912;border:1.5px solid #38bdf850;border-radius:10px;padding:8px 10px;margin-bottom:10px}
.inv-cd-antes-thumb{width:72px;height:54px;object-fit:cover;border-radius:8px;border:1px solid #7dd3fc60;flex-shrink:0}
.inv-cd-antes-thumb-skel{width:72px;height:54px;border-radius:8px;background:#ffffff10;flex-shrink:0;animation:antesPulse 1.2s ease-in-out infinite}
@keyframes antesPulse{0%,100%{opacity:.45}50%{opacity:1}}
.inv-cd-antes-txt{font-size:12.5px;color:#bae6fd;font-weight:600;line-height:1.35}
.mmp-fpri-fire.mmp-factive{background:linear-gradient(135deg,#b45309,#dc2626);border-color:#fbbf24;color:#fff;box-shadow:0 4px 20px #f59e0b60;font-weight:900}
.inv-mf-pri-fire.inv-mf-active{background:linear-gradient(135deg,#b45309,#dc2626);border-color:#fbbf24;color:#fff;box-shadow:0 4px 20px #f59e0b60;font-weight:900}
.inv-pri-urgente{color:#fbbf24;font-weight:900}
.wf-pri--urgente{background:linear-gradient(90deg,#b4530933,#dc262633);color:#fbbf24;border:1px solid #f59e0b66}
.inv-hist-pri-urgente{background:#dc2626;color:#fff}
.msa-bnr-pri--urgente strong{color:#fbbf24}
.msw-row--urgente td:first-child{box-shadow:inset 3px 0 0 #f59e0b}

/* ── Conteo LND en Work Log ── */
.wf-stat--lnd .wf-stat-n{color:#4ade80}
.wf-stat--weekly .wf-stat-n{color:#22d3ee}

/* ── Lead time (admin) ── */
.wf-chip--lead{background:rgba(56,189,248,.12);color:#7dd3fc;border:1px solid rgba(56,189,248,.3)}
.wf-chip--lead-urgent{background:rgba(245,158,11,.15);color:#fbbf24;border-color:rgba(245,158,11,.45);font-weight:800}

/* ── Notas inteligentes (sugerencias no invasivas) ── */
.inv-cd-smart{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:6px 0 2px;padding:7px 9px;background:#0ea5e910;border:1px dashed #0ea5e94d;border-radius:10px}
.inv-cd-smart-t{font-size:11.5px;color:#7dd3fc;font-weight:700;flex:none}
.inv-cd-smart-chip{background:#0ea5e922;border:1px solid #0ea5e966;color:#bae6fd;border-radius:16px;padding:5px 10px;font-size:12px;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent}
.inv-cd-smart-chip:active{transform:scale(.96)}
.inv-cd-smart-x{background:none;border:0;color:#7dd3fc99;font-size:13px;cursor:pointer;margin-left:auto;padding:3px 6px}
[data-theme="light"] .inv-cd-smart{background:rgba(14,165,233,.06)}
[data-theme="light"] .inv-cd-smart-chip{color:#0369a1}
[data-theme="light"] .inv-cd-smart-t{color:#0369a1}

/* ── Validaciones suaves (panel al confirmar) ── */
.inv-cd-vw{position:absolute;inset:0;z-index:5;display:flex;align-items:flex-end;background:rgba(2,8,16,.55);border-radius:inherit}
.inv-cd-vw-box{width:100%;background:#0f1d2d;border-top:2px solid #f59e0b;border-radius:16px 16px 0 0;padding:16px 16px 14px;animation:pcel-card-in .25s ease-out}
.inv-cd-vw-t{font-size:14.5px;font-weight:800;color:#fcd34d;margin-bottom:8px}
.inv-cd-vw-list{margin:0 0 12px;padding-left:20px;color:var(--text-1);font-size:13.5px;line-height:1.45}
.inv-cd-vw-list li{margin-bottom:4px}
.inv-cd-vw-btns{display:flex;gap:10px}
.inv-cd-vw-review{flex:1;background:#ffffff10;border:1.5px solid #ffffff25;color:var(--text-2);padding:11px;border-radius:12px;font-weight:700;font-size:14px;cursor:pointer}
.inv-cd-vw-send{flex:1.4;background:#22c55e;border:0;color:#04150a;padding:11px;border-radius:12px;font-weight:800;font-size:14px;cursor:pointer}
[data-theme="light"] .inv-cd-vw-box{background:#fff}
[data-theme="light"] .inv-cd-vw-list{color:#334155}
[data-theme="light"] .inv-cd-vw-review{color:#334155;border-color:var(--text-2)}
/* Caja bloqueante "necesario": azul informativo (no rojo), botón único primario. */
.inv-cd-vw--need .inv-cd-vw-box{border-top-color:#38bdf8}
.inv-cd-vw--need .inv-cd-vw-t{color:#7dd3fc}
.inv-cd-vw--need .inv-cd-vw-review{flex:1;background:#38bdf8;border:0;color:#04121f;font-weight:800}
[data-theme="light"] .inv-cd-vw--need .inv-cd-vw-review{color:#04121f;border-color:#38bdf8}

/* ── Editor admin ⚙️ de botones ── */
.mf-ed-hint{font-size:12.5px;color:#94a3b8;margin-bottom:10px;line-height:1.4}
.mf-ed-sec-t{font-size:13px;font-weight:800;color:#7dd3fc;text-transform:uppercase;letter-spacing:.5px;margin:14px 0 6px}
.mf-ed-row{display:flex;align-items:center;gap:7px;padding:5px 0;border-bottom:1px solid #ffffff0d}
.mf-ed-media{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:9px;background:#ffffff0a;overflow:hidden;flex:none}
.mf-ed-media .cmt-img{border-radius:9px}
.mf-ed-media .cmt-emoji{font-size:21px}
.mf-ed-name{flex:1;min-width:0;background:#ffffff08;border:1px solid #ffffff1a;color:#e2e8f0;border-radius:8px;padding:8px 10px;font-size:13.5px}
/* PC: el editor se ensancha y el campo de nombre toma la mayor parte del ancho
   para que los nombres largos ("Estaquear enredaderas", "🌿 Retoños largos y
   banderas") se lean COMPLETOS sin cortarse. El selector de sección se acota. */
@media(min-width:700px){
  .mf-editor-ov .inv-cm-box.mf-ed-box{width:min(680px,92vw)}
  .mf-ed-name{flex:1 1 auto;min-width:280px}
  .mf-ed-secsel{max-width:190px}
}
.mf-ed-imgbtn,.mf-ed-imgdel,.mf-ed-up,.mf-ed-down,.mf-ed-del{background:#ffffff0d;border:1px solid #ffffff1a;color:#cbd5e1;border-radius:8px;padding:7px 8px;font-size:13px;cursor:pointer;flex:none;-webkit-tap-highlight-color:transparent}
.mf-ed-imgdel{color:#fca5a5}
.mf-ed-del{color:#fca5a5}
.mf-ed-hint--sub{font-size:11.5px;margin:-2px 0 8px}
.mf-ed-media--sec{font-size:19px;background:#38bdf814}
.mf-ed-row--sec .mf-ed-name{font-weight:700}
/* Selector de sección en cada fila de acción — compacto; en pantallas angostas
   la fila envuelve para que quepa nombre + selector + botones. */
.mf-ed-secsel{flex:none;max-width:34%;background:#38bdf80f;border:1px solid #38bdf833;color:#bae6fd;border-radius:8px;padding:7px 6px;font-size:12px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mf-ed-secsel option{background:#0f172a;color:#e2e8f0}
@media(max-width:520px){
  #mf-ed-actions .mf-ed-row{flex-wrap:wrap}
  #mf-ed-actions .mf-ed-name{flex:1 1 60%}
  .mf-ed-secsel{max-width:none;flex:1 1 100%;order:5}
}
[data-theme="light"] .mf-ed-secsel{background:#f0f9ff;border-color:#7dd3fc;color:#0369a1}
[data-theme="light"] .mf-ed-secsel option{background:#fff;color:#1e293b}
.mf-ed-add{margin-top:8px;width:100%;background:#22c55e14;border:1.5px dashed #22c55e66;color:#86efac;border-radius:10px;padding:10px;font-weight:700;font-size:13.5px;cursor:pointer}
.mf-ed-restore{margin-top:16px;width:100%;background:none;border:1px solid #ffffff20;color:#94a3b8;border-radius:10px;padding:9px;font-size:12.5px;cursor:pointer}
[data-theme="light"] .mf-ed-name{background:#fff;border-color:#cbd5e1;color:#1e293b}
[data-theme="light"] .mf-ed-row{border-bottom-color:rgba(0,0,0,.06)}
[data-theme="light"] .mf-ed-imgbtn,[data-theme="light"] .mf-ed-up,[data-theme="light"] .mf-ed-down{color:#475569;border-color:#cbd5e1}

/* ── Celebración: héroe urgente + frase del equipo ── */
.plant-cel-box--urgent{border-color:#fbbf24aa;box-shadow:0 40px 120px #000d,0 0 80px #f59e0b33}
.plant-cel-hero{font-size:15px;font-weight:900;color:#fcd34d;margin:2px 0 6px}
.plant-cel-add{display:block;margin:12px auto 0;background:none;border:0;color:#86efac99;font-size:12.5px;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.plant-cel-add:hover{color:#86efac}
.plant-cel-form{display:flex;gap:8px;margin-top:10px}
.plant-cel-input{flex:1;min-width:0;background:#ffffff10;border:1px solid #22c55e44;color:#dcfce7;border-radius:10px;padding:10px 12px;font-size:13.5px}
.plant-cel-input::placeholder{color:#86efac66}
.plant-cel-save{background:#22c55e;border:0;color:#04150a;border-radius:10px;padding:10px 14px;font-weight:800;font-size:13px;cursor:pointer;flex:none}

/* Acciones como tiles: 3 columnas base, 4 en pantallas anchas (gana a los media queries viejos del grid de chips por especificidad) */
.inv-cm-actions.inv-cm-actions-grid{grid-template-columns:repeat(3,1fr);gap:8px}
@media(min-width:480px){.inv-cm-actions.inv-cm-actions-grid{grid-template-columns:repeat(4,1fr)}}

/* ── Botón oculto: VISIBLE para admin en modo edición (✏️ Editar) ──
   Fuera de edición conserva el contorno tenue de siempre (si tiene link) y el
   placeholder sin link no se muestra. Dentro de edición: caja ámbar clara con
   🔘 centrado para encontrarlo y arrastrarlo; el botón de la barra de edición
   'Botón oculto' además lo hace pulsar (m-secret-flash). */
.m-secret-btn.m-secret-nourl{display:none}
#imap.m-editing .m-secret-btn.m-secret-nourl{display:block}
#imap.m-editing .m-secret-btn.is-admin{
  border:2px dashed #fbbf24;
  background:rgba(251,191,36,.22);
  border-radius:12px;
  box-shadow:0 0 0 3px rgba(251,191,36,.15),0 4px 16px rgba(0,0,0,.35);
}
#imap.m-editing .m-secret-btn.is-admin::before{
  content:"🔘";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  pointer-events:none;
}
.m-secret-btn.m-secret-flash{animation:m-secret-flash 0.85s ease-out 4;z-index:500}
@keyframes m-secret-flash{
  0%,100%{box-shadow:0 0 0 0 rgba(251,191,36,0)}
  35%{box-shadow:0 0 0 28px rgba(251,191,36,.7),0 0 50px 10px rgba(251,191,36,.35)}
  70%{box-shadow:0 0 0 12px rgba(251,191,36,.4)}
}

/* Botón ámbar de la barra de edición (usado por 🔘 Botón oculto) */
.m-btn-am{border-color:#fbbf24;color:#fbbf24}
.m-btn-am:hover{background:rgba(251,191,36,.1)}

/* ============================================================
   VISTA GESTIÓN (solo PC, admin) — misiones + work log en 4 columnas
   Tarjetas reutilizadas tal cual: .mmc (Mis Misiones) y .wf-card (Work Log);
   aquí solo viven el marco, los filtros y las grillas.
   ============================================================ */
.gst-shell{padding:14px 18px 60px;max-width:1920px;margin:0 auto}
.gst-topbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.gst-title{font-size:20px;font-weight:800;color:var(--text-1);display:flex;align-items:baseline;gap:10px}
.gst-title-sub{font-size:12px;font-weight:500;color:var(--text-3)}
.gst-tabs{display:flex;gap:4px;background:var(--bg-2);border:1px solid var(--border);border-radius:12px;padding:4px}
.gst-tab{border:0;background:transparent;color:var(--text-3);font-size:14px;font-weight:700;padding:8px 18px;border-radius:9px;cursor:pointer;transition:background .15s,color .15s}
.gst-tab:hover{color:var(--text-1)}
.gst-tab--active{background:var(--accent);color:#04121f}
.gst-actions{margin-left:auto;display:flex;gap:8px}
.gst-abtn{border:1px solid var(--border);background:var(--bg-2);color:var(--text-1);border-radius:10px;padding:8px 14px;font-size:14px;font-weight:700;cursor:pointer}
.gst-abtn:hover{border-color:var(--accent);color:var(--accent)}

/* Stats bar — chips clickeables que además filtran por alcance */
.gst-stats{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.gst-stat{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:96px;padding:8px 14px;border-radius:12px;border:1px solid var(--border);background:var(--bg-2);cursor:pointer;transition:border-color .15s,transform .1s}
.gst-stat:hover{border-color:var(--accent)}
.gst-stat--active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.gst-stat-n{font-size:20px;font-weight:800;color:var(--text-1);line-height:1.1}
.gst-stat-l{font-size:11px;font-weight:600;color:var(--text-3);white-space:nowrap}
.gst-stat-urg .gst-stat-n{color:#f87171}
.gst-note{font-size:12px;color:#fbbf24;border:1px dashed #fbbf24;border-radius:8px;padding:4px 10px;cursor:help}

/* Barra de filtros */
.gst-fbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.gst-search{flex:0 1 340px;min-width:220px;background:var(--bg-2);border:1px solid var(--border);border-radius:10px;color:var(--text-1);font-size:14px;padding:8px 12px;outline:none}
.gst-search:focus{border-color:var(--accent)}
.gst-sel{background:var(--bg-2);border:1px solid var(--border);border-radius:10px;color:var(--text-1);font-size:13px;font-weight:600;padding:8px 10px;max-width:240px;cursor:pointer;outline:none}
.gst-sel:focus{border-color:var(--accent)}
.gst-fsep{width:1px;height:22px;background:var(--border);margin:0 2px}
.gst-chip{border:1px solid var(--border);background:var(--bg-2);color:var(--text-3);border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:700;cursor:pointer;transition:all .12s;white-space:nowrap}
.gst-chip:hover{color:var(--text-1);border-color:var(--text-3)}
.gst-chip--active{background:var(--accent);border-color:var(--accent);color:#04121f}
.gst-chip-fire.gst-chip--active{background:#f97316;border-color:#f97316;color:#1a0d02}
.gst-chip-red.gst-chip--active{background:#ef4444;border-color:#ef4444;color:#1f0505}
.gst-chip-amber.gst-chip--active{background:#f59e0b;border-color:#f59e0b;color:#1f1502}
.gst-chip-blue.gst-chip--active{background:#3b82f6;border-color:#3b82f6;color:#040e1f}
.gst-clear{border:1px solid #f87171;background:transparent;color:#f87171;border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:700;cursor:pointer}
.gst-clear:hover{background:rgba(248,113,113,.12)}
.gst-retry{border:0;background:var(--accent);color:#04121f;border-radius:10px;padding:8px 18px;font-weight:700;cursor:pointer;margin-left:10px}

/* Secciones + grillas de 4 columnas */
.gst-sec-hdr{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800;color:var(--text-1);margin:18px 0 10px;padding:8px 12px;border-radius:10px;background:var(--bg-2);border:1px solid var(--border)}
.gst-sec-assigned{border-left:4px solid #4ade80}
.gst-sec-unassigned{border-left:4px solid #94a3b8}
.gst-sec-auto{border-left:4px solid #a78bfa}
.gst-sec-cnt{background:var(--border);color:var(--text-1);font-size:12px;font-weight:800;border-radius:999px;padding:2px 9px}
.gst-worker-hdr{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--text-1);margin:10px 0 8px;padding-left:4px}
.gst-worker-avatar{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#4ade80,#22c55e);color:#052e12;font-size:12px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.gst-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:start}
.gst-grid .mmc{margin-bottom:0}
.gst-empty{text-align:center;padding:48px 20px;color:var(--text-3);font-size:15px}
/* Vista IMPORTANTES (categorías agrupadas) */
.gst-imp-root{padding:4px 0 40px}
.gst-imp-empty{text-align:center;padding:48px 20px;color:var(--text-3);font-size:15px}
.gst-imp-group{margin-bottom:22px}
.gst-imp-ghd{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:800;color:var(--text-1);margin:0 2px 10px;padding-bottom:6px;border-bottom:2px solid var(--border)}
.gst-imp-count{margin-left:auto;font-size:12px;font-weight:800;background:var(--bg-3);color:var(--text-2);padding:2px 10px;border-radius:12px}
.gst-imp-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:start}
.gst-imp-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:11px 12px;box-shadow:0 2px 10px rgba(0,0,0,.15)}
.gst-imp-card--rev{border-color:rgba(34,197,94,.4)}
.gst-imp-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:6px}
.gst-imp-plant{font-size:13.5px;font-weight:800;color:var(--text-1);line-height:1.3}
.gst-imp-rev{font-size:14px;flex:none}
.gst-imp-meta{font-size:11.5px;color:var(--text-2);margin-top:5px;line-height:1.35}
.gst-imp-by{color:var(--text-3)}
.gst-imp-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}
@media (max-width:1100px){.gst-imp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.gst-imp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.gst-imp-grid{grid-template-columns:1fr}}
.gst-hide{display:none !important}
.gst-pane .mmc-skel{margin-bottom:0}

/* Trabajo Realizado: el feed sale de su columna de 560px y pasa a grilla */
.gst-shell .wf-feed{max-width:none;padding:4px 0 40px}
.gst-shell .wf-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:start;padding:0}
.gst-shell .wf-filter-bar{flex-wrap:wrap}

/* Ventanas de escritorio angostas (1025–1299px): 3 columnas para que las
   tarjetas no queden ilegibles; el pedido de 4 aplica a pantalla completa. */
@media (max-width: 1299px){
  .gst-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gst-shell .wf-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ─── Estatus de planta — un solo look en toda la app ─────────────────────────
   Antes había dos sistemas para el mismo dato: `tx-plant-status` en el selector
   de plantas y `wf-st-badge` en el Work Log. IPM salía AMARILLO al crear la
   misión y MORADO al revisarla. Quien decide si mover una planta no debería
   tener que traducir colores entre pantallas.
   Un color por estatus, y los dos temas — el formulario de completar se usa en
   el campo, con sol, y ahí el tema claro no es un lujo. */
.pl-st{
  display:inline-block; flex-shrink:0;
  font-size:10px; font-weight:800; letter-spacing:.3px;
  padding:1px 6px; border-radius:5px;
  background:var(--pl-st-bg,rgba(255,255,255,.08));
  color:var(--pl-st-fg,#9ca3af);
  border:1px solid var(--pl-st-br,transparent);
}
.pl-st.wf-st-ipm       { --pl-st-bg:rgba(168,85,247,.22); --pl-st-fg:#d8b4fe; }
.pl-st.wf-st-failing   { --pl-st-bg:rgba(239,68,68,.22);  --pl-st-fg:#fca5a5; }
.pl-st.wf-st-treatment { --pl-st-bg:rgba(245,158,11,.22); --pl-st-fg:#fcd34d; }
.pl-st.wf-st-hold      { --pl-st-bg:rgba(96,165,250,.20); --pl-st-fg:#93c5fd; }
.pl-st.wf-st-ret       { --pl-st-bg:rgba(34,197,94,.20);  --pl-st-fg:#86efac; }
.pl-st.wf-st-lnd       { --pl-st-bg:rgba(20,184,166,.20); --pl-st-fg:#5eead4; }
.pl-st.wf-st-week      { --pl-st-bg:rgba(56,189,248,.22); --pl-st-fg:#7dd3fc; }

/* Tema claro: mismos significados, contraste que aguanta el sol. El neutro toma
   el cafecito de Inventory Update para que las dos pantallas se sientan una. */
[data-theme="light"] .pl-st                    { --pl-st-bg:#fff9ea; --pl-st-fg:#92400e; --pl-st-br:#f3d499; }
[data-theme="light"] .pl-st.wf-st-ipm          { --pl-st-bg:#f3e8ff; --pl-st-fg:#6b21a8; --pl-st-br:#d8b4fe; }
[data-theme="light"] .pl-st.wf-st-failing      { --pl-st-bg:#fee2e2; --pl-st-fg:#b91c1c; --pl-st-br:#fca5a5; }
[data-theme="light"] .pl-st.wf-st-treatment    { --pl-st-bg:#fef3c7; --pl-st-fg:#92400e; --pl-st-br:#fcd34d; }
[data-theme="light"] .pl-st.wf-st-hold         { --pl-st-bg:#dbeafe; --pl-st-fg:#1d4ed8; --pl-st-br:#93c5fd; }
[data-theme="light"] .pl-st.wf-st-ret          { --pl-st-bg:#dcfce7; --pl-st-fg:#15803d; --pl-st-br:#86efac; }
[data-theme="light"] .pl-st.wf-st-lnd          { --pl-st-bg:#ccfbf1; --pl-st-fg:#0f766e; --pl-st-br:#5eead4; }
[data-theme="light"] .pl-st.wf-st-week         { --pl-st-bg:#e0f2fe; --pl-st-fg:#0369a1; --pl-st-br:#7dd3fc; }

/* ─── Dump: ¿ya se avisó al líder? ────────────────────────────────────────────
   "Sin confirmar" es a propósito más discreto que "avisado": no acusa a nadie.
   Quien no vio la casilla y quien no avisó se ven igual, y preguntar de más
   cuesta una pregunta — dar por hecho un dump que nadie pidió cuesta la planta. */
.acts-dump{
  display:inline-block; font-size:10px; font-weight:800; letter-spacing:.2px;
  padding:1px 6px; border-radius:5px; white-space:nowrap;
  border:1px solid var(--ad-br,transparent);
  background:var(--ad-bg,transparent); color:var(--ad-fg,inherit);
}
.acts-dump--told   { --ad-bg:rgba(34,197,94,.18);  --ad-fg:#86efac; }
.acts-dump--pending{ --ad-bg:rgba(148,163,184,.16); --ad-fg:#94a3b8; }
[data-theme="light"] .acts-dump--told   { --ad-bg:#dcfce7; --ad-fg:#15803d; --ad-br:#86efac; }
[data-theme="light"] .acts-dump--pending{ --ad-bg:#f1f5f9; --ad-fg:#64748b; --ad-br:#cbd5e1; }

/* La casilla del dump va pegada al selector de causa, no suelta entre los otros
   checkboxes: es parte de la misma decisión. */
.inv-cd-dump-check{ margin-top:10px; }

/* ─── El formulario, por pasos ────────────────────────────────────────────────
   Eran nueve secciones seguidas separadas solo por una etiqueta, en un scroll
   largo que se llena con guantes puestos. Tres encabezados numerados dicen en
   qué parte va uno sin tener que leer todo.
   Son HERMANOS de las secciones, no contenedores: agrupan a la vista sin tocar
   el anidado del modal — si alguno estorba se quita una línea y ya.
   El cafecito viene de Inventory Update (#92400e sobre #fff9ea, 6.75:1) para
   que las dos pantallas se sientan una sola app. */
.inv-cd-group{
  display:flex; align-items:center; gap:8px;
  margin:22px 0 10px; padding:7px 11px;
  border-radius:8px; border:1px solid var(--cdg-br);
  background:var(--cdg-bg); color:var(--cdg-fg);
  font-size:12px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
  --cdg-bg:rgba(245,158,11,.14); --cdg-fg:#fcd34d; --cdg-br:rgba(245,158,11,.28);
}
/* El primero pega con el nombre de la planta: no necesita aire arriba. */
.inv-cm-scroll > .inv-cd-group:first-of-type{ margin-top:14px; }
[data-theme="light"] .inv-cd-group{ --cdg-bg:#fff9ea; --cdg-fg:#92400e; --cdg-br:#f3d499; }

/* Pantallas chicas: el modal se pega a los bordes y los encabezados se quedan
   arriba al hacer scroll — con nueve secciones, saber en qué paso vas importa
   más que ver dos renglones extra. */
@media (max-width: 480px){
  .inv-cd-group{
    position:sticky; top:0; z-index:2;
    margin:16px 0 8px; font-size:11px;
    box-shadow:0 2px 8px rgba(0,0,0,.18);
  }
}


/* ── La ficha del lote (doble toque en el estatus) ────────────────────────────
   Fecha de plantacion y prioridad viven aqui y no como columnas: la tabla ya
   trae ocho y en telefono esconde una. Son datos de decision —de cual lote se
   surte primero— no de barrido, asi que se piden cuando se necesitan. */
.inv-st-tap{cursor:pointer;position:relative;-webkit-user-select:none;user-select:none}
.inv-st-hasficha::after{content:"";position:absolute;top:5px;right:5px;width:4px;height:4px;border-radius:50%;background:#a78bfa;opacity:.8}
.inv-st-open{background:#7c3aed14}
.inv-st-open::after{opacity:1;box-shadow:0 0 6px #a78bfa}
.inv-st-row{border-bottom:1px solid #ffffff10;background:#7c3aed0d}
.inv-st-ficha{display:flex;flex-wrap:wrap;gap:6px 22px;padding:9px 12px 9px 16px;border-left:3px solid #7c3aed}
.inv-st-dato{display:flex;align-items:baseline;gap:7px;font-size:12.5px;min-width:0}
.inv-st-k{color:var(--text-muted,#8a8a8a);font-weight:600;white-space:nowrap}
.inv-st-v{color:#fff;font-weight:600}
.inv-st-v em{font-style:normal;color:#a78bfa;font-weight:700;margin-left:4px}
.inv-st-falta .inv-st-v{color:var(--text-muted,#8a8a8a);font-weight:500;font-style:italic}
.inv-st-nota{flex-basis:100%;font-size:11px;color:#fbbf24;background:#f59e0b14;border:1px solid #f59e0b3d;border-radius:6px;padding:5px 9px;line-height:1.35}

/* El numero de prioridad. El principal (RET 1 / LND 4) es EL lote designado de
   esa planta; el secundario son los demas. En los otros estatus el numero es el
   codigo del propio estatus y no marca orden — por eso va en gris y no en
   verde: pintarlo igual haria creer que ahi tambien hay un "primero". */
.inv-pri-n{display:inline-block;min-width:20px;text-align:center;font-size:12px;font-weight:800;border-radius:5px;padding:1px 5px;font-variant-numeric:tabular-nums}
.inv-pri-principal{background:#16a34a2e;border:1px solid #22c55e88;color:#4ade80}
.inv-pri-secundaria{background:#64748b2e;border:1px solid #94a3b866;color:#cbd5e1}
.inv-pri-codigo{background:#ffffff0f;border:1px solid #ffffff26;color:#9aa4b2}
.inv-pri-raro{background:#f59e0b2e;border:1px solid #f59e0b88;color:#fbbf24}

@media(max-width:640px){
  .inv-st-ficha{gap:5px 14px;padding:8px 10px 8px 13px}
  .inv-st-dato{font-size:11.5px}
  .variety-tbl-row{grid-template-columns:70px 74px 54px 74px 58px 34px 58px 58px;font-size:11px;gap:3px}
}

[data-theme="light"] .inv-st-row{background:rgba(124,58,237,.05);border-bottom-color:rgba(0,0,0,.06)}
[data-theme="light"] .inv-st-v{color:var(--text-1)}
[data-theme="light"] .inv-st-k{color:var(--text-3)}
[data-theme="light"] .inv-pri-principal{background:rgba(22,163,74,.12);color:#15803d}
[data-theme="light"] .inv-pri-secundaria{background:rgba(100,116,139,.12);color:#475569}
[data-theme="light"] .inv-pri-codigo{background:rgba(0,0,0,.05);color:var(--text-3)}
[data-theme="light"] .vt-current{background:rgba(124,58,237,.1);color:var(--text-1)}

/* ── El destino, cuando es obligatorio ────────────────────────────────────
   Consolidar y Transferir no significan nada sin decir a dónde. El bloque se
   marca y el botón de guardar se apaga, pero con el porqué a la vista: un
   botón apagado y mudo se lee como una app rota. */
.inv-cm-dest-falta-on{
  border:1px solid var(--danger,#dc2626); border-radius:10px;
  padding:8px; background:color-mix(in srgb, var(--danger,#dc2626) 7%, transparent);
}
.inv-cm-dest-falta{
  font-size:12px; line-height:1.35; color:var(--danger,#dc2626);
  font-weight:600; margin:2px 0 6px;
}

/* ── Avance de consolidación (cabecera de Ver Plantas) ────────────────────
   Cerrada por defecto: dos números. Abierta: el desglose por galón, que es
   como se planea el invierno — una casa cabe 10,426 de 1 galón o 5,152 de 2. */
.inv-consol-kpi{margin:0 0 10px;border:1px solid var(--border,#334);border-radius:12px;overflow:hidden;background:var(--bg2,#141821)}
.ick-head{width:100%;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 12px;background:none;border:0;color:inherit;cursor:pointer;text-align:left;font:inherit}
.ick-head:hover{background:color-mix(in srgb,var(--accent,#22c55e) 6%,transparent)}
.ick-t{font-weight:800;font-size:13px;white-space:nowrap}
.ick-n{font-size:15px}
.ick-n b{font-size:18px;font-variant-numeric:tabular-nums}
.ick-sub{font-size:11px;opacity:.65;margin-left:auto;white-space:nowrap}
.ick-caret{opacity:.5;transition:transform .15s}
.inv-consol-kpi.ick-open .ick-caret{transform:rotate(180deg)}
.ick-body{padding:2px 12px 12px;display:flex;flex-direction:column;gap:8px}
.ick-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ick-lbl{font-size:11px;opacity:.6;min-width:110px}
.ick-gal{font-size:12px;padding:2px 8px;border-radius:999px;
  background:var(--bg3,#1b2130);border:1px solid var(--border,#334);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.ick-warn{font-size:12px;color:var(--warn,#d97706);line-height:1.4}
@media (max-width:640px){.ick-sub{margin-left:0;width:100%}.ick-lbl{min-width:0;width:100%}}

/* ── Los hermanos de una variedad (hoja de crear tarea) ───────────────────
   Cada uno es tocable: pone su campo como destino. El montón que no llega a
   100 va marcado — por debajo de eso no recibe cama propia y se mezcla. */
/* ── Lo que conviene juntar ──────────────────────────────────────────────
   Nace marcado, así que se lee como una decisión ya tomada que se puede
   deshacer — no como una lista de tareas pendientes. De ahí el borde verde:
   sin él, tres renglones apagados y premarcados pasan desapercibidos y la
   cuadrilla se lleva plantas que nadie miró. */
.inv-cm-juntar{margin:10px 0 4px;padding:9px 11px;border-radius:11px;
  background:var(--bg3,#1b2130);border:1px solid var(--accent,#22c55e)}
.icj-list{display:flex;flex-direction:column;gap:3px;margin:5px 0 7px}
.icj-item{display:grid;grid-template-columns:auto auto auto 1fr;gap:4px 9px;
  align-items:baseline;padding:5px 7px;border-radius:8px;cursor:pointer}
.icj-item:hover{background:var(--bg2,#151a26)}
.icj-loc{font-weight:700;font-size:.85rem}
.icj-qty{font-variant-numeric:tabular-nums;font-weight:600;font-size:.85rem;
  color:var(--accent,#22c55e)}
.icj-det{font-size:.74rem;opacity:.66}
.icj-por{font-size:.76rem;line-height:1.45;opacity:.82}
.icj-ruta{margin-top:6px;font-size:.78rem;font-variant-numeric:tabular-nums;
  padding-top:6px;border-top:1px solid var(--border,#334)}
/* Aviso, no recomendación: estos NO se marcan solos y por eso no van en verde. */
.icj-otro{margin-top:7px;padding-top:6px;border-top:1px solid var(--border,#334);
  font-size:.75rem;line-height:1.45;color:var(--warn,#f59e0b)}
.inv-cm-hermanos{margin:10px 0 4px}
.ich-list{display:flex;flex-direction:column;gap:4px;margin-top:4px}
/* Renglón de hermano: informa y ofrece juntarse. YA NO pone destino — tocarlo
   cambiaba a dónde iba la planta, y eso lo decide el usuario. De ahí que sea
   <label> con casilla y no <button>: la forma tiene que decir lo que hace.
   En móvil la casilla manda 44px de alto, que es el mínimo tocable. */
.ich-row{display:grid;grid-template-columns:auto auto auto 1fr;gap:3px 9px;align-items:center;
  width:100%;text-align:left;padding:8px 10px;border-radius:9px;font:inherit;cursor:pointer;
  min-height:44px;background:var(--bg3,#1b2130);border:1px solid var(--border,#334);color:inherit;
  -webkit-tap-highlight-color:transparent}
.ich-row:hover{border-color:var(--accent,#22c55e)}
.ich-row:has(input:checked){border-color:var(--accent,#22c55e);background:#22c55e14}
/* El recomendado se distingue por el BORDE, no por estar premarcado: marcar
   solo un lote de otro campo compromete a alguien a caminar hasta allá. */
.ich-row-rec{border-color:#22c55e66}
.ich-loc{font-weight:800;font-size:13px}
.ich-item{display:grid;grid-template-columns:auto auto 1fr;gap:4px 10px;align-items:baseline;
  width:100%;text-align:left;padding:7px 10px;border-radius:9px;font:inherit;cursor:pointer;
  background:var(--bg3,#1b2130);border:1px solid var(--border,#334);color:inherit}
.ich-item:hover{border-color:var(--accent,#22c55e)}
.ich-item.ich-sel{border-color:var(--accent,#22c55e);
  background:color-mix(in srgb,var(--accent,#22c55e) 12%,transparent)}
.ich-campo{font-weight:800;font-size:13px}
.ich-qty{font-variant-numeric:tabular-nums;font-weight:700;font-size:13px}
.ich-det{font-size:11px;opacity:.6}
.ich-tag{grid-column:1/-1;font-size:10px;color:var(--warn,#d97706);font-weight:700;opacity:.75}
.ich-tag-si{color:var(--accent,#22c55e);opacity:1}
.ich-tag-no{color:var(--warn,#d97706);opacity:1}
.ich-row.ich-chico{border-style:dashed}
.ich-item.ich-chico{border-style:dashed}
.ich-aviso{margin-top:8px;font-size:12px;line-height:1.45;color:var(--text-2,#cbd5e1)}
.ich-aviso b{color:var(--accent,#22c55e)}
#ich-marcar-rec{float:right;margin:0 0 4px 8px}
@media (max-width:640px){.ich-det{grid-column:1/-1}}

.ick-nota{font-size:11px;line-height:1.4;opacity:.6;margin-top:-2px}

/* ── La tarjeta dentro del panel del mapa ────────────────────────────────
   El panel mide 300px y la tarjeta se diseñó para el ancho de Ver Plantas:
   sin esto la cifra grande y el «desde el …» se pisan. Aquí se apila. */
.m-side .inv-consol-kpi{margin:0}
.m-side .ick-head{flex-direction:column;align-items:flex-start;gap:3px;padding:10px 12px}
.m-side .ick-sub{margin-left:0;white-space:normal}
.m-side .ick-n{font-size:13px;line-height:1.35}
.m-side .ick-n b{font-size:20px;display:block}
.m-side .ick-caret{position:absolute;right:12px;top:12px}
.m-side .ick-head{position:relative}
.m-side .ick-lbl{min-width:0;width:100%}

/* ── El menú de acciones en móvil ────────────────────────────────────────
   Son 32 casillas repartidas en secciones. Dos arreglos, los dos de tacto:
   el encabezado de sección se queda pegado arriba mientras se desplaza —si
   no, a media lista ya no sabes si estás en «Poda» o en «Manejo»— y el
   objetivo tocable sube a 48px, que es lo que pide un pulgar. */
@media (hover:none),(pointer:coarse){
  .inv-cm-sec-h{position:sticky;top:-2px;z-index:3;
    background:var(--bg-2,#141821);padding-top:6px}
  .inv-cm-act{min-height:48px;font-size:12.5px;padding:8px 5px}
}
/* Debajo de 360px tres columnas dejan ~95px por casilla y «Poda de
   mantenimiento» cae en cuatro renglones. Ahí sí compensa bajar a dos. */
@media (max-width:359px){
  .inv-cm-actions-grid{grid-template-columns:repeat(2,1fr)}
}

/* ── Tareas viejas sin destino ────────────────────────────────────────────
   Una fila por tarea, con su selector. Al guardar se tacha y se ve el avance
   sin recargar — el aviso que no se puede accionar se aprende a ignorar. */
.hu-row{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;
  padding:8px 0;border-bottom:1px solid var(--border,#334)}
.hu-row:last-child{border-bottom:0}
.hu-info b{display:block;font-size:13px}
.hu-det{font-size:11px;opacity:.6}
.hu-dest{max-width:170px}
.hu-row.hu-lista{opacity:.45}
.hu-row.hu-lista .hu-info b{text-decoration:line-through}
.btn-mini{padding:4px 10px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;
  background:var(--bg3,#1b2130);border:1px solid var(--border,#334);color:inherit}
.btn-mini:disabled{opacity:.4;cursor:default}
.btn-mini:not(:disabled):hover{border-color:var(--accent,#22c55e)}
@media (max-width:640px){.hu-row{grid-template-columns:1fr}.hu-dest{max-width:none}}