/* ============================================================ LANCITA BRICC — Frontend (diseño aprobado docs 08 alta fidelidad) Tema oscuro futurista (NEUROBYTE) sobre identidad CEDOC: grafito #0A0D14 + grid técnico + halos · azul institucional #21409A · azul brillante #2E8BF0 (acciones) · cian #38BDF8 (glow/citas) · dorado #F4C430 (escudo) · títulos condensados · etiquetas mono. ============================================================ */ :root { --bg: #0a0d14; /* grafito base */ --bg-sidebar: #0d1119; /* barra lateral */ --bg-raised: #101522; /* paneles elevados */ --bg-input: #0e1320; --border: #1c2333; --border-strong: #2a3550; --text: #e6eaf2; --text-dim: #8a93a6; --accent: #38bdf8; /* cian: glow, citas, indicadores, barras */ --accent-dark: #2e8bf0; /* azul brillante: acciones */ --azul-inst: #21409a; /* azul institucional: degradados */ --dorado: #f4c430; /* escudo del logotipo */ --ejc-rojo: #c5332b; /* rojo "EJC" de la marca (hierro rojo) */ --ok: #3fb27f; --warn: #d9a23c; --err: #d86a6a; --radius: 12px; --radius-lg: 16px; --font: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-cond: "Bahnschrift", "Arial Narrow", "Liberation Sans Narrow", "Segoe UI", sans-serif; --font-mono: ui-monospace, "Cascadia Code", "JetBrains Mono", Consolas, monospace; --sombra-panel: 0 10px 28px rgba(0, 0, 0, .45), 0 0 0 1px rgba(56, 189, 248, .05); /* ---- Escala de la interfaz ---- Arranca al 85%: al 100% todo se veía demasiado grande (pedido del usuario). Este número MANDA sobre toda la interfaz; para cambiar la escala basta con tocarlo aquí. OJO: el zoom encoge también lo que se mide contra la pantalla, así que un `100dvh` cubriría solo el 85% del alto y dejaría una franja muerta abajo (96 px medidos en pantalla de 639). Por eso TODA medida que deba llenar la pantalla se divide por esta variable. */ --zoom-app: .85; } /* ---- Tema del rol "desarrollador" (usuario especial) ---- El backend enruta sus preguntas de código a Gemini; la interfaz lo señala con una identidad PROPIA de terminal/IDE: verde fósforo sobre grafito verdoso, tipografía monoespaciada en saludo/títulos/controles, prompt ~$ con cursor parpadeante y caja de consulta como ventana de terminal. Se activa con el data-rol que app.js pone en el al entrar; todo vive bajo este selector para no tocar a los demás roles. */ body[data-rol="desarrollador"] { --bg: #0a120d; /* grafito con sangre verde */ --bg-sidebar: #0c140f; --bg-raised: #0e1813; --bg-input: #0c1510; --border: #1b2b20; --border-strong: #2a4433; --accent: #3fdf8f; /* verde fósforo: glow, citas, indicadores */ --accent-dark: #2f9463; /* verde oscuro: acciones */ --sombra-panel: 0 10px 28px rgba(0, 0, 0, .5), 0 0 0 1px rgba(63, 223, 143, .07); /* Rejilla técnica y halos en fósforo (reemplaza el cian del tema base). */ background: radial-gradient(55rem 32rem at 85% -12%, rgba(63, 223, 143, .10), transparent), radial-gradient(42rem 28rem at -5% 112%, rgba(63, 178, 127, .08), transparent), linear-gradient(rgba(63, 223, 143, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(63, 223, 143, .06) 1px, transparent 1px), var(--bg); background-size: auto, auto, 34px 34px, 34px 34px, auto; background-attachment: fixed; } /* La marca del lateral: "DESARROLLADOR" en fósforo (el rojo institucional se queda en LANZA CHAT de los demás roles) + etiqueta del motor debajo. */ body[data-rol="desarrollador"] .logo-chat { color: var(--accent); text-shadow: 0 0 12px rgba(63, 223, 143, .5); } body[data-rol="desarrollador"] .sidebar-logo-text::after { content: "▸ gemini-2.5-pro"; display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 400; letter-spacing: 1px; color: var(--text-dim); margin-top: 2px; } /* Saludo del inicio: de serif dorado a PROMPT de terminal — monoespaciado fósforo con ~$ delante y cursor de bloque parpadeando al final. */ body[data-rol="desarrollador"] .home-saludo-wrap::before { content: "~$"; font-family: var(--font-mono); font-size: clamp(20px, 3vw, 34px); color: var(--text-dim); } body[data-rol="desarrollador"] .home-saludo { font-family: var(--font-mono); font-size: clamp(26px, 4vw, 44px); font-weight: 600; letter-spacing: 0; color: var(--accent); text-shadow: 0 0 20px rgba(63, 223, 143, .35); } body[data-rol="desarrollador"] .home-saludo::after { content: "▊"; margin-left: 6px; animation: dev-cursor 1.1s steps(1) infinite; } @keyframes dev-cursor { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { body[data-rol="desarrollador"] .home-saludo::after { animation: none; } } /* "¿Qué desea consultar?" como comentario de código. */ body[data-rol="desarrollador"] .home-title { font-family: var(--font-mono); font-size: clamp(15px, 2.4vw, 19px); letter-spacing: .5px; color: var(--text-dim); } body[data-rol="desarrollador"] .home-title::before { content: "// "; color: var(--accent); } /* Caja de consulta del inicio como VENTANA de terminal: barra superior con los tres botones (rojo/ámbar/verde) y entrada monoespaciada con caret fósforo. El seguimiento (abajo del hilo) hereda solo la tipografía. */ body[data-rol="desarrollador"] #home-searchbox { position: relative; padding-top: 36px; border-radius: 10px; } body[data-rol="desarrollador"] #home-searchbox::before { content: ""; position: absolute; top: 13px; left: 16px; width: 10px; height: 10px; border-radius: 50%; background: #e0604f; box-shadow: 18px 0 0 #d9a23c, 36px 0 0 #3fb27f; } body[data-rol="desarrollador"] #home-searchbox::after { content: "consulta.sh — lanza"; position: absolute; top: 9px; left: 0; right: 0; text-align: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; color: var(--text-dim); pointer-events: none; } body[data-rol="desarrollador"] .searchbox-input { font-family: var(--font-mono); font-size: 14.5px; caret-color: var(--accent); } /* Título de cada pregunta del hilo: monoespaciado con guiño de prompt. */ body[data-rol="desarrollador"] .thread-question { font-family: var(--font-mono); font-size: clamp(17px, 3.2vw, 23px); letter-spacing: 0; } body[data-rol="desarrollador"] .thread-question::before { content: "❯ "; color: var(--accent); } /* Controles con acabado de IDE: monoespaciados y menos redondeados. */ body[data-rol="desarrollador"] .chip-btn, body[data-rol="desarrollador"] .btn-new-thread { font-family: var(--font-mono); border-radius: 6px; } /* Bloques de código con el borde fósforo del tema. */ body[data-rol="desarrollador"] .answer-body .code-block { border-color: rgba(63, 223, 143, .22); background: rgba(0, 0, 0, .45); } * { box-sizing: border-box; margin: 0; padding: 0; } /* Sin scroll global: la app scrollea por dentro (.main) y así el zoom de ingreso del login no hace aparecer barras a los lados. */ html, body { height: 100%; overflow: hidden; } /* La escala se aplica en el (el login también entra). OJO: el alto va en % SIN dividir por --zoom-app — los porcentajes ya se resuelven contra el bloque contenedor ajustado por el zoom (solo las unidades de viewport, vh/ dvh, necesitan la división). Dividir aquí también hacía el documento un 17,6% más alto que la pantalla: overflow:hidden escondía la barra, pero el scrollIntoView de cada respuesta scrolleaba ese sobrante y el sidebar entero se subía y se cortaba (medido: 113px en pantalla de 639). */ body { zoom: var(--zoom-app); height: 100%; } /* Scrollbars con el tema oscuro (en vez del gris feo del sistema): pulgar azul redondeado sobre pista transparente, que se aclara a cian al pasar el ratón. El borde transparente + background-clip deja "aire" alrededor del pulgar. */ * { scrollbar-width: thin; /* Firefox */ scrollbar-color: var(--border-strong) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: var(--border-strong); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background-color: var(--accent-dark); } ::-webkit-scrollbar-corner { background: transparent; } body { font-family: var(--font); /* Grafito con halos difuminados y grid técnico (diseño aprobado). */ background: radial-gradient(55rem 32rem at 85% -12%, rgba(46, 139, 240, .17), transparent), radial-gradient(42rem 28rem at -5% 112%, rgba(56, 189, 248, .11), transparent), linear-gradient(rgba(56, 189, 248, .085) 1px, transparent 1px), linear-gradient(90deg, rgba(56, 189, 248, .085) 1px, transparent 1px), var(--bg); background-size: auto, auto, 34px 34px, 34px 34px, auto; background-attachment: fixed; color: var(--text); font-size: 15px; line-height: 1.6; } .hidden { display: none !important; } a { color: var(--accent); text-decoration: none; } .logo-accent { color: var(--accent); } /* "CHAT" de la marca: rojo hierro con un leve resplandor (la variable conserva el nombre --ejc-rojo: es el rojo institucional, no el de la palabra). */ .logo-chat { color: var(--ejc-rojo); text-shadow: 0 0 10px rgba(197, 51, 43, .45); } /* ============ LOGIN ============ */ .view-login { position: relative; overflow: hidden; /* Divididas por --zoom-app para seguir llenando la pantalla (ver :root). */ min-height: calc(100vh / var(--zoom-app)); min-height: calc(100dvh / var(--zoom-app)); /* móvil: descuenta la barra */ display: flex; align-items: center; justify-content: center; padding: 16px; /* la tarjeta nunca toca los bordes en pantallas chicas */ } /* Lienzo de los circuitos animados que recorren la cuadrícula del fondo. */ .login-circuitos { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .login-card { position: relative; /* por encima del lienzo de circuitos */ z-index: 1; width: min(380px, 100%); padding: 40px 36px; background: var(--bg-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); text-align: center; box-shadow: var(--sombra-panel), 0 0 70px rgba(46, 139, 240, .18); /* Respiración: el halo del "chip" late como si estuviera encendido. La levitación la aplica circuitos.js para mover tarjeta y placa juntas. */ animation: login-respira 5s ease-in-out infinite; } @keyframes login-respira { 0%, 100% { box-shadow: var(--sombra-panel), 0 0 55px rgba(46, 139, 240, .15); } 50% { box-shadow: var(--sombra-panel), 0 0 105px rgba(46, 139, 240, .32), 0 0 32px rgba(56, 189, 248, .20); } } /* Acceso concedido: zoom hacia el interior del chip (toda la placa). */ .view-login.login-zoom { animation: login-ingreso .7s cubic-bezier(.5, 0, .85, 1) forwards; } @keyframes login-ingreso { to { transform: scale(1.22); opacity: 0; } } .login-zoom .login-card { border-color: rgba(56, 189, 248, .55); } /* Acceso denegado: el halo del chip pasa a rojo de alerta (la sacudida y las pistas rojas las pone circuitos.js). */ .login-card.login-alerta { animation: none; /* pausa la respiración azul mientras dura la alerta */ border-color: rgba(216, 106, 106, .65); box-shadow: var(--sombra-panel), 0 0 70px rgba(216, 106, 106, .28), 0 0 22px rgba(216, 106, 106, .20); } @media (prefers-reduced-motion: reduce) { .login-card, .view-login.login-zoom { animation: none; } } /* ============ AMBIENTE VIVO (tras el ingreso) ============ */ /* Motas de energía a la deriva detrás del contenido (js/ambiente.js). */ #ambiente-ia { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } .app { position: relative; z-index: 1; } /* El escudo del logo late suavemente: la plataforma está despierta. */ .sidebar-logo .logo-img { animation: late-dorado 4.5s ease-in-out infinite; } @keyframes late-dorado { 0%, 100% { filter: drop-shadow(0 0 6px rgba(244, 196, 48, .30)); } 50% { filter: drop-shadow(0 0 14px rgba(244, 196, 48, .70)); } } @media (prefers-reduced-motion: reduce) { .sidebar-logo .logo-img, .insignia-baicc { animation: none; } } .login-logo { display: flex; align-items: center; justify-content: center; gap: 12px; } .login-logo h1 { font-family: var(--font-cond); font-size: 24px; letter-spacing: 3px; font-weight: 700; line-height: 1.05; } /* "EJC" en su propia línea, debajo de "LANCITA". */ .login-logo .logo-chat { display: block; } /* Escudo institucional (img/logo.png) con halo dorado suave. */ .logo-img { height: 52px; width: auto; filter: drop-shadow(0 0 12px rgba(244, 196, 48, .5)); } .logo-img-sm { height: 34px; } /* El escudo del Ejército es a color y muy detallado: halo dorado más sutil y un poco más de tamaño para que se lea bien. */ .logo-escudo { filter: drop-shadow(0 0 10px rgba(244, 196, 48, .35)); } /* Escudo del Ejército (PNG recortado a su contenido, sin márgenes): más grande y pegado al texto. */ .login-logo .logo-escudo { height: 100px; } .sidebar-logo .logo-escudo { height: 60px; } /* Emblema institucional "D" fijo, sobre el bloque de usuario en el sidebar. */ .emblema-perfil { display: flex; justify-content: center; padding: 4px 0 12px; } .emblema-perfil img { height: 92px; width: auto; filter: drop-shadow(0 0 14px rgba(46, 139, 240, .35)); } /* Insignia de unidad (BAICC) fija en la esquina inferior derecha, en todas las vistas. Decorativa: no intercepta clics. */ .insignia-baicc { position: fixed; right: 22px; bottom: 20px; height: 104px; width: auto; z-index: 6; /* sobre el contenido, bajo los modales */ pointer-events: none; opacity: .96; /* Levitación + halo cian que respira (estilo gamer/HUD). El filter y el transform se animan en los keyframes. */ animation: baicc-levita 4s ease-in-out infinite; } /* Flota arriba/abajo y el aura cian late más fuerte al elevarse, con una sombra de "suelo" más suave (sensación de levitación). */ @keyframes baicc-levita { 0%, 100% { transform: translateY(0); filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .55)) drop-shadow(0 0 8px rgba(56, 189, 248, .35)); } 50% { transform: translateY(-10px); filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .42)) drop-shadow(0 0 24px rgba(56, 189, 248, .65)); } } @media (max-width: 900px) { .insignia-baicc { height: 64px; right: 12px; bottom: 12px; } .emblema-perfil img { height: 64px; } } /* En el hilo de respuesta la caja de seguimiento vive abajo-derecha: la insignia se atenúa para no tapar el botón de enviar. */ .app:has(.content-answer:not(.hidden)) .insignia-baicc { opacity: .22; } /* Lema institucional con aspecto de metal dorado ENVEJECIDO/patinado: degradado metálico recortado al texto + biselado (grabado) con sombras. */ .login-subtitle { margin: 8px 0 28px; font-size: 15.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; white-space: nowrap; /* Brillo metálico con tonos tarnidos/bronce (no oro brillante). */ background: linear-gradient(180deg, #e7d49a 0%, #b8973f 24%, #8c6e2a 46%, #5f491a 54%, #a9842f 70%, #d8be79 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; /* Grabado: sombra oscura abajo + reflejo claro arriba = relieve en metal. */ filter: drop-shadow(0 1px 0.5px rgba(0, 0, 0, .8)) drop-shadow(0 -1px 0 rgba(255, 238, 175, .18)); } .login-form { text-align: left; display: flex; flex-direction: column; gap: 6px; } .login-form label { font-size: 12.5px; color: var(--text-dim); margin-top: 8px; } .login-form input { background: var(--bg-input); border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--text); padding: 11px 14px; font-size: 14px; outline: none; } .login-form input:focus { border-color: var(--accent-dark); } .btn-primary { margin-top: 18px; /* Acciones: degradado azul institucional → azul brillante. */ background: linear-gradient(135deg, var(--azul-inst), var(--accent-dark)); border: none; color: #fff; font-weight: 600; padding: 11px; border-radius: var(--radius); font-size: 14px; cursor: pointer; transition: box-shadow .15s, filter .15s; } .btn-primary:hover { filter: brightness(1.15); box-shadow: 0 0 18px rgba(46, 139, 240, .45); } .btn-sm { margin-top: 0; padding: 8px 14px; } /* Fila de escudos institucionales bajo el formulario de ingreso. */ .login-escudos { display: flex; align-items: flex-end; /* todos apoyados sobre la misma línea de piso */ justify-content: center; gap: 16px; margin-top: 28px; padding-top: 22px; padding-bottom: 14px; /* espacio para la sombra del piso */ border-top: 1px solid rgba(255, 255, 255, .08); } /* Cada escudo va en un contenedor para poder dibujarle su sombra de piso. */ .escudo-wrap { position: relative; display: inline-flex; align-items: flex-end; } /* Sombra elíptica en el suelo, bajo cada escudo. Se encoge cuando el escudo queda de canto (sincronizada con el giro) para que parezca girar sobre el piso. */ .escudo-wrap::after { content: ""; position: absolute; left: 50%; bottom: -11px; width: 70%; height: 12px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .9), rgba(0, 0, 0, 0) 70%); filter: blur(1.5px); transform: translateX(-50%) scaleX(1); animation: sombra-gira 18s linear infinite; } /* Escudos grandes con giro continuo de 360°. El fondo del escudo del Ejército ya es transparente (procesado), así que ninguno necesita recuadro. */ .escudo-inst { height: 76px; width: auto; object-fit: contain; filter: drop-shadow(0 0 7px rgba(56, 189, 248, .25)); animation: girar-escudo 18s linear infinite; } /* Desfase de cada escudo (y su sombra) para que no giren todos sincronizados. */ .escudo-wrap:nth-child(2) .escudo-inst, .escudo-wrap:nth-child(2)::after { animation-delay: -6s; } .escudo-wrap:nth-child(3) .escudo-inst, .escudo-wrap:nth-child(3)::after { animation-delay: -12s; } .escudo-inst:hover { filter: drop-shadow(0 0 12px rgba(56, 189, 248, .6)); animation-play-state: paused; /* se detiene al pasar el cursor para verlo */ } @keyframes girar-escudo { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } /* La sombra es más ancha cuando el escudo da la cara (0°/180°/360°) y más estrecha cuando queda de canto (90°/270°). */ @keyframes sombra-gira { 0%, 50%, 100% { transform: translateX(-50%) scaleX(1); opacity: .9; } 25%, 75% { transform: translateX(-50%) scaleX(.35); opacity: .5; } } @media (prefers-reduced-motion: reduce) { .escudo-inst, .escudo-wrap::after { animation: none; } } /* ============ LAYOUT ============ */ .app { display: flex; /* Divididas por --zoom-app para seguir llenando la pantalla (ver :root). */ height: calc(100vh / var(--zoom-app)); height: calc(100dvh / var(--zoom-app)); } /* ---- Sidebar ---- */ .sidebar { width: 240px; flex-shrink: 0; background: var(--bg-sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; justify-content: space-between; padding: 18px 12px 14px; } .sidebar-logo { display: flex; align-items: center; gap: 4px; color: var(--text); font-family: var(--font-cond); font-weight: 700; letter-spacing: 2px; font-size: 15px; padding: 4px 8px 16px; } .btn-new-thread { width: 100%; display: flex; align-items: center; gap: 8px; background: var(--bg-input); border: 1px solid var(--border-strong); color: var(--text); padding: 10px 12px; border-radius: 999px; font-size: 13.5px; cursor: pointer; transition: border-color .15s; } .btn-new-thread:hover { border-color: var(--accent-dark); } .btn-new-plus { color: var(--accent); font-weight: 700; } .btn-new-thread kbd { margin-left: auto; font-size: 10.5px; color: var(--text-dim); border: 1px solid var(--border-strong); border-radius: 5px; padding: 1px 5px; font-family: var(--font); } /* Menú como panel elevado: relieve sobre el fondo del sidebar (sombra + borde tenue + brillo superior interno). */ .sidebar-nav { margin-top: 18px; display: flex; flex-direction: column; gap: 2px; padding: 8px; background: rgba(255, 255, 255, .035); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: 0 10px 24px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06); } .nav-item { display: flex; align-items: center; gap: 10px; color: var(--text-dim); padding: 8px 10px; border-radius: 8px; font-size: 14px; } .nav-item:hover { background: rgba(255, 255, 255, .04); color: var(--text); } .nav-item.active { color: var(--text); background: rgba(32, 184, 205, .08); } .nav-icon { width: 18px; text-align: center; } /* Ícono de imagen en un ítem del menú (p. ej. el escudo de «Instalar aplicación»): mismo ancho que los de texto para que la columna alinee. */ .nav-icon-img { height: 20px; object-fit: contain; flex-shrink: 0; } /* La parte superior del sidebar (logo, botón, menú e historial) ocupa el alto disponible; el bloque de usuario queda fijo abajo. min-height:0 es imprescindible para que un hijo flex con overflow pueda encogerse y activar su propio scroll en vez de empujar al resto. */ .sidebar-top { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } /* La lista de conversaciones toma el espacio sobrante y hace scroll propio cuando hay más historial del que cabe (el bloque de usuario no se mueve). */ .sidebar-threads { margin-top: 22px; flex: 1 1 auto; min-height: 0; overflow-y: auto; } .threads-label { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--accent); opacity: .75; padding: 8px 10px 4px; } .thread-link { display: block; color: var(--text-dim); font-size: 13.5px; padding: 6px 10px; border-radius: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .thread-link:hover { background: rgba(255, 255, 255, .04); color: var(--text); } .user-chip { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius); cursor: pointer; border: 1px solid transparent; } .user-chip:hover { border-color: var(--border-strong); } .user-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-dark); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .user-meta { display: flex; flex-direction: column; line-height: 1.25; } .user-name { font-size: 13px; } .user-role { font-size: 11px; color: var(--text-dim); } .user-caret { margin-left: auto; color: var(--text-dim); } /* ---- Main ---- */ .main { flex: 1; overflow-y: auto; position: relative; } .content { max-width: 760px; margin: 0 auto; padding: 32px 24px 120px; } /* La caja de seguimiento va fija al borde inferior: el hilo reserva su alto REAL (lo mide app.js en --followup-alto) para que los botones del final de la respuesta nunca queden debajo de ella. Doble clase a propósito: así gana sobre el padding de .content de las consultas de móvil, que van después. */ .content.content-answer { padding-bottom: var(--followup-alto, 240px); } /* ============ INICIO ============ */ .content-home { /* Divididas por --zoom-app para seguir llenando la pantalla (ver :root). */ min-height: calc(100vh / var(--zoom-app)); min-height: calc(100dvh / var(--zoom-app)); display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: calc(18vh / var(--zoom-app)); /* La caja de búsqueda del inicio es más ancha que la columna de lectura (pedido del usuario): este contenedor la deja crecer hasta 1000px. */ max-width: 1000px; } #home-searchbox { width: 100%; } .home-title { font-family: var(--font-cond); font-size: clamp(24px, 5vw, 34px); font-weight: 600; letter-spacing: 1px; margin-bottom: 28px; } .searchbox { width: 100%; background: var(--bg-input); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 14px 14px 10px; box-shadow: var(--sombra-panel); transition: border-color .15s, box-shadow .15s; } .searchbox:focus-within { border-color: var(--accent-dark); box-shadow: var(--sombra-panel), 0 0 0 3px rgba(56, 189, 248, .15); } .searchbox-input { width: 100%; background: transparent; border: none; resize: none; color: var(--text); font-family: var(--font); font-size: 15.5px; line-height: 1.5; outline: none; } #home-input { min-height: 150px; } .searchbox-input::placeholder { color: var(--text-dim); } .searchbox-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; /* muchos chips (filtro, plantilla, perfil): que bajen de línea */ gap: 8px; margin-top: 8px; } .searchbox-left { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } /* Cuando la fila de chips envuelve, el botón de enviar queda anclado abajo-derecha. */ .searchbox-toolbar .btn-send { margin-left: auto; align-self: flex-end; flex-shrink: 0; } .model-toggle { display: flex; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 2px; } .model-btn { background: transparent; border: none; color: var(--text-dim); font-size: 12.5px; font-weight: 600; padding: 4px 14px; border-radius: 999px; cursor: pointer; } .model-btn.active { background: linear-gradient(135deg, var(--azul-inst), var(--accent-dark)); color: #fff; } .chip-btn { background: transparent; border: 1px solid var(--border-strong); color: var(--text-dim); font-size: 12.5px; padding: 5px 12px; border-radius: 999px; cursor: pointer; } .chip-btn:hover { color: var(--text); border-color: var(--accent-dark); } .btn-send { background: linear-gradient(135deg, var(--azul-inst), var(--accent-dark)); border: none; color: #fff; width: 34px; height: 34px; border-radius: 50%; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: box-shadow .15s, filter .15s; } .btn-send:hover { filter: brightness(1.15); box-shadow: 0 0 16px rgba(46, 139, 240, .5); } .suggestions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 22px; } .suggestion { background: transparent; border: 1px solid var(--border-strong); color: var(--text-dim); font-size: 13px; padding: 7px 14px; border-radius: 999px; cursor: pointer; transition: all .15s; } .suggestion:hover { color: var(--accent); border-color: var(--accent-dark); } .home-footer { margin-top: 40px; font-size: 12.5px; color: var(--text-dim); } /* ============ RESPUESTA ============ */ .thread-question { font-family: var(--font-cond); font-size: clamp(20px, 4.2vw, 28px); overflow-wrap: break-word; font-weight: 600; letter-spacing: .5px; margin-bottom: 22px; } /* Etiquetas monoespaciadas del diseño aprobado: // FUENTES, // RESPUESTA… */ .block-label { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); margin: 22px 0 12px; } .block-label::before { content: "// "; color: var(--accent); } .block-icon { color: var(--text-dim); } .sources-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .source-card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--sombra-panel); transition: border-color .15s, box-shadow .15s; } .source-card:hover { border-color: var(--accent-dark); box-shadow: var(--sombra-panel), 0 0 14px rgba(56, 189, 248, .18); } .source-title { color: var(--text); font-size: 12.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .source-meta { font-size: 11.5px; color: var(--text-dim); } .source-meta b { color: var(--accent); } .source-more .source-title { color: var(--text-dim); } .reasoning { margin-top: 16px; border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; font-size: 13.5px; color: var(--text-dim); } .reasoning summary { cursor: pointer; color: var(--text-dim); font-family: var(--font-mono); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; list-style: none; } .reasoning summary::before { content: "// "; color: var(--accent); } .reasoning p { margin-top: 8px; } .answer-body { font-size: 15.5px; } .answer-body p + p { margin-top: 14px; } /* Aviso de cambio de modelo (modo desarrollador): el orquestador alterna Gemini ↔ modelo open según la intención y el hilo lo anuncia. */ .modelo-cambio { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .5px; color: var(--accent); border: 1px dashed var(--border-strong); border-radius: 8px; padding: 6px 10px; margin-bottom: 12px; width: fit-content; } /* Bloques de código ``` (rol desarrollador): monoespaciado, fondo hundido y scroll horizontal propio para que una línea larga no ensanche el hilo. */ .answer-body .code-block { margin: 12px 0; padding: 12px 14px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .08); border-radius: 8px; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.5; overflow-x: auto; white-space: pre; } .cite { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; background: rgba(56, 189, 248, .14); color: var(--accent); border: 1px solid rgba(56, 189, 248, .35); border-radius: 5px; padding: 0 4px; vertical-align: 2px; box-shadow: 0 0 8px rgba(56, 189, 248, .25); /* glow cian del diseño */ } .cite:hover { background: var(--accent-dark); color: #fff; box-shadow: 0 0 12px rgba(46, 139, 240, .55); } .cursor-blink::after { content: "▌"; color: var(--accent); animation: blink .9s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } .answer-actions { display: flex; align-items: center; gap: 8px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--border); } .action-btn { background: transparent; border: 1px solid var(--border-strong); color: var(--text-dim); font-size: 12.5px; padding: 6px 12px; border-radius: 999px; cursor: pointer; } .action-btn:hover { color: var(--text); border-color: var(--accent-dark); } .answer-meta { margin-left: auto; font-size: 12px; color: var(--text-dim); } /* ============ CALIFICACIÓN DE LA RESPUESTA (👍/👎) ============ */ .fb-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12.5px; color: var(--text-dim); } .fb-btn { background: transparent; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--text-dim); font-size: 15px; line-height: 1; padding: 5px 10px; cursor: pointer; transition: transform .12s ease, border-color .12s ease, background .12s ease; } .fb-btn:hover { border-color: var(--accent-dark); transform: translateY(-1px); } /* Voto elegido: queda encendido para que se vea qué calificó el usuario. */ .fb-btn.sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); } .fb-gracias { font-size: 12px; color: var(--accent); } .fb-panel { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-raised); } .fb-titulo { margin: 0 0 8px; font-size: 12.5px; color: var(--text); } .fb-razones { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } /* Razón marcable: el checkbox real queda oculto (accesible por teclado) y la píldora es la cara visible. */ .fb-chip { display: inline-flex; align-items: center; border: 1px solid var(--border-strong); border-radius: 999px; padding: 5px 12px; font-size: 12px; color: var(--text-dim); cursor: pointer; } .fb-chip input { position: absolute; opacity: 0; width: 0; height: 0; } .fb-chip:hover { border-color: var(--accent-dark); color: var(--text); } .fb-chip:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--text); } .fb-chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; } .fb-label { display: block; font-size: 12.5px; color: var(--text-dim); } .fb-texto { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--bg-input); color: var(--text); font-family: var(--font); font-size: 13px; resize: vertical; } .fb-texto:focus { outline: none; border-color: var(--accent); } .fb-acciones { display: flex; align-items: center; gap: 8px; margin-top: 10px; } .fb-restantes { margin-left: auto; font-size: 11px; color: var(--text-dim); } /* Caja de seguimiento */ .followup-wrap { position: fixed; bottom: 0; left: 240px; /* ancho sidebar */ right: 0; padding: 14px 24px 18px; background: linear-gradient(transparent, var(--bg) 35%); display: flex; flex-direction: column; align-items: center; } .searchbox-followup { /* Más ancha que la columna de lectura (pedido del usuario). */ max-width: 1000px; width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 22px; } .searchbox-followup .searchbox-input { padding-left: 6px; } /* Solo el textarea cede espacio: los chips y el botón de enviar no se aplastan (el "Perfil: BRICC" se partía en dos líneas). */ .searchbox-followup .chip-btn, .searchbox-followup .dd-hud, .searchbox-followup .btn-send { flex-shrink: 0; white-space: nowrap; } #followup-input { min-height: 100px; } .queue-hint { margin-top: 8px; font-size: 12.5px; color: var(--warn); } .queue-cancel { margin-left: 10px; padding: 2px 10px; font-size: 12px; cursor: pointer; color: var(--warn); background: transparent; border: 1px solid var(--warn); border-radius: 6px; } .queue-cancel:hover { background: var(--warn); color: var(--bg, #fff); } /* ============ HISTORIAL ============ */ .page-title { font-family: var(--font-cond); font-size: 26px; font-weight: 600; letter-spacing: 1px; margin-bottom: 22px; } .page-sub { color: var(--text-dim); font-weight: 400; font-size: 17px; } .library-list { display: flex; flex-direction: column; gap: 10px; } .library-item { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; } .library-item:hover { border-color: var(--accent-dark); } .library-q { color: var(--text); font-size: 15px; } .library-meta { color: var(--text-dim); font-size: 12.5px; } /* Botón de eliminar conversación (Historial y recientes del sidebar). */ .conv-del { background: none; border: none; cursor: pointer; color: var(--text-dim); font-size: 13px; line-height: 1; padding: 2px 5px; border-radius: 6px; opacity: 0; transition: opacity .12s, color .12s, background .12s; } .conv-del:hover { color: var(--err); background: rgba(216, 106, 106, .14); opacity: 1; } /* En el sidebar: el ítem es una fila; el texto se trunca y el bote aparece al hover. */ .thread-link { display: flex; align-items: center; gap: 6px; } .thread-link-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .thread-link:hover .conv-del { opacity: .65; } /* En las tarjetas del Historial: bote arriba-derecha, siempre visible. */ .library-item { position: relative; } .library-item .conv-del { position: absolute; top: 10px; right: 12px; opacity: .55; } .library-item:hover .conv-del { opacity: .9; } /* ---------- Adjuntos del usuario (PDF/Word/imagen en el chat) ---------- */ .adjunto-chip { display: flex; align-items: center; gap: 8px; margin: 8px 4px 2px; padding: 6px 12px; background: var(--bg-input); border: 1px solid var(--accent-dark); border-radius: 999px; font-size: 12.5px; color: var(--text); box-shadow: 0 0 12px rgba(46, 139, 240, .18); } .adjunto-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; } .adjunto-estado { color: var(--text-dim); font-size: 11.5px; } .adjunto-quitar { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--text-dim); font-size: 12px; line-height: 1; padding: 2px 5px; border-radius: 6px; } .adjunto-quitar:hover { color: var(--err); background: rgba(216, 106, 106, .14); } .adjuntar-btn { cursor: pointer; } /* ---------- Diálogo de confirmación propio ---------- */ .modal-card-sm { max-width: 440px; } .confirm-acciones { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; } .btn-peligro { background: linear-gradient(135deg, #b5302a, var(--err)); } .btn-peligro:hover { filter: brightness(1.08); } /* ============ ADMIN ============ */ .admin-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; } .admin-search { flex: 1; min-width: 170px; /* al envolver la toolbar, el buscador no se aplasta */ background: var(--bg-input); border: 1px solid var(--border-strong); border-radius: 999px; color: var(--text); padding: 8px 16px; font-size: 13.5px; outline: none; } .admin-search:focus { border-color: var(--accent-dark); } .doc-table { width: 100%; border-collapse: collapse; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; font-size: 13.5px; box-shadow: var(--sombra-panel); } .doc-table th, .doc-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); } .doc-table th { color: var(--text-dim); font-size: 11.5px; text-transform: uppercase; letter-spacing: .8px; font-weight: 600; } .doc-table tr:last-child td { border-bottom: none; } .doc-table tbody tr:hover { background: rgba(255, 255, 255, .025); } .badge { font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; } .badge-ok { background: rgba(63, 178, 127, .14); color: var(--ok); } .badge-busy { background: rgba(217, 162, 60, .14); color: var(--warn); } .badge-err { background: rgba(216, 106, 106, .14); color: var(--err); } .row-actions { font-size: 12.5px; white-space: nowrap; position: relative; } /* Menú "Acciones ▾" por usuario. Va con position:fixed (la tabla tiene overflow:hidden y lo recortaría); admin.js calcula top/left al abrirlo. */ .acc-btn { font-size: 12px; padding: 5px 12px; } .acc-menu { position: fixed; z-index: 90; min-width: 210px; padding: 6px; background: var(--bg-raised); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0, 0, 0, .45); display: flex; flex-direction: column; gap: 2px; } .acc-menu a { display: block; padding: 8px 12px; border-radius: 6px; color: var(--text); text-decoration: none; font-size: 12.5px; white-space: nowrap; } .acc-menu a:hover { background: rgba(255, 255, 255, .06); color: var(--accent); } .acc-menu a.peligro { color: var(--err); } .acc-menu a.peligro:hover { background: rgba(229, 90, 90, .12); color: var(--err); } .admin-footer { margin-top: 14px; font-size: 12.5px; color: var(--text-dim); } /* ============ ADMIN: DASHBOARD CON PESTAÑAS ============ */ .content-admin { max-width: 980px; } .admin-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 22px; } .admin-tab { background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--text-dim); font-size: 13.5px; padding: 9px 14px; cursor: pointer; margin-bottom: -1px; } .admin-tab:hover { color: var(--text); } .admin-tab.active { color: var(--accent); border-bottom-color: var(--accent); text-shadow: 0 0 12px rgba(56, 189, 248, .4); } /* Tarjetas de signos vitales / métricas */ .vital-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; } .vital-card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--sombra-panel); } .vital-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); display: flex; align-items: center; gap: 6px; } /* Números de KPI destacados (diseño aprobado): condensados y con glow. */ .vital-value { font-family: var(--font-cond); font-size: 28px; font-weight: 700; margin-top: 6px; text-shadow: 0 0 16px rgba(56, 189, 248, .30); } .vital-value small { font-size: 13px; color: var(--text-dim); font-weight: 400; } .vital-sub { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; } .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } .dot-ok { background: var(--ok); box-shadow: 0 0 6px var(--ok); } .dot-err { background: var(--err); box-shadow: 0 0 6px var(--err); } .dot-warn { background: var(--warn); } /* Sparkline simple con barras */ .sparkline { display: flex; align-items: flex-end; gap: 6px; height: 120px; padding: 12px 14px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); } .spark-bar { flex: 1; background: linear-gradient(var(--accent), var(--accent-dark)); border-radius: 4px 4px 0 0; min-height: 4px; position: relative; } .spark-bar span { position: absolute; bottom: -18px; left: 0; right: 0; text-align: center; font-size: 10px; color: var(--text-dim); } /* Plantillas */ .plantilla-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; } .plantilla-card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--sombra-panel); } .plantilla-head { display: flex; align-items: center; gap: 8px; } .plantilla-icono { font-size: 18px; } .plantilla-nombre { font-weight: 600; font-size: 14px; } .plantilla-desc { font-size: 12.5px; color: var(--text-dim); margin: 6px 0 10px; } .plantilla-acciones { display: flex; gap: 8px; } .mini-btn { background: transparent; border: 1px solid var(--border-strong); color: var(--text-dim); font-size: 11.5px; padding: 4px 10px; border-radius: 999px; cursor: pointer; } .mini-btn:hover { color: var(--text); border-color: var(--accent-dark); } .mini-btn.peligro:hover { color: var(--err); border-color: var(--err); } /* Acciones destructivas en tablas (Eliminar usuario) */ .row-actions a.peligro { color: var(--err); } /* Selects con estética de chip */ select.chip-btn { appearance: none; } /* Configuración */ .config-form { display: flex; flex-direction: column; gap: 14px; max-width: 640px; } .config-row { display: flex; flex-direction: column; gap: 5px; } .config-row label { font-size: 13px; color: var(--text); } .config-row .config-desc { font-size: 11.5px; color: var(--text-dim); } .config-row input, .config-row textarea { background: var(--bg-input); border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--text); padding: 9px 12px; font-size: 13.5px; font-family: var(--font); outline: none; } .config-row input:focus, .config-row textarea:focus { border-color: var(--accent-dark); } .config-row textarea { resize: vertical; min-height: 90px; } /* Tabla de logs compacta */ .log-table { font-size: 12.5px; } .log-table td { font-family: ui-monospace, "Cascadia Code", monospace; } /* ============ SESIÓN Y ESTADOS ============ */ .login-error { margin-top: 10px; font-size: 12.5px; color: var(--err); background: rgba(216, 106, 106, .1); border: 1px solid rgba(216, 106, 106, .35); border-radius: 8px; padding: 8px 12px; } .demo-banner { position: sticky; top: 0; z-index: 30; text-align: center; font-size: 12.5px; font-weight: 600; color: #2b2008; background: var(--warn); padding: 7px 16px; } .logout-btn { margin-left: auto; background: transparent; border: none; color: var(--text-dim); font-size: 15px; cursor: pointer; padding: 4px 6px; border-radius: 6px; } .logout-btn:hover { color: var(--err); background: rgba(216, 106, 106, .12); } .answer-error { color: var(--warn); } .library-empty { color: var(--text-dim); font-size: 14px; } /* ============ HILO MULTI-PREGUNTA ============ */ .qa-block + .qa-block { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--border); } /* ============ MODAL: VISOR DE FRAGMENTO ============ */ .modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, .55); display: flex; align-items: center; justify-content: center; padding: 24px; } .modal-card { width: 100%; max-width: 640px; max-height: calc(80vh / var(--zoom-app)); /* ver --zoom-app en :root */ background: var(--bg-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 20px 22px; display: flex; flex-direction: column; box-shadow: var(--sombra-panel), 0 0 50px rgba(46, 139, 240, .12); } .modal-head { display: flex; align-items: flex-start; gap: 12px; } .modal-title { font-size: 16px; font-weight: 600; flex: 1; } .modal-close { background: transparent; border: none; color: var(--text-dim); font-size: 15px; cursor: pointer; padding: 2px 6px; border-radius: 6px; } .modal-close:hover { color: var(--text); background: rgba(255, 255, 255, .06); } .modal-sub { font-size: 12.5px; color: var(--accent); margin: 4px 0 12px; } .modal-body { overflow-y: auto; font-size: 14px; line-height: 1.7; color: var(--text); background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; white-space: pre-wrap; } /* ============ CRÉDITOS: EL OLIMPO (modal #creditos-modal) ============ Los creadores como semidioses: mármol nocturno, oro que respira y rayos de luz girando al fondo. Todo CSS puro (sin assets: regla del air-gap). */ /* Entrada: el velo se funde y la tarjeta desciende. Al quitar .hidden (display:none → visible) las animaciones arrancan solas cada vez. */ #creditos-modal { animation: creditos-velo .3s ease-out; } #creditos-modal .modal-card { animation: creditos-entra .38s cubic-bezier(.2, .9, .3, 1.15); } @keyframes creditos-velo { from { opacity: 0; } to { opacity: 1; } } @keyframes creditos-entra { from { opacity: 0; transform: translateY(-26px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Salida: app.js pone .cerrando, espera el final de la animación y solo entonces añade .hidden (sin la espera, el modal desaparecería en seco). */ #creditos-modal.cerrando { animation: creditos-velo .28s ease-in reverse forwards; } #creditos-modal.cerrando .modal-card { animation: creditos-sale .28s ease-in forwards; } @keyframes creditos-sale { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-18px) scale(.97); } } @media (prefers-reduced-motion: reduce) { #creditos-modal, #creditos-modal .modal-card, #creditos-modal.cerrando, #creditos-modal.cerrando .modal-card { animation: none; } } .creditos-card { border-color: rgba(212, 175, 55, .45); box-shadow: var(--sombra-panel), 0 0 90px rgba(212, 175, 55, .18), inset 0 1px 0 rgba(255, 226, 130, .25); background: radial-gradient(ellipse 120% 60% at 50% -10%, rgba(212, 175, 55, .14), transparent 60%), var(--bg-raised); } .creditos-olimpo { position: relative; overflow: hidden; white-space: normal; text-align: center; padding: 26px 22px 20px; background: radial-gradient(ellipse 90% 45% at 50% 0%, rgba(212, 175, 55, .10), transparent 65%), var(--bg-input); border-color: rgba(212, 175, 55, .30); } /* Título en oro vivo: gradiente recorrido por un destello (background-clip). */ .olimpo-titulo { position: relative; font-family: var(--font-cond); font-size: clamp(20px, 4vw, 27px); letter-spacing: 3px; background: linear-gradient(100deg, #8a6d1f 0%, #d4af37 28%, #fff3c4 50%, #d4af37 72%, #8a6d1f 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 14px rgba(212, 175, 55, .35)); animation: olimpo-destello 5s ease-in-out infinite; } @keyframes olimpo-destello { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } } .olimpo-panteon { margin-top: 20px; position: relative; list-style: none; display: grid; gap: 14px; } /* Cada semidiós sobre su pedestal: placa de mármol oscuro con vetas de oro, laureles a los flancos y entrada escalonada desde las alturas. */ .semidios { position: relative; padding: 14px 46px 12px; background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015)); border: 1px solid rgba(212, 175, 55, .35); border-bottom: 3px solid rgba(212, 175, 55, .55); border-radius: 10px; opacity: 0; animation: semidios-desciende .7s ease-out forwards; transition: box-shadow .25s, transform .25s; } .semidios:nth-child(1) { animation-delay: .15s; } .semidios:nth-child(2) { animation-delay: .35s; } .semidios:nth-child(3) { animation-delay: .55s; } @keyframes semidios-desciende { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } } .semidios:hover { box-shadow: 0 6px 26px rgba(212, 175, 55, .22); transform: translateY(-2px); } .semidios::before, .semidios::after { content: ""; position: absolute; top: 50%; translate: 0 -50%; width: 26px; height: 26px; background: url("../img/escudo_ejercito.png") center / contain no-repeat; filter: drop-shadow(0 0 6px rgba(212, 175, 55, .45)); } .semidios::before { left: 12px; } .semidios::after { right: 12px; } .semidios-nombre { display: block; font-size: 15.5px; letter-spacing: .5px; background: linear-gradient(100deg, #d4af37, #fff3c4 55%, #d4af37); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; } .semidios-nombre b { letter-spacing: 1px; } .olimpo-lema { position: relative; margin-top: 20px; font-size: 10.5px; letter-spacing: 5px; color: rgba(212, 175, 55, .55); } @media (prefers-reduced-motion: reduce) { .olimpo-titulo { animation: none; } .semidios { animation: none; opacity: 1; } } /* Formulario de cambio de clave (modal #clave-modal) */ #clave-form { white-space: normal; display: flex; flex-direction: column; gap: 12px; } #clave-form label { display: block; font-size: 12.5px; color: var(--text-dim); } #clave-form input { display: block; width: 100%; margin-top: 5px; padding: 9px 12px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; font-size: 14px; } #clave-form input:focus { outline: none; border-color: var(--accent); } #clave-form .btn-primary { margin-top: 4px; } /* ============ MOCKUPS: OJO DE CONTRASEÑA, CHAT, PLANTILLAS ============ */ .pass-wrap { position: relative; display: flex; } .pass-wrap input { flex: 1; padding-right: 42px; } .pass-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: var(--text-dim); font-size: 15px; cursor: pointer; padding: 4px 8px; border-radius: 6px; } .pass-toggle:hover { color: var(--text); } .speaker-label { margin: 0 0 4px; color: var(--text-dim); font-size: 12.5px; } .reasoning-body { white-space: pre-wrap; } select.action-btn { appearance: none; background: transparent; font-family: var(--font); } select.action-btn option { background: var(--bg-raised); color: var(--text); } /* ============ SIGNOS VITALES EN TIEMPO REAL ============ */ .vitales-canvas { width: 100%; height: 220px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-input); display: block; } .chart-leyenda { display: flex; align-items: center; gap: 18px; margin-top: 8px; font-size: 12px; color: var(--text-dim); } .leyenda-caja { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; } .leyenda-cpu { background: var(--accent); } .leyenda-ram { background: var(--warn); } .chart-valores { margin-left: auto; font-variant-numeric: tabular-nums; } /* ============ MODAL: FORMULARIOS DEL ADMIN ============ */ /* El listado de campos scrollea DENTRO del modal: con fichas largas (crear usuario: 10 campos) los últimos se salían de la tarjeta y quedaban fuera de la vista (bug real, 2026-08-01). Cabecera y pie quedan fijos. */ .modal-form { margin-top: 14px; max-width: none; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 6px; /* aire para la barra de scroll */ } .modal-form select { background: var(--bg-input); border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--text); padding: 9px 12px; font-size: 13.5px; outline: none; } .config-row-inline { flex-direction: row; align-items: center; gap: 10px; } .config-row-inline input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); } .modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 16px; } .form-error { flex: 1; font-size: 12.5px; color: var(--err); } /* ============ ADMIN: VISUALIZADOR DEL PIPELINE RAG ============ */ /* Con el visualizador visible, el admin usa el ancho real de la pantalla (la escena neuronal se ahoga en los 980px del resto de pestañas). */ .content-admin:has(.admin-pane[data-pane="pipeline"]:not(.hidden)) { max-width: 1560px; } .pipeline-controles { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; } /* Botón de conmutación de vista 2D/3D: resaltado cuando el 3D está activo. */ #pipeline-3d { cursor: pointer; min-width: 46px; font-family: var(--font-mono); } #pipeline-3d.active { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 12px rgba(56, 189, 248, .35); } .pipeline-controles .admin-search { flex: 1; } /* Escena: red neuronal completa en canvas */ .pipeline-escena { position: relative; width: 100%; aspect-ratio: 1240 / 480; background: radial-gradient(60% 90% at 50% 40%, rgba(33, 64, 154, .18), transparent 70%), repeating-linear-gradient(0deg, transparent 0 39px, rgba(56, 189, 248, .04) 39px 40px), repeating-linear-gradient(90deg, transparent 0 39px, rgba(56, 189, 248, .04) 39px 40px), #070a11; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--sombra-panel), inset 0 0 60px rgba(0, 0, 0, .55); overflow: hidden; } .pipeline-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; /* en 3D el arrastre táctil rota la escena, no desplaza */ } /* Espacio vectorial (vista alterna de la pestaña Pipeline): leyenda de tipos de manual bajo la nube de puntos. */ .espacio-leyenda { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; } .espacio-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--texto-suave, #9aa4b2); font-family: var(--font-mono); } .espacio-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } /* Paneles inferiores: ranking y respuesta */ .pipeline-abajo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; } .pipeline-panel { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--sombra-panel); min-height: 190px; } .pipeline-vacio { color: var(--text-dim); font-size: 13px; } .pv-fila { display: grid; grid-template-columns: minmax(0, 1.3fr) auto 1fr; align-items: center; gap: 10px; padding: 4px 0; } .pv-doc { font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pv-badges { display: flex; gap: 4px; } .pv-badge { font-family: var(--font-mono); font-style: normal; font-size: 9.5px; padding: 1px 6px; border-radius: 4px; } .pv-lex { background: rgba(244, 196, 48, .14); color: var(--dorado); } .pv-sem { background: rgba(56, 189, 248, .14); color: var(--accent); } .pv-barra { height: 8px; border-radius: 4px; background: #0d1320; overflow: hidden; } .pv-barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--azul-inst), var(--accent)); box-shadow: 0 0 8px rgba(56, 189, 248, .5); transition: width .7s cubic-bezier(.2, .8, .2, 1); } .pipeline-respuesta { font-size: 14px; line-height: 1.65; color: var(--text); max-height: 200px; overflow-y: auto; white-space: pre-wrap; } .pipeline-respuesta:not(:empty)::after { content: "▌"; color: var(--accent); animation: pv-cursor .9s steps(1) infinite; } @keyframes pv-cursor { 50% { opacity: 0; } } .pv-latencias { margin-top: 10px; border-collapse: collapse; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-dim); } .pv-latencias td { padding: 2px 14px 2px 0; } .pv-latencias tr:last-child td { color: var(--dorado); font-weight: 700; } @media (max-width: 1100px) { .pipeline-abajo { grid-template-columns: 1fr; } } /* ============ RESPONSIVE ============ */ @media (max-width: 860px) { /* El sidebar deja de ocupar espacio en el flujo (el .main ya usa el ancho completo) y pasa a ser un panel superpuesto oculto por defecto, que se desliza encima del contenido con el botón hamburguesa (#sidebar-abrir-movil, ver más abajo) — antes era display:none sin ninguna forma de reabrirlo. */ .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 70; transform: translateX(-100%); transition: transform .3s ease; box-shadow: var(--sombra-panel); } .app.sidebar-movil-abierta .sidebar { transform: translateX(0); } .followup-wrap { left: 0; } .sources-row { grid-template-columns: repeat(2, 1fr); } /* El botón hamburguesa es fixed arriba-izquierda: los títulos de las vistas necesitan despejarle el camino (antes "Historial"/"Superadministración" quedaban debajo del botón). */ .content { padding: 58px 18px 120px; } .content-home { padding-top: 32px; } /* el inicio se centra: no lo necesita */ /* En tablet/móvil el seguimiento usa todo el ancho: la insignia estorbaría. */ .insignia-baicc { display: none; } } /* ---- Teléfonos (≤560px): todo encaja sin desbordes ---- */ @media (max-width: 560px) { .content { padding: 56px 12px 110px; } /* Login compacto: tarjeta, escudos y marca escalan al ancho real. */ .login-card { padding: 28px 18px; } .login-logo .logo-escudo { height: 72px; } .login-logo h1 { font-size: 20px; letter-spacing: 2px; } .login-subtitle { font-size: clamp(11.5px, 3.6vw, 15.5px); letter-spacing: 1px; } .escudo-inst { height: 58px; } /* Caja de búsqueda del inicio: menos alto muerto en pantallas cortas. */ #home-input { min-height: 100px; } .suggestion { font-size: 12px; padding: 6px 11px; } /* Seguimiento: el textarea toma la fila completa y los botones bajan a su propia fila (antes la fila única desbordaba). */ .followup-wrap { padding: 10px 12px 12px; } .searchbox-followup { flex-wrap: wrap; gap: 8px; } .searchbox-followup .searchbox-input { flex: 1 1 100%; } #followup-input { min-height: 70px; } .searchbox-followup .btn-send { margin-left: auto; } /* Los selects-chip no fuerzan el ancho de su fila. */ select.chip-btn { max-width: 150px; } .adjunto-nombre { max-width: 55vw; } /* Modales a pantalla casi completa, con margen de respeto. */ .modal-overlay { padding: 12px; } .modal-card { padding: 16px 14px; max-height: calc(92vh / var(--zoom-app)); max-height: calc(92dvh / var(--zoom-app)); } /* KPIs en 2 columnas en vez de 1 sola tarjeta gigante por fila. */ .vital-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } } /* Botón hamburguesa y fondo del sidebar móvil: SOLO existen visualmente ≤860px (en desktop el sidebar ya está siempre visible o se pliega con ◀/▶). Mismo z-index familia que .sidebar-desplegar (60) pero un escalón arriba para quedar sobre el panel cuando ambos coexisten brevemente. */ .sidebar-abrir-movil { display: none; } .sidebar-fondo-movil { display: none; } @media (max-width: 860px) { .sidebar-abrir-movil { display: flex; align-items: center; justify-content: center; position: fixed; top: 12px; left: 12px; width: 34px; height: 34px; background: var(--bg-raised); border: 1px solid var(--border-strong); border-radius: 8px; color: var(--accent); font-size: 15px; cursor: pointer; z-index: 65; box-shadow: var(--sombra-panel); } .app.sidebar-movil-abierta .sidebar-abrir-movil { display: none; } /* El botón flotante ▶ es SOLO de escritorio (deshace el pliegue ◀). En móvil se superponía al ☰ en la misma esquina — dos flechas encima de la otra para dos mecanismos distintos: aquí manda el ☰. */ .sidebar-desplegar { display: none; } .sidebar-fondo-movil { display: block; position: fixed; inset: 0; z-index: 69; background: rgba(0, 0, 0, .55); } .sidebar-fondo-movil.hidden { display: none; } } /* ============ SUPERADMINISTRACIÓN (nivel dios) ============ */ :root { --peligro: #f87171; --verde: #34d399; } /* Layout: sidebar de secciones + contenido con subpestañas. */ .superadmin-layout { display: grid; grid-template-columns: 210px 1fr; gap: 22px; align-items: start; } .sa-nav { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 12px; } .sa-nav-item { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 10px; color: var(--text-dim); font-family: var(--font-cond); font-size: 15px; letter-spacing: .4px; text-align: left; cursor: pointer; transition: border-color .15s, color .15s, box-shadow .15s, transform .15s; } .sa-nav-item:hover { color: var(--text); border-color: var(--border-strong); } .sa-nav-item.active { color: var(--text); border-color: var(--accent); box-shadow: 0 0 12px rgba(56, 189, 248, .25), inset 3px 0 0 var(--accent); text-shadow: 0 0 10px rgba(56, 189, 248, .5); } .sa-nav-icono { font-size: 17px; } .sa-nav-peligro.active { border-color: var(--peligro); box-shadow: 0 0 12px rgba(248, 113, 113, .3), inset 3px 0 0 var(--peligro); text-shadow: 0 0 10px rgba(248, 113, 113, .5); } .sa-contenido { min-width: 0; } /* Entrada suave de los panes al cambiar de subpestaña. */ .admin-pane:not(.hidden) { animation: sa-entrar .16s ease-out; } /* Las tablas anchas (usuarios, trazas de la caja negra, costos por modelo…) escapaban del panel en pantallas angostas y arrastraban TODO el panel de lado (encabezado y filtros incluidos) al scrollear .main. Con esto cada panel scrollea SU tabla por separado, sin mover lo de arriba. Solo el explorador de BD (bd.js) ya traía su propio envoltorio .sa-scroll; esto cubre el resto (documentos, usuarios, logs, trazas, perfiles, costos, encuestas, planos…) sin tocar cada render JS uno por uno. */ .admin-pane { overflow-x: auto; } @keyframes sa-entrar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* Tarjetas KPI con borde superior en degradado y elevación al pasar. */ .vital-card { position: relative; transition: transform .15s, box-shadow .15s; } .vital-card::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; border-radius: 10px 10px 0 0; background: linear-gradient(90deg, var(--accent), transparent 70%); opacity: .55; } .vital-card:hover { transform: translateY(-2px); box-shadow: var(--sombra-panel); } /* Tarjeta que abre un detalle (p. ej. QUIÉNES son los usuarios activos): se anuncia como pulsable, porque una tarjeta que no lo es se ve idéntica. */ .vital-card-accion { cursor: pointer; } .vital-card-accion:hover { border-color: var(--accent-dark); } .vital-card-accion:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .vital-card-accion .vital-sub { color: var(--accent); } /* ============ CALIFICACIONES DE LAS RESPUESTAS (👍/👎) ============ */ .cal-barras { display: flex; flex-direction: column; gap: 8px; } .cal-barra-fila { display: flex; align-items: center; gap: 10px; font-size: 12.5px; } /* Etiqueta de ancho fijo: con anchos variables las barras arrancarían en distinta x y dejarían de ser comparables de un vistazo. */ .cal-barra-etq { flex: 0 0 260px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cal-barra-pista { flex: 1; height: 10px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; } .cal-barra-relleno { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-dark), var(--accent)); } .cal-barra-n { flex: 0 0 40px; text-align: right; color: var(--text); } .cal-caso { background: var(--bg-raised); border: 1px solid var(--border); border-left: 3px solid var(--err); /* la bandeja es de votos negativos */ border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px; } .cal-caso-head { display: flex; gap: 10px; align-items: baseline; font-size: 12px; color: var(--text-dim); } .cal-caso-quien { color: var(--text); font-weight: 600; } .cal-caso-fecha { margin-left: auto; } .cal-razones-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } .cal-chip { font-size: 11.5px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--text-dim); } .cal-chip-vacio { font-style: italic; } .cal-correccion { font-size: 13.5px; color: var(--text); margin: 6px 0; } .cal-sin-texto { color: var(--text-dim); font-style: italic; } .cal-contexto { margin-top: 8px; font-size: 12.5px; } .cal-contexto summary { cursor: pointer; color: var(--accent); } .cal-contexto p { margin: 8px 0 0; color: var(--text-dim); } .cal-contexto b { color: var(--text); } /* Gauges SVG (arcos) de Despliegue. */ .sa-gauges { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin-top: 14px; } .sa-gauge { width: 110px; margin: 0 auto; display: block; } .sa-gauge-valor { fill: var(--text); font-family: var(--font-cond); font-size: 20px; } .sa-gauge-rotulo { fill: var(--text-dim); font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .8px; text-transform: uppercase; } /* Texto monoespaciado utilitario (definiciones SQL, nombres de archivo). */ .sa-mono { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); word-break: break-all; } .sa-scroll { overflow-x: auto; } /* Explorador de BD: tabla de tablas + panel de detalle. */ .sa-bd-cols { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(320px, 1.2fr); gap: 20px; align-items: start; } .sa-bd-detalle { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 12px; padding: 16px; box-shadow: var(--sombra-panel); max-height: 560px; overflow-y: auto; } /* Consola SQL con estética de terminal (prompt // > cian). */ .sa-consola { display: flex; gap: 10px; background: #0b0f1a; border: 1px solid var(--border-strong); border-radius: 10px; padding: 12px 14px; box-shadow: inset 0 0 24px rgba(56, 189, 248, .05); } .sa-consola-prompt { color: var(--accent); font-family: var(--font-mono); font-size: 13px; padding-top: 2px; user-select: none; } .sa-consola textarea { flex: 1; background: transparent; border: none; outline: none; resize: vertical; color: var(--text); font-family: var(--font-mono); font-size: 13px; line-height: 1.5; } /* Zona de peligro: marco a rayas de obra y botón rojo con armado. */ .sa-peligro-marco { border: 2px solid transparent; border-radius: 14px; padding: 18px; background: linear-gradient(var(--bg-raised), var(--bg-raised)) padding-box, repeating-linear-gradient(45deg, var(--dorado) 0 14px, #0a0d14 14px 28px) border-box; box-shadow: 0 0 24px rgba(248, 113, 113, .12); } .sa-boton-rojo { position: relative; display: block; width: 100%; margin-top: 10px; padding: 16px; overflow: hidden; background: #2a1215; border: 1px solid var(--peligro); border-radius: 12px; color: var(--peligro); font-family: var(--font-cond); font-size: 16px; letter-spacing: 1.2px; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none; } .sa-boton-rojo-relleno { position: absolute; inset: 0; width: 0; background: rgba(248, 113, 113, .28); } .sa-boton-rojo.armando .sa-boton-rojo-relleno { animation: sa-armar 2s linear forwards; } @keyframes sa-armar { from { width: 0; } to { width: 100%; } } .sa-boton-rojo-texto { position: relative; } .sa-armado { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; } /* Planos SVG: nodos, aristas con flujo animado y estados. */ .planos-lienzo { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 12px; padding: 14px; box-shadow: var(--sombra-panel); } .plano-svg { width: 100%; height: auto; display: block; } .plano-nodo { cursor: pointer; } .plano-nodo rect { fill: #101522; stroke: var(--border-strong); stroke-width: 1.2; transition: stroke .15s, filter .15s; } .plano-nodo:hover rect { stroke: var(--accent); filter: drop-shadow(0 0 8px rgba(56, 189, 248, .5)); } .plano-nodo.vivo rect { stroke: var(--verde); } .plano-nodo.caido rect { stroke: var(--err); } .plano-nodo.externa rect { stroke-dasharray: 5 4; stroke: var(--dorado); } .plano-nodo.etapa rect { stroke: var(--azul-inst); } .plano-nodo.tabla rect { stroke: var(--border-strong); } .plano-titulo { fill: var(--text); font-family: var(--font-cond); font-size: 14px; letter-spacing: .4px; } .plano-sub { fill: var(--text-dim); font-family: var(--font-mono); font-size: 9.5px; } .plano-arista { fill: none; stroke: var(--accent); stroke-width: 1.4; opacity: .5; stroke-dasharray: 6 8; animation: sa-flujo 1.6s linear infinite; } .plano-arista.externa { stroke: var(--dorado); } @keyframes sa-flujo { to { stroke-dashoffset: -14; } } @media (prefers-reduced-motion: reduce) { .plano-arista { animation: none; } .admin-pane:not(.hidden) { animation: none; } .sa-boton-rojo.armando .sa-boton-rojo-relleno { animation-duration: 2s; } } @media (max-width: 1100px) { .superadmin-layout { grid-template-columns: 1fr; } .sa-nav { position: static; flex-direction: row; flex-wrap: wrap; } .sa-bd-cols { grid-template-columns: 1fr; } } /* ============ AJUSTES 2026-07-20 (pedidos del usuario) ============ */ /* Menú de secciones del superadmin: horizontal, arriba a la izquierda, junto al título (antes era columna lateral y sobraba espacio). */ .sa-cabecera { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 14px; } .sa-cabecera .page-title { margin: 0; } .superadmin-layout { display: block; } .sa-nav { flex-direction: row; flex-wrap: wrap; position: static; gap: 8px; } .sa-nav-item { padding: 8px 16px; font-size: 14px; } .sa-nav-item.active { box-shadow: 0 0 12px rgba(56, 189, 248, .25), inset 0 -3px 0 var(--accent); } .sa-nav-peligro.active { box-shadow: 0 0 12px rgba(248, 113, 113, .3), inset 0 -3px 0 var(--peligro); } /* Menú lateral desplegable. Solo en escritorio: en ≤860px el sidebar es un panel superpuesto position:fixed (media query de arriba) y esta regla, por venir después en el archivo, lo devolvía al flujo y dejaba un canal muerto de 240px a la izquierda en móvil/tablet. */ @media (min-width: 861px) { .sidebar { position: relative; } } .sidebar-plegar { position: absolute; top: 10px; right: 8px; width: 24px; height: 24px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 6px; color: var(--text-dim); font-size: 11px; cursor: pointer; z-index: 5; } .sidebar-plegar:hover { color: var(--accent); border-color: var(--accent); } .sidebar-desplegar { position: fixed; top: 12px; left: 12px; width: 30px; height: 30px; background: var(--bg-raised); border: 1px solid var(--border-strong); border-radius: 8px; color: var(--accent); font-size: 13px; cursor: pointer; z-index: 60; box-shadow: var(--sombra-panel); } /* El pliegue ya NO es display:none — se anima deslizando fuera de pantalla (margen negativo) con visibility retardada para sacar el foco del teclado. Los efectos "gamer" del tránsito viven al final del archivo. */ .sidebar { transition: margin-left .5s cubic-bezier(.75, -0.05, .2, 1), visibility 0s linear 0s; will-change: margin-left; } .app.sidebar-plegado .sidebar { margin-left: -240px; visibility: hidden; transition: margin-left .5s cubic-bezier(.75, -0.05, .2, 1), visibility 0s linear .5s; } .app.sidebar-plegado .followup-wrap { left: 0; } .followup-wrap { transition: left .5s cubic-bezier(.75, -0.05, .2, 1); } /* Visor de logs y planes EXPLAIN: bloque tipo terminal con scroll. */ .sa-log { background: #0b0f1a; border: 1px solid var(--border-strong); border-radius: 10px; padding: 12px 14px; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.55; color: var(--text-dim); max-height: 480px; overflow: auto; white-space: pre-wrap; word-break: break-word; } /* Caja negra: barra apilada con la anatomía de la latencia por etapa. */ .traza-barra { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: #0b0f1a; border: 1px solid var(--border); min-width: 160px; } .traza-barra span { display: block; height: 100%; } .traza-leyendas { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 12px; } .traza-leyenda { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-dim); } .traza-leyenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } /* La barra abre el modal con el detalle por etapa (ms y %). */ .traza-click { cursor: pointer; } .traza-click:hover { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(56, 189, 248, .18); } /* Saludo personalizado del inicio (por hora y grado del usuario). Serif elegante (estilo Claude) — sin CDNs en la red cerrada: pila de sistema Georgia/Iowan/Palatino. Aparece letra a letra (app.js). */ .home-saludo-wrap { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin-bottom: 8px; } .home-saludo { font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", "Times New Roman", serif; /* Al DOBLE (pedido 2026-07-22): 60px, con clamp para pantallas angostas y nombres largos (baja hasta 34px antes que romper el layout). */ font-size: clamp(34px, 5.2vw, 60px); font-weight: 500; letter-spacing: .3px; line-height: 1.15; color: var(--dorado); text-shadow: 0 0 22px rgba(244, 196, 48, .4); text-align: center; margin: 0; } /* Cada palabra es un bloque indivisible: el saludo solo salta de línea en los espacios (no en mitad de un nombre). */ .saludo-palabra { display: inline-block; white-space: nowrap; } /* Cada letra entra con fundido + subida + desenfoque que se disipa. */ .saludo-letra { display: inline-block; opacity: 0; animation: saludo-letra .55s cubic-bezier(.2, .7, .3, 1) forwards; } @keyframes saludo-letra { from { opacity: 0; transform: translateY(9px) scale(.94); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } } /* Botón de voz del saludo (síntesis del NAVEGADOR: cero costo de servidor). */ .saludo-voz { background: none; border: 1px solid var(--border); border-radius: 8px; color: var(--texto-suave, #8a93a6); font-size: 14px; padding: 2px 8px; cursor: pointer; transition: border-color .15s, color .15s; } .saludo-voz:hover { border-color: var(--dorado); color: var(--dorado); } .saludo-voz.activo { border-color: var(--dorado); color: var(--dorado); } @media (prefers-reduced-motion: reduce) { .saludo-letra { animation: none; opacity: 1; } } /* ============ ENCUESTAS (M12) ============ */ /* Vista del usuario: tarjetas con calificación por estrellas (1-5). */ .content-encuestas { max-width: 760px; margin: 0 auto; } .enc-card { background: var(--bg-panel, #10151f); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; margin-top: 16px; animation: sa-entrar .16s ease-out; } .enc-titulo { font-size: 17px; margin: 0 0 4px; color: var(--dorado); } .enc-desc { font-size: 13px; color: #8a93a6; margin: 0 0 12px; } .enc-pregunta { margin: 14px 0 6px; font-size: 14px; } .enc-gracias { color: var(--ok, #4ade80); font-size: 14px; margin: 6px 0 0; } .enc-error { color: var(--err, #f87171); font-size: 13px; margin: 8px 0 0; } /* Fila de 5 estrellas: radios ocultos, relleno hasta la elegida (JS). */ .enc-estrellas { display: flex; gap: 4px; } .enc-estrella { cursor: pointer; } .enc-estrella input { position: absolute; opacity: 0; pointer-events: none; } .enc-estrella span { font-size: 24px; color: #3a4458; transition: color .12s, transform .12s; display: inline-block; } .enc-estrella:hover span { transform: scale(1.15); } .enc-estrella.sel span { color: var(--dorado); text-shadow: 0 0 10px rgba(244, 196, 48, .45); } .enc-enviar { margin-top: 16px; } /* Resultados agregados (superadmin y supervisor). */ .enc-resultado { border: 1px solid var(--border); border-radius: 12px; padding: 14px 18px; margin-top: 12px; } .enc-res-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .enc-res-head b { font-size: 15px; } .enc-res-global { color: var(--dorado); font-size: 14px; } .enc-res-meta { color: #8a93a6; font-size: 12px; } .enc-res-pregunta { margin-top: 12px; font-size: 13px; } .enc-res-fila { display: flex; align-items: center; gap: 10px; margin-top: 4px; } .enc-res-estrellas { color: var(--dorado); letter-spacing: 2px; white-space: nowrap; } .enc-res-dist { display: flex; gap: 6px; align-items: flex-end; height: 34px; } .enc-res-dist .spark-bar { width: 22px; } /* ============ ANIMACIONES "GAMER" (pliegue del menú + encuestas) ============ */ /* Pedido del usuario 2026-07-21: que el menú lateral se oculte con una animación tipo gamer y que las ventanas de la encuesta también. */ /* --- Pliegue del menú: micro-glitch + pulso de energía por el canto --- */ .app.sidebar-animando .sidebar { animation: sidebar-glitch .38s steps(2, end); } @keyframes sidebar-glitch { 0% { transform: translateX(0); filter: none; } 25% { transform: translateX(-3px) skewY(.4deg); filter: hue-rotate(35deg) saturate(1.7) brightness(1.15); } 50% { transform: translateX(2px); filter: none; } 75% { transform: translateX(-1px) skewY(-.3deg); filter: hue-rotate(-30deg) brightness(1.1); } 100% { transform: none; filter: none; } } .sidebar::after { content: ""; position: absolute; top: -45%; right: 0; width: 2px; height: 45%; background: linear-gradient(180deg, transparent, #38bdf8 40%, #d0ecff 55%, #38bdf8 70%, transparent); opacity: 0; pointer-events: none; z-index: 6; } .app.sidebar-animando .sidebar::after { opacity: 1; animation: sidebar-energia .55s linear; box-shadow: 0 0 18px 2px rgba(56, 189, 248, .8); } @keyframes sidebar-energia { from { top: -45%; } to { top: 100%; } } /* El botón flotante ▶ aparece con pop y dos pulsos de radar (y luego calla). */ .sidebar-desplegar { overflow: visible; } .sidebar-desplegar:not(.hidden) { animation: btn-pop .45s cubic-bezier(.2, 1.6, .4, 1); } .sidebar-desplegar:not(.hidden)::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 1px solid rgba(56, 189, 248, .8); animation: btn-radar 1.4s ease-out 2; pointer-events: none; } @keyframes btn-pop { from { transform: scale(.4) rotate(-90deg); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes btn-radar { from { transform: scale(1); opacity: .9; } to { transform: scale(2.1); opacity: 0; } } /* --- Encuestas: encendido tipo CRT con escalonado (--i lo pone el JS) --- */ .enc-card, .enc-resultado { position: relative; animation: enc-encender .55s cubic-bezier(.2, .8, .3, 1) both; animation-delay: calc(var(--i, 0) * 110ms); } @keyframes enc-encender { 0% { opacity: 0; transform: translateY(16px) scale(.985); filter: brightness(2.2) saturate(0); } 35% { opacity: .6; } 45% { opacity: .22; } /* parpadeo de tubo al encender */ 60% { opacity: .9; filter: brightness(1.25) saturate(.6); } 100% { opacity: 1; transform: none; filter: none; } } /* Esquinas HUD (mira de interfaz de juego): crecen al pasar el mouse. */ .enc-card::before, .enc-card::after { content: ""; position: absolute; width: 16px; height: 16px; opacity: .75; pointer-events: none; transition: width .2s, height .2s, opacity .2s; } .enc-card::before { top: -1px; left: -1px; border-top: 2px solid #38bdf8; border-left: 2px solid #38bdf8; border-top-left-radius: 12px; } .enc-card::after { bottom: -1px; right: -1px; border-bottom: 2px solid #38bdf8; border-right: 2px solid #38bdf8; border-bottom-right-radius: 12px; } .enc-card:hover::before, .enc-card:hover::after { width: 34px; height: 34px; opacity: 1; } /* Estrella elegida: pop elástico + anillo de impacto dorado. */ .enc-estrella span { position: relative; } .enc-estrella.pop span { animation: estrella-pop .35s cubic-bezier(.2, 1.8, .4, 1); } @keyframes estrella-pop { 0% { transform: scale(.6) rotate(-20deg); } 60% { transform: scale(1.5) rotate(8deg); } 100% { transform: none; } } .enc-estrella.pop span::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(244, 196, 48, .8); animation: estrella-anillo .45s ease-out forwards; pointer-events: none; } @keyframes estrella-anillo { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.9); opacity: 0; } } /* Botón Enviar cargado: destello que lo recorre (estado "listo para usar"). */ .enc-enviar:not(:disabled) { position: relative; overflow: hidden; } .enc-enviar:not(:disabled)::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .35), transparent); animation: enviar-brillo 1.8s ease-in-out infinite; } @keyframes enviar-brillo { 0% { left: -60%; } 60%, 100% { left: 120%; } } /* Envío logrado: onda dorada + gracias con pop + partículas (las crea el JS). */ .enc-exito { animation: exito-flash .7s ease-out, enc-encender .45s ease-out; } @keyframes exito-flash { 0% { box-shadow: 0 0 0 0 rgba(244, 196, 48, .65); } 100% { box-shadow: 0 0 30px 10px rgba(244, 196, 48, 0); } } .enc-exito .enc-gracias { animation: gracias-pop .5s cubic-bezier(.2, 1.6, .4, 1) both; } @keyframes gracias-pop { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } } .enc-particula { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--c, #f4c430); box-shadow: 0 0 8px var(--c, #f4c430); pointer-events: none; animation: particula-vuelo .8s cubic-bezier(.1, .8, .3, 1) forwards; } @keyframes particula-vuelo { from { transform: translate(0, 0) scale(1); opacity: 1; } to { transform: translate(var(--dx, 0), var(--dy, 0)) scale(.2); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .sidebar, .app.sidebar-plegado .sidebar, .followup-wrap { transition: none; } .app.sidebar-animando .sidebar, .app.sidebar-animando .sidebar::after, .sidebar-desplegar:not(.hidden), .sidebar-desplegar:not(.hidden)::after, .enc-card, .enc-resultado, .enc-estrella.pop span, .enc-estrella.pop span::after, .enc-enviar:not(:disabled)::after, .enc-exito, .enc-exito .enc-gracias, .enc-particula { animation: none; } } /* ============ TOASTS (notificaciones) Y PROGRESO ============ */ /* Mismo lenguaje HUD de las encuestas: borde con glow y esquinas de mira. Éxito = verde del tema; error = rojo; warning = ámbar; info = cian. */ #toast-zone { position: fixed; top: 18px; right: 18px; display: flex; flex-direction: column; gap: 10px; z-index: 200; width: min(360px, calc(100vw - 36px)); pointer-events: none; } .toast { --tono: var(--accent); position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: var(--bg-raised); border: 1px solid var(--border-strong); border-left: 3px solid var(--tono); border-radius: var(--radius); box-shadow: 0 6px 24px rgba(0, 0, 0, .45), 0 0 14px -6px var(--tono); pointer-events: auto; animation: toast-entrar .28s cubic-bezier(.2, 1.2, .4, 1) both; } .toast-exito { --tono: var(--ok); } .toast-error { --tono: var(--err); } .toast-warn { --tono: var(--warn); } /* Esquina HUD inferior-derecha, como las tarjetas de encuesta. */ .toast::after { content: ""; position: absolute; bottom: -1px; right: -1px; width: 12px; height: 12px; border-bottom: 2px solid var(--tono); border-right: 2px solid var(--tono); border-bottom-right-radius: var(--radius); opacity: .8; pointer-events: none; } @keyframes toast-entrar { from { opacity: 0; transform: translateX(24px) scale(.97); filter: brightness(1.8); } to { opacity: 1; transform: none; filter: none; } } .toast-out { animation: toast-salir .25s ease-in forwards; } @keyframes toast-salir { to { opacity: 0; transform: translateX(24px) scale(.97); } } /* Icono según el tipo (dibujo con caracteres: sin recursos externos). */ .toast-icono { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--tono); color: var(--tono); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 1px; text-shadow: 0 0 8px var(--tono); } .toast-exito .toast-icono::before { content: "✓"; } .toast-error .toast-icono::before { content: "✕"; } .toast-warn .toast-icono::before { content: "!"; } .toast-info .toast-icono::before { content: "i"; } .toast-cuerpo { flex: 1; min-width: 0; } .toast-titulo { font-size: 13px; font-weight: 600; color: var(--text); } .toast-detalle { font-size: 12px; color: var(--text-dim); margin-top: 2px; white-space: pre-line; word-break: break-word; } .toast-cerrar { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 12px; padding: 2px 4px; flex-shrink: 0; } .toast-cerrar:hover { color: var(--text); } /* Barra de progreso del toast (subidas, procesos largos). */ .toast-barra { margin-top: 8px; height: 6px; border-radius: 3px; background: #0b0f1a; border: 1px solid var(--border); overflow: hidden; } .toast-barra-relleno { height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--accent-dark), var(--accent)); box-shadow: 0 0 10px var(--accent); transition: width .25s ease-out; } /* Sin % conocido: cometa que recorre la barra. */ .toast-barra-relleno.indeterminada { width: 38%; animation: barra-cometa 1.15s ease-in-out infinite; } @keyframes barra-cometa { 0% { margin-left: -38%; } 100% { margin-left: 100%; } } .toast-exito .toast-barra-relleno { background: linear-gradient(90deg, #2c7d59, var(--ok)); box-shadow: 0 0 10px var(--ok); } /* ---- Progreso de ingesta en la tabla del corpus ---- */ /* Mini-barra bajo el badge de estado mientras el worker procesa. */ .doc-progreso { margin-top: 5px; height: 4px; border-radius: 2px; background: #0b0f1a; border: 1px solid var(--border); overflow: hidden; min-width: 90px; } .doc-progreso > i { display: block; height: 100%; width: 38%; background: linear-gradient(90deg, var(--accent-dark), var(--accent)); box-shadow: 0 0 8px var(--accent); animation: barra-cometa 1.15s ease-in-out infinite; } /* Recién indexado: destello verde de confirmación en la fila. */ tr.doc-recien-ok { animation: fila-exito 1.6s ease-out; } @keyframes fila-exito { 0% { background: rgba(63, 178, 127, .28); } 100% { background: transparent; } } /* ---- Avatares y chips responsive (nombres largos sin aplastar) ---- */ .user-chip { min-width: 0; } .user-avatar { flex-shrink: 0; } .user-meta { flex: 1; min-width: 0; } .user-name, .user-role { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* Selectores de la caja de texto (filtro, plantilla, perfil): tope y elipsis para que un nombre de perfil largo no deforme la fila de chips. */ select.chip-btn { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---- Fichas de perfil del inicio (HUD premium, sutil) ---- */ #perfil-select.oculto-por-segmento { display: none; } .perfil-segmento { display: inline-flex; gap: 6px; flex-wrap: wrap; } .perfil-chip { position: relative; padding: 6px 14px; font-size: 12.5px; background: var(--bg-input); color: var(--text-dim); border: 1px solid var(--border-strong); border-radius: 999px; cursor: pointer; transition: color .15s, border-color .15s, box-shadow .2s, transform .12s; } .perfil-chip:hover { color: var(--text); border-color: var(--accent-dark); } .perfil-chip.activo { color: #dff3ff; border-color: var(--accent); box-shadow: 0 0 12px -3px var(--accent), inset 0 0 8px -5px var(--accent); text-shadow: 0 0 8px rgba(56, 189, 248, .55); } /* Clic: pulso elástico breve + anillo que se disipa (sutil, sin payasada). */ .perfil-chip.pulso { animation: perfil-pulso .3s cubic-bezier(.2, 1.4, .4, 1); } @keyframes perfil-pulso { 0% { transform: scale(.94); } 60% { transform: scale(1.04); } 100% { transform: none; } } .perfil-chip.pulso::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; border: 1px solid var(--accent); opacity: 0; animation: perfil-anillo .4s ease-out; pointer-events: none; } @keyframes perfil-anillo { from { opacity: .8; transform: scale(.95); } to { opacity: 0; transform: scale(1.18); } } /* ---- Dropdown HUD (reemplazo de los