html, body {
     font-family: "Ubuntu", sans-serif;
     color: rgba(0, 103, 199, .9);
     scrollbar-color: #1f76b3 #124a71;
     scrollbar-width: thin;
     background-color: #2f4152;
     margin-bottom: 20px;
     margin: 5px;
     padding: 0px;
 }

 .bloque-grafico {
     transform: translateY(14px);
     transition: transform 0.5s ease;
     position: relative;
     min-height: 300px;
     overflow: hidden;
     border-radius: 3px;
     background-color: #2f4152;
 }

 /* spinner circular sutil centrado en el contenedor */
 .bloque-grafico::after {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     width: 32px;
     height: 32px;
     margin: -16px 0 0 -16px;
     border: 3px solid rgba(31, 118, 179, 0.15);
     border-top-color: #1f76b3;
     border-radius: 50%;
     animation: spin-carga 0.8s linear infinite;
     z-index: 1;
     pointer-events: none;
     background-color: #2f4152;
 }

 @keyframes spin-carga {
     to {
         transform: rotate(360deg);
     }
 }

 /* hijos invisibles hasta que cargue */
 .bloque-grafico>* {
     opacity: 0;
     transition: opacity 0.5s ease;
 }

 .bloque-grafico.cargado {
     transform: translateY(0);
     background: transparent;
 }

 .bloque-grafico.cargado::after {
     display: none;
 }

 .bloque-grafico.cargado>* {
     opacity: 1;
 }

 #porcentaje_cpu {
     position: absolute;
     top: 205px;
     left: 85px;
     font-size: 28px;
     color: #ffffff;
     text-align: center;
     width: 100px;
 }

 #marco_01 {
     float: left;
     position: relative;
     width: 400px;
 }

 #marco_02 {
     position: relative;
     float: left;
     width: calc(100% - 400px);
 }

 #marco_03 {
     position: relative;
     float: left;
     width: 50%
 }

 #marco_04 {
     position: relative;
     float: left;
     width: calc(25% - 10px);
     margin: 5px;
 }

 #marco_04 h3 {
     color: #FFF;
     font-size: 12px;
     margin-bottom: 10px;
 }

 .ajuste {
     position: relative;
     width: 100%;
     float: left;
     overflow-x: auto;
     white-space: nowrap;
     padding-bottom: 20px;
     margin-bottom: 20px;
 }

 .menu {
     position: relative;
     float: left;
     padding: 5px 10px;
     margin: 0px 0px 10px 0px;
     width: calc(100% - 22px);
     background-color: #124a71;
     border: 1px solid rgba(255, 255, 255, 0.1);
     color: #fff;
     font-size: 12px;
 }

 .contenedor_estados {
     position: relative;
     float: left;
 }

 .contenedor_peticiones {
     position: relative;
     float: right;
 }

 #estado {
     position: relative;
     float: left;
     width: 23px;
     height: 23px;
     margin-right: 5px;
 }

 .estado_on {
     background-color: #64A70B;
 }

 .estado_off {
     background-color: #ca1107;
 }

 .detalle01 {
     position: relative;
     padding: 5px 10px;
     float: left;
     background-color: rgba(0, 0, 0, 0.1);
     margin-right: 5px;
 }

 .peticion {
     position: relative;
     padding: 5px 10px;
     float: left;
     background-color: rgba(255, 255, 255, 0.2);
     margin-right: 5px;
     cursor: pointer;
 }

 .peticion:hover {
     background-color: #199435;
 }

 .peticion_seleccionada {
     background-color: #199435;
 }

 .peticion_nd {
     position: relative;
     float: left;
 }

 .top10 {
     width: 100%;
     border-collapse: collapse;
     color: #FFF;
     font-family: 'Ubuntu Mono', monospace;
     font-size: 10px;
 }

 #marco_05 {
     position: relative;
     float: left;
     width: calc(100% - 10px);
     margin: 5px;
 }

 #marco_05 h3 {
     color: #FFF;
     font-size: 12px;
     margin-bottom: 10px;
 }

 .evento-inactividad {
     width: 100%;
     border-collapse: collapse;
     color: #FFF;
     font-family: 'Ubuntu Mono', monospace;
     font-size: 11px;
     margin-bottom: 10px;
 }

 .evento-inactividad th {
     padding: 6px 8px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.2);
     text-align: left;
     background-color: rgba(31, 118, 179, 0.3);
     font-family: 'Ubuntu', sans-serif;
     font-size: 11px;
 }

 .evento-inactividad td {
     padding: 6px 8px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }

 .badge-inactivo {
     display: inline-block;
     padding: 2px 8px;
     border-radius: 3px;
     font-size: 10px;
     font-weight: bold;
     text-transform: uppercase;
     background-color: rgba(202, 17, 7, 0.3);
     color: #ff6b6b;
     border: 1px solid rgba(202, 17, 7, 0.5);
 }

 .badge-resuelto {
     display: inline-block;
     padding: 2px 8px;
     border-radius: 3px;
     font-size: 10px;
     font-weight: bold;
     text-transform: uppercase;
     background-color: rgba(100, 167, 11, 0.3);
     color: #64A70B;
     border: 1px solid rgba(100, 167, 11, 0.5);
 }

 @media (width <=1000px) {
     .contenedor_estados, .contenedor_peticiones {
         width: 100%;
     }

     .contenedor_estados {
         margin-bottom: 5px;
     }

     #porcentaje_cpu {
         top: 240px;
         left: 85px;
     }

     .detalle01 {
         margin-bottom: 5px;
     }

     #marco_01 {
         width: 100%;
     }

     #marco_02 {
         width: 100%;
     }

     #marco_03 {
         width: 100%;
     }

     #marco_04 {
         width: calc(100% - 10px);
     }

     .top10 {
         font-size: 12px;
     }
 }

 @media (width <=656px) {
     #porcentaje_cpu {
         top: 270px;
         left: 85px;
     }
 }

 ::-webkit-scrollbar {
     width: 10px
 }

 ::-webkit-scrollbar-track {
     background: #124a71
 }

 ::-webkit-scrollbar-thumb {
     background: #1f76b3
 }

 ::-webkit-scrollbar-thumb:hover {
     background: #2491dd
 }