/*
 * components.css
 * Responsibility: all component styles — c-header, c-icon, c-divider, c-button,
 * c-input, c-card, c-section-title, c-checkbox, and their state variants.
 * Imports tokens from tokens.css (via HTML load order — do not re-import here).
 * No layout or page-level rules — those live in style.css.
 *
 * CSS order: component → internal parts → states → interactions.
 */

/* ─────────────────────────────────────────────
   HEADER
   Usage:
     <header class="l-header">
       <div class="c-header-row c-header-row--home">
         <span class="c-header-title">Enche o Papo</span>
         <button class="c-icon-btn c-icon-btn--ghost">...</button>
       </div>
     </header>
   Variants: c-header-row--home (space-between), c-header-row--internal (gap + back btn)
───────────────────────────────────────────── */

.c-header-row {
  display: flex;
  align-items: center;
  padding: var(--space-7) var(--layout-outer-padding);
}

.c-header-row--home {
  justify-content: space-between;
}

.c-header-row--internal {
  gap: var(--space-4);
}

.c-header-title {
  font-family: var(--font-family);
  font-size: var(--font-size-title-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-default);
  color: var(--color-content-default);
  flex: 1;
  min-width: 0;
}

.c-header-title--center {
  font-size: var(--font-size-body-md);
  text-align: center;
}

/* Placeholder spacer — keeps title centered when right action is absent */
.c-header-action {
  width: var(--size-icon);
  flex-shrink: 0;
}


/* ─────────────────────────────────────────────
   ICON
   Usage: <span class="c-icon c-icon--check"></span>
   Color follows currentColor (CSS mask-image technique).
   Small variant: add c-icon--sm
───────────────────────────────────────────── */

.c-icon {
  display: inline-block;
  width: var(--size-icon);
  height: var(--size-icon);
  background-color: currentcolor;
  flex-shrink: 0;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.c-icon--sm {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
}

.c-icon--check {
  -webkit-mask-image: url('../assets/icons/check.svg');
  mask-image: url('../assets/icons/check.svg');
}

.c-icon--cancel {
  -webkit-mask-image: url('../assets/icons/cancel.svg');
  mask-image: url('../assets/icons/cancel.svg');
}

.c-icon--menu {
  -webkit-mask-image: url('../assets/icons/menu.svg');
  mask-image: url('../assets/icons/menu.svg');
}

.c-icon--chevron-left {
  -webkit-mask-image: url('../assets/icons/chevron-left.svg');
  mask-image: url('../assets/icons/chevron-left.svg');
}

.c-icon--corner-right-down {
  -webkit-mask-image: url('../assets/icons/corner-right-down.svg');
  mask-image: url('../assets/icons/corner-right-down.svg');
}

.c-icon--settings {
  -webkit-mask-image: url('../assets/icons/settings.svg');
  mask-image: url('../assets/icons/settings.svg');
}

.c-icon--arrow-right {
  -webkit-mask-image: url('../assets/icons/arrow-right-sm.svg');
  mask-image: url('../assets/icons/arrow-right-sm.svg');
}

.c-icon--close {
  -webkit-mask-image: url('../assets/icons/close.svg');
  mask-image: url('../assets/icons/close.svg');
}

.c-icon--pen {
  -webkit-mask-image: url('../assets/icons/pen.svg');
  mask-image: url('../assets/icons/pen.svg');
}

.c-icon--trash {
  -webkit-mask-image: url('../assets/icons/trash-sm.svg');
  mask-image: url('../assets/icons/trash-sm.svg');
}

.c-icon--equal {
  -webkit-mask-image: url('../assets/icons/equal-sm.svg');
  mask-image: url('../assets/icons/equal-sm.svg');
}

.c-icon--unequal {
  -webkit-mask-image: url('../assets/icons/unequal-sm.svg');
  mask-image: url('../assets/icons/unequal-sm.svg');
}

.c-icon--reload {
  -webkit-mask-image: url('../assets/icons/reload.svg');
  mask-image: url('../assets/icons/reload.svg');
}


/* ─────────────────────────────────────────────
   DIVIDER
   Usage: <div class="c-divider"></div>
          <div class="c-divider c-divider--subtle"></div>
───────────────────────────────────────────── */

.c-divider {
  border: 0;
  border-top: var(--line-weight-default) solid var(--color-stroke-default);
  width: 100%;
}

.c-divider--subtle {
  border-top-width: var(--line-weight-subtle);
  border-top-color: var(--color-stroke-subtle);
  border-top-style: dashed;
}


/* ─────────────────────────────────────────────
   BUTTON — Base + size variants
   Usage:
     <button class="c-button c-button--md c-button--primary">OK</button>
     <button class="c-button c-button--lg c-button--primary c-button--block">CALCULAR APORTE</button>
   Sizes: --md (42px, default interactive), --lg (56px, Figma node 110:1037)
───────────────────────────────────────────── */

.c-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-4);
  font-family: var(--font-family);
  font-size: var(--font-size-label-lg);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-default);
  letter-spacing: var(--letter-spacing-default);
  color: var(--color-content-inverse);
  border-radius: var(--radius-default);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow-pixel);
  transition: none;
}

.c-button--md {
  height: var(--size-btn);
  /* 42px */
}

.c-button--lg {
  height: var(--size-btn-lg);
  /* 56px — Figma node 110:1037 */
}

.c-button--primary {
  background-color: var(--color-surface-inverse);
  border: var(--line-weight-default) solid var(--color-stroke-default);
}

.c-button--primary:hover {
  opacity: 0.9;
}

.c-button--primary:active {
  box-shadow: none;
  transform: translate(var(--space-1), var(--space-1));
}

.c-button--secondary {
  background-color: var(--color-surface-strong);
  border: none;
}

.c-button--secondary:hover {
  opacity: 0.9;
}

.c-button--secondary:active {
  box-shadow: none;
  transform: translate(var(--space-1), var(--space-1));
}

/* Full-width button modifier */
.c-button--block {
  width: 100%;
}

/* Small-label font override — for buttons in compact contexts */
.c-button--label-sm {
  font-size: var(--font-size-label-sm);
}


/* ─────────────────────────────────────────────
   ICON BUTTON (42×42 square)
   Usage: <button class="c-icon-btn">
            <span class="c-icon c-icon--check"></span>
          </button>
   Ghost variant: no background, for header actions.
───────────────────────────────────────────── */

.c-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-btn);
  height: var(--size-btn);
  flex-shrink: 0;
  background-color: var(--color-surface-inverse);
  border: var(--line-weight-default) solid var(--color-stroke-default);
  border-radius: var(--radius-default);
  box-shadow: var(--shadow-pixel);
  color: var(--color-content-inverse);
  cursor: pointer;
}

.c-icon-btn:hover {
  opacity: 0.9;
}

.c-icon-btn:active {
  box-shadow: none;
  transform: translate(var(--space-1), var(--space-1));
}

.c-icon-btn--ghost {
  background-color: transparent;
  border: none;
  box-shadow: none;
  color: var(--color-content-default);
  width: var(--size-icon);
  height: var(--size-icon);
}

.c-icon-btn--ghost:active {
  transform: none;
}

/* Sm variant (32×32) — edit/delete actions in list rows (Figma node 110:1567) */
.c-icon-btn--sm {
  width: var(--size-btn-sm);
  /* 32px */
  height: var(--size-btn-sm);
}

/* Secondary — gray surface (Surface/Strong), for edit/delete buttons */
.c-icon-btn--secondary {
  background-color: var(--color-surface-strong);
  border-color: var(--color-surface-strong);
  color: var(--color-content-inverse);
}

/* Subtle — surface-subtle bg + content-subtle icon, para ações de descarte de baixa prioridade */
.c-icon-btn--subtle {
  background-color: var(--color-surface-subtle);
  border-color: var(--color-surface-subtle);
  color: var(--color-content-subtle);
}


/* ─────────────────────────────────────────────
   INPUT (Large) — Figma node 45:458
   Label above + editable field row + optional support text in a column.
   Usage:
     <div class="c-input-wrapper">
       <label class="c-input-label" for="amount">Novo aporte</label>
       <div class="c-input">
         <input class="c-input-value" id="amount">
         <button class="c-icon-btn">
           <span class="c-icon c-icon--corner-right-down"></span>
         </button>
       </div>
       <p class="c-input-support">Troco dos aportes: R$ 5,00</p>
     </div>
───────────────────────────────────────────── */

.c-input-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  /* 8px between label and field — Figma node 45:458 */
  padding: 0 var(--layout-outer-padding);
}

.c-input-label {
  font-family: var(--font-family);
  font-size: var(--font-size-body-md);
  /* 18px — Figma node 45:459 */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-default);
  color: var(--color-content-default);
}

.c-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: var(--line-weight-default) solid var(--color-stroke-default);
  border-radius: var(--radius-3x);
  padding: var(--space-4) var(--space-4);
  width: 100%;
  gap: var(--space-3);
}

.c-input-value {
  font-family: var(--font-family);
  font-size: var(--font-size-title-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-default);
  color: var(--color-content-default);
  flex: 1;
  min-width: 0;
  cursor: text;
}

.c-input-value::placeholder {
  color: var(--color-content-subtle);
}

.c-input-support {
  font-family: var(--font-family);
  font-size: var(--font-size-body-sm);
  /* 14px */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-default);
  color: var(--color-content-subtle);
}


/* ─────────────────────────────────────────────
   CARD — AporteCard
   Usage:
     <div class="c-card-wrapper">
       <div class="c-card">...</div>
     </div>
   States: default (opened/pending action), is-done (confirmed)
───────────────────────────────────────────── */

.c-card-wrapper {
  padding: 0 var(--layout-outer-padding);
}

.c-card {
  border: var(--line-weight-default) solid var(--color-stroke-default);
  border-radius: var(--radius-3x);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Done/confirmed state — subtler border and muted text */
.c-card.is-done {
  border-color: var(--color-stroke-subtle);
}

/* Top row: primary content (ticker, price) + secondary content (shares, count) */
.c-card-top {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.c-card-primary {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.c-card-secondary {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  align-items: flex-end;
}

.c-card-ticker {
  font-family: var(--font-family);
  font-size: var(--font-size-title-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-default);
  color: var(--color-content-default);
  white-space: nowrap;
}

.c-card.is-done .c-card-ticker {
  font-size: var(--font-size-body-md);
  color: var(--color-content-subtle);
}

.c-card-price {
  font-family: var(--font-family);
  font-size: var(--font-size-body-md);
  line-height: var(--line-height-default);
  color: var(--color-content-default);
}

.c-live-dot {
  display: inline-block;
  width: var(--size-dot);
  height: var(--size-dot);
  border-radius: 50%;
  background-color: var(--color-surface-accent);
  vertical-align: middle;
  margin-bottom: var(--space-0-5);
  animation: live-pulse var(--duration-slow) ease-in-out infinite;
}

@keyframes live-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.2;
  }
}

.c-card-shares {
  font-family: var(--font-family);
  font-size: var(--font-size-title-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-default);
  color: var(--color-content-default);
  text-align: right;
}

.c-card.is-done .c-card-shares {
  font-size: var(--font-size-body-md);
  color: var(--color-content-subtle);
}

/* Skipped/"Hoje não" state — same layout as is-done but with strikethrough */
.c-card.is-skipped {
  border-color: var(--color-stroke-subtle);
}

.c-card.is-skipped .c-card-ticker {
  font-size: var(--font-size-body-md);
  color: var(--color-content-subtle);
  text-decoration: line-through;
}

.c-card.is-skipped .c-card-shares {
  font-size: var(--font-size-body-md);
  color: var(--color-content-subtle);
}

/* Count change display: "27 → 42" */
.c-card-count-change {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-family);
  font-size: var(--font-size-body-md);
  color: var(--color-content-default);
}

/* Bottom row: meta info + confirm button */
.c-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.c-card-btns {
  display: flex;
  gap: var(--space-3);
}

.c-card-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.c-card-meta-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.c-card-meta-text {
  font-family: var(--font-family);
  font-size: var(--font-size-body-md);
  line-height: var(--line-height-default);
  color: var(--color-content-subtle);
}

/* Meta-row arrow matches the subtle meta text (no inline style needed) */
.c-card-meta-row .c-icon {
  color: var(--color-content-subtle);
}

.c-skeleton {
  color: var(--color-content-subtle);
  animation: skeleton-blink var(--duration-skeleton) steps(1, end) infinite;
}

@keyframes skeleton-blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.2;
  }
}


/* ─────────────────────────────────────────────
   SECTION TITLE
   Usage:
     <div class="c-section-title">
       <p class="c-section-title-text">Distribuição por ativo</p>
       <button class="c-icon-btn c-icon-btn--ghost">
         <span class="c-icon c-icon--settings"></span>
       </button>
     </div>
───────────────────────────────────────────── */

.c-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--size-7);
  padding: 0 var(--layout-outer-padding);
}

.c-section-title-text {
  font-family: var(--font-family);
  font-size: var(--font-size-body-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-default);
  color: var(--color-content-default);
  flex: 1;
}


/* ─────────────────────────────────────────────
   CHECKBOX
   Usage:
     <input type="checkbox" class="c-checkbox">
   State class: is-checked (for JS-driven state; native :checked also works)
───────────────────────────────────────────── */

.c-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: var(--size-checkbox);
  height: var(--size-checkbox);
  flex-shrink: 0;
  border: var(--line-weight-default) solid var(--color-stroke-default);
  border-radius: var(--radius-default);
  background-color: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.c-checkbox:checked,
.c-checkbox.is-checked {
  background-color: var(--color-surface-inverse);
  border-color: var(--color-stroke-default);
}

.c-checkbox:checked::after,
.c-checkbox.is-checked::after {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  background-color: var(--color-content-inverse);
  -webkit-mask-image: url('../assets/icons/check.svg');
  mask-image: url('../assets/icons/check.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* ─────────────────────────────────────────────
   HEADER — Internal Lg variant (Figma node 110:1463)
   Two-section header: navigation row (64px) + large title block below.
   Usage in screen.js createScreen({ variant: 'internal-lg' })

   <header class="l-header">
     <div class="c-header-row c-header-row--internal-lg">
       <button class="c-icon-btn c-icon-btn--ghost">←</button>
       <div class="c-header-action" aria-hidden="true"></div>
     </div>
     <div class="c-header-title-block">
       <h1 class="c-header-title c-header-title--lg">Carteira</h1>
     </div>
   </header>
───────────────────────────────────────────── */

.c-header-row--internal-lg {
  justify-content: space-between;
  /* py-20px keeps icon (24px) centered → 20+24+20 = 64px total row height */
  padding: var(--space-6) var(--layout-outer-padding);
}

.c-header-title-block {
  padding: var(--space-4) var(--layout-outer-padding) var(--space-7);
  /* 12px top, 24px sides (via outer-padding), 24px bottom → 68px block */
}

.c-header-title--lg {
  font-size: var(--font-size-title-md);
  /* 32px — Figma node 110:1483 */
  text-align: left;
}

.c-header-subtitle {
  font-family: var(--font-family);
  font-size: var(--font-size-body-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-default);
  color: var(--color-content-error);
  margin-top: var(--space-2);
  display: none;
}

.c-header-subtitle.is-visible {
  display: block;
}

.c-header-subtitle-undo-btn {
  font-family: var(--font-family);
  font-size: var(--font-size-body-md);
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}


/* ─────────────────────────────────────────────
   MODAL — backdrop + bottom-sheet
   Usage:
     <div class="c-modal-backdrop"></div>
     <div class="c-modal">…</div>
   State: add .is-open to both to reveal
───────────────────────────────────────────── */

.c-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background-color: rgba(7, 7, 0, 0.5);
  opacity: 0;
  transition: opacity var(--duration-base) var(--easing-standard);
}

.c-modal-backdrop.is-open {
  opacity: 1;
}

.c-modal {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 201;
  max-width: var(--layout-max-width);
  margin: 0 auto;
  background-color: var(--color-bg);
  border-top: var(--line-weight-default) solid var(--color-stroke-default);
  border-top-left-radius: var(--radius-3x);
  border-top-right-radius: var(--radius-3x);
  transform: translateY(100%);
  transition: transform var(--duration-base) var(--easing-standard);
}

.c-modal.is-open {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .c-modal-backdrop {
    opacity: 1;
    transition: none;
  }

  .c-modal {
    transform: translateY(0);
    transition: none;
  }
}


/* ─────────────────────────────────────────────
   MODAL HEADER (Figma node 110:1167)
   Title left + close icon-button ghost right.
   Usage:
     <div class="c-modal-header">
       <p class="c-modal-header-title">Adicionar ativo</p>
       <button class="c-icon-btn c-icon-btn--ghost" aria-label="Fechar">
         <span class="c-icon c-icon--close" aria-hidden="true"></span>
       </button>
     </div>
───────────────────────────────────────────── */

.c-modal-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-5);
  padding: var(--space-7) var(--layout-outer-padding);
}

.c-modal-header-title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-family);
  font-size: var(--font-size-body-md);
  /* 18px — Figma node 110:1169 */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-default);
  color: var(--color-content-default);
}


/* ─────────────────────────────────────────────
   INPUT SM (Figma node 110:1071)
   Real <input> with label above. Distinct from c-input (large display-only).
   Usage:
     <div class="c-input-sm">
       <label class="c-input-sm-label" for="ticker">Ticker</label>
       <input class="c-input-sm-input" id="ticker" type="text" placeholder="Ex: MXRF11">
     </div>
───────────────────────────────────────────── */

.c-input-sm {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  /* 4px between label and input — Figma node 110:1071 */
  flex: 1;
  min-width: 0;
}

.c-input-sm-label {
  font-family: var(--font-family);
  font-size: var(--font-size-body-sm);
  /* 14px — Figma node 110:1064 */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-default);
  color: var(--color-content-default);
}

.c-input-sm-input {
  display: block;
  width: 100%;
  border: var(--line-weight-default) solid var(--color-stroke-default);
  border-radius: var(--radius-3x);
  /* 6px — Figma node 110:1065 */
  padding: var(--space-3) var(--space-4);
  /* 8px 12px */
  font-family: var(--font-family);
  font-size: var(--font-size-label-lg);
  /* 28px — Figma node 110:1066 */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-default);
  color: var(--color-content-default);
  background-color: var(--color-bg);
  text-transform: uppercase;
}

.c-input-sm-input[readonly] {
  color: var(--color-content-subtle);
}

.c-input-sm-input::placeholder {
  color: var(--color-content-subtle);
  opacity: 0.6;
  text-transform: none;
}

/* Shares input: numbers, no uppercase */
.c-input-sm-input--numeric {
  text-transform: none;
}

/* Ticker field in 3-column modal layout: takes twice the flex space of numeric fields */
.c-input-sm--wide {
  flex: 2;
}

/* ─────────────────────────────────────────────
   INPUT SM — with embedded action button (inside the border)
   Usage:
     <div class="c-input-sm c-input-sm--with-action">
       <label class="c-input-sm-label" for="id">Peso alvo</label>
       <div class="c-input-sm-field">
         <input class="c-input-sm-input c-input-sm-input--numeric" id="id">
         <button class="c-icon-btn c-icon-btn--ghost c-icon-btn--field-action" type="button">
           <span class="c-icon c-icon--sm c-icon--reload" aria-hidden="true"></span>
         </button>
       </div>
     </div>
───────────────────────────────────────────── */

.c-input-sm--with-action .c-input-sm-field {
  display: flex;
  align-items: center;
  border: var(--line-weight-default) solid var(--color-stroke-default);
  border-radius: var(--radius-3x);
  overflow: hidden;
}

.c-input-sm--with-action .c-input-sm-input {
  border: none;
  border-radius: 0;
  flex: 1;
  min-width: 0;
}

.c-input-sm--with-action .c-input-sm-input[readonly] {
  color: var(--color-content-default);
}

.c-icon-btn--field-action {
  flex-shrink: 0;
  width: var(--size-btn-sm);
  height: var(--size-btn-sm);
  border-radius: 0;
  color: var(--color-content-default);
}

.c-icon-btn--field-action:hover {
  opacity: 1;
}

@keyframes spin-cw-half {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(180deg);
  }
}

.c-icon--reload.is-spinning {
  animation: spin-cw-half var(--duration-base) ease-out forwards;
}


/* ─────────────────────────────────────────────
   MODAL ROW — inline form (2 InputSm + submit button)
   Usage:
     <div class="c-modal-row">
       <div class="c-input-sm">...</div>
       <div class="c-input-sm">...</div>
       <button class="c-icon-btn">submit icon</button>
     </div>
───────────────────────────────────────────── */

.c-modal-row {
  display: flex;
  align-items: flex-end;
  /* button aligns to bottom of inputs */
  gap: var(--space-4);
  /* 12px between elements */
  padding: 0 var(--layout-outer-padding) var(--space-4);
}


/* ─────────────────────────────────────────────
   MODAL SUPPORT TEXT — error message below the form row
   Usage:
     <p class="c-modal-support" role="alert"></p>   (empty = no display)
     <p class="c-modal-support" role="alert">Ticker já está na carteira.</p>
───────────────────────────────────────────── */

.c-modal-support {
  padding: var(--space-3) var(--layout-outer-padding) var(--space-7);
  font-family: var(--font-family);
  font-size: var(--font-size-body-sm);
  /* 14px — Figma node 110:4037 */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-default);
  color: var(--color-content-error);
}

.c-modal-support:empty {
  display: none;
}

.c-modal-support--success {
  color: var(--color-content-success);
}

.c-modal-footer {
  padding: 0 var(--layout-outer-padding) var(--space-11);
}


/* ─────────────────────────────────────────────
   WEIGHT TOGGLE — label + segmented toggle inside the asset modal
   Sits between the modal header and the c-modal-row.
   Usage:
     <div class="c-weight-toggle">
       <p class="c-weight-toggle-label">Peso alvo · igual</p>
       <div class="c-toggle" role="group" aria-label="Peso alvo">
         <button class="c-toggle-option is-active" type="button" aria-pressed="true" aria-label="...">
           <span class="c-icon c-icon--sm c-icon--equal" aria-hidden="true"></span>
         </button>
         <button class="c-toggle-option" type="button" aria-pressed="false" aria-label="...">
           <span class="c-icon c-icon--sm c-icon--unequal" aria-hidden="true"></span>
         </button>
       </div>
     </div>
───────────────────────────────────────────── */

.c-weight-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--layout-outer-padding) var(--space-3);
}

.c-weight-toggle-label {
  font-family: var(--font-family);
  font-size: var(--font-size-body-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-default);
  color: var(--color-content-default);
}


/* ─────────────────────────────────────────────
   SUGGESTIONS — autocomplete list rendered below c-modal-row
   Usage:
     <div class="c-ticker-wrapper">
       <div class="c-modal-row">…</div>
       <div class="c-suggestions" role="listbox" aria-label="...">
         <button class="c-suggestion-item" role="option">...</button>
         <!-- or: -->
         <p class="c-suggestions-empty">Nenhum ativo encontrado</p>
       </div>
     </div>
   Show/hide by toggling .is-open.
───────────────────────────────────────────── */

.c-ticker-wrapper {
  position: relative;
}

.c-suggestions {
  display: none;
  position: absolute;
  top: 100%;
  left: var(--layout-outer-padding);
  right: var(--layout-outer-padding);
  z-index: 10;
  border: var(--line-weight-default) solid var(--color-stroke-default);
  background: var(--color-bg);
  max-height: calc(2 * (var(--size-suggestion-item) + 2 * var(--space-4)) + var(--suggestion-peek));
  overflow-y: auto;
}

.c-suggestions.is-open {
  display: block;
}

.c-suggestion-item {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  background: none;
  border: none;
  border-bottom: var(--line-weight-subtle) solid var(--color-stroke-subtle);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-family);
}

.c-suggestion-item:last-child {
  border-bottom: none;
}

.c-suggestion-item:hover,
.c-suggestion-item:focus {
  background: var(--color-surface-subtle);
  outline: none;
}

.c-suggestion-item-ticker {
  font-size: var(--font-size-label-lg);
  color: var(--color-content-default);
  min-width: 6ch;
  line-height: var(--line-height-default);
}

.c-suggestion-item-name {
  flex: 1;
  font-size: var(--font-size-body-sm);
  color: var(--color-content-subtle);
  line-height: var(--line-height-body);
}

.c-suggestions-empty {
  padding: var(--space-4) var(--space-5);
  font-size: var(--font-size-body-sm);
  color: var(--color-content-subtle);
  font-family: var(--font-family);
}

.c-modal-body {
  font-size: var(--font-size-body-md);
  line-height: var(--line-height-body);
  color: var(--color-content-default);
  padding: 0 var(--space-7) var(--space-5);
}


/* ─────────────────────────────────────────────
   LIST ROW (Figma node 110:1631)
   Asset row with title, description, edit + delete actions, dashed divider.
   Usage:
     <div class="c-list-row">
       <div class="c-list-row-content">
         <div class="c-list-row-primary">
           <p class="c-list-row-title">MXRF11 · 6 cotas</p>
           <p class="c-list-row-description">Peso alvo · 20%</p>
         </div>
         <div class="c-list-row-actions">
           <button class="c-icon-btn c-icon-btn--sm c-icon-btn--secondary">pen</button>
           <button class="c-icon-btn c-icon-btn--sm c-icon-btn--secondary">trash</button>
         </div>
       </div>
       <div class="c-divider c-divider--subtle"></div>
     </div>
───────────────────────────────────────────── */

.c-list-row {
  display: flex;
  flex-direction: column;
}

.c-list-row-content {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  /* 16px between primary and actions — Figma node 110:1498 */
  padding: var(--space-4) var(--layout-outer-padding);
  /* 12px 24px */
}

.c-list-row-primary {
  flex: 1;
  min-width: 0;
}

.c-list-row-title {
  font-family: var(--font-family);
  font-size: var(--font-size-body-md);
  /* 18px — Figma node 110:1500 */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-default);
  color: var(--color-content-default);
  white-space: nowrap;
}

.c-list-row-description {
  font-family: var(--font-family);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  color: var(--color-content-subtle);
}


.c-list-row-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  /* 8px between action buttons — Figma node 110:1502 */
  flex-shrink: 0;
}


/* ─────────────────────────────────────────────
   BUTTON BAR — fixed footer CTA area in Carteira screen
   Usage (inside l-screen, after l-screen-content):
     <div class="l-button-bar">
       <button class="c-button c-button--lg c-button--primary c-button--block">CALCULAR APORTE</button>
       <button class="c-button c-button--lg c-button--secondary c-button--block">ADICIONAR ATIVO</button>
     </div>
───────────────────────────────────────────── */

.l-button-bar {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  /* 12px between stacked buttons */
  padding: var(--space-5) var(--layout-outer-padding);
  /* 16px 24px */
  background-color: var(--color-bg);
}


/* Carteira empty state — text only, no image/body (Figma: dashed box + centred text) */
.c-empty-state--simple {
  gap: 0;
}

.c-empty-state--simple .c-empty-state-heading {
  font-size: var(--font-size-body-md);
  color: var(--color-content-subtle);
}


/* ─────────────────────────────────────────────
   TOGGLE — two-option segmented control
   Left option (first-child): 38px, rounded only on the left.
   Right option (last-child): 36px, rounded only on the right, overlaps left by 2px.
   Active  (.is-active): Surface/Accent, Content/Inverse icon, no shadow, 2px below (z-index 1).
   Inactive (default):   Surface/Subtle, Content/Subtle icon, with shadow, on top (z-index 2).

   Usage:
     <div class="c-toggle" role="group" aria-label="...">
       <button class="c-toggle-option is-active" type="button" aria-pressed="true" aria-label="...">
         <span class="c-icon c-icon--sm c-icon--..."></span>
       </button>
       <button class="c-toggle-option" type="button" aria-pressed="false" aria-label="...">
         <span class="c-icon c-icon--sm c-icon--..."></span>
       </button>
     </div>
───────────────────────────────────────────── */

.c-toggle {
  display: inline-flex;
  align-items: flex-start;
  flex-shrink: 0;
}

.c-toggle-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--size-btn-sm);
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  position: relative;
  background-color: var(--color-surface-subtle);
  color: var(--color-content-subtle);
  box-shadow: var(--shadow-pixel);
  z-index: 2;
}

.c-toggle-option:first-child {
  width: 38px;
  border-radius: var(--radius-default) 0 0 var(--radius-default);
}

.c-toggle-option:last-child {
  width: 36px;
  border-radius: 0 var(--radius-default) var(--radius-default) 0;
  margin-left: -2px;
}

.c-toggle-option.is-active {
  background-color: var(--color-surface-accent);
  color: var(--color-content-inverse);
  box-shadow: none;
  z-index: 1;
  margin-top: 2px;
}

.c-toggle-option:not(.is-active):hover {
  opacity: 0.9;
}

.c-toggle-option:not(.is-active):active {
  box-shadow: none;
  transform: translate(var(--space-1), var(--space-1));
}


/* ── Celebration sign ── */
.c-celebration-sign {
  display: inline-block;
  background: var(--color-surface-accent);
  color: var(--color-content-inverse);
  border: var(--line-weight-default) solid var(--color-stroke-default);
  box-shadow: var(--shadow-celebration);
  padding: var(--space-5) var(--space-15);
  text-align: center;
  white-space: pre;
  font-size: var(--font-size-title-lg);
  line-height: var(--line-height-tight);
  animation: none;
}


/* ─────────────────────────────────────────────
   MENU — slide-in navigation list (menu.js)
   Rows render as <button> (internal) or <a> (external link).
   .c-menu-nav: two-block flex column filling the screen height.
   .c-menu-block: groups items (top = Carteira, bottom = Sobre + Feedback).
───────────────────────────────────────────── */

/* l-screen--menu: makes l-screen-content a flex column so c-menu-nav can fill remaining height */
.l-screen--menu .l-screen-content {
  display: flex;
  flex-direction: column;
}

.c-menu-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-5) 0;
}

.c-menu-block {
  display: flex;
  flex-direction: column;
}

/* Legacy selector kept for reference; no longer used by the nav root. */
.c-menu-list {
  display: flex;
  flex-direction: column;
  padding-top: var(--space-3);
}

.c-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  width: 100%;
  padding: var(--space-5) var(--layout-outer-padding);
  background: transparent;
  border: none;
  border-bottom: var(--line-weight-subtle) solid var(--color-stroke-subtle);
  cursor: pointer;
  font-family: var(--font-family);
  font-size: var(--font-size-body-md);
  line-height: var(--line-height-default);
  color: var(--color-content-default);
  text-align: left;
  text-decoration: none;
}

.c-menu-item:hover {
  background-color: var(--color-surface-subtle);
}

.c-menu-item-label {
  flex: 1;
  min-width: 0;
}

/* ─────────────────────────────────────────────
   SOBRE — "Sobre o Enche o Papo" screen content (menu.js → openSobreScreen)
───────────────────────────────────────────── */

.c-sobre {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-7) var(--layout-outer-padding);
}

.c-sobre-version {
  font-family: var(--font-family);
  font-size: var(--font-size-body-sm);
  color: var(--color-content-subtle);
}

.c-sobre-description {
  font-family: var(--font-family);
  font-size: var(--font-size-body-md);
  line-height: var(--line-height-default);
  color: var(--color-content-default);
}


/* ── Card blink (8-bit recalculate effect) ── */

@keyframes card-blink {

  0%,
  100% {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}

.l-aporte-list.is-recalculating .c-card {
  animation: card-blink var(--duration-card-blink) steps(1) 1;
}


/* ── AdSense ── */

.adsbygoogle--visible {
  display: block;
}

/* ── Utility ── */

/* Must be last — components.css loads after style.css, so component display
   values would otherwise win over the utility class of equal specificity. */
.u-hidden {
  display: none;
}