.webixappstart{
    opacity:0;
}
.webixapp{
    transition: opacity 500ms;
    opacity: 1;
}

/*data loading status*/
.status_good, .status_error, .status_saving{
	text-align: center;
	margin-left:-12px;
}
.status_error{
	color:red;
}
.status_good{
	color:green;
}

/*login form*/
.invalid_login .webix_header > div{
    background: #FC3636;
    transition: background 1s;
}
.invalid_login{
    -webkit-animation: formshake .5s linear;
}
@-webkit-keyframes formshake {
    8%, 41% {
        -webkit-transform: translateX(-10px);
    }
    25%, 58% {
        -webkit-transform: translateX(10px);
    }
    75% {
        -webkit-transform: translateX(-5px);
    }
    92% {
        -webkit-transform: translateX(5px);
    }
    0%, 100% {
        -webkit-transform: translateX(0);
    }
}

/* sync status */
.status_good{
	color:#ddd;
}

.color_row_1{
	background-color:#e8cdb9;
	color:#000;
}

.color_row_2{
	background-color:#e3b38f;
	color:#000;
}

.color_row_3{
	background-color:#e0a274;
	color:#000;
}

.color_row_4{
	background-color:#e09056;
	color:#fff;
}

.color_row_5{
	background-color:#dc5d00;
	color:#fff;
}

.color_row_6{
	background-color: #90c3dc;
	color:#fff;
}


/*header*/
.login-header-style-2{
    width:100%;
    font-family: 'Orbitron', serif;
    font-size: 10px;
    color:#ffffff
}

.login-header-style-1{
    width:100%;
    font-family: 'Orbitron', serif;
    font-size: 20px;
    color:#ffffff
}

.main-header-style-1{
    width:100%;
    font-family: 'Orbitron', serif;
    font-size: 32px;
    color:#ffffff
}

.main-header-style-2{
    width:100%;
    font-family: 'Orbitron', serif;
    font-size: 18px;
    color:#ffffff
}

.draft .webix_template .title{
	display:table-cell;
	text-align:center;
	vertical-align:middle;
	font-size:23px;
	font-weight: bold;
	-webkit-animation: rightThenLeft 4s linear;
}

.calendarTable{
    font-size: 9px;
}

.agendatooltip {
    border-radius: 8px;
    background: #3978C9;
    color: #fff;
    padding: 8px;
    width: auto;
    height: auto;
}

.color_row_agenda{
	background-color:#3978C9;
	color:#fff;
}

.color_row_agenda_desactivado{
	background-color:#FFFFFF;
	color:#FFFFFF;
}

.verdeOscuro{
	background-color: #277f4d;
	color: #fff;
}

.verde{
	background-color: #1bfe92;
	color: #fff;
}

.grisOscuro{
	background-color: #685d5d;
	color: #fff;
}

.amarillo{
	background-color: #f7d842;
	color: #fff;
}

.rojo{
	background-color: #f70909;
	color: #fff;
}

.naranja{
	background-color:#ff9d00;
	color:#ffff
}

.azul{
	background-color: #3978C9;
	color: #fff;
}

.purpura{
	background-color: #7b00ff;
	color:#fff
}

.cafe{
	background-color: #9b4500;
	color:#fff
}

.azulClaro{
	background-color: #9b4500;
	color:rgb(112, 226, 255)
}
.agendatooltip {
    border-radius: 8px;
    background: #3978C9;
    color: #fff;
    padding: 8px;
    width: auto;
    height: auto;
}

.azulBase{
	background-color:#114262;
	color: #fff;
    font-size: 9px;
}

.tableviewhover{
	background: #F0DCB6;
}


.scheduler_tooltip {
    background-color: white;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
}

/* --- Estilos para el componente AiChat (Versión Definitiva) --- */

.aichat-messages-container .webix_template {
    height: 100%;
}

#aichat-div {
    display: flex;
    flex-direction: column-reverse;
    overflow-y: auto;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.bubble{
    border-radius: 18px;
    padding: 10px 18px;
    margin-top: 4px; /* Reducimos el margen */
    max-width: 85%;
    width: fit-content;
    animation: bubble-fade-in 0.3s ease-out;
}

@keyframes bubble-fade-in {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.me {
    background-color: #e1e1e1;
    color: #333;
    align-self: flex-start;
    /* La esquina inferior izquierda se hace recta para "apuntar" */
    border-bottom-left-radius: 4px;
}

.you {
    background-color: #4a86e8;
    color: white;
    align-self: flex-end;
    /* La esquina inferior derecha se hace recta para "apuntar" */
    border-bottom-right-radius: 4px;
}

.error {
    background-color: #e6b8af;
    color: #721c24;
    align-self: center;
    text-align: center;
}

.typing-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 17px;
}
.typing-indicator span {
    height: 8px;
    width: 8px;
    margin: 0 2px;
    background-color: rgba(255, 255, 255, 0.7);
    display: block;
    border-radius: 50%;
    animation: typing-animation 1.2s infinite ease-in-out;
}
.typing-indicator span:nth-child(1) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(2) { animation-delay: 0.3s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-animation {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1.0); }
}

/* --- Estilo para la burbuja de gráfico --- */
.chart-bubble {
    background-color: #ffffff;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    color: #333; /* Asegura que el texto por defecto sea oscuro */
    align-self: flex-end;
    width: 95%; /* Hacemos que ocupe casi todo el ancho para que el gráfico respire */
    max-width: 95%;
    max-height: 280px; /* Altura máxima para el contenedor */
    display: flex;
    justify-content: center;
    align-items: center;
}

.chart-bubble canvas {
    max-width: 100%;
    max-height: 100%;
}

/* --- Estilo para la burbuja de HTML --- */
.html-bubble {
    background-color: #ffffff;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    color: #333;
    align-self: flex-end;
    width: 95%;
    max-width: 95%;
    display: block;    /* Aseguramos el comportamiento de bloque */
}

/* --- Estilo para burbuja con contenido mixto (HTML/Gráfico) --- */
.mixed-content-bubble {
    background-color: #f8f9fa; /* Un blanco ligeramente grisáceo */
    color: #343a40; /* Texto oscuro para contraste */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    /* Se elimina el ancho fijo para que se ajuste al contenido */
}

/* --- Estilo para texto con formato (Markdown ligero) --- */
.md-text {
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Ocultar la insignia de reCAPTCHA que interfiere con la UI */
.grecaptcha-badge {
    visibility: hidden !important;
}

.aichat-iterations-label {
    color: #333333 !important; /* Texto oscuro para que sea visible */
    margin-left: 10px !important;
}

.aichat-body {
    background-color: #ffffff !important; /* Fondo blanco para toda la vista */
}

.aichat-top-button .webix_button {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.aichat-top-button .fas {
    color: #555555 !important; /* Icono gris oscuro */
}

.aichat-top-button .webix_button:hover {
    background-color: #f0f0f0 !important; /* Fondo gris claro al pasar el ratón */
}


/* Estilos para el nuevo chat con Firebase - Enfoque de Contenedor Flexible */

/* El contenedor que envuelve CADA burbuja */
.message_wrapper {
    display: flex;
    width: 100%;
    padding: 0 5px;
    box-sizing: border-box;
}

/* Alinea la burbuja a la DERECHA */
.you_wrapper {
    justify-content: flex-end;
}

/* Alinea la burbuja a la IZQUIERDA */
.me_wrapper {
    justify-content: flex-start;
}

/* La burbuja en sí misma */
.bubble {
    padding: 10px 15px;
    border-radius: 18px;
    max-width: 80%;
    line-height: 1.4;
    text-align: left;
    margin-bottom: 10px;
}

/* El texto principal del mensaje */
.message-text {
    font-size: 14px; /* Aumentamos el tamaño de la fuente del mensaje */
    margin-bottom: 15px; /* Espacio para que la info no se monte */
    white-space: pre-wrap; /* Respeta saltos de línea y espacios */
    word-wrap: break-word; /* Evita que el texto se desborde */
}

/* Contenedor para la hora y el estado */
.message-info {
    text-align: right; /* Alinea la hora y el chulo a la derecha */
    font-size: 11px;
    color: #999;
    margin-top: 5px;
}

.bubble.me .message-info {
    color: #eee;
}

.message-time {
    margin-right: 5px;
}

/* Color azul para el estado 'leído' */
.status-read {
    color: #3498db;
}

/* --- Colores (tus personalizaciones) --- */

.bubble.me {
    background-color: #2d90d3;
    color: #fff;
}

.bubble.you {
    background-color: #e1f5fe;
    color: #000;
}

/* --- Limpieza de estilos de Webix --- */

.webix_list_item {
    border: none !important;
    padding: 0 !important;
}