/* iframe sem margins nativas do body. O iframe auto-redimensiona via
   postMessage para a altura exacta do conteúdo, por isso não é suposto
   precisar de scroll interno — escondemos as scrollbars só visualmente
   (scrollbar-width:none + ::-webkit-scrollbar display:none). NÃO
   usamos overflow:hidden aqui: em iOS Safari isso bloqueia o
   scroll-on-focus automático quando o teclado abre e pode quebrar o
   tap em inputs dentro de iframe cross-origin.
   -webkit-text-size-adjust:100% impede o Safari de auto-escalar texto
   em landscape. */
#lf-pc-calc { margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
#lf-pc-calc::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* Tap highlight transparente em iOS/Android para UX consistente */
#lf-pc-calc, #lf-pc-calc * { -webkit-tap-highlight-color: transparent; }

/* ============================================================
   LF Design System Tokens (extraídos do Figma)
   Primitives → Semantic → Component patterns. Mantido em sync
   com lf-design-system-tokens.css. Alias herdados (--brand,
   --green, --dark, etc.) preservam compatibilidade das regras
   existentes sem refactor massivo.
   ============================================================ */
#lf-pc-calc {
  /* PRIMITIVES - Brand */
  --color-brand-50: #fff4ed;
  --color-brand-100: #ffe7d4;
  --color-brand-200: #ffcaa8;
  --color-brand-300: #ffa570;
  --color-brand-400: #ff7437;
  --color-brand-500: #ff5a1f;
  --color-brand-600: #f03406;
  --color-brand-700: #c72307;
  /* PRIMITIVES - Grey */
  --color-grey-25: #fcfcfd;
  --color-grey-50: #f9fafb;
  --color-grey-100: #f2f4f7;
  --color-grey-200: #e9ecf1;
  --color-grey-300: #ced5df;
  --color-grey-400: #96a0b0;
  --color-grey-500: #697386;
  --color-grey-600: #4f5969;
  --color-grey-700: #3a4454;
  --color-grey-800: #2d3543;
  --color-grey-900: #202432;
  --color-grey-950: #121721;
  /* PRIMITIVES - Blue */
  --color-blue-50: #eff4ff;
  --color-blue-100: #d1e0ff;
  --color-blue-300: #84adff;
  --color-blue-500: #2970ff;
  --color-blue-600: #155eef;
  /* PRIMITIVES - Error */
  --color-error-50: #fef3f2;
  --color-error-300: #fda29b;
  --color-error-500: #f04438;
  --color-error-600: #d92d20;
  --color-error-700: #b42318;
  /* PRIMITIVES - Warning */
  --color-warning-50: #fffaeb;
  --color-warning-200: #fedf89;
  --color-warning-500: #f79009;
  --color-warning-700: #b54708;
  /* PRIMITIVES - Success */
  --color-success-50: #ecfdf3;
  --color-success-200: #a9efc5;
  --color-success-500: #17b26a;
  --color-success-700: #067647;

  /* SEMANTIC - Text */
  --text-primary: var(--color-grey-900);
  --text-secondary: var(--color-grey-700);
  --text-tertiary: var(--color-grey-600);
  --text-quaternary: var(--color-grey-500);
  --text-placeholder: var(--color-grey-500);
  --text-disabled: var(--color-grey-500);
  --text-white: #ffffff;
  --text-error: var(--color-error-600);
  --text-warning: var(--color-warning-700);
  --text-success: var(--color-success-700);
  --text-blue: var(--color-blue-600);
  /* SEMANTIC - Background */
  --bg-primary: var(--color-grey-25);
  --bg-secondary: var(--color-grey-50);
  --bg-tertiary: var(--color-grey-100);
  --bg-quaternary: var(--color-grey-200);
  --bg-white: #ffffff;
  --bg-brand: var(--color-brand-500);
  --bg-soft-blue: var(--color-blue-50);
  --bg-primary-dark: var(--color-grey-950);
  /* SEMANTIC - Border */
  --border-primary: var(--color-grey-300);
  --border-secondary: var(--color-grey-200);
  --border-tertiary: var(--color-grey-100);
  --border-hover: var(--color-grey-700);
  --border-blue: var(--color-blue-500);
  --border-error: var(--color-error-300);
  --border-focus: var(--color-blue-100);
  /* SEMANTIC - Button */
  --btn-brand-bg: var(--color-brand-500);
  --btn-brand-bg-hover: var(--color-brand-600);
  --btn-brand-fg: #ffffff;

  /* LEGACY ALIASES - mantidos para compat com rules existentes */
  --brand: var(--color-brand-500);
  --green-text: var(--color-success-700);
  --error: var(--color-error-500);
  --dark: var(--color-grey-950);
  --blue-primary: var(--color-blue-600);
  --blue-bg: var(--color-blue-50);
  --accent-blue: var(--color-blue-500);
  --accent-orange: #FD8D2B;
  --green: var(--color-success-500);
  --green-soft: var(--color-success-50);
  --warning: var(--color-warning-500);
  --warning-dark: var(--color-warning-700);
  --accent-blue-light: var(--color-blue-300);
  --accent-orange-light: #FEAD67;
  --accent-green: #12B76A;

  /* SPACING tokens */
  --spacing-xxs: 2px; --spacing-xs: 4px; --spacing-sm: 6px;
  --spacing-md: 8px; --spacing-lg: 10px; --spacing-xl: 12px;
  --spacing-2xl: 16px; --spacing-3xl: 20px; --spacing-4xl: 24px;
  --spacing-5xl: 32px; --spacing-6xl: 40px;
  /* RADIUS tokens */
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px;
  --radius-lg: 10px; --radius-xl: 12px; --radius-2xl: 16px;
  --radius-3xl: 20px; --radius-full: 999px;
  /* SHADOWS */
  --shadow-border:
    0px 4px 6px -2px rgba(18, 23, 33, 0.03),
    0px 12px 16px -4px rgba(18, 23, 33, 0.08),
    0px 0px 1px 0px rgba(18, 23, 33, 0.12);
  --shadow-md:
    0px 4px 6px -2px rgba(18, 23, 33, 0.03),
    0px 12px 16px -4px rgba(18, 23, 33, 0.08);
  --focus-ring: 0 0 0 4px var(--color-blue-100);
  --focus-ring-error: 0 0 0 4px #fee4e2;

  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: var(--text-primary);
  background: transparent;
  -webkit-font-smoothing: antialiased;
}

#lf-pc-calc *,
#lf-pc-calc *::before,
#lf-pc-calc *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ---------- Container ---------- */
#lf-pc-calc .lpc-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4xl);
  max-width: 842px;
  margin: 0 auto;
  padding: 0;
}
/* .lpc-results envolve chart-card + compare + risk + footer. Precisa de
   ser flex-column para o gap de 24px se propagar — sem isto, os cards
   ficavam colados verticalmente (feedback mobile 23-Abr). */
#lf-pc-calc .lpc-results {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4xl);
}

/* ---------- Card shell ---------- */
/* Figma 5517:31956: border 4px #F2F4F7 (border-tertiary-100), sem
   box-shadow — o frame chunky grosso é a assinatura visual. */
#lf-pc-calc .lpc-card,
#lf-pc-calc .lpc-chart-card {
  background: var(--bg-white);
  border-radius: var(--radius-3xl);
  box-shadow: none;
  border: 4px solid var(--border-tertiary);
  padding: var(--spacing-6xl);
}

/* ---------- Header ---------- */
#lf-pc-calc .lpc-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2xl);
  align-items: flex-start;
  justify-content: flex-end;
}
#lf-pc-calc .lpc-title {
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: -0.4px;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}
#lf-pc-calc .lpc-sub {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.2px;
  color: var(--text-secondary);
}
#lf-pc-calc .lpc-updated {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-xl);
  background: var(--green-soft);
  color: var(--green-text);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: -0.1px;
  flex-shrink: 0;
}
#lf-pc-calc .lpc-updated-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(23, 178, 106, 0.18);
}
#lf-pc-calc .lpc-updated.is-stale {
  background: var(--color-warning-50);
  color: var(--warning-dark);
}
#lf-pc-calc .lpc-updated.is-stale .lpc-updated-dot {
  background: var(--warning);
  box-shadow: 0 0 0 3px rgba(247, 144, 9, 0.22);
}
/* Footer discreto com a data de actualização - no fim do comparador.
   Estilo subtil, sem pill de fundo, para não competir com o disclaimer. */
/* Figma 5515:18875: gap 6px, pt 12px, sem pb/margin-bottom, texto 12/18
   Inter Regular -0.1 color #4F5969 (text-tertiary), icon 16x16 verde. */
#lf-pc-calc .lpc-footer-updated {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  /* 16px + 24px gap do .lpc-results = 40px total antes do footer
     (igual ao margin-top original de var(--spacing-6xl)). */
  margin-top: var(--spacing-2xl);
  margin-bottom: 0;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: -0.1px;
  color: var(--text-tertiary);
  font-weight: 400;
}
#lf-pc-calc .lpc-updated-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  line-height: 0;
  vertical-align: middle;
  color: var(--green);
}
#lf-pc-calc .lpc-updated-check > svg {
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
#lf-pc-calc .lpc-footer-updated.is-stale {
  color: var(--warning-dark);
}
#lf-pc-calc .lpc-footer-updated.is-stale .lpc-updated-check {
  color: var(--warning);
}

/* ---------- Empty state (mostrado antes de carregar "Calcular") ----------
   Espelho do design da calculadora de juros compostos em
   literaciafinanceira.pt (.table-results_wrapper.is-placeholcer):
   card branco com border 4px #F2F4F7, radius 20px, padding 48px all,
   SVG 48x48 (squircle fill #F2F4F7 + line-art stroke #CED5DF),
   texto 14/20 Inter #697386 max-width 288px, semibold no "Calcular". */
#lf-pc-calc .lpc-empty-state {
  background: var(--bg-white);
  border-radius: var(--radius-3xl);
  border: 4px solid var(--border-tertiary);
  padding: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2xl);
  text-align: center;
}
#lf-pc-calc .lpc-empty-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}
#lf-pc-calc .lpc-empty-state-icon > svg {
  display: block;
  width: 48px;
  height: 48px;
}
#lf-pc-calc .lpc-empty-state-text {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.2px;
  color: var(--text-quaternary);
  max-width: 288px;
}
#lf-pc-calc .lpc-empty-state-text strong {
  font-weight: 600;
  color: inherit;
}

/* ---------- Section label (Figma: "Escolhe até 3 PPR para comparar") ---------- */
#lf-pc-calc .lpc-section-label {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.2px;
  color: var(--text-primary);
  margin-bottom: var(--spacing-4xl);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--border-secondary);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--spacing-xl);
  flex-wrap: wrap;
  /* Figma 5517:31956 — form interno tem largura fixa 624px dentro do card.
     Centramos o header + slots + botao para os inputs ficarem mais estreitos
     que o card (que mantem a largura maxima do container). */
  max-width: 624px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
#lf-pc-calc .lpc-slots,
#lf-pc-calc .lpc-calculate-row {
  max-width: 624px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
#lf-pc-calc .lpc-counter {
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: -0.1px;
  text-transform: none;
  color: #697386;
}

/* ---------- Slots (3 search inputs, um por PPR selecionado) ---------- */
#lf-pc-calc .lpc-slots {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-4xl);
}
/* v3: botão Calcular. Gate explícito entre seleccionar PPRs e ver
   resultados. Full-width dentro do card do seletor, cor brand. */
#lf-pc-calc .lpc-calculate-row {
  margin-top: var(--spacing-5xl);  /* 32px (Figma) */
}
#lf-pc-calc .lpc-calculate-btn {
  width: 100%;
  padding: 8px 16px;
  background: var(--btn-brand-bg);
  color: #fff;
  border: none;
  border-radius: var(--radius-xl);
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.2px;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
#lf-pc-calc .lpc-calculate-btn:hover:not(:disabled) {
  background: var(--color-brand-600);
}
#lf-pc-calc .lpc-calculate-btn:active:not(:disabled) {
  background: var(--color-brand-700);
}
/* Disabled state - Figma 5496:9260: background #E9ECF1 (border-secondary)
   + texto #96A0B0 (grey-400). O utilizador ve que o botao nao esta
   accionavel enquanto nao seleccionar um PPR. */
#lf-pc-calc .lpc-calculate-btn:disabled {
  background: var(--border-secondary);
  color: var(--color-grey-400);
  cursor: not-allowed;
}
/* is-dirty: há selecção que ainda não foi calculada. Ligeiro pulse
   para sinalizar que o utilizador tem de clicar. */
#lf-pc-calc .lpc-calculate-btn.is-dirty {
  box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.18);
}
#lf-pc-calc .lpc-slot {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
#lf-pc-calc .lpc-slot-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.2px;
  color: #3A4454;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}
/* Pipe colorido por slot, alinhado com as cores das séries do gráfico. */
#lf-pc-calc .lpc-slot-dot {
  width: 2px;
  height: 12px;
  background: var(--border-primary);
  flex-shrink: 0;
}
#lf-pc-calc .lpc-slot[data-slot="0"] .lpc-slot-dot { background: var(--colors--accent-orange-base, #FD8D2B); }
#lf-pc-calc .lpc-slot[data-slot="1"] .lpc-slot-dot { background: #2970FF; }
#lf-pc-calc .lpc-slot[data-slot="2"] .lpc-slot-dot { background: #875BF7; }
#lf-pc-calc .lpc-slot-wrap {
  position: relative;
}
#lf-pc-calc .lpc-slot-input {
  width: 100%;
  padding: var(--spacing-lg) 36px var(--spacing-lg) var(--spacing-xl);
  font-family: 'Inter', sans-serif;
  /* 16px no mínimo para evitar auto-zoom do iOS Safari no focus.
     Em desktop reduzimos via media query para manter o aspecto actual. */
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.2px;
  color: var(--text-primary);
  background: var(--bg-white);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xl);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  text-overflow: ellipsis;
  /* Safari/WebKit: remover estilos nativos que podem quebrar focus
     visual e resetar propriedades que causavam behaviour inconsistente
     dentro de iframe cross-origin. touch-action:manipulation elimina
     o delay de 300ms de double-tap em iOS. */
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
}
#lf-pc-calc .lpc-slot-input::placeholder {
  color: var(--text-placeholder);
  font-weight: 400;
}
#lf-pc-calc .lpc-slot-input:hover {
  border-color: var(--border-hover);
}
#lf-pc-calc .lpc-slot-input:focus {
  border-color: #84ADFF;
  box-shadow: 0 0 0 4px #D1E0FF;
}
#lf-pc-calc .lpc-slot.is-filled .lpc-slot-input {
  padding-left: 14px;
  border-color: var(--border-primary);
  background: var(--bg-white);
  cursor: default;
}
#lf-pc-calc .lpc-slot-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--text-placeholder);
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s, color 0.15s;
}
#lf-pc-calc .lpc-slot.is-filled .lpc-slot-clear {
  display: inline-flex;
}
#lf-pc-calc .lpc-slot-clear:hover {
  background: var(--border-secondary);
  color: var(--text-primary);
}
/* Chevron-down à direita quando o slot está vazio (substitui o X).
   Indica que o input é um dropdown trigger — match Figma 5517:31960. */
#lf-pc-calc .lpc-slot-chevron {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #697386;
  pointer-events: none;
  transition: transform 0.15s;
}
#lf-pc-calc .lpc-slot.is-filled .lpc-slot-chevron {
  display: none;
}
#lf-pc-calc .lpc-slot.is-open .lpc-slot-chevron {
  transform: translateY(-50%) rotate(180deg);
}
#lf-pc-calc .lpc-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--bg-white);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-xl);
  box-shadow: 0 12px 16px -4px rgba(18, 23, 33, 0.08),
              0 4px 6px -2px rgba(18, 23, 33, 0.03);
  max-height: 320px;
  overflow-y: auto;
  /* inertia touch-scroll em iOS Safari. Sem isto, o scroll do
     dropdown dentro de iframe cross-origin não funciona nativamente
     e o nosso fallback via postMessage criava tremor. */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  z-index: 50;
  display: none;
  padding: var(--spacing-sm);
}
#lf-pc-calc .lpc-dropdown.is-open {
  display: block;
}
#lf-pc-calc .lpc-option {
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: -0.1px;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: background 0.15s ease, color 0.15s ease;
  white-space: normal;
  word-break: break-word;
}
#lf-pc-calc .lpc-option:hover,
#lf-pc-calc .lpc-option.is-highlighted {
  background: var(--bg-secondary);
  color: var(--text-primary);
}
#lf-pc-calc .lpc-option-meta {
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  color: var(--text-placeholder);
  flex-shrink: 0;
}
#lf-pc-calc .lpc-option-empty {
  padding: var(--spacing-xl);
  color: var(--text-placeholder);
  font-size: 13px;
  text-align: center;
}

/* ---------- Tabs (período e modo) ---------- */
#lf-pc-calc .lpc-chart-title-row {
  margin-bottom: 24px;
}
/* Figma 5515:19322 — "Rentabilidade acumulada": Body/Text lg/Medium
   (Inter Medium 18/26 tracking -0.3, color text-primary #202432). */
#lf-pc-calc .lpc-tabs-title {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: -0.3px;
  color: var(--text-primary);
  margin: 0;
}
#lf-pc-calc .lpc-chart-periods-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-secondary);
}
/* .lpc-chart-menu ja tem margin-left:auto e flex-shrink:0 na regra
   geral (linha ~682) — suficiente para empurrar para a direita. */
#lf-pc-calc .lpc-chart-modes-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-2xl);
  margin-top: 24px;
}
/* Separador vertical entre o mode toggle e o "ETFs referência".
   NOTA: o label .lpc-benchmark-toggle tem gap interno 8px. O espaço
   total entre divider→switch é margin-right + gap, por isso usamos
   8px aqui para total = 16px (igual ao gap do modes-row à esquerda). */
#lf-pc-calc .lpc-chart-modes-row .lpc-benchmark-toggle::before {
  content: '';
  display: inline-block;
  width: 1px;
  height: 24px;
  background: var(--border-secondary);
  margin-right: var(--spacing-md);
  flex-shrink: 0;
}
#lf-pc-calc .lpc-chart-hint {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.1px;
  color: #4F5969;
  margin-top: var(--spacing-xl);
  margin-bottom: 16px;
}
#lf-pc-calc .lpc-chart-hint:empty { display: none; margin: 0; }
#lf-pc-calc .lpc-tabs {
  display: inline-flex;
  gap: var(--spacing-xs);
  background: transparent;
}
#lf-pc-calc .lpc-tab {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: -0.1px;
  padding: 7px 12px;
  border-radius: var(--radius-lg);
  border: none;
  cursor: pointer;
  background: transparent;
  color: var(--text-placeholder);
  transition: background 0.15s ease, color 0.15s ease;
}
#lf-pc-calc .lpc-tab:hover {
  color: var(--text-secondary);
}
#lf-pc-calc .lpc-tab.is-active {
  background: var(--blue-bg);
  color: var(--blue-primary);
}
/* Variante do info-icon quando vive dentro de um <button class="lpc-tab">
   (ex: YTD). Remove o negative-margin habitual (pensado para labels de
   tabela) e encosta o icon ao texto com um gap explícito. */
#lf-pc-calc .lpc-tab .lpc-info-icon--tab {
  margin: 0 0 0 6px;
  padding: 2px;
  width: auto;
  height: auto;
  vertical-align: middle;
  /* Icon herda a cor do tab (SVG usa stroke:currentColor).
     Default #697386, active #155EEF via .lpc-tab.is-active.
     Figma 224:1444 (design system tabs). */
  color: inherit;
}
#lf-pc-calc .lpc-tab:hover .lpc-info-icon--tab,
#lf-pc-calc .lpc-tab .lpc-info-icon--tab:hover,
#lf-pc-calc .lpc-tab .lpc-info-icon--tab.is-open {
  color: inherit;
}
#lf-pc-calc .lpc-tab .lpc-info-icon--tab::before {
  content: none;
}
/* Toggle 1.000€ / %. Design Figma: pílula escura no estado activo
   sobre fundo cinza claro. */
#lf-pc-calc .lpc-mode-toggle {
  display: inline-flex;
  background: var(--bg-tertiary);
  border-radius: var(--radius-xl);
  padding: 2px;
  gap: 0;
}
#lf-pc-calc .lpc-mode-toggle .lpc-tab {
  border-radius: var(--radius-xl);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: -0.1px;
  color: #697386;
}
#lf-pc-calc .lpc-mode-toggle .lpc-tab.is-active {
  background: #3A4454;
  color: #F9FAFB;
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);
}
#lf-pc-calc .lpc-mode-toggle .lpc-tab:hover {
  color: var(--text-primary);
}
#lf-pc-calc .lpc-mode-toggle .lpc-tab.is-active:hover {
  color: #F9FAFB;
}

/* Kebab menu (exportar imagem) à direita dos tabs do chart.
   flex-shrink:0 + dimensoes explicitas no botao: Safari renderizava
   o hover background a esticar toda a linha quando o menu fazia wrap
   para baixo (margin-left:auto + flex-wrap:wrap edge case). Agora o
   botao tem tamanho fixo 32x32 e encosta mesmo no canto direito. */
#lf-pc-calc .lpc-chart-menu {
  position: relative;
  margin-left: auto;
  flex-shrink: 0;
}
#lf-pc-calc .lpc-chart-menu-btn {
  background: transparent;
  border: none;
  padding: 0;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  color: var(--text-tertiary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
#lf-pc-calc .lpc-chart-menu-btn > svg {
  display: block;
  width: 16px;
  height: 16px;
}
#lf-pc-calc .lpc-chart-menu-btn:hover,
#lf-pc-calc .lpc-chart-menu-btn[aria-expanded="true"] {
  background: var(--bg-secondary);
  color: var(--text-primary);
}
/* Dropdown menu do kebab (Figma 570:11098). Container 240px, radius-xl
   12px, shadow dupla light. Items: padding 10px interior + 6px lateral
   (via margin) + radius 12px interior. Divider 1px #e9ecf1 entre grupos. */
#lf-pc-calc .lpc-chart-menu-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: #fff;
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-xl);
  box-shadow:
    0px 12px 16px -4px rgba(16, 24, 40, 0.08),
    0px 4px 6px -2px rgba(16, 24, 40, 0.03);
  width: 240px;
  z-index: 5;
  padding: 4px 0;
  overflow: hidden;
}
#lf-pc-calc .lpc-chart-menu-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  width: calc(100% - 12px);
  margin: 0 6px;
  padding: 10px;
  background: transparent;
  border: none;
  text-align: left;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.2px;
  color: #3a4454;                      /* Figma text-secondary-700 */
  cursor: pointer;
  border-radius: var(--radius-xl);
}
#lf-pc-calc .lpc-chart-menu-label {
  color: #3a4454;                      /* explicito para evitar herdancas do Webflow */
}
#lf-pc-calc .lpc-chart-menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--colors--icon-grey-base, #697386);
  flex-shrink: 0;
  transition: color 0.15s ease;
}
#lf-pc-calc .lpc-chart-menu-icon > svg {
  display: block;
  width: 16px;
  height: 16px;
}
/* Hover: so o icon muda de cor (brand orange). Sem background change. */
#lf-pc-calc .lpc-chart-menu-item:hover .lpc-chart-menu-icon {
  color: var(--color-brand-500);
}
#lf-pc-calc .lpc-chart-menu-divider {
  height: 1px;
  margin: 4px 0;
  background: var(--border-secondary);
}

/* Empty state do chart quando nada seleccionado */
#lf-pc-calc .lpc-empty-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  gap: var(--spacing-xl);
  color: var(--text-placeholder);
  text-align: center;
}
#lf-pc-calc .lpc-empty-chart-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-xl);
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
}

/* Warning banner (perfil de risco divergente) */
/* Warning com layout flex, SVG alinhado ao topo do texto.
   Regras com especificidade alta para sobrescrever Webflow globals
   (svg/span) sem !important. Test cases cross-browser:
   - Safari mobile: span min-width:0 evita overflow intrinsic
   - Direct-embed: font-family explícito e display explícito evitam
     herança de regras svg/span globais do Webflow. */
#lf-pc-calc div.lpc-warning {
  display: flex;
  align-items: flex-start;
  margin-top: var(--spacing-3xl);
  padding: 12px 14px;
  background: var(--color-warning-50);
  border: 1px solid var(--color-warning-200);
  border-radius: var(--radius-xl);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.1px;
  color: var(--warning-dark);
}
#lf-pc-calc div.lpc-warning > svg {
  position: static;
  display: block;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  margin-top: 1px;
}
#lf-pc-calc div.lpc-warning > span {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ---------- Chart ---------- */
#lf-pc-calc .lpc-chart-canvas-wrap {
  position: relative;
  width: 100%;
  height: 360px;
}
/* Estado 'is-exporting' (adicionado pelo handler Descarregar gráfico):
   esconde os filtros (tabs de periodo, toggles de modo, hint e kebab)
   para o PNG mostrar apenas titulo + chart + nota + returns-strip.
   Feedback Raquel 23-Abr: PNG estava a parecer screenshot da UI. */
#lf-pc-calc .lpc-chart-card.is-exporting .lpc-chart-periods-row,
#lf-pc-calc .lpc-chart-card.is-exporting .lpc-chart-modes-row,
#lf-pc-calc .lpc-chart-card.is-exporting .lpc-chart-hint,
#lf-pc-calc .lpc-chart-card.is-exporting .lpc-chart-menu {
  display: none !important;
}
#lf-pc-calc .lpc-chart-canvas-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}
#lf-pc-calc .lpc-chart-note {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: var(--text-tertiary);
  text-align: center;
  margin-top: var(--spacing-2xl);
}

/* ---------- Benchmark toggle ---------- */
#lf-pc-calc .lpc-benchmark-row {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-xs);
}
#lf-pc-calc .lpc-benchmark-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-md);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: -0.1px;
  color: #697386;
  user-select: none;
  padding: 4px 0;
}
#lf-pc-calc .lpc-benchmark-toggle input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 36px;
  height: 20px;
  border-radius: 9999px;
  background: var(--border-primary);
  position: relative;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}
#lf-pc-calc .lpc-benchmark-toggle input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #FFFFFF;
  transition: transform 0.15s;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);
}
#lf-pc-calc .lpc-benchmark-toggle input[type="checkbox"]:checked {
  background: #3A4454;
}
#lf-pc-calc .lpc-benchmark-toggle input[type="checkbox"]:checked::after {
  transform: translateX(16px);
}
#lf-pc-calc .lpc-benchmark-text {
  white-space: nowrap;
  color: #697386;
  transition: color 0.15s ease;
}
/* Active state (toggle on): texto passa de #697386 (quaternary) para
   #3A4454 (secondary-700). Figma 5515:18720. */
#lf-pc-calc #lpc-benchmark-checkbox:checked ~ .lpc-benchmark-text {
  color: #3A4454;
}

/* Labels mobile-only: "Visualização" e "Comparar com ETFs de referência".
   No desktop o layout horizontal usa .lpc-benchmark-text inline — em mobile
   esses labels ficam em bloco sobre o toggle respectivo (Figma 5518:34102). */
#lf-pc-calc .lpc-mobile-label {
  display: none;
}
#lf-pc-calc .lpc-benchmark-label-mobile {
  align-items: center;
  gap: var(--spacing-sm);
}
#lf-pc-calc .lpc-benchmark-state {
  display: none;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.2px;
  color: #697386;                    /* inactive — match desktop .lpc-benchmark-text */
  transition: color 0.15s ease;
}
/* Active state: desktop usa .lpc-benchmark-text; mobile usa .lpc-benchmark-state.
   Mesma logica de cor: inactivo #697386 -> activo #3A4454 (Figma 5515:18720). */
#lf-pc-calc #lpc-benchmark-checkbox:checked ~ .lpc-benchmark-state {
  color: #3A4454;
}
#lf-pc-calc .lpc-return-vs-bench {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: -4px;
  font-weight: 400;
  line-height: 16px;
}
#lf-pc-calc .lpc-return-vs-bench .pos { color: var(--green-text); }
#lf-pc-calc .lpc-return-vs-bench .neg { color: var(--color-error-600); }

/* ---------- Returns strip ---------- */
#lf-pc-calc .lpc-returns-strip {
  display: grid;
  /* min(180px, 100%) evita que items forcem overflow horizontal
     quando o container é mais estreito que 180px */
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: var(--spacing-xl);
  margin-top: var(--spacing-3xl);
}
/* Em viewports estreitos (≤699px, inclui tablets pequenos e mobile) os
   cartões de rentabilidade vão a full width (1 por linha). */
@media (max-width: 699px) {
  #lf-pc-calc .lpc-returns-strip {
    grid-template-columns: 1fr;
  }
}
/* Quando vazio (0 PPRs seleccionados) colapsa para não deixar margem
   residual que varia a altura total do comparador vs estado 1+ PPRs. */
#lf-pc-calc .lpc-returns-strip:empty { margin-top: 0; }

/* Card "ETFs de referência" — Figma 5515:18732. Aparece debaixo dos
   returns-strip quando o toggle ETFs referência está ON. */
#lf-pc-calc .lpc-benchmark-card {
  background: #FCFCFD;
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-2xl);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: var(--spacing-md);
}
#lf-pc-calc .lpc-benchmark-card-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
#lf-pc-calc .lpc-benchmark-card-pipe {
  width: 2px;
  height: 10px;
  margin-top: 4px;
  background: var(--color-grey-700);
  flex-shrink: 0;
}
#lf-pc-calc .lpc-benchmark-card-title {
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: -0.1px;
  color: #3A4454;
}
#lf-pc-calc .lpc-benchmark-card-body {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.1px;
  color: #4F5969;
  padding-left: 10px;
  margin: 0;
}
#lf-pc-calc .lpc-return-cell {
  background: #FCFCFD;
  padding: 12px 16px;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border-secondary);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}
#lf-pc-calc .lpc-return-name {
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: -0.1px;
  color: #3A4454;
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
}
#lf-pc-calc .lpc-return-name-text {
  display: block;
  word-break: break-word;
  flex: 1;
  min-width: 0;
}
#lf-pc-calc .lpc-swatch {
  width: 2px;
  height: 10px;
  margin-top: 4px;
  flex-shrink: 0;
}
/* margin-top:auto empurra valor+% para o fundo do card. Em linhas onde
   um card tem titulo 1 linha e outro tem 2, os numeros alinham pela
   base — gap titulo→valor passa a ser "auto" (o que restar no card). */
#lf-pc-calc .lpc-return-value {
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -0.6px;
  color: var(--text-primary);
  margin-top: auto;
}
#lf-pc-calc .lpc-return-value.pos,
#lf-pc-calc .lpc-return-value .pos {
  color: var(--green-text);
}
#lf-pc-calc .lpc-return-value.neg,
#lf-pc-calc .lpc-return-value .neg {
  color: var(--color-error-600);
}
#lf-pc-calc .lpc-return-sub {
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  margin-top: -4px;
  letter-spacing: -0.1px;
  color: var(--text-tertiary);
}
#lf-pc-calc .lpc-return-sub.pos {
  color: var(--green-text);
}
#lf-pc-calc .lpc-return-sub.neg {
  color: var(--color-error-600);
}

/* ---------- Tables (compare + risk) ----------
   Figma 5515:18736 ("Comparação detalhada") e 5515:18813 ("Métrica de
   risco") — Body/Text lg/Medium: Inter Medium 18/26 tracking -0.3,
   color text-primary #202432. Mesmo token que o titulo do chart. */
#lf-pc-calc .lpc-section-title {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: -0.3px;
  color: var(--text-primary);
  margin: 0 0 var(--spacing-md) 0;
}
#lf-pc-calc .lpc-section-hint {
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.1px;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-4xl);
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
}
/* Wrapper com posicionamento relativo para os pipes do swipe-hint mobile
   (stacked no canto superior direito). No desktop .lpc-swipe-pipes é
   display:none - os pipes so aparecem em mobile. */
#lf-pc-calc .lpc-table-scroll {
  position: relative;
}
#lf-pc-calc .lpc-swipe-pipes {
  display: none;
}
#lf-pc-calc .lpc-swipe-hint {
  display: none;
}

#lf-pc-calc .lpc-table-wrap {
  border: none;
  border-radius: 0;
  overflow-x: auto;
  background: var(--bg-white);
  /* inertia touch-scroll em iOS Safari. overscroll-behavior-x:contain
     evita que um swipe horizontal na tabela puxe a página mãe para o
     lado, mas deixa o eixo Y livre (auto) — senão o swipe vertical
     dentro da tabela ficava preso em mobile em vez de rolar a página. */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  touch-action: pan-x pan-y;
  /* scrollbar escondida em todos os browsers — o scroll horizontal
     continua a funcionar por swipe/drag, só não mostra barra. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#lf-pc-calc .lpc-table-wrap::-webkit-scrollbar { display: none; }
#lf-pc-calc .lpc-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  min-width: 560px;
}
#lf-pc-calc .lpc-table th,
#lf-pc-calc .lpc-table td {
  padding: 12px;
  text-align: left;
  vertical-align: top;
}
/* Figma: thead sem fundo nem borders — fund cards flutuam livres. */
#lf-pc-calc .lpc-table thead th {
  background: var(--bg-white);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: -0.1px;
  color: var(--text-primary);
  border: none;
}
/* tbody forma um rectângulo arredondado fechado (border só aqui). */
#lf-pc-calc .lpc-table tbody th,
#lf-pc-calc .lpc-table tbody td {
  border-bottom: 1px solid var(--border-secondary);
}
#lf-pc-calc .lpc-table tbody tr:first-child th,
#lf-pc-calc .lpc-table tbody tr:first-child td {
  border-top: 1px solid var(--border-secondary);
}
#lf-pc-calc .lpc-table tbody tr th:first-child {
  border-left: 1px solid var(--border-secondary);
}
#lf-pc-calc .lpc-table tbody tr td:last-child {
  border-right: 1px solid var(--border-secondary);
}
/* Cantos arredondados do tbody (radius-md = 8px). */
#lf-pc-calc .lpc-table tbody tr:first-child th:first-child {
  border-top-left-radius: var(--radius-md);
}
#lf-pc-calc .lpc-table tbody tr:first-child td:last-child {
  border-top-right-radius: var(--radius-md);
}
#lf-pc-calc .lpc-table tbody tr:last-child th:first-child {
  border-bottom-left-radius: var(--radius-md);
}
#lf-pc-calc .lpc-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: var(--radius-md);
}
#lf-pc-calc .lpc-table tbody th {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.2px;
  color: #3A4454;
  background: var(--bg-secondary);
  width: 170px;
  border-right: 1px solid var(--border-secondary);
  white-space: nowrap;
}
#lf-pc-calc .lpc-table tbody td {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.2px;
  color: var(--text-primary);
}
#lf-pc-calc .lpc-fund-col {
  color: var(--text-primary);
  vertical-align: top;
  width: 140px;
  min-width: 140px;
}
#lf-pc-calc .lpc-fund-col-inner {
  position: relative;
  display: block;
}
/* Pipe com altura fixa (manager 16px + gap 2px + name 2 linhas 36px = 54px).
   Garante o mesmo comprimento visual em ambas as tabelas (Comparação
   detalhada e Métricas de risco), independentemente de o nome do fundo
   ocupar 1 ou 2 linhas — a coluna de texto reserva sempre o espaço
   completo via min-height. */
#lf-pc-calc .lpc-fund-pipe {
  position: absolute;
  left: -12px;
  top: 0;
  height: 54px;
  width: 2px;
  border-radius: 1px;
}
#lf-pc-calc .lpc-fund-col-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 54px;
  gap: 2px;
}
#lf-pc-calc .lpc-fund-manager {
  display: block;
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0;
  color: #697386;
}
#lf-pc-calc .lpc-fund-name {
  display: block;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: -0.1px;
  color: #3A4454;
}

/* Nota abaixo da tabela (janela comum). Figma: 11px Regular #4F5969. */
#lf-pc-calc .lpc-risk-footnote {
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  color: #4F5969;
  text-align: center;
  margin-top: var(--spacing-2xl);
}

/* ---------- Risk pills (classe 1-7) ----------
   Pill com barras estilo signal-strength (1-7 crescentes) + texto "N/7".
   Monocromático intencional - a classe de risco é lida pela densidade
   das barras preenchidas, não pela cor. */
#lf-pc-calc .lpc-risk-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: -0.1px;
}
#lf-pc-calc .lpc-risk-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 1.5px;
  height: 12px;
}
#lf-pc-calc .lpc-risk-bar {
  width: 3px;
  border-radius: 1px;
  background: var(--color-grey-300);
}
#lf-pc-calc .lpc-risk-bar.is-filled {
  background: var(--text-primary);
}
#lf-pc-calc .lpc-risk-bar.h1 { height: 3px; }
#lf-pc-calc .lpc-risk-bar.h2 { height: 4.5px; }
#lf-pc-calc .lpc-risk-bar.h3 { height: 6px; }
#lf-pc-calc .lpc-risk-bar.h4 { height: 7.5px; }
#lf-pc-calc .lpc-risk-bar.h5 { height: 9px; }
#lf-pc-calc .lpc-risk-bar.h6 { height: 10.5px; }
#lf-pc-calc .lpc-risk-bar.h7 { height: 12px; }

/* ---------- Info icon (tooltip trigger click+hover) ----------
   Dimensões explícitas + SVG display:block evitam Safari a
   reservar descender space (baseline default) e a inflar o box
   com a line-height do pai. O tap target expande via ::before
   em vez de padding+negative-margin (Safari não colapsa margem
   negativa em inline-flex contra o gap do container flex, o que
   fazia o ícone aparecer longe do texto em mobile/desktop). */
#lf-pc-calc .lpc-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--color-grey-400);
  cursor: pointer;
  line-height: 0;
  vertical-align: middle;
  transition: color 0.15s ease;
  position: relative;
}
#lf-pc-calc .lpc-info-icon::before {
  content: '';
  position: absolute;
  inset: -6px;
  cursor: pointer;
}
#lf-pc-calc .lpc-info-icon > svg {
  display: block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
#lf-pc-calc .lpc-info-icon:hover,
#lf-pc-calc .lpc-info-icon.is-open {
  color: var(--text-tertiary);
}
#lf-pc-calc .lpc-tip-bubble {
  /* position:fixed escapa a qualquer containing block - em particular
     o overflow-x:auto de .lpc-table-wrap, que antes cortava a bolha
     em Chrome quando aberta sobre a tabela de métricas de risco.
     A posição (x, y) e a posição da seta são calculadas em JS via
     getBoundingClientRect + clamp ao viewport para não sair do iframe. */
  position: fixed;
  top: 0;
  left: 0;
  transform: translate3d(var(--lpc-tip-x, 0px), var(--lpc-tip-y, 0px), 0);
  min-width: 200px;
  max-width: 280px;
  padding: var(--spacing-lg) var(--spacing-xl);
  background: var(--dark);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
  letter-spacing: -0.1px;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  white-space: normal;
  text-align: left;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
}
#lf-pc-calc .lpc-tip-bubble.is-visible {
  opacity: 1;
  visibility: visible;
}
#lf-pc-calc .lpc-tip-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: var(--lpc-arrow-x, 50%);
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--dark);
}
/* Fallback: quando não há espaço acima do ícone, o JS vira a bolha
   para baixo e a seta aponta para cima. */
#lf-pc-calc .lpc-tip-bubble.is-below::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--dark);
}
#lf-pc-calc .lpc-label-tip {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  /* Safari em desktop e iOS estica inline-flex dentro de <th> com
     width fixa (200px) + white-space:nowrap, afastando o icon do
     texto até ao fim da cell. width:max-content força content-sizing
     e mantém o icon colado à direita do label. Chrome já assumia
     content-sizing por defeito, logo não há regressão. */
  width: max-content;
  max-width: 100%;
}

/* ---------- Responsive ---------- */
@media (min-width: 641px) {
  /* Em desktop não há risco de auto-zoom: voltamos aos 14px. */
  #lf-pc-calc .lpc-slot-input { font-size: 14px; }
}
@media (max-width: 640px) {
  #lf-pc-calc .lpc-card,
  #lf-pc-calc .lpc-chart-card {
    padding: var(--spacing-4xl) var(--spacing-3xl);
  }
  #lf-pc-calc .lpc-title {
    font-size: 18px;
    line-height: 26px;
  }
  #lf-pc-calc .lpc-sub {
    font-size: 13px;
    line-height: 18px;
  }
  #lf-pc-calc .lpc-chart-canvas-wrap {
    height: 280px;
  }
  #lf-pc-calc .lpc-slots {
    grid-template-columns: 1fr;
  }
  #lf-pc-calc .lpc-section-title {
    font-size: 17px;
    line-height: 24px;
  }
  /* Em mobile o counter 'X/3 selecionados' quebra para a linha abaixo.
     Ajustes do feedback: gap 2px entre titulo e counter, counter 14px. */
  #lf-pc-calc .lpc-section-label {
    gap: 2px;
  }
  #lf-pc-calc .lpc-counter {
    font-size: 14px;
    line-height: 20px;
  }
  /* scroll horizontal em tab bars sem scrollbar visível (poupa altura) */
  #lf-pc-calc .lpc-chart-periods-row,
  #lf-pc-calc .lpc-chart-modes-row {
    flex-wrap: nowrap;
  }
  /* Kebab (lpc-chart-menu) em mobile: sai do periods-row e ancora ao
     canto superior direito do chart-card, alinhado com o titulo.
     Mantem a tab bar livre para scroll horizontal sem o botao a tapar. */
  #lf-pc-calc .lpc-chart-card {
    position: relative;
  }
  #lf-pc-calc .lpc-chart-periods-row > .lpc-chart-menu {
    position: absolute;
    top: calc(var(--spacing-4xl) - 3px);
    right: var(--spacing-3xl);
    margin-left: 0;
  }
  #lf-pc-calc #lpc-period-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #lf-pc-calc #lpc-period-tabs::-webkit-scrollbar { display: none; }
  #lf-pc-calc .lpc-tabs {
    flex-wrap: nowrap;
  }
  #lf-pc-calc .lpc-tab {
    white-space: nowrap;
    padding: 7px 10px;
    font-size: 12.5px;
  }
  #lf-pc-calc .lpc-table th,
  #lf-pc-calc .lpc-table td {
    padding: var(--spacing-lg) var(--spacing-xl);
    font-size: 12.5px;
  }
  #lf-pc-calc .lpc-table tbody th {
    width: 140px;
  }
  /* Primeira coluna sticky em mobile: o utilizador faz scroll horizontal
     nos PPRs mas vê sempre o nome da métrica à esquerda. Requer
     border-collapse:separate na tabela (já é o caso). */
  #lf-pc-calc .lpc-table thead tr th:first-child,
  #lf-pc-calc .lpc-table tbody tr th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
  }
  /* nos cartões de rentabilidade, número principal ligeiramente menor */
  #lf-pc-calc .lpc-return-value {
    font-size: 18px;
    line-height: 24px;
  }
  #lf-pc-calc .lpc-warning {
    font-size: 12.5px;
    line-height: 18px;
  }
  /* dropdown do selector: limitar altura para não empurrar layout */
  #lf-pc-calc .lpc-dropdown {
    max-height: 260px;
  }

  /* ---------- Chart modes-row em coluna (Figma 5518:34102) ----------
     Visualização (label) + toggle Percentagem/1.000€ + hint
     'Investimento simulado...' + label 'Comparar com ETFs' + switch
     com texto Ativo/Inativo. Hint e reposicionado via JS
     (positionChartHint) para ficar entre mode-toggle e benchmark-label. */
  /* Figma 5518:34272 (chart) + 5531:37192 (toggle group 1).
     Dois grupos de filtros separados por border-bottom no primeiro.
     Spacings explicitos via margin por elemento (gap:0) para match 1:1. */
  #lf-pc-calc .lpc-chart-modes-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: var(--spacing-4xl);        /* 24px para titulo/tabs acima */
    margin-bottom: var(--spacing-2xl);     /* 16px para chart canvas abaixo */
  }
  /* Grupo 1: Visualizacao -> mode-toggle (6px) -> hint (12px) -> borda 1px */
  #lf-pc-calc .lpc-chart-modes-row .lpc-mode-label-mobile {
    margin-bottom: 6px;
  }
  #lf-pc-calc .lpc-chart-modes-row .lpc-mode-toggle {
    margin-bottom: 12px;
  }
  #lf-pc-calc .lpc-chart-modes-row > .lpc-chart-hint {
    margin: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-secondary);
  }
  /* Grupo 2: padding-top 12px + label (6px para toggle abaixo) */
  #lf-pc-calc .lpc-chart-modes-row .lpc-benchmark-label-mobile {
    margin-top: 12px;
    margin-bottom: 6px;
  }
  #lf-pc-calc .lpc-mobile-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: -0.1px;
    color: var(--text-quaternary);         /* #697386 */
    margin-bottom: 0;
  }
  /* Esconder o separador vertical (só faz sentido em row layout) */
  #lf-pc-calc .lpc-chart-modes-row .lpc-benchmark-toggle::before {
    display: none;
  }
  /* Texto "ETFs referência" inline + info-icon dentro do toggle escondem-se
     em mobile (substituídos pelo label acima). Mostra-se "Ativo"/"Inativo" */
  #lf-pc-calc .lpc-benchmark-toggle .lpc-benchmark-text,
  #lf-pc-calc .lpc-benchmark-toggle > .lpc-info-icon {
    display: none;
  }
  #lf-pc-calc .lpc-benchmark-state {
    display: inline;
  }
  #lf-pc-calc .lpc-benchmark-toggle {
    padding: 0;
    align-self: flex-start;
  }
  /* Toggle Percentagem/1.000€ full-width no mobile (Figma 5518:34102) */
  #lf-pc-calc .lpc-mode-toggle {
    display: flex;
    width: 100%;
  }
  #lf-pc-calc .lpc-mode-toggle .lpc-tab {
    flex: 1;
  }

  /* ---------- Tables mobile ---------- */
  /* Cards das tabelas (Comparacao detalhada, Metricas de risco) em mobile
     (Figma 5530:37018): padding fica so no title e swipe-hint footer; a
     tabela ocupa largura total do card. Negative margin no table-scroll
     cancela o padding horizontal do card. overflow:hidden no card faz a
     tabela clipar no border-radius (ja existente 20px). */
  #lf-pc-calc .lpc-card:has(.lpc-table-scroll) {
    overflow: hidden;
  }
  #lf-pc-calc .lpc-table-scroll {
    margin-left: calc(-1 * var(--spacing-3xl));
    margin-right: calc(-1 * var(--spacing-3xl));
  }
  /* Remove border-radius das pontas do tbody (antes arredondava 8px em
     cada canto — agora o card clipa com o seu proprio border-radius). */
  #lf-pc-calc .lpc-table tbody tr:first-child th:first-child,
  #lf-pc-calc .lpc-table tbody tr:first-child td:last-child,
  #lf-pc-calc .lpc-table tbody tr:last-child th:first-child,
  #lf-pc-calc .lpc-table tbody tr:last-child td:last-child {
    border-radius: 0;
  }
  /* Remove border-left/right nas colunas outer — o border de 4px do card
     ja serve de contorno e evita uma linha 1px encostada ao border. */
  #lf-pc-calc .lpc-table tbody tr th:first-child {
    border-left: none;
  }
  #lf-pc-calc .lpc-table tbody tr td:last-child {
    border-right: none;
  }
  /* Footer 'Atualizado a...' em mobile: o gap de 24px do .lpc-results
     ja separa do cartao acima — remove-se o margin-top extra. */
  #lf-pc-calc .lpc-footer-updated {
    margin-top: 0;
  }
  /* Footer "Desliza para ver todos os PPR →" (Figma 5530:37157):
     bleed ate aos limites do card (negative horizontal+bottom margin),
     border-top como separador do conteudo acima, padding 16px vertical
     simetrico. Inter Regular 12/18 -0.1 color #697386. */
  #lf-pc-calc .lpc-swipe-hint {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-2xl) var(--spacing-3xl);
    margin: 0 calc(-1 * var(--spacing-3xl)) calc(-1 * var(--spacing-4xl));
    white-space: nowrap;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: -0.1px;
    color: var(--text-quaternary);
  }
  #lf-pc-calc .lpc-swipe-hint svg {
    display: block;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--text-quaternary);
  }
  /* Risk footnote mobile (Figma 5531:37678): banner full-width com bg
     #FCFCFD, border-bottom como separador para o swipe-hint, padding
     12/16, Inter Regular 12/18 -0.1 color #4F5969. No Figma o card tem
     gap:0 entre filhos - o footnote comeca imediatamente apos a tabela
     sem margin-top. O hint abaixo tambem tem border-top (mesma cor, mesma
     posicao) - visualmente colapsam numa linha unica. */
  #lf-pc-calc .lpc-risk-footnote {
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-secondary);
    padding: var(--spacing-xl) var(--spacing-2xl);
    margin: 0 calc(-1 * var(--spacing-3xl)) 0;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: -0.1px;
    color: var(--text-tertiary);
    text-align: left;
  }
  /* Pipes coloridos laranja/azul/roxo no top-right: removidos por feedback
     23-Abr — sobrepunham-se ao header do fundo e o 'Desliza para ver todos
     os PPR' no footer ja sinaliza o scroll horizontal. */
  #lf-pc-calc .lpc-swipe-pipes {
    display: none;
  }
}

/* ecrãs muito estreitos (≤380px) */
@media (max-width: 380px) {
  #lf-pc-calc .lpc-card,
  #lf-pc-calc .lpc-chart-card {
    padding: 20px 14px;
  }
  #lf-pc-calc .lpc-table th,
  #lf-pc-calc .lpc-table td {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: 12px;
  }
  #lf-pc-calc .lpc-table tbody th {
    width: 120px;
  }
  /* Ajusta os negative margins do swipe-hint / risk-footnote ao
     padding reduzido do card neste breakpoint (padding 20px 14px). */
  #lf-pc-calc .lpc-swipe-hint {
    padding-left: 14px;
    padding-right: 14px;
    margin-left: -14px;
    margin-right: -14px;
    margin-bottom: -20px;
  }
  #lf-pc-calc .lpc-risk-footnote {
    margin-left: -14px;
    margin-right: -14px;
  }
}