/* Modal de indicadores: los ejemplos aprobados el 1-nov-2026 (prototipos/comun/graficas.css), con el azul de la marca.
   Rediseño visual del 4-nov-2026, a pedido del usuario, para que se vea como el resto del sitio:
   Ciutadella, sin fondos grises ni esquinas redondeadas, botones como .boton-decj (línea abajo, se llenan de azul
   al pasar el mouse) y globos oscuros como los de las tarjetas del inicio.
   Todo va dentro de .im para no tocar el resto del sitio. Escrito a mano; no pasa por Vite. */

/* Ciutadella con un nombre propio y solo los WOFF2: si falta un símbolo (▲ ▼ → ⓘ), el navegador pasa directo a la fuente
   del sistema en lugar de descargar los .woff viejos de la familia "Ciutadella" para buscarlo. Son los mismos archivos de sitio.css. */
@font-face { font-family: CiutadellaIM; src: url('/assets/fonts/ciutadella/Ciutadella-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: CiutadellaIM; src: url('/assets/fonts/ciutadella/Ciutadella-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: CiutadellaIM; src: url('/assets/fonts/ciutadella/Ciutadella-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: CiutadellaIM; src: url('/assets/fonts/ciutadella/Ciutadella-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

.im{--ink:#303030;--muted:#666;--line:#e5e5e5;--sep:#cfcfcf;--blue:#4e92ce;--blue-dark:#3d7fb8;--up:#1d7a46;--down:#c0392b}
.im, .im *{box-sizing:border-box}
.im{font-family:CiutadellaIM,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);line-height:normal;text-align:left}
.im .up{color:var(--up)}
.im .down{color:var(--down)}

/* ---- Ventana ---- */
/* Fondo oscuro con un desenfoque ligero. El modal va al centro de la pantalla (margin:auto); si es más alto que la
   pantalla, empieza arriba y se desplaza (con align-items:center se cortaría la parte de arriba). */
.im .fondo{position:fixed;inset:0;background:rgba(20,20,20,.55);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:none;align-items:flex-start;justify-content:center;padding:24px 12px;overflow-y:auto;z-index:1000}
.im .fondo.abierto{display:flex}
/* El recuadro del modal y las gráficas son lo único con esquinas redondeadas (decisión del usuario, 4-nov-2026). */
.im .modal{background:#fff;border-radius:16px;width:100%;max-width:880px;margin:auto;padding:28px 32px 32px;box-shadow:0 24px 60px rgba(0,0,0,.28)}

/* Apertura (4-nov-2026): el fondo aparece poco a poco y el modal sale de la tarjeta que se tocó y se acomoda al centro.
   graficas.js pone en --im-dx y --im-dy la distancia del centro del modal al centro de la tarjeta.
   .midiendo detiene las animaciones mientras se mide; .cerrando hace el camino de regreso. */
.im .fondo.abierto{animation:im-fondo-entra .3s ease-out both}
.im .fondo.abierto .modal{animation:im-modal-entra .45s cubic-bezier(.2,.8,.2,1) both}
.im .fondo.cerrando{animation:im-fondo-sale .26s ease-in both}
.im .fondo.cerrando .modal{animation:im-modal-sale .26s cubic-bezier(.4,0,.8,.4) both}
.im .fondo.midiendo,.im .fondo.midiendo .modal{animation:none}
@keyframes im-fondo-entra{from{opacity:0}to{opacity:1}}
@keyframes im-fondo-sale{from{opacity:1}to{opacity:0}}
@keyframes im-modal-entra{
  from{opacity:0;transform:translate(var(--im-dx,0px),var(--im-dy,24px)) scale(.5)}
  45%{opacity:1}
  to{opacity:1;transform:none}
}
@keyframes im-modal-sale{
  from{opacity:1;transform:none}
  to{opacity:0;transform:translate(calc(var(--im-dx,0px) * .6),calc(var(--im-dy,24px) * .6)) scale(.7)}
}
@media (prefers-reduced-motion:reduce){
  .im .fondo.abierto,.im .fondo.abierto .modal,.im .fondo.cerrando,.im .fondo.cerrando .modal{animation:none}
}
.im .cab{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
/* Encabezado como las tarjetas del inicio: módulo en mayúsculas pequeñas y el título en azul. */
.im .modulo{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.im .cab h2{font-size:26px;font-weight:700;line-height:1.15;color:var(--blue);margin:4px 0 4px}
.im .cab .fuente{margin-top:0}
.im .cerrar{border:0;background:transparent;border-radius:0;width:40px;height:40px;font:inherit;font-size:28px;line-height:1;color:var(--ink);cursor:pointer;flex:none;transition:background-color .2s ease,color .2s ease}
.im .cerrar:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ---- Cifras de arriba: sin fondo, con una línea encima, como las tarjetas del inicio ---- */
.im .resumen{display:grid;grid-template-columns:1.25fr 1fr 1fr;column-gap:24px;row-gap:16px;margin:24px 0 28px}
.im .dato{background:none;border-radius:0;border-top:1px solid var(--sep);padding:10px 0 0}
.im .dato.total{grid-row:span 2;display:flex;flex-direction:column;justify-content:center;border-top:3px solid var(--blue)}
.im .dato small{display:block;font-size:13px;color:var(--muted);margin-bottom:2px}
.im .dato b{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums}
.im .dato.total b{font-size:44px;line-height:1.05}
.im .dato .sub{display:block;font-size:14px;font-weight:600;color:var(--muted);margin-top:2px}
.im .dato.total .sub,.im .dato.aport .sub,.im .dato.info .sub{font-weight:400}

/* ---- Pestañas (Histórico y los botones 2 y 3) y selectores internos: el botón del sitio ----
   Sin fondo y con esquinas rectas. La elegida lleva la línea azul y texto oscuro; las demás, línea gris.
   Al pasar el mouse se llenan de azul (solo con mouse: en el celular un toque no deja el botón pintado). */
.im .botones,.im .escala{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:12px;background:none;border-radius:0;padding:0}
.im .botones{margin:0 0 20px}
.im .escala{width:max-content;max-width:100%;gap:6px;margin-bottom:12px}
.im .botones button,.im .escala button{border:0;border-bottom:3px solid var(--sep);border-radius:0;background:transparent;padding:10px 8px 8px;min-height:44px;font:inherit;font-size:15px;font-weight:600;line-height:1.2;color:var(--muted);cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.im .escala button{min-height:0;padding:6px 12px 5px;font-size:13px;border-bottom-width:2px}
.im .escala.muchas{grid-auto-columns:auto;gap:4px}
.im .escala.muchas button{padding:6px 10px 5px;min-width:36px}
.im .botones button[aria-pressed=true],.im .escala button[aria-pressed=true]{border-bottom-color:var(--blue);color:var(--ink);background:transparent;box-shadow:none}
.im .botones button:focus-visible,.im .escala button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ---- Notas ---- */
.im .nota{display:flex;gap:8px;background:none;border-radius:0;border-left:3px solid var(--blue);color:var(--ink);padding:2px 0 2px 10px;font-size:14px;line-height:1.4;margin-bottom:12px}
.im .nota>span:first-child{color:var(--blue)}
.im .ejeinfo{font-size:13px;color:var(--muted);margin-bottom:6px}

/* ---- Gráfica (ApexCharts) ---- */
.im .grafica{position:relative;height:300px}
.im .etiquetas{position:absolute;inset:0;pointer-events:none}
.im .etq{position:absolute;font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap;background:rgba(255,255,255,.85);padding:0 3px;border-radius:0;animation:im-aparecer .35s .45s both}
@keyframes im-aparecer{from{opacity:0}to{opacity:1}}
/* Globo de la gráfica: gris oscuro, recto y con letra blanca, como el de las barras de las tarjetas del inicio. */
.im .apexcharts-tooltip.apexcharts-theme-dark{background:var(--ink);color:#fff;border:0;border-radius:0;box-shadow:0 6px 18px rgba(0,0,0,.18);font-family:inherit}
.im .apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title{background:var(--ink);border-bottom:1px solid rgba(255,255,255,.16);font-family:inherit;font-size:13px;font-weight:600;margin-bottom:2px}
.im .apexcharts-tooltip-series-group{padding:0 12px}
.im .apexcharts-tooltip-text{font-family:inherit;font-size:13px}
.im .apexcharts-tooltip-marker{border-radius:2px;width:10px;height:10px}
.im .apexcharts-legend-text{font-family:inherit!important;color:var(--ink)!important}

/* ---- Cifras en cuadros (sin gráfica) ---- */
.im .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px 24px}
.im .tiles .dato b{font-size:30px}

/* ---- Listas de categorías (sectores, áreas, niveles) ---- */
.im .lista{position:relative;--col:160px;margin-top:4px}
.im .fila{display:grid;grid-template-columns:var(--col) minmax(0,1fr);gap:12px;align-items:center;outline:none}
.im .fila .nom{font-size:14px;text-align:right;line-height:1.2}
.im .pista{position:relative;height:36px}
.im .barra{position:absolute;left:0;top:50%;height:18px;width:0;min-width:4px;transform:translateY(-50%);background:var(--blue);border-radius:0 4px 4px 0;transition:width .8s cubic-bezier(.2,.8,.2,1),background-color .2s ease}
.im .punto{position:absolute;left:0;top:50%;width:14px;height:14px;margin-left:-7px;transform:translateY(-50%);background:var(--blue);border:2px solid #fff;border-radius:50%;transition:left .8s cubic-bezier(.2,.8,.2,1)}
.im .rot small{display:block;font-size:12px;color:var(--muted)}
.im .rot{position:absolute;line-height:1.15;left:0;top:50%;transform:translateY(-50%);font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums;transition:left .8s cubic-bezier(.2,.8,.2,1)}
.im .guia{position:absolute;top:0;bottom:0;width:1px;background:var(--line)}
.im .fila.eje .pista{height:22px}
.im .marca{position:absolute;top:4px;transform:translateX(-50%);font-size:12px;color:var(--muted);white-space:nowrap}
.im .barra.vacia{min-width:0}
/* Las barras con color propio (gris de "No STEM") no cambian: el azul las confundiría con STEM. */
.im .fila[data-i]:hover .barra,.im .fila[data-i]:focus .barra,.im .fila[data-i]:hover .punto,.im .fila[data-i]:focus .punto{background:var(--blue-dark)}
.im .fila[data-i]:hover .nom,.im .fila[data-i]:focus .nom{font-weight:600;color:var(--blue)}
/* Globo de las listas y de la pirámide: igual que el de la gráfica. */
.im .globo{position:absolute;left:calc(var(--col) + 12px);z-index:2;background:var(--ink);color:#fff;border:0;border-radius:0;padding:8px 12px;font-size:13px;line-height:1.5;box-shadow:0 6px 18px rgba(0,0,0,.18);pointer-events:none}
.im .lista.apilada{--col:0px}
.im .lista.apilada .fila{grid-template-columns:minmax(0,1fr);gap:0}
.im .lista.apilada .fila .nom{text-align:left;font-size:13px;color:var(--muted);margin-top:8px}
.im .lista.apilada .fila.eje>div:first-child{display:none}
.im .lista.apilada .pista{height:26px}
.im .lista.apilada .leyenda-cat{margin-left:0}

/* ---- Franja de años bajo la gráfica y listas por mes ---- */
.im .franja{position:relative;height:34px;margin-top:2px}
.im .tramo{position:absolute;top:0;height:5px;border-radius:3px;background:var(--sep)}
.im .tramo.actual{background:var(--ink)}
.im .tramo span{position:absolute;top:9px;left:0;font-size:12px;font-weight:600;color:var(--muted)}
.im .tramo.actual span{color:var(--ink)}
.im .anio{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--muted);margin:12px 0 4px}
.im .anio::before{content:'';width:4px;height:14px;border-radius:2px;background:var(--sep)}
.im .anio.actual{color:var(--ink)}
.im .anio.actual::before{background:var(--ink)}
.im .fmes{display:grid;grid-template-columns:34px minmax(0,1fr) 76px;gap:8px;align-items:center;border-left:4px solid var(--sep);padding-left:8px}
.im .fmes.actual{border-left-color:var(--ink)}
.im .fmes .m{font-size:14px}
.im .fmes .pista{height:34px}
.im .cero{position:absolute;top:3px;bottom:3px;width:1px;background:var(--muted)}
.im .dbar{position:absolute;top:50%;height:14px;width:0;min-width:2px;transform:translateY(-50%);transition:width .8s cubic-bezier(.2,.8,.2,1)}
.im .dbar.pos{background:var(--up);border-radius:0 4px 4px 0}
.im .dbar.neg{background:var(--down);border-radius:4px 0 0 4px}
.im .fmes .v{font-size:14px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums;line-height:1.15}
.im .fmes .v small{display:block;font-size:12px;font-weight:400;color:var(--muted)}

/* ---- Textos de abajo ---- */
.im .asterisco{font-size:13px;line-height:1.45;color:var(--muted);margin:12px 0 0}
.im .resumen .asterisco{grid-column:1/-1;margin:0}
.im .explica{font-size:16px;line-height:1.55;margin:20px 0 0}
.im .fuente{font-size:13px;color:var(--muted);margin-top:6px}
/* Invitación al TIEC con el botón del sitio (.boton-decj, en sitio.css). */
.im .tiec{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;font-size:15px;margin-top:24px;padding-top:20px;border-top:1px solid var(--sep)}
.im .tiec .boton-decj{font-size:15px}
.im [hidden]{display:none!important}

/* ---- Leyenda de las listas y sus filtros ---- */
.im .leyenda-cat{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--muted);margin:0 0 8px calc(var(--col) + 12px)}
.im .leyenda-cat span{display:flex;align-items:center;gap:5px}
.im .leyenda-cat i{display:inline-block;width:10px;height:10px;border-radius:2px}
/* Filtros (Por área: STEM / No STEM) y orden (Por tamaño / STEM primero): el botón del sitio en chico.
   El filtro apagado queda tachado y tenue; la opción de orden elegida lleva la línea azul. */
.im .leyenda-cat .filtro{display:inline-flex;align-items:center;gap:6px;border:0;border-bottom:2px solid var(--blue);border-radius:0;background:transparent;padding:5px 10px 4px;font:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;transition:background-color .2s ease,color .2s ease,opacity .2s ease}
.im .leyenda-cat .filtro[aria-pressed=false]{opacity:.5;text-decoration:line-through;border-bottom-color:var(--sep)}
.im .leyenda-cat .filtro:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.im .leyenda-cat .filtro.orden[aria-pressed=false]{opacity:1;text-decoration:none;color:var(--muted)}
.im .leyenda-cat .orden-grupo{display:flex;gap:8px;margin-left:auto}
.im .leyenda-cat:has(.filtro){gap:8px}

/* ---- Por género ---- */
.im .genero{display:grid;gap:16px;margin-top:4px}
.im .genero .tit{font-size:14px;font-weight:600;margin-bottom:6px}
.im .genero .barra2{display:flex;height:22px;border-radius:6px;overflow:hidden;background:var(--line)}
.im .genero .barra2 span{width:0;transition:width .8s cubic-bezier(.2,.8,.2,1)}
.im .genero .cifras{display:flex;justify-content:space-between;font-size:13px;margin-top:4px;font-variant-numeric:tabular-nums}
.im .genero .cifras b{font-size:14px}
.im .genero .cifras small{color:var(--muted)}

/* ---- Pirámide ---- */
.im .piramide .cabeza{display:grid;grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr);font-size:13px;margin-bottom:4px;line-height:1.3}
.im .piramide .cabeza .izq{text-align:right}
.im .piramide .cabeza i{display:inline-block;width:10px;height:10px;border-radius:2px;vertical-align:-1px;margin:0 4px}
.im .piramide .cabeza small{display:block;color:var(--muted)}
.im .lista .fila.prow{grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr);gap:0}
.im .prow .nom{text-align:center;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.im .prow .lado{position:relative;height:34px}
.im .prow .pb{position:absolute;top:50%;height:20px;width:0;transform:translateY(-50%);transition:width .8s cubic-bezier(.2,.8,.2,1)}
.im .prow .izq .pb{right:0;border-radius:4px 0 0 4px}
.im .prow .der .pb{left:0;border-radius:0 4px 4px 0}
.im .prow .izq .rot{left:auto;text-align:right;transition:right .8s cubic-bezier(.2,.8,.2,1)}
.im .prow:hover .nom,.im .prow:focus .nom{font-weight:600;color:var(--blue)}
.im .fdif{display:grid;grid-template-columns:64px minmax(0,1fr) 88px;gap:8px;align-items:center}
.im .fdif .m{font-size:14px}
.im .fdif .pista{height:34px}
.im .fdif .v{font-size:14px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums;line-height:1.15}
.im .fdif .v small{display:block;font-size:12px;font-weight:400;color:var(--muted)}

/* ---- Al pasar el mouse: azul de la marca (solo con mouse, no en pantallas táctiles) ---- */
@media (hover:hover){
  .im .cerrar:hover{background:var(--blue);color:#fff}
  .im .botones button:hover,.im .escala button:hover{background:var(--blue);color:#fff;border-bottom-color:var(--blue)}
  .im .leyenda-cat .filtro:hover{background:var(--blue);color:#fff;border-bottom-color:var(--blue);opacity:1}
  /* El cuadro de color del filtro lleva un borde blanco para que el azul de STEM no se pierda sobre el botón azul. */
  .im .leyenda-cat .filtro:hover i{box-shadow:0 0 0 1px #fff}
}
@media (prefers-reduced-motion:reduce){
  .im .cerrar,.im .botones button,.im .escala button,.im .leyenda-cat .filtro{transition:none}
}

/* ---- Celular ---- */
@media (max-width:600px){
  .im .fondo{padding:8px}
  .im .modal{padding:20px 16px 24px;border-radius:12px}
  .im .cab h2{font-size:22px}
  .im .resumen{grid-template-columns:1fr 1fr;column-gap:16px;margin:20px 0 24px}
  .im .dato.total{grid-row:auto;grid-column:span 2}
  .im .dato.total b{font-size:36px}
  .im .dato b{font-size:21px}
  .im .botones{gap:8px}
  .im .botones button{font-size:14px;padding:8px 4px 7px}
  .im .lista{--col:96px}
  .im .marca{font-size:11px}
  .im .grafica{height:270px}
  .im .leyenda-cat{margin-left:calc(var(--col) + 12px)}
  .im .tiec{font-size:14px}
}