@jjlmoya/utils-finance 1.30.0 → 1.32.0

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

@@ -1,18 +1,18 @@
-.prof-root {
-  --prof-brand: #10b981;
-  --prof-brand-light: #34d399;
-  --prof-brand-dark: #059669;
-  --prof-danger: #ef4444;
-  --prof-bg: var(--surface-1);
-  --prof-card-bg: var(--surface-2);
-  --prof-input-bg: var(--surface-3);
-  --prof-text: var(--text-1);
-  --prof-text-muted: var(--text-2);
-  --prof-border: var(--border-color);
-  
-  display: flex;
-  flex-direction: column;
-  gap: 2rem;
+.prof-root {
+  --prof-brand: #10b981;
+  --prof-brand-light: #34d399;
+  --prof-brand-dark: #059669;
+  --prof-danger: #ef4444;
+  --prof-bg: var(--surface-1);
+  --prof-card-bg: var(--surface-2);
+  --prof-input-bg: var(--surface-3);
+  --prof-text: var(--text-1);
+  --prof-text-muted: var(--text-2);
+  --prof-border: var(--border-color);
+  
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
   width: 100%;
   max-width: 1000px;
   margin: 0 auto;
@@ -24,256 +24,256 @@
 .prof-root *::after {
   box-sizing: border-box;
 }
-
-.theme-dark .prof-root {
-  --prof-input-bg: #064e3b;
-  --prof-card-bg: #022c22;
-  --prof-border: #065f46;
-}
-
-.prof-card {
-  background: var(--prof-card-bg);
-  border: 2px solid var(--prof-border);
-  border-radius: 2.5rem;
-  padding: 3.5rem;
+
+.theme-dark .prof-root {
+  --prof-input-bg: #064e3b;
+  --prof-card-bg: #022c22;
+  --prof-border: #065f46;
+}
+
+.prof-card {
+  background: var(--prof-card-bg);
+  border: 2px solid var(--prof-border);
+  border-radius: 2.5rem;
+  padding: 3.5rem;
   box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2);
   transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
   min-width: 0;
   overflow: hidden;
 }
-
-.prof-card.positive {
-  border-color: var(--prof-brand);
-  box-shadow: 0 25px 50px -12px rgba(16, 185, 129, 0.2);
-}
-
-.prof-card.negative {
-  border-color: var(--prof-danger);
-  box-shadow: 0 25px 50px -12px rgba(239, 68, 68, 0.2);
-}
-
-.prof-grid {
-  display: grid;
+
+.prof-card.positive {
+  border-color: var(--prof-brand);
+  box-shadow: 0 25px 50px -12px rgba(16, 185, 129, 0.2);
+}
+
+.prof-card.negative {
+  border-color: var(--prof-danger);
+  box-shadow: 0 25px 50px -12px rgba(239, 68, 68, 0.2);
+}
+
+.prof-grid {
+  display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 5rem;
   align-items: center;
   min-width: 0;
 }
-
-@media (max-width: 900px) {
-  .prof-grid {
-    grid-template-columns: 1fr;
-    gap: 3rem;
-  }
-}
-
-.prof-input-group {
-  margin-bottom: 2rem;
-}
-
-.prof-label-row {
-  display: flex;
+
+@media (max-width: 900px) {
+  .prof-grid {
+    grid-template-columns: 1fr;
+    gap: 3rem;
+  }
+}
+
+.prof-input-group {
+  margin-bottom: 2rem;
+}
+
+.prof-label-row {
+  display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 0.75rem;
   gap: 0.75rem;
   min-width: 0;
 }
-
-.prof-currency-select {
-  background: none;
-  border: none;
-  color: var(--prof-brand);
-  font-weight: 900;
-  font-size: 1.1rem;
-  cursor: pointer;
-  padding-right: 1.5rem;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2310b981' stroke-width='4' %3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right center;
-  background-size: 1rem;
-}
-
-.prof-currency-select:focus {
-  outline: none;
-}
-
-:global(.theme-dark) .prof-currency-select {
-  color: #34d399;
-}
-
-.prof-label {
-  display: block;
-  font-size: 0.95rem;
-  font-weight: 800;
-  color: var(--prof-text-muted);
-  margin-bottom: 0.75rem;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.prof-input-field {
-  width: 100%;
-  background: var(--prof-input-bg);
-  border: 2px solid var(--prof-border);
-  border-radius: 1.25rem;
-  padding: 1.25rem 1.5rem;
-  font-size: 1.75rem;
-  font-weight: 900;
-  color: var(--prof-text);
+
+.prof-currency-select {
+  background: none;
+  border: none;
+  color: var(--prof-brand);
+  font-weight: 900;
+  font-size: 1.1rem;
+  cursor: pointer;
+  padding-right: 1.5rem;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2310b981' stroke-width='4' %3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right center;
+  background-size: 1rem;
+}
+
+.prof-currency-select:focus {
+  outline: none;
+}
+
+:global(.theme-dark) .prof-currency-select {
+  color: #34d399;
+}
+
+.prof-label {
+  display: block;
+  font-size: 0.95rem;
+  font-weight: 800;
+  color: var(--prof-text-muted);
+  margin-bottom: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.prof-input-field {
+  width: 100%;
+  background: var(--prof-input-bg);
+  border: 2px solid var(--prof-border);
+  border-radius: 1.25rem;
+  padding: 1.25rem 1.5rem;
+  font-size: 1.75rem;
+  font-weight: 900;
+  color: var(--prof-text);
   transition: all 0.3s;
   box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
   min-width: 0;
 }
-
-.prof-input-field:hover {
-  border-color: var(--prof-brand-light);
-}
-
-.prof-input-field:focus {
-  border-color: var(--prof-brand);
-  background: var(--prof-card-bg);
-  outline: none;
-  box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.2);
-}
-
-.prof-time-row {
-  display: flex;
-  gap: 1rem;
-}
-
-.prof-unit-select {
-  appearance: none;
-  background-color: var(--prof-input-bg);
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2310b981' stroke-width='3' %3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 1rem center;
-  background-size: 1.25rem;
-  border: 2px solid var(--prof-border);
-  border-radius: 1.25rem;
-  color: var(--prof-text);
-  cursor: pointer;
-  font-weight: 800;
-  padding: 0 3.5rem 0 1.5rem;
-  transition: all 0.2s;
-}
-
-.prof-unit-select:hover {
-  border-color: var(--prof-brand);
-}
-
-.prof-unit-select option {
-  background-color: var(--prof-card-bg);
-  color: var(--prof-text);
-  padding: 1rem;
-}
-
-:global(.theme-dark) .prof-unit-select {
-  background-color: #064e3b;
-  color: #ecfdf5;
-  border-color: #065f46;
-}
-
-:global(.theme-dark) .prof-unit-select option {
-  background-color: #064e3b;
-  color: #ecfdf5;
-}
-
+
+.prof-input-field:hover {
+  border-color: var(--prof-brand-light);
+}
+
+.prof-input-field:focus {
+  border-color: var(--prof-brand);
+  background: var(--prof-card-bg);
+  outline: none;
+  box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.2);
+}
+
+.prof-time-row {
+  display: flex;
+  gap: 1rem;
+}
+
+.prof-unit-select {
+  appearance: none;
+  background-color: var(--prof-input-bg);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2310b981' stroke-width='3' %3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 1rem center;
+  background-size: 1.25rem;
+  border: 2px solid var(--prof-border);
+  border-radius: 1.25rem;
+  color: var(--prof-text);
+  cursor: pointer;
+  font-weight: 800;
+  padding: 0 3.5rem 0 1.5rem;
+  transition: all 0.2s;
+}
+
+.prof-unit-select:hover {
+  border-color: var(--prof-brand);
+}
+
+.prof-unit-select option {
+  background-color: var(--prof-card-bg);
+  color: var(--prof-text);
+  padding: 1rem;
+}
+
+:global(.theme-dark) .prof-unit-select {
+  background-color: #064e3b;
+  color: #ecfdf5;
+  border-color: #065f46;
+}
+
+:global(.theme-dark) .prof-unit-select option {
+  background-color: #064e3b;
+  color: #ecfdf5;
+}
+
 .prof-results {
   display: flex;
   flex-direction: column;
   gap: 2rem;
   min-width: 0;
 }
-
-.prof-status-badge {
-  display: inline-flex;
-  padding: 0.75rem 1.5rem;
-  border-radius: 2rem;
-  font-weight: 900;
-  font-size: 1rem;
-  text-transform: uppercase;
-  margin-bottom: 1.5rem;
-}
-
-.prof-status-badge.positive {
-  background: var(--prof-brand);
-  color: white;
-}
-
-.prof-status-badge.negative {
-  background: var(--prof-danger);
-  color: white;
-}
-
-.prof-main-metric {
-  margin-bottom: 2rem;
-}
-
-.prof-metric-val {
-  font-size: 5.5rem;
-  font-weight: 900;
-  line-height: 1;
+
+.prof-status-badge {
+  display: inline-flex;
+  padding: 0.75rem 1.5rem;
+  border-radius: 2rem;
+  font-weight: 900;
+  font-size: 1rem;
+  text-transform: uppercase;
+  margin-bottom: 1.5rem;
+}
+
+.prof-status-badge.positive {
+  background: var(--prof-brand);
+  color: white;
+}
+
+.prof-status-badge.negative {
+  background: var(--prof-danger);
+  color: white;
+}
+
+.prof-main-metric {
+  margin-bottom: 2rem;
+}
+
+.prof-metric-val {
+  font-size: 5.5rem;
+  font-weight: 900;
+  line-height: 1;
   letter-spacing: -0.06em;
   margin: 0.5rem 0;
   filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
   overflow-wrap: anywhere;
 }
-
-.positive .prof-metric-val { color: var(--prof-brand); }
-.negative .prof-metric-val { color: var(--prof-danger); }
-
-.prof-submetrics {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 1.5rem;
-}
-
-.prof-submetric-card {
-  background: var(--prof-input-bg);
-  padding: 1.75rem;
-  border-radius: 1.5rem;
-  border: 1px solid var(--prof-border);
-  text-align: center;
-}
-
-.prof-submetric-val {
-  display: block;
-  font-size: 2rem;
-  font-weight: 900;
+
+.positive .prof-metric-val { color: var(--prof-brand); }
+.negative .prof-metric-val { color: var(--prof-danger); }
+
+.prof-submetrics {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.5rem;
+}
+
+.prof-submetric-card {
+  background: var(--prof-input-bg);
+  padding: 1.75rem;
+  border-radius: 1.5rem;
+  border: 1px solid var(--prof-border);
+  text-align: center;
+}
+
+.prof-submetric-val {
+  display: block;
+  font-size: 2rem;
+  font-weight: 900;
   color: var(--prof-text);
   margin-top: 0.5rem;
   overflow-wrap: anywhere;
 }
-
-.prof-copy-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.75rem;
-  width: 100%;
-  padding: 1.5rem;
-  background: var(--prof-text);
-  color: var(--prof-card-bg);
-  border: none;
-  border-radius: 1.5rem;
-  font-weight: 900;
-  font-size: 1.25rem;
-  cursor: pointer;
-  transition: all 0.3s;
-  margin-top: 1rem;
-  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
-}
-
-.prof-copy-btn:hover {
-  transform: translateY(-3px);
-  box-shadow: 0 15px 30px rgba(0,0,0,0.3);
-}
-
-.prof-chart-wrap {
-  margin-top: 4rem;
-  padding-top: 3.5rem;
+
+.prof-copy-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  width: 100%;
+  padding: 1.5rem;
+  background: var(--prof-text);
+  color: var(--prof-card-bg);
+  border: none;
+  border-radius: 1.5rem;
+  font-weight: 900;
+  font-size: 1.25rem;
+  cursor: pointer;
+  transition: all 0.3s;
+  margin-top: 1rem;
+  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
+}
+
+.prof-copy-btn:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 15px 30px rgba(0,0,0,0.3);
+}
+
+.prof-chart-wrap {
+  margin-top: 4rem;
+  padding-top: 3.5rem;
   border-top: 2px solid var(--prof-border);
   height: 400px;
   min-width: 0;