diff --git a/src/app/components/info-modal/info-modal.component.scss b/src/app/components/info-modal/info-modal.component.scss index caa7386..6f47842 100644 --- a/src/app/components/info-modal/info-modal.component.scss +++ b/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-checked: white; - --indicator-color: white; + --color: rgba(255, 255, 255, 0.75); + --color-checked: #ffffff; + --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; - color: var(--ion-color-dark); + font-size: 1.05rem; + color: var(--ion-color-dark, #1c1c1e); margin: 0 0 10px; } p, li { - font-size: 0.9rem; - line-height: 1.5; - color: var(--ion-color-medium-shade); + font-size: 0.92rem; + line-height: 1.55; + 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); - border: 1px solid rgba(0,0,0,0.04); + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06); + 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; + } + } +} +