(no

): lleva dentro el

con el detalle técnico, que no puede ir dentro de un párrafo. */ .error { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); padding: var(--space-3) var(--space-4); border-radius: var(--radius-m); margin: 0 0 var(--space-4); } .error p { margin: 0; } .error details { margin-top: var(--space-2); color: var(--text); font-size: 14px; } .error summary { cursor: pointer; } .error-detail { display: block; margin-top: var(--space-1); color: var(--muted); font-size: 14px; } .flash { padding: var(--space-3) var(--space-4); border-radius: var(--radius-m); margin-bottom: var(--space-4); } .flash-key { background: color-mix(in srgb, var(--ok) 10%, transparent); border: 1px solid var(--ok); } .flash-key .key-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); } .flash-key .key { flex: 1 1 20ch; font-size: 14px; word-break: break-all; } /* --- Visor de logs ---------------------------------------------------------- */ .logs { background: var(--log-bg); border: 1px solid var(--stroke-weak); border-radius: var(--radius-m); padding: var(--space-2) 0; max-height: 460px; overflow: auto; font-family: ui-monospace, monospace; font-size: 12.5px; line-height: 1.55; } .log-line { display: flex; padding: 0 var(--space-3); } .log-line:hover { background: var(--log-hover); } .log-ln { user-select: none; -webkit-user-select: none; color: var(--log-ln); min-width: 5ch; text-align: right; padding-right: var(--space-3); flex-shrink: 0; } .log-text { white-space: pre-wrap; word-break: break-word; flex: 1; } .log-error .log-text { color: var(--danger); } .log-warning .log-text { color: var(--warn); } .log-debug .log-text { color: var(--muted); } .logs-meta { font-size: 13px; margin: var(--space-2) 2px 0; } .reason { font-family: ui-monospace, monospace; font-size: 12.5px; color: var(--danger); } /* Esqueleto de carga con la forma del visor: sin salto de layout al llegar las líneas. */ .skel-line { display: block; height: 12px; margin: var(--space-2) var(--space-3); background: var(--panel-2); border-radius: var(--radius-s); } .skel-line:nth-child(2) { width: 80%; } .skel-line:nth-child(3) { width: 55%; } /* Cola del visor de logs (BL-014): marcador invisible al final del scroll que se auto-sondea y se sustituye a sí mismo con las líneas nuevas. */ .log-tail { display: block; height: 0; overflow: hidden; } /* --- Indicador de refresco -------------------------------------------------- htmx pone .htmx-request en el elemento que pide (o en su hx-indicator) aunque includeIndicatorStyles esté apagado. El retardo evita que parpadee cada 3 s: solo se ve si la petición tarda más de 300 ms. */ #nodes-live .live-stamp, #logs-meta { transition: opacity .2s; } #nodes-live.htmx-request .live-stamp, #logs-meta.htmx-request { opacity: .5; transition-property: opacity; transition-duration: .2s; transition-delay: .3s; } /* --- Login ------------------------------------------------------------------ */ .login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: var(--space-4); } .login-card { background: var(--panel); border: 1px solid var(--stroke-weak); border-radius: var(--radius-l); padding: var(--space-6); width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: var(--space-3); } .login-card h1 { font-size: 20px; margin: 0 0 var(--space-1); } .login-card label { display: flex; flex-direction: column; gap: var(--space-1); color: var(--muted); font-size: 14px; } /* Distintivo de provider: letra + color. La LETRA es la que informa; el color solo acompaña (WCAG 1.4.1: no codificar información solo con color). */ .provider { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: var(--radius-s); font-size: 11px; font-weight: 700; line-height: 1; border: 1px solid var(--stroke-weak); color: var(--text); } .provider-hetzner { background: color-mix(in srgb, var(--accent) 25%, transparent); border-color: var(--accent); } /* Cian y no el azul de marca de DO: a 14px de diametro seria indistinguible del azul de Hetzner, y el distintivo dejaria de distinguir. */ .provider-digitalocean { background: color-mix(in srgb, var(--do) 25%, transparent); border-color: var(--do); } .provider-local { background: color-mix(in srgb, var(--warn) 25%, transparent); border-color: var(--warn); } .provider-unknown { background: var(--panel-2); color: var(--muted); } /* Barra de progreso. El ancho va en una clase discreta (pasos de 5) y no en un style="width:42%": la CSP del panel es `style-src 'self'`, sin unsafe-inline. */ .progress { display: block; width: 90px; height: 4px; margin-top: var(--space-1); background: var(--panel-2); border-radius: var(--radius-pill); overflow: hidden; } .progress-bar { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-pill); } .progress-bar.p-0 { width: 0%; } .progress-bar.p-5 { width: 5%; } .progress-bar.p-10 { width: 10%; } .progress-bar.p-15 { width: 15%; } .progress-bar.p-20 { width: 20%; } .progress-bar.p-25 { width: 25%; } .progress-bar.p-30 { width: 30%; } .progress-bar.p-35 { width: 35%; } .progress-bar.p-40 { width: 40%; } .progress-bar.p-45 { width: 45%; } .progress-bar.p-50 { width: 50%; } .progress-bar.p-55 { width: 55%; } .progress-bar.p-60 { width: 60%; } .progress-bar.p-65 { width: 65%; } .progress-bar.p-70 { width: 70%; } .progress-bar.p-75 { width: 75%; } .progress-bar.p-80 { width: 80%; } .progress-bar.p-85 { width: 85%; } .progress-bar.p-90 { width: 90%; } .progress-bar.p-95 { width: 95%; } .progress-bar.p-100 { width: 100%; } /* --- Grafo de la máquina de estados (vista en vivo de /nodes) --------------- Todo el estilo vive aquí, en un archivo servido con 'self': la CSP del panel (`style-src 'self'`, sin unsafe-inline) bloquea `style=` y `