/* ================================================================== ROWAN · MODERNO THEME Activado mediante Convive con classic light/dark — no afecta cuando está inactivo. ================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); /* ================================================================== 1) TOKEN OVERRIDES — pisamos las CSS vars del classic ================================================================== */ html[data-style="moderno"]{ /* Surfaces */ --ink: #05060a; --ink-2: #0a0c14; --surface: rgba(20,24,38,.55); --surface-2: rgba(20,24,38,.65); /* Versión OPACA para modales/drawers (donde la transparencia no debe dejar ver el contenido detrás). */ --modal-bg: #14182a; --line: rgba(255,255,255,.06); --line-2: rgba(255,255,255,.10); /* Tipografía */ --text: #f5f7ff; --text-dim: #cdd2e2; --muted: #8a8fa3; --muted-2: #5a5e72; /* Accents — paleta bronce ROWAN unificada */ --accent: #E4B56B; --accent-deep: #6E5B3F; --accent-light: #EDD4AD; --jade: #10b981; --blue: #22d3ee; --violet: #f472b6; --rust: #f43f5e; /* Atmósfera */ --grain-opacity: 0; --hero-glow-1: rgba(228,181,107,.18); --hero-glow-2: rgba(244,114,182,.14); /* Fuentes — Inter sustituye a Syne/Schibsted para la estética dashboard */ --f-display: 'Inter', system-ui, sans-serif; --f-ui: 'Inter', system-ui, sans-serif; --f-mono: 'JetBrains Mono', ui-monospace, monospace; /* Extras propios moderno (prefijo --m-) */ --m-bg-0: #05060a; --m-bg-1: #0a0c14; --m-accent-2: #22d3ee; --m-accent-3: #f472b6; --m-green: #10b981; --m-red: #f43f5e; --m-orange: #fb923c; --m-grad-1: linear-gradient(135deg,#E4B56B 0%,#22d3ee 100%); --m-grad-2: linear-gradient(135deg,#f472b6 0%,#fb923c 100%); --m-grad-3: linear-gradient(135deg,#10b981 0%,#22d3ee 100%); --m-grad-4: linear-gradient(135deg,#f43f5e 0%,#fb923c 100%); --m-glow-1: 0 0 24px rgba(228,181,107,.35), 0 0 60px rgba(34,211,238,.15); --m-radius-glass: 20px; /* Tablas / charts (las usan los sector templates) */ --row-hover: rgba(228,181,107,.07); --chart-grid: rgba(255,255,255,.06); --tooltip-bg: rgba(10,12,20,.95); } /* ================================================================== 2) FONDO CÓSMICO — sustituye al editorial warm glow ================================================================== */ html[data-style="moderno"] body{ background: var(--m-bg-0) !important; color: var(--text); font-family: var(--f-ui); } html[data-style="moderno"] body::before{ /* Anula el grano editorial */ display: none !important; } html[data-style="moderno"] body{ position: relative; } html[data-style="moderno"] body::after{ content:''; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(900px 700px at 80% -10%, rgba(228,181,107,.18), transparent 60%), radial-gradient(800px 600px at 10% 110%, rgba(244,114,182,.14), transparent 60%), radial-gradient(700px 500px at 110% 60%, rgba(34,211,238,.12), transparent 60%), var(--m-bg-0); /* Antes esta animación usaba filter:hue-rotate(). filter crea un stacking context que ROMPÍA el backdrop-filter del .sm-backdrop en moderno (el modal abierto no tenía blur). Cambiado a una animación de opacity sutil que da el mismo "respiro" visual sin filter. */ animation: m-aurora 22s ease-in-out infinite alternate; opacity: .92; } @keyframes m-aurora{ 0%,100%{ opacity: .85 } 50% { opacity: 1 } } /* Glow editorial: invisible en moderno (el aurora ya hace el trabajo) */ html[data-style="moderno"] .glow{ display: none !important; } /* ================================================================== 3) RESKIN DE COMPONENTES CLASSIC — glass + indigo ================================================================== */ html[data-style="moderno"] .card, html[data-style="moderno"] .pain-card, html[data-style="moderno"] .benefit, html[data-style="moderno"] .step, html[data-style="moderno"] .cta-banner, html[data-style="moderno"] .sm-dialog, html[data-style="moderno"] .sm-card{ background: var(--surface) !important; border-color: var(--line) !important; backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); } html[data-style="moderno"] .card::before, html[data-style="moderno"] .pain-card::before, html[data-style="moderno"] .benefit::before, html[data-style="moderno"] .step::before, html[data-style="moderno"] .cta-banner::before{ content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(135deg,rgba(255,255,255,.06),transparent 45%); border-radius:inherit; } /* Sombras de hover y CTAs: del oro al indigo */ html[data-style="moderno"] .card.active:hover{ box-shadow: 0 22px 48px -16px rgba(0,0,0,.7), 0 0 0 1px rgba(228,181,107,.15) inset, 0 60px 120px -40px rgba(228,181,107,.22) !important; } html[data-style="moderno"] .btn-primary{ background: var(--m-grad-1) !important; color: #fff !important; border: 0 !important; box-shadow: var(--m-glow-1); } html[data-style="moderno"] .btn-primary:hover{ filter: brightness(1.08); box-shadow: 0 14px 36px -10px rgba(228,181,107,.55), 0 0 60px rgba(34,211,238,.25); } html[data-style="moderno"] .btn-ghost:hover{ border-color: var(--accent) !important; color: var(--accent) !important; box-shadow: 0 0 0 1px rgba(228,181,107,.25); } /* Logo: drop-shadow gold → indigo */ html[data-style="moderno"] .brand-logo{ filter: drop-shadow(0 6px 18px rgba(228,181,107,.45)); } html[data-style="moderno"] .brand:hover .brand-logo{ filter: drop-shadow(0 10px 28px rgba(228,181,107,.7)); } /* Ticker editorial superior + chips: tonos cyan en lugar de jade */ html[data-style="moderno"] .ticker .dot{ background: var(--m-accent-2); box-shadow: 0 0 12px var(--m-accent-2); } html[data-style="moderno"] .chip{ color: var(--m-accent-2); border-color: rgba(34,211,238,.35); } /* ---------------------------------------------------------------- CHIP LIVE — 'Tiempo real · Pro' en nav landing/pricing Visible en cualquier estilo. Cambia look según style activo. Linkea a /pricing#pro (anchor al tier Pro). ---------------------------------------------------------------- */ .chip.chip-live{ display: inline-flex; align-items: center; gap: 4px; background: linear-gradient(135deg, rgba(228,181,107,.10), rgba(34,211,238,.08)); border-color: rgba(228,181,107,.45) !important; color: #E4B56B !important; font-weight: 600; text-decoration: none !important; transition: all .2s; position: relative; overflow: hidden; } .chip.chip-live::before{ /* sweep sutil de luz al hover */ content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(228,181,107,.15), transparent); transform: translateX(-100%); transition: transform .55s ease; } .chip.chip-live:hover{ border-color: #22d3ee !important; color: #22d3ee !important; background: linear-gradient(135deg, rgba(228,181,107,.18), rgba(34,211,238,.16)); box-shadow: 0 4px 16px -4px rgba(228,181,107,.35); transform: translateY(-1px); } .chip.chip-live:hover::before{ transform: translateX(100%); } [data-theme="light"] .chip.chip-live{ color: #6E5B3F !important; background: linear-gradient(135deg, rgba(228,181,107,.06), rgba(34,211,238,.04)); } [data-theme="light"] .chip.chip-live:hover{ color: #1a73e8 !important; } html[data-style="moderno"] .chip.chip-live{ background: linear-gradient(135deg, rgba(228,181,107,.18), rgba(34,211,238,.12)); border-color: rgba(244,114,182,.40) !important; color: #f472b6 !important; box-shadow: 0 0 12px rgba(244,114,182,.20); } html[data-style="moderno"] .chip.chip-live:hover{ color: #facc15 !important; border-color: rgba(250,204,21,.45) !important; background: linear-gradient(135deg, rgba(244,114,182,.18), rgba(250,204,21,.10)); } html[data-style="google"] .chip.chip-live{ background: var(--g-blue-soft) !important; border: 0 !important; color: var(--g-blue) !important; font-family: var(--f-ui) !important; text-transform: none; letter-spacing: 0; font-weight: 500; padding: 4px 12px !important; border-radius: 999px !important; } html[data-style="google"] .chip.chip-live:hover{ background: #d2e3fc !important; color: var(--accent-deep) !important; box-shadow: var(--g-shadow-1) !important; } /* Headings em → degradado indigo→cyan */ html[data-style="moderno"] .hero h1 em, html[data-style="moderno"] .section-title em, html[data-style="moderno"] .cta-banner h3 em{ background: var(--m-grad-1); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Step numbers grandes */ html[data-style="moderno"] .step .step-n{ background: var(--m-grad-1); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Sector card accent line: degradado en lugar de color plano */ html[data-style="moderno"] .card .accent-line{ background: linear-gradient(90deg, var(--card-color, var(--accent)) 0%, var(--m-accent-2) 50%, transparent 80%); } /* ================================================================== 4) SWITCHER UI — visible siempre (los 3 estados) ================================================================== */ .rwn-switcher{ display:inline-flex; align-items:stretch; background: rgba(0,0,0,.05); border: 1px solid var(--line-2); border-radius: 10px; padding: 3px; gap: 2px; height: 32px; } .rwn-switcher button{ appearance:none; background:transparent; border:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; width: 30px; height: 100%; border-radius: 7px; color: var(--muted); transition: background .15s, color .15s; padding: 0; } .rwn-switcher button svg{ width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; opacity:.88 } .rwn-switcher button[aria-pressed="true"] svg{ opacity:1 } .rwn-switcher button:hover{ color: var(--text) } .rwn-switcher button[aria-pressed="true"]{ background: var(--surface-2); color: var(--accent); box-shadow: 0 1px 2px rgba(0,0,0,.15); } html[data-style="moderno"] .rwn-switcher{ background: rgba(255,255,255,.04); border-color: var(--line-2); } html[data-style="moderno"] .rwn-switcher button[aria-pressed="true"]{ background: rgba(228,181,107,.18); color: #fff; box-shadow: 0 0 0 1px rgba(228,181,107,.35), 0 0 12px rgba(228,181,107,.25); } /* ================================================================== 5) HERO MODERNO — el bloque rediseñado para landing/pricing/sectores Solo visible cuando data-style="moderno" ================================================================== */ /* Strip live (Activos ahora / Ticker / Pulse) retirado de la home. Se mantiene oculto en todos los estilos para que la home en moderno tenga exactamente la misma estructura que en Google Material. */ .m-hero{ display: none !important; } .m-hero{ grid-template-columns: 380px 1fr 320px; gap: 18px; padding: 24px 0 12px; margin-top: 8px; } .m-glass{ background: rgba(20,24,38,.55); border: 1px solid rgba(255,255,255,.06); border-radius: var(--m-radius-glass); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); position: relative; overflow: hidden; } .m-glass::before{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background: linear-gradient(135deg, rgba(255,255,255,.07), transparent 40%); mix-blend-mode: overlay; } /* Tarjeta 1: big number activos + sparkline */ .m-hero-active{ padding: 22px 24px; display: flex; flex-direction: column; gap: 6px; position: relative; min-height: 160px; } .m-hero-active .label, .m-hero-ticker .label, .m-hero-pulse .label{ font-family: var(--f-mono); font-size: 11px; color: var(--muted); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; } .m-hero-active .num{ font-family: var(--f-ui); font-size: 64px; line-height: 1; font-weight: 800; letter-spacing: -.04em; background: var(--m-grad-1); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; position: relative; } .m-hero-active .num > span{ -webkit-text-fill-color: currentColor; } .m-hero-active .num [data-m-active]{ background: var(--m-grad-1); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .m-hero-active .num .live-dot{ width: 10px; height: 10px; border-radius: 50%; background: var(--m-green); box-shadow: 0 0 12px var(--m-green); animation: m-pulse 1.6s infinite; align-self: center; } .m-hero-active .sub{ font-size:12px; color: var(--muted); } .m-hero-active .delta{ display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--m-green); } .m-hero-active .spark{ position: absolute; right: 14px; top: 14px; bottom: 14px; width: 160px; } @keyframes m-pulse{ 0% {box-shadow: 0 0 0 0 rgba(16,185,129,.6)} 70% {box-shadow: 0 0 0 8px rgba(16,185,129,0)} 100%{box-shadow: 0 0 0 0 rgba(16,185,129,0)} } /* Tarjeta 2: ticker stream */ .m-hero-ticker{ padding: 0; display: flex; align-items: center; position: relative; height: 96px; min-height: 96px; } .m-hero-ticker .label{ position: absolute; left: 18px; top: 14px; z-index: 2; } .m-hero-ticker .label::before{ content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background: var(--m-accent-2); box-shadow: 0 0 8px var(--m-accent-2); margin-right: 8px; vertical-align: 1px; animation: m-pulse 1.6s infinite; } .m-hero-ticker .track{ display: flex; align-items: center; gap: 34px; white-space: nowrap; padding: 0 24px; position: absolute; left: 0; right: 0; top: 46px; animation: m-tick 60s linear infinite; font-family: var(--f-mono); font-size: 13px; color: var(--text-dim); } .m-hero-ticker .track:hover{ animation-play-state: paused; } .m-hero-ticker .track .it{ display: inline-flex; align-items: center; gap: 8px; } .m-hero-ticker .track .ev{ color: var(--m-accent-2); font-weight: 500; } .m-hero-ticker .track .v{ color: var(--text); font-weight: 600; } .m-hero-ticker .track .up{ color: var(--m-green); } .m-hero-ticker .track .dn{ color: var(--m-red); } .m-hero-ticker::after{ content:''; position: absolute; left: 0; top: 0; bottom: 0; width: 60px; background: linear-gradient(90deg, var(--m-bg-1), transparent); pointer-events: none; z-index: 1; } .m-hero-ticker::before{ content:''; position: absolute; right: 0; top: 0; bottom: 0; width: 60px; background: linear-gradient(-90deg, var(--m-bg-1), transparent); pointer-events: none; z-index: 1; } @keyframes m-tick{ 0% {transform: translateX(0)} 100%{transform: translateX(-50%)} } /* Tarjeta 3: pulse equalizer + métricas */ .m-hero-pulse{ padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; } .m-hero-pulse .eq{ display: flex; align-items: flex-end; gap: 3px; height: 48px; } .m-hero-pulse .eq .bar{ width: 6px; background: var(--m-grad-1); border-radius: 2px; animation: m-eq 1.2s ease-in-out infinite; } @keyframes m-eq{ 0%,100%{height: 20%} 50% {height: 100%} } .m-hero-pulse .row{ display: flex; justify-content: space-between; font-size: 12.5px; } .m-hero-pulse .row span:last-child{ font-variant-numeric: tabular-nums; font-weight: 600; } /* Responsive */ @media (max-width: 1100px){ .m-hero{ grid-template-columns: 1fr 1fr; } .m-hero-pulse{ display: none; } } @media (max-width: 700px){ .m-hero{ grid-template-columns: 1fr; } .m-hero-active .num{ font-size: 48px; } } /* ================================================================== 6) TABLAS — estilo OpenPanel / Google Charts Headers monospace caps, sin zebra, hover indigo, bordes ultra-sutiles, números tabular nums con glow opcional, tags glass con borde neón. ================================================================== */ html[data-style="moderno"] .scroll{ /* Container del wrapper de la tabla — efecto glass sutil sobre el card */ border-radius: 14px; } html[data-style="moderno"] table{ font-family: var(--f-ui); font-size: 12.5px; border-collapse: separate; border-spacing: 0; } /* Header sticky con backdrop-blur */ html[data-style="moderno"] th{ background: rgba(10,12,20,.85) !important; backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); color: var(--muted) !important; border-bottom: 1px solid rgba(255,255,255,.10) !important; font-family: var(--f-mono); font-size: 9.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; padding: 11px 12px !important; position: sticky; top: 0; z-index: 5; cursor: pointer; user-select: none; white-space: nowrap; transition: color .15s, background .15s; } /* Columnas numéricas: header alineado a la derecha como sus celdas */ html[data-style="moderno"] th.num{ text-align: right !important; } html[data-style="moderno"] th:hover{ color: var(--text) !important; background: rgba(228,181,107,.08) !important; } html[data-style="moderno"] th::after{ margin-left: 6px; opacity: .25; font-family: var(--f-mono); } html[data-style="moderno"] th.sort-asc::after, html[data-style="moderno"] th.sort-desc::after{ opacity: 1; background: var(--m-grad-1); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Filas: sin zebra, separadores ultra-sutiles, hover lift indigo */ html[data-style="moderno"] td{ border-bottom: 1px solid rgba(255,255,255,.04) !important; padding: 11px 12px !important; color: var(--text-dim); transition: color .12s; } html[data-style="moderno"] td strong{ color: var(--text); font-weight: 600; } html[data-style="moderno"] tbody tr{ transition: background .15s; } html[data-style="moderno"] tbody tr:hover td{ background: rgba(228,181,107,.07) !important; color: var(--text); } html[data-style="moderno"] tbody tr:last-child td{ border-bottom: 0 !important; } /* Números: tabular, indigo de acento al hover */ html[data-style="moderno"] .num{ font-family: var(--f-mono); font-variant-numeric: tabular-nums slashed-zero; font-weight: 500; color: var(--text); } html[data-style="moderno"] tbody tr:hover .num{ text-shadow: 0 0 12px rgba(228,181,107,.35); } /* Buenas/Malas variaciones */ html[data-style="moderno"] .good, html[data-style="moderno"] td.good, html[data-style="moderno"] .num.good{ color: var(--m-green) !important; } html[data-style="moderno"] .bad, html[data-style="moderno"] td.bad, html[data-style="moderno"] .num.bad{ color: var(--m-red) !important; } /* ================================================================== 7) TAGS / pills — glass + borde neón ================================================================== */ html[data-style="moderno"] .tag{ font-family: var(--f-mono); font-size: 9.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.10); } html[data-style="moderno"] .tag::before{ content:''; width:5px; height:5px; border-radius:50%; background: currentColor; box-shadow: 0 0 8px currentColor; flex: 0 0 auto; } html[data-style="moderno"] .tag-red{ color: var(--m-red) !important; border-color: rgba(244,63,94,.35) !important; background: rgba(244,63,94,.08) !important; } html[data-style="moderno"] .tag-yellow{ color: #facc15 !important; border-color: rgba(250,204,21,.35) !important; background: rgba(250,204,21,.08) !important; } html[data-style="moderno"] .tag-green{ color: var(--m-green) !important; border-color: rgba(16,185,129,.35) !important; background: rgba(16,185,129,.08) !important; } html[data-style="moderno"] .tag-blue{ color: var(--m-accent-2) !important; border-color: rgba(34,211,238,.35) !important; background: rgba(34,211,238,.08) !important; } html[data-style="moderno"] .tag-gray{ color: var(--muted) !important; border-color: rgba(255,255,255,.10) !important; background: rgba(255,255,255,.03) !important; } /* ================================================================== 8) BÚSQUEDA + filtros + banners ================================================================== */ html[data-style="moderno"] .search, html[data-style="moderno"] .tbl-search input{ background: rgba(0,0,0,.25) !important; border-color: rgba(255,255,255,.08) !important; } html[data-style="moderno"] .search:focus-within, html[data-style="moderno"] .tbl-search input:focus{ border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(228,181,107,.20), 0 0 24px rgba(228,181,107,.18) !important; } html[data-style="moderno"] .row-count, html[data-style="moderno"] .tbl-search .tbl-count{ color: var(--muted) !important; } /* Banner filtro de año (sector distribución) */ html[data-style="moderno"] .rep-filter-banner{ background: rgba(228,181,107,.10) !important; border-color: rgba(228,181,107,.35) !important; } html[data-style="moderno"] .rep-filter-banner strong, html[data-style="moderno"] .rep-filter-banner .rfb-dot{ color: var(--accent) !important; background: var(--accent); box-shadow: 0 0 10px var(--accent); } html[data-style="moderno"] .rep-filter-banner strong{ background: none; } html[data-style="moderno"] .rep-year-btn{ color: var(--text); font-family: var(--f-mono); } html[data-style="moderno"] .rep-year-btn:hover{ background: rgba(228,181,107,.12); border-color: rgba(228,181,107,.35); } html[data-style="moderno"] .rep-year-btn.active{ background: var(--m-grad-1); color: #fff; border-color: transparent; box-shadow: var(--m-glow-1); } /* Loading + empty states */ html[data-style="moderno"] .loading, html[data-style="moderno"] .empty{ color: var(--muted); font-family: var(--f-mono); letter-spacing: .14em; } /* Selección global */ html[data-style="moderno"] ::selection{ background: rgba(228,181,107,.35); color: var(--text); } /* ================================================================== 9) FULL MODERNO — overrides BRUTALES para que se note de un vistazo Header sector, cards, KPIs, h2/h3, filtros, charts, etc. ================================================================== */ /* HEADER del sector — glass cosmic con gradient brand */ html[data-style="moderno"] header{ background: rgba(5,6,10,.75) !important; backdrop-filter: blur(20px) saturate(1.4) !important; -webkit-backdrop-filter: blur(20px) saturate(1.4) !important; border-bottom: 1px solid rgba(228,181,107,.18) !important; box-shadow: 0 1px 0 rgba(228,181,107,.08), 0 12px 40px -20px rgba(228,181,107,.20); z-index: 1500 !important; /* por encima de Leaflet panes (max 1000) */ } /* Dropdown del sector switcher SIEMPRE delante del mapa */ html[data-style="moderno"] .sector-sw, html[data-style="google"] .sector-sw{ z-index: 1600; } html[data-style="moderno"] .sector-sw .sw-menu, html[data-style="google"] .sector-sw .sw-menu{ z-index: 9999 !important; } html[data-style="moderno"] .brand-mark{ background: var(--m-grad-1) !important; color: #fff !important; box-shadow: var(--m-glow-1), inset 0 1px 0 rgba(255,255,255,.25) !important; } html[data-style="moderno"] .brand-name em{ background: var(--m-grad-1); -webkit-background-clip: text; background-clip: text; color: transparent !important; } /* Sector switcher */ html[data-style="moderno"] .sector-sw .sw-trigger{ background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.10) !important; backdrop-filter: blur(10px); } html[data-style="moderno"] .sector-sw .sw-trigger:hover{ border-color: var(--accent) !important; background: rgba(228,181,107,.10) !important; box-shadow: 0 0 24px rgba(228,181,107,.20); } html[data-style="moderno"] .sector-sw .sw-trigger .dot{ background: var(--m-accent-2) !important; box-shadow: 0 0 12px var(--m-accent-2) !important; } html[data-style="moderno"] .sector-sw .sw-menu{ background: rgba(10,12,20,.92) !important; backdrop-filter: blur(20px) saturate(1.4) !important; border-color: rgba(255,255,255,.10) !important; box-shadow: 0 30px 80px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(228,181,107,.15) inset !important; } html[data-style="moderno"] .sw-item.active{ background: rgba(228,181,107,.18) !important; } html[data-style="moderno"] .sw-item:hover{ background: rgba(228,181,107,.10) !important; } /* NAV links del sector */ html[data-style="moderno"] nav a.active{ color: var(--text) !important; } /* Toggle Ejecutiva (editorial) ↔ HOME (moderno/google) */ nav a.nav-home .nh-classic{ display: inline; } nav a.nav-home .nh-live{ display: none; } html[data-style="moderno"] nav a.nav-home .nh-classic, html[data-style="google"] nav a.nav-home .nh-classic{ display: none; } html[data-style="moderno"] nav a.nav-home .nh-live, html[data-style="google"] nav a.nav-home .nh-live{ display: inline-flex; align-items: center; } /* Estilo HOME pill SOLO en moderno/google (en editorial el link queda exactamente como estaba: sin pill, sin borde, mismo look que el resto). */ html[data-style="moderno"] nav a.nav-home{ background: linear-gradient(135deg, rgba(244,114,182,.12), rgba(228,181,107,.12)); border: 1px solid rgba(244,114,182,.35); color: #f472b6 !important; border-radius: 6px; padding: 6px 12px !important; font-weight: 700; letter-spacing: .04em; } html[data-style="moderno"] nav a.nav-home.active{ background: linear-gradient(135deg, rgba(244,114,182,.25), rgba(228,181,107,.25)); color: #fff !important; box-shadow: 0 0 14px rgba(244,114,182,.30); } html[data-style="moderno"] nav a.nav-home.active::after{ display: none; } html[data-style="google"] nav a.nav-home{ background: var(--g-blue-soft) !important; border: 0; color: var(--g-blue) !important; border-radius: 999px !important; padding: 6px 14px !important; font-family: var(--f-ui) !important; letter-spacing: 0; font-weight: 600; } html[data-style="google"] nav a.nav-home.active{ background: var(--g-blue) !important; color: #fff !important; } html[data-style="google"] nav a.nav-home.active::after{ display: none; } html[data-style="moderno"] nav a.active::after{ background: var(--m-grad-1) !important; box-shadow: 0 0 16px rgba(228,181,107,.6), 0 0 32px rgba(34,211,238,.35) !important; height: 2px !important; } html[data-style="moderno"] nav a:hover{ color: var(--m-accent-2) !important; } /* Filtros (selects + botones) — glass + indigo */ html[data-style="moderno"] .hdr-select, html[data-style="moderno"] .hdr-btn{ background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.10) !important; color: var(--text-dim) !important; backdrop-filter: blur(8px); } html[data-style="moderno"] .hdr-select:hover, html[data-style="moderno"] .hdr-btn:hover{ border-color: var(--accent) !important; background: rgba(228,181,107,.10) !important; } html[data-style="moderno"] .hdr-select:focus{ outline: none !important; border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(228,181,107,.25), 0 0 24px rgba(228,181,107,.18) !important; } /* H2 page heading — gradient text. Igual que .kpi .val, usamos -webkit-text-fill-color para no contaminar a hijos como .subtitle. */ html[data-style="moderno"] h2{ font-family: var(--f-ui) !important; font-weight: 800 !important; letter-spacing: -.03em !important; background: linear-gradient(135deg, #f5f7ff 20%, #E4B56B 60%, #22d3ee 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 60px rgba(228,181,107,.25); } html[data-style="moderno"] h2 > *{ -webkit-text-fill-color: currentColor; background: none !important; } html[data-style="moderno"] h2 .subtitle{ color: var(--muted) !important; -webkit-text-fill-color: var(--muted) !important; } /* CARDS — full glass + borde gradiente animado + lift al hover */ html[data-style="moderno"] .card{ background: rgba(20,24,38,.55) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 16px !important; backdrop-filter: blur(16px) saturate(1.3) !important; -webkit-backdrop-filter: blur(16px) saturate(1.3) !important; box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 24px 60px -20px rgba(0,0,0,.5), 0 0 0 1px rgba(228,181,107,.04); transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s cubic-bezier(.2,.8,.2,1), border-color .2s; } html[data-style="moderno"] .card::before{ content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,.06), transparent 45%); mix-blend-mode: overlay; } html[data-style="moderno"] .card::after{ /* Línea de acento superior — gradiente neón */ content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(228,181,107,.6), rgba(34,211,238,.6), transparent); opacity: .55; pointer-events: none; } html[data-style="moderno"] .card:hover{ transform: translateY(-2px); border-color: rgba(228,181,107,.25) !important; box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 30px 80px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(228,181,107,.15), 0 0 60px -10px rgba(228,181,107,.25); } /* En moderno, .card h3 (sector-name) hereda la escala editorial (Syne 800 22px) de landing.html. Sin override de tamaño para que los 4 títulos queden idénticos a los demás estilos. */ html[data-style="moderno"] .card h3::before{ display:none !important; } @keyframes m-pulse-soft{ 0%,100%{opacity:1; transform:scale(1)} 50% {opacity:.5; transform:scale(.85)} } /* KPI hero — número gigante con gradient text + glow. Usamos -webkit-text-fill-color en lugar de color:transparent para que los hijos (clases up/down/pos/neg/bad/good ad-hoc) sigan visibles con su propio color heredado del cascade. */ html[data-style="moderno"] .kpi .val{ font-family: var(--f-ui) !important; font-size: 44px !important; font-weight: 800 !important; letter-spacing: -.035em !important; background: var(--m-grad-1); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 40px rgba(228,181,107,.35); } /* Cualquier dentro de .val recupera fill sólido — clases conocidas (up/down/pos/neg/good/bad) reciben verde/rojo; el resto fallback texto. */ html[data-style="moderno"] .kpi .val > *{ -webkit-text-fill-color: currentColor; color: var(--text) !important; background: none !important; } html[data-style="moderno"] .kpi .val .up, html[data-style="moderno"] .kpi .val .pos, html[data-style="moderno"] .kpi .val .good{ color: var(--m-green) !important; -webkit-text-fill-color: var(--m-green) !important; } html[data-style="moderno"] .kpi .val .down, html[data-style="moderno"] .kpi .val .neg, html[data-style="moderno"] .kpi .val .bad{ color: var(--m-red) !important; -webkit-text-fill-color: var(--m-red) !important; } /* CHART wrap — sutil inner glow */ html[data-style="moderno"] .chart-wrap{ border-radius: 12px; position: relative; } html[data-style="moderno"] .chart-wrap::before{ content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(228,181,107,.05), transparent 70%); pointer-events: none; border-radius: inherit; z-index: 0; } /* TABLAS — heavy: padding mayor, hover lift, data-bar opcional, gradient separator */ html[data-style="moderno"] table{ font-size: 13px !important; } html[data-style="moderno"] th{ padding: 13px 14px !important; font-size: 10px !important; } html[data-style="moderno"] td{ padding: 13px 14px !important; } /* Cell data-bar: la celda con style="--cell-pct: 60" pinta un fill horizontal de fondo. Solo esa td recibe position:relative. */ html[data-style="moderno"] td[style*="--cell-pct"]{ position: relative; } html[data-style="moderno"] td[style*="--cell-pct"]::before{ content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--cell-pct, 0) * 1%); background: linear-gradient(90deg, rgba(228,181,107,.18), rgba(34,211,238,.10)); border-right: 1px solid rgba(34,211,238,.30); pointer-events: none; z-index: 0; } html[data-style="moderno"] td[style*="--cell-pct"] > *{ position: relative; z-index: 1; } html[data-style="moderno"] tbody tr{ transition: background .18s, transform .18s; } html[data-style="moderno"] tbody tr:hover{ background: linear-gradient(90deg, rgba(228,181,107,.10), rgba(34,211,238,.04)) !important; } html[data-style="moderno"] tbody tr:hover td{ background: transparent !important; } /* Charts: cambio de h3 dentro de chart cards también */ html[data-style="moderno"] .card-header h3{ margin: 0; } /* Brand drop-shadow ya no aplica al sector header (no usa .brand-logo) */ /* SCROLL containers */ html[data-style="moderno"] .scroll{ scrollbar-width: thin; scrollbar-color: rgba(228,181,107,.4) transparent; } html[data-style="moderno"] .scroll::-webkit-scrollbar{ width: 8px; height: 8px; } html[data-style="moderno"] .scroll::-webkit-scrollbar-thumb{ background: linear-gradient(180deg, rgba(228,181,107,.5), rgba(34,211,238,.4)); border-radius: 999px; } html[data-style="moderno"] .scroll::-webkit-scrollbar-track{ background: transparent; } /* Footer */ html[data-style="moderno"] footer{ border-top-color: rgba(255,255,255,.06) !important; background: rgba(5,6,10,.5); backdrop-filter: blur(10px); } html[data-style="moderno"] footer em{ background: var(--m-grad-1); -webkit-background-clip: text; background-clip: text; color: transparent !important; } /* PR(IZE) sutil para que el body tenga el fondo cosmic incluso si el sector re-define body{background:var(--ink)} */ html[data-style="moderno"] body{ background: var(--m-bg-0) !important; } /* ================================================================== 10) LIVE STRIP — KPI + Mapa + Feed por sector Insertado por moderno-live.js justo después del header del sector. Solo visible en moderno. ================================================================== */ .m-live-strip{ display: none; } html[data-style="moderno"] .m-live-strip{ display: grid; grid-template-columns: 360px 1fr 360px; gap: 16px; padding: 16px var(--s-4, 32px); margin: 0 auto; max-width: 1800px; align-items: stretch; } @media (max-width: 1280px){ html[data-style="moderno"] .m-live-strip{ grid-template-columns: 1fr 1fr; } html[data-style="moderno"] .m-live-feed{ grid-column: 1 / -1; } } @media (max-width: 800px){ html[data-style="moderno"] .m-live-strip{ grid-template-columns: 1fr; padding: 12px; } } /* KPI live */ .m-live-kpi{ background: rgba(20,24,38,.55); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); padding: 20px 22px; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; height: 560px; } .m-live-kpi::before{ content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(228,181,107,.12), transparent 50%); } .m-live-kpi::after{ content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(228,181,107,.6), rgba(34,211,238,.6), transparent); } .m-live-kpi .label{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; color: var(--muted, #8a8fa3); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; position: relative; z-index: 1; } .m-live-kpi .label::before{ content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--m-green, #10b981); box-shadow: 0 0 10px var(--m-green, #10b981); animation: m-pulse 1.6s infinite; } .m-live-kpi .num{ font-family: 'Inter', system-ui, sans-serif; font-size: clamp(80px, 11vw, 128px); line-height: 1; font-weight: 800; letter-spacing: -.045em; background: linear-gradient(135deg, #E4B56B, #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; position: relative; z-index: 1; margin: 16px auto 10px; text-align: center; display: block; width: 100%; } .m-live-kpi .delta{ font-size: 12.5px; font-weight: 600; color: var(--m-green, #10b981); position: relative; z-index: 1; } .m-live-kpi .sub{ font-size: 11px; color: var(--muted, #8a8fa3); position: relative; z-index: 1; } .m-live-kpi .spark-wrap{ position: relative; z-index: 1; margin-top: auto; height: 90px; } /* KPI extras: cuando hay 3 KPI secundarios el número principal puede ser ligeramente más pequeño para que quepa todo. */ .m-live-kpi.has-extras .num{ font-size: clamp(64px, 9vw, 104px); } .m-live-kpi.has-extras .spark-wrap{ height: 60px; margin-top: 6px; } .m-live-kpi .delta, .m-live-kpi .sub{ text-align: center; } .m-live-kpi .kpi-extras{ margin-top: 10px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.06); display: flex; flex-direction: column; gap: 8px; position: relative; z-index: 1; } /* Última fila de KPI extras (típicamente "Comisiones") destacada al pie */ .m-live-kpi .kpi-extras .kpi-row:last-child{ margin-top: 6px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.10); } .m-live-kpi .kpi-extras .kpi-row:last-child .val{ font-weight: 700; color: var(--text); } .m-live-kpi .kpi-row{ display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .m-live-kpi .kpi-row .lbl{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9.5px; color: var(--muted, #8a8fa3); letter-spacing: .12em; text-transform: uppercase; } .m-live-kpi .kpi-row .val{ font-family: 'Inter', system-ui, sans-serif; font-size: 18px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.01em; } /* ---------------------------------------------------------------- CENTER WIDGET — gráfico sector-específico (sustituye al mapa) ---------------------------------------------------------------- */ .m-live-center{ background: rgba(20,24,38,.55); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; overflow: hidden; position: relative; height: 560px; backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); display: flex; flex-direction: column; } .m-live-center > .head{ padding: 14px 18px 12px; border-bottom: 1px solid rgba(255,255,255,.06); display: flex; align-items: center; gap: 10px; } .m-live-center > .head h4{ font-family: 'Inter', system-ui, sans-serif; font-size: 13px; font-weight: 600; color: var(--text, #f5f7ff); display: flex; align-items: center; gap: 8px; } .m-live-center > .head h4 .dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--m-green, #10b981); box-shadow: 0 0 10px var(--m-green, #10b981); animation: m-pulse 1.6s infinite; } .m-live-center > .head .meta{ margin-left: auto; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; color: var(--muted, #8a8fa3); } .m-live-center .cw-body{ flex: 1; overflow: auto; padding: 16px 18px; } .m-live-center .cw-empty{ text-align: center; padding: 60px 0; color: var(--muted, #8a8fa3); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; } /* HEATMAP */ .cwh-grid{ display: grid; grid-template-columns: 28px repeat(8, 1fr); gap: 4px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; } .cwh-corner{} .cwh-hh{ text-align: center; color: var(--muted, #8a8fa3); letter-spacing: .04em; font-size: 9.5px; padding-bottom: 4px; } .cwh-day{ display: grid; place-items: center; color: var(--muted, #8a8fa3); font-weight: 600; letter-spacing: .14em; } .cwh-cell{ aspect-ratio: 1.6 / 1; min-height: 36px; border-radius: 5px; background: linear-gradient(135deg, rgba(34, 211, 238, calc(var(--i) * 0.95)), rgba(99, 102, 241, calc(var(--i) * 0.85))); border: 1px solid rgba(255,255,255, calc(var(--i) * 0.10)); transition: filter .2s; } .cwh-cell:hover{ filter: brightness(1.4); } /* GAUGES — más grandes y centrados (industria) */ .cwg-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; align-content: center; justify-items: center; height: 100%; padding: 10px 0; } .cwg-item{ display: flex; flex-direction: column; align-items: center; position: relative; padding: 4px 0; } .cwg-svg{ width: 150px; height: 150px; transform: rotate(-90deg); } .cwg-bg{ fill: none; stroke: rgba(255,255,255,.06); stroke-width: 9; } .cwg-fill{ fill: none; stroke-width: 9; stroke-linecap: round; transition: stroke-dasharray .8s ease-out, stroke .25s; filter: drop-shadow(0 0 8px currentColor); } .cwg-num{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -55%); font-family: 'Inter', system-ui, sans-serif; font-size: 30px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .cwg-lbl{ margin-top: 8px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-dim, #cdd2e2); letter-spacing: .04em; text-align: center; font-weight: 500; } /* DONUT — donut grande arriba centrado + leyenda con barras debajo */ .cwd-wrap{ display: flex; flex-direction: column; gap: 14px; height: 100%; } .cwd-top{ display: grid; place-items: center; padding-top: 4px; } .cwd-svg-wrap{ position: relative; width: 180px; height: 180px; flex-shrink: 0; } .cwd-svg{ width: 100%; height: 100%; transform: rotate(-90deg); } .cwd-bg{ fill: none; stroke: rgba(255,255,255,.04); stroke-width: 11; } .cwd-seg{ fill: none; stroke-width: 11; stroke-linecap: butt; transition: stroke-dasharray .6s ease-out; } .cwd-center{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } .cwd-big{ display: block; font-family: 'Inter', system-ui, sans-serif; font-size: 36px; font-weight: 800; color: #fff; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; } .cwd-sub{ display: block; font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--muted, #8a8fa3); letter-spacing: .14em; text-transform: uppercase; margin-top: 4px; } .cwd-legend{ display: flex; flex-direction: column; gap: 9px; flex: 1; } .cwd-lg-row{ display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 10px; font-family: 'Inter', system-ui, sans-serif; font-size: 12px; } .cwd-lg-name{ color: var(--text-dim, #cdd2e2); display: inline-flex; align-items: center; gap: 8px; } .cwd-lg-dot{ width: 9px; height: 9px; border-radius: 50%; background: var(--c, #5a5e72); box-shadow: 0 0 6px var(--c, transparent); flex-shrink: 0; } .cwd-lg-vals{ font-family: 'JetBrains Mono', monospace; font-size: 11px; display: inline-flex; gap: 8px; align-items: baseline; } .cwd-lg-num{ color: #fff; font-weight: 700; } .cwd-lg-pct{ color: var(--muted, #8a8fa3); } .cwd-lg-bar{ grid-column: 1 / -1; height: 4px; background: rgba(255,255,255,.05); border-radius: 2px; overflow: hidden; } .cwd-lg-fill{ height: 100%; background: var(--c, #5a5e72); border-radius: 2px; transition: width .55s cubic-bezier(.2,.8,.2,1); opacity: .9; } /* BARS (top items) */ .cwb-list{ display: flex; flex-direction: column; gap: 6px; } .cwb-row{ display: grid; grid-template-columns: 24px 1fr 100px; align-items: center; gap: 10px; padding: 6px 0; } .cwb-rank{ font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; color: var(--muted, #8a8fa3); text-align: center; } .cwb-label{ font-family: 'Inter', system-ui, sans-serif; font-size: 11.5px; color: var(--text-dim, #cdd2e2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cwb-bar-wrap{ grid-column: 1 / -1; height: 4px; background: rgba(255,255,255,.05); border-radius: 2px; overflow: hidden; margin-top: 2px; } .cwb-bar{ height: 100%; background: linear-gradient(90deg, #E4B56B, #22d3ee); border-radius: 2px; transition: width .65s cubic-bezier(.2,.8,.2,1); } .cwb-row:nth-child(1) .cwb-bar{ background: linear-gradient(90deg, #facc15, #fb923c); } .cwb-row:nth-child(2) .cwb-bar{ background: linear-gradient(90deg, #22d3ee, #E4B56B); } .cwb-row:nth-child(3) .cwb-bar{ background: linear-gradient(90deg, #f472b6, #E4B56B); } .cwb-val{ font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; color: #fff; text-align: right; font-variant-numeric: tabular-nums; } /* GANTT */ .cwg-table{ display: flex; flex-direction: column; gap: 6px; } .cwg-axis{ display: grid; grid-template-columns: 130px 1fr 50px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--muted, #8a8fa3); letter-spacing: .12em; text-transform: uppercase; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.06); margin-bottom: 6px; } .cwg-axis span:nth-child(1){ } .cwg-axis span:nth-child(2){ display: flex; justify-content: space-between; padding: 0 4px; } .cwg-axis span:nth-child(3){ text-align: right; } .cwgt-row{ display: grid; grid-template-columns: 130px 1fr 50px; gap: 8px; align-items: center; padding: 4px 0; } .cwgt-name{ font-family: 'Inter', system-ui, sans-serif; font-size: 11px; color: var(--text-dim, #cdd2e2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cwgt-track{ position: relative; height: 14px; background: rgba(255,255,255,.04); border-radius: 3px; overflow: hidden; } .cwgt-block{ position: absolute; top: 0; bottom: 0; border-radius: 3px; transition: left .5s, width .5s; } .cwgt-hito{ font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; color: #facc15; text-align: right; font-variant-numeric: tabular-nums; } /* CHANNELS (hotel) — stacked bar + tabla ADR/revenue */ .cwc-wrap{ display: flex; flex-direction: column; gap: 12px; height: 100%; } .cwc-top{ display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.06); } .cwc-stacked{ display: flex; height: 24px; border-radius: 6px; overflow: hidden; background: rgba(255,255,255,.04); } .cwc-seg{ height: 100%; transition: width .55s cubic-bezier(.2,.8,.2,1); position: relative; } .cwc-seg + .cwc-seg{ border-left: 1px solid rgba(0,0,0,.25); } .cwc-totals{ display: flex; align-items: baseline; gap: 8px; } .cwc-total-num{ font-family: 'Inter', system-ui, sans-serif; font-size: 28px; font-weight: 800; color: #fff; letter-spacing: -.025em; font-variant-numeric: tabular-nums; } .cwc-total-lbl{ font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--muted, #8a8fa3); letter-spacing: .04em; } .cwc-list{ display: flex; flex-direction: column; gap: 4px; flex: 1; } .cwc-row{ display: grid; grid-template-columns: 12px 1fr auto auto auto; gap: 6px 10px; align-items: center; padding: 6px 0; } .cwc-row .cwc-dot{ width: 9px; height: 9px; border-radius: 50%; background: var(--c, #5a5e72); box-shadow: 0 0 6px var(--c, transparent); } .cwc-row .cwc-name{ font-family: 'Inter', system-ui, sans-serif; font-size: 12px; color: var(--text-dim, #cdd2e2); font-weight: 500; } .cwc-row.top .cwc-name{ color: #fff; font-weight: 700; } .cwc-row .cwc-val, .cwc-row .cwc-adr{ font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--muted, #8a8fa3); white-space: nowrap; } .cwc-row .cwc-rev{ font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: #facc15; font-weight: 700; white-space: nowrap; } .cwc-row .cwc-bar{ grid-column: 2 / -1; height: 3px; background: rgba(255,255,255,.04); border-radius: 2px; overflow: hidden; } .cwc-row .cwc-fill{ height: 100%; background: var(--c, #5a5e72); border-radius: 2px; transition: width .5s ease-out; } /* LEADS PERF (inmobiliaria) — horizontal bars con CPL y conversión */ .cwl-list{ display: flex; flex-direction: column; gap: 12px; } .cwl-row{ display: flex; flex-direction: column; gap: 4px; } .cwl-head{ display: flex; justify-content: space-between; align-items: baseline; } .cwl-name{ font-family: 'Inter', system-ui, sans-serif; font-size: 12.5px; font-weight: 600; color: #fff; } .cwl-val{ font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; color: var(--text-dim, #cdd2e2); } .cwl-bar{ height: 8px; background: rgba(255,255,255,.04); border-radius: 4px; overflow: hidden; } .cwl-fill{ height: 100%; background: linear-gradient(90deg, var(--c, #5a5e72), color-mix(in oklab, var(--c, #fff) 60%, #fff)); border-radius: 4px; transition: width .55s cubic-bezier(.2,.8,.2,1); } .cwl-meta{ display: flex; gap: 12px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; } .cwl-cpl.paid{ color: var(--text-dim, #cdd2e2); } .cwl-cpl.organic{ color: #10b981; font-weight: 600; } .cwl-conv{ margin-left: auto; } .cwl-conv.conv-high{ color: #10b981; font-weight: 700; } .cwl-conv.conv-mid { color: #facc15; } .cwl-conv.conv-low { color: var(--muted, #8a8fa3); } /* CARDS GRID (talleres) — 6 mini-cards con duración y precio */ .cwk-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; height: 100%; align-content: start; } .cwk-card{ background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.06); border-radius: 10px; padding: 10px 12px; position: relative; display: flex; flex-direction: column; gap: 4px; overflow: hidden; } .cwk-card::before{ content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c, #5a5e72); box-shadow: 0 0 8px var(--c, transparent); } .cwk-name{ font-family: 'Inter', system-ui, sans-serif; font-size: 11.5px; font-weight: 600; color: var(--text-dim, #cdd2e2); } .cwk-num{ font-family: 'Inter', system-ui, sans-serif; font-size: 26px; font-weight: 800; color: #fff; letter-spacing: -.025em; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 5px; line-height: 1; } .cwk-num-lbl{ font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 500; color: var(--muted, #8a8fa3); letter-spacing: .08em; text-transform: uppercase; } .cwk-meta{ display: flex; justify-content: space-between; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--muted, #8a8fa3); letter-spacing: .04em; } .cwk-rev{ font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; color: var(--c, #facc15); margin-top: 2px; } /* AGENDA */ .cwa-list{ display: flex; flex-direction: column; gap: 4px; } .cwa-row{ display: grid; grid-template-columns: 60px 1fr auto; gap: 12px; align-items: center; padding: 8px 12px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.05); border-radius: 8px; border-left-width: 3px; } .cwa-row.s-in { border-left-color: #22d3ee; background: rgba(34,211,238,.08); } .cwa-row.s-next { border-left-color: #facc15; } .cwa-row.s-later { border-left-color: rgba(255,255,255,.10); } .cwa-time{ font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; } .cwa-info{ display: flex; flex-direction: column; gap: 1px; min-width: 0; } .cwa-pat{ font-family: 'Inter', system-ui, sans-serif; font-size: 12px; font-weight: 600; color: var(--text-dim, #cdd2e2); } .cwa-meta{ font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--muted, #8a8fa3); } .cwa-status{ font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted, #8a8fa3); } .cwa-row.s-in .cwa-status { color: #22d3ee; } .cwa-row.s-next .cwa-status { color: #facc15; } /* MAPA live */ .m-live-map{ background: rgba(20,24,38,.55); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; overflow: hidden; position: relative; height: 560px; backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); } .m-live-map .head{ position: absolute; top: 14px; left: 18px; right: 18px; z-index: 500; display: flex; align-items: center; gap: 10px; pointer-events: none; } .m-live-map .head h4{ font-family: 'Inter', system-ui, sans-serif; font-size: 13px; font-weight: 600; color: var(--text, #f5f7ff); display: flex; align-items: center; gap: 8px; } .m-live-map .head h4 .dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--m-green, #10b981); box-shadow: 0 0 10px var(--m-green, #10b981); animation: m-pulse 1.6s infinite; } .m-live-map .head .meta{ margin-left: auto; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; color: var(--muted, #8a8fa3); background: rgba(5,6,10,.7); padding: 5px 10px; border-radius: 7px; border: 1px solid rgba(255,255,255,.06); pointer-events: auto; } .m-live-map .map-canvas{ position: absolute; inset: 0; background: #05060a; } html[data-style="moderno"] .leaflet-tile-pane{ filter: saturate(.55) brightness(.55) contrast(1.05) hue-rotate(-10deg); } html[data-style="moderno"] .leaflet-container{ background: #05060a !important; font-family: 'Inter', sans-serif; } html[data-style="moderno"] .leaflet-control-attribution{ background: rgba(5,6,10,.7) !important; color: var(--muted-2, #5a5e72) !important; font-size: 9px !important; border-top-left-radius: 6px; border: 1px solid rgba(255,255,255,.06); } html[data-style="moderno"] .leaflet-control-attribution a{ color: var(--muted, #8a8fa3) !important; } /* ---------------------------------------------------------------- FLEET ROSTER — panel izquierdo en logística (sustituye al KPI) Cabecera con chips por estado, lista scroll de vehículos con ETA, ruta, conductor, carga, progress bar gradient + shimmer, glow urgente cuando ETA <5min, KPI mini en el footer. ---------------------------------------------------------------- */ html[data-style="moderno"] .m-live-strip.has-fleet{ grid-template-columns: 420px 1fr 360px; } @media (max-width: 1280px){ html[data-style="moderno"] .m-live-strip.has-fleet{ grid-template-columns: 1fr 1fr; } } @media (max-width: 800px){ html[data-style="moderno"] .m-live-strip.has-fleet{ grid-template-columns: 1fr; } } .m-live-fleet{ background: rgba(20,24,38,.55); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); display: flex; flex-direction: column; height: 560px; overflow: hidden; position: relative; } .m-live-fleet::after{ content:''; position:absolute; top:0; left:0; right:0; height:1px; background: linear-gradient(90deg, transparent, rgba(228,181,107,.6), rgba(34,211,238,.6), transparent); pointer-events: none; } .m-live-fleet > .head{ padding: 14px 18px 12px; border-bottom: 1px solid rgba(255,255,255,.06); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .m-live-fleet > .head .label{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; color: var(--muted, #8a8fa3); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; } .m-live-fleet > .head .label .ldot{ width: 6px; height: 6px; border-radius: 50%; background: var(--m-green, #10b981); box-shadow: 0 0 10px var(--m-green, #10b981); animation: m-pulse 1.6s infinite; } .m-live-fleet > .head .meta{ margin-left: auto; display: inline-flex; gap: 6px; flex-wrap: wrap; } .m-live-fleet > .head .chip{ display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9.5px; font-weight: 600; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: var(--text-dim, #cdd2e2); } .m-live-fleet > .head .chip .cdot{ width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; } .m-live-fleet > .head .chip.s-route{ color: #22d3ee; border-color: rgba(34,211,238,.30); } .m-live-fleet > .head .chip.s-pause{ color: #facc15; border-color: rgba(250,204,21,.30); } .m-live-fleet > .head .chip.s-delivered{ color: #10b981; border-color: rgba(16,185,129,.30); } .m-live-fleet .fleet-list{ flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 10px 10px; scrollbar-width: thin; scrollbar-color: rgba(228,181,107,.4) transparent; } .m-live-fleet .fleet-list::-webkit-scrollbar{ width: 6px; } .m-live-fleet .fleet-list::-webkit-scrollbar-thumb{ background: linear-gradient(180deg, rgba(228,181,107,.5), rgba(34,211,238,.4)); border-radius: 999px; } .fleet-row{ background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 11px 13px; margin-bottom: 8px; position: relative; cursor: pointer; transition: background .18s, border-color .18s, transform .18s, box-shadow .18s; animation: m-row-in .35s cubic-bezier(.2,.8,.2,1); } @keyframes m-row-in{ from{opacity:0; transform:translateX(-8px)} to {opacity:1; transform:translateX(0)} } .fleet-row:hover, .fleet-row.focus{ background: rgba(228,181,107,.08); border-color: rgba(228,181,107,.30); transform: translateX(2px); box-shadow: 0 0 0 1px rgba(228,181,107,.15), 0 0 24px rgba(228,181,107,.18); } .fleet-row .row-head{ display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin-bottom: 6px; } .fleet-row .vid{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; font-weight: 700; color: #fff; letter-spacing: .04em; } .fleet-row .state{ justify-self: start; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 8.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; background: rgba(34,211,238,.12); color: #22d3ee; border: 1px solid rgba(34,211,238,.35); } .fleet-row .state.s-pause { background: rgba(250,204,21,.12); color: #facc15; border-color: rgba(250,204,21,.40); } .fleet-row .state.s-delivered{ background: rgba(16,185,129,.12); color: #10b981; border-color: rgba(16,185,129,.40); } .fleet-row .state.s-alert { background: rgba(244,63,94,.12); color: #f43f5e; border-color: rgba(244,63,94,.40); } .fleet-row .eta{ font-family: 'Inter', system-ui, sans-serif; font-size: 16px; font-weight: 800; background: linear-gradient(135deg, #f5f7ff, #22d3ee); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-variant-numeric: tabular-nums; display: inline-flex; align-items: baseline; gap: 2px; } .fleet-row .eta i{ font-style: normal; font-size: 9px; font-weight: 500; color: var(--muted, #8a8fa3); -webkit-text-fill-color: var(--muted, #8a8fa3); letter-spacing: .08em; } .fleet-row .route{ display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-dim, #cdd2e2); margin-bottom: 6px; font-family: 'Inter', system-ui, sans-serif; } .fleet-row .route .from{ color: var(--muted, #8a8fa3); } .fleet-row .route .arrow{ color: #22d3ee; font-weight: 700; } .fleet-row .route .to{ color: #fff; font-weight: 600; } .fleet-row .route .speed{ margin-left: auto; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; color: var(--muted, #8a8fa3); letter-spacing: .04em; } .fleet-row .route.sub{ font-size: 10.5px; color: var(--muted, #8a8fa3); margin-bottom: 8px; } .fleet-row .route.sub .driver{ font-weight: 500; } .fleet-row .route.sub .cargo{ margin-left: auto; } .fleet-row .progress{ height: 4px; border-radius: 2px; background: rgba(255,255,255,.05); overflow: hidden; position: relative; } .fleet-row .progress .bar{ position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); background: linear-gradient(90deg, #E4B56B, #22d3ee); border-radius: 2px; transition: width .35s ease-out; box-shadow: 0 0 8px rgba(34,211,238,.6); overflow: hidden; } .fleet-row .progress .bar::after{ content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); animation: m-shimmer 1.6s linear infinite; } @keyframes m-shimmer{ 0% { transform: translateX(-100%); } 100%{ transform: translateX(100%); } } .fleet-row.urgent{ border-color: rgba(244,114,182,.35); background: rgba(244,114,182,.07); } .fleet-row.urgent .eta{ background: linear-gradient(135deg, #f472b6, #facc15); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: m-eta-pulse 1s ease-in-out infinite; } @keyframes m-eta-pulse{ 0%,100%{ filter: brightness(1) drop-shadow(0 0 4px rgba(244,114,182,.4)); } 50% { filter: brightness(1.4) drop-shadow(0 0 14px rgba(244,114,182,.8)); } } .fleet-row.urgent .progress .bar{ background: linear-gradient(90deg, #f472b6, #facc15); box-shadow: 0 0 12px rgba(244,114,182,.7); } /* Footer compacto del panel: KPI mini + sparkline */ .m-live-fleet .fleet-foot{ padding: 12px 18px; border-top: 1px solid rgba(255,255,255,.06); display: flex; align-items: center; justify-content: space-between; gap: 14px; background: rgba(5,6,10,.25); } .m-live-fleet .kpi-mini{ display: flex; flex-direction: column; gap: 3px; } .m-live-fleet .kpi-mini .kn{ font-family: 'Inter', system-ui, sans-serif; font-size: 26px; font-weight: 800; letter-spacing: -.02em; background: linear-gradient(135deg, #E4B56B, #22d3ee); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-variant-numeric: tabular-nums; line-height: 1; } .m-live-fleet .kpi-mini .kl{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9px; color: var(--muted, #8a8fa3); letter-spacing: .14em; text-transform: uppercase; } .m-live-fleet .kpi-spark-wrap{ width: 130px; height: 40px; position: relative; } /* ---------------------------------------------------------------- LIVE WIDGETS — fila bajo el strip con eventos/min, top 5, servicios. Look glass por defecto (moderno); google-theme.css aplica Material. ---------------------------------------------------------------- */ .m-live-widgets{ display: none; } html[data-style="moderno"] .m-live-widgets, html[data-style="google"] .m-live-widgets{ display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 16px; padding: 0 var(--s-4, 32px) 18px; margin: 0 auto; max-width: 1800px; align-items: stretch; } /* Modal "TIEMPO REAL · Plan Pro" — aparece la primera vez que se entra a la home de un sector con modo live activo. */ .m-pro-modal{ position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; animation: m-pro-in .35s cubic-bezier(.2,.8,.2,1); } .m-pro-modal.closing{ animation: m-pro-out .22s ease-in forwards; } @keyframes m-pro-in { from{ opacity: 0; } to { opacity: 1; } } @keyframes m-pro-out { from{ opacity: 1; } to { opacity: 0; } } .m-pro-backdrop{ position: absolute; inset: 0; background: rgba(5,6,10,.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: pointer; } .m-pro-dialog{ position: relative; background: linear-gradient(160deg, rgba(20,24,38,.95), rgba(10,12,20,.98)); border: 1px solid rgba(244,114,182,.30); border-radius: 20px; max-width: 480px; width: 100%; padding: 32px 32px 28px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(228,181,107,.15) inset, 0 0 80px -10px rgba(244,114,182,.30); animation: m-pro-pop .45s cubic-bezier(.2,.8,.2,1); } @keyframes m-pro-pop { from{ opacity: 0; transform: translateY(20px) scale(.96); } to { opacity: 1; transform: none; } } .m-pro-close{ position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 8px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); color: var(--muted, #8a8fa3); font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; font-family: 'Inter', sans-serif; font-weight: 400; transition: all .15s; } .m-pro-close:hover{ background: rgba(255,255,255,.10); color: #fff; border-color: rgba(244,114,182,.40); } .m-pro-pill{ display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; background: linear-gradient(135deg, rgba(244,114,182,.20), rgba(228,181,107,.20)); border: 1px solid rgba(244,114,182,.40); color: #f472b6; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; } .m-pro-pill .m-pro-dot{ width: 6px; height: 6px; border-radius: 50%; background: #f43f5e; box-shadow: 0 0 8px #f43f5e; animation: m-pulse 1.4s infinite; } .m-pro-title{ font-family: 'Inter', system-ui, sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -.025em; color: #fff; margin-bottom: 12px; line-height: 1.2; } .m-pro-title em{ font-style: normal; background: linear-gradient(135deg, #f472b6, #E4B56B); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .m-pro-desc{ font-family: 'Inter', system-ui, sans-serif; font-size: 14px; color: var(--text-dim, #cdd2e2); line-height: 1.5; margin-bottom: 18px; } .m-pro-desc strong{ color: #fff; font-weight: 700; } .m-pro-feats{ list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 6px; } .m-pro-feats li{ font-family: 'Inter', system-ui, sans-serif; font-size: 12.5px; color: var(--text-dim, #cdd2e2); padding-left: 22px; position: relative; } .m-pro-feats li::before{ content: '✓'; position: absolute; left: 4px; top: 0; color: #10b981; font-weight: 700; font-family: 'Inter', sans-serif; } .m-pro-actions{ display: flex; gap: 10px; flex-wrap: wrap; } .m-pro-btn{ flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 18px; border-radius: 10px; font-family: 'Inter', system-ui, sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; border: 1px solid transparent; transition: all .2s; white-space: nowrap; } .m-pro-btn.ghost{ background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); color: var(--text-dim, #cdd2e2); } .m-pro-btn.ghost:hover{ background: rgba(255,255,255,.08); color: #fff; } .m-pro-btn.primary{ background: linear-gradient(135deg, #f472b6, #E4B56B); color: #fff; box-shadow: 0 6px 20px -4px rgba(244,114,182,.50); } .m-pro-btn.primary:hover{ filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 10px 28px -4px rgba(244,114,182,.65); } /* Google flavor */ html[data-style="google"] .m-pro-backdrop{ background: rgba(60,64,67,.55); } html[data-style="google"] .m-pro-dialog{ background: #fff; border-color: var(--line); box-shadow: var(--g-shadow-3); } html[data-style="google"] .m-pro-close{ background: var(--g-divider); border-color: var(--line); color: var(--muted); } html[data-style="google"] .m-pro-close:hover{ background: #e8eaed; color: var(--text); } html[data-style="google"] .m-pro-pill{ background: var(--g-blue-soft); border: 0; color: var(--g-blue); font-family: var(--f-ui); letter-spacing: 0; text-transform: none; font-weight: 600; } html[data-style="google"] .m-pro-pill .m-pro-dot{ background: var(--g-red); } html[data-style="google"] .m-pro-title{ color: var(--text); font-family: 'Google Sans Display', sans-serif; font-weight: 500; } html[data-style="google"] .m-pro-title em{ background: none; -webkit-text-fill-color: var(--accent); color: var(--accent); } html[data-style="google"] .m-pro-desc{ color: var(--text-dim); } html[data-style="google"] .m-pro-desc strong{ color: var(--text); } html[data-style="google"] .m-pro-feats li{ color: var(--text-dim); } html[data-style="google"] .m-pro-feats li::before{ color: var(--g-green); } html[data-style="google"] .m-pro-btn.ghost{ background: #fff; border-color: var(--line); color: var(--text); } html[data-style="google"] .m-pro-btn.ghost:hover{ background: var(--row-hover); } html[data-style="google"] .m-pro-btn.primary{ background: var(--accent); box-shadow: var(--g-shadow-1); } html[data-style="google"] .m-pro-btn.primary:hover{ background: var(--accent-deep); box-shadow: var(--g-shadow-2); filter: none; } /* Cuando hay catálogo de rutas aparte (logística), la fila widgets es 2 cols */ html[data-style="moderno"] .m-live-widgets.has-2cols, html[data-style="google"] .m-live-widgets.has-2cols{ grid-template-columns: 1fr 1.2fr; } /* Sección dedicada al catálogo de rutas (full-width, debajo de widgets) */ .m-routes-panel{ display: none; } html[data-style="moderno"] .m-routes-panel, html[data-style="google"] .m-routes-panel{ display: block; padding: 0 var(--s-4, 32px) 18px; margin: 0 auto; max-width: 1800px; } html[data-style="moderno"] .m-routes-panel .m-widget, html[data-style="google"] .m-routes-panel .m-widget{ min-height: 0; max-height: none; } html[data-style="moderno"] .m-routes-panel .routes-list, html[data-style="google"] .m-routes-panel .routes-list{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 14px; max-height: 480px; overflow-y: auto; padding: 12px 16px 16px; } @media (max-width: 1100px){ html[data-style="moderno"] .m-routes-panel .routes-list, html[data-style="google"] .m-routes-panel .routes-list{ grid-template-columns: 1fr; } } html[data-style="moderno"] .m-routes-panel .route-row, html[data-style="google"] .m-routes-panel .route-row{ margin-bottom: 0; } @media (max-width: 1280px){ html[data-style="moderno"] .m-live-widgets, html[data-style="google"] .m-live-widgets{ grid-template-columns: 1fr 1fr; } html[data-style="moderno"] .m-live-widgets .w-status, html[data-style="google"] .m-live-widgets .w-status{ grid-column: 1 / -1; } } @media (max-width: 800px){ html[data-style="moderno"] .m-live-widgets, html[data-style="google"] .m-live-widgets{ grid-template-columns: 1fr; padding: 0 12px 12px; } } .m-widget{ background: rgba(20,24,38,.55); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); display: flex; flex-direction: column; min-height: 240px; position: relative; overflow: hidden; } .m-widget::after{ content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(228,181,107,.6), rgba(34,211,238,.6), transparent); pointer-events: none; } .m-widget .head{ padding: 14px 18px 12px; border-bottom: 1px solid rgba(255,255,255,.06); display: flex; align-items: center; gap: 10px; } .m-widget .head h4{ font-family: 'Inter', system-ui, sans-serif; font-size: 13px; font-weight: 600; color: var(--text, #f5f7ff); display: flex; align-items: center; gap: 8px; } .m-widget .head h4 .dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--m-green, #10b981); box-shadow: 0 0 10px var(--m-green, #10b981); animation: m-pulse 1.6s infinite; } .m-widget .head .meta{ margin-left: auto; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; color: var(--muted, #8a8fa3); } .m-widget .chart-wrap{ height: 130px; padding: 8px 18px 16px; position: relative; flex: 0 0 130px; } .m-widget .chart-wrap canvas{ display: block; } /* Flow bars CSS-only (sin Chart.js) */ .m-widget .flow-bars{ display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; padding: 4px 18px 6px; height: 110px; align-items: end; } .m-widget .flow-bar{ display: block; background: linear-gradient(180deg, #22d3ee, #E4B56B); border-radius: 4px 4px 0 0; height: var(--h, 0%); min-height: 4px; transition: height .35s cubic-bezier(.2,.8,.2,1); opacity: .80; } .m-widget .flow-bar.current{ background: linear-gradient(180deg, #f472b6, #E4B56B); opacity: 1; box-shadow: 0 0 12px rgba(244,114,182,.5), 0 0 4px rgba(244,114,182,.6); } .m-widget .flow-axis{ display: flex; justify-content: space-between; padding: 0 18px 14px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9.5px; color: var(--muted-2, #5a5e72); letter-spacing: .08em; } /* Contador grande del flow widget: número + delta */ .m-widget .flow-counter{ display: flex; align-items: baseline; gap: 8px; padding: 10px 18px 4px; font-family: 'Inter', system-ui, sans-serif; } .m-widget .flow-counter .flow-num{ font-size: 38px; font-weight: 800; letter-spacing: -.03em; line-height: 1; background: linear-gradient(135deg, #E4B56B, #22d3ee); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-variant-numeric: tabular-nums; } .m-widget .flow-counter .flow-unit{ font-size: 12px; color: var(--muted, #8a8fa3); font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .08em; } .m-widget .flow-counter .flow-delta{ margin-left: auto; font-size: 11px; font-weight: 600; font-family: 'JetBrains Mono', ui-monospace, monospace; color: var(--muted, #8a8fa3); } .m-widget .flow-counter .flow-delta.up{ color: #10b981; } .m-widget .flow-counter .flow-delta.down{ color: #f43f5e; } /* Catálogo de rutas (logística) */ .m-widget .routes-list{ flex: 1; overflow-y: auto; padding: 8px 14px 14px; scrollbar-width: thin; scrollbar-color: rgba(228,181,107,.4) transparent; } .m-widget .routes-list::-webkit-scrollbar{ width: 6px; } .m-widget .routes-list::-webkit-scrollbar-thumb{ background: linear-gradient(180deg, rgba(228,181,107,.5), rgba(34,211,238,.4)); border-radius: 999px; } .route-row{ background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.05); border-radius: 10px; padding: 10px 12px; margin-bottom: 6px; transition: background .18s, border-color .18s; } .route-row.active{ background: rgba(34,211,238,.08); border-color: rgba(34,211,238,.30); } .route-row .route-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; } .route-row .route-name{ font-size: 12.5px; color: var(--text-dim, #cdd2e2); font-family: 'Inter', system-ui, sans-serif; } .route-row .route-name strong{ color: #fff; font-weight: 600; } .route-row .route-name .arrow{ color: #22d3ee; font-weight: 700; margin: 0 2px; } .route-row .route-eta{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 0 8px rgba(34,211,238,.4); } .route-row .route-meta{ display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--muted, #8a8fa3); font-family: 'JetBrains Mono', ui-monospace, monospace; } .route-row .route-meta .sep{ color: var(--muted-2, #5a5e72); } .route-row .route-meta .km{ color: var(--text-dim, #cdd2e2); } .route-row .route-meta .active-pill{ display: inline-flex; align-items: center; gap: 5px; color: var(--muted, #8a8fa3); } .route-row.active .route-meta .active-pill{ color: #22d3ee; font-weight: 600; } .route-row .route-meta .active-pill .rdot{ width: 6px; height: 6px; border-radius: 50%; background: #5a5e72; box-shadow: none; } .route-row.active .route-meta .active-pill .rdot{ background: #22d3ee; box-shadow: 0 0 8px #22d3ee; animation: m-pulse 1.6s infinite; } .route-row .route-meta .done{ color: var(--muted, #8a8fa3); } .route-row .route-meta.sub{ margin-top: 3px; } .route-row .route-meta .cost{ color: var(--text-dim, #cdd2e2); } .route-row .route-meta .ontime{ color: var(--text-dim, #cdd2e2); } .route-row .route-meta .ontime.good{ color: #10b981; } .route-row .route-meta .ontime.warn{ color: #facc15; } .route-row .route-meta .next{ color: var(--muted, #8a8fa3); } /* ---------------------------------------------------------------- ROOMS PANEL — plano del hotel (full-width, debajo del strip). 5 plantas × 24 habitaciones, color por estado. ---------------------------------------------------------------- */ .m-rooms-panel{ display: none; } html[data-style="moderno"] .m-rooms-panel, html[data-style="google"] .m-rooms-panel{ display: block; padding: 0 var(--s-4, 32px) 18px; margin: 0 auto; max-width: 1800px; } html[data-style="moderno"] .m-rooms-panel .m-widget, html[data-style="google"] .m-rooms-panel .m-widget{ min-height: 0; max-height: none; } html[data-style="moderno"] .w-rooms .head .meta, html[data-style="google"] .w-rooms .head .meta{ display: inline-flex; flex-wrap: wrap; gap: 6px; } .w-rooms .r-chip{ display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9.5px; font-weight: 600; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: var(--text-dim, #cdd2e2); } .w-rooms .r-chip .cdot{ width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; } .w-rooms .r-chip.s-occupied { color: #22d3ee; border-color: rgba(34,211,238,.30); } .w-rooms .r-chip.s-checkout { color: #10b981; border-color: rgba(16,185,129,.30); } .w-rooms .r-chip.s-cleaning { color: #facc15; border-color: rgba(250,204,21,.30); } .w-rooms .r-chip.s-available{ color: #cdd2e2; border-color: rgba(255,255,255,.15); } .w-rooms .r-chip.occupancy { color: #f472b6; border-color: rgba(244,114,182,.30); font-weight: 700; } .rooms-grid{ padding: 14px 18px 6px; display: flex; flex-direction: column; gap: 8px; } .floor-row{ display: grid; grid-template-columns: 90px 1fr; gap: 12px; align-items: center; } .floor-label{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; font-weight: 600; color: var(--muted, #8a8fa3); letter-spacing: .12em; text-transform: uppercase; text-align: right; } .floor-rooms{ display: grid; grid-template-columns: repeat(24, 1fr); gap: 4px; } .room-cell{ aspect-ratio: 1.15 / 1; min-height: 30px; border-radius: 6px; display: grid; place-items: center; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9.5px; font-weight: 600; cursor: pointer; transition: transform .15s, box-shadow .15s, filter .15s; position: relative; overflow: hidden; } .room-cell:hover{ transform: scale(1.18); z-index: 5; box-shadow: 0 0 0 2px rgba(255,255,255,.5), 0 8px 20px rgba(0,0,0,.5); } .room-cell .room-num{ position: relative; z-index: 1; } .room-cell.s-occupied{ background: linear-gradient(135deg, #22d3ee, #E4B56B); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.15); } .room-cell.s-checkout{ background: linear-gradient(135deg, #10b981, #06b6d4); color: #fff; animation: m-pulse-soft 2s infinite; } .room-cell.s-cleaning{ background: linear-gradient(135deg, #facc15, #fb923c); color: #1a1a1a; } .room-cell.s-available{ background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); color: var(--muted, #8a8fa3); } .room-cell.s-noshow{ background: linear-gradient(135deg, #f43f5e, #f472b6); color: #fff; } .room-cell.s-outservice{ background: rgba(0,0,0,.35); border: 1px dashed rgba(255,255,255,.15); color: var(--muted-2, #5a5e72); } .rooms-legend{ display: flex; flex-wrap: wrap; gap: 14px; padding: 10px 18px 16px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; color: var(--muted, #8a8fa3); letter-spacing: .04em; } .rooms-legend .lg-item{ display: inline-flex; align-items: center; gap: 6px; } .rooms-legend .lg-dot{ display: inline-block; width: 12px; height: 12px; border-radius: 3px; } .rooms-legend .lg-dot.s-occupied { background: linear-gradient(135deg, #22d3ee, #E4B56B); } .rooms-legend .lg-dot.s-checkout { background: linear-gradient(135deg, #10b981, #06b6d4); } .rooms-legend .lg-dot.s-cleaning { background: linear-gradient(135deg, #facc15, #fb923c); } .rooms-legend .lg-dot.s-available{ background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.20); } .rooms-legend .lg-dot.s-noshow { background: linear-gradient(135deg, #f43f5e, #f472b6); } .rooms-legend .lg-dot.s-outservice{ background: rgba(0,0,0,.4); border: 1px dashed rgba(255,255,255,.20); } @media (max-width: 1100px){ .floor-rooms{ grid-template-columns: repeat(12, 1fr); } .floor-row{ grid-template-columns: 70px 1fr; } } @media (max-width: 700px){ .floor-rooms{ grid-template-columns: repeat(6, 1fr); } } /* ---------------------------------------------------------------- TABLES PANEL — plano del salón (restauración) Mesas redondas con tamaño según PAX, color por estado. ---------------------------------------------------------------- */ .m-tables-panel{ display: none; } html[data-style="moderno"] .m-tables-panel, html[data-style="google"] .m-tables-panel{ display: block; padding: 0 var(--s-4, 32px) 18px; margin: 0 auto; max-width: 1800px; } html[data-style="moderno"] .m-tables-panel .m-widget, html[data-style="google"] .m-tables-panel .m-widget{ min-height: 0; max-height: none; } html[data-style="moderno"] .w-tables .head .meta, html[data-style="google"] .w-tables .head .meta{ display: inline-flex; flex-wrap: wrap; gap: 6px; } .w-tables .t-chip{ display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9.5px; font-weight: 600; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: var(--text-dim, #cdd2e2); } .w-tables .t-chip .cdot{ width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; } .w-tables .t-chip.s-occupied{ color: #22d3ee; border-color: rgba(34,211,238,.30); } .w-tables .t-chip.s-billing { color: #facc15; border-color: rgba(250,204,21,.30); } .w-tables .t-chip.s-reserved{ color: #a78bfa; border-color: rgba(167,139,250,.30); } .w-tables .t-chip.s-free { color: #cdd2e2; border-color: rgba(255,255,255,.15); } .tables-grid{ padding: 14px 18px 6px; display: flex; flex-direction: column; gap: 14px; } .zone-row{ display: flex; flex-direction: column; gap: 8px; } .zone-label{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 600; color: var(--muted, #8a8fa3); letter-spacing: .14em; text-transform: uppercase; display: flex; align-items: baseline; gap: 8px; } .zone-label small{ font-size: 9.5px; color: var(--muted-2, #5a5e72); font-weight: 400; letter-spacing: 0; text-transform: none; } .zone-tables{ display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .zone-label{ text-align: center; justify-content: center; } .table-cell{ border-radius: 50%; display: grid; place-items: center; font-family: 'JetBrains Mono', ui-monospace, monospace; cursor: pointer; transition: transform .15s, box-shadow .15s; position: relative; text-align: center; flex-shrink: 0; } .table-cell.sz-sm{ width: 56px; height: 56px; } .table-cell.sz-md{ width: 72px; height: 72px; } .table-cell.sz-lg{ width: 88px; height: 88px; } .table-cell.sz-xl{ width: 104px; height: 104px; border-radius: 14px; } .table-cell:hover{ transform: scale(1.08); z-index: 5; box-shadow: 0 0 0 2px rgba(255,255,255,.5), 0 8px 22px rgba(0,0,0,.5); } .table-cell .t-num{ font-size: 13px; font-weight: 700; color: #fff; display: block; line-height: 1; } .table-cell .t-pax{ font-size: 9px; opacity: .85; display: block; margin-top: 1px; letter-spacing: .04em; } .table-cell .t-info{ position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%); font-size: 9px; background: rgba(5,6,10,.85); color: #fff; padding: 1px 6px; border-radius: 3px; white-space: nowrap; font-family: 'JetBrains Mono', monospace; pointer-events: none; } .table-cell.s-occupied{ background: linear-gradient(135deg, #22d3ee, #E4B56B); color: #fff; box-shadow: 0 0 18px rgba(34,211,238,.30), inset 0 1px 0 rgba(255,255,255,.15); } .table-cell.s-billing{ background: linear-gradient(135deg, #facc15, #fb923c); color: #1a1a1a; animation: m-pulse-soft 1.6s infinite; } .table-cell.s-billing .t-num{ color: #1a1a1a; } .table-cell.s-billing .t-pax{ color: #2a2a2a; } .table-cell.s-cleaning{ background: linear-gradient(135deg, #fbbf24, #f97316); color: #1a1a1a; opacity: .85; } .table-cell.s-cleaning .t-num, .table-cell.s-cleaning .t-pax{ color: #1a1a1a; } .table-cell.s-reserved{ background: rgba(167,139,250,.18); border: 1.5px dashed #a78bfa; color: #c4b5fd; } .table-cell.s-reserved .t-num, .table-cell.s-reserved .t-pax{ color: #c4b5fd; } .table-cell.s-free{ background: rgba(255,255,255,.04); border: 1.5px solid rgba(255,255,255,.10); color: var(--muted, #8a8fa3); } .table-cell.s-free .t-num, .table-cell.s-free .t-pax{ color: var(--muted, #8a8fa3); } .table-cell.s-closed{ background: rgba(0,0,0,.4); border: 1.5px dashed rgba(255,255,255,.12); opacity: .55; } .tables-legend{ display: flex; flex-wrap: wrap; gap: 14px; padding: 16px 18px 16px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; color: var(--muted, #8a8fa3); letter-spacing: .04em; } .tables-legend .lg-item{ display: inline-flex; align-items: center; gap: 6px; } .tables-legend .lg-dot{ display: inline-block; width: 12px; height: 12px; border-radius: 50%; } .tables-legend .lg-dot.s-occupied{ background: linear-gradient(135deg, #22d3ee, #E4B56B); } .tables-legend .lg-dot.s-billing { background: linear-gradient(135deg, #facc15, #fb923c); } .tables-legend .lg-dot.s-cleaning{ background: linear-gradient(135deg, #fbbf24, #f97316); opacity:.85; } .tables-legend .lg-dot.s-reserved{ background: rgba(167,139,250,.18); border: 1.5px dashed #a78bfa; } .tables-legend .lg-dot.s-free { background: rgba(255,255,255,.04); border: 1.5px solid rgba(255,255,255,.20); } .tables-legend .lg-dot.s-closed { background: rgba(0,0,0,.4); border: 1.5px dashed rgba(255,255,255,.20); } /* ---------------------------------------------------------------- LINES PANEL — diagrama de planta (industria) 4 líneas L1-L4 con OEE/velocidad/scrap + producto+lote + progress. ---------------------------------------------------------------- */ .m-lines-panel{ display: none; } html[data-style="moderno"] .m-lines-panel, html[data-style="google"] .m-lines-panel{ display: block; padding: 0 var(--s-4, 32px) 18px; margin: 0 auto; max-width: 1800px; } html[data-style="moderno"] .m-lines-panel .m-widget, html[data-style="google"] .m-lines-panel .m-widget{ min-height: 0; max-height: none; } html[data-style="moderno"] .w-lines .head .meta, html[data-style="google"] .w-lines .head .meta{ display: inline-flex; flex-wrap: wrap; gap: 6px; } .w-lines .l-chip{ display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9.5px; font-weight: 600; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: var(--text-dim, #cdd2e2); } .w-lines .l-chip .cdot{ width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; } .w-lines .l-chip.s-producing { color: #10b981; border-color: rgba(16,185,129,.30); } .w-lines .l-chip.s-changeover{ color: #facc15; border-color: rgba(250,204,21,.30); } .w-lines .l-chip.s-breakdown { color: #f43f5e; border-color: rgba(244,63,94,.30); } .w-lines .l-chip.oee { color: #22d3ee; border-color: rgba(34,211,238,.30); font-weight: 700; } .lines-grid{ padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 12px; } .line-row{ background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.06); border-radius: 14px; padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden; transition: background .2s, border-color .2s, box-shadow .2s; } .line-row::before{ /* barra de estado izquierda */ content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: var(--state-color, #5a5e72); box-shadow: 0 0 12px var(--state-color, transparent); } .line-row.s-producing { --state-color: #10b981; } .line-row.s-producing { background: rgba(16,185,129,.06); border-color: rgba(16,185,129,.18); } .line-row.s-changeover { --state-color: #facc15; background: rgba(250,204,21,.06); border-color: rgba(250,204,21,.20); } .line-row.s-breakdown { --state-color: #f43f5e; background: rgba(244,63,94,.07); border-color: rgba(244,63,94,.25); } .line-row.s-maintenance{ --state-color: #E4B56B; background: rgba(228,181,107,.05); border-color: rgba(228,181,107,.18); } .line-row.s-idle { --state-color: #5a5e72; } .line-head{ display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .line-id{ display: flex; align-items: center; gap: 12px; } .line-badge{ font-family: 'Inter', system-ui, sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -.02em; background: var(--state-color, #5a5e72); color: #fff; padding: 6px 12px; border-radius: 8px; min-width: 48px; text-align: center; box-shadow: 0 0 18px color-mix(in oklab, var(--state-color, transparent) 40%, transparent); } .line-titles{ display: flex; flex-direction: column; gap: 3px; } .line-name{ font-family: 'Inter', system-ui, sans-serif; font-size: 14px; font-weight: 600; color: #fff; } .line-state-pill{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; color: var(--state-color, #5a5e72); letter-spacing: .08em; display: inline-flex; align-items: center; gap: 6px; } .line-state-pill .ldot{ width: 6px; height: 6px; border-radius: 50%; background: var(--state-color, currentColor); box-shadow: 0 0 8px var(--state-color, currentColor); animation: m-pulse-soft 1.6s infinite; } .line-metrics{ display: flex; gap: 22px; flex-wrap: wrap; } .line-metrics .metric{ display: flex; flex-direction: column; gap: 2px; align-items: flex-end; } .line-metrics .m-lbl{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9px; color: var(--muted, #8a8fa3); letter-spacing: .12em; text-transform: uppercase; } .line-metrics .m-val{ font-family: 'Inter', system-ui, sans-serif; font-size: 20px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.01em; display: inline-flex; align-items: baseline; } .line-metrics .m-val i{ font-style: normal; font-size: 10px; color: var(--muted, #8a8fa3); margin-left: 3px; font-weight: 500; } .line-product{ display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: rgba(0,0,0,.20); border-radius: 8px; font-family: 'Inter', system-ui, sans-serif; font-size: 12px; color: var(--text-dim, #cdd2e2); flex-wrap: wrap; } .line-product .lp-lbl{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9px; color: var(--muted, #8a8fa3); letter-spacing: .12em; text-transform: uppercase; margin-right: 4px; } .line-product strong{ color: #fff; font-weight: 600; } .line-product .lp-sep{ color: var(--muted-2, #5a5e72); } .line-product .rate-now{ margin-left: auto; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: var(--state-color, #cdd2e2); font-weight: 600; } .line-progress{ height: 8px; background: rgba(255,255,255,.05); border-radius: 4px; overflow: hidden; position: relative; } .line-progress .bar{ height: 100%; background: linear-gradient(90deg, var(--state-color, #5a5e72), color-mix(in oklab, var(--state-color, #fff) 60%, #fff)); transition: width .8s ease-out; border-radius: 4px; box-shadow: 0 0 8px color-mix(in oklab, var(--state-color, transparent) 50%, transparent); } .line-progress .prog-label{ position: absolute; top: 12px; left: 0; right: 0; display: flex; justify-content: space-between; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; color: var(--muted, #8a8fa3); letter-spacing: .04em; } .line-row{ padding-bottom: 32px; /* extra para que el prog-label tenga sitio */ } /* ---------------------------------------------------------------- BAYS PANEL — boxes y elevadores (talleres) 2 zonas (Elevadores / Plazas), tarjetas anchas con vehículo dentro. ---------------------------------------------------------------- */ .m-bays-panel{ display: none; } html[data-style="moderno"] .m-bays-panel, html[data-style="google"] .m-bays-panel{ display: block; padding: 0 var(--s-4, 32px) 18px; margin: 0 auto; max-width: 1800px; } html[data-style="moderno"] .m-bays-panel .m-widget, html[data-style="google"] .m-bays-panel .m-widget{ min-height: 0; max-height: none; } html[data-style="moderno"] .w-bays .head .meta, html[data-style="google"] .w-bays .head .meta{ display: inline-flex; flex-wrap: wrap; gap: 6px; } .w-bays .b-chip{ display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9.5px; font-weight: 600; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: var(--text-dim, #cdd2e2); } .w-bays .b-chip .cdot{ width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; } .w-bays .b-chip.s-occupied{ color: #22d3ee; border-color: rgba(34,211,238,.30); } .w-bays .b-chip.s-waiting { color: #facc15; border-color: rgba(250,204,21,.30); } .w-bays .b-chip.s-washing { color: #10b981; border-color: rgba(16,185,129,.30); } .w-bays .b-chip.s-free { color: #cdd2e2; border-color: rgba(255,255,255,.15); } .bays-grid{ padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 16px; } .bays-zone{ display: flex; flex-direction: column; gap: 10px; } .bays-zone-label{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 600; color: var(--muted, #8a8fa3); letter-spacing: .14em; text-transform: uppercase; display: flex; align-items: baseline; gap: 8px; padding-left: 4px; } .bays-zone-label small{ font-size: 9.5px; color: var(--muted-2, #5a5e72); font-weight: 400; letter-spacing: 0; text-transform: none; } .bays-zone-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media (max-width: 1100px){ .bays-zone-grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px){ .bays-zone-grid{ grid-template-columns: 1fr; } } .bay-cell{ background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 12px 14px; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; min-height: 110px; transition: transform .15s, box-shadow .15s, border-color .15s; } .bay-cell::before{ content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--bay-color, #5a5e72); box-shadow: 0 0 10px var(--bay-color, transparent); } .bay-cell:hover{ transform: translateY(-2px); } .bay-cell.s-occupied{ --bay-color: #22d3ee; background: rgba(34,211,238,.07); border-color: rgba(34,211,238,.20); } .bay-cell.s-waiting { --bay-color: #facc15; background: rgba(250,204,21,.07); border-color: rgba(250,204,21,.25); } .bay-cell.s-washing { --bay-color: #10b981; background: rgba(16,185,129,.06); border-color: rgba(16,185,129,.20); } .bay-cell.s-free { --bay-color: #5a5e72; } .bay-cell.s-closed { --bay-color: #3a3e52; opacity: .55; } .bay-head{ display: flex; align-items: center; justify-content: space-between; gap: 8px; } .bay-id{ display: inline-flex; align-items: center; gap: 6px; font-family: 'Inter', system-ui, sans-serif; font-size: 14px; font-weight: 700; color: #fff; letter-spacing: -.01em; } .bay-id .bay-icon{ display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; background: var(--bay-color, #5a5e72); color: #fff; font-size: 11px; } .bay-state{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9.5px; font-weight: 600; color: var(--bay-color, var(--muted, #8a8fa3)); letter-spacing: .08em; text-transform: uppercase; } .bay-car{ display: flex; flex-direction: column; gap: 1px; } .bay-brand{ font-family: 'Inter', system-ui, sans-serif; font-size: 12.5px; font-weight: 600; color: #fff; } .bay-plate{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: var(--muted, #8a8fa3); letter-spacing: .04em; } .bay-int{ display: flex; flex-direction: column; gap: 3px; margin-top: auto; padding-top: 6px; border-top: 1px dashed rgba(255,255,255,.06); } .bay-int-type{ font-family: 'Inter', system-ui, sans-serif; font-size: 11.5px; color: var(--text-dim, #cdd2e2); } .bay-eta{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; color: #facc15; letter-spacing: .04em; font-weight: 600; } .bay-empty{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; color: var(--muted-2, #5a5e72); letter-spacing: .12em; text-transform: uppercase; margin-top: auto; padding-top: 6px; } /* ---------------------------------------------------------------- CONSULT PANEL — boxes consulta + sala de espera (clínica) ---------------------------------------------------------------- */ .m-consult-panel{ display: none; } html[data-style="moderno"] .m-consult-panel, html[data-style="google"] .m-consult-panel{ display: block; padding: 0 var(--s-4, 32px) 18px; margin: 0 auto; max-width: 1800px; } html[data-style="moderno"] .m-consult-panel .m-widget, html[data-style="google"] .m-consult-panel .m-widget{ min-height: 0; max-height: none; } html[data-style="moderno"] .w-consult .head .meta, html[data-style="google"] .w-consult .head .meta{ display: inline-flex; flex-wrap: wrap; gap: 6px; } .w-consult .c-chip{ display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9.5px; font-weight: 600; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: var(--text-dim, #cdd2e2); } .w-consult .c-chip .cdot{ width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; } .w-consult .c-chip.s-in_consult{ color: #22d3ee; border-color: rgba(34,211,238,.30); } .w-consult .c-chip.s-cleaning { color: #facc15; border-color: rgba(250,204,21,.30); } .w-consult .c-chip.s-free { color: #cdd2e2; border-color: rgba(255,255,255,.15); } .w-consult .c-chip.waiting { color: #f472b6; border-color: rgba(244,114,182,.30); font-weight: 700; } .consult-grid{ padding: 14px 18px 18px; display: grid; grid-template-columns: 1fr 320px; gap: 14px; } @media (max-width: 1100px){ .consult-grid{ grid-template-columns: 1fr; } } .consult-boxes{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } @media (max-width: 800px){ .consult-boxes{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 500px){ .consult-boxes{ grid-template-columns: 1fr; } } .consult-box{ background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; position: relative; overflow: hidden; min-height: 130px; transition: transform .15s, box-shadow .15s; } .consult-box::before{ content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--cb-color, #5a5e72); box-shadow: 0 0 10px var(--cb-color, transparent); } .consult-box:hover{ transform: translateY(-2px); } .consult-box.s-in_consult{ --cb-color: #22d3ee; background: rgba(34,211,238,.06); border-color: rgba(34,211,238,.18); } .consult-box.s-cleaning { --cb-color: #facc15; background: rgba(250,204,21,.05); border-color: rgba(250,204,21,.18); } .consult-box.s-free { --cb-color: #5a5e72; } .consult-box.s-closed { --cb-color: #3a3e52; opacity: .55; } .cb-head{ display: flex; align-items: center; justify-content: space-between; } .cb-id{ font-family: 'Inter', system-ui, sans-serif; font-size: 16px; font-weight: 800; color: #fff; letter-spacing: -.01em; background: var(--cb-color, #5a5e72); padding: 4px 10px; border-radius: 6px; min-width: 36px; text-align: center; } .cb-state{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9.5px; font-weight: 600; color: var(--cb-color, var(--muted, #8a8fa3)); letter-spacing: .08em; text-transform: uppercase; } .cb-pro{ display: flex; flex-direction: column; gap: 1px; } .cb-dr{ font-family: 'Inter', system-ui, sans-serif; font-size: 12.5px; font-weight: 600; color: #fff; } .cb-spec{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; color: var(--muted, #8a8fa3); letter-spacing: .04em; } .cb-patient{ margin-top: auto; padding-top: 8px; border-top: 1px dashed rgba(255,255,255,.06); display: flex; flex-direction: column; gap: 2px; } .cb-pat-name{ font-family: 'Inter', system-ui, sans-serif; font-size: 12px; font-weight: 600; color: var(--text-dim, #cdd2e2); } .cb-treatment{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; color: var(--cb-color, #cdd2e2); letter-spacing: .04em; } .cb-empty{ margin-top: auto; padding-top: 8px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; color: var(--muted-2, #5a5e72); letter-spacing: .12em; text-transform: uppercase; } /* Sala de espera */ .consult-waiting{ background: rgba(244,114,182,.05); border: 1px solid rgba(244,114,182,.20); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; max-height: 460px; overflow: hidden; } .cw-head{ display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid rgba(244,114,182,.18); margin-bottom: 10px; } .cw-title{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 600; color: #f472b6; letter-spacing: .14em; text-transform: uppercase; } .cw-count{ font-family: 'Inter', system-ui, sans-serif; font-size: 24px; font-weight: 800; color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .cw-list{ flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; scrollbar-width: thin; scrollbar-color: rgba(244,114,182,.4) transparent; } .cw-list::-webkit-scrollbar{ width: 5px; } .cw-list::-webkit-scrollbar-thumb{ background: rgba(244,114,182,.4); border-radius: 999px; } .cw-row{ display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; padding: 8px 10px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); border-radius: 8px; align-items: center; animation: m-row-in .35s cubic-bezier(.2,.8,.2,1); } .cw-name{ font-family: 'Inter', system-ui, sans-serif; font-size: 12.5px; font-weight: 600; color: #fff; } .cw-time{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; font-weight: 700; color: var(--text-dim, #cdd2e2); font-variant-numeric: tabular-nums; } .cw-meta{ grid-column: 1 / -1; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; color: var(--muted, #8a8fa3); display: inline-flex; gap: 6px; align-items: center; } .cw-appt{ color: var(--text-dim, #cdd2e2); } .cw-sep{ color: var(--muted-2, #5a5e72); } .cw-row.urgent{ background: rgba(244,63,94,.08); border-color: rgba(244,63,94,.30); } .cw-row.urgent .cw-time{ color: #f43f5e; text-shadow: 0 0 10px rgba(244,63,94,.5); } .cw-empty{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; color: var(--muted-2, #5a5e72); letter-spacing: .12em; text-transform: uppercase; text-align: center; padding: 20px 0; } /* ---------------------------------------------------------------- FUNNEL PANEL — pipeline inmobiliaria realtime ---------------------------------------------------------------- */ .m-funnel-panel{ display: none; } html[data-style="moderno"] .m-funnel-panel, html[data-style="google"] .m-funnel-panel{ display: block; padding: 0 var(--s-4, 32px) 18px; margin: 0 auto; max-width: 1800px; } html[data-style="moderno"] .m-funnel-panel .m-widget, html[data-style="google"] .m-funnel-panel .m-widget{ min-height: 0; max-height: none; } html[data-style="moderno"] .w-funnel .head .meta, html[data-style="google"] .w-funnel .head .meta{ display: inline-flex; flex-wrap: wrap; gap: 6px; } .w-funnel .f-chip{ display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; font-weight: 600; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: var(--text-dim, #cdd2e2); } .w-funnel .f-chip.pipeline{ color: #10b981; border-color: rgba(16,185,129,.30); font-weight: 700; } .funnel-grid{ padding: 18px 22px 22px; display: grid; grid-template-columns: 1fr 360px; gap: 24px; } @media (max-width: 1100px){ .funnel-grid{ grid-template-columns: 1fr; } } .funnel-stages{ display: flex; flex-direction: column; gap: 14px; align-items: center; } .fn-stage{ width: 100%; max-width: 720px; display: flex; flex-direction: column; gap: 4px; position: relative; transition: transform .2s; } .fn-stage.flash{ transform: scale(1.02); } .fn-stage.flash .fn-bar{ box-shadow: 0 0 32px var(--c, currentColor), 0 0 0 1px var(--c, currentColor) inset; } .fn-row{ display: flex; align-items: baseline; justify-content: space-between; font-family: 'Inter', system-ui, sans-serif; } .fn-name{ font-size: 12px; font-weight: 600; color: var(--c, var(--text, #f5f7ff)); letter-spacing: .04em; text-transform: uppercase; } .fn-stats{ display: inline-flex; gap: 14px; align-items: baseline; font-variant-numeric: tabular-nums; } .fn-count{ font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -.02em; font-family: 'Inter', sans-serif; } .fn-conv{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; color: var(--muted, #8a8fa3); letter-spacing: .04em; } .fn-bar-wrap{ width: 100%; height: 18px; background: rgba(255,255,255,.04); border-radius: 6px; overflow: hidden; } .fn-bar{ height: 100%; background: linear-gradient(90deg, var(--c, #5a5e72), color-mix(in oklab, var(--c, #fff) 60%, #fff)); border-radius: 6px; transition: width .55s cubic-bezier(.2,.8,.2,1), box-shadow .25s; box-shadow: 0 0 12px color-mix(in oklab, var(--c, transparent) 40%, transparent); margin-left: auto; margin-right: auto; position: relative; } /* Pipeline en vivo (lateral) */ .funnel-recent{ background: rgba(0,0,0,.20); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; max-height: 420px; overflow: hidden; } .fr-head{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 600; color: var(--muted, #8a8fa3); letter-spacing: .14em; text-transform: uppercase; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.06); } .fr-list{ flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; scrollbar-width: thin; scrollbar-color: rgba(228,181,107,.4) transparent; } .fr-list::-webkit-scrollbar{ width: 5px; } .fr-list::-webkit-scrollbar-thumb{ background: rgba(228,181,107,.4); border-radius: 999px; } .fr-row{ display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.05); border-radius: 8px; font-family: 'Inter', system-ui, sans-serif; font-size: 11.5px; animation: m-row-in .35s cubic-bezier(.2,.8,.2,1); } .fr-dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--c, #5a5e72); box-shadow: 0 0 8px var(--c, transparent); } .fr-text{ color: var(--text-dim, #cdd2e2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fr-time{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; color: var(--muted-2, #5a5e72); font-variant-numeric: tabular-nums; } .fr-empty{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; color: var(--muted-2, #5a5e72); letter-spacing: .12em; text-transform: uppercase; text-align: center; padding: 20px 0; } /* ---------------------------------------------------------------- AUCTION PANEL — lonja en directo (pesca) Tabla densa estilo ticker bursátil con flash al actualizar precio. ---------------------------------------------------------------- */ .m-auction-panel{ display: none; } html[data-style="moderno"] .m-auction-panel, html[data-style="google"] .m-auction-panel{ display: block; padding: 0 var(--s-4, 32px) 18px; margin: 0 auto; max-width: 1800px; } html[data-style="moderno"] .m-auction-panel .m-widget, html[data-style="google"] .m-auction-panel .m-widget{ min-height: 0; max-height: none; } html[data-style="moderno"] .w-auction .head .meta, html[data-style="google"] .w-auction .head .meta{ display: inline-flex; flex-wrap: wrap; gap: 6px; } .w-auction .a-chip{ display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; font-weight: 600; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: var(--text-dim, #cdd2e2); } .auction-table{ padding: 6px 18px 16px; display: flex; flex-direction: column; } .au-thead, .au-row{ display: grid; grid-template-columns: 2fr 1.2fr 1fr 1.3fr 0.8fr 1.4fr; gap: 10px; align-items: center; padding: 9px 12px; font-variant-numeric: tabular-nums; } .au-thead{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9.5px; color: var(--muted, #8a8fa3); letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,.08); padding-bottom: 8px; margin-bottom: 4px; } .au-row{ border-radius: 6px; font-family: 'Inter', system-ui, sans-serif; font-size: 12.5px; color: var(--text-dim, #cdd2e2); transition: background .8s, box-shadow .8s; } .au-row:nth-child(even){ background: rgba(255,255,255,.015); } .au-row:hover{ background: rgba(228,181,107,.06); } .au-cell.num{ text-align: right; font-family: 'JetBrains Mono', ui-monospace, monospace; } .au-cell.sp{ display: flex; align-items: center; gap: 8px; } .au-icon{ font-size: 16px; } .au-name{ font-family: 'Inter', system-ui, sans-serif; font-weight: 600; color: #fff; } .au-cell.price{ color: #fff; font-weight: 700; font-size: 13px; } .au-cell.delta{ font-weight: 700; } .au-cell.delta.up{ color: #10b981; } .au-cell.delta.down{ color: #f43f5e; } .au-cell.value{ color: #facc15; font-weight: 700; } .au-cell.lots{ color: var(--muted, #8a8fa3); } .au-row.flash-up{ background: rgba(16,185,129,.18); box-shadow: inset 4px 0 0 #10b981; } .au-row.flash-down{ background: rgba(244,63,94,.18); box-shadow: inset 4px 0 0 #f43f5e; } @media (max-width: 900px){ .au-thead, .au-row{ grid-template-columns: 1.6fr 1fr 0.8fr 1fr; font-size: 11px; } .au-cell.lots, .au-cell.value{ display: none; } } /* ---------------------------------------------------------------- WORKS PANEL — tablero de obras (construcción) ---------------------------------------------------------------- */ .m-works-panel{ display: none; } html[data-style="moderno"] .m-works-panel, html[data-style="google"] .m-works-panel{ display: block; padding: 0 var(--s-4, 32px) 18px; margin: 0 auto; max-width: 1800px; } html[data-style="moderno"] .m-works-panel .m-widget, html[data-style="google"] .m-works-panel .m-widget{ min-height: 0; max-height: none; } html[data-style="moderno"] .w-works .head .meta, html[data-style="google"] .w-works .head .meta{ display: inline-flex; flex-wrap: wrap; gap: 6px; } .w-works .wk-chip{ display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; font-weight: 600; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: var(--text-dim, #cdd2e2); } .w-works .wk-chip .cdot{ width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; } .w-works .wk-chip.s-on_track{ color: #10b981; border-color: rgba(16,185,129,.30); } .w-works .wk-chip.s-delayed { color: #facc15; border-color: rgba(250,204,21,.30); } .w-works .wk-chip.s-critical{ color: #f43f5e; border-color: rgba(244,63,94,.30); } .w-works .wk-chip.cert { color: #22d3ee; border-color: rgba(34,211,238,.30); font-weight: 700; } .works-grid{ padding: 14px 18px 18px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } @media (min-width: 1400px){ .works-grid{ grid-template-columns: repeat(3, 1fr); } } @media (max-width: 800px){ .works-grid{ grid-template-columns: 1fr; } } .work-card{ background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.06); border-radius: 14px; padding: 14px 16px; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; min-height: 220px; transition: transform .15s, box-shadow .15s, border-color .2s; } .work-card::before{ content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: var(--w-color, #5a5e72); box-shadow: 0 0 12px var(--w-color, transparent); } .work-card.s-on_track{ --w-color: #10b981; } .work-card.s-delayed { --w-color: #facc15; background: rgba(250,204,21,.04); border-color: rgba(250,204,21,.18); } .work-card.s-critical{ --w-color: #f43f5e; background: rgba(244,63,94,.06); border-color: rgba(244,63,94,.25); } .work-card.flash{ border-color: var(--w-color); box-shadow: 0 0 24px color-mix(in oklab, var(--w-color, transparent) 40%, transparent); } .work-card:hover{ transform: translateY(-2px); } .wk-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .wk-title{ display: flex; flex-direction: column; gap: 2px; } .wk-name{ font-family: 'Inter', system-ui, sans-serif; font-size: 14px; font-weight: 700; color: #fff; letter-spacing: -.01em; } .wk-meta{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; color: var(--muted, #8a8fa3); letter-spacing: .04em; } .wk-state{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9.5px; font-weight: 700; color: var(--w-color, var(--muted)); background: color-mix(in oklab, var(--w-color, transparent) 12%, transparent); border: 1px solid color-mix(in oklab, var(--w-color, transparent) 35%, transparent); padding: 3px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; } .wk-chapter{ display: flex; align-items: baseline; gap: 8px; font-size: 12px; color: var(--text-dim, #cdd2e2); font-family: 'Inter', system-ui, sans-serif; } .wk-chap-lbl{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9.5px; color: var(--muted, #8a8fa3); letter-spacing: .12em; text-transform: uppercase; } .wk-chap-name{ flex: 1; font-weight: 600; color: #fff; } .wk-chap-pct{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 700; color: var(--w-color, #fff); } .wk-progress{ position: relative; margin-top: 4px; } .wk-progress .wk-bar{ height: 8px; background: linear-gradient(90deg, var(--w-color, #5a5e72), color-mix(in oklab, var(--w-color, #fff) 60%, #fff)); border-radius: 4px; transition: width .65s ease-out; box-shadow: 0 0 10px color-mix(in oklab, var(--w-color, transparent) 50%, transparent); } .wk-progress::before{ content: ''; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: rgba(255,255,255,.05); border-radius: 4px; z-index: -1; } .wk-prog-label{ display: flex; justify-content: space-between; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; color: var(--muted, #8a8fa3); margin-top: 6px; letter-spacing: .04em; } .wk-foot{ display: flex; flex-wrap: wrap; gap: 8px 14px; padding-top: 8px; border-top: 1px dashed rgba(255,255,255,.06); font-family: 'Inter', system-ui, sans-serif; font-size: 11px; color: var(--text-dim, #cdd2e2); } .wk-foot > span{ display: inline-flex; align-items: center; gap: 6px; } .wk-milestone{ font-weight: 600; } .wk-milestone.soon{ color: #facc15; } .wk-milestone.urgent{ color: #f43f5e; animation: m-pulse-soft 1.5s infinite; } .wk-milestone .ml-icon{ font-size: 13px; } .wk-crew, .wk-cert{ color: var(--muted, #8a8fa3); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; } .wk-cert{ margin-left: auto; color: #22d3ee; font-weight: 600; } /* ---------------------------------------------------------------- STORES PANEL — monitor de tiendas (retail) ---------------------------------------------------------------- */ .m-stores-panel{ display: none; } html[data-style="moderno"] .m-stores-panel, html[data-style="google"] .m-stores-panel{ display: block; padding: 0 var(--s-4, 32px) 18px; margin: 0 auto; max-width: 1800px; } html[data-style="moderno"] .m-stores-panel .m-widget, html[data-style="google"] .m-stores-panel .m-widget{ min-height: 0; max-height: none; } html[data-style="moderno"] .w-stores .head .meta, html[data-style="google"] .w-stores .head .meta{ display: inline-flex; flex-wrap: wrap; gap: 6px; } .w-stores .st-chip{ display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; font-weight: 600; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: var(--text-dim, #cdd2e2); } .w-stores .st-chip .cdot{ width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; } .w-stores .st-chip.s-open { color: #10b981; border-color: rgba(16,185,129,.30); } .w-stores .st-chip.s-promo{ color: #f472b6; border-color: rgba(244,114,182,.30); } .w-stores .st-chip.s-busy { color: #facc15; border-color: rgba(250,204,21,.30); } .w-stores .st-chip.total { color: #22d3ee; border-color: rgba(34,211,238,.30); font-weight: 700; } .stores-grid{ padding: 14px 18px 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media (max-width: 1280px){ .stores-grid{ grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px){ .stores-grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px){ .stores-grid{ grid-template-columns: 1fr; } } .store-card{ background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; position: relative; overflow: hidden; transition: transform .15s, border-color .2s, box-shadow .2s; } .store-card::before{ content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--st-color, #5a5e72); box-shadow: 0 0 10px var(--st-color, transparent); } .store-card.s-open { --st-color: #10b981; } .store-card.s-promo { --st-color: #f472b6; background: rgba(244,114,182,.06); border-color: rgba(244,114,182,.20); } .store-card.s-busy { --st-color: #facc15; background: rgba(250,204,21,.05); border-color: rgba(250,204,21,.20); } .store-card.s-closed{ --st-color: #5a5e72; opacity: .55; } .store-card.flash{ border-color: var(--st-color); box-shadow: 0 0 22px color-mix(in oklab, var(--st-color, transparent) 40%, transparent); } .sc-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .sc-title{ display: flex; flex-direction: column; gap: 1px; min-width: 0; } .sc-name{ font-family: 'Inter', system-ui, sans-serif; font-size: 13px; font-weight: 700; color: #fff; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sc-city{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9.5px; color: var(--muted, #8a8fa3); letter-spacing: .04em; } .sc-state{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 8.5px; font-weight: 700; color: var(--st-color, var(--muted)); background: color-mix(in oklab, var(--st-color, transparent) 10%, transparent); border: 1px solid color-mix(in oklab, var(--st-color, transparent) 30%, transparent); padding: 2px 7px; border-radius: 4px; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; } .sc-sales{ display: flex; align-items: baseline; gap: 8px; padding-top: 4px; } .sc-amt{ font-family: 'Inter', system-ui, sans-serif; font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .sc-delta{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 700; } .sc-delta.up{ color: #10b981; } .sc-delta.down{ color: #f43f5e; } .sc-stats{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding-top: 4px; border-top: 1px dashed rgba(255,255,255,.06); } .sc-stat{ display: flex; flex-direction: column; gap: 1px; } .sc-st-val{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; font-weight: 700; color: var(--text-dim, #cdd2e2); font-variant-numeric: tabular-nums; } .sc-st-lbl{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 8.5px; color: var(--muted, #8a8fa3); letter-spacing: .08em; text-transform: uppercase; } .sc-spark{ display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; height: 28px; align-items: end; margin-top: 2px; } .stk-bar{ display: block; background: linear-gradient(180deg, var(--st-color, #5a5e72), color-mix(in oklab, var(--st-color, transparent) 30%, transparent)); border-radius: 2px 2px 0 0; height: var(--h, 0%); min-height: 2px; opacity: .65; transition: height .25s; } .stk-bar.current{ opacity: 1; box-shadow: 0 0 6px var(--st-color, transparent); } /* ---------------------------------------------------------------- RACE PANEL — carrera de representantes (distribución) ---------------------------------------------------------------- */ .m-race-panel{ display: none; } html[data-style="moderno"] .m-race-panel, html[data-style="google"] .m-race-panel{ display: block; padding: 0 var(--s-4, 32px) 18px; margin: 0 auto; max-width: 1800px; } html[data-style="moderno"] .m-race-panel .m-widget, html[data-style="google"] .m-race-panel .m-widget{ min-height: 0; max-height: none; } html[data-style="moderno"] .w-race .head .meta, html[data-style="google"] .w-race .head .meta{ display: inline-flex; flex-wrap: wrap; gap: 6px; } .w-race .rc-chip{ display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; font-weight: 600; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: var(--text-dim, #cdd2e2); } .w-race .rc-chip.total{ color: #facc15; border-color: rgba(250,204,21,.30); font-weight: 700; } .race-list{ padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 6px; } .race-row{ display: grid; grid-template-columns: 50px 40px 180px 1fr 380px; gap: 14px; align-items: center; padding: 10px 14px; background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.05); border-radius: 10px; transition: transform .35s cubic-bezier(.2,.8,.2,1), background .25s, border-color .25s, box-shadow .25s; } .race-row:hover{ background: rgba(228,181,107,.06); border-color: rgba(228,181,107,.25); } .race-row.r-gold{ background: linear-gradient(90deg, rgba(250,204,21,.10), rgba(255,255,255,.02)); border-color: rgba(250,204,21,.25); } .race-row.r-silver{ background: linear-gradient(90deg, rgba(203,213,225,.08), rgba(255,255,255,.02)); border-color: rgba(203,213,225,.20); } .race-row.r-bronze{ background: linear-gradient(90deg, rgba(180,83,9,.08), rgba(255,255,255,.02)); border-color: rgba(180,83,9,.20); } .race-row.flash{ box-shadow: 0 0 24px rgba(34,211,238,.30); background: rgba(34,211,238,.08) !important; } .race-row.moving-up{ animation: rr-up .55s cubic-bezier(.2,.8,.2,1); } .race-row.moving-down{ animation: rr-down .55s cubic-bezier(.2,.8,.2,1); } @keyframes rr-up{ 0% { transform: translateY(8px); opacity: .5; } 100% { transform: translateY(0); opacity: 1; } } @keyframes rr-down{ 0% { transform: translateY(-8px); opacity: .5; } 100% { transform: translateY(0); opacity: 1; } } .rr-rank{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 14px; font-weight: 600; color: var(--muted, #8a8fa3); text-align: center; letter-spacing: 0; font-variant-numeric: tabular-nums; } .rr-rank.gold { color: #facc15; font-weight: 700; } .rr-rank.silver{ color: #e2e8f0; font-weight: 700; } .rr-rank.bronze{ color: #fb923c; font-weight: 700; } .rr-avatar{ width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-family: 'Inter', system-ui, sans-serif; font-size: 12px; font-weight: 700; color: var(--text-dim, #cdd2e2); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); letter-spacing: -.02em; } .race-row.r-gold .rr-avatar { background: rgba(250,204,21,.14); border-color: rgba(250,204,21,.30); color: #fff; } .race-row.r-silver .rr-avatar{ background: rgba(226,232,240,.10); border-color: rgba(226,232,240,.25); color: #fff; } .race-row.r-bronze .rr-avatar{ background: rgba(251,146,60,.14); border-color: rgba(251,146,60,.30); color: #fff; } .rr-info{ display: flex; flex-direction: column; gap: 2px; } .rr-name{ font-family: 'Inter', system-ui, sans-serif; font-size: 13px; font-weight: 700; color: #fff; letter-spacing: -.01em; } .rr-zone{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; color: var(--muted, #8a8fa3); letter-spacing: .04em; } .rr-bar-wrap{ position: relative; height: 26px; background: rgba(255,255,255,.05); border-radius: 6px; overflow: hidden; } .rr-bar{ position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #E4B56B, #22d3ee); border-radius: 6px; transition: width .65s cubic-bezier(.2,.8,.2,1); } .race-row.r-gold .rr-bar{ background: linear-gradient(90deg, #facc15, #fb923c); } .race-row.r-silver .rr-bar{ background: linear-gradient(90deg, #cbd5e1, #94a3b8); } .race-row.r-bronze .rr-bar{ background: linear-gradient(90deg, #f59e0b, #b45309); } .rr-bar-label{ position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 600; color: #fff; z-index: 2; } .rr-metrics{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .rr-metric{ display: flex; flex-direction: column; gap: 1px; align-items: flex-end; } .rr-m-val{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; } .rr-m-val.up{ color: #10b981; } .rr-m-val.down{ color: #f43f5e; } .rr-m-val.target-hit { color: #10b981; } .rr-m-val.target-good{ color: #22d3ee; } .rr-m-val.target-warn{ color: #facc15; } .rr-m-val.target-low { color: #f43f5e; } .rr-m-val.commission { color: #facc15; } .rr-m-lbl{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 8.5px; color: var(--muted, #8a8fa3); letter-spacing: .08em; text-transform: uppercase; } @media (max-width: 1100px){ .race-row{ grid-template-columns: 36px 32px 130px 1fr 200px; gap: 10px; padding: 8px 12px; } .rr-zone{ display: none; } .rr-metrics{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px){ .race-row{ grid-template-columns: 30px 1fr; } .rr-avatar, .rr-bar-wrap, .rr-metrics{ display: none; } } /* Top list */ .m-widget .top-list{ flex: 1; padding: 10px 16px 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; } .top-row{ display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; padding: 6px 0; align-items: center; transition: transform .25s; } .top-row .name{ font-size: 12.5px; color: var(--text-dim, #cdd2e2); font-family: 'Inter', system-ui, sans-serif; } .top-row .count{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; } .top-row .bar{ grid-column: 1 / -1; height: 4px; border-radius: 2px; background: rgba(255,255,255,.05); overflow: hidden; position: relative; } .top-row .bar .fill{ height: 100%; background: linear-gradient(90deg, #E4B56B, #22d3ee); border-radius: 2px; transition: width .45s cubic-bezier(.2,.8,.2,1); box-shadow: 0 0 6px rgba(34,211,238,.4); } .top-row[data-rank="1"] .name{ color: #fff; font-weight: 600; } /* Status grid */ .m-widget .status-grid{ flex: 1; padding: 10px 14px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; } .status-card{ display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; padding: 10px 12px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.06); border-radius: 10px; transition: background .2s, border-color .2s; } .status-card .sdot{ width: 10px; height: 10px; border-radius: 50%; background: var(--m-green, #10b981); box-shadow: 0 0 10px var(--m-green, #10b981); animation: m-pulse 1.6s infinite; } .status-card.warn{ border-color: rgba(250,204,21,.35); background: rgba(250,204,21,.06); } .status-card.warn .sdot{ background: #facc15; box-shadow: 0 0 10px #facc15; } .status-card.error{ border-color: rgba(244,63,94,.35); background: rgba(244,63,94,.06); } .status-card.error .sdot{ background: #f43f5e; box-shadow: 0 0 12px #f43f5e; animation: m-pulse 1s infinite; } .status-card .body{ display: flex; flex-direction: column; gap: 1px; min-width: 0; } .status-card .body .n{ color: var(--text, #f5f7ff); font-family: 'Inter', system-ui, sans-serif; font-size: 12px; font-weight: 600; } .status-card .body .s{ color: var(--muted, #8a8fa3); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9.5px; letter-spacing: .08em; } /* Fila seleccionada (highlight de ruta activa) */ .fleet-row.selected{ background: rgba(228,181,107,.13) !important; border-color: rgba(228,181,107,.50) !important; box-shadow: 0 0 0 1px rgba(228,181,107,.35), 0 0 30px rgba(228,181,107,.30), inset 0 0 0 1px rgba(255,255,255,.05) !important; transform: translateX(2px); } .fleet-row.selected::before{ content: ''; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, #10b981 0%, #f43f5e 100%); box-shadow: 0 0 8px rgba(228,181,107,.5); } /* ---------------------------------------------------------------- ROUTE PINS — INICIO (verde) y FIN (rojo) sobre el mapa al seleccionar una fila del roster. Pulse + label monospace neón. ---------------------------------------------------------------- */ .m-route-pin{ position: relative; width: 18px; height: 18px; } .m-route-pin .pin-core{ position: absolute; inset: 4px; border-radius: 50%; background: var(--col); box-shadow: 0 0 14px var(--col), 0 0 32px var(--col); } .m-route-pin .pin-pulse{ position: absolute; inset: 0; border-radius: 50%; border: 2.5px solid var(--col); animation: vm-pulse 1.6s ease-out infinite; } .m-route-pin.start{ --col: #10b981; } .m-route-pin.end { --col: #f43f5e; } .m-route-pin .pin-label{ position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; background: rgba(5,6,10,.92); border: 1px solid var(--col); color: var(--col); padding: 4px 9px; border-radius: 5px; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,.6), 0 0 18px var(--col); pointer-events: none; } .m-route-pin .pin-label::before{ content: ''; position: absolute; top: -5px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid var(--col); filter: drop-shadow(0 0 6px var(--col)); } /* ---------------------------------------------------------------- FLEET — vehículos animados (logística): glow halo, camión SVG rotado al heading, label monospace flotante con ETA. ---------------------------------------------------------------- */ .m-veh{ position: relative; width: 22px; height: 22px; transform: rotate(var(--hdg, 0deg)); transition: transform .35s linear; pointer-events: auto; } .m-veh-glow{ position: absolute; inset: -10px; border-radius: 50%; background: radial-gradient(circle, var(--col, #22d3ee) 0%, transparent 60%); opacity: .35; animation: m-veh-pulse 2.2s ease-in-out infinite; pointer-events: none; } .m-veh-body{ position: absolute; inset: 0; display: grid; place-items: center; color: var(--col, #22d3ee); filter: drop-shadow(0 0 6px var(--col, #22d3ee)) drop-shadow(0 0 12px var(--col, #22d3ee)); } .m-veh-label{ position: absolute; top: -28px; left: 50%; transform: translateX(-50%) rotate(var(--counter, 0deg)); display: inline-flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9.5px; font-weight: 600; background: rgba(5,6,10,.88); border: 1px solid var(--col, #22d3ee); color: var(--col, #22d3ee); padding: 3px 7px; border-radius: 5px; white-space: nowrap; box-shadow: 0 0 12px rgba(0,0,0,.5), 0 0 18px var(--col, #22d3ee); pointer-events: none; } .m-veh-label .m-veh-id{ color: #fff; } .m-veh-label .m-veh-eta{ opacity: .85; } .m-veh-label::after{ content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid var(--col, #22d3ee); filter: drop-shadow(0 0 6px var(--col, #22d3ee)); } @keyframes m-veh-pulse{ 0%,100%{transform:scale(1); opacity:.35} 50% {transform:scale(1.45); opacity:.12} } /* Markers personalizados */ .viz-marker{ position: relative; width: 14px; height: 14px; } .viz-marker .vm-core{ position: absolute; inset: 4px; border-radius: 50%; background: #22d3ee; box-shadow: 0 0 10px #22d3ee, 0 0 24px #22d3ee; } .viz-marker .vm-pulse{ position: absolute; inset: 0; border-radius: 50%; border: 2px solid #22d3ee; animation: vm-pulse 1.8s ease-out infinite; } .viz-marker.hot .vm-core{ background: #f472b6; box-shadow: 0 0 14px #f472b6, 0 0 32px #f472b6; } .viz-marker.hot .vm-pulse{ border-color: #f472b6; } .viz-marker.gold .vm-core{ background: #facc15; box-shadow: 0 0 14px #facc15, 0 0 32px #facc15; } .viz-marker.gold .vm-pulse{ border-color: #facc15; } @keyframes vm-pulse{ 0% {transform: scale(.8); opacity: 1} 100%{transform: scale(2.4); opacity: 0} } /* FEED live */ .m-live-feed{ background: rgba(20,24,38,.55); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); display: flex; flex-direction: column; height: 560px; overflow: hidden; position: relative; } .m-live-feed .list{ overflow-y: auto; } .m-live-feed .list::-webkit-scrollbar{ width: 6px; } .m-live-feed .list::-webkit-scrollbar-thumb{ background: linear-gradient(180deg, rgba(228,181,107,.5), rgba(34,211,238,.4)); border-radius: 999px; } .m-live-feed::after{ content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(244,114,182,.6), rgba(228,181,107,.6), transparent); pointer-events: none; } .m-live-feed .head{ padding: 14px 18px 12px; border-bottom: 1px solid rgba(255,255,255,.06); display: flex; align-items: center; gap: 10px; } .m-live-feed .head h4{ font-family: 'Inter', system-ui, sans-serif; font-size: 13px; font-weight: 600; color: var(--text, #f5f7ff); display: flex; align-items: center; gap: 8px; } .m-live-feed .head h4 .dot{ width: 8px; height: 8px; border-radius: 50%; background: #22d3ee; box-shadow: 0 0 10px #22d3ee; animation: m-pulse 1.6s infinite; } .m-live-feed .head .stat{ margin-left: auto; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; color: var(--muted, #8a8fa3); } .m-live-feed .list{ flex: 1; overflow: hidden; position: relative; display: flex; flex-direction: column; } .m-live-item{ display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid rgba(255,255,255,.04); animation: feed-slide .45s cubic-bezier(.2,.8,.2,1); flex-shrink: 0; } @keyframes feed-slide{ from{opacity: 0; transform: translateY(-10px) scale(.98)} to {opacity: 1; transform: translateY(0) scale(1)} } .m-live-item .ldot{ width: 7px; height: 7px; border-radius: 50%; background: #22d3ee; box-shadow: 0 0 8px #22d3ee; } .m-live-item .body{ display: flex; flex-direction: column; gap: 2px; min-width: 0; } .m-live-item .body .ev{ font-size: 12.5px; color: var(--text, #f5f7ff); font-weight: 500; } .m-live-item .body .ev em{ font-style: normal; color: #22d3ee; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; } .m-live-item .body .meta{ font-size: 10.5px; color: var(--muted, #8a8fa3); } .m-live-item .ts{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; color: var(--muted-2, #5a5e72); white-space: nowrap; } .m-live-item.kind-success .ldot{ background: #10b981; box-shadow: 0 0 8px #10b981; } .m-live-item.kind-success .body .ev em{ color: #10b981; } .m-live-item.kind-warn .ldot{ background: #facc15; box-shadow: 0 0 8px #facc15; } .m-live-item.kind-warn .body .ev em{ color: #facc15; } .m-live-item.kind-error .ldot{ background: #f43f5e; box-shadow: 0 0 8px #f43f5e; } .m-live-item.kind-error .body .ev em{ color: #f43f5e; } .m-live-item.kind-hot .ldot{ background: #f472b6; box-shadow: 0 0 8px #f472b6; } .m-live-item.kind-hot .body .ev em{ color: #f472b6; } /* ================================================================== MODALES en modo moderno — forzar fondo OPACO Razón: --surface-2 en moderno es rgba(...,.65) para los paneles del dashboard. Si lo heredan los modales, se vuelven semi-transparentes y el dashboard se ve detrás (problema reportado por usuario el 2026-05-11). ================================================================== */ html[data-style="moderno"] .sm-dialog, html[data-style="moderno"] .ai-drawer, html[data-style="moderno"] .rwn-modes-modal__box, html[data-style="moderno"] .rwn-cookie { background: var(--modal-bg, #14182a) !important; border-color: rgba(255,255,255,.10); backdrop-filter: none; -webkit-backdrop-filter: none; }