se mejora css de paradero

src/routes/paradero/+page.svelte

@@ -96,7 +96,7 @@
 
 <div class="contenedor">
     <div class="rectangulo-naranja">
-        <img src={ImagenBus} alt="Bus" width="200" />
+        <img src={ImagenBus} alt="Bus" style="max-width: 200px; width: 30%;" />
         <div class="nombre-paradero">{nombreParadero}</div>
     </div>
 
@@ -105,8 +105,8 @@
     <div class="cuadricula">
         {#if paraderoData?.DetalleLineas}
             {#each paraderoData.DetalleLineas as linea}
-                <div class="rectangulo-pequeno">
-                    <div style="position: relative;">
+                <div class="rectangulo-pequeno" style="background-color: #{linea.colorFondo || '#5fbabe'}">
+                    <div style="position: relative; background-color: #fff;">
                         <div class="numero-micro">
                             {LetraoNumeroMicro(linea.Descripcion, 0)}
                         </div>
@@ -118,11 +118,7 @@
                             {LetraoNumeroMicro(linea.Descripcion, 1)}
                         </div>
                     </div>
-                    <div
-                        class="hora"
-                        style="background-color: #{linea.colorFondo ||
-                            '#5fbabe'}"
-                    >
+                    <div class="hora">
                         <div>{linea.Linea}</div>
                         {#if linea.Llegadas[0]?.EstimadaGPS}
                          <!--   {formatTimeMinutes(linea.Llegadas[0])} -->
@@ -144,6 +140,7 @@
     /* Estilos generales */
     .contenedor {
         width: 800px;
+        max-width: 90%;
         margin: 5rem auto; /* Centra el contenedor en la pantalla */
     }
 
@@ -160,7 +157,7 @@
         font-weight: bold;
         color: #fff;
         margin-right: 10px;
-        margin-left: 120px;
+        text-align: center;
     }
 
     .rectangulo-gris {
@@ -177,10 +174,6 @@
         margin-top: 10px;
     }
 
-    @media (max-width: 600px) {
-        .contenedor { zoom: .45 }
-    }
-
     .rectangulo-pequeno {
         position: relative;
         flex-direction: column;
@@ -197,6 +190,7 @@
         font-weight: bold;
         margin-right: 100px;
         color: #8c8b8d;
+        padding-left: 10px;
     }
 
     .circulo-letra {
@@ -211,13 +205,19 @@
         color: #fff;
         position: absolute;
         top: 25px;
-        right: 10px;
+        right: 20px;
     }
 
     .hora {
         margin-top: 5px;
-        background-color: #2196f3;
         color: #fff;
-        width: 266px;
+        width: 100%;
+    }
+
+    @media (max-width: 600px) {
+        .nombre-paradero { font-size: 20px; }
+        .numero-micro { font-size: 35px }
+        .circulo-letra { width: 35px; height: 35px; top: 10px; right: 10px; }
+        .hora { font-size: 12px; }
     }
 </style>