Fix old tables, improve new styles

3 files changed, 76 insertions, 151 deletions

diff --git a/src/frontend/app/routes/estimates-$id.css b/src/frontend/app/routes/estimates-$id.css
index be0775a..0658156 100644
--- a/src/frontend/app/routes/estimates-$id.css
+++ b/src/frontend/app/routes/estimates-$id.css
@@ -1,20 +1,6 @@
-.estimates-content-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  min-height: 0;
-  flex: 1;
-}
-
-.estimates-list-container {
-  overflow-y: auto;
-  flex: 1;
-  min-height: 0;
-  border-radius: 0.5rem;
-}
-
 .table-responsive {
   overflow-x: auto;
+  margin-bottom: 1.5rem;
 }
 
 .table {
@@ -43,20 +29,12 @@
 }
 
 /* Estimates page specific styles */
-.estimates-page {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  overflow: hidden;
-}
-
 .estimates-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 1rem;
   gap: 1rem;
-  flex-shrink: 0;
 }
 
 .manual-refresh-button {
@@ -85,32 +63,6 @@
   transform: none;
 }
 
-.toggle-map-button {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 0.75rem;
-  background: var(--primary-color);
-  border: none;
-  border-radius: 0.375rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  min-width: max-content;
-}
-
-.toggle-map-button:hover:not(:disabled) {
-  background: var(--primary-color-hover);
-  transform: translateY(-1px);
-}
-
-.toggle-map-button:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-  transform: none;
-}
-
 .refresh-icon {
   width: 1.5rem;
   height: 1.5rem;
@@ -263,7 +215,6 @@
   gap: 0.5rem;
   flex-wrap: wrap;
   margin-bottom: 1rem;
-  flex-shrink: 0;
 }
 
 .estimates-lines-container.scrollable {
@@ -287,28 +238,33 @@
   flex-shrink: 0;
 }
 
-.refresh-status {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  justify-content: center;
-  padding: 0.75rem 1rem;
-  margin-bottom: 1rem;
-  background-color: rgba(0, 123, 255, 0.1);
-  border: 1px solid rgba(0, 123, 255, 0.2);
+.experimental-notice {
+  background-color: #fff3cd;
+  border: 1px solid #ffc107;
   border-radius: 8px;
-  color: var(--primary-color);
+  padding: 1rem;
+  margin-bottom: 1rem;
+  color: #856404;
+}
+
+.experimental-notice strong {
+  display: block;
+  margin-bottom: 0.5rem;
+  color: #856404;
+}
+
+.experimental-notice p {
+  margin: 0;
   font-size: 0.9rem;
-  font-weight: 500;
-  flex-shrink: 0;
+  line-height: 1.4;
 }
 
-.refresh-status .refresh-icon {
-  width: 1rem;
-  height: 1rem;
+[data-theme="dark"] .experimental-notice {
+  background-color: #3d3100;
+  border-color: #ffc107;
+  color: #ffd966;
 }
 
-[data-theme="dark"] .refresh-status {
-  background-color: rgba(0, 123, 255, 0.15);
-  border-color: rgba(0, 123, 255, 0.3);
+[data-theme="dark"] .experimental-notice strong {
+  color: #ffd966;
 }
diff --git a/src/frontend/app/routes/stops-$id.css b/src/frontend/app/routes/stops-$id.css
index 50d30f3..3b377a7 100644
--- a/src/frontend/app/routes/stops-$id.css
+++ b/src/frontend/app/routes/stops-$id.css
@@ -1,3 +1,7 @@
+.page-title {
+  margin-block: 0;
+}
+
 .estimates-content-wrapper {
   display: flex;
   flex-direction: column;
@@ -10,11 +14,11 @@
   overflow-y: auto;
   flex: 1;
   min-height: 0;
-  border-radius: 0.5rem;
-}
 
-.table-responsive {
-  overflow-x: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding-block: 0 1rem;
 }
 
 .table {
@@ -43,18 +47,22 @@
 }
 
 /* Estimates page specific styles */
-.estimates-page {
+.stops-page {
   display: flex;
   flex-direction: column;
   height: 100%;
   overflow: hidden;
+
+  padding-block: 1rem;
+  box-sizing: border-box;
+
+  gap: 1rem;
 }
 
-.estimates-header {
+.stops-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 1rem;
   gap: 1rem;
   flex-shrink: 0;
 }
@@ -233,7 +241,6 @@
   display: flex;
   gap: 0.5rem;
   flex-wrap: wrap;
-  margin-bottom: 1rem;
   flex-shrink: 0;
 }
 
@@ -263,7 +270,6 @@
   border: 1px solid #ffc107;
   border-radius: 8px;
   padding: 1rem;
-  margin-bottom: 1rem;
   color: #856404;
   flex-shrink: 0;
 }
diff --git a/src/frontend/app/routes/stops-$id.tsx b/src/frontend/app/routes/stops-$id.tsx
index 30a8d1b..812821d 100644
--- a/src/frontend/app/routes/stops-$id.tsx
+++ b/src/frontend/app/routes/stops-$id.tsx
@@ -4,7 +4,6 @@ import { useTranslation } from "react-i18next";
 import { useParams } from "react-router";
 import { ErrorDisplay } from "~/components/ErrorDisplay";
 import LineIcon from "~/components/LineIcon";
-import { PullToRefresh } from "~/components/PullToRefresh";
 import { StopAlert } from "~/components/StopAlert";
 import { StopMap } from "~/components/StopMapSheet";
 import { ConsolidatedCirculationList } from "~/components/Stops/ConsolidatedCirculationList";
@@ -188,34 +187,10 @@ export default function Estimates() {
     }
   };
 
-  // Show loading skeleton while initial data is loading
-  if (dataLoading && !data) {
-    return (
-      <PullToRefresh
-        onRefresh={handleManualRefresh}
-        isRefreshing={isManualRefreshing}
-      >
-        <div className="page-container estimates-page">
-          <div className="estimates-header">
-            <h1 className="page-title">
-              <Star className="star-icon" />
-              <Edit2 className="edit-icon" />
-              {t("common.loading")}...
-            </h1>
-          </div>
-
-          <div className="table-responsive">
-            <ConsolidatedCirculationListSkeleton />
-          </div>
-        </div>
-      </PullToRefresh>
-    );
-  }
-
   return (
     <>
-      <div className="page-container estimates-page">
-        <div className="estimates-header">
+      <div className="page-container stops-page">
+        <div className="stops-header">
           <h1 className="page-title">
             <Star
               className={`star-icon ${favourited ? "active" : ""}`}
@@ -248,58 +223,46 @@ export default function Estimates() {
           </div>
         )}
 
-        {(isManualRefreshing || dataLoading) && (
-          <div className="refresh-status">
-            <RefreshCw className="refresh-icon spinning" />
-            <span>{t("estimates.refreshing", "Actualizando datos...")}</span>
-          </div>
-        )}
-
         {stopData && <StopAlert stop={stopData} />}
 
-        <div className="estimates-content-wrapper">
-          <div className="estimates-list-container">
-            <div className="experimental-notice">
-              <strong>
-                {t("estimates.experimental_feature", "Experimental feature")}
-              </strong>
-            </div>
-
-            <div className="table-responsive">
-              {dataLoading ? (
-                <ConsolidatedCirculationListSkeleton />
-              ) : dataError ? (
-                <ErrorDisplay
-                  error={dataError}
-                  onRetry={loadData}
-                  title={t(
-                    "errors.estimates_title",
-                    "Error al cargar estimaciones",
-                  )}
-                />
-              ) : data ? (
-                <ConsolidatedCirculationList
-                  data={data}
-                  dataDate={dataDate}
-                  regionConfig={regionConfig}
-                />
-              ) : null}
-            </div>
-          </div>
+        <div className="experimental-notice">
+          <strong>
+            {t("estimates.experimental_feature", "Experimental feature")}
+          </strong>
+        </div>
 
-          {/* Map showing stop and bus positions */}
-          {stopData && (
-            <StopMap
-              stop={stopData}
-              region={region}
-              circulations={(data ?? []).map((c) => ({
-                line: c.line,
-                route: c.route,
-                currentPosition: c.currentPosition,
-              }))}
+        <div className="estimates-list-container">
+          {dataLoading ? (
+            <ConsolidatedCirculationListSkeleton />
+          ) : dataError ? (
+            <ErrorDisplay
+              error={dataError}
+              onRetry={loadData}
+              title={t(
+                "errors.estimates_title",
+                "Error al cargar estimaciones",
+              )}
+            />
+          ) : data ? (
+            <ConsolidatedCirculationList
+              data={data}
+              dataDate={dataDate}
+              regionConfig={regionConfig}
             />
-          )}
+          ) : null}
         </div>
+
+        {stopData && (
+          <StopMap
+            stop={stopData}
+            region={region}
+            circulations={(data ?? []).map((c) => ({
+              line: c.line,
+              route: c.route,
+              currentPosition: c.currentPosition,
+            }))}
+          />
+        )}
       </div>
     </>
   );