/* =============================================================================
   CICO 2.0 — Estilos de gráficas (ApexCharts)
   Complementa style.css. Cargar SOLO en las páginas con gráficas.

     1. Bloque de gráfica
     2. Encabezado y etiqueta de herramientas
     3. Tabla de datos bajo el eje
     4. Nota al pie
     5. Ajustes al toolbar de ApexCharts v6
     6. Responsive
   ========================================================================== */


/* =============================================================================
   1. BLOQUE DE GRÁFICA
   Todo lo que debe salir en la exportación vive dentro de .chart-block
   ========================================================================== */
.chart-block{
  background:#fff;
  border:1px solid var(--cico-line);
  border-radius:12px;
  padding:22px 20px 18px;
  margin-bottom:42px;
  box-shadow:var(--shadow-sm);
}

.chart-canvas{ width:100%; min-height:420px; }


/* -----------------------------------------------------------------------------
   .chart-block.is-wide — bloque a ancho de ventana

   Para gráficas con muchas categorías (las 21 actividades económicas), donde
   los 1200px de .container-cico dejan columnas tan estrechas que las
   etiquetas se encinan.

   El bloque escapa del contenedor con un margen negativo calculado: `50% -
   50vw` lleva cada borde hasta el filo de la ventana, y sumar el mismo
   margen lateral del header lo deja alineado con él.

   Solo desde 992px: en pantallas chicas el contenedor ya ocupa casi todo el
   ancho y el cálculo no aportaría nada.
   ----------------------------------------------------------------------------- */
@media (min-width:992px){
  .chart-block.is-wide{
    margin-inline:calc(50% - 50vw + var(--gutter-fluid));
    border-radius:12px;
  }
}


/* =============================================================================
   2. ENCABEZADO DEL BLOQUE
   ========================================================================== */
.chart-block-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:4px;
}

.chart-block-title{
  font-family:var(--ff-display);
  font-weight:600;
  font-size:1.25rem;
  line-height:1.3;
  color:var(--cico-navy);
  margin:0;
}

.chart-block-subtitle{
  font-family:var(--ff-body);
  font-size:.95rem;
  color:var(--cico-muted);
  margin:.25rem 0 0;
}

/* Etiqueta "Herramientas de visualización".
   Va fuera del toolbar de ApexCharts a propósito: en v6 el toolbar es un
   contenedor tipo pill y el truco de customIcons con margin negativo se
   desalinea. */
.chart-tools-label{
  font-family:var(--ff-body);
  font-size:.8rem;
  font-weight:500;
  color:#373D3F;
  white-space:nowrap;
  align-self:center;
  margin-left:auto;
  padding-right:4px;
}


/* =============================================================================
   3. TABLA DE DATOS BAJO EL EJE
   Las medidas (padding-left / width) las inyecta cico-charts.js leyendo
   translateX y gridWidth del chart, para que las celdas caigan sobre las
   barras. No poner anchos fijos aquí.
   ========================================================================== */
.cico-datatable{
  position:relative;
  margin-top:2px;
  overflow:hidden;
  font-family:var(--ff-body);
  font-size:.78rem;
  color:var(--cico-body);
}

.cico-dt-row{
  position:relative;
  display:flex;
  align-items:stretch;
  min-height:26px;
  border-top:1px solid var(--cico-line);
}
.cico-dt-row:last-child{ border-bottom:1px solid var(--cico-line); }

.cico-dt-label{
  position:absolute;
  left:0; top:0; bottom:0;
  display:flex; align-items:center; gap:6px;
  padding-right:8px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
}

/* Marcador de serie: cuadro para columnas, línea para la serie de variación */
.cico-dt-swatch{ flex:0 0 auto; border-radius:2px; }
.cico-dt-swatch.is-column{ width:16px; height:10px; }
.cico-dt-swatch.is-line{ width:18px; height:3px; border-radius:1px; }

.cico-dt-cells{
  display:grid;
  margin-left:auto;
}

.cico-dt-cell{
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding:3px 2px;
  line-height:1.2;
  border-left:1px solid #F0F3F7;
}
.cico-dt-cell:first-child{ border-left:0; }
.cico-dt-cell.is-empty{ color:transparent; }
.cico-dt-cell.is-negative{ color:#B3261E; }


/* =============================================================================
   4. NOTA AL PIE
   ========================================================================== */
.chart-footnote{
  margin:14px 0 0;
  font-family:var(--ff-body);
  font-size:.82rem;
  line-height:1.4;
  color:var(--cico-muted);
}
.chart-footnote strong{ color:var(--cico-body); font-weight:600; }


/* =============================================================================
   5. BOTONES BAJO LA GRÁFICA
   Cierran el bloque: van después de la tabla de datos y de la nota al pie.
   El estilo del botón (.btn-cico) vive en style.css porque se reusa en
   todo el sitio; aquí solo se resuelve la disposición.
   ========================================================================== */
.chart-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:.75rem;
  margin:18px 0 0;
  padding-top:16px;
  border-top:1px solid var(--cico-line);
}

@media (max-width:575.98px){
  .chart-links{ flex-direction:column; align-items:stretch; }
  .chart-links .btn-cico{ width:100%; }
}


/* =============================================================================
   5b. FILTRO SOBRE LA GRÁFICA (select de sector, provincia, etc.)
   Vive dentro de .chart-block, encima del canvas.
   ========================================================================== */
.chart-filter{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.65rem;
  margin:6px 0 18px;
}

.chart-filter label{
  font-family:var(--ff-display);
  font-weight:600;
  font-size:.92rem;
  color:var(--cico-navy);
  margin:0;
}

.select-cico{
  appearance:none;
  -webkit-appearance:none;
  min-width:300px;
  max-width:100%;
  padding:.55rem 2.4rem .55rem 1rem;
  border:2px solid var(--cico-line);
  border-radius:8px;
  background-color:#fff;
  /* Chevron dibujado en el propio background: no depende de Font Awesome
     y no se descuadra al exportar con html2canvas. */
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230096C7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .9rem center;
  font-family:var(--ff-body);
  font-size:.95rem;
  color:var(--cico-body);
  cursor:pointer;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.select-cico:hover{ border-color:var(--cico-line-2); }
.select-cico:focus{
  outline:none;
  border-color:var(--cico-primary);
  box-shadow:0 0 0 3px rgba(0,150,199,.18);
}

/* En la captura el select se sustituye por el valor elegido, ya presente en
   el título del bloque; un control de formulario no aporta nada al PNG. */
.chart-block.is-exporting .chart-filter{ display:none; }

@media (max-width:575.98px){
  .chart-filter{ flex-direction:column; align-items:stretch; }
  .select-cico{ min-width:0; width:100%; }
}


/* =============================================================================
   5c. NOTA METODOLÓGICA
   Aclaraciones sobre cómo se construye el indicador. Va fuera de
   .chart-block: es contexto de la página, no parte de la gráfica, y por eso
   no entra en la exportación.
   ========================================================================== */
.nota-cico{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:18px 20px;
  margin-bottom:42px;
  border:1px solid var(--cico-line-2);
  border-left:4px solid var(--cico-primary);
  border-radius:10px;
  background:#F4FAFD;
}

.nota-cico .nota-icono{
  flex:0 0 auto;
  color:var(--cico-primary);
  font-size:1.15rem;
  line-height:1.4;
}

.nota-cico h3{
  font-family:var(--ff-display);
  font-weight:600;
  font-size:1rem;
  color:var(--cico-navy);
  margin:0 0 .35rem;
}

.nota-cico p{
  font-size:.95rem;
  line-height:1.5;
  color:var(--cico-body);
  margin:0;
}


/* =============================================================================
   5d. AVISO DE GRÁFICA QUE NO PUDO DIBUJARSE
   Lo inyecta cico-charts.js cuando create() o render() lanzan. Sirve para no
   dejar un hueco en blanco sin explicación.
   ========================================================================== */
.chart-error{
  margin:12px 0 0;
  padding:12px 16px;
  border:1px solid #F3C7C3;
  border-left:4px solid #E02B20;
  border-radius:8px;
  background:#FDF3F2;
  font-family:var(--ff-body);
  font-size:.9rem;
  line-height:1.45;
  color:#8A1F17;
}


/* =============================================================================
   6. AJUSTES AL TOOLBAR DE APEXCHARTS
   ========================================================================== */
.apexcharts-toolbar{ z-index:5 !important; }

.apexcharts-menu-icon svg,
.apexcharts-zoom-icon svg,
.apexcharts-zoomin-icon svg,
.apexcharts-zoomout-icon svg,
.apexcharts-reset-icon svg,
.apexcharts-pan-icon svg{ transition:fill .15s ease, stroke .15s ease; }

/* Botón propio de descarga (reemplaza al nativo) */
.cico-download-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px; height:24px;
  color:#6E8192;
  cursor:pointer;
  transition:color .15s ease;
}
.cico-download-icon:hover{ color:var(--cico-primary); }

/* Estado durante la captura: se ocultan los controles que no son dato.

   El toolbar y su etiqueta se ocultan con visibility para no mover el
   encabezado; los botones se sacan del flujo con display para que el PNG
   termine en la nota al pie y no quede una banda blanca al final. */
.chart-block.is-exporting .apexcharts-toolbar,
.chart-block.is-exporting .chart-tools-label{ visibility:hidden; }

.chart-block.is-exporting .chart-links{ display:none; }


/* =============================================================================
   7. RESPONSIVE
   ========================================================================== */
@media (max-width:991.98px){
  .chart-block{ padding:18px 14px 16px; }
  .cico-datatable{ font-size:.72rem; }
}

/* Bajo este ancho la tabla de datos deja de ser legible: se oculta y los
   valores quedan disponibles en el tooltip y en dataLabels. */
@media (max-width:767.98px){
  .cico-datatable{ display:none; }
  .chart-canvas{ min-height:340px; }
}

@media print{
  .chart-block{ break-inside:avoid; box-shadow:none; }
  .apexcharts-toolbar, .chart-tools-label{ display:none !important; }
}