@import "https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap";:root{--primary-color:#ff9a9e;--secondary-color:#fecfef;--accent-color:#a18cd1;--water-color:#4facfe;--water-color-light:#00f2fe;--text-main:#4a4a4a;--text-light:#7a7a7a;--glass-bg:#ffffffb3;--glass-border:#ffffff80;--glass-shadow:0 8px 32px 0 #1f26871a}*{box-sizing:border-box;margin:0;padding:0;font-family:Nunito,sans-serif}body{background:linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);min-height:100vh;color:var(--text-main);justify-content:center;display:flex;overflow-x:hidden}#root{flex-direction:column;width:100%;max-width:500px;min-height:100vh;display:flex}h1,h2,h3,h4{color:var(--text-main);margin-bottom:1rem;font-weight:800}button{cursor:pointer;border:none;outline:none;font-family:Nunito,sans-serif;transition:all .3s}.glass-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:24px;padding:2rem}.input-field{width:100%;color:var(--text-main);background:#ffffffe6;border:2px solid #0000;border-radius:15px;margin:8px 0;padding:12px 20px;font-family:Nunito,sans-serif;font-size:1rem;transition:all .3s;box-shadow:inset 0 2px 4px #0000000d}.input-field:focus{border-color:var(--accent-color);outline:none;box-shadow:0 0 10px #a18cd14d}.btn-primary{background:linear-gradient(to right, var(--water-color), var(--water-color-light));color:#fff;border-radius:20px;width:100%;margin-top:1rem;padding:14px 28px;font-size:1.1rem;font-weight:800;box-shadow:0 4px 15px #4facfe66}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #4facfe99}.btn-primary:active{transform:translateY(1px)}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}.floating{animation:3s ease-in-out infinite float}@keyframes popIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.pop-in{animation:.5s cubic-bezier(.175,.885,.32,1.275) forwards popIn}.app-container{flex-direction:column;flex:1;width:100%;padding:15px;display:flex;position:relative}.login-card{text-align:center;width:100%;max-width:350px}.app-title{margin-top:15px;font-size:2rem;color:var(--water-color)!important;margin-bottom:0!important}.app-subtitle{color:var(--accent-color);margin-bottom:15px;font-size:1rem;font-weight:700}.login-desc{color:var(--text-light);margin-bottom:10px;font-size:.9rem;line-height:1.4}.google-btn{justify-content:center;align-items:center;display:flex}.bottom-nav{z-index:100;justify-content:space-around;margin-bottom:15px;display:flex;position:sticky;top:10px;border-radius:20px!important;padding:8px 10px!important}.nav-btn{color:var(--text-light);background:0 0;border-radius:15px;flex-direction:column;align-items:center;gap:2px;padding:8px 20px;font-weight:700;transition:all .3s;display:flex}.nav-btn.active{background:linear-gradient(135deg, var(--water-color), var(--water-color-light));color:#fff;box-shadow:0 4px 12px #4facfe4d}.nav-btn:hover:not(.active){background:#ffffff80}.nav-icon{font-size:1.3rem}.nav-label{text-transform:uppercase;letter-spacing:.5px;font-size:.7rem;font-weight:800}.view-content{flex:1}.cat-container{border-radius:30px;width:150px;height:150px;margin:0 auto 10px;position:relative;overflow:visible}.cat-image{object-fit:cover;border-radius:30px;width:100%;height:100%;box-shadow:0 10px 25px #00000026}.emotion-celebrating{animation:.5s infinite alternate jump}.emotion-happy .cat-image{filter:brightness(1.05)}.accessory{z-index:10;filter:drop-shadow(0 2px 4px #0000004d);font-size:2.5rem;animation:2s ease-in-out infinite accessoryBounce;position:absolute}.accessory-corona{top:-20px;left:50%;transform:translate(-50%)}.accessory-lentes{font-size:2rem;top:35%;left:50%;transform:translate(-50%)}.accessory-mono{top:-10px;right:-5px}.accessory-gorro{top:-25px;left:50%;transform:translate(-50%)}.accessory-flor{top:-10px;left:-5px}.accessory-estrella{top:-15px;right:0}@keyframes jump{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}@keyframes accessoryBounce{0%,to{transform:translate(-50%)rotate(-3deg)}50%{transform:translate(-50%)rotate(3deg)}}.kawaii-glass{background:#ffffff4d;border:3px solid #fffc;border-radius:5px 5px 15px 15px;width:50px;height:60px;transition:all .4s;position:relative;overflow:hidden;box-shadow:inset 0 0 10px #ffffff80}.water-level{background:linear-gradient(0deg, var(--water-color), var(--water-color-light));z-index:1;width:100%;height:0%;transition:height .6s cubic-bezier(.175,.885,.32,1.275);position:absolute;bottom:0;left:0}.kawaii-glass.filled .water-level{height:80%}.kawaii-glass.empty{opacity:.6}.face{z-index:2;width:30px;height:15px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.eye{background:#333;border-radius:50%;width:5px;height:5px;position:absolute;top:0}.eye.left{left:2px}.eye.right{right:2px}.mouth{border:2px solid #333;border-top:none;border-radius:0 0 10px 10px;width:8px;height:4px;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.blush{opacity:.6;background:#ff9a9e;border-radius:50%;width:6px;height:4px;position:absolute;top:3px}.blush.left-blush{left:-3px}.blush.right-blush{right:-3px}.kawaii-glass.filled{animation:.5s jump}.dashboard{flex-direction:column;gap:20px;padding-bottom:30px;display:flex}.header-stats{justify-content:space-around;align-items:center;display:flex;border-radius:20px!important;padding:12px 15px!important}.stat{color:var(--text-main);align-items:center;gap:6px;font-size:1.1rem;font-weight:800;display:flex}.logout-btn{color:var(--text-light);background:#fff9;border-radius:12px;align-items:center;padding:8px;display:flex}.logout-btn:hover{color:#e74c3c;background:#ff646433}.main-character-area{flex-direction:column;align-items:center;margin:5px 0;display:flex;position:relative}.chat-bubble{color:var(--text-main);text-align:center;z-index:10;background:#fff;border-radius:20px 20px 20px 5px;max-width:90%;margin-top:5px;padding:14px 18px;font-size:.9rem;font-weight:700;line-height:1.4;transition:all .3s;position:relative;box-shadow:0 4px 15px #00000014}.bubble-bounce{animation:.5s cubic-bezier(.175,.885,.32,1.275) bubblePop}@keyframes bubblePop{0%{transform:scale(.9)}50%{transform:scale(1.05)}to{transform:scale(1)}}.progress-section{text-align:center}.progress-section h3{margin-bottom:12px}.progress-bar-container{background:#f0f0f0cc;border-radius:12px;width:100%;height:24px;margin:12px 0;overflow:hidden;box-shadow:inset 0 2px 4px #00000014}.progress-bar{background:linear-gradient(90deg, var(--water-color), var(--water-color-light));border-radius:12px;justify-content:center;align-items:center;min-width:0;height:100%;transition:width .6s cubic-bezier(.175,.885,.32,1.275);display:flex}.progress-text{color:#fff;text-shadow:0 1px 2px #0003;font-size:.7rem;font-weight:800}.progress-detail{margin-bottom:12px;font-size:.9rem}.remaining{color:var(--text-light);font-weight:600}.completed{color:#27ae60;font-weight:800}.cups-grid{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:10px;display:flex}.actions{text-align:center}.actions h3{margin-bottom:12px}.buttons-grid{gap:12px;display:flex}.drink-btn{color:#fff;border-radius:20px;flex-direction:column;flex:1;align-items:center;gap:6px;padding:18px 10px;font-weight:700;display:flex;box-shadow:0 6px 15px #00000026}.drink-btn.water{background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%)}.drink-btn.juice{background:linear-gradient(135deg,#f6d365 0%,#fda085 100%)}.drink-label{font-size:1rem;font-weight:800}.drink-amount{opacity:.9;font-size:.75rem;font-weight:600}.drink-btn:hover{transform:translateY(-3px);box-shadow:0 8px 25px #0003}.drink-btn:active{transform:scale(.95)}.drink-btn:disabled{cursor:default}.cream-hint{color:var(--text-light);margin-bottom:14px;font-size:.8rem}.drink-btn.cream-morning{background:linear-gradient(135deg,#fbc2eb 0%,#a18cd1 100%)}.drink-btn.cream-night{background:linear-gradient(135deg,#a18cd1 0%,#6a5acd 100%)}.drink-btn.cream-morning.done,.drink-btn.cream-night.done{opacity:.85;background:linear-gradient(135deg,#84fab0,#8fd3f4)}.tienda{flex-direction:column;gap:20px;display:flex}.tienda-header{text-align:center}.tienda-header h2{margin-bottom:10px}.points-display{margin-bottom:15px}.points-badge{color:#fff;background:linear-gradient(135deg,#f6d365 0%,#fda085 100%);border-radius:20px;padding:8px 20px;font-size:1.1rem;font-weight:800;box-shadow:0 4px 12px #fda08566}.preview-area{margin-top:15px}.preview-label{color:var(--accent-color);margin-top:10px;font-size:.9rem;font-weight:700}.accessories-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.accessory-card{text-align:center;cursor:pointer;transition:all .3s;border-radius:20px!important;padding:15px!important}.accessory-card:hover{transform:translateY(-4px);box-shadow:0 8px 25px #00000026}.accessory-card.owned{border:2px solid var(--water-color)!important}.accessory-card.equipped{border:2px solid var(--water-color)!important;background:linear-gradient(135deg,#4facfe26,#00f2fe26)!important}.acc-emoji{margin-bottom:5px;font-size:2.5rem}.acc-name{font-size:.85rem;margin-bottom:4px!important}.acc-desc{color:var(--text-light);margin-bottom:10px;font-size:.7rem;line-height:1.3}.buy-btn{background:linear-gradient(135deg, var(--water-color), var(--water-color-light));color:#fff;border-radius:12px;width:100%;padding:8px 12px;font-size:.75rem;font-weight:800;box-shadow:0 3px 10px #4facfe4d}.buy-btn:hover{transform:scale(1.05)}.buy-btn.disabled{box-shadow:none;cursor:not-allowed;background:#ccc}.buy-btn.disabled:hover{transform:none}.equip-btn{color:#fff;background:linear-gradient(135deg,#a18cd1,#fbc2eb);border-radius:12px;width:100%;padding:8px 12px;font-size:.8rem;font-weight:800;box-shadow:0 3px 10px #a18cd14d}.equip-btn:hover{transform:scale(1.05)}.equip-btn.unequip{background:linear-gradient(135deg,#84fab0,#8fd3f4)}.diario{flex-direction:column;gap:20px;padding-bottom:30px;display:flex}.stats-row{gap:10px;display:flex}.stat-card{text-align:center;flex:1;border-radius:20px!important;padding:15px 10px!important}.stat-icon{margin-bottom:5px;font-size:1.8rem}.stat-value{color:var(--water-color);font-size:1.5rem;font-weight:900}.stat-label{color:var(--text-light);text-transform:uppercase;letter-spacing:1px;font-size:.75rem;font-weight:700}.chart-section h3{text-align:center;margin-bottom:15px}.chart{justify-content:space-between;align-items:flex-end;gap:6px;height:180px;padding:0 5px;display:flex}.chart-column{flex-direction:column;flex:1;align-items:center;height:100%;display:flex}.bar-container{flex:1;align-items:flex-end;width:100%;display:flex;position:relative}.bar{background:linear-gradient(0deg, var(--water-color), var(--water-color-light));border-radius:8px 8px 4px 4px;justify-content:center;align-items:flex-start;width:100%;min-height:4px;transition:height .6s cubic-bezier(.175,.885,.32,1.275);display:flex;position:relative}.bar-success{background:linear-gradient(#8fd3f4,#84fab0);box-shadow:0 0 10px #84fab066}.bar-value{color:#fff;text-shadow:0 1px 2px #0000004d;padding-top:4px;font-size:.55rem;font-weight:800}.goal-line{opacity:.7;background:#ff9a9e;border-radius:2px;height:2px;position:absolute;left:-3px;right:-3px}.day-label{color:var(--text-main);margin-top:6px;font-size:.7rem;font-weight:800}.date-label{color:var(--text-light);font-size:.6rem}.goal-star{margin-top:2px;font-size:.8rem;animation:1.5s ease-in-out infinite starPulse}@keyframes starPulse{0%,to{transform:scale(1)}50%{transform:scale(1.3)}}.chart-legend{color:var(--text-light);justify-content:center;gap:20px;margin-top:15px;font-size:.7rem;font-weight:600;display:flex}.legend-item{align-items:center;gap:5px;display:flex}.legend-dot{border-radius:3px;width:10px;height:10px}.legend-dot.goal{background:#ff9a9e}.legend-dot.achieved{background:linear-gradient(135deg,#84fab0,#8fd3f4)}.summary-section h3{text-align:center;margin-bottom:15px}.summary-stats{flex-direction:column;gap:12px;display:flex}.summary-item{background:#ffffff80;border-radius:15px;align-items:center;gap:10px;padding:10px 15px;font-size:.9rem;display:flex}.summary-emoji{font-size:1.2rem}.summary-item strong{color:var(--water-color)}.fact-section{text-align:center;background:linear-gradient(135deg,#a18cd126,#fbc2eb26)!important;border:1px solid #a18cd14d!important}.fact-section h3{margin-bottom:10px}.fun-fact{color:var(--text-main);margin-bottom:10px;font-size:.95rem;font-weight:600;line-height:1.5}.fact-attribution{color:var(--accent-color);font-size:.8rem;font-style:italic;font-weight:700}