/* --- Estilos Globales y Tipografía --- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

body {
    font-family: 'Poppins', sans-serif;
    background-color: #0a192f;
    color: #ccd6f6;
    margin: 0;
    padding: 0 20px 40px 20px;
    min-height: 100vh;
}

/* --- Header y Navegación --- */
.main-header {
    background-color: #0a192f;
    padding: 15px 40px;
    border-bottom: 1px solid #233554;
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo-svg {
    height: 40px; 
    width: auto;  
    min-width: 150px; 
    color: #ccd6f6;  
}

.main-nav a {
    color: #ccd6f6;
    text-decoration: none;
    font-weight: 600;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.main-nav a:hover {
    color: #64ffda;
    border-color: #64ffda;
}

/* --- Contenedor Principal Unificado --- */
.main-container {
    width: 100%;
    max-width: 800px; /* Limita el ancho y centra el contenido */
    background-color: #112240;
    border-radius: 12px;
    box-shadow: 0 10px 30px -15px rgba(2, 12, 27, 0.7);
    padding: 40px;
    margin: 40px auto;
}

/* --- Estilos Comunes de Formulario --- */
h1, h2 {
    color: #ffffff;
    text-align: center;
    font-size: 2.5em;
    margin-bottom: 10px;
}

p.intro {
    text-align: center;
    font-size: 1.2em;
    color: #8892b0;
    margin-bottom: 40px;
}

label, label.section-title {
    display: block;
    margin-bottom: 15px;
    font-weight: 600;
    font-size: 1.3em;
    color: #ccd6f6;
}

input, select, textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 20px;
    background-color: #0a192f;
    border: 1px solid #233554;
    border-radius: 4px;
    color: #ffffff;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: #64ffda;
}

button {
    width: 100%;
    padding: 15px;
    border: 1px solid #64ffda;
    border-radius: 4px;
    background-color: #64ffda;
    color: #0a192f;
    font-size: 1.2em;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

button:hover {
    background-color: transparent;
    color: #64ffda;
}

button:disabled {
    background-color: #233554;
    border-color: #233554;
    color: #8892b0;
    cursor: not-allowed;
}

/* --- index.php --- */
#step-2, #new-user-step { display: none; }
.client-name { color: #64ffda; }
.radio-options-container { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.radio-option { flex: 1; border: 2px solid #233554; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; padding: 20px; position: relative; }
.radio-option:hover { border-color: #64ffda; background-color: rgba(100, 255, 218, 0.1); }
.radio-option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.radio-content { display: flex; flex-direction: column; align-items: center; gap: 15px; color: #ccd6f6; font-weight: 600; font-size: 1.1em; text-align: center; }
.radio-option input[type="radio"]:checked + .radio-content { color: #64ffda; }

/* --- chat.php --- */
.chat-header { padding: 20px; background-color: #0a192f; border-bottom: 1px solid #233554; border-radius: 8px 8px 0 0; }
.chat-header h2 { margin: 0; }
.user-info { text-align: center; color: #8892b0; margin-top: 10px; }
.user-info span { color: #ccd6f6; font-weight: 600; }
.chat-body { padding: 20px; flex-grow: 1; }
#chat-messages { height: 40vh; overflow-y: auto; border: 1px solid #233554; padding: 10px; margin-bottom: 20px; border-radius: 4px; display: flex; flex-direction: column; }
.message { margin-bottom: 10px; padding: 8px 12px; border-radius: 15px; max-width: 80%; line-height: 1.4; }
.user-message { background-color: #64ffda; color: #0a192f; align-self: flex-end; margin-left: auto; }
.ai-message { background-color: #233554; color: #ccd6f6; align-self: flex-start; }
.chat-footer { padding: 20px; border-top: 1px solid #233554; }
#chat-form { display: flex; gap: 10px; }
#chat-input { flex-grow: 1; }
#chat-submit { padding: 12px 20px; }
#finalize-button { border: 1px solid #ff6b6b; color: #ff6b6b; background-color: transparent; }
#finalize-button:hover { background-color: rgba(255, 107, 107, 0.1); }

/* --- agendar-cita.php --- */
.success-container { display: none; text-align: center; }
.success-container svg { color: #64ffda; margin-bottom: 20px; }
.date-time-container { display: flex; flex-wrap: wrap; gap: 40px; margin-bottom: 40px; }
.calendar-container { flex: 1.5; min-width: 300px; }
.time-slots-container { flex: 1; min-width: 250px; display: flex; flex-direction: column; }
.time-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-height: 300px; overflow-y: auto; padding-right: 10px; }
.time-slot { padding: 12px; border: 1px solid #233554; border-radius: 4px; text-align: center; cursor: pointer; transition: all 0.2s ease; }
.time-slot:hover { border-color: #64ffda; color: #64ffda; }
.time-slot.selected { background-color: #64ffda; color: #0a192f; font-weight: 600; border-color: #64ffda; }
.time-slot.disabled { background-color: #1a2c47; border-color: #1a2c47; color: #4a5c78; cursor: not-allowed; }
.reason-container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; margin-bottom: 40px; }
.reason-option { flex: 1; min-width: 200px; border: 2px solid #233554; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; padding: 20px; text-align: center; }
.reason-option.selected, .reason-option:hover { border-color: #64ffda; background-color: rgba(100, 255, 218, 0.1); }
.reason-option input[type="radio"] { display: none; }
.reason-content { display: flex; flex-direction: column; align-items: center; gap: 15px; color: #ccd6f6; font-weight: 600; }
.reason-option.selected .reason-content { color: #64ffda; }
textarea:focus { outline: none; border-color: #64ffda; }
input[type="file"] { border: 1px dashed #233554; padding: 20px; text-align: center; width: 100%; box-sizing: border-box; }
input#meeting-date { background-color: #0a192f; border: 1px solid #233554; color: #ffffff; border-radius: 4px; font-family: 'Poppins', sans-serif; font-size: 1em; width: 100%; padding: 12px; box-sizing: border-box; }
#validation-message { color: #ff6b6b; text-align: center; margin-bottom: 20px; display: none; }

/* --- soporte-tecnico.php --- */
.widget-container { margin-top: 20px; min-height: 500px; }

/* --- chat.php --- */
#chat-form {
    display: flex;
    align-items: flex-end; /* Alinea los elementos al final (abajo) */
    gap: 10px;
}

#chat-input {
    flex-grow: 1; /* Ocupa el espacio sobrante */
    padding: 12px;
    background-color: #0a192f;
    border: 1px solid #233554;
    border-radius: 8px; /* Bordes más redondeados */
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 1em;
    resize: none; /* Evita que el usuario pueda cambiar el tamaño manualmente */
    overflow-y: hidden; /* Oculta la barra de scroll hasta que sea necesaria */
    min-height: 24px; /* Altura de una sola línea */
    max-height: 150px; /* Límite de 5-6 líneas */
    box-sizing: border-box;
    margin-bottom: 0; /* Resetea el margen de los inputs */
}

/* 3. Estilos para el nuevo botón de enviar (más pequeño) */
#chat-submit {
    width: 50px; /* Ancho fijo */
    height: 50px; /* Altura fija (igual al ancho) */
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0; /* Evita que el botón se encoja */
    background-color: #64ffda; /* Color de acento */
    border-color: #64ffda;
    border-radius: 50%; /* Lo hace circular */
}

#chat-submit:hover {
    background-color: #0a192f; /* Fondo oscuro al pasar el ratón */
    color: #64ffda; /* Icono en color de acento */
}

/* 4. Estilo para el icono SVG dentro del botón */
#chat-submit svg {
    width: 24px;
    height: 24px;
    /* Pequeña rotación para que apunte hacia arriba y a la derecha */
    transform: rotate(15deg) translateX(1px) translateY(-1px);
}

/* --- ESTILOS PARA LA FINALIZACIÓN DEL CHAT --- */

/* 1. Estilo para el último mensaje del Asistente */
.ai-message.ai-message-final {
    background-color: #2a4a75; /* Un azul más destacado */
    border: 1px solid #64ffda;
    box-shadow: 0 0 15px rgba(100, 255, 218, 0.2);
}

/* 2. Estilo para el botón de finalizar cuando se activa */
#finalize-button.finalize-button-highlight {
    background-color: #ff6b6b; /* Color rojo sólido */
    color: #0a192f; /* Texto azul oscuro (color de fondo) */
    font-weight: 700;
    border-color: #ff6b6b;
}
#finalize-button.finalize-button-highlight:hover {
    background-color: #e05a5a; /* Un rojo un poco más oscuro al pasar el ratón */
}

/* 3. Estilo para campos de chat deshabilitados */
#chat-input:disabled {
    background-color: #233554;
    cursor: not-allowed;
}
#chat-submit:disabled {
    background-color: transparent;
    border-color: #233554;
    color: #8892b0;
    cursor: not-allowed;
}