/* ==========================================================================
   Estilos Públicos para Mi Aula - VERSIÓN CON AJUSTES FINALES DE DISEÑO
   ========================================================================== */

/* --- Variables de Diseño --- */
:root {
    --miaula-primary-color: #12a19a;
    --miaula-secondary-color: #f5a22a;
    --miaula-accent-color: #dd1a21;
    --miaula-grey-color: #888888;
    --miaula-light-grey-color: #f0f0f0;
    --miaula-background-color: #f9f9f9;
    --miaula-card-background: #ffffff;
    --miaula-text-color: #444444;
    --miaula-heading-color: #222222;
    --miaula-border-color: #e0e0e0;
    --miaula-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    --miaula-border-radius: 8px;
    --miaula-font-body: 'Didact Gothic', sans-serif;
    --miaula-font-heading: 'Quicksand', sans-serif;
}

/* --- Estilos Generales --- */
.miaula-container {
    max-width: 900px; margin: 20px auto; padding: 15px;
    font-family: var(--miaula-font-body); color: var(--miaula-text-color);
    display: flex; flex-direction: column; gap: 25px;
}
.miaula-card {
    background-color: var(--miaula-card-background);
    border-radius: var(--miaula-border-radius);
    box-shadow: var(--miaula-shadow);
    padding: 20px 25px; border: 1px solid var(--miaula-border-color);
}
.miaula-card h3, .miaula-card h4 {
    font-family: var(--miaula-font-heading); color: var(--miaula-heading-color);
    margin-top: 0; margin-bottom: 20px;
    border-bottom: 2px solid var(--miaula-primary-color); padding-bottom: 10px;
}
.miaula-card h5 {
    font-family: var(--miaula-font-heading); color: var(--miaula-heading-color);
    margin-top: 0; margin-bottom: 15px;
}

/* --- Formularios --- */
.miaula-form { display: flex; flex-direction: column; gap: 15px; }
.miaula-form .form-field { display: flex; flex-direction: column; }
.miaula-form input[type="text"], .miaula-form textarea, .miaula-form select, .selector-alumno {
    padding: 12px; border: 1px solid var(--miaula-border-color);
    border-radius: var(--miaula-border-radius); font-family: var(--miaula-font-body);
    font-size: 16px; transition: border-color 0.3s, box-shadow 0.3s;
}
.miaula-form input[type="text"]:focus, .miaula-form textarea:focus, .miaula-form select:focus, .selector-alumno:focus {
    outline: none; border-color: var(--miaula-primary-color);
    box-shadow: 0 0 0 3px rgba(18, 161, 154, 0.2);
}
.miaula-form textarea { resize: vertical; min-height: 120px; }

/* --- Checkbox Corregido --- */
.form-field-checkbox {
    flex-direction: row !important; align-items: center; gap: 10px;
}
.form-field-checkbox input[type="checkbox"] { width: auto; }
.form-field-checkbox label { margin-bottom: 0; font-weight: normal; }

/* --- Botón de Subida de Archivos Corregido --- */
input[type="file"] { display: none; }
.file-upload-button {
    background-color: var(--miaula-light-grey-color); color: var(--miaula-text-color);
    border: 1px solid var(--miaula-border-color); padding: 12px 20px;
    border-radius: var(--miaula-border-radius); cursor: pointer; text-align: center;
    font-family: var(--miaula-font-heading); font-weight: bold; transition: background-color 0.3s;
}
.file-upload-button:hover { background-color: #dddddd; }
.attachment-rules { font-size: 12px; color: var(--miaula-grey-color); margin-top: 5px; }

/* --- Botones Específicos --- */
.miaula-form button[type="submit"], .toggle-perfil-button, .search-toggle-btn, .date-preset-btn {
    padding: 12px 20px; border: none; border-radius: var(--miaula-border-radius);
    font-family: var(--miaula-font-heading); font-size: 16px; font-weight: bold;
    cursor: pointer; transition: background-color 0.3s, transform 0.2s, border-color 0.3s;
}
.miaula-form button[type="submit"]:hover, .toggle-perfil-button:hover { transform: translateY(-2px); }

/* Botón de Enviar (tamaño corregido) */
.miaula-form button[type="submit"] {
    background-color: var(--miaula-primary-color); color: white;
    width: auto; align-self: flex-start;
}
.miaula-form button[type="submit"]:hover { background-color: #108a82; }

/* Botón Ver/Ocultar Perfil */
.toggle-perfil-button {
    background-color: var(--miaula-secondary-color); color: white;
    display: inline-block; width: auto; margin-bottom: 20px;
}
.toggle-perfil-button:hover { background-color: #e09324; }

/* --- Perfil del Alumno (MODIFICADO) --- */
.perfil-alumno-content { display: none; padding-top: 20px; border-top: 1px solid var(--miaula-border-color); }
.perfil-details { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 20px; }
.perfil-foto img { border-radius: 50%; object-fit: cover; border: 4px solid var(--miaula-primary-color); }
.perfil-info { flex-grow: 1; }
/* MODIFICACIÓN 1: Pone en verde las etiquetas de los datos del alumno */
.perfil-info p strong {
    color: var(--miaula-primary-color);
}
.tutor-info {
    border-left: 4px solid var(--miaula-secondary-color);
    padding: 15px; margin-top: 15px; background-color: #fdfaf5;
}
.tutor-info p { margin: 0 0 8px 0; }

/* --- Buscador (MODIFICADO) --- */
.search-form { gap: 20px; }
.search-toggles { display: flex; flex-wrap: wrap; gap: 10px; }
.search-fields { display: flex; flex-wrap: wrap; gap: 10px; }
.search-fields input { flex-grow: 1; }
/* MODIFICACIÓN 2.1: Contenedor para alinear botones de acción del buscador */
.search-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.search-toggle-btn, .date-preset-btn {
    background-color: var(--miaula-light-grey-color); color: var(--miaula-text-color);
    border: 1px solid var(--miaula-border-color);
}
.search-toggle-btn:hover, .date-preset-btn:hover {
    background-color: var(--miaula-primary-color); color: white;
}
.search-toggle-btn.active {
    background-color: var(--miaula-secondary-color); color: white; border-color: var(--miaula-secondary-color);
}
/* MODIFICACIÓN 2.2: Estilo para el botón de fecha activo (naranja) */
.date-preset-btn.active-preset {
    background-color: var(--miaula-secondary-color);
    color: white;
    border-color: var(--miaula-secondary-color);
}
.date-preset-btn[data-range="clear"] {
    background-color: var(--miaula-grey-color); color: white;
}
.date-preset-btn[data-range="clear"]:hover { background-color: #666; }
#miaula-search-form button[type="submit"] {
    align-self: center;
}

/* --- Resultados y Listas (Link Editar Corregido) --- */
.historical-report {
    padding: 15px; margin-bottom: 15px; border: 1px solid var(--miaula-border-color);
    border-left: 5px solid var(--miaula-primary-color); border-radius: var(--miaula-border-radius);
    background-color: #fdfdfd;
}
.report-title { display: flex; justify-content: space-between; align-items: center; }
.edit-report-link {
    font-size: 12px; font-weight: bold; text-decoration: none;
    background-color: var(--miaula-light-grey-color); color: var(--miaula-text-color);
    padding: 5px 10px; border-radius: 15px; border: 1px solid var(--miaula-border-color);
    transition: background-color 0.3s, color 0.3s;
}
.edit-report-link:hover { background-color: var(--miaula-secondary-color); color: white; }

/* --- Paginación (NUEVO) --- */
/* MODIFICACIÓN 3: Estilos de paginación completamente nuevos */
.miaula-pagination {
    margin-top: 20px;
    margin-bottom: 40px; /* Más espacio inferior */
    text-align: center;
}
.miaula-pagination .page-numbers {
    padding: 10px 15px; /* Más cuadrados */
    margin: 0 4px;
    border: 1px solid var(--miaula-border-color);
    border-radius: 0; /* Sin bordes redondeados */
    text-decoration: none;
    color: var(--miaula-primary-color);
    transition: background-color 0.3s, color 0.3s;
    font-weight: bold;
}
.miaula-pagination .page-numbers:hover,
.miaula-pagination .page-numbers.current {
    background-color: var(--miaula-primary-color);
    color: white;
    border-color: var(--miaula-primary-color);
}

/* --- Hilo de Conversación (MODIFICADO) --- */
.conversation-thread { display: flex; flex-direction: column; gap: 15px; }
.mensaje-item { padding: 15px; border-radius: var(--miaula-border-radius); max-width: 80%; }
.mensaje-recibido { background-color: #e9e9eb; align-self: flex-start; }
.mensaje-enviado { background-color: #dcf8c6; align-self: flex-end; }
/* MODIFICACIÓN 4.1: Cambia el layout del header del mensaje */
.mensaje-header {
    display: flex;
    flex-direction: column; /* Apila nombre y fecha */
    margin-bottom: 8px;
}
/* MODIFICACIÓN 4.2: Estilos para el nombre del remitente y alineación */
.mensaje-remitente {
    font-weight: bold;
    font-size: 16px;
}
.mensaje-enviado .mensaje-header {
    align-items: flex-end; /* Alinea a la derecha para los enviados */
}
.mensaje-recibido .mensaje-header {
    align-items: flex-start; /* Alinea a la izquierda para los recibidos */
}
.mensaje-fecha { font-size: 12px; color: #666; }
.mensaje-adjuntos { margin-top: 10px; padding-top: 10px; border-top: 1px solid #ccc; }

/* --- Responsividad --- */
@media (max-width: 768px) {
    .miaula-container { padding: 10px; }
    .miaula-card { padding: 15px; }
    .perfil-details { flex-direction: column; align-items: center; text-align: center; }
    .mensaje-item { max-width: 95%; }
}