/* Variables centrales: modificar aquí cambia la paleta de toda la aplicación. */
:root { color-scheme: dark; --bg:#101212; --panel:#181b1a; --line:#2a2e2b; --text:#edf0eb; --muted:#a0a69f; --accent:#baf279; --green:#83d7a4; --yellow:#e4ca79; --orange:#e8a36e; --purple:#b5a0ed; --red:#ef8d94; font-family:Inter,Segoe UI,system-ui,sans-serif; font-size:16px; }
/* Aplica dimensiones previsibles y desplazamiento suave a anclas. */
* { box-sizing:border-box; } html { scroll-behavior:smooth; scroll-padding-top:24px; } body { margin:0; background:var(--bg); color:var(--text); line-height:1.5; }
/* Normaliza enlaces, controles y atributos de visibilidad. */
a { color:inherit; text-decoration:none; } button,input,select,textarea { font:inherit; } button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; } button { cursor:pointer; } [hidden] { display:none!important; } button:disabled { opacity:.5; cursor:wait; }
/* Expone el foco para navegación por teclado. */
:focus-visible { outline:2px solid var(--accent); outline-offset:4px; } button { border:0; } .muted,small { color:var(--muted); } .accent { color:var(--accent); }
/* Fija una columna lateral sobria en escritorios. */
.sidebar { width:var(--sidebar-width); position:fixed; inset:0 auto 0 0; border-right:1px solid var(--line); padding:32px 20px 20px; display:flex; flex-direction:column; background:#131514; }
/* Identidad tipográfica y símbolo N compartidos por acceso y tablero. */
.brand { display:flex; align-items:center; gap:9px; font-size:18px; font-weight:750; letter-spacing:1px; white-space:nowrap; } .brand-mark { display:grid; place-items:center; width:35px; height:35px; border-radius:10px; background:var(--accent); color:#182019; font-weight:900; font-size:24px; margin-right:4px; }
/* Diferencia etiquetas pequeñas de las acciones de navegación. */
.nav-label { color:#929a90; font-size:11px; letter-spacing:1.4px; margin:48px 12px 14px; } .nav-item { display:flex; align-items:center; gap:12px; padding:12px 10px; margin:5px 0; font-size:13px; border-radius:7px; color:#b0b5ae; } .nav-item>.nav-icon { font-size:21px; width:23px; } .nav-item:hover { background:#202620; } .nav-item.active { color:var(--accent); background:#242e20; }
/* Mantiene cuenta y espacio al pie de la barra lateral. */
.sidebar-bottom { margin-top:auto; padding-top:30px; } .workspace-note { padding:18px 8px; font-size:13px; } .workspace-note>.muted { display:block; margin:8px 0 0 14px; font-size:12px; } .online-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent); margin-right:8px; } .profile { display:flex; gap:10px; align-items:center; border-top:1px solid var(--line); padding-top:21px; } .profile strong { font-size:13px; } .profile small { display:block; font-size:11px; } .profile form { margin-left:auto; } .avatar { background:#30362d; color:var(--accent); border:1px solid #48523e; border-radius:50%; display:grid; place-items:center; width:35px; height:35px; }
/* Desplaza la superficie principal fuera de la barra lateral. */
.main { margin-left:var(--sidebar-width); } .topbar { border-bottom:1px solid var(--line); padding:23px 38px; display:flex; justify-content:space-between; color:var(--muted); font-size:12px; } .topbar strong { color:#d9dfd5; font-weight:500; margin-left:12px; } .topbar .muted { margin-left:12px; } .content { padding:32px 38px 20px; max-width:1680px; margin:auto; }
/* Organiza título y acción principal en una sola cabecera. */
.page-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:30px; } .eyebrow { font-size:10px; font-weight:650; letter-spacing:2px; color:var(--accent); margin:0 0 8px; } h1 { font-size:32px; letter-spacing:-1px; line-height:1.2; margin:0; font-weight:650; } .page-heading p.muted { font-size:14px; margin:12px 0 0; }
/* Estiliza acciones principales, secundarias y destructivas con estados distinguibles. */
.primary,.secondary,.danger { border-radius:7px; padding:10px 16px; font-size:13px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; gap:12px; white-space:nowrap; } .primary { background:var(--accent); color:#1c2814; } .primary:hover { background:#cdf69d; } .secondary { background:#242824; border:1px solid #3b423a; color:var(--text); } .secondary:hover { background:#343c31; } .danger { background:#392326; color:#ffa9b0; } .danger:hover { background:#583036; } .text-button { background:none; color:var(--muted); font-size:12px; padding:8px; } .text-button:hover { color:var(--accent); } .icon-button { background:transparent; color:var(--muted); font-size:23px; border-radius:5px; padding:0 6px; }
/* Presenta cuatro indicadores compactos en la fila superior. */
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; margin-bottom:26px; } .metric { background:linear-gradient(115deg,#1c201b,#181b19); border:1px solid var(--line); border-radius:10px; padding:17px 20px; } .metric>span { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; color:#b5bcb1; } .metric strong { display:block; font-size:31px; font-weight:550; margin:9px 0 1px; line-height:1.2; } .metric small { font-size:11px; } .dot { width:7px; height:7px; border-radius:50%; display:inline-block; background:currentColor; flex-shrink:0; }
/* Presenta el total de tarjetas sin controles de filtrado. */
.list-summary { color:var(--muted); font-size:13px; margin:0 0 24px; }
/* Separa las áreas mediante espacio y jerarquía tipográfica. */
.board-section { margin:0 0 31px; border-radius:10px; scroll-margin-top:16px; } .section-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:17px; gap:10px; } .section-title { display:flex; align-items:center; gap:11px; min-width:0; } h2 { font-size:17px; letter-spacing:-.3px; font-weight:600; margin:0; } .count { font-size:11px; background:#282e26; color:#b8c4b0; border:1px solid #35412d; border-radius:5px; padding:0 6px; } .section-symbol { font-size:22px; color:var(--accent); } .section-symbol.ideas { color:var(--purple); } .section-symbol.infra { color:#86b9d2; }
/* Genera una cuadrícula adaptable sin anchos fijos de tarjeta. */
.card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; min-height:100px; } .card { background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:18px; transition:border-color .15s,transform .15s; min-width:0; position:relative; display:flex; flex-direction:column; } .card:hover { border-color:#515c49; transform:translateY(-2px); } .card.dragging { opacity:.35; } .board-section.drop-target { outline:2px dashed var(--accent); outline-offset:8px; } .card.drop-before { border-top:3px solid var(--accent); }
/* Ordena encabezados, etiquetas de origen y control de edición. */
.card-top { display:flex; align-items:center; gap:9px; margin-bottom:12px; } .project-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:8px; background:#293127; color:#b6cf9d; font-size:20px; flex-shrink:0; } .kind { font-size:10px; color:#b3b9af; border:1px solid #363d33; border-radius:4px; padding:2px 6px; } .edit-card { margin-left:auto; font-size:22px; line-height:1; } .card h3 { margin:0 0 9px; font-size:16px; font-weight:600; overflow-wrap:anywhere; } .card h3 button { text-align:left; background:none; color:inherit; padding:0; font:inherit; }
/* Asocia cada estado a un color legible y una etiqueta textual. */
.production { color:var(--green); } .development { color:var(--yellow); } .maintenance { color:var(--orange); } .idea { color:var(--purple); } .critical { color:var(--red); } .badge { display:inline-flex; align-items:center; gap:6px; font-size:10px; border:1px solid currentColor; border-radius:5px; padding:3px 7px; align-self:flex-start; max-width:100%; } .badge.production { background:#1d2b23; border-color:#334939; } .badge.development { background:#2b291d; border-color:#494330; } .badge.maintenance { background:#30261d; border-color:#53402c; } .badge.idea { background:#262332; border-color:#443852; } .badge.critical { background:#302023; border-color:#533039; }
/* Facilita la lectura de notas sin permitir que desborden la tarjeta. */
.notes { color:#b0b7ab; font-size:12px; line-height:1.7; margin:14px 0; max-height:112px; overflow:auto; overflow-wrap:anywhere; white-space:normal; } .notes p { margin:0 0 5px; } .notes code { background:#2d342a; color:#c7dcb5; padding:1px 4px; border-radius:3px; } .notes .note-line { display:block; } .stack { font:11px ui-monospace,Consolas,monospace; color:#b9c5b1; margin:14px 0 0; overflow-wrap:anywhere; } .host { display:block; color:#8f9a89; font:11px ui-monospace,Consolas,monospace; margin:7px 0; overflow-wrap:anywhere; }
/* Reserva un pie estable para enlaces y fechas. */
.card-bottom { border-top:1px solid var(--line); padding-top:11px; margin-top:auto; display:flex; flex-wrap:wrap; gap:10px; align-items:center; } .card-link { font-size:11px; color:#c4d0ba; } .card-link:hover { color:var(--accent); text-decoration:underline; } .card-date { color:#90998b; font-size:10px; margin-left:auto; } .empty { grid-column:1/-1; border:1px dashed #3a4235; border-radius:9px; color:var(--muted); padding:30px; text-align:center; font-size:14px; margin:0; } .empty button { margin:12px auto 0; display:block; }
/* Muestra información de apoyo al final de la superficie de trabajo. */
.board-footer { border-top:1px solid var(--line); padding:20px 0 4px; display:flex; justify-content:space-between; gap:15px; font-size:10px; color:#8a9484; } .board-footer>span:first-child { letter-spacing:1px; }
/* Configura modales nativos con desplazamiento interno y fondo atenuado. */
dialog { background:#191d19; color:var(--text); border:1px solid #414c39; border-radius:14px; padding:25px; width:min(680px,calc(100% - 28px)); max-height:90vh; box-shadow:0 24px 100px #0008; } dialog::backdrop { background:#050a07bb; backdrop-filter:blur(5px); } .modal-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; } .modal-heading h2 { font-size:23px; } .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; } .wide { grid-column:1/-1; }
/* Mantiene labels visibles y campos coherentes con el resto de la UI. */
label { display:block; font-size:13px; color:#d2dacb; } input,select,textarea { display:block; width:100%; border:1px solid #3b4435; border-radius:6px; background:#10150f; color:var(--text); padding:10px 11px; margin-top:7px; } textarea { resize:vertical; } input::placeholder,textarea::placeholder { color:#85907f; } label small { display:block; margin-top:6px; font-size:11px; } .modal-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:9px; padding-top:15px; border-top:1px solid var(--line); margin-top:18px; } .modal-actions>span { flex:1; } .form-error { color:#ffa6ad; font-size:13px; white-space:pre-line; } #card-dates { font-size:11px; } #delete-dialog { max-width:440px; } #delete-dialog p { color:var(--muted); }
/* Distingue errores persistentes de confirmaciones temporales. */
.error-banner { display:flex; align-items:center; justify-content:space-between; gap:15px; background:#3a2427; border:1px solid #754047; padding:15px; border-radius:8px; margin-bottom:24px; } #toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--accent); color:#1a2811; border-radius:8px; padding:13px 22px; box-shadow:0 4px 25px #0006; z-index:10; font-size:14px; }
/* Reutiliza el lenguaje visual en la pantalla de acceso. */
.login-page { min-height:100vh; display:grid; place-items:center; background:radial-gradient(ellipse at 50% 0,#293723 0,transparent 65%),var(--bg); padding:20px; } .login-box { width:100%; max-width:430px; border:1px solid #394332; background:#171c16; border-radius:18px; padding:36px; } .login-box .brand { margin-bottom:42px; } .login-box label { margin-top:20px; } .login-box .primary { width:100%; margin-top:26px; } .login-footer { font-size:11px; text-align:center; color:var(--muted); margin:25px 0 0; }
/* Reduce columnas cuando el espacio de lectura es limitado. */
@media(max-width:1200px) { .content { padding:28px 24px; } .card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .metric { padding:15px; } .metric>span { font-size:11px; } .toolbar { flex-wrap:wrap; } }
/* Apila tarjetas y formularios en pantallas estrechas sin desplazamiento horizontal. */
@media(max-width:560px) { .page-heading { flex-direction:column; gap:20px; } .card-grid { grid-template-columns:1fr; } .toolbar { align-items:stretch; } #status-filter { flex:1; min-width:0; } .results { width:100%; } .section-title { gap:7px; } h2 { font-size:15px; } .section-heading { align-items:flex-start; } .text-button { white-space:nowrap; } .form-grid { grid-template-columns:1fr; } .board-footer { flex-direction:column; } .topbar-right { display:none; } .metrics { gap:10px; } .metric { padding:14px; } dialog { padding:20px; } .modal-actions { justify-content:flex-start; } }
/* Respeta usuarios que prefieren eliminar movimiento de la interfaz. */
/* Delimita Propios y De terceros como dos contenedores grandes independientes. */
.system-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:start; } .software-group { min-width:0; padding:24px; background:linear-gradient(145deg,#263321,#1b2419); border:1px solid #536845; border-top:4px solid var(--accent); border-radius:17px; box-shadow:0 10px 28px #0003; } .software-group[data-kind="third"] { border-color:#425c68; border-top-color:#91bdce; background:linear-gradient(145deg,#243039,#192227); } .software-group[data-kind="third"] .section-symbol { color:#a7d4e6; background:#354b58; } .software-group>.section-heading { padding-bottom:21px; margin-bottom:22px; border-bottom:1px solid #ffffff24; } .software-group h2 { font-size:21px; font-weight:700; } .software-group .section-symbol { width:39px; height:39px; border-radius:11px; display:grid; place-items:center; background:#3b4e2d; color:var(--accent); } .software-group .count { padding:2px 8px; font-size:12px; background:#10170e66; border-color:#ffffff30; color:#e2e9dc; } .software-group .text-button { color:#d3dfca; } .software-group .card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } .software-group .card { background:#141a14; border-color:#405139; padding:16px; box-shadow:0 3px 10px #0002; } .software-group[data-kind="third"] .card { background:#141b1f; border-color:#394b56; } .software-group .empty { padding:40px 18px; background:#0c120c40; border-color:#8b9b7970; } .system-groups.single-group { grid-template-columns:1fr; }
/* Conserva la separación conceptual en pantallas angostas apilando ambos grupos. */
@media(max-width:1320px) { .system-groups { grid-template-columns:1fr; } } @media(max-width:600px) { .software-group { padding:16px; } .software-group .card-grid { grid-template-columns:1fr; } .software-group h2 { font-size:19px; } }
/* Distribuye los gráficos complementarios en paneles de igual jerarquía. */
.dashboard-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; margin-bottom:20px; } .dashboard-panel { min-width:0; background:var(--panel); border:1px solid #35402f; border-radius:13px; padding:25px; } .panel-heading { display:flex; gap:12px; align-items:center; justify-content:space-between; } .panel-heading h2 { font-size:18px; } .panel-description { color:var(--muted); font-size:13px; margin:9px 0 24px; } .dashboard-note { color:var(--muted); font-size:12px; margin:20px 0; }
/* Mantiene cantidades y porcentajes legibles incluso sin percibir el color de las barras. */
.chart-row { margin:0 0 19px; } .chart-row:last-child { margin-bottom:0; } .chart-row-label { display:flex; justify-content:space-between; gap:12px; align-items:center; font-size:13px; margin-bottom:9px; } .chart-row-label>span { display:flex; align-items:center; gap:9px; } .chart-row-label strong { white-space:nowrap; font-size:15px; } .chart-row-label small { font-size:12px; font-weight:400; } .chart-row-label a:hover { color:var(--accent); text-decoration:underline; } .bar-track,.stacked-track { height:9px; border-radius:6px; background:#2b3228; overflow:hidden; } .bar-fill { display:block; height:100%; background:currentColor; } .stacked-track { display:flex; height:11px; } .section-breakdown { color:var(--muted); font-size:11px; line-height:1.7; margin:9px 0 0; }
/* Compara el origen usando solo los sistemas registrados, no las ideas ni la gestión. */
.origin-track { display:flex; height:25px; border-radius:7px; overflow:hidden; background:#2b3228; margin-bottom:22px; } .origin-track .own,.origin-dot.own { background:var(--accent); } .origin-track .third,.origin-dot.third { background:#91bdce; } .origin-stat { display:flex; align-items:center; gap:11px; padding:13px 0; border-bottom:1px solid var(--line); font-size:14px; } .origin-stat strong { margin-left:auto; font-size:22px; } .origin-stat small { width:42px; text-align:right; } .origin-dot { width:10px; height:10px; border-radius:3px; }
/* Convierte las prioridades en acciones editables con el mismo modal que usan las tarjetas. */
.attention-list { list-style:none; padding:0; margin:0; } .attention-item { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:14px 0; color:var(--text); background:transparent; border-bottom:1px solid var(--line); } .attention-item:hover .attention-main strong { color:var(--accent); } .attention-main { flex:1; min-width:0; } .attention-main strong { display:block; font-size:14px; overflow-wrap:anywhere; } .attention-main small { display:block; font-size:11px; margin-top:5px; } .attention-item .badge { flex-shrink:0; align-self:center; } .attention-empty { background:#1d291d; border:1px dashed #43583a; border-radius:9px; color:#baceac; font-size:14px; padding:25px 18px; }
/* Apila paneles y permite envolver prioridades en pantallas estrechas. */
@media(max-width:1100px) { .dashboard-grid { grid-template-columns:1fr; } } @media(max-width:560px) { .dashboard-panel { padding:18px; } .attention-item { flex-wrap:wrap; } .attention-main { flex-basis:100%; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .card { transition:none; } }



/* La barra usa un único ancho compartido con la superficie principal. */
body { --sidebar-width:250px; } body.sidebar-collapsed { --sidebar-width:76px; }
/* Ordena identidad y botón de expansión sin desplazar los enlaces. */
.sidebar-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; } .sidebar-toggle { display:grid; place-items:center; flex-shrink:0; width:32px; height:32px; border:1px solid var(--line); border-radius:8px; background:#222922; color:var(--accent); font-size:25px; } .sidebar-toggle:hover { background:#33422a; } .brand-text { font-size:16px; letter-spacing:.5px; }
/* Oculta solo textos en modo compacto y conserva nombres accesibles y tooltips. */
.sidebar-collapsed .sidebar { padding:24px 12px 18px; } .sidebar-collapsed .brand-text,.sidebar-collapsed .nav-text,.sidebar-collapsed .nav-label,.sidebar-collapsed .workspace-note,.sidebar-collapsed .profile-details { display:none; }
/* Centra logo, botón e iconos en una columna estable. */
.sidebar-collapsed .sidebar-heading { flex-direction:column; gap:18px; } .sidebar-collapsed .brand-mark { margin:0; } .sidebar-collapsed .sidebar nav { margin-top:28px; } .sidebar-collapsed .nav-item { justify-content:center; padding:12px 0; } .sidebar-collapsed .nav-icon { text-align:center; }
/* Mantiene la cuenta y el cierre de sesión disponibles en ambos tamaños. */
.sidebar-collapsed .profile { flex-direction:column; gap:12px; } .sidebar-collapsed .profile form { margin:0; }
/* Aprovecha el ancho ganado para mostrar simultáneamente ambos grupos de Sistemas. */
@media(min-width:1180px) { .sidebar-collapsed .system-groups { grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* En móvil conserva una barra compacta; expandirla muestra los nombres sobre el contenido. */
@media(max-width:850px) { body { --sidebar-width:64px; } body.sidebar-collapsed { --sidebar-width:64px; } .sidebar { width:250px; z-index:5; box-shadow:10px 0 35px #0007; padding:24px 14px; } .sidebar-collapsed .sidebar { width:64px; padding:24px 8px; box-shadow:none; } .sidebar-heading .brand-text { font-size:15px; } .topbar { padding:15px 18px; } .content { padding:25px 16px; } .metrics { grid-template-columns:repeat(2,1fr); } h1 { font-size:28px; } }
/* Conserva acceso a instalación en el tablero, incluyendo pantallas móviles. */
.topbar-actions { display:flex; align-items:center; gap:16px; } .install-app { font-size:12px; padding:7px 11px; } .topbar { gap:12px; } .topbar>span { min-width:0; } .login-install { width:100%; margin-top:16px; } #pwa-help { max-width:520px; } #pwa-help p { font-size:14px; line-height:1.7; }

/* Mantiene credenciales plegadas y separadas de los campos públicos. */
.ssh-editor { border:1px solid var(--line); border-radius:9px; padding:14px; background:#131914; } .ssh-editor summary { cursor:pointer; color:var(--accent); font-size:13px; } .ssh-editor>.form-grid { margin-top:15px; } .ssh-clear { display:flex; align-items:center; gap:8px; font-size:12px; } .ssh-clear input { width:auto; margin:0; accent-color:var(--accent); }
/* Presenta acceso únicamente mediante una acción y sin contraseña en el listado. */
.ssh-card-button { padding:0; background:none; } #ssh-dialog { max-width:600px; } #reveal-ssh { margin-top:14px; } .ssh-command-label { margin-top:20px; } #ssh-command { font-family:ui-monospace,Consolas,monospace; overflow-wrap:anywhere; } .ssh-explanation,#ssh-message { font-size:12px; } #ssh-secret { font-family:ui-monospace,Consolas,monospace; }