/*GENERAL*/
* {
    margin: 0
}
html, body {
    background-color: rgb(233, 233, 233);     
    height: 100%;
    margin: 0;
    padding: 0;  
}

/*TITULO*/
h1 {
    height: 2em;
    padding-top: 1em;
    text-align: center;    
    background-color: rgba(47, 108, 206, 0.726);
    color: whitesmoke;
}

/*NAVEGADOR*/
nav {
    padding: 0.5em;
    background-color: rgba(47, 108, 206, 0.726);
    border-bottom: 0.2em inset rgba(47, 108, 206, 0.726);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
}
nav a {
    color: whitesmoke;
}
nav a:hover {
    color: rgba(18, 65, 139, 0.87);
}



/* Div de bienvenida en index*/
.bienvenida{
    font-family: Arial, sans-serif;     
    max-width: 600px; 
    margin: 50px auto; 
    padding: 20px; 
    text-align: center;
} 



/*FORMULARIO*/
form {
    background-color: rgba(59,130,246,0.5);
    border-bottom: 0.2em inset rgba(47, 108, 206, 0.726);
    margin-bottom: 2em;
    padding: 0.5em;
}
form div {
    display: inline;        
}
form input {
    width: 20em;
    height: 20px;
}
form select {
    width: 5.5em;
    height: 26px;
}
form .nameServerInput {
    float: right;
    width: 7em;
    height: 26px;
} 
form input[type="submit"] {
    width: 8em;
    height: 26px;
}
form button {
    width: 8em;
    height: 26px;
}
.telnet input{
    width: 10em;
}
.telnet .number {
    width: 5em;
}
#formAPI {
    margin-bottom: 0;
    border-bottom: 0.2em solid rgba(47, 108, 206, 0.726);
}
.apiAuth, .apiBasic, .apiToken, .bodyFieldSelect {
    display: block;
    margin-top: 0.5em;
}
.apiBodyFieldsKeys{
    margin-top: 0.5em;
} 
.apiBasic, .apiToken, .apiBodyFields, .apiBodyFieldsKeys, .apiBodyFieldsValues {    
    display: none;  
}
.formFields div:has(.apiBodyFieldsValues)::after{ 
    content: " ";    
    display: block;
}
.apiBasic input{
    width: 25%;
}
.apiToken #id_tokenKey{
    width: 15%;
}
.apiToken #id_tokenValue {
    width: 80%;
}
.formFieldTextarea {
    margin-top: 1em;
} 



/*RESULTADOS*/
.resultados {
    text-align: center;   
    margin: 0.5em;
}
.resultados table {        
    margin: auto;
    border: 3px outset rgb(233, 233, 233);
    border-collapse: collapse;
}
.resultados table caption {    
    margin: 1em;
    margin-top: 2em;
    text-transform: uppercase;
}
.resultados table td, .resultados table th{    
    border: 1px inset rgb(182, 182, 182);
    padding: 0.5em;
}
.resultados table td:nth-child(3) {
    overflow-wrap: anywhere;
}
.resultados.telnet p {
    margin-bottom: 3em;
}
.resultados.api {
    margin: 0;
}
.resultados.api pre {
    background-color: rgba(47, 108, 206, 0.726);        
    padding: 1em;
    overflow-wrap: anywhere;    
    overflow-x: auto;
    min-height: 300px;
    color: whitesmoke;
    text-align: left;
}
.resultados.api p {
    margin-top: 3em;
}


/* DIV Principal (incluye el de resultados)*/
.contenedor{
    display: flex; /* Convierte el wrapper en un contenedor flex */
    flex-direction: column; /* Organiza los elementos en columna (header, main, footer) */
    min-height: 100vh; /* El wrapper debe ocupar al menos el 100% del viewport height */    
} 
.principal{
    flex-grow: 1; /* Esto es clave: el main "crece" para ocupar el espacio disponible */
} 





/* Footer */
/* Estilos para el footer */
.footer-container {
    background-color: rgba(47, 108, 206, 0.726);
    padding: 20px;
    text-align: center;
    margin-top: auto; /* Empuja el footer hacia la parte inferior de la página */
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1); 
    border-top: 0.2em outset rgba(47, 108, 206, 0.726); 
}
.footer-container p {
    margin: 5px 0;
    font-size: 0.9em; 
    color: whitesmoke;
}
.footer-container a {    
    text-decoration: underline;
    color: whitesmoke;
}
.footer-container a:hover {
    color: rgba(18, 65, 139, 0.87);
}











/*Animación de loading*/
.loading {
    animation: salto 1.5s infinite
}
@keyframes salto {
    from {
        opacity: 0.8;
    }
    to{
         opacity: 0.2;
    }
}