/* Custom Styles for Vida Intermitente */

:root {
    --brand-orange: #F27D26;
    --brand-teal: #2D7A78;
}

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;
}