/* Eliminar fondo y borde de la fila de valores del pie del heatmap */
.heatmap-foot-values th,
.heatmap-foot-val {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
#heatmap-legend .legend-item {
  cursor: pointer;
  position: relative;
}
#heatmap-legend .legend-item:hover::after {
  content: '\1F50D'; /* Unicode lupa */
  position: absolute;
  right: -22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: #64748b;
  pointer-events: none;
}
#heatmap-legend {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
#heatmap table tr:last-child td {
  border-bottom: none !important;
}
@keyframes heatmapRipple {
  0% { opacity: 0.7; }
  60% { opacity: 0.35; }
  100% { opacity: 0; }
}
/* Eliminado movimiento de heatmapWave para hover en celdas del heatmap */
@keyframes heatmapRipple {
  0% { transform: translate(-50%,-50%) scale(0); opacity: 0.7; }
  60% { transform: translate(-50%,-50%) scale(1.1); opacity: 0.35; }
  100% { transform: translate(-50%,-50%) scale(1.4); opacity: 0; }
}

.stat-chip { transition: border-color 0.18s; }
/* Neutral hover: keep same subtle border, no colors */
.stat-chip.positive:hover,
.stat-chip.negative:hover,
.stat-chip:hover:not(.positive):not(.negative) {
  border-color: #e2e8f0;
  border-width: 1px;
}

:root { --page-pad: 28px; }

body { font-family: Inter, Arial, sans-serif; margin:0; background:#f8fafc; color:#0f172a; }
#headingYears { font-family: "Open Sans", Inter, Arial, sans-serif; }
header { background:#ffffff; border-bottom:1px solid #e2e8f0; padding:16px 28px; }
h1 { font-size:24px; margin:0; }
main { max-width:none; margin: 28px 0 60px; padding:0 var(--page-pad); }
.filters { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:20px; }

/* Mensaje global legacy: no mostrar (usamos overlay + estados por panel) */
#status{ display:none !important; }

/* Site title display (restored look: big, centered above IMD block) */
#siteTitleDisplay{
  font-family: "Open Sans", Inter, Arial, sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #000000;
  text-align: center;
  width: 100%;
}

/* While the report loads, hide all report content; keep overlay + floating title visible */
body.report-loading main{ visibility: hidden; }

/* Durante el overlay/spinner: no mostrar el nombre del aforo */
body.report-loading #siteTitleDisplay{ display:none !important; }

/* Title placement modes */
#siteTitleDisplay.site-title-floating{
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  z-index: 2100; /* above #pageLoadingOverlay */
  padding: 10px var(--page-pad);
  background: transparent;
  pointer-events: none;
}

#siteTitleDisplay.site-title-inline{
  position: static;
  padding: 0;
  margin: 0 0 12px 0;
  pointer-events: auto;
}

.chart-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chart-title-wrap .period-label {
  margin: 0;
  font-size: 11px;
}

/* Periodo: en cursiva para lectura rápida */
.period-label{
  font-style: italic;
}
/* Blocks: a bit softer (less “marcado”) */
.card {
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.85);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* Static site map: full-bleed and integrated (no white block below) */
#siteStaticMapWrap{
  width: 100%;
  margin: 0;
}

/* Override the "full-bleed band" padding so the map itself reaches edge-to-edge */
.chart-box-stack > #siteStaticMapWrap.site-map-box{
  padding: 0;
  background: transparent;
  max-width: 1240px;
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 18px;
}

.site-map-frame{
  position: relative;
  width: 100%;
  overflow: hidden;
}

#siteStaticMap{
  width: 100%;
  height: 380px;
  border-radius: 12px;
  border: none;
  background: #eef2f7;
}

/* Caption overlay (avoid extra rectangle under the map) */
#siteStaticMapCaption{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 10px var(--page-pad);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 12px;
  color: rgba(226, 232, 240, 0.92);
  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.35);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.55) 100%);
  pointer-events: none;
}

.site-map-attrib{
  font-size: 11px;
  color: rgba(226, 232, 240, 0.72);
}

@media (max-width: 700px){
  #siteStaticMap{ height: 260px; }
  #siteStaticMapCaption{ padding: 10px 14px; }
}

/* Ensure container clips map tiles to the rounded corners */
.site-map-frame { overflow: hidden; border-radius: 12px; }

/* Keep Leaflet controls under the fixed header to avoid overlap when scrolling */
.leaflet-control,
.leaflet-control-container,
.leaflet-top,
.leaflet-bottom {
  z-index: 600 !important;
}

/* When the site title is shown inside or above the static map card, use a smaller font */
#siteStaticMapWrap #siteTitleDisplay,
#siteStaticMapWrap .site-title-inline,
#siteStaticMapWrap .site-title-floating {
  font-size: 19px;
  line-height: 1.15;
  padding: 6px 12px;
}

/* Chart blocks: full-width sections without "card" border */
.chart-box-stack {
  display: flex;
  flex-direction: column;
}

.chart-box-stack > .card.chart-box {
  border: none;
  box-shadow: none;
  border-radius: 0;
  /* Full-bleed inside main padding */
  margin-left: calc(-1 * var(--page-pad));
  margin-right: calc(-1 * var(--page-pad));
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}

.chart-box-stack > .card.chart-box.alt-a { background-color: #ffffff; }
.chart-box-stack > .card.chart-box.alt-b { background-color: #f3f4f6; }
/* Fallback (si JS aún no asignó clases) */
.chart-box-stack > .card.chart-box:not(.alt-a):not(.alt-b):nth-of-type(odd) { background-color: #ffffff; }
.chart-box-stack > .card.chart-box:not(.alt-a):not(.alt-b):nth-of-type(even) { background-color: #f3f4f6; }

.chart-box-stack > .card.chart-box + .card.chart-box { margin-top: 0; }
.grid { display:grid; gap:24px; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); }
table { width:100%; border-collapse:collapse !important; border-spacing:0 !important; font-size:13px; }
th, td { padding:6px 8px; text-align:left; border:none !important; margin:0 !important; border-bottom:none !important; border-top:none !important; background-clip:padding-box !important; }
th { background:#f1f5f9; font-weight:600; }
.chart-box { height:320px; }
.muted { color:#64748b; font-size:12px; }
button { background:#2563eb; color:#fff; border:none; padding:10px 18px; border-radius:8px; cursor:pointer; font-weight:600; }
button:disabled { opacity:.55; cursor:default; }
input, select { border:1px solid #cbd5e1; border-radius:8px; padding:8px 10px; font-size:14px; color:#475569; }
/* Remove default blue focus ring on filters while keeping consistent styling */
input:focus, select:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: #cbd5e1; /* keep neut
  ral border */
}
/* Enhanced filter dropdowns: apply the same nice UI on desktop */
label.filter-enhanced { position: relative; display: inline-flex; align-items: center; gap: 6px; }
/* Hide native select; JS keeps it in sync */
label.filter-enhanced select { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }
.filter-trigger { display:inline-flex; align-items:center; gap:8px; padding:8px 10px; font-size:13px; border:1px solid #cbd5e1; border-radius:8px; background:#fff; color:#475569; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,0.06); }
.filter-trigger svg { width:16px; height:16px; }
.filter-dropdown { position:absolute; top:calc(100% + 6px); left:0; z-index: 3000; background:#fff; border:1px solid #e2e8f0; border-radius:10px; box-shadow:0 10px 22px rgba(0,0,0,0.12); min-width: 100%; max-height: 260px; overflow:auto; display:none; }
.filter-option { display:flex; align-items:center; padding:10px 12px; font-size:13px; color:#1f2937; cursor:pointer; }
.filter-option:hover { background:#f1f5f9; }
.filter-option[aria-selected="true"] { background:#e2e8f0; font-weight:600; }
footer { text-align:center; padding:32px 0 40px; font-size:12px; color:#64748b; }

/* Layout para gráficas + panel de stats a la derecha */
.chart-flex { display:flex; gap:32px; align-items:stretch; width:100%; max-width:none; margin:0; }
.chart-area {
  flex: 1 1 640px;
  min-width: 0;
  max-width: none;
  display: flex;
  flex-direction: column;
}
.bargraphic-header { display:flex; flex-direction:column; gap:6px; margin: 2px 0 14px; }
.bargraphic-header { width: 100%; }
.bargraphic-title { font-family: "Open Sans", Inter, Arial, sans-serif; font-size: 15px; font-weight: 700; color: rgba(15, 23, 42, 0.78); line-height: 1.3; }
.bargraphic-header .period-label { margin:0; font-size: 13px; line-height: 1.4; }
.chart-area canvas { width:100% !important; height:auto; }

/* Años (Chart.js): limitar altura para que no se dispare */
#chartYears{
  height: 200px !important;
  max-height: 200px !important;
}
.stats-panel { flex: 0 1 520px; min-width:340px; max-width:520px; display:flex; flex-direction:column; gap:24px; font-size:13px; }
.stats-panel h3 { margin:0; font-size:12px; font-weight:600; letter-spacing:.6px; color:#475569; text-transform:uppercase; }
.stats-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px 18px; align-content:start; }
@media (max-width:1150px){ .stats-panel{flex:1 1 auto;} .stats-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));} }

/* Heatmap should respect container width like other blocks */
#heatmap {
  width: 100% !important;
  min-width: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Forzar integración visual del heatmap en todos los contextos */
#cardHeatmap.card.chart-box {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#heatmap {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

@media (min-width: 901px){
  #heatmap {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 24px 8px 26px 8px !important;
  }
  #cardHeatmap.card.chart-box {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
}

@media (max-width:600px){
  #heatmap {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding-left:0 !important;
    overflow: visible !important;
    min-width: auto !important;
    height: auto !important;
  }
  #cardHeatmap.card.chart-box {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
}

/* Prevent ultra-wide stretching: keep inner content at readable max width */
.card.chart-box .chart-flex{ max-width: 1240px; margin: 0 auto; }
.card.chart-box .chart-area{ max-width: 780px; }

/* Squared chips: slightly wider, a bit less tall; subtle gray background for indicators */
.stat-chip { position:relative; background:#f6f7f9; border:1px solid #e2e8f0; padding:9px 13px; border-radius:0; box-shadow:0 2px 8px rgba(0,0,0,0.04); display:flex; flex-direction:column; gap:2px; min-height:42px; overflow:hidden; }
.stat-chip:before { display:none !important; }
.stat-label { font-size:10px; font-weight:600; text-transform:none; letter-spacing:.5px; color:#64748b; }
.stat-value { font-size:17px; font-weight:600; color:#1e293b; line-height:1.05; }
.stat-unit { font-size:11px; color:#64748b; font-weight:600; margin-left:6px; vertical-align:middle; }
.stat-chip.positive .stat-value,
.stat-chip.positive,
.stat-pct--down,
.positive,
.valor-positivo,
.stat-green {
  color: #2f6f58 !important;
}
.stat-chip.negative .stat-value,
.stat-chip.negative,
.stat-pct--up,
.negative,
.valor-negativo,
.stat-red {
  color: #b23b3b !important;
}
.stat-sub { font-size:9px; font-weight:500; color:#475569; }

/* Semanal: valores en negro (sin verde/rojo) */
#statsWeek .stat-value,
#statsWeek .stat-chip.positive .stat-value,
#statsWeek .stat-chip.negative .stat-value{
  color:#0f172a;
}

/* Mensual: labels de mes con mayor/menor intensidad */
.stat-label.month-extreme-label{
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
}

/* Asegurar que los chips tipo "plain" ocupen todo el ancho del grid */
.stats-grid .stat-chip.plain,
#statsWeekBody .stat-chip.plain{
  grid-column: 1 / -1;
  width: 100%;
}

/* Años: chip "Último año disponible" */
.stat-chip.last-year .stat-label{
  font-size: 12px;
  font-weight: 800;
  color: #334155;
  letter-spacing: .2px;
  margin-bottom: 6px;
}
.stat-chip.last-year .stat-unit{
  font-size: 13px;
  color: #94a3b8;
  font-weight: 700;
}

.stat-chip.last-year .stat-sub{
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
}

.stat-muted{ color:#64748b; font-weight:500; }
.stat-muted--nogrowth{ display:block; margin-top:6px; }

/* % de variación: estilo consistente y color por signo */
.stat-pct{
  font-size: 13px;
  font-weight: 800;
  margin-right: 8px;
  white-space: nowrap;
}
.stat-pct--up { color: #b23b3b !important; }
.stat-pct--down { color: #2f6f58 !important; }

/* Heatmap: visible grid + 3D hover open effect */
#heatmap table { border-collapse: collapse !important; }
/* Solo las celdas de datos (heatmap-cell) llevan borde, no los encabezados */
.heatmap-cell {
  position: relative;
  overflow: visible;
  border: 1px solid #e2e8f0;
  transition: transform 160ms cubic-bezier(.2,.8,.2,1),
              filter 160ms ease,
              box-shadow 160ms ease,
              border-color 160ms ease;
  will-change: transform, filter, box-shadow;
  z-index: 1;
  /* Suavizar colores: menos saturación y brillo */
  filter: brightness(0.97) saturate(0.85);
  border-radius: 0 !important;
}
.heatmap-cell:hover {
  transform: scale(1.0);
  filter: brightness(1.04) saturate(0.95);
  box-shadow: 0 6px 16px rgba(0,0,0,0.14);
  border-color: #cbd5e1;
  z-index: 5;
}

.panel-status { font-size:12px; font-weight:500; margin:4px 0 8px; min-height:18px; display:flex; align-items:center; gap:6px; color:#64748b; }
.panel-status[data-state="loading"] { color:#2563eb; }
.panel-status[data-state="error"] { color:#dc2626; }
.panel-status[data-state="empty"] { color:#64748b; font-style:italic; }
.status-dot { width:8px; height:8px; border-radius:50%; background:currentColor; animation:pulseDot 0.9s infinite alternate; }
@keyframes pulseDot { from { transform:scale(.6); opacity:.6;} to { transform:scale(1); opacity:1;} }

@media (max-width:600px){ .stat-value{font-size:16px;} .stat-chip{padding:10px; min-height:54px; border-radius:0;} }
@media (max-width:1050px){ .chart-flex { flex-direction:column; } }
/* Mobile-responsive charts without affecting desktop */
@media (max-width:900px){
  .chart-flex { gap:20px; }
  .chart-area { flex: 1 1 auto; max-width:100%; }
  .stats-panel { min-width:0; max-width:100%; }
}
/* Desktop: compact blocks and chart heights */
@media (min-width: 901px){
  .card:not(.chart-box) { padding: 12px 14px; max-width: 860px; margin: 0 auto; }

  /* Override the default card max-width for the map */
  #siteStaticMapWrap{
    max-width: 1020px;
    margin: 0 auto 18px auto;
  }
  /* Narrower inner content for all chart blocks */
  .chart-flex { gap: 24px; max-width: none; margin: 0; }
  .chart-area { flex: 1 1 720px; max-width: none; }
  .stats-panel { min-width: 360px; max-width: 520px; gap: 12px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 10px; }

  /* Meses: sin tocar el ancho del bloque, dar un poco más de ancho a la gráfica
     y compactar indicadores (mueve los indicadores ligeramente a la derecha). */
  .chart-flex.months-flex .chart-area { flex: 0 0 500px; max-width: 500px; }
  .chart-flex.months-flex .stats-panel { min-width: 300px; max-width: 300px; }
  .chart-box { height: auto; }
  #heatmap { height: 210px !important; min-width: 0 !important; padding: 24px 8px 26px 8px !important; }
  /* Heatmap colors are controlled by the JS palette (no global CSS filter) */
  /* Grid visible solo en celdas de datos */
  #heatmap table { border-collapse: collapse !important; }
  .heatmap-cell { border: 1px solid #e2e8f0 !important; box-sizing: border-box; }
}

@media (max-width:600px){
  :root { --page-pad: 16px; }
  main { padding: 0 var(--page-pad); margin-top: 96px !important; }
  #siteTitleDisplay{ font-size: 20px; }
  .card { padding:14px; }
  .chart-box { padding-top:18px; }
  .chart-area canvas { width:100% !important; height:auto !important; max-height:280px; }
  .stats-panel { width: 100%; max-width: none; }
  .stats-grid { width: 100%; grid-template-columns:repeat(2, minmax(0, 1fr)); gap: 10px 10px; }

  /* Años: dar más aire a los chips “plain” y “último año” (a ancho completo) */
  #statsYearsBody{ grid-template-columns: 1fr; }
  #statsYearsBody .stat-chip.plain,
  #statsYearsBody .stat-chip.last-year{ grid-column: 1 / -1; width: 100%; }

  /* En móvil: no limitar el ancho interno, para que el panel de Años no quede “encogido” */
  .card.chart-box .chart-flex{ max-width: none; margin: 0; }
  .card.chart-box .chart-area{ max-width: none; }
  /* Mobile header: align logo + user block, remove middle gap */
  header { padding: 0 16px !important; justify-content: space-between; height:84px !important; flex-wrap: nowrap !important; gap: 10px !important; }
  header a { margin: 0 !important; padding: 0 !important; border-right: none !important; height: 100% !important; display:flex !important; align-items:center !important; }
  header a img { height:108px !important; margin-left: 4px !important; }
  header #user-dropdown-container {
    border-left: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 100% !important;
    display:flex !important;
    align-items:center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  header #user-dropdown-container button{ min-width: 0 !important; }
  header #user-dropdown-container img[alt="Usuario"]{ width: 32px !important; height: 32px !important; }
  header #user-dropdown-container button > div > span:first-child{ font-size: 13px !important; }
  header #user-dropdown-container button > div > span:last-child{ font-size: 10px !important; display: block !important; }
  header #user-dropdown { right: 12px !important; }
  header #user-dropdown-container button { gap:8px !important; }
  header #user-dropdown-container span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Botón menú right-side: siempre visible en móvil */
  header #site-menu-container{ flex: 0 0 auto !important; margin: 0 20px 0 0 !important; }
  header #site-menu-btn{
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    margin-right: 0 !important;
  }
  /* Compactar dropdown de usuario en móvil */
  #user-dropdown { width: 220px !important; font-size: 12px !important; }
  #user-dropdown > div { padding: 8px !important; }
  #user-dropdown a { padding: 8px 10px !important; font-size: 12px !important; line-height: 1.2 !important; }
  #user-dropdown a img { width: 14px !important; height: 14px !important; }
  /* Hide header subtitle, home icon, and header download on mobile */
  header #header-subtitle { display:none !important; }
  header img[alt="Inicio"] { display:none !important; }
  header #btn-download-charts { display:none !important; }
  /* Show mobile title bar */
  .mobile-title-bar { display:flex !important; justify-content: center !important; }
  /* El div placeholder del HTML no aporta en móvil */
  .mobile-title-bar > div { display:none !important; }
  /* Botón móvil: centrado pero sin estirarlo (se queda con su tamaño natural) */
  #btn-download-charts-mobile{ margin: 0 auto; justify-content: center; }
  /* Ensure overlay doesn't cover taller mobile header */
  #pageLoadingOverlay { top:84px !important; }

  #siteStaticMap{
    height: 220px;
  }
  /* Mobile filter dropdown: custom anchored options under the filter */
  label.filter-enhanced { position: relative !important; display: inline-flex; align-items: center; gap: 6px; }
  /* Hide native select on mobile; JS keeps it in sync */
  label.filter-enhanced select { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }
  .filter-trigger { display:inline-flex; align-items:center; gap:8px; padding:8px 10px; font-size:13px; border:1px solid #cbd5e1; border-radius:8px; background:#fff; color:#475569; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,0.06); }
  .filter-trigger svg { width:16px; height:16px; }
  .filter-dropdown { position:absolute; top:calc(100% + 6px); left:0; z-index: 3000; background:#fff; border:1px solid #e2e8f0; border-radius:10px; box-shadow:0 10px 22px rgba(0,0,0,0.12); min-width: 100%; max-height: 260px; overflow:auto; display:none; }
  .filter-option { display:flex; align-items:center; padding:10px 12px; font-size:13px; color:#1f2937; cursor:pointer; }
  .filter-option:hover { background:#f1f5f9; }
  .filter-option[aria-selected="true"] { background:#e2e8f0; font-weight:600; }
  /* Heatmap móvil: orientación vertical sin scroll interno */
  #heatmap { padding-left:0 !important; overflow: visible !important; min-width: auto !important; height: auto !important; }
  /* Reducir tipografía y espacios de la fila de días en móvil para evitar solapamiento */
  #heatmap table {
    table-layout: fixed;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
  }
  #heatmap table th, #heatmap table td {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }
  /* Mostrar bordes solo en celdas de datos incluso en móvil */
  .heatmap-cell { border: 1px solid #e2e8f0 !important; box-sizing: border-box; }
  #heatmap table tr {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }
  #heatmap table thead tr:first-child th { font-size: 10px; line-height: 1.05; padding: 3px 2px; white-space: nowrap; }
  /* Mantener legible la celda de etiqueta de horas */
  #heatmap table thead tr:first-child th:first-child { font-size: 10px; padding: 6px 6px; }
  /* Opcional: ajustar ligeramente las etiquetas de horas en la primera columna */
  #heatmap table tbody th { font-size: 10px; }
}

/* Extra-small phones: avoid cramped 2-column chips */
@media (max-width:380px){
  .stats-grid { grid-template-columns: 1fr; }
}

/* Full-page loading overlay */
/* Overlay no cubre el header fijo (60px) */
#pageLoadingOverlay { position:fixed; left:0; right:0; bottom:0; top:60px; background:rgba(248,250,252,0.92); backdrop-filter:saturate(1.1) blur(1px); z-index:2000; display:none; align-items:center; justify-content:center; }
.loader-wrap { display:flex; flex-direction:column; align-items:center; gap:14px; }
.loader-ring { width:64px; height:64px; border:6px solid #e2e8f0; border-top-color:#2563eb; border-radius:50%; animation:spin 0.9s linear infinite; }
.loader-text { font-weight:600; color:#1e293b; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Heatmap in-panel loading (avoid empty block on init) */
.heatmap-loading-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(1px);
  z-index: 30;
}
.heatmap-loading-overlay .heatmap-loading-inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  color: #334155;
  font-size: 12px;
  font-weight: 600;
}
.heatmap-loading-overlay .mini-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(148, 163, 184, 0.55);
  border-top-color: #2563eb;
  border-radius: 999px;
  animation: spin 0.9s linear infinite;
}

body.dark-mode .heatmap-loading-overlay {
  background: rgba(24, 26, 27, 0.65);
}
body.dark-mode .heatmap-loading-overlay .heatmap-loading-inner {
  background: rgba(24, 26, 27, 0.85);
  border-color: rgba(148, 163, 184, 0.22);
  color: #e5e7eb;
}

body.dark-mode {
  background: #181a1b !important;
  color: #e0e0e0 !important;
}

.skeleton-loader {
  display: flex;
  gap: 0.5em;
  opacity: 0.6;
}