.tablero-grafico-linea {
            display: flex;
            flex-direction: column;
            gap: 6px; /* Reducido drásticamente para evitar scroll */
            max-width: 800px;
            width: 100%;

            /* --- Layout "sin scroll" (ver comentario grande en styles.css) ---
               En vez de que este bloque tenga la altura "natural" de su
               contenido, lo hacemos crecer/encogerse para ocupar TODO el
               alto que .left-panel le deje disponible (descontando lo que
               ocupa .insights-section, que va después, más abajo). */
            flex: 1 1 auto;
            min-height: 0;
            /* OJO: sin overflow:hidden a propósito — recortaría el tooltip
               de "semana" cuando aparece pegado arriba de la primera fila. */
        }

        .tarjeta-kpi-grafico-linea {
            background: #ffffff;
            border-radius: 10px; 
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
            padding: 8px 16px; /* Aún más reducido */
            display: flex;
            align-items: center;
            gap: 12px; 
            width: 100%;

            /* --- Las 5 tarjetas se reparten en partes IGUALES el alto
                   disponible de .tablero-grafico-linea (arriba). Si agregas
                   una 6ta tarjeta, este mismo CSS la acomoda sola. --- */
            flex: 1 1 0;
            min-height: 0;
            /* OJO: sin overflow:hidden a propósito (ver más arriba) —
               es lo que estaba recortando el tooltip. La altura de esta
               tarjeta ya queda perfectamente controlada por flexbox
               (flex + min-height:0), así que overflow:hidden aquí era
               redundante Y encima rompía el tooltip. */
        }

        .encabezado-kpi-grafico-linea {
            display: flex;
            align-items: center;
            gap: 8px; 
            flex-shrink: 0;
            width: 150px; /* Más compacto */
        }

        .logo-kpi-grafico-linea {
            width: 30px; /* Reducido */
            height: 30px; 
            border-radius: 50%;
            background: #1e5c3a;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            box-shadow: 0 4px 10px rgba(30, 92, 58, 0.25);
        }

        .logo-kpi-grafico-linea svg {
            width: 16px; 
            height: 16px; 
        }

        .titulo-kpi-grafico-linea {
            font-size: 11px; /* Letra más pequeña */
            font-weight: 700;
            color: #1a1a1a;
            letter-spacing: 0.3px;
        }

        .subtitulo-kpi-grafico-linea {
            font-size: 9px; /* Letra más pequeña */
            color: #7a7a7a;
            margin-top: 1px;
        }

        .area-grafico-linea {
            flex: 1;
            position: relative;
            /* CAMBIO CLAVE (arregla el bug de los gráficos deformados):
               antes esto era "height: auto", lo cual crea una referencia
               CIRCULAR: el alto de esta caja dependía del <svg> de adentro
               (que mide height:100% de ESTA caja), y a la vez nuestro JS
               mide el <svg> para decidir la proporción del gráfico. Medir
               algo cuyo tamaño depende de lo que se está por dibujar da
               resultados basura la primera vez que corre.

               Con height:100%, esta caja mide el alto de su fila
               (.tarjeta-kpi-grafico-linea), que en escritorio SÍ es un
               alto ya definido de antemano por flexbox (viene de la
               cadena de "layout sin scroll" de styles.css, no depende de
               ningún contenido) — así el JS puede medir un valor real y
               estable, sin depender circularmente del propio SVG. */
            height: 100%;
            min-height: 0;
            min-width: 0;
        }

        .area-grafico-linea svg {
            width: 100%;
            height: 100%;
            overflow: visible;
        }

        .promedio-kpi-grafico-linea {
            font-size: 22px; /* Reducido */
            font-weight: 800;
            flex-shrink: 0;
            width: 70px; 
            text-align: right;
            letter-spacing: -0.5px;
            margin-left: auto;
            transition: color 0.3s ease;
        }

        .tooltip-grafico-linea {
            position: absolute;
            background: #1a1a1a;
            color: #fff;
            padding: 6px 10px;
            border-radius: 6px;
            font-size: 11px;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.18s ease;
            white-space: nowrap;
            transform: translate(-50%, -100%);
            margin-top: -8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            z-index: 10;
        }

        .tooltip-grafico-linea::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 4px solid transparent;
            border-top-color: #1a1a1a;
        }

        .tooltip-grafico-linea .semana-grafico-linea {
            font-weight: 600;
            margin-bottom: 2px;
        }

        .tooltip-grafico-linea .valor-grafico-linea {
            color: #b7f0d0;
            font-weight: 700;
        }

        .punto-nucleo-grafico-linea {
            transition: r 0.2s ease, fill 0.3s ease;
            cursor: pointer;
        }

        .grupo-puntos-grafico-linea:hover .punto-nucleo-grafico-linea {
            r: 6; /* Tamaño aumentado en el hover para que destaquen al interactuar */
        }

        /* ===========================================================
           ANIMACIÓN DE "DIBUJADO" DE LA LÍNEA (a pedido)
           Misma técnica que usa .linea-doble-resultado en
           grafico_doble_lineas.css: la línea se dibuja progresivamente
           de izquierda a derecha en vez de aparecer de golpe. Como el
           <path> se recrea de cero cada vez que se llama a
           renderLineaCumplimiento() (togglear el botón, cambiar los
           filtros de semana, etc.), la animación se vuelve a disparar
           sola cada vez — no hace falta hacer nada especial en el JS
           más allá de ponerle esta clase al <path>.
           =========================================================== */
        .linea-cumplimiento-resultado {
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
            animation: dibujarLineaCumplimiento 1.2s ease-out forwards;
        }

        @keyframes dibujarLineaCumplimiento {
            to {
                stroke-dashoffset: 0;
            }
        }

        /* ===========================================================================
           MODO CELULAR (max-width: 768px) — mismo punto de quiebre que styles.css
           ===========================================================================
           En escritorio/TV, .tablero-grafico-linea y cada
           .tarjeta-kpi-grafico-linea reparten un alto EXACTO entre las 5
           filas (ver flex:1 1 auto / flex:1 1 0 más arriba), porque ahí
           la página no puede scrollear y hay que aprovechar justo el
           espacio disponible.

           En celular eso ya no aplica: la página puede crecer y
           scrollear, así que cada fila simplemente mide lo que su
           contenido necesite (flex: none), apiladas una debajo de otra.
           =========================================================================== */
        @media (max-width: 768px) {
            .tablero-grafico-linea {
                flex: none;      /* ya no reparte un alto exacto entre filas */
                min-height: 0;
            }

            .tarjeta-kpi-grafico-linea {
                flex: none;      /* cada fila mide lo que necesite, no 1/5 exacto */
                min-height: 0;
                flex-wrap: wrap; /* logo+título arriba, gráfico abajo (ver reglas siguientes) */
                padding: 16px;
                gap: 12px;
            }

            .encabezado-kpi-grafico-linea {
                width: auto;
                min-width: auto;
            }

            .area-grafico-linea {
                order: 3;
                width: 100%;
                flex: 1 1 100%;
                /* En escritorio esta altura es "auto" porque se estira para
                   llenar el espacio sobrante (ver más arriba). En celular no
                   hay "espacio sobrante" que repartir (la página crece con
                   scroll), así que acá SÍ necesita una altura fija y
                   razonable, o el gráfico se vería con 0px de alto. */
                height: 110px;
                min-height: 110px;
            }

            .promedio-kpi-grafico-linea {
                font-size: 24px;
                width: auto;
                min-width: 80px;
            }
        }

        /* ===========================================================
           TOGGLE MODO: "Resultado" / "% Cumplimiento"
           Ver el HTML (dentro de .left-panel, antes de .tablero-grafico-linea)
           y la lógica en grafico_de_lineas.js
           (función inicializarToggleModoVisualizacion()).
           =========================================================== */
        .toggle-modo-grafico-linea {
            display: inline-flex;
            background-color: #F1F3F4;
            border-radius: 10px;
            padding: 4px;
            gap: 4px;
            margin-bottom: 10px;
            flex-shrink: 0; /* Que nunca se achique, es parte del "piso fijo" de left-panel */
            align-self: flex-start; /* Que no se estire a lo ancho del panel */
        }

        .toggle-modo-btn {
            border: none;
            background: transparent;
            padding: 7px 16px;
            border-radius: 8px;
            font-family: inherit;
            font-size: 12px;
            font-weight: 700;
            color: #5F6368;
            cursor: pointer;
            transition: background-color 0.2s ease, color 0.2s ease;
        }

        .toggle-modo-btn:hover {
            color: #1a1a1a;
        }

        /* Botón activo: fondo verde sólido, texto blanco (mismo estilo
           que ya usas en el resto del dashboard) */
        .toggle-modo-btn.is-active {
            background-color: #0A703D;
            color: #FFFFFF;
        }

        /* ===========================================================
           MODO "% CUMPLIMIENTO"
           Ahora es un gráfico de LÍNEAS (igual estilo que "Resultado"),
           no de barras — reutiliza exactamente las mismas clases del
           modo Resultado (.punto-nucleo-grafico-linea,
           .grupo-puntos-grafico-linea, etc.), por eso no necesita CSS
           propio. Ver renderLineaCumplimiento() en grafico_de_lineas.js.
           =========================================================== */