/* ---------- Variables ---------- */ :root { --orange: #ff8f1f; --pink: #ff5e92; --blue: #6698CC; --green: #7dd957; --bg: #fff7f2; --card-bg:#ffffff; --text: #1a1a1a; --text-secondary: #555; --input-bg: #fff4ec; --nav-bg: rgba(255,255,255,0.95); --side-bg: rgba(255,255,255,0.96); --notif-item-bg: #fff4ec; --shadow: 0 10px 30px rgba(0,0,0,.12); --body-bg: linear-gradient(135deg, #ffd5b5, #fff7f2); --phone-bg: var(--bg); --icon-color: #1a1a1a; } /* ---------- Variables modo oscuro (aplicadas en ) ---------- */ .dark-mode { --bg: #151515; --card-bg: #2b2b2b; --text: #f0f0f0; --text-secondary: #bbb; --input-bg: #3b3b3b; --nav-bg: rgba(30,30,30,0.97); --side-bg: rgba(30,30,30,0.97); --notif-item-bg: #363636; --body-bg: linear-gradient(135deg, #111, #222); --phone-bg: #1d1d1d; --icon-color: #f0f0f0; } /* ---------- Reset ---------- */ * { margin: 0; padding: 0; box-sizing: border-box; } /* ---------- Body ---------- */ body { height: 100vh; overflow: hidden; display: block; align-items: center; justify-content: center; background: var(--body-bg); font-family: 'Fredoka', sans-serif; transition: background 0.3s; } /* ---------- Teléfono ---------- */ .phone { width: 100%; height: 100vh; background: var(--phone-bg); border-radius: 0; overflow: hidden; position: relative; border: none; box-shadow: none; transition: background 0.3s; } .notch { display: none; } /* ---------- Pantallas ---------- */ .screen { position: absolute; inset: 0; opacity: 0; pointer-events: none; transform: translateX(100%); transition: .4s ease; background: var(--bg); display: flex; flex-direction: column; } .screen.active { opacity: 1; pointer-events: all; transform: translateX(0); } /* ---------- Status bar ---------- */ .status { display: flex; align-items: center; justify-content: flex-end; padding: 8px 18px 0; height: auto; position: absolute; top: 0; right: 0; z-index: 10; } .status > div:first-child { display: none; } /* ---------- Header ---------- */ .header { padding: 18px; padding-top: 36px; border-radius: 0 0 35px 35px; color: white; position: relative; } .header h1 { font-size: 30px; } .header p { margin-top: 5px; opacity: .9; font-size: 13px; } /* ---------- Scroll ---------- */ .scroll { flex: 1; overflow-y: auto; padding: 18px; padding-bottom: 100px; color: var(--text); } .scroll::-webkit-scrollbar { display: none; } /* ---------- Hero ---------- */ .hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(135deg, #6698CC, #8cc1ff); text-align: center; padding: 30px; } /* ---------- Logo ---------- */ .logo { width: 160px; height: 160px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column; box-shadow: var(--shadow); margin-bottom: 30px; animation: floaty 3s infinite ease-in-out; } .logo h1 { font-size: 60px; color: var(--orange); } .logo span { font-size: 12px; letter-spacing: 2px; } .hero h2 { color: white; font-size: 30px; margin-bottom: 10px; } .hero p { color: white; opacity: .9; margin-bottom: 28px; } /* ---------- Botones ---------- */ .btn { width: 100%; height: 58px; border: none; border-radius: 20px; color: white; cursor: pointer; font-size: 17px; font-family: 'Fredoka', sans-serif; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: var(--shadow); transition: .25s; } .btn:hover { transform: translateY(-2px) scale(1.02); } .orange { background: linear-gradient(135deg, #ff9f43, #ff7f11); } .green { background: linear-gradient(135deg, #98ec65, #63d642); } .blue { background: linear-gradient(135deg, #7ab6ff, #6698CC); } .pink { background: linear-gradient(135deg, #ff80ab, #ff5e92); } /* ---------- Cards ---------- */ .card { background: var(--card-bg); border-radius: 28px; box-shadow: var(--shadow); padding: 18px; color: var(--text); transition: background 0.3s; } /* ---------- Camera box ---------- */ .camera-box { width: 100%; aspect-ratio: unset; height: 35vh; background: #222; border-radius: 28px; overflow: hidden; margin-bottom: 18px; display: flex; align-items: center; justify-content: center; } .camera-box img { width: 100%; height: 100%; object-fit: cover; } .placeholder { display: flex; flex-direction: column; align-items: center; gap: 12px; color: white; opacity: .7; } /* ---------- Mini buttons ---------- */ .actions { display: flex; gap: 12px; margin-bottom: 18px; } .miniBtn { flex: 1; height: 56px; border: none; border-radius: 18px; background: var(--card-bg); box-shadow: var(--shadow); cursor: pointer; font-family: 'Fredoka', sans-serif; color: var(--text); transition: background 0.3s; } /* ---------- Estilos grid ---------- */ .styles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .style-card { background: var(--card-bg); border-radius: 24px; padding: 14px; cursor: pointer; border: 3px solid transparent; box-shadow: var(--shadow); transition: .25s; color: var(--text); } .style-card:hover { transform: scale(1.03); } .style-card.active { border-color: var(--orange); } .style-preview { height: 90px; border-radius: 18px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; font-size: 28px; } /* ---------- Galería / Museo ---------- */ .gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .gallery-card { background: var(--card-bg); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); transition: .25s; } .gallery-card:hover { transform: translateY(-4px); } .gallery-card img { width: 100%; height: 130px; object-fit: cover; } .gallery-body { padding: 12px; color: var(--text); } /* ---------- Bottom Nav ---------- */ .bottom-nav { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); width: 92%; height: 74px; background: var(--nav-bg); border-radius: 28px; display: flex; justify-content: space-around; align-items: center; box-shadow: var(--shadow); z-index: 999; transition: background 0.3s; } .nav-btn { background: none; border: none; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; font-family: 'Fredoka', sans-serif; cursor: pointer; color: var(--text); } .hidden { display: none !important; } .bottom-nav.hidden-on-home { display: none !important; } /* Iconos del nav */ .nav-btn svg { color: var(--icon-color) !important; stroke: var(--icon-color) !important; } /* ---------- Menú lateral ---------- */ .side-menu { position: absolute; top: 0; right: -260px; width: 240px; height: 100%; background: var(--side-bg); backdrop-filter: blur(20px); z-index: 1000; padding: 100px 18px; transition: right .35s ease, background 0.3s; } .side-menu.open { right: 0; } .menu-item { width: 100%; height: 56px; border: none; border-radius: 18px; margin-bottom: 12px; background: var(--card-bg); box-shadow: var(--shadow); display: flex; align-items: center; gap: 12px; padding: 0 16px; font-family: 'Fredoka', sans-serif; cursor: pointer; color: var(--text); transition: background 0.3s; } /* Iconos del menú lateral */ .menu-item svg { color: var(--icon-color) !important; stroke: var(--icon-color) !important; } /* ---------- Inputs ---------- */ input { height: 54px; border: none; border-radius: 18px; padding: 0 16px; background: var(--input-bg); font-family: 'Fredoka', sans-serif; color: var(--text); transition: background 0.3s; } /* ---------- Panel de notificaciones ---------- */ .notification-panel { position: absolute; top: 90px; right: 16px; width: 300px; max-height: 420px; overflow-y: auto; background: var(--card-bg); border-radius: 28px; padding: 18px; box-shadow: 0 20px 50px rgba(0,0,0,.25); z-index: 2000; animation: pop .25s ease; transition: background 0.3s; } .notification-panel.hidden { display: none; } .notification-item { background: var(--notif-item-bg); border-radius: 18px; padding: 14px; margin-bottom: 12px; display: flex; gap: 12px; align-items: flex-start; transition: background 0.3s; } .notification-icon { width: 42px; height: 42px; border-radius: 14px; background: #ffe4ef; display: flex; align-items: center; justify-content: center; font-size: 20px; } .notification-content h4 { font-size: 14px; margin-bottom: 4px; color: var(--text); } .notification-content p { font-size: 12px; opacity: .7; line-height: 1.4; color: var(--text); } /* ---------- Utilitarios ---------- */ .hidden { display: none !important; } .like-btn { transition: .25s; } .like-btn:hover { transform: scale(1.05); } /* ---------- Fecha de creación (fondo dinámico) ---------- */ #creationDate { height: 54px; background: var(--input-bg); border-radius: 18px; display: flex; align-items: center; padding: 0 16px; color: var(--text); transition: background 0.3s; } /* ---------- Texto general dentro del scroll en modo oscuro ---------- */ .dark-mode .scroll p, .dark-mode .scroll span, .dark-mode .scroll h1, .dark-mode .scroll h2, .dark-mode .scroll h3, .dark-mode .scroll h4, .dark-mode .scroll div, .dark-mode .scroll b, .dark-mode .scroll strong { color: var(--text); } /* ---------- Animaciones ---------- */ @keyframes floaty { 0% { transform: translateY(0px); } 50% { transform: translateY(-8px); } 100% { transform: translateY(0px); } } @keyframes pop { 0% { transform: scale(.7); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }