{
  "version": "1",
  "metadata": {
    "marimo_version": "0.15.2"
  },
  "cells": [
    {
      "id": "Hbol",
      "code_hash": "1d0db38904205bec4d6f6f6a1f6cec3e",
      "outputs": [
        {
          "type": "data",
          "data": {
            "text/plain": ""
          }
        }
      ],
      "console": []
    },
    {
      "id": "MJUe",
      "code_hash": "6e76434bea3e7f9684a45f1946a4f957",
      "outputs": [
        {
          "type": "data",
          "data": {
            "text/plain": ""
          }
        }
      ],
      "console": []
    },
    {
      "id": "vblA",
      "code_hash": "33a6366ca80989795e9794e64bbb13ae",
      "outputs": [
        {
          "type": "data",
          "data": {
            "text/html": "<marimo-ui-element object-id='vblA-0' random-id='9ac9f5b6-a6a9-306e-a44a-069ac0e6aa33'><marimo-radio data-initial-value='&quot;Scatter&quot;' data-label='&quot;&lt;span class=&#92;&quot;markdown prose dark:prose-invert&#92;&quot;&gt;&lt;span class=&#92;&quot;paragraph&#92;&quot;&gt;Modo de dibujo&lt;/span&gt;&lt;/span&gt;&quot;' data-options='[&quot;Scatter&quot;, &quot;Barras&quot;]' data-inline='false' data-disabled='false'></marimo-radio></marimo-ui-element>"
          }
        }
      ],
      "console": []
    },
    {
      "id": "bkHC",
      "code_hash": "e5ac1adee529aff3c10486f4b044d3c8",
      "outputs": [
        {
          "type": "data",
          "data": {
            "text/html": "<span class=\"markdown prose dark:prose-invert\"><span class=\"paragraph\">Widgets inicializados. Usa el selector para mostrar uno u otro.</span></span>"
          }
        }
      ],
      "console": []
    },
    {
      "id": "lEQa",
      "code_hash": "dec81d2a48cd7bb719d6c486a32b69ed",
      "outputs": [
        {
          "type": "data",
          "data": {
            "text/html": "<marimo-ui-element object-id='lEQa-0' random-id='e3a96b2b-fc0f-4574-72e3-dfe94f6627c6'><marimo-anywidget data-initial-value='{&quot;brushsize&quot;: 40, &quot;data&quot;: [], &quot;height&quot;: 500, &quot;width&quot;: 800}' data-label='null' data-js-url='&quot;./@file/487028-52958-mGXisH7I.js&quot;' data-js-hash='&quot;ebf5df47eec1161864f68974d25a6460&quot;' data-css='&quot;/* Modern design system with enhanced accessibility and notebook compatibility */&#92;n:root {&#92;n    /* Light theme colors with improved contrast ratios */&#92;n    --dd-bg-color: #ffffff;&#92;n    --dd-text-color: #111827;&#92;n    --dd-border-color: #9ca3af; /* Darker border for better visibility */&#92;n    --dd-hover-color: #f9fafb;&#92;n    --dd-active-color: #f3f4f6;&#92;n    --dd-primary-color: #2563eb; /* Darker blue for better contrast */&#92;n    --dd-primary-hover: #1d4ed8;&#92;n    --dd-svg-bg: #f9fafb;&#92;n    --dd-input-bg: #f3f4f6;&#92;n    --dd-control-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);&#92;n    --dd-shadow-color: rgba(0, 0, 0, 0.1);&#92;n    /* More distinct colors for data points */&#92;n    --dd-color-a: #1e40af; /* Darker blue */&#92;n    --dd-color-b: #b45309; /* Darker amber */&#92;n    --dd-color-c: #15803d; /* Darker green */&#92;n    --dd-color-d: #b91c1c; /* Darker red */&#92;n    /* Count backgrounds with better contrast */&#92;n    --dd-count-bg-a: #dbeafe;&#92;n    --dd-count-bg-b: #fef3c7;&#92;n    --dd-count-bg-c: #dcfce7;&#92;n    --dd-count-bg-d: #fee2e2;&#92;n    --dd-count-text-a: #1e3a8a;&#92;n    --dd-count-text-b: #92400e;&#92;n    --dd-count-text-c: #166534;&#92;n    --dd-count-text-d: #991b1b;&#92;n    --dd-svg-border: 1px solid #9ca3af;&#92;n    --dd-svg-border-radius: 0.5rem;&#92;n    /* Focus outline */&#92;n    --dd-focus-ring: 0 0 0 2px rgba(59, 130, 246, 0.5);&#92;n}&#92;n&#92;n/* Dark mode styles with improved contrast */&#92;n@media (prefers-color-scheme: dark) {&#92;n    :root {&#92;n        --dd-bg-color: #1f2937;&#92;n        --dd-text-color: #f9fafb;&#92;n        --dd-border-color: #6b7280; /* Lighter border for better visibility in dark mode */&#92;n        --dd-hover-color: #374151;&#92;n        --dd-active-color: #4b5563;&#92;n        --dd-primary-color: #3b82f6;&#92;n        --dd-primary-hover: #60a5fa;&#92;n        --dd-svg-bg: #111827;&#92;n        --dd-input-bg: #374151;&#92;n        --dd-control-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25);&#92;n        --dd-shadow-color: rgba(0, 0, 0, 0.5);&#92;n        /* More vibrant colors for dark mode data points */&#92;n        --dd-color-a: #3b82f6; /* Brighter blue for dark mode */&#92;n        --dd-color-b: #f59e0b; /* Brighter amber */&#92;n        --dd-color-c: #10b981; /* Brighter green */&#92;n        --dd-color-d: #ef4444; /* Brighter red */&#92;n        /* Higher contrast count backgrounds for dark mode */&#92;n        --dd-count-bg-a: #1e40af;&#92;n        --dd-count-bg-b: #92400e;&#92;n        --dd-count-bg-c: #166534;&#92;n        --dd-count-bg-d: #991b1b;&#92;n        --dd-count-text-a: #dbeafe;&#92;n        --dd-count-text-b: #fef3c7;&#92;n        --dd-count-text-c: #dcfce7;&#92;n        --dd-count-text-d: #fee2e2;&#92;n        --dd-svg-border: 1px solid #6b7280;&#92;n        --dd-focus-ring: 0 0 0 2px rgba(96, 165, 250, 0.6);&#92;n    }&#92;n}&#92;n&#92;n/* Notebook-specific adjustments */&#92;n.jp-OutputArea .dd-scatter-container,&#92;n.jupyter-widgets-output-area .dd-scatter-container,&#92;n.output_subarea .dd-scatter-container {&#92;n    background-color: transparent;&#92;n    padding: 0.5rem;&#92;n    margin: 0;&#92;n}&#92;n&#92;n/* Google Colab specific adjustments */&#92;n.google-colab .dd-scatter-container {&#92;n    font-family: &#x27;Roboto&#x27;, sans-serif;&#92;n}&#92;n&#92;n/* Base container styles */&#92;n.dd-scatter-container {&#92;n    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, &#92;&quot;Segoe UI&#92;&quot;, Roboto, &#92;&quot;Helvetica Neue&#92;&quot;, Arial, sans-serif;&#92;n    font-size: 0.875rem;&#92;n    line-height: 1.25rem;&#92;n    width: 100%;&#92;n    max-width: 1200px;&#92;n    box-sizing: border-box;&#92;n    margin: 0 auto;&#92;n    padding: 1rem;&#92;n    color: var(--dd-text-color);&#92;n    background-color: var(--dd-bg-color);&#92;n    border-radius: 0.5rem;&#92;n    transition: background-color 0.3s ease, color 0.3s ease;&#92;n}&#92;n&#92;n/* Controls layout */&#92;n.dd-scatter-controls {&#92;n    display: flex;&#92;n    flex-wrap: wrap;&#92;n    align-items: center;&#92;n    gap: 0.75rem;&#92;n    margin-bottom: 1rem;&#92;n    width: 100%;&#92;n}&#92;n&#92;n/* Fieldset styling */&#92;n.dd-scatter-container fieldset {&#92;n    border: 1px solid var(--dd-border-color);&#92;n    border-radius: 0.375rem;&#92;n    padding: 0.5rem 0.75rem;&#92;n    background-color: var(--dd-bg-color);&#92;n    box-shadow: var(--dd-control-shadow);&#92;n    font-size: 0.875rem;&#92;n    margin: 0;&#92;n    transition: border-color 0.2s ease, box-shadow 0.2s ease;&#92;n}&#92;n&#92;n.dd-scatter-container fieldset:hover {&#92;n    border-color: var(--dd-primary-hover);&#92;n}&#92;n&#92;n.dd-scatter-container legend {&#92;n    font-weight: 600;&#92;n    font-size: 0.8125rem;&#92;n    color: var(--dd-text-color);&#92;n    padding: 0 0.25rem;&#92;n}&#92;n&#92;n/* Button styling */&#92;n.dd-scatter-container .button-group {&#92;n    display: flex;&#92;n    gap: 0.5rem;&#92;n}&#92;n&#92;n.dd-scatter-container button {&#92;n    font-weight: 500;&#92;n    font-size: 0.875rem;&#92;n    padding: 0.5rem 1rem;&#92;n    cursor: pointer;&#92;n    border: 1px solid var(--dd-border-color);&#92;n    border-radius: 0.375rem;&#92;n    background-color: var(--dd-bg-color);&#92;n    color: var(--dd-text-color);&#92;n    transition: all 0.15s ease;&#92;n    box-shadow: var(--dd-control-shadow);&#92;n    line-height: 1.25rem;&#92;n    margin: 0;&#92;n    display: inline-flex;&#92;n    align-items: center;&#92;n    justify-content: center;&#92;n}&#92;n&#92;n.dd-scatter-container button svg {&#92;n    margin-right: 0.25rem;&#92;n    background: none;&#92;n    border: none;&#92;n    box-shadow: none;&#92;n    display: inline;&#92;n    width: 16px;&#92;n    height: 16px;&#92;n}&#92;n&#92;n.dd-scatter-container button:hover {&#92;n    background-color: var(--dd-hover-color);&#92;n    border-color: var(--dd-primary-color);&#92;n    box-shadow: 0 2px 4px var(--dd-shadow-color);&#92;n}&#92;n&#92;n.dd-scatter-container button:focus {&#92;n    outline: none;&#92;n    box-shadow: var(--dd-focus-ring);&#92;n}&#92;n&#92;n.dd-scatter-container button:active {&#92;n    background-color: var(--dd-active-color);&#92;n    transform: translateY(1px);&#92;n    box-shadow: none;&#92;n}&#92;n&#92;n/* Count labels */&#92;n.dd-scatter-container span.count {&#92;n    display: inline-flex;&#92;n    align-items: center;&#92;n    justify-content: center;&#92;n    padding: 0.25rem 0.75rem;&#92;n    font-size: 0.75rem;&#92;n    font-weight: 600;&#92;n    border-radius: 9999px;&#92;n    margin-right: 0.5rem;&#92;n    border: 1px solid transparent;&#92;n    transition: all 0.2s ease;&#92;n}&#92;n&#92;n.dd-scatter-container span.count[data-color=&#92;&quot;a&#92;&quot;] {&#92;n    background-color: var(--dd-count-bg-a);&#92;n    color: var(--dd-count-text-a);&#92;n}&#92;n&#92;n.dd-scatter-container span.count[data-color=&#92;&quot;b&#92;&quot;] {&#92;n    background-color: var(--dd-count-bg-b);&#92;n    color: var(--dd-count-text-b);&#92;n}&#92;n&#92;n.dd-scatter-container span.count[data-color=&#92;&quot;c&#92;&quot;] {&#92;n    background-color: var(--dd-count-bg-c);&#92;n    color: var(--dd-count-text-c);&#92;n}&#92;n&#92;n.dd-scatter-container span.count[data-color=&#92;&quot;d&#92;&quot;] {&#92;n    background-color: var(--dd-count-bg-d);&#92;n    color: var(--dd-count-text-d);&#92;n}&#92;n&#92;n/* Radio button class selector */&#92;n.dd-scatter-container .class-selector {&#92;n    display: flex;&#92;n    flex-wrap: wrap;&#92;n    gap: 0.5rem;&#92;n    align-items: center;&#92;n}&#92;n&#92;n.dd-scatter-container .brushsize-selector {&#92;n    min-width: 200px;&#92;n}&#92;n&#92;n/* Improved radio buttons */&#92;n.dd-scatter-container input[type=&#92;&quot;radio&#92;&quot;] {&#92;n    appearance: none;&#92;n    -webkit-appearance: none;&#92;n    width: 1rem;&#92;n    height: 1rem;&#92;n    border: 2px solid var(--dd-border-color);&#92;n    border-radius: 50%;&#92;n    margin-right: 0.25rem;&#92;n    position: relative;&#92;n    cursor: pointer;&#92;n    vertical-align: -0.125em;&#92;n    transition: all 0.15s ease;&#92;n}&#92;n&#92;n.dd-scatter-container input[type=&#92;&quot;radio&#92;&quot;]:checked {&#92;n    border-color: var(--dd-primary-color);&#92;n    background-color: var(--dd-primary-color);&#92;n}&#92;n&#92;n.dd-scatter-container input[type=&#92;&quot;radio&#92;&quot;]:checked::after {&#92;n    content: &#92;&quot;&#92;&quot;;&#92;n    position: absolute;&#92;n    top: 50%;&#92;n    left: 50%;&#92;n    transform: translate(-50%, -50%);&#92;n    width: 0.375rem;&#92;n    height: 0.375rem;&#92;n    border-radius: 50%;&#92;n    background-color: white;&#92;n}&#92;n&#92;n.dd-scatter-container input[type=&#92;&quot;radio&#92;&quot;]:hover {&#92;n    border-color: var(--dd-primary-hover);&#92;n}&#92;n&#92;n.dd-scatter-container input[type=&#92;&quot;radio&#92;&quot;]:focus {&#92;n    outline: none;&#92;n    box-shadow: var(--dd-focus-ring);&#92;n}&#92;n&#92;n.dd-scatter-container .class-selector label {&#92;n    margin-right: 0.75rem;&#92;n    cursor: pointer;&#92;n    display: inline-flex;&#92;n    align-items: center;&#92;n    user-select: none;&#92;n    transition: color 0.15s ease;&#92;n}&#92;n&#92;n.dd-scatter-container .class-selector label:hover {&#92;n    color: var(--dd-primary-color);&#92;n}&#92;n&#92;n/* Range slider improvements */&#92;n.dd-scatter-container .brushsize-selector input[type=&#92;&quot;range&#92;&quot;] {&#92;n    display: block;&#92;n    width: 100%;&#92;n    margin: 0.5rem 0;&#92;n    padding: 0;&#92;n    -webkit-appearance: none;&#92;n    appearance: none;&#92;n    height: 0.25rem;&#92;n    background: var(--dd-input-bg);&#92;n    border-radius: 9999px;&#92;n    outline: none;&#92;n}&#92;n&#92;n.dd-scatter-container .brushsize-selector input[type=&#92;&quot;range&#92;&quot;]::-webkit-slider-thumb {&#92;n    -webkit-appearance: none;&#92;n    appearance: none;&#92;n    width: 1.125rem;&#92;n    height: 1.125rem;&#92;n    background: var(--dd-primary-color);&#92;n    border: 2px solid white;&#92;n    border-radius: 50%;&#92;n    cursor: pointer;&#92;n    box-shadow: 0 1px 3px var(--dd-shadow-color);&#92;n    transition: transform 0.15s ease, box-shadow 0.15s ease;&#92;n}&#92;n&#92;n.dd-scatter-container .brushsize-selector input[type=&#92;&quot;range&#92;&quot;]::-moz-range-thumb {&#92;n    width: 1.125rem;&#92;n    height: 1.125rem;&#92;n    background: var(--dd-primary-color);&#92;n    border: 2px solid white;&#92;n    border-radius: 50%;&#92;n    cursor: pointer;&#92;n    box-shadow: 0 1px 3px var(--dd-shadow-color);&#92;n    transition: transform 0.15s ease, box-shadow 0.15s ease;&#92;n}&#92;n&#92;n.dd-scatter-container .brushsize-selector input[type=&#92;&quot;range&#92;&quot;]::-webkit-slider-thumb:hover,&#92;n.dd-scatter-container .brushsize-selector input[type=&#92;&quot;range&#92;&quot;]::-moz-range-thumb:hover {&#92;n    transform: scale(1.15);&#92;n    box-shadow: 0 2px 5px var(--dd-shadow-color);&#92;n}&#92;n&#92;n.dd-scatter-container .brushsize-selector input[type=&#92;&quot;range&#92;&quot;]::-webkit-slider-thumb:active,&#92;n.dd-scatter-container .brushsize-selector input[type=&#92;&quot;range&#92;&quot;]::-moz-range-thumb:active {&#92;n    transform: scale(0.95);&#92;n}&#92;n&#92;n.dd-scatter-container .brushsize-selector input[type=&#92;&quot;range&#92;&quot;]:focus {&#92;n    box-shadow: var(--dd-focus-ring);&#92;n}&#92;n&#92;n/* SVG container and visualization */&#92;n.dd-scatter-container .dd-scatter-svg-container {&#92;n    width: 100%;&#92;n    box-sizing: border-box;&#92;n    margin-top: 0.75rem;&#92;n}&#92;n&#92;n.dd-scatter-container svg {&#92;n    display: block;&#92;n    cursor: crosshair;&#92;n    background: var(--dd-svg-bg);&#92;n    width: 100%;&#92;n    height: auto;&#92;n    max-width: 100%;&#92;n    box-sizing: border-box;&#92;n    border: var(--dd-svg-border);&#92;n    border-radius: var(--dd-svg-border-radius);&#92;n    box-shadow: 0 1px 3px var(--dd-shadow-color);&#92;n    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;&#92;n}&#92;n&#92;n.dd-scatter-container svg:hover {&#92;n    box-shadow: 0 2px 6px var(--dd-shadow-color);&#92;n}&#92;n&#92;n/* Responsive design improvements */&#92;n@media (max-width: 640px) {&#92;n    .dd-scatter-controls {&#92;n        flex-direction: column;&#92;n        align-items: stretch;&#92;n    }&#92;n    &#92;n    .dd-scatter-container .button-group {&#92;n        flex-direction: column;&#92;n    }&#92;n    &#92;n    .dd-scatter-container fieldset {&#92;n        width: 100%;&#92;n    }&#92;n}&#92;n&#92;n/* High-contrast mode support */&#92;n@media (forced-colors: active) {&#92;n    .dd-scatter-container button,&#92;n    .dd-scatter-container fieldset,&#92;n    .dd-scatter-container svg {&#92;n        border: 2px solid CanvasText;&#92;n    }&#92;n    &#92;n    .dd-scatter-container button:focus,&#92;n    .dd-scatter-container input:focus {&#92;n        outline: 2px solid Highlight;&#92;n    }&#92;n}&#92;n&#92;n/* Print styles */&#92;n@media print {&#92;n    .dd-scatter-container {&#92;n        background-color: white !important;&#92;n        color: black !important;&#92;n        box-shadow: none !important;&#92;n    }&#92;n    &#92;n    .dd-scatter-container svg {&#92;n        background-color: white !important;&#92;n        border: 1px solid #ddd !important;&#92;n    }&#92;n}&quot;' data-buffer-paths='[]'></marimo-anywidget></marimo-ui-element>"
          }
        }
      ],
      "console": [
        {
          "type": "stream",
          "name": "stderr",
          "text": "The truth value of a UIElement is always True. You probably want to call `.value` instead."
        }
      ]
    },
    {
      "id": "PKri",
      "code_hash": "9e236d272c6d3500bd900ea12f1c7a35",
      "outputs": [
        {
          "type": "data",
          "data": {
            "text/html": "<span class=\"markdown prose dark:prose-invert\"><span class=\"paragraph\">Dibuja puntos (Scatter) o columnas (Barras) para ver datos.</span></span>"
          }
        }
      ],
      "console": []
    },
    {
      "id": "Xref",
      "code_hash": "34cc9e0a8085a2db22b5f3056af9177b",
      "outputs": [
        {
          "type": "error",
          "ename": "ancestor-stopped",
          "evalue": "This cell wasn't run because an ancestor was stopped with `mo.stop`: ",
          "traceback": []
        }
      ],
      "console": []
    },
    {
      "id": "SFPL",
      "code_hash": "158b339695279f227d9a718bd2b4378f",
      "outputs": [
        {
          "type": "error",
          "ename": "ancestor-stopped",
          "evalue": "This cell wasn't run because an ancestor was stopped with `mo.stop`: ",
          "traceback": []
        }
      ],
      "console": []
    },
    {
      "id": "BYtC",
      "code_hash": null,
      "outputs": [
        {
          "type": "data",
          "data": {
            "text/plain": ""
          }
        }
      ],
      "console": []
    }
  ]
}