@jjlmoya/utils-finance 1.30.0 → 1.32.0

package/src/tool/mortgage/mortgage-calculator.css

@@ -1,69 +1,69 @@
-:root {
-    --mortgage-color-primary: #3b82f6;
-    --mortgage-color-primary-dark: #1e40af;
-    --mortgage-color-primary-light: #dbeafe;
-    --mortgage-color-primary-extra-light: #f0f9ff;
-    --mortgage-color-success: #10b981;
-    --mortgage-color-success-dark: #047857;
-    --mortgage-color-success-light: #d1fae5;
-    --mortgage-color-danger: #ef4444;
-    --mortgage-color-danger-light: #fee2e2;
-    --mortgage-color-text-primary: #1f2937;
-    --mortgage-color-text-secondary: #6b7280;
-    --mortgage-color-text-light: #9ca3af;
-    --mortgage-color-bg-primary: #fff;
-    --mortgage-color-bg-secondary: #f9fafb;
-    --mortgage-color-bg-tertiary: #f3f4f6;
-    --mortgage-color-border: #e5e7eb;
-    --mortgage-color-border-light: #f3f4f6;
-  }
-
-  .theme-dark,
-  [data-theme='dark'] {
-    --mortgage-color-primary: #60a5fa;
-    --mortgage-color-primary-dark: #3b82f6;
-    --mortgage-color-primary-light: #1e3a8a;
-    --mortgage-color-primary-extra-light: #0c1844;
-    --mortgage-color-success: #34d399;
-    --mortgage-color-success-dark: #10b981;
-    --mortgage-color-success-light: #064e3b;
-    --mortgage-color-danger: #f87171;
-    --mortgage-color-danger-light: #7f1d1d;
-    --mortgage-color-text-primary: #f3f4f6;
-    --mortgage-color-text-secondary: #d1d5db;
-    --mortgage-color-text-light: #9ca3af;
-    --mortgage-color-bg-primary: #1f2937;
-    --mortgage-color-bg-secondary: #111827;
-    --mortgage-color-bg-tertiary: #0f172a;
-    --mortgage-color-border: #374151;
-    --mortgage-color-border-light: #1f2937;
-  }
-
-  @media (prefers-color-scheme: dark) {
-    :root {
-      --mortgage-color-primary: #60a5fa;
-      --mortgage-color-primary-dark: #3b82f6;
-      --mortgage-color-primary-light: #1e3a8a;
-      --mortgage-color-primary-extra-light: #0c1844;
-      --mortgage-color-success: #34d399;
-      --mortgage-color-success-dark: #10b981;
-      --mortgage-color-success-light: #064e3b;
-      --mortgage-color-danger: #f87171;
-      --mortgage-color-danger-light: #7f1d1d;
-      --mortgage-color-text-primary: #f3f4f6;
-      --mortgage-color-text-secondary: #d1d5db;
-      --mortgage-color-text-light: #9ca3af;
-      --mortgage-color-bg-primary: #1f2937;
-      --mortgage-color-bg-secondary: #111827;
-      --mortgage-color-bg-tertiary: #0f172a;
-      --mortgage-color-border: #374151;
-      --mortgage-color-border-light: #1f2937;
-    }
-  }
-
-  .mortgage-container {
-    background-color: var(--mortgage-color-bg-primary);
-    border-radius: 1.5rem;
+:root {
+    --mortgage-color-primary: #3b82f6;
+    --mortgage-color-primary-dark: #1e40af;
+    --mortgage-color-primary-light: #dbeafe;
+    --mortgage-color-primary-extra-light: #f0f9ff;
+    --mortgage-color-success: #10b981;
+    --mortgage-color-success-dark: #047857;
+    --mortgage-color-success-light: #d1fae5;
+    --mortgage-color-danger: #ef4444;
+    --mortgage-color-danger-light: #fee2e2;
+    --mortgage-color-text-primary: #1f2937;
+    --mortgage-color-text-secondary: #6b7280;
+    --mortgage-color-text-light: #9ca3af;
+    --mortgage-color-bg-primary: #fff;
+    --mortgage-color-bg-secondary: #f9fafb;
+    --mortgage-color-bg-tertiary: #f3f4f6;
+    --mortgage-color-border: #e5e7eb;
+    --mortgage-color-border-light: #f3f4f6;
+  }
+
+  .theme-dark,
+  [data-theme='dark'] {
+    --mortgage-color-primary: #60a5fa;
+    --mortgage-color-primary-dark: #3b82f6;
+    --mortgage-color-primary-light: #1e3a8a;
+    --mortgage-color-primary-extra-light: #0c1844;
+    --mortgage-color-success: #34d399;
+    --mortgage-color-success-dark: #10b981;
+    --mortgage-color-success-light: #064e3b;
+    --mortgage-color-danger: #f87171;
+    --mortgage-color-danger-light: #7f1d1d;
+    --mortgage-color-text-primary: #f3f4f6;
+    --mortgage-color-text-secondary: #d1d5db;
+    --mortgage-color-text-light: #9ca3af;
+    --mortgage-color-bg-primary: #1f2937;
+    --mortgage-color-bg-secondary: #111827;
+    --mortgage-color-bg-tertiary: #0f172a;
+    --mortgage-color-border: #374151;
+    --mortgage-color-border-light: #1f2937;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --mortgage-color-primary: #60a5fa;
+      --mortgage-color-primary-dark: #3b82f6;
+      --mortgage-color-primary-light: #1e3a8a;
+      --mortgage-color-primary-extra-light: #0c1844;
+      --mortgage-color-success: #34d399;
+      --mortgage-color-success-dark: #10b981;
+      --mortgage-color-success-light: #064e3b;
+      --mortgage-color-danger: #f87171;
+      --mortgage-color-danger-light: #7f1d1d;
+      --mortgage-color-text-primary: #f3f4f6;
+      --mortgage-color-text-secondary: #d1d5db;
+      --mortgage-color-text-light: #9ca3af;
+      --mortgage-color-bg-primary: #1f2937;
+      --mortgage-color-bg-secondary: #111827;
+      --mortgage-color-bg-tertiary: #0f172a;
+      --mortgage-color-border: #374151;
+      --mortgage-color-border-light: #1f2937;
+    }
+  }
+
+  .mortgage-container {
+    background-color: var(--mortgage-color-bg-primary);
+    border-radius: 1.5rem;
     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
     border: 1px solid var(--mortgage-color-border);
     overflow: hidden;
@@ -76,484 +76,484 @@
   .mortgage-container *::after {
     box-sizing: border-box;
   }
-
-  .mortgage-header {
-    padding: 1.5rem;
-    border-bottom: 1px solid var(--mortgage-color-border);
-    background-color: rgba(59, 130, 246, 0.05);
-  }
-
-  .mortgage-header-title-group {
+
+  .mortgage-header {
+    padding: 1.5rem;
+    border-bottom: 1px solid var(--mortgage-color-border);
+    background-color: rgba(59, 130, 246, 0.05);
+  }
+
+  .mortgage-header-title-group {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     min-width: 0;
   }
-
-  .mortgage-header-icon {
-    width: 2.5rem;
-    height: 2.5rem;
-    padding: 0.625rem;
-    background-color: rgba(59, 130, 246, 0.1);
-    border-radius: 0.75rem;
-    color: var(--mortgage-color-primary);
-    flex-shrink: 0;
-  }
-
-  .mortgage-header-icon svg {
-    width: 100%;
-    height: 100%;
-  }
-
-  .mortgage-header-title {
-    font-size: 1.25rem;
-    font-weight: 700;
+
+  .mortgage-header-icon {
+    width: 2.5rem;
+    height: 2.5rem;
+    padding: 0.625rem;
+    background-color: rgba(59, 130, 246, 0.1);
+    border-radius: 0.75rem;
+    color: var(--mortgage-color-primary);
+    flex-shrink: 0;
+  }
+
+  .mortgage-header-icon svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .mortgage-header-title {
+    font-size: 1.25rem;
+    font-weight: 700;
     color: var(--mortgage-color-text-primary);
     margin: 0;
     overflow-wrap: anywhere;
   }
-
-  .mortgage-grid {
-    display: grid;
-    grid-template-columns: 1fr;
+
+  .mortgage-grid {
+    display: grid;
+    grid-template-columns: 1fr;
     gap: 0;
     padding: 0;
     min-width: 0;
   }
-
-  @media (min-width: 1024px) {
-    .mortgage-grid {
-      grid-template-columns: minmax(300px, 1fr) 2fr;
-      gap: 0;
-      padding: 0;
-    }
-  }
-
-  .mortgage-left {
-    padding: 1.5rem;
-    background-color: rgba(59, 130, 246, 0.02);
-    display: flex;
-    flex-direction: column;
+
+  @media (min-width: 1024px) {
+    .mortgage-grid {
+      grid-template-columns: minmax(300px, 1fr) 2fr;
+      gap: 0;
+      padding: 0;
+    }
+  }
+
+  .mortgage-left {
+    padding: 1.5rem;
+    background-color: rgba(59, 130, 246, 0.02);
+    display: flex;
+    flex-direction: column;
     gap: 2rem;
     border-right: 1px solid var(--mortgage-color-border);
     min-width: 0;
   }
-
-  @media (max-width: 1023px) {
-    .mortgage-left {
-      border-right: none;
-      border-bottom: 1px solid var(--mortgage-color-border);
-    }
-  }
-
-  .mortgage-right {
-    padding: 1.5rem;
+
+  @media (max-width: 1023px) {
+    .mortgage-left {
+      border-right: none;
+      border-bottom: 1px solid var(--mortgage-color-border);
+    }
+  }
+
+  .mortgage-right {
+    padding: 1.5rem;
     display: flex;
     flex-direction: column;
     gap: 2.5rem;
     min-width: 0;
   }
-
-  .mortgage-input-group {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-
-  .mortgage-label {
-    font-size: 0.75rem;
-    font-weight: 700;
-    color: var(--mortgage-color-text-light);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-  }
-
-  .mortgage-label-extra {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    color: var(--mortgage-color-success-dark);
-  }
-
-  .mortgage-label-extra svg {
-    width: 1rem;
-    height: 1rem;
-  }
-
-  .mortgage-input-row {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 1rem;
-  }
-
-  .mortgage-input-wrapper {
-    position: relative;
-    display: flex;
-    align-items: center;
-  }
-
-  .mortgage-input-prefix {
-    position: absolute;
-    left: 1rem;
-    top: 50%;
-    transform: translateY(-50%);
-    color: var(--mortgage-color-text-light);
-    font-weight: 700;
-    pointer-events: none;
-  }
-
-  .mortgage-input-suffix {
-    position: absolute;
-    right: 1rem;
-    top: 50%;
-    transform: translateY(-50%);
-    color: var(--mortgage-color-text-light);
-    font-weight: 700;
-    pointer-events: none;
-  }
-
-  .mortgage-input {
-    width: 100%;
-    padding: 0.75rem 1rem;
-    background-color: var(--mortgage-color-bg-primary);
-    border: 2px solid var(--mortgage-color-border);
-    border-radius: 0.75rem;
-    font-weight: 700;
-    font-size: 1.125rem;
-    color: var(--mortgage-color-text-primary);
-    transition: all 0.2s ease;
-  }
-
-  .mortgage-input:focus {
-    border-color: var(--mortgage-color-primary);
-    outline: none;
-  }
-
-  .mortgage-input-prefixed {
-    padding-left: 3.5rem;
-  }
-
-  .mortgage-input-suffixed {
-    padding-right: 3.5rem;
-  }
-
-  .mortgage-input-extra {
-    background-color: rgba(16, 185, 129, 0.05);
-    border-color: rgba(16, 185, 129, 0.2);
-  }
-
-  .mortgage-input-extra:focus {
-    border-color: var(--mortgage-color-success);
-  }
-
-  .mortgage-input-hint {
-    font-size: 0.625rem;
-    color: var(--mortgage-color-text-light);
-    margin-top: 0.5rem;
-    line-height: 1.5;
-  }
-
-  .mortgage-divider {
-    height: 1px;
-    background-color: var(--mortgage-color-border);
-    margin: 1rem 0;
-  }
-
-  .mortgage-payment-card {
-    background: linear-gradient(135deg, var(--mortgage-color-primary) 0%, var(--mortgage-color-primary-dark) 100%);
-    border-radius: 1rem;
-    padding: 1.5rem;
-    color: white;
-    text-align: center;
-    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
-  }
-
-  .mortgage-payment-label {
-    display: block;
-    font-size: 0.75rem;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    opacity: 0.9;
-    margin-bottom: 0.5rem;
-  }
-
-  .mortgage-payment-value {
-    display: block;
-    font-size: 3rem;
-    font-weight: 900;
+
+  .mortgage-input-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .mortgage-label {
+    font-size: 0.75rem;
+    font-weight: 700;
+    color: var(--mortgage-color-text-light);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .mortgage-label-extra {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: var(--mortgage-color-success-dark);
+  }
+
+  .mortgage-label-extra svg {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .mortgage-input-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+  }
+
+  .mortgage-input-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  .mortgage-input-prefix {
+    position: absolute;
+    left: 1rem;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--mortgage-color-text-light);
+    font-weight: 700;
+    pointer-events: none;
+  }
+
+  .mortgage-input-suffix {
+    position: absolute;
+    right: 1rem;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--mortgage-color-text-light);
+    font-weight: 700;
+    pointer-events: none;
+  }
+
+  .mortgage-input {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    background-color: var(--mortgage-color-bg-primary);
+    border: 2px solid var(--mortgage-color-border);
+    border-radius: 0.75rem;
+    font-weight: 700;
+    font-size: 1.125rem;
+    color: var(--mortgage-color-text-primary);
+    transition: all 0.2s ease;
+  }
+
+  .mortgage-input:focus {
+    border-color: var(--mortgage-color-primary);
+    outline: none;
+  }
+
+  .mortgage-input-prefixed {
+    padding-left: 3.5rem;
+  }
+
+  .mortgage-input-suffixed {
+    padding-right: 3.5rem;
+  }
+
+  .mortgage-input-extra {
+    background-color: rgba(16, 185, 129, 0.05);
+    border-color: rgba(16, 185, 129, 0.2);
+  }
+
+  .mortgage-input-extra:focus {
+    border-color: var(--mortgage-color-success);
+  }
+
+  .mortgage-input-hint {
+    font-size: 0.625rem;
+    color: var(--mortgage-color-text-light);
+    margin-top: 0.5rem;
+    line-height: 1.5;
+  }
+
+  .mortgage-divider {
+    height: 1px;
+    background-color: var(--mortgage-color-border);
+    margin: 1rem 0;
+  }
+
+  .mortgage-payment-card {
+    background: linear-gradient(135deg, var(--mortgage-color-primary) 0%, var(--mortgage-color-primary-dark) 100%);
+    border-radius: 1rem;
+    padding: 1.5rem;
+    color: white;
+    text-align: center;
+    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
+  }
+
+  .mortgage-payment-label {
+    display: block;
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    opacity: 0.9;
+    margin-bottom: 0.5rem;
+  }
+
+  .mortgage-payment-value {
+    display: block;
+    font-size: 3rem;
+    font-weight: 900;
     letter-spacing: -0.02em;
     margin-bottom: 0.5rem;
     overflow-wrap: anywhere;
   }
-
-  .mortgage-payment-duration {
-    display: block;
-    font-size: 0.75rem;
-    opacity: 0.8;
-  }
-
-  .mortgage-savings-card {
-    background-color: var(--mortgage-color-bg-secondary);
-    border: 2px dashed var(--mortgage-color-border);
-    border-radius: 1rem;
-    padding: 1.5rem;
-    transition: all 0.3s ease;
-  }
-
-  .mortgage-savings-inactive {
-    opacity: 0.6;
-    filter: grayscale(1);
-  }
-
-  .mortgage-savings-active {
-    border-color: var(--mortgage-color-success);
-    background-color: rgba(16, 185, 129, 0.05);
-    box-shadow: 0 0 16px rgba(16, 185, 129, 0.1);
-  }
-
-  .mortgage-savings-title {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    font-size: 0.875rem;
-    font-weight: 700;
-    text-transform: uppercase;
-    color: var(--mortgage-color-success-dark);
-    margin: 0 0 1rem;
-  }
-
-  .mortgage-savings-title svg {
-    width: 1rem;
-    height: 1rem;
-  }
-
-  .mortgage-savings-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 1rem;
-  }
-
-  .mortgage-savings-item {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .mortgage-savings-label {
-    font-size: 0.75rem;
-    color: var(--mortgage-color-text-light);
-    margin-bottom: 0.25rem;
-  }
-
-  .mortgage-savings-value {
-    font-size: 1.25rem;
+
+  .mortgage-payment-duration {
+    display: block;
+    font-size: 0.75rem;
+    opacity: 0.8;
+  }
+
+  .mortgage-savings-card {
+    background-color: var(--mortgage-color-bg-secondary);
+    border: 2px dashed var(--mortgage-color-border);
+    border-radius: 1rem;
+    padding: 1.5rem;
+    transition: all 0.3s ease;
+  }
+
+  .mortgage-savings-inactive {
+    opacity: 0.6;
+    filter: grayscale(1);
+  }
+
+  .mortgage-savings-active {
+    border-color: var(--mortgage-color-success);
+    background-color: rgba(16, 185, 129, 0.05);
+    box-shadow: 0 0 16px rgba(16, 185, 129, 0.1);
+  }
+
+  .mortgage-savings-title {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.875rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    color: var(--mortgage-color-success-dark);
+    margin: 0 0 1rem;
+  }
+
+  .mortgage-savings-title svg {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .mortgage-savings-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+  }
+
+  .mortgage-savings-item {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .mortgage-savings-label {
+    font-size: 0.75rem;
+    color: var(--mortgage-color-text-light);
+    margin-bottom: 0.25rem;
+  }
+
+  .mortgage-savings-value {
+    font-size: 1.25rem;
     font-weight: 700;
     color: var(--mortgage-color-text-primary);
     overflow-wrap: anywhere;
   }
-
-  .mortgage-section {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-  }
-
-  .mortgage-section-title {
-    font-size: 0.875rem;
-    font-weight: 700;
-    color: var(--mortgage-color-text-primary);
-    margin: 0;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-  }
-
-  .mortgage-section-divider {
-    height: 1px;
-    background-color: var(--mortgage-color-border);
-  }
-
-  .mortgage-timeline {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-  }
-
-  .mortgage-timeline-item {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-
-  .mortgage-timeline-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 0.75rem;
-    font-weight: 700;
-    text-transform: uppercase;
+
+  .mortgage-section {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .mortgage-section-title {
+    font-size: 0.875rem;
+    font-weight: 700;
+    color: var(--mortgage-color-text-primary);
+    margin: 0;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .mortgage-section-divider {
+    height: 1px;
+    background-color: var(--mortgage-color-border);
+  }
+
+  .mortgage-timeline {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .mortgage-timeline-item {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .mortgage-timeline-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
     letter-spacing: 0.05em;
     color: var(--mortgage-color-text-light);
     gap: 0.75rem;
   }
-
-  .mortgage-timeline-label-optimized {
-    color: var(--mortgage-color-success-dark);
-  }
-
-  .mortgage-timeline-bar {
-    height: 1rem;
-    width: 100%;
-    background-color: var(--mortgage-color-bg-secondary);
-    border-radius: 9999px;
-    overflow: hidden;
-  }
-
-  .mortgage-timeline-fill {
-    height: 100%;
-    background-color: var(--mortgage-color-text-light);
-    border-radius: 9999px;
-    transition: width 1s ease;
-  }
-
-  .mortgage-timeline-fill-optimized {
-    background-color: var(--mortgage-color-success);
-    width: 100%;
-  }
-
-  .mortgage-timeline-fill.mortgage-timeline-active {
-    background-color: var(--mortgage-color-success);
-    box-shadow: 0 0 16px rgba(16, 185, 129, 0.5);
-  }
-
-  .mortgage-breakdown-bar {
-    display: flex;
-    height: 3.5rem;
-    width: 100%;
-    background-color: var(--mortgage-color-bg-secondary);
-    border-radius: 0.75rem;
-    overflow: hidden;
-    gap: 0;
-    margin-bottom: 1rem;
-    font-size: 0.75rem;
-    font-weight: 700;
-    color: white;
-  }
-
-  .mortgage-breakdown-principal {
-    background-color: var(--mortgage-color-text-light);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    gap: 0.25rem;
-    transition: width 0.7s ease;
-  }
-
-  .mortgage-breakdown-interest {
-    background-color: var(--mortgage-color-danger);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    gap: 0.25rem;
-    transition: width 0.7s ease;
-  }
-
-  .mortgage-breakdown-label {
-    display: block;
-  }
-
-  .mortgage-breakdown-value {
-    display: none;
-  }
-
-  @media (min-width: 768px) {
-    .mortgage-breakdown-value {
-      display: block;
-      font-weight: 300;
-      opacity: 0.8;
-    }
-  }
-
-  .mortgage-breakdown-summary {
-    display: flex;
-    justify-content: space-between;
-    gap: 1rem;
+
+  .mortgage-timeline-label-optimized {
+    color: var(--mortgage-color-success-dark);
+  }
+
+  .mortgage-timeline-bar {
+    height: 1rem;
+    width: 100%;
+    background-color: var(--mortgage-color-bg-secondary);
+    border-radius: 9999px;
+    overflow: hidden;
+  }
+
+  .mortgage-timeline-fill {
+    height: 100%;
+    background-color: var(--mortgage-color-text-light);
+    border-radius: 9999px;
+    transition: width 1s ease;
+  }
+
+  .mortgage-timeline-fill-optimized {
+    background-color: var(--mortgage-color-success);
+    width: 100%;
+  }
+
+  .mortgage-timeline-fill.mortgage-timeline-active {
+    background-color: var(--mortgage-color-success);
+    box-shadow: 0 0 16px rgba(16, 185, 129, 0.5);
+  }
+
+  .mortgage-breakdown-bar {
+    display: flex;
+    height: 3.5rem;
+    width: 100%;
+    background-color: var(--mortgage-color-bg-secondary);
+    border-radius: 0.75rem;
+    overflow: hidden;
+    gap: 0;
+    margin-bottom: 1rem;
+    font-size: 0.75rem;
+    font-weight: 700;
+    color: white;
+  }
+
+  .mortgage-breakdown-principal {
+    background-color: var(--mortgage-color-text-light);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: 0.25rem;
+    transition: width 0.7s ease;
+  }
+
+  .mortgage-breakdown-interest {
+    background-color: var(--mortgage-color-danger);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: 0.25rem;
+    transition: width 0.7s ease;
+  }
+
+  .mortgage-breakdown-label {
+    display: block;
+  }
+
+  .mortgage-breakdown-value {
+    display: none;
+  }
+
+  @media (min-width: 768px) {
+    .mortgage-breakdown-value {
+      display: block;
+      font-weight: 300;
+      opacity: 0.8;
+    }
+  }
+
+  .mortgage-breakdown-summary {
+    display: flex;
+    justify-content: space-between;
+    gap: 1rem;
     font-size: 0.875rem;
     color: var(--mortgage-color-text-secondary);
     min-width: 0;
   }
-
-  .mortgage-breakdown-item {
-    flex: 1;
-  }
-
-  .mortgage-breakdown-emphasis {
-    font-weight: 700;
-    color: var(--mortgage-color-text-primary);
-  }
-
-  .mortgage-breakdown-interest-emphasis {
-    color: var(--mortgage-color-danger);
-  }
-
-  .mortgage-table-container {
-    background-color: var(--mortgage-color-bg-secondary);
-    border: 1px solid var(--mortgage-color-border);
-    border-radius: 1rem;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .mortgage-table-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 1rem;
-    border-bottom: 1px solid var(--mortgage-color-border);
-    background-color: rgba(59, 130, 246, 0.05);
-  }
-
-  .mortgage-table-title {
-    font-size: 0.75rem;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    color: var(--mortgage-color-text-light);
-    margin: 0;
-  }
-
-  .mortgage-toggle-btn {
-    font-size: 0.625rem;
-    background-color: var(--mortgage-color-bg-primary);
-    border: 1px solid var(--mortgage-color-border);
-    padding: 0.375rem 0.75rem;
-    border-radius: 0.5rem;
-    color: var(--mortgage-color-text-secondary);
-    font-weight: 700;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-  }
-
-  .mortgage-toggle-btn:hover {
-    background-color: var(--mortgage-color-bg-secondary);
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  }
-
-  .mortgage-toggle-btn:active {
-    transform: scale(0.95);
-  }
-
-  .mortgage-table-scroll {
+
+  .mortgage-breakdown-item {
+    flex: 1;
+  }
+
+  .mortgage-breakdown-emphasis {
+    font-weight: 700;
+    color: var(--mortgage-color-text-primary);
+  }
+
+  .mortgage-breakdown-interest-emphasis {
+    color: var(--mortgage-color-danger);
+  }
+
+  .mortgage-table-container {
+    background-color: var(--mortgage-color-bg-secondary);
+    border: 1px solid var(--mortgage-color-border);
+    border-radius: 1rem;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .mortgage-table-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem;
+    border-bottom: 1px solid var(--mortgage-color-border);
+    background-color: rgba(59, 130, 246, 0.05);
+  }
+
+  .mortgage-table-title {
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--mortgage-color-text-light);
+    margin: 0;
+  }
+
+  .mortgage-toggle-btn {
+    font-size: 0.625rem;
+    background-color: var(--mortgage-color-bg-primary);
+    border: 1px solid var(--mortgage-color-border);
+    padding: 0.375rem 0.75rem;
+    border-radius: 0.5rem;
+    color: var(--mortgage-color-text-secondary);
+    font-weight: 700;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  }
+
+  .mortgage-toggle-btn:hover {
+    background-color: var(--mortgage-color-bg-secondary);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  }
+
+  .mortgage-toggle-btn:active {
+    transform: scale(0.95);
+  }
+
+  .mortgage-table-scroll {
     overflow-x: auto;
     max-height: 500px;
     overflow-y: auto;
     width: 100%;
   }
-
+
   .mortgage-table {
     width: 100%;
     min-width: 560px;
@@ -599,98 +599,98 @@
       border-radius: 0.75rem;
     }
   }
-
-  .mortgage-table thead {
-    position: sticky;
-    top: 0;
-    background-color: var(--mortgage-color-bg-secondary);
-    z-index: 10;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-  }
-
-  .mortgage-table-cell {
-    padding: 0.75rem 0.5rem;
-    color: var(--mortgage-color-text-secondary);
-    font-weight: 500;
-  }
-
-  .mortgage-table thead .mortgage-table-cell {
-    color: var(--mortgage-color-text-light);
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-  }
-
-  .mortgage-table-interest {
-    text-align: right;
-    color: var(--mortgage-color-danger);
-  }
-
-  .mortgage-table thead .mortgage-table-interest {
-    color: var(--mortgage-color-danger);
-  }
-
-  .mortgage-table-principal {
-    text-align: right;
-    color: var(--mortgage-color-success);
-  }
-
-  .mortgage-table thead .mortgage-table-principal {
-    color: var(--mortgage-color-success);
-  }
-
-  .mortgage-table-extra {
-    text-align: right;
-    color: var(--mortgage-color-primary);
-  }
-
-  .mortgage-table thead .mortgage-table-extra {
-    color: var(--mortgage-color-primary);
-  }
-
-  .mortgage-table-balance {
-    text-align: right;
-    color: var(--mortgage-color-text-light);
-    padding-right: 0.5rem;
-  }
-
-  .mortgage-table tbody .mortgage-table-row {
-    border-bottom: 1px solid var(--mortgage-color-border);
-    transition: background-color 0.2s ease;
-  }
-
-  .mortgage-table tbody .mortgage-table-row:hover {
-    background-color: rgba(59, 130, 246, 0.05);
-  }
-
-  .mortgage-table-dash {
-    opacity: 0.2;
-  }
-
-  .mortgage-table-footer {
-    padding: 1.5rem 0.5rem;
-    text-align: center;
-    font-size: 0.625rem;
-    color: var(--mortgage-color-text-light);
-    font-style: italic;
-    background-color: rgba(59, 130, 246, 0.02);
-  }
-
-  .mortgage-table-footer-btn {
-    margin-left: 0.25rem;
-    text-decoration: underline;
-    font-weight: 700;
-    color: var(--mortgage-color-primary);
-    cursor: pointer;
-    background: none;
-    border: none;
-    padding: 0;
-  }
-
-  .mortgage-table-paid {
-    font-style: normal;
-    font-weight: 700;
-    color: var(--mortgage-color-success);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
+
+  .mortgage-table thead {
+    position: sticky;
+    top: 0;
+    background-color: var(--mortgage-color-bg-secondary);
+    z-index: 10;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  }
+
+  .mortgage-table-cell {
+    padding: 0.75rem 0.5rem;
+    color: var(--mortgage-color-text-secondary);
+    font-weight: 500;
+  }
+
+  .mortgage-table thead .mortgage-table-cell {
+    color: var(--mortgage-color-text-light);
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .mortgage-table-interest {
+    text-align: right;
+    color: var(--mortgage-color-danger);
+  }
+
+  .mortgage-table thead .mortgage-table-interest {
+    color: var(--mortgage-color-danger);
+  }
+
+  .mortgage-table-principal {
+    text-align: right;
+    color: var(--mortgage-color-success);
+  }
+
+  .mortgage-table thead .mortgage-table-principal {
+    color: var(--mortgage-color-success);
+  }
+
+  .mortgage-table-extra {
+    text-align: right;
+    color: var(--mortgage-color-primary);
+  }
+
+  .mortgage-table thead .mortgage-table-extra {
+    color: var(--mortgage-color-primary);
+  }
+
+  .mortgage-table-balance {
+    text-align: right;
+    color: var(--mortgage-color-text-light);
+    padding-right: 0.5rem;
+  }
+
+  .mortgage-table tbody .mortgage-table-row {
+    border-bottom: 1px solid var(--mortgage-color-border);
+    transition: background-color 0.2s ease;
+  }
+
+  .mortgage-table tbody .mortgage-table-row:hover {
+    background-color: rgba(59, 130, 246, 0.05);
+  }
+
+  .mortgage-table-dash {
+    opacity: 0.2;
+  }
+
+  .mortgage-table-footer {
+    padding: 1.5rem 0.5rem;
+    text-align: center;
+    font-size: 0.625rem;
+    color: var(--mortgage-color-text-light);
+    font-style: italic;
+    background-color: rgba(59, 130, 246, 0.02);
+  }
+
+  .mortgage-table-footer-btn {
+    margin-left: 0.25rem;
+    text-decoration: underline;
+    font-weight: 700;
+    color: var(--mortgage-color-primary);
+    cursor: pointer;
+    background: none;
+    border: none;
+    padding: 0;
+  }
+
+  .mortgage-table-paid {
+    font-style: normal;
+    font-weight: 700;
+    color: var(--mortgage-color-success);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
   }