:root {
      --primary: #007AFF;
      --success: #34C759;
      --danger: #FF3B30;
      --warning: #FF9500;
      --accent: #FFCC00;
      --info: #5AC8FA;
      --purple: #5856D6;
      --background: #F5F5F7;
      --background-elevated: #FFFFFF;
      --background-secondary: #E8E8ED;
      --separator: rgba(60, 60, 67, 0.12);
      --separator-opaque: #C6C6C8;
      --text-primary: #1d1d1f;
      --text-secondary: #86868b;
      --text-tertiary: #6e6e73;
      --safe-area-top: env(safe-area-inset-top, 0px);
      --safe-area-bottom: env(safe-area-inset-bottom, 0px);
      --navbar-height: 52px;
    }

    [data-theme="dark"] {
      --primary: #0A84FF;
      --success: #30D158;
      --danger: #FF453A;
      --warning: #FF9F0A;
      --accent: #FFD60A;
      --info: #64D2FF;
      --purple: #5E5CE6;
      --background: #1c1c1e;
      --background-elevated: #2c2c2e;
      --background-secondary: #3a3a3c;
      --separator: rgba(255, 255, 255, 0.1);
      --separator-opaque: #48484a;
      --text-primary: #f5f5f7;
      --text-secondary: #98989d;
      --text-tertiary: #8e8e93;
    }

    *,
    *::before,
    *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      -webkit-text-size-adjust: 100%;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
      background: var(--background);
      color: var(--text-primary);
      min-height: 100vh;
      padding-top: calc(var(--navbar-height) + var(--safe-area-top));
      padding-bottom: var(--safe-area-bottom);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      letter-spacing: -0.01em;
    }

    .navbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: var(--navbar-height);
      background: rgba(251, 251, 253, 0.8);
      backdrop-filter: saturate(180%) blur(20px);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      border-bottom: 1px solid var(--separator);
      z-index: 1000;
      padding-top: var(--safe-area-top);
    }

    .navbar-inner {
      max-width: 980px;
      margin: 0 auto;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 22px;
    }

    .navbar-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      color: var(--text-primary);
    }

    .navbar-logo {
      width: 32px;
      height: 32px;
      border-radius: 6px;
    }

    .navbar-title {
      font-size: 17px;
      font-weight: 600;
      letter-spacing: -0.02em;
    }

    .navbar-links {
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .navbar-link {
      font-size: 12px;
      font-weight: 400;
      color: var(--text-secondary);
      text-decoration: none;
      transition: color 0.2s;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .navbar-link:hover {
      color: var(--text-primary);
    }

    .navbar-link svg {
      width: 14px;
      height: 14px;
      opacity: 0.7;
    }

    /* LANGUAGE SELECTOR */
    .lang-selector {
      position: relative;
      display: flex;
      align-items: center;
    }

    .lang-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      background: var(--background-secondary);
      border: none;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 500;
      color: var(--text-primary);
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .lang-btn:hover {
      background: var(--separator-opaque);
    }

    .lang-flag {
      width: 18px;
      height: 14px;
      border-radius: 2px;
      object-fit: cover;
    }

    .lang-dropdown {
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      background: var(--background-elevated);
      border-radius: 10px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
      padding: 4px;
      min-width: 120px;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-8px);
      transition: all 0.2s ease;
      z-index: 1001;
    }

    .lang-selector.open .lang-dropdown {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .lang-option {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 6px;
      font-size: 13px;
      color: var(--text-primary);
      cursor: pointer;
      transition: background 0.15s;
    }

    .lang-option:hover {
      background: var(--background);
    }

    .lang-option.active {
      background: rgba(0, 122, 255, 0.1);
      color: var(--primary);
    }

    .theme-toggle {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      background: var(--background-secondary);
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .theme-toggle:hover {
      background: var(--separator-opaque);
    }

    .theme-toggle svg {
      width: 18px;
      height: 18px;
      stroke: var(--text-secondary);
    }

    .theme-toggle .icon-moon {
      display: none;
    }

    [data-theme="dark"] .theme-toggle .icon-sun {
      display: none;
    }

    [data-theme="dark"] .theme-toggle .icon-moon {
      display: block;
    }

    [data-theme="dark"] .navbar {
      background: rgba(28, 28, 30, 0.85);
    }

    .hero {
      max-width: 980px;
      margin: 0 auto;
      padding: 48px 22px 32px;
      text-align: center;
    }

    .hero-title {
      font-size: 40px;
      font-weight: 600;
      color: var(--text-primary);
      letter-spacing: -0.03em;
      line-height: 1.1;
      margin: 0 0 12px;
    }

    .hero-subtitle {
      font-size: 19px;
      font-weight: 400;
      color: var(--text-secondary);
      letter-spacing: -0.01em;
      margin: 0;
    }

    /* PARTICLE BACKGROUND */
    #particleCanvas {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
      opacity: 0.6;
    }

    .hero,
    .landing-page,
    .calculator-view {
      position: relative;
      z-index: 1;
    }

    /* LANDING PAGE CARDS */
    .landing-page {
      max-width: 980px;
      margin: 0 auto;
      padding: 0 22px 40px;
    }

    .landing-page.hidden {
      display: none;
    }

    .calculator-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      justify-items: stretch;
    }

    @media (max-width: 600px) {
      .calculator-grid {
        grid-template-columns: 1fr;
      }
    }

    .calculator-card {
      background: var(--background-elevated);
      border-radius: 20px;
      padding: 32px 28px;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      border: 1px solid transparent;
      position: relative;
      overflow: hidden;
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .calculator-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: var(--card-accent, var(--primary));
      transform: scaleX(0);
      transition: transform 0.3s ease;
    }

    .calculator-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
      border-color: var(--separator);
    }

    .calculator-card:hover::before {
      transform: scaleX(1);
    }

    .calculator-card:active {
      transform: translateY(-2px);
    }

    .card-icon {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
      background: var(--card-accent, var(--primary));
    }

    .card-icon svg {
      width: 24px;
      height: 24px;
      stroke: white;
      fill: none;
      stroke-width: 2;
    }

    .card-title {
      font-size: 20px;
      font-weight: 600;
      color: var(--text-primary);
      margin: 0 0 8px;
      letter-spacing: -0.02em;
    }

    .card-description {
      font-size: 14px;
      color: var(--text-secondary);
      margin: 0;
      line-height: 1.5;
      flex-grow: 1;
    }

    .card-arrow {
      position: absolute;
      right: 24px;
      top: 50%;
      transform: translateY(-50%);
      opacity: 0;
      transition: all 0.3s ease;
    }

    .card-arrow svg {
      width: 20px;
      height: 20px;
      stroke: var(--text-tertiary);
    }

    .calculator-card:hover .card-arrow {
      opacity: 1;
      right: 20px;
    }

    /* Card accent colors */
    .calculator-card[data-calc="rent"] {
      --card-accent: #34C759;
    }

    .calculator-card[data-calc="interes"] {
      --card-accent: #007AFF;
    }

    .calculator-card[data-calc="hipoteca"] {
      --card-accent: #FF9500;
    }

    /* SEO Content Section */
    .seo-content {
      margin-top: 40px;
      text-align: center;
      padding: 32px 20px;
      background: var(--background-elevated);
      border-radius: 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    .seo-title {
      font-size: 22px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 12px;
      letter-spacing: -0.02em;
    }

    .seo-text {
      font-size: 15px;
      color: var(--text-secondary);
      max-width: 700px;
      margin: 0 auto 24px;
      line-height: 1.6;
    }

    .seo-features {
      display: flex;
      justify-content: center;
      gap: 32px;
      flex-wrap: wrap;
    }

    .seo-feature {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      max-width: 180px;
    }

    .seo-icon {
      font-size: 28px;
      margin-bottom: 4px;
    }

    .seo-feature strong {
      font-size: 14px;
      color: var(--text-primary);
    }

    .seo-feature span:last-child {
      font-size: 12px;
      color: var(--text-tertiary);
      text-align: center;
    }

    @media (max-width: 600px) {
      .seo-features {
        gap: 20px;
      }
      .seo-feature {
        max-width: 140px;
      }
    }


    /* Calculator view with breadcrumb */
    .calculator-view {
      display: none;
    }

    .calculator-view.active {
      display: block;
    }

    .breadcrumb {
      display: none;
      /* Hidden - we'll use integrated back button */
    }

    .breadcrumb-link {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      color: var(--primary);
      text-decoration: none;
      font-size: 15px;
      font-weight: 400;
      padding: 6px 0;
      border-radius: 0;
      transition: opacity 0.15s ease;
      background: none;
    }

    .breadcrumb-link:hover {
      opacity: 0.7;
    }

    .breadcrumb-link svg {
      width: 16px;
      height: 16px;
      stroke: currentColor;
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .tabs {
      max-width: 980px;
      margin: 0 auto 32px;
      padding: 0 22px;
      display: flex;
      justify-content: center;
    }

    .tabs-wrapper {
      background: var(--background-secondary);
      padding: 2px;
      border-radius: 9px;
      display: inline-flex;
    }

    .tab {
      padding: 8px 16px;
      border: none;
      background: transparent;
      color: var(--text-primary);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      border-radius: 7px;
      transition: all 0.2s ease;
      white-space: nowrap;
      letter-spacing: -0.01em;
    }

    .tab:hover:not(.active) {
      background: rgba(0, 0, 0, 0.04);
    }

    .tab.active {
      background: var(--background-elevated);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.08);
    }

    /* MAIN */
    main {
      max-width: 980px;
      margin: 0 auto;
      padding: 0 22px 80px;
    }

    .tab-content {
      display: none;
    }

    .tab-content.active {
      display: block;
    }

    /* ANIMATION: Value highlight on calculation */
    @keyframes valueHighlight {
      0% {
        background-color: rgba(0, 122, 255, 0.15);
      }

      100% {
        background-color: transparent;
      }
    }

    .value-updated {
      animation: valueHighlight 0.6s ease-out;
    }

    .section-toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding-top: 16px;
      gap: 12px;
    }

    /* EXPORT BUTTONS */
    .export-bar {
      display: flex;
      gap: 8px;
    }

    .btn-export {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 7px 12px;
      background: var(--background-elevated);
      border: 1px solid var(--separator-opaque);
      border-radius: 6px;
      font-size: 12px;
      font-weight: 500;
      color: var(--text-primary);
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .btn-export:hover {
      background: var(--background-secondary);
    }

    .btn-export:active {
      transform: scale(0.97);
    }

    .btn-export svg {
      width: 14px;
      height: 14px;
      stroke: var(--text-secondary);
    }

    .btn-export.loading {
      pointer-events: none;
      opacity: 0.7;
    }

    .btn-export.loading svg {
      animation: spin 1s linear infinite;
    }

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

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

    /* ACCESSIBILITY: Focus styles */
    :focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 2px;
    }

    .tab:focus-visible,
    .btn-export:focus-visible,
    .btn-share:focus-visible,
    button:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 2px;
    }

    input:focus-visible,
    select:focus-visible {
      outline: none;
    }

    .grid-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-bottom: 16px;
      max-width: 100%;
    }

    .grid-row .bloque {
      min-width: 0;
    }

    .grid-row-2 {
      display: flex;
      justify-content: center;
      gap: 16px;
    }

    .grid-row-2 .bloque {
      width: 100%;
      max-width: 400px;
    }

    @media (max-width: 1024px) {
      .grid-row {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 768px) {
      .grid-row {
        grid-template-columns: 1fr;
      }

      .grid-row-2 .bloque {
        max-width: 100%;
      }
    }

    .bloque {
      background: var(--background-elevated);
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    .bloque.resultado {
      background: linear-gradient(135deg, rgba(0, 122, 255, 0.06), rgba(0, 122, 255, 0.02));
      border: 1px solid rgba(0, 122, 255, 0.15);
    }

    .bloque-titulo {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 8px;
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }

    .paso-numero {
      width: 22px;
      height: 22px;
      background: var(--primary);
      color: #fff;
      border-radius: 50%;
      font-size: 12px;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    /* FORM */
    .campo {
      margin-bottom: 12px;
    }

    .campo:last-child {
      margin-bottom: 0;
    }

    label {
      display: block;
      font-size: 12px;
      color: var(--text-secondary);
      margin-bottom: 5px;
      font-weight: 500;
    }

    .input-wrapper {
      display: flex;
      align-items: center;
      background: var(--background);
      border-radius: 8px;
      padding: 0 12px;
      border: 1px solid var(--separator-opaque);
      min-height: 40px;
      transition: all 0.15s ease;
      overflow: hidden;
      max-width: 100%;
    }

    .input-wrapper:focus-within {
      background: var(--background-elevated);
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
    }

    input,
    select {
      flex: 1;
      min-width: 0;
      padding: 9px 0;
      border: none;
      font-size: 15px;
      color: var(--text-primary);
      background: transparent;
      letter-spacing: -0.01em;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    input:focus,
    select:focus {
      outline: none;
    }

    input::placeholder {
      color: var(--text-tertiary);
    }

    select {
      cursor: pointer;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%2386868b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 0 center;
      padding-right: 16px;
    }

    .symbol {
      font-size: 15px;
      color: var(--text-tertiary);
      margin-left: 8px;
      padding: 0 4px;
      font-weight: 400;
    }

    .input-wrapper.readonly {
      background: transparent;
      border: none;
      border-bottom: 1px solid var(--separator);
      border-radius: 0;
      padding: 0 12px 0 0;
      min-height: auto;
    }

    .input-wrapper.readonly input {
      padding: 6px 0;
      color: var(--text-primary);
      font-weight: 500;
    }

    .input-wrapper.readonly:focus-within {
      box-shadow: none;
      border-color: var(--separator);
    }

    .input-wrapper.positive {
      background: rgba(52, 199, 89, 0.08);
      border-color: rgba(52, 199, 89, 0.4);
    }

    .input-wrapper.positive input,
    .input-wrapper.positive .symbol {
      color: var(--success);
      font-weight: 600;
    }

    .input-wrapper.negative {
      background: rgba(255, 59, 48, 0.08);
      border-color: rgba(255, 59, 48, 0.4);
    }

    .input-wrapper.negative input,
    .input-wrapper.negative .symbol {
      color: var(--danger);
      font-weight: 600;
    }

    .campo-total {
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid var(--separator);
    }

    /* INTERÉS COMPUESTO */
    .interes-grid {
      display: grid;
      grid-template-columns: 280px 1fr;
      gap: 16px;
      align-items: stretch;
    }

    @media (max-width: 768px) {
      .interes-grid {
        grid-template-columns: 1fr;
      }
    }

    .resultado-principal {
      background: linear-gradient(145deg, var(--primary), #0055D4);
      padding: 40px 24px;
      border-radius: 16px;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
    }

    .resultado-titulo {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.8);
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      font-weight: 500;
    }

    .resultado-valor {
      font-size: 36px;
      font-weight: 700;
      color: #fff;
      letter-spacing: -0.02em;
    }

    /* RESUMEN CARDS */
    .resumen-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-bottom: 16px;
    }

    @media (max-width: 768px) {
      .resumen-cards {
        grid-template-columns: 1fr;
      }
    }

    .resumen-card {
      background: var(--background-elevated);
      padding: 16px;
      border-radius: 12px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
      border-left: 3px solid;
    }

    .resumen-card-label {
      font-size: 11px;
      color: var(--text-secondary);
      margin-bottom: 4px;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      font-weight: 500;
    }

    .resumen-card-valor {
      font-size: 20px;
      font-weight: 700;
      color: var(--text-primary);
      letter-spacing: -0.02em;
    }

    /* SIMULADOR HIPOTECA */
    .resultado-subtitulo {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.7);
      margin-top: 8px;
    }

    /* GRÁFICOS */
    .graficos-container {
      display: grid;
      grid-template-columns: 320px 1fr;
      gap: 16px;
      margin-top: 16px;
    }

    @media (max-width: 768px) {
      .graficos-container {
        grid-template-columns: 1fr;
      }
    }

    .grafico-bloque {
      background: var(--background-elevated);
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }

    .grafico-titulo {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 16px;
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }

    .canvas-container {
      position: relative;
      height: 220px;
    }

    .canvas-container-bar {
      position: relative;
      height: 260px;
    }

    .color-legend {
      display: flex;
      gap: 16px;
      justify-content: center;
      margin-top: 16px;
      flex-wrap: wrap;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      color: var(--text-secondary);
      font-weight: 500;
    }

    .legend-color {
      width: 10px;
      height: 10px;
      border-radius: 2px;
    }

    /* TABLA */
    .tabla-container {
      background: var(--background-elevated);
      padding: 20px;
      border-radius: 12px;
      margin-top: 16px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    .toggle-container {
      display: inline-flex;
      background: var(--background-secondary);
      padding: 2px;
      border-radius: 7px;
    }

    .toggle-btn {
      padding: 6px 12px;
      border: none;
      background: transparent;
      color: var(--text-primary);
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      border-radius: 5px;
      transition: all 0.2s ease;
    }

    .toggle-btn:hover:not(.active) {
      background: rgba(0, 0, 0, 0.04);
    }

    .toggle-btn.active {
      background: var(--background-elevated);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    }

    .pagination-controls {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--text-secondary);
    }

    .pagination-btn {
      padding: 6px 12px;
      background: var(--background-secondary);
      border: none;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 500;
      color: var(--text-primary);
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .pagination-btn:hover:not(:disabled) {
      background: var(--separator-opaque);
    }

    .pagination-btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      min-width: 500px;
    }

    th {
      padding: 10px 12px;
      text-align: left;
      font-size: 10px;
      color: var(--text-secondary);
      font-weight: 600;
      border-bottom: 1px solid var(--separator);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    td {
      padding: 12px;
      font-size: 13px;
      color: var(--text-primary);
      border-bottom: 1px solid var(--separator);
      white-space: nowrap;
    }

    tr:last-child td {
      border-bottom: none;
    }

    tr:hover {
      background: var(--background);
    }

    /* TOOLTIP - works on hover (desktop) and tap (mobile) */
    .tooltip-trigger {
      position: relative;
      cursor: help;
      border-bottom: 1px dotted var(--text-tertiary);
      -webkit-tap-highlight-color: transparent;
    }

    .tooltip-trigger::after {
      content: attr(data-tooltip);
      position: absolute;
      bottom: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%);
      background: #1d1d1f;
      color: #fff;
      padding: 10px 14px;
      border-radius: 10px;
      font-size: 12px;
      font-weight: 400;
      white-space: normal;
      width: 200px;
      max-width: calc(100vw - 40px);
      text-align: left;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s, transform 0.2s;
      z-index: 100;
      pointer-events: none;
      line-height: 1.5;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    @media (max-width: 768px) {
      .tooltip-trigger::after {
        width: 180px;
        font-size: 11px;
        padding: 8px 12px;
        left: auto;
        right: 0;
        transform: none;
      }

      .tooltip-trigger::before {
        left: auto;
        right: 12px;
        transform: none;
      }
    }

    .tooltip-trigger::before {
      content: '';
      position: absolute;
      bottom: calc(100% + 2px);
      left: 50%;
      transform: translateX(-50%);
      border: 6px solid transparent;
      border-top-color: #1d1d1f;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s;
      z-index: 101;
    }

    .tooltip-trigger:hover::after,
    .tooltip-trigger:hover::before,
    .tooltip-trigger:focus::after,
    .tooltip-trigger:focus::before,
    .tooltip-trigger.active::after,
    .tooltip-trigger.active::before {
      opacity: 1;
      visibility: visible;
    }

    /* INDICADOR */
    .indicator {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin-left: 6px;
    }

    .indicator.green {
      background: var(--success);
    }

    .indicator.yellow {
      background: var(--accent);
    }

    .indicator.red {
      background: var(--danger);
    }

    /* TOAST NOTIFICATION */
    .toast {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%) translateY(100px);
      background: #1d1d1f;
      color: #fff;
      padding: 12px 20px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 500;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      z-index: 2000;
      opacity: 0;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .toast.show {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
    }

    .toast svg {
      width: 18px;
      height: 18px;
      color: var(--success);
    }

    /* SHARE BUTTONS */
    .share-bar {
      display: flex;
      gap: 8px;
      margin-left: auto;
    }

    .btn-share {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      background: var(--background-elevated);
      border: 1px solid var(--separator-opaque);
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .btn-share:hover {
      background: var(--background-secondary);
      transform: scale(1.05);
    }

    .btn-share svg {
      width: 16px;
      height: 16px;
      color: var(--text-secondary);
    }

    .faq-section {
      max-width: 980px;
      margin: 40px auto 0;
      padding: 0 22px;
    }

    .faq-title {
      font-size: 24px;
      font-weight: 600;
      text-align: center;
      margin-bottom: 24px;
      color: var(--text-primary);
    }

    .faq-subtitle {
      font-size: 16px;
      font-weight: 600;
      color: var(--text-secondary);
      margin: 24px 0 12px;
      padding-left: 4px;
    }

    .faq-subtitle:first-of-type {
      margin-top: 0;
    }

    .faq-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }

    @media (max-width: 768px) {
      .faq-grid {
        grid-template-columns: 1fr;
      }
    }

    .faq-item {
      background: var(--background-elevated);
      border-radius: 12px;
      padding: 0;
      overflow: hidden;
    }

    .faq-item summary {
      padding: 16px 20px;
      font-size: 14px;
      font-weight: 600;
      color: var(--text-primary);
      cursor: pointer;
      list-style: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .faq-item summary::-webkit-details-marker {
      display: none;
    }

    .faq-item summary::after {
      content: '+';
      font-size: 18px;
      color: var(--text-secondary);
      transition: transform 0.2s;
    }

    .faq-item[open] summary::after {
      content: '-';
    }

    .faq-item p {
      padding: 0 20px 16px;
      font-size: 13px;
      line-height: 1.6;
      color: var(--text-secondary);
      margin: 0;
      overflow-x: auto;
      word-wrap: break-word;
      overflow-wrap: break-word;
    }

    /* Formula styling for responsive display */
    .faq-item .formula {
      display: block;
      overflow-x: auto;
      white-space: nowrap;
      padding: 8px 0;
      font-family: 'SF Mono', Monaco, monospace;
      font-size: 12px;
      background: var(--background);
      border-radius: 6px;
      padding: 10px 12px;
      margin: 8px 0;
    }

    footer {
      max-width: 980px;
      margin: 0 auto;
      padding: 24px 22px;
      text-align: center;
      font-size: 11px;
      color: var(--text-secondary);
    }

    footer a {
      color: var(--text-secondary);
      text-decoration: none;
    }

    footer a:hover {
      text-decoration: underline;
    }

    /* PRINT STYLES */
    @media print {
      body {
        padding-top: 0;
        background: white;
      }

      .navbar,
      .section-toolbar,
      .tabs,
      .faq-section,
      footer {
        display: none !important;
      }

      main {
        padding: 0;
        max-width: 100%;
      }

      .tab-content {
        display: block !important;
        opacity: 1 !important;
        transform: none !important;
      }

      .tab-content:not(.active) {
        display: none !important;
      }

      .bloque {
        box-shadow: none;
        border: 1px solid #ddd;
        break-inside: avoid;
      }

      .grid-row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
      }

      .resultado-principal {
        background: #f0f7ff !important;
        box-shadow: none;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }

      .graficos-container,
      .tabla-container {
        break-inside: avoid;
      }
    }

    /* MOBILE */
    @media (max-width: 768px) {
      :root {
        --navbar-height: 48px;
      }

      .navbar-links {
        gap: 12px;
      }

      .navbar-link span {
        display: none;
      }

      .navbar-link svg {
        width: 18px;
        height: 18px;
        opacity: 1;
      }

      .hero {
        padding: 32px 16px 24px;
      }

      .hero-title {
        font-size: 28px;
      }

      .hero-subtitle {
        font-size: 15px;
      }

      .tabs {
        padding: 0 16px;
        margin-bottom: 24px;
      }

      .tabs-wrapper {
        width: 100%;
      }

      .tab {
        flex: 1;
        padding: 8px 12px;
        font-size: 13px;
        text-align: center;
      }

      main {
        padding: 0 16px 60px;
      }

      .section-toolbar {
        justify-content: center;
      }

      .bloque {
        padding: 16px;
        border-radius: 10px;
      }

      .grid-row {
        display: block;
      }

      .grid-row .bloque {
        margin-bottom: 12px;
      }

      .resultado-principal {
        padding: 32px 20px;
        border-radius: 12px;
      }

      .resultado-valor {
        font-size: 30px;
      }

      .grafico-bloque {
        padding: 16px;
        border-radius: 10px;
      }

      .canvas-container {
        height: 180px;
      }

      .canvas-container-bar {
        height: 200px;
      }

      .tabla-container {
        padding: 12px;
        border-radius: 10px;
      }

      footer {
        padding: 24px 16px;
      }

      /* Touch optimizations */
      input,
      select,
      button {
        touch-action: manipulation;
      }
    }

    /* COLLAPSIBLE TABLE ARROW ROTATION */
    details summary svg {
      transition: transform 0.3s ease;
    }

    details[open] summary svg {
      transform: rotate(180deg);
    }

    details summary:hover {
      background: var(--background-secondary) !important;
    }

    /* COLLAPSIBLE SUMMARY DARK MODE FIX */
    .collapsible-summary {
      cursor: pointer;
      padding: 18px 24px;
      background: var(--background-elevated);
      border-radius: 16px;
      font-weight: 600;
      color: var(--primary);
      user-select: none;
      border: 2px solid var(--separator);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .collapsible-summary:hover {
      background: var(--background-secondary);
    }

    .collapsible-content {
      padding: 24px;
      background: var(--background-elevated);
      border-radius: 16px;
      margin-top: 12px;
      border: 1px solid var(--separator);
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    }

    /* FAQ DARK MODE FIX */
    .faq-item summary:hover {
      background: var(--background-secondary);
    }

    [data-theme="dark"] .faq-item summary:hover {
      background: var(--background-secondary);
    }

    [data-theme="dark"] details summary:hover {
      background: var(--background-secondary) !important;
    }