:root { color-scheme: dark; --bg:#07111f; --panel:#0d1928; --panel2:#132238; --line:#263b56; --text:#f4f8fd; --muted:#9eafc3; --green:#2196f3; --green2:#1976d2; --yellow:#f5c85b; --red:#ff7b76; --shadow:0 24px 60px #0009; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 60% -10%,#123765 0,transparent 35%),var(--bg); color:var(--text); }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
[hidden] { display:none!important; }
.login-shell { min-height:100vh; display:grid; place-items:center; padding:24px; }
.login-card { width:min(430px,100%); padding:42px; border:1px solid var(--line); border-radius:24px; background:#0c1827eb; box-shadow:var(--shadow); backdrop-filter:blur(18px); }
.brand-mark { display:grid; place-items:center; width:52px; height:52px; border-radius:16px; background:linear-gradient(135deg,#1976d2,#54b5ff); color:#f8fbff; font-size:28px; font-weight:900; }
.eyebrow { color:var(--green); font-size:11px; font-weight:800; letter-spacing:.18em; margin:20px 0 7px; }
h1,h2,p { margin-top:0; }
.login-card h1 { font-size:30px; margin-bottom:10px; }
.muted { color:var(--muted); }
label { display:grid; gap:7px; color:#cfdae8; font-size:13px; font-weight:650; margin:18px 0; }
input,select,textarea { width:100%; color:var(--text); border:1px solid var(--line); border-radius:10px; padding:11px 12px; background:#091421; outline:none; }
input:focus,select:focus,textarea:focus { border-color:var(--green2); box-shadow:0 0 0 3px #2196f326; }
.primary,.ghost,.danger,.table-action { border:0; border-radius:10px; padding:10px 15px; font-weight:750; }
.primary { background:linear-gradient(135deg,var(--green2),var(--green)); color:#fff; box-shadow:0 8px 24px #1976d244; }
.login-card .primary { width:100%; margin-top:8px; }
.ghost,.table-action { background:#17263a; color:#e3ebf5; border:1px solid var(--line); }
.danger { background:#3b1919; color:#ffaaa6; }
.error { color:var(--red); margin:15px 0 0; }
.app-shell { display:grid; grid-template-columns:250px 1fr; min-height:100vh; }
.sidebar { position:sticky; top:0; height:100vh; border-right:1px solid var(--line); background:#091522eb; padding:24px 16px; display:flex; flex-direction:column; }
.logo { display:flex; gap:12px; align-items:center; padding:0 10px 26px; }
.logo>span { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; background:linear-gradient(135deg,var(--green2),var(--green)); color:#fff; font-weight:900; font-size:21px; }
.logo div { display:grid; }.logo small,.sidebar-footer small { color:var(--muted); font-size:11px; }
nav { display:grid; gap:5px; }
nav button { text-align:left; display:flex; gap:12px; align-items:center; color:var(--muted); background:transparent; border:0; border-radius:10px; padding:11px 12px; font-weight:700; }
nav button:hover,nav button.active { color:var(--text); background:#172940; }
nav button.active { box-shadow:inset 3px 0 var(--green); }
.sidebar-footer { margin-top:auto; padding:16px 10px 0; border-top:1px solid var(--line); display:grid; gap:12px; }
.sidebar-footer #identity { display:grid; gap:2px; overflow:hidden; }.sidebar-footer small { overflow:hidden; text-overflow:ellipsis; }
.workspace { min-width:0; padding:34px clamp(22px,4vw,64px) 60px; }
.workspace>header { display:flex; align-items:center; justify-content:space-between; margin-bottom:30px; }
.workspace>header .eyebrow { margin:0 0 5px; }.workspace>header h1 { margin:0; font-size:29px; }
.secure-pill,.badge,.protocol { display:inline-flex; align-items:center; width:max-content; border-radius:999px; padding:5px 9px; font-size:10px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.secure-pill { background:#142d4d; color:#74c4ff; border:1px solid #24558b; }
.page-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:22px; }.page-head p { color:var(--muted); margin:0; }
.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.metric { border:1px solid var(--line); border-radius:16px; padding:20px; background:linear-gradient(145deg,#13243a,#0c1725); display:grid; gap:5px; }
.metric span,.metric small { color:var(--muted); }.metric strong { font-size:34px; color:var(--green); }
.welcome-panel { margin-top:18px; padding:30px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(120deg,#102b4d,#101c2c); display:flex; justify-content:space-between; align-items:center; gap:30px; }
.welcome-panel h2 { font-size:24px; }.welcome-panel p { color:var(--muted); margin-bottom:0; }.flow { white-space:nowrap; color:#bdcadd; padding:15px 18px; border-radius:12px; background:#091421; }.flow span { color:var(--green); margin:0 5px; }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:15px; background:var(--panel); }
#content>.table-wrap+h2 { margin-top:30px; }
#content>h2 { margin:0 0 12px; font-size:17px; }
table { width:100%; border-collapse:collapse; min-width:780px; } th { text-align:left; color:var(--muted); font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:13px 16px; background:#111f31; } td { padding:14px 16px; border-top:1px solid var(--line); font-size:13px; } td strong,td small { display:block; } td small { color:var(--muted); margin-top:3px; }
.badge.active { color:#82caff; background:#15395f; }.badge.past_due { color:var(--yellow); background:#3b3117; }.badge.suspended,.badge.inactive,.badge.disabled,.badge.interrupted { color:#ff9c97; background:#3d1e1e; }.badge.closed { color:#b7c5d5; background:#263546; }
.protocol { color:#8dcfff; background:#153653; }.empty { text-align:center; color:var(--muted); padding:40px; }
.alert { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 18px; border-radius:12px; margin:0 0 20px; }.alert span { color:#d8d0b8; }.alert.warning { background:#332b17; border:1px solid #5f4c20; }.alert.danger { background:#3a1a1a; border:1px solid #6c2929; }
dialog { width:min(680px,calc(100% - 32px)); max-height:90vh; overflow:auto; color:var(--text); border:1px solid var(--line); border-radius:18px; padding:25px; background:#0d1928; box-shadow:var(--shadow); } dialog::backdrop { background:#000a; backdrop-filter:blur(4px); } dialog h2 { margin-bottom:20px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }.span-2 { grid-column:1/-1; }.dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:24px; padding-top:18px; border-top:1px solid var(--line); }
fieldset { border:1px solid var(--line); border-radius:12px; padding:10px 14px; margin:9px 0; } legend { color:var(--muted); font-size:12px; }.days,.checks { display:flex; flex-wrap:wrap; gap:14px; }.days label,.checks label { display:flex; align-items:center; gap:5px; margin:4px 0; }.days input,.checks input { width:auto; }
.resource-grid { display:grid; grid-template-columns:repeat(3,minmax(230px,1fr)); gap:18px; }.resource-card { border:1px solid var(--line); border-radius:18px; padding:22px; background:linear-gradient(145deg,#13243a,#0b1624); }.resource-card.unavailable { opacity:.65; }.resource-top { display:flex; justify-content:space-between; align-items:center; }.resource-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; color:var(--green); background:#15395f; font-weight:900; }.resource-card h2 { margin:22px 0 5px; }.resource-card>p { color:var(--muted); }.resource-policy { display:flex; justify-content:space-between; color:#acbbce; font-size:11px; padding:13px 0; border-top:1px solid var(--line); }.connect { width:100%; margin-top:8px; }.empty-state { grid-column:1/-1; text-align:center; padding:70px 20px; border:1px dashed var(--line); border-radius:18px; color:var(--muted); }.empty-state>div { color:var(--green); font-size:34px; }
.row-actions { display:flex; gap:7px; flex-wrap:wrap; }.check-line { display:flex; align-items:center; gap:10px; padding-top:24px; }.check-line input { width:auto; }.form-help { color:var(--muted); font-size:12px; line-height:1.5; margin:5px 0 18px; }
.assigned-users,.permission-summary { display:flex; flex-wrap:wrap; gap:6px; max-width:290px; }
.assigned-users span,.permission-summary span { border:1px solid #285078; background:#102a43; color:#d7ecff; border-radius:999px; padding:4px 8px; font-size:11px; white-space:nowrap; }
.permission-summary small { width:100%; }
.assignment-picker { display:grid; gap:8px; max-height:360px; overflow:auto; margin-top:10px; }
.assignment-picker label { display:flex; align-items:center; gap:12px; min-height:58px; margin:0; border:1px solid var(--line); border-radius:10px; padding:10px 12px; cursor:pointer; }
.assignment-picker label:hover { border-color:var(--blue); background:rgba(35,146,240,.08); }
.assignment-picker input[type="checkbox"] { flex:0 0 auto; width:16px; height:16px; min-height:0; margin:0; padding:0; accent-color:var(--green); }
.assignment-picker label span { display:grid; min-width:0; gap:2px; }
.assignment-picker label strong,.assignment-picker label small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.assignment-picker label small { color:var(--muted); }
.operational-status { display:inline-flex; align-items:center; gap:7px; min-height:31px; padding:6px 9px; color:#b8c8d9; border:1px solid #31465d; border-radius:999px; background:#122033; font-size:11px; white-space:nowrap; }
.operational-status span { width:9px; height:9px; border-radius:50%; background:#6d7d90; box-shadow:0 0 0 3px #6d7d9020; }
.operational-status b { font-size:11px; font-weight:750; }
.operational-status.reachable { color:#a9f1d2; border-color:#24765f; background:#0b2a28; }
.operational-status.reachable span { background:#3ddc97; box-shadow:0 0 0 3px #3ddc9725,0 0 10px #3ddc9788; }
.operational-status.unreachable { color:#ffb1ad; border-color:#743535; background:#351b20; }
.operational-status.unreachable span { background:#ff615a; box-shadow:0 0 0 3px #ff615a22,0 0 10px #ff615a66; }
.operational-status.checking span { animation:health-pulse 1s ease-in-out infinite; }
@keyframes health-pulse { 50% { opacity:.35; transform:scale(.75); } }
.audit-filters { display:grid; grid-template-columns:minmax(260px,2fr) repeat(3,minmax(150px,1fr)); gap:12px; margin:0 0 16px; padding:18px; border:1px solid var(--line); border-radius:15px; background:#0d1928; }
.audit-filters label { margin:0; }
.audit-search { grid-column:span 2; }
.audit-filter-actions { display:flex; align-items:end; gap:8px; padding-bottom:1px; }
.audit-results { display:flex; gap:9px; margin:0 0 24px; }
.audit-results span { padding:5px 9px; color:#9fc8ea; border:1px solid #244a6c; border-radius:999px; background:#102842; font-size:11px; font-weight:750; }
.profile-panel { width:min(920px,100%); overflow:hidden; border:1px solid var(--line); border-radius:18px; background:#0d1928; box-shadow:var(--shadow); }
.profile-section { display:grid; grid-template-columns:minmax(210px,.75fr) minmax(340px,1.4fr); gap:38px; padding:26px; }
.profile-section+.profile-section { border-top:1px solid var(--line); }
.profile-section h2 { margin:5px 0 8px; font-size:19px; }
.profile-section>div>p:not(.eyebrow) { margin:0; color:var(--muted); font-size:12px; line-height:1.55; }
.profile-section label { margin:0 0 14px; }
.profile-section input:disabled { color:#8ea0b5; background:#0a1420; opacity:.8; }
.profile-actions { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 26px; border-top:1px solid var(--line); background:#101f31; }
.profile-actions span { color:var(--muted); font-size:11px; }
.mfa-status-card { display:grid; gap:14px; align-content:start; padding:18px; border:1px solid var(--line); border-radius:14px; background:#091522; }
.mfa-status-card>div:first-child { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.mfa-status-card>p { margin:0; color:var(--muted); font-size:12px; }
.mfa-enrollment { text-align:center; }
.mfa-qr { display:block; width:260px; max-width:100%; margin:14px auto; padding:8px; border-radius:12px; background:#fff; }
.mfa-secret { margin:12px 0; color:var(--muted); font-size:12px; text-align:center; }
.mfa-secret code { display:block; margin-top:9px; padding:9px; color:#bfe2ff; border:1px solid var(--line); border-radius:8px; background:#07111e; overflow-wrap:anywhere; user-select:all; }
.recovery-codes { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:16px 0 22px; }
.recovery-codes code { padding:9px; color:#d9ebff; border:1px solid #29445f; border-radius:8px; background:#081522; text-align:center; user-select:all; }
.login-step { color:var(--muted); font-size:13px; line-height:1.55; text-align:center; }
.login-step strong { color:var(--text); font-size:15px; }
.recovery-panel .primary { width:100%; }
@media (max-width:1100px) { .audit-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }.audit-search { grid-column:span 2; } }
@media (max-width:700px) { .profile-section { grid-template-columns:1fr; gap:20px; }.profile-actions { align-items:stretch; flex-direction:column; }.profile-actions .primary { width:100%; }.recovery-codes { grid-template-columns:1fr; } }
@media (max-width:620px) { .audit-filters { grid-template-columns:1fr; }.audit-search { grid-column:auto; }.audit-filter-actions>* { flex:1; } }
.toast { position:fixed; right:24px; bottom:24px; z-index:20; padding:13px 17px; color:#eef7ff; background:#163b61; border:1px solid #2d6ca5; border-radius:11px; box-shadow:var(--shadow); }.loading { color:var(--muted); padding:40px; text-align:center; }
.session-body { overflow:hidden; }.session-stage { width:100vw; height:100vh; background:#050b14; display:flex; flex-direction:column; }.session-toolbar { position:relative; z-index:4; min-height:58px; display:flex; justify-content:space-between; align-items:center; padding:9px 16px; border-bottom:1px solid var(--line); background:#0d1827; transition:transform .22s ease; }.session-toolbar>div { display:flex; gap:8px; }.gateway-card { margin:auto; text-align:center; width:min(560px,calc(100% - 32px)); }.gateway-icon { margin:0 auto 20px; display:grid; place-items:center; width:70px; height:70px; border-radius:50%; background:#153b64; color:var(--green); font-size:32px; }.gateway-card p { color:var(--muted); line-height:1.65; }
.toolbar-reveal { position:fixed; z-index:8; top:0; right:18px; padding:7px 13px; color:#d8eaff; border:1px solid #2b4c6d; border-top:0; border-radius:0 0 10px 10px; background:#10243aee; box-shadow:0 6px 20px #0008; font-size:11px; font-weight:750; }
.session-stage.toolbar-hidden .session-toolbar { position:absolute; left:0; right:0; transform:translateY(-100%); }
.session-stage.toolbar-hidden .guacamole-frame { inset:0; height:100%; }
.remote-login { width:min(390px,100%); margin:24px auto 0; padding:24px; text-align:left; border:1px solid var(--line); border-radius:16px; background:#0d1928; box-shadow:var(--shadow); }.remote-login label { margin:0 0 16px; }.remote-login .primary { width:100%; margin-top:2px; }.remote-login small { display:block; margin-top:15px; color:var(--muted); line-height:1.5; text-align:center; }.remote-login .error { text-align:center; margin-bottom:0; }
.remember-check { display:flex!important; grid-template-columns:auto 1fr; align-items:center; gap:9px!important; margin:11px 0 16px!important; color:var(--muted)!important; font-size:12px!important; font-weight:600!important; }.remember-check input { width:auto; margin:0; }
.link-button { width:100%; margin-top:9px; padding:8px; color:#9fc8ea; border:0; background:transparent; font-weight:700; }
@media (max-width:1000px) { .metric-grid { grid-template-columns:1fr 1fr; }.resource-grid { grid-template-columns:1fr 1fr; }.welcome-panel { align-items:flex-start; flex-direction:column; }.flow { white-space:normal; } }
@media (max-width:760px) { .app-shell { display:block; }.sidebar { position:static; width:100%; height:auto; padding:14px; border-right:0; border-bottom:1px solid var(--line); }.logo { padding:0 5px 12px; }.sidebar nav { display:flex; overflow:auto; padding-bottom:3px; }.sidebar nav button { white-space:nowrap; }.sidebar-footer { margin-top:12px; display:flex; justify-content:space-between; align-items:center; }.workspace { padding:24px 16px 50px; }.metric-grid,.resource-grid { grid-template-columns:1fr; }.form-grid { grid-template-columns:1fr; }.span-2 { grid-column:auto; }.page-head { align-items:flex-start; flex-direction:column; }.page-head .primary { width:100%; }.alert { align-items:flex-start; flex-direction:column; }.session-toolbar strong { max-width:42vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } }
@media (pointer:coarse) { button,input,select { min-height:44px; }.table-action { min-height:40px; }.resource-card { padding:24px; } }

.guacamole-frame { position:absolute; inset:58px 0 0; width:100%; height:calc(100% - 58px); border:0; background:#050b14; }

/* Accesos: escenas por tipo de recurso y recorrido de conexión */
:root { --ok:#3ddc97; --scene:#07101c; --ease:cubic-bezier(.2,.7,.2,1); }
.resource-card { position:relative; padding:0; overflow:hidden; display:flex; flex-direction:column; transition:transform .35s var(--ease),border-color .35s,box-shadow .35s; }
.resource-card:not(.unavailable):hover { transform:translateY(-4px); border-color:#2d6ca5; box-shadow:0 18px 40px #0007,0 0 0 1px #2d6ca544; }
.resource-card .scene { position:relative; height:168px; display:grid; place-items:center; background:radial-gradient(circle at 50% 120%,#123765aa,transparent 65%),var(--scene); border-bottom:1px solid var(--line); overflow:hidden; }
.resource-card .scene::before { content:""; position:absolute; inset:0; opacity:.5; background-image:radial-gradient(#26405e 1px,transparent 1px); background-size:16px 16px; mask-image:radial-gradient(circle,#000 30%,transparent 80%); }
.resource-card.unavailable .scene { filter:grayscale(.9) brightness(.7); }
.resource-card .body { padding:18px 22px 22px; display:flex; flex-direction:column; flex:1; }
.resource-card .body h2 { margin:0 0 4px; font-size:19px; }
.resource-card .body>p { margin:0 0 4px; color:var(--muted); font-size:13px; }
.resource-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.live { display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:750; color:#bfe9d6; }
.live::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 0 #3ddc9788; }
.unavailable .live { color:var(--muted); }
.unavailable .live::before { background:#5b6b80; }
.resource-card .resource-policy { margin-top:auto; }
.resource-card .link-status { min-height:18px; margin:10px 0 0; font-size:12px; color:var(--muted); text-align:center; }

/* Ilustraciones livianas, dibujadas en SVG */
.art { width:210px; height:auto; position:relative; z-index:1; filter:drop-shadow(0 10px 18px #0008); transition:transform .5s var(--ease); }
.resource-card:hover .art { transform:scale(1.05); }
.art .bezel { fill:#17283e; stroke:#2a4262; }
.art .screen { fill:#0a1626; }
.art .win { fill:#12243a; stroke:#25405f; }
.art .bar { fill:#1e3a5c; }
.art .dot { fill:#4d6e96; }
.art .tile { fill:var(--green); opacity:.75; }
.art .tile.b { opacity:.4; }
.art .tile.c { fill:#54b5ff; opacity:.55; }
.art .task { fill:#0f2036; }
.art .stand,.art .base { fill:#1b2f49; }
.art .txt { fill:#4d6e96; transform-box:fill-box; transform-origin:left; }
.art .txt.hi { fill:var(--green); }
.art .unit { fill:#14263c; stroke:#2a4262; }
.art .slot { fill:#0b1829; }
.art .led { fill:var(--ok); }
.art .cursor { fill:#fff; stroke:#07101c; stroke-width:.8; }
.art .cursor.alt { fill:#54b5ff; }
.art .ring { fill:none; stroke:var(--green); stroke-width:1.5; transform-box:fill-box; transform-origin:center; }
.art .block { fill:var(--green); }

/* Recorrido Vos → B-Access → Equipo */
.link { position:absolute; inset:0; z-index:3; display:grid; place-items:center; background:#050d18ee; opacity:0; pointer-events:none; transition:opacity .3s; }
.link svg { width:min(300px,86%); overflow:visible; }
.link .wire { stroke:#26405e; stroke-width:2; }
.link .flow-line { stroke:var(--green); stroke-width:2.5; stroke-dasharray:4 9; stroke-linecap:round; opacity:0; }
.link .node { fill:#10213a; stroke:#2d6ca5; stroke-width:2; transition:fill .3s,stroke .3s; }
.link .node-label { fill:var(--muted); font-size:11px; font-weight:700; text-anchor:middle; }
.link .glyph { fill:none; stroke:#8dcfff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.is-connecting .link,.is-connected .link { opacity:1; }
.is-connecting .flow-line { opacity:1; }
.is-connecting[data-step="0"] .n1,.is-connecting[data-step="1"] .n1,.is-connecting[data-step="1"] .n2,.is-connecting[data-step="2"] .n1,.is-connecting[data-step="2"] .n2,.is-connecting[data-step="2"] .n3,.is-connected .node { fill:#15508a; stroke:var(--green); }
.is-connecting[data-step="1"] .l2,.is-connecting[data-step="0"] .l2 { opacity:0; }
.is-connecting[data-step="0"] .l1 { opacity:1; }
.is-connected .flow-line { opacity:1; stroke:var(--ok); stroke-dasharray:none; }
.is-connected .node { stroke:var(--ok); }
.is-connected .n3 { fill:#14513a; }
.is-connecting .connect { opacity:.6; }

/* Pantalla de sesión */
.gateway-link { position:relative; inset:auto; opacity:1; background:none; margin:0 auto 18px; width:min(300px,100%); height:90px; }
.gateway-link.is-error .flow-line { stroke:var(--red); opacity:1; }
.gateway-link.is-error .n3 { stroke:var(--red); }

@media (prefers-reduced-motion:no-preference) {
  .live::before { animation:ping 2s infinite; }
  .unavailable .live::before { animation:none; }
  .art .cursor.main { animation:wander 6s ease-in-out infinite; }
  .art .cursor.alt { animation:wander2 5s ease-in-out infinite; }
  .art .txt { animation:type 4.5s steps(14) infinite; }
  .art .txt:nth-of-type(2) { animation-delay:.6s; }
  .art .txt:nth-of-type(3) { animation-delay:1.2s; }
  .art .txt:nth-of-type(4) { animation-delay:1.8s; }
  .art .block { animation:blink 1s steps(1) infinite; }
  .art .led { animation:blink 1.6s steps(1) infinite; }
  .art .led:nth-of-type(2n) { animation-delay:.4s; }
  .art .led:nth-of-type(3n) { animation-delay:.9s; }
  .art .ring { animation:ringout 2.2s ease-out infinite; }
  .is-connecting .flow-line { animation:flow .7s linear infinite; }
  .is-connected .n3 { animation:pop .5s var(--ease); }
  .is-connected .scene .art { animation:wake .7s var(--ease); }
}

@keyframes ping { 70%,100% { box-shadow:0 0 0 8px #3ddc9700; } }
@keyframes blink { 50% { opacity:.15; } }
@keyframes type { 0% { transform:scaleX(0); } 35%,85% { transform:scaleX(1); } 100% { transform:scaleX(0); } }
@keyframes wander { 0%,100% { transform:translate(90px,52px); } 35% { transform:translate(122px,40px); } 65% { transform:translate(150px,66px); } }
@keyframes wander2 { 0%,100% { transform:translate(70px,70px); } 50% { transform:translate(130px,48px); } }
@keyframes ringout { from { transform:scale(.4); opacity:.9; } to { transform:scale(2.4); opacity:0; } }
@keyframes flow { to { stroke-dashoffset:-13; } }
@keyframes pop { 50% { transform:scale(1.18); transform-box:fill-box; transform-origin:center; } }
@keyframes wake { 0% { filter:brightness(2.2); } 100% { filter:brightness(1); } }

/* Tarjeta de acceso: lenguaje visual de infraestructura en vivo */
.resource-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,560px),760px)); }
.resource-card--network { isolation:isolate; min-height:370px; padding:26px; background:linear-gradient(145deg,#102238 0%,#0b1726 55%,#091522 100%); box-shadow:0 22px 55px #02071266; }
.resource-card--network::before { content:""; position:absolute; z-index:-1; inset:-1px; border-radius:inherit; pointer-events:none; background:radial-gradient(circle at 78% 0,#2196f31c,transparent 34%),linear-gradient(90deg,#2196f355,transparent 28%); mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude; padding:1px; }
.resource-head { display:flex; align-items:flex-start; justify-content:space-between; gap:22px; }
.resource-title { min-width:0; }
.resource-title h2 { margin:13px 0 4px; font-size:26px; letter-spacing:-.025em; }
.resource-title p { margin:0; color:var(--muted); font-size:13px; }
.resource-head .live { flex:none; margin-top:4px; padding:7px 10px; border:1px solid #256e5a; border-radius:999px; background:#0b2a28; color:#a9f1d2; }
.resource-head .live::before { width:7px; height:7px; }
.access-route { position:relative; display:grid; grid-template-columns:72px minmax(72px,1fr) 80px minmax(72px,1fr) 72px; align-items:center; gap:8px; margin:27px 0 24px; padding:23px clamp(16px,4vw,34px) 19px; border:1px solid #1d3854; border-radius:16px; overflow:hidden; background:linear-gradient(180deg,#07121f,#091725); }
.access-route::before { content:""; position:absolute; inset:0; opacity:.42; background-image:radial-gradient(#244563 1px,transparent 1px); background-size:16px 16px; mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent); }
.route-node { position:relative; z-index:1; display:grid; justify-items:center; gap:8px; color:#b9c8d9; font-size:11px; font-weight:750; }
.route-symbol { width:48px; height:48px; display:grid; place-items:center; border:1px solid #28618e; border-radius:13px; color:#79c9ff; background:linear-gradient(145deg,#123354,#0b2037); box-shadow:0 10px 24px #0006,0 0 22px #2196f312; }
.route-symbol svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.route-brand { color:#fff; border-color:#258ce0; background:linear-gradient(145deg,#2196f3,#176ab1); font-size:22px; font-weight:900; }
.route-target .route-symbol { color:#70e1bd; border-color:#24765f; background:linear-gradient(145deg,#103b39,#0a242a); }
.route-beam { position:relative; z-index:1; height:36px; display:flex; align-items:center; }
.route-beam::before { content:""; position:absolute; left:0; right:0; top:50%; height:2px; background:linear-gradient(90deg,#258ed1,#42d8ff); box-shadow:0 0 10px #2abfff99; }
.route-beam::after { content:""; position:absolute; top:calc(50% - 3px); left:0; width:6px; height:6px; border-radius:50%; background:#9cecff; box-shadow:0 0 10px #5bdeff; }
.route-beam span { position:absolute; left:50%; top:-3px; transform:translateX(-50%); padding:2px 7px; color:#79c9ff; border:1px solid #21496a; border-radius:999px; background:#081827; font-size:9px; font-weight:850; letter-spacing:.09em; }
.route-beam i { position:absolute; right:0; top:calc(50% - 2px); width:5px; height:5px; border-top:1.5px solid #71dbff; border-right:1.5px solid #71dbff; transform:rotate(45deg); }
.resource-actions { display:grid; grid-template-columns:1fr auto; align-items:end; gap:24px; }
.resource-card--network .resource-policy { justify-content:flex-start; gap:34px; padding:0; border:0; }
.resource-card--network .resource-policy>span { display:grid; gap:3px; }
.resource-card--network .resource-policy b { color:#eaf3fe; font-size:12px; font-weight:760; }
.resource-card--network .resource-policy small { color:#6f839a; font-size:10px; }
.resource-card--network .connect { width:auto; min-width:188px; min-height:46px; margin:0; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:12px 15px 12px 18px; }
.resource-card--network .connect b { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:#ffffff20; font-size:15px; }
.resource-card--network .link-status { min-height:18px; margin:13px 0 -5px; text-align:right; }
.resource-card--network.unavailable .access-route { filter:grayscale(.75); }

.security-metrics { margin-bottom:18px; }
.security-policy { display:grid; grid-template-columns:repeat(4,minmax(140px,1fr)); gap:1px; margin:0 0 28px; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:var(--line); }
.security-policy>div { display:grid; gap:5px; padding:16px 18px; background:#0d1d2f; }
.security-policy span { color:var(--muted); font-size:12px; }
.security-policy strong { font-size:16px; }
.security-policy p { grid-column:1/-1; margin:0; padding:12px 18px; color:#9eb5cc; background:#0a1726; font-size:12px; }
.security-alert-list { display:grid; gap:10px; margin-bottom:30px; }
.security-alert { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px 18px; border:1px solid var(--line); border-left-width:4px; border-radius:12px; background:#0d1d2f; }
.security-alert.severity-medium { border-left-color:#d5a72d; }
.security-alert.severity-high { border-left-color:#ef7e42; }
.security-alert.severity-critical { border-left-color:#f05252; }
.security-alert.severity-low { border-left-color:#2998ea; }
.security-alert>div { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:5px 10px; }
.security-alert .severity { padding:3px 7px; border-radius:999px; color:#ffdca1; background:#3b2d15; font-size:10px; font-weight:850; text-transform:uppercase; letter-spacing:.08em; }
.security-alert p,.security-alert small { grid-column:1/-1; margin:0; color:var(--muted); font-size:12px; }
.security-empty { padding:22px; border:1px dashed var(--line); border-radius:12px; }

@media (prefers-reduced-motion:no-preference) {
  .route-beam::after { animation:route-pulse 2.1s ease-in-out infinite; }
  .route-beam:nth-of-type(4)::after { animation-delay:1.05s; }
}
@keyframes route-pulse { 0% { left:0; opacity:0; } 15%,75% { opacity:1; } 100% { left:calc(100% - 6px); opacity:0; } }

@media (max-width:620px) {
  .security-policy { grid-template-columns:1fr; }
  .security-policy p { grid-column:auto; }
  .security-alert { align-items:flex-start; flex-direction:column; }
  .security-alert .ghost { width:100%; }
  .resource-card--network { min-height:0; padding:21px; }
  .resource-head { gap:12px; }
  .resource-title h2 { font-size:23px; }
  .resource-head .live { padding:6px 8px; font-size:9px; }
  .access-route { grid-template-columns:55px minmax(36px,1fr) 62px minmax(36px,1fr) 55px; gap:3px; margin:22px 0; padding:20px 8px 16px; }
  .route-symbol { width:42px; height:42px; border-radius:11px; }
  .route-beam span { top:-1px; padding:1px 4px; font-size:8px; }
  .resource-actions { grid-template-columns:1fr; gap:20px; }
  .resource-card--network .resource-policy { justify-content:space-between; gap:14px; }
  .resource-card--network .connect { width:100%; }
  .resource-card--network .link-status { text-align:center; }
}