@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&family=Outfit:wght@500;600;700;800;900&display=swap');

/* ========================================================================== 
   SISTEMA DE DISEÑO: RECORRIDO CIUDAD // METRÓPOLIS ANIME 2D (EDICIÓN PRO)
   - Skyline multicapa de alta densidad (Cordillera, puente colgante, torre de
     comunicaciones, distrito financiero de cristal, viaducto con tren expreso
     iluminado y azoteas detalladas)
   - Tarjetas Arquitectónicas de Cristal Ahumado Urbano y Ladrillo Sutil con
     identidad de color propia por módulo:
       * Granel: Ámbar / Coral Urbano (#fa927f / #fed46a)
       * Etiquetado: Cian Neón Metropolitano (#38bdf8 / #7dd3fc)
       * Producto Terminado: Esmeralda Neón / Oro (#34d399 / #6ee7b7)
   - Barra de navegación rápida (Quick-Nav) con estilo letrero de estación
   ========================================================================== */

[data-theme="ciudad"] {
  /* Paleta cromática urbana anime */
  --city-night: #08111f;
  --city-twilight: #0f1b2e;
  
  /* Superficie de cristal arquitectónico nocturno con mampostería sutil */
  --city-brick-bg: rgba(12, 20, 36, 0.86);
  --city-brick-mortar: rgba(254, 212, 106, 0.08);
  --city-surface-raised: rgba(17, 29, 50, 0.9);
  --city-surface-hover: rgba(24, 41, 70, 0.95);
  
  --city-sunset-coral: #fa927f;
  --city-sunset-rose: #f1adbd;
  --city-terracotta: #d96b52;
  --city-brick-warm: #c85a42;
  --city-neon-gold: #fed46a;
  --city-neon-cyan: #38bdf8;
  --city-neon-teal: #34d399;
  
  --city-text-primary: #f8fafc;
  --city-text-secondary: #e2e8f0;
  --city-text-muted: #94a9c9;
  
  --city-line: rgba(250, 162, 84, 0.38);
  --city-line-strong: rgba(254, 212, 106, 0.72);
  
  --city-danger: #fb7185;
  --city-success: #34d399;
  --city-warning: #fbbf24;

  /* Tokens de sistema */
  --background: transparent !important;
  --foreground: var(--city-text-primary) !important;
  --card: var(--city-brick-bg) !important;
  --card-foreground: var(--city-text-primary) !important;
  --muted: rgba(20, 34, 58, 0.68) !important;
  --muted-foreground: var(--city-text-muted) !important;
  --border: var(--city-line) !important;
  --input: rgba(8, 16, 30, 0.9) !important;
  --ring: var(--city-sunset-coral) !important;
  
  --primary: var(--city-sunset-coral) !important;
  --primary-hover: #ff7b63 !important;
  --primary-foreground: #091322 !important;
  --secondary: var(--city-twilight) !important;
  --secondary-foreground: var(--city-text-primary) !important;
  --destructive: var(--city-danger) !important;
  --destructive-hover: #f43f5e !important;
  --success: var(--city-success) !important;

  --font-sans: 'Inter', -apple-system, sans-serif !important;
  --font-heading: 'Outfit', sans-serif !important;
  --font-mono: 'JetBrains Mono', monospace !important;

  --radius-sm: 8px !important;
  --radius-md: 12px !important;
  --radius-lg: 16px !important;
}

[data-theme="ciudad"] body {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  background-color: #08101d !important;
  color: var(--city-text-primary) !important;
  font-family: var(--font-sans) !important;
}

[data-theme="ciudad"] .app-content,
[data-theme="ciudad"] #app-content {
  position: relative;
  z-index: 1;
  isolation: isolate;
  min-height: 100vh;
  background: transparent !important;
}

/* ==========================================================================
   BACKDROP DINÁMICO: METRÓPOLIS ANIME 2D (#city-dynamic-backdrop)
   ========================================================================== */
.city-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  transition: all 1.2s ease-in-out;
}

.city-sky-layer {
  position: absolute;
  inset: 0;
  transition: background 1.5s ease-in-out;
}

/* Rayos crepusculares sutiles desde el sol */
.anime-crepuscular-rays {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.45;
  background: repeating-conic-gradient(
    from -15deg at 64% 72%,
    rgba(254, 212, 106, 0.12) 0deg,
    transparent 6deg,
    rgba(250, 146, 127, 0.08) 12deg,
    transparent 20deg
  );
  mix-blend-mode: screen;
}

.phase-night .anime-crepuscular-rays {
  opacity: 0.12;
}

/* FASE 1: MAÑANA (7:00 AM - 10:30 AM) */
.city-backdrop.phase-morning {
  --cloud-sun-crest: #ffffff;
  --cloud-sun-warm: #ffdfad;
  --cloud-body-top: #f8baa0;
  --cloud-body-mid: #c786a3;
  --cloud-body-bot: #8a6c98;
  --cloud-shadow-top: #4e446d;
  --cloud-shadow-bot: #221e38;
  --cloud-rim-glow: rgba(255, 223, 173, 0.85);
  --cloud-rim-stroke: #fff5e0;
  --city-mist-color: #f8baa0;
  --city-mist-bottom: #181a2c;
  --city-viaduct-color: #161829;
  --city-tower-lattice: #7c566f;
}

.city-backdrop.phase-morning .city-sky-layer {
  background: linear-gradient(180deg, 
    #19253d 0%, 
    #313f5b 18%, 
    #5f5779 38%, 
    #a57793 58%, 
    #e2999e 75%, 
    #f8baa0 88%, 
    #ffdfad 100%
  );
}

/* FASE 2: DÍA LUMINOSO (10:30 AM - 2:30 PM) */
.city-backdrop.phase-day {
  --cloud-sun-crest: #ffffff;
  --cloud-sun-warm: #ffffff;
  --cloud-body-top: #ffffff;
  --cloud-body-mid: #e0f2fe;
  --cloud-body-bot: #bae6fd;
  --cloud-shadow-top: #7dd3fc;
  --cloud-shadow-bot: #38bdf8;
  --cloud-rim-glow: rgba(255, 255, 255, 0.95);
  --cloud-rim-stroke: #ffffff;
  --city-mist-color: #bae6fd;
  --city-mist-bottom: #142436;
  --city-viaduct-color: #122234;
  --city-tower-lattice: #386588;
}

.city-backdrop.phase-day .city-sky-layer {
  background: linear-gradient(180deg, 
    #0369a1 0%, 
    #0284c7 22%, 
    #38bdf8 48%, 
    #7dd3fc 75%, 
    #e0f2fe 100%
  );
}

/* FASE 3: ATARDECER / GOLDEN HOUR (2:30 PM - 3:45 PM) */
.city-backdrop.phase-sunset {
  --cloud-sun-crest: #fff9ed;
  --cloud-sun-warm: #ffd685;
  --cloud-body-top: #fca254;
  --cloud-body-mid: #d96383;
  --cloud-body-bot: #7e3e70;
  --cloud-shadow-top: #4f2557;
  --cloud-shadow-bot: #221435;
  --cloud-rim-glow: rgba(254, 212, 106, 0.95);
  --cloud-rim-stroke: #fff2c4;
  --city-mist-color: #fca254;
  --city-mist-bottom: #190a17;
  --city-viaduct-color: #190a17;
  --city-tower-lattice: #7c2d46;
}

.city-backdrop.phase-sunset .city-sky-layer {
  background: linear-gradient(180deg, 
    #1c1f40 0%, 
    #382d56 15%, 
    #664268 32%, 
    #a6586f 49%, 
    #e67c5c 66%, 
    #fca254 81%, 
    #fed46a 93%, 
    #fff498 100%
  );
}

/* FASE 4: NOCHE DE RASCACIELOS (3:45 PM EN ADELANTE) */
.city-backdrop.phase-night {
  --cloud-sun-crest: #38bdf8;
  --cloud-sun-warm: #1e293b;
  --cloud-body-top: #1e293b;
  --cloud-body-mid: #0f172a;
  --cloud-body-bot: #0a0f1d;
  --cloud-shadow-top: #080d19;
  --cloud-shadow-bot: #03050a;
  --cloud-rim-glow: rgba(56, 189, 248, 0.8);
  --cloud-rim-stroke: #7dd3fc;
  --city-mist-color: #38bdf8;
  --city-mist-bottom: #04070e;
  --city-viaduct-color: #050912;
  --city-tower-lattice: #1e3a5f;
}

.city-backdrop.phase-night .city-sky-layer {
  background: linear-gradient(180deg, 
    #040711 0%, 
    #0a1124 25%, 
    #111c38 54%, 
    #1a2748 80%, 
    #232d4b 100%
  );
}

/* Resplandor y halo atmosférico en el horizonte */
.anime-horizon-glow {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 52vh;
  pointer-events: none;
  transition: opacity 1.5s ease;
}

.phase-sunset .anime-horizon-glow {
  background: radial-gradient(ellipse at 52% 68%, rgba(254, 212, 106, 0.85) 0%, rgba(240, 138, 93, 0.55) 35%, rgba(166, 91, 113, 0.22) 65%, transparent 82%);
  opacity: 1;
}

.phase-morning .anime-horizon-glow {
  background: radial-gradient(ellipse at 52% 68%, rgba(255, 223, 173, 0.78) 0%, rgba(226, 153, 158, 0.45) 38%, transparent 76%);
  opacity: 1;
}

.phase-day .anime-horizon-glow {
  background: radial-gradient(ellipse at 50% 80%, rgba(255, 255, 255, 0.65) 0%, rgba(186, 230, 253, 0.35) 42%, transparent 72%);
  opacity: 0.85;
}

.phase-night .anime-horizon-glow {
  background: radial-gradient(ellipse at 55% 78%, rgba(56, 189, 248, 0.22) 0%, rgba(244, 114, 182, 0.12) 38%, rgba(30, 41, 71, 0.3) 65%, transparent 85%);
  opacity: 0.9;
}

/* ==========================================================================
   SOL Y LUNA CELESTIAL ANIME
   ========================================================================== */
.anime-celestial-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.anime-sun-container {
  position: absolute;
  bottom: 27vh;
  left: 44%;
  transform: translateX(-50%);
  width: 240px;
  height: 145px;
  transition: all 1.5s ease-in-out;
  display: block;
}

.anime-sun-disc {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #ffffff 28%, #fff69d 56%, #fed46a 82%, rgba(254, 212, 106, 0) 100%);
  box-shadow: 
    0 0 60px 20px rgba(255, 255, 255, 0.95),
    0 0 120px 45px rgba(254, 212, 106, 0.85),
    0 0 190px 75px rgba(230, 124, 92, 0.55);
  animation: sun-pulse 6s infinite alternate ease-in-out;
}

.anime-sun-strip {
  position: absolute;
  left: -25px;
  right: -25px;
  border-radius: 999px;
  pointer-events: none;
}

.strip-1 { top: 42px; height: 5.5px; background: rgba(230, 124, 92, 0.88); }
.strip-2 { top: 72px; height: 8px; background: rgba(240, 138, 93, 0.92); }
.strip-3 { top: 104px; height: 10px; background: rgba(166, 91, 113, 0.95); }

.phase-day .anime-sun-container {
  bottom: auto;
  top: 8%;
  left: 52%;
  width: 120px;
  height: 120px;
}

.phase-day .anime-sun-disc {
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, #ffffff 35%, #fff9c4 68%, rgba(255, 245, 157, 0) 100%);
  box-shadow: 0 0 75px 28px rgba(255, 255, 255, 0.95), 0 0 130px 48px rgba(186, 230, 253, 0.75);
}

.phase-day .anime-sun-strip { display: none; }

.phase-morning .anime-sun-disc {
  background: radial-gradient(circle, #fffdf0 30%, #ffdfad 65%, rgba(255, 223, 173, 0) 100%);
  box-shadow: 0 0 60px 20px rgba(255, 223, 173, 0.8), 0 0 120px 40px rgba(226, 153, 158, 0.5);
}

.phase-morning .strip-1 { background: rgba(226, 153, 158, 0.85); }
.phase-morning .strip-2 { background: rgba(168, 121, 149, 0.9); }
.phase-morning .strip-3 { background: rgba(99, 90, 123, 0.95); }

.phase-night .anime-sun-container {
  opacity: 0;
  transform: translateY(80px);
}

.anime-moon-container {
  position: absolute;
  top: 11%;
  right: 16%;
  width: 82px;
  height: 82px;
  opacity: 0;
  transition: opacity 1.5s ease;
}

.phase-night .anime-moon-container { opacity: 1; }

.anime-moon-disc {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #fffde7 45%, #fff59d 85%, #ffd54f 100%);
  box-shadow: 0 0 45px 14px rgba(255, 249, 196, 0.8), 0 0 95px 34px rgba(56, 189, 248, 0.38);
}

@keyframes sun-pulse {
  0% { transform: scale(0.97); filter: brightness(0.96); }
  100% { transform: scale(1.03); filter: brightness(1.06); }
}

/* ==========================================================================
   NUBES ANIME VOLUMÉTRICAS Y ESTRELLAS FUGACES
   ========================================================================== */
.anime-clouds-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.anime-cloud-cluster {
  position: absolute;
  will-change: transform;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.25));
}

.anime-cumulus-svg { width: 100%; height: 100%; }

.cloud-c1 { width: 620px; height: 255px; top: 3%; animation: animeFloatCloud 120s linear infinite; }
.cloud-c2 { width: 510px; height: 205px; top: 14%; animation: animeFloatCloud 150s linear infinite; animation-delay: -45s; }
.cloud-c3 { width: 440px; height: 185px; top: 2%; animation: animeFloatCloud 180s linear infinite; animation-delay: -95s; }
.cloud-c4 { width: 530px; height: 175px; top: 23%; animation: animeFloatCloud 95s linear infinite; animation-delay: -25s; }
.cloud-c5 { width: 370px; height: 145px; top: 8%; animation: animeFloatCloud 135s linear infinite; animation-delay: -70s; }

@keyframes animeFloatCloud {
  0% { transform: translateX(-680px) translateY(0); }
  50% { transform: translateX(50vw) translateY(-10px); }
  100% { transform: translateX(calc(100vw + 680px)) translateY(0); }
}

.city-stars-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.5s ease;
}

.phase-night .city-stars-layer { opacity: 1; }
.phase-sunset .city-stars-layer { opacity: 0.35; }

.anime-star {
  position: absolute;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 5px #7dd3fc;
  animation: star-twinkle 3s infinite ease-in-out;
}

.anime-star.star-cross {
  box-shadow: 0 0 8px 2px #38bdf8, 0 0 16px #ffffff;
}

@keyframes star-twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.35); }
}

/* Estrellas Fugaces Anime */
.city-shooting-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.anime-shooting-star {
  position: absolute;
  width: 140px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(56, 189, 248, 0.6) 40%, transparent 100%);
  filter: drop-shadow(0 0 6px #38bdf8);
  transform: rotate(-32deg);
  animation: shooting-star-streak 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes shooting-star-streak {
  0% { opacity: 0; transform: rotate(-32deg) translateX(0) scaleX(0.3); }
  20% { opacity: 1; transform: rotate(-32deg) translateX(-80px) scaleX(1); }
  100% { opacity: 0; transform: rotate(-32deg) translateX(-420px) scaleX(0.2); }
}

/* ==========================================================================
   SKYLINE VECTORIAL MULTICAPA ANIME 2D + TREN METROPOLITANO
   ========================================================================== */
.city-skyline-layer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60vh;
  min-height: 430px;
  pointer-events: none;
  z-index: 1;
}

.anime-skyline-svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Cordillera lejana y puente */
.sky-mountains-far { transition: fill 1.2s ease; }
.phase-sunset .sky-mountains-far { fill: #4a2342; opacity: 0.45; }
.phase-morning .sky-mountains-far { fill: #464262; opacity: 0.45; }
.phase-day .sky-mountains-far { fill: #5c87ab; opacity: 0.35; }
.phase-night .sky-mountains-far { fill: #091122; opacity: 0.65; }

.sky-suspension-bridge { transition: color 1.2s ease; }
.phase-sunset .sky-suspension-bridge { color: #5b283f; }
.phase-morning .sky-suspension-bridge { color: #3b3b58; }
.phase-day .sky-suspension-bridge { color: #3d6384; }
.phase-night .sky-suspension-bridge { color: #162844; }

.sky-building-bg { transition: fill 1.2s ease; }
.phase-sunset .sky-building-bg { fill: #33192b; opacity: 0.72; }
.phase-morning .sky-building-bg { fill: #2b3048; opacity: 0.65; }
.phase-day .sky-building-bg { fill: #3e5e7e; opacity: 0.5; }
.phase-night .sky-building-bg { fill: #070e1c; opacity: 0.85; }

.bldg { transition: fill 1.2s ease; }

.phase-sunset .bldg-base { fill: #311728; }
.phase-sunset .bldg-tower-left { fill: #3b1a2b; }
.phase-sunset .bldg-gable { fill: #351827; }
.phase-sunset .bldg-spire-body { fill: #461e30; }
.phase-sunset .bldg-spire-crown { fill: #542336; }
.phase-sunset .bldg-sun-backlit { fill: #210d1b; }
.phase-sunset .bldg-louver-main { fill: #522236; }
.phase-sunset .bldg-louver-tower { fill: #361626; }

.phase-morning .bldg-base { fill: #24283d; }
.phase-morning .bldg-tower-left { fill: #2c314a; }
.phase-morning .bldg-gable { fill: #272c42; }
.phase-morning .bldg-spire-body { fill: #373b57; }
.phase-morning .bldg-spire-crown { fill: #414663; }
.phase-morning .bldg-sun-backlit { fill: #1c2033; }
.phase-morning .bldg-louver-main { fill: #454a6b; }
.phase-morning .bldg-louver-tower { fill: #2c314a; }

.phase-day .bldg-base { fill: #1e354d; }
.phase-day .bldg-tower-left { fill: #294661; }
.phase-day .bldg-gable { fill: #243e57; }
.phase-day .bldg-spire-body { fill: #325270; }
.phase-day .bldg-spire-crown { fill: #3d6082; }
.phase-day .bldg-sun-backlit { fill: #16283b; }
.phase-day .bldg-louver-main { fill: #3e6182; }
.phase-day .bldg-louver-tower { fill: #253d54; }

.phase-night .bldg-base { fill: #0a101d; }
.phase-night .bldg-tower-left { fill: #0e1627; }
.phase-night .bldg-gable { fill: #0c1322; }
.phase-night .bldg-spire-body { fill: #121c31; }
.phase-night .bldg-spire-crown { fill: #18243e; }
.phase-night .bldg-sun-backlit { fill: #060a13; }
.phase-night .bldg-louver-main { fill: #162138; }
.phase-night .bldg-louver-tower { fill: #0c1323; }

/* Rim Highlights */
.rim-highlight {
  stroke-width: 2;
  stroke-linecap: round;
  transition: stroke 1.2s ease, opacity 1.2s ease;
}

.phase-sunset .rim-highlight {
  stroke: #fca254;
  opacity: 0.92;
  filter: drop-shadow(0 0 4px rgba(254, 212, 106, 0.65));
}

.phase-sunset .rim-backlit {
  stroke: #fed46a;
  stroke-width: 2.6;
  filter: drop-shadow(0 0 6px rgba(254, 212, 106, 0.9));
}

.phase-morning .rim-highlight { stroke: #f8baa0; opacity: 0.82; }
.phase-day .rim-highlight { stroke: #bae6fd; opacity: 0.78; stroke-width: 1.8; }
.phase-night .rim-highlight { stroke: #38bdf8; opacity: 0.45; stroke-width: 1.4; }

/* Ventanas multicolores urbanas */
.bldg-windows .win-warm,
.spire-vertical-windows .win-warm { fill: #fde047; opacity: 0.85; }
.bldg-windows .win-gold,
.spire-vertical-windows .win-gold { fill: #fdba74; opacity: 0.75; }
.bldg-windows .win-cyan,
.spire-vertical-windows .win-cyan { fill: #7dd3fc; opacity: 0.65; }

.phase-day .bldg-windows rect,
.phase-day .spire-vertical-windows rect {
  fill: #e0f2fe !important;
  opacity: 0.55 !important;
}

.phase-night .bldg-windows .win-warm,
.phase-night .spire-vertical-windows .win-warm {
  fill: #fef08a;
  opacity: 0.95;
  filter: drop-shadow(0 0 4px rgba(254, 240, 138, 0.8));
}

.phase-night .bldg-windows .win-cyan,
.phase-night .spire-vertical-windows .win-cyan {
  fill: #38bdf8;
  opacity: 0.9;
  filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.8));
}

/* Louvers Horizontales */
.phase-sunset .louver-horizontal-windows rect { fill: #fffad0; filter: drop-shadow(0 0 6px rgba(254, 212, 106, 0.95)); }
.phase-morning .louver-horizontal-windows rect { fill: #fff2d6; filter: drop-shadow(0 0 5px rgba(248, 186, 160, 0.85)); }
.phase-day .louver-horizontal-windows rect { fill: #ffffff; opacity: 0.85; }
.phase-night .louver-horizontal-windows rect { fill: #fef08a; filter: drop-shadow(0 0 7px rgba(254, 240, 138, 0.95)); animation: window-flicker 5s infinite alternate ease-in-out; }

.antenna-needle { stroke: rgba(254, 212, 106, 0.75); stroke-width: 2.2; }
.beacon-spire { fill: #ff1744; animation: beacon-blink 1s infinite alternate; }

/* Animación del Tren Expreso Metropolitano */
.anime-commuter-train {
  animation: commuter-train-pass 26s linear infinite;
}

@keyframes commuter-train-pass {
  0% { transform: translateX(-560px); }
  100% { transform: translateX(2150px); }
}

@keyframes beacon-blink {
  0% { opacity: 0.25; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1.3); filter: drop-shadow(0 0 6px currentColor); }
}

@keyframes window-flicker {
  0%, 100% { opacity: 0.96; }
  42% { opacity: 0.82; }
  46% { opacity: 0.98; }
}

.skyline-foreground-silhouette { transition: fill 1.2s ease; }
.phase-sunset .skyline-foreground-silhouette { fill: #150713; }
.phase-morning .skyline-foreground-silhouette { fill: #141625; }
.phase-day .skyline-foreground-silhouette { fill: #0f1d2c; }
.phase-night .skyline-foreground-silhouette { fill: #03060c; }

/* ==========================================================================
   AVIONES Y EASTER EGG OVNI (🛸🐄)
   ========================================================================== */
.city-air-traffic {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.city-airplane {
  position: absolute;
  left: -130px;
  display: flex;
  align-items: center;
  transform: rotate(2deg);
  animation: airplane-fly linear forwards;
}

.airplane-vapor-trail {
  width: 105px;
  height: 2.5px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.75) 100%);
  margin-right: -4px;
}

.airplane-body {
  position: relative;
  font-size: 1.15rem;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.4));
}

.airplane-nav-light {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  animation: beacon-blink 0.8s infinite alternate;
}

.light-red { top: 2px; left: 4px; background: #ff1744; box-shadow: 0 0 6px #ff1744; }
.light-green { bottom: 2px; right: 4px; background: #00e676; box-shadow: 0 0 6px #00e676; }

@keyframes airplane-fly {
  0% { transform: translateX(0) rotate(1deg); }
  100% { transform: translateX(calc(100vw + 220px)) rotate(3deg); }
}

.city-ufo-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.city-ufo-mission {
  position: absolute;
  top: 18%;
  left: 38%;
  animation: ufo-mission 14s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.ufo-craft {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ufo-saucer {
  font-size: 2.85rem;
  filter: drop-shadow(0 0 16px #38bdf8) drop-shadow(0 0 30px #fa927f);
  animation: ufo-hover 1.8s infinite ease-in-out;
}

.ufo-tractor-beam {
  width: 140px;
  height: 240px;
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.75) 0%, rgba(52, 211, 153, 0.35) 60%, transparent 100%);
  clip-path: polygon(42% 0%, 58% 0%, 100% 100%, 0% 100%);
  opacity: 0;
  animation: tractor-beam-activate 14s forwards;
  filter: drop-shadow(0 0 14px rgba(56, 189, 248, 0.6));
}

.ufo-abducted-cow {
  position: absolute;
  bottom: 10px;
  font-size: 1.6rem;
  opacity: 0;
  animation: cow-ascend 14s forwards;
}

@keyframes ufo-hover {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-8px) rotate(2deg); }
}

@keyframes ufo-mission {
  0% { transform: translate(-500px, -150px) scale(0.3); opacity: 0; }
  18% { transform: translate(0, 0) scale(1); opacity: 1; }
  82% { transform: translate(0, 0) scale(1); opacity: 1; }
  92% { transform: translate(15px, -15px) scale(1.1); opacity: 1; }
  100% { transform: translate(900px, -600px) scale(0.1); opacity: 0; filter: blur(4px); }
}

@keyframes tractor-beam-activate {
  0%, 22% { opacity: 0; transform: scaleY(0); transform-origin: top; }
  26%, 76% { opacity: 1; transform: scaleY(1); }
  80%, 100% { opacity: 0; transform: scaleY(0); }
}

@keyframes cow-ascend {
  0%, 26% { opacity: 0; transform: translateY(0) rotate(0deg); }
  28% { opacity: 1; transform: translateY(0) rotate(5deg); }
  72% { opacity: 1; transform: translateY(-160px) rotate(380deg) scale(0.5); }
  75%, 100% { opacity: 0; transform: translateY(-190px) scale(0); }
}

/* ==========================================================================
   WIDGET INTERACTIVO DE CONTROL HORARIO (.city-time-widget)
   ========================================================================== */
.city-time-widget {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 10000;
  font-family: var(--font-sans);
}

.city-widget-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(11, 20, 36, 0.94);
  border: 1.5px solid var(--city-line-strong);
  border-radius: 999px;
  padding: 8px 16px;
  color: #ffffff;
  font-size: 0.84rem;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55), 0 0 15px rgba(254, 212, 106, 0.25);
  cursor: pointer;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: all 0.2s ease;
}

.city-widget-pill:hover {
  transform: translateY(-2px);
  border-color: var(--city-sunset-coral);
  box-shadow: 0 8px 24px rgba(250, 146, 127, 0.35);
}

.city-widget-badge {
  background: rgba(254, 212, 106, 0.25);
  color: #fed46a;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
  letter-spacing: 0.05em;
}

.city-widget-popover {
  position: absolute;
  bottom: calc(100% + 12px);
  right: 0;
  width: 295px;
  background: rgba(9, 17, 32, 0.96);
  border: 1.5px solid var(--city-line-strong);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 25px rgba(254, 212, 106, 0.2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: none;
  flex-direction: column;
  gap: 10px;
}

.city-time-widget.open .city-widget-popover { display: flex; }

.popover-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 8px;
}

.popover-header strong {
  display: block;
  font-size: 0.9rem;
  color: #ffffff;
}

.popover-header small {
  color: var(--city-text-muted);
  font-size: 0.74rem;
}

.popover-buttons {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.btn-time-step {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(22, 38, 64, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 8px 12px;
  color: #f8fafc;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: left;
}

.btn-time-step:hover {
  background: rgba(254, 212, 106, 0.18);
  border-color: #fed46a;
  color: #ffffff;
  transform: translateX(2px);
}

.btn-time-step.active {
  background: linear-gradient(135deg, rgba(250, 146, 127, 0.35), rgba(245, 158, 11, 0.35));
  border-color: var(--city-sunset-coral);
  color: #ffffff;
  font-weight: 700;
}

.btn-easter-egg {
  border: 1.5px dashed var(--city-sunset-coral);
  background: rgba(250, 146, 127, 0.1);
  color: var(--city-sunset-coral);
}

.btn-easter-egg:hover {
  background: rgba(250, 146, 127, 0.25);
}

/* ==========================================================================
   DISEÑO ARQUITECTÓNICO DE VIÑETAS / TARJETAS (CRISTAL URBANO + LADRILLO SUTIL)
   - Diferenciación cromática clara entre Granel (Ámbar/Coral), Etiquetado (Cian)
     y Producto Terminado (Esmeralda/Oro)
   ========================================================================== */

[data-theme="ciudad"] .card,
[data-theme="ciudad"] .project-info-bar,
[data-theme="ciudad"] .granel-card,
[data-theme="ciudad"] .packaging-card,
[data-theme="ciudad"] .summary-card,
[data-theme="ciudad"] .solicitudes-card,
[data-theme="ciudad"] .kpi-box,
[data-theme="ciudad"] .toolbar-card,
[data-theme="ciudad"] .table-card,
[data-theme="ciudad"] .level-card,
[data-theme="ciudad"] .choice-card,
[data-theme="ciudad"] .packaging-item-card,
[data-theme="ciudad"] .phase-card-box,
[data-theme="ciudad"] .pres-card-interactive,
[data-theme="ciudad"] .slot-survey-card,
[data-theme="ciudad"] .summary-proforma-card,
[data-theme="ciudad"] .modal-card {
  position: relative !important;
  background-color: rgba(13, 20, 36, 0.92) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  color: var(--city-text-primary) !important;
  transition: all 0.2s ease !important;
  overflow: visible !important;
  padding: 20px !important;
}

/* Tarjetas internas (Tablas y Resumen) más limpias sin doble cornisa pesada */
[data-theme="ciudad"] .granel-card .card {
  padding: 0 !important;
  background-image: none !important;
  background-color: rgba(8, 14, 26, 0.88) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}

[data-theme="ciudad"] .granel-card .resumen-card {
  padding: 20px !important;
}

[data-theme="ciudad"] .granel-card .card::before,
[data-theme="ciudad"] .granel-card .card::after {
  display: none !important;
}

/* Identidad cromática por Tipo de Sección en Tema Ciudad */
/* 1. GRANEL: Ámbar / Coral Urbano */
[data-theme="ciudad"] .granel-card.card-purple {
  border-color: rgba(250, 146, 127, 0.6) !important;
  border-left: 5px solid #fa927f !important;
}

/* 2. ETIQUETADO: Cian Neón Metropolitano */
[data-theme="ciudad"] .granel-card.card-blue {
  border-color: rgba(56, 189, 248, 0.55) !important;
  border-left: 5px solid #38bdf8 !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.72), 0 0 24px rgba(56, 189, 248, 0.12) !important;
}

/* 3. PRODUCTO TERMINADO: Esmeralda Neón / Oro */
[data-theme="ciudad"] .granel-card.card-teal {
  border-color: rgba(52, 211, 153, 0.55) !important;
  border-left: 5px solid #34d399 !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.72), 0 0 24px rgba(52, 211, 153, 0.14) !important;
}

/* Contenedores sin cornisas pesadas ni remaches */
[data-theme="ciudad"] .granel-card::before,
[data-theme="ciudad"] .project-info-bar::before,
[data-theme="ciudad"] .granel-card::after,
[data-theme="ciudad"] .project-info-bar::after {
  display: none !important;
}

/* Barra de Navegación Rápida (Quick-Nav) */
[data-theme="ciudad"] .quick-nav-bar {
  background: rgba(10, 18, 33, 0.95) !important;
  border: 1px solid rgba(254, 212, 106, 0.35) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="ciudad"] .quick-nav-label {
  color: #fed46a !important;
}

[data-theme="ciudad"] .quick-nav-pill {
  background: rgba(17, 29, 52, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

[data-theme="ciudad"] .quick-nav-pill.pill-purple { border-color: rgba(250, 146, 127, 0.45) !important; }
[data-theme="ciudad"] .quick-nav-pill.pill-blue { border-color: rgba(56, 189, 248, 0.45) !important; }
[data-theme="ciudad"] .quick-nav-pill.pill-teal { border-color: rgba(52, 211, 153, 0.45) !important; }

[data-theme="ciudad"] .pill-purple .quick-nav-pill-dot { background: #fa927f !important; box-shadow: 0 0 6px #fa927f !important; }
[data-theme="ciudad"] .pill-blue .quick-nav-pill-dot { background: #38bdf8 !important; box-shadow: 0 0 6px #38bdf8 !important; }
[data-theme="ciudad"] .pill-teal .quick-nav-pill-dot { background: #fed46a !important; box-shadow: 0 0 6px #fed46a !important; }

[data-theme="ciudad"] .quick-nav-pill-val {
  background: rgba(254, 212, 106, 0.12) !important;
  color: #fed46a !important;
  border: 1px solid rgba(254, 212, 106, 0.25) !important;
}

[data-theme="ciudad"] .btn-card-tool,
[data-theme="ciudad"] .btn-quick-action {
  background: rgba(15, 26, 46, 0.9) !important;
  border-color: rgba(254, 212, 106, 0.35) !important;
  color: #fed46a !important;
}

[data-theme="ciudad"] .btn-card-tool:hover,
[data-theme="ciudad"] .btn-quick-action:hover {
  background: rgba(254, 212, 106, 0.2) !important;
  border-color: #fed46a !important;
  color: #ffffff !important;
}

/* Consola de parámetros Datos del Proyecto */
[data-theme="ciudad"] .project-info-grid {
  background: rgba(9, 16, 29, 0.9) !important;
  border: 1px solid rgba(250, 162, 84, 0.25) !important;
  border-radius: 12px !important;
  padding: 16px !important;
}

[data-theme="ciudad"] .project-info-header {
  border-bottom: 1px solid rgba(254, 212, 106, 0.2) !important;
  padding-bottom: 12px !important;
  margin-bottom: 14px !important;
}

[data-theme="ciudad"] .project-info-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(217, 107, 82, 0.2) !important;
  border: 1px solid var(--city-sunset-coral) !important;
  color: #fed46a !important;
  border-radius: 6px !important;
  padding: 4px 12px !important;
  font-family: var(--font-heading) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

/* Badges de Tipo de Sección en Flujo */
[data-theme="ciudad"] .section-type-badge {
  font-family: var(--font-heading) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
}

[data-theme="ciudad"] .section-type-badge.badge-pill-purple {
  background: rgba(250, 146, 127, 0.2) !important;
  color: #fed46a !important;
  border: 1px solid rgba(250, 146, 127, 0.5) !important;
}

[data-theme="ciudad"] .section-type-badge.badge-pill-blue {
  background: rgba(56, 189, 248, 0.2) !important;
  color: #7dd3fc !important;
  border: 1px solid rgba(56, 189, 248, 0.5) !important;
}

[data-theme="ciudad"] .section-type-badge.badge-pill-teal {
  background: rgba(52, 211, 153, 0.2) !important;
  color: #6ee7b7 !important;
  border: 1px solid rgba(52, 211, 153, 0.5) !important;
}

/* Título de Sección Editable en Flujo */
[data-theme="ciudad"] .granel-label {
  position: static !important;
  background: transparent !important;
  color: #ffffff !important;
  font-family: var(--font-heading) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  border: 1px dashed transparent !important;
  padding: 3px 8px !important;
}

[data-theme="ciudad"] .granel-label:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

[data-theme="ciudad"] .granel-label:focus {
  background: rgba(13, 20, 36, 0.95) !important;
  border-color: #fed46a !important;
}

/* Sub-módulos Mano de Obra y Resumen */
[data-theme="ciudad"] .summary-section {
  background: rgba(10, 17, 30, 0.9) !important;
  border: 1px solid rgba(250, 162, 84, 0.35) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  margin-bottom: 14px !important;
}

[data-theme="ciudad"] .card-blue .summary-section {
  border-color: rgba(56, 189, 248, 0.35) !important;
}

[data-theme="ciudad"] .card-teal .summary-section {
  border-color: rgba(52, 211, 153, 0.35) !important;
}

[data-theme="ciudad"] .summary-section h4,
[data-theme="ciudad"] .summary-section h3,
[data-theme="ciudad"] .summary-title,
[data-theme="ciudad"] .section-title {
  color: #fed46a !important;
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border-left: 3px solid #d96b52 !important;
  padding-left: 8px !important;
}

[data-theme="ciudad"] .card-blue .summary-title {
  color: #7dd3fc !important;
  border-left-color: #38bdf8 !important;
}

[data-theme="ciudad"] .card-teal .summary-title {
  color: #6ee7b7 !important;
  border-left-color: #34d399 !important;
}

/* Letrero Neón del KPI Highlight diferenciado por Sección */
[data-theme="ciudad"] .kpi-highlight {
  background: linear-gradient(135deg, #c85a42 0%, #9e3825 55%, #7c2415 100%) !important;
  border: 2px solid #fed46a !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 25px rgba(200, 90, 66, 0.45), 0 0 18px rgba(254, 212, 106, 0.3) !important;
  color: #ffffff !important;
}

[data-theme="ciudad"] .card-blue .kpi-highlight {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 55%, #075985 100%) !important;
  border-color: #7dd3fc !important;
  box-shadow: 0 8px 25px rgba(2, 132, 199, 0.45), 0 0 18px rgba(56, 189, 248, 0.3) !important;
}

[data-theme="ciudad"] .card-teal .kpi-highlight {
  background: linear-gradient(135deg, #059669 0%, #047857 55%, #065f46 100%) !important;
  border-color: #6ee7b7 !important;
  box-shadow: 0 8px 25px rgba(5, 150, 105, 0.45), 0 0 18px rgba(52, 211, 153, 0.3) !important;
}

[data-theme="ciudad"] .kpi-highlight .kpi-value {
  color: #ffffff !important;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.75) !important;
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
}

[data-theme="ciudad"] .kpi-highlight .kpi-label,
[data-theme="ciudad"] .kpi-highlight .kpi-dual-label {
  color: #fed46a !important;
  letter-spacing: 0.08em !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

[data-theme="ciudad"] .card-blue .kpi-highlight .kpi-label,
[data-theme="ciudad"] .card-blue .kpi-highlight .kpi-dual-label {
  color: #bae6fd !important;
}

[data-theme="ciudad"] .card-teal .kpi-highlight .kpi-label,
[data-theme="ciudad"] .card-teal .kpi-highlight .kpi-dual-label {
  color: #a7f3d0 !important;
}

/* Formularios, Inputs y Tablas con Marco Metálico Urbano */
[data-theme="ciudad"] input:not(.search-input),
[data-theme="ciudad"] select,
[data-theme="ciudad"] textarea,
[data-theme="ciudad"] .form-input-stylish,
[data-theme="ciudad"] .filter-select,
[data-theme="ciudad"] .status-select,
[data-theme="ciudad"] .info-input {
  background-color: rgba(9, 17, 30, 0.92) !important;
  border: 1.5px solid rgba(250, 162, 84, 0.4) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
}

[data-theme="ciudad"] .formulacion-table .input-field:not(:focus):not(:hover) {
  background: transparent !important;
  border-color: transparent !important;
}

[data-theme="ciudad"] input:not(.search-input):focus,
[data-theme="ciudad"] select:focus,
[data-theme="ciudad"] textarea:focus,
[data-theme="ciudad"] .info-input:focus {
  border-color: #fed46a !important;
  box-shadow: 0 0 0 3px rgba(254, 212, 106, 0.25) !important;
}

/* Buscador Unificado: Eliminación total de doble marco y adornos redundantes */
[data-theme="ciudad"] .search-box .search-input,
[data-theme="ciudad"] .search-box input,
[data-theme="ciudad"] .search-box-sm .search-input,
[data-theme="ciudad"] .search-box-sm input {
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #ffffff !important;
  font-size: 0.88rem !important;
  width: 100% !important;
}

[data-theme="ciudad"] .search-box .search-input:focus,
[data-theme="ciudad"] .search-box input:focus,
[data-theme="ciudad"] .search-box-sm .search-input:focus,
[data-theme="ciudad"] .search-box-sm input:focus {
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

[data-theme="ciudad"] .btn-primary {
  background: linear-gradient(135deg, #d96b52 0%, #fca254 100%) !important;
  color: #091322 !important;
  font-weight: 800 !important;
  border: 1.5px solid #fed46a !important;
  box-shadow: 0 4px 16px rgba(217, 107, 82, 0.45) !important;
  border-radius: 999px !important;
}

[data-theme="ciudad"] .btn-primary:hover {
  background: linear-gradient(135deg, #e87b63 0%, #fed46a 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 22px rgba(217, 107, 82, 0.65) !important;
}

[data-theme="ciudad"] th {
  background: rgba(15, 25, 45, 0.96) !important;
  color: #fed46a !important;
  border-bottom: 2px solid var(--city-line-strong) !important;
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

[data-theme="ciudad"] .card-blue th {
  color: #7dd3fc !important;
  border-bottom-color: rgba(56, 189, 248, 0.65) !important;
}

[data-theme="ciudad"] .card-teal th {
  color: #6ee7b7 !important;
  border-bottom-color: rgba(52, 211, 153, 0.65) !important;
}

[data-theme="ciudad"] td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--city-text-secondary) !important;
}

[data-theme="ciudad"] tr:hover td {
  background: rgba(30, 50, 84, 0.55) !important;
  color: #ffffff !important;
}

/* App Header Urbano Minimalista y Ejecutivo */
[data-theme="ciudad"] .app-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(8, 15, 28, 0.92) !important;
  border-bottom: 1px solid rgba(250, 162, 84, 0.25) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  padding: 8px 24px !important;
}

[data-theme="ciudad"] .header-left h1,
[data-theme="ciudad"] h1 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  font-family: var(--font-heading) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  text-shadow: none !important;
}

[data-theme="ciudad"] .header-left h1::after {
  content: 'METRÓPOLIS 2D';
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 7px;
  border: 1px solid rgba(254, 212, 106, 0.4);
  border-radius: 999px;
  background: rgba(254, 212, 106, 0.12);
  color: #fed46a;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  vertical-align: middle;
}

/* Armonización de Botones de la Cabecera en Recorrido Ciudad */
[data-theme="ciudad"] .btn-add-card {
  height: 34px !important;
  padding: 0 13px !important;
  border: 1px solid rgba(254, 212, 106, 0.35) !important;
  border-radius: 8px !important;
  background: rgba(254, 212, 106, 0.08) !important;
  color: #fed46a !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  box-sizing: border-box !important;
}

[data-theme="ciudad"] .btn-add-card:hover {
  background: rgba(254, 212, 106, 0.16) !important;
  border-color: #fed46a !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

[data-theme="ciudad"] .btn-webhook-action {
  height: 34px !important;
  padding: 0 13px !important;
  border: 1px solid rgba(251, 191, 36, 0.3) !important;
  border-radius: 8px !important;
  background: rgba(251, 191, 36, 0.08) !important;
  color: #fbbf24 !important;
  font-size: 0.82rem !important;
  box-sizing: border-box !important;
}

[data-theme="ciudad"] .btn-webhook-action:hover {
  background: rgba(251, 191, 36, 0.16) !important;
  border-color: #fbbf24 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

[data-theme="ciudad"] .header-separator {
  height: 18px !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

[data-theme="ciudad"] .header-more-btn {
  height: 34px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  padding: 0 11px !important;
  color: #fed46a !important;
  font-size: 0.82rem !important;
  box-sizing: border-box !important;
}

[data-theme="ciudad"] .header-more-btn:hover,
[data-theme="ciudad"] .header-more-btn.active {
  background: rgba(254, 212, 106, 0.12) !important;
  border-color: #fed46a !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(254, 212, 106, 0.25) !important;
}

[data-theme="ciudad"] .header-dropdown-menu {
  background: rgba(10, 18, 34, 0.96) !important;
  border: 1px solid rgba(250, 162, 84, 0.35) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), 0 0 20px rgba(254, 212, 106, 0.12) !important;
}

[data-theme="ciudad"] .dropdown-group-title {
  color: #94a3b8 !important;
}

[data-theme="ciudad"] .dropdown-action-btn {
  color: #ffffff !important;
}

[data-theme="ciudad"] .dropdown-action-btn:hover {
  background: rgba(254, 212, 106, 0.1) !important;
}

[data-theme="ciudad"] .dropdown-action-name {
  color: #ffffff !important;
}

[data-theme="ciudad"] .dropdown-action-hint {
  color: #94a3b8 !important;
}

[data-theme="ciudad"] .dropdown-divider {
  background: rgba(250, 162, 84, 0.2) !important;
}

[data-theme="ciudad"] .btn-theme-trigger {
  background: rgba(14, 24, 42, 0.85) !important;
  border: 1.5px solid rgba(254, 212, 106, 0.35) !important;
  color: #ffffff !important;
}

[data-theme="ciudad"] .btn-theme-trigger:hover,
[data-theme="ciudad"] .btn-theme-trigger.expanded {
  background: rgba(18, 30, 52, 0.95) !important;
  border-color: #fed46a !important;
  box-shadow: 0 0 16px rgba(254, 212, 106, 0.3) !important;
}

[data-theme="ciudad"] .theme-trigger-name {
  color: #ffffff !important;
}

[data-theme="ciudad"] .theme-trigger-tag {
  color: #fed46a !important;
}

[data-theme="ciudad"] .theme-trigger-action-hint {
  background: rgba(254, 212, 106, 0.15) !important;
  color: #fed46a !important;
}

[data-theme="ciudad"] .btn-theme-trigger:hover .theme-trigger-action-hint,
[data-theme="ciudad"] .btn-theme-trigger.expanded .theme-trigger-action-hint {
  background: #fed46a !important;
  color: #08111f !important;
}

[data-theme="ciudad"] .theme-trigger-chevron {
  color: #fed46a !important;
}

[data-theme="ciudad"] .theme-options-grid {
  background: rgba(8, 15, 28, 0.95) !important;
  border: 1px solid rgba(254, 212, 106, 0.25) !important;
}

[data-theme="ciudad"] .theme-card-mini {
  background: rgba(16, 27, 46, 0.9) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="ciudad"] .theme-card-mini:hover {
  border-color: #fed46a !important;
  box-shadow: 0 4px 14px rgba(254, 212, 106, 0.25) !important;
}

[data-theme="ciudad"] .theme-card-mini.active {
  border-color: #fed46a !important;
  box-shadow: 0 0 0 2px #fed46a, 0 0 14px rgba(254, 212, 106, 0.35) !important;
}

[data-theme="ciudad"] .theme-card-mini.active::after {
  background: #fed46a !important;
  color: #08111f !important;
}

[data-theme="ciudad"] .theme-card-mini .mini-title {
  color: #ffffff !important;
}

[data-theme="ciudad"] .theme-card-mini .mini-tag {
  color: #94a3b8 !important;
}

/* Botones y Tablas de Fórmulas con Acabado Urbano */
[data-theme="ciudad"] .btn-add-row,
[data-theme="ciudad"] .btn-add-mo {
  background: rgba(14, 24, 42, 0.85) !important;
  border: 1.5px dashed rgba(254, 212, 106, 0.55) !important;
  color: #fed46a !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
}

[data-theme="ciudad"] .btn-add-row:hover,
[data-theme="ciudad"] .btn-add-mo:hover {
  background: rgba(254, 212, 106, 0.15) !important;
  border-color: #fed46a !important;
  color: #ffffff !important;
  box-shadow: 0 0 14px rgba(254, 212, 106, 0.3) !important;
  transform: translateY(-1px) !important;
}

[data-theme="ciudad"] .formulacion-table {
  background: rgba(8, 14, 26, 0.92) !important;
  border: 1px solid rgba(250, 162, 84, 0.35) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

[data-theme="ciudad"] .search-box {
  background: rgba(9, 16, 29, 0.88) !important;
  border: 1px solid rgba(250, 162, 84, 0.35) !important;
  border-radius: 8px !important;
  padding: 0 14px !important;
  height: 38px !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

[data-theme="ciudad"] .search-box:focus-within {
  border-color: #fed46a !important;
  box-shadow: 0 0 0 2px rgba(254, 212, 106, 0.25) !important;
}

[data-theme="ciudad"] .search-box-sm {
  background: rgba(9, 16, 29, 0.8) !important;
  border: 1px solid rgba(250, 162, 84, 0.25) !important;
  border-radius: 6px !important;
  padding: 0 10px !important;
  height: 32px !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

[data-theme="ciudad"] .search-box-sm:focus-within {
  border-color: #fed46a !important;
  box-shadow: 0 0 0 2px rgba(254, 212, 106, 0.2) !important;
}

/* Botones de Mano de Obra (MOD) en Metrópolis Neón */
[data-theme="ciudad"] .btn-mo-action {
  background: rgba(14, 24, 42, 0.9) !important;
  border: 1.5px solid rgba(254, 212, 106, 0.35) !important;
  color: #ffffff !important;
  border-radius: 6px !important;
}

[data-theme="ciudad"] .btn-mo-action:hover {
  background: rgba(254, 212, 106, 0.18) !important;
  border-color: #fed46a !important;
  color: #fed46a !important;
  box-shadow: 0 0 12px rgba(254, 212, 106, 0.3) !important;
}

[data-theme="ciudad"] .btn-mo-predict {
  background: rgba(124, 58, 237, 0.2) !important;
  border: 1.5px solid rgba(167, 139, 250, 0.45) !important;
  color: #c4b5fd !important;
  border-radius: 6px !important;
}

[data-theme="ciudad"] .btn-mo-predict:hover {
  background: rgba(124, 58, 237, 0.35) !important;
  border-color: #a78bfa !important;
  color: #ffffff !important;
  box-shadow: 0 0 14px rgba(167, 139, 250, 0.4) !important;
}

[data-theme="ciudad"] .btn-mo-escalera {
  background: rgba(2, 132, 199, 0.2) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.45) !important;
  color: #7dd3fc !important;
  border-radius: 6px !important;
}

[data-theme="ciudad"] .btn-mo-escalera:hover {
  background: rgba(2, 132, 199, 0.35) !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.4) !important;
}