From b7b24663639f6f643fd7de418c48f6ba7dc4b8e5 Mon Sep 17 00:00:00 2001
From: Fl2on <69091361+fl2on@users.noreply.github.com>
Date: Sat, 15 Feb 2025 09:30:21 -0500
Subject: [PATCH] Update style.css

---
 style.css | 387 +++++++++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 326 insertions(+), 61 deletions(-)

diff --git a/style.css b/style.css
index e8bc0bc..2281fc6 100644
--- a/style.css
+++ b/style.css
@@ -79,96 +79,361 @@ body {
 	}
 }
 
+/* Normalize.css (AÑADIDO AL INICIO PARA NORMALIZAR ESTILOS ENTRE NAVEGADORES) */
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{padding:1px 2px}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
+
 @media (max-width: 768px) and (orientation: landscape) {
   body {
     width: 100% !important;
     overflow-x: auto;
+    box-sizing: border-box !important; /* Añadido box-sizing al body */
   }
 
   html, body {
     width: 100% !important;
+    box-sizing: border-box !important; /* Añadido box-sizing al html y body */
   }
 
-  body .calculator-card,
-  body .formula-card,
-  body .result-card,
-  body .search-container,
-  body .nav-tabs,
-  body table,
-  body #cashFlowCanvas {
+  /*  Estilos para CONTENEDORES PRINCIPALES (SIMPLIFICADOS Y REFORZADOS) */
+  .container, /* Estilo general para contenedores .container (si lo usas en tu layout principal) */
+  .grid,        /* Estilo para contenedores .grid (si tu layout principal usa grid) */
+  .calculator-card, /* Estilo para las tarjetas de calculadoras */
+  .formula-card,    /* Estilo para las tarjetas de fórmulas */
+  .result-card,     /* Estilo para las tarjetas de resultados */
+  .search-container, /* Estilo para el contenedor de búsqueda */
+  .nav-tabs,        /* Estilo para las pestañas de navegación */
+  table,             /* Estilo para tablas */
+  #cashFlowCanvas,    /* Estilo para el canvas de flujo de caja */
+  nav.bg-white.shadow-md.sticky.top-0.z-50, /* Estilo para la barra de navegación <nav> */
+  footer /* Estilo para el pie de página <footer> */
+   {
     width: 100% !important;
     max-width: 100% !important;
-    margin-left: 0;
-    margin-right: 0;
-    padding-left: 1rem;
-    padding-right: 1rem;
-    box-sizing: border-box; /* Añadido box-sizing para asegurar que el padding se incluye en el ancho */
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    padding-left: 1rem !important;
+    padding-right: 1rem !important;
+    box-sizing: border-box !important; /* box-sizing aplicado a TODOS LOS CONTENEDORES PRINCIPALES */
+    float: none !important; /* Asegurar que no haya floats que interfieran */
+    position: relative !important; /* Posición relativa por defecto, evitar posicionamiento absoluto/fijo inesperado */
+    left: 0 !important;       /* Asegurar que empiecen en el borde izquierdo */
+    right: 0 !important;      /* Asegurar que se extiendan hasta el borde derecho */
+    display: block !important; /* Forzar display block para ocupar todo el ancho disponible */
   }
 
-  body .grid {
-    width: 100% !important;
-    grid-template-columns: 1fr;
-    box-sizing: border-box; /* Añadido box-sizing */
-  }
 
   body {
     font-size: 0.9rem;
-    box-sizing: border-box; /* Añadido box-sizing al body también */
   }
 
-  /* Asegurar que el footer ocupe el 100% del ancho en horizontal móvil */
-  body footer {
-    width: 100% !important;
-    max-width: 100% !important;
-    margin-left: 0;
-    margin-right: 0;
-    padding-left: 1rem;
-    padding-right: 1rem;
-    box-sizing: border-box; /* Añadido box-sizing */
-  }
 
-  /* Asegurar que el background pattern ocupe el 100% del ancho */
-  body .absolute.inset-0.bg-grid-pattern.opacity-10 {
-    width: 100% !important;
-    max-width: 100% !important;
-    left: 0;
-    right: 0;
-    box-sizing: border-box; /* Añadido box-sizing */
+  body .container.mx-auto.px-4 { /* Contenedor interno del footer y nav - REVISADO, MENOS ESPECÍFICO */
+    padding-left: 1rem !important;
+    padding-right: 1rem !important;
+    box-sizing: border-box !important; /* box-sizing también aquí */
+    max-width: 100% !important; /* Asegurar que no haya max-width limitante */
+    width: auto !important;      /* Dejar que el ancho se ajuste al 100% del contenedor padre */
+    margin: 0 auto !important;   /* Centrar horizontalmente si es necesario, pero no limitar ancho */
   }
 
-  body .container.mx-auto.px-4 {
-    width: 100% !important;
-    max-width: 100% !important;
-    padding-left: 1rem;
-    padding-right: 1rem;
-    box-sizing: border-box; /* Añadido box-sizing */
+   body .nav-tabs { /* Estilos para .nav-tabs REVISADOS y SIMPLIFICADOS */
+    display: flex !important; /* Forzar flexbox para la barra de navegación */
+    width: 100% !important;    /* Ocupar 100% del ancho disponible */
+    max-width: 100% !important; /* Asegurar que no haya max-width limitante */
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    padding-left: 0 !important;  /* Resetear padding si es necesario */
+    padding-right: 0 !important; /* Resetear padding si es necesario */
+    box-sizing: border-box !important; /* box-sizing también aquí */
+    overflow-x: auto !important;   /* Permitir scroll horizontal si el contenido excede el ancho (para pestañas, etc.) */
   }
 
-  body nav.bg-white.shadow-md.sticky.top-0.z-50 {
-    width: 100% !important;
-    max-width: 100% !important;
-    margin-left: 0;
-    margin-right: 0;
-    box-sizing: border-box; /* Añadido box-sizing */
-  }
 
-  body nav.bg-white.shadow-md.sticky.top-0.z-50 > .container.mx-auto.px-4 {
+  body  .absolute.inset-0.bg-grid-pattern.opacity-10 { /* Background pattern - REVISADO, MENOS ESPECÍFICO */
     width: 100% !important;
     max-width: 100% !important;
-    padding-left: 1rem;
-    padding-right: 1rem;
-    box-sizing: border-box; /* Añadido box-sizing */
+    left: 0 !important;
+    right: 0 !important;
+    box-sizing: border-box !important; /* box-sizing también aquí */
   }
+}
 
-  body .nav-tabs {
-    width: 100% !important;
-    max-width: 100% !important;
-    margin-left: 0;
-    margin-right: 0;
-    padding-left: 0;
-    padding-right: 0;
-    box-sizing: border-box; /* Añadido box-sizing */
-  }
+
+.animate-fadeInUp {
+	animation: fadeInUp 0.6s ease-out;
+}
+
+.animate-slideInRight {
+	animation: slideInRight 0.6s ease-out;
+}
+
+.animate-pulse {
+	animation: pulse 2s infinite;
+}
+
+/* Toast Notifications */
+.toast {
+	position: fixed;
+	bottom: 1.5rem;
+	right: 1.5rem;
+	padding: 0.8rem 1.2rem;
+	border-radius: 0.4rem;
+	background: white;
+	box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.1);
+	animation: slideInRight 0.3s ease-out;
+	z-index: 50;
+	font-size: 0.75rem;
+}
+
+.toast-success {
+	border-left: 3px solid var(--success);
+}
+
+.toast-error {
+	border-left: 3px solid var(--danger);
+}
+
+/* Navigation */
+.nav-tabs {
+	display: flex;
+	gap: 0.8rem;
+	border-bottom: 2px solid #e5e7eb;
+}
+
+.nav-tab {
+	display: flex;
+	align-items: center;
+	gap: 0.4rem;
+	padding: 0.6rem 0.8rem;
+	color: #6b7280;
+	border-bottom: 2px solid transparent;
+	margin-bottom: -2px;
+	transition: all 0.2s;
+	white-space: nowrap;
+	cursor: pointer;
+	font-size: 0.8rem;
+}
+
+.nav-tab:hover {
+	color: var(--primary);
+}
+
+.nav-tab.active {
+	color: var(--primary);
+	border-bottom-color: var(--primary);
+}
+
+/* Forms */
+.form-input {
+	width: 100%;
+	padding: 0.6rem;
+	border: 1px solid #d1d5db;
+	border-radius: 0.4rem;
+	font-size: 0.75rem;
+	transition: all 0.3s ease;
+}
+
+.form-input:focus {
+	outline: none;
+	border-color: var(--primary);
+	box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
+	transform: translateY(-1px);
+}
+
+/* Buttons */
+.btn-primary {
+	background-color: var(--primary);
+	color: white;
+	padding: 0.6rem 1.2rem;
+	border-radius: 0.4rem;
+	font-weight: 500;
+	transition: all 0.3s ease;
+	position: relative;
+	overflow: hidden;
+	font-size: 0.8rem;
+}
+
+.btn-primary:hover {
+	background-color: var(--primary-dark);
+	transform: translateY(-1px);
+	box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.1);
+}
+
+.btn-primary:active {
+	transform: translateY(0);
+}
+
+/* Cards */
+.calculator-card {
+	background-color: white;
+	border-radius: 0.8rem;
+	box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.1);
+	padding: 1.2rem;
+	transition: all 0.3s ease;
+	animation: fadeInUp 0.6s ease-out;
+}
+
+.calculator-card:hover {
+	transform: translateY(-3px);
+	box-shadow: 0 8px 12px -3px rgba(0, 0, 0, 0.1);
+}
+
+/* Results */
+.result-card {
+	background-color: #f8fafc;
+	border-radius: 0.6rem;
+	padding: 0.8rem;
+	transition: all 0.3s ease;
+}
+
+.result-card:hover {
+	background-color: #f1f5f9;
+	transform: translateY(-1px);
+}
+
+/* Tables */
+table {
+	width: 100%;
+	border-collapse: separate;
+	border-spacing: 0;
+}
+
+th {
+	background-color: #f8fafc;
+	padding: 0.8rem;
+	font-weight: 600;
+	color: #1f2937;
+	border-bottom: 2px solid #e5e7eb;
+	font-size: 0.75rem;
+}
+
+td {
+	padding: 0.8rem;
+	border-bottom: 1px solid #e5e7eb;
+	transition: background-color 0.2s;
+	font-size: 0.75rem;
+}
+
+tr:hover td {
+	background-color: #f8fafc;
+}
+
+/* Search */
+.search-container {
+	position: relative;
+	max-width: 32rem;
+	margin: 0 auto;
+}
+
+.search-input {
+	width: 100%;
+	padding: 0.6rem 0.8rem 0.6rem 2.2rem;
+	border: 1px solid #d1d5db;
+	border-radius: 0.6rem;
+	font-size: 0.75rem;
+	transition: all 0.3s ease;
+}
+
+.search-input:focus {
+	border-color: var(--primary);
+	box-shadow: 0 3px 5px -1px rgba(37, 99, 235, 0.1);
+	transform: scale(1.01);
+}
+
+.search-icon {
+	position: absolute;
+	left: 0.6rem;
+	top: 50%;
+	transform: translateY(-50%);
+	color: #9ca3af;
+	pointer-events: none;
+	font-size: 0.75rem;
+}
+
+/* Formula cards */
+.formula-card {
+	background-color: white;
+	border-radius: 0.8rem;
+	box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.1);
+	padding: 1.2rem;
+	transition: all 0.3s ease;
+	animation: slideInRight 0.6s ease-out;
+}
+
+.formula-card:hover {
+	transform: translateY(-3px);
+	box-shadow: 0 8px 12px -3px rgba(0, 0, 0, 0.1);
+}
+
+.formula-title {
+	color: var(--primary);
+	font-size: 1.1rem;
+	font-weight: 600;
+	margin-bottom: 0.8rem;
+	display: flex;
+	align-items: center;
+	gap: 0.4rem;
+}
+
+.formula-content {
+	font-size: 0.75rem;
+	color: #4b5563;
+}
+
+/* Canvas */
+#cashFlowCanvas {
+	border-radius: 0.6rem;
+	transition: all 0.3s ease;
+	background-color: white;
+}
+
+#cashFlowCanvas:hover {
+	box-shadow: 0 8px 12px -3px rgba(0, 0, 0, 0.1);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+	.grid {
+		grid-template-columns: 1fr;
+	}
+
+	.nav-tabs {
+		overflow-x: auto;
+		-webkit-overflow-scrolling: touch;
+	}
+
+	.calculator-card {
+		padding: 1rem;
+	}
+}
+
+/* Loading states */
+.loading {
+	position: relative;
+	overflow: hidden;
+}
+
+.loading::after {
+	content: "";
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	background: linear-gradient(90deg,
+			rgba(255, 255, 255, 0) 0%,
+			rgba(255, 255, 255, 0.2) 50%,
+			rgba(255, 255, 255, 0) 100%);
+	animation: shimmer 1.5s infinite;
+}
+
+/* Grid pattern background */
+.bg-grid-pattern {
+	background-image: linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
+		linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
+	background-size: 20px 20px;
+	animation: moveBackground 20s linear infinite;
 }
 
 .animate-fadeInUp {