/* Estilos Generales Base */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    font-family: 'Roboto', sans-serif;
}

html.cpp-plugin-active,
body.cpp-plugin-active {
    overflow: hidden;
}

body.cpp-cuaderno-page-active {
    /* overflow: hidden; podrías añadirlo aquí si es necesario */
}

/* --- Estructura Principal del Cuaderno --- */
.cpp-cuaderno-viewport-classroom {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #f8f9fa;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 100;
}

body.admin-bar .cpp-cuaderno-viewport-classroom {
    top: 32px;
    height: calc(100vh - 32px);
}

@media screen and (max-width: 782px) {
    body.admin-bar .cpp-cuaderno-viewport-classroom {
        top: 46px;
        height: calc(100vh - 46px);
    }
}

/* Sidebar (Menú Lateral de Clases) */
.cpp-cuaderno-sidebar-classroom {
    width: 280px;
    background-color: #fff;
    border-right: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1010;
    transform: translateX(-100%);
    height: 100vh;
}
body.admin-bar .cpp-cuaderno-sidebar-classroom {
    top: 32px;
    height: calc(100vh - 46px);
}
@media screen and (max-width: 782px) {
    body.admin-bar .cpp-cuaderno-sidebar-classroom {
        top: 46px;
        height: calc(100vh - 46px);
    }
}

.cpp-cuaderno-sidebar-classroom.cpp-sidebar-visible {
    transform: translateX(0);
    box-shadow: 0 0 20px rgba(0,0,0,0.15);
}
.cpp-cuaderno-sidebar-classroom .cpp-sidebar-header-placeholder {
    height: 56px;
    flex-shrink: 0;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    padding: 0 12px 0 16px;
    font-size: 16px;
    font-weight: 500;
    color: #3c4043;
}
.cpp-cuaderno-sidebar-classroom .cpp-sidebar-header-placeholder .cpp-header-menu-btn {
    background: none; border: none; padding: 8px; margin-right: 12px;
    cursor: pointer; color: #5f6368; border-radius: 50%;
}
.cpp-cuaderno-sidebar-classroom .cpp-sidebar-header-placeholder .cpp-header-menu-btn:hover {
    background-color: rgba(0,0,0,0.06);
}
.cpp-cuaderno-sidebar-classroom .cpp-sidebar-header-placeholder .cpp-header-menu-btn .dashicons {
    font-size: 24px; line-height: 1; vertical-align: middle;
}
.cpp-sidebar-nav {
    flex-grow: 1; overflow-y: auto; padding: 12px 0;
}
ul.cpp-sidebar-clases-list { list-style: none; margin: 0; padding: 0; }
li.cpp-sidebar-clase-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 8px 0 0; margin: 2px 8px 2px 0;
}
li.cpp-sidebar-clase-item > a { 
    cursor: pointer;
}
li.cpp-sidebar-clase-item a {
    display: flex; align-items: center; padding: 10px 16px 10px 24px;
    text-decoration: none; color: #3c4043; font-size: 14px; font-weight: normal;
    flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    border-radius: 0 25px 25px 0; transition: background-color 0.15s ease, color 0.15s ease;
}
.cpp-sidebar-clase-icon { margin-right: 20px; font-size: 20px; color: #5f6368; transition: color 0.15s ease; }
li.cpp-sidebar-clase-item:hover a { background-color: #f1f3f4; } 
li.cpp-sidebar-clase-item.cpp-sidebar-item-active a { background-color: #e8f0fe; color: #1a73e8; font-weight: 500; }
li.cpp-sidebar-clase-item.cpp-sidebar-item-active .cpp-sidebar-clase-icon { color: #1a73e8; }

.cpp-sidebar-item-actions { display: flex; align-items: center; flex-shrink: 0; }
.cpp-sidebar-clase-alumnos-btn, .cpp-sidebar-clase-settings-btn {
    background: none; border: none; padding: 8px; cursor: pointer;
    color: #5f6368; border-radius: 50%;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.cpp-sidebar-clase-alumnos-btn .dashicons, .cpp-sidebar-clase-settings-btn .dashicons { font-size: 20px; line-height: 1; }
.cpp-sidebar-clase-alumnos-btn:hover, .cpp-sidebar-clase-settings-btn:hover { background-color: rgba(0,0,0,0.08); }
li.cpp-sidebar-clase-item.cpp-sidebar-item-active .cpp-sidebar-clase-alumnos-btn,
li.cpp-sidebar-clase-item.cpp-sidebar-item-active .cpp-sidebar-clase-settings-btn { color: #1a73e8; }
.cpp-sidebar-no-clases { padding: 16px 24px; font-size: 14px; color: #5f6368; }
.cpp-sidebar-footer { padding: 16px; border-top: 1px solid #e9eaea; flex-shrink: 0; }
.cpp-sidebar-add-clase-btn { width: 100%; }

/* Contenido Principal del Cuaderno */
.cpp-cuaderno-main-content-classroom {
    flex-grow: 1; min-height: 0; display: flex; flex-direction: column;
    overflow: hidden; background-color: #f8f9fa;
}

/* Barra Superior Fija */
.cpp-fixed-top-bar {
    height: 50px; flex-shrink: 0; width: 100%; display: flex; align-items: center;
    padding: 0 15px; box-sizing: border-box; z-index: 30;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
.cpp-top-bar-menu-btn#cpp-a1-menu-btn-toggle {
    color: inherit !important; margin-right: 12px; padding: 8px; border-radius: 50%;
    background: none; border: none; cursor: pointer; display: inline-flex;
    align-items: center; justify-content: center; transition: background-color 0.15s ease;
    margin-top: -6px;
}
.cpp-top-bar-menu-btn#cpp-a1-menu-btn-toggle .dashicons { font-size: 24px; line-height: 1; vertical-align: middle; }
.cpp-fixed-top-bar[style*="color: rgb(255, 255, 255)"] .cpp-top-bar-menu-btn#cpp-a1-menu-btn-toggle:hover,
.cpp-fixed-top-bar[style*="color: #FFF"] .cpp-top-bar-menu-btn#cpp-a1-menu-btn-toggle:hover,
.cpp-fixed-top-bar[style*="color: #FFFFFF"] .cpp-top-bar-menu-btn#cpp-a1-menu-btn-toggle:hover {
    background-color: rgba(255,255,255,0.2) !important;
}
.cpp-fixed-top-bar:not([style*="color: rgb(255, 255, 255)"]):not([style*="color: #FFF"]):not([style*="color: #FFFFFF"]) .cpp-top-bar-menu-btn#cpp-a1-menu-btn-toggle:hover {
    background-color: rgba(0,0,0,0.1) !important;
}
#cpp-cuaderno-nombre-clase-activa-a1.cpp-top-bar-class-name {
    color: inherit !important; font-size: 18px; font-weight: 500;
    margin-left: 0; line-height: normal; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}

/* Área y Contenido del Cuaderno */
#cpp-cuaderno-tabla-area {
    flex-grow: 1; display: flex; flex-direction: column;
    min-height: 0; background-color: #fff;
}
#cpp-cuaderno-contenido {
    display: flex; flex-direction: column; flex-grow: 1;
    min-height: 0;
}

/* Anulación específica para la pestaña Cuaderno para permitir 'position: sticky' */
#cpp-main-tab-cuaderno.active #cpp-cuaderno-contenido {
    overflow: visible;
}
.cpp-cuaderno-tabla-wrapper {
    flex-grow: 1; min-height: 0; 
    position: relative; background-color: #fff; border: none;
    cursor: default;
}
.cpp-cuaderno-mensaje-vacio, .cpp-cuaderno-cargando, .cpp-welcome-screen {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    text-align: center;
    padding: 20px;
}

.cpp-welcome-screen {
    background-color: #f8f9fa;
    color: #3c4043;
}

.cpp-welcome-title {
    font-size: 28px;
    font-weight: 500;
    margin-bottom: 8px;
}

.cpp-welcome-subtitle {
    font-size: 16px;
    color: #5f6368;
    margin-bottom: 24px;
    max-width: 450px;
}

.cpp-welcome-actions {
    display: flex;
    gap: 15px;
}

/* Tabla Principal del Cuaderno */
.cpp-cuaderno-tabla {
    min-width: min-content; border-collapse: collapse;
    font-size: 14px; table-layout: fixed; border-spacing: 0;
}
.cpp-cuaderno-tabla th,
.cpp-cuaderno-tabla td {
    border-left: none;
    border-right: 1px solid #eeeeee;
    border-top: none;
    border-bottom: 1px solid #eeeeee;
    padding: 10px 14px; 
    text-align: left; vertical-align: middle;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cpp-cuaderno-tabla th:first-child,
.cpp-cuaderno-tabla td:first-child {
    border-left: none;
}
.cpp-cuaderno-tabla tbody tr:last-child td {
    border-bottom: none;
}

.cpp-cuaderno-tabla thead th {
    position: -webkit-sticky; position: sticky; top: 0; z-index: 10;
    font-weight: 500;
    height: auto; min-height: 56px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
}

/* Celda A1 - Controles del Cuaderno */
.cpp-cuaderno-tabla thead .cpp-cuaderno-th-alumno {
    position: -webkit-sticky; position: sticky; left: 0; top: 0;
    width: 270px; min-width: 270px; max-width: 270px;
    padding: 0 !important; z-index: 16 !important; vertical-align: top;
    background-color: #ffffff !important;
    color: #3c4043;
    border-right: 1px solid #e0e0e0;
}
.cpp-cuaderno-th-alumno .cpp-a1-controls-container {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px; width: 100%; height: 100%; min-height: 56px;
}
.cpp-a1-icons-row {
    display: flex; align-items: center; flex-shrink: 0; gap: 8px;
}
.cpp-cuaderno-th-alumno .cpp-a1-icons-row .cpp-btn-icon {
    background: none; border: none; padding: 8px; cursor: pointer;
    color: #5f6368; border-radius: 50%; display: inline-flex;
    align-items: center; justify-content: center;
    transition: background-color 0.15s ease, color 0.2s ease; line-height: 1;
}
.cpp-cuaderno-th-alumno .cpp-a1-icons-row .cpp-btn-icon:hover {
    background-color: #e8f0fe !important; color: #1a73e8 !important;
}
.cpp-a1-icons-row .cpp-btn-icon .dashicons {
    font-size: 20px;
    line-height: 1; vertical-align: middle;
}
.cpp-cuaderno-th-alumno .cpp-a1-icons-row #cpp-a1-add-activity-btn { margin-left: auto; }
.cpp-a1-icons-row #cpp-a1-add-activity-btn .dashicons { font-size: 22px; }

/* Cabecera de Nota Final */
.cpp-cuaderno-th-final {
    position: -webkit-sticky; position: sticky; right: 0;
    text-align: center !important;
    width: 120px; min-width: 120px; max-width: 120px;
    background-color: #ffffff !important;
    color: #5f6368;
    z-index: 15 !important; cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    vertical-align: top; padding: 10px 12px 8px 12px;
    box-shadow: inset 1px 0 0 #e0e0e0; 
    font-weight: 500;
}
.cpp-th-final-content-wrapper { line-height: 1.2; display: block; text-align: center; margin-bottom: 4px; }
.cpp-cuaderno-th-final .cpp-nota-final-base-info { display: block; font-size: 11px; font-weight: normal; color: #5f6368; margin-top: 2px; }
.cpp-th-final-actions { display: flex; justify-content: center; gap: 8px; margin-top: 8px; }
.cpp-th-final-actions .cpp-btn-icon { background: none; border: none; padding: 6px; cursor: pointer; color: #5f6368; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.15s ease, color 0.2s ease; }
.cpp-th-final-actions .cpp-btn-icon:hover { background-color: #e8f0fe !important; color: #1a73e8 !important; }
.cpp-th-final-actions .cpp-btn-icon.active { background-color: #e8f0fe !important; color: #1a73e8 !important; }
.cpp-th-final-actions .cpp-btn-icon svg { width: 20px; height: 20px; }
tr.alumno-suspenso > td { background-color: #fce8e6 !important; }

/* Celdas de datos fijas (Alumno y Nota Final) */
.cpp-cuaderno-tabla tbody td.cpp-cuaderno-td-alumno {
    position: -webkit-sticky; position: sticky; left: 0; z-index: 5;
    font-weight: normal;
    cursor: pointer; 
    transition: background-color 0.2s ease-in-out;
    width: 270px; min-width: 270px; max-width: 270px;
    overflow: hidden; text-overflow: ellipsis;
    background-color: #ffffff;
    border-right: 1px solid #e0e0e0;
}
.cpp-cuaderno-tabla tbody td.cpp-cuaderno-td-final {
    position: -webkit-sticky; position: sticky; right: 0;
    width: 120px; min-width: 120px; max-width: 120px;
    text-align: center !important; font-weight: 500;
    z-index: 5;
    background-color: #ffffff;
    box-shadow: inset 1px 0 0 #e0e0e0; 
}
.cpp-cuaderno-tabla tbody tr[style*="background-color"] td.cpp-cuaderno-td-alumno,
.cpp-cuaderno-tabla tbody tr[style*="background-color"] td.cpp-cuaderno-td-final {
    background-color: inherit !important; 
}

.cpp-cuaderno-td-final {
    font-size: 16px;
    position: relative;
    cursor: pointer;
}

.cpp-warning-icon {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    font-size: 18px;
}

.cpp-editable-activity-name {
    display: block; padding: 2px 0; font-weight: 500;
    margin-bottom: 4px; font-size: 13px;
    line-height: 1.3; overflow: hidden; text-overflow: ellipsis;
    white-space: normal; max-height: 3.9em;
}
.cpp-cuaderno-th-actividad {
    width: 140px; min-width: 140px; max-width: 140px;
    text-align: center !important; white-space: normal;
    vertical-align: top; cursor: pointer;
    transition: filter 0.15s ease-in-out;
    overflow: hidden;
    font-weight: 500;
}
.cpp-cuaderno-th-actividad:hover { filter: brightness(95%); }
.cpp-cuaderno-th-actividad[data-evaluacion-id]:hover {
    filter: brightness(92%);
    box-shadow: inset 0 -3px 0 #1a73e8;
}
.cpp-actividad-notamax, .cpp-actividad-categoria, .cpp-actividad-fecha {
    font-size: 11px; line-height: 1.2; margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: normal;
}

.cpp-cuaderno-td-nota {
    text-align: center !important;
    position: relative;
    width: 140px;
    min-width: 140px;
    max-width: 140px;
    padding: 2px 4px; 
    vertical-align: middle;
    height: 36px; 
}

.cpp-input-nota {
    width: 100%;
    height: 30px; 
    line-height: 30px; 
    padding: 0 5px; 
    margin: 0; 
    border: 1px solid transparent; 
    background-color: transparent;
    border-radius: 0;
    text-align: center;
    font-size: 22px;
    color: inherit;
    -moz-appearance: textfield;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
    box-sizing: border-box;
    outline: none;
    vertical-align: middle; 
    cursor: default;
}

.cpp-input-nota:focus {
    background-color: #fff !important;
    border: 1px solid #1a73e8 !important; 
    cursor: text;
}

.cpp-input-nota.cpp-nota-guardada {
    background-color: #e6f4ea !important;
    border-color: #1e8e3e !important;
}

.cpp-no-aplica-badge {
    background-color: #f1f3f4;
    color: #5f6368;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.5px;
    border: 1px solid #dadce0;
}
.cpp-input-nota.cpp-nota-error,
.cpp-input-nota.cpp-nota-error:focus {
    background-color: #fce8e6 !important;
    border-color: #d93025 !important;
}
.cpp-nota-validation-message {
    display: block; font-size: 11px; color: #d93025;
    margin-top: 3px; line-height: 1.1; text-align: center; width: 100%;
}

.cpp-cuaderno-td-alumno { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.cpp-alumno-avatar-cuaderno {
    width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: #e9ecef;
    display: flex; align-items: center; justify-content: center;
    font-weight: 500; font-size: 14px; color: #495057; flex-shrink: 0;
}
.cpp-alumno-avatar-cuaderno img, .cpp-alumno-avatar-cuaderno span {
    width: 100%; height: 100%; object-fit: cover; display: flex; align-items: center; justify-content: center;
}
.cpp-alumno-nombre-cuaderno { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-grow: 1; font-weight: normal;}

.cpp-sidebar-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.3); z-index: 899;
}
.cpp-sidebar-overlay.cpp-sidebar-visible { display: block; }

/* Estilos Generales de Modales */
.cpp-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cpp-modal-content {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 23px 5px rgba(0,0,0,0.2), 0 2px 6px rgba(0,0,0,0.15);
    max-width: 560px;
    width: 90%;
    padding: 24px;
    position: relative;
    font-size: 14px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Estilos para la Paleta de Símbolos (Diseño de Lista Única) */
#cpp-symbol-list-container {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.cpp-symbol-row {
    display: flex;
    align-items: center;
    gap: 15px;
}

.cpp-global-evaluacion-selector {
    margin-left: 16px;
}

#cpp-global-evaluacion-selector {
    background-color: rgba(255, 255, 255, 0.8);
    color: black;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    max-width: 250px;
}

#cpp-global-evaluacion-selector:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

#cpp-global-evaluacion-selector:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

#cpp-global-evaluacion-selector option {
    background-color: #2c3e50;
    color: #ecf0f1;
}

.cpp-symbol-item {
    flex: 0 0 40px; /* Ancho fijo para el símbolo */
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4em;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.cpp-symbol-item:hover {
    background-color: #e8f0fe;
    border-color: #1a73e8;
}

.cpp-legend-input {
    flex: 1; /* Ocupa el resto del espacio */
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

/* --- INICIO: Rediseño Simplificado Pestañas v4 --- */

/* La barra superior principal */
.cpp-fixed-top-bar {
    padding: 0;
    box-shadow: none; /* La sombra se aplica a las secciones */
}

/* Sección coloreada (izquierda + centro) */
.cpp-top-bar-left, .cpp-top-bar-center.cpp-tabs-clase-specific {
    height: 100%;
    display: flex;
    align-items: flex-end;
    background-color: inherit; /* Hereda el color de la clase */
}

/* Ajuste para que la sección de color ocupe más espacio */
.cpp-top-bar-left {
    flex-grow: 0;
    flex-shrink: 0;
}
.cpp-top-bar-center.cpp-tabs-clase-specific {
    flex-grow: 0; /* Más espacio para las pestañas */
    justify-content: flex-end;
    gap: 0; /* Sin espacio entre pestañas */
}

/* Pestañas de la clase */
.cpp-tabs-clase-specific .cpp-main-tab-link {
    height: 85%; /* Ocupar toda la altura */
    border-radius: 10px 10px 0 0 !important;
    padding: 0 25px;
    font-size: 15px; /* Tamaño de letra ajustado */
    font-weight: 600; /* Letra más destacada */
    text-transform: uppercase; /* MAYÚSCULAS */
    color: rgba(255, 255, 255, 0.8);
    background-color: transparent;
    border: none;
    border-right: 1px solid rgba(0,0,0,0.1); /* Separador sutil */
    border-bottom: 1px solid rgba(0,0,0,0.1);
    transition: all 0.2s ease-in-out;
    box-shadow: 0 -5px 10px -3px rgba(0,0,0,0.3);
}

.cpp-tabs-clase-specific .cpp-main-tab-link:hover {
    background-color: rgba(0,0,0,0.1);
    color: #fff;
}

.cpp-tabs-clase-specific .cpp-main-tab-link.active {
    background-color: white !important;
    color: #333 !important;
    box-shadow: none; /* Sin sombra en la pestaña activa */
    position: relative;
    margin-bottom: -1px;
    border-bottom: 1px solid white;
    border-right: none;
}

/* Sección blanca (derecha) */
.cpp-top-bar-right {
    background-color: #fff;
    height: 100%;
    border-radius: 0; /* Sin bordes redondeados */
    flex-grow: 1; /* Menos espacio */
    justify-content: flex-end; /* Alinear contenido a la derecha */
    box-shadow: none !important; /* Sin sombra */
    border-left: 1px solid #ddd;
}

/* --- FIN: Rediseño Simplificado Pestañas v4 --- */

/* --- Mejora de Espaciado en Modal de Importación --- */
#cpp-import-step-2-options p {
    margin-bottom: 15px;
}

#cpp-import-step-2-options .cpp-form-group {
    margin-top: 20px;
    margin-bottom: 25px;
}

/* --- Mejoras de Estilo en Pestaña Semana --- */
.cpp-semana-table {
    width: 100%;
    table-layout: fixed; /* Importante para que los anchos funcionen bien */
}

.cpp-semana-header-row {
    height: 50px; /* Reducir la altura de la cabecera */
}

.cpp-semana-th-hora, .cpp-semana-td-hora {
    width: 80px; /* Ancho fijo y más estrecho para la columna de la hora */
    text-align: center;
}

.cpp-semana-th-dia {
    text-align: center;
    vertical-align: middle; /* Centrado vertical */
    padding: 4px 8px; /* Reducir padding vertical */
}

.cpp-semana-table td {
    vertical-align: top;
    padding: 8px;
    position: relative; /* Para el posicionamiento de los puntos */
    overflow: hidden; /* Para que los puntos no se salgan */
}

.cpp-semana-table td .cpp-actividad-punto {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin: 2px;
}

.cpp-semana-holiday-cell {
    background-color: #f1f3f4 !important;
    vertical-align: middle !important;
    text-align: center !important;
    padding: 0 !important;
    min-height: 300px; /* Ensure space for vertical text */
}

.cpp-vertical-text {
    text-transform: uppercase;
    font-weight: 400;
    color: #5f6368;
    height: 100%;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    margin: 0 auto;
    line-height: 1;
    text-align: center;
    padding: 20px 5px;
    max-height: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.cpp-vertical-text span {
    display: block;
    flex-shrink: 0;
}

.cpp-horario-header-row th {
    padding-top: 8px;
    padding-bottom: 8px;
}

.cpp-config-section {
    padding: 10px 0;
    background-color: #fff;
    border: none;
    margin-bottom: 25px;
}

.cpp-config-divider {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 30px 0;
}

#cpp-ponderaciones-eval-selector {
    max-width: 400px;
}

.cpp-config-content-area, .cpp-config-content-area h4, .cpp-config-content-area p, .cpp-config-content-area small, .cpp-config-content-area select, .cpp-config-content-area input {
    font-size: 15px !important;
}

.cpp-config-content-area h4 {
    font-size: 18px !important;
    font-weight: 500;
    margin-bottom: 15px;
}

.cpp-config-content-area p, .cpp-config-content-area small {
    line-height: 1.6;
}

.cpp-radio-group label {
    display: block;
    margin-bottom: 12px;
    font-size: 16px !important;
}

.cpp-radio-group input[type="radio"] {
    margin-right: 10px;
    transform: scale(1.2);
}
.cpp-modal-close { position: absolute; top: 12px; right: 12px; font-size: 24px; color: #5f6368; cursor: pointer; line-height: 1; padding: 4px; border-radius: 50%; }
.cpp-modal-close:hover { color: #202124; background-color: rgba(0,0,0,0.05); }
.cpp-modal-content h2 { margin-top: 0; margin-bottom: 24px; font-size: 20px; font-weight: 500; color: #202124; flex-shrink: 0; }
.cpp-form-group { margin-bottom: 20px; }
.cpp-form-group label { display: block; margin-bottom: 8px; font-weight: 500; font-size: 14px; color: #3c4043; }
.cpp-form-group input[type="text"], .cpp-form-group input[type="number"], .cpp-form-group input[type="date"], .cpp-form-group input[type="color"], .cpp-form-group textarea, .cpp-form-group select {
    width: 100%; padding: 10px 12px; font-size: 14px; line-height: 1.5; color: #3c4043;
    background-color: #fff; background-clip: padding-box; border: 1px solid #dadce0;
    border-radius: 4px; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.cpp-form-group input[type="text"]:focus, .cpp-form-group input[type="number"]:focus, .cpp-form-group input[type="date"]:focus, .cpp-form-group input[type="color"]:focus, .cpp-form-group textarea:focus, .cpp-form-group select:focus {
    border-color: #1a73e8; outline: 0; box-shadow: 0 0 0 1px #1a73e8 inset;
}
.cpp-form-group textarea { min-height: 80px; }
.cpp-form-group small { font-size: 13px; color: #5f6368; margin-top: 4px; display: block; }
.cpp-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; padding-top: 20px; border-top: 1px solid #e0e0e0; }

.cpp-color-swatches-container { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cpp-color-swatch { width: 28px; height: 28px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: border-color 0.15s ease-in-out, transform 0.1s ease-in-out; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.cpp-color-swatch:hover { transform: scale(1.1); }
.cpp-color-swatch.selected { border-color: #1a73e8; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1a73e8; }
.cpp-form-categoria-container .cpp-color-swatches-container.cpp-category-color-swatches { margin-bottom: 10px; }

.cpp-tab-nav { display: flex; border-bottom: 1px solid #e0e0e0; margin-bottom: 20px; }
.cpp-tab-link { padding: 10px 15px; cursor: pointer; border: none; background-color: transparent; font-size: 14px; font-weight: 500; color: #5f6368; margin-bottom: -1px; border-bottom: 2px solid transparent; }
.cpp-tab-link.active { color: #1a73e8; border-bottom-color: #1a73e8; }
.cpp-tab-link:hover { color: #1a73e8; }
.cpp-tab-content { display: none; }
.cpp-tab-content.active { display: block; }
#cpp-clase-modal-categorias-container .cpp-form-group { margin-top: 20px; }

.cpp-alumno-card { display: flex; align-items: center; justify-content: space-between; padding: 10px; border-bottom: 1px solid #e9ecef; }
.cpp-alumno-card:last-child { border-bottom: none; }
/* La clase .cpp-alumno-avatar ya existe y se usa en la config de clase. La ajustamos aquí */
#cpp-config-tab-alumnos .cpp-alumno-avatar {
    width: 36px;
    height: 36px;
}

.cpp-avatar-inicial { font-size: 16px; font-weight: 500; color: #495057; }
.cpp-alumno-info {
    flex-grow: 1;
    display: flex; /* Añadido para alinear avatar y nombre */
    align-items: center; /* Añadido */
    gap: 12px; /* Añadido para espaciar */
}
.cpp-alumno-info h4 { margin:0; font-size: 15px; font-weight: normal; }
.cpp-alumno-actions { display: flex; gap: 5px; }
.cpp-form-alumno-container { padding-top: 15px; border-top: 1px solid #e9ecef; margin-top: 15px; }
#cpp-foto-actual-preview img { margin-top: 5px; border:1px solid #ddd; padding:2px; }
.cpp-categorias-list { margin-bottom: 20px; }
.cpp-categorias-list h4, .cpp-form-categoria-container h4 { font-size: 16px; margin-bottom: 10px; font-weight: 500; }
.cpp-categorias-list ul { list-style: none; padding: 0; margin: 0; }
.cpp-criterios-list ul {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}
.cpp-criterios-list li {
    padding: 6px 12px;
    border: 1px solid #f0f0f0;
    border-radius: 6px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: normal;
    background: #fff;
    transition: background-color 0.2s;
}
.cpp-criterios-list li:hover {
    background-color: #f9f9f9;
}
.cpp-criterios-list li:last-child { margin-bottom: 0; }

.cpp-criterio-swap-select {
    flex-grow: 1;
    border: none !important;
    background: transparent !important;
    padding: 4px 8px !important;
    font-size: 14px !important;
    color: #333 !important;
    cursor: pointer;
    box-shadow: none !important;
    width: auto !important;
}
.cpp-criterio-swap-select:focus {
    background-color: #f1f3f4 !important;
}

.cpp-separator {
    margin: 0 10px;
    color: #999;
}

.cpp-peso-input-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-right: 15px;
}

.cpp-criterio-peso-input {
    width: 65px !important;
    text-align: right;
    padding: 4px 8px !important;
    height: 32px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
}

.cpp-percent-symbol {
    color: #666;
    font-size: 13px;
}

.cpp-btn-icon-minimal {
    background: transparent;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.cpp-btn-icon-minimal:hover {
    color: #d93025;
    background-color: #fce8e6;
}

.cpp-criterios-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}
.cpp-criterios-footer p { margin-bottom: 0; }
.cpp-categorias-list li strong { margin-left: 8px; font-weight: 500; }

#cpp-gestion-categorias-wrapper .cpp-form-group {
    margin-bottom: 24px;
}

#cpp-gestion-categorias-wrapper .cpp-form-group label {
    font-size: 15px;
    margin-bottom: 10px;
}

.cpp-categoria-actions { display: flex; align-items: center; gap: 5px; margin-left: auto; }
.cpp-btn-editar-categoria .dashicons, .cpp-btn-eliminar-categoria .dashicons { font-size: 18px !important; }

.cpp-category-color-indicator {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-right: 8px;
    vertical-align: middle;
    flex-shrink: 0;
}

.cpp-categoria-form-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 15px;
}

#cpp-total-porcentaje-display { font-weight: 500; }
.cpp-error-message { color: #d93025; font-size: 13px; margin-top: 5px; }
.cpp-info-message { color: #17a2b8; font-size: 13px; margin-top: 5px; }
.cpp-mensaje { padding: 15px; background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; text-align: center; margin: 20px 0; color: #3c4043; }

.cpp-btn { padding: 0 16px; height: 36px; border: 1px solid transparent; border-radius: 4px; cursor: pointer; font-size: 14px; font-weight: 500; display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; text-decoration: none; text-transform: none; transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out; outline: none; box-sizing: border-box; line-height: normal; }
.cpp-btn .dashicons { font-size: 18px; line-height: 1; height: auto; width: auto; }
.cpp-btn-primary, #cpp-form-clase .cpp-btn-primary, #cpp-form-nuevo-alumno .cpp-btn-primary, .cpp-alumnos-header .cpp-btn-primary, #cpp-submit-categoria-btn, #cpp-submit-actividad-btn-cuaderno-form, .cpp-sidebar-add-clase-btn { background-color: #1a73e8 !important; color: white !important; border-color: #1a73e8 !important; }
.cpp-btn-primary:hover, .cpp-btn-primary:focus, #cpp-form-clase .cpp-btn-primary:hover, #cpp-form-clase .cpp-btn-primary:focus, #cpp-form-nuevo-alumno .cpp-btn-primary:hover, #cpp-form-nuevo-alumno .cpp-btn-primary:focus, .cpp-alumnos-header .cpp-btn-primary:hover, .cpp-alumnos-header .cpp-btn-primary:focus, #cpp-submit-categoria-btn:hover, #cpp-submit-categoria-btn:focus, #cpp-submit-actividad-btn-cuaderno-form:hover, #cpp-submit-actividad-btn-cuaderno-form:focus, .cpp-sidebar-add-clase-btn:hover, .cpp-sidebar-add-clase-btn:focus { background-color: #1765c2 !important; border-color: #1765c2 !important; box-shadow: 0 1px 1px 0 rgba(66,133,244,0.45), 0 1px 3px 1px rgba(66,133,244,0.3) !important; color: white !important; }
.cpp-btn-danger { background-color: #d93025 !important; color: white !important; border-color: #d93025 !important; }
.cpp-btn-danger:hover, .cpp-btn-danger:focus { background-color: #c5221f !important; border-color: #b01c1a !important; box-shadow: 0 1px 1px 0 rgba(217,48,37,0.45), 0 1px 3px 1px rgba(217,48,37,0.3) !important; color: white !important; }
.cpp-btn-secondary { background-color: #6c757d; color: white; border-color: #6c757d; }
.cpp-btn-secondary:hover { background-color: #5a6268; border-color: #545b62; }
.cpp-btn-secondary:focus {
    outline: none;
}
.cpp-alumno-actions .cpp-btn, .cpp-categoria-actions .cpp-btn { background-color: transparent; padding: 0; height: 32px; width: 32px; border-color: transparent; border-radius: 50%; color: #5f6368; }
.cpp-alumno-actions .cpp-btn .dashicons, .cpp-categoria-actions .cpp-btn .dashicons { font-size: 20px; color: inherit !important; }
.cpp-btn-eliminar-categoria.cpp-btn-icon .dashicons { font-size: 20px !important; }
.cpp-alumno-actions .cpp-btn:hover, .cpp-categoria-actions .cpp-btn:hover { background-color: rgba(0, 0, 0, 0.08); color: #3c4043;}

/* Estilos para Reordenación de Clases */
.cpp-sidebar-clases-list li.cpp-sidebar-clase-item { /* cursor: move; se aplica por JS UI sortable */ }
.cpp-sortable-placeholder { border: 1px dashed #cccccc; background-color: #f0f2f5; height: 42px; margin: 2px 8px 2px 0; border-radius: 0 25px 25px 0; box-sizing: border-box; }
.cpp-sidebar-clases-list li.cpp-sidebar-clase-item.ui-sortable-helper { opacity: 0.8; box-shadow: 0 4px 10px rgba(0,0,0,0.2); background-color: #e8f0fe; border-radius: 0 25px 25px 0; cursor: grabbing !important; }

/* Estilos Modal de Asistencia */
#cpp-modal-asistencia .cpp-modal-content { max-width: 700px; }
.cpp-modal-asistencia-controles { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 15px; }
.cpp-modal-asistencia-controles .cpp-form-group { margin-bottom: 0; flex-grow: 1; }
#cpp-asistencia-fecha { padding: 8px 10px; font-size: 14px; }
#cpp-marcar-todos-presentes-btn { white-space: nowrap; padding: 0 12px; height: 38px; }
.cpp-asistencia-lista-alumnos { max-height: calc(100vh - 380px); min-height: 150px; overflow-y: auto; border: 1px solid #e0e0e0; border-radius: 4px; margin-bottom: 20px; padding: 5px; }
.cpp-asistencia-alumno-fila { display: flex; align-items: center; padding: 10px; border-bottom: 1px solid #f1f3f4; gap: 10px; }
.cpp-asistencia-alumno-fila:last-child { border-bottom: none; }
.cpp-asistencia-alumno-nombre { flex: 1 1 200px; font-size: 14px; color: #3c4043; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: normal; }
.cpp-asistencia-alumno-estados { display: flex; gap: 5px; flex-shrink: 0; }
.cpp-btn-asistencia-estado { padding: 6px 10px; font-size: 13px; min-width: 34px; text-align: center; border: 1px solid #adb5bd; background-color: #fff; color: #495057; border-radius: 4px; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; line-height: 1.2; font-weight: normal; }
.cpp-btn-asistencia-estado:hover { border-color: #6c757d; background-color: #f8f9fa; }
.cpp-btn-asistencia-estado.cpp-estado-activo { color: white; font-weight: 500; box-shadow: inset 0 1px 2px rgba(0,0,0,0.075); }
.cpp-btn-asistencia-estado[data-estado="presente"].cpp-estado-activo { background-color: #28a745; border-color: #28a745; }
.cpp-btn-asistencia-estado[data-estado="ausente"].cpp-estado-activo { background-color: #dc3545; border-color: #dc3545; }
.cpp-btn-asistencia-estado[data-estado="retraso"].cpp-estado-activo { background-color: #ffc107; border-color: #ffc107; color: #212529; }
.cpp-btn-asistencia-estado[data-estado="justificado"].cpp-estado-activo { background-color: #17a2b8; border-color: #17a2b8; }
.cpp-asistencia-observaciones { flex-basis: 180px; flex-shrink: 0; padding: 7px 10px; font-size: 13px; border: 1px solid #ced4da; border-radius: 4px; font-weight: normal; }
.cpp-asistencia-observaciones:focus { border-color: #80bdff; outline: 0; box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); }

/* --- INICIO: Estilos para Modal Ficha Alumno --- */
#cpp-modal-ficha-alumno .cpp-modal-content {
    max-width: 850px;
    font-size: 14px;
}
#cpp-modal-ficha-alumno .cpp-modal-content { max-width: 750px; }

.cpp-ficha-alumno-header {
    display: flex;
    align-items: center; /* Centrado vertical */
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
    gap: 15px;
}

.cpp-ficha-nombre-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-grow: 1;
    justify-content: flex-start;
    margin-left: 15px; /* Mover el margen al contenedor */
}

#cpp-ficha-display-nombre-completo {
    font-size: 24px;
    font-weight: 500;
    margin-left: 0; /* Quitar margen individual */
    flex-grow: 0;
}

.cpp-ficha-nota-global-wrapper {
    text-align: right;
    flex-shrink: 0; /* Evita que se encoja */
}

.cpp-edit-info-alumno-btn {
    align-self: center; /* Centra el botón verticalmente en el wrapper */
}
#cpp-ficha-alumno-foto, #cpp-ficha-alumno-avatar-inicial {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
#cpp-ficha-alumno-avatar-inicial {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    background-color: #e9ecef;
    color: #495057;
}

.cpp-ficha-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}
.cpp-ficha-seccion h3 {
    font-size: 16px;
    font-weight: 500;
    color: #3c4043;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e9ecef;
}
.cpp-ficha-nota-global-container {
    text-align: center;
    margin-bottom: 10px;
}
.cpp-ficha-nota-global-valor {
    font-size: 48px;
    font-weight: 300;
    line-height: 1;
    color: #1a73e8;
}
.cpp-ficha-nota-global-base {
    font-size: 24px;
    font-weight: 400;
    color: #5f6368;
    margin-left: 2px;
}
.cpp-ficha-nota-global-label {
    text-align: center;
    font-size: 14px;
    color: #5f6368;
    margin-bottom: 20px;
}

.cpp-ficha-seccion h4 {
    font-size: 14px;
    font-weight: 500;
    color: #3c4043;
    margin-top: 20px;
    margin-bottom: 10px;
}

.cpp-ficha-lista-desglose {
    list-style: none;
    padding: 0;
    margin: 0;
}
.cpp-ficha-lista-desglose li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f1f3f4;
}
.cpp-ficha-lista-desglose li:last-child {
    border-bottom: none;
}
.cpp-ficha-desglose-nombre {
    font-weight: normal;
    color: #3c4043;
}
.cpp-ficha-desglose-nota {
    font-weight: 500;
    color: #202124;
    background-color: #f1f3f4;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 13px;
}

.cpp-ficha-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columnas iguales */
    gap: 10px; /* Reducir gap para que quepa mejor */
    margin-bottom: 20px;
}
.cpp-ficha-stats-grid .stat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #f8f9fa;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #e9ecef;
}
.cpp-ficha-stats-grid .stat-icon {
    font-size: 20px;
}
.cpp-ficha-stats-grid .stat-item div {
    line-height: 1.3;
    font-size: 13px;
    color: #5f6368;
}
.cpp-ficha-stats-grid .stat-item strong {
    font-size: 16px;
    font-weight: 500;
    color: #202124;
    display: block;
}

@media (max-width: 768px) {
    .cpp-ficha-grid {
        grid-template-columns: 1fr;
    }
}

#cpp-ficha-alumno-info-display p {
    margin-bottom: 10px;
    line-height: 1.6;
    font-size: 14px;
}
#cpp-ficha-alumno-info-display p strong {
    font-weight: 500;
    margin-right: 5px;
}
#cpp-form-editar-alumno-ficha .cpp-form-group { margin-bottom: 15px; }
#cpp-form-editar-alumno-ficha .cpp-btn-secondary { margin-left: 8px; }

.cpp-edit-info-alumno-btn {
    padding: 5px 7px !important; height: auto !important;
    background: #f8f9fa !important; border: 1px solid #ced4da !important;
    color: #5f6368 !important;
}
.cpp-edit-info-alumno-btn:hover {
    color: #1a73e8 !important; background-color: #e8f0fe !important;
    border-color: #1a73e8 !important;
}
.cpp-edit-info-alumno-btn .dashicons { font-size: 16px; }

.cpp-lista-scrollable {
    max-height: 220px; overflow-y: auto;
    border: 1px solid #e9ecef; padding: 10px 15px;
    border-radius: 4px; background-color: #fff;
}
.cpp-lista-scrollable ul { list-style: none; padding: 0; margin: 0; }
.cpp-lista-scrollable li {
    padding: 8px 0; border-bottom: 1px solid #f1f3f4;
    font-size: 14px; line-height: 1.5;
    display: flex; align-items: center;
    justify-content: space-between;
}
.cpp-lista-scrollable li:last-child { border-bottom: none; }
.cpp-lista-scrollable li strong { font-weight: 500; }
.cpp-lista-scrollable li small { color: #6c757d; margin-left: 8px; font-size: 13px; }

#cpp-ficha-lista-categorias-notas li .cpp-category-color-indicator {
    margin-right: 10px; width: 14px; height: 14px;
    flex-shrink: 0;
}
#cpp-ficha-lista-categorias-notas li .cpp-categoria-nombre-ponderacion {
    flex-grow: 1;
}
#cpp-ficha-lista-categorias-notas li .cpp-categoria-nota-media {
    margin-left: auto; padding-left: 15px;
    font-weight: 500; white-space: nowrap;
}

#cpp-ficha-stats-asistencia {
    margin-bottom: 15px; padding: 12px 15px;
    background-color: #f8f9fa; border: 1px solid #e9ecef;
    border-radius: 4px; font-size: 14px;
}
#cpp-ficha-stats-asistencia p {
    margin: 0; display: flex; flex-wrap: wrap;
    gap: 10px 20px;
    justify-content: flex-start;
}
#cpp-ficha-stats-asistencia p span.stat-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
#cpp-ficha-stats-asistencia p strong { font-weight: 500; }
/* --- FIN: Estilos para Modal Ficha Alumno --- */

/* Clase de utilidad para deshabilitar selección de texto */
body.cpp-no-text-select {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard */
}

/* Estilo para celdas de input seleccionadas */
.cpp-input-nota.cpp-cell-selected {
    background-color: transparent !important; 
    outline: none !important;
}

.cpp-cuaderno-td-nota:has(input.cpp-input-nota.cpp-cell-selected) {
    background-color: #d4e8ff !important; 
}

/* --- INICIO: Estilos para Selector de Evaluación y Tabla --- */

.cpp-top-bar-selector-container {
    margin-left: 20px;
    display: flex;
    align-items: center;
}

#cpp-evaluacion-selector {
    padding: 6px 10px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.2);
    color: inherit;
    border: 1px solid rgba(255, 255, 255, 0.3);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1em;
    padding-right: 2rem;
    cursor: pointer;
}

/* Ajuste para cuando el texto de la barra es negro */
.cpp-fixed-top-bar:not([style*="color: rgb(255, 255, 255)"]):not([style*="color: #FFF"]):not([style*="color: #FFFFFF"]) #cpp-evaluacion-selector {
    background-color: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23333333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

#cpp-evaluacion-selector:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}

#cpp-evaluacion-selector option {
    background-color: #ffffff;
    color: #333333;
}

/* Mensaje en cabecera de tabla cuando no hay actividades */
.cpp-cuaderno-th-no-actividades {
    text-align: center;
    font-weight: normal;
    font-style: italic;
    color: #5f6368;
    background-color: #f8f9fa !important;
    padding: 20px;
}

.cpp-cuaderno-td-no-actividades {
    text-align: center;
    font-style: italic;
    color: #6c757d;
    padding: 20px;
}

/* Estilos para el nuevo mensaje de "No hay alumnos" */
.cpp-no-alumnos-container {
    text-align: center;
    padding: 40px 20px;
    margin: 20px;
    border: 2px dashed #dce1e6;
    border-radius: 12px;
    background-color: #f9fafb;
}

.cpp-no-alumnos-emoji {
    font-size: 48px;
    line-height: 1.2;
    margin-bottom: 16px;
}

.cpp-no-alumnos-titulo {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin: 0 0 12px 0;
}

.cpp-no-alumnos-texto {
    font-size: 16px;
    color: #555;
    max-width: 600px;
    margin: 0 auto 24px auto;
    line-height: 1.6;
}

.cpp-no-alumnos-instrucciones {
    font-size: 14px;
    color: #666;
    background-color: #fff;
    border: 1px solid #e5e7eb;
    padding: 16px;
    border-radius: 8px;
    display: inline-block;
    max-width: 100%;
}

.cpp-no-alumnos-instrucciones p {
    margin: 0;
    line-height: 1.5;
}

.cpp-no-alumnos-instrucciones .dashicons {
    vertical-align: middle;
    margin: 0 4px;
    color: #4a5568;
}

/* --- FIN: Estilos para Selector de Evaluación y Tabla --- */


/* --- INICIO: Estilos para Gestión de Evaluaciones en Modal --- */

#cpp-clase-modal-evaluaciones-container {
    font-size: 14px;
}

#cpp-clase-modal-evaluaciones-container h4 {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 5px;
}

#cpp-clase-modal-evaluaciones-container p small {
    font-size: 13px;
    color: #5f6368;
    margin-bottom: 15px;
    display: block;
}

.cpp-evaluaciones-list {
    list-style: none;
    margin: 0 0 20px 0;
    padding: 0;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    max-height: 250px;
    overflow-y: auto;
}

.cpp-evaluaciones-list li {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid #e9eaea;
}

.cpp-evaluaciones-list li:last-child {
    border-bottom: none;
}

.cpp-evaluaciones-list li.cpp-no-evaluaciones {
    color: #5f6368;
    font-style: italic;
    justify-content: center;
}

.cpp-drag-handle {
    cursor: move;
    color: #757575;
    margin-right: 10px;
    flex-shrink: 0;
}

.cpp-evaluacion-nombre {
    flex-grow: 1;
    font-weight: 500;
}

.cpp-evaluacion-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
}
.cpp-evaluacion-actions .cpp-btn-icon {
    background-color: transparent;
    border: none;
    color: #5f6368;
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
}
.cpp-evaluacion-actions .cpp-btn-icon:hover {
    background-color: #f1f3f4;
    color: #202124;
}

/* Estilos para el formulario de edición en línea */
.cpp-evaluacion-edit-form {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
}

.cpp-evaluacion-edit-form input[type="text"] {
    flex-grow: 1;
    padding: 6px 8px;
    font-size: 14px;
    border: 1px solid #888;
    border-radius: 3px;
}
.cpp-evaluacion-edit-form input[type="text"]:focus {
     border-color: #1a73e8;
     box-shadow: 0 0 0 1px #1a73e8;
     outline: none;
}

.cpp-evaluacion-edit-form .cpp-btn-icon .dashicons {
    font-size: 22px;
}

/* Estilos para el formulario de añadir */
.cpp-form-add-evaluacion {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

.cpp-form-add-evaluacion input[type="text"] {
    flex-grow: 1;
}

.cpp-evaluaciones-list .cpp-sortable-placeholder {
    background-color: #f0f8ff;
    border: 1px dashed #a0c4e0;
    height: 45px;
    box-sizing: border-box;
    visibility: visible !important;
}

/* --- FIN: Estilos para Gestión de Evaluaciones en Modal --- */

/* --- INICIO: Estilos para el Tutorial Interactivo --- */

.cpp-tutorial-highlight-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    box-shadow: 0 0 0 9999px rgba(32,33,36,0.7); /* Un poco más oscuro */
    pointer-events: none;
    transition: clip-path 0.3s ease-in-out;
}

.cpp-tutorial-popover {
    position: fixed; /* Usamos fixed para evitar problemas con contenedores scrollables */
    background-color: #ffffff;
    border: 1px solid #dadce0;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15), 0 2px 5px rgba(0,0,0,0.1);
    padding: 20px 24px;
    max-width: 340px;
    z-index: 10001; /* Por encima del overlay */
    pointer-events: auto; /* Para que se pueda hacer clic en el botón de saltar */
    font-size: 14px;
    line-height: 1.6;
    color: #3c4043;
    transition: opacity 0.2s ease-in-out;
    opacity: 0; /* Empieza invisible, se muestra con fadeIn */
}

.cpp-tutorial-popover.fade-in {
    opacity: 1;
}

.cpp-tutorial-popover .cpp-tutorial-content strong {
    color: #1a73e8;
    font-weight: 500;
}

.cpp-tutorial-nav {
    margin-top: 16px;
    text-align: right;
    border-top: 1px solid #e0e0e0;
    padding-top: 12px;
}

.cpp-tutorial-end-btn {
    background: none;
    border: none;
    color: #1a73e8;
    font-weight: 500;
    cursor: pointer;
    font-size: 14px;
    padding: 5px;
}

.cpp-tutorial-end-btn:hover {
    text-decoration: underline;
}

/* Flechas para el Popover */
.cpp-tutorial-popover::before, .cpp-tutorial-popover::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
}

.cpp-tutorial-popover.arrow-top::before {
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #dadce0 transparent;
}
.cpp-tutorial-popover.arrow-top::after {
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #ffffff transparent;
}

.cpp-tutorial-popover.arrow-bottom::before {
    bottom: -11px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 10px 10px 0 10px;
    border-color: #dadce0 transparent transparent transparent;
}
.cpp-tutorial-popover.arrow-bottom::after {
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 10px 10px 0 10px;
    border-color: #ffffff transparent transparent transparent;
}

.cpp-tutorial-popover.arrow-left::before {
    top: 50%;
    left: -11px;
    transform: translateY(-50%);
    border-width: 10px 10px 10px 0;
    border-color: transparent #dadce0 transparent transparent;
}
.cpp-tutorial-popover.arrow-left::after {
    top: 50%;
    left: -10px;
    transform: translateY(-50%);
    border-width: 10px 10px 10px 0;
    border-color: transparent #ffffff transparent transparent;
}

.cpp-tutorial-popover.arrow-right::before {
    top: 50%;
    right: -11px;
    transform: translateY(-50%);
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #dadce0;
}
.cpp-tutorial-popover.arrow-right::after {
    top: 50%;
    right: -10px;
    transform: translateY(-50%);
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #ffffff;
}

/* --- FIN: Estilos para el Tutorial Interactivo --- */

/* --- INICIO: Estilos para Menú de Usuario --- */

.cpp-fixed-top-bar {
    justify-content: space-between; /* Alinear elementos a los extremos */
}

.cpp-top-bar-left, .cpp-top-bar-right {
    display: flex;
    align-items: center;
}

.cpp-user-menu-container {
    position: relative;
    margin-left: 15px;
}

.cpp-user-menu-avatar-btn {
    background: none;
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    padding: 0;
    width: 36px;
    height: 36px;
    cursor: pointer;
    display: block;
    overflow: hidden;
}
.cpp-fixed-top-bar:not([style*="color: rgb(255, 255, 255)"]) .cpp-user-menu-avatar-btn {
    border-color: rgba(0,0,0,0.3);
}

.cpp-user-menu-avatar-btn img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: block;
    object-fit: cover;
}

.cpp-user-menu-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    border: 1px solid #e0e0e0;
    width: 200px;
    z-index: 1100;
    overflow: hidden;
}

.cpp-user-menu-dropdown.show-dropdown {
    display: block;
}

.cpp-user-menu-dropdown ul {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}

.cpp-user-menu-dropdown li a {
    display: block;
    padding: 10px 20px;
    font-size: 14px;
    color: #3c4043;
    text-decoration: none;
    white-space: nowrap;
}

.cpp-user-menu-dropdown li a:hover {
    background-color: #f1f3f4;
}

/* --- FIN: Estilos para Menú de Usuario --- */

/* --- INICIO: Estilos para la Pestaña de Configuración --- */
.cpp-config-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cpp-config-list li {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.cpp-config-list li:hover {
    border-color: #1a73e8;
    box-shadow: 0 2px 8px rgba(26, 115, 232, 0.1);
    transform: translateY(-1px);
}

.cpp-config-list li .cpp-criterio-nombre {
    flex-grow: 1;
    font-weight: 500;
    color: #3c4043;
    font-size: 15px;
    margin-right: 15px;
    white-space: normal;
    word-break: break-word;
}

.cpp-config-list-actions, .cpp-list-item-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    align-items: center;
}

.cpp-config-list-actions .cpp-btn-icon {
    width: 32px;
    height: 32px;
    padding: 4px;
    color: #5f6368;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.cpp-config-list-actions .cpp-btn-icon:hover {
    background-color: #f1f3f4;
    color: #1a73e8;
}

.cpp-config-list-actions .cpp-btn-icon.cpp-btn-eliminar-criterio-global:hover {
    color: #d93025;
    background-color: #fce8e6;
}

.cpp-config-container {
    display: flex;
    height: 100%;
}
.cpp-config-sidebar {
    width: 220px;
    background-color: #f8f9fa;
    border-right: 1px solid #e0e0e0;
    padding: 20px 0;
    flex-shrink: 0;
}
.cpp-config-tab-link {
    display: flex;
    align-items: center;
    padding: 12px 24px;
    text-decoration: none;
    color: #3c4043;
    font-size: 14px;
    font-weight: 500;
    border-left: 3px solid transparent;
}
.cpp-config-tab-link:hover {
    background-color: #f1f3f4;
}
.cpp-config-tab-link.active {
    background-color: #e8f0fe;
    color: #1a73e8;
    border-left-color: #1a73e8;
}
.cpp-config-tab-link .dashicons {
    margin-right: 16px;
    font-size: 20px;
}
.cpp-config-content-area {
    flex-grow: 1;
    padding: 30px;
    overflow-y: auto;
    padding-bottom: 60px; /* Añadir espacio en la parte inferior */
}
.cpp-config-tab-content {
    display: none;
}
.cpp-config-tab-content.active {
    display: block;
}
.cpp-config-content-area h2 {
    font-size: 24px;
    font-weight: 500;
    color: #202124;
    margin-top: 0;
    margin-bottom: 24px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e0e0e0;
}
.cpp-config-content-area h3 {
    font-size: 18px;
    font-weight: 500;
    margin-top: 24px;
    margin-bottom: 16px;
}
.cpp-config-actions {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}
#cpp-config-tab-evaluaciones .cpp-tabs-container {
    margin-top: 20px;
}
/* --- FIN: Estilos para la Pestaña de Configuración --- */

/* --- INICIO: Rediseño Celda A1 --- */

.cpp-cuaderno-th-alumno .cpp-a1-controls-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch; /* Estirar items */
    height: 100%;
    padding: 8px;
}

.cpp-a1-icons-row {
    display: flex;
    justify-content: space-around; /* Distribuir los iconos */
    align-items: center;
    width: 100%;
    gap: 4px; /* Espacio reducido entre iconos */
}

.cpp-a1-icons-row .cpp-btn-icon {
    flex-grow: 1; /* Para que ocupen el espacio disponible */
}

.cpp-a1-icons-row .cpp-btn-icon svg {
    width: 22px;
    height: 22px;
}

/* --- FIN: Rediseño Celda A1 --- */

/* --- START: Final Grade Button Styles --- */

.cpp-cuaderno-tabla tbody tr.cpp-fila-suspenso > td {
    background-color: #fce8e6 !important;
}

/* Ensure sticky columns get the highlight too */
.cpp-cuaderno-tabla tbody tr.cpp-fila-suspenso > td.cpp-cuaderno-td-alumno,
.cpp-cuaderno-tabla tbody tr.cpp-fila-suspenso > td.cpp-cuaderno-td-final {
    background-color: #fce8e6 !important;
}

#cpp-final-grade-highlight-btn.active {
    background-color: #e8f0fe !important;
    color: #1a73e8 !important;
}

/* --- START: Student Management in Settings --- */
#cpp-config-alumnos-container {
    background-color: transparent;
    border: none;
    padding: 0;
}

#cpp-config-alumnos-container .cpp-alumnos-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 15px;
}

#cpp-config-alumnos-container .cpp-alumnos-header h3 {
    margin: 0;
}

#cpp-config-alumnos-container .cpp-alumnos-list {
    /* max-height: 500px; */ /* Removed to allow natural flow */
    /* overflow-y: auto; */ /* Removed to use the main scrollbar */
}

.cpp-modern-form {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.cpp-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
/* --- END: Student Management in Settings --- */

/* --- START: Evaluation Settings Tab Redesign --- */
#cpp-config-tab-evaluaciones #cpp-config-evaluaciones-container,
#cpp-config-tab-evaluaciones #cpp-config-ponderaciones-container {
    background-color: transparent;
    border: none;
    padding: 0;
    margin-bottom: 30px;
}

#cpp-guardar-pesos-criterios-btn {
    margin-top: 10px;
    margin-bottom: 30px;
}

.cpp-form-asignar-criterio {
    margin-top: 40px;
    padding-top: 25px;
    border-top: 2px dashed #eee;
}

.cpp-form-asignar-criterio h4 {
    margin-bottom: 20px;
}

.cpp-form-asignar-criterio .cpp-form-group {
    display: flex;
    gap: 10px;
    align-items: center;
}

.cpp-form-asignar-criterio select {
    flex-grow: 1;
}

#cpp-config-tab-evaluaciones .cpp-evaluaciones-list {
    border: none;
    background-color: #fff;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    max-height: none; /* remove fixed height */
    overflow-y: visible; /* remove scroll */
}

#cpp-config-tab-evaluaciones .cpp-evaluaciones-list li {
    padding: 12px 15px;
}

#cpp-config-tab-evaluaciones .cpp-form-add-evaluacion {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

#cpp-config-tab-evaluaciones #cpp-ponderaciones-settings-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

#cpp-config-tab-evaluaciones .cpp-categorias-list ul {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}
/* --- END: Evaluation Settings Tab Redesign --- */

/* --- END: Final Grade Button Styles --- */

/* --- START: Ficha Alumno Tabs --- */

.cpp-ficha-tabs {
    display: flex;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 20px;
}

.cpp-ficha-tab-btn {
    padding: 10px 20px;
    cursor: pointer;
    background-color: transparent;
    border: none;
    font-size: 15px;
    font-weight: 500;
    color: #5f6368;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px; /* Overlap the container's border */
    transition: color 0.2s ease, border-color 0.2s ease;
}

.cpp-ficha-tab-btn:hover {
    color: #202124;
}

.cpp-ficha-tab-btn.active {
    color: #1a73e8;
    border-bottom-color: #1a73e8;
}

.cpp-ficha-tab-content {
    display: none;
}

.cpp-ficha-tab-content.active {
    display: block;
}

/* --- END: Ficha Alumno Tabs --- */

/* --- START: Ficha Alumno Category Breakdown --- */

.cpp-ficha-evaluacion-header {
    display: flex;
    justify-content: flex-start; /* Changed */
    align-items: center;
    width: 100%;
    gap: 15px; /* Added */
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    padding: 5px;
    margin: -5px;
    border-radius: 4px;
}

.cpp-ficha-evaluacion-header:hover {
    background-color: #f0f2f5;
}

.cpp-ficha-evaluacion-header .cpp-ficha-desglose-nombre {
    flex-grow: 1; /* Added */
    font-weight: 500; /* Make it bolder */
}

.cpp-ficha-evaluacion-item {
    padding: 10px 0;
    border-bottom: 1px solid #e9ecef;
}
.cpp-ficha-evaluacion-item:last-child {
    border-bottom: none;
}

.cpp-ficha-lista-categorias-desglose {
    list-style: none;
    padding-left: 20px;
    margin: 10px 0 0 0;
    border-top: 1px dashed #e0e0e0;
    padding-top: 10px;
}

.cpp-ficha-categoria-item {
    display: flex;
    justify-content: flex-start; /* Changed */
    align-items: center;
    padding: 6px 0;
    font-size: 13px;
    gap: 15px; /* Added */
}

.cpp-ficha-categoria-item .cpp-ficha-categoria-nombre {
    flex-grow: 1; /* Added */
}

.cpp-evaluacion-details-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 50% / 50% */
    gap: 20px;
    align-items: center;
    margin-top: 15px;
    padding-left: 20px;
}

.cpp-evaluacion-chart-container {
    position: relative;
    height: 180px; /* Altura ajustada para el gráfico */
}

.cpp-evaluacion-breakdown-container .cpp-ficha-lista-categorias-desglose {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
    padding-left: 0;
}

.cpp-ficha-categoria-nombre {
    color: #5f6368;
}
.cpp-ficha-categoria-nombre small {
    color: #80868b;
}

.cpp-ficha-categoria-nota {
    font-weight: 500;
    color: #3c4043;
    background-color: #f8f9fa;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
}

/* --- END: Ficha Alumno Category Breakdown --- */

/* --- START: Ficha Alumno Attendance List --- */
.cpp-ficha-asistencia-lista {
    max-height: 250px; /* Make it scrollable */
    overflow-y: auto;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 8px;
    background-color: #fdfdfd;
}

.cpp-ficha-asistencia-lista ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cpp-asistencia-fila-item {
    padding: 10px;
    border-bottom: 1px solid #f1f3f4;
    display: flex;
    flex-direction: column; /* Stack main info and observation */
    gap: 4px;
}

.cpp-asistencia-fila-item:last-child {
    border-bottom: none;
}

.cpp-asistencia-info-principal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.cpp-asistencia-fecha-item {
    font-size: 14px;
    color: #3c4043;
}

.cpp-asistencia-estado-item {
    font-size: 12px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 12px;
    text-transform: capitalize;
    color: #fff;
}

.cpp-estado-ausente, .cpp-estado-falta { background-color: #dc3545; }
.cpp-estado-retraso { background-color: #ffc107; color: #212529; }
.cpp-estado-justificado { background-color: #17a2b8; }

.cpp-asistencia-observacion-item {
    font-size: 13px;
    color: #5f6368;
    padding-left: 10px;
    border-left: 2px solid #e0e0e0;
    margin-left: 5px;
}

.cpp-no-incidencias {
    text-align: center;
    color: #5f6368;
    padding: 20px;
    font-style: italic;
}
/* --- END: Ficha Alumno Attendance List --- */


/* --- Estilos para las Pestañas Principales (Revisado) --- */
.cpp-fixed-top-bar {
    justify-content: space-between;
}

.cpp-top-bar-left {
    flex-grow: 1;
}

.cpp-top-bar-center.cpp-tabs-clase-specific {
    flex-grow: 10; /* Darle más espacio para centrar las pestañas */
    justify-content: left;
    display: flex;
    gap: 8px;
}

.cpp-tabs-clase-specific .cpp-main-tab-link {
    padding: 6px 16px;
    border-radius: 6px;
    color: inherit;
    opacity: 0.8;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    border-bottom: 3px solid transparent;
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
}

.cpp-tabs-clase-specific .cpp-main-tab-link:hover {
    background-color: rgba(255, 255, 255, 0.15);
    opacity: 1;
}

.cpp-tabs-clase-specific .cpp-main-tab-link.active {
    background-color: rgba(0, 0, 0, 0.1);
    opacity: 1;
    font-weight: 600;
}

.cpp-top-bar-right {
    background-color: #fff;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 15px;
    box-shadow: -5px 0 10px -5px rgba(0,0,0,0.1);
}

.cpp-tabs-general {
    display: flex;
    gap: 8px;
    margin-right: 20px;
}

.cpp-tabs-general .cpp-main-tab-link {
    background-color: #f1f3f4;
    color: #3c4043;
    padding: 8px 16px;
    border-radius: 18px; /* Hacerlos más redondeados */
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid #f1f3f4;
    transition: all 0.2s ease-in-out;
}

.cpp-tabs-general .cpp-main-tab-link:hover {
    background-color: #e8eaed;
    border-color: #e8eaed;
}

.cpp-tabs-general .cpp-main-tab-link.active {
    background-color: #e8f0fe;
    color: #1967d2;
    font-weight: 600;
    border-color: #d2e3fc;
}

/* Contenedor principal de los contenidos de las pestañas */
.cpp-main-tabs-content {
    flex-grow: 1;
    overflow-y: auto;
    position: relative;
    background-color: #fff;
    border-top: 1px solid #e0e0e0;
    display: flex; /* Añadido para que el hijo flex ocupe todo el espacio */
}

.cpp-main-tab-content {
    display: none;
    height: 100%;
}

.cpp-main-tab-content.active {
    display: flex; /* Usar flex para que el contenido se expanda */
    flex-direction: column;
    flex-grow: 1; /* Para que ocupe el espacio disponible */
}

/* Ajustes para que el programador y el cuaderno encajen bien */
#cpp-main-tab-programador, #cpp-main-tab-cuaderno, #cpp-main-tab-alumnos {
    /* padding: 20px; */ /* Eliminado para que el contenido se ajuste al borde */
    padding: 0;
}

#cpp-main-tab-programador, #cpp-main-tab-cuaderno {
    padding: 0; /* Anula el padding para estos dos que lo gestionan internamente */
}

#cpp-programador-app, #cpp-cuaderno-tabla-area {
    height: 92%;
    display: flex;
    flex-direction: column;
}

/* --- Estilos para el Modal de Configuración de Nota Final (Toggle Switches) --- */

#cpp-modal-manage-final-grade-evals .cpp-modal-body {
    padding-top: 15px;
    padding-bottom: 20px;
}

#cpp-modal-manage-final-grade-evals p {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 15px;
    color: #555;
}

.cpp-evaluaciones-toggle-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cpp-toggle-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background-color: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.cpp-toggle-label-text {
    font-size: 16px;
    color: #333;
    font-weight: 500;
}

.cpp-toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px; /* Ancho del interruptor */
    height: 28px; /* Alto del interruptor */
}

.cpp-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cpp-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 28px; /* Para que sea redondeado */
}

.cpp-toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px; /* Tamaño del círculo */
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
}

.cpp-toggle-switch input:checked + .cpp-toggle-slider {
    background-color: #4A86E8; /* Color principal */
}

.cpp-toggle-switch input:focus + .cpp-toggle-slider {
    box-shadow: 0 0 1px #4A86E8;
}

.cpp-toggle-switch input:checked + .cpp-toggle-slider:before {
    -webkit-transform: translateX(22px); /* Desplazamiento del círculo */
    -ms-transform: translateX(22px);
    transform: translateX(22px);
}

/* Estilos para las nuevas páginas de configuración a pantalla completa */
.cpp-fullscreen-settings-page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

.cpp-fullscreen-settings-header {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    flex-shrink: 0;
    position: relative; /* Para centrado absoluto de elementos hijos */
}

.cpp-fullscreen-settings-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
}

.cpp-close-fullscreen-btn {
    margin-right: 15px;
    color: #555;
}

.cpp-fullscreen-settings-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px;
}

/* Ocultar la barra de color de la clase cuando una página de ajustes está activa */
body.cpp-fullscreen-active .cpp-cuaderno-main-content-classroom .cpp-fixed-top-bar {
    border-top-color: transparent !important;
}
body.cpp-fullscreen-active .cpp-fixed-top-bar {
    box-shadow: none !important;
}


/* Estilos para el nuevo botón de ajustes generales en la barra superior */
.cpp-btn-general-settings {
    margin-left: 10px;
    color: #5f6368;
    padding: 8px;
    border-radius: 50%;
    background: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cpp-btn-general-settings:hover {
    background-color: rgba(0,0,0,0.06);
}
.cpp-btn-general-settings .dashicons {
    font-size: 22px;
}

/* --- Spinner y Toast --- */
#cpp-spinner-overlay .spinner {
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    width: 40px;
    height: 40px;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

#cpp-toast-notification {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 20px;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    z-index: 100000; /* Aumentado para estar por encima del loader */
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}

#cpp-toast-notification.cpp-toast-success {
    background-color: #28a745;
}

#cpp-toast-notification.cpp-toast-error {
    background-color: #dc3545;
}

/* --- Main Content Loader --- */
#cpp-main-loader {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    z-index: 99999;
}

body.admin-bar #cpp-main-loader {
    top: 32px;
    height: calc(100% - 32px);
}

@media screen and (max-width: 782px) {
    body.admin-bar #cpp-main-loader {
        top: 46px;
        height: calc(100% - 46px);
    }
}

#cpp-main-loader .cpp-spinner {
    border: 5px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top-color: #1a73e8; /* Blue to match theme */
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

#cpp-loader-phrase {
    margin-top: 20px;
    font-size: 16px;
    color: #5f6368;
    text-align: center;
    max-width: 80%;
}

/* Estilos para el aviso de "Sin Conexión" */
#cpp-offline-notice {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    display: none; /* Oculto por defecto */
    justify-content: center;
    align-items: center;
    z-index: 99999;
    text-align: center;
    color: #333;
}

#cpp-offline-notice.visible {
    display: flex; /* Se muestra con JS */
}

.cpp-offline-notice-content h2 {
    font-size: 32px; /* Aumentado */
    margin-top: 25px;
    font-weight: 500;
}

.cpp-offline-notice-content p {
    font-size: 20px; /* Aumentado */
    color: #666;
    margin-top: 12px;
}

#cpp-offline-quote {
    margin-top: 40px;
    color: #888;
    max-width: 500px; /* Ligeramente más ancho */
    line-height: 1.6;
}

#cpp-offline-quote .quote-text {
    font-size: 22px; /* Aumentado */
    font-style: italic;
    display: block; /* Para que el autor aparezca debajo */
}

#cpp-offline-quote .quote-author {
    display: block;
    margin-top: 15px;
    font-size: 18px; /* Ligeramente más pequeño que la cita */
    font-style: italic;
    color: #777;
}

.cpp-offline-notice-content {
    max-width: 500px;
    padding: 20px;
}

/* Cuando el aviso está activo, ocultamos el contenido principal del cuaderno */
.offline-active #cpp-fullscreen-tab-container,
.offline-active #cpp-class-settings-page-container,
.offline-active #cpp-general-settings-page-container,
.offline-active .cpp-cuaderno-sidebar-classroom,
.offline-active .cpp-cuaderno-main-content-classroom,
.offline-active .cpp-sidebar-overlay {
    display: none !important;
}

/* --- Pestaña de Actividades --- */
#cpp-actividades-top-bar-actions {
    align-items: center;
    gap: 15px;
}

.cpp-filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cpp-filter-label {
    font-size: 13px;
    font-weight: 500;
    color: #5f6368;
    white-space: nowrap;
}

.cpp-select-sm {
    padding: 4px 8px;
    font-size: 13px;
    border: 1px solid #dadce0;
    border-radius: 4px;
    background-color: #fff;
    color: #3c4043;
    outline: none;
    min-width: 120px;
}

.cpp-select-sm:focus {
    border-color: #1a73e8;
}

.cpp-select-sm:disabled {
    background-color: #f1f3f4;
    cursor: not-allowed;
}

.cpp-actividad-clase-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.cpp-clase-color-strip {
    width: 4px;
    height: 24px;
    border-radius: 2px;
    flex-shrink: 0;
}

.cpp-clase-nombre-text {
    font-weight: 500;
    color: #3c4043;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cpp-actividades-table-wrapper {
    padding: 20px;
    background-color: #fff;
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.cpp-actividades-table-wrapper .cpp-empty-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 20px;
    background-color: #fcfdfe;
    border: 2px dashed #e0e0e0;
    border-radius: 12px;
    margin: 20px;
    flex-grow: 1;
}

.cpp-actividades-table-wrapper .cpp-empty-panel .dashicons {
    font-size: 64px;
    width: 64px;
    height: 64px;
    color: #dadce0;
    margin-bottom: 24px;
}

.cpp-actividades-table-wrapper .cpp-empty-panel h2 {
    font-size: 22px;
    font-weight: 500;
    color: #3c4043;
    margin: 0 0 12px 0;
    border: none;
    padding: 0;
}

.cpp-actividades-table-wrapper .cpp-empty-panel p {
    font-size: 16px;
    color: #5f6368;
    max-width: 450px;
    line-height: 1.5;
    margin: 0;
}

.cpp-actividades-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    table-layout: fixed;
}

.cpp-actividades-table th {
    background-color: #f8f9fa;
    padding: 12px 15px;
    text-align: left;
    font-weight: 500;
    color: #5f6368;
    border-bottom: 2px solid #eee;
}

.cpp-sortable-header {
    cursor: pointer;
    transition: background-color 0.2s;
    position: relative;
    user-select: none;
}

.cpp-sortable-header:hover {
    background-color: #f1f3f4;
}

.cpp-sortable-header .dashicons {
    font-size: 16px;
    vertical-align: middle;
    margin-left: 4px;
    color: #dadce0;
    transition: color 0.2s;
}

.cpp-sortable-header:hover .dashicons {
    color: #5f6368;
}

.cpp-sortable-header.active-sort {
    background-color: #e8f0fe;
    color: #1a73e8;
}

.cpp-sortable-header.active-sort .dashicons {
    color: #1a73e8;
}

.cpp-actividades-table td {
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}

.cpp-actividades-table tr:last-child td {
    border-bottom: none;
}

.cpp-actividades-table tr:hover {
    background-color: #fcfdfe;
}

.cpp-actividades-table .cpp-inline-edit {
    width: 100%;
    border: 1px solid transparent;
    background: transparent;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 14px;
    transition: all 0.2s;
    color: #3c4043;
}

.cpp-actividades-table .cpp-inline-edit:hover {
    background-color: #f1f3f4;
    border-color: #dadce0;
}

.cpp-actividades-table .cpp-inline-edit:focus {
    background-color: #fff;
    border-color: #1a73e8;
    outline: none;
    box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
}

.cpp-actividades-table textarea.cpp-inline-edit {
    resize: none;
    min-height: 34px;
    line-height: 1.4;
    overflow: hidden;
}

.cpp-actividades-table select.cpp-inline-edit {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
    padding-right: 28px !important;
    text-overflow: ellipsis;
}

.cpp-actividad-categoria-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cpp-category-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.1);
}

.cpp-actividad-fecha-display {
    color: #5f6368;
    font-size: 13px;
}

.cpp-actividad-fecha-display.is-programada {
    font-weight: 500;
    color: #1a73e8;
    cursor: help;
}

.cpp-actividad-promedio {
    font-size: 16px;
    color: #202124;
}

.cpp-btn-delete-actividad {
    color: #5f6368;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.2s;
}

.cpp-btn-delete-actividad:hover {
    background-color: #fce8e6;
    color: #d93025;
}

/* Animaciones para edición en línea */
@keyframes cppPulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.cpp-loading-pulse {
    animation: cppPulse 1s infinite;
    pointer-events: none;
}

.cpp-success-flash {
    background-color: #e6f4ea !important;
    border-color: #1e8e3e !important;
}

/* Estilos para el Buscador de Notas Pendientes */
.cpp-pending-students-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cpp-pending-student-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background-color 0.2s;
}

.cpp-pending-student-item:hover {
    background-color: #f8f9fa;
}

.cpp-pending-student-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cpp-pending-student-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.cpp-pending-student-name {
    font-weight: 500;
    color: #3c4043;
}

.cpp-pending-count-badge {
    background-color: #d93025;
    color: white;
    font-size: 12px;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 12px;
}

.cpp-pending-subtitle {
    font-size: 14px;
    color: #5f6368;
    margin-bottom: 15px;
}

.cpp-pending-activities-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cpp-pending-activity-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(60,64,67,0.1);
}

.cpp-pending-activity-info {
    flex-grow: 1;
    margin-right: 15px;
}

.cpp-pending-activity-name {
    display: block;
    font-weight: 600;
    color: #202124;
    margin-bottom: 4px;
}

.cpp-pending-activity-meta {
    font-size: 12px;
    color: #70757a;
}

.cpp-pending-activity-input-wrapper {
    width: 100px;
    position: relative;
}

.cpp-pending-input {
    width: 100%;
    text-align: center;
    font-size: 18px !important;
    font-weight: bold !important;
    border-color: #1a73e8 !important;
}

.cpp-pending-empty, .cpp-pending-success-msg {
    text-align: center;
    padding: 40px 20px;
}

.cpp-pending-empty p, .cpp-pending-success-msg p {
    font-size: 16px;
    color: #5f6368;
    margin: 15px 0;
}

#cpp-pending-back-btn {
    color: #5f6368;
}

#cpp-pending-back-btn:hover {
    background-color: #f1f3f4;
}

.cpp-pending-student-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.cpp-pending-student-header .cpp-pending-subtitle {
    margin-bottom: 0;
}

.cpp-pending-final-grade-badge {
    background: #e8f0fe;
    padding: 8px 15px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #d2e3fc;
}

.cpp-pending-final-grade-badge .label {
    font-size: 12px;
    color: #1967d2;
    font-weight: 600;
    text-transform: uppercase;
}

.cpp-pending-final-grade-badge .value {
    font-size: 18px;
    color: #1a73e8;
    font-weight: 700;
}

.cpp-pending-student-header-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#cpp-pending-direct-absence-btn {
    padding: 6px;
    background: #fff;
    border: 1px solid #fce8e6;
    border-radius: 4px;
    transition: all 0.2s;
}

#cpp-pending-direct-absence-btn:hover {
    background: #fce8e6;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}