/* ============================================================================
   IMATIA · Suite de herramientas de análisis económico
   Sistema de diseño compartido — v1.0
   Fuente de verdad de la identidad visual. NO duplicar estilos en las
   herramientas: todas enlazan este fichero. Colores y tipografía salen del
   manual de marca (marca.imatia.com).
   ============================================================================ */

/* --- Tipografía corporativa -------------------------------------------------
   Imatia Sans está basada en Plus Jakarta Sans. Usamos Plus Jakarta Sans como
   sustituto fiel cuando Imatia Sans no está instalada, con Arial de fallback
   (la propia marca marca Arial como alternativa segura). */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* Paleta de marca */
  --im-rojo:        #FF5033;   /* acento — usar ~10% */
  --im-rojo-oscuro: #E23A20;
  --im-rojo-tenue:  #FFEAE5;
  --im-negro:       #000000;
  --im-blanco:      #FFFFFF;   /* dominante — ~60% */

  /* Escala de grises corporativa (derivada del tema y la iconografía de marca) */
  --im-g900: #1A1918;
  --im-g800: #2C2A29;   /* gris corporativo oscuro */
  --im-g700: #403E3E;
  --im-g600: #535151;
  --im-g500: #7A7876;
  --im-g400: #A8A5A2;
  --im-g300: #D5D2CF;
  --im-g200: #E8E5E2;
  --im-g100: #F4F2F0;
  --im-g050: #FAF9F8;

  /* Colores semánticos (sobrios, no compiten con el rojo de marca) */
  --im-ok:    #2F8F5B;
  --im-alert: #C4762A;
  --im-info:  --im-g700;

  /* Superficies y texto */
  --im-fondo:    var(--im-g050);
  --im-panel:    var(--im-blanco);
  --im-borde:    var(--im-g200);
  --im-borde-fuerte: var(--im-g300);
  --im-texto:    var(--im-g900);
  --im-texto-2:  var(--im-g600);
  --im-texto-3:  var(--im-g500);

  /* Radios (marca: esquinas ligeramente redondeadas) */
  --im-r-sm: 6px;
  --im-r:    10px;
  --im-r-lg: 14px;

  /* Sombras discretas */
  --im-sombra:    0 1px 2px rgba(26,25,24,.05), 0 1px 3px rgba(26,25,24,.04);
  --im-sombra-lg: 0 4px 12px rgba(26,25,24,.08), 0 2px 4px rgba(26,25,24,.05);

  /* Tipografía */
  --im-font: 'Plus Jakarta Sans', Arial, 'Helvetica Neue', sans-serif;
  --im-num:  'Plus Jakarta Sans', Arial, sans-serif;

  --im-topbar-h: 60px;
}

/* --- Reset ligero ----------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--im-font);
  color: var(--im-texto);
  background: var(--im-fondo);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--im-rojo-oscuro); text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3,h4 { margin: 0; font-weight: 700; letter-spacing: -0.01em; color: var(--im-g900); }
button { font-family: inherit; }

/* ============================================================================
   SHELL: barra superior + contenedor + pie
   ============================================================================ */
.im-topbar {
  position: sticky; top: 0; z-index: 40;
  min-height: var(--im-topbar-h);
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px;
  padding: 8px 22px;
  background: var(--im-blanco);
  border-bottom: 1px solid var(--im-borde);
}
/* En pantallas estrechas, los grupos (filtro de área y badges de origen) pasan a
   su propia línea a lo ancho, en vez de desbordar la barra. */
@media (max-width: 1100px) {
  .im-topbar__spacer { flex-basis: 100%; height: 0; }
  .im-areas, .im-fuentes { width: 100%; }
  .im-topbar > .im-topbar__sep:last-of-type { display: none; }
}
.im-topbar__logo { height: 26px; width: auto; display: block; flex: none; }
.im-topbar__home { display: inline-flex; align-items: center; flex: none; border-radius: var(--im-r-sm); transition: opacity .12s; }
.im-topbar__home:hover { opacity: .78; }
.im-topbar__inicio {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  font-size: 12.5px; font-weight: 600; color: var(--im-texto-2);
  padding: 5px 10px; border: 1px solid var(--im-borde); border-radius: 100px;
  transition: border-color .12s, color .12s; white-space: nowrap;
}
.im-topbar__inicio::before { content: "←"; font-size: 13px; color: var(--im-texto-3); }
.im-topbar__inicio:hover { color: var(--im-g900); border-color: var(--im-borde-fuerte); text-decoration: none; }
.im-topbar__inicio:hover::before { color: var(--im-rojo-oscuro); }
.im-topbar__sep { width: 1px; height: 26px; background: var(--im-borde); flex: none; }
.im-topbar__titulos { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.im-topbar__titulo { font-size: 15px; font-weight: 700; color: var(--im-g900); white-space: nowrap; }
.im-topbar__subtitulo { font-size: 12px; color: var(--im-texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.im-topbar__spacer { flex: 1 1 auto; }

.im-shell { max-width: 1280px; margin: 0 auto; padding: 22px; }
.im-seccion { margin-bottom: 26px; }
.im-seccion__titulo {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--im-texto-3);
  margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.im-seccion__titulo::before {
  content: ""; width: 14px; height: 2px; background: var(--im-rojo); border-radius: 2px; flex: none;
}

.im-footer {
  max-width: 1280px; margin: 8px auto 40px; padding: 14px 22px 0;
  border-top: 1px solid var(--im-borde);
  font-size: 12px; color: var(--im-texto-3);
  display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center;
}
.im-footer strong { color: var(--im-texto-2); font-weight: 600; }

/* ============================================================================
   FILTRO DE ÁREA (vertical) — chips multiselección
   ============================================================================ */
.im-areas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.im-areas__label { font-size: 12px; color: var(--im-texto-3); font-weight: 600; margin-right: 2px; }
.im-chip {
  font-size: 12.5px; font-weight: 600; color: var(--im-texto-2);
  background: var(--im-g100); border: 1px solid var(--im-borde);
  padding: 5px 11px; border-radius: 100px; cursor: pointer;
  transition: all .12s ease; white-space: nowrap; user-select: none;
}
.im-chip:hover { border-color: var(--im-borde-fuerte); color: var(--im-g900); }
.im-chip[aria-pressed="true"] {
  background: var(--im-g900); border-color: var(--im-g900); color: var(--im-blanco);
}
.im-chip--todas[aria-pressed="true"] {
  background: var(--im-rojo); border-color: var(--im-rojo); color: var(--im-blanco);
}

/* ============================================================================
   BADGE DE ORIGEN DE DATOS (trazabilidad de fuente)
   ============================================================================ */
.im-fuente {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--im-texto-2);
  background: var(--im-g100); border: 1px solid var(--im-borde);
  padding: 5px 10px; border-radius: var(--im-r-sm); cursor: pointer;
  transition: border-color .12s;
}
.im-fuente:hover { border-color: var(--im-borde-fuerte); }
.im-fuente__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--im-ok); flex: none; }
.im-fuente__dot--vacio { background: var(--im-g400); }
.im-fuente code { font-family: var(--im-font); color: var(--im-g900); font-weight: 600; }

/* Botón cargar */
.im-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 8px 14px; border-radius: var(--im-r-sm);
  border: 1px solid var(--im-g900); background: var(--im-g900); color: var(--im-blanco);
  transition: opacity .12s;
}
.im-btn:hover { opacity: .88; }
.im-btn--sec { background: var(--im-blanco); color: var(--im-g900); border-color: var(--im-borde-fuerte); }
.im-btn--rojo { background: var(--im-rojo); border-color: var(--im-rojo); }

/* ============================================================================
   KPI CARDS (con drill-down por defecto)
   ============================================================================ */
.im-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.im-kpi {
  background: var(--im-panel); border: 1px solid var(--im-borde);
  border-radius: var(--im-r); padding: 16px 16px 14px;
  position: relative; cursor: pointer; transition: box-shadow .14s, border-color .14s;
  overflow: hidden;
}
.im-kpi::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--im-rojo); opacity: 0; transition: opacity .14s;
}
.im-kpi:hover { box-shadow: var(--im-sombra-lg); border-color: var(--im-borde-fuerte); }
.im-kpi:hover::after { opacity: 1; }
.im-kpi__label { font-size: 12px; color: var(--im-texto-3); font-weight: 600; margin-bottom: 8px; }
.im-kpi__valor { font-size: 26px; font-weight: 800; color: var(--im-g900); letter-spacing: -0.02em; line-height: 1.05; }
.im-kpi__sub { font-size: 12px; color: var(--im-texto-2); margin-top: 6px; }
.im-kpi__drill {
  position: absolute; top: 12px; right: 12px; font-size: 11px; color: var(--im-texto-3);
  display: inline-flex; align-items: center; gap: 4px; opacity: 0; transition: opacity .14s;
}
.im-kpi:hover .im-kpi__drill { opacity: 1; }

/* ============================================================================
   PANELES, TABLAS, TABS
   ============================================================================ */
.im-panel {
  background: var(--im-panel); border: 1px solid var(--im-borde);
  border-radius: var(--im-r); padding: 18px;
}
.im-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 900px) { .im-grid-2 { grid-template-columns: 1fr; } }

.im-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--im-borde); margin-bottom: 20px; flex-wrap: wrap; }
.im-tab {
  font-size: 13.5px; font-weight: 600; color: var(--im-texto-2);
  padding: 10px 14px; cursor: pointer; border: none; background: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .12s;
}
.im-tab:hover { color: var(--im-g900); }
.im-tab[aria-selected="true"] { color: var(--im-g900); border-bottom-color: var(--im-rojo); }

table.im-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.im-tabla th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--im-texto-3); font-weight: 700; padding: 8px 10px;
  border-bottom: 1px solid var(--im-borde-fuerte); white-space: nowrap; cursor: default;
}
.im-tabla th.im-sort { cursor: pointer; user-select: none; }
.im-tabla th.im-sort:hover { color: var(--im-g900); }
.im-tabla th.im-sort::after { content: "↕"; opacity: .35; margin-left: 5px; font-size: 10px; }
.im-tabla th[data-dir="asc"]::after { content: "↑"; opacity: 1; }
.im-tabla th[data-dir="desc"]::after { content: "↓"; opacity: 1; }
.im-tabla td { padding: 8px 10px; border-bottom: 1px solid var(--im-g100); color: var(--im-texto); }
.im-tabla tbody tr { transition: background .1s; }
.im-tabla tbody tr.im-clic { cursor: pointer; }
.im-tabla tbody tr.im-clic:hover { background: var(--im-g050); }
.im-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.im-neg { color: var(--im-rojo-oscuro); }
.im-alias { font-size: 11px; color: var(--im-texto-3); }

.im-badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 100px; }
.im-badge--ok    { background: #E7F4EC; color: var(--im-ok); }
.im-badge--alert { background: #FBEFE1; color: var(--im-alert); }
.im-badge--rojo  { background: var(--im-rojo-tenue); color: var(--im-rojo-oscuro); }
.im-badge--gris  { background: var(--im-g100); color: var(--im-texto-2); }

/* ============================================================================
   DRILL-DOWN DRAWER (trazabilidad de cada cifra hasta las filas de origen)
   ============================================================================ */
.im-drawer-fondo {
  position: fixed; inset: 0; background: rgba(26,25,24,.38);
  opacity: 0; pointer-events: none; transition: opacity .18s; z-index: 90;
}
.im-drawer-fondo.abierto { opacity: 1; pointer-events: auto; }
.im-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(760px, 94vw);
  background: var(--im-blanco); z-index: 91; box-shadow: -8px 0 24px rgba(26,25,24,.14);
  transform: translateX(100%); transition: transform .22s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
}
.im-drawer.abierto { transform: translateX(0); }
.im-drawer__head { padding: 18px 20px 14px; border-bottom: 1px solid var(--im-borde); }
.im-drawer__eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--im-rojo-oscuro); font-weight: 700; }
.im-drawer__titulo { font-size: 17px; font-weight: 800; margin: 4px 0 2px; }
.im-drawer__x { position: absolute; top: 16px; right: 16px; border: none; background: var(--im-g100); width: 30px; height: 30px; border-radius: 7px; cursor: pointer; font-size: 16px; color: var(--im-texto-2); }
.im-drawer__x:hover { background: var(--im-g200); }
.im-proc {
  margin: 12px 20px 0; padding: 11px 13px; background: var(--im-g050);
  border: 1px solid var(--im-borde); border-radius: var(--im-r-sm);
  font-size: 12px; color: var(--im-texto-2); line-height: 1.6;
}
.im-proc b { color: var(--im-g900); font-weight: 600; }
.im-proc code { background: var(--im-g100); padding: 1px 5px; border-radius: 4px; font-family: var(--im-font); color: var(--im-g900); }
.im-drawer__body { flex: 1 1 auto; overflow: auto; padding: 14px 20px 24px; }
.im-drawer__tools { display: flex; align-items: center; gap: 10px; margin: 14px 20px 0; flex-wrap: wrap; }
.im-drawer__count { font-size: 12px; color: var(--im-texto-3); }

/* ============================================================================
   GRÁFICOS SVG de marca (barras, donut, línea, heatmap)
   ============================================================================ */
.im-chart { width: 100%; }
.im-chart text { font-family: var(--im-font); fill: var(--im-texto-2); }
.im-bar { fill: var(--im-g800); cursor: pointer; transition: fill .12s; }
.im-bar:hover { fill: var(--im-rojo); }
.im-bar--rojo { fill: var(--im-rojo); }
.im-axis { stroke: var(--im-borde); stroke-width: 1; }
.im-gridline { stroke: var(--im-g100); stroke-width: 1; }
.im-donut-seg { cursor: pointer; transition: opacity .12s; }
.im-donut-seg:hover { opacity: .82; }
.im-leyenda { display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; }
.im-leyenda__item { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.im-leyenda__sw { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.im-leyenda__val { margin-left: auto; color: var(--im-texto-2); font-variant-numeric: tabular-nums; }
.im-heat td { text-align: center; font-size: 11px; font-variant-numeric: tabular-nums; border: 1px solid var(--im-blanco); cursor: pointer; }

/* Estado vacío / carga */
.im-vacio {
  border: 1.5px dashed var(--im-borde-fuerte); border-radius: var(--im-r);
  padding: 44px 24px; text-align: center; color: var(--im-texto-3); background: var(--im-panel);
}
.im-vacio h3 { color: var(--im-g900); margin-bottom: 6px; font-size: 16px; }
.im-vacio p { margin: 0 0 16px; font-size: 13.5px; }
.im-dropzone.dragover { border-color: var(--im-rojo); background: var(--im-rojo-tenue); }

.im-oculto { display: none !important; }
.im-mono { font-variant-numeric: tabular-nums; }

/* --- v1.1: varias fuentes en la barra + apartado de datos en bruto -------- */
.im-fuentes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.im-fuente__tit { color: var(--im-texto-3); font-weight: 600; }
.im-fuente--pend { border-style: dashed; color: var(--im-texto-3); }
.im-fuente--pend:hover { border-color: var(--im-rojo); color: var(--im-rojo-oscuro); }
.im-raw-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.im-raw-sub { font-size: 12px; color: var(--im-texto-3); margin-top: 4px; }
.im-raw-sub code { color: var(--im-g900); font-weight: 600; }
.im-scroll-x { overflow-x: auto; border: 1px solid var(--im-borde); border-radius: var(--im-r-sm); }
.im-scroll-x .im-tabla { min-width: max-content; }
.im-scroll-x .im-tabla th { position: sticky; top: 0; background: var(--im-g050); z-index: 1; }

/* --- Datos en bruto en tabs horizontales (una por fichero) ---------------- */
.im-tabs--raw { margin-bottom: 14px; }
.im-tab__n { color: var(--im-texto-3); font-weight: 600; margin-left: 4px; }
.im-rawpanel[hidden] { display: none !important; }
.im-rawpanel .im-scroll-x { max-height: 62vh; overflow: auto; }

/* --- Chips «tag» removibles (selección mostrada de un desplegable) --------- */
.im-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--im-g100); border: 1px solid var(--im-borde); color: var(--im-texto);
  border-radius: 100px; padding: 3px 6px 3px 11px; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.im-tag button { border: none; background: none; cursor: pointer; color: var(--im-texto-3); font-size: 12px; line-height: 1; padding: 0; }
.im-tag button:hover { color: var(--im-rojo-oscuro); }

/* --- Menú desplegable flotante (multiselección compacta) ------------------ */
.im-pop { z-index: 95; }
.im-pop__panel {
  background: var(--im-blanco); border: 1px solid var(--im-borde-fuerte);
  border-radius: var(--im-r); box-shadow: var(--im-sombra-lg);
  max-height: min(60vh, 440px); overflow: auto; padding: 6px;
  overscroll-behavior: contain;   /* no encadena el scroll a la página al llegar al final */
}
.im-pop__search { position: sticky; top: 0; background: var(--im-blanco); padding: 2px 2px 6px; }
.im-pop__search input {
  width: 100%; font-family: var(--im-font); font-size: 13px; color: var(--im-g900);
  padding: 7px 9px; border: 1px solid var(--im-borde-fuerte); border-radius: var(--im-r-sm);
}
.im-pop__list { display: block; }
.im-pop__grp { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--im-texto-3); font-weight: 700; padding: 9px 8px 3px; }
.im-pop__sep { height: 1px; background: var(--im-borde); margin: 5px 2px; }
.im-pop__item {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  border: none; background: none; font-family: var(--im-font); font-size: 13px; color: var(--im-texto);
  padding: 7px 9px; border-radius: var(--im-r-sm); cursor: pointer;
}
.im-pop__item:hover { background: var(--im-g050); }
.im-pop__item::before { content: ""; display: inline-block; width: 12px; flex: none; color: var(--im-rojo); font-weight: 800; }
.im-pop__item[aria-pressed="true"]::before { content: "✓"; }
.im-pop__item.on { font-weight: 700; }
.im-pop__empty { padding: 10px; color: var(--im-texto-3); font-size: 12.5px; }

/* ---------------------------------------------------------------------------
   Datos compartidos de la sesión: chip «Datos» de la barra, su menú y el aviso
   de ficheros que le faltan a una herramienta.
   --------------------------------------------------------------------------- */
.im-datos { display: flex; align-items: center; flex: none; }
.im-datos__btn { white-space: nowrap; }

.im-pop__tit { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--im-texto-3); font-weight: 700; padding: 4px 8px 8px; }
.im-pop__fila { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: var(--im-r-sm); }
.im-pop__fila:hover { background: var(--im-g050); }
.im-pop__fich { font-size: 12.5px; color: var(--im-g900); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.im-pop__tam { font-size: 11px; color: var(--im-texto-3); margin-left: auto; white-space: nowrap; }
.im-pop__x { border: none; background: none; cursor: pointer; color: var(--im-texto-3); font-size: 12px; line-height: 1; padding: 2px; flex: none; }
.im-pop__x:hover { color: var(--im-rojo-oscuro); }
.im-pop__vacio { padding: 4px 8px 8px; color: var(--im-texto-3); font-size: 12.5px; }
.im-pop__nota { padding: 8px 8px 2px; margin-top: 4px; border-top: 1px solid var(--im-borde); color: var(--im-texto-3); font-size: 11.5px; line-height: 1.5; }

.im-aviso {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 22px; background: var(--im-rojo-tenue);
  border-bottom: 1px solid #F6C9BE;
}
.im-aviso__ico {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--im-rojo); color: var(--im-blanco);
  font-size: 13px; font-weight: 800; line-height: 20px; text-align: center;
}
.im-aviso__txt { font-size: 13px; color: var(--im-g900); line-height: 1.45; }
.im-aviso__txt code { background: var(--im-blanco); border: 1px solid #F6C9BE; border-radius: 4px; padding: 1px 5px; font-family: var(--im-font); font-size: 12px; }
.im-aviso__sub { display: block; color: var(--im-texto-2); font-size: 12px; margin-top: 2px; }
.im-aviso__btn { flex: none; margin-left: auto; }
@media (max-width: 700px) { .im-aviso { flex-wrap: wrap; } .im-aviso__btn { margin-left: 0; } }

/* Recuperando los datos de la sesión: se oculta el estado vacío para que no
   parpadee la pantalla de «carga un Excel» justo antes de aparecer los datos. */
body.im-restaurando .im-dropzone { display: none !important; }
.im-restaurar { display: flex; align-items: center; gap: 10px; padding: 30px 4px; color: var(--im-texto-2); font-size: 13.5px; }
.im-restaurar__spin { width: 14px; height: 14px; flex: none; border: 2px solid var(--im-g300); border-top-color: var(--im-rojo); border-radius: 50%; animation: im-giro .7s linear infinite; }
@keyframes im-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .im-restaurar__spin { animation-duration: 2s; } }
.im-footer__ver { color: var(--im-texto-3); font-size: 11.5px; }