/* ========================================================================== 馃懡 NIYYAH // INTELLIGENCE CONSOLE & CHASSIS CONFIGURATION ========================================================================== */ .hud-hologram-ai-console { /* Variables de Entorno Minimalistas */ --niyyah-accent: #cdfa1b; --niyyah-white: rgba(255, 255, 255, .88); --niyyah-soft: rgba(255, 255, 255, .48); --niyyah-ghost: rgba(255, 255, 255, .22); --niyyah-system: rgba(255, 255, 255, .28); display: flex; flex-direction: column; overflow: hidden; /* 馃専 CORRECCI脫N DE ANCLAJE: Usamos fixed para que se posicione respecto a la ventana del navegador */ position: fixed !important; right: 24px; /* Un margen fijo elegante en pixeles */ top: 84px; /* Lo bajamos lo suficiente para que libre el men煤 superior de Extropian */ left: auto; /* Dimensiones Iniciales Flexibles */ width: 580px; /* Compactado sutilmente para mejor balance editorial */ max-width: 90vw; height: 72vh; /* Equilibrio perfecto de altura para la visualizaci贸n de logs */ min-width: 380px; min-height: 400px; /* Cristal de Emisi贸n Ne贸n e Integraci贸n Tridimensional */ background: linear-gradient(135deg, rgba(14, 16, 12, 0.94) 0%, rgba(7, 7, 7, 0.88) 100%) !important; border: 1px solid rgba(205, 250, 27, 0.22) !important; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.85), inset 0 0 20px rgba(205, 250, 27, 0.03), 0 0 40px rgba(205, 250, 27, 0.05) !important; backdrop-filter: blur(25px) brightness(1.1) contrast(1.05) !important; -webkit-backdrop-filter: blur(25px) brightness(1.1) contrast(1.05) !important; font-family: 'Space Mono', 'Anonymous Pro', monospace !important; z-index: 450000 !important; /* Elevado por encima de cualquier otra capa del tablero */ box-sizing: border-box !important; padding: 1.5rem !important; border-radius: 2px !important; /* Bordes rectos industriales m谩s finos */ /* 馃専 CONTROL DE ANIMACI脫N MEDIANTE OPACIDAD Y VISIBILIDAD (Estado Inactivo en Reposo) */ opacity: 0; visibility: hidden; pointer-events: none !important; will-change: transform, opacity, backdrop-filter; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s linear !important; } /* 馃専 CLASE DE ACTIVACI脫N DIN脕MICA (Para cuando el JS le otorgue el control) */ .hud-hologram-ai-console.is-active { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; /* Elimina cualquier desv铆o o escala previa */ } /* Estado Activo: Proyecci贸n de Luz Expandida */ .global-navbar.is-active-ai-console ~ main .hud-hologram-ai-console { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; /* Despliega la consola de 0.01 a su tama帽o real de forma fluida */ transform: scale(1) translateY(0); border: 1px solid rgba(205, 250, 27, 0.55) !important; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.75), inset 0 0 24px rgba(205, 250, 27, 0.08), 0 0 50px rgba(205, 250, 27, 0.12) !important; } /* APAG脫N DE TRANSICIONES: En cuanto el JS inyecte pixeles de movimiento, matamos las transiciones para que el chasis no flote con retraso respecto al mouse */ .hud-hologram-ai-console[style*="left"] { transition: none !important; transform: none !important; } /* ========================================================================== HEADER SYSTEM ========================================================================== */ .hologram-header-bar { display: flex !important; align-items: center !important; justify-content: space-between !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; padding-bottom: 0.8rem !important; margin-bottom: 1.2rem !important; width: 100% !important; } .header-left-matrix { display: flex !important; align-items: center !important; gap: .75rem !important; } .matrix-pulse-dot { width: 6px !important; height: 6px !important; border-radius: 50% !important; background: var(--niyyah-accent) !important; box-shadow: 0 0 8px rgba(205, 250, 27, .65), 0 0 18px rgba(205, 250, 27, .25) !important; animation: niyyahPulse 2s ease-in-out infinite !important; } .matrix-identity { display: flex !important; flex-direction: column !important; gap: .15rem !important; } .matrix-title { color: var(--niyyah-white) !important; font-size: .7rem !important; letter-spacing: .12em !important; margin: 0 !important; text-transform: uppercase !important; } .matrix-subtitle { color: var(--niyyah-ghost) !important; font-size: .48rem !important; letter-spacing: .18em !important; margin: 0 !important; text-transform: uppercase !important; } .btn-close-hologram { background: none !important; border: none !important; color: var(--niyyah-soft) !important; font-family: inherit !important; font-size: 9px !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; cursor: pointer !important; pointer-events: auto !important; transition: color 0.2s ease, text-shadow 0.2s ease !important; } .btn-close-hologram:hover { color: var(--niyyah-accent) !important; text-shadow: 0 0 8px rgba(205, 250, 27, 0.4) !important; } /* ========================================================================== MESSAGE STREAM (INTERACTION OUTPUT) ========================================================================== */ .hologram-data-stream { display: flex !important; flex-direction: column !important; gap: .8rem !important; padding-right: 4px !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; /* Restablecemos el orden natural */ order: unset !important; flex: 1 1 auto !important; height: auto !important; min-height: 120px !important; /* Separaci贸n directa con el panel de opciones de abajo */ margin-bottom: 1.5rem !important; } .stream-line { display: flex !important; align-items: flex-start !important; gap: .75rem !important; font-size: .72rem !important; line-height: 1.6 !important; } /* SYSTEM METADATA LOGS */ .message-system { color: var(--niyyah-system) !important; font-size: .58rem !important; letter-spacing: .08em !important; text-transform: uppercase !important; opacity: .75 !important; } .message-system .message-sender { color: var(--niyyah-system) !important; } /* MALAK CONSOLE RESPONSES (AI) */ .message-niyyah { color: var(--niyyah-white) !important; max-width: 85% !important; background: rgba(205, 250, 27, 0.01) !important; border-left: 1px solid rgba(205, 250, 27, 0.15) !important; border-inline-start: 1px solid rgba(205, 250, 27, 0.15) !important; padding-inline-start: 8px !important; padding-left: 8px !important; } .message-niyyah .message-sender { flex-shrink: 0 !important; color: var(--niyyah-accent) !important; font-weight: 600 !important; letter-spacing: .03em !important; text-shadow: 0 0 10px rgba(205, 250, 27, .18) !important; } .message-niyyah .message-content { color: rgba(255, 255, 255, .82) !important; } /* OPERATOR INPUT LINES (USER) */ .message-user { align-self: flex-end !important; max-width: 75% !important; color: rgba(255, 255, 255, .92) !important; justify-content: flex-end !important; text-align: right !important; } .message-user .message-sender { order: 2 !important; color: rgba(255, 255, 255, .35) !important; margin-left: .75rem !important; } .message-user .message-content { order: 1 !important; } /* ========================================================================== INPUT MANAGEMENT ========================================================================== */ .hologram-input-chassis { display: flex !important; /* Alineaci贸n superior magn茅tica perfecta */ align-items: flex-start !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; padding-top: 0.8rem !important; padding-bottom: 0.8rem !important; margin-top: 0 !important; /* CONFIGURACI脫N OPERATIVA VERTICAL ULTRA-FLEXIBLE */ height: 120px; /* Altura inicial de arranque */ min-height: 50px !important; /* Te permite colapsar la caja casi al extremo si deseas ver m谩s conversaci贸n */ max-height: 220px !important; /* Evita que el cuadro de texto inunde el HUD */ /* CAMBIO CR脥TICO: Permitimos que el chasis coopere y ceda espacio si se requiere */ flex-shrink: 1 !important; overflow: hidden !important; box-sizing: border-box !important; cursor: ns-resize; } .hologram-input-chassis, [class*="console-input"], [class*="input-chassis"] { /* Restablecemos el orden natural */ order: unset !important; display: flex !important; /* Espaciado de seguridad extra respecto al borde del contenedor exterior */ margin-top: 2rem !important; margin-bottom: 0.5rem !important; } /* Alineamos tambi茅n el pointer y el cursor para que viajen en perfecta sincron铆a pegados al borde superior */ .hologram-input-chassis .input-pointer, .hologram-input-chassis .hologram-input-field, .hologram-input-chassis .input-block-cursor { margin-top: 0.2rem !important; } /* El sensor horizontal nativo: Habilitamos el puntero vertical 煤nicamente al pasar por la franja exacta de tu borde superior */ .hologram-input-chassis { cursor: ns-resize; } .input-pointer { color: var(--niyyah-accent) !important; margin-right: .6rem !important; text-shadow: 0 0 8px rgba(205, 250, 27, .3) !important; } .hologram-input-field { flex: 1 !important; background: transparent !important; border: none !important; outline: none !important; color: rgba(255, 255, 255, .9) !important; font-family: inherit !important; font-size: .72rem !important; } .hologram-input-field::placeholder { color: rgba(255, 255, 255, .25) !important; } /* ========================================================================== HARDWARE CURSOR ========================================================================== */ /* Efecto de Cursor Terminal Cyberpunk */ .input-block-cursor { display: inline-block; width: 6px; height: 15px; background: var(--niyyah-accent) !important; margin-left: 4px; animation: blink-cursor .9s steps(1, start) infinite; } @keyframes blink-cursor { 0%, 100% { opacity: 0; } 50% { opacity: 0.95; } } /* ========================================================================== 馃幀 COMPUERTAS DE OCULACI脫N EDITORIAL (APAG脫N QUIR脷RGICO DE TEXTOS) ========================================================================== */ .global-navbar.is-active-ai-console ~ main #cinematicScreen .cinematic-bg-video { transform: scale(1.03) !important; /* El Aclarado Cinem谩tico suavizado para no perder la textura del fondo blurreado */ filter: brightness(0.6) blur(20px) contrast(1.02) saturate(0.95) !important; transition: filter 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important; } .global-navbar.is-active-ai-console ~ main #cinematicScreen .hud-live-terminal-chassis, .global-navbar.is-active-ai-console ~ main #cinematicScreen .hud-live-terminal-chassis *, .global-navbar.is-active-ai-console ~ main #cinematicScreen .hud-column-right-branding, .global-navbar.is-active-ai-console ~ main #cinematicScreen .telemetry-lens-canvas, .global-navbar.is-active-ai-console ~ main #cinematicScreen #hud-axis-x, .global-navbar.is-active-ai-console ~ main #cinematicScreen #hud-axis-y { opacity: 0 !important; pointer-events: none !important; visibility: hidden !important; transition: opacity 0.4s ease, visibility 0.4s step-end !important; } .global-navbar.is-active-ai-console ~ main #cinematicScreen .hud-column-left-chassis .hud-live-terminal-chassis { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* Guardaespaldas t谩ctil frontal */ .global-navbar.is-active-ai-console ~ main #cinematicScreen .hud-column-left-chassis, .global-navbar.is-active-ai-console ~ main #cinematicScreen .hud-left-utility-block, .global-navbar.is-active-ai-console ~ main #cinematicScreen .hud-utility-wrapper, .global-navbar.is-active-ai-console ~ main #cinematicScreen .hud-utility-wrapper * { opacity: 1 !important; pointer-events: auto !important; visibility: visible !important; z-index: 600000 !important; } /* ========================================================================== 馃幀 COMPUERTAS DE OCULACI脫N EDITORIAL (APAG脫N QUIR脷RGICO EN DASHBOARD) ========================================================================== */ /* 馃 REPLICACI脫N MAESTRA: Cuando la consola se activa en la aduana, tomamos el contenedor del espacio de trabajo y le aplicamos tu misma f铆sica cinem谩tica */ .global-navbar.is-active-ai-console ~ .dashboard-workspace-layout, .global-navbar.is-active-ai-console ~ main .commercial-leads-stack { /* Tu misma escala exacta para dar el efecto de inmersi贸n hologr谩fica */ transform: scale(1.01) !important; /* Tu misma combinaci贸n calibrada de brillo, blur suave y contraste */ filter: brightness(0.5) blur(15px) contrast(1.02) saturate(0.95) !important; /* Tu misma coreograf铆a de tiempos de animaci贸n con tu curva cubic-bezier original */ transition: filter 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important; /* Bloqueamos la interacci贸n con los elementos del fondo mientras la consola est谩 abierta */ pointer-events: none !important; } /* Restablecemos el cuerpo del Dashboard para que la consola no se desborde al arrastrarla */ body.is-active-ai-console { overflow: hidden !important; } .niyyah-console-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .niyyah-lower-zone { flex: 0 0 auto !important; display: flex !important; flex-direction: column !important; width: 100% !important; position: relative !important; z-index: 20 !important; margin-top: auto !important; /* 馃専 Empuja la zona de interacci贸n siempre al fondo del contenedor */ } /* ========================================================================== NIYYAH // PANEL DE RUTAS INTERACTIVAS ========================================================================== */ .niyyah-routing-panel { display: none; /* En reposo cerrado */ flex-direction: column !important; gap: 0.6rem !important; width: 100% !important; box-sizing: border-box !important; /* 馃専 AJUSTE DE FLUJO: Permitimos que crezca de manera natural seg煤n sus botones */ flex-shrink: 0 !important; margin-bottom: 1rem !important; } /* EL ATRIBUTO HIDDEN TIENE PRIORIDAD ABSOLUTA */ .niyyah-routing-panel[hidden] { display: none !important; } /* Al estar activo, forzamos el flex de forma prioritaria */ .niyyah-routing-panel.is-active { display: flex !important; } /* 馃専 BLINDAJE DE ESCENA: Si el controlador de Stimulus determin贸 que estamos en modo 'audit', los botones de enrutamiento se destruyen visualmente del DOM */ /*.hud-hologram-ai-console[data-current-step="audit"] .niyyah-routing-panel, .hud-hologram-ai-console[data-current-step="audit"] .niyyah-routing-panel * { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }*/ /* ========================================================================== 馃懡 ROUTING BUTTON ========================================================================== */ .niyyah-route-button { display: flex !important; align-items: center !important; width: 100% !important; min-height: 58px !important; box-sizing: border-box !important; padding: 0.65rem 1rem !important; background: rgba(255, 255, 255, 0.02) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 3px !important; color: rgba(255, 255, 255, 0.88) !important; font-family: inherit !important; font-size: 0.72rem !important; text-align: left !important; cursor: pointer !important; user-select: none !important; transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease !important; } /* ========================================================================== 馃懡 HOVER ========================================================================== */ .niyyah-route-button:hover { background: rgba(205, 250, 27, 0.05) !important; border-color: rgba(205, 250, 27, 0.4) !important; color: #ffffff !important; box-shadow: 0 0 15px rgba(205, 250, 27, 0.08) !important; transform: translateX(4px) !important; } /* ========================================================================== 馃懡 ACTIVE ========================================================================== */ .niyyah-route-button:active { transform: translateX(2px) scale(0.99) !important; background: rgba(205, 250, 27, 0.08) !important; } /* ========================================================================== 馃懡 SELECTED ========================================================================== */ .niyyah-route-button.is-selected { border-color: rgba(205, 250, 27, 0.55) !important; background: rgba(205, 250, 27, 0.07) !important; box-shadow: 0 0 18px rgba(205, 250, 27, 0.10) !important; } /* ========================================================================== 馃懡 INDEX ========================================================================== */ .niyyah-route-button .route-index { flex-shrink: 0 !important; margin-right: 1rem !important; color: #cdfa1b !important; font-family: monospace !important; font-weight: bold !important; } /* ========================================================================== 馃懡 COPY ========================================================================== */ .niyyah-route-button .route-copy { display: flex !important; flex-direction: row !important; align-items: baseline !important; gap: 0.5rem !important; flex: 1 1 auto !important; min-width: 0 !important; } /* ========================================================================== 馃懡 TITLE ========================================================================== */ .niyyah-route-button .route-copy strong { font-weight: 600 !important; letter-spacing: 0.02em !important; white-space: nowrap !important; } /* ========================================================================== 馃懡 SUBTITLE ========================================================================== */ .niyyah-route-button .route-copy small { display: inline !important; margin: 0 !important; color: rgba(255, 255, 255, 0.45) !important; font-size: 0.65rem !important; font-weight: normal !important; line-height: 1.2 !important; white-space: nowrap !important; } .niyyah-route-button:hover .route-copy small { color: rgba(255, 255, 255, 0.65) !important; } /* ========================================================================== 馃懡 ARROW ========================================================================== */ .niyyah-route-button .route-arrow { flex-shrink: 0 !important; margin-left: auto !important; padding-left: 1rem !important; color: rgba(255, 255, 255, 0.25) !important; font-weight: bold !important; transition: color 0.25s ease, transform 0.25s ease !important; } .niyyah-route-button:hover .route-arrow { color: #cdfa1b !important; transform: translateX(2px) !important; } /* ========================================================================== 馃懡 DISABLED ========================================================================== */ .niyyah-route-button:disabled { cursor: default !important; opacity: 0.55 !important; transform: none !important; } /* ========================================================================== 馃摤 PANEL DE CAPTURA DE LEADS (OCULTO/REVELADO) ========================================================================== */ .niyyah-lead-capture { display: flex !important; flex-direction: column !important; gap: 0.8rem !important; padding: 1rem 0 !important; width: 100% !important; box-sizing: border-box !important; border-top: 1px dashed rgba(255, 255, 255, 0.1) !important; margin-top: 0.5rem !important; touch-action: pan-y !important; } .niyyah-stream { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* Correcci贸n para que si tiene el atributo hidden de Rails se respete */ .niyyah-lead-capture[hidden] { display: none !important; } .lead-capture-header { display: flex !important; gap: 0.8rem !important; margin-bottom: 0.4rem !important; } .lead-capture-header strong { color: #cdfa1b !important; font-size: 0.75rem !important; display: block !important; margin-bottom: 0.2rem !important; } .lead-capture-header p { color: rgba(255, 255, 255, 0.7) !important; font-size: 0.68rem !important; margin: 0 !important; line-height: 1.4 !important; } /* --- CAMPOS DE FORMULARIO (FIELDS) --- */ .niyyah-field { display: flex !important; flex-direction: column !important; gap: 0.3rem !important; } .niyyah-field label { color: rgba(255, 255, 255, 0.4) !important; font-size: 0.58rem !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; } .niyyah-field input { font-size: 16px !important; background: rgba(0, 0, 0, 0.25) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; padding: 0.6rem 0.8rem !important; color: #ffffff !important; } .niyyah-field input:focus { border-color: rgba(205, 250, 27, 0.4) !important; box-shadow: 0 0 10px rgba(205, 250, 27, 0.05) !important; } .niyyah-field input::placeholder { color: rgba(255, 255, 255, 0.2) !important; } /* --- BOT脫N DE DE SCRIPTOR DE SINCRONIZACI脫N --- */ .niyyah-sync-button { background: #cdfa1b !important; border: none !important; border-radius: 2px !important; color: #000000 !important; padding: 0.7rem !important; font-family: inherit !important; font-weight: bold !important; font-size: 0.68rem !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; cursor: pointer !important; transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease !important; margin-top: 0.4rem !important; text-align: center !important; } .niyyah-sync-button:hover { background: #ddff33 !important; box-shadow: 0 0 20px rgba(205, 250, 27, 0.3) !important; } .niyyah-sync-button:active { transform: scale(0.98) !important; } @keyframes niyyahPulse { 0%, 100% { transform: scale(1); opacity: 0.8; box-shadow: 0 0 8px rgba(205, 250, 27, .65), 0 0 18px rgba(205, 250, 27, .25) !important; } 50% { transform: scale(1.15); opacity: 1; box-shadow: 0 0 14px rgba(205, 250, 27, .9), 0 0 28px rgba(205, 250, 27, .4) !important; } } /* ========================================================================== 馃 INTERFAZ DE CONTROL: BLINDAJE ULTRA-PREMIUM PARA FLATPICKR ========================================================================== */ /* 1. Forzamos al calendario a posicionarse por encima del z-index de tu consola */ .flatpickr-calendar { z-index: 99999999 !important; background: #090a07 !important; border: 1px solid rgba(205, 250, 27, 0.25) !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9) !important; font-family: 'Space Mono', monospace !important; border-radius: 2px !important; } /* 2. Estilizado fino de los n煤meros de los d铆as */ .flatpickr-day { color: #888 !important; font-size: 0.72rem !important; transition: all 0.2s ease !important; } /* El d铆a seleccionado por el usuario usar谩 el amarillo Extropian */ .flatpickr-day.selected, .flatpickr-day.selected:hover { background: #cdfa1b !important; border-color: #cdfa1b !important; color: #000 !important; font-weight: bold !important; } /* D铆as deshabilitados o llenos (Gris oscuro industrial) */ .flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover { color: #222 !important; background: transparent !important; cursor: not-allowed !important; border-bottom: none !important; } /* 3. El encabezado del mes y flechas de navegaci贸n */ .flatpickr-months .flatpickr-month, .flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-current-month input.cur-year { color: #fff !important; font-family: monospace !important; font-size: 0.75rem !important; } .flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { color: #cdfa1b !important; fill: #cdfa1b !important; } .span.flatpickr-weekday { color: #444 !important; font-size: 0.65rem !important; font-family: monospace !important; } @media (min-width: 768px) { .niyyah-field input { font-size: 0.7rem !important; } }