:root {
	--vass-blue: #4bbcee;
	--vass-gray: #d9d9d9;
	--transparent-white: rgb(219, 219, 219, 0.98);
	--vass-white: rgba(255, 255, 255, 0.85);
	--default-prompt: #d1f1ff;
	--prompt-background: #89d4f5;
	
    --beige:#c5c5c5;
	--secondary-beige: #cbcbcb;
	--third-beige: #e4e4e4;
    --darker-beige: #8a8a8a;
	--lateral-menu-click: #989898;
	
    --black:#2f2f2f;
	--secondary-black: #464646;

	--primary-color: #08293A;
    --secondary-color: #8FC2D1;
}
@font-face {
	font-family: "Roboto Regular";
	src: url("../fonts/Roboto-Regular.ttf");
}
@font-face {
	font-family: "Roboto Bold";
	src: url("../fonts/Roboto-Bold.ttf");
}
*{
    font-family: "Roboto Regular";
	box-sizing: border-box;
}
body {
	margin: 0;
	height: 100vh;
	position: relative;
	background-color: var(--vass-white);
	/* overflow: hidden; */
}
header{
    background-color: var(--primary-color);
    color: white;
	height: 10%;
	display: flex;
	align-items: center;
	width: 100%;
	justify-content: center;
	box-shadow: 0 5px 8px rgba(0, 0, 0, 0.5);
}
button{
	width: fit-content;
}
button, input[type="submit"], select{
    border: none;
    padding: 10px;
    border-radius: 8px;
	font-size: 15px;
}
main {
	height: 90%;
}
a{
	color: inherit;
	text-decoration: none;
}
table{
	border-collapse: collapse;
}
dialog:not([open]) { display: none; }
textarea{
	resize: none;
}
.bg-blue-button {
	border: none;
	width: 150px;
	background: var(--vass-blue);
	color: white;
	cursor: pointer;
	transition: all .5s;
}
.bg-white-button {
	border: none;
	width: 150px;
	background: white;
	color: black;
	cursor: pointer;
	transition: all .5s;
}
.dialog-confirm-button {
	position: absolute;
	bottom: 0;
	right: 0;
}
.basic-grid{
	display: grid;
	width: 100%;
	grid-template-rows: repeat(2,auto);
	grid-template-columns: repeat(var(--rows),1fr);
	position: relative;
	gap: 15px;
	justify-items: center;
}
.basic-card-wrapper-container {
	display: flex;
	flex-direction: column;
	width: 80%;
	align-items: center;
	justify-content: flex-start;
	gap: 2px;
	/* background: #dedddd8c; */
	padding: 15px;
	height: 100%;
	border-radius: 20px;
	overflow: auto;
}
.basic-card-wrapper {
	width: 80%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-direction: column;
}
.basic-card {
	border-bottom: 1px solid var(--third-beige);
	transition: background-color 0.2s, border-color 0.2s;
	cursor: pointer;
	width: 100%;
	color: black;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 2px black solid;
	border-radius: 10px;
	flex-direction: column !important;
	background: var(--beige);
	padding: 20px;
}
.basic-card h3:nth-child(2){
	font-size: 15px;
	font-style: italic;
}
.basic-card:hover {
	background-color: var(--secondary-beige);
}
.basic-card div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* height: 100%; */
	width: 90%;
	padding: 0 30px;
	margin: 0 auto;
}
.basic-card h3 {
	width: fit-content;
	text-align: center;
	margin: 0;
}
.basic-card img.status-img{
	width: 30px;
}
.fade-in{
	animation: fade-in-animation .5s forwards;
}
.fade-eliminate{
	animation: fade-out-animation .5s forwards;

}
@keyframes fade-in-animation {
    0% {
        opacity: 0;
		transform: translateY(-20px);

    }
    100% {
        opacity: 1;
		transform: translateY(0);

    }
}
@keyframes fade-out-animation {
    0% {
		opacity: 1;
		transform: translateY(0);

    }
    100% {
		opacity: 0;
		transform: translateY(-20px);
    }
}
/* MENU LATERAL */
.lateral-menu-project, .custom-aside {
    height: 100%;
    min-width: 13.5%;
    background: #CCF2F4; /* mantenemos este color para el primer menú */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    border-right: 1px black solid;
    position: relative; /* necesario para el pseudo-elemento */
    overflow: hidden; /* por si el patrón se sale */
}

/* Para el segundo menú mantenemos su color original */
.custom-aside {
    background-color: #e7fafb;
}

/* Añadimos una textura muy sutil encima del color existente usando ::before */
.custom-aside::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-image: url('/static/img/subtle-pattern.jpg'); 
    background-repeat: repeat;
    background-size: auto;
    opacity: 0.4; 
    z-index: 0;
}

/* Aseguramos que el contenido interno esté por encima de la textura */
.custom-aside > * {
    position: relative;
    z-index: 1;
}

.lateral-menu-project section, .custom-aside-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: start;
	gap: 10px;
	padding-top: 115px;
	width: 100%;
}
.lateral-menu-project a,.custom-aside-wrapper div{
	width: 80%;
	border-radius: 10px;
}
.lateral-menu-project button, .custom-aside-wrapper div button {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Cambiamos de center a flex-start para alinear el icono a la izquierda */
    position: relative;
    cursor: pointer;
    border-radius: 6em;
    transition: all 0.2s;
    border: none;
    color: black;
    background-color: #CCF2F4;
    width: 100%;
    font-size: 18px;
}
/* Estado activo: sin fondo y color del texto #08293A */
.lateral-menu-project button:active,
.custom-aside-wrapper div button:active {
	transform: translateY(-1px);
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

/* Estado hover: fondo negro y texto blanco */
.lateral-menu-project button:hover,
.custom-aside-wrapper div button:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
	background-color: #08293A;
	color: #CCF2F4;
}

.lateral-menu-project button.active {
    background-color: #08293A;
    color: #CCF2F4;
}

.lateral-menu-project button::after, .custom-aside-wrapper div button::after {
	content: "";
	display: inline-block;
	height: 100%;
	width: 100%;
	border-radius: 100px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	transition: all 0.3s;
}

.lateral-menu-project button::after, .custom-aside-wrapper div button::after {
background-color: #e2f9fa;
}

.lateral-menu-project button:hover::after, .custom-aside-wrapper div button:hover::after {
transform: scaleX(1.3) scaleY(1.5);
opacity: 0;
}
.button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start; 
    margin-left: 10px; /* Opcional, para separar el icono del borde izquierdo */
    margin-right: 5px;
}
.button-icon img {
    width: 35px;  
    height: 35px; 
}
.button-text {
    flex: 1;
    text-align: center;
    margin: 0 auto;
}

.icon-blue {
    display: none;
}

.lateral-menu-project button:hover .icon-black,
.lateral-menu-project button.active .icon-black {
    display: none;
}

.lateral-menu-project button:hover .icon-blue,
.lateral-menu-project button.active .icon-blue {
    display: inline;
}

/* FIN MENU LATERAL */
/* HEADER */
header {
	
	display: flex;
	align-items: center;        
	justify-content: space-between; 
	height: 8em;                
	background-color: var(--primary-color);  
	padding: 0 15px;
}
nav{
    padding: 0 15px;
    height: 100%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
	text-align: center;
}
nav h2{
    font-size: 35px;
    color: white;
}
/* para el boton de volver a home */
#back-home {
	gap: 10px;
	left: 25px;
	padding: 10px;
	display: flex;
	height: 3em;
	width: 150px;
	align-items: center;
	justify-content: center;
	background-color: #eeeeee4b;
	border-radius: 20px;
	letter-spacing: 1px;
	transition: all 0.2s linear;
	cursor: pointer;
	background: var(--secondary-color);
	color: white;
}
#back-home:hover {
	box-shadow: 2px 2px 13px #d1d1d1, -1px -1px 13px #ffffff;
	transform: translateY(-2px);
}
#back-home img {
	width: 30px;
}
.header-user {
	display: flex;
	align-items: center;
	position: relative;
}

#user-button {
	gap: 10px;
	right: 25px;
	padding: 10px;
	height: 3em;
	/* width: 150px; */
	align-items: center;
	justify-content: center;
	background-color: #eeeeee4b;
	border-radius: 20px;
	letter-spacing: 1px;
	transition: all 0.2s linear;
	cursor: pointer;
	background: var(--secondary-color);
	color: white;
	display: inline-flex;
}
  
#user-button img {
	width: 30px;
}
  
#user-button:hover {
	box-shadow: 2px 2px 13px #d1d1d1, -1px -1px 13px #ffffff;
	transform: translateY(-2px);
}
.user-dropdown {
    position: absolute;
    top: calc(100% + 5px);   /* Para que salga hacia ABAJO */
    left: 50%;
    transform: translateX(-50%) scaleY(0);
    transform-origin: top center;

    /* Inicialmente oculto */
    opacity: 0;
    pointer-events: none;

    /* Caja visual */
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}

/* Cuando se muestre, baja (scaleY(1)) y es visible */
.user-dropdown.show {
    transform: translateX(-50%) scaleY(1);
    opacity: 1;
    pointer-events: auto;
}

/* Lista interna */
.user-dropdown ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.user-dropdown ul li a {
    display: block;
    padding: 0.5rem 1rem;
    text-decoration: none;
    color: #333;
}

.user-dropdown ul li a:hover {
    background-color: #f5f5f5;
}
/* FIN HEADER */
.no-header-main{
    height: 100%;
}
.confirmDeleteProject{
	width: 25%;
	height: 25%;
	background: #c4c4c4;
	border: none;
	border-radius: 15px;
	padding: 20px;
	position: absolute;
	top: 50%;
	bottom: 50%;
}
.confirmDeleteProject button{
	cursor: pointer;
}
.confirmDeleteProject button:first-of-type {
	background-color: lightgreen;
	color: white;
	border: 2px solid darkgreen;
	margin-right: 10px;
}

.confirmDeleteProject button:nth-of-type(2) {
	background-color: lightcoral;
	color: white;
	border: 2px solid darkred;
}
/* FIN INDEX */
/*estilo para cuando haya menu lateral que la seccion ocupe el resto*/
.lateral-menu-project ~ section, .section-main {
	width: 88%;
	padding: 5%;
	/* background-image: url("../img/VASS_background.png"); */
	background-size: cover;
	background-position: center;
}
/* LOADING */
#loading-container {
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: rgba(97, 97, 97, 0.5); /* Fondo semi-transparente */
    z-index: 99;

    /* Flexbox para centrar contenido */
    display: flex;
    justify-content: center; /* Centrado horizontal */
    align-items: center;     /* Centrado vertical */
}
#loading-wrapper {
    display: flex;
    flex-direction: column; /* Elementos en columna (vertical) */
    align-items: center;    /* Alinea el texto al centro */
	transform: translateY(350px); /* Desplaza todo hacia abajo */
}
#loading {
    border: 5px solid #f3f3f3;
    border-top: 5px solid var(--beige);
    border-radius: 50%;
	margin: 0 auto;
    width: 70px;
    height: 70px;
    animation: spin 2s linear infinite;
	border-width: 7px;
	top: 40%;
	left: 50%;
}



/* Texto de "Loading..." */
#loading-text {
    margin-top: 15px; /* Espacio entre el spinner y el texto */
    font-size: 18px;
    color: #ffffff;
    text-align: center;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg);}
}
/* FIN LOADING */
.project-detail-main{
	display: flex;
}
.section-main-flex{
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* DIALOG STYLE */
.dialog-no-aside{
    top: 0%;
    right: 0%;
}
.createDialog {
	position: fixed;
	width: 83%;
	height: 83%;
	border: none;
	border-radius: 15px;
	padding: 20px;
	box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(5px);
	transition: all 0.3s ease-in-out;
	top: 16%;
	left: 13%;
	right: 1%;
	bottom: 6%;
	overflow-y: auto;
	z-index: 900;
	background-color: #fff;
}
/* 
this class is used on dialogs that shows with the function show and not showModal, and can show the loading element
with the showModal you cant display element over, but with the show you can
*/
.dialog-show{
	position: absolute!important;
	z-index: 10;
}
dialog:focus{
	outline: none;
}
.createDialog *:focus{
    outline: none;
}
.createDialog label{
    font-size: 20px;
}
.createDialog input[type="text"], .createDialog textarea {
	border: none;
	outline: none;
	border-radius: 15px;
	padding: 1em;
	background-color: #ccc;
	box-shadow: inset 2px 5px 10px rgba(0,0,0,0.3);
	transition: 300ms ease-in-out;
}
.createDialog input[type="text"]:focus, .createDialog textarea{
	background-color: white;
	transform: scale(1.01);
	box-shadow: 13px 13px 100px #969696,
			   -13px -13px 100px #ffffff;
	margin-top: 5px;
}
input[type="checkbox"] {
	width: fit-content!important;
}

.checkbox-container {
	display: inline-block;
	position: relative;
	padding-left: 35px;
	margin-bottom: 12px;
	cursor: pointer;
	font-size: 16px;
	user-select: none;
}
.custom-checkbox {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 17px;
width: 17px;
background-color: #eee;
border-radius: 4px;
transition: background-color 0.3s;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.checkmark:after {
content: "";
position: absolute;
display: none;
left: 5px;
top: 1px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}
.custom-checkbox:checked ~ .checkmark {
background-color: #2196F3;
box-shadow: 0 3px 7px rgba(33, 150, 243, 0.3);
}
.custom-checkbox:checked ~ .checkmark:after {
display: block;
}
@keyframes checkAnim {
0% {
	height: 0;
}

100% {
	height: 10px;
}
}
.custom-checkbox:checked ~ .checkmark:after {
animation: checkAnim 0.2s forwards;
}
  
.createDialog textarea {
	height: 50%;
	width: 100%;
	border: none;
	outline: none;
	border-radius: 15px;
	padding: 1em;
	background-color: #ccc;
	box-shadow: inset 2px 5px 10px rgba(0,0,0,0.3);
	transition: 300ms ease-in-out;
}
.createDialog textarea:focus {
	background-color: white;
	transform: scale(1.01);
	box-shadow: 13px 13px 100px #969696,
			   -13px -13px 100px #ffffff;
	margin-top: 5px;
}
.createDialog form{
    position: relative;
    height: 100%;
	display: flex;
	flex-direction: column;
}
.createDialog form #createProject{
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    gap: 20px;
}
.closeDialog {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 15px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	cursor: pointer;
}
.deleteProjectCross{
	position: absolute;
	width: 15px;
	height: 20px;
	top: var(--cross-height);
	right: 10px;
	cursor: pointer;
}
main dialog textarea,
main dialog input,
main dialog select{
    display: block;
}
/* FIN DIALOG STYLE */
.to-remove{
    background-color: red!important;
    transition: background-color .3s;
}
/* From Uiverse.io by barisdogansutcu */ 
.floating-button {
  padding: 17px 40px;
  border-radius: 50px;
  cursor: pointer;
  border: 0;
  background-color: var(--secondary-color);
  box-shadow: rgb(0 0 0 / 5%) 0 0 8px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 15px;
  transition: all 0.5s ease;
}

.floating-button:hover {
  letter-spacing: 3px;
  background-color: var(--primary-color);
  color: #8fc2d1;
  box-shadow: #08293A 0px 7px 29px 0px;
}

.floating-button:active {
  letter-spacing: 3px;
  background-color: var(--primary-color);
  color: #8fc2d1;
  box-shadow: #08293A 0px 0px 0px 0px;
  transform: translateY(10px);
  transition: 100ms;
}


/* Contenedor que organiza los botones */
.floating-button-container {
    position: fixed;
    bottom: 3%;
    right: 3%;
    display: flex;
    gap: 15px; 
    justify-content: flex-end;
}
.button-container {
    position: fixed;
    bottom: 2%;
    right: 1%;
	display: flex;
	justify-content: flex-end;
}
/* FIN FLOATING-BUTTON */
.filter-clicked {
	background: var(--black) !important;
	color: #08293A !important;
}
.filter-clicked button{
	color: #08293A !important;
	border-radius: 15px;
}
.fixed-element {
	position: sticky !important;
	bottom: 0;
	left: 0;
	width: fit-content !important;
}
.expand-card{
	position: absolute;
	width: 15px;
	height: 20px;
	top: var(--custom-height);
	left: 10px;
	cursor: pointer;
}

/* CHAT CONTAINER */

.chat-container {
	width: 70%;
	/* max-width: 600px; */
	background-color: var(--transparent-white);
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 90%;
	margin: 0 auto;
}

.chat-messages {
	flex: 1;
	padding: 20px;
	overflow-y: auto;
	max-height: 100%;
}

.message {
	margin-bottom: 10px;
}

.user-message {
	text-align: right;
}

.bot-message {
	text-align: left;
}

.message p {
	display: inline-block;
	padding: 10px 15px;
	border-radius: 20px;
	max-width: 80%;
}

.user-message p {
	background-color: #0084ff;
	color: #fff;
}

.bot-message p {
	background-color: #f1f0f0;
	color: #000;
}

.chat-input {
	display: flex;
	border-top: 1px solid #ddd;
}

.chat-input input {
	flex: 1;
	padding: 15px;
	border: none;
	outline: none;
}

.chat-input button {
	padding: 0 20px;
	background-color: #0084ff;
	color: white;
	border: none;
	cursor: pointer;
}

.chat-input button:hover {
	background-color: #006bbf;
}

/* Incluimos las imagenes de los modelos llm */
.llm-model-image-gemini {
	content: url('/static/img/google_gemini.jpg');
	width: 50px;
	height: 50px;
}

.llm-model-image-azure {
	content: url('/static/img/azure_openai.jpg');
	width: 50px;
	height: 50px;
}

.llm-model-image-deepseek {
	content: url('/static/img/deepseek.jpg');
	width: 50px;
	height: 50px;
}

.state-info {
	width: 20px;
	margin-left: 10px;
}

/* Asegurarse de que los bloques de código se ajusten dentro de la pantalla */
pre, code {
	word-wrap: break-word; /* Rompe las palabras largas */
	white-space: pre-wrap; /* Mantiene saltos de línea y espacios, pero permite ajuste */
}
.category-wrapper-container {
	width: 100%;
	cursor: pointer;
}
.name-arrow {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	border-bottom: 1px black solid;
	gap: 10px;
}
.name-arrow img {
	width: 17px;
}
.name-arrow p {
	margin: 10px 0;
}
.category-wrapper .basic-card {
	width: 100%;
	padding: 10px 0;
}
.images-container {
	width: fit-content !important;
	padding: 0 !important;
	position: absolute;
	right: 0;
}
.images-container img {
	width: 20px;
	margin: 0 3px;
}
.params-input {
	background: white;
	padding: 10px;
	margin-top: 10px;
	border-radius: 10px;
}
.params-input label {
	display: block;
}
.params-input input, .params-input select {
	display: inline-block;
	margin-left: 5px;
	width: 60%;
}
#copyLink{
	background: #fff;
	border: 1px black solid;
	cursor: pointer;
}
.tool-card.basic-card {
	flex-direction: row !important;
	gap: 15px;
    background-color: white;
}
.tool-card div {
	flex-direction: column;
	padding: 0;
	gap: 10px;
	align-items: flex-start;
}
.tool-card p {
	margin: 0;
}
.tool-card img {
	margin-right: 10px;
}

/* Estilo para oscurecer el fondo cuando el popup está activo */
.popup-overlay {
	display: none; /* Oculto por defecto */
	position: fixed;
	top: 0; 
	left: 0; 
	width: 100vw; 
	height: 100vh;
	background: rgba(0, 0, 0, 0.5);
	z-index: 999; /* Para que quede por encima de otros elementos */
  }
  
  /* Contenido del popup */
  .popup-content {
	background-color: #fff;
	max-width: 90%;
	max-height: 90%;
	margin: 100px auto; /* Centrado vertical con un margen superior */
	padding: 20px;
	border-radius: 8px;
	position: relative; /* Para poder posicionar la imagen de cierre */
  }
  
  
  /* Ajustes de los inputs y labels dentro del formulario */
  #changePasswordForm label {
	display: block;
	margin-top: 10px;
  }
  
  #changePasswordForm input {
	width: 100%;
	padding: 8px;
	margin-top: 5px;
	box-sizing: border-box;
  }

.toggle-btn {
	background: none;
	border: none;
	font-size: 18px;
	cursor: pointer;
	position: absolute;
	right: 0;
	top: 0;
}
.node-selector {
	display: flex;
	align-items: center;
	width: 100%; /* Make sure it takes full width */
	position: relative;
}
.block-label{
	display: block;
	margin-top: 15px;
}
#chatbot-voice-selector-wrapper * {
	width: 150px;
}
#confirm-toast {
	position: absolute;
	bottom: 50%;
	width: 300px;
	text-align: center;
	/* border: 1px black solid; */
	/* background: white; */
	border-radius: 10px;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
}
p.message-toast {
	animation: aparecerDesaparecer 3s ease-in-out forwards;
	margin: 25px 10px;
	border: 1px black solid;
	padding: 5px;
	border-radius: 10px;
	background: white;
	overflow-wrap: anywhere;
}
@keyframes aparecerDesaparecer {
	0% {
		bottom: -100px;
		opacity: 0;
	}
	10% {
		bottom: 0;
		opacity: 1;
	}
	50% {
		bottom: 0;
		opacity: 1;
	}
	60% {
		bottom: 0;
		opacity: 1;
	}
	100% {
		bottom: -100px;
		opacity: 0;
	}
}