/* ==========================================================================
   EL ECOSISTEMA INVESTIGADOR · gráfico interactivo de 3 pantallas
   Paleta  fondo #F9FAFC · azul marino #003866 · tinta #0B1433 · azul #3C77F7
   Tipos   Playfair Display (titular) · Manrope 300
   ========================================================================== */
.ufv-eco *,.ufv-eco *::before,.ufv-eco *::after{box-sizing:border-box}

.ufv-eco{
  --bg:#F9FAFC; --navy:#003866; --ink:#0B1433; --blue:#3C77F7; --blue-aa:#3365F5; --grey:#EFF0F2;
  position:relative;width:100%;margin:0;padding:0;background:var(--bg);
  font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);
}
.eco-scroll{width:100%}
.eco-stage{display:block;width:100%;height:auto;aspect-ratio:1600/900}

/* ---------------------------------------------------------------- titular */
.eco-title{fill:var(--ink);font-family:"Playfair Display",Georgia,serif;font-weight:400;font-size:70px;letter-spacing:-.9px}

/* ------------------------------------------------------------------ pills */
.tab{cursor:pointer}
.tab:focus{outline:none}
.tab-bg{fill:none;stroke:var(--navy);stroke-width:1.2;transition:fill .3s ease}
.tab-t{font-weight:300;font-size:17px;text-anchor:middle;fill:var(--navy);transition:fill .3s ease}
.tab[aria-selected="true"] .tab-bg{fill:var(--navy)}
.tab[aria-selected="true"] .tab-t{fill:#fff}
.tab:hover .tab-bg{fill:rgba(0,56,102,.07)}
.tab[aria-selected="true"]:hover .tab-bg{fill:var(--navy)}
.tab-ring{fill:none;stroke:var(--blue);stroke-width:1.6;stroke-dasharray:3 3;opacity:0}
.tab:focus-visible .tab-ring{opacity:1}

/* ------------------------------------------------------------ cajas info */
.eco-mini{font-weight:300;font-size:18px;fill:var(--navy)}
.eco-mini--blue{fill:var(--blue-aa)}
.eco-total-num{font-weight:300;font-size:34px;fill:var(--navy);text-anchor:middle}
.eco-box{opacity:0;pointer-events:none;transition:opacity .35s ease}
.eco-box.is-on{opacity:1}

/* --------------------------------------------------------------- gráficos */
.eco-ring{fill:url(#ecoGrad);fill-opacity:.88;stroke:var(--navy);stroke-opacity:.55;stroke-width:1.2}
.eco-num{font-weight:300;font-size:47px;fill:var(--blue);text-anchor:middle}
.eco-lbl{font-weight:300;font-size:20px;fill:var(--navy);text-anchor:middle}
.eco-lbl--l{text-anchor:start}
.eco-globe{fill:url(#ecoGrad);fill-opacity:.88;stroke:var(--navy);stroke-opacity:.55;stroke-width:1}
.eco-map path{fill:none;stroke:var(--navy);stroke-width:1;stroke-linejoin:round}
.eco-barbox{fill:#fff;stroke:var(--navy);stroke-width:1.2}
.eco-barfill{fill:var(--blue)}
.eco-num--in{fill:var(--navy);text-anchor:start}
.eco-num--ex{fill:var(--blue);text-anchor:end}
.hbar{fill:var(--blue);fill-opacity:.88}
.eco-lbl-h{font-weight:300;font-size:17px;fill:var(--navy)}
.eco-num-h{font-weight:300;font-size:27px;fill:var(--navy)}
.bub.has-data{cursor:pointer}
.bar-h.has-data{cursor:pointer}
.bub.has-data:focus-visible .eco-globe{stroke-width:2}
.eco-tooltip{opacity:0;pointer-events:none;transition:opacity .12s ease}
.eco-tooltip.is-on{opacity:1}
.eco-tooltip-bg{fill:var(--navy)}
.eco-tooltip-txt{font-family:"Manrope",sans-serif;font-weight:300;font-size:16px;fill:#fff}
.eco-map-lbl{font-family:"Manrope",sans-serif;font-weight:500;font-size:16px;fill:var(--navy);text-anchor:middle}
.eco-map-lbl--right{text-anchor:start}
.eco-map-lbl--left{text-anchor:end}
.eco-map-leader{stroke:#9AA5B1;stroke-width:1;fill:none}

/* --------------------------------------------------------------- paneles */
.panel{visibility:hidden;pointer-events:none}
.panel.is-on{visibility:visible;pointer-events:auto}
.panel:focus{outline:none}
.panel:focus-visible{outline:1.6px dashed var(--blue);outline-offset:6px}

/* ------------------------------------------------------------ animaciones */
.bub-in,.bar-txt,.eco-map,.eco-caption{opacity:0}
.bub-in,.bar-clip,.hbar-clip{transform-origin:0 0}
.bar-clip{transform:scaleY(0)}
.hbar-clip{transform:scaleX(0)}
.panel.is-on .bar-clip{transform:scaleY(1)}
.panel.is-on .hbar-clip{transform:scaleX(1)}
.panel.is-in .bub-in{animation:ecoPop .55s cubic-bezier(.2,.8,.25,1) both;
  animation-delay:calc(var(--i)*70ms + 100ms)}
.panel.is-in .bar-clip{animation:ecoWipe .62s cubic-bezier(.25,.9,.25,1) both;
  animation-delay:calc(var(--i)*65ms)}
.panel.is-in .hbar-clip{animation:ecoWipeH .62s cubic-bezier(.25,.9,.25,1) both;
  animation-delay:calc(var(--i)*65ms)}
.panel.is-in .bar-txt{animation:ecoRise .5s ease both;animation-delay:calc(var(--i)*65ms + 200ms)}
.panel.is-in .eco-map{animation:ecoFade .9s ease both}
.panel.is-in .eco-caption{animation:ecoRise .6s ease both;animation-delay:.1s}

@keyframes ecoPop{from{opacity:0;transform:scale(.74)}to{opacity:1;transform:scale(1)}}
@keyframes ecoWipe{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes ecoWipeH{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ecoRise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@keyframes ecoFade{from{opacity:0}to{opacity:1}}

/* ------------------------------------------------- versión móvil (chrome) */
.eco-m{display:none}
@media (max-width:820px){
  .eco-m{display:block}
  .eco-chrome{display:none}
  #stage{display:none}                 /* el SVG de escritorio no se usa en móvil */
  .eco-scroll{overflow:visible}
  .eco-title-m{
    margin:0;padding:26px 5.263% 2px;font-family:"Playfair Display",Georgia,serif;
    font-weight:400;font-size:clamp(26px,7.2vw,40px);line-height:1.15;color:var(--ink);
  }
  .eco-hint-m{
    margin:0;padding:6px 5.263% 0;font-family:"Manrope",sans-serif;
    font-weight:500;font-size:16px;line-height:1.4;color:var(--blue-aa);
  }
  .eco-tabs-m{display:flex;flex-direction:column;padding:18px 5.263% 20px}
  .eco-tabs-m button{
    all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;
    gap:14px;width:100%;min-height:56px;padding:16px 2px;
    border-bottom:1px solid rgba(0,56,102,.18);
    font-family:inherit;font-weight:500;font-size:16px;color:var(--ink);text-align:left;cursor:pointer;
  }
  .eco-tabs-m button:first-child{border-top:1px solid rgba(0,56,102,.18)}
  .eco-tabs-m button:hover{background:rgba(0,56,102,.05)}
  .eco-tab-arrow{flex:0 0 auto;width:18px;height:18px;color:var(--blue)}
  .eco-tabs-m button:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
  .eco-detail-header{
    display:none;align-items:center;justify-content:space-between;gap:12px;
    margin:16px 5.263% 0;
  }
  .eco-close-m{
    flex:0 0 auto;width:36px;height:36px;padding:0;border:1.2px solid var(--navy);
    border-radius:50%;background:transparent;color:var(--navy);
    display:flex;align-items:center;justify-content:center;cursor:pointer;
  }
  .eco-close-m:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
  /* pantalla 1 (menú) vs pantalla 2 (gráfico) */
  #ufvEco:not(.eco-m-detail) .eco-stage-m,
  #ufvEco:not(.eco-m-detail) #infoMTop,
  #ufvEco:not(.eco-m-detail) #infoMBottom{display:none}
  #ufvEco.eco-m-detail .eco-tabs-m{display:none}
  #ufvEco.eco-m-detail .eco-hint-m{display:none}
  #ufvEco.eco-m-detail .eco-detail-header{display:flex}
  #titleDetailM{display:block}
  .eco-section-title-m{
    margin:0;padding:0;font-family:"Manrope",sans-serif;
    font-weight:500;font-size:20px;line-height:1.2;color:var(--ink);
  }
  .eco-info-m{margin:6px 5.263% 0;padding:12px 0;border-radius:8px;background:transparent;
    font-size:16px;font-weight:300;color:var(--navy);line-height:1.5}
  .eco-info-m.is-total{background:transparent;color:var(--navy);display:inline-block;padding:8px 0;margin-inline-end:auto;text-align:left;font-size:16px;font-weight:300}
  .eco-info-m[hidden]{display:none}
  .eco-info-m b{font-weight:300;font-size:30px;display:block;line-height:1.1}
  .eco-info-m .sw{color:var(--blue-aa)}
  .eco-info-m.is-total .sw{color:#fff}
  .m-legend-row{display:flex;align-items:center;gap:8px;margin:3px 0}
  .m-legend-sq{width:14px;height:14px;border-radius:3px;flex:0 0 auto;display:inline-block}
  .m-legend-sq--in{background:#fff;border:1.2px solid var(--navy);box-sizing:border-box}
  .m-legend-sq--ex{background:var(--blue)}

  /* --------------------- paneles rediseñados para móvil (SVG propio) --- */
  .eco-stage-m{display:block;width:100%;height:auto;margin-top:6px}
  .panel-m{display:none}
  .panel-m.is-on{display:block}
  .m-row{opacity:0}
  .panel-m.is-on .m-row{animation:ecoRise .45s ease both;animation-delay:calc(var(--i)*55ms)}
  .m-lbl{font-family:"Manrope",sans-serif;font-weight:300;font-size:16px;fill:var(--navy)}
  .m-caption{font-family:"Manrope",sans-serif;font-weight:300;font-size:16px;fill:var(--navy)}
  .m-caption--bold{font-weight:700}
  .m-track{fill:var(--grey)}
  .m-fill{fill:var(--blue)}
  .m-fill--alt{fill:#B9D3FB}
  .m-fill--bargrad{fill:var(--blue);fill-opacity:.88}
  .m-num{font-family:"Manrope",sans-serif;font-weight:500;font-size:16px}
  .m-num--w300{font-weight:300}
  .m-tile-rect{fill:var(--blue);fill-opacity:.85;stroke:var(--bg);stroke-width:2}
  .m-tile-num{font-family:"Manrope",sans-serif;font-weight:500;fill:#fff;text-anchor:middle}
  .m-tile-num--sm{font-weight:500}
  .m-tile-lbl{font-family:"Manrope",sans-serif;font-weight:300;fill:#fff;text-anchor:middle}
  .m-num--in{fill:#fff;text-anchor:end}
  .m-num--out{fill:var(--navy);text-anchor:start}
  .m-num2{font-family:"Manrope",sans-serif;font-weight:500;font-size:16px;fill:var(--navy);text-anchor:start}
  .m-num2--in{fill:var(--navy)}
  .m-num2--alt{fill:#5b7590}
  .m-stat-bg{fill:var(--grey)}
  .m-stat-num{font-family:"Manrope",sans-serif;font-weight:300;font-size:52px;fill:var(--blue);text-anchor:middle}
  .m-stat-lbl{font-family:"Manrope",sans-serif;font-weight:300;font-size:16px;fill:var(--navy);text-anchor:middle}
  .m-bub-circle{fill:url(#ecoGradM);fill-opacity:.88;stroke:var(--navy);stroke-opacity:.55;stroke-width:1.2}
  .m-bub-num{font-family:"Manrope",sans-serif;font-weight:300;fill:var(--blue);text-anchor:middle}
  .m-bub-lbl{font-family:"Manrope",sans-serif;font-weight:300;font-size:16px;fill:var(--navy);text-anchor:middle}
  .m-stackbox{fill:#fff;stroke:var(--navy);stroke-opacity:.55;stroke-width:1.2}
  .m-stackfill{fill:var(--blue);fill-opacity:.88}
  .m-stacknum{font-family:"Manrope",sans-serif;font-weight:300;font-size:16px}
  .m-stacknum--in{fill:var(--navy);text-anchor:end}
  .m-stacknum--ex{fill:var(--blue-aa);text-anchor:start}
}

@media (prefers-reduced-motion:reduce){
  .bub-in,.bar-txt,.eco-map,.eco-caption{opacity:1}
  .bar-clip,.hbar-clip{transform:none}
  .panel.is-in .bub-in,.panel.is-in .bar-clip,.panel.is-in .hbar-clip,.panel.is-in .bar-txt,
  .panel.is-in .eco-map,.panel.is-in .eco-caption{animation:none}
  .tab-bg,.tab-t,.eco-box{transition:none}
}