/* Copiado tal cual de la maqueta del dueño "PESTIA · Pantalla General.html" (D5, D9: no reinterpretar). */
:root{
      --bg-1:#04121c;
      --bg-2:#081c2a;
      --bg-3:#0c2434;
      --panel:rgba(8,24,37,.90);
      --panel-2:rgba(11,32,48,.94);
      --line:rgba(121,227,255,.14);
      --line-strong:rgba(121,227,255,.24);
      --text:#eef8ff;
      --muted:#a6c0cf;
      --cyan:#67e8ff;
      --green:#62e89f;
      --logo-green:#62ff9a;
      --orange:#ff9c37;
      --red:#ff6558;
      --yellow:#f3c95f;
      --shadow:0 18px 42px rgba(0,0,0,.34);
      --radius-xl:28px;
      --radius-lg:22px;
      --radius-md:16px;
    }

    *{box-sizing:border-box}
    html,body{
      margin:0;min-height:100%;
      font-family:Calibri, Arial, sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at 15% 18%, rgba(71,198,255,.12), transparent 22%),
        radial-gradient(circle at 84% 14%, rgba(255,156,55,.10), transparent 20%),
        radial-gradient(circle at 50% 84%, rgba(88,226,180,.06), transparent 18%),
        linear-gradient(180deg,var(--bg-1),var(--bg-2) 48%,var(--bg-1));
    }

    body::before{
      content:"";
      position:fixed;inset:0;pointer-events:none;opacity:.14;
      background:
        radial-gradient(circle, rgba(140,228,255,.20) .7px, transparent .8px),
        linear-gradient(rgba(123,210,240,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(123,210,240,.03) 1px, transparent 1px);
      background-size:120px 120px, 72px 72px, 72px 72px;
    }

    .app{
      position:relative;z-index:1;min-height:100vh;
      padding:22px;
      display:grid;
      grid-template-columns:320px 1fr;
      gap:22px;
    }

    .sidebar,.main-shell{
      background:linear-gradient(180deg, rgba(10,28,42,.90), rgba(7,20,31,.96));
      border:1px solid var(--line);
      box-shadow:var(--shadow);
      backdrop-filter:blur(8px);
    }

    .sidebar{
      border-radius:var(--radius-xl);
      padding:22px 18px;
      display:flex;
      flex-direction:column;
      gap:16px;
    }

    .main-shell{
      border-radius:30px;
      padding:22px;
      overflow:hidden;
    }

    .brand{
      display:flex;align-items:flex-start;justify-content:flex-start;
      padding-bottom:14px;border-bottom:1px solid var(--line);
    }

    .brand-mark{
      display:none;
    }

    .brand h1{display:none}
    .brand small{display:none}

    .card{
      background:linear-gradient(180deg, rgba(16,38,55,.95), rgba(10,24,36,.98));
      border:1px solid var(--line);
      border-radius:var(--radius-lg);
      overflow:hidden;
    }

    .card h2{
      margin:0;padding:14px 16px;font-size:17px;
      border-bottom:1px solid var(--line);
      background:rgba(255,255,255,.02);
    }

    .metrics{display:grid;grid-template-columns:1fr 72px}
    .metrics div{padding:13px 16px;border-bottom:1px solid rgba(121,227,255,.10);font-size:15px}
    .metrics .v{text-align:center;font-size:20px;font-weight:800}
    .tone-blue{background:rgba(103,232,255,.10)}
    .tone-red{background:rgba(255,101,88,.14)}
    .tone-yellow{background:rgba(243,201,95,.12)}

    .list{list-style:none;margin:0;padding:10px 14px 14px}
    .list li{display:flex;gap:10px;align-items:flex-start;padding:11px 4px;border-bottom:1px solid rgba(121,227,255,.08);font-size:14px}
    .alert{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:rgba(255,101,88,.16);border:1px solid rgba(255,101,88,.34);color:#ffb7ae;font-size:12px;font-weight:800;flex:0 0 auto}
    .bullet{width:10px;height:10px;border-radius:2px;background:var(--orange);margin-top:4px;flex:0 0 auto}
    .bullet.green{background:var(--green)}

    .gauges{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    .mini{background:linear-gradient(180deg, rgba(18,42,59,.96), rgba(13,31,44,.98));border:1px solid var(--line);border-radius:18px;padding:12px 10px;text-align:center}
    .mini h3{margin:0 0 10px;font-size:13px;line-height:1.2}
    .ring{width:92px;height:92px;margin:0 auto;border-radius:50%;position:relative;display:grid;place-items:center}
    .ring::after{content:"";position:absolute;inset:10px;border-radius:50%;background:#0b1d2a;box-shadow:inset 0 0 0 1px rgba(133,201,226,.08)}
    .ring span{position:relative;z-index:1;font-size:18px;font-weight:800}
    .ring.sla{background:conic-gradient(var(--green) 0 92%, rgba(255,255,255,.08) 92% 100%)}
    .ring.load{background:conic-gradient(var(--green) 0 18%, var(--yellow) 18% 44%, var(--orange) 44% 65%, var(--red) 65% 100%)}

    .topbar{
      display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
      padding-bottom:16px;border-bottom:1px solid var(--line);
    }
    .topbar h2{margin:0;font-size:31px}
    .topbar p{margin:6px 0 0;color:var(--muted);font-size:14px;max-width:760px;line-height:1.45}
    .pill{
      padding:10px 14px;border-radius:999px;border:1px solid var(--line-strong);
      background:rgba(103,232,255,.07);font-size:13px;font-weight:700;color:#d8f6ff;white-space:nowrap;
    }

    .hero{display:grid;grid-template-columns:1.05fr .95fr;gap:18px;margin-top:18px}
    .hero-card,.kpi,.summary-card{border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg, rgba(13,31,44,.88), rgba(9,22,33,.96))}
    .hero-card{padding:18px}
    .hero-card h3{margin:0 0 8px;font-size:19px}
    .hero-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}
    .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
    .kpi{padding:14px}
    .kpi-label{font-size:12px;color:var(--muted);margin-bottom:6px}
    .kpi-value{font-size:28px;font-weight:800;line-height:1}
    .kpi-sub{font-size:11px;color:var(--muted);margin-top:5px}

    .workspace{display:grid;grid-template-columns:minmax(640px,1fr) 340px;gap:18px;margin-top:18px}
    .hub-panel,.side-panel{border:1px solid var(--line);border-radius:24px;background:linear-gradient(180deg, rgba(11,27,41,.88), rgba(8,20,31,.94));padding:18px}
    .hub-header{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:16px}
    .hub-header h3{margin:0;font-size:24px}
    .hub-header p{margin:6px 0 0;color:var(--muted);font-size:13px;max-width:520px;line-height:1.45}

    .hub-canvas{
      position:relative;height:620px;border-radius:22px;border:1px dashed rgba(121,227,255,.12);
      background:
        radial-gradient(circle at center, rgba(103,232,255,.05), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.01), rgba(255,255,255,0));
      overflow:hidden;
    }

    .node,.core{
      position:absolute;border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;
      text-align:center;padding:16px;border:1px solid var(--line);
      background:linear-gradient(180deg, rgba(15,38,55,.94), rgba(8,21,31,.98));
      box-shadow:0 10px 26px rgba(0,0,0,.24);
      transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
      overflow:visible;
    }

    .node:hover,.core:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,0,0,.30);border-color:rgba(103,232,255,.34);background:linear-gradient(180deg, rgba(18,45,64,.96), rgba(9,24,36,.99))}

    .core{
      width:248px;height:248px;left:50%;top:50%;transform:translate(-50%,-50%);
      border-color:rgba(103,232,255,.34);
      box-shadow:0 16px 34px rgba(0,0,0,.32), 0 0 0 1px rgba(103,232,255,.08) inset;
    }
    .core:hover{transform:translate(-50%,-50%) translateY(-3px)}
    .core .icon{color:#8ceeee;margin-bottom:10px;display:flex;align-items:center;justify-content:center}
    .core .title{font-size:23px;font-weight:700;color:var(--logo-green);text-shadow:0 0 10px rgba(98,255,154,.18)}
    .core .meta{font-size:11px;color:var(--muted);line-height:1.32;max-width:172px;margin-top:6px}

    .node{width:244px;height:138px;gap:10px}
    .node .title{font-size:15px;font-weight:700;line-height:1.1;color:var(--logo-green);text-shadow:0 0 8px rgba(98,255,154,.14);max-width:198px;text-align:center}
    .node .meta{font-size:12px;color:var(--muted)}

    .svg-icon{width:56px;height:56px;display:block}
    .core .svg-icon{width:74px;height:74px}
    .svg-icon *{vector-effect:non-scaling-stroke}
    .svg-stroke{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

    .cyan{border-color:rgba(103,232,255,.24)}
    .green{border-color:rgba(98,232,159,.24)}
    .orange{border-color:rgba(255,156,55,.24)}
    .red{border-color:rgba(255,101,88,.24)}

    .n1{left:34px;top:54px}
    .n2{left:46px;top:246px}
    .n3{left:118px;bottom:86px}
    .n4{right:100px;bottom:86px}
    .n5{right:42px;top:246px}
    .n6{right:34px;top:54px}

    .connectors{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

    .menu-item{position:absolute}
    .menu-item .node, .menu-item .core{position:relative}
    .menu-item .tooltip{
      position:absolute;left:50%;bottom:calc(100% + 12px);transform:translateX(-50%) translateY(4px);
      width:240px;padding:12px 14px;border-radius:14px;
      background:linear-gradient(180deg, rgba(10,28,42,.98), rgba(7,20,31,.99));
      border:1px solid rgba(121,227,255,.18);box-shadow:0 16px 28px rgba(0,0,0,.30);
      color:var(--text);font-size:12px;line-height:1.4;opacity:0;visibility:hidden;pointer-events:none;
      transition:opacity .18s ease, transform .18s ease, visibility .18s ease;z-index:20;
    }
    .menu-item .tooltip strong{display:block;margin-bottom:4px;color:#d8f6ff;font-size:13px}
    .menu-item:hover .tooltip{
      opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
    }
    .menu-item.tooltip-right .tooltip{left:calc(100% + 14px);bottom:50%;transform:translateY(50%) translateX(4px)}
    .menu-item.tooltip-right:hover .tooltip{transform:translateY(50%) translateX(0)}
    .menu-item.tooltip-left .tooltip{left:auto;right:calc(100% + 14px);bottom:50%;transform:translateY(50%) translateX(-4px)}
    .menu-item.tooltip-left:hover .tooltip{transform:translateY(50%) translateX(0)}
    .menu-item.center-tip .tooltip{bottom:auto;top:calc(100% + 12px);transform:translateX(-50%) translateY(-4px)}
    .menu-item.center-tip:hover .tooltip{transform:translateX(-50%) translateY(0)}

    .module-kpi{background:linear-gradient(180deg, rgba(18,42,59,.96), rgba(13,31,44,.98));border:1px solid var(--line);border-radius:16px;padding:14px 14px 12px;margin-bottom:12px}
    .module-kpi h4{margin:0 0 8px;font-size:15px}
    .module-kpi p{margin:0;color:var(--muted);font-size:13px;line-height:1.4}
    .note{margin-top:8px;padding:14px;border-radius:16px;background:rgba(103,232,255,.06);border:1px solid var(--line);font-size:13px;line-height:1.5;color:#d9eef7}

    @media (max-width:1400px){
      .hero,.workspace{grid-template-columns:1fr}
      .kpis{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width:1080px){
      .app{grid-template-columns:1fr}
      .hub-canvas{height:auto;display:grid;gap:16px;padding:16px}
      .connectors{display:none}
      .node,.core{position:static;transform:none !important;width:100%;height:128px}
      .core{height:220px}
      .gauges{grid-template-columns:1fr 1fr}
    }
    @media (max-width:720px){
      .topbar{flex-direction:column;align-items:flex-start}
      .kpis,.gauges{grid-template-columns:1fr}
    }