/* ===== NexusFuel — tokens de tema (claro por defecto + oscuro) ===== Los nombres de variable no cambian: todo el CSS existente sigue sirviendo. El tema se fija con data-theme en (script anti-flash en base.html). */ :root{ /* Identidad "Enterprise refinado": esquinas discretas, sombras sutiles */ --radius:4px; --radius-lg:6px; --radius-sm:3px; /* claro */ --bg:#F4F6F9; --surface:#FFFFFF; --surface-2:#F1F5F9; --border:#E4E8EE; --border-strong:#CBD5E1; --text:#0F172A; --text-muted:#5B6779; --accent:#0369A1; --accent-hover:#075985; --on-accent:#FFFFFF; --ok:#15803D; --warn:#B45309; --crit:#DC2626; --shadow:0 1px 2px rgba(15,23,42,.04); --shadow-md:0 1px 3px rgba(15,23,42,.08),0 1px 2px rgba(15,23,42,.06); --shadow-pop:0 10px 30px rgba(15,23,42,.14),0 2px 8px rgba(15,23,42,.08); } :root[data-theme="dark"]{ --bg:#0B1120; --surface:#151E2E; --surface-2:#1E293B; --border:#293546; --border-strong:#3A485C; --text:#E6EAF0; --text-muted:#8B97A8; --accent:#38BDF8; --accent-hover:#7DD3FC; --on-accent:#04121f; --ok:#4ADE80; --warn:#FBBF24; --crit:#F87171; --shadow:0 1px 2px rgba(0,0,0,.3); --shadow-md:0 1px 3px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.3); --shadow-pop:0 16px 40px rgba(0,0,0,.5),0 4px 12px rgba(0,0,0,.4); } *{box-sizing:border-box} body{ font-family:"Fira Sans",system-ui,sans-serif; background:var(--bg); color:var(--text); max-width:840px; margin:0 auto; padding:48px 24px; line-height:1.6; } h1{font-size:28px; font-weight:600; margin:0 0 4px} h2{font-size:18px; font-weight:500; margin:0} a{color:var(--accent)} code,.mono{font-family:"Fira Code",monospace; font-size:14px} .subtitle{color:var(--text-muted); margin:0 0 32px} .grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:0 0 24px} @media (max-width:640px){.grid{grid-template-columns:1fr}} .card{ display:flex; gap:16px; align-items:flex-start; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px; color:var(--text); text-decoration:none; min-height:44px; box-shadow:var(--shadow-md); transition:border-color .15s ease-out, box-shadow .15s ease-out; } .card:hover{border-color:var(--border-strong); box-shadow:var(--shadow-pop)} .card:focus-visible{outline:2px solid var(--accent); outline-offset:2px} .card svg{flex-shrink:0; width:26px; height:26px; stroke:var(--accent); margin-top:2px} .card p{margin:4px 0 0; color:var(--text-muted); font-size:14px} .panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px 24px; margin:0 0 24px; box-shadow:var(--shadow)} .panel h2{margin-bottom:12px} .kv{display:grid; grid-template-columns:150px 1fr; gap:6px 16px; font-size:14px} .kv dt{color:var(--text-muted)} .kv dd{margin:0; word-break:break-all} table{width:100%; border-collapse:collapse} td{padding:10px 14px; border-bottom:1px solid var(--border); font-size:15px} td:first-child{color:var(--text-muted); width:230px} .big{font-size:22px; font-weight:600; font-family:"Fira Code",monospace} .ok{color:var(--ok)} .warn{color:var(--warn)} .crit{color:var(--crit)} .dot{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:8px; flex-shrink:0} .dot.ok{background:var(--ok)} .dot.crit{background:var(--crit)} .dot.warn{background:var(--warn)} .dot.unknown{background:var(--text-muted)} footer{color:var(--text-muted); font-size:13px; margin-top:32px; border-top:1px solid var(--border); padding-top:16px} @media (prefers-reduced-motion:reduce){*{transition:none!important}} /* ---- botones de copiar ---- */ .copyrow{display:flex;align-items:center;gap:8px} .copybtn{background:var(--surface-2);border:1px solid var(--border);color:var(--text-muted);border-radius:var(--radius-sm); cursor:pointer;padding:4px 8px;font-size:12px;min-height:32px;display:inline-flex;align-items:center;gap:4px;transition:color .15s,border-color .15s} .copybtn:hover{color:var(--accent);border-color:var(--accent)} .copybtn.done{color:var(--ok);border-color:var(--ok)} .copybtn svg{width:14px;height:14px;stroke:currentColor} /* ---- jerarquia de estado en /status/ ---- */ tr.is-crit td{background:color-mix(in srgb, var(--crit) 8%, transparent)} tr.is-crit td:first-child{border-left:3px solid var(--crit)} .badge{display:inline-block;padding:2px 8px;border-radius:var(--radius-sm);font-size:12px;font-weight:600;font-family:'Fira Code',monospace} .badge.ok{background:color-mix(in srgb, var(--ok) 15%, transparent);color:var(--ok)} .badge.crit{background:color-mix(in srgb, var(--crit) 15%, transparent);color:var(--crit)} .badge.warn{background:color-mix(in srgb, var(--warn) 15%, transparent);color:var(--warn)} /* ---- responsive ---- */ @media (max-width:1024px){body{max-width:100%}} @media (max-width:768px){.grid{grid-template-columns:1fr}.kv{grid-template-columns:1fr} td:first-child{width:auto}} @media (max-width:640px){body{padding:32px 16px}}