/* Custom Styles for Vida Intermitente */

:root {
    --brand-orange: #D96A17;
    --brand-teal: #206867;
}

body {
    -webkit-tap-highlight-color: transparent;
}

/* Softer background + app feel */
#app {
    background: radial-gradient(1200px 600px at 50% -10%, rgba(45,122,120,0.10), transparent 55%),
                radial-gradient(900px 500px at 90% 10%, rgba(242,125,38,0.10), transparent 55%),
                #f8fafc;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #cbd5e1;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out forwards;
}

/* Custom Inputs */
input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(130deg) brightness(95%) contrast(80%);
    cursor: pointer;
}

/* Card Hover Effects */
.card-hover {
    transition: all 0.2s ease;
}
.card-hover:active {
    transform: scale(0.98);
}

/* Bottom Nav Active State */
.nav-item.active {
    color: var(--brand-teal);
}
.nav-item.active svg {
    fill: rgba(45, 122, 120, 0.1);
}

/* Progress Bar Transition */
.progress-bar-fill {
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Timer ring */
.ring {
    width: 220px;
    height: 220px;
    border-radius: 9999px;
    position: relative;
    display: grid;
    place-items: center;
    background: conic-gradient(var(--brand-orange) 0deg, #e5e7eb 0deg);
}
.ring[data-phase="window"] {
    background: conic-gradient(var(--brand-teal) 0deg, #e5e7eb 0deg);
}
.ring::after {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 9999px;
    background: white;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}
.ring-inner {
    position: relative;
    z-index: 1;
    text-align: center;
}

/* Bottom nav active pill */
.nav-item {
    width: 76px;
    padding: 10px 0;
    border-radius: 16px;
}
.nav-item.active {
    background: rgba(45,122,120,0.08);
}


/* --- Achievements & Toast --- */
.vi-badge{
  padding:8px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  letter-spacing:.02em;
  border:1px solid rgba(0,0,0,.08);
}
.vi-badge-on{
  background:rgba(13,148,136,.10);
  color:#0d9488;
  border-color:rgba(13,148,136,.25);
}
.vi-badge-off{
  background:#f3f4f6;
  color:#6b7280;
}
.vi-badge-pop{
  animation: viPop 1.1s ease;
}
@keyframes viPop{
  0%{transform:scale(1);}
  25%{transform:scale(1.12);}
  55%{transform:scale(0.98);}
  100%{transform:scale(1);}
}
.vi-toast{
  position:fixed;
  left:50%;
  top:14px;
  transform:translateX(-50%) translateY(-16px);
  background:#111827;
  color:white;
  padding:12px 14px;
  border-radius:14px;
  font-weight:800;
  font-size:13px;
  box-shadow:0 10px 25px rgba(0,0,0,.22);
  opacity:0;
  z-index:9999;
  max-width:min(520px, calc(100% - 24px));
  text-align:center;
}
.vi-toast-show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
  transition:all .25s ease;
}
.vi-toast-hide{
  opacity:0;
  transform:translateX(-50%) translateY(-16px);
  transition:all .35s ease;
}


/* Weight log + achievements animations */
.vi-bounce{animation:viBounce .6s ease both;}
@keyframes viBounce{0%{transform:scale(1)}50%{transform:scale(1.12)}100%{transform:scale(1)}}

/* Slightly richer shadows */
.shadow-soft{box-shadow:0 10px 30px rgba(0,0,0,.06);}


/* v2.0 polish */
body{background:linear-gradient(180deg,#eef2f7 0%,#f7fafc 100%);} 
#app{border-radius:28px; overflow:hidden; box-shadow:0 24px 60px rgba(15,23,42,.12);} 
.bg-white.rounded-3xl{box-shadow:0 14px 35px rgba(15,23,42,.06)!important; border-color:rgba(226,232,240,.9)!important;} 
#pwaInstallBtn{font-weight:900; letter-spacing:.02em; box-shadow:0 14px 35px rgba(242,125,38,.35)!important;} 
.progress-bar-fill{box-shadow:0 0 18px rgba(45,122,120,.18);} 
.ring{box-shadow:inset 0 0 0 10px rgba(255,255,255,.65), 0 24px 50px rgba(15,23,42,.10);} 
.ring::after{box-shadow:0 16px 40px rgba(15,23,42,.10);} 
.nav-item.active{box-shadow:0 10px 24px rgba(45,122,120,.12);} 
button{transition:transform .15s ease, box-shadow .2s ease, opacity .2s ease;} 
button:active{transform:scale(.98);} 
.shadow-soft{box-shadow:0 14px 35px rgba(15,23,42,.08);} 
@media (max-width: 520px){ #app{border-radius:0; box-shadow:none;} }


/* v2.4 accessibility + contrast */
.text-gray-400{color:#64748b !important;}
.text-gray-500{color:#475569 !important;}
.text-gray-600{color:#334155 !important;}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid rgba(32,104,103,.22);outline-offset:2px;}
.ring{width:240px;height:240px;}
.ring::after{inset:16px;}
#timer-progress-label{letter-spacing:.01em;}

/* v2.7 hero/streak polish */
.ring{width:260px;height:260px;}
.ring::after{inset:18px;}
#timer-display{font-size:2.75rem;line-height:1;}
#timer-progress-label{font-size:.95rem;}
.text-gray-500{color:#334155 !important;}
.text-gray-400{color:#475569 !important;}
@media (max-width:420px){.ring{width:232px;height:232px;} .ring::after{inset:16px;} #timer-display{font-size:2.35rem;}}