/* atencion-usuario.css */

/* --- Contenedor General --- */
.atencion-container {
    position: fixed;
    bottom: 13px;
    right: auto;
    left: calc(100vw - 21px);
    transform: translate(-100%);
    z-index: 9998;
}

/* --- 1. Botón de Atención Flotante (FAB) --- */
.atencion-fab {
    width: 44px;
    height: 44px;
    background-color: #8F141B;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: transform 0.2s ease;
}

.atencion-fab:hover {
    transform: scale(1.1);
}

.atencion-fab img {
    width: 44px;
    height: 44px;
}

/* --- 2. Diálogo de Bienvenida --- */
.welcome-dialog {
    width: 300px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    overflow: hidden;
    font-family: Arial, sans-serif;
}

.welcome-dialog-header {
    background-color: #8F141B; /* Vino tinto */
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: end;
}

.dialog-logo {
    height: 30px;
}

.dialog-close-btn {
    color: white;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}

.welcome-dialog-body {
    padding: 15px 20px;
    text-align: center;
}

.welcome-dialog-body h3 {
	font-size: 1.5rem;
    margin: 0 0 1rem 0;
    color: #333;
}

.welcome-dialog-body p {
    margin: 0;
    font-size: 14px;
    color: #666;
}

.welcome-dialog-footer {
    display: flex;
    background-color: #f7f7f7;
    border-top: 1px solid #eee;
}

.welcome-dialog-footer button {
    flex: 1;
    padding: 12px 5px;
    background: none;
    border: none;
    border-right: 1px solid #eee;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    color: #4D626C; /* Gris */
    transition: background-color 0.2s;
}

.welcome-dialog-footer button:last-child {
    border-right: none;
}

.welcome-dialog-footer button:hover {
    background-color: #EDEFF0; /* Gris claro */
}

/* --- 3. Estilos del Chatbot --- */
.chatbot-container {
    width: 350px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    z-index: 9999;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    border-radius: 12px;
}

.chatbot-header {
    position: relative;
    background-color: #4D626C; 
    color: #FFFFFF;
    padding: 12px 15px;
    border-radius: 12px 12px 0 0;
    font-weight: bold;
    font-size: 16px;
}

.chatbot-close-btn {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    line-height: 1;
    font-weight: bold;
    cursor: pointer;
}

.chatbot-close-btn:hover {
    color: #DFD4A6;
}

.chatbot-body-wrapper {
    border: 1px solid #EAEAEA;
    border-top: none;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
}

.chatbot-body {
    height: 360px;
    overflow-y: auto;
    padding: 10px;
    background-color: #FFFFFF;
}

.chatbot-messages {
    display: flex;
    flex-direction: column;
}

.message {
    padding: 10px 14px;
    max-width: 85%;
    margin: 5px 0;
    border-radius: 15px;
    line-height: 1.4;
    clear: both; 
}

.bot-message {
    background-color: #F4E7E8; 
    color: #333;
    align-self: flex-start;
    border-bottom-left-radius: 3px;
    float: left;
}

.user-message {
    background-color: #F9F6ED; 
    color: #333;
    align-self: flex-end;
    border-bottom-right-radius: 3px;
    float: right;
}

/* === NUEVO: ESTILOS PARA LA ANIMACIÓN DE ESCRITURA === */
.typing-indicator {
    padding: 12px 14px !important; /* Asegurar padding consistente */
}

.typing-indicator span {
    height: 8px;
    width: 8px;
    background-color: #999;
    border-radius: 50%;
    display: inline-block;
    animation: bounce 1.4s infinite ease-in-out both;
}

.typing-indicator span:nth-of-type(1) {
    animation-delay: -0.32s;
}

.typing-indicator span:nth-of-type(2) {
    animation-delay: -0.16s;
}

@keyframes bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1.0); }
}
/* === FIN DE ESTILOS NUEVOS === */

.options button {
    display: block; 
    margin: 8px 0; 
    padding: 10px; 
    width: 100%;
    background-color: #DFD4A6;
    color: #1E262B; 
    border: none; 
    border-radius: 8px; 
    cursor: pointer; 
    text-align: center;
    font-weight: bold; 
    transition: background-color 0.2s ease, color 0.2s ease;
}

.options button:hover { 
	background-color: #C7B363; 
	color: #FFFFFF; 
}

.options button.back-button { 
	background-color: #6c757d; 
	color: white; 

}

.options button.back-button:hover { background-color: #5a6268; }

.options button.exit-button { 
	background-color: #8F141B; 
	color: #DFD4A6; 
}

.options button.exit-button:hover { background-color: #5C0E12; }

.options button.suggestion-button {
    background-color: #4D626C; /* Gris Institucional */
    color: white;
}
.options button.suggestion-button:hover {
    background-color: #1E262B; /* Gris Institucional Oscuro */
}

.chatbot-footer {
    padding: 10px; background-color: #F8F9FA; border-top: 1px solid #EAEAEA;
}
.chatbot-footer form { display: flex; }

.chatbot-footer input {
    flex-grow: 1; border: 1px solid #CCCCCC; border-radius: 5px;
    padding: 8px; margin-right: 5px;
}

.chatbot-footer button {
    background-color: #4D626C;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 8px 12px;
    cursor: pointer;
}

.chatbot-footer button:hover { background-color: #1E262B; }

/* Cambiar la posicion del boton de accsibilidad*/
.userway_buttons_wrapper {
	bottom: 66px !important;
}

@media (min-width: 1200px) {
	.atencion-fab {
	    width: 64px;
	    height: 64px;
	}
	
	.atencion-fab img {
    	width: 64px;
    	height: 64px;
	}
	
	.userway_buttons_wrapper {
		bottom: 86px !important;
	}
}

/* Contenedor para la vista de sugerencias */
.suggestion-form-container {
    padding: 10px;
    height: 340px;
    display: flex;
    flex-direction: column;
}

.suggestion-form-container p {
    font-size: 14px;
    color: #666;
    margin: 0 0 15px 0;
    text-align: center;
}

.suggestion-form-container textarea {
    flex-grow: 1;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px;
    font-size: 14px;
    resize: none;
    margin-bottom: 15px;
}

.suggestion-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.suggestion-actions button {
    border: none;
    padding: 10px 15px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}

.suggestion-actions .btn-primary {
    background-color: #8F141B; color: white;
}

.suggestion-actions .btn-primary:hover {
    background-color: #5C0E12;
}

.suggestion-actions .btn-primary:disabled {
    background-color: #E3C5C6; cursor: not-allowed;
}