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

@font-face{font-family: "Doto"; src: url("../fonts/Doto-Regular.ttf");}
@font-face{font-family: "RobotoMono"; src: url("../fonts/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{padding: 20px; font-family: Arial; background-color: black; max-width: 1500px; margin: 0 auto;}

br{user-select: none;}

hr{height: 1px; background-color: rgb(196, 196, 255); border: none; margin: 15px 0; display: block;}
hr.SeparadorConTitulo{margin-top: 30px;}

p{line-height: 25px;}
p, li{color: rgb(228, 196, 196) !important;}
p.Expl b, span.Expl{color: rgb(147, 147, 206); user-select: all;}

p::selection, h1::selection, h2::selection, h3::selection, li::selection, code::selection, table td::selection{background-color: rgba(196, 196, 255, 0.5); color: black;}

/* =================================================== */
/* Títulos */

h1{color: rgb(196, 196, 255); text-align: center; font-family: "Doto"; font-size: 50px; user-select: none; margin: 15px 0;}
h2{margin: 15px 0;}
h2 span{color: white !important;}

h2.TituloSecundario{color: rgb(147, 147, 206); text-align: center !important; font-size: 20px; font-family: "Doto";}

h2.TituloCreditosSuperior, h2.TituloCreditosInferior{color: rgb(228, 196, 196); text-align: center !important; font-size: 15px; font-family: "Doto"; margin-bottom: 0; padding-bottom: 20px;}
h2.TituloCreditosInferior{padding-top: 20px; margin-top: 0;}
h2.TituloCreditosInferior a{color: rgb(147, 147, 206) !important; text-decoration: none;}
h2.TituloCreditosInferior a:hover{color: #7cfb2d; text-decoration: underline;}

.parte1 div h2{color: rgb(196, 196, 255); line-height: 40px;}

/* Imágen del logo de Linux / Windows en el título */

img.SoporteComandoRemoto{width: 20px; padding: 0 0 0 10px;}

/* =================================================== */
/* Enlaces */

p a{color: rgb(192, 192, 255); text-decoration: none;}
p a:hover{color: #7cfb2d; text-decoration: underline;}

/* Botón personalizado - Para texto */

.BotonPersonalizadoDIV{display: flex; flex-direction: column; width: min-content; gap: 20px; margin: 0 auto; width: min-content !important;}

a.BotonPersonalizadoTexto{display: flex; margin: 0 auto; align-items: center; justify-content: center; gap: 0; text-decoration: none; width: min-content;}
a.BotonPersonalizadoTexto p{margin: 0 !important;}

a.BotonPersonalizadoTexto p.TextoRelacionado{border-bottom-left-radius: 5px; white-space: nowrap; border-top-left-radius: 5px; border: 3px solid rgb(147, 147, 206); border-right: none; background-color: #22272e; color: #adbac7; padding: 1em; user-select: text;}

a.BotonPersonalizadoTexto p.BotonFlecha{display: flex; justify-content: center; align-items: center; user-select: none; background-color: rgb(147, 147, 206); color: black !important; width: 55px; align-self: stretch; transform: none; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border: 3px solid transparent;}
a.BotonPersonalizadoTexto p.BotonFlecha span{margin: 0 auto; transition: all .3s;}

a.BotonPersonalizadoTexto:hover p.BotonFlecha{background-color: #22272e; border-color: rgb(147, 147, 206);}
a.BotonPersonalizadoTexto:hover p.BotonFlecha span{transform: rotate(45deg); color: rgb(147, 147, 206);}

/* =================================================== */
/* Texto */

.codigo, p.Expl, p{margin: 15px 0 15px 0;}
p.Expl, .codigo{margin-left: 30px;}

.codigo{transition: all .5s; font-size: 14px; color: white; padding: 0; overflow-x: auto; border: 1px solid black;}
.codigo:hover{border-left: 1px solid rgb(196, 196, 255);}

/* =================================================== */
/* Listas */

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

/* =================================================== */
/* Tablas */

.TablaDivScroll{width: 100% !important; margin: none !important; padding: none !important; position: inherit !important; border-radius: none !important; border: none !important; overflow-x: auto; -webkit-overflow-scrolling: touch;}
table.TablaComandos{color: rgb(228, 196, 196); margin-top: 20px; border-collapse: collapse;}
table.TablaComandos td{border: 1px solid rgba(228, 196, 196, 0.3); height: 30px; padding: 10px;}

/* =================================================== */
/* Div principales para separar el contenido */

.parte1{display: flex; flex-direction: column; justify-content: center;}
.parte1 div:not(.BotonPersonalizadoDIV, .TablaDivScroll, .SQLImagenJoinDiv, .parte1 div div){width: 80%; padding: 20px; border-radius: 10px; margin: 0 auto;}

/* =================================================== */
/* Página de enlaces a sub-guías */

.PaginaIndice{flex-direction: row; justify-content: center; gap: 0;}
.PaginaIndice div:not(.BotonPersonalizadoDIV){text-align: center; width: 30%; margin: 0;}
.PaginaIndice h2{color: rgb(228, 196, 196) !important;}

@media screen and (max-width: 1040px){
    .parte1 div:not(.BotonPersonalizadoDIV, .TablaDivScroll){width: calc(100% - 40px);}
}

/* =================================================== */
/* Span para resaltar contenido */

span.span_contenido, span.span_url, span.span_error, span.span_url_espaciado{border: 1px solid; border-radius: 5px; user-select: all; cursor: copy; padding: 2px 5px 2px 5px;}

span.span_contenido{border-color: rgb(196, 196, 255);}
span.span_url{border-color: #7cfb2d;}
span.span_url_espaciado{border-color: #7cfb2d; padding: 2px 15px 2px 15px !important;}
span.span_error{border-color: red;}

span.span_contenido::selection{color: rgb(196, 196, 255); background-color: transparent;}
span.span_url::selection, span.span_url_espaciado::selection{color: #7cfb2d !important; background-color: transparent;}
span.span_error::selection{color: red; background-color: transparent;}

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

@media (max-width: 1040px){
    .parte1{display: block; width: 100%; margin: 0;}
    .parte1.codigo{margin: 5px 0;}
}

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

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

/* =================================================== */
/* Barra de navegación */

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

.menu_bar{background-color: rgb(29, 30, 30); height: 50px; user-select: none; 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 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; padding: 0 5px 0 5px; cursor: pointer; white-space: nowrap;}
.menu_bar ul li a:hover{text-decoration: underline #7cfb2d; color: #7cfb2d; text-underline-offset: 5px;}
.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 aplicado en la impresión (CTRL - P) */

@media print{
    .menu_bar, .TituloCreditosSuperior{display: none;}
    *{user-select: text !important;}
    hr{height: 0px; margin: 0; padding: 0; display: none;}
    .codigo{overflow-wrap: break-word; white-space: pre-wrap; word-break: break-word;}
    .parte1 div:not(.BotonPersonalizadoDIV, .TablaDivScroll){width: 92%;}
}

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

/* =================================================== */
/* FTP */

ul.ULFTPCamb1:not(.menu_bar ul) li{margin-left: 40px;}

.carrusel{width: 80% !important; 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;} 

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

div.SQLImagenJoinDiv{max-width: 750px !important; text-align: left; justify-content: center;}
img.SQLImagenJoin{width: 70%; transition: all .5s;}
img.SQLImagenJoin:hover{filter: invert(1);}

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

.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; line-height: 23px;}
.tabla_cmd td u{color: rgb(228, 196, 196); text-underline-offset: 1px;}
.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: rgba(124, 251, 45, 0.8);}

.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%;}
}

/* =================================================== */
/* HTML TABLA */

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

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

.tabla_cmd_html th{color: gray;}
.tabla_cmd_html td{color: white; line-height: 23px;}
.tabla_cmd_html td u{color: rgb(228, 196, 196); text-underline-offset: 1px;}
.tabla_cmd_html td.titulo{text-align: left; font-family: "Doto"; font-size: 20px; padding: 10px 0 10px 0; background-color: rgb(29, 30, 30); top: 0; position: sticky;}
.tabla_cmd_html td.opcion{color: #7cfb2d;}

.tabla_cmd_html tr{display: flex !important; flex-wrap: wrap;}
.tabla_cmd_html td{width: 100% !important;}

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

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

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

.tabla_cmd_html tr{border: 1px solid transparent;}
.tabla_cmd_html tr:hover{border: 1px solid rgb(192, 192, 255);}
.tabla_cmd_html tr td:not(.opcion){padding: 10px 0 50px 10px;}

.tabla_cmd_html pre{width: 100% !important; height: min-content !important;}


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