*{margin: 0; padding: 0; font-family: "Arial"; color: white;}
@font-face{font-family: "FiraCode"; src: url('fonts/FiraCode-VariableFont_wght.ttf');}

html, body{min-height: 100vh;}

body{background-color: #242424;}

.header_d, .footer_d{display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; align-items: center;}
header, footer{width: 500px; text-align: center; height: 40px; display: flex; align-items: center; justify-content: center;}
header a{text-decoration: none; border-bottom: 3px solid gray; transition: all .5s;}
header a:hover{border-bottom: 3px solid white;}

.central{min-height: calc(100vh - 40px); display: flex; align-items: center; justify-content: center; flex-wrap: wrap;}
.central .contenido{width: 480px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 10px;}
.central .contenido img{width: 200px; user-select: none;}
.central .contenido img.logo2{width: 100px;}
.central .contenido .botones{display: flex; flex-wrap: nowrap; gap: 20px;}
.central .contenido .botones a{text-decoration: none; color: white; padding: 10px 20px; border: 2px solid;}

.central2 ul{display: flex; flex-direction: column; justify-content: left; text-align: left; width: 100%;}
.central2 a{text-decoration: none; color: lightblue; font-family: "FiraCode";}
.central2 a:hover{text-decoration: underline; text-underline-offset: 5px;}
.central2 ul li{margin-top: 5px; list-style: none; flex-wrap: wrap;}
.margen_arriba{margin-top: 20px !important;}
.ul_con_gap ul li{display: flex; flex-direction: row; gap: 10px;}
.volver_atras{text-align: right;}

.linea_script{font-family: "FiraCode"; color: lightblue; user-select: all; word-break: break-all;}
.bloque_izq{justify-content: left; display: flex; width: 100%; flex-direction: column; text-align: left;}
.bloque_der{justify-content: right; display: flex; width: 100%; flex-direction: column;}

.central .contenido .botones a{display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;}
.central .contenido .botones a:before{content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: rgb(255, 0, 0); -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
.central .contenido .botones a:hover, .central .contenido .botones a:focus, .central .contenido .botones a:active{color: white;}
.central .contenido .botones a:hover:before, .central .contenido .botones a:focus:before, .central .contenido .botones a:active:before{-webkit-transform: scaleX(1); transform: scaleX(1);}

.imgChrome{border-radius: 20px; transition: all .3s; border: 1px solid transparent; width: min-content;}
.imgChrome img{width: 100px;}
.imgChrome:hover{border: 1px solid lightblue;}

@media screen and (max-width: 550px) {
    .central .contenido{width: 100% !important;}
}

.contenedor-scroll-red{width: 97vw; overflow-x: auto; -webkit-overflow-scrolling: touch;  padding-bottom: 15px; padding: 25px 0;}
.bloque_topologia_red{display: flex; flex-direction: column; gap: 0; justify-content: center; align-items: center; width: max-content; max-width: max-content; margin: 0 auto;}

.bloque_topologia_red .flex-lineas-separadoras{width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center;}
.bloque_topologia_red .linea-separadora{height: 25px;}

.bloque_topologia_red .linea-separadora-vertical{width: 0.1px; background-color: gray;}
.bloque_topologia_red .linea-separadora-vertical-dashed{width: 0.1px; border-left: 0.1px dashed gray;}

.bloque_topologia_red .linea-separadora-horizontal-izquierda-arriba-dashed{width: 237.5px; border-left: 1px dashed gray; border-bottom: 1px dashed gray;}
.bloque_topologia_red .linea-separadora-horizontal-derecha-arriba-dashed{width: 237.5px; border-right: 1px dashed gray; border-bottom: 1px dashed gray;}
.bloque_topologia_red .linea-separadora-horizontal-izquierda-centro-dashed{width: 237.5px; border-left: 1px dashed gray;}
.bloque_topologia_red .linea-separadora-horizontal-derecha-centro-dashed{width: 237.5px; border-right: 1px dashed gray;}
.bloque_topologia_red .linea-separadora-horizontal-izquierda-abajo-dashed{width: 237.5px; border-left: 1px dashed gray; border-top: 1px dashed gray;}
.bloque_topologia_red .linea-separadora-horizontal-derecha-abajo-dashed{width: 237.5px; border-right: 1px dashed gray; border-top: 1px dashed gray;}

.bloque_topologia_red .linea-separadora-horizontal-izquierda-arriba{width: 237.5px; border-left: 1px solid gray; border-bottom: 1px solid gray;}
.bloque_topologia_red .linea-separadora-horizontal-derecha-arriba{width: 237.5px; border-right: 1px solid gray; border-bottom: 1px solid gray;}
.bloque_topologia_red .linea-separadora-horizontal-izquierda-centro{width: 237.5px; border-left: 1px solid gray;}
.bloque_topologia_red .linea-separadora-horizontal-derecha-centro{width: 237.5px; border-right: 1px solid gray;}
.bloque_topologia_red .linea-separadora-horizontal-izquierda-abajo{width: 237.5px; border-left: 1px solid gray; border-top: 1px solid gray;}
.bloque_topologia_red .linea-separadora-horizontal-derecha-abajo{width: 237.5px; border-right: 1px solid gray; border-top: 1px solid gray;}

.bloque_topologia_red .linea-separadora-horizontal-izquierda-centro-vacio{width: 237.5px;}
.bloque_topologia_red .linea-separadora-horizontal-derecha-centro-vacio{width: 237.5px; border-right: 1px solid gray;}

.bloque_topologia_red .linea-separadora-horizontal-izquierda-centro-vacio-triple{width: 475px; border-right: 1px solid gray;}
.bloque_topologia_red .linea-separadora-horizontal-derecha-centro-vacio-triple{width: 475px;}

.bloque_topologia_red .linea-separadora-horizontal-izquierda-arriba-triple{width: 475px; border-left: 1px solid gray; border-bottom: 1px solid gray; border-right: 1px solid gray;}
.bloque_topologia_red .linea-separadora-horizontal-derecha-arriba-triple{width: 475px; border-right: 1px solid gray; border-bottom: 1px solid gray;}
.bloque_topologia_red .linea-separadora-horizontal-izquierda-centro-triple{width: 475px; border-left: 1px solid gray; border-right: 1px solid gray;}
.bloque_topologia_red .linea-separadora-horizontal-derecha-centro-triple{width: 475px; border-right: 1px solid gray;}
.bloque_topologia_red .linea-separadora-horizontal-izquierda-abajo-triple{width: 475px; border-left: 1px solid gray; border-top: 1px solid gray; border-right: 1px solid gray;}
.bloque_topologia_red .linea-separadora-horizontal-derecha-abajo-triple{width: 475px; border-right: 1px solid gray; border-top: 1px solid gray;}

.bloque_topologia_red .linea-separadora-horizontal-izquierda-arriba-dashed-triple{width: 475px; border-left: 1px dashed gray; border-bottom: 1px dashed gray; border-right: 1px dashed gray;}
.bloque_topologia_red .linea-separadora-horizontal-derecha-arriba-dashed-triple{width: 475px; border-right: 1px dashed gray; border-bottom: 1px dashed gray;}
.bloque_topologia_red .linea-separadora-horizontal-izquierda-centro-dashed-triple{width: 475px; border-left: 1px dashed gray; border-right: 1px dashed gray;}
.bloque_topologia_red .linea-separadora-horizontal-derecha-centro-dashed-triple{width: 475px; border-right: 1px dashed gray;}
.bloque_topologia_red .linea-separadora-horizontal-izquierda-abajo-dashed-triple{width: 475px; border-left: 1px dashed gray; border-top: 1px dashed gray; border-right: 1px dashed gray;}
.bloque_topologia_red .linea-separadora-horizontal-derecha-abajo-dashed-triple{width: 475px; border-right: 1px dashed gray; border-top: 1px dashed gray;}

.bloque_topologia_red .nodos_red{display: flex; flex-direction: row; flex-wrap: nowrap; gap: 40px;}

.bloque_topologia_red .internet{background-image: url("img/Nube.png"); background-size: contain; background-repeat: no-repeat; background-position: center; width: 80px; height: 60px; display: flex; justify-content: center; align-items: center;}
.bloque_topologia_red .internet p{color: black; transform: translate(0, 9px);}

.bloque_topologia_red .nota-doble{display: flex; justify-content: space-between; width: 48.5%; height: 0; margin-bottom: 35px;}
.bloque_topologia_red .nota-doble p{margin: 0; padding: 0 10px; background-color: #191919; line-height: 1;}
.bloque_topologia_red .nota-doble p:first-child{transform: translate(-50%, -50%);}
.bloque_topologia_red .nota-doble p:last-child{transform: translate(50%, -50%);}

.bloque_topologia_red .nota-triple{display: flex; justify-content: space-between; width: 71.45%; height: 0; margin-bottom: 35px;}
.bloque_topologia_red .nota-triple p{margin: 0; padding: 0 10px; background-color: #191919; line-height: 1;}
.bloque_topologia_red .nota-triple p.middle-child{transform: translate(5%);}

.bloque_topologia_red .nodo_red{padding: 15px; border: 1px solid gray; width: 435px; text-align: left;}
.bloque_topologia_red .nodo_red .nombre-nodo{font-weight: bold; font-family: "FiraCode"; font-size: 16px;}
.bloque_topologia_red .nodo_red.vacio{background: transparent; border: none;}
.bloque_topologia_red .nodo_red.proxmox{background-color: #191919; border: 2px solid lightblue;}
.bloque_topologia_red .nodo_red.proxmox .nombre-nodo, .bloque_topologia_red .nodo_red.proxmox .nombre-nodo *{color: lightblue;}
.bloque_topologia_red .nodo_red.netbird{background-color: #191919; border: 2px solid green;}
.bloque_topologia_red .nodo_red.netbird .nombre-nodo, .bloque_topologia_red .nodo_red.netbird .nombre-nodo *{color: green;}
.bloque_topologia_red .nodo_red.cloudflare{background-color: #191919; border: 2px solid orange;}
.bloque_topologia_red .nodo_red.cloudflare .nombre-nodo, .bloque_topologia_red .nodo_red.cloudflare .nombre-nodo *{color: orange;}
.bloque_topologia_red .nodo_red.servicio .nombre-nodo, .bloque_topologia_red .nodo_red.servicio .nombre-nodo *{color: white;}

.bloque_topologia_red .nodo_red .detalles-nodo{padding-top: 15px; font-size: 13px;}
.bloque_topologia_red .nodo_red .detalles-nodo span{color: gray; user-select: all; font-family: "FiraCode";}
.bloque_topologia_red .nodo_red .detalles-nodo img{height: 15px; width: min-content;}

@media screen and (min-width: 1540px) {
    .central .contenido {width: 100%; max-width: 100%; padding: 10px 0;}
    .contenedor-scroll-red {width: 100%; max-width: 100vw; margin: 0 auto;}
    .bloque_der p.volver_atras{text-align: center;}
}

.contenido-privacidad{text-align: justify; width: 100%;}

.footer_d a{text-decoration: none; color: lightblue;}
.footer_d a:hover{text-decoration: underline; text-underline-offset: 5px;}