fix(theme): correccion de contraste en modo oscuro para Manual, Beneficios y Privacidad

src/app/components/info-modal/info-modal.component.scss

@@ -1,15 +1,16 @@
 .privacy-content {
-  --background: var(--ion-color-light);
+  --background: var(--ion-color-light, #f4f5f8);
 }
 
 ion-segment {
-  --background: var(--ion-color-primary-shade);
+  --background: rgba(0, 0, 0, 0.15);
   border-radius: 0;
   
   ion-segment-button {
-    --color: rgba(255,255,255,0.7);
+    --color: rgba(255, 255, 255, 0.75);
-    --color-checked: white;
+    --color-checked: #ffffff;
-    --indicator-color: white;
+    --indicator-color: #ffffff;
+    font-weight: 600;
   }
 }
 
@@ -18,10 +19,10 @@ ion-segment {
   
   .info-logo {
     height: 80px;
-    background: white;
+    background: #ffffff;
     padding: 10px;
     border-radius: 16px;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     margin-bottom: 15px;
   }
 
@@ -38,17 +39,18 @@ ion-segment {
   
   .subtitle {
     margin: 5px 0 0;
-    color: var(--ion-color-medium);
+    color: var(--ion-color-medium, #666666);
     font-size: 0.9rem;
     font-weight: 500;
   }
 }
 
 .info-body {
-  background: white;
+  background: #ffffff;
   border-radius: 20px;
   padding: 20px;
-  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
+  border: 1px solid rgba(0, 0, 0, 0.04);
   margin-bottom: 20px;
 
   section {
@@ -58,15 +60,25 @@ ion-segment {
 
   h3 {
     font-weight: 700;
-    font-size: 1rem;
+    font-size: 1.05rem;
-    color: var(--ion-color-dark);
+    color: var(--ion-color-dark, #1c1c1e);
     margin: 0 0 10px;
   }
 
   p, li {
-    font-size: 0.9rem;
+    font-size: 0.92rem;
-    line-height: 1.5;
+    line-height: 1.55;
-    color: var(--ion-color-medium-shade);
+    color: #4a4a52;
+  }
+
+  strong {
+    color: #1a1a1a;
+  }
+
+  em {
+    color: var(--ion-color-primary);
+    font-style: normal;
+    font-weight: 600;
   }
 
   ul {
@@ -85,16 +97,16 @@ ion-segment {
 }
 
 .benefit-card {
-  background: white;
+  background: #ffffff;
   border-radius: 18px;
   padding: 18px;
-  box-shadow: 0 4px 15px rgba(0,0,0,0.06);
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
-  border: 1px solid rgba(0,0,0,0.04);
+  border: 1px solid rgba(0, 0, 0, 0.06);
   transition: transform 0.2s ease, box-shadow 0.2s ease;
 
   &.featured {
     border: 1.5px solid var(--ion-color-primary);
-    background: linear-gradient(180deg, #ffffff 0%, rgba(var(--ion-color-primary-rgb), 0.02) 100%);
+    background: linear-gradient(180deg, #ffffff 0%, rgba(var(--ion-color-primary-rgb), 0.03) 100%);
     box-shadow: 0 6px 20px rgba(var(--ion-color-primary-rgb), 0.12);
   }
 
@@ -134,12 +146,12 @@ ion-segment {
           margin: 0;
           font-size: 1.05rem;
           font-weight: 800;
-          color: var(--ion-color-dark);
+          color: #1a1a1a;
         }
         .category {
           margin: 2px 0 0;
           font-size: 0.8rem;
-          color: var(--ion-color-medium);
+          color: #666666;
           font-weight: 600;
           text-transform: uppercase;
           letter-spacing: 0.5px;
@@ -158,7 +170,7 @@ ion-segment {
 
   .benefit-desc {
     font-size: 0.92rem;
-    color: var(--ion-color-dark-shade);
+    color: #33333a;
     margin: 0 0 12px;
     line-height: 1.45;
   }
@@ -176,7 +188,7 @@ ion-segment {
       align-items: flex-start;
       gap: 8px;
       font-size: 0.84rem;
-      color: var(--ion-color-medium-shade);
+      color: #55555e;
       line-height: 1.4;
 
       ion-icon {
@@ -185,6 +197,21 @@ ion-segment {
         color: var(--ion-color-primary);
         flex-shrink: 0;
       }
+
+      em {
+        color: #777777;
+        font-style: italic;
+      }
+
+      b, strong {
+        color: #1a1a1a;
+      }
+
+      a {
+        color: var(--ion-color-primary);
+        font-weight: 600;
+        text-decoration: underline;
+      }
     }
   }
 
@@ -199,7 +226,7 @@ ion-segment {
       margin: 0 0 6px;
       font-size: 0.85rem;
       font-weight: 700;
-      color: var(--ion-color-dark);
+      color: #1e293b;
     }
 
     ul {
@@ -225,7 +252,10 @@ ion-segment {
 
 .footer-info {
   margin-top: 30px;
-  opacity: 0.6;
+  p, small {
+    color: #77777d;
+    font-size: 0.8rem;
+  }
 }
 
 .fade-in {
@@ -236,3 +266,150 @@ ion-segment {
   from { opacity: 0; transform: translateY(10px); }
   to { opacity: 1; transform: translateY(0); }
 }
+
+/* =========================================================
+   MODO OSCURO (DARK MODE) - OPTIMIZACIÓN DE CONTRASTE
+   ========================================================= */
+@media (prefers-color-scheme: dark) {
+  .privacy-content {
+    --background: var(--ion-background-color, #121212);
+  }
+
+  ion-segment {
+    --background: rgba(0, 0, 0, 0.35);
+
+    ion-segment-button {
+      --color: rgba(255, 255, 255, 0.7);
+      --color-checked: #ffffff;
+      --indicator-color: #ff8ab6;
+    }
+  }
+
+  .logo-container {
+    .info-logo {
+      background: rgba(255, 255, 255, 0.95);
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+    }
+
+    h2 {
+      color: #ff8ab6;
+    }
+
+    .subtitle {
+      color: #a6a7ab;
+    }
+  }
+
+  .info-body {
+    background: var(--ion-color-step-100, #1c1c1e);
+    border: 1px solid var(--ion-color-step-200, #2c2c30);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
+
+    h3 {
+      color: #ffffff;
+    }
+
+    p, li {
+      color: #d1d2d8;
+    }
+
+    strong {
+      color: #ffffff;
+    }
+
+    em {
+      color: #ff8ab6;
+    }
+  }
+
+  .benefit-card {
+    background: var(--ion-color-step-100, #1c1c1e);
+    border: 1px solid var(--ion-color-step-200, #2d2d32);
+    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
+
+    &.featured {
+      background: linear-gradient(180deg, #251e27 0%, var(--ion-color-step-100, #1c1c1e) 100%);
+      border: 1.5px solid #ff8ab6;
+      box-shadow: 0 6px 24px rgba(180, 62, 142, 0.28);
+    }
+
+    .card-top {
+      .brand-info {
+        .brand-icon {
+          &.cafe { background: rgba(255, 152, 0, 0.2); color: #ffb74d; }
+          &.gym { background: rgba(76, 175, 80, 0.2); color: #81c784; }
+          &.pilates { background: rgba(186, 104, 200, 0.22); color: #e1bee7; }
+          &.pasta { background: rgba(255, 87, 34, 0.2); color: #ff8a65; }
+          &.libreria { background: rgba(3, 169, 244, 0.2); color: #4fc3f7; }
+          &.travel { background: rgba(33, 150, 243, 0.2); color: #64b5f6; }
+        }
+
+        .title-wrap {
+          h3 {
+            color: #ffffff;
+          }
+          .category {
+            color: #a0a0a8;
+          }
+        }
+      }
+    }
+
+    .benefit-desc {
+      color: #d1d2d8;
+    }
+
+    .meta-grid {
+      border-top: 1px dashed rgba(255, 255, 255, 0.15);
+
+      .meta-row {
+        color: #b5b6bc;
+
+        ion-icon {
+          color: #ff8ab6;
+        }
+
+        em {
+          color: #9fa1a8;
+        }
+
+        b, strong {
+          color: #ffffff;
+        }
+
+        a {
+          color: #64b5f6;
+          text-decoration: underline;
+        }
+      }
+    }
+
+    .inclusion-box {
+      background: rgba(255, 255, 255, 0.04);
+      border-left: 3px solid #2dd36f;
+      border-top: 1px solid rgba(255, 255, 255, 0.08);
+      border-right: 1px solid rgba(255, 255, 255, 0.08);
+      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+
+      h4 {
+        color: #ffffff;
+      }
+
+      ul li {
+        color: #d0d1d6;
+      }
+    }
+
+    .action-btn[color="tertiary"] {
+      --color: #ba68c8;
+      --border-color: #ba68c8;
+    }
+  }
+
+  .footer-info {
+    p, small {
+      color: #9e9ea6;
+    }
+  }
+}
+