@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

   /* ========================================================
           ESTRUCTURA MAESTRA DEL CANVAS (SOLUCIÓN DEFINITIVA)
           ======================================================== */
        
        /* 1. La Ventana (Se achica/agranda y activa el scroll interno) */
        .chart-viewport {
            overflow: auto !important;
            position: relative !important;
        }
        
        /* 2. El Lienzo Fijo (El bloque rígido donde se dibuja. NUNCA cambia de tamaño) */
        .canvas-wrapper {
            position: relative !important;
            width: 1600px !important;
            height: 900px !important;
            min-width: 1600px !important;
            min-height: 900px !important;
            background-color: #0c101d;
        }
        
        /* 3. La Imagen (Siempre rellena el Lienzo Fijo al 100%) */
        .canvas-bg-img {
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            object-fit: fill !important; 
            z-index: 0 !important;
            pointer-events: none !important;
        }

        /* Ocultar barras de scroll nativas y de resize */
        .chart-viewport::-webkit-scrollbar, .draggable-mark::-webkit-scrollbar { display: none !important; }
        .chart-viewport, .draggable-mark { -ms-overflow-style: none !important; scrollbar-width: none !important; }
    
        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background-color: #060911;
            color: #f3f4f6;
            user-select: none;
        }
        .glass-panel {
            background: rgba(17, 24, 39, 0.75);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }
        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: #090d16;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #1f2937;
            border-radius: 4px;
        }
        .crosshair-cursor {
            cursor: crosshair;
        }
        .draggable-mark {
            cursor: move;
            transform: translate(-50%, -50%);
            transition: box-shadow 0.2s ease;
        }
        .draggable-mark:hover {
            box-shadow: 0 0 12px rgba(56, 189, 248, 0.6);
        }
        /* Estilos para el Molde Gris del Profesor en Corrección */
        .teacher-ghost-mark {
            background-color: rgba(75, 85, 99, 0.25) !important;
            border-color: #9ca3af !important;
            color: #d1d5db !important;
            border-style: dashed !important;
            box-shadow: 0 0 8px rgba(156, 163, 175, 0.3);
        }
        @keyframes revealStep {
            0% { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
            100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
        }
        .step-animated {
            animation: revealStep 0.4s ease-out forwards;
        }