continue watching/reading

views/anime/animes.html

@@ -122,6 +122,22 @@
 </div>
 
 <main>
+    <section class="section">
+        <div class="section-header">
+            <div class="section-title">Continue watching</div>
+        </div>
+        <div class="carousel-wrapper">
+            <button class="scroll-btn left" onclick="scrollCarousel('my-status', -1)">‹</button>
+            <div class="carousel" id="my-status">
+                <div class="card"><div class="card-img-wrap skeleton"></div></div>
+                <div class="card"><div class="card-img-wrap skeleton"></div></div>
+                <div class="card"><div class="card-img-wrap skeleton"></div></div>
+                <div class="card"><div class="card-img-wrap skeleton"></div></div>
+            </div>
+            <button class="scroll-btn right" onclick="scrollCarousel('my-status', 1)">›</button>
+        </div>
+    </section>
+
 
     <section class="section">
         <div class="section-header"><div class="section-title">Trending This Season</div></div>

views/books/books.html

@@ -111,6 +111,17 @@
 </div>
 
 <main>
+    <section class="section">
+        <div class="section-header">
+            <div class="section-title">Continue Reading</div>
+        </div>
+        <div class="carousel-wrapper">
+            <button class="scroll-btn left" onclick="scrollCarousel('my-status-books', -1)">‹</button>
+            <div class="carousel" id="my-status-books"></div>
+            <button class="scroll-btn right" onclick="scrollCarousel('my-status-books', 1)">›</button>
+        </div>
+    </section>
+
     <section class="section">
         <div class="section-header"><div class="section-title">Trending Books</div></div>
         <div class="carousel-wrapper">

views/css/anime/home.css

@@ -338,9 +338,23 @@ body {
 
 .card {
     min-width: 220px;
+    width: 220px;
+    flex: 0 0 220px;
     cursor: pointer;
     transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
 }
+.source-badge {
+    position: absolute;
+    top: 6px;
+    left: 6px;
+    background: rgba(0,0,0,0.75);
+    color: white;
+    font-size: 10px;
+    padding: 2px 6px;
+    border-radius: 6px;
+    text-transform: uppercase;
+}
+
 .card:hover {
     transform: translateY(-8px);
 }

views/css/list.css

@@ -312,10 +312,9 @@ body {
     color: var(--text-primary);
 }
 
-/* --- Diseño de Lista (Grid/List View) mejorado --- */
 .list-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
     gap: 2rem;
 }
 
@@ -368,15 +367,16 @@ body {
 }
 
 .list-grid.list-view .item-poster {
-    width: 100px;
-    height: 150px;
+    /* Cambiar el ancho y alto */
+    width: 120px; /* Antes: 100px */
+    height: 180px; /* Antes: 150px */
     aspect-ratio: auto;
     border-radius: 8px;
     margin: 1rem;
 }
 
 .item-content {
-    padding: 1.2rem;
+    padding: 1rem; /* Antes: 1.2rem */
     display: flex;
     flex-direction: column;
     flex-grow: 1;
@@ -393,7 +393,7 @@ body {
 }
 
 .item-title {
-    font-size: 1.1rem;
+    font-size: 1rem; /* Antes: 1.1rem */
     font-weight: 800;
     margin-bottom: 0.5rem;
     white-space: nowrap;
@@ -412,14 +412,16 @@ body {
 
 .item-meta {
     display: flex;
-    gap: 0.75rem;
-    margin-bottom: 0.8rem;
+    gap: 0.3rem; /* Antes: 0.75rem. Espacio entre los pills */
+    margin-bottom: 0.5rem; /* Antes: 0.8rem */
     flex-wrap: wrap;
+    /* Añadir: Asegura que si se envuelven, lo hagan con poco margen vertical */
+    line-height: 1.4;
 }
 
 .meta-pill {
-    font-size: 0.7rem;
-    padding: 0.25rem 0.6rem;
+    font-size: 0.65rem; /* Antes: 0.7rem */
+    padding: 0.15rem 0.4rem; /* Antes: 0.25rem 0.6rem. Reduce el padding interno */
     border-radius: 999px;
     font-weight: 700;
     white-space: nowrap;