/*
 * Overrides que aplican SOLO al micrositio v1.
 *
 * Se carga DESPUÉS de los CSS legacy en el layout. Reemplaza comportamientos
 * que el legacy resolvía con AngularJS (ng-show sobre los dropdowns del nav,
 * etc.) por CSS puro, para no tener que portar toda la lógica de Angular.
 */

/* ========================================================================
 * Top nav — dropdowns on hover (reemplazo del ng-mouseover legacy)
 *
 * En el legacy cada #linksAprenda/Encuentre/Cafci es hermano del <ul> con
 * posición absoluta a 25%/50%/75% del #topNav. Nuestro markup los anida en
 * <li class="hasDropdown">, así que reposicionamos para que cada dropdown se
 * alinee con SU <li> (no con porcentajes del #topNav).
 * ======================================================================== */
#topNav li.hasDropdown { position: relative; }

#topNav .linksNav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: auto;
  width: auto;
  min-width: 240px;
  z-index: 1000;
}

/* Las reglas legacy posicionan cada dropdown con left:25%/50%/75% + width:25%
   relativos al #topNav. Como nosotros los anidamos dentro del <li>, hay que
   forzar left:0 / top:100% / width:auto con misma especificidad (ID-a-ID). */
#topNav #linksAprenda,
#topNav #linksEncuentre,
#topNav #linksCafci {
  left: 0;
  top: 100%;
  width: auto;
  min-width: 240px;
}

#topNav li.hasDropdown:hover > .linksNav,
#topNav .linksNav:hover {
  display: block;
}

/* #centralContent contiene columnas flotadas (#colLeft / #rightContent) — sin
   clearfix el #footer fluye al lado del #colLeft en vez de debajo. Usamos
   display:flow-root que contiene floats sin los side-effects de overflow:hidden. */
#centralContent {
  display: flow-root;
}

/* Footer — los 3 footerBox suman ~995px y cualquier padding extra hace wrapping.
   Flexbox con wrap: los 3 bloques quedan lado a lado en la primera fila y el
   bloque #legal (Área privada / Contacto / etc.) pasa a una fila nueva. */
#footer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
#footer .footerBox {
  float: none;
  flex: 0 0 auto;
}
#footer #navCafci {
  flex: 1 1 auto;
  width: auto !important;
}
/* El <div class="clear"> entre navCafci y #legal fuerza el salto de fila. */
#footer > .clear {
  flex-basis: 100%;
  height: 0;
}
/* #legal va a fila completa abajo */
#footer #legal {
  flex: 0 0 100%;
}

/* "Pasillo" invisible entre item y dropdown para que el mouse cruce sin cerrar. */
#topNav li.hasDropdown:hover > .linksNav {
  padding-top: 12px;
  margin-top: -5px;
}

/* ========================================================================
 * Ficha de fondo — headers con ancho fijo (220/230px) del legacy se sobrepasaban
 * cuando el título incluye la fecha ("Rendimientos al 2026-04-17"). Damos aire.
 *
 * Además, las GIFs arrowH2.gif/arrowH2Cartera.gif NO son transparentes — tienen
 * esquinas color crema que en el legacy matcheaban el fondo de la página, pero
 * en nuestro layout (fondo distinto) se ven como cuadritos blancos sobre el azul.
 * Reemplazamos el background-image por un triángulo CSS puro vía ::after.
 * ======================================================================== */
/* Headers del fichaLeft: normalizamos ancho + desactivamos TODAS las GIFs de flechas
   con esquinas crema (arrowH2.gif, arrowH2Cartera.gif, arrowH2CarteraOut.gif).
   Renunciamos al "triangle tab" del legacy — no sumaba y se veía feo fuera del contexto
   de página cream que asumían las GIFs. Los headers quedan como rectángulos limpios. */
#fichaLeft h2,
#fichaLeft h3,
#fichaLeft #cartera h2 {
  width: auto !important;
  min-width: 260px;
  max-width: 100%;
  padding-right: 14px;
  float: none !important;
  background-image: none !important;
}

/* "Valores al ..." del bloque cartera — el legacy lo float:left con una GIF tab.
   Sin la GIF queda como caja crema suelta → lo devolvemos a texto plano debajo. */
#cartera .valores {
  float: none !important;
  width: auto !important;
  background: transparent !important;
  background-image: none !important;
  padding: 6px 0 8px !important;
  font-size: 12px;
  color: #666;
}

/* cajaBorde + sociedades del fichaRight: el legacy pone una GIF (arrowcajaBorde.gif)
   de fondo con corner crema — mismo problema que los headers azules. Las sacamos. */
#fichaRight .cajaBorde,
#fichaRight .sociedades {
  background-image: none !important;
}

/* Flechas en las celdas izquierdas de la tabla de rendimientos (Del día / Del mes / Del año / Anual).
   Usaba arrowTablaRendimiento.gif — misma GIF con esquinas crema. */
#fichaLeft .tablaRendimientos .flechaTabla {
  background-image: none !important;
}

/* Botones "Nueva búsqueda" y "Modificar búsqueda actual" — el legacy usaba
   arrowBack.gif (flecha a la izquierda) que tiene esquinas crema. Lo sacamos.
   Ajustamos padding para compensar el espacio que ocupaba la GIF. */
#btVolverBuscar,
#btModBuscar {
  background-image: none !important;
  padding-left: 8px !important;
}

/* "Composición de cartera por activo" — el legacy usa arrowcajaBorde.gif como
   bullet al inicio. Lo reemplazamos por un triángulo CSS verde (sin esquinas crema). */
#cartera .composicion {
  background-image: none !important;
  position: relative;
  padding-left: 22px !important;
}

#cartera .composicion::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #9fcf4f;
}

/* ========================================================================
 * Estadísticas — tabs verticales a la izquierda (224px legacy) + contenido
 * a la derecha que ocupa todo el espacio restante, con scroll horizontal si
 * alguna tabla excede el ancho.
 * ======================================================================== */
#tabsEncuentre {
  display: flex !important;
  align-items: flex-start;
  gap: 20px;
  background-image: none !important;
  position: relative;
  min-height: 400px;
}

/* Tabs: visibles siempre, 224px fijo. Usamos position:sticky para que si el
   contenido a la derecha es muy alto y el usuario scrollea, los tabs queden a mano. */
#tabsEncuentre .tabsLink {
  float: none !important;
  flex: 0 0 224px !important;
  display: block !important;
  visibility: visible !important;
  position: sticky;
  top: 10px;
  align-self: flex-start;
}

#tabsEncuentre .frameContentEstadisticas {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
}

#tabsEncuentre .clear { display: none; }

/* Modo fullwidth — oculta la sidebar de tabs para dar todo el ancho al contenido.
   Se aplica en Información Diaria paso 2 (resultado), igual que el legacy abre
   info-diaria-resultado.html como página standalone. */
#tabsEncuentre.fullwidth-result .tabsLink { display: none !important; }
#tabsEncuentre.fullwidth-result .frameContentEstadisticas { flex: 1 1 100%; }

/* Fondo rayado (backTabsAprenda.gif) y flechas cream en tabsOff/On — los sacamos. */
#tabs,
#tabsAprenda,
#tabsCafci {
  background-image: none !important;
}

.tabsOff,
.tabsOffAprenda,
.tabsOffCafci,
.tabsOffEvaluacion,
.tabsOn,
.tabsOnAprenda,
.tabsOnCafci {
  background-image: none !important;
}

/* Tablas de estadísticas: bordes suaves + padding cómodo cuando tienen muchas cols. */
.frameContentEstadisticas .tablaDatos td,
.frameContentEstadisticas .tablaDatos th {
  padding: 6px 10px;
  white-space: nowrap;
}