/************************************************ *
Version: 01
Fecha: 3.3.24
Autor: Jorge
Descripción: Hoja de estilos inicial
****************************************************
Version: 02
Fecha: 20.3.24
Autor: Jorge
Descripción: Modificaciones

***************************************************/

/****************************** INDICE ********************************/
/* 
1.- TEXTO GENERAL
2.- FORMULARIOS
3.- CONTENEDORES
4.- HEADER
5.- FOOTER
6.- ASPECTOS GENERALES
7.- TABLAS
8.- BARRA DE PROGRESO
9.- OTROS


/*********************** 1.- Texto general ********************************/

h1, h2, h3, h4, h5, h6, p, nav, ul, li{

    font-family: "Rubik", Sans-serif;

}

h2{
    
    font-size: 34px;
    font-weight: 400;
    line-height: 1.2;
}

h3 {
    
    font-size: 30px;
    font-weight: 400;
    line-height: 1.2;
}

h4 {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2;
}

h5 {
    font-size: 20px;
    font-weight: 300;
    line-height: 1.2;
}

.teseo-nota {
    font-size: 12px;
    font-weight: 300;
}
.teseo-nota-creacion {
    font-size: 12px;
    font-weight: 300;
    text-align: right;
}

.teseo-contenedor h4{
    margin: 5px 0 25px 0;
}

.teseo-contenedor h5{
    margin: 0 0 20px 0;
}

.teseo-contenedor select{
    font-family: "Rubik", Sans-serif;
    font-size: 20px;
    font-weight: 300;

}

.teseo-contenedor-consulta p{
    text-align: justify;
}

.teseo-exito {
    
    font-size: 30px;
    font-weight: 400;
    line-height: 1.2;
    color: #00AA00;
    text-align: center;
    margin: 0 0 70px 0;

}

.teseo-contenedor div{
    /*text-align: center;
    margin: 50px 0 90px 0;*/
}

/************************* 2.- Formularios ******************************/
label {
    font-family: "Rubik", Sans-serif;
    font-size: 22px;
    font-weight: 300;
}

select {
    font-family: "Rubik", Sans-serif;
    font-size: 22px;
    font-weight: 300;
}

input {
    font-family: "Rubik", Sans-serif;
    font-size: 22px;
    font-weight: 300;
}

textarea {
    font-family: "Rubik", Sans-serif;
    font-size: 22px;
    font-weight: 300;
}

.teseo-boton-form-dc {
    color: #ffffff;
    background-color: #000000;
    border: none;
    border-radius: 3px;
    margin: 20px 0 0 5px;
    font-weight: 500;
    font-family: "Rubik", Sans-serif;
    display: inline-block;
    line-height: 1; 
    padding: 12px 24px;
    border-radius: 3px;
    color: #fff;
    fill: #fff;
    text-align: center;
    transition: all .3s;
    cursor: pointer;
    text-decoration: none;    
}

.teseo-boton-form-dc:hover {
    color: #000000;
    background-color: #FF5E14;
    font-weight: 500;
    font-family: "Rubik", Sans-serif;   
}

.teseo-boton-accion-dc {
    display: inline-block; /* Hace que el enlace se comporte como un bloque inline, permitiendo establecer un ancho */
    width: 100%; /* Establece el ancho al 100% del contenedor padre. Ajusta según sea necesario */
    text-align: center; /* Centra el texto dentro del botón */
    margin: 5px 0; /* Añade un poco de margen arriba y abajo para separación */
    padding: 10px 0; /* Añade algo de padding para aumentar el área clickeable */
    background-color: #000000; /* Color de fondo del botón */
    color: white; /* Color del texto */
    text-decoration: none; /* Elimina el subrayado del texto */
    border-radius: 5px; /* Opcional: Añade bordes redondeados al botón */
    font-family: "Rubik", Sans-serif;   
}

.teseo-boton-accion-dc:hover {
    color: #000000;
    background-color: #FF5E14;
    font-weight: 500;
    font-family: "Rubik", Sans-serif;   
}

.teseo-boton-form {
    color: #ffffff;
    background-color: #000000;
    border: none;
    padding: 10px 12px;
    border-radius: 3px;
    margin: 20px 0 0 0;
    font-weight: 500;
    font-family: "Rubik", Sans-serif;
    display: inline-block;
    line-height: 1; 
    padding: 12px 24px;
    border-radius: 3px;
    color: #fff;
    fill: #fff;
    text-align: center;
    transition: all .3s;
    cursor: pointer;
    text-decoration: none;    
}

.teseo-boton-form:hover {
    color: #000000;
    background-color: #FF5E14;
    font-weight: 500;
    font-family: "Rubik", Sans-serif;   
}

.teseo-boton-form-volver {
    color: #ffffff;
    background-color: #000000;
    border: none;
    padding: 10px 12px;
    border-radius: 3px;
    margin: 20px 0 0 0;
    font-weight: 500;
    font-family: "Rubik", Sans-serif;
    display: inline-block;
    line-height: 1; 
    padding: 12px 24px;
    border-radius: 3px;
    color: #fff;
    fill: #fff;
    text-align: center;
    transition: all .3s;
    cursor: pointer;
    text-decoration: none;
    font-size: 22px;    
}

.teseo-boton-form-volver:hover {
    color: #000000;
    background-color: #FF5E14;
    font-weight: 500;
    font-family: "Rubik", Sans-serif;   
}

.teseo-formulario-creacion{
    margin: 40px 0 0 0;
    display: flex;
    flex-direction: column;
    width: 100%; /* Ajusta esto según necesites */

}

.teseo-campo-creacion {
    display: flex;
    margin: 30px 0 5px 0; /* Espacio entre campos */
    align-items: center; /* Alinea verticalmente los elementos */
}

.teseo-campo-creacion label {
    
    margin-right: 10px; /* Espacio entre el label y el input */
    white-space: nowrap; /* Evita que el texto del label se envuelva */
    width: 30%; /* Ancho fijo para todos los label */
    min-width: 120px; /* Ancho mínimo para asegurar la consistencia */
    text-align: left; /* Opcional: Alinea el texto a la derecha para una apariencia uniforme */
}

.teseo-campo-creacion input[type="text"],
.teseo-campo-creacion input[type="email"],
.teseo-campo-creacion input[type="password"] {
    flex-grow: 1; /* Los inputs ocuparán el espacio restante */
}

.teseo-boton-contenedor-creacion {
    text-align: right;
}

.teseo-formulario-acceso{
    margin: 40px 0 0 0;
    display: flex;
    flex-direction: column;
    width: 100%; /* Ajusta esto según necesites */

}
.teseo-campo-acceso {
    display: flex;
    margin: 30px 0 5px 0; /* Espacio entre campos */
    align-items: center; /* Alinea verticalmente los elementos */
}

.teseo-campo-acceso label {
    
    margin-right: 10px; /* Espacio entre el label y el input */
    white-space: nowrap; /* Evita que el texto del label se envuelva */
    width: 30%; /* Ancho fijo para todos los label */
    min-width: 120px; /* Ancho mínimo para asegurar la consistencia */
    text-align: left; /* Opcional: Alinea el texto a la derecha para una apariencia uniforme */
}

.teseo-campo-acceso input[type="text"],
.teseo-campo-acceso input[type="email"],
.teseo-campo-acceso input[type="password"] {
    flex-grow: 1; /* Los inputs ocuparán el espacio restante */
}



.teseo-boton-contenedor-acceso {
    text-align: right;
}

#descripcionSituacion{
    font-size: 16px;
    font-weight: 300;
    font-family: "Rubik", Sans-serif;
}

#campos_relacionados div {
    display: flex;
    align-items: center; /* Alinea verticalmente los elementos del formulario */
    margin-bottom: 5px; /* Espacio entre cada campo del formulario */
}

#campos_relacionados label {
    margin-right: 20px; /* Espacio entre el label y el input */
    white-space: nowrap; /* Asegura que el texto del label no se pase a una nueva línea */
    text-align: left; /* Alinea el texto del label a la izquierda */
    width: 150px; /* Ancho fijo para todos los label, ajusta según sea necesario */
}

#campos_relacionados input[type="text"],
#campos_relacionados input[type="email"],
#campos_relacionados input[type="tel"] {
    flex-grow: 1; /* Los inputs ocuparán el espacio restante */
    max-width: 300px; /* Establece un ancho máximo para los inputs */
    min-width: 300px; /* Establece un ancho mínimo para asegurar la consistencia */
}

.teseo-campos-testigo div {
    display: flex;
    align-items: center; /* Alinea verticalmente los elementos del formulario */
    margin-bottom: 5px; /* Espacio entre cada campo del formulario */
}

.teseo-campos-testigo label {
    margin-right: 20px; /* Espacio entre el label y el input */
    white-space: nowrap; /* Asegura que el texto del label no se pase a una nueva línea */
    text-align: left; /* Alinea el texto del label a la izquierda */
    width: 150px; /* Ancho fijo para todos los label, ajusta según sea necesario */
}

.teseo-campos-testigo input[type="text"],
.teseo-campos-testigo input[type="email"],
.teseo-campos-testigo input[type="tel"] {
    flex-grow: 1; /* Los inputs ocuparán el espacio restante */
    max-width: 300px; /* Establece un ancho máximo para los inputs */
    min-width: 300px; /* Establece un ancho mínimo para asegurar la consistencia */
}

.teseo-caja-descripcion {
    width: 100%; /* Hace que el textarea ocupe todo el ancho del contenedor padre */
    height: 200px; /* Establece un alto fijo de 200px */
    overflow-y: auto; /* Muestra una barra de desplazamiento vertical cuando el contenido excede el alto */
    resize: none; /* Opcional: Evita que el usuario cambie el tamaño del textarea */
}

#contenedor-archivos div{
    margin: 0 0 10px 0;
}

.archivo{
    margin: 15px 0 0 0;
}

.teseo-cbox-label{

        font-size: 14px;
        font-weight: 300;
}

#urlEmpresa{
    flex-grow: 1;
    background-color: #f0f0f0;
    cursor: not-allowed;
}

.teseo-boton-form-empresa {
    color: #ffffff;
    background-color: #000000;
    border: none;
    border-radius: 3px;
    font-weight: 500;
    font-family: "Rubik", Sans-serif;
    display: inline-block;
    line-height: 1; 
    padding: 12px 24px;
    border-radius: 3px;
    color: #fff;
    fill: #fff;
    text-align: center;
    transition: all .3s;
    cursor: pointer;
    text-decoration: none;    
}

.teseo-boton-form-empresa:hover {
    color: #000000;
    background-color: #FF5E14;
    font-weight: 500;
    font-family: "Rubik", Sans-serif;   
}

.teseo-boton-comun-empresa {
    color: #ffffff;
    background-color: #000000;
    border: none;
    border-radius: 3px;
    font-weight: 500;
    font-family: "Rubik", Sans-serif;
    display: inline-block;
    line-height: 1; 
    padding: 12px 24px;
    border-radius: 3px;
    color: #fff;
    fill: #fff;
    text-align: center;
    transition: all .3s;
    cursor: pointer;
    text-decoration: none;
    margin: 10px 0 0 0;    
}

.teseo-boton-comun-empresa:hover {
    color: #000000;
    background-color: #FF5E14;
    font-weight: 500;
    font-family: "Rubik", Sans-serif;   
}

.teseo-textarea-comunicacion{
    width: 100%;
}

/************************ 3.- Contenedores **********************************/

.teseo-contenedor{
    margin: 80px 20% 40px 20%;
    flex: 1; /* Esto hace que el contenido se expanda para llenar el espacio vertical, empujando el footer hacia abajo */
}

.teseo-contenedor-accion {
    width: fit-content; /* Ajusta el contenedor al ancho del contenido más largo */
    margin: 80px auto 40px auto; /* Centra el contenedor */
    flex: 1; /* Esto hace que el contenido se expanda para llenar el espacio vertical, empujando el footer hacia abajo */
}

.teseo-contenedor-consulta{
    border: 1px solid #000000;
    padding: 20px;
    border-radius: 5px;
    margin: 0 0 10px 0;
}
.teseo-contenedor-chat{
    margin: -30px 20% 40px 20%;
    flex: 1; /* Esto hace que el contenido se expanda para llenar el espacio vertical, empujando el footer hacia abajo */
}

/************************* 4.- Header **************************************/
.teseo-header-container {
    display: flex;
    justify-content: space-between;
    margin: 2% 20%;
}

.teseo-header-columna {
    flex: 1; /* Hace que las columnas tengan el mismo ancho */
    text-align: left; /* Centra el contenido de cada columna */
}


.teseo-header-columna-derecha {
    text-align: right; /* Alinea el contenido de la última columna a la derecha */
}

/* Estilos adicionales para asegurar que la lista sea horizontal */
.teseo-header-container nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: space-around;
}

.teseo-header-container nav ul li {
    margin: 0 10px; /* Espacio horizontal entre los enlaces */
}

.teseo-header-container nav ul li a {
    text-decoration: none;
    color: black; /* Cambia el color según necesites */
}

.teseo-header-columna img {
    width: 300px; /* Establece el ancho del logo a 300px */
}


/************************* 5.- Footer **************************************/

footer {
    background-color: #000000; /* Color de fondo del footer */
    color: #FFFFFF; /* Color del texto del footer */
    text-align: center; /* Alinea el texto al centro */
    padding: 20px 0 20px 0; /* Añade un padding arriba y abajo para darle espacio */
    position: relative; /* Posicionamiento relativo */
    bottom: 0; /* Asegura que el footer se quede en la parte inferior de la página */
    width: 100%; /* Ocupa el ancho completo de la página */
}

footer p{
	font-weight: 300;
    font-size: 12px;
}

.teseo-footer-links a {
    font-size: 10px; /* Tamaño de letra para los enlaces */
    text-decoration: none; /* Opcional: elimina el subrayado de los enlaces */
    color: inherit; /* Opcional: hereda el color del texto del elemento padre */
    padding: 0 5px; /* Espacio alrededor de los enlaces para separarlos */
    font-family: "Rubik", Sans-serif;
}

.teseo-footer-links {
    display: block; /* Asegura que los enlaces se muestren uno al lado del otro */
    font-family: "Rubik", Sans-serif;
}
/*********************** 6.- Aspectos generales ************************/
body{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0; /* Elimina el margen predeterminado del navegador */
}

/*********************** 7.- Tablas ************************/
table, tr, td, th{
    font-family: "Rubik", Sans-serif;
    font-size: 18px;
    font-weight: 300;
}

table{
    width: 100%;
}

th{
    font-weight: 500;
}

#teseo-columna-enlace{
    text-align: center;
}

/***************** 8.- BARRA DE PROGRESO ***********************/
.progress-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 40px 0 60px 0; /* Ajusta según sea necesario */
    text-align: center;
}

.step {
    width: 40px;
    height: 40px;
    background-color: #000000;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Rubik", Sans-serif;
    font-size: 20px;
    margin-bottom: 10px; /* Espacio entre el número del paso y el título */
}

.step-done {
    background-color: #FF5E14; /* Color del círculo cuando el paso está completado */
    color: #000000;
    font-family: "Rubik", Sans-serif;
    font-size: 20px;
    font-weight: 500;
}

.divider {
    height: 1px;
    width: 50px; /* Ajusta según sea necesario */
    background-color: #000000; /* Color del divisor entre los círculos */
    margin: 7px 0 33px 0; /* Espacio alrededor del divisor */
}

.step-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    
}

.title {
    /* Estilos para los títulos */
    color: #000000;
    font-size: 16px;
    font-family: "Rubik", Sans-serif;
    /* No es necesario margin extra aquí, se controla en .step */
}

.title-done {
    font-weight: bold; /* Esto hará que el texto esté en negrita */
    font-family: "Rubik", Sans-serif;
}
/******************************* 9.- OTROS ****************************/

.teseo-linea-separadora {
    border: 0; /* Elimina el borde por defecto */
    height: 1px; /* Establece el grosor de la línea */
    background-color: #d3d3d3; /* Establece el color de la línea a un gris claro */
    width: 100%; 
    margin: auto; /* Centra la línea horizontalmente */
}

/* Estilos para el botón y la animación de cargando */
.button-container {
    display: flex;      /* Alineación horizontal de elementos */
    align-items: center; /* Centra los elementos verticalmente */
    gap: 10px;          /* Espacio entre el botón y el spinner */
}

.button-loader {
    cursor: pointer;  /* Estilo del cursor */
    position: relative; /* Posicionamiento relativo para el botón */
}

.loader {
	margin-top: 20px;
    border: 4px solid #f3f3f3; /* Borde gris para partes no activas del spinner */
    border-top: 4px solid #3498db; /* Borde azul para la parte activa del spinner */
    border-radius: 50%;
    width: 25px;
    height: 25px;
    animation: spin 2s linear infinite; /* Animación de giro */
    display: none; /* Oculto por defecto */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}