/* FiscalDoctor — identidad visual corporativa (Fase 1 de Marca) */ :root { --tp-cobalt: #0F172A; --tp-emerald: #10B981; --tp-electric: #2563EB; --tp-bg: #F8FAFC; --tp-ink: #0F172A; --tp-muted: #64748B; --tp-card: #FFFFFF; --tp-line: #E2E8F0; } html { color-scheme: dark; } /* MT 8.3: fondo base legacy #020617 eliminado (vive en crítico inline + L0 MT 7.1). */ /* Cabecera corporativa */ .tp-header { background: var(--tp-cobalt) !important; position: relative; overflow: hidden; isolation: isolate; } .tp-collage { position: absolute; inset: 0; z-index: 0; background: #0F172A; } .tp-collage img { position: absolute; top: 0; height: 100%; object-fit: cover; filter: saturate(1) contrast(1.03); } .tp-collage img:nth-child(1) { left: 0; width: 42%; -webkit-mask-image: linear-gradient(to right, #000 72%, transparent 100%); mask-image: linear-gradient(to right, #000 72%, transparent 100%); } .tp-collage img:nth-child(2) { left: 29%; width: 42%; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%); } .tp-collage img:nth-child(3) { right: 0; width: 42%; -webkit-mask-image: linear-gradient(to left, #000 72%, transparent 100%); mask-image: linear-gradient(to left, #000 72%, transparent 100%); } .tp-collage-overlay { position: absolute; inset: 0; z-index: 1; background: radial-gradient(120% 95% at 50% 15%, transparent 55%, rgba(2,6,23,.42) 100%), linear-gradient(98deg, rgba(15,23,42,.72) 0%, rgba(15,23,42,.5) 30%, rgba(15,23,42,.28) 55%, rgba(15,23,42,.48) 80%, rgba(15,23,42,.72) 100%), linear-gradient(0deg, rgba(2,6,23,.35) 0%, rgba(2,6,23,0) 35%); } .tp-header-content { position: relative; z-index: 2; min-height: 210px; } .tp-header-content h1, .tp-header-content p, .tp-header-content button, .tp-header-content span { text-shadow: 0 1px 8px rgba(2,6,23,.9), 0 0 2px rgba(2,6,23,.9); } .tp-logo { width: 3.25rem; height: 3.25rem; border-radius: 1rem; background: linear-gradient(135deg, var(--tp-electric), var(--tp-emerald)); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(37,99,235,.35); flex-shrink: 0; } .tp-logo svg { width: 2.1rem; height: 2.1rem; } .tp-wordmark { font-weight: 800; letter-spacing: -0.02em; } .tp-wordmark em { font-style: normal; color: var(--tp-emerald); } .tp-tagline { color: #CBD5E1; } /* Botones corporativos */ .tp-btn-primary { background: var(--tp-electric) !important; border-color: transparent !important; color: #fff !important; }@media (any-hover: hover) { .tp-btn-primary:hover { filter: brightness(1.08); } } .tp-btn-emerald { background: #047857 !important; border-color: #047857 !important; color: #fff !important; }@media (any-hover: hover) { .tp-btn-emerald:hover { filter: brightness(1.12); } } /* Tarjeta de recomendación familiar en verde legible con texto blanco */ #famRecomiendaCardEl.bg-emerald-700 { background-color: #047857 !important; } .tp-btn-dark { background: var(--tp-cobalt) !important; border-color: var(--tp-cobalt) !important; color: #fff !important; } /* MT 8.2: reglas tab-active electricas + thumb electrico eliminadas (muertas por MT 6.x/MT 7.1/FIX posteriores). */ /* MT 8.2: acentos perimetrales legacy eliminados (muertos por cero-bordes MT 7.1); ahorroCardEl hereda L1 del remap. */ /* Modal de pago / B2B */ .tp-b2b-highlight { background: rgba(16,185,129,.08) !important; } /* FiscalDoctor forced-dark: replica los valores dark: para que la app se vea igual con sistema claro u oscuro (sin tocar tailwind.config) */ /* MT 8.2: remaps slate->azulados eliminados (muertos por remap neutro MT 7.1). */ body.tp-force-dark .bg-blue-50 { background-color: rgba(30,58,138,.25) !important; } body.tp-force-dark .bg-amber-50 { background-color: rgba(120,53,15,.25) !important; } body.tp-force-dark .bg-emerald-50 { background-color: rgba(6,78,59,.25) !important; } /* MT 8.2: nav + tabs legacy eliminados (muertos por MT 7.1/MT 2.2/FIX). */ body.tp-force-dark .text-slate-900 { color: #FFFFFF !important; } body.tp-force-dark .text-slate-800 { color: #F1F5F9 !important; } body.tp-force-dark .text-slate-700 { color: #E2E8F0 !important; } body.tp-force-dark .text-slate-600 { color: #CBD5E1 !important; } body.tp-force-dark .text-slate-500 { color: #94A3B8 !important; } body.tp-force-dark .text-slate-400 { color: #94A3B8 !important; } body.tp-force-dark .text-emerald-600 { color: #34D399 !important; } body.tp-force-dark .text-red-600 { color: #F87171 !important; } /* MT 8.2: bordes/inputs/ad-slots legacy eliminados (muertos por cero-bordes MT 7.1 y tactiles MT 7.2). */ /* Slots publi: tono neutro corporativo */ [data-ad-slot] { border-color: var(--tp-line); } /* TAREA 2 — Rediseño SaaS FinTech de vanguardia (Stripe/Linear/Vercel). * Paleta sobria: navy #0f172a, royal #1e3a8a, mint #10b981, ámbar #f59e0b, coral #ef4444. */ :root { --tp-navy: #0F172A; --tp-royal: #1E3A8A; --tp-mint: #10B981; --tp-amber: #F59E0B; --tp-coral: #EF4444; --tp-ring: rgba(37, 99, 235, .28); --tp-shadow-sm: 0 1px 2px rgba(2, 6, 23, .5); --tp-shadow-md: 0 8px 24px -12px rgba(2, 6, 23, .65); --tp-shadow-lift: 0 12px 32px -12px rgba(37, 99, 235, .5); } /* Tipografía ultra-limpia: jerarquía y métricas tabulares */ body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .module-panel h2 { letter-spacing: -0.02em; font-weight: 800; } .module-panel strong { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .module-panel .text-xs { line-height: 1.5; } label.block { letter-spacing: .002em; } /* Tarjetas elevadas: borde sutil 1px + sombras suaves + radio consistente */ /* MT 8.3: borde de módulo legacy eliminado (cero-bordes MT 7.1). */ .tp-cuota-card, #irpfResultadosEl { box-shadow: var(--tp-shadow-sm) !important; } /* Navegación con blur sutil estilo Linear */ /* MT 8.2: nav glass azulado legacy eliminado (muerto por MT 7.1 L0). */ /* MT 8.3: borde de header legacy eliminado (hairline MT 6.1 + cero-bordes MT 7.1). */ /* Micro-interacciones 150ms: botones, pestañas, tarjetas y campos */ .tp-btn-primary, .tp-btn-emerald, .tp-btn-dark, .tab-btn, .module-panel button, .module-panel a, #aiFabBtn { transition: background-color 150ms ease, filter 150ms ease, transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease, opacity 150ms ease; }@media (any-hover: hover) { .tp-btn-primary:hover, .tp-btn-emerald:hover { transform: translateY(-1px); box-shadow: var(--tp-shadow-lift); filter: brightness(1.07); } } .tp-btn-primary:active, .tp-btn-emerald:active, .tp-btn-dark:active { transform: translateY(0); }@media (any-hover: hover) { .tab-btn:hover { transform: translateY(-1px); } } /* MT 8.2: foco TAREA 2 eliminado (muerto por foco neutro MT 7.2 con !important). */ input, select, textarea { transition: border-color 150ms ease, box-shadow 150ms ease; } input:focus, select:focus, textarea:focus { border-color: transparent !important; box-shadow: 0 0 0 3px rgba(255, 255, 255, .22); outline: none; } /* Badges de estado: relieve suave y texto siempre legible */ #riskBadgeEl, #b2bEstadoBadge, #proStatusEl, #headerYearEl { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), var(--tp-shadow-sm); } /* Alineación responsive impecable */ main { max-width: 1600px; margin-inline: auto; } @media (max-width: 640px) { .module-panel { padding: 1rem !important; border-radius: 1rem !important; } .tp-header-content { min-height: 0 !important; padding-block: 1rem !important; } } @media (prefers-reduced-motion: reduce) { .module-panel:not([hidden]) { animation: none; } .tp-btn-primary, .tp-btn-emerald, .tp-btn-dark, .tab-btn, .module-panel button, .module-panel a, #aiFabBtn { transition: none; } } /* FASE OptimizationCard v1.2.0-opt3 + v1.3.0-opt4 (disparo inteligente). (IRPF + Nómina + RETA). REGLAS ROBUSTAS CLARO/OSCURO: fondo, texto, padding, radio y acento son EXPLÍCITOS en el contenedor y en cada sub-elemento (.opt-title/.opt-body/.opt-monto/.opt-nota), sin depender de las utilidades Tailwind dark: del marcado (el CDN resuelve dark: por media del SO y la app nunca fija .dark, luego heredar de ellas rompía el contraste en SO oscuro: texto blanco sobre fondo blanco). La tarjeta es determinista: idéntica en modo claro y oscuro. Alias .opt-card-* exigidos por auditoría (mismas declaraciones que .opt-*). */ .opt-card { border-left: 4px solid #0d9488; border-radius: 0.75rem; padding: 0.75rem 0.9rem; background: #ffffff !important; color: #0f172a !important; border-top: 1px solid #e2e8f0; border-right: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; } /* !important de ámbito: el compilado Tailwind del preview/producción resuelve dark: por media del SO y su hoja no es derrotable por especificidad normal; el contrato del componente exige colores deterministas idénticos en modo claro y oscuro. */ .opt-card .opt-title { color: #0f172a !important; } .opt-card .opt-body { color: #475569 !important; } .opt-card .opt-monto { color: #047857 !important; } .opt-card .opt-nota { color: #94a3b8 !important; } .dark .opt-card { background: #0f172a !important; color: #f1f5f9 !important; border-top-color: #334155; border-right-color: #334155; border-bottom-color: #334155; } .dark .opt-card .opt-title { color: #f1f5f9 !important; } .dark .opt-card .opt-body { color: #cbd5e1 !important; } .dark .opt-card .opt-monto { color: #34d399 !important; } .dark .opt-card .opt-nota { color: #64748b !important; } .opt-badge, .opt-card-badge { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; background: #047857; color: #ffffff; border-radius: 9999px; padding: 0.15rem 0.55rem; line-height: 1.5; } .opt-close, .opt-card-close { flex-shrink: 0; width: 1.6rem; height: 1.6rem; border-radius: 9999px; font-size: 0.8rem; line-height: 1; color: #64748b; border: 1px solid #cbd5e1; background: transparent; cursor: pointer; }@media (any-hover: hover) { .opt-close:hover, .opt-card-close:hover { color: #0f172a; border-color: #94a3b8; } } .dark .opt-close, .dark .opt-card-close { color: #94a3b8; border-color: #475569; }@media (any-hover: hover) { .dark .opt-close:hover, .dark .opt-card-close:hover { color: #f1f5f9; border-color: #64748b; } } .opt-cta, .opt-card-cta { display: inline-block; margin-top: 0.5rem; font-size: 0.8rem; font-weight: 700; color: #ffffff; background: #047857; border-radius: 0.6rem; padding: 0.45rem 0.9rem; text-decoration: none; }@media (any-hover: hover) { .opt-cta:hover, .opt-card-cta:hover { background: #065f46; } } /* REDISEÑO PREMIUM FINTECH ([ARQUITECTO] 2026-10-18): cabecera de tarjeta nativa — badge de categoría + sello de verificación, fila de marca con isotipo, micro-características con ✓ verde y pie oficial. Colores explícitos (mismo contrato determinista claro/oscuro que .opt-*). */ .aff-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .aff-badges { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } .aff-badge-cat { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; background: #047857; color: #ffffff; border-radius: 9999px; padding: 0.15rem 0.55rem; line-height: 1.5; } .aff-seal { display: inline-block; font-size: 10px; font-weight: 800; color: #047857; background: #ecfdf5; border: 1px solid #047857; border-radius: 9999px; padding: 0.15rem 0.5rem; line-height: 1.5; white-space: nowrap; } .aff-brandrow { display: flex; align-items: center; gap: 10px; margin-top: 0.6rem; } .aff-iso { width: 34px; height: 34px; min-width: 34px; border-radius: 50%; color: #ffffff; font-weight: 800; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; } .aff-brandtxt { display: inline-flex; flex-direction: column; line-height: 1.25; } .aff-brandname { font-weight: 800; font-size: 13px; color: #0f172a !important; } .aff-brandnet { font-size: 11px; color: #64748b !important; } .aff-feats { list-style: none; margin: 0.55rem 0 0; padding: 0; } .aff-feats li { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; color: #334155 !important; margin-top: 4px; } .aff-tick { color: #047857; font-weight: 800; } .aff-fine { font-size: 11px; color: #64748b !important; margin-top: 6px; } .dark .aff-brandname { color: #f1f5f9 !important; } .dark .aff-brandnet { color: #94a3b8 !important; } .dark .aff-feats li { color: #cbd5e1 !important; } .dark .aff-fine { color: #64748b !important; } /* REDISEÑO GRÁFICO FINO MINIMALIST FINTECH 2026 ([ARQUITECTO] 2026-10-18, * OptimizationCard v1.6.0-fine1): avatar 48x48 rounded-xl con borde * micro-fino y shadow-sm; eyebrow uppercase; marca slate-900 bold base; * feats con icono SVG; promo en píldora ámbar; tarjeta blanca rounded-2xl * p-5 con hover sutil; CTA premium slate-900. Selectores .opt-card.aff-* * (mayor especificidad que .opt-*) para imponerse sin !important extra. * Tipografía Inter/system-ui heredada de la pila de la app. */ .opt-card.aff-premium { background: #ffffff; border: 1px solid #e2e8f0; border-left: 1px solid #e2e8f0; border-radius: 16px; padding: 1.25rem; font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; transition: border-color 200ms ease, box-shadow 200ms ease; }@media (any-hover: hover) { .opt-card.aff-premium:hover { border-color: #cbd5e1; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08); } } .aff-avatar { width: 48px; height: 48px; min-width: 48px; border-radius: 12px; border: 1px solid #e2e8f0; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); color: #ffffff; font-weight: 800; font-size: 20px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .aff-brandrow { gap: 12px; } .aff-brandname { font-weight: 700; font-size: 16px; line-height: 1.3; color: #0f172a !important; } .aff-eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #94a3b8 !important; } .aff-seal { display: inline-flex; align-items: center; gap: 4px; } .aff-feats { margin-top: 0.75rem; } .aff-feats li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; } .aff-feats svg { flex-shrink: 0; margin-top: 1px; } .aff-cta.opt-cta, .aff-cta.opt-card-cta { background: #0f172a; color: #ffffff; font-weight: 500; font-size: 12px; padding: 0.625rem 1rem; border-radius: 12px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12); display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; margin-top: 0.75rem; transition: background-color 200ms ease; }@media (any-hover: hover) { .aff-cta.opt-cta:hover, .aff-cta.opt-card-cta:hover { background: #1e293b; color: #ffffff; } } .aff-promo { display: inline-block; font-size: 11px; font-weight: 700; color: #92400e; background: #fffbeb; border: 1px solid rgba(252, 211, 77, 0.8); border-radius: 9999px; padding: 0.125rem 0.625rem; margin-top: 0.5rem; white-space: nowrap; } .opt-close svg, .opt-card-close svg { display: block; } .opt-close.opt-card-close { display: inline-flex; align-items: center; justify-content: center; } .opt-pill svg { flex-shrink: 0; } .opt-pill-toggle { display: inline-flex; align-items: center; gap: 4px; } .dark .opt-card.aff-premium { background: #0f172a; border-color: #1e293b; }@media (any-hover: hover) { .dark .opt-card.aff-premium:hover { border-color: #334155; } } .dark .aff-avatar { border-color: #334155; } /* MT 8.2: duplicado .dark .aff-brandname eliminado (idéntico al de la sección premium anterior). */ /* REDISEÑO FINO PÍLDORA MINIMALIST FINTECH 2026 ([ARQUITECTO] 2026-10-18, * Micro-tarea 1): barra/píldora interactiva — fondo blanco (#FFFFFF) o slate * suave (#F8FAFC en hover), borde micro-fino 1px #E2E8F0, rounded-full, * shadow-sm con hover shadow-md y transición 200ms, tipografía * Inter/system-ui, sparkles 16px esmeralda, badge suave de ahorro estimado * en píldora, acción Ver/Ocultar con chevron SVG y micro-rotación CSS por * aria-expanded. Cero emojis. Contrato determinista claro/oscuro. */ .opt-pill, .opt-card-pill { display: inline-flex; align-items: center; gap: 0.5rem; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 12px; font-weight: 600; line-height: 1.4; color: #0f172a !important; background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 9999px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); padding: 0.45rem 0.9rem; cursor: pointer; text-align: left; transition: box-shadow 200ms ease, border-color 200ms ease, background-color 200ms ease; }@media (any-hover: hover) { .opt-pill:hover, .opt-card-pill:hover { background: #f8fafc !important; border-color: #cbd5e1 !important; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.10); } } .opt-pill:focus-visible, .opt-card-pill:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; } .aff-pill-label { font-size: 13px; font-weight: 700; color: #0f172a !important; overflow: hidden; text-overflow: ellipsis; } .aff-pill-save { font-size: 11px; font-weight: 700; color: #047857 !important; background: #ecfdf5 !important; border: 1px solid #a7f3d0; border-radius: 9999px; padding: 0.1rem 0.5rem; white-space: nowrap; } .aff-pill-save[hidden] { display: none; } .opt-pill-toggle.aff-pill-action, .aff-pill-action { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; font-size: 12px; font-weight: 600; color: #475569 !important; text-decoration: none; } .aff-pill-chev { transition: transform 200ms ease; } .module-panel .opt-pill, .module-panel .opt-card-pill, .module-panel .stopt-pill, .module-panel .s-optPill { transition: box-shadow 200ms ease, border-color 200ms ease, background-color 200ms ease; } .opt-pill[aria-expanded="true"] .aff-pill-chev, .opt-card-pill[aria-expanded="true"] .aff-pill-chev { transform: rotate(180deg); } .dark .opt-pill, .dark .opt-card-pill { color: #f1f5f9 !important; background: #0f172a !important; border-color: #334155 !important; }@media (any-hover: hover) { .dark .opt-pill:hover, .dark .opt-card-pill:hover { background: #1e293b !important; border-color: #475569 !important; } } .dark .aff-pill-label { color: #f1f5f9 !important; } .dark .aff-pill-save { color: #6ee7b7 !important; background: rgba(6, 78, 59, 0.4) !important; border-color: #065f46; } .dark .opt-pill-toggle.aff-pill-action, .dark .aff-pill-action { color: #cbd5e1 !important; } @media (prefers-reduced-motion: reduce) { .opt-pill, .opt-card-pill { transition: none; } .aff-pill-chev { transition: none; } } /* FASE OptimizationCard v1.3.0-opt4: aparición por disparo inteligente. Solo los nodos recién insertados llevan .opt-show (el motor la añade únicamente en la transición oculto→visible); los re-pintados por cada tecla no re-animan. Transform+opacidad: sin coste de layout (CLS=0). */ @keyframes optFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .opt-card.opt-show { animation: optFadeIn 0.28s ease-out; } .opt-card.opt-shown { opacity: 1; } @media (prefers-reduced-motion: reduce) { .opt-card.opt-show { animation: none; } } /* MICRO-TAREA 2 — Minimalist Fintech 2026: navbar glass, hero y selector de módulos. Convive con body.tp-force-dark (tema oscuro fijo de la app): las utilidades literales del marcado (backdrop-blur-md bg-white/80, bg-slate-100 p-1.5 rounded-2xl, bg-white text-slate-900 font-semibold shadow-sm rounded-xl px-5 py-2.5 transition-all duration-200, text-slate-600) se refuerzan aquí para que el control segmentado y la navbar se vean según diseño. */ .tp-header.tp-navbar-fine { background: rgba(15,23,42,.8) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.08); overflow: visible; } body.tp-force-dark .tp-header.tp-navbar-fine { background: rgba(15,23,42,.8) !important; } .tp-navbar-fine .tp-header-content { min-height: 0; } .tp-navbar-fine .tp-header-content p, .tp-navbar-fine .tp-header-content button, .tp-navbar-fine .tp-header-content span, .tp-navbar-fine .tp-header-content div { text-shadow: none; } .tp-navbar-fine .tp-wordmark { color: #F8FAFC; } .tp-navbar-fine .tp-wordmark em { color: #34D399; } .tp-navbar-fine .tp-tagline { color: #94A3B8; } .tp-navbar-fine .tp-head-pill { box-shadow: 0 1px 2px rgba(2,6,23,.06); } /* MT 8.3: head-pill slate legacy eliminada (muerta por guard neutro MT 7.1 posterior). */ body.tp-force-dark .tp-navbar-fine #proStatusEl.bg-blue-600 { background-color: #2563EB !important; border-color: transparent !important; color: #FFFFFF !important; } body.tp-force-dark .tp-navbar-fine #normativaPillEl { background-color: rgba(6,78,59,.5) !important; border-color: rgba(6,95,70,.5) !important; color: #34D399 !important; } /* MT 8.2: tabs slate-800 legacy eliminadas (muertas por MT 2.2 posterior + FIX neutro). */ body.tp-force-dark #tabsCtn .tab-btn:not(.tab-active) { background-color: transparent !important; color: #94A3B8 !important; }@media (any-hover: hover) { body.tp-force-dark #tabsCtn .tab-btn:not(.tab-active):hover { color: #E2E8F0 !important; filter: none; } } #heroEl h1 { letter-spacing: -0.02em; } /* MICRO-TAREA 3 — Minimalist Fintech 2026: formularios e inputs premium. Las clases literales del marcado (bg-slate-50/80, rounded-xl px-4 py-3, focus:ring-2, uppercase tracking-wider, tarjetas bg-white rounded-2xl border-slate-200/80 p-6 shadow-sm) conviven con body.tp-force-dark (tema oscuro fijo de la app): estos guards garantizan contraste AA en ambos mundos sin tocar el marcado. */ /* MT 8.3: tarjetas de formulario slate legacy eliminadas (muertas por MT 4.1/MT 7.x L1). */ body.tp-force-dark #irpfFormEl input, body.tp-force-dark #sueldoFormEl input, body.tp-force-dark #retaFormEl input, body.tp-force-dark #irpfFormEl select, body.tp-force-dark #sueldoFormEl select, body.tp-force-dark #retaFormEl select { background-color: rgba(30,41,59,.8) !important; color: #F1F5F9 !important; border-color: #475569 !important; } body.tp-force-dark #irpfFormEl input:focus, body.tp-force-dark #sueldoFormEl input:focus, body.tp-force-dark #retaFormEl input:focus, body.tp-force-dark #irpfFormEl select:focus, body.tp-force-dark #sueldoFormEl select:focus, body.tp-force-dark #retaFormEl select:focus { background-color: #0F172A !important; border-color: #60A5FA !important; box-shadow: 0 0 0 3px var(--tp-ring); } #irpfFormEl input, #sueldoFormEl input, #retaFormEl input, #irpfFormEl select, #sueldoFormEl select, #retaFormEl select { border-radius: 12px; } /* MICRO-TAREA 4 — Minimalist Fintech 2026: zona de resultados, KPIs y cifras ancla. Hero-cards (bg-slate-900 p-6 shadow-md o blancas elevadas bg-white rounded-2xl border-slate-200/80 p-6 shadow-sm), cifras en text-3xl extrabold tabular-nums y pildoras capsula bg-slate-100 slate-800. Solo clases aditivas: ningun ID de resultados ni de la pildora de optimizacion cambia. Guards tp-force-dark para contraste AA en ambos mundos. */ #irpfResultadosEl .text-3xl, #retaCuotaEl, #activoCuotaEl, #netoOptEl, #ahorroAnualEl, #infTotalEl { font-variant-numeric: tabular-nums; letter-spacing: -0.025em; } /* MT 8.3: resultados slate + badge claro legacy eliminados (muertos por MT 3.1/MT 7.x). */ /* FASE 1 MT 1.1 — Sistema de tokens OKLCH + estilos base Fintech Dark. Tokens semanticos en OKLCH (perceptual, gama amplia) para superficies, texto y acentos, con equivalencia hex documentada. No alteran el aspecto actual por si solos: solo exponen variables y clases base para las fases siguientes. Conviven con las variables --tp-* existentes. */ :root { --canvas-bg: oklch(0.12 0.025 255); /* #080C14 */ --card-bg: oklch(0.18 0.030 255); /* #0F172A */ --card-bg-hover: oklch(0.23 0.035 255); /* #1E293B */ --border-subtle: oklch(0.28 0.020 255 / 0.4); --text-main: oklch(0.98 0.005 240); /* #F8FAFC */ --text-muted: oklch(0.65 0.015 240); /* #94A3B8 */ --accent-emerald: oklch(0.72 0.200 150); /* #00E676 */ --accent-blue: oklch(0.60 0.210 250); /* #3B82F6 */ } .fintech-hero-card { background-color: var(--card-bg); border: 1px solid var(--border-subtle); border-radius: 16px; } .tabular-nums { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* FASE 3 MT 3.1 — Hero-card de resultados y cifras ancla (Fintech Dark 2026). a) .fintech-hero-card ya existe (MT 1.1); aqui se garantiza en el mundo tp-force-dark con los valores de la especificacion (slate-900 #0F172A, borde slate-800 #1E293B) aunque otra cascada intente pisarlos. b) #resultadoFinalEl escultorica: las clases literales del marcado y de la asignacion JS aportan text-4xl lg:text-5xl; este guard fija tnum y tracking. c) Badges res-badge a capsula dark: la regla MT4 (clara) queda anulada por esta posterior de igual especificidad (ultima gana): slate-800 #1E293B, texto slate-200 #E2E8F0, borde slate-700/60. d) ACCENT SAVE: #ahorroAnualEl en verde esmeralda neon #00E676 (token --accent-emerald). Va por CSS y no como clase text-[#00E676] porque los corchetes romperian el parser Perchance. La tarjeta #ahorroCardEl es #0F172A en ambos mundos, luego el acento vale en claro y oscuro. */ /* MT 8.3: hero-card slate legacy eliminada (muerta por MT 7.2 L1). */ #resultadoFinalEl { font-variant-numeric: tabular-nums; letter-spacing: -0.025em; } body.tp-force-dark .res-badge { background-color: #1E293B !important; color: #E2E8F0 !important; border: 1px solid rgba(51,65,85,.6) !important; border-radius: 9999px !important; } #ahorroAnualEl { color: #00E676 !important; } body.tp-force-dark #ahorroAnualEl { color: #00E676 !important; } /* FASE 4 MT 4.1 — Inputs tactiles y formularios (Fintech Dark 2026). Tarjetas contenedoras bg-slate-900/90 + borde slate-800 + shadow-md; controles tactiles bg slate-800/60 (hover slate-800, focus slate-900), texto blanco, borde slate-700/80, foco con anillo blue-500/50; etiquetas en mayusculas slate-400 (clases literales del marcado). Estas reglas van DESPUES de la seccion MICRO-TAREA 3 y la anulan por orden (igual especificidad, ultima gana): el mundo tp-force-dark fijo de la app queda con los valores exactos de la especificacion. */ body.tp-force-dark #irpfFormEl, body.tp-force-dark #sueldoFormEl, body.tp-force-dark #retaFormEl { background-color: rgba(15,23,42,.9) !important; border-color: #1E293B !important; } body.tp-force-dark #irpfFormEl input, body.tp-force-dark #sueldoFormEl input, body.tp-force-dark #retaFormEl input, body.tp-force-dark #irpfFormEl select, body.tp-force-dark #sueldoFormEl select, body.tp-force-dark #retaFormEl select { background-color: rgba(30,41,59,.6) !important; color: #FFFFFF !important; border-color: rgba(51,65,85,.8) !important; }@media (any-hover: hover) { body.tp-force-dark #irpfFormEl input:hover, body.tp-force-dark #sueldoFormEl input:hover, body.tp-force-dark #retaFormEl input:hover, body.tp-force-dark #irpfFormEl select:hover, body.tp-force-dark #sueldoFormEl select:hover, body.tp-force-dark #retaFormEl select:hover { background-color: #1E293B !important; } } body.tp-force-dark #irpfFormEl input:focus, body.tp-force-dark #sueldoFormEl input:focus, body.tp-force-dark #retaFormEl input:focus, body.tp-force-dark #irpfFormEl select:focus, body.tp-force-dark #sueldoFormEl select:focus, body.tp-force-dark #retaFormEl select:focus { background-color: #0F172A !important; border-color: #3B82F6 !important; box-shadow: 0 0 0 3px rgba(59,130,246,.5); } /* FASE 4 MT 4.2 — Divulgacion progresiva y acordeones interactivos (Fintech Dark 2026). Contenedores .fintech-accordion (Slate bg-slate-900/60 + borde slate-800); cabeceras con micro-badge y chevron SVG que rota 180 grados al desplegar (clases literales transition-transform duration-200 + refuerzo CSS); paneles colapsados con .hidden. Solo aditivo: ningun ID interno cambia. */ body.tp-force-dark .fintech-accordion { background-color: rgba(15,23,42,.6) !important; border-color: #1E293B !important; } .fintech-accordion .fintech-chev { transition: transform 200ms ease; } .fintech-accordion button[aria-expanded="true"] .fintech-chev { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .fintech-accordion .fintech-chev { transition: none; } } /* FASE 6 MT 6.1 — Tokens semanticos OKLCH, easing unificado y hairlines estructurales por sombra. a) Tokens: se reafirman los 4 semanticos (mismos valores MT 1.1) + --ease-fintech + --hairline-shadow. b) Easing unificado cubic-bezier(0.33, 1, 0.68, 1) en duraciones 150ms a 300ms. c) Hairlines estructurales por sombra en divisores (header/nav) en vez de border-slate-800. d) Header glass refinado a bg-slate-900/70 (guard .7) con backdrop-blur-md (clase del marcado). Solo aditivo + overrides posteriores: 0 IDs, 0 listeners. */ :root { --canvas-bg: oklch(0.12 0.025 255); /* #080C14 */ --card-bg: oklch(0.18 0.030 255); /* #0F172A */ --accent-emerald: oklch(0.72 0.200 150); /* #00E676 */ --accent-blue: oklch(0.60 0.210 250); /* #3B82F6 */ --ease-fintech: cubic-bezier(0.33, 1, 0.68, 1); --hairline-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.05); } .tp-header.tp-navbar-fine { background: rgba(15,23,42,.7) !important; box-shadow: 0 1px 0 0 rgba(255,255,255,0.05); border-bottom: none !important; } body.tp-force-dark .tp-header.tp-navbar-fine { background: rgba(15,23,42,.7) !important; } nav.bg-slate-950 { border-bottom-color: transparent !important; box-shadow: 0 1px 0 0 rgba(255,255,255,0.05); } .fintech-hairline { box-shadow: 0 1px 0 0 rgba(255,255,255,0.05); } .tp-btn-primary, .tp-btn-emerald, .tp-btn-dark, .tab-btn, .module-panel button, .module-panel a, #aiFabBtn { transition-duration: 150ms !important; transition-timing-function: var(--ease-fintech) !important; } .fintech-accordion .fintech-chev { transition: transform 200ms var(--ease-fintech) !important; } .module-panel:not([hidden]) { animation-duration: 300ms !important; animation-timing-function: var(--ease-fintech) !important; } input, select, textarea { transition-duration: 150ms !important; transition-timing-function: var(--ease-fintech) !important; } .opt-card.aff-premium, .opt-pill, .opt-card-pill { transition-timing-function: var(--ease-fintech) !important; } @media (prefers-reduced-motion: reduce) { .tp-btn-primary, .tp-btn-emerald, .tp-btn-dark, .tab-btn, .module-panel button, .module-panel a, #aiFabBtn, .fintech-accordion .fintech-chev { transition: none !important; } } /* FASE 6 MT 6.2 — Animacion fluida de acordeones con Grid 0fr a 1fr y easing unificado. a) Paneles .fintech-acc-panel: display grid con grid-template-rows 0fr (colapsado) a 1fr (desplegado) y transition grid-template-rows 0.25s var(--ease-fintech). La logica JS queda INTACTA: sigue conmutando la clase .hidden + aria-expanded; el CSS reinterpreta .hidden como estado colapsado animable en vez del corte seco de display none (especificidad 0,3,0+ vence a la utilidad .hidden de Tailwind). b) Hijos directos con overflow hidden + min-height 0 para un deslizamiento fluido sin desbordamientos; margenes mt-3/space-y neutralizados en .hidden para una altura colapsada 0 real. c) Chevron: wrapper con hover de superficie suave OKLCH + rotacion 180deg vinculada a button[aria-expanded="true"] con --ease-fintech. d) 0 IDs internos, 0 listeners, 0 nodos eliminados. */ .fintech-accordion .fintech-acc-panel { display: grid; grid-template-rows: 0fr; grid-auto-rows: 0fr; transition: grid-template-rows 0.25s var(--ease-fintech), grid-auto-rows 0.25s var(--ease-fintech); } .fintech-accordion .fintech-acc-panel.hidden { display: grid; grid-template-rows: 0fr; grid-auto-rows: 0fr; margin-top: 0; } .fintech-accordion .fintech-acc-panel:not(.hidden) { grid-template-rows: 1fr; grid-auto-rows: 1fr; } .fintech-accordion .fintech-acc-panel > * { overflow: hidden; min-height: 0; transition: padding-top 0.25s var(--ease-fintech), padding-bottom 0.25s var(--ease-fintech), margin-top 0.25s var(--ease-fintech), margin-bottom 0.25s var(--ease-fintech), border-top-width 0.25s var(--ease-fintech), border-bottom-width 0.25s var(--ease-fintech); } .fintech-accordion .fintech-acc-panel.hidden > *, .fintech-accordion .fintech-acc-panel.hidden > div { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-top-width: 0; border-bottom-width: 0; } .fintech-accordion button .fintech-chev { border-radius: 9999px; padding: 0.15rem; transition: transform 0.25s var(--ease-fintech), background-color 0.25s var(--ease-fintech), color 0.25s var(--ease-fintech) !important; }@media (any-hover: hover) { .fintech-accordion button:hover .fintech-chev { background-color: oklch(0.23 0.035 255); color: #E2E8F0; } } .fintech-accordion button[aria-expanded="true"] .fintech-chev { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .fintech-accordion .fintech-acc-panel { transition: none; } .fintech-accordion .fintech-acc-panel > * { transition: none; } .fintech-accordion button .fintech-chev { transition: none !important; } } /* FASE 6 MT 6.3 — Touch-safety, foco visible quirurgico y fade-out lateral en selects. a) Touch-safety: TODAS las reglas :hover del fichero viven bajo @media (any-hover: hover) (envueltas in situ, orden preservado): en tactil sin hover no hay hovers fijos; en escritorio el render es identico. b) Foco quirurgico: anillo azul neon exacto 'outline: 2px solid #3072ed + outline-offset: 2px' UNICAMENTE bajo :focus-visible (teclado). Ninguna regla :focus plaina pinta outline: el foco de raton queda limpio. c) Fade-out en selects: mascara 'linear-gradient(to right, #000 90%, transparent 100%)' —realiza el fundido lateral de la especificacion (transparent -> var(--card-bg) 90%) en espacio alfa: el texto extenso se funde en el borde derecho en vez de truncarse en seco; el texto corto (que no alcanza el 90%) queda intacto. Contratos deterministas claro/oscuro y 0 IDs / 0 listeners. */ /* MT 8.2: foco MT 6.3 eliminado (muerto por foco neutro MT 7.2 con !important). */ /* FASE 6 MT 6.4 — Desplegables y selects Fintech Dark 2026 (correccion de interfaz). a) La mascara mask-image/-webkit-mask-image de MT 6.3 sobre 'select' queda ELIMINADA por completo (provocaba un difuminado extrano en el borde derecho): ningun select lleva mascara. b) Estilizado oscuro integral de 'select option' en paleta Slate mate (fondo #0f172a, texto #f8fafc, padding 12px 16px, 14px). c) Estados option:hover / option:focus / option:checked en slate-800 mate (#1e293b) para que el menu emergente se integre con la paleta. d) Remate limpio del control: padding-right 2.5rem (no invade el icono indicador) + text-overflow ellipsis. 0 IDs del DOM, 0 listeners (onchange intactos). */ select { padding-right: 2.5rem; text-overflow: ellipsis; } body.tp-force-dark select { padding-right: 2.5rem; } select option { background-color: #121318; color: #F9FAFB; padding: 12px 16px; font-size: 14px; } select option:focus { background-color: #1a1c22; color: #F9FAFB; } @media (any-hover: hover) { select option:hover { background-color: #1a1c22; color: #F9FAFB; } } select option:checked { background-color: #1a1c22; color: #F9FAFB; } /* FASE 6 MT 6.5 — FDPicker: desplegables con la piel de la casa (src/js/fd-picker.js). El popup NATIVO del navegador no se puede vestir con CSS (el highlight azul claro lo impone el SO): este control lo sustituye por una capa propia (popover anclado en escritorio, hoja inferior en movil <=620px) con la paleta Slate mate + acento esmeralda. El