/* =================================================== */
/* Fuentes */

@font-face{font-family: "Doto"; src: url("../fuentes/Doto-Regular.ttf");}
@font-face{font-family: "RobotoMono"; src: url("../fuentes/RobotoMono.ttf");}

/* =================================================== */
/* Scrollbar */

::-webkit-scrollbar{background-color: black; height: 5px; width: 2px;}
::-webkit-scrollbar-thumb{background-color: gray; border-radius: 20px;}

/* =================================================== */
/* Básico */

*{padding: 0; margin: 0;}
html{scroll-behavior: smooth;}
body{margin: 20px; font-family: Arial; background-color: black;}

hr{height: 5px; background-color: black; animation: pulse 2s infinite ease-in-out; border: 1px solid rgb(128, 128, 255); margin-bottom: 10px;}
hr.HRSeg{margin-top: 50px; animation: pulse2 2s infinite ease-in-out;}

h1{color: rgb(128, 128, 255); text-align: center; font-family: "Doto"; font-size: 50px; user-select: none; margin: 15px 0;}
h2{margin: 10px 0;}
.parte1 div h2{color: rgb(196, 196, 255);}
h2.derechos{color: white; text-align: center !important; font-size: 12px; font-family: "Doto"; margin-bottom: 30px; margin-top: 20px;}
h2.derechos2{color: rgb(128, 128, 255); text-align: center !important; font-size: 20px; font-family: "Doto";}

h2, p{color: white;}
p:not(.codigo){margin-top: 15px;}
.codigo{transition: all .5s; background-color: rgb(56, 56, 56); font-family: "RobotoMono"; font-size: 14px; color: white; padding: 5px; margin: 5px 0 0 30px; cursor: pointer; overflow-x: auto; border: 1px solid black;}
.codigo:hover{background-color: black; border: 1px solid blue; border-radius: 5px;}

ol{margin-left: 3%;}
ul li, ol li{color: white;}

p.Expl{margin-left: 30px;}
p.Expl b{color: rgb(128, 128, 255); user-select: all;}

br{user-select: none;}

.parte1{display: flex; flex-wrap: wrap; justify-content: center;}
.parte1 div{width: 45%; margin: 10px !important; padding-bottom: 30px !important; padding-top: 10px !important; padding: 10px; position: relative; border-radius: 10px; border: 2px solid transparent;}
.parte1 div:not(.vacío)::before{content: ""; position: absolute; top: 0; left: -10px; width: 20px; height: 20px; border-top-left-radius: 10px; border: 2px solid blue; border-right: none; border-bottom: none; background: transparent;}

span.ruta{padding: 0 5px 0 5px; border: 1px solid blue; border-radius: 5px; user-select: all; cursor: copy;}
span.ruta::selection{color: blue;}
span.ruta2{padding: 0 5px 0 5px; border: 1px solid #7cfb2d; border-radius: 5px; user-select: all; cursor: copy;}
span.ruta3{padding: 2px 15px 2px 15px; border: 1px solid #7cfb2d; border-radius: 5px; user-select: all; cursor: copy;}
h2 span{color: white !important;}
span.ruta2::selection, span.ruta3::selection{color: #7cfb2d !important;}

/* =================================================== */
/* Media */

@media (max-width: 1040px){
    .parte1{display: block; width: 100%; margin: 10px 0;}
    .parte1.codigo{margin: 5px 0;}
    .parte1 div{width: 100%; margin: 10px 0; padding: 0;}
    .parte1 div::before{border: none;}
}

@media screen and (max-width: 768px){
    .ocultarMOVIL{display: none;}
}

@media screen and (max-width: 400px){
    .ocultarMOVIL2{display: none;}
}

@media (max-width: 350px){
    .menu_bar_top, .menu_bar, .menu_bar_top_2{display: none !important;}
}

/* =================================================== */
/* Animaciones */

@keyframes pulse{0%, 100%{transform: scaleX(1);} 50%{border-radius: 90%; background-color: rgb(128, 128, 255); margin: 0 5% 10px 5%;}}
@keyframes pulse2{0%, 100%{transform: scaleX(1);} 50%{border-radius: 90%; background-color: rgb(128, 128, 255); margin: 50px 5% 10px 5%;}}

/* =================================================== */
/* Créditos */

.Creditos{display: flex; justify-content: space-evenly; margin: 100px 20px 20px 20px;}
.Flecha img{transform: rotate(-90deg); width: 30px; transition: all .5s; user-select: none;}
.Flecha img:hover{opacity: 50%; transform: scale(0.9) rotate(-90deg);}
.H3Créditos{text-align: right; color: blue; font-family: "Doto"; user-select: none;}
.EnlaceTutorial{color: blue; text-decoration: none;}
.EnlaceTutorial:hover{color: green;}

/* =================================================== */
/* NAV BAR */

@font-face{font-family: "Smoch"; src: url("../fuentes/SmoochSans-VariableFont_wght.ttf");}

.menu_bar{background-color: rgb(29, 30, 30); height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 0 5%; position: -webkit-sticky; top: 0; position: sticky; z-index: 9999; border-radius: 10px; width: min-content; margin: 0 auto;}
.menu_bar h1{padding-right: 20px !important;}
.logo a, .logo a span{font-family: "Smoch" !important; font-size: 22px;}
.menu_bar ul{list-style: none; display: flex;}
.menu_bar ul li{padding: 0 10px 0 10px;}
.menu_bar ul li.LiColor{padding: 0 !important; margin-left: -12px;}
.menu_bar ul li button{background-color: rgb(29, 30, 30); border: none; font-size: 16px; color: #e9e9e9; cursor: pointer;}
.menu_bar ul li a{color: #e9e9e9; text-decoration: none; font-size: 16px; transition: .4s; padding: 0 5px 0 5px; cursor: pointer;}
.menu_bar ul li a:hover{background-color: #7cfb2d; border-radius: 5px; color: black;}
.menu_bar .logo{color: #e9e9e9; font-size: 20px; text-align: center; padding-left: 0%; margin-left: 0%; margin: 0 !important;}
.menu_bar .logo a{text-decoration: none; color: white;}
.menu_bar .logo span{color: #7cfb2d; transition: all .5s;}
.menu_bar .logo:hover span{color: white; text-decoration: underline;}
.menu_bar2{display: none;}
#dd{position: sticky; top: 0;}

.menu_bar .NavColorCambiar{background-color: rgb(29, 30, 30); border: none !important; height: 20px; width: 20px; transform: translateY(-2px); border-radius: 20px;}

/* Cunando llega al top */

.menu_bar_top{border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; transition: all .5s; height: 50px;}
.menu_bar_top ul{display: none !important;}
.menu_bar ul *{font-family: "Arial" !important;}
.menu_bar_top h1{padding-right: 0 !important; width: min-content !important;}

.menu_bar_top_2{height: 30px !important;}
.menu_bar_top_2 *{font-size: 17px !important;}

/* =================================================== */
/* TRADUCTOR */

.gtranslate_wrapper{vertical-align: middle; display: flex; justify-content: center;}
.gglobe{margin: 0 auto;}
.skiptranslate{color: rgb(29, 30, 30);}

/* =================================================== */
/* =================================================== */
/* Estilos únicos */
/* =================================================== */
/* =================================================== */
/* FTP */

ul.ULFTPCamb1:not(.menu_bar ul) li{margin-left: 40px;}
a.EnlacesFTPDescarga:not(.menu_bar a){color: black; font-weight: bold; text-decoration: none; padding: 5px; background-color: rgb(128, 128, 255); transition: all .5s; user-select: none;}
a.EnlacesFTPDescarga:not(.menu_bar a):hover{border-radius: 10px; background-color: rgb(192, 192, 255);}
.FileziilaFixz{text-align: center; margin: 50px 0 50px 0;}
.FileziilaFixz h2{margin-bottom: 20px !important;}
.FileziilaFixz a{margin-top: 0;}
table.TablaFTPCamb1{color: white; margin-top: 20px;}
table.TablaFTPCamb1 *:not(.ruta2){padding: 3px 10px 3px 0;}

.carrusel{width: 100%; max-width: 600px; margin: auto; position: relative; overflow: hidden; border: 2px solid black; padding: 10px 5px; transition: all .5s;} 
.carrusel_imagenes{display: flex; transition: transform 0.5s ease; height: 100%; align-items: center;} 
.carrusel_imagen{width: 100%; height: min-content; cursor: pointer; transition: transform 0.3s ease;} 
.carrusel_boton{position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0, 0, 0, 0.5); color: white; border: none; font-size: 18px; padding: 10px; cursor: pointer;} 
.carrusel_izquierda{left: 0;} 
.carrusel_derecha{right: 0;} 
.carrusel_imagen-agrandada{position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); z-index: 1000; max-width: 70%; max-height: 80%;} 
.carrusel_fondo-agrandado{position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; background: rgba(0, 0, 0, 0.7) !important; z-index: 999 !important; display: none; cursor: pointer;} 

/* =================================================== */
/* SERVICIOS REMOTOS */

.EnlaceAWindows{color: rgb(128, 128, 255); text-decoration: none; transition: all .5s;}
.EnlaceAWindows:hover{color: white; text-decoration: underline;}

/* =================================================== */
/* SQL */

.EnlaceSQL{border: 1px solid yellow; padding: 3px 10px; color: white; text-decoration: none; transition: all .5s;}
.EnlaceSQL:hover{border: 1px solid rgb(192, 192, 255); color: rgb(192, 192, 255); border-radius: 20px;}
.EnlaceSQL2{border: 1px solid rgb(192, 192, 255); padding: 3px 10px; color: rgb(192, 192, 255); text-decoration: none; transition: all .5s;}
.EnlaceSQL2{border: 1px solid rgb(192, 192, 255); padding: 3px 10px; color: rgb(192, 192, 255); text-decoration: none; transition: all .5s;}
.EnlaceSQL2:hover{border: 1px solid yellow; color: white; border-radius: 20px;}
.SpanSQL3{border: 1px solid rgb(192, 192, 255); color: rgb(192, 192, 255) !important; color: white; padding: 1px; background-color: black; text-decoration: none; transition: all .5s;}


.SQLprinc div{width: 20%;}
@media only screen and (max-width: 1040px){.SQLprinc div{width: 100%;}}
.SQLImgDiv{width: 100% !important; text-align: left; justify-content: center;}
.SQLImg{width: 70%; transition: all .5s;}
.SQLImg:HOVER{filter: invert(1);}

/* =================================================== */
/* NMAP */

.nmap{color: #7cfb2d !important;}

.tabla_cmd{background-color: rgb(29, 30, 30); margin: 0 auto; width: 80%; margin-bottom: 50px; max-width: 1500px; margin: 0 auto;}

.tabla_cmd th, .tabla_cmd td{padding: 10px !important; background-color: #2a2c2e;}
.tabla_cmd .opcion{width: 30%;}

.tabla_cmd th{color: gray;}
.tabla_cmd td{color: white;}
.tabla_cmd td.titulo{text-align: left; font-family: "Doto"; font-size: 20px; background-color: rgb(29, 30, 30); top: 0; position: sticky;}
.tabla_cmd td.opcion{color: #7cfb2d; text-align: center;}
.tabla_cmd span.opcion{color: #7cfb2d;}

.tabla_cmd td.opcion span.c1{color: orange;}
.tabla_cmd td.opcion span.c2{color: rgb(196, 196, 255);}
.tabla_cmd td.opcion span.c3{color: violet;}

.tabla_cmd td span.positivo{color: lightgreen;}
.tabla_cmd td span.negativo{color: lightcoral;}
.tabla_cmd td span.intermedio{color: lightgoldenrodyellow;}

.tabla_cmd td ul{margin-left: 20px;}
.tabla_cmd td li{margin-top: 10px;}

.tabla_cmd td a{color: cyan; text-decoration: none;}
.tabla_cmd td a:hover{text-decoration: underline;}

.tabla_cmd tr:hover td:not(.titulo){background-color: rgb(49, 52, 52);}

.hidden-row{display: none;}
.titulo{cursor: pointer;}
.titulo::before{content: "►"; vertical-align: middle; font-size: 10px; display: inline-block; width: 1em; margin-right: 5px; transition: transform 0.2s; transform: translateY(-15%);}
.titulo.expanded::before{content: "▼";}

@media screen and (max-width: 500px){
    .tabla_cmd tr{display: block;}
    .tabla_cmd td{width: 100% !important; margin: 0; display: block; text-align: center; box-sizing: border-box;}
    .tabla_cmd tr td:first-child{border-top: 3px solid rgb(56, 56, 56);}
    .tabla_cmd td ul{text-align: left; margin: 10px 0 10px 10px;}
}

@media screen and (max-width: 1040px){
    .tabla_cmd{width: 100%;}
}

/* =================================================== */
/* XML */

.XML{color: white; width: 100%;}
.XML td{border: 1px solid gray !important; padding: 5px 10px;}
img.SoporteComandoRemoto{width: 20px; padding: 0 0 0 10px;}

/* =================================================== */