/* ═══════════════════════════════════════════════════════════════════════════ guiafondosindexados.com · CSS compartido (chrome, navegación, impresión) --------------------------------------------------------------------------- ⚠ NO CARGAR ESTE ARCHIVO DE FORMA ASÍNCRONA. Tres páginas dibujan gráficos en leyendo canvas.clientWidth en la primera llamada síncrona. Con rel=preload+onload o el truco media="print", clientWidth valdría el ancho por defecto (300px) y los gráficos saldrían deformados hasta que el usuario redimensionara la ventana. Debe ir siempre como normal y bloqueante. ⚠ VERSIONADO EN EL NOMBRE: si editas este archivo, renómbralo a .v2.css y actualiza el de todas las páginas. La cabecera Cache-Control lleva "immutable" con un año de duración: sin renombrar, los visitantes que ya estuvieron seguirían viendo la versión antigua. ═══════════════════════════════════════════════════════════════════════════ */ /* ─── 1. Tokens: cada color del sitio se define UNA sola vez ─────────────── */ :root{ /* neutros de la portada del libro */ --papel:#F7ECE1; --papel2:#FFFCF8; --linea:#E6D9C9; --gris:#6E6559; --tinta:#12233C; --oro:#96630D; --oro-claro:#D9A854; /* marca: navy de la portada */ --verde:#0B2245; --verde-osc:#041C37; /* acento por defecto = marca (lo usan index y las páginas sin data-cat) */ --cat:#0B2245; --cat-dark:#041C37; /* paleta de acentos por herramienta */ --c-interes:#0E7A5F; --cd-interes:#07523F; --c-independencia:#0B7285; --cd-independencia:#0A4E5C; --c-tiempo:#6D4AAE; --cd-tiempo:#4A3080; --c-carteras:#C2660D; --cd-carteras:#8A4A0C; --c-comisiones:#B3261E; --cd-comisiones:#7A1815; --c-fiscalidad:#0F7A6E; --cd-fiscalidad:#0A5A50; --c-plan:#3D4EAB; --cd-plan:#2C3985; --c-checklists:#B0294B; --cd-checklists:#851E3B; --c-arranque:#1D6FA5; --cd-arranque:#0D5580; --c-notas:#334155; --cd-notas:#1E293B; --c-mapa:#0B2245; --cd-mapa:#041C37; --c-faq:#2451A3; --cd-faq:#1A3D7A; --c-biblio:#96591C; --cd-biblio:#6B3D14; --c-actualizaciones:#96630D; --cd-actualizaciones:#6B4709; --c-diferimiento:#A61E64; --cd-diferimiento:#7D1449; --c-rebalanceo:#5A7302; --cd-rebalanceo:#3F5101; --c-dca:#0E5A8A; --cd-dca:#08405F; --c-pensiones:#7A4A21; --cd-pensiones:#573317; --c-ladrillo:#B45309; --cd-ladrillo:#8A3F07; } /* ─── 2. Mapa de temas: elige el acento ────────────── */ /* [data-cat] tiene especificidad (0,2,0) y gana al :root pelado (0,1,0). */ :root[data-cat="interes"] {--cat:var(--c-interes); --cat-dark:var(--cd-interes)} :root[data-cat="independencia"] {--cat:var(--c-independencia); --cat-dark:var(--cd-independencia)} :root[data-cat="tiempo"] {--cat:var(--c-tiempo); --cat-dark:var(--cd-tiempo)} :root[data-cat="carteras"] {--cat:var(--c-carteras); --cat-dark:var(--cd-carteras)} :root[data-cat="comisiones"] {--cat:var(--c-comisiones); --cat-dark:var(--cd-comisiones)} :root[data-cat="fiscalidad"] {--cat:var(--c-fiscalidad); --cat-dark:var(--cd-fiscalidad)} :root[data-cat="plan"] {--cat:var(--c-plan); --cat-dark:var(--cd-plan)} :root[data-cat="checklists"] {--cat:var(--c-checklists); --cat-dark:var(--cd-checklists)} :root[data-cat="arranque"] {--cat:var(--c-arranque); --cat-dark:var(--cd-arranque)} :root[data-cat="notas"] {--cat:var(--c-notas); --cat-dark:var(--cd-notas)} :root[data-cat="mapa"] {--cat:var(--c-mapa); --cat-dark:var(--cd-mapa)} :root[data-cat="faq"] {--cat:var(--c-faq); --cat-dark:var(--cd-faq)} :root[data-cat="biblio"] {--cat:var(--c-biblio); --cat-dark:var(--cd-biblio)} :root[data-cat="actualizaciones"]{--cat:var(--c-actualizaciones);--cat-dark:var(--cd-actualizaciones)} :root[data-cat="diferimiento"] {--cat:var(--c-diferimiento); --cat-dark:var(--cd-diferimiento)} :root[data-cat="rebalanceo"] {--cat:var(--c-rebalanceo); --cat-dark:var(--cd-rebalanceo)} :root[data-cat="dca"] {--cat:var(--c-dca); --cat-dark:var(--cd-dca)} :root[data-cat="pensiones"] {--cat:var(--c-pensiones); --cat-dark:var(--cd-pensiones)} :root[data-cat="ladrillo"] {--cat:var(--c-ladrillo); --cat-dark:var(--cd-ladrillo)} /* El truco de cascada, declarado UNA vez para todo el sitio: recolorea el interior de la página con su acento mientras nav y pie siguen en navy. Antes faltaba en 5 páginas, que habían perdido su color en silencio. */ main{--verde:var(--cat);--verde-osc:var(--cat-dark)} /* ─── 3. Base ────────────────────────────────────────────────────────────── */ *{box-sizing:border-box} html{overflow-x:hidden;scroll-behavior:smooth} /* respeta a quien pide menos movimiento (antes sin guarda) */ @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{margin:0;background:var(--papel);color:var(--tinta);line-height:1.6; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} ::selection{background:color-mix(in srgb,var(--verde),transparent 76%)} a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{ outline:2px solid var(--verde);outline-offset:2px} /* Bug corregido: sobre los paneles navy el contorno navy era invisible. En esos contextos el foco pasa a dorado claro. */ .core a:focus-visible,.idea-banner a:focus-visible,.livetool a:focus-visible, .buybox a:focus-visible,.buybox button:focus-visible, header a:focus-visible,header button:focus-visible{ outline:3px solid #F2D9A0;outline-offset:3px} /* ─── 4. Cabecera de página y franja de acento ───────────────────────────── */ header:not(.hero){position:relative} header:not(.hero)::before{content:"";position:absolute;top:0;left:0;right:0;height:4px; background:var(--cat,transparent);z-index:2} .eyebrow{color:var(--oro-claro);opacity:1;letter-spacing:.24em;text-transform:uppercase; font-size:.68rem;margin:0 0 8px} a.back{display:inline-flex;align-items:center;gap:7px;color:#fff;text-decoration:none; font-size:.84rem;font-weight:600;background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.42);padding:8px 15px;border-radius:100px; margin-bottom:16px;transition:background .15s,transform .15s} a.back:hover{background:rgba(255,255,255,.34);transform:translateX(-3px)} /* ─── 5. Navegación (.mnav) ──────────────────────────────────────────────── */ .mnav{position:sticky;top:0;z-index:200;background:rgba(255,253,248,.96); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid #e6e0d3; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif} .mnav-in{max-width:1020px;margin:0 auto;padding:0 22px;height:64px;display:flex;align-items:center;gap:18px} .mnav-brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:#15222e; font-family:Georgia,serif;font-weight:700;font-size:1.02rem;white-space:nowrap} .mnav-brand svg{flex:none} .mnav-burger{display:none;margin-left:auto;width:42px;height:36px;border:1px solid #e6e0d3; border-radius:9px;background:#fff;cursor:pointer;flex-direction:column;justify-content:center; align-items:center;gap:4px} .mnav-burger span{display:block;width:18px;height:2px;background:#15222e;border-radius:2px;transition:.2s} .mnav-links{margin-left:auto;display:flex;align-items:center;gap:3px} .mnav-links>a,.nd>summary{display:inline-flex;align-items:center;gap:7px;text-decoration:none; color:#57616F;font-size:.95rem;font-weight:600;padding:10px 15px;border-radius:11px;cursor:pointer; list-style:none;white-space:nowrap;transition:background .15s,color .15s} .nd>summary::-webkit-details-marker{display:none} .nd>summary::after{content:"\25BE";font-size:.6rem;color:#9a998f} .mnav-links>a:hover,.nd>summary:hover{background:#F4EFE4;color:#2B3A4A} .mnav-links>a.on,.nd.on>summary{color:#1B2C42;background:#F0E8DA;box-shadow:inset 0 0 0 1px rgba(184,134,47,.28)} .nd{position:relative} .nd-pop{position:absolute;left:0;top:calc(100% + 8px);background:#fff;border:1px solid #e6e0d3; border-radius:13px;box-shadow:0 18px 44px rgba(20,30,28,.16);padding:7px;min-width:272px;z-index:210} .nd-pop a{display:flex;align-items:flex-start;gap:10px;padding:8px 11px;border-radius:8px; text-decoration:none;color:#15222e;font-size:.86rem;font-weight:500;line-height:1.3} .nd-pop a:hover{background:#f3efe4} .nd-pop a[aria-current]{background:#f3efe4;font-weight:700} .nd-pop small{display:block;color:#9a998f;font-size:.72rem;font-weight:400} /* Puntos de color del menú: antes eran 195 hexadecimales repetidos en línea */ .nd-pop .dot{width:10px;height:10px;border-radius:3px;flex:none;margin-top:4px;background:var(--gris)} .dot.interes{background:var(--c-interes)} .dot.independencia{background:var(--c-independencia)} .dot.tiempo{background:var(--c-tiempo)} .dot.carteras{background:var(--c-carteras)} .dot.comisiones{background:var(--c-comisiones)} .dot.fiscalidad{background:var(--c-fiscalidad)} .dot.plan{background:var(--c-plan)} .dot.checklists{background:var(--c-checklists)} .dot.arranque{background:var(--c-arranque)} .dot.notas{background:var(--c-notas)} .dot.mapa{background:var(--c-mapa)} .dot.faq{background:var(--c-faq)} .dot.biblio{background:var(--c-biblio)} .dot.diferimiento{background:var(--c-diferimiento)} .dot.rebalanceo{background:var(--c-rebalanceo)} .dot.dca{background:var(--c-dca)} .dot.pensiones{background:var(--c-pensiones)} .dot.ladrillo{background:var(--c-ladrillo)} /* Selector de idioma ES/EN: solo el idioma activo muestra su bandera */ .mnav-lang{margin-left:8px;display:inline-flex;align-items:center;gap:2px;flex:none; background:#FBF7EF;border:1px solid var(--linea);border-radius:100px;padding:3px} .mnav-lang a{display:inline-flex;align-items:center;gap:6px;text-decoration:none; font-size:.8rem;font-weight:700;letter-spacing:.03em;color:#8A8578;border-radius:100px; padding:6px 12px;white-space:nowrap;transition:background .15s,color .15s} .mnav-lang a:hover{color:#2B3A4A} .mnav-lang a[aria-current="true"]{color:#1B2C42;background:#fff;cursor:default; box-shadow:0 1px 3px rgba(20,30,28,.12),inset 0 0 0 1px rgba(184,134,47,.3)} .mnav-lang .flag{display:block;width:18px;height:13px;border-radius:2px;flex:none; box-shadow:0 0 0 1px rgba(0,0,0,.14)} @media (max-width:820px){ .mnav-burger{display:flex} .mnav-links{position:fixed;top:64px;left:0;right:0;margin:0;flex-direction:column;align-items:stretch; gap:2px;background:#fffdf8;border-bottom:1px solid #e6e0d3;padding:10px 14px 16px; box-shadow:0 18px 30px rgba(20,30,28,.14);max-height:calc(100vh - 64px);overflow-y:auto; transform:translateY(-8px);opacity:0;visibility:hidden;transition:.18s} .mnav-toggle:checked~.mnav-links{transform:none;opacity:1;visibility:visible} .mnav-links>a,.nd>summary{padding:12px;font-size:.98rem;width:100%} .nd{position:static} .nd>summary::after{margin-left:auto} .nd-pop{position:static;box-shadow:none;border:none;border-radius:0;padding:2px 0 8px 14px;min-width:0} .mnav-toggle:checked~.mnav-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)} .mnav-toggle:checked~.mnav-burger span:nth-child(2){opacity:0} .mnav-toggle:checked~.mnav-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} .mnav-lang{margin-left:auto;margin-right:8px} } /* ─── 6. Paginador entre herramientas ────────────────────────────────────── */ .cdh-pager{display:flex;gap:14px;margin-top:36px} .cdh-pager .pg{flex:1;background:var(--papel2);border:1px solid var(--linea);border-radius:14px; padding:13px 18px;text-decoration:none;color:var(--tinta); transition:border-color .15s,transform .15s,box-shadow .15s} .cdh-pager .pg:hover{border-color:var(--verde);transform:translateY(-2px); box-shadow:0 8px 20px rgba(20,30,28,.08)} .cdh-pager .pg.next{text-align:right} .cdh-pager .pg span{display:block;font-size:.7rem;color:var(--gris);text-transform:uppercase; letter-spacing:.1em;font-weight:700} .cdh-pager .pg b{font-family:Georgia,serif;font-size:.97rem;color:var(--verde-osc);font-weight:600} /* ─── 7. Pie ─────────────────────────────────────────────────────────────── */ footer.cdh-foot{margin-top:0;border-top:1px solid var(--linea);background:var(--papel2)} .cdh-foot-in{max-width:1020px;margin:0 auto;padding:30px 20px 36px;text-align:center; color:var(--gris);font-size:.83rem} .cdh-foot-in .fb{font-family:Georgia,serif;font-weight:700;letter-spacing:.22em; text-transform:uppercase;font-size:.76rem;color:var(--tinta);margin-bottom:6px} /* Contacto en el pie */ .foot-mail{display:inline-flex;align-items:center;gap:7px;margin:14px 0 0;font-size:.84rem; font-weight:600;text-decoration:none;color:var(--verde-osc);background:#F4EFE4; border:1px solid var(--linea);border-radius:100px;padding:8px 16px; transition:background .15s,border-color .15s} .foot-mail:hover{background:#EDE4D3;border-color:var(--oro)} .foot-mail svg{width:15px;height:15px;stroke:var(--oro);fill:none;stroke-width:2; stroke-linecap:round;stroke-linejoin:round;flex:none} .cdh-foot-in .fine{font-size:.75rem;max-width:640px;margin:10px auto 0;opacity:.85} /* ─── 8. Tablas con desplazamiento horizontal ────────────────────────────── */ .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} /* ─── 9. Botones de acción de cabecera (imprimir / compartir) ────────────── */ .hdr-actions{display:flex;gap:12px;flex-wrap:wrap} .print-btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:700; font-size:.86rem;background:var(--oro-claro);color:#2b1c04;border:none;border-radius:100px; padding:11px 20px;box-shadow:0 8px 20px rgba(4,28,55,.22);cursor:pointer;font-family:inherit; margin-top:16px;transition:transform .15s,box-shadow .15s} .print-btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(4,28,55,.3)} .print-btn svg{width:17px;height:17px;stroke:#2b1c04;fill:none;stroke-width:2; stroke-linecap:round;stroke-linejoin:round;flex:none} .share-btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:700; font-size:.86rem;background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.42); border-radius:100px;padding:11px 20px;cursor:pointer;font-family:inherit;margin-top:16px; transition:background .15s,transform .15s} .share-btn:hover{background:rgba(255,255,255,.26);transform:translateY(-2px)} .share-btn svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2; stroke-linecap:round;stroke-linejoin:round;flex:none} /*