/*──────────────────────────────────────────────────────────
  2.  DataTables
───────────────────────────────────────────────────────────*/
/* Table container */
.table-responsive {
    position: relative;
    width: 100%;
  }

  /* Overlay */
  .dt-overlay {
    position: absolute; inset: 0;
    background: rgba(255,255,255,.85);
    display: flex; justify-content: center; align-items: center;
    z-index: 10;
  }

  /* Toolbar layout */
  .dt-toolbar {
    display: flex; flex-wrap: wrap;
    justify-content: space-between; align-items: center;
    padding: .25rem .5rem;
    margin-bottom: .5rem;
  }

  /* Buttons */
  .btn-primary, .page-item.active .page-link {
    background: var(--clr-primary);
    border-color: var(--clr-primary);
  }
  .btn-success {
    background: var(--clr-success);
    border-color: var(--clr-success);
  }
  .btn-dt {
    background: var(--clr-muted);
    border-color: var(--clr-muted);
    color: #fff;
  }

  /* Expand icon */
  table.dataTable tbody tr td.dt-control::before {
    content: "+";
    color: #fff; background: #495057;
    padding: 4px; border-radius: 2px;
  }

  /* “Sin info” styling */
  table.dataTable tbody td:empty::before,
  table.dataTable tbody td:contains("Sin información"),
  table.dataTable tbody td:contains("Sin provincia") {
    font-style: italic;
    color: var(--clr-muted) !important;
  }

  /* Pagination centering */
  .dataTables_paginate {
    margin: 1rem 0 .5rem;
    display: flex; justify-content: center;
  }

  /* gráfico historial dentro del detalle */
.history-chart{
  width:100% !important;
  height:250px;
}

/* ── Detalle expandido: 3 columnas flex y alto controlado ───────────── */
.child-columns{
  display:flex;               /* una fila          */
  flex-wrap:wrap;             /* salta si no cabe  */
  gap:1rem;                   /* separación nice   */
}
.child-col{
  flex:1 1 33%;               /* 3 partes iguales  */
  min-width:240px;            /* evita columnas XS */
}
.child-col.historial{overflow-x:auto;}

.history-chart{
  width:100% !important;
  max-height:220px !important; /* frena el “estirón” vertical   */
}

.child-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: auto;
}
.child-col {
  flex: 1 1 30%;         /* 3 columnas iguales */
  min-width: 200px;
}
.child-col.historial {
  overflow-x: auto;
}
/* Mostrar ejes separados para las 3 series */
.history-chart {
  width: 100% !important;
  height: 250px !important;
}