:root {
    --red: #cc5b06;
    --blue: #0790eb;
    --green: #8ac926;
    --yellow: #ffca3a;
    --purple: #914aee;

    --colors-1: #594b4a;
    --colors-2: #536967;
    --colors-3: #5b8175;
    --colors-4: #5c9782;
    --colors-5: #5eb591;
    --colors-6: #68ceab;
    --colors-7: #71ddb7;
    --colors-8: #b0ead7;
    --colors-9: #ceece2;
    --colors-10: #deece6;

    --colors-g-1: #20897d;
    --colors-g-2: #36b28f;
    --colors-g-3: #60e5a2;
    --colors-g-4: #aefccc;
    --colors-g-5: #aefceb;

    --colors-b-1: #3756a6;
    --colors-b-2: #5872ac;
    --colors-b-3: #738ab8;
    --colors-b-4: #8ca4c9  ;
    --colors-b-5: #a1bed1;

    --colors-g-1: #006e6a; /* Verde azulado muy oscuro */
    --colors-g-2: #33e0c9; /* Verde azulado oscuro */
    --colors-g-3: #00c6c3; /* Verde azulado medio brillante */
    --colors-g-4: #1caa9e; /* Verde azulado claro */
    --colors-g-5: #0a9052; /* Verde azulado muy claro */
    --colors-g-6: #CAF7ED; /* Verde azulado extremadamente claro / Pastel */

    --class-A: var(--colors-g-1);
    --class-B: var(--colors-g-2);
    --class-C: var(--colors-g-3);
    --class-D: var(--colors-g-4);
    --class-E: var(--colors-g-5);
    --class-F: var(--colors-g-6);

    --class-Other: var(--colors-gray-3);


    --panel-bg-color: #262D47;
    --colors-gray-1: #40475D;
    --colors-gray-2: #9fa0a3;
    --colors-gray-3: #808080;
 }

 body {
    font-family: sans-serif;
    background-color: var(--panel-bg-color);
    overflow: hidden;
 }

 h1 {
    text-align: center;
    color: #ddd;
    font-size: 1.5em;
 }

 .network-diagram {
    position: relative;
    height: 60vh;
 }

 #network-svg {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
    overflow: visible;
 }

 #cable-layer path {
    fill: none;
    stroke-linecap: round;
 }

 .packet {
    r: 5;
    fill: #fff;
    stroke: #333;
    stroke-width: 1;
    transition: fill 0.1s ease, transform 0.3s ease-in-out;
 }

 .packet.classified-A {
    fill: var(--class-A);
 }

 .packet.classified-B {
    fill: var(--class-B);
 }

 .packet.classified-C {
    fill: var(--class-C);
 }

 .packet.classified-D {
    fill: var(--class-D);
 }


 .packet.classified-E {
    fill: var(--class-E);
 }


 .packet.classified-F {
    fill: var(--class-F);
 }
 .packet.classified-other {
  fill: var(--class-Other);
}

 #svg-definitions {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
 }