/* ========================================================= VARIABLES GLOBALES ========================================================= */ :root { --app-font: 'Quicksand', system-ui, sans-serif; /* Fuente más redondita y amable */ --bg: #eef3f9; /* Color de fondo principal de la aplicación */ --bg-2: #f8fbff; /* Color secundario del degradado de fondo */ --panel: rgba(255, 255, 255, 0.94); /* Fondo semitransparente de tarjetas */ --panel-strong: #e7eef8; /* Fondo alternativo más fuerte */ --border: #d3deec; /* Color general de bordes */ --text: #172334; /* Color principal de texto */ --muted: #607086; /* Color secundario de texto */ --primary: #2f6fed; /* Azul principal de botones y focos */ --primary-hover: #245ad0; /* Azul al pasar el ratón */ --success: #119669; /* Verde para estados positivos */ --success-bg: rgba(17, 150, 105, 0.10); /* Fondo verde translúcido */ --danger-bg: #fff1f1; /* Fondo rojo suave */ --danger-text: #b42318; /* Color rojo de error */ --required: #d92d20; /* Color de elementos obligatorios */ --shadow: none; /* Sombra global desactivada */ } /* ========================================================= RESET GENERAL ========================================================= */ * { box-sizing: border-box; /* Hace que padding y border no aumenten el tamaño real */ } html, body { width: 100%; /* Hace que ocupen todo el ancho */ height: 100%; /* Hace que ocupen todo el alto */ margin: 0; /* Elimina márgenes automáticos del navegador */ overflow: hidden; /* Elimina scroll global horizontal y vertical */ } body { font-family: var(--app-font); /* Usa la fuente principal definida en :root */ color: var(--text); /* Aplica color principal de texto */ background: #f7f9fc; /* Fondo blanco puro en modo día */ } /* ========================================================= LAYOUT PRINCIPAL ========================================================= */ .app-shell { width: 100vw; /* Hace que la aplicación ocupe todo el ancho de la pantalla */ height: 100vh; /* Hace que la aplicación ocupe todo el alto visible */ overflow: hidden; /* Evita scroll general */ } .main { height: 100vh; /* Hace que el contenido principal ocupe toda la altura */ padding: 12px; /* Espaciado interior general */ overflow: hidden; /* Evita scroll principal */ display: flex; /* Usa flexbox vertical */ flex-direction: column; /* Coloca elementos uno debajo de otro */ gap: 10px; /* Separación vertical entre bloques */ } /* ========================================================= BOTONES MODULO ========================================================= */ .module-selector { display: grid; /* Grid vertical */ gap: 5px; /* Separación */ } .module-btn { width: 100%; /* Ocupa todo el ancho */ min-height: 34px; /* Altura mínima */ padding: 6px 8px; /* Espaciado interior */ border: 1px solid #b9cdef; /* Borde */ border-radius: 11px; /* Bordes redondos */ background: #edf4ff; /* Fondo azul claro */ color: #2f5f9f; /* Texto azul */ font-size: 11px; /* Tamaño pequeño */ font-weight: 800; /* Texto grueso */ text-align: center; /* Texto centrado */ text-transform: uppercase; /* Texto en mayúsculas */ cursor: pointer; /* Cursor mano */ } .module-btn-active { background: #c8ddfa; /* Fondo activo */ border-color: #5f8fd0; /* Borde activo */ color: #183f72; /* Texto activo */ } /* ========================================================= TARJETAS GENERALES ========================================================= */ .card, .side-panel { background: var(--panel); /* Fondo blanco translúcido */ border: 1px solid var(--border); /* Borde suave */ border-radius: 18px; /* Bordes redondeados */ padding: 12px; /* Espaciado interior */ overflow: hidden; /* Evita que el contenido sobresalga */ min-height: 0; /* Permite que flex/grid reduzcan altura */ } .card-header { display: flex; /* Flex horizontal */ align-items: center; /* Centrado vertical */ justify-content: space-between; /* Separación máxima */ gap: 10px; /* Espaciado */ margin-bottom: 8px; /* Separación inferior */ } .card-header h2 { margin: 0; /* Elimina márgenes */ font-size: 16px; /* Tamaño título */ text-transform: uppercase; /* Mayúsculas */ letter-spacing: .02em; /* Espaciado letras */ } /* ========================================================= HERO SUPERIOR ========================================================= */ .hero { display: flex; /* Organiza el título y estado horizontalmente */ align-items: center; /* Centra verticalmente */ justify-content: space-between; /* Separa izquierda y derecha */ padding: 0 4px; /* Añade separación lateral suave */ min-height: 72px; /* Da altura consistente al header */ flex-shrink: 0; /* Evita compresión */ } .hero h1 { margin: 0; /* Elimina márgenes */ font-size: 40px; /* Tamaño grande */ line-height: 1.02; /* Compacta altura */ letter-spacing: .01em; /* Espaciado */ font-weight: 900; /* Muy grueso */ } /* ========================================================= TAGS ========================================================= */ .tag { border: 1px solid var(--border); /* Borde */ background: #f4f7fb; /* Fondo claro */ color: var(--muted); /* Texto gris */ padding: 4px 8px; /* Espaciado */ border-radius: 999px; /* Forma píldora */ font-size: 10px; /* Texto pequeño */ font-weight: 800; /* Texto grueso */ text-transform: uppercase; /* Mayúsculas */ } .tag-success { color: var(--success); /* Texto verde */ background: var(--success-bg); /* Fondo verde */ border-color: rgba( 17, 150, 105, 0.20 ); /* Borde verde */ } /* ========================================================= COLUMNAS PRINCIPALES ========================================================= */ .dashboard-columns { display: grid; /* Usa grid para dividir ambas columnas */ grid-template-columns: 0.8fr 1.2fr; /* Aprovecha mejor la pantalla ahora que no existe sidebar */ gap: 10px; /* Separación */ flex: 1; /* Ocupa espacio restante */ min-height: 0; /* Permite reducir altura */ overflow: hidden; /* Sin scroll general */ } .dashboard-column { display: flex; /* Flex vertical */ flex-direction: column; /* Tarjetas una debajo de otra */ gap: 10px; /* Separación */ min-height: 0; /* Ajuste correcto */ overflow: hidden; /* Evita scroll general */ } /* ========================================================= TARJETAS ESPECIFICAS ========================================================= */ .right-column .card:first-child { /* Tarjeta de trimestre y actividades */ flex: 1; /* Ocupa todo el alto disponible de la columna derecha */ min-height: 0; /* Permite que la tabla se adapte bien */ } /* ========================================================= FORMULARIOS ========================================================= */ .field { min-width: 0; /* Evita desbordamientos */ } .field-top { margin-top: 10px; /* Separación superior */ } .compact-field { max-width: 360px; /* Anchura máxima */ } label { display: block; /* Línea propia */ margin-bottom: 4px; /* Separación */ color: var(--muted); /* Color gris */ font-size: 12px; /* Tamaño */ font-weight: 800; /* Negrita */ text-transform: uppercase; /* Mayúsculas */ } input, select, textarea { width: 100%; /* Ancho completo */ padding: 9px 10px; /* Espaciado */ border-radius: 10px; /* Bordes redondos */ border: 1px solid var(--border); /* Borde */ background: white; /* Fondo */ color: var(--text); /* Texto */ outline: none; /* Sin outline */ font-size: 13px; /* Tamaño */ font-family: inherit; /* Hereda fuente */ } input, select { height: 37px; /* Altura uniforme */ } textarea { resize: none; /* Impide que el usuario cambie manualmente el tamaño del textarea */ min-height: 92px; /* Hace el cuadro de comentario más cómodo para escribir */ max-height: 92px; /* Mantiene una altura estable visualmente */ overflow-y: auto; /* Permite scroll interno si el comentario es largo */ line-height: 1.4; /* Mejora la legibilidad del texto */ } input:focus, select:focus, textarea:focus { border-color: var(--primary); /* Borde azul */ } /* ========================================================= BOTONES ========================================================= */ .btn { border: none; /* Sin borde */ border-radius: 14px; /* Bordes redondos */ cursor: pointer; /* Cursor mano */ font-weight: 900; /* Texto grueso */ font-size: 13px; /* Tamaño */ text-transform: uppercase; /* Mayúsculas */ min-height: 38px; /* Altura mínima */ padding: 9px 12px; /* Espaciado */ transition: .2s; /* Animación suave */ } .btn-calculate { background: #f4f8fe; /* Fondo azul muy claro */ color: #2f5f9f; /* Texto azul */ border: 1px solid #c9d8ee; /* Borde azul suave */ } .btn-calculate:hover { background: #e8f1ff; /* Fondo azul claro al pasar el ratón */ color: #234f86; /* Texto azul un poco más intenso */ border-color: #a9c3e8; /* Borde azul algo más marcado */ } .btn-secondary { background: #f4f8fe; /* Fondo claro */ color: #2f5f9f; /* Texto azul */ border: 1px solid #c9d8ee; /* Borde */ } /* ========================================================= LISTA ALUMNOS ========================================================= */ .students-list { display: grid; /* Organiza las tarjetas de alumnado en vertical */ gap: 8px; /* Deja separación entre alumnos */ overflow-y: auto; /* Permite scroll solo dentro del listado de alumnos */ overflow-x: hidden; /* Evita scroll horizontal dentro del listado */ min-height: 0; /* Permite que el listado se adapte a la altura disponible */ max-height: 100%; /* Impide que el listado crezca más que su tarjeta */ } .student-card { border: 1px solid var(--border); /* Borde */ background: #f8fafc; /* Fondo */ border-radius: 14px; /* Bordes */ padding: 10px; /* Espaciado */ display: grid; /* Grid */ grid-template-columns: 1fr auto; /* Nombre + botón */ gap: 6px; /* Separación */ align-items: start; /* Arriba */ } .student-name { font-weight: 900; /* Texto grueso */ } .student-condition { font-size: 12px; /* Tamaño */ color: var(--muted); /* Gris */ margin-top: 3px; /* Separación */ } /* ========================================================= TABLA NOTAS ========================================================= */ .table-wrap { margin-top: 0; /* Evita margen duplicado porque term-actions ya separa la tabla */ overflow: auto; /* Permite scroll SOLO dentro de la tabla */ border: 1px solid var(--border); /* Añade borde suave */ border-radius: 14px; /* Redondea esquinas */ min-height: 0; /* Permite reducción correcta dentro del flex */ flex: 1; /* Hace que ocupe el espacio disponible */ display: flex; /* Permite que la tabla interna se adapte correctamente */ } .grades-table { width: 100%; /* Anchura */ border-collapse: collapse; /* Bordes unidos */ background: white; /* Fondo */ } .grades-table th, .grades-table td { border-bottom: 1px solid var(--border); /* Añade línea separadora inferior */ border-right: 1px solid #e3ebf5; padding: 8px; /* Añade espacio interno */ text-align: center; /* Centra el texto de cabeceras y celdas */ font-size: 12px; /* Define el tamaño del texto */ vertical-align: middle; /* Centra el contenido verticalmente */ } .grades-table th { background: #f4f7fb; /* Fondo */ color: var(--muted); /* Texto */ text-transform: uppercase; /* Mayúsculas */ font-weight: 900; /* Negrita */ position: sticky; /* Cabecera fija */ top: 0; /* Pegada arriba */ z-index: 5; /* Prioridad visual */ } .final-cell { font-weight: 900; /* Negrita */ color: var(--success); /* Verde */ font-size: 15px; /* Tamaño */ } .grades-table input { text-align: center; /* Centra el número dentro de cada casilla de nota */ } .grades-table td:first-child, .grades-table th:first-child { text-align: center; /* Centra también la columna del alumnado */ } /* ========================================================= GRAFICA ========================================================= */ .chart { height: 100%; /* Ocupa toda la altura */ display: flex; /* Flex */ align-items: end; /* Barras abajo */ gap: 10px; /* Separación */ padding: 15px; /* Espaciado */ border: 1px solid var(--border); /* Borde */ border-radius: 14px; /* Bordes */ background: #f8fafc; /* Fondo */ overflow-x: auto; /* Scroll horizontal interno */ overflow-y: hidden; /* Sin scroll vertical */ } .bar-wrap { /* Columna completa de cada alumno en la gráfica de grupo */ min-width: 80px; /* Da anchura mínima */ height: 100%; /* Ocupa toda la altura */ display: grid; /* Divide nota, barra y nombre */ grid-template-rows: 22px 1fr 18px; /* Nota arriba, barra centro, nombre abajo */ justify-items: center; /* Centra horizontalmente */ min-height: 0; /* Evita desbordes */ } .bar-value { /* Nota superior */ height: 22px; /* Reserva altura fija */ display: flex; /* Centra el texto */ align-items: center; /* Centra verticalmente */ justify-content: center; /* Centra horizontalmente */ font-size: 12px; /* Tamaño nota */ font-weight: 900; /* Negrita */ margin: 0; /* Elimina margen que desalineaba */ } .bar-zone { /* Zona fija donde vive la barra */ width: 100%; /* Ocupa todo el ancho */ height: 100%; /* Ocupa toda la altura disponible */ display: flex; /* Permite apoyar la barra */ align-items: flex-end; /* Apoya todas las barras abajo */ justify-content: center; /* Centra la barra */ } .bar { /* Barra de evolución del grupo */ width: 34px; /* Ancho barra */ background: #8bb4f5; /* Azul suave */ border-radius: 10px 10px 0 0; /* Redondeo superior */ min-height: 4px; /* Muestra notas bajas */ } .bar-label { /* Nombre inferior */ height: 18px; /* Altura fija */ line-height: 18px; /* Alinea texto */ font-size: 11px; /* Tamaño nombre */ color: var(--muted); /* Color gris */ max-width: 78px; /* Limita ancho */ overflow: hidden; /* Oculta exceso */ text-overflow: ellipsis; /* Puntos suspensivos */ white-space: nowrap; /* Sin salto de línea */ margin: 0; /* Evita desplazamientos */ } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 980px) { .app-shell { grid-template-columns: 1fr; /* Hace que el sidebar pase arriba en móvil */ } .dashboard-columns { grid-template-columns: 1fr; /* Convierte las columnas en una sola columna vertical */ } .hero h1 { font-size: 30px; /* Reduce el tamaño del título en pantallas pequeñas */ } } /* ========================================================= AJUSTES FINALES LAYOUT ========================================================= */ .dashboard-column > .card { display: flex; /* Aplica flex solo a las tarjetas de las columnas principales */ flex-direction: column; /* Ordena el contenido interno de esas tarjetas en vertical */ } .term-actions { /* Barra de controles del bloque Trimestre i activitats */ display: grid; /* Organiza selector y botones en una misma fila */ grid-template-columns: 200px 1fr auto auto; /* Hace el selector igual de compacto y empuja botones a la derecha */ gap: 10px; /* Mantiene separación entre selector y botones */ align-items: center; /* Alinea verticalmente el selector y los botones en el centro */ flex-shrink: 0; /* Evita que esta fila se comprima */ margin-top: -9px; /* Sube la fila para igualarla con Trimestre i activitats */ margin-bottom: 12px; /* Separa los controles de la tabla inferior */ } .chart { min-height: 0; /* Permite que la gráfica se adapte correctamente */ } .modal { overflow: hidden; /* Evita scroll del fondo cuando el modal está abierto */ } .delete-btn { width: 32px; /* Define un tamaño fijo para el botón de borrar */ height: 32px; /* Define la altura fija del botón */ border: none; /* Elimina el borde feo del navegador */ border-radius: 12px; /* Redondea el botón */ background: var(--danger-bg); /* Aplica fondo rojo suave */ color: var(--danger-text); /* Aplica color rojo al icono */ font-size: 18px; /* Aumenta el tamaño de la X */ font-weight: 900; /* Hace la X más visible */ cursor: pointer; /* Muestra cursor de botón */ display: grid; /* Permite centrar la X */ place-items: center; /* Centra la X dentro del botón */ } .empty { /* Mensajes vacíos generales */ padding: 8px 18px; /* Menos altura para que no baje tanto */ color: var(--text); /* Color principal */ font-size: 14px; /* Tamaño cómodo */ line-height: 1.4; /* Separación correcta */ } .table-wrap .empty { /* Mensaje vacío dentro de la tabla */ padding: 16px 18px; /* Mantiene "Crea una clase" separado de las esquinas */ } .hidden { display: none; /* Oculta cualquier elemento que tenga la clase hidden */ } .modal { position: fixed; /* Coloca el modal fijo encima de toda la pantalla */ inset: 0; /* Hace que el modal ocupe toda la ventana */ background: rgba(15, 23, 42, 0.45); /* Añade fondo oscuro transparente */ display: grid; /* Permite centrar la ventana modal */ place-items: center; /* Centra el modal horizontal y verticalmente */ z-index: 9999; /* Coloca el modal por encima de toda la app */ } .modal.hidden { display: none; /* Mantiene oculto el modal cuando tiene la clase hidden */ } .picker-dialog-bg, .picker-dialog { /* Selector de Google Drive: se inserta fuera de nuestro control con su propio z-index, que quedaba por debajo del modal (z-index 9999) y aparecía tapado. */ z-index: 2147483647 !important; /* El z-index máximo posible en CSS, para que siempre quede por encima de cualquier modal de la app. */ } .modal-card { /* Modal general de la app */ max-width: 760px; /* Devuelve tamaño normal a todos los modales */ width: min(760px, 92vw); /* Hace que los modales normales no sean gigantes */ max-height: 86vh; /* Evita que el modal sea más alto que la pantalla */ overflow-y: auto; /* Permite scroll interno si el modal tiene mucho contenido */ background: white; /* Fondo blanco del modal */ border: 1px solid var(--border); /* Añade borde suave */ border-radius: 20px; /* Redondea las esquinas del modal */ padding: 18px; /* Añade espacio interior */ box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25); /* Añade sombra elegante */ } .modal-header { display: flex; /* Organiza título y botón cerrar en horizontal */ justify-content: space-between; /* Separa título y X */ align-items: center; /* Centra verticalmente ambos elementos */ gap: 12px; /* Añade separación interna */ margin-bottom: 16px; /* Separa la cabecera del contenido */ } .modal-header h2 { margin: 0; /* Elimina margen por defecto del título */ font-size: 20px; /* Define tamaño del título del modal */ text-transform: uppercase; /* Convierte el título en mayúsculas */ } #modalClose { width: 34px; /* Define ancho del botón cerrar */ height: 34px; /* Define alto del botón cerrar */ border: none; /* Elimina borde del navegador */ border-radius: 8px; /* Reduce el redondeo de la X para un aspecto más profesional */ background: var(--danger-bg); /* Fondo rojo suave */ color: var(--danger-text); /* Color rojo para la X */ font-size: 22px; /* Tamaño de la X */ font-weight: 900; /* Hace la X gruesa */ cursor: pointer; /* Muestra cursor de botón */ } .form-grid { display: grid; /* Organiza campos del modal en columnas */ grid-template-columns: 1fr 1fr; /* Crea dos columnas iguales */ gap: 12px; /* Añade separación entre campos */ } .duplicate-target-grid { /* Grid de Classe destí, Trimestre destí i Matèria destí del modal Duplicar activitat, los tres en la misma fila */ grid-template-columns: 1fr 1fr 1fr; } .modal-actions { display: flex; /* Coloca botones del modal en horizontal */ justify-content: flex-end; /* Alinea los botones a la derecha */ gap: 10px; /* Añade separación entre botones */ margin-top: 16px; /* Separa los botones del contenido */ } .notice { padding: 12px; /* Añade espacio interno */ border-radius: 14px; /* Redondea el aviso */ background: #f4f8fe; /* Fondo azul muy claro */ border: 1px solid var(--border); /* Borde suave */ color: var(--muted); /* Texto gris */ } .weight-row { display: grid; /* Organiza nombre y porcentaje */ grid-template-columns: 1fr 120px; /* Nombre flexible y campo fijo */ gap: 10px; /* Separación entre nombre e input */ align-items: center; /* Centra verticalmente */ margin-bottom: 10px; /* Separa cada actividad */ } .new-class-subject-row { display: flex; /* Coloca el input y los botones en línea */ gap: 8px; /* Separación entre input y botones */ align-items: center; /* Centra verticalmente */ margin-bottom: 8px; /* Separa cada fila de asignatura */ } .new-class-subject-row input { flex: 1; /* El campo de texto ocupa el espacio disponible */ height: 37px; /* Misma altura que el botón de eliminar para que no se vean descuadrados */ box-sizing: border-box; /* Incluye el borde y el padding dentro de la altura fijada */ } .new-class-subject-row .icon-btn { height: 37px; /* Misma altura que el input de la asignatura */ min-height: 37px; /* Evita que otras reglas globales lo agranden */ box-sizing: border-box; /* Incluye el borde dentro de la altura fijada */ flex-shrink: 0; /* Evita que el botón se comprima y pierda su forma cuadrada */ } .new-class-subject-input, .edit-class-subject-input { flex: 1; /* El campo de texto ocupa el espacio disponible */ } #btnSaveComment { margin-top: 4px; /* Reduce la separación para que el botón quepa dentro del box */ flex-shrink: 0; /* Evita que el botón se comprima */ width: 100%; /* Mantiene el botón ocupando todo el ancho disponible */ min-height: 38px; /* Mantiene altura suficiente para que el botón se lea bien */ background: #f4f8fe; /* Mismo fondo que el resto de botones */ color: #2f5f9f; /* Mismo color de texto */ border: 1px solid #c9d8ee; /* Mismo borde */ } #btnSaveComment:hover { background: #e8f1ff; /* Mismo hover que el resto */ color: #234f86; /* Mismo color hover */ border-color: #a9c3e8; /* Mismo borde hover */ } .hero-right { display: flex; /* Organiza estadísticas superiores */ align-items: center; /* Centra verticalmente */ } .top-stats { display: flex; /* Organiza estadísticas horizontalmente */ align-items: center; /* Centra verticalmente */ gap: 14px; /* Espaciado entre estadísticas */ } .mini-stat { display: flex; /* Organiza texto y número */ align-items: center; /* Centra verticalmente */ gap: 6px; /* Espaciado interno */ padding: 8px 12px; /* Espaciado interior */ border: 1px solid var(--border); /* Borde suave */ border-radius: 999px; /* Forma cápsula */ background: white; /* Fondo blanco */ } .mini-stat span { font-size: 12px; /* Tamaño texto */ color: var(--muted); /* Color gris */ } .mini-stat strong { font-size: 14px; /* Tamaño número */ color: var(--text); /* Color oscuro */ font-weight: 900; /* Número destacado */ } .student-follow-panel { display: flex; /* Organiza todo el contenido del seguimiento verticalmente */ flex-direction: column; /* Coloca todos los elementos uno debajo del otro */ gap: 8px; /* Reduce ligeramente la separación vertical entre bloques */ flex: 1 1 auto; /* Ocupa el espacio sobrante de la columna izquierda, después de Classe activa */ min-height: 0; /* Permite que se ajuste dentro del espacio disponible */ overflow: hidden; /* Evita que el contenido rompa el layout */ } .student-chart-section { display: flex; /* Organiza el contenido verticalmente */ flex-direction: column; /* Mantiene título y gráfica en columna */ gap: 8px; /* Añade separación interna */ } .student-chart { max-height: 230px; /* Limita la altura para que el panel completo siga cabiendo */ border: 1px solid var(--border); /* Añade borde suave */ border-radius: 16px; /* Redondea el contenedor */ background: #f8fafc; /* Fondo claro */ padding: 12px; /* Espacio interior */ display: flex; /* Organiza filas verticalmente */ flex-direction: column; /* Coloca una actividad debajo de otra */ gap: 10px; /* Separa actividades */ overflow-y: auto; /* Permite scroll interno si hay muchas actividades */ overflow-x: hidden; /* Evita scroll horizontal */ } .individual-row { display: grid; /* Divide la fila en nombre, gráfico y resultado */ grid-template-columns: 130px 1fr 78px; /* Define columnas compactas */ gap: 12px; /* Separa columnas */ align-items: center; /* Centra verticalmente */ padding: 10px; /* Espacio interior */ border: 1px solid var(--border); /* Borde de cada actividad */ border-radius: 14px; /* Redondea cada fila */ background: white; /* Fondo blanco */ } .individual-name { font-size: 12px; /* Tamaño del nombre */ font-weight: 900; /* Destaca la actividad */ color: var(--text); /* Color principal */ text-transform: uppercase; /* Mayúsculas */ overflow: hidden; /* Oculta texto sobrante */ text-overflow: ellipsis; /* Añade puntos suspensivos */ white-space: nowrap; /* Evita salto de línea */ } .individual-graph { display: flex; /* Organiza barra y escala */ flex-direction: column; /* Escala debajo */ gap: 5px; /* Separa barra y escala */ } .individual-track { position: relative; /* Permite colocar marcador de media */ height: 14px; /* Altura de la barra */ border-radius: 999px; /* Barra redondeada */ background: #e7eef8; /* Fondo de barra */ overflow: visible; /* Permite ver marcador */ } .individual-fill { height: 100%; /* Ocupa toda la altura */ border-radius: 999px; /* Relleno redondeado */ background: #3f7df1; /* Azul de nota individual */ } .individual-average-marker { position: absolute; /* Coloca marcador encima de la barra */ top: -5px; /* Lo hace sobresalir */ width: 4px; /* Anchura del marcador */ height: 24px; /* Altura del marcador */ border-radius: 999px; /* Marcador redondeado */ background: #119669; /* Verde de media */ transform: translateX(-50%); /* Centra el marcador */ } .individual-scale { display: flex; /* Coloca 0, 5 y 10 horizontalmente */ justify-content: space-between; /* Distribuye la escala */ font-size: 10px; /* Tamaño pequeño */ color: var(--muted); /* Color gris */ font-weight: 700; /* Hace la escala visible */ } .individual-result { display: flex; /* Organiza nota y media */ flex-direction: column; /* Nota arriba, media abajo */ align-items: flex-end; /* Alinea a la derecha */ } .individual-result strong { font-size: 24px; /* Nota grande */ font-weight: 900; /* Nota destacada */ color: var(--text); /* Color principal */ } .individual-result span { font-size: 10px; /* Media pequeña */ color: var(--success); /* Media en verde */ font-weight: 800; /* Destaca media */ } .student-history-section { /* Zona historial comentarios: altura natural, el scroll ahora lo hace todo el panel junto en .student-follow-body */ display: flex; /* Permite controlar el crecimiento interno */ flex-direction: column; /* Apila título e historial */ } .comment-history { /* Contenedor del historial de comentarios: altura natural, el scroll ahora lo hace todo el panel junto en .student-follow-body */ display: flex; /* Organiza comentarios verticalmente */ flex-direction: column; /* Un comentario debajo de otro */ gap: 8px; /* Separación entre comentarios */ } .history-item { padding: 10px 12px; /* Añade espacio interior */ border-radius: 12px; /* Redondea esquinas */ border: 1px solid var(--border); /* Añade borde suave */ background: #f8fafc; /* Fondo claro */ color: var(--text); /* Texto oscuro */ font-size: 13px; /* Tamaño cómodo de lectura */ line-height: 1.4; /* Mejora legibilidad */ } .section-title-row { display: flex; /* Organiza título y texto auxiliar */ align-items: center; /* Centra verticalmente */ justify-content: space-between; /* Separa extremos */ gap: 10px; /* Añade separación */ } .section-title-row h3 { margin: 0; /* Elimina márgenes */ font-size: 14px; /* Tamaño subtítulo */ text-transform: uppercase; /* Mayúsculas */ letter-spacing: .02em; /* Espaciado entre letras */ } .small-muted { font-size: 11px; /* Tamaño pequeño */ color: var(--muted); /* Color gris */ font-weight: 600; /* Peso medio */ } .student-follow-panel .field-top { flex-shrink: 0; /* Evita que el bloque de nuevo comentario se comprima */ } .student-follow-panel #btnSaveComment { flex-shrink: 0; /* Mantiene el botón siempre visible */ margin-top: 0; /* Elimina espacio innecesario entre textarea y botón */ } .student-top-row { /* Fila de controles del bloque Seguiment de l'alumne/a */ display: grid; /* Organiza alumno, condición, editar y borrar en una misma fila */ grid-template-columns: minmax(220px, 1fr) minmax(180px, 0.75fr) 38px 38px; /* Estrecha selector y condición para que entren editar y borrar */ gap: 8px; /* Reduce separación para que todo quepa en horizontal */ align-items: end; /* Alinea todos los controles por la parte inferior */ margin-top: -4px; /* Mantiene la fila subida */ } .student-select-field { margin: 0; /* Elimina márgenes extra */ } .student-condition-field { margin: 0; /* Elimina márgenes extra */ } .student-condition-field input { font-weight: 700; /* Hace más visible la condición */ color: var(--muted); /* Usa color gris elegante */ } .compact-hero { position: relative; /* Permite posicionar el título de forma absoluta */ display: flex; /* Organiza contenido horizontalmente */ align-items: flex-start; /* Coloca elementos arriba */ justify-content: space-between; /* Separa izquierda y derecha */ min-height: 74px; /* Da suficiente altura para selector y título */ padding: 0 4px; /* Añade pequeño margen lateral */ } .compact-hero h1 { position: absolute; /* Saca el título del flujo normal */ left: 50%; /* Lleva el título al centro horizontal */ transform: translateX(-50%); /* Centra exactamente el título */ top: 0; /* Lo coloca arriba */ margin: 0; /* Elimina márgenes */ font-size: 44px; /* Mantiene tamaño grande */ white-space: nowrap; /* Evita salto de línea */ text-align: center; /* Centra el texto */ } .top-class-tools { display: flex; /* Organiza selector y botón horizontalmente */ align-items: flex-end; /* Alinea el botón con la parte inferior del selector */ gap: 8px; /* Separa selector y botón */ z-index: 2; /* Mantiene visible el grupo sobre el título */ flex-shrink: 0; /* Evita que el grupo se comprima */ } .top-class-field { width: 190px; /* Hace el selector más compacto */ } .icon-btn { width: 40px; /* Define ancho cuadrado */ height: 40px; /* Define altura cuadrada */ border-radius: 14px; /* Redondea el botón */ border: 1px solid var(--border); /* Añade borde suave */ display: grid; /* Permite centrar el contenido */ place-items: center; /* Centra el símbolo + */ cursor: pointer; /* Muestra cursor de botón */ font-size: 24px; /* Hace visible el símbolo + */ font-weight: 900; /* Hace el símbolo grueso */ line-height: 1; /* Evita desajustes */ } .primary-icon-btn { background: #f4f8fe; /* Fondo azul muy claro */ color: #2f5f9f; /* Símbolo azul */ border: 1px solid #c9d8ee; /* Borde azul suave */ } .secondary-icon-btn { background: #f4f8fe; /* Fondo azul muy claro */ color: #2f5f9f; /* Símbolo azul */ border: 1px solid #c9d8ee; /* Borde azul suave */ } .card-header .icon-btn { width: 38px; /* Ajusta tamaño dentro de tarjetas */ height: 38px; /* Ajusta altura dentro de tarjetas */ flex-shrink: 0; /* Evita compresión */ } .compact-hero > .top-class-tools:first-of-type { /* Mantiene CLASSE ACTIVA pegado a la izquierda */ margin-right: auto !important; /* Empuja el título y usuario hacia sus posiciones correctas */ } /* Fin ajuste clase activa izquierda */ .activity-header-cell { display: flex; /* Organiza nombre y botón horizontalmente */ align-items: center; /* Centra verticalmente */ justify-content: center; /* Centra el contenido */ gap: 14px; /* Separa el nombre y la X */ } .activity-delete-btn { width: 34px; /* Hace el botón más visible */ height: 34px; /* Mantiene formato cuadrado */ border: 1px solid #f2b8b5; /* Añade borde rojo suave */ border-radius: 12px; /* Redondea esquinas como en la referencia */ background: #fff7f7; /* Fondo rojo muy claro */ color: #c5342d; /* Color rojo intenso para la X */ font-size: 20px; /* Hace la X más grande */ font-weight: 900; /* Hace la X gruesa */ cursor: pointer; /* Muestra cursor interactivo */ display: flex; /* Permite centrar contenido */ align-items: center; /* Centra verticalmente */ justify-content: center; /* Centra horizontalmente */ transition: all 0.15s ease; /* Suaviza hover */ flex-shrink: 0; /* Evita deformaciones */ } .activity-delete-btn:hover { background: #ffe0e0; /* Oscurece el fondo al pasar el ratón */ } .danger-icon-btn { background: #fff5f5; /* Fondo rojo muy claro */ color: #c5342d; /* Color rojo intenso */ border: 1px solid #f0b8b5; /* Añade borde rojo suave */ } .danger-icon-btn:hover { background: #ffe8e8; /* Oscurece ligeramente el fondo */ border-color: #de8f89; /* Intensifica el borde */ transform: scale(1.05); /* Añade pequeño zoom */ } .student-top-row { grid-template-columns: 1fr 0.8fr 38px; /* Selector, condición y botón eliminar */ } .student-delete-top-btn { align-self: end; /* Alinea el botón con la parte baja de los campos */ justify-self: end; /* Coloca el botón al final de la fila */ width: 38px; /* Igual altura visual que los campos */ height: 38px; /* Igual altura visual que los campos */ border-radius: 12px; /* Mantiene forma suave */ font-size: 20px; /* Tamaño de la X */ margin-bottom: 0; /* Evita desplazamiento */ } .student-dropdown { position: relative; /* Permite colocar el menú debajo del botón */ width: 100%; /* Ocupa todo el ancho del campo */ } .student-dropdown-button { width: 100%; /* Ocupa todo el ancho */ min-height: 38px; /* Altura parecida a los inputs */ border: 1px solid var(--border); /* Borde suave */ border-radius: 12px; /* Redondea esquinas */ background: white; /* Fondo blanco */ padding: 0 12px; /* Espacio interno */ display: flex; /* Organiza texto y flecha */ align-items: center; /* Centra verticalmente */ justify-content: space-between; /* Separa texto y flecha */ font-size: 13px; /* Tamaño texto */ color: var(--text); /* Color principal */ cursor: pointer; /* Cursor de botón */ } .student-dropdown-menu { position: absolute; /* Coloca menú sobre el contenido */ top: calc(100% + 6px); /* Lo sitúa debajo del botón */ left: 0; /* Alinea a la izquierda */ right: 0; /* Ocupa el mismo ancho */ z-index: 30; /* Lo pone por encima de otros elementos */ background: white; /* Fondo blanco */ border: 1px solid var(--border); /* Borde suave */ border-radius: 14px; /* Redondea menú */ box-shadow: 0 18px 35px rgba(15, 23, 42, .18); /* Sombra elegante */ padding: 8px; /* Espacio interno */ } .student-dropdown-search { width: 100%; /* Ocupa ancho completo */ height: 36px; /* Altura compacta */ border: 1px solid var(--border); /* Borde suave */ border-radius: 10px; /* Redondea input */ padding: 0 10px; /* Espacio interno */ margin-bottom: 8px; /* Separa buscador y opciones */ font-size: 13px; /* Tamaño texto */ } .student-dropdown-options { max-height: 150px; /* Limita altura del listado */ overflow-y: auto; /* Scroll interno si hay muchos alumnos */ display: flex; /* Organiza opciones */ flex-direction: column; /* Una opción debajo de otra */ gap: 4px; /* Separación entre opciones */ } .student-dropdown-option { width: 100%; /* Opción ocupa todo el ancho */ border: none; /* Sin borde */ background: transparent; /* Fondo transparente */ text-align: left; /* Texto alineado a la izquierda */ padding: 9px 10px; /* Espacio interno */ border-radius: 10px; /* Redondea opción */ cursor: pointer; /* Cursor interactivo */ font-size: 13px; /* Tamaño texto */ font-weight: 600 !important; /* Iguala el grosor al resto de selectores */ color: var(--text); /* Color principal */ display: flex; /* Centra el texto verticalmente dentro del sombreado, en vez de depender del line-height por defecto del botón */ align-items: center; /* Centrado vertical real */ } .student-dropdown-options { /* Lista de alumnos del desplegable */ font-weight: 600 !important; /* Evita que herede negritas más fuertes */ } /* Fin lista alumnos */ .student-dropdown-option:hover { /* Opción al pasar el ratón */ font-weight: 600 !important; /* Mantiene el mismo grosor al hacer hover */ } /* Fin hover opción alumno */ .student-dropdown-option:hover { background: #eef5ff; /* Fondo azul suave al pasar ratón */ } .history-item { display: flex; /* Coloca el comentario y la X en la misma fila */ align-items: center; /* Centra verticalmente el contenido */ justify-content: space-between; /* Deja el texto a la izquierda y la X a la derecha */ gap: 10px; /* Añade separación entre texto y botón */ } .history-text { flex: 1; /* Hace que el texto ocupe todo el espacio disponible */ min-width: 0; /* Evita que textos largos rompan el diseño */ overflow-wrap: anywhere; /* Permite cortar palabras largas si hace falta */ } .comment-delete-btn { width: 28px; /* Define el ancho del botón */ height: 28px; /* Define el alto del botón */ border: 1px solid #f2b8b5; /* Añade borde rojo suave */ border-radius: 7px; /* Redondea el botón */ background: #fff7f7; /* Fondo rojo muy claro */ color: #c5342d; /* X roja */ font-size: 18px; /* Tamaño de la X */ font-weight: 900; /* Hace la X más gruesa */ cursor: pointer; /* Muestra cursor de botón */ display: flex; /* Permite centrar la X */ align-items: center; /* Centra verticalmente la X */ justify-content: center; /* Centra horizontalmente la X */ flex-shrink: 0; /* Evita que el botón se deforme */ } .comment-delete-btn:hover { background: #ffe8e8; /* Cambia el fondo al pasar el ratón */ border-color: #de8f89; /* Intensifica el borde al pasar el ratón */ } /* ========================================================= NUEVA EVOLUCIÓN INDIVIDUAL UNIFICADA ========================================================= */ .student-chart { /* Rediseña el contenedor principal del gráfico individual */ max-height: 260px; /* Da más espacio al gráfico unificado */ padding: 12px; /* Mantiene espacio interior cómodo */ gap: 8px; /* Separa la leyenda, escala y barras */ overflow-y: auto; /* Permite scroll si hay muchas actividades */ overflow-x: hidden; /* Evita scroll horizontal */ } .student-chart-legend { /* Crea la leyenda superior del gráfico */ display: flex; /* Coloca los elementos en horizontal */ justify-content: flex-end; /* Alinea la leyenda a la derecha */ gap: 14px; /* Separa los elementos de la leyenda */ font-size: 11px; /* Usa texto pequeño */ font-weight: 400; /* Texto normal sin negrita */ color: var(--muted); /* Usa color gris secundario */ flex-shrink: 0; /* Evita que la leyenda se comprima */ } .student-chart-legend span { /* Ajusta cada elemento de la leyenda */ display: flex; /* Permite alinear icono y texto */ align-items: center; /* Centra verticalmente icono y texto */ gap: 5px; /* Separa icono y texto */ } .legend-bar { /* Dibuja el icono azul de la nota */ width: 18px; /* Define ancho del icono */ height: 8px; /* Define alto del icono */ border-radius: 999px; /* Redondea el icono */ background: #3f7df1; /* Usa azul de la nota */ } .legend-average { /* Dibuja el icono verde de la media */ width: 4px; /* Define ancho del marcador */ height: 16px; /* Define alto del marcador */ border-radius: 999px; /* Redondea el marcador */ background: #119669; /* Usa verde de la media */ } .student-chart-scale-top { /* Crea la escala superior de 0 a 10 */ display: grid; /* Usa grid para repartir los números */ grid-template-columns: repeat(5, 1fr); /* Crea cinco posiciones iguales */ padding-left: 150px; /* Alinea la escala con el inicio de las barras */ padding-right: 92px; /* Alinea la escala antes de los valores */ font-size: 10px; /* Usa texto pequeño */ color: var(--muted); /* Usa color secundario */ font-weight: 800; /* Hace la escala visible */ flex-shrink: 0; /* Evita que se comprima */ } .student-chart-scale-top span { /* Ajusta cada número de la escala */ text-align: center; /* Centra cada número */ } .student-chart-unified { /* Contenedor de todas las barras del gráfico */ display: flex; /* Organiza las filas en vertical */ flex-direction: column; /* Coloca actividades una debajo de otra */ gap: 8px; /* Separa cada actividad */ } .student-chart-line { /* Fila completa de cada actividad */ display: grid; /* Divide nombre, barra y valores */ grid-template-columns: 130px 1fr 78px; /* Define columnas de actividad, gráfico y nota */ align-items: center; /* Centra todo verticalmente */ gap: 10px; /* Separa columnas */ padding: 10px; /* Añade espacio interior */ border: 1px solid var(--border); /* Añade borde suave */ border-radius: 14px; /* Redondea la fila */ background: white; /* Fondo blanco para cada actividad */ } .student-chart-name { /* Nombre de cada actividad */ font-size: 12px; /* Define tamaño del nombre */ font-weight: 900; /* Hace el nombre más visible */ color: var(--text); /* Usa color principal */ text-transform: uppercase; /* Muestra el nombre en mayúsculas */ overflow: hidden; /* Oculta texto sobrante */ text-overflow: ellipsis; /* Añade puntos suspensivos si no cabe */ white-space: nowrap; /* Evita salto de línea */ } .student-chart-track { /* Barra base donde se dibuja nota y media */ position: relative; /* Permite colocar la media encima */ height: 16px; /* Define altura de la barra */ border-radius: 999px; /* Redondea la barra */ background: #e7eef8; /* Fondo gris azulado */ overflow: visible; /* Permite ver el marcador verde */ } .student-chart-fill { /* Barra azul de la nota del alumno */ height: 100%; /* Ocupa toda la altura de la pista */ border-radius: 999px; /* Redondea la barra azul */ background: #3f7df1; /* Color azul de nota */ } .student-chart-average { /* Marcador verde de la media del grupo */ position: absolute; /* Permite colocarlo sobre la barra */ top: -5px; /* Hace que sobresalga arriba */ width: 4px; /* Define ancho del marcador */ height: 26px; /* Define alto del marcador */ border-radius: 999px; /* Redondea el marcador */ background: #119669; /* Color verde de la media */ transform: translateX(-50%); /* Centra el marcador en su posición exacta */ } .student-chart-values { /* Zona derecha con nota y media */ display: flex; /* Organiza nota y media */ flex-direction: column; /* Coloca nota arriba y media abajo */ align-items: flex-end; /* Alinea números a la derecha */ } .student-chart-values strong { /* Nota principal del alumno */ font-size: 24px; /* Hace la nota grande */ font-weight: 900; /* Hace la nota gruesa */ color: var(--text); /* Usa color principal */ } .student-chart-values span { /* Texto de media del grupo */ font-size: 10px; /* Hace la media más pequeña */ color: var(--success); /* Usa verde para la media */ font-weight: 900; /* Destaca la media */ } /* ========================================================= EVOLUCIÓN INDIVIDUAL COMPACTA SIN SCROLL ========================================================= */ .student-chart { /* Rediseña el contenedor para que todo se vea sin scroll vertical */ max-height: none; /* Elimina la altura máxima anterior */ height: 230px; /* Da una altura fija compacta */ overflow: hidden; /* Quita el scroll vertical */ padding: 10px; /* Ajusta el espacio interior */ gap: 6px; /* Reduce separación interna */ } .student-compact-legend { /* Leyenda superior del gráfico */ display: flex; /* Coloca la leyenda en horizontal */ justify-content: flex-end; /* Alinea la leyenda a la derecha */ gap: 14px; /* Separa los elementos */ font-size: 11px; /* Tamaño pequeño */ font-weight: 900; /* Texto grueso */ color: var(--muted); /* Color gris */ flex-shrink: 0; /* Evita que se comprima */ } .student-compact-legend span { /* Cada elemento de la leyenda */ display: flex; /* Alinea icono y texto */ align-items: center; /* Centra verticalmente */ gap: 5px; /* Separa icono y texto */ } .compact-legend-bar { /* Icono azul de nota */ width: 18px; /* Ancho del icono */ height: 8px; /* Alto del icono */ border-radius: 999px; /* Redondea el icono */ background: #3f7df1; /* Color azul */ } .compact-legend-line { /* Icono verde de media */ width: 18px; /* Ancho del icono */ height: 4px; /* Alto del icono */ border-radius: 999px; /* Redondea el icono */ background: #119669; /* Color verde */ } .student-compact-chart { /* Contenedor del gráfico con eje y barras */ flex: 1; /* Ocupa todo el espacio disponible */ min-height: 0; /* Permite ajustarse dentro del panel */ display: grid; /* Divide eje y zona de barras */ grid-template-columns: 28px 1fr; /* Eje pequeño y gráfico grande */ gap: 8px; /* Separa eje y gráfico */ } .compact-y-axis { /* Eje vertical de notas */ height: 100%; /* Ocupa toda la altura */ display: flex; /* Organiza valores verticalmente */ flex-direction: column; /* Coloca números de arriba a abajo */ justify-content: space-between; /* Reparte los números */ align-items: flex-end; /* Alinea números a la derecha */ font-size: 10px; /* Tamaño pequeño */ font-weight: 900; /* Texto visible */ color: var(--muted); /* Color gris */ } .compact-bars-area { /* Zona principal donde aparecen todas las actividades */ position: relative; /* Permite colocar líneas de fondo */ display: grid; /* Coloca columnas automáticamente */ grid-auto-flow: column; /* Organiza actividades en columnas */ grid-auto-columns: minmax(48px, 1fr); /* Hace que todas quepan y se repartan */ gap: 8px; /* Separa columnas */ height: 100%; /* Ocupa toda la altura disponible */ padding: 0 4px; /* Añade margen lateral mínimo */ overflow: hidden; /* Evita scroll */ } .compact-grid-line { /* Líneas horizontales de referencia */ position: absolute; /* Coloca líneas dentro del gráfico */ left: 0; /* Empieza a la izquierda */ right: 0; /* Llega hasta la derecha */ height: 1px; /* Grosor de línea */ background: #dce6f3; /* Color suave */ z-index: 0; /* Queda por detrás de las barras */ } .line-10 { top: 0%; } /* Posición línea 10 */ .line-75 { top: 25%; } /* Posición línea 7,5 */ .line-50 { top: 50%; } /* Posición línea 5 */ .line-25 { top: 75%; } /* Posición línea 2,5 */ .line-0 { bottom: 0%; } /* Posición línea 0 */ .compact-activity-column { /* Columna completa de actividad */ position: relative; /* Mantiene la columna sobre las líneas */ z-index: 1; /* Pone la columna encima del fondo */ display: grid; /* Organiza barra, nota y nombre */ grid-template-rows: 1fr auto auto; /* Barra arriba, nota y nombre abajo */ align-items: end; /* Apoya la barra abajo */ min-width: 0; /* Evita desbordes */ height: 100%; /* Ocupa toda la altura */ } .compact-bar-zone { /* Zona vertical donde sube la barra */ position: relative; /* Permite colocar media y barra */ height: 100%; /* Ocupa toda la zona superior */ width: 100%; /* Ocupa ancho completo */ display: flex; /* Permite apoyar barra abajo */ align-items: flex-end; /* Coloca barra desde abajo */ justify-content: center; /* Centra barra horizontalmente */ padding-top: 4px; /* Da margen arriba */ } .compact-bar { /* Barra azul del alumno */ width: 52%; /* Define ancho proporcional de la barra */ min-height: 4px; /* Hace visible notas bajas */ border-radius: 10px 10px 0 0; /* Redondea parte superior */ background: #3f7df1; /* Color azul */ z-index: 2; /* Pone la barra sobre la media si se cruzan */ } .compact-average-marker { /* Marca verde horizontal de media */ position: absolute; /* Posiciona según la nota media */ left: 12%; /* Empieza cerca del borde izquierdo */ right: 12%; /* Termina cerca del borde derecho */ height: 4px; /* Grosor de la marca */ border-radius: 999px; /* Redondea la marca */ background: #119669; /* Color verde */ transform: translateY(50%); /* Centra la línea en su posición */ z-index: 3; /* Coloca la media por encima de la barra */ } .compact-grade-value { /* Nota numérica debajo de la barra */ margin-top: 4px; /* Separa nota de la barra */ text-align: center; /* Centra la nota */ font-size: 17px; /* Tamaño visible */ font-weight: 900; /* Texto grueso */ color: var(--text); /* Color principal */ line-height: 1; /* Compacta altura */ } .compact-activity-name { /* Nombre inferior de la actividad */ margin-top: 4px; /* Separa nombre de nota */ text-align: center; /* Centra el texto */ font-size: 10px; /* Tamaño compacto */ font-weight: 900; /* Texto fuerte */ color: var(--muted); /* Color gris */ text-transform: uppercase; /* Mayúsculas */ white-space: nowrap; /* Evita salto de línea */ overflow: hidden; /* Oculta texto que no cabe */ text-overflow: ellipsis; /* Añade puntos suspensivos */ } /* ========================================================= EVOLUCIÓN INDIVIDUAL AJUSTADA ========================================================= */ .student-chart { /* Contenedor exterior del gráfico individual */ height: 285px; /* Da altura suficiente sin hacerlo exagerado */ max-height: none; /* Elimina límites anteriores */ overflow: hidden; /* Evita scroll vertical */ padding: 14px 18px 12px 18px; /* Ajusta espacios interiores */ display: block; /* Permite que el gráfico use su propia estructura */ background: #fbfdff; /* Fondo casi blanco como en la referencia */ } .student-full-chart { /* Contenedor general del gráfico */ height: 100%; /* Ocupa toda la altura del contenedor */ display: flex; /* Organiza leyenda y gráfico */ flex-direction: column; /* Coloca leyenda arriba y gráfico debajo */ gap: 6px; /* Reduce separación vertical */ } .student-full-legend { /* Leyenda superior */ display: flex; /* Coloca elementos en horizontal */ justify-content: flex-end; /* Alinea la leyenda a la derecha */ gap: 22px; /* Separa los elementos */ font-size: 12px; /* Tamaño equilibrado */ font-weight: 400; /* Quita la negrita del texto de la leyenda */ color: var(--text); /* Color principal */ height: 22px; /* Reserva altura fija para la leyenda */ flex-shrink: 0; /* Evita que se comprima */ } .student-full-legend span { /* Cada elemento de la leyenda */ display: flex; /* Alinea icono y texto */ align-items: center; /* Centra verticalmente */ gap: 8px; /* Separa icono y texto */ } .full-legend-bar { /* Icono azul de nota */ width: 30px; /* Ancho del icono */ height: 10px; /* Alto del icono */ border-radius: 999px; /* Redondea el icono */ background: #8bb4f5; /* Mismo azul suave que las barras */ } .full-legend-line { /* Icono verde de media */ width: 34px; /* Ancho de la línea */ height: 3px; /* Grosor de línea */ border-radius: 999px; /* Redondea extremos */ background: #119669; /* Verde de media */ } .student-full-body { /* Zona con eje y barras */ flex: 1; /* Ocupa el espacio restante */ min-height: 0; /* Permite ajustar altura */ display: grid; /* Divide eje y gráfico */ grid-template-columns: 34px 1fr; /* Eje izquierdo y zona principal */ gap: 10px; /* Separa eje y barras */ } .student-full-y-axis { /* Eje vertical */ height: calc(100% - 40px); /* Alinea el eje solo con la zona de barras */ display: flex; /* Organiza números */ flex-direction: column; /* Coloca números verticalmente */ justify-content: space-between; /* Reparte del 10 al 0 */ align-items: flex-end; /* Alinea a la derecha */ font-size: 12px; /* Tamaño cómodo */ font-weight: 900; /* Texto fuerte */ color: #52657d; /* Color más suave para los números del eje */ padding-top: 0; /* Evita desplazamiento superior */ } .student-full-area { /* Área principal del gráfico */ position: relative; /* Permite colocar líneas internas */ height: calc(100% - 40px); /* Reserva abajo espacio para notas y nombres */ border-left: 1px solid #8fa3bd; /* Eje vertical más claro */ border-bottom: 1px solid #8fa3bd; /* Eje inferior más claro */ padding: 0 28px; /* Da aire lateral como en la referencia */ } .student-full-grid { /* Capa de líneas horizontales */ position: absolute; /* Coloca líneas dentro del área */ inset: 0; /* Ocupa toda la zona del gráfico */ pointer-events: none; /* No interfiere con el uso */ } .student-full-grid-line { /* Línea horizontal de referencia */ position: absolute; /* Permite ubicar por porcentaje */ left: 0; /* Empieza al borde izquierdo */ right: 0; /* Llega al borde derecho */ height: 1px; /* Grosor fino */ background: transparent; /* Evita doble línea sólida */ border-top: 1px solid #d8e2ef; /* Línea lisa suave */ transform: translateY(50%); /* Centra la línea en el valor */ } .student-full-bars { /* Contenedor de columnas */ position: relative; /* Mantiene barras sobre la cuadrícula */ z-index: 2; /* Pone las barras encima */ height: 100%; /* Ocupa la altura exacta del área */ display: grid; /* Distribuye actividades */ grid-auto-flow: column; /* Coloca columnas en horizontal */ grid-auto-columns: minmax(72px, 1fr); /* Reparte el espacio disponible */ gap: 34px; /* Separa columnas */ align-items: end; /* Apoya todo abajo */ } .student-full-column { /* Columna completa por actividad */ position: relative; /* Permite colocar texto debajo del eje */ height: 100%; /* Ocupa toda la zona de barras */ min-width: 0; /* Evita desbordamientos */ } .student-full-plot { /* Zona vertical real de barra */ position: relative; /* Permite colocar media y barra */ height: 100%; /* Hace que la barra empiece desde el 0 real */ display: flex; /* Permite apoyar barra abajo */ align-items: flex-end; /* Coloca la barra desde abajo */ justify-content: center; /* Centra la barra */ } .student-full-bar { /* Barra azul */ width: 72%; /* Barra más ancha como la imagen buena */ min-height: 4px; /* Permite ver notas muy bajas */ border-radius: 12px 12px 0 0; /* Redondea solo arriba */ background: #8bb4f5; /* Azul suave algo más claro */ position: relative; /* Mantiene posición */ z-index: 2; /* Barra sobre líneas */ } .student-full-average { /* Línea verde de media */ position: absolute; /* Coloca la media según su nota */ left: 2%; /* Hace la línea más larga */ right: 2%; /* Hace la línea más larga */ height: 3px; /* Grosor elegante */ border-radius: 999px; /* Redondea extremos */ background: #119669; /* Verde media */ transform: translateY(50%); /* Centra la línea en el valor */ z-index: 3; /* Media encima de la barra */ } .student-full-grade { /* Nota numérica */ position: absolute; /* Permite colocarla bajo el eje */ left: 0; /* Ocupa toda la columna */ right: 0; /* Ocupa toda la columna */ bottom: -30px; /* Coloca la nota debajo del eje */ text-align: center; /* Centra nota */ font-size: 24px; /* Nota grande pero no exagerada */ font-weight: 900; /* Nota fuerte */ color: #26364a; /* Color oscuro más suave para la nota */ line-height: 1; /* Compacta altura */ } .student-full-name { /* Nombre de actividad */ position: absolute; /* Permite colocarlo bajo la nota */ left: 0; /* Ocupa toda la columna */ right: 0; /* Ocupa toda la columna */ bottom: -48px; /* Coloca el nombre debajo de la nota */ text-align: center; /* Centra nombre */ font-size: 11px; /* Tamaño compacto */ font-weight: 900; /* Texto fuerte */ color: #52657d; /* Color más suave para el nombre de actividad */ text-transform: uppercase; /* Mayúsculas */ white-space: nowrap; /* Evita salto de línea */ overflow: hidden; /* Oculta exceso */ text-overflow: ellipsis; /* Añade puntos suspensivos si no cabe */ } /* ========================================================= FILAS ALTERNAS TABLA DE NOTAS ========================================================= */ .grades-table tbody tr:nth-child(odd) { /* Aplica estilo a las filas impares */ background: #ffffff; /* Mantiene fondo blanco */ } .grades-table tbody tr:nth-child(even) { /* Aplica estilo a las filas pares */ background: #fcfdff; /* Fondo azul muy suave para facilitar la lectura */ } .grades-table tbody tr:hover { /* Aplica estilo al pasar el ratón por una fila */ background: #eef5ff; /* Resalta suavemente la fila activa */ } /* ========================================================= SEPARADORES VERTICALES TABLA DE NOTAS ========================================================= */ .grades-table th:last-child, .grades-table td:last-child { border-right: none; /* Elimina la línea en la última columna */ } .grades-table input { max-width: 90%; /* Evita que los inputs ocupen toda la celda */ margin: 0 auto; /* Centra los inputs dentro de la celda */ display: block; /* Permite centrar correctamente el input */ } .grades-table th, .grades-table td { /* Permite que la tabla se adapte sin scroll horizontal */ white-space: normal; /* Permite adaptar el contenido */ min-width: 0; /* Quita el ancho mínimo que provocaba scroll */ width: auto; /* Deja que el navegador reparta el espacio */ } .grades-table th:first-child, .grades-table td:first-child { min-width: 130px; /* Reduce la anchura mínima de la columna de alumnos */ width: 130px; /* Mantiene la columna de alumnos más compacta */ } .grades-table th:last-child, .grades-table td:last-child { min-width: 90px; /* Mantiene compacta la columna final */ } .grades-table input { max-width: 88%; /* Evita que el input toque las líneas verticales */ margin: 0 auto; /* Centra el input */ display: block; /* Permite centrarlo correctamente */ } /* ========================================================= BOTONES JUNTO AL TÍTULO DE TARJETA ========================================================= */ .title-with-button { /* Cabecera con botón pegado al título */ justify-content: flex-start; /* Coloca título y botón al inicio */ gap: 10px; /* Separa título y botón */ } .inline-title-btn { /* Botón pequeño al lado del título */ width: 32px; /* Reduce el ancho del botón */ height: 32px; /* Reduce el alto del botón */ min-height: 32px; /* Evita que herede alturas mayores */ border-radius: 12px; /* Mantiene esquinas suaves */ font-size: 20px; /* Ajusta tamaño del símbolo */ flex-shrink: 0; /* Evita que se comprima */ } /* ========================================================= COLUMNA CONDICIÓN Y SELECTOR DE ORDEN ========================================================= */ .sort-field { /* Ajusta el campo de ordenar */ min-width: 170px; /* Da ancho suficiente al selector */ } .condition-cell { /* Estilo de la celda de condición */ color: #52657d; /* Usa tono gris azulado */ font-weight: 800; /* Hace el texto visible */ font-size: 12px; /* Mantiene tamaño compacto */ } .grades-table th:nth-child(2), .grades-table td:nth-child(2) { /* Ajusta la columna condición */ min-width: 120px; /* Da espacio suficiente a la condición */ width: 120px; /* Mantiene columna compacta */ } /* ========================================================= ORDENAR EN CABECERA DE TRIMESTRE ========================================================= */ .term-header-with-sort { /* Cabecera con título a la izquierda y ordenar a la derecha */ justify-content: space-between; /* Separa título y selector ordenar */ align-items: flex-start; /* Alinea ambos bloques por arriba */ } .term-title-left { /* Grupo de título y botón crear trimestre */ display: flex; /* Coloca título y botón en horizontal */ align-items: center; /* Centra verticalmente título y botón */ gap: 10px; /* Separa título y botón */ } .sort-field-header { /* Selector ordenar dentro de la cabecera */ width: 180px; /* Da ancho fijo al selector */ min-width: 180px; /* Evita que se comprima */ } .sort-field-header select { /* Ajusta el selector de ordenar */ height: 36px; /* Igual altura visual que otros campos */ font-size: 13px; /* Mantiene tamaño de texto */ } /* ========================================================= FILTROS DESPLEGABLES EN TABLA DE NOTAS ========================================================= */ .filter-th { /* Cabecera que contiene filtro desplegable */ position: sticky; /* Mantiene comportamiento de cabecera fija */ overflow: visible; /* Permite que el desplegable salga fuera */ } .filter-header-cell { /* Contenedor de ALUMNO/A y CONDICIÓN */ position: relative; /* Permite colocar el botón de filtro sin mover el texto */ width: 100%; /* Ocupa todo el ancho de la cabecera */ height: 36px; /* Iguala la altura visual a las actividades */ display: flex; /* Permite centrar el texto */ align-items: center; /* Centra verticalmente el contenido */ justify-content: center; /* Centra horizontalmente el texto */ } .filter-header-cell span { /* Texto ALUMNO/A y CONDICIÓN */ display: block; /* Trata el texto como bloque independiente */ width: 100%; /* Hace que el texto use toda la celda */ padding: 0 30px 0 6px; /* Reserva espacio para el botón sin descentrar tanto */ text-align: center; /* Centra el texto */ font-size: 12px !important; /* Iguala el tamaño a las actividades */ font-weight: 900 !important; /* Mantiene el grosor */ color: #26364a !important; /* Usa el mismo color que las actividades */ text-transform: uppercase !important; /* Mantiene mayúsculas */ line-height: 36px !important; /* Centra verticalmente el texto */ } .filter-header-cell .column-filter-btn { /* Botón filtro de ALUMNO/A y CONDICIÓN */ position: absolute; /* Coloca el botón sin afectar al centrado */ right: 1px; /* Lo separa un poco del borde derecho */ top: 50%; /* Lo coloca a media altura */ transform: translateY(-50%); /* Lo centra verticalmente */ width: 24px; /* Mantiene tamaño igual al resto */ height: 24px; /* Mantiene altura igual al resto */ } .column-filter-btn { /* Botón pequeño de filtro */ width: 24px; /* Ancho del botón */ height: 24px; /* Alto del botón */ border-radius: 8px; /* Bordes suaves */ border: 1px solid #c9d8ee; /* Borde azul suave */ background: #f4f8fe; /* Fondo azul claro */ color: #2f5f9f; /* Texto azul */ font-size: 12px; /* Tamaño flecha */ font-weight: 900; /* Hace la flecha visible */ cursor: pointer; /* Cursor de botón */ } .column-filter-btn.filter-active { /* Botón cuando hay filtro activo */ background: #e8f1ff; /* Fondo activo */ border-color: #8fb3e6; /* Borde activo */ color: #234f86; /* Texto activo */ } .column-filter-menu { /* Menú desplegable del filtro */ position: absolute; /* Coloca el menú flotante */ top: calc(100% + 6px); /* Lo sitúa debajo de la cabecera */ left: 6px; /* Lo separa del borde izquierdo */ width: 260px; /* Ancho del menú */ max-height: 310px; /* Altura máxima */ background: white; /* Fondo blanco */ border: 1px solid #c9d8ee; /* Borde azul suave */ border-radius: 14px; /* Bordes redondeados */ padding: 10px; /* Espaciado interno */ box-shadow: 0 18px 35px rgba(15, 23, 42, .16); /* Sombra suave */ z-index: 50; /* Coloca el menú por encima de la tabla */ text-align: left; /* Alinea contenido a la izquierda */ } .column-filter-search { /* Buscador del filtro de columna */ width: 100%; /* Ocupa el mismo ancho que los botones inferiores juntos */ height: 38px; /* Mantiene una altura cómoda */ margin-bottom: 0 !important; /* Evita separación duplicada */ border-color: #8fb3e6; /* Mantiene borde azul visible */ text-align: left; /* Alinea el texto dentro del buscador */ padding: 0 12px; /* Añade espacio interior lateral */ } .column-filter-actions { /* Zona de botones del filtro */ display: grid; /* Organiza botones en grid */ grid-template-columns: 1fr 1fr; /* Dos botones iguales */ gap: 8px; /* Separación entre botones */ margin-bottom: 10px; /* Separación inferior */ } .column-filter-actions button { /* Botones limpiar */ height: 30px; /* Altura compacta */ border-radius: 9px; /* Bordes suaves */ border: none; /* Sin borde, estética nueva */ background: #f4f8fe; /* Fondo claro */ color: #8aa0ba; /* Texto gris azulado */ font-size: 11px; /* Texto pequeño */ font-weight: 900; /* Texto fuerte */ text-transform: uppercase; /* Mayúsculas */ cursor: pointer; /* Cursor de botón */ } .column-filter-options { /* Lista de opciones */ display: flex; /* Organiza opciones */ flex-direction: column; /* Una debajo de otra */ gap: 6px; /* Separación entre opciones */ max-height: 210px; /* Altura máxima */ overflow-y: auto; /* Scroll interno */ } .column-filter-option { /* Cada opción con checkbox */ display: flex; /* Coloca checkbox y texto */ align-items: center; /* Centra verticalmente */ gap: 8px; /* Separación */ padding: 5px 3px; /* Espaciado */ color: #26364a; /* Texto oscuro suave */ font-size: 12px; /* Tamaño texto */ font-weight: 900; /* Texto fuerte */ cursor: pointer; /* Cursor interactivo */ } .column-filter-option input { /* Checkbox */ width: 16px; /* Ancho checkbox */ height: 16px; /* Alto checkbox */ padding: 0; /* Quita padding */ margin: 0; /* Quita margen */ } .column-filter-menu { /* Fuerza separación interna del desplegable */ display: flex; /* Organiza buscador, botones y opciones en vertical */ flex-direction: column; /* Coloca cada bloque uno debajo del otro */ gap: 10px; /* Añade separación real entre buscador, botones y opciones */ } .column-filter-menu.hidden { /* Mantiene oculto el desplegable cuando toca */ display: none; /* Oculta el menú aunque tenga display flex */ } .column-filter-search { /* Buscador del filtro */ margin-bottom: 0 !important; /* Evita conflictos con márgenes anteriores */ } .column-filter-actions { /* Zona de botones limpiar */ margin-bottom: 0 !important; /* Evita conflictos con márgenes anteriores */ } .column-filter-actions button { /* Botones limpiar del filtro con estilo activo */ background: #edf4ff !important; /* Fondo azul claro activo */ color: #2f5f9f !important; /* Texto azul más visible */ border: none !important; /* Sin borde, estética nueva */ opacity: 1 !important; /* Evita aspecto desactivado */ cursor: pointer !important; /* Mantiene cursor de botón */ } .column-filter-actions button:hover { /* Efecto al pasar el ratón */ background: #dfeeff !important; /* Azul claro más intenso */ border: none !important; /* Sin borde, estética nueva */ color: #244f87 !important; /* Texto azul más oscuro */ } .column-filter-btn:focus, .column-filter-btn:focus-visible { /* Quita el borde negro al cerrar con ESC */ outline: none !important; /* Elimina el contorno negro del navegador */ box-shadow: none !important; /* Elimina cualquier sombra de foco */ } .group-chart-header { /* Cabecera de evolución del grupo */ align-items: flex-start; /* Alinea título y selector por arriba */ } .group-sort-field { /* Selector de orden de evolución del grupo */ width: 180px; /* Da ancho al selector */ min-width: 180px; /* Evita que se comprima */ } .group-sort-field select { /* Select de orden del grupo */ height: 36px; /* Ajusta altura */ font-size: 13px; /* Mantiene texto legible */ } .group-sort-field { /* Coloca ORDENAR y el selector en la misma línea */ display: flex; /* Organiza etiqueta y selector en horizontal */ align-items: center; /* Centra verticalmente etiqueta y selector */ gap: 8px; /* Separa ORDENAR del selector */ width: auto; /* Permite que el conjunto se ajuste al contenido */ min-width: 260px; /* Da espacio suficiente al conjunto */ } .group-sort-field label { /* Ajusta la etiqueta ORDENAR */ margin-bottom: 0; /* Quita el salto visual debajo del label */ white-space: nowrap; /* Evita que ORDENAR salte de línea */ } .group-sort-field select { /* Ajusta el selector */ width: 180px; /* Mantiene ancho cómodo */ height: 36px; /* Mantiene altura uniforme */ } .bar-value { /* Nota superior de cada barra */ height: 18px; /* Reserva siempre el mismo espacio para la nota */ display: flex; /* Permite centrar el número */ align-items: center; /* Centra verticalmente el número */ justify-content: center; /* Centra horizontalmente el número */ } .bar-label { /* Nombre inferior de cada alumno */ height: 16px; /* Reserva siempre el mismo espacio para el nombre */ line-height: 16px; /* Alinea el texto verticalmente */ } .chart { /* Fuerza que todas las columnas de la gráfica usen la misma altura */ align-items: stretch !important; /* Estira todas las columnas para que tengan la misma base */ } .bar-wrap { /* Columna completa de cada alumno */ height: auto !important; /* Evita conflicto con alturas anteriores */ align-self: stretch !important; /* Hace que cada columna ocupe toda la altura disponible */ display: grid !important; /* Divide nota, barra y nombre */ grid-template-rows: 22px minmax(0, 1fr) 18px !important; /* Nota, zona barra y nombre */ justify-items: center !important; /* Centra horizontalmente */ } .bar-zone { /* Zona fija de la barra */ width: 100% !important; /* Ocupa todo el ancho */ height: 100% !important; /* Ocupa toda la zona central */ display: flex !important; /* Permite apoyar la barra */ align-items: flex-end !important; /* Apoya todas las barras en la misma línea */ justify-content: center !important; /* Centra la barra */ } .bar-value { /* Nota superior */ margin: 0 !important; /* Elimina márgenes que desalinean */ height: 22px !important; /* Altura fija */ } .bar-label { /* Nombre inferior */ margin: 0 !important; /* Elimina márgenes que desalinean */ height: 18px !important; /* Altura fija */ line-height: 18px !important; /* Centra texto */ } .comment-write-card { /* Tarjeta derecha para escribir comentarios */ flex: 0 0 210px; /* Da altura fija al bloque inferior derecho */ min-height: 0; /* Permite que se ajuste dentro de la columna */ display: flex; /* Organiza el contenido verticalmente */ flex-direction: column; /* Coloca título, textarea y botón en columna */ gap: 8px; /* Separa los elementos internos */ background: var(--panel); /* Fondo blanco translúcido de tarjeta */ border: 1px solid var(--border); /* Borde suave como el resto de boxes */ border-radius: 18px; /* Bordes redondeados como el resto de boxes */ padding: 12px; /* Espaciado interior de tarjeta */ overflow: hidden; /* Evita desbordes */ } .comment-write-field { /* Campo del comentario */ flex: 1; /* Hace que el textarea ocupe el espacio disponible */ min-height: 0; /* Evita que rompa el layout */ } .comment-write-card textarea { /* Textarea del comentario en la columna derecha */ height: 88px; /* Altura cómoda para escribir */ min-height: 88px; /* Mantiene altura mínima */ max-height: 88px; /* Evita que crezca demasiado */ } .comment-write-card #btnSaveComment { /* Botón guardar comentario en la tarjeta derecha */ margin-top: 0; /* Quita margen extra */ width: 100%; /* Ocupa todo el ancho */ flex-shrink: 0; /* Evita que se comprima */ } .comment-write-card textarea { /* Ajusta separación del cuadro de comentario */ margin-bottom: 8px; /* Separa el textarea del botón guardar */ } .comment-write-card textarea { /* Ajusta la altura del cuadro de comentario */ height: 98px; /* Altura intermedia */ min-height: 98px; /* Mantiene la altura mínima */ max-height: 98px; /* Evita que crezca más */ } .student-follow-panel .card-header { /* Da más aire bajo el título principal */ margin-bottom: 14px; /* Separa el título del selector de alumno */ position: relative; /* Permite anclar el botón de ampliar en la esquina superior derecha de la tarjeta */ } .student-chart-section { /* Da más aire antes de Evolución individual */ margin-top: 8px; /* Separa la gráfica de los campos superiores */ } .student-history-section { /* Da más aire antes del Histórico */ margin-top: 8px; /* Separa histórico de la gráfica */ } .student-chart-section { /* Separador superior de Evolución individual */ border-top: 1px solid #d8e2ef; /* Línea gris clara separadora */ padding-top: 10px; /* Separa el título de la línea */ } .student-history-section { /* Separador superior de Histórico */ border-top: 1px solid #d8e2ef; /* Línea gris clara separadora */ padding-top: 6px; /* Separa el título de la línea */ } .term-actions .field { /* Campo del selector de trimestre */ width: 260px; /* Hace el selector más ancho para que el trimestre no salte de línea */ max-width: 260px; /* Mantiene un ancho fijo más cómodo visualmente */ } .term-actions #btnNewActivity { /* Botón nueva actividad */ grid-column: 3; /* Coloca el botón hacia la derecha */ } .term-actions #btnOpenWeights { /* Botón calcular nota final */ grid-column: 4; /* Coloca el botón al extremo derecho */ } .grades-table input[type="number"]::-webkit-outer-spin-button, .grades-table input[type="number"]::-webkit-inner-spin-button { /* Quita las flechas de Chrome/Edge */ -webkit-appearance: none; /* Oculta los controles de subir/bajar */ margin: 0; /* Elimina margen del control */ } .grades-table input[type="number"] { /* Quita las flechas de Firefox */ appearance: textfield; /* Muestra el input como texto normal */ -moz-appearance: textfield; /* Oculta los controles numéricos en Firefox */ } .points-grade-cell { /* Celda para actividades puntuadas por partes */ display: flex; /* Coloca input y total en horizontal */ align-items: center; /* Centra verticalmente */ justify-content: center; /* Centra dentro de la celda */ gap: 6px; /* Separa el input del total */ } .points-grade-cell input { /* Input de puntos obtenidos */ max-width: 70px; /* Hace el input más compacto */ margin: 0; /* Evita márgenes heredados */ } .points-grade-cell span { /* Texto /total */ color: #52657d; /* Color gris azulado */ font-size: 12px; /* Tamaño discreto */ font-weight: 800; /* Hace visible el total */ } .grades-table { /* Hace que todas las columnas quepan en el ancho visible */ table-layout: fixed; /* Reparte el ancho disponible entre columnas */ width: 100%; /* Ocupa todo el ancho del contenedor */ } .grades-table input { /* Ajusta los inputs para que no fuercen scroll */ width: 88%; /* Reduce el ancho dentro de cada celda */ min-width: 0; /* Permite que el input se comprima */ max-width: 110px; /* Evita inputs demasiado grandes */ } .activity-header-cell { /* Permite que los títulos largos se adapten */ gap: 6px; /* Reduce separación entre texto y botón */ flex-wrap: nowrap; /* Mantiene texto y X en la misma línea */ } .activity-header-cell span { /* Texto de actividad */ overflow: hidden; /* Oculta exceso de texto */ text-overflow: ellipsis; /* Añade puntos suspensivos */ white-space: nowrap; /* Evita salto de línea */ } .grades-table th { /* Hace que los títulos se adapten mejor */ font-size: clamp(9px, 0.65vw, 12px); /* Reduce el texto si hay muchas columnas */ padding: 6px 5px; /* Reduce espacio interno de cabecera */ line-height: 1.1; /* Compacta la altura del texto */ } .activity-header-cell span { /* Nombre de actividad en cabecera */ font-size: clamp(9px, 0.65vw, 12px); /* Escala el texto del título */ max-width: 100%; /* Evita que empuje el botón X */ } .activity-delete-btn { /* Botón X de actividad más adaptable */ width: clamp(26px, 2vw, 34px); /* Reduce el botón si hay muchas columnas */ height: clamp(26px, 2vw, 34px); /* Reduce altura proporcional */ font-size: clamp(15px, 1.3vw, 20px); /* Escala la X */ } .activity-header-cell { /* Permite que el título completo de la actividad se vea */ flex-wrap: wrap; /* Permite que el texto baje a otra línea */ row-gap: 4px; /* Separa un poco las líneas */ line-height: 1.1; /* Compacta el texto */ } .activity-header-cell span { /* Texto del título de actividad */ white-space: normal !important; /* Permite salto de línea */ overflow: visible !important; /* Evita cortar el texto */ text-overflow: unset !important; /* Quita los puntos suspensivos */ word-break: normal; /* Mantiene palabras normales */ overflow-wrap: anywhere; /* Permite cortar solo si no cabe */ } .grades-table th { /* Cabeceras de tabla */ height: auto; /* Permite crecer en altura */ min-height: 46px; /* Mantiene altura mínima cómoda */ } .activity-header-cell { /* Cabecera de actividad con título centrado real y botón X a la derecha */ position: relative; /* Permite colocar la X sin afectar al centrado del título */ display: flex !important; /* Centra el título de forma real */ align-items: center; /* Centra verticalmente título y botón */ justify-content: center; /* Centra el título respecto a toda la celda */ min-height: 28px; /* Mantiene altura cómoda en cabecera */ } .activity-header-cell span { /* Texto del título de actividad */ text-align: center; /* Centra el título dentro de su espacio */ white-space: normal !important; /* Permite que el título use dos líneas */ overflow: visible !important; /* Evita cortar el texto */ text-overflow: unset !important; /* Quita puntos suspensivos */ line-height: 1.1; /* Compacta el texto */ } .activity-delete-btn { /* Botón X de actividades colocado sin mover el título */ width: 24px !important; /* Igual ancho que filtro */ height: 24px !important; /* Igual alto que filtro */ min-width: 24px !important; /* Evita que se comprima */ border-radius: 8px !important; /* Igual redondeo que filtro */ font-size: 15px !important; /* Ajusta tamaño de la X */ position: absolute; /* Saca la X del cálculo de centrado del título */ right: 4px; /* Coloca la X a la derecha de la celda */ top: 50%; /* La sitúa a media altura */ transform: translateY(-50%); /* Centra la X verticalmente */ } .grades-table td { /* Hace más legible el contenido de la tabla */ font-size: 14px; /* Aumenta el texto de las celdas */ } .grades-table input { /* Hace más grandes los números de las notas */ font-size: 15px; /* Aumenta el número dentro del input */ font-weight: 700; /* Hace la nota más visible */ } .points-grade-cell span { /* Hace más visible el /8 o /total */ font-size: 14px; /* Aumenta el texto del total */ font-weight: 900; /* Destaca el total */ } .final-cell { /* Nota final del trimestre */ font-size: 16px !important; /* Aumenta el tamaño de la nota final */ font-weight: 900; /* Mantiene nota final destacada */ border-radius: 10px; /* Suaviza visualmente el color */ } .final-red { /* Nota final de 0 a menor de 5 */ background: #ffe5e5; /* Fondo rojo suave */ color: #b42318 !important; /* Texto rojo */ } .final-orange { /* Nota final de 5 a menor de 7 */ background: #fff0d6; /* Fondo naranja suave */ color: #b65c00 !important; /* Texto naranja */ } .final-yellow { /* Nota final de 7 a menor de 9 */ background: #fff8c5; /* Fondo amarillo suave */ color: #8a6a00 !important; /* Texto amarillo oscuro */ } .final-green { /* Nota final de 9 a 10 */ background: #dff7ea; /* Fondo verde suave */ color: #087443 !important; /* Texto verde */ } .final-empty { /* Sin nota final */ background: transparent; /* Sin color si no hay nota */ color: var(--muted) !important; /* Texto gris */ } .final-cell { /* Nota final ocupando toda la celda */ border-radius: 0 !important; /* Quita esquinas redondeadas */ padding: 0 !important; /* Permite que el color llegue a toda la celda */ vertical-align: middle; /* Centra el número verticalmente */ } .final-red, .final-orange, .final-yellow, .final-green, .final-empty { /* Colores de nota final en celda completa */ background-clip: border-box !important; /* Hace que el fondo ocupe toda la celda */ } .grades-table input { /* Hace más compactos los cuadros de nota */ width: 100% !important; /* Ocupa el ancho de la celda hasta el máximo, en vez de un ancho fijo que desborda columnas estrechas */ max-width: 68px !important; /* Evita que vuelva a crecer */ min-width: 0 !important; /* Permite que se encoja si la columna es más estrecha */ box-sizing: border-box !important; /* Incluye el padding dentro de ese ancho */ display: block !important; /* Hace que el margin:auto de otras reglas lo centre de verdad dentro de la celda */ margin: 0 auto !important; /* Centra el cuadro de nota dentro de la celda */ } .points-grade-cell input { /* Hace más compacto el input de puntos */ width: 62px !important; /* Reduce el ancho para notas tipo /8 */ max-width: 62px !important; /* Evita que se alargue */ } .final-cell { /* Número de nota final más grande */ font-size: 22px !important; /* Aumenta mucho la nota final */ font-weight: 900 !important; /* Mantiene el número muy destacado */ } #selectedStudentName { /* Nombre del alumno seleccionado */ font-size: 15px; /* Hace el nombre un poco más grande */ font-weight: 700; /* Hace el nombre más visible */ } #classSelect { /* Selector de clase activa */ font-size: 15px; /* Hace el nombre de la clase un poco más grande */ font-weight: 700; /* Hace el texto más visible */ } input, select, textarea { /* Centra visualmente el contenido de campos */ line-height: normal; /* Evita desajustes verticales del navegador */ } input, select { /* Inputs y selectores */ display: flex; /* Ayuda al centrado vertical */ align-items: center; /* Centra verticalmente el contenido */ } .grades-table input { /* Celdas donde se escriben notas */ height: 36px !important; /* Altura uniforme */ line-height: 36px !important; /* Centra el número verticalmente */ padding-top: 0 !important; /* Evita desplazamiento hacia abajo */ padding-bottom: 0 !important; /* Evita desplazamiento hacia arriba */ } .student-dropdown-button { /* Selector personalizado de alumno */ height: 38px; /* Mantiene altura uniforme */ align-items: center; /* Centra el nombre verticalmente */ } #classSelect, #termSelect, #studentSortSelect { /* Selectores principales */ height: 38px; /* Altura uniforme */ padding-top: 0; /* Ajusta centrado vertical */ padding-bottom: 0; /* Ajusta centrado vertical */ } .condition-cell, .final-cell, .grades-table td, .grades-table th { /* Celdas de la tabla */ vertical-align: middle !important; /* Centra contenido verticalmente */ } #modalClose { /* Botón X de cerrar modal */ border: 1px solid #f0b8b5 !important; /* Añade borde rojo suave como otros botones */ background: transparent !important; /* Elimina el fondo rosado de la X del modal */ color: #c5342d !important; /* X roja */ } #modalClose:hover { /* Hover del botón cerrar modal */ background: #ffe8e8 !important; /* Fondo rojo más visible al pasar el ratón */ border-color: #de8f89 !important; /* Borde rojo más marcado */ } .top-login-tools { /* Zona derecha de usuario dentro de la barra superior */ position: static !important; /* Quita la posición absoluta para que respete el layout de la barra */ top: auto !important; /* Anula la distancia superior antigua */ right: auto !important; /* Anula la distancia derecha antigua */ z-index: 3 !important; /* Mantiene el bloque por encima si hay solapes */ padding-right: 16px !important; /* Separa el bloque de usuario del borde derecho de la barra */ display: flex !important; /* Permite alinear la caja interior */ align-items: center !important; /* Centra verticalmente el bloque interior */ justify-content: flex-end !important; /* Mantiene el bloque hacia la derecha */ } /* Fin zona derecha de usuario */ .session-login-link, .session-logout { /* Botones/enlaces de sesión */ display: inline-flex; /* Permite centrar texto */ align-items: center; /* Centra verticalmente */ justify-content: center; /* Centra horizontalmente */ min-height: 34px; /* Altura cómoda */ padding: 7px 13px; /* Espacio interior */ border-radius: 14px; /* Bordes redondeados */ border: 1px solid #c9d8ee; /* Borde azul suave */ background: #f4f8fe; /* Fondo azul claro */ color: #2f5f9f; /* Texto azul */ font-size: 12px; /* Tamaño de texto */ font-weight: 900; /* Texto destacado */ text-transform: uppercase; /* Mayúsculas */ text-decoration: none; /* Sin subrayado */ } .session-login-link:hover, .session-logout:hover { /* Hover sesión */ background: #e8f1ff; /* Fondo azul más visible */ border-color: #a9c3e8; /* Borde más marcado */ color: #234f86; /* Texto más intenso */ } .session-box { /* Caja cuando hay usuario conectado */ display: flex; /* Organiza nombre y cerrar sesión */ flex-direction: column; /* Coloca nombre arriba y cerrar sesión abajo */ align-items: flex-end; /* Alinea a la derecha */ gap: 4px; /* Separa nombre y enlace */ } .session-client { /* Nombre del usuario conectado */ color: var(--text); /* Color principal */ font-size: 13px; /* Tamaño del nombre */ font-weight: 900; /* Nombre destacado */ text-transform: uppercase; /* Nombre en mayúsculas */ } .login-page { /* Página completa de login */ min-height: 100vh; /* Ocupa toda la altura */ display: grid; /* Permite centrar contenido */ place-items: center; /* Centra horizontal y vertical */ background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%); /* Fondo igual a la app */ overflow: auto; /* Permite scroll si hace falta */ } .login-shell { /* Contenedor externo del login */ width: 100%; /* Ocupa ancho completo */ display: flex; /* Permite centrar */ justify-content: center; /* Centra horizontalmente */ padding: 20px; /* Espacio en pantallas pequeñas */ } .login-card { /* Tarjeta del login */ width: min(420px, 92vw); /* Ancho máximo adaptable */ background: var(--panel); /* Fondo de tarjeta */ border: 1px solid var(--border); /* Borde suave */ border-radius: 22px; /* Bordes redondeados */ padding: 26px; /* Espacio interior */ box-shadow: none; /* Sin sombra */ } .login-title { /* Título login */ margin: 0; /* Sin margen superior */ font-size: 26px; /* Tamaño título */ font-weight: 900; /* Texto fuerte */ text-transform: uppercase; /* Mayúsculas */ color: var(--text); /* Color principal */ } .login-subtitle { /* Subtítulo login */ margin: 6px 0 18px 0; /* Separación */ color: var(--muted); /* Color gris */ font-size: 13px; /* Tamaño texto */ } .login-form { /* Formulario login */ display: grid; /* Campos uno debajo de otro */ gap: 12px; /* Separación entre campos */ } .login-error { /* Error de login */ margin-bottom: 14px; /* Separación inferior */ padding: 10px 12px; /* Espacio interior */ border-radius: 12px; /* Bordes redondeados */ background: #fff1f1; /* Fondo rojo suave */ border: 1px solid #f0b8b5; /* Borde rojo suave */ color: #b42318; /* Texto rojo */ font-size: 13px; /* Tamaño texto */ font-weight: 800; /* Texto visible */ } .login-success { /* Aviso positivo en login (p.ej. código enviado), mismo formato que .login-error pero en verde */ margin-bottom: 14px; /* Separación inferior */ padding: 10px 12px; /* Espacio interior */ border-radius: 12px; /* Bordes redondeados */ background: #eefbf1; /* Fondo verde suave */ border: 1px solid #a9dfb8; /* Borde verde suave */ color: #1a7a35; /* Texto verde */ font-size: 13px; /* Tamaño texto */ font-weight: 800; /* Texto visible */ } .login-back-link { /* Enlace volver */ text-align: center; /* Centra texto */ color: #2f5f9f; /* Azul suave */ font-size: 12px; /* Tamaño pequeño */ font-weight: 800; /* Texto fuerte */ text-transform: uppercase; /* Mayúsculas */ text-decoration: none; /* Sin subrayado */ } .login-back-link:hover { /* Hover volver */ text-decoration: underline; /* Subraya al pasar ratón */ } .login-page { /* Página de login con fondo visible */ background: transparent !important; /* Quita el fondo propio del login */ position: relative; /* Permite crear fondo con pseudo-elemento */ } .login-page::before { /* Fondo igual que la app detrás del login */ content: ""; /* Crea una capa visual */ position: fixed; /* Ocupa toda la pantalla */ inset: 0; /* Ajusta a todos los bordes */ background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%); /* Fondo de la app */ z-index: -1; /* Lo manda detrás de la tarjeta */ } .login-card { /* Tarjeta de login transparente */ background: rgba(255, 255, 255, 0.62) !important; /* Hace visible el fondo detrás */ backdrop-filter: blur(12px); /* Difumina el fondo */ -webkit-backdrop-filter: blur(12px); /* Compatibilidad */ border: 1px solid rgba(211, 222, 236, 0.65) !important; /* Borde suave */ } .login-page { /* Página de login sobre fondo de la app */ background: transparent !important; /* Quita el fondo propio */ overflow: hidden !important; /* Evita scroll */ } .login-bg-frame { /* App visible detrás del login */ position: fixed; /* Fija el fondo a pantalla completa */ inset: 0; /* Ocupa toda la pantalla */ width: 100vw; /* Ancho completo */ height: 100vh; /* Alto completo */ border: none; /* Quita borde del iframe */ z-index: 0; /* Lo deja detrás */ pointer-events: none; /* Evita poder clicar la app de fondo */ filter: blur(2px); /* Difumina ligeramente la app */ } .login-shell { /* Contenedor del login por encima del fondo */ position: relative; /* Permite subirlo sobre el iframe */ z-index: 2; /* Lo pone por encima de la app */ } .login-card { /* Tarjeta transparente */ background: rgba(255, 255, 255, 0.86) !important; /* Hace la tarjeta menos transparente */ backdrop-filter: blur(14px); /* Efecto cristal */ -webkit-backdrop-filter: blur(14px); /* Compatibilidad */ border: 1px solid rgba(211, 222, 236, 0.70) !important; /* Borde suave */ } html.login-page, body.login-page { /* Permite hacer scroll si la tarjeta (por ejemplo, el formulario de crear usuari) no cabe entera en pantallas pequeñas o portátiles con poca altura. */ height: auto !important; /* Anula la altura fija del 100% heredada de la regla general: con altura fija, el contenido que sobra quedaba encerrado dentro de body en vez de hacer crecer la página y poder desplazarla con scroll normal. */ min-height: 100% !important; /* Mantiene la pantalla completa cubierta cuando el contenido cabe sin problema. */ overflow-y: auto !important; /* Anula el overflow:hidden global, pensado para la app principal, que aquí bloqueaba ver el contenido que no cabía. */ overflow-x: hidden !important; /* Mantiene bloqueado el scroll horizontal. */ } body.login-page .login-card { /* Fuerza que la tarjeta de login sea menos transparente */ background: rgba(255, 255, 255, 0.92) !important; /* Hace la tarjeta mucho menos transparente */ backdrop-filter: blur(8px) !important; /* Reduce el efecto cristal */ -webkit-backdrop-filter: blur(8px) !important; /* Compatibilidad */ } body.login-page .login-bg-frame { /* Suaviza la app que se ve detrás */ opacity: 0.55 !important; /* Hace que el fondo moleste menos */ } .session-logout { /* Botón cerrar sesión en rojo suave */ background: #fff5f5 !important; /* Fondo rojo claro */ color: #c5342d !important; /* Texto rojo */ border: 1px solid #f0b8b5 !important; /* Borde rojo suave */ } .session-logout:hover { /* Hover cerrar sesión */ background: #ffe8e8 !important; /* Fondo rojo más visible */ border-color: #de8f89 !important; /* Borde rojo más marcado */ color: #a61f1a !important; /* Texto rojo más intenso */ } .session-logout { /* Botón cerrar sesión con la misma altura que guardar e importar */ min-height: 28px !important; /* Iguala la altura mínima a los botones de guardar e importar */ height: 28px !important; /* Fuerza la misma altura visual que los botones de icono */ padding: 7px 13px !important; /* Mantiene un espacio interior equilibrado */ border-radius: 14px !important; /* Iguala el redondeo al resto de botones superiores */ font-size: 11px !important; /* Mantiene el texto compacto para que quepa bien */ display: inline-flex !important; /* Permite centrar el texto vertical y horizontalmente */ align-items: center !important; /* Centra el texto verticalmente */ justify-content: center !important; /* Centra el texto horizontalmente */ } .compact-hero h1 { /* Baja solo el título principal */ top: 12px !important; /* Mueve CONTROL VALVE un poco hacia abajo sin tocar nada más */ } .masked-password { /* Hace que un input de texto se vea como contraseña */ -webkit-text-security: disc; /* Oculta los caracteres como puntos en Chrome/Edge */ text-security: disc; /* Compatibilidad adicional */ } .bulk-students-table { /* Contenedor de la tabla tipo Excel para añadir alumnos */ display: grid; /* Organiza cabecera y filas en vertical */ gap: 0; /* Quita separación entre filas para parecer tabla */ border: 1px solid #e9edf4; /* Usa un borde más suave */ border-radius: 8px; /* Unifica el redondeo con el resto de la app */ overflow: hidden; /* Recorta bordes internos */ background: #ffffff; /* Mantiene fondo limpio */ } /* Fin tabla alumnado */ .bulk-students-header { /* Cabecera de la tabla de alumnos */ display: grid; /* Divide la cabecera en columnas */ grid-template-columns: 1fr 1fr; /* Crea dos columnas iguales */ padding-right: 15px; /* Reserva el mismo espacio que ocupa la barra de scroll */ background: #f8fafc; /* Fondo más limpio y menos azulado */ border-bottom: 1px solid #e9edf4; /* Línea inferior suave */ color: #172334; /* Texto principal */ font-size: 11px; /* Cabecera más compacta */ font-weight: 700; /* Reduce la negrita */ text-transform: uppercase; /* Mantiene mayúsculas */ } /* Fin cabecera tabla alumnado */ .bulk-students-header div { /* Celda de cabecera */ padding: 8px 10px; /* Espaciado interior más compacto */ border-right: 1px solid #e9edf4; /* Separador vertical más suave */ } /* Fin celda cabecera */ .bulk-students-header div:last-child { /* Última celda de cabecera */ border-right: none; /* Quita separador final */ } .bulk-students-row { /* Fila editable de alumno */ display: grid; /* Divide la fila en columnas */ grid-template-columns: 1fr 1fr; /* Crea columna nombre y condición */ border-bottom: 1px solid #e9edf4; /* Línea inferior más suave */ } /* Fin fila alumnado */ .bulk-students-row:last-child { /* Última fila */ border-bottom: none; /* Quita línea inferior final */ } .bulk-students-row input { /* Inputs de la tabla */ border: none; /* Quita borde individual */ border-radius: 0; /* Quita esquinas individuales */ height: 34px; /* Hace las filas un poco más compactas */ font-size: 13px; /* Mantiene texto legible */ font-weight: 500; /* Reduce peso visual */ padding: 0 10px; /* Espaciado lateral */ background: white; /* Fondo blanco */ } /* Fin inputs tabla */ .bulk-students-row input:first-child { /* Primera columna de cada fila */ border-right: 1px solid #e9edf4; /* Separador vertical más suave */ } /* Fin separador columnas */ .bulk-students-row input:focus { /* Campo activo */ outline: 2px solid var(--primary); /* Marca azul el campo seleccionado */ outline-offset: -2px; /* Mete el borde azul dentro de la celda */ } .modal-card { /* Permite que los desplegables del modal salgan sin cortarse */ max-height: 94vh; /* Mantiene el modal alto en pantalla */ width: min(620px, 94vw); /* Mantiene la anchura amplia del modal */ overflow: visible !important; /* Permite que el desplegable se vea fuera del modal */ } .bulk-students-rows { /* Contenedor scrollable de filas de alumnado */ max-height: 62vh; /* Permite ver muchas filas sin que el modal se salga */ overflow-y: auto; /* Activa scroll vertical dentro de la tabla */ overflow-x: hidden; /* Evita scroll horizontal innecesario */ } .bulk-students-table { /* Ajusta la tabla masiva de alumnado */ max-height: 68vh; /* Limita la altura total de la tabla */ overflow: hidden; /* Mantiene las esquinas redondeadas limpias */ } #classSelect, #termSelect, #studentSortSelect { /* Mantiene visibles los selectores nativos mientras ajustamos los personalizados */ display: none !important; /* Vuelve a mostrar los selectores originales */ } .pretty-select { /* Contenedor general del selector bonito */ position: relative; /* Permite colocar el menú desplegable debajo */ width: 100%; /* Ocupa todo el ancho disponible */ } .pretty-select-button { /* Botón visible del selector bonito */ width: 100%; /* Ocupa todo el ancho */ height: 38px; /* Igual altura que el selector de alumno */ border: 1px solid var(--border); /* Borde suave */ border-radius: 12px; /* Bordes redondeados */ background: white; /* Fondo blanco */ padding: 0 12px; /* Espacio lateral */ display: flex; /* Organiza texto y flecha */ align-items: center; /* Centra verticalmente */ justify-content: space-between; /* Separa texto y flecha */ font-size: 15px; /* Texto más visible */ font-weight: 700; /* Hace el valor seleccionado más claro */ color: var(--text); /* Color principal */ cursor: pointer; /* Muestra cursor de botón */ } .pretty-select-button:focus, .pretty-select-button:focus-visible, .pretty-select-button:active { /* Es un