/* ═══════════════════════════════════════════════════════════════════════════
   ui-polish.css  —  Visual refinement layer for Sueldo Claro
   ───────────────────────────────────────────────────────────────────────────
   Purpose:  Elevate the visual polish, interactive feedback and animation
             fluidity of the existing site without altering structure, text,
             or logic.  This file is loaded LAST to additively enhance.

   Principles:
   • GPU-friendly:  only  transform / opacity / box-shadow / filter
   • Natural curves: cubic-bezier(.22,.61,.36,1) — a gentle decelerate
   • Accessibility:  @media (prefers-reduced-motion:reduce) kills motion
   • Minimal weight: no new HTML required, purely CSS selectors
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 0.  Timing tokens ─────────────────────────────────────────────────── */
:root {
  --ui-ease: cubic-bezier(.22, .61, .36, 1);
  --ui-ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --ui-fast: 160ms;
  --ui-mid: 220ms;
  --ui-slow: 340ms;
}

/* ── 1.  Topbar – subtle depth on scroll ───────────────────────────────── */
.topbar {
  transition: box-shadow var(--ui-mid) ease,
              background-color var(--ui-mid) ease;
}
.topbar.sc-scrolled {
  box-shadow: 0 1px 0 rgba(22, 122, 91, .06),
              0 4px 16px rgba(22, 122, 91, .04);
}
html[data-theme="dark"] .topbar.sc-scrolled {
  box-shadow: 0 1px 0 rgba(69, 201, 156, .08),
              0 4px 16px rgba(0, 0, 0, .25);
}

/* ── 2.  Nav links – underline draw animation refinement ───────────────── */
.toplinks a {
  transition: color var(--ui-fast) ease;
}
.toplinks a::after {
  transition: transform var(--ui-mid) var(--ui-ease);
}

/* ── 3.  Buttons – global micro-interaction polish ─────────────────────── */
/* Primary CTA */
.home-primary {
  transition: transform var(--ui-fast) var(--ui-ease),
              background-color var(--ui-fast) ease,
              box-shadow var(--ui-mid) ease;
}
.home-primary:hover {
  transform: translateY(-2px) scale(1.01);
}
.home-primary:active {
  transform: translateY(0) scale(.975);
  transition-duration: 80ms;
}

/* Secondary CTA */
.home-secondary {
  transition: transform var(--ui-fast) var(--ui-ease),
              background-color var(--ui-fast) ease,
              border-color var(--ui-fast) ease,
              box-shadow var(--ui-mid) ease;
}
.home-secondary:hover {
  transform: translateY(-2px) scale(1.01);
}
.home-secondary:active {
  transform: translateY(0) scale(.975);
  transition-duration: 80ms;
}

/* Focus-visible ring (global) */
.home-primary:focus-visible,
.home-secondary:focus-visible,
.hub-card:focus-visible,
.sc-hero-calc-cta:focus-visible,
.sc-preset-btn:focus-visible,
.calc-reset:focus-visible,
.calculator .button:focus-visible,
#sc-finder-reset:focus-visible,
.guide-forum-card:focus-visible,
.tooltab:focus-visible,
.page-back:focus-visible,
.calculator-related-pills a:focus-visible,
.calculator-top-actions a:focus-visible,
.info-contact-card a:focus-visible,
.footer-links a:focus-visible {
  outline: 2px solid var(--sc-green);
  outline-offset: 3px;
  transition: outline-offset var(--ui-fast) ease;
}

/* ── 4.  Hub tool cards – elevation & icon micro-bounce ────────────────── */
.hub-card {
  transition: transform var(--ui-mid) var(--ui-ease),
              box-shadow var(--ui-mid) ease,
              border-color var(--ui-mid) ease;
}
.hub-card:hover {
  transform: translateY(-5px) scale(1.005);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .04),
              0 16px 38px rgba(22, 122, 91, .10);
}
.hub-card:active {
  transform: translateY(-1px) scale(.995);
  transition-duration: 80ms;
}
.hub-icon {
  transition: background-color var(--ui-fast) ease,
              transform var(--ui-mid) var(--ui-ease-bounce);
}
.hub-card:hover .hub-icon {
  transform: scale(1.08) translateY(-1px);
}

/* ── 5.  Home feature card – refined lift ──────────────────────────────── */
.home-feature {
  transition: transform var(--ui-mid) var(--ui-ease),
              box-shadow var(--ui-mid) ease,
              border-color var(--ui-mid) ease;
}
.home-feature:hover {
  transform: translateY(-4px) scale(1.003);
}

/* ── 6.  Hero salary card CTA – arrow nudge ────────────────────────────── */
.sc-hero-calc-cta {
  transition: background-color var(--ui-fast) ease,
              transform var(--ui-fast) var(--ui-ease),
              box-shadow var(--ui-mid) ease;
}
.sc-hero-calc-cta:hover {
  transform: translateY(-2px);
}
.sc-hero-calc-cta:active {
  transform: translateY(0) scale(.98);
  transition-duration: 80ms;
}
.sc-hero-calc-cta b {
  display: inline-block;
  transition: transform var(--ui-mid) var(--ui-ease);
}
.sc-hero-calc-cta:hover b {
  transform: translateX(4px);
}

/* ── 7.  Preset salary pills ───────────────────────────────────────────── */
.sc-preset-btn {
  transition: background-color var(--ui-fast) ease,
              border-color var(--ui-fast) ease,
              color var(--ui-fast) ease,
              transform var(--ui-fast) var(--ui-ease),
              box-shadow var(--ui-fast) ease;
}
.sc-preset-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 10px rgba(22, 122, 91, .10);
}
.sc-preset-btn:active {
  transform: translateY(0) scale(.96);
  transition-duration: 60ms;
}

/* ── 8.  Form fields – softer border glow on focus ─────────────────────── */
.calculator input:focus,
.calculator select:focus,
.calculator textarea:focus,
.sc-hero-input:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--sc-green);
  box-shadow: 0 0 0 3.5px rgba(22, 122, 91, .10),
              0 2px 8px rgba(22, 122, 91, .06);
  transition: border-color var(--ui-fast) ease,
              box-shadow var(--ui-mid) var(--ui-ease);
}

/* Hover state for input fields (pre-focus) */
.calculator input:not(:focus):hover,
.calculator select:not(:focus):hover,
.calculator textarea:not(:focus):hover,
.field input:not(:focus):hover,
.field select:not(:focus):hover,
.field textarea:not(:focus):hover {
  border-color: #a8ccbc;
  transition: border-color var(--ui-fast) ease;
}

/* ── 9.  FAQ – smoother accordion open ─────────────────────────────────── */
.faq-list details p {
  animation-duration: 280ms;
  animation-timing-function: var(--ui-ease);
}
.faq-list summary {
  transition: color var(--ui-fast) ease,
              background-color var(--ui-mid) ease;
}
.faq-chevron,
.faq-chevron::before {
  transition: transform var(--ui-mid) var(--ui-ease),
              top var(--ui-mid) var(--ui-ease);
}

/* ── 10.  Source cards – gentle underline slide ─────────────────────────── */
.sources-section .source-card {
  transition: border-color var(--ui-mid) ease,
              transform var(--ui-mid) var(--ui-ease) !important;
}
.sources-section .source-card:hover {
  transform: translateY(-3px) !important;
}
.source-link {
  position: relative;
  transition: color var(--ui-fast) ease;
}

/* ── 11.  Footer links – quiet hover ───────────────────────────────────── */
.footer-links a {
  transition: color var(--ui-fast) ease !important;
}
.footer-links a:hover {
  color: var(--sc-green) !important;
}

/* ── 12.  Calculator panel – result feedback refinement ─────────────────── */
.calculator {
  transition: box-shadow var(--ui-mid) ease;
}
@keyframes uiResultGlow {
  0%   { box-shadow: inset 0 0 0 0 rgba(22, 122, 91, 0); }
  40%  { box-shadow: inset 0 0 0 2.5px rgba(22, 122, 91, .09); }
  100% { box-shadow: inset 0 0 0 0 rgba(22, 122, 91, 0); }
}
.result.calc-updated {
  animation: uiResultGlow .42s var(--ui-ease);
}

/* ── 13.  Calculator action buttons ────────────────────────────────────── */
.calculator .button {
  transition: transform var(--ui-fast) var(--ui-ease),
              box-shadow var(--ui-mid) ease,
              background-color var(--ui-fast) ease;
}
.calculator .button:hover {
  transform: translateY(-2px);
}
.calculator .button:active {
  transform: translateY(0) scale(.975);
  transition-duration: 80ms;
}
.calc-reset {
  transition: border-color var(--ui-fast) ease,
              color var(--ui-fast) ease,
              background-color var(--ui-fast) ease,
              transform var(--ui-fast) var(--ui-ease);
}
.calc-reset:hover {
  transform: translateY(-1px);
}
.calc-reset:active {
  transform: translateY(0) scale(.97);
  transition-duration: 60ms;
}

/* ── 14.  Related tool pills – consistent hover ────────────────────────── */
.calculator-related-pills a,
.calculator-top-actions a {
  transition: border-color var(--ui-fast) ease,
              background-color var(--ui-fast) ease,
              color var(--ui-fast) ease,
              transform var(--ui-fast) var(--ui-ease),
              box-shadow var(--ui-fast) ease;
}
.calculator-related-pills a:hover,
.calculator-top-actions a:hover {
  transform: translateY(-1px);
}
.calculator-related-pills a:active,
.calculator-top-actions a:active {
  transform: translateY(0) scale(.97);
  transition-duration: 60ms;
}

/* ── 15.  Tooltabs – smooth state switch ───────────────────────────────── */
.tooltab {
  transition: background-color var(--ui-fast) ease,
              color var(--ui-fast) ease,
              border-color var(--ui-fast) ease,
              transform var(--ui-fast) var(--ui-ease),
              box-shadow var(--ui-fast) ease;
}
.tooltab:hover {
  transform: translateY(-1px);
}
.tooltab:active {
  transform: translateY(0) scale(.97);
  transition-duration: 60ms;
}

/* ── 16.  Page back button – arrow feedback ────────────────────────────── */
.page-back {
  transition: border-color var(--ui-fast) ease,
              color var(--ui-fast) ease,
              background-color var(--ui-fast) ease,
              transform var(--ui-fast) var(--ui-ease);
}
.page-back span {
  transition: transform var(--ui-mid) var(--ui-ease);
}
.page-back:hover span {
  transform: translateX(-3px);
}
.page-back:active {
  transform: translateY(0) scale(.97);
  transition-duration: 60ms;
}

/* ── 17.  Institutional cards ──────────────────────────────────────────── */
.info-minimal-card {
  transition: border-color var(--ui-mid) ease,
              background-color var(--ui-mid) ease,
              transform var(--ui-mid) var(--ui-ease),
              box-shadow var(--ui-mid) ease;
}
.info-minimal-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(22, 122, 91, .06);
}
.info-contact-card a {
  transition: background-color var(--ui-fast) ease,
              transform var(--ui-fast) var(--ui-ease);
}
.info-contact-card a:hover {
  transform: translateY(-1px);
}
.info-contact-card a:active {
  transform: translateY(0) scale(.97);
  transition-duration: 60ms;
}

/* ── 18.  Privacy panel rows ───────────────────────────────────────────── */
.privacy-row {
  transition: background-color var(--ui-mid) ease;
}
.privacy-row:hover {
  background-color: rgba(22, 122, 91, .02);
}
html[data-theme="dark"] .privacy-row:hover {
  background-color: rgba(69, 201, 156, .03);
}

/* ── 19.  Chat launcher – breathing glow refinement ────────────────────── */
.chat-launch {
  transition: transform var(--ui-mid) var(--ui-ease),
              box-shadow var(--ui-mid) ease,
              background-color var(--ui-fast) ease !important;
}
.chat-launch:hover,
.chat-launch:focus-visible {
  box-shadow: 0 14px 36px rgba(22, 122, 91, .22),
              0 0 0 3px rgba(22, 122, 91, .08) !important;
}

/* ── 20.  Guides carousel cards ────────────────────────────────────────── */
.guide-forum-card {
  transition: transform var(--ui-mid) var(--ui-ease),
              box-shadow var(--ui-mid) ease,
              border-color var(--ui-mid) ease;
}
.guide-forum-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(22, 122, 91, .08);
}
.guide-forum-card:active {
  transform: translateY(-1px);
  transition-duration: 80ms;
}

/* ── 21.  Brand mark – subtle on hover ─────────────────────────────────── */
.brand-mark {
  transition: transform var(--ui-mid) var(--ui-ease-bounce),
              box-shadow var(--ui-mid) ease;
}

/* ── 22.  Legal deduction badges – gentle hover pop ────────────────────── */
.home-legal-badge {
  transition: border-color var(--ui-fast) ease,
              background-color var(--ui-fast) ease,
              transform var(--ui-fast) var(--ui-ease);
}
.home-legal-badge:hover {
  transform: translateY(-1px);
}

/* ── 23.  Market strip – rate value emphasis ────────────────────────────── */
.market-change {
  transition: transform var(--ui-fast) ease;
}
.market-item:hover .market-change {
  transform: scale(1.06);
}

/* ── 24.  Deduction chips – interactive depth ──────────────────────────── */
.sc-deduc-chip {
  transition: border-color var(--ui-fast) ease,
              box-shadow var(--ui-fast) ease,
              transform var(--ui-fast) var(--ui-ease);
}
.sc-deduc-chip:hover {
  border-color: #c0d4ca;
  box-shadow: 0 2px 8px rgba(22, 122, 91, .06);
  transform: translateY(-1px);
}

/* ── 25.  Net result card – glow on value update ───────────────────────── */
.sc-hero-net-card {
  transition: border-color var(--ui-mid) ease,
              box-shadow var(--ui-mid) ease;
}

/* ── 26.  Net progress bar – smooth width animation ────────────────────── */
.sc-hero-bar-net,
.sc-hero-bar-deduc {
  transition: width .4s var(--ui-ease);
}

/* ── 27.  Finder filter buttons ────────────────────────────────────────── */
.sc-finder-filters button {
  transition: background-color var(--ui-fast) ease,
              color var(--ui-fast) ease,
              border-color var(--ui-fast) ease,
              transform var(--ui-fast) var(--ui-ease),
              box-shadow var(--ui-fast) ease;
}
.sc-finder-filters button:hover {
  transform: translateY(-1px);
}
.sc-finder-filters button:active {
  transform: translateY(0) scale(.96);
  transition-duration: 60ms;
}
.sc-finder-filters button[aria-pressed="true"] {
  box-shadow: 0 2px 8px rgba(22, 122, 91, .12);
}

/* ── 28.  Search field – clear focus treatment ─────────────────────────── */
.sc-finder-search {
  transition: border-color var(--ui-fast) ease,
              box-shadow var(--ui-mid) ease;
}
.sc-finder-search:focus-within {
  border-color: var(--sc-green);
  box-shadow: 0 0 0 3px rgba(22, 122, 91, .08),
              0 4px 12px rgba(22, 122, 91, .04);
}

/* ── 29.  Review badge hover ───────────────────────────────────────────── */
.review-badge {
  transition: border-color var(--ui-fast) ease,
              transform var(--ui-fast) var(--ui-ease);
}
.review-badge:hover {
  border-color: #b8d5c8;
  transform: translateY(-1px);
}

/* ── 30.  Zen button – consistent pop ──────────────────────────────────── */
.market-zen-btn {
  transition: background-color var(--ui-fast) ease,
              border-color var(--ui-fast) ease,
              transform var(--ui-fast) var(--ui-ease);
}
.market-zen-btn:active {
  transform: translateY(0) scale(.95);
  transition-duration: 60ms;
}

/* ── 31.  Net advanced details toggle ──────────────────────────────────── */
.net-advanced > summary:after {
  transition: transform var(--ui-mid) var(--ui-ease);
}
.net-why > summary:after {
  transition: transform var(--ui-fast) var(--ui-ease);
}

/* ── 32.  Carousel navigation controls ─────────────────────────────────── */
.guide-forum-control {
  transition: background-color var(--ui-fast) ease,
              border-color var(--ui-fast) ease,
              transform var(--ui-fast) var(--ui-ease),
              opacity var(--ui-fast) ease;
}
.guide-forum-control:hover {
  transform: scale(1.06);
}
.guide-forum-control:active {
  transform: scale(.94);
  transition-duration: 60ms;
}

/* ── 33.  SAC method toggle ────────────────────────────────────────────── */
.sac-method {
  transition: background-color var(--ui-fast) ease,
              color var(--ui-fast) ease,
              box-shadow var(--ui-fast) ease,
              transform var(--ui-fast) var(--ui-ease);
}
.sac-method:hover {
  transform: translateY(-1px);
}
.sac-method:active {
  transform: translateY(0) scale(.97);
  transition-duration: 60ms;
}

/* ── 34.  Calculator nav compact – refined active state ─────────────────── */
.calculator-nav-compact a {
  transition: border-color var(--ui-fast) ease,
              background-color var(--ui-fast) ease,
              color var(--ui-fast) ease,
              transform var(--ui-fast) var(--ui-ease),
              box-shadow var(--ui-fast) ease;
}
.calculator-nav-compact a:active {
  transform: scale(.96);
  transition-duration: 60ms;
}

/* ── 35.  Methodology link ─────────────────────────────────────────────── */
.sources-methodology-link {
  transition: color var(--ui-fast) ease,
              border-color var(--ui-fast) ease;
}

/* ── 36.  Toolroute link ───────────────────────────────────────────────── */
.toolroute {
  transition: border-color var(--ui-fast) ease,
              background-color var(--ui-fast) ease,
              color var(--ui-fast) ease,
              transform var(--ui-fast) var(--ui-ease);
}
.toolroute:hover {
  transform: translateY(-1px);
}

/* ── 37.  Print / PDF button ───────────────────────────────────────────── */
.result-print {
  transition: background-color var(--ui-fast) ease,
              border-color var(--ui-fast) ease,
              transform var(--ui-fast) var(--ui-ease);
}
.result-print:hover {
  transform: translateY(-1px);
}
.result-print:active {
  transform: scale(.96);
  transition-duration: 60ms;
}

/* ── 38.  Dark mode form field focus adjustments ───────────────────────── */
html[data-theme="dark"] .calculator input:focus,
html[data-theme="dark"] .calculator select:focus,
html[data-theme="dark"] .calculator textarea:focus,
html[data-theme="dark"] .field input:focus,
html[data-theme="dark"] .field select:focus,
html[data-theme="dark"] .field textarea:focus {
  box-shadow: 0 0 0 3.5px rgba(69, 201, 156, .12),
              0 2px 8px rgba(69, 201, 156, .06);
}
html[data-theme="dark"] .calculator input:not(:focus):hover,
html[data-theme="dark"] .calculator select:not(:focus):hover,
html[data-theme="dark"] .field input:not(:focus):hover,
html[data-theme="dark"] .field select:not(:focus):hover {
  border-color: rgba(69, 201, 156, .3);
}

/* ── 39.  Dark mode card hover adjustments ─────────────────────────────── */
html[data-theme="dark"] .hub-card:hover {
  box-shadow: 0 8px 22px rgba(0, 0, 0, .3),
              0 16px 42px rgba(0, 0, 0, .2);
}
html[data-theme="dark"] .info-minimal-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}
html[data-theme="dark"] .guide-forum-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}

/* ── 40.  Skip link – accessible visible-on-focus ──────────────────────── */
.skip-link {
  transition: transform var(--ui-fast) var(--ui-ease);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY: Reduced Motion
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .hub-card,
  .home-feature,
  .home-primary,
  .home-secondary,
  .sc-hero-calc-cta,
  .sc-preset-btn,
  .calculator .button,
  .calc-reset,
  .tooltab,
  .page-back,
  .info-minimal-card,
  .info-contact-card a,
  .guide-forum-card,
  .guide-forum-control,
  .calculator-related-pills a,
  .calculator-top-actions a,
  .calculator-nav-compact a,
  .market-zen-btn,
  .home-legal-badge,
  .sc-deduc-chip,
  .review-badge,
  .result-print,
  .sac-method,
  .toolroute,
  .source-card,
  .sc-finder-filters button {
    transform: none !important;
    transition: none !important;
  }

  .sc-hero-calc-cta b,
  .page-back span,
  .hub-icon,
  .market-change,
  .brand-mark {
    transform: none !important;
    transition: none !important;
  }

  /* Rotation draws the FAQ arrow; reduced motion must only stop animation. */
  .faq-chevron,
  .faq-chevron::before,
  .faq-chevron::after {
    transition: none !important;
  }
}

/* ── Freshness Badge for Calculators ────────────────────────────────────── */
.sc-freshness-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  margin-bottom: 12px;
  border-radius: 9999px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.22);
  color: #047857;
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
html[data-theme="dark"] .sc-freshness-pill {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(52, 211, 153, 0.28);
  color: #34d399;
}
.sc-freshness-dot {
  width: 6.5px;
  height: 6.5px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
  animation: scFreshnessPulse 2.2s infinite ease-in-out;
}
@keyframes scFreshnessPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.85); }
}
@media (prefers-reduced-motion: reduce) {
  .sc-freshness-dot {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRINT: Strip all visual enhancements
   ═══════════════════════════════════════════════════════════════════════════ */
@media print {
  * {
    transition: none !important;
    animation: none !important;
    box-shadow: none !important;
  }
}