/* Fuentes: Montserrat (titulos) + Roboto (texto) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&family=Roboto:wght@400;500;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Zain:ital,wght@0,200;0,300;0,400;0,700;0,800;0,900;1,300;1,400&display=swap');


/* Layout general */
.dashboard-layout {
  display: flex;
  gap: 1.5rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  align-items: flex-start;
  overflow-x: clip;
}

/* Sidebar */
.sidebar {
  width: 230px;
  flex: 0 0 230px;
  max-width: 100%;
  background: #ffffff;
  border-radius: 18px;
  padding: 1.25rem 1rem;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  align-self: flex-start;
  box-sizing: border-box;
  font-family: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  display: flex;
  flex-direction: column;

  position: relative;   /*  para stacking */
  overflow: visible;    /*  deja salir al tooltip */
  z-index: 5;           /* por encima del main */
}

.logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.logo-img {
  max-width: 120px;
  height: auto;
}

/* Botones del sidebar */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sidebar-btn {
  width: 100%;
  border: none;
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  background: #eef2ff;
  color: #374151;
  font-weight: 500;
  font-family: 'Montserrat', system-ui, sans-serif;
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.sidebar-btn:hover {
  background: #e0e7ff;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.2);
}

.sidebar-btn-active {
  background: #08519c;
  color: #ffffff;
}

/* Main area */
.dashboard-main {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
  font-family: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.dashboard-main > * ,
.indicator-section,
.chart-block,
.chart-row,
.chart-container,
.table-tabs-header,
.treemap-tabs-header,
.fiscal-table-wrap {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

canvas {
  display: block;
  max-width: 100% !important;
}

/* KPI cards */

/* Queremos todas en una sola fila.
   Si son muchas para el ancho, habilitamos scroll horizontal */
.kpi-row-wrap{
  overflow-x: auto;     /* ✅ scroll horizontal */
  overflow-y: visible;  /* ✅ deja salir tooltips */
  padding-bottom: 0.3rem;
}

.kpi-row{
  display: flex;
  flex-wrap: nowrap;
  gap: 0.75rem;
  margin-bottom: 2rem;

  overflow: visible;    /* ✅ el tooltip no se recorta */
  position: relative;
}

/* Cada tarjeta ocupa ancho fijo para que entren varias en línea */
.kpi-card {
  flex: 0 0 200px; /* ancho fijo aproximado, ajustable */
  background: #ffffff;
  border-radius: 18px;
  padding: 0.8rem 0.9rem;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid #e5e7eb;
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.15s ease;
  position: relative;
  cursor: pointer;
}

/* Hover con “levitación” suave */
.kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.15);
  border-color: #c7d2fe;
}

/* Línea superior: texto a la izquierda, icono a la derecha */
.kpi-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}

.kpi-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: 'Montserrat', system-ui, sans-serif;
  /* 👇 NUEVO: reservar espacio para 2 líneas */
  line-height: 1.2;
  min-height: calc(1.2em * 2);  /* altura para 2 líneas */
  display: block;
}

/* Icono de la tarjeta */
.kpi-icon {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #eef2ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  color: #4f46e5;
}

/* Valor principal */
/* Valor principal: % de variación (grande) */
.kpi-value {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0.15rem 0 0.2rem;
}

/* Valor chico: nivel del índice */
.kpi-index-small {
  font-size: 0.9rem;
  color: #111827;
  margin-top: 0.05rem;
}
/* Pie: variación + texto explicativo */
.kpi-footer {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.82rem;
}

.kpi-variation {
  font-weight: 600;
  font-family: 'Montserrat', system-ui, sans-serif;
}

.kpi-up {
  color: #16a34a;
}

.kpi-down {
  color: #dc2626;
}

.kpi-caption {
  color: #6b7280;
}

/* Placeholder */
.charts-placeholder {
  padding: 1.5rem;
  background: #e5e7eb;
  border-radius: 14px;
  color: #4b5563;
  font-size: 0.9rem;
}

/* PARA GRÁFICO EMAE*/
.chart-block {
  background: #ffffff;
  border-radius: 18px;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.chart-title {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 0.2rem;
}

.chart-subtitle {
  font-size: 0.85rem;
  color: #6b7280;
  margin-bottom: 0.8rem;
}

.section-source {
  margin: 0.75rem 0 0;
  font-size: 0.78rem;
  color: #6b7280;
}

.section-source a {
  color: #08519c;
  font-weight: 500;
  text-decoration: none;
}

.section-source a:hover {
  text-decoration: underline;
}

.chart-container {
  position: relative;
  height: 620px;  
}

#emae-chart-block .chart-container,
#emae-primarios-resto-chart-block .chart-container,
#isac-chart-block .chart-container {
  height: 300px;
}

#oferta-demanda-chart-block .oferta-demanda-chart-container {
  height: 360px;
}

#inflacion-chart-block .inflacion-chart-container {
  height: 340px;
}

.pib-identity-block {
  --pib-border: #2a9db5;
  --pib-header: #0e7490;
}

.pib-identity-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 1rem;
}

.pib-identity-scroll {
  overflow-x: auto;
  padding-bottom: 0.25rem;
}

.pib-identity-note {
  margin: 0.7rem 0 0;
  font-size: 0.76rem;
  line-height: 1.45;
  color: #6b7280;
}

.pib-equation {
  display: grid;
  grid-template-columns: 118px 150px 34px 156px 34px 178px 34px 156px 34px 156px;
  gap: 10px;
  align-items: center;
  min-width: 1120px;
}

.pib-row-labels,
.pib-card {
  display: grid;
  grid-template-rows: 78px repeat(3, 54px);
  min-height: 240px;
}

.pib-row-labels {
  color: #0e7490;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  justify-items: end;
  align-items: center;
}

.pib-row-labels span {
  white-space: nowrap;
}

.pib-card {
  overflow: hidden;
  border: 2px solid var(--pib-border);
  border-radius: 14px;
  background: #f8fafc;
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.08);
}

.pib-card-title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0 0.55rem;
  background: var(--pib-header);
  color: #fff;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.12;
}

.pib-card-group {
  grid-template-rows: 44px 34px repeat(3, 54px);
}

.pib-card-simple .pib-card-title {
  font-size: 1.2rem;
}

.pib-card-simple:first-of-type .pib-card-title {
  font-size: 1.85rem;
  letter-spacing: 0.02em;
}

.pib-subheads {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: #cce9ef;
  color: #0c5d6e;
  border-bottom: 2px solid var(--pib-border);
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 0.73rem;
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
}

.pib-subheads span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0.25rem;
}

.pib-subheads span + span,
.pib-two-cols span:nth-child(2n) {
  border-left: 2px solid var(--pib-border);
}

.pib-card-values {
  display: grid;
  grid-template-rows: repeat(3, 54px);
  background: #f1f4f7;
}

.pib-two-cols {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, 54px);
}

.pib-card-values span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0 0.3rem;
  border-top: 1px solid rgba(111, 132, 152, 0.35);
  color: #155e75;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 1.28rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.pib-card-values span:first-child,
.pib-card-values span:nth-child(2) {
  border-top: 0;
}

.pib-card-simple .pib-card-values span:nth-child(2) {
  border-top: 1px solid rgba(111, 132, 152, 0.35);
}

.pib-card-simple .pib-card-values span {
  font-size: 1.45rem;
}

.pib-card-simple:first-of-type .pib-card-values span {
  font-size: 1.8rem;
}

.pib-card-values span.is-negative {
  color: #c44f63;
}

.pib-card-values span.is-neutral {
  color: #6b7280;
}

.pib-operator {
  color: #0e7490;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 2rem;
  font-weight: 800;
  text-align: center;
}

@media (max-width: 1600px) {
  .pib-identity-scroll {
    overflow-x: hidden;
  }

  .pib-equation {
    grid-template-columns:
      92px
      minmax(118px, 1fr)
      24px
      minmax(126px, 1.06fr)
      24px
      minmax(144px, 1.2fr)
      24px
      minmax(128px, 1.04fr)
      24px
      minmax(128px, 1.04fr);
    gap: 6px;
    min-width: 0;
  }

  .pib-row-labels,
  .pib-card {
    grid-template-rows: 68px repeat(3, 48px);
    min-height: 212px;
  }

  .pib-card-group {
    grid-template-rows: 40px 28px repeat(3, 48px);
  }

  .pib-card-title {
    padding: 0 0.35rem;
    font-size: clamp(0.78rem, 1vw, 0.95rem);
  }

  .pib-card-simple .pib-card-title {
    font-size: clamp(0.92rem, 1.2vw, 1.1rem);
  }

  .pib-card-simple:first-of-type .pib-card-title {
    font-size: clamp(1.3rem, 2vw, 1.75rem);
  }

  .pib-subheads {
    font-size: clamp(0.58rem, 0.75vw, 0.7rem);
  }

  .pib-card-values,
  .pib-two-cols {
    grid-template-rows: repeat(3, 48px);
  }

  .pib-card-values span {
    font-size: clamp(0.9rem, 1.25vw, 1.18rem);
  }

  .pib-card-simple .pib-card-values span {
    font-size: clamp(1rem, 1.35vw, 1.28rem);
  }

  .pib-card-simple:first-of-type .pib-card-values span {
    font-size: clamp(1.35rem, 2.2vw, 1.65rem);
  }

  .pib-row-labels {
    font-size: clamp(0.58rem, 0.75vw, 0.7rem);
  }

  .pib-operator {
    font-size: clamp(1.2rem, 1.8vw, 1.8rem);
  }
}

@media (max-width: 1220px) {
  .pib-equation {
    grid-template-columns: 88px minmax(124px, 1fr) 28px minmax(142px, 1.08fr) 28px minmax(156px, 1.16fr);
    grid-auto-rows: auto;
    gap: 10px 8px;
  }

  .pib-equation > :nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

  .pib-equation > :nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }

  .pib-equation > :nth-child(3) {
    grid-column: 3;
    grid-row: 1;
  }

  .pib-equation > :nth-child(4) {
    grid-column: 4;
    grid-row: 1;
  }

  .pib-equation > :nth-child(5) {
    grid-column: 5;
    grid-row: 1;
  }

  .pib-equation > :nth-child(6) {
    grid-column: 6;
    grid-row: 1;
  }

  .pib-equation > :nth-child(7) {
    grid-column: 3;
    grid-row: 2;
  }

  .pib-equation > :nth-child(8) {
    grid-column: 4;
    grid-row: 2;
  }

  .pib-equation > :nth-child(9) {
    grid-column: 5;
    grid-row: 2;
  }

  .pib-equation > :nth-child(10) {
    grid-column: 6;
    grid-row: 2;
  }
}

@media (max-width: 760px) {
  .pib-identity-header {
    flex-direction: column;
    gap: 4px;
  }

  .pib-equation {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
  }

  .pib-row-labels {
    display: none;
  }

  .pib-card {
    width: 100%;
    min-height: 0;
  }

  .pib-card,
  .pib-card-simple {
    grid-template-rows: 46px repeat(3, 46px);
  }

  .pib-card-group {
    grid-template-rows: 42px 30px repeat(3, 46px);
  }

  .pib-card-values,
  .pib-two-cols {
    grid-template-rows: repeat(3, 46px);
  }

  .pib-card-values span {
    font-size: 1.05rem;
  }

  .pib-card-simple:first-of-type .pib-card-values span {
    font-size: 1.45rem;
  }

  .pib-operator {
    width: 100%;
    padding: 0.1rem 0;
    font-size: 1.35rem;
    line-height: 1;
  }
}

#comercio-chart-block .comercio-chart-container {
  height: 340px;
}

#electrodomesticos-chart-block .electrodomesticos-chart-container {
  height: 340px;
}

#comercio-tabs {
  margin-bottom: 0.9rem;
}

#comercio-tabs .table-tab.is-active {
  background: #0f766e;
  border-color: #0f766e;
}

#comercio-tabs .table-tab:hover {
  border-color: rgba(15, 118, 110, 0.5);
}

#regional-turismo-tabs .table-tab.is-active {
  background: #0f766e;
  border-color: #0f766e;
  color: #fff;
}

#regional-turismo-tabs .table-tab:hover {
  border-color: rgba(15, 118, 110, 0.5);
}

.oferta-demanda-tabs-header {
  align-items: center;
}

.oferta-demanda-subtabs {
  margin-bottom: 0.9rem;
}

#oferta-demanda-category-tabs .table-tab.is-active,
#oferta-demanda-subtabs .table-tab.is-active {
  background: #0e7490;
  border-color: #0e7490;
  color: #fff;
}

#inflacion-tabs .table-tab.is-active {
  background: #0e7490;
  border-color: #0e7490;
  color: #fff;
}

#oferta-demanda-category-tabs .table-tab:hover,
#oferta-demanda-subtabs .table-tab:hover {
  border-color: rgba(14, 116, 144, 0.55);
}

#inflacion-tabs .table-tab:hover {
  border-color: rgba(14, 116, 144, 0.55);
}

/* FILTROS */
.time-filter-box {
  margin-top: 1.5rem;
  padding: 0.8rem 0.9rem;
  background: #f3f4ff;
  border-radius: 14px;
  font-size: 0.8rem;

  position: relative;   /* 🔥 referencia para el tooltip */
  overflow: visible;    /* 🔥 que no recorte el tooltip */
}

.time-filter-title {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: #111827;
}

.time-filter-label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 0.4rem;
  color: #4b5563;
}

.time-filter-input {
  border-radius: 999px;
  border: 1px solid #CBD5F5;
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
}

.time-filter-hint {
  font-size: 0.72rem;
  color: #6b7280;
  margin-top: 0.3rem;
}

/* Botón de signo de preguntas para indicaciones */
.time-filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.time-help-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  color: #6b7280;
  font-size: 0.95rem;
  position: relative;
}

.time-help-btn i {
  pointer-events: none;
}

/* Tooltip */
.time-help-tooltip {
  position: absolute;
  left: 0;              
  top: 125%;
  width: 200px;
  background: #111827;
  color: #f9fafb;
  font-size: 0.75rem;
  line-height: 1.3;
  padding: 0.6rem 0.8rem;
  border-radius: 0.5rem;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.25);
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 999;          /* 🔥 por encima de inputs/botones */
  text-align: left;
}

.tf-help-tooltip strong {
  font-weight: 600;
}

/* Mostrar tooltip en hover y foco teclado */
.time-help-btn:hover .time-help-tooltip,
.time-help-btn:focus-visible .time-help-tooltip {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
/* Mostrar tooltip cuando JS agrega la clase .show */
.time-help-tooltip.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
/* Contenedor de los dos campos */
.time-filter-fields {
  margin-top: 0.4rem;
}

/* Cada fila: Desde / Hasta */
.time-filter-field {
  display: flex;
  flex-direction: column;   /* label arriba, input abajo */
  gap: 0.2rem;
  margin-bottom: 0.5rem;
}

/* Label siempre en su propia línea */
.time-filter-field label {
  display: block;
  font-size: 0.8rem;
  color: #4b5563;
}

/* Input alineado al borde del box y mismo ancho en ambos */
.time-filter-field input {
  width: 100%;
  border-radius: 999px;
  border: 1px solid #CBD5F5;
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  box-sizing: border-box;
}
/* BOTONES DE FILTRO*/
.time-filter-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.sector-externo-slider {
  margin-top: 0.65rem;
  width: 100%;
}

.sector-externo-slider label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: #334155;
}

.monitor-time-slider {
  margin-bottom: 0.35rem;
}

.chart-row + .monitor-time-slider {
  margin-top: 0.75rem;
}

.chart-row + .monitor-time-slider + .monitor-time-slider {
  margin-top: 0.45rem;
}

.sector-externo-slider .range-slider-wrapper {
  width: 100%;
  display: grid;
  gap: 0.45rem;
  margin-top: 0.5rem;
}

.sector-externo-slider .range-slider-wrapper {
  position: relative;
  width: 100%;
  height: 28px;
}

.sector-externo-slider .range-slider-track {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 10px;
  transform: translateY(-50%);
  background: #e5e7eb;
  border-radius: 999px;
  z-index: 1;
}

.sector-externo-slider .range-slider-fill {
  position: absolute;
  top: 0;
  height: 100%;
  left: 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #0d4c8f, #1e6cd3);
  z-index: 2;
}

.sector-externo-slider .range-slider-wrapper input[type="range"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  appearance: none;
  pointer-events: auto;
  touch-action: none;
}

.sector-externo-slider .range-slider-wrapper input[type="range"]::-webkit-slider-runnable-track,
.sector-externo-slider .range-slider-wrapper input[type="range"]::-moz-range-track {
  height: 10px;
  background: transparent;
  border: none;
}

.sector-externo-slider .range-slider-wrapper input[type="range"]::-webkit-slider-thumb,
.sector-externo-slider .range-slider-wrapper input[type="range"]::-moz-range-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ca3e55;
  border: 2px solid #fff;
  box-shadow: 0 0 6px rgba(0,0,0,0.2);
  cursor: pointer;
  margin-top: -5px;
  pointer-events: auto;
}

.sector-externo-slider .range-slider-wrapper input[type="range"]::-moz-range-progress {
  background: transparent;
}

.sector-externo-slider .range-slider-wrapper input[type="range"]::-moz-range-track {
  background: transparent;
}

.sector-externo-slider .range-slider-wrapper input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  background: transparent;
  border-radius: 999px;
}

.sector-externo-slider .range-slider-wrapper input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #2563eb;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 5px rgba(0,0,0,0.2);
  margin-top: -5px;
  cursor: pointer;
}

.sector-externo-slider .slider-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: #374151;
}

.btn-apply,
.btn-clear {
  flex: 1;
  border-radius: 999px;
  border: none;
  padding: 0.35rem 0.7rem;
  font-size: 0.8rem;
  cursor: pointer;
}

.btn-apply {
  background: #08519c;
  color: #fff;
}

.btn-clear {
  background: #e5e7eb;
  color: #374151;
}

/* PIB equation: shrink at intermediate widths to avoid inner scroll */
@media (max-width: 1380px) {
  .pib-equation { zoom: 0.85; }
}
@media (max-width: 1100px) {
  .pib-equation { zoom: 0.72; }
}

/* Responsivo Global */
@media (max-width: 900px) {
    .dashboard-main {
        padding-left: 0;
        padding-right: 0;
    }
    .dashboard-layout {
        flex-direction: column;
    }

  /* Sidebar en columna y centrado */
  .sidebar {
    width: 100%;
    display: flex;
    flex-direction: column;   /*  columna, no row */
    align-items: center;      /* centra horizontalmente a TODOS los hijos */
    gap: 1rem;
     margin-left: auto;   /*  centra horizontalmente */
    margin-right: auto;  /*  centra horizontalmente */
  }

  /* Menú de sectores centrado y con ancho acotado */
  .sidebar-nav {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 360px;         /* ajustá a gusto */
    margin: 0 auto;
    gap: 0.5rem;
  }

  /* Botones que llenan el ancho de ese max-width */
  .sidebar-btn {
    width: 100%;
  }

  /* Caja de período centrada bajo el menú */
  .time-filter-box,
  .periodo-box {
    width: 100%;
    max-width: 360px;         /* mismo ancho que el menú */
    margin: 0 auto 1rem;      /* ⬅️ centra horizontalmente */
    box-sizing: border-box;
  }
}
/* PIB Identity Block: vertical stack on tablet/mobile (≤768px) */
@media (max-width: 768px) {
  .pib-identity-scroll { overflow-x: visible; }

  .pib-identity-header {
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
  }

  .pib-equation {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    min-width: 0;
    zoom: 1;
  }

  .pib-row-labels { display: none; }

  .pib-operator {
    font-size: 1.3rem;
    padding: 1px 0;
    text-align: center;
  }

  /* Cards: flex column so grid-template-rows is ignored */
  .pib-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-radius: 8px;
    width: 100%;
  }

  .pib-card-title {
    font-size: 0.8rem;
    min-height: 30px;
    padding: 0.3rem 0.5rem;
  }
  .pib-card-simple .pib-card-title { font-size: 0.88rem; }
  .pib-card-simple:first-of-type .pib-card-title { font-size: 1.05rem; }

  /* Simple cards: 3 values in one horizontal row (ia | trim | part) */
  .pib-card-simple .pib-card-values {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
  }
  .pib-card-simple .pib-card-values span {
    font-size: 0.88rem;
    padding: 0.45rem 0.1rem;
    border-top: 0;
    border-left: 1px solid rgba(111, 132, 152, 0.35);
  }
  .pib-card-simple .pib-card-values span:first-child { border-left: 0; }
  /* Override the desktop rule that re-adds border-top to span:nth-child(2) */
  .pib-card-simple .pib-card-values span:nth-child(2) { border-top: 0; border-left: 1px solid rgba(111, 132, 152, 0.35); }
  .pib-card-simple:first-of-type .pib-card-values span { font-size: 1.05rem; }

  /* Group cards: keep 2-col layout, just remove fixed row heights */
  .pib-two-cols { grid-template-rows: repeat(3, auto); }
  .pib-two-cols span {
    font-size: 0.84rem;
    padding: 0.4rem 0.1rem;
  }

  .pib-subheads { font-size: 0.67rem; }
}

@media (max-width: 640px) {
  .time-help-tooltip {
    max-width: min(230px, calc(100vw - 40px));
  }
}
/* ----- RESPONSIVE MOBILE ----- */
@media (max-width: 768px) {

    .kpi-row {
        display: flex;
        flex-direction: column;            /* 👉 apiladas en columna */
        gap: 1rem;
        overflow: visible;                 /* 👉 evita recortes */
        padding-right: 0;
    }

    .kpi-card {
        width: 100%;                      /* 👉 ocupa ancho total */
        max-width: 100%;
        flex: none;
        border-radius: 14px;
        padding: 0.9rem 1rem;
    }
    /* Layout en columna */
    .dashboard-layout {
        flex-direction: column;
        padding: 0 1rem;  
    }

    /* Sidebar full width */
    .sidebar {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: 1rem 1rem;   
    }

    /* Navegación del sidebar en fila o columna, como prefieras */
    .sidebar-nav {
        flex-direction: column; /* mantenemos en columna */
        gap: 0.5rem;
    }

    /* Caja de período debajo del sidebar */
    .time-filter-box {
        width: 100%;
        margin-top: 1rem;
    }

    /* Inputs full width */
    .time-filter-box input {
        width: 100%;
    }
    /* Box del período dentro del sidebar */
    .periodo-box {
        width: 100% !important;            /* 👉 evita desbordes */
        box-sizing: border-box;
        margin-top: 1rem;
    }

    /* Gráfico */
    #emae-chart-block {
        margin-top: 1rem;
    }
}

/* Tipografía para subtítulos y descripciones de indicadores */
.indicator-section .chart-title,
.indicator-section .chart-subtitle,
.indicator-section p {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* =========================
   UCII
========================= */

#ucii-chart-block {
  padding-bottom: 32px;
}

#ucii-chart-block .chart-container {
  height: auto;
}

/* Layout principal */
#ucii-chart-block .ucii-row {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  min-height: 0;
}

/* =========================
   CÍRCULO PRINCIPAL
========================= */

#ucii-chart-block .ucii-main {
  flex: 0 0 360px;
  width: 360px;
  height: 360px;
  position: relative;
  align-self: center;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#ucii-chart-block .ucii-main canvas {
  width: 100% !important;
  height: 100% !important;
}

/* texto central */
#ucii-chart-block .ucii-main-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  font-size: 34px;
  font-weight: 800;
  color: #08519c;
  pointer-events: none;
}

/* título debajo */
#ucii-chart-block .ucii-main-title {
  margin-top: 10px;
  font-size: 14px;
  color: #374151;
}

.ucii-main-title {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}
/* =========================
   GRILLA DERECHA
========================= */

#ucii-chart-block .ucii-grid-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-self: stretch;
}

#ucii-chart-block .ucii-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 24px 24px;
  width: min(100%, 760px);
  height: auto;
  justify-items: center;
  align-content: start;
}

/* =========================
   ITEMS DE SECTOR
========================= */

#ucii-chart-block .ucii-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#ucii-chart-block .ucii-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(10, 35, 70, 0.15);
}

#ucii-chart-block .ucii-item:hover .ucii-item-label {
  color: #0b4f6c;
  font-weight: 600;
}

/* wrapper cuadrado → evita óvalos */
#ucii-chart-block .ucii-mini {
  width: 120px;
  aspect-ratio: 1 / 1;
  position: relative;
  z-index: 1;
}

#ucii-chart-block .ucii-mini canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

/* etiqueta sector */
#ucii-chart-block .ucii-item-label {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.2;
  color: #111827;
  max-width: 140px;
  word-wrap: break-word;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
  position: relative;
  z-index: 1;
}

#ucii-chart-block .ucii-item:hover {
  transform: translateY(-4px) scale(1.1);
  box-shadow: 0 12px 26px rgba(10, 35, 70, 0.2);
}

#ucii-chart-block .ucii-item {
  transition: transform 0.22s cubic-bezier(0.25, 0.6, 0.25, 1), box-shadow 0.22s ease;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1100px) {
  #ucii-chart-block .ucii-row {
    flex-direction: column;
    gap: 32px;
  }
}

@media (max-width: 700px) {
  #ucii-chart-block .ucii-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  #ucii-chart-block .ucii-grid {
    grid-template-columns: 1fr;
  }
}


/* ----- IPI ----- */
.ipi-charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 900px) {
  .ipi-charts-grid {
    grid-template-columns: 1fr;
  }
}

.chart-row {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.chart-container.small-chart:first-child {
  flex: 1.4;  /* gráfico izquierdo más ancho */
}

.chart-container.small-chart:last-child {
  flex: 0.9;  /* gráfico derecho más angosto */
}
.chart-container.small-chart {
  min-height: 420px; /* por ejemplo */
}

/* Mobile: uno debajo del otro */
@media (max-width: 900px) {
    .chart-row {
        flex-direction: column;     /* 👈 APILA LOS GRÁFICOS */
        gap: 40px;                  /* espacio entre gráficos */
    }

    /* Opcional: que cada gráfico ocupe todo el ancho */
    .chart-container.small-chart {
        width: 100%;
    }
}

/*==========MARCO DE REFERENCIA BOX SUBSECTORES=================*/
.indicator-section {
  margin: 2.5rem 0;
  padding: 1.5rem 1.75rem 2rem;
  border-radius: 16px;
  background: #ffffff;
  border-left: 6px solid var(--section-color);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.indicator-section-header {
  margin-bottom: 1.25rem;
}

.indicator-section-title {

  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;

  color: #374151;
  margin-bottom: 1.6rem;
  text-align: center;
  position: relative;
  padding: 0.4rem 0;
  font-size: 1.05rem;
}

.indicator-section-title::before,
.indicator-section-title::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 38%;
  height: 1px;
  background: #e5e7eb;
}

.indicator-section-title::before {
  left: 0;
}

.indicator-section-title::after {
  right: 0;
}

.indicator-section-title span {
  background: #fff;
  padding: 0.25rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}


/* POPUP EN TARJETAS DE INDICADORES */
/* Tooltip global flotante (se monta en <body>) */
.kpi-float-tooltip {
  position: fixed;
  max-width: 320px;
  background: #111827;
  color: #f9fafb;
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.25);
  z-index: 999999;

  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
}

.kpi-float-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: none;
}

.kpi-float-tooltip .kpi-tooltip-title {
  font-weight: 600;
  margin-bottom: 4px;
  font-family: "Poppins", sans-serif;
}

.kpi-float-tooltip .kpi-tooltip-body {
  font-size: 0.82rem;
  line-height: 1.25;
  font-family: "Poppins", sans-serif;
}

/* flechita opcional */
.kpi-float-tooltip::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: #111827;
  transform: rotate(45deg);
  left: 16px;
  top: -5px;
}

/* Para colores neutrales en tarjeta */
.kpi-neutral {
  color: #08519c; /* azul sobrio, consistente con dashboard */
}

/*==== TREEMAP */
/* Treemap más vertical (angosto y alto) */
.treemap-wrap{
  height: 560px;          /* más alto */
  max-width: 880px;       /* más angosto */
  margin: 18px auto 0;    /* centrado */
}

/* Footnote hiperlink sector fiscal */
.source-link {
  color: #08519c;               /* mismo azul institucional */
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px dotted #08519c;
}

.source-link:hover {
  text-decoration: none;
  border-bottom-style: solid;
}

/*====== PESTAÑAS DE GASTOS E INGRESOS */
/* Tabs treemap */
.treemap-tabs-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:10px;
}

.treemap-tabs{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.treemap-tab{
  appearance:none;
  border:1px solid rgba(15,23,42,.18);
  background:#fff;
  color:#0f172a;
  border-radius:999px;
  padding:8px 12px;
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight:600;
  font-size:13px;
  cursor:pointer;
  transition:all .15s ease;
}

.treemap-tab:hover{
  border-color: rgba(8,81,156,.45);
  transform: translateY(-1px);
}

.treemap-tab.is-active{
  background:#08519c;
  color:#fff;
  border-color:#08519c;
}

.treemap-period{
  margin:0;
  white-space:nowrap;
}

/* Panels */
.treemap-panel{ display:none; }
.treemap-panel.is-active{ display:block; }

/* =========================
   TABLA FISCAL (Ingresos/Gastos)
   ========================= */

.fiscal-table-wrap{
  margin-top: 10px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

/* La tabla */
table.fiscal-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
}

/* Header */
table.fiscal-table thead th{
  background: rgba(8, 81, 156, 0.10);
  color: #0f172a;
  font-weight: 700;
  text-transform: none;
  letter-spacing: .2px;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.10);
}

/* Sticky header (si la tabla scrollea dentro de un contenedor) */
table.fiscal-table thead th{
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Celdas */
table.fiscal-table tbody td{
  padding: 9px 12px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  color: #0f172a;
  vertical-align: middle;
}

/* Zebra */
table.fiscal-table tbody tr:nth-child(even){
  background: rgba(2, 132, 199, 0.03);
}

/* Hover */
table.fiscal-table tbody tr:hover{
  background: rgba(2, 132, 199, 0.06);
}

/* Alineaciones */
table.fiscal-table td:nth-child(2),
table.fiscal-table td:nth-child(3),
table.fiscal-table th:nth-child(2),
table.fiscal-table th:nth-child(3){
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Indent de subcategorías */
table.fiscal-table td.indent{
  padding-left: 26px;
  color: rgba(15, 23, 42, 0.85);
}

/* Fila de grupo (categoría principal) */
table.fiscal-table tr.fila-grupo td{
  background: rgba(8, 81, 156, 0.10);
  font-weight: 700;
  border-bottom: 1px solid rgba(8, 81, 156, 0.18);
}
table.fiscal-table tr.fila-grupo td:first-child{
  text-transform: uppercase;
  letter-spacing: .3px;
}

/* Variación: up / down */
table.fiscal-table td.up{
  color: #0f766e;          /* verde sobrio */
  font-weight: 700;
}
table.fiscal-table td.down{
  color: #b91c1c;          /* rojo sobrio */
  font-weight: 700;
}

/* "chip" visual opcional para la variación (si querés más look) */
table.fiscal-table td.up,
table.fiscal-table td.down{
  border-radius: 4px;  
  padding: 4px 8px;
}

/* Bloque título + período */
.table-header-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.table-period{
  margin: 0;
  font-size: 12px;
  color: rgba(15, 23, 42, 0.65);
}

/* Contenedor scrolleable horizontal para mobile */
.table-scroll{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Responsive: achicar padding y fuente */
@media (max-width: 720px){
  table.fiscal-table{
    font-size: 12px;
  }
  table.fiscal-table thead th,
  table.fiscal-table tbody td{
    padding: 9px 10px;
  }
  table.fiscal-table td.indent{
    padding-left: 20px;
  }
}

/* Panels de tablas */
.table-panel { display: none; }
.table-panel.is-active { display: block; }

/* Reusar look & feel de tabs del treemap */
.table-tab {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #d9e2ef;
  background: #fff;
  font-weight: 600;
  cursor: pointer;
}

.table-tab.is-active{
  background: #0b4aa2;
  color: #fff;
  border-color: #0b4aa2;
}

/* DISEÑO BOTONES */
/* =========================
   TABS TABLAS (clon visual del treemap)
   ========================= */

.table-tabs-header{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.table-tabs{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.table-tab{
  appearance: none;
  border: 1px solid rgba(15, 23, 42, 0.18);
  background: #fff;
  color: #0f172a;
  border-radius: 999px;
  padding: 8px 12px;
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all .15s ease;
}

/* hover */
.table-tab:hover{
  border-color: rgba(8, 81, 156, 0.45);
  transform: translateY(-1px);
}

/* activo */
.table-tab.is-active{
  background: #08519c;
  color: #fff;
  border-color: #08519c;
}

/* período a la derecha */
.table-period{
  margin: 0;
  white-space: nowrap;
  font-size: 12px;
  color: rgba(15, 23, 42, 0.65);
}

#laboral-chart-block .table-tabs {
  row-gap: 8px;
}

#laboral-chart-title,
#laboral-chart-subtitle {
  margin-top: 0;
}

#laboral-chart-container {
  min-height: 360px;
}

#salarios-chart-container {
  min-height: 360px;
}

@media (max-width: 900px) {
  #laboral-chart-block .table-tabs-header {
    align-items: flex-start;
  }

  #laboral-chart-block .table-period {
    white-space: normal;
  }
}

/* Monetario: igual que cualquier .indicator-section (sin centrarlo aparte) */
#sec-monetario{
  width: 100%;
  box-sizing: border-box;
  margin: 2.5rem 0;   /* opcional: igual que .indicator-section */
}

/* ═══════════════════════════════════════
   MOBILE: fixes específicos ≤ 600px
   ═══════════════════════════════════════ */
@media (max-width: 600px) {

  /* --- indicator-section-title ---
     En pantallas angostas el span ocupa casi todo el ancho y las
     líneas pseudoelement quedan superpuestas/encima del texto.
     Solución: ocultar las líneas y mostrar sólo el chip centrado. */
  .indicator-section-title::before,
  .indicator-section-title::after {
    display: none;
  }

  /* Reducir padding del box de sección para ganar ancho */
  .indicator-section {
    padding: 1rem 0.85rem 1.25rem;
  }

  /* chart-block también tiene padding lateral generoso en desktop */
  .chart-block {
    padding: 1rem 0.85rem;
  }

  /* Altura por defecto 620px es excesiva en teléfonos */
  .chart-container {
    height: 300px;
  }

  /* EMAE e ISAC ya tienen 300px — dejarlos así o achicar levemente */
  #emae-chart-block .chart-container,
  #isac-chart-block .chart-container {
    height: 260px;
  }

  /* treemap: reduce altura fija */
  .treemap-wrap {
    height: 380px;
    max-width: 100%;
  }

  /* Tabs del treemap/tabla: wrap sin overflow */
  .treemap-tabs-header,
  .table-tabs-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* Período debajo de las tabs */
  .treemap-period,
  .table-period {
    white-space: normal;
    font-size: 11px;
  }

  /* KPI cards: reducir padding y font para que respiren */
  .kpi-card {
    padding: 0.75rem 0.85rem;
  }

  .kpi-value {
    font-size: 1.35rem;
  }
}

/* ═══════════════════════════════════════
   BOTONES DE DESCARGA (PNG / XLSX)
   ═══════════════════════════════════════ */

/* Grupo flotante dentro de .chart-container */
.monitor-dl-group {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.18s ease;
  z-index: 20;
  pointer-events: none;
}

/* Visible al hacer hover sobre el contenedor del gráfico */
.chart-container:hover .monitor-dl-group,
.monitor-dl-group:hover,
.monitor-dl-group:focus-within {
  opacity: 1;
  pointer-events: auto;
}

/* Bloques DOM (PIB identity, UCII): el grupo es hijo directo del .chart-block */
.chart-block:hover > .monitor-dl-group {
  opacity: 1;
  pointer-events: auto;
}

/* Variante para tablas HTML: barra fija encima de la tabla */
.monitor-dl-group--table {
  position: static;
  opacity: 1;
  pointer-events: auto;
  justify-content: flex-end;
  margin-bottom: 0.4rem;
}

/* Botón individual */
.monitor-dl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.58);
  color: #ffffff;
  font-size: 12px;
  cursor: pointer;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: background 0.15s ease, transform 0.1s ease;
  line-height: 1;
}

.monitor-dl-btn:hover {
  background: rgba(15, 23, 42, 0.85);
  transform: scale(1.08);
}

.monitor-dl-btn:active {
  transform: scale(0.96);
}

/* En tablas la variante usa colores más suaves (sobre fondo blanco) */
.monitor-dl-group--table .monitor-dl-btn {
  background: rgba(15, 23, 42, 0.10);
  color: #334155;
  border: 1px solid rgba(15, 23, 42, 0.14);
}

.monitor-dl-group--table .monitor-dl-btn:hover {
  background: rgba(15, 23, 42, 0.18);
}
}