:root { --bg: #0f1720; --panel: #ffffff; --ink: #1c2733; --muted: #5a6672; /* oscurecido para cumplir contraste AA (>=4.5:1) sobre --page-bg */ --brand: #1565c0; --brand-dark: #0d47a1; --green: #2e7d32; --amber: #ef6c00; --red: #c62828; --border: #e2e8f0; --page-bg: #f4f6f9; --input-bg: #ffffff; --card-selected-bg: #f3f8ff; } html[data-theme="dark"] { --panel: #18222e; --ink: #e6edf3; --muted: #9fb0c0; --border: #2b3a48; --page-bg: #0e1620; --input-bg: #0f1925; --card-selected-bg: #10243b; } * { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--page-bg); line-height: 1.5; } .topbar { background: var(--bg); color: #fff; padding: 8px 24px; display: flex; align-items: center; gap: 14px; } .logo { font-weight: 800; letter-spacing: 1px; color: #fff; text-decoration: none; } .logo:hover { color: #cfe0f5; } /* Marca corporativa: de TEXTO PLANO junto al logo (no es enlace). */ .subtitle { color: #9fb0c0; font-size: 0.85rem; font-weight: 600; white-space: nowrap; } .brandbar { display: inline-flex; align-items: center; gap: 14px; } .section { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 700; font-size: 1.05rem; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.18); } .section:hover { color: #cfe0f5; } .section-mark { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, var(--brand), #00bcd4); display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; box-shadow: 0 2px 6px rgba(0,0,0,.25); } .topnav { margin-left: auto; display: flex; gap: 6px; } .topnav a { color: #cdd9e5; text-decoration: none; padding: 6px 12px; border-radius: 6px; font-size: 0.92rem; font-weight: 600; } .topnav a:hover { background: rgba(255,255,255,.12); color: #fff; } /* Área actual: resalta el enlace de la sección en la que estás (aria-current). */ .topnav a[aria-current="page"] { background: rgba(255,255,255,.18); color: #fff; } /* Foco visible por teclado (WCAG 2.4.7): un contorno de marca claro en todos los controles; variante clara sobre la barra oscura para que contraste. */ :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; } .topbar :focus-visible { outline-color: #cfe0f5; } /* Enlace "saltar al contenido" (WCAG 2.4.1): oculto hasta recibir foco con Tab. Se inyecta al principio del desde theme.js, presente en todas las áreas. */ .skip-link { position: absolute; left: -9999px; top: auto; z-index: 3000; background: var(--brand); color: #fff; padding: 10px 16px; font-weight: 700; text-decoration: none; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; top: 0; } .container { max-width: 860px; margin: 0 auto; padding: 28px 20px 60px; } h1 { font-size: 1.7rem; margin: 0 0 6px; } h2 { font-size: 1.15rem; margin: 0 0 10px; } h3 { font-size: 0.95rem; margin: 16px 0 4px; color: var(--brand-dark); text-transform: capitalize; } .lead { color: var(--muted); margin-top: 0; } .muted { color: var(--muted); } /* Migas de pan: enlaces legibles (evita el azul/morado de "visitado") */ .muted a { color: var(--brand); text-decoration: none; font-weight: 600; } .muted a:hover { text-decoration: underline; } html[data-theme="dark"] .muted a { color: #5aa2e8; } .card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin: 18px 0; box-shadow: 0 1px 2px rgba(16,23,32,0.04); } .field { margin-bottom: 16px; } .field label, .field legend { display: block; font-weight: 600; margin-bottom: 6px; } fieldset.field { border: 1px solid var(--border); border-radius: 8px; } select, input[type=text] { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 1rem; background: var(--input-bg); color: var(--ink); } .check { display: inline-flex; align-items: center; gap: 6px; margin-right: 18px; font-weight: 500; } /* Formulario de login de las áreas personales (compartido; antes duplicado byte a byte en cada *_login.html). */ .login { max-width: 420px; margin: 24px auto; } .login label { display: block; font-size: 13px; color: var(--ink); margin: 0 0 4px; font-weight: 600; } .login input[type=text], .login input[type=password] { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; margin-bottom: 14px; background: var(--input-bg); color: var(--ink); } /* Bloques seleccionables de sistema operativo */ .os-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 18px; } .os-card { display: flex; flex-direction: column; gap: 12px; border: 2px solid var(--border); border-radius: 10px; padding: 16px; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; } .os-card:hover { border-color: #c3d0e0; } .os-card.selected { border-color: var(--brand); background: var(--card-selected-bg); box-shadow: 0 0 0 1px var(--brand) inset; } .os-head { display: flex; align-items: center; gap: 10px; } .os-head input[type=radio] { width: 18px; height: 18px; } .os-name { font-size: 1.15rem; font-weight: 700; } .os-extras { display: flex; flex-direction: column; gap: 8px; padding-left: 28px; } .os-extras-title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); } .os-card:not(.selected) .os-extras { opacity: .45; } /* Menú principal (elegir área) */ .container.menu-page { max-width: 1040px; } .container.wiki-wide { max-width: none; } .menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px; margin-top: 8px; } .menu-card { display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; background: var(--panel); border: 1px solid var(--border); border-radius: 13px; padding: 21px 20px; text-decoration: none; color: var(--ink); box-shadow: 0 1px 2px rgba(16,23,32,.04); transition: transform .15s, border-color .15s, box-shadow .15s; } .menu-card:hover { transform: translateY(-2px); border-color: var(--brand); box-shadow: 0 6px 18px rgba(21,101,192,.16); } .menu-icon { font-size: 2.05rem; line-height: 1; } .menu-title { font-size: 1.15rem; font-weight: 700; } .menu-desc { color: var(--muted); font-size: .88rem; line-height: 1.4; } /* --- Diseño HUD CÓSMICO (home, universal server+.exe): corona de GEMAS con marco neón alrededor de un NÚCLEO DE ENERGÍA, sobre fondo estelar+nebulosa (canvas .hud-net, inyectado en todas las páginas por after_request; solo visible en tema oscuro). --- */ body.hud-body { background: radial-gradient(circle at 50% 45%, #0b1626 0%, #070d16 55%, #05070d 100%) fixed; min-height: 100vh; color: #e6edf3; display: flex; flex-direction: column; } body.hud-body .topbar { background: transparent; flex: 0 0 auto; } /* La corona ocupa TODO el alto restante bajo la cabecera (pantalla completa). */ .hud-main { flex: 1 1 auto; position: relative; min-height: 0; } body.hud-body .muted { color: #9fb0c0; } /* Marca WORKLAB como banner 3D inclinado arriba-izquierda (como el mockup). */ body.hud-body .hud-brand { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 20px 8px; border-radius: 9px; background: linear-gradient(150deg, rgba(22,52,92,.9), rgba(10,22,42,.72)); border: 1px solid rgba(120,215,255,.5); box-shadow: 0 8px 24px rgba(0,0,0,.5), 0 0 22px rgba(90,200,255,.25), inset 0 0 14px rgba(90,200,255,.12); transform: perspective(650px) rotateY(15deg) rotateZ(-4deg); transform-origin: left center; } body.hud-body .hud-brand .logo { font-size: 1.4rem; color: #eafcff; text-shadow: 0 0 12px rgba(120,235,255,.75); } body.hud-body .hud-brand .subtitle { font-size: .6rem; letter-spacing: 2.5px; color: #a9c6e2; text-transform: uppercase; } .hud { position: absolute; inset: 0; } /* Rótulo "¿Qué quieres hacer?" arriba-izquierda, sobre el fondo (como el mockup). */ .hud-heading { position: absolute; left: 3vw; top: 6px; z-index: 5; margin: 0; font-size: 1.5rem; font-weight: 600; color: #dbeeff; letter-spacing: .3px; text-shadow: 0 0 12px rgba(90,190,255,.5); pointer-events: none; } /* Escenario a PANTALLA COMPLETA: los nodos se reparten en ELIPSE (x/y en % del rectángulo), con margen para que las etiquetas de los extremos no se corten. */ .hud-stage { position: absolute; inset: 3vh 4.5vw 6vh; } /* Línea de sesión / "Mi cuenta": esquina inferior IZQUIERDA (la dcha. la ocupa el botón de tema). */ .hud-session { position: absolute; left: 16px; bottom: 10px; right: auto; z-index: 6; margin: 0; text-align: left; font-size: .78rem; } /* Haces de energía del núcleo a cada gema (color por área). Doble trazo: uno ancho translúcido (brillo) + uno fino brillante. vector-effect mantiene el grosor uniforme pese al preserveAspectRatio="none" del SVG. El color va inline por línea (stroke = color del área). */ .hud-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; } .hud-lines .beam-glow { stroke-width: 15px; opacity: .26; vector-effect: non-scaling-stroke; stroke-linecap: round; } .hud-lines .beam-core { stroke-width: 3.4px; opacity: .95; vector-effect: non-scaling-stroke; stroke-linecap: round; } /* ESTALLIDO de energía: estrella brillante de 8 puntas tras el núcleo (como el mockup). 4 puntas largas (+) en el elemento y 4 diagonales (x) más cortas en ::before. */ .hud-burst { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(700px, 76vh); aspect-ratio: 1 / 1; z-index: 2; pointer-events: none; background: radial-gradient(ellipse 3px 50% at 50% 50%, rgba(233,252,255,1), rgba(150,230,255,0) 68%), radial-gradient(ellipse 50% 3px at 50% 50%, rgba(233,252,255,1), rgba(150,230,255,0) 68%); filter: drop-shadow(0 0 14px rgba(130,230,255,.92)) drop-shadow(0 0 42px rgba(95,155,255,.62)); animation: hud-burst-pulse 6s ease-in-out infinite; } .hud-burst::before { content: ""; position: absolute; inset: 0; transform: rotate(45deg); background: radial-gradient(ellipse 2.2px 37% at 50% 50%, rgba(216,247,255,.94), rgba(150,230,255,0) 70%), radial-gradient(ellipse 37% 2.2px at 50% 50%, rgba(216,247,255,.94), rgba(150,230,255,0) 70%); } @keyframes hud-burst-pulse { 0%, 100% { opacity: .92; } 50% { opacity: 1; filter: drop-shadow(0 0 18px rgba(130,230,255,1)) drop-shadow(0 0 52px rgba(95,155,255,.72)); } } @media (prefers-reduced-motion: reduce) { .hud-burst { animation: none; } } /* Núcleo: esfera azul oscura y limpia con brillo suave donde convergen los haces (como la imagen). */ .hud-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; width: min(250px, 34vh); aspect-ratio: 1 / 1; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 52%, rgba(70,130,210,.55) 0%, rgba(26,60,120,.6) 34%, rgba(12,30,66,.85) 62%, rgba(8,16,36,.92) 100%); box-shadow: 0 0 70px rgba(60,130,225,.45), 0 0 150px rgba(70,120,220,.25), inset 0 0 45px rgba(90,160,255,.28); } .arsys-logo { display: block; width: 62%; aspect-ratio: 454 / 199; background-color: #eafcff; -webkit-mask: url("../img/arsys-logo.png") center / contain no-repeat; mask: url("../img/arsys-logo.png") center / contain no-repeat; filter: drop-shadow(0 0 7px rgba(120,235,255,.85)); } /* Nodos: GEMA facetada (SVG inline) con icono de línea blanco encima. Acento por área. */ .hud-node { position: absolute; transform: translate(-50%, -50%); z-index: 4; width: 84px; height: 84px; text-decoration: none; } .hud-ring { position: relative; z-index: 1; width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 60%, transparent)); transition: transform .16s, filter .16s; } .hud-gem { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .hud-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 42%; height: 42%; color: #eef7ff; display: block; } .hud-icon .ln { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 2px rgba(4,10,20,.85)); } .hud-label { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); width: 116px; text-align: center; font-weight: 600; font-size: .82rem; color: #dfe9f7; text-shadow: 0 1px 4px rgba(0,0,0,.75); } .hud-node:hover .hud-ring { transform: translateY(-4px) scale(1.08); filter: drop-shadow(0 0 20px color-mix(in srgb, var(--accent) 85%, transparent)) drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 60%, transparent)); } /* Áreas personales bajo la corona (solo servidor/local): tarjetas oscuras con icono de línea. */ .hud-personal { max-width: 940px; margin: 8px auto 0; text-align: center; } .hud-personal-title { color: #9fb0c0; font-size: .82rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin: 0 0 14px; } .hud-personal-grid { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } .hud-personal .menu-card { width: 212px; align-items: center; color: #eaf2ff; box-shadow: none; background: rgba(14,26,44,.62); border: 1px solid color-mix(in srgb, var(--accent, #6ee7b7) 40%, rgba(120,160,220,.2)); } .hud-personal .menu-icon { width: 34px; height: 34px; color: var(--accent, #6ee7b7); } .hud-personal .menu-icon .ln { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent, #6ee7b7) 55%, transparent)); } .hud-personal .menu-card:hover { transform: translateY(-2px); border-color: var(--accent, var(--brand)); background: rgba(20,36,60,.85); box-shadow: 0 0 20px color-mix(in srgb, var(--accent, #6ee7b7) 30%, transparent); } .hud-personal .menu-title { color: #eaf2ff; } .hud-personal .menu-desc { color: #9fb0c0; } @media (max-width: 820px) { /* Ventana estrecha: la corona en elipse no cabe -> rejilla sencilla con scroll normal. */ body.hud-body { display: block; } .hud-main { position: static; } .hud { position: static; inset: auto; } .hud-heading { position: static; left: auto; top: auto; text-align: center; margin: 10px 0 4px; font-size: 1.2rem; } .hud-stage { position: static; inset: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 22px 12px; padding: 16px 12px; } .hud-burst { display: none; } body.hud-body .hud-brand { transform: none; } .hud-lines { display: none; } .hud-center { position: static; transform: none; grid-column: 1 / -1; width: 190px; margin: 0 auto 10px; } .hud-node { position: static; transform: none; margin: 0 auto; width: auto; height: auto; display: flex; flex-direction: column; align-items: center; } .hud-ring { width: 84px; height: 84px; } .hud-node:hover .hud-ring { transform: scale(1.04); } .hud-label { position: static; transform: none; width: auto; margin-top: 6px; display: block; } .hud-session { position: static; margin: 14px 0; } } .btn { display: inline-block; border: 1px solid var(--border); background: var(--panel); color: var(--ink); padding: 9px 16px; border-radius: 8px; font-size: 0.95rem; cursor: pointer; text-decoration: none; } .btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; } .btn.primary:hover { background: var(--brand-dark); } .btn.copy { padding: 6px 12px; } /* Avisos (flash). Base = banner neutro visible; .error/.ok/.success lo tiñen. Antes solo existían .alert (sin fondo) y .alert.error, así que los mensajes de éxito o neutros salían casi invisibles y cada área los reparcheaba por su cuenta. */ .alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; background: var(--card-selected-bg); border: 1px solid var(--border); color: var(--ink); } .alert.error { background: #fdecea; color: var(--red); border-color: #f5c6c2; } .alert.ok, .alert.success { background: #e6f4ea; color: var(--green); border-color: #bfe3c8; } html[data-theme="dark"] .alert.error { background: #3a1c1c; color: #f2b8b3; border-color: #5c2b2b; } html[data-theme="dark"] .alert.ok, html[data-theme="dark"] .alert.success { background: #12261a; color: #86d3a0; border-color: #235238; } .cmd { display: flex; gap: 10px; align-items: center; background: #0f1720; color: #e6edf3; padding: 12px 14px; border-radius: 8px; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; overflow-x: auto; } .cmd code { flex: 1; white-space: nowrap; } .cmd .btn { flex-shrink: 0; } .badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; background: #e2e8f0; color: #334155; vertical-align: middle; } .badge.green { background: #e6f4ea; color: var(--green); } .badge.amber { background: #fff0e0; color: var(--amber); } .badge.red { background: #fdecea; color: var(--red); } .table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } .table th, .table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); } .table th { color: var(--muted); font-weight: 600; } .table a { color: var(--brand); text-decoration: none; font-weight: 600; } .table a:visited { color: var(--brand); } .table a:hover { text-decoration: underline; } html[data-theme="dark"] .table a, html[data-theme="dark"] .table a:visited { color: #5aa2e8; } /* Wiki: layout con árbol lateral */ .wiki-layout { display: flex; gap: 20px; align-items: flex-start; } .wiki-main { flex: 1 1 auto; min-width: 0; } .wiki-side { flex: 0 0 250px; max-width: 250px; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--panel); font-size: 0.9rem; } .wiki-side .side-title { font-weight: 700; margin: 0 0 8px; font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; } ul.wtree { list-style: none; margin: 0; padding-left: 14px; } ul.wtree.wtree-root { padding-left: 0; } ul.wtree li { margin: 3px 0; line-height: 1.4; } ul.wtree summary { cursor: pointer; user-select: none; } ul.wtree a { color: var(--brand); text-decoration: none; } ul.wtree a:hover { text-decoration: underline; } html[data-theme="dark"] ul.wtree a { color: #5aa2e8; } ul.wtree li.wp.active > a, ul.wtree summary.wf.active > a { font-weight: 700; text-decoration: underline; } ul.wtree li.wp.active { background: var(--card-selected-bg); border-radius: 6px; } /* Wiki: contenido Markdown (imágenes y tablas) */ .wiki-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 10px 0; border: 1px solid var(--border); } .wiki-tablewrap { overflow-x: auto; margin: 14px 0; } .wiki-tablewrap table.table { min-width: 340px; } .wiki-content table.table td, .wiki-content table.table th { vertical-align: top; } @media (max-width: 820px) { .wiki-layout { flex-direction: column; } .wiki-side { position: static; max-width: none; flex: 1 1 auto; width: 100%; max-height: 300px; } } .metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .metric { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; } .metric .label { color: var(--muted); font-size: 0.8rem; } .metric .value { font-size: 1.25rem; font-weight: 700; } .metric.green { border-left: 4px solid var(--green); } .metric.amber { border-left: 4px solid var(--amber); } .metric.red { border-left: 4px solid var(--red); } .ports { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .port { padding: 4px 10px; border-radius: 6px; font-size: 0.82rem; border: 1px solid var(--border); } .port.open { background: #e6f4ea; color: var(--green); } .port.closed { background: #fdecea; color: var(--red); } pre.raw { background: #0f1720; color: #d6e2ee; padding: 12px; border-radius: 8px; overflow-x: auto; font-size: 0.82rem; white-space: pre; } .report-head { display: flex; justify-content: space-between; align-items: center; } /* El selector de tema (interruptor sol/luna .theme-switch) se construye y estiliza desde static/js/theme.js para que sea idéntico en el portal y en las sub-apps. */ /* Responsive: móvil/tablet pequeño */ @media (max-width: 640px) { body { overflow-x: hidden; } .topbar { flex-wrap: wrap; padding: 6px 14px; gap: 8px; } .topnav { margin-left: 0; width: 100%; flex-wrap: wrap; gap: 4px 6px; } .topnav a { padding: 5px 9px; font-size: 0.85rem; } .container { padding: 18px 14px 80px; } .card { overflow-x: auto; } .table { font-size: 0.84rem; } .table th, .table td { padding: 7px 7px; } } @media print { .topbar, .btn, .theme-switch { display: none; } body { background: #fff; } .card { box-shadow: none; break-inside: avoid; } }