/* ============================================================ Centro de Soporte Experiencity Sistema visual: consola de operaciones / centro de incidencias ============================================================ */ :root { --bg: #f1f4f9; --card: #ffffff; --input-bg: #ffffff; --text: #101828; --text-soft: #364152; --muted: #667085; --border: #e3e8ef; --border-soft: #edf1f7; --row-hover: #f8faff; --dotgrid-color: rgba(14, 116, 144, 0.05); --tooltip-bg: #0b1220; /* Logo grande de Experiencity de fondo en el contenido principal (a petición de Javier: no solo en el menú lateral, también "en el resto de la pantalla"). Ya lleva el alfa muy bajo horneado en el propio PNG (ver public/assets/logo-experiencity-watermark-*.png), así que aquí solo hace falta elegir qué versión (oscura/clara) toca según el tema. */ --watermark-logo: url('/assets/logo-experiencity-watermark-dark.png'); /* Teal/violeta de "consola de operaciones": el mismo espíritu que el azul corporativo de antes, pero con la personalidad real de la marca (el teal es el mismo tono que usa Experiencity para Valencia en su propia web; el violeta es el de Málaga). Rojo/ámbar de emergencias intactos: son la señal de "esto es urgente" en toda la app y no se deben mezclar con el color "de marca". */ --primary: #0e7490; --primary-dark: #155e75; --primary-soft: #e0f5f8; --primary-glow: rgba(14, 116, 144, 0.28); --accent: #7c3aed; --accent-soft: #f1e9fd; /* Color de acento por departamento/área de quien ha iniciado sesión (ver public/js/api.js: departmentInfoForUser, y más abajo los bloques [data-department]). Por defecto es el mismo --primary de siempre, así que Tecnología (el departamento "por defecto") no cambia nada; solo los bloques [data-department="..."] de más abajo lo redefinen para los demás departamentos. */ --department-accent: var(--primary); --danger: #d92d20; --danger-soft: #fef0ee; --success: #12805c; --success-soft: #e7f7ef; --warning: #b45309; --warning-soft: #fef3e2; --info: #0e7490; --info-soft: #e0f5f8; --priority-neutral-soft: #eef1f6; --sidebar-bg: #0b1220; --sidebar-bg-soft: #121a2c; --sidebar-text: #aab4c8; --sidebar-text-active: #ffffff; --sidebar-border: #1d2740; --radius: 12px; --radius-sm: 8px; --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04); --shadow-md: 0 2px 4px rgba(16, 24, 40, 0.04), 0 8px 20px rgba(16, 24, 40, 0.06); --font: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* ---------- Modo oscuro (estilo "Argus") ---------- Se activa poniendo data-theme="dark" en (ver /js/theme.js). Reutiliza el mismo sidebar oscuro que ya existía en el modo claro, pero ahora también el contenido principal pasa a un negro casi puro, sin "salto" de color entre el menú lateral y el resto de la página. */ :root[data-theme="dark"] { --bg: #0a0710; --card: #17101f; --input-bg: #1d1528; --text: #f1ecf7; --text-soft: #d6c9e6; --muted: #a698ba; --border: #2c2138; --border-soft: #201830; --row-hover: rgba(255, 255, 255, 0.04); --dotgrid-color: rgba(212, 24, 61, 0.05); --tooltip-bg: #241a30; --watermark-logo: url('/assets/logo-experiencity-watermark-light.png'); /* Estilo "oscuro cinematográfico" (propuesta aprobada por Javier en agosto de 2026: carmesí + dorado, tirando a la estética de las propias salas de terror/misterio de Experiencity, en vez del cian genérico de "consola de operaciones" que había antes). Carmesí como color principal (enlaces, estado activo del menú), dorado como acento secundario (highlights, gradientes, y también el aviso "normal"). */ --primary: #ff6b85; --primary-dark: #ff8fa3; --primary-soft: rgba(212, 24, 61, 0.18); --primary-glow: rgba(255, 107, 133, 0.4); --accent: #d4a017; --accent-soft: rgba(212, 160, 23, 0.16); --danger: #ff6b85; --danger-soft: rgba(212, 24, 61, 0.16); --success: #3ba676; --success-soft: rgba(59, 166, 118, 0.14); --warning: #d4a017; --warning-soft: rgba(212, 160, 23, 0.14); --info: #8ea6e0; --info-soft: rgba(142, 166, 224, 0.16); --priority-neutral-soft: rgba(255, 255, 255, 0.06); --sidebar-bg: #0a0710; --sidebar-bg-soft: #0a0710; --sidebar-text: #b9acc9; --sidebar-text-active: #ffffff; --sidebar-border: #201830; --shadow-sm: none; --shadow-md: 0 8px 26px rgba(0, 0, 0, 0.55); } /* ---------- Color de acento por departamento ---------- Se activa con data-department="..." en (ver public/js/api.js: departmentInfoForUser, que decide la clave a partir del departamento del director o de la primera área del técnico). Tecnología es el departamento "por defecto" y a propósito NO tiene bloque aquí: se queda con --department-accent = --primary de siempre (ver el :root de arriba), así que su aspecto no cambia nada con este añadido. Colores comprobados con el validador de paleta del equipo para que se distingan bien entre sí, incluso con daltonismo (ver propuesta-colores-departamento.html, aprobada por Javier en agosto de 2026); cada departamento tiene un tono para modo claro y otro más suave para modo oscuro, igual que ya hace el resto de la paleta. */ :root[data-department="mantenimiento"] { --department-accent: #eb6834; } :root[data-department="marketing"] { --department-accent: #4a3aa7; } :root[data-department="construccion"] { --department-accent: #eda100; } :root[data-department="rrhh"] { --department-accent: #e87ba4; } :root[data-department="coordinacion"] { --department-accent: #1a9c6b; } :root[data-theme="dark"][data-department="mantenimiento"] { --department-accent: #d95926; } :root[data-theme="dark"][data-department="marketing"] { --department-accent: #9085e9; } :root[data-theme="dark"][data-department="construccion"] { --department-accent: #c98500; } :root[data-theme="dark"][data-department="rrhh"] { --department-accent: #d55181; } :root[data-theme="dark"][data-department="coordinacion"] { --department-accent: #0fbf9e; } /* ---------- Modo daltónico ---------- Se activa con data-colorblind="true" en (independiente del tema claro/oscuro: se puede combinar con cualquiera de los dos). Solo redefine los colores de estado (peligro/aviso/éxito/info), que son los que en el resto de la app dependen de distinguir rojo/ámbar/verde por color puro. Paleta de Okabe-Ito (referencia habitual para gráficos/UI aptos para daltonismo: https://jfly.uni-koeln.de/color/), pensada para distinguirse bien tanto en protanopia/deuteranopia como en tritanopia. */ :root[data-colorblind="true"] { --danger: #d55e00; --danger-soft: #fbe6d8; --warning: #e69f00; --warning-soft: #fcefd6; --success: #009e73; --success-soft: #d9f2ec; --info: #0072b2; --info-soft: #dceaf5; } :root[data-theme="dark"][data-colorblind="true"] { --danger: #ff8a4d; --danger-soft: rgba(255, 138, 77, 0.16); --warning: #ffb84d; --warning-soft: rgba(255, 184, 77, 0.16); --success: #33c79a; --success-soft: rgba(51, 199, 154, 0.16); --info: #7fcbef; --info-soft: rgba(127, 203, 239, 0.16); } /* ---------- Tamaño de letra y tipografía accesible ---------- Ver public/js/api.js (applyFontSize/applyDyslexiaFont). --exp-font-scale se aplica al elemento raíz para que rem/em escale con él en toda la app; font-accesible es una alternativa de trazo simple y espaciado más generoso entre letras (aproximación con fuentes ya instaladas en cualquier sistema, sin depender de descargar ninguna fuente externa). */ :root { --exp-font-scale: 100%; } html { font-size: var(--exp-font-scale); } html.font-accesible, html.font-accesible body { font-family: Verdana, "Comic Sans MS", "Segoe UI", Arial, sans-serif; letter-spacing: 0.02em; line-height: 1.6; } /* ---------- Barra de carga superior ---------- */ #top-loading-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--primary), var(--accent)); z-index: 400; opacity: 0; transition: width 0.4s ease, opacity 0.2s ease; } #top-loading-bar.active { width: 70%; opacity: 1; transition: width 8s cubic-bezier(0.1, 0.6, 0.2, 1); } /* ---------- Vista compacta de tabla ---------- */ body.compact-table table td, body.compact-table table th { padding: 6px 10px !important; } body.compact-table table { font-size: 0.86rem; } /* ---------- Barra visual de SLA ---------- */ .sla-bar { width: 100%; height: 5px; border-radius: 4px; background: var(--priority-neutral-soft); overflow: hidden; margin-top: 4px; } .sla-bar-fill { height: 100%; border-radius: 4px; transition: width 0.3s ease; } .sla-bar-fill-ok { background: var(--success); } .sla-bar-fill-warning { background: var(--warning); } .sla-bar-fill-danger { background: var(--danger); } /* ---------- Indicador de color por departamento ---------- */ .dept-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; flex-shrink: 0; vertical-align: middle; } /* ---------- Vista de tablero (Kanban) por estado ---------- */ .kanban-board { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 4px; align-items: flex-start; } .kanban-column { flex: 1 1 240px; min-width: 240px; } .kanban-column-title { display: flex; align-items: center; justify-content: space-between; font-size: 0.85rem; font-weight: 600; color: var(--muted); margin-bottom: 10px; padding: 0 4px; } .kanban-cards { display: flex; flex-direction: column; gap: 10px; } .kanban-card { padding: 12px 14px; margin-bottom: 0; } .kanban-card:hover { background: var(--row-hover); } .kanban-card-title { font-size: 0.9rem; font-weight: 600; margin-bottom: 8px; } .kanban-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.78rem; color: var(--muted); margin-bottom: 6px; } /* ---------- Resaltado en vivo (fila que acaba de cambiar) ---------- */ @keyframes row-flash-anim { 0% { background: var(--primary-soft); } 100% { background: transparent; } } .row-flash { animation: row-flash-anim 1.6s ease-out; } /* ---------- Sugerencias / colapso de sidebar / versión ---------- */ .suggestion-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--card); cursor: pointer; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; } .suggestion-btn:hover { background: var(--row-hover); } .sidebar-collapse-btn { margin: 0 12px 8px 12px; padding: 8px; border-radius: var(--radius-sm); border: 1px solid var(--sidebar-border); background: transparent; color: var(--sidebar-text); cursor: pointer; display: flex; align-items: center; justify-content: center; } .sidebar-collapse-btn:hover { background: rgba(255, 255, 255, 0.06); color: var(--sidebar-text-active); } .sidebar-collapse-btn svg { width: 16px; height: 16px; } .sidebar-version { display: block; width: 100%; font-family: inherit; font-size: 0.68rem; color: var(--sidebar-text); opacity: 0.6; text-align: center; margin-top: 6px; background: none; border: none; padding: 2px 0; cursor: pointer; } .sidebar-version:hover { opacity: 1; text-decoration: underline; } .app-shell.sidebar-collapsed .sidebar { width: 72px; } .app-shell.sidebar-collapsed .sidebar .brand-text, .app-shell.sidebar-collapsed .sidebar nav a span, .app-shell.sidebar-collapsed .sidebar .who, .app-shell.sidebar-collapsed .sidebar .sidebar-version, .app-shell.sidebar-collapsed .sidebar #logout-link span, .app-shell.sidebar-collapsed .sidebar .nav-section-label { display: none; } .app-shell.sidebar-collapsed .sidebar .user-chip { justify-content: center; } @media (max-width: 900px) { /* En móvil el sidebar ya es un cajón deslizante aparte: el botón de plegado de escritorio no aplica ahí y solo estorbaría. */ .sidebar-collapse-btn { display: none; } } :root[data-theme="dark"] .card, :root[data-theme="dark"] .stat-card { border-color: var(--border); } /* Foto real de una sala de Experiencity de fondo en el menú lateral, muy oscurecida para no restar legibilidad: es la misma dirección visual que Javier aprobó en la propuesta de estilo (agosto de 2026). Solo en modo oscuro: el sidebar en modo claro se queda como estaba. */ :root[data-theme="dark"] .sidebar { background-image: linear-gradient(180deg, rgba(10, 7, 16, 0.88) 0%, rgba(10, 7, 16, 0.97) 55%, rgba(10, 7, 16, 1) 100%), url('https://experiencity.es/images/catalogo-escape-room-3.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; } :root[data-theme="dark"] .sidebar .brand .mark { box-shadow: 0 0 0 4px rgba(212, 24, 61, 0.22); } :root[data-theme="dark"] .sidebar nav a.active { background: rgba(212, 24, 61, 0.2); border-left-color: var(--primary); } :root[data-theme="dark"] .sidebar nav a.active svg { color: var(--primary); } /* Departamento/área de quien ha iniciado sesión: cada uno tiene su propia foto de fondo en el menú lateral (mismo oscurecido en degradado que ya lleva la foto de Tecnología, justo arriba, para que el texto siga leyéndose igual de bien) — en los dos temas, porque el menú lateral ya es oscuro tanto en claro como en oscuro. Tecnología es el departamento "por defecto" (data-department="tecnologia" no tiene bloque propio aquí), así que sigue exactamente con su foto de siempre, sin cambios. Fotos de banco libre (Unsplash), elegidas por Javier entre varias propuestas en agosto de 2026; buscan que cada departamento se reconozca por el TEMA de la foto (herramientas, personas, difusión, taller de construcción de sets), no solo por el color. */ :root[data-department="mantenimiento"] .sidebar { background-image: linear-gradient(180deg, rgba(10, 7, 16, 0.72) 0%, rgba(10, 7, 16, 0.92) 55%, rgba(10, 7, 16, 0.98) 100%), url('https://images.unsplash.com/photo-1685320198649-781e83a61de4?auto=format&fit=crop&w=900&q=70'); background-size: cover; background-position: center; background-repeat: no-repeat; } :root[data-department="rrhh"] .sidebar { background-image: linear-gradient(180deg, rgba(10, 7, 16, 0.72) 0%, rgba(10, 7, 16, 0.92) 55%, rgba(10, 7, 16, 0.98) 100%), url('https://images.unsplash.com/photo-1758873269317-51888e824b28?auto=format&fit=crop&w=900&q=70'); background-size: cover; background-position: center; background-repeat: no-repeat; } :root[data-department="marketing"] .sidebar { background-image: linear-gradient(180deg, rgba(10, 7, 16, 0.72) 0%, rgba(10, 7, 16, 0.92) 55%, rgba(10, 7, 16, 0.98) 100%), url('https://images.unsplash.com/photo-1745848413099-13adc3aaf308?auto=format&fit=crop&w=900&q=70'); background-size: cover; background-position: center; background-repeat: no-repeat; } /* Construcción: a propósito NO es una obra genérica (grúas, excavadoras) — es un taller de carpintería, más parecido a como de verdad se construyen los decorados/sets de un escape room, que es lo que hace este departamento en Experiencity. */ :root[data-department="construccion"] .sidebar { background-image: linear-gradient(180deg, rgba(10, 7, 16, 0.72) 0%, rgba(10, 7, 16, 0.92) 55%, rgba(10, 7, 16, 0.98) 100%), url('https://images.unsplash.com/photo-1779031242515-205111711b23?auto=format&fit=crop&w=900&q=70'); background-size: cover; background-position: center; background-repeat: no-repeat; } :root[data-department="coordinacion"] .sidebar { background-image: linear-gradient(180deg, rgba(10, 7, 16, 0.72) 0%, rgba(10, 7, 16, 0.92) 55%, rgba(10, 7, 16, 0.98) 100%), url('https://images.unsplash.com/photo-1758876021444-3885d0a2539f?auto=format&fit=crop&w=900&q=70'); background-size: cover; background-position: center; background-repeat: no-repeat; } /* Marca de agua del logo de Experiencity sobre la foto de cada departamento (pedido explícito de Javier: que las fotos no sean "de banco" sueltas, sino que se sientan de la propia marca). Reutiliza el mismo logo que ya se ve arriba del todo del menú (invertido a blanco igual que ahí), pero pequeño y semitransparente, para que no compita con la navegación. Tecnología no entra aquí: sigue igual que siempre. El .sidebar ya tiene position: sticky (ver más abajo), que también sirve de referencia para este ::after en position: absolute, así que no hace falta tocar nada más. */ :root[data-department]:not([data-department="tecnologia"]) .sidebar::after { content: ""; position: absolute; right: 16px; /* A media altura (no arriba, que ya lleva la marca de la cabecera, ni abajo, que ya lleva el chip de usuario/versión): así no choca con ningún otro elemento del menú, sea cual sea el número de enlaces o el alto de la ventana. */ top: 50%; transform: translateY(-50%); width: 90px; height: 28px; background-image: url('/assets/logo-experiencity.png'); background-size: contain; background-position: center; background-repeat: no-repeat; filter: brightness(0) invert(1); opacity: 0.28; pointer-events: none; } :root[data-department]:not([data-department="tecnologia"]) .sidebar nav a.active { background: color-mix(in srgb, var(--department-accent) 22%, transparent); border-left-color: var(--department-accent); } :root[data-department]:not([data-department="tecnologia"]) .sidebar nav a.active svg { color: var(--department-accent); } /* Títulos con un poco más de carácter "de cartel" en modo oscuro, sin tocar el modo claro. Se deja en un tamaño y peso conservadores: sigue siendo una herramienta de trabajo que hay que leer rápido, no un póster. */ :root[data-theme="dark"] h1 { font-family: 'Cinzel', var(--font); letter-spacing: 0.01em; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; font-family: var(--font); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; transition: background 0.15s ease, color 0.15s ease; } a { color: var(--primary); text-decoration: none; } hr { border: none; border-top: 1px solid var(--border); margin: 20px 0; } /* ---------- Modo "incrustado" ---------- Las páginas de Usuarios, Base de conocimiento, Auditoría e Infraestructura se reutilizan tal cual dentro de las pestañas del panel de Administración (en un iframe con ?embed=1): en ese caso se oculta el sidebar y la barra superior propios, para no verlos duplicados dentro de la pestaña. */ html.embed-mode .sidebar, html.embed-mode header.topbar { display: none; } html.embed-mode .app-shell { min-height: 0; } html.embed-mode main { padding: 4px 4px 24px; max-width: none; } /* ---------- Estructura general: sidebar + columna principal ---------- */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: 240px; flex-shrink: 0; background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-soft) 100%); color: var(--sidebar-text); display: flex; flex-direction: column; padding: 20px 14px; position: sticky; top: 0; height: 100vh; transition: width 0.18s ease; } .sidebar .brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 22px; color: var(--sidebar-text-active); } .sidebar .brand .mark { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); background-size: 200% 200%; animation: brand-shift 6s ease infinite; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1rem; color: #fff; flex-shrink: 0; /* El sidebar es siempre oscuro (en los dos temas), así que este brillo no se theming: va fijo en cian, como el resto de acentos "sobre fondo oscuro" de esta insignia y del active-state del menú. */ box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.16); } .sidebar .brand .mark img { width: 58%; height: 58%; object-fit: contain; /* El logo es negro sobre fondo transparente; en la insignia degradada lo invertimos a blanco para que se lea bien. */ filter: brightness(0) invert(1); } .sidebar .brand .brand-wordmark { display: block; height: 15px; width: auto; margin-bottom: 4px; filter: brightness(0) invert(1); } @keyframes brand-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .sidebar .brand .brand-text { line-height: 1.2; } .sidebar .brand .brand-text .name { font-weight: 700; font-size: 0.95rem; } .sidebar .brand .brand-text .tag { font-size: 0.72rem; color: var(--sidebar-text); text-transform: uppercase; letter-spacing: 0.05em; } .sidebar .nav-section-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: #5b6785; padding: 14px 12px 6px; font-weight: 700; } .sidebar nav { display: flex; flex-direction: column; gap: 2px; } .sidebar nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--sidebar-text); font-weight: 500; font-size: 0.88rem; border-left: 2px solid transparent; transition: background 0.15s, color 0.15s, border-color 0.15s; } .sidebar nav a svg { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.85; } .sidebar nav a:hover { background: rgba(255, 255, 255, 0.06); color: var(--sidebar-text-active); } /* La sección activa se marca con una barra a la izquierda, como el indicador de canal seleccionado en una consola, además del fondo resaltado (igual que antes, pero ahora en cian en vez de azul). */ .sidebar nav a.active { background: rgba(34, 211, 238, 0.16); color: var(--sidebar-text-active); border-left-color: #22d3ee; } .sidebar nav a.active svg { opacity: 1; color: #22d3ee; } .sidebar .sidebar-spacer { flex: 1; } .sidebar .sidebar-footer { border-top: 1px solid var(--sidebar-border); padding-top: 14px; margin-top: 10px; } .sidebar .user-chip { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); /* Es un