/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 18 2025 | 22:45:23 */
    /* Contenedor principal */
    .chart-container {
      background: #F0FDFF;
      border: 1px solid #8BEDEB;
      border-radius: 16px;
      padding: 16px;
      max-width: 600px;
      width: 100%;
      margin: 0 auto;
    }

    /* Header con título y etiqueta */
    .chart-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .chart-header h2 {
      font-size: 1.25rem;
      color: #1A2B3C;
    }
    .chart-header span {
      font-size: 1rem;
      color: #4A6572;
    }

    /* Contenedor de barras */
    .chart-bars {
      display: flex;
      align-items: flex-end;  /* Alinea todas las barras por abajo */
      height: 130px;
      gap: 8px;
    }

    /* Cada barra */
    .bar {
      flex: 1;                 /* Ancho igual para todas */
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      background: linear-gradient(to top, #20C1E3, #00A9D0);
    }

    /* Alturas de ejemplo: cambiar según tus datos */
    .bar:nth-child(1) { height: 20%; }
    .bar:nth-child(2) { height: 35%; }
    .bar:nth-child(3) { height: 50%; }
    .bar:nth-child(4) { height: 60%; }
    .bar:nth-child(5) { height: 70%; }
    .bar:nth-child(6) { height: 65%; }
    .bar:nth-child(7) { height: 80%; }

    /* Ajustes para pantallas pequeñas */
    @media (max-width: 480px) {
      .chart-header h2 { font-size: 1rem; }
      .chart-header span { font-size: 0.875rem; }
      .chart-bars { height: 150px; }
    }
  </style>