/* ==========================================================================
   Aproavena — Gráficos de la industria
   --------------------------------------------------------------------------
   Todo va anidado bajo .avena-dashboard-wrap a propósito. Las clases de esta
   hoja son genéricas (.card, .grid, .controls, .hidden, .muted) y sin ese
   contenedor pisarían al resto del sitio, que ahora comparte cabecera y pie
   con estas páginas.

   Los colores y tipografías salen de los tokens de styles.css para que los
   gráficos no se vean como una pieza pegada de otro sitio.
   ========================================================================== */

.avena-dashboard-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px 90px;
  font-family: var(--av-font-sans);
  color: var(--av-body);
}

.avena-dashboard-wrap .dash-title {
  font-family: var(--av-font-serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--av-ink);
  margin: 0 0 18px;
}

.avena-dashboard-wrap .js-title {
  font-family: var(--av-font-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--av-ink-2);
  margin: 0 0 14px;
}

.avena-dashboard-wrap .dashboard,
.avena-dashboard-wrap .single-chart {
  margin-bottom: 42px;
}

.avena-dashboard-wrap .chart-block {
  margin-bottom: 32px;
}

.avena-dashboard-wrap hr {
  border: 0;
  border-top: 1px solid var(--av-border);
  margin: 35px 0;
}

.avena-dashboard-wrap .grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 27px;
}

/* Las .card son celdas de una grilla 1fr, que equivale a minmax(auto, 1fr):
   el mínimo automático estira la celda hasta el ancho del gráfico y con ella
   la página entera. Con min-width:0 la celda manda y el gráfico se desliza
   dentro de .js-chart. */
.avena-dashboard-wrap .grid > *,
.avena-dashboard-wrap .card {
  min-width: 0;
}

.avena-dashboard-wrap .card {
  background: var(--av-surface);
  border: 1px solid var(--av-border);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 20px;
}

.avena-dashboard-wrap .controls {
  margin-bottom: 20px;
}

/* Varias .controls son flex por atributo style. Un hijo flex tiene
   min-width:auto y se niega a encoger por debajo de su contenido: el
   <select> de 320px ensanchaba la fila y con ella la página en pantallas
   muy angostas. */
.avena-dashboard-wrap .controls > * {
  min-width: 0;
  max-width: 100%;
}

.avena-dashboard-wrap .label {
  font-size: 13px;
  font-weight: 600;
  color: var(--av-ink-2);
}

.avena-dashboard-wrap select {
  padding: 6px 8px;
  border: 1px solid var(--av-border);
  border-radius: 6px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  color: var(--av-body);
}

.avena-dashboard-wrap .js-codeSelect {
  width: 320px;
  max-width: 100%;
}

/* --- Botonera de años ----------------------------------------------------- */
.avena-dashboard-wrap .year-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.avena-dashboard-wrap .year-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.avena-dashboard-wrap .year-btn,
.avena-dashboard-wrap .toggle-btn,
.avena-dashboard-wrap .compare-actions button {
  padding: 6px 12px;
  border: 1px solid var(--av-border);
  border-radius: 6px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  color: var(--av-body);
  cursor: pointer;
}

.avena-dashboard-wrap .year-btn:hover,
.avena-dashboard-wrap .toggle-btn:hover,
.avena-dashboard-wrap .compare-actions button:hover {
  background: var(--av-band);
}

.avena-dashboard-wrap .year-btn.active {
  background: var(--av-accent);
  border-color: var(--av-accent);
  color: #fff;
}

.avena-dashboard-wrap .toggle-btn {
  margin-bottom: 10px;
}

/* --- Selector de países --------------------------------------------------- */
.avena-dashboard-wrap .country-compare-panel {
  margin-bottom: 20px;
}

.avena-dashboard-wrap .country-compare {
  margin-bottom: 10px;
}

.avena-dashboard-wrap .js-countrySearch {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--av-border);
  border-radius: 6px;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 14px;
}

.avena-dashboard-wrap .country-list {
  margin-top: 8px;
  border: 1px solid var(--av-border);
  border-radius: 6px;
  max-height: 180px;
  overflow-y: auto;
  padding: 8px;
}

.avena-dashboard-wrap .country-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 14px;
}

.avena-dashboard-wrap .compare-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.avena-dashboard-wrap .muted {
  color: var(--av-body);
  font-size: 13px;
}

.avena-dashboard-wrap .hidden {
  display: none;
}

/* --- Gráficos ------------------------------------------------------------- */
/* Google Charts dibuja a un ancho fijo calculado al inicio: sin esto, en móvil
   el SVG desborda y provoca scroll horizontal en toda la página. */
.avena-dashboard-wrap .js-chart {
  max-width: 100%;
  overflow-x: auto;
}

@media (max-width: 700px) {
  .avena-dashboard-wrap {
    padding-left: var(--av-gutter);
    padding-right: var(--av-gutter);
  }

  /* La caja de cada gráfico ocupa casi todo el ancho: sin tanto relleno
     interno queda más superficie para el dibujo. */
  .avena-dashboard-wrap .card { padding: 14px 12px; border-radius: 8px; }

  /* Objetivos de toque: los años y los botones de país se pulsan con el dedo. */
  .avena-dashboard-wrap .year-btn,
  .avena-dashboard-wrap .toggle-btn,
  .avena-dashboard-wrap .compare-actions button {
    padding: 9px 14px;
    font-size: 15px;
  }
  .avena-dashboard-wrap .country-item { padding: 7px 0; font-size: 15px; }
  .avena-dashboard-wrap .country-list { max-height: 220px; }

  /* Un select o un input de menos de 16px hace que iOS acerque la página. */
  .avena-dashboard-wrap select,
  .avena-dashboard-wrap .js-countrySearch { font-size: 16px; padding: 9px 10px; }

  /* Los desplegables ocupan la fila entera: más fáciles de pulsar y nunca
     empujan el ancho del contenedor. */
  .avena-dashboard-wrap select { width: 100%; box-sizing: border-box; }

  /* Los controles de año se apilan en vez de comprimir la botonera. */
  .avena-dashboard-wrap .year-controls { align-items: flex-start; flex-wrap: wrap; }
}