/* SimCity / Ciudad Viva — ported from demos/simcity_jujuy.html. ALL rules are scoped to #simcity-root so the demo full-screen styles do NOT leak into the Territoria Command Center layout. The map/deck/overlay use position:absolute relative to #simcity-root (which is position:relative). */ /* Layout breakout: the module is a full-bleed map surface. cc-center applies padding (var(--space-5)) and shows a breadcrumb above; we pull the root out to the edges and size it to fill the center zone (grid rows 96px/1fr/48px). The negative margins cancel the cc-center padding so the map reaches the panel borders; the breadcrumb stays visible above via the top margin. */ .cc-center > .simcity-host, #simcity-root{ } #simcity-root{ position:relative;width:auto; height:calc(100vh - 96px - 48px - 2.2rem - 0.7rem); min-height:560px; /* margin-top da aire: el topbar no queda pegado al borde superior */ margin:0.7rem calc(-1 * var(--space-5, 1.5rem)) calc(-1 * var(--space-5, 1.5rem)); border-top:1px solid var(--chrome-border); border-radius:0;overflow:hidden; /* Territoria — Notion-style soft light tokens */ --bg:#FAFAFA; --surface:#FFFFFF; --surface-2:#F4F4F5; --border:#E4E4E7; --border-strong:#D4D4D8; --chrome:#E2E9F3; --chrome-border:#C8D3E2; --text:#18181B; --text-mute:#71717A; --text-faint:#A1A1AA; --interactive:#6366F1; --interactive-hover:#4F46E5; --success:#16A34A; --danger:#DC2626; --warning:#EA580C; --accent:#8B5CF6; --shadow-sm:0 1px 2px rgba(0,0,0,.05); --shadow-md:0 4px 12px rgba(0,0,0,.08); --shadow-lg:0 12px 32px rgba(0,0,0,.12); --font-sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --font-mono:"JetBrains Mono",ui-monospace,monospace; } #simcity-root, #simcity-root *{box-sizing:border-box} #simcity-root{font-family:var(--font-sans);background:var(--bg);color:var(--text);overflow:hidden;letter-spacing:-0.01em} #map{position:absolute;inset:0} /* contenedor de deck.gl: deck crea y administra su canvas. */ #deck-canvas{position:absolute;inset:0} /* CLAVE PARA EL PAN: el canvas que crea deck.gl debe tener touch-action:none, si no el navegador maneja el gesto y el recognizer de pan (mjolnir/Hammer) nunca dispara → el drag NO mueve el mapa. deck adjunta su al ; lo cubrimos con un selector global del canvas de deck. */ #simcity-root > canvas, #simcity-root #deck-canvas canvas, .deck-widget, #map .maplibregl-canvas{ touch-action:none!important; -ms-touch-action:none!important; user-select:none;-webkit-user-select:none} /* overlay día/noche: gradiente sutil, no captura eventos. Su color/opacidad los maneja JS según la hora del reloj. */ #daynight{position:absolute;inset:0;z-index:5;pointer-events:none; background:transparent;transition:background .8s ease,opacity .8s ease;mix-blend-mode:multiply} /* ---- Topbar ---- */ .topbar{position:absolute;top:0;left:0;right:0;height:52px;z-index:20; display:flex;align-items:center;gap:16px;padding:0 18px; background:rgba(226,233,243,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--chrome-border)} .brand{font-weight:800;font-size:1.05rem;letter-spacing:-.02em} .brand span{color:var(--interactive)} .pill{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em; padding:3px 9px;border-radius:999px;background:var(--interactive); color:#fff;border:1px solid var(--interactive)} .topbar .sub{font-size:.78rem;color:var(--text-mute);font-weight:500} .topbar .spacer{flex:1} /* Búsqueda por DNI (padrón real) */ .dni-search{display:flex;align-items:center;gap:5px;background:#fff;border:1px solid var(--chrome-border); border-radius:999px;padding:3px 4px 3px 10px} .dni-search .dni-ico{font-size:.85rem;opacity:.7} #dni-input{border:none;outline:none;background:transparent;font-family:var(--font-sans); font-size:.8rem;width:120px;color:var(--text)} #dni-input::placeholder{color:var(--text-mute)} #dni-go{font-family:var(--font-sans);font-size:.72rem;font-weight:700;border:none;cursor:pointer; background:var(--interactive);color:#fff;border-radius:999px;padding:4px 11px} #dni-go:hover{filter:brightness(1.08)} .dni-search.notfound{border-color:var(--danger);animation:dniShake .35s} @keyframes dniShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}} .dni-msg{position:absolute;top:54px;right:18px;z-index:21;background:var(--danger);color:#fff; font-size:.72rem;font-weight:600;padding:6px 12px;border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.2); display:none} .dni-msg.show{display:block} /* Selector de LOCALIDAD (combo) + botón "toda la provincia" */ .loc-picker{display:flex;align-items:center;gap:7px} .loc-picker .loc-ico{font-size:.95rem} #locality-select{font-family:var(--font-sans);font-size:.8rem;font-weight:700; color:var(--text);background:var(--surface);border:1px solid var(--border); border-radius:8px;padding:6px 9px;max-width:320px;cursor:pointer; box-shadow:var(--shadow-sm)} #locality-select:hover{border-color:var(--interactive)} #province-view{font-family:var(--font-sans);font-size:.74rem;font-weight:700; color:var(--text);background:var(--surface);border:1px solid var(--border); border-radius:8px;padding:6px 10px;cursor:pointer;white-space:nowrap; box-shadow:var(--shadow-sm)} #province-view:hover{border-color:var(--interactive);color:var(--interactive)} #province-view.active{background:var(--interactive);border-color:var(--interactive);color:#fff} /* 🔄 Refrescar mapa — mismo molde que province-view, con el gradiente de marca */ #map-refresh{font-family:var(--font-sans);font-size:.74rem;font-weight:700; color:#fff;border:none;border-radius:8px;padding:6px 12px;cursor:pointer; white-space:nowrap;background:linear-gradient(135deg,#00d4ff 0%,#a855f7 100%); box-shadow:0 2px 8px rgba(99,102,241,.35);transition:transform .15s,filter .15s,box-shadow .15s} #map-refresh:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 4px 14px rgba(168,85,247,.5)} #map-refresh:active{transform:translateY(0)} .clock{font-family:var(--font-mono);font-size:.8rem;font-weight:600; padding:4px 9px;border-radius:8px;background:var(--surface);border:1px solid var(--border); display:flex;align-items:center;gap:6px} #clock-time{font-size:.8rem;white-space:nowrap} .phase-badge{font-size:.66rem;text-transform:uppercase;letter-spacing:.05em; padding:2px 7px;border-radius:5px;font-weight:700} /* AMBIENTE del momento (clima de Jujuy + feriado), junto a la fecha/hora EN VIVO. Compacto, en la MISMA línea del reloj, tono tenue (no compite con la hora). Vacío cuando no hay ambiente → no ocupa lugar. */ .clock-ambient{font-family:var(--font-sans);font-size:.72rem;font-weight:600; color:var(--text-secondary,#64748B);white-space:nowrap} .clock-ambient:empty{display:none} /* Indicador "▶ corriendo / pausado" — pulso verde mientras el reloj avanza */ #run-indicator{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-sans); font-size:.64rem;text-transform:uppercase;letter-spacing:.05em;font-weight:800; padding:3px 8px;border-radius:20px;transition:all .25s ease} /* Tono NEUTRO (gris-azulado), NO verde: no debe leerse como "simulando". El estado de la SIMULACIÓN lo da el day-badge, no este indicador. */ #run-indicator.run-on{background:rgba(100,116,139,.12);color:#475569} #run-indicator.run-off{background:rgba(113,113,122,.16);color:#52525B} .run-dot{width:8px;height:8px;border-radius:50%;background:#64748B;flex:none} #run-indicator.run-on .run-dot{animation:runPulse 1.6s infinite} #run-indicator.run-off .run-dot{background:#9CA3AF;animation:none} @keyframes runPulse{0%{box-shadow:0 0 0 0 rgba(100,116,139,.5)}70%{box-shadow:0 0 0 7px rgba(100,116,139,0)}100%{box-shadow:0 0 0 0 rgba(100,116,139,0)}} /* "● EN VIVO" — el phase-badge en modo LIVE (EN VIVO ahora): rojo con texto pulsante para dejar OBVIO que el mapa es el momento real (no el ciclo sim). El "●" del texto hace de punto pulsante junto a "EN VIVO". */ .phase-badge.live-now{display:inline-flex;align-items:center; background:rgba(220,38,38,.12);color:#dc2626; animation:liveNowPulse 1.6s ease-in-out infinite} @keyframes liveNowPulse{0%,100%{opacity:1}50%{opacity:.6}} /* ---- Panel de INSPECCIÓN (datos del ciudadano clickeado) ---- */ #insp-panel{position:absolute;z-index:19;top:66px;right:14px;width:280px; background:rgba(255,255,255,.97);backdrop-filter:blur(16px);border:1px solid var(--border); border-radius:14px;box-shadow:var(--shadow-lg);padding:14px;display:none; animation:inspIn .18s ease} #insp-panel.open{display:block} @keyframes inspIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} #insp-close{position:absolute;top:8px;right:8px;width:24px;height:24px;border:none; background:transparent;color:var(--text-mute);font-size:.95rem;cursor:pointer;border-radius:6px;line-height:1} #insp-close:hover{background:rgba(0,0,0,.06);color:var(--text)} .insp-head{display:flex;gap:11px;align-items:center;margin-bottom:12px;padding-right:18px} #insp-avatar{width:54px;height:54px;border-radius:12px;flex:none; border:2px solid var(--border);background:#F1F5F9} .insp-title{font-weight:800;font-size:.96rem;color:var(--text);letter-spacing:-.01em} .insp-sub{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:700;margin-top:3px} .insp-sub .tdot{width:9px;height:9px;border-radius:50%;display:inline-block} .insp-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px} .insp-cell{background:rgba(15,23,42,.04);border-radius:9px;padding:7px 9px} .insp-cell.full{grid-column:1 / -1} .insp-cell .k{font-size:.62rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-mute);font-weight:800} .insp-cell .v{font-size:.86rem;font-weight:700;color:var(--text);margin-top:2px} .insp-op{margin-top:10px;border-radius:9px;padding:8px 10px;font-size:.82rem;font-weight:800;text-align:center} .insp-foot{margin-top:11px;font-size:.62rem;color:var(--text-mute);line-height:1.35;text-align:center} /* ---- Panels ---- */ .panel{position:absolute;z-index:15;background:rgba(255,255,255,.94);backdrop-filter:blur(14px); border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg)} .panel h3{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-mute); margin-bottom:10px;font-weight:800} /* Left COLUMN: contenedor de DOS tarjetas apiladas (Contexto + Controles), separadas como Capas/Noticias a la derecha. La columna es flex; cada tarjeta tiene su propio recuadro (.panel). */ .left-column{position:absolute;z-index:15;top:66px;left:14px;width:288px;bottom:120px; display:flex;flex-direction:column;gap:10px} /* Las dos tarjetas anulan el position:absolute de .panel y se apilan en el flex */ .left-ctx, .left-ctrl{position:relative !important;top:auto !important;left:auto !important; right:auto !important;bottom:auto !important;width:100%;margin:0} .left-ctx{flex:0 0 auto;max-height:44%;overflow-y:auto;padding:14px 16px} /* Contexto arriba, acotado */ /* Controles: se ajusta al CONTENIDO (no se estira para llenar la columna, así no queda un hueco blanco entre el botón Simular y el borde de la tarjeta). Si el contenido excede la columna, encoge y scrollea (flex-shrink:1 + overflow). */ .left-ctrl{flex:0 1 auto;min-height:0;overflow-y:auto;padding:16px} /* el ctx-panel ya no necesita su fondo propio (la tarjeta .left-ctx lo envuelve) */ .left-ctx .ctx-panel{background:none;border:none;box-shadow:none;padding:0;margin:0} .ctrl-row{display:flex;gap:8px;align-items:center;margin-bottom:14px} button{font-family:var(--font-sans);cursor:pointer;border:1px solid var(--border); background:var(--surface);color:var(--text);border-radius:9px;padding:8px 12px; font-weight:600;font-size:.82rem;transition:all .15s;box-shadow:var(--shadow-sm)} button:hover{border-color:var(--interactive);background:var(--surface-2)} button.primary{background:var(--interactive);border-color:var(--interactive);color:#fff} button.primary:hover{background:var(--interactive-hover);border-color:var(--interactive-hover)} button.active{background:var(--interactive);border-color:var(--interactive);color:#fff} .speed-group{display:flex;gap:4px} .speed-group button{padding:6px 9px;font-size:.74rem;font-family:var(--font-mono)} .slider-label{font-size:.72rem;color:var(--text-mute);margin-bottom:4px;display:flex;justify-content:space-between} input[type=range]{width:100%;accent-color:var(--interactive);height:9px;cursor:pointer} input[type=range]::-webkit-slider-runnable-track{height:9px;border-radius:5px} input[type=range]::-moz-range-track{height:9px;border-radius:5px} input[type=range]::-webkit-slider-thumb{width:22px;height:22px;margin-top:-7px} input[type=range]::-moz-range-thumb{width:22px;height:22px} /* category tabs for the action catalog */ .cat-tabs{display:flex;gap:4px;margin-bottom:10px;flex-wrap:wrap} .cat-tab{flex:1 1 auto;min-width:0;padding:6px 4px;font-size:.66rem;font-weight:700; display:flex;align-items:center;justify-content:center;gap:3px;border-radius:8px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cat-tab.active{background:var(--interactive);border-color:var(--interactive);color:#fff} .cat-tab .em{font-size:.9rem} .action-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:6px} .action-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:11px 6px; text-align:center;line-height:1.15;font-size:.72rem} .action-btn .em{font-size:1.3rem} .action-btn.sel{background:var(--accent);border-color:var(--accent);color:#fff; box-shadow:0 0 0 2px rgba(139,92,246,.35), 0 4px 14px rgba(139,92,246,.45); animation:armPulse 1.1s ease-in-out infinite} @keyframes armPulse{0%,100%{box-shadow:0 0 0 2px rgba(139,92,246,.30),0 4px 12px rgba(139,92,246,.40)} 50%{box-shadow:0 0 0 3px rgba(139,92,246,.55),0 6px 22px rgba(139,92,246,.65)}} /* Banner de armado, centrado arriba del mapa */ #arm-banner{position:absolute;top:96px;left:50%;transform:translateX(-50%);z-index:18; display:none;align-items:center;gap:10px;padding:10px 18px;border-radius:999px; background:rgba(255,255,255,.96);border:1px solid var(--accent); box-shadow:0 6px 28px rgba(139,92,246,.28);backdrop-filter:blur(10px); font-size:.86rem;font-weight:700;color:var(--text);pointer-events:none; animation:bannerIn .25s ease} #arm-banner .txt{color:var(--text)} #arm-banner .lbl{color:#fff;background:var(--accent);padding:3px 11px;border-radius:999px;font-weight:800} #arm-banner .pulse-dot{width:11px;height:11px;border-radius:50%;background:var(--accent); box-shadow:0 0 0 0 rgba(139,92,246,.7);animation:dotPulse 1.2s infinite} @keyframes dotPulse{0%{box-shadow:0 0 0 0 rgba(139,92,246,.7)} 70%{box-shadow:0 0 0 12px rgba(139,92,246,0)}100%{box-shadow:0 0 0 0 rgba(139,92,246,0)}} @keyframes bannerIn{from{opacity:0;transform:translateX(-50%) translateY(-6px)}to{opacity:1;transform:translateX(-50%)}} .hint{font-size:.7rem;color:var(--text-faint);margin-top:8px;line-height:1.4} .hint.armed{color:var(--accent);font-weight:600} /* ---- Texto libre + alcance + simular (v2: LLM en vivo) ---- */ .sim-textarea{width:100%;box-sizing:border-box;font-family:var(--font-sans);font-size:.82rem; border:1px solid var(--border);border-radius:9px;padding:9px 11px;resize:vertical;min-height:56px; background:var(--surface);color:var(--text);line-height:1.4;box-shadow:var(--shadow-sm)} .sim-textarea:focus{outline:none;border-color:var(--interactive);box-shadow:0 0 0 2px rgba(99,102,241,.18)} .chips{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 4px} .chip{font-size:.66rem;font-weight:600;padding:4px 9px;border-radius:999px;border:1px solid var(--border); background:var(--surface);color:var(--text-mute);cursor:pointer;transition:all .12s;box-shadow:none; display:inline-flex;align-items:center;gap:4px} .chip:hover{border-color:var(--accent);color:var(--accent);background:rgba(139,92,246,.06)} .chip .em{font-size:.85rem} /* ---- SELECTOR DE MODO (🔴 Realidad / 🔵 Prospectiva) — pieza 3d ---- Mismo lenguaje visual que .scope-group/.days-group: dos botones, el activo en color de acento. Reusa las variables del mapa (sin theme nuevo). */ .mode-toggle{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:8px 0} .mode-toggle button{padding:9px 6px;font-size:.74rem;font-weight:700;line-height:1.2} .mode-toggle button.active{background:var(--accent);border-color:var(--accent);color:#fff} /* modo Realidad: etiqueta de la ZONA activa + nota de comentarios reales */ .real-zone{font-size:.72rem;color:var(--text-mute);background:var(--surface-2); border:1px solid var(--border);border-radius:9px;padding:7px 11px;margin-top:8px;line-height:1.4; display:flex;align-items:center;gap:6px} .real-zone b{color:var(--accent);font-weight:800} /* combo de zona inline (Escucha + Simulación) — setea la localidad desde acá */ .zone-sel{flex:1 1 auto;min-width:0;font-size:.72rem;font-weight:700;color:var(--accent); background:var(--surface);border:1px solid var(--border);border-radius:7px; padding:4px 8px;cursor:pointer;max-width:100%} .zone-sel:focus{outline:none;border-color:var(--accent)} .zone-sel:hover{border-color:var(--accent)} .real-comments-note{font-size:.68rem;color:var(--text-mute);line-height:1.45; background:var(--surface-2);border:1px solid var(--border);border-radius:9px; padding:9px 11px;margin-top:10px} .real-comments-note b{color:var(--text)} .scope-group{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:8px 0} .scope-group button{padding:7px 6px;font-size:.72rem;font-weight:700} .scope-group button.active{background:var(--accent);border-color:var(--accent);color:#fff} .scope-hint{font-size:.66rem;color:var(--text-faint);line-height:1.4;margin-top:2px} /* selector de DÍAS a simular (horizonte temporal de la difusión) */ .days-group{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:8px 0 16px} .days-group button{padding:7px 4px;font-size:.72rem;font-weight:700} .days-group button.active{background:var(--accent);border-color:var(--accent);color:#fff} /* =========================================================================== OPCIONES AVANZADAS — público objetivo de la simulación (colapsable, chico). =========================================================================== */ .adv-aud{margin:10px 0 4px} .adv-aud-toggle{width:100%;display:flex;align-items:center;gap:6px;background:none; border:1px dashed var(--border-strong);border-radius:8px;padding:7px 10px;cursor:pointer; font-size:.72rem;font-weight:700;color:var(--text-mute);transition:border-color .12s,color .12s} .adv-aud-toggle:hover{border-color:var(--accent);color:var(--text)} .adv-aud-toggle .aat-ico{font-size:.82rem} .adv-aud-toggle .aat-sub{margin-left:auto;font-weight:600;font-size:.66rem;color:var(--text-faint); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px} .adv-aud-toggle .aat-sub.is-active{color:var(--accent)} .adv-aud-toggle .aat-caret{flex:none;transition:transform .15s;font-size:.62rem} .adv-aud.open .adv-aud-toggle .aat-caret{transform:rotate(90deg)} .adv-aud.has-filter .adv-aud-toggle{border-style:solid;border-color:var(--accent)} .adv-aud-body{padding:10px 2px 4px} .adv-aud-body .aud-hint{font-size:.64rem;color:var(--text-faint);line-height:1.35;margin-bottom:9px} .aud-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap} .aud-row .aud-lbl{flex:0 0 84px;font-size:.66rem;font-weight:700;color:var(--text-mute)} .aud-age{font-size:.7rem;color:var(--text-mute);display:flex;align-items:center;gap:5px} .aud-num{width:48px;padding:4px 6px;font-size:.72rem;font-family:var(--font-mono); border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text);text-align:center} .aud-num:focus{outline:none;border-color:var(--accent)} .aud-chips{display:flex;flex-wrap:wrap;gap:5px} .aud-chip{padding:4px 10px;font-size:.68rem;font-weight:700;border:1px solid var(--border); border-radius:999px;background:var(--surface);color:var(--text-mute);cursor:pointer; transition:background .12s,border-color .12s,color .12s} .aud-chip:hover{border-color:var(--accent);color:var(--text)} .aud-chip.is-on{background:var(--accent);border-color:var(--accent);color:#fff} .aud-clear{margin-top:4px;background:none;border:none;color:var(--danger);font-size:.66rem; font-weight:700;cursor:pointer;padding:2px 0} .aud-clear:hover{text-decoration:underline} /* =========================================================================== MODO ENCUESTA — toggle Consulta/Encuesta, editor de opciones, barras de resultado por opción y análisis por opción. =========================================================================== */ .simtype-group{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:10px 0 12px} .simtype-group button{padding:8px 6px;font-size:.74rem;font-weight:700;border:1px solid var(--border); border-radius:8px;background:var(--surface);color:var(--text-mute);cursor:pointer;transition:all .12s} .simtype-group button:hover{border-color:var(--accent);color:var(--text)} .simtype-group button.active{background:var(--accent);border-color:var(--accent);color:#fff} /* editor de opciones */ .poll-editor{margin:10px 0;padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)} .poll-ed-label{font-size:.68rem;font-weight:800;color:var(--text-mute);margin-bottom:8px} .poll-ed-label .poll-ed-hint{font-weight:500;color:var(--text-faint)} .poll-opt{display:flex;align-items:center;gap:7px;margin-bottom:6px} .poll-opt .po-dot{flex:none;width:12px;height:12px;border-radius:50%} .poll-opt .po-input{flex:1 1 auto;min-width:0;padding:6px 8px;font-size:.76rem;border:1px solid var(--border); border-radius:7px;background:var(--surface);color:var(--text)} .poll-opt .po-input:focus{outline:none;border-color:var(--accent)} .poll-opt .po-del{flex:none;width:24px;height:24px;border:none;border-radius:6px;background:none; color:var(--text-faint);cursor:pointer;font-size:.8rem} .poll-opt .po-del:hover:not(:disabled){background:var(--surface);color:var(--danger)} .poll-opt .po-del:disabled{opacity:.3;cursor:not-allowed} .poll-add{margin-top:4px;background:none;border:1px dashed var(--border-strong);border-radius:7px; padding:6px 10px;font-size:.7rem;font-weight:700;color:var(--accent);cursor:pointer;width:100%} .poll-add:hover:not(:disabled){border-color:var(--accent);background:var(--surface)} .poll-add:disabled{opacity:.4;cursor:not-allowed} /* barras por opción del result card */ .rc-poll{display:flex;flex-direction:column;gap:9px;margin:10px 0} .rcp-row{display:flex;flex-direction:column;gap:3px} .rcp-row.win .rcp-lab{font-weight:800} .rcp-top{display:flex;align-items:center;gap:7px;font-size:.74rem} .rcp-dot{flex:none;width:11px;height:11px;border-radius:50%} .rcp-lab{flex:1 1 auto;color:var(--text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rcp-pct{flex:none;font-family:var(--font-mono);font-weight:800;color:var(--text)} .rcp-bar{height:12px;background:var(--surface-2);border-radius:6px;overflow:hidden;border:1px solid var(--border)} .rcp-fill{display:block;height:100%;border-radius:6px;transition:width .6s ease} .rcp-n{font-size:.62rem;color:var(--text-faint);font-family:var(--font-mono)} /* análisis por opción: fila con barra apilada + ganadora del segmento */ .pa-row{display:grid;grid-template-columns:72px 1fr auto;gap:8px;align-items:center;margin-bottom:6px;font-size:.68rem} .pa-lab{color:var(--text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pa-bar{display:flex;height:12px;border-radius:6px;overflow:hidden;border:1px solid var(--border);background:var(--surface-2)} .pa-seg{display:block;height:100%} .pa-win{font-weight:800;font-size:.64rem;white-space:nowrap} /* etiquetas con tooltip (texto completo / descripción NSE) → cursor de ayuda */ .bd-row .lab[title],.pa-lab[title],.pa-win[title]{cursor:help} /* ---- Guía paso a paso ---- */ .step-label{display:flex;align-items:center;gap:7px;font-size:.74rem;font-weight:700; color:var(--text);margin-bottom:6px;line-height:1.3} .step-num{flex:none;width:18px;height:18px;border-radius:50%;background:var(--accent);color:#fff; font-size:.66rem;font-weight:800;display:flex;align-items:center;justify-content:center} /* caja del PASO 3 (lugar): cambia según haya o no punto marcado */ .place-box{font-size:.72rem;font-weight:600;line-height:1.4;border-radius:9px;padding:9px 11px; margin-top:2px;border:1px dashed var(--accent);background:rgba(139,92,246,.06);color:var(--accent); display:flex;align-items:center;gap:8px} .place-box.need{border-style:dashed;animation:placePulse 1.4s ease-in-out infinite} .place-box.set{border-style:solid;border-color:var(--success);background:rgba(22,163,74,.08);color:var(--success)} .place-box .pb-em{font-size:1rem;flex:none} .place-box .pb-change{margin-left:auto;font-size:.62rem;font-weight:700;text-decoration:underline; cursor:pointer;color:inherit;opacity:.85} @keyframes placePulse{0%,100%{border-color:rgba(139,92,246,.5)}50%{border-color:rgba(139,92,246,1)}} /* resumen "Vas a simular: …" antes del botón */ .sim-summary{font-size:.72rem;line-height:1.45;color:var(--text-mute);background:var(--surface-2); border:1px solid var(--border);border-radius:9px;padding:8px 11px;margin-bottom:8px;display:none} .sim-summary.show{display:block} .sim-summary b{color:var(--text)} .sim-summary .lvl{color:var(--accent);font-weight:800} /* botón deshabilitado cuando falta marcar el punto (estado "esperando lugar") */ .sim-launch.need-place{opacity:.55;cursor:not-allowed;background:var(--border-strong); border-color:var(--border-strong);box-shadow:none} .sim-launch.need-place:hover{background:var(--border-strong);border-color:var(--border-strong)} .sim-launch{width:100%;margin-top:10px;padding:11px;font-size:.86rem;font-weight:800; display:flex;align-items:center;justify-content:center;gap:8px} .sim-launch:disabled{opacity:.6;cursor:wait} .mini-spinner{width:15px;height:15px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff; border-radius:50%;animation:spin 1s linear infinite;display:inline-block} .sim-status{font-size:.68rem;color:var(--accent);font-weight:600;margin-top:7px;min-height:1em;line-height:1.4} .sim-status.err{color:var(--danger)} /* contador de días + badge corriendo en la topbar */ .day-badge{font-family:var(--font-mono);font-size:.92rem;font-weight:800;color:var(--accent); background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.3);border-radius:8px; padding:3px 10px;display:inline-flex;align-items:center;gap:5px} .day-badge.idle{color:var(--text-faint);background:var(--surface-2);border-color:var(--border)} /* día-badge: en progreso (ámbar pulsante) vs estabilizado (verde fijo) */ .day-badge.running{color:#b45309;background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.4); animation:dayPulse 1.1s ease-in-out infinite} .day-badge.done{color:#15803d;background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.4)} @keyframes dayPulse{0%,100%{opacity:1}50%{opacity:.55}} /* indicador de estado de la SIMULACIÓN (en el panel de control) */ .sim-state{font-size:.72rem;font-weight:700;margin-top:8px;padding:7px 10px;border-radius:8px; display:none;align-items:center;gap:7px;line-height:1.35} .sim-state.show{display:flex} .sim-state.running{color:#b45309;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.32)} .sim-state.done{color:#15803d;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.34)} .sim-state .spin{width:13px;height:13px;border:2px solid rgba(180,83,9,.3);border-top-color:#b45309; border-radius:50%;animation:spin 1s linear infinite;flex:none} /* PANEL DE RESULTADO FINAL (veredicto) */ .result-card{display:none;flex:none;margin-bottom:14px;border:1px solid rgba(34,197,94,.4);border-radius:12px; background:linear-gradient(180deg,rgba(34,197,94,.10),rgba(34,197,94,.03)); box-shadow:var(--shadow-sm);animation:resIn .35s ease; /* CAP de altura + scroll propio: el card del veredicto NO debe tapar el feed al terminar. Queda compacto arriba; el feed (abajo) sigue visible para LEER las opiniones después de que la simulación cierra. */ max-height:42vh;overflow-y:auto} /* radius mantenido sin overflow:hidden (que cortaba el contenido): redondeamos los hijos extremos en vez de clipear el card. Así se ve TODO (sparkline+botón). */ .result-card .rc-head{border-radius:12px 12px 0 0} .result-card .rc-body{border-radius:0 0 12px 12px} .result-card.show{display:block} .result-card.dividida{border-color:rgba(245,158,11,.45);background:linear-gradient(180deg,rgba(245,158,11,.10),rgba(245,158,11,.03))} .result-card.rechazo{border-color:rgba(239,68,68,.45);background:linear-gradient(180deg,rgba(239,68,68,.10),rgba(239,68,68,.03))} @keyframes resIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .result-card .rc-head{display:flex;align-items:flex-start;gap:7px;padding:11px 14px 10px;font-size:.72rem; font-weight:800;color:#15803d;border-bottom:1px solid rgba(34,197,94,.2);line-height:1.35; text-transform:uppercase;letter-spacing:.02em} .result-card .rc-head #rc-head-ico{flex:none;line-height:1.35} .result-card .rc-head #rc-head-txt{flex:1;min-width:0;overflow-wrap:anywhere} .result-card.dividida .rc-head{color:#b45309;border-bottom-color:rgba(245,158,11,.2)} .result-card.rechazo .rc-head{color:#dc2626;border-bottom-color:rgba(239,68,68,.2)} .result-card .rc-body{padding:11px 13px 12px} .result-card .rc-verdict{display:block;font-size:1.2rem;font-weight:800;color:#15803d; line-height:1.2;text-align:center;overflow-wrap:anywhere;margin-bottom:2px} .result-card.dividida .rc-verdict{color:#b45309} .result-card.rechazo .rc-verdict{color:#dc2626} .result-card .rc-net{font-size:.68rem;color:var(--text-mute);margin-top:3px;font-weight:600; text-align:center;line-height:1.32;overflow-wrap:anywhere} .result-card .rc-net b{font-family:var(--font-mono)} .rc-bars{display:flex;gap:6px;margin-top:11px} .rc-bars .rc-b{flex:1;text-align:center;border-radius:8px;padding:6px 4px;background:var(--surface-2); border:1px solid var(--border)} .rc-bars .rc-b .pv{font-size:1.1rem;font-weight:800;font-family:var(--font-mono);line-height:1} .rc-bars .rc-b .pl{font-size:.56rem;text-transform:uppercase;letter-spacing:.03em;color:var(--text-faint);margin-top:3px} .rc-bars .rc-b.ap .pv{color:var(--success)} .rc-bars .rc-b.ind .pv{color:#71717A} .rc-bars .rc-b.rj .pv{color:var(--danger)} .rc-spark{margin-top:11px} .rc-spark .sl{font-size:.58rem;text-transform:uppercase;letter-spacing:.03em;color:var(--text-faint);margin-bottom:4px;text-align:center} .rc-actions{margin-top:11px} .rc-actions button{width:100%;font-weight:700;font-size:.78rem;padding:9px} /* CONTEXTO de actualidad de Jujuy (panel izquierda, arriba) */ .ctx-panel{border:1px solid var(--border);border-radius:11px;background:linear-gradient(180deg,rgba(99,102,241,.07),rgba(99,102,241,.02)); padding:10px 11px 9px;margin-bottom:16px} .ctx-head{font-size:.72rem;font-weight:800;letter-spacing:.01em;display:flex;align-items:center;gap:6px;flex-wrap:wrap} .ctx-humor{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:2px 7px;border-radius:20px; background:var(--surface-2);border:1px solid var(--border);color:var(--text-mute)} .ctx-humor.neg{color:#dc2626;border-color:rgba(239,68,68,.4);background:rgba(239,68,68,.08)} .ctx-humor.pos{color:#15803d;border-color:rgba(34,197,94,.4);background:rgba(34,197,94,.08)} .ctx-humor.mix{color:#b45309;border-color:rgba(245,158,11,.4);background:rgba(245,158,11,.08)} .ctx-grid{display:flex;flex-direction:column;gap:5px;margin-top:9px} .ctx-row{display:flex;justify-content:space-between;gap:8px;font-size:.66rem;line-height:1.3} .ctx-row .ck{color:var(--text-mute)} .ctx-row .cv{font-weight:700;font-family:var(--font-mono);text-align:right} .ctx-foot{font-size:.56rem;color:var(--text-faint);margin-top:8px;line-height:1.35} /* REPREGUNTA acotada (una sola, opcional) */ .clarify-box{display:none;margin-top:10px;border:1px solid rgba(99,102,241,.4);border-radius:10px; background:rgba(99,102,241,.06);padding:10px 11px} .clarify-box.show{display:block} .clarify-q{font-size:.72rem;font-weight:700;line-height:1.35;margin-bottom:8px} .clarify-q .qico{margin-right:5px} .clarify-box input{width:100%;box-sizing:border-box;font-size:.74rem;padding:7px 9px;border-radius:8px; border:1px solid var(--border);background:var(--surface);color:var(--text);margin-bottom:8px} .clarify-acts{display:flex;gap:7px} .clarify-acts button{flex:1;font-size:.72rem;font-weight:700;padding:8px} .clarify-skip{background:var(--surface-2)!important} /* CONCLUSIÓN cualitativa (informe de asesor, en el card de resultado) */ .rc-concl{margin-top:13px;border-top:1px solid var(--border);padding-top:12px} .rc-concl-head{font-size:.74rem;font-weight:800;display:flex;align-items:center;gap:6px;margin-bottom:9px} .rc-concl-status{font-size:.64rem;color:var(--text-mute);font-style:italic} .rc-concl-status .mini-spinner{margin-right:5px} .concl-sec{margin-bottom:10px} .concl-sec:last-child{margin-bottom:0} .concl-sec .cs-t{font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--accent,#6366f1);margin-bottom:3px;display:flex;align-items:center;gap:5px} .concl-sec .cs-b{font-size:.72rem;line-height:1.45;color:var(--text)} .concl-sec.rec{background:rgba(99,102,241,.06);border:1px solid rgba(99,102,241,.25);border-radius:9px;padding:8px 9px} /* Titulares SIMULADOS de los diarios — hermano de .rc-concl (misma estética). Lo que cada diario TITULARÍA sobre la situación hipotética, según su línea editorial. SIEMPRE con el sello SIMULADO (legal, no negociable). */ .rc-headlines{margin-top:13px;border-top:1px solid var(--border);padding-top:12px} .rc-hl-stamp{font-size:.6rem;font-weight:800;letter-spacing:.02em;color:#b45309; background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.4); border-radius:8px;padding:6px 8px;margin-bottom:9px;line-height:1.35} .rc-hl-empty{font-size:.7rem;color:var(--text-mute);font-style:italic} .rc-hl-item{margin-bottom:9px;border:1px solid var(--border);border-radius:9px; padding:8px 9px;background:rgba(99,102,241,.03);border-left-width:3px} .rc-hl-item:last-child{margin-bottom:0} .rc-hl-top{display:flex;align-items:center;gap:7px;justify-content:space-between;margin-bottom:4px} .rc-hl-medio{font-size:.66rem;font-weight:800;color:var(--text);overflow-wrap:anywhere} .rc-hl-chip{flex:none;font-size:.56rem;font-weight:700;text-transform:uppercase; letter-spacing:.03em;padding:2px 6px;border-radius:999px; background:var(--surface-2,rgba(0,0,0,.04));color:var(--text-mute);white-space:nowrap} .rc-hl-titular{font-size:.78rem;line-height:1.4;font-weight:600;color:var(--text)} /* color por línea editorial (mismo lenguaje que Gestionar Medios) */ .rc-hl-item.hl-defensor{border-left-color:#2563eb} .rc-hl-item.hl-critico{border-left-color:#dc2626} .rc-hl-item.hl-neutral{border-left-color:#71717a} .rc-hl-item.hl-esquivo{border-left-color:#d97706} .rc-hl-item.hl-sensacionalista{border-left-color:#db2777} .rc-hl-chip.hl-defensor{color:#2563eb;background:rgba(37,99,235,.10)} .rc-hl-chip.hl-critico{color:#dc2626;background:rgba(220,38,38,.10)} .rc-hl-chip.hl-neutral{color:#71717a;background:rgba(113,113,122,.12)} .rc-hl-chip.hl-esquivo{color:#d97706;background:rgba(217,119,6,.10)} .rc-hl-chip.hl-sensacionalista{color:#db2777;background:rgba(219,39,119,.10)} /* Right: feed */ /* bottom:170px (no 14): la tarjeta de TRIBUS (.legend) ocupa la franja inferior de ancho completo en bottom:14 y, al ir después en el DOM, tapaba la parte de abajo del panel derecho (la "Recomendación de acción" salía cortada). Dejamos que el panel termine ARRIBA del legend; el contenido scrollea con overflow. */ .right{top:66px;right:14px;width:340px;padding:16px;bottom:170px; display:flex;flex-direction:column;overflow-y:auto} .metrics{display:flex;gap:8px;margin-bottom:14px} .metric{flex:1;background:var(--surface-2);border:1px solid var(--border);border-radius:10px; padding:9px 10px;text-align:center;box-shadow:var(--shadow-sm)} .metric .v{font-size:1.35rem;font-weight:800;font-family:var(--font-mono);line-height:1} .metric .l{font-size:.6rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-faint);margin-top:4px} /* NOTICIAS REALES DEL MOMENTO — "Ciudad Viva siempre viva". Tema claro/blanco, lista compacta scrolleable de titulares reales (scraper horario). */ .livenews{border:1px solid var(--border);border-radius:11px;background:var(--surface-2); padding:9px 10px 7px;margin-bottom:12px;flex:1 1 auto;display:flex;flex-direction:column;min-height:0} .livenews-head{display:flex;align-items:center;justify-content:space-between;gap:6px; font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em; color:var(--text-mute);margin-bottom:7px} .livenews-meta{font-size:.56rem;font-weight:700;color:var(--text-faint);text-transform:none;letter-spacing:0} .livenews-list{display:flex;flex-direction:column;gap:5px;flex:1 1 auto;overflow-y:auto;min-height:0} .ln-item{display:block;text-decoration:none;border:1px solid var(--border);border-radius:8px; background:var(--surface);padding:6px 8px;transition:border-color .15s,background .15s} .ln-item:hover{border-color:var(--interactive);background:#fff} .ln-title{font-size:.74rem;line-height:1.28;color:var(--text);font-weight:600; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .ln-src{font-size:.58rem;font-weight:700;color:var(--text-faint);margin-top:3px; display:flex;align-items:center;gap:5px} .ln-src .ln-dot{width:5px;height:5px;border-radius:50%;background:var(--interactive);flex:0 0 auto} .ln-empty{font-size:.7rem;color:var(--text-faint);text-align:center;padding:10px 4px} /* Posts de Instagram LOCALES: borde teñido + distintivo "IG local" (Instagram). */ .ln-item.ln-ig{border-left:3px solid #C13584} .ln-item.ln-ig .ln-src .ln-dot{background:#C13584} .ln-badge{display:inline-block;vertical-align:middle;margin-right:5px;padding:1px 5px; border-radius:5px;font-size:.52rem;font-weight:800;letter-spacing:.02em;line-height:1.5; color:#fff;background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF)} /* TERMÓMETRO SOCIAL liviano — chip claro con color por ánimo (verde/ámbar/rojo). Promedio del tono de las reacciones a las noticias del momento (gratis). */ .mood-chip{display:inline-flex;align-items:center;gap:6px;margin:0 0 8px; padding:4px 9px;border-radius:999px;border:1px solid var(--border); background:var(--surface);font-size:.66rem;font-weight:800;cursor:default; box-shadow:var(--shadow-sm);transition:background .2s,border-color .2s,color .2s} .mood-chip .mood-emoji{font-size:.86rem;line-height:1} .mood-chip .mood-label{letter-spacing:.01em} .mood-chip .mood-val{font-size:.58rem;font-weight:700;color:var(--text-faint); font-family:var(--font-mono)} .mood-chip.mood-positivo{background:#ecfdf5;border-color:#a7f3d0;color:#047857} .mood-chip.mood-positivo .mood-val{color:#059669} .mood-chip.mood-neutral{background:#fffbeb;border-color:#fde68a;color:#b45309} .mood-chip.mood-neutral .mood-val{color:#d97706} .mood-chip.mood-tenso{background:#fef2f2;border-color:#fecaca;color:#b91c1c} .mood-chip.mood-tenso .mood-val{color:#dc2626} .mood-chip.mood-empty{opacity:.7} /* LOADER del feed local: placeholder claro mientras se trae lo de la zona (la 1ra consulta a una localidad fresca puede tardar 20-30s: Hiker+LLM). */ .feed-loading{display:flex;flex-direction:column;align-items:center;gap:10px; padding:30px 12px;color:var(--text-mute);font-size:.8rem;text-align:center;line-height:1.5} .feed-loading .fl-spin{width:26px;height:26px;border-radius:50%; border:3px solid var(--border);border-top-color:var(--interactive); animation:flspin .8s linear infinite} .feed-loading .fl-sub{font-size:.68rem;color:var(--text-faint)} @keyframes flspin{to{transform:rotate(360deg)}} .livenews-list .ln-loading{display:flex;align-items:center;gap:8px; font-size:.72rem;color:var(--text-mute);padding:12px 6px} .livenews-list .ln-loading .fl-spin{width:16px;height:16px;border-width:2px} .feed{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;min-height:120px} .post{display:flex;gap:9px;padding:9px 10px;background:var(--surface);border:1px solid var(--border); border-radius:10px;animation:slideIn .35s ease;border-left:3px solid var(--text-faint);box-shadow:var(--shadow-sm)} .post.pos{border-left-color:var(--success)} .post.neg{border-left-color:var(--danger)} .post.neu{border-left-color:var(--text-faint)} @keyframes slideIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}} .avatar{width:26px;height:26px;border-radius:50%;flex-shrink:0;display:flex;align-items:center; justify-content:center;font-size:.8rem;font-weight:700;color:#fff} .post .body{flex:1;min-width:0} .post .who{font-size:.66rem;font-weight:700;color:var(--text-mute);margin-bottom:2px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .post .txt{font-size:.78rem;line-height:1.35;color:var(--text)} .post .sent{font-size:.7rem;font-weight:700;margin-left:6px} .feed-empty{color:var(--text-faint);font-size:.78rem;text-align:center;padding:24px 8px;line-height:1.5} /* ============================================================ FEED POR CANAL — el formato del mensaje refleja CÓMO opina la tribu: red social, WhatsApp, charla en la vía pública o medios. Cada tribu tiene un canal asignado en buildUI() (channelFor()). ============================================================ */ .post.chan{display:block;padding:0;border:none;background:none;box-shadow:none;border-left:none} /* etiqueta de canal arriba a la derecha (📱/💬/🗣️/📰) */ .chan-tag{display:inline-flex;align-items:center;gap:3px;font-size:.58rem;font-weight:800; text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;border-radius:999px;white-space:nowrap} .chan-sent{font-size:.66rem;font-weight:800;margin-left:auto;white-space:nowrap} .chan-head{display:flex;align-items:center;gap:6px;margin-bottom:5px} .chan-ava{width:30px;height:30px;border-radius:50%;flex-shrink:0;display:flex;align-items:center; justify-content:center;font-size:.82rem;font-weight:800;color:#fff;box-shadow:0 0 0 2px #fff} .chan-name{font-size:.72rem;font-weight:800;color:var(--text);line-height:1.05; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .chan-handle{font-size:.62rem;color:var(--text-faint);font-weight:600} .chan-contagio{font-size:.56rem;color:var(--accent);font-weight:800;text-transform:uppercase;letter-spacing:.03em;margin-left:4px} /* ---- 1) RED SOCIAL (tribus jóvenes/digitales) -------------- */ /* contenedores con .post.chan-* (2 clases) para ganar especificidad sobre la base .post.chan (que resetea background/padding) */ .post.chan-redes{background:var(--surface);border:1px solid var(--border);border-radius:14px; padding:10px 11px 8px;box-shadow:var(--shadow-sm)} .chan-redes .chan-tag{background:linear-gradient(90deg,#F58529,#DD2A7B,#8134AF);color:#fff} .chan-redes.tw .chan-tag{background:#0F1419} .chan-redes.tk .chan-tag{background:#000} .chan-redes .chan-txt{font-size:.79rem;line-height:1.4;color:var(--text);margin:2px 0 8px} .chan-redes .ig-actions{display:flex;gap:14px;color:var(--text-faint);font-size:.72rem; border-top:1px solid var(--border);padding-top:6px} .chan-redes .ig-actions b{color:var(--text-mute);font-weight:700;font-size:.66rem} .chan-redes .ig-actions .a{display:inline-flex;align-items:center;gap:3px} /* ---- 2) WHATSAPP (tribus de mensajería, NSE medio) --------- */ .post.chan-wa{display:flex;gap:7px;align-items:flex-end} .chan-wa .wa-meta{font-size:.62rem;color:var(--text-faint);font-weight:700;margin-bottom:3px;display:flex;align-items:center;gap:5px} .chan-wa .wa-bubble{position:relative;background:#DCF8C6;border-radius:9px 9px 9px 2px; padding:7px 9px 5px;max-width:100%;box-shadow:0 1px 1px rgba(0,0,0,.08)} .chan-wa .wa-bubble:before{content:'';position:absolute;left:-6px;bottom:0; border:6px solid transparent;border-right-color:#DCF8C6;border-bottom:0} .chan-wa .wa-name{font-size:.66rem;font-weight:800;color:#1F7A4D;margin-bottom:1px} .chan-wa .wa-txt{font-size:.78rem;line-height:1.35;color:#111B21} .chan-wa .wa-time{font-size:.56rem;color:#667781;text-align:right;margin-top:1px} .chan-wa .wa-tick{color:#34B7F1;font-weight:800;letter-spacing:-2px} /* ---- 3) VÍA PÚBLICA / CHARLA (tribus mayores, radio/café) -- */ .post.chan-calle{background:#FBF6EC;border:1px dashed #D9C7A3;border-radius:12px;padding:9px 11px;position:relative} .chan-calle .chan-tag{background:#8C5A2B;color:#fff} .chan-calle .calle-quote{font-size:.82rem;line-height:1.4;color:#4A3B22;font-style:italic; padding-left:16px;position:relative} .chan-calle .calle-quote:before{content:'\201C';position:absolute;left:-2px;top:-4px; font-size:1.5rem;color:#C9A75E;font-style:normal;line-height:1} .chan-calle .calle-src{font-size:.62rem;color:#9B7B45;font-weight:700;margin-top:5px;display:flex;align-items:center;gap:5px} /* ---- 4) MEDIOS / TRADICIONAL (profesional informado) ------- */ .post.chan-medios{background:#1C1C28;border:1px solid #34344A;border-radius:10px;padding:10px 12px;color:#E8E8F0} .chan-medios .chan-tag{background:#C81E1E;color:#fff} .chan-medios .med-kicker{font-size:.55rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#FF6B6B;margin-bottom:3px} .chan-medios .med-headline{font-size:.84rem;line-height:1.3;font-weight:800;color:#fff;font-family:Georgia,serif} .chan-medios .med-src{font-size:.6rem;color:#9A9AB5;font-weight:600;margin-top:6px;display:flex;align-items:center;gap:5px} .chan-medios .chan-name,.chan-medios .chan-handle{color:#C7C7DE} /* sentimiento por canal (color del borde / acento) */ .chan.pos{--ch-sent:var(--success)} .chan.neg{--ch-sent:var(--danger)} .chan.neu{--ch-sent:var(--text-faint)} .post.chan-redes.pos{box-shadow:var(--shadow-sm),inset 3px 0 0 var(--success)} .post.chan-redes.neg{box-shadow:var(--shadow-sm),inset 3px 0 0 var(--danger)} .post.chan-redes.neu{box-shadow:var(--shadow-sm),inset 3px 0 0 var(--text-faint)} /* ---- Tabs in right panel (Feed / Análisis / Noticias) ---- */ /* #sim-panel envuelve tabs + resultado + métricas + panes. OCULTO en modo EN VIVO (el panel derecho muestra solo #livenews). Al lanzar una simulación se muestra y crece para llenar el alto del panel derecho como hacían los panes antes. */ #sim-panel{flex:1 1 auto;display:flex;flex-direction:column;min-height:0} .rtabs{display:flex;gap:4px;margin-bottom:12px} .rtab{flex:1;padding:7px 6px;font-size:.74rem;font-weight:700;border-radius:8px;text-align:center} .rtab.active{background:var(--interactive);border-color:var(--interactive);color:#fff} .tabpane{flex:1 1 auto;display:flex;flex-direction:column;min-height:140px;overflow-y:auto} .tabpane.hidden{display:none} /* CUATRO SOLAPAS: ✓ Resultado / 💬 Reacciones / 📊 Análisis / 📰 Titulares. El #result-card (veredicto+barras+spark + cartel de cierre) vive en su PROPIA solapa #pane-result, así el cartel "✓ Simulación terminada" YA NO tapa los comentarios. La solapa "Reacciones" (#pane-feed) tiene SÓLO el feed de comentarios simulados, scrolleable (overflow-y:auto), dejando ver TODOS (FEED_TARGET ≈ 46) con la barra visible. */ #pane-feed{scrollbar-gutter:stable} #pane-result{scrollbar-gutter:stable} /* el card en su solapa propia ya no necesita ser sticky (no hay comentarios debajo que scrolleen), pero mantenemos el fondo OPACO compuesto sobre blanco para que el tinte por veredicto (verde/ámbar/rojo) se vea nítido. */ #pane-result > .result-card{margin-bottom:12px; background:linear-gradient(180deg,rgba(34,197,94,.10),rgba(34,197,94,.03)),var(--surface); box-shadow:var(--shadow-sm)} #pane-result > .result-card.dividida{ background:linear-gradient(180deg,rgba(245,158,11,.10),rgba(245,158,11,.03)),var(--surface)} #pane-result > .result-card.rechazo{ background:linear-gradient(180deg,rgba(239,68,68,.10),rgba(239,68,68,.03)),var(--surface)} /* el bloque de noticias relocado a la pestaña "Noticias" pierde su margen inferior (es el único contenido del pane) para no dejar un hueco al pie. */ #pane-news .livenews{margin-bottom:0} /* ---- Analysis panel ---- */ .an-empty{color:var(--text-faint);font-size:.78rem;text-align:center;padding:24px 8px;line-height:1.5} .an-head{font-size:.74rem;font-weight:700;color:var(--text);margin-bottom:4px; display:flex;align-items:center;gap:6px} .an-head .em{font-size:.95rem} .an-head .an-head-txt{flex:1 1 auto;min-width:0} /* botón chico "📥 Word": descarga el informe DOCX de la sim actual. Discreto, pegado a la derecha del header de Análisis (al lado de pregunta + expuestos). */ .an-docx-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px; font-size:.62rem;font-weight:700;line-height:1;cursor:pointer;white-space:nowrap; padding:4px 8px;border-radius:7px;color:var(--accent,#6366f1); background:rgba(99,102,241,.10);border:1px solid rgba(99,102,241,.32); transition:background .15s ease,opacity .15s ease} .an-docx-btn:hover{background:rgba(99,102,241,.20)} .an-docx-btn:disabled{opacity:.6;cursor:default} .an-section{margin-bottom:16px} .an-section h4{font-size:.64rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-mute); font-weight:800;margin:0 0 7px} /* big global gauge: stacked horizontal bar approve/indiff/reject */ .gauge{display:flex;height:26px;border-radius:8px;overflow:hidden;border:1px solid var(--border); box-shadow:var(--shadow-sm);font-size:.66rem;font-weight:800} .gauge .seg{display:flex;align-items:center;justify-content:center;color:#fff;min-width:0; transition:flex-basis .5s ease} .gauge .ap{background:var(--success)} .gauge .ind{background:#A1A1AA} .gauge .rj{background:var(--danger)} .gauge-legend{display:flex;justify-content:space-between;margin-top:5px;font-size:.62rem;color:var(--text-mute)} .gauge-legend span b{font-family:var(--font-mono)} .net-pill{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px; font-size:.66rem;font-weight:800;font-family:var(--font-mono)} /* breakdown rows: label + diverging bar (red left / green right) */ .bd-row{display:grid;grid-template-columns:74px 1fr 34px;gap:7px;align-items:center;margin-bottom:5px; font-size:.68rem} .bd-row .lab{color:var(--text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bd-row .lab .sub{color:var(--text-faint);font-weight:500;font-size:.6rem} .bd-bar{position:relative;height:14px;background:var(--surface-2);border-radius:7px;overflow:hidden; border:1px solid var(--border)} .bd-bar .fill{position:absolute;top:0;bottom:0;border-radius:7px;transition:width .5s ease,left .5s ease} .bd-row .val{text-align:right;font-family:var(--font-mono);font-weight:700;font-size:.66rem} .bd-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:5px;flex-shrink:0} /* =========================================================================== DRILL-DOWN CRUZADO — al tocar un segmento (edad/NSE/tribu/género) se expande y muestra su opinión + composición por OTRA dimensión. El "ese rango etario tiene esta composición socioeconómica". =========================================================================== */ .an-section h4 .an-hint{font-weight:500;font-size:.56rem;text-transform:none;letter-spacing:0; color:var(--text-faint);margin-left:6px} .bd-item{margin-bottom:2px} /* fila expandible: igual que .bd-row pero con caret adelante (4 columnas) */ .bd-row.bd-expandable{grid-template-columns:14px 60px 1fr 34px;cursor:pointer; padding:3px 4px;border-radius:6px;margin-bottom:0;transition:background .12s} .bd-row.bd-expandable:hover{background:var(--surface-2)} .bd-caret{font-size:.58rem;color:var(--text-faint);transition:transform .15s;line-height:1;text-align:center} .bd-row.bd-expandable.is-open .bd-caret{transform:rotate(90deg);color:var(--text-mute)} .bd-drill{padding:9px 11px 10px;margin:3px 0 8px;background:var(--surface-2); border-radius:8px;border-left:3px solid var(--success)} .drill-op{display:flex;gap:14px;flex-wrap:wrap;font-size:.66rem;font-weight:800;margin-bottom:9px} .drill-op .dop.ap{color:var(--success)} .drill-op .dop.ind{color:#94a3b8} .drill-op .dop.rj{color:var(--danger)} .drill-cmp-title{font-size:.58rem;text-transform:uppercase;letter-spacing:.05em; color:var(--text-faint);font-weight:800;margin-bottom:6px} .drill-cmp{display:grid;grid-template-columns:58px 1fr 30px 46px;gap:7px;align-items:center; margin-bottom:4px;font-size:.66rem} .drill-cmp .dc-k{color:var(--text);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .drill-cmp .dc-bar{position:relative;height:10px;background:var(--surface);border-radius:5px; overflow:hidden;border:1px solid var(--border)} .drill-cmp .dc-fill{position:absolute;left:0;top:0;bottom:0;border-radius:5px;transition:width .4s ease} .drill-cmp .dc-pct{text-align:right;font-family:var(--font-mono);font-weight:700;color:var(--text-mute)} .drill-cmp .dc-net{text-align:right} .drill-cmp .dc-net .net-pill{padding:1px 5px;font-size:.58rem} /* drivers as chips */ .drivers{display:flex;flex-wrap:wrap;gap:6px} .drv-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px; font-size:.68rem;font-weight:600;border:1px solid var(--border);background:var(--surface)} .drv-chip.pos{border-color:rgba(22,163,74,.4);background:rgba(22,163,74,.08);color:var(--success)} .drv-chip.neg{border-color:rgba(220,38,38,.4);background:rgba(220,38,38,.08);color:var(--danger)} .drv-chip .c{font-family:var(--font-mono);color:var(--text-faint);font-weight:700} /* zone heat list */ .zone-row{display:grid;grid-template-columns:1fr 60px 30px;gap:7px;align-items:center; font-size:.68rem;margin-bottom:4px} .zone-chip{width:16px;height:16px;border-radius:4px;border:1px solid rgba(0,0,0,.12);flex-shrink:0} .zone-name{display:flex;align-items:center;gap:6px;font-weight:600;color:var(--text); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Bottom: legend */ .legend{bottom:14px;left:14px;right:14px;padding:11px 16px;display:flex;flex-direction:column;gap:8px} .legend-head{display:flex;justify-content:space-between;align-items:center} .legend-items{display:flex;flex-wrap:wrap;gap:6px 14px;max-height:64px;overflow-y:auto} .li{display:flex;align-items:center;gap:6px;font-size:.72rem;color:var(--text-mute);cursor:default} .dot{width:10px;height:10px;border-radius:50%;flex-shrink:0} .li .cnt{font-family:var(--font-mono);color:var(--text-faint);font-size:.68rem} .eth{font-size:.66rem;color:var(--text-faint);text-align:center;line-height:1.4} .eth strong{color:var(--text-mute)} /* ---- Camera controls (presets + zoom) ---- En la columna de CAPAS (right:368) y abajo: libre del panel de noticias. SIN width fijo: la caja se ajusta al contenido (los 4 presets + zoom) y el recuadro queda COMPLETO (con width:206 se desbordaban y quedaba cortado). */ .camctl{bottom:96px;right:368px;z-index:16;padding:8px;display:flex;flex-direction:column;gap:8px; align-items:stretch;width:max-content;max-width:340px} .cam-presets{display:flex;gap:4px} .cam-presets button{padding:7px 9px;font-size:.72rem;font-weight:700;white-space:nowrap} .cam-presets button.active{background:var(--interactive);border-color:var(--interactive);color:#fff} .cam-zoom{display:flex;gap:4px;justify-content:center} .cam-zoom button{flex:1;font-size:1.05rem;font-weight:800;line-height:1;padding:6px 0; font-family:var(--font-mono)} /* ---- CAPAS (war-room) — panel flotante de capas de departamentos ---- Va arriba, a la IZQUIERDA del panel derecho (que ocupa right:14 width:340) para no taparlo. Es una sobrecapa: enciende/apaga una capa base a la vez. */ .capactl{top:66px;right:368px;z-index:16;width:206px;padding:11px 12px; display:flex;flex-direction:column;gap:9px} .capactl-head{display:flex;flex-direction:column;gap:1px} .capactl-title{font-size:.82rem;font-weight:800;letter-spacing:-.01em} .capactl-sub{font-size:.64rem;color:var(--text-faint);font-weight:600} .capas-radios{display:flex;flex-direction:column;gap:3px} .capa-radio{display:flex;align-items:center;gap:7px;font-size:.76rem;font-weight:600; color:var(--text);cursor:pointer;padding:3px 5px;border-radius:7px;transition:background .12s} .capa-radio:hover{background:var(--surface-2)} .capa-radio input{accent-color:var(--interactive);cursor:pointer;margin:0} /* Divisor leve entre las 5 capas SIMPLES (Ninguna..Eje político) y los 2 modos AVANZADOS (Cruce numérico / Ganador + alerta) — mismo trato visual que el border-top que ya separa timeline/leyenda del bloque de radios. */ .capas-radios-sep{border-top:1px solid var(--border);margin:2px 2px 1px} /* ---- Controles contextuales de los modos avanzados (Cruce / Alerta) ---- Mismo slot/altura que el TIMELINE: aparecen SOLO con su capa activa (ver setActiveCapa/renderCapasContextControls). Selects compactos, mismo tamaño de fuente que el resto del panel para no romper el ritmo visual. */ .capas-cruce-ctl,.capas-alerta-ctl{display:flex;flex-direction:column;gap:6px; border-top:1px solid var(--border);padding-top:8px;margin-top:1px} .capa-ctl-row{display:flex;flex-direction:column;gap:3px;font-size:.7rem; font-weight:700;color:var(--text-faint)} .capa-ctl-row select{font-family:var(--font-sans);font-size:.76rem;font-weight:600; color:var(--text);background:var(--surface);border:1px solid var(--border-strong); border-radius:7px;padding:4px 6px;cursor:pointer} .capa-ctl-row select:hover{border-color:var(--interactive)} /* ---- TIMELINE de jornadas electorales (capa "Ganador electoral") ---- Tira horizontal compacta de nodos cronológicos (2017→2025) bajo los radios: un botón circular por jornada con un swatch del color del frente que ganó la PROVINCIA esa elección + el año debajo. display:none por defecto (JS lo muestra sólo con "ganador" activa, ver renderCapasTimeline). Autocontenida: no agrega altura salvo cuando hace falta (la capa NSE/fatiga/eje no la ve). */ .capas-timeline{display:none;align-items:flex-start;justify-content:space-between; gap:2px;border-top:1px solid var(--border);padding-top:8px;margin-top:1px} .capa-tl-node{display:flex;flex-direction:column;align-items:center;gap:3px; background:transparent;border:none;box-shadow:none;padding:2px 1px;border-radius:8px; cursor:pointer;flex:1;min-width:0;transition:transform .15s; -webkit-tap-highlight-color:transparent;outline:none} .capa-tl-node:hover{background:var(--surface-2)} /* sin esto, el navegador pinta su resaltado nativo de click/foco (azul, semi- transparente) ENCIMA de todo el botón — tapaba el año. Reemplazado por un anillo de foco sutil que sólo aparece con teclado (Tab), no con mouse/touch. */ .capa-tl-node:focus-visible{outline:2px solid var(--tl-color,var(--interactive)); outline-offset:2px} .capa-tl-dot{width:13px;height:13px;border-radius:50%;flex-shrink:0; border:1.5px solid rgba(0,0,0,.18);box-shadow:0 0 0 0 transparent; transition:box-shadow .18s,transform .18s,width .18s,height .18s} .capa-tl-year{font-size:.6rem;font-weight:700;color:var(--text-faint); font-family:var(--font-mono);letter-spacing:-.02em;transition:color .15s} /* nodo ACTIVO: halo del PROPIO color del frente (inline --tl-color, fijado por JS al swatch de cada nodo — ver renderCapasTimeline) + dot más grande + año en color de texto pleno, para que se note de un vistazo cuál jornada se está viendo sin depender sólo del tamaño. */ .capa-tl-node.active .capa-tl-dot{width:17px;height:17px;border-color:rgba(0,0,0,.28); box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--tl-color,var(--interactive))} /* El halo (box-shadow) del dot activo es grande y de un color que puede ser oscuro (ej. LLA #5B3A9E) — ajustar el margin-top a mano para "dejarle espacio" es frágil (depende de medir bien el halo) y YA FALLÓ una vez: con el frente del balotaje 2023 el círculo quedó tan grande que tapó el "2023" por completo (ver captura del usuario). Fix robusto: el año activo tiene su PROPIO fondo sólido (chip blanco) — así es legible SIEMPRE, sin importar cuán grande o oscuro sea el halo que tenga cerca. */ .capa-tl-node.active .capa-tl-year{color:var(--text);font-weight:800;margin-top:8px; background:var(--surface);padding:1px 6px;border-radius:6px; box-shadow:0 1px 3px rgba(0,0,0,.18);position:relative;z-index:1} .capas-tl-label{display:none;text-align:center;font-size:.68rem;font-weight:700; color:var(--text-mute);margin-top:5px;letter-spacing:.01em} .capas-legend:empty{display:none} .capas-legend{display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--border); padding-top:8px;margin-top:1px} .cap-leg-row{display:flex;align-items:flex-start;gap:7px;font-size:.7rem; color:var(--text-mute);line-height:1.35} /* flex-start (no center): la fila de Eje político trae descripciones largas ("Kirchnerismo duro, La Cámpora, FIT...") que wrappean a varias líneas — con center el swatch quedaba flotando en el medio del bloque de texto, raro. */ .cap-sw{width:12px;height:12px;border-radius:3px;flex-shrink:0;border:1px solid rgba(0,0,0,.12); margin-top:1px} .cap-leg-row .cap-cnt{margin-left:auto;font-family:var(--font-mono);color:var(--text-faint);font-size:.66rem} .cap-leg-grad{display:flex;align-items:center;gap:6px;font-size:.66rem;color:var(--text-mute)} .cap-grad{flex:1;height:9px;border-radius:5px;border:1px solid rgba(0,0,0,.1)} .cap-grad.nse{background:linear-gradient(90deg,#D7263D,#F2C037,#16A34A)} .cap-grad.fat{background:linear-gradient(90deg,#16A34A,#F2C037,#D7263D)} /* Influenciabilidad: gradiente morado (gradient:"purple", coherente con la misma métrica en el panel Comando/War Room) — claro = poco influenciable, saturado = muy influenciable. */ .cap-grad.infl{background:linear-gradient(90deg,#EDE9FE,#A78BFA,#5B21B6)} /* ---- Leyenda BIVARIADA (modo "Cruce numérico") ---- Grilla 3x3 (terciles bajo/medio/alto de A × B), esquema tipo Joshua Stevens: esquina baja-baja gris-claro neutro, A alto → azul, B alto → rojo/naranja, mezcla en el centro y en la esquina alta-alta. Eje X = Variable A (abajo, con flecha →), eje Y = Variable B (a la izquierda, con flecha ↑). */ .cap-leg-bivariate{display:flex;flex-direction:column;gap:4px;font-size:.66rem;color:var(--text-mute)} .cap-leg-bivariate-title{font-size:.68rem;font-weight:700;color:var(--text);margin-bottom:1px} .cap-leg-bv-body{display:flex;gap:6px;align-items:flex-end} .cap-leg-bv-yaxis{display:flex;flex-direction:column;align-items:center;justify-content:space-between; height:72px;font-size:.6rem;font-weight:700;color:var(--text-faint);writing-mode:vertical-rl; text-orientation:mixed;padding:2px 0} .cap-leg-bv-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr); gap:2px;width:72px;height:72px;flex-shrink:0} .cap-leg-bv-cell{border-radius:3px;border:1px solid rgba(0,0,0,.08)} .cap-leg-bv-xaxis{display:flex;justify-content:space-between;font-size:.6rem;font-weight:700; color:var(--text-faint);margin-left:78px;margin-top:2px} /* ---- Marcador de ALERTA (modo "Ganador + alerta") ---- Pequeño punto con borde grueso, centrado en el depto, POR ENCIMA del color del choropleth pero sin tapar la lectura del color de fondo (relleno semi- transparente, borde sólido bien visible). Lo dibuja deck.gl como una capa de iconos/puntos aparte (capas-alert-marks), no es DOM. Esta clase queda reservada para el ícono de la leyenda (un swatch redondo igual al marcador). */ .cap-leg-alert-ico{width:13px;height:13px;border-radius:50%;flex-shrink:0; background:rgba(220,38,38,.18);border:2px solid #DC2626;display:flex; align-items:center;justify-content:center;font-size:.6rem;line-height:1} /* popup del departamento (maplibregl.Popup) — tema claro, scopeado al módulo. z-index: por DEFAULT el popup de MapLibre no declara uno propio y puede quedar por DEBAJO del overlay de globos (#cv-balloons, z-index 9). Lo subimos a 17 (por encima de globos/paneles base z-index 15-16, por DEBAJO de .topbar=20 e #insp-panel=19) para que el detalle de la capa SIEMPRE se lea nítido aunque haya globos cerca. */ #simcity-root .capa-popup{z-index:17} #simcity-root .capa-popup .maplibregl-popup-content{font-family:var(--font-sans); border-radius:12px;padding:11px 13px;box-shadow:var(--shadow-lg);border:1px solid var(--border)} .capa-pop-h{font-weight:800;font-size:.85rem;margin-bottom:7px;letter-spacing:-.01em;color:var(--text)} .capa-pop-row{display:flex;justify-content:space-between;gap:14px;font-size:.74rem; padding:2px 0;color:var(--text-mute)} .capa-pop-row b{color:var(--text-faint);font-weight:600} /* Eje político: bloque propio (label arriba, descripción abajo en su propia línea) en vez del row label-izq/valor-der genérico — la descripción real ("Kirchnerismo duro, La Cámpora, FIT...") es larga y quedaba feo pegada a la derecha del popup. */ .capa-pop-eje{padding:4px 0;color:var(--text-mute)} .capa-pop-eje b{display:block;color:var(--text-faint);font-weight:600;font-size:.74rem;margin-bottom:2px} .capa-pop-eje-desc{font-size:.72rem;font-weight:700;color:var(--text);line-height:1.35} .capa-pop-row span{font-weight:700;color:var(--text);text-align:right} /* En pantallas angostas la columna del medio no entra: el panel de capas se va abajo-izquierda (sobre la leyenda no, un poco más arriba) para no pisar nada. */ @media (max-width:1100px){ .capactl{right:auto;left:14px;top:auto;bottom:212px;width:188px} } /* =========================================================================== PANELES COLAPSABLES — botón de toggle por panel (left/capas/right). Al colapsar, el panel se "esconde" hacia su borde y deja una PESTAÑITA compacta con un ícono para reabrirlo. Da aire al mapa sin perder acceso. El panel de cámara (.camctl) NO lleva toggle (queda como está). =========================================================================== */ .panel-toggle{ position:absolute; z-index:18; cursor:pointer; width:30px; height:30px; padding:0; display:flex; align-items:center; justify-content:center; border:none; border-radius:8px; background:linear-gradient(135deg, #00d4ff 0%, #a855f7 100%); box-shadow:0 2px 10px rgba(99,102,241,.45); font-size:1.1rem; font-weight:800; line-height:1; color:#fff; transition:transform .15s, box-shadow .15s, filter .15s; } .panel-toggle:hover{ /* MANTENER el gradiente en hover: el button:hover global lo pisaba con --surface-2 (gris casi blanco) y el chevron blanco quedaba ilegible. */ background:linear-gradient(135deg, #00d4ff 0%, #a855f7 100%); border:none; color:#fff; transform:scale(1.12); box-shadow:0 4px 16px rgba(168,85,247,.6); filter:brightness(1.08); } .panel-toggle:active{ transform:scale(.96); } /* posición del botón dentro de cada panel (esquina superior, hacia el borde) */ .left-column .panel-toggle{ top:8px; right:8px; } .capactl .panel-toggle{ top:8px; right:8px; } .right .panel-toggle{ top:8px; left:8px; } /* el chevron */ .panel-toggle .chev{ display:inline-block; } /* --- transición de colapso (deslizar hacia el borde + fade) --- */ .left-column, .capactl, .right{ transition:transform .28s cubic-bezier(.32,.72,0,1), opacity .2s; } /* LEFT colapsa hacia la izquierda (toda la columna: Contexto + Controles) */ .left-column.collapsed{ transform:translateX(calc(-100% - 14px)); opacity:0; pointer-events:none; } /* CAPAS colapsa hacia la derecha (vive en la columna derecha-centro) */ .capactl.collapsed{ transform:translateX(calc(100% + 380px)); opacity:0; pointer-events:none; } /* RIGHT colapsa hacia la derecha */ .right.collapsed{ transform:translateX(calc(100% + 14px)); opacity:0; pointer-events:none; } /* --- PESTAÑITAS para reabrir (aparecen sólo cuando el panel está colapsado) --- */ .panel-reopen{ position:absolute; z-index:17; cursor:pointer; display:none; align-items:center; gap:7px; padding:10px 14px; border:none; border-radius:11px; background:linear-gradient(135deg, #00d4ff 0%, #a855f7 100%); box-shadow:0 3px 14px rgba(99,102,241,.5); font-size:.8rem; font-weight:800; color:#fff; letter-spacing:.01em; transition:transform .15s, box-shadow .15s, filter .15s; } .panel-reopen:hover{ background:linear-gradient(135deg, #00d4ff 0%, #a855f7 100%); border:none; color:#fff; transform:scale(1.06); box-shadow:0 5px 20px rgba(168,85,247,.62); filter:brightness(1.08); } .panel-reopen .pr-ico{ font-size:1.05rem; line-height:1; } .panel-reopen.show{ display:flex; } #reopen-capas { top:66px; right:368px; } #reopen-right { top:66px; right:14px; } @media (max-width:1100px){ #reopen-capas{ right:auto; left:14px; top:auto; bottom:212px; } } /* --- ACORDEÓN de las tarjetas izquierdas (Contexto / Controles) --- */ /* barra de título: siempre visible, clickeable, con chevron que rota */ .panel-acc-head{ display:flex; align-items:center; justify-content:space-between; cursor:pointer; user-select:none; padding:2px 2px 9px; margin-bottom:6px; font-size:.74rem; font-weight:800; letter-spacing:-.01em; color:var(--text); border-bottom:1px solid var(--border); } .panel-acc-head .pah-chev{ color:#a855f7; font-size:1rem; line-height:1; transition:transform .22s var(--ease, ease); } .panel-acc-head:hover .pah-label{ color:#6366f1; } /* cuando la tarjeta está colapsada: solo se ve el header; el cuerpo se oculta */ .left-ctx.acc-collapsed > *:not(.panel-acc-head), .left-ctrl.acc-collapsed > *:not(.panel-acc-head){ display:none !important; } .left-ctx.acc-collapsed, .left-ctrl.acc-collapsed{ flex:0 0 auto !important; max-height:none !important; overflow:visible !important; padding-bottom:8px; } .acc-collapsed .panel-acc-head{ margin-bottom:0; padding-bottom:2px; border-bottom:none; } .acc-collapsed .panel-acc-head .pah-chev{ transform:rotate(-90deg); } /* disclaimer banner */ .disclaimer{position:absolute;top:58px;left:50%;transform:translateX(-50%);z-index:14; font-size:.7rem;font-weight:600;color:var(--warning);background:rgba(255,255,255,.94); border:1px solid rgba(234,88,12,.35);border-radius:8px;padding:5px 14px;white-space:nowrap; box-shadow:var(--shadow-sm)} /* fatal / loading */ #overlay{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center; background:var(--bg);flex-direction:column;gap:14px;text-align:center;padding:30px} #overlay .big{font-size:1.1rem;font-weight:700} #overlay .small{font-size:.85rem;color:var(--text-mute);max-width:460px;line-height:1.5} .spinner{width:34px;height:34px;border:3px solid var(--border);border-top-color:var(--interactive); border-radius:50%;animation:spin 1s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .cursor-armed{cursor:crosshair !important} ::-webkit-scrollbar{width:8px;height:8px} ::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px} /* =========================================================================== GLOBOS DE COMENTARIO SOBRE EL MAPA — la ciudad "hablando" sobre sus puntos. Reemplazan el viejo feed lateral de comentarios. Son maplibregl.Marker con este elemento HTML: MapLibre los reposiciona solo con pan/zoom. Burbuja de chat (con colita), color por CANAL, tema CLARO. Z bajo el de los paneles/topbar/ camctl: viven en la capa del mapa (#map), no tapan los controles. La colita apunta hacia abajo (anchor:'bottom') al punto del agente. =========================================================================== */ /* Overlay de globos: POR ENCIMA del tinte día/noche (#daynight z-index 5) y de los puntos, pero por DEBAJO de paneles/topbar (z-index 15+). No roba clicks. */ #cv-balloons{position:absolute;inset:0;z-index:9;pointer-events:none;overflow:hidden} /* Wrapper de posición: anclado por left/top al pixel del punto; el translate lo sube para que la COLITA quede sobre el punto. El .cv-balloon interno conserva su transform de animación sin conflicto (por eso el wrapper). */ .cv-balloon-wrap{position:absolute;transform:translate(-16px,-100%);will-change:left,top} .cv-balloon{ position:relative;max-width:188px;min-width:84px; background:var(--surface);border:1px solid var(--border);border-radius:12px; border-left:3px solid var(--text-faint); box-shadow:0 6px 20px rgba(0,0,0,.16); padding:7px 9px 8px;font-family:var(--font-sans); /* fade/scale in: el JS agrega .show para animar la entrada y .out para la salida */ opacity:0;transform:translateY(4px) scale(.96);transform-origin:bottom center; transition:opacity .35s ease, transform .35s ease; pointer-events:none; /* no roba clicks del mapa/inspección */ will-change:opacity,transform; } .cv-balloon.show{opacity:1;transform:translateY(0) scale(1)} .cv-balloon.out{opacity:0;transform:translateY(-3px) scale(.97)} .cv-balloon .cvb-head{display:flex;align-items:center;gap:5px;margin-bottom:3px} .cv-balloon .cvb-ico{font-size:.82rem;line-height:1;flex:0 0 auto} .cv-balloon .cvb-who{font-size:.64rem;font-weight:800;color:var(--text-mute); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em} .cv-balloon .cvb-txt{font-size:.74rem;line-height:1.32;color:var(--text); word-break:break-word;overflow-wrap:anywhere} /* PIE de referencia: a qué NOTICIA (titular chico) y en qué MEDIO comenta. */ .cv-balloon .cvb-foot{margin-top:5px;padding-top:4px;border-top:1px solid rgba(0,0,0,.08); display:flex;flex-direction:column;gap:2px} .cv-balloon .cvb-news{font-size:.6rem;color:var(--text-mute);line-height:1.2; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:172px} .cv-balloon .cvb-media{font-size:.58rem;font-weight:800;color:var(--mc,#666); display:inline-flex;align-items:center;gap:4px;align-self:flex-start} .cv-balloon .cvb-media::before{content:'';width:7px;height:7px;border-radius:50%; background:var(--mc,#666);flex:0 0 auto} /* colita de la burbuja (triángulo hacia el punto, abajo a la izquierda) */ .cv-balloon .cvb-tail{position:absolute;left:16px;bottom:-7px;width:14px;height:9px; background:inherit;} .cv-balloon .cvb-tail::before,.cv-balloon .cvb-tail::after{content:'';position:absolute; left:0;bottom:0;width:0;height:0;border-style:solid} .cv-balloon .cvb-tail::before{border-width:9px 8px 0 0; border-color:var(--border) transparent transparent transparent} .cv-balloon .cvb-tail::after{border-width:8px 7px 0 0;left:0;bottom:1px; border-color:var(--surface) transparent transparent transparent} /* acento de SENTIMIENTO en el borde izquierdo (verde/rojo/gris) */ .cv-balloon.pos{border-left-color:var(--success)} .cv-balloon.neg{border-left-color:var(--danger)} .cv-balloon.neu{border-left-color:var(--text-faint)} /* COLOR POR CANAL (tema claro): WhatsApp verde, redes/IG gradiente sutil, calle papel, medios neutro. Se nota de qué canal viene cada comentario. */ .cv-balloon.chan-whatsapp{background:#DCF8C6;border-color:#bfe9a6} .cv-balloon.chan-whatsapp .cvb-tail::after{border-color:#DCF8C6 transparent transparent transparent} .cv-balloon.chan-whatsapp .cvb-tail::before{border-color:#bfe9a6 transparent transparent transparent} .cv-balloon.chan-redes{background:#fff5fb;border-color:#f3c6e3} .cv-balloon.chan-redes .cvb-tail::after{border-color:#fff5fb transparent transparent transparent} .cv-balloon.chan-redes .cvb-tail::before{border-color:#f3c6e3 transparent transparent transparent} .cv-balloon.chan-redes .cvb-ico{filter:saturate(1.1)} .cv-balloon.chan-calle{background:#fdfaf3;border-color:#e8dfc9} .cv-balloon.chan-calle .cvb-tail::after{border-color:#fdfaf3 transparent transparent transparent} .cv-balloon.chan-calle .cvb-tail::before{border-color:#e8dfc9 transparent transparent transparent} .cv-balloon.chan-medios{background:#f5f7fb;border-color:#d7deea} .cv-balloon.chan-medios .cvb-tail::after{border-color:#f5f7fb transparent transparent transparent} .cv-balloon.chan-medios .cvb-tail::before{border-color:#d7deea transparent transparent transparent} /* COMENTARIO REAL DE INSTAGRAM (voz pública traída de la cuenta de un medio): fondo IG sutil + badge "IG" junto al @usuario. Se distingue claramente de los comentarios sintéticos por tribu (cobertura multi-fuente: web + IG real). */ .cv-balloon.chan-instagram{background:#fdf2fb;border-color:#f0c9e8} .cv-balloon.chan-instagram .cvb-tail::after{border-color:#fdf2fb transparent transparent transparent} .cv-balloon.chan-instagram .cvb-tail::before{border-color:#f0c9e8 transparent transparent transparent} .cv-balloon.is-ig .cvb-who{color:#c13584} /* @usuario en magenta IG */ .cv-balloon .cvb-ig{margin-left:auto;flex:0 0 auto;font-size:.52rem;font-weight:800; letter-spacing:.02em;color:#fff;padding:1px 5px;border-radius:6px; background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)} /* el marcador de MapLibre no debe interceptar clicks del mapa (pan/inspección) */ #map .maplibregl-marker{pointer-events:none;cursor:default} /* =========================================================================== POPUP DE TRIBU — "¿quién es esta tribu?" .tribe-ref = mención clickeable de una tribu (en el análisis textual, el desglose "Por tribu" y la leyenda). .tribe-popup = el popover con la descripción. Pensado para que en el análisis NO grite: subrayado punteado sutil, hereda color del texto. =========================================================================== */ .tribe-ref{cursor:pointer;border-bottom:1px dotted currentColor; text-decoration:none;transition:background .12s,color .12s;border-radius:3px} .cs-b .tribe-ref,.bd-row .tribe-ref{font-weight:600} .tribe-ref:hover,.tribe-ref:focus-visible{background:rgba(124,58,237,.12); color:#7c3aed;outline:none;border-bottom-color:transparent} /* la leyenda usa .li.tribe-ref: NO subrayar (ya es una fila), solo hover */ .legend .li.tribe-ref{border-bottom:none} .legend .li.tribe-ref:hover,.legend .li.tribe-ref:focus-visible{ background:rgba(124,58,237,.10);border-radius:6px} .tribe-popup{position:fixed;z-index:9999;max-width:320px;width:max-content; background:#fff;border:1px solid #e5e7eb;border-left:4px solid var(--tp-color,#7c3aed); border-radius:12px;box-shadow:0 12px 40px rgba(15,23,42,.22); padding:14px 16px 16px;font-size:.82rem;line-height:1.45;color:#0f172a; opacity:0;transform:translateY(4px);transition:opacity .14s,transform .14s;pointer-events:none} .tribe-popup.show{opacity:1;transform:translateY(0);pointer-events:auto} .tribe-popup .tp-x{position:absolute;top:6px;right:8px;border:none;background:none; font-size:1.25rem;line-height:1;color:#94a3b8;cursor:pointer;padding:2px 4px} .tribe-popup .tp-x:hover{color:#475569} .tribe-popup .tp-head{display:flex;align-items:center;gap:8px;margin:0 18px 4px 0} .tribe-popup .tp-dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto} .tribe-popup .tp-name{font-weight:800;font-size:.92rem;color:#0f172a} .tribe-popup .tp-meta{font-size:.7rem;color:#64748b;font-weight:600;margin-bottom:7px; text-transform:uppercase;letter-spacing:.02em} .tribe-popup .tp-meta:empty{display:none} .tribe-popup .tp-desc{color:#334155} /* MOBILE: hoja inferior centrada en vez de popover anclado (más cómodo al tacto) */ @media (max-width:640px){ .tribe-popup{position:fixed;left:12px!important;right:12px!important; top:auto!important;bottom:16px;max-width:none;width:auto; transform:translateY(12px);box-shadow:0 -8px 40px rgba(15,23,42,.28)} .tribe-popup.show{transform:translateY(0)} } /* =========================================================================== HISTÓRICO DE CLIMA SOCIAL — link del chip + modal con gráfico + temas. =========================================================================== */ /* Link 📈 dentro del #mood-chip */ .mood-hist-link{margin-left:auto;flex:0 0 auto;border:1px solid #e2d9fb; background:#f5f1fe;color:#7c3aed;font-size:.66rem;font-weight:700; padding:2px 8px;border-radius:999px;cursor:pointer;white-space:nowrap; transition:background .12s,border-color .12s} .mood-hist-link:hover{background:#ece4fd;border-color:#c9b8f6} /* Modal: overlay + card centrada */ .clima-hist-modal{position:fixed;inset:0;z-index:10000;display:flex; align-items:center;justify-content:center;opacity:0;transition:opacity .18s;pointer-events:none} .clima-hist-modal.show{opacity:1;pointer-events:auto} .clima-hist-modal .chm-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(2px)} .clima-hist-modal .chm-card{position:relative;z-index:1;width:min(820px,95vw); max-height:90vh;overflow-y:auto;background:#fff;border-radius:16px; box-shadow:0 24px 70px rgba(15,23,42,.35);padding:20px 22px 16px; transform:translateY(10px) scale(.98);transition:transform .18s; scrollbar-width:auto;scrollbar-color:#b7a6ef #f1f0f6} /* scrollbar más ANCHO y visible (el de subir/bajar era muy finito) */ .clima-hist-modal .chm-card::-webkit-scrollbar{width:14px} .clima-hist-modal .chm-card::-webkit-scrollbar-track{background:#f1f0f6;border-radius:0 16px 16px 0} .clima-hist-modal .chm-card::-webkit-scrollbar-thumb{background:#b7a6ef;border-radius:10px; border:3px solid #f1f0f6;min-height:40px} .clima-hist-modal .chm-card::-webkit-scrollbar-thumb:hover{background:#9a82e8} .clima-hist-modal.show .chm-card{transform:translateY(0) scale(1)} .clima-hist-modal .chm-x{position:absolute;top:10px;right:12px;border:none;background:none; font-size:1.6rem;line-height:1;color:#94a3b8;cursor:pointer;padding:2px 6px} .clima-hist-modal .chm-x:hover{color:#475569} .clima-hist-modal .chm-title{font-weight:800;font-size:1.05rem;color:#0f172a} .clima-hist-modal .chm-sub{font-size:.76rem;color:#64748b;margin-top:2px} .clima-hist-modal .chm-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 6px} .clima-hist-modal .chm-windows{display:inline-flex;background:#f1f5f9;border-radius:10px;padding:3px} .clima-hist-modal .chm-win{border:none;background:none;font-size:.76rem;font-weight:700; color:#64748b;padding:5px 14px;border-radius:8px;cursor:pointer;transition:background .12s,color .12s} .clima-hist-modal .chm-win.is-on{background:#fff;color:#7c3aed;box-shadow:0 1px 3px rgba(15,23,42,.12)} .clima-hist-modal .chm-active-tema{display:inline-flex;align-items:center;gap:6px; background:#f5f1fe;color:#6d28d9;font-size:.72rem;font-weight:700;padding:4px 6px 4px 10px;border-radius:999px} .clima-hist-modal .chm-active-tema button{border:none;background:rgba(124,58,237,.16);color:#6d28d9; width:18px;height:18px;border-radius:50%;cursor:pointer;font-size:.9rem;line-height:1} .clima-hist-modal .chm-chart-wrap{position:relative;height:240px;margin:6px 0 14px} .clima-hist-modal .chm-temas-head{font-weight:800;font-size:.82rem;color:#0f172a;margin:4px 0 8px} .clima-hist-modal .chm-temas-hint{font-weight:500;font-size:.7rem;color:#94a3b8} .clima-hist-modal .chm-temas{display:flex;flex-direction:column;gap:6px} .clima-hist-modal .chm-tema{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left; border:1px solid #eef0f4;border-left-width:3px;background:#fff;border-radius:10px;padding:9px 12px; cursor:pointer;font-size:.8rem;color:#334155;transition:background .12s} .clima-hist-modal .chm-tema:hover{background:#fafafa} .clima-hist-modal .chm-tema.is-on{background:#f7f3fe;box-shadow:0 0 0 1px #c9b8f6 inset} /* COLOR por SENTIMIENTO: verde aprueba / rojo rechaza / gris neutro (umbral ±0.06). Se ve en el borde izquierdo, la flecha y el valor numérico de cada fila. */ .clima-hist-modal .chm-tema.pos{border-left-color:#16A34A} .clima-hist-modal .chm-tema.neg{border-left-color:#DC2626} .clima-hist-modal .chm-tema.neu{border-left-color:#A1A1AA} .clima-hist-modal .chm-tema.pos .cht-arrow,.clima-hist-modal .chm-tema.pos .cht-sent{color:#16A34A} .clima-hist-modal .chm-tema.neg .cht-arrow,.clima-hist-modal .chm-tema.neg .cht-sent{color:#DC2626} .clima-hist-modal .chm-tema.neu .cht-arrow,.clima-hist-modal .chm-tema.neu .cht-sent{color:#A1A1AA} .clima-hist-modal .chm-tema .cht-arrow{flex:0 0 auto;font-size:.82rem;width:14px;text-align:center;margin-top:1px} .clima-hist-modal .chm-tema .cht-main{flex:1 1 auto;min-width:0} .clima-hist-modal .chm-tema .cht-title{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .clima-hist-modal .chm-tema .cht-meta{font-size:.7rem;color:#64748b;font-weight:600;margin-top:2px} .clima-hist-modal .chm-tema .cht-medio{color:#7c3aed;font-weight:700} .clima-hist-modal .chm-tema .cht-sent{font-weight:800} .clima-hist-modal .chm-tema .cht-open{flex:0 0 auto;color:#94a3b8;text-decoration:none; font-size:1rem;padding:0 2px;line-height:1.2} .clima-hist-modal .chm-tema .cht-open:hover{color:#7c3aed} .clima-hist-modal .chm-empty{font-size:.78rem;color:#94a3b8;padding:10px 2px} .clima-hist-modal .chm-foot{font-size:.68rem;color:#94a3b8;margin-top:12px;text-align:center} /* MOBILE: la card ocupa casi todo el alto, scroll interno */ @media (max-width:640px){ .clima-hist-modal .chm-card{width:96vw;max-height:94vh;padding:18px 16px 14px} .clima-hist-modal .chm-chart-wrap{height:200px} .clima-hist-modal .chm-tema .cht-title{white-space:normal} }