/* rotina.css — versão clara premium + destaque piscando no editar */

/* -------- Tokens -------- */
:root{
  --azul-claro:#e3effc;   /* fundo do site */
  --azul:#498ecf;         /* botões/realces */
  --azul-escuro:#0d2657;  /* títulos/texto */
  --amarelo:#ffd600;      /* ativo/destaque */
  --branco:#fff;
  --borda:#e0e4ef;
  --vermelho:#e55763;
  --radius:22px;
  --shadow:0 2px 14px rgba(0,0,0,.08);
  --shadow-hover:0 10px 24px rgba(0,0,0,.14);
  --focus:0 0 0 3px rgba(255,214,0,.65), 0 0 0 6px rgba(73,142,207,.35);
}

/* -------- Base -------- */
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--azul-claro);
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--azul-escuro);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
:focus-visible{outline:none; box-shadow:var(--focus); border-radius:12px}

/* -------- Navbar -------- */
.navbar{background:var(--azul-claro)}
.navbar-brand{font-family:'Fredoka One', cursive; color:var(--azul-escuro); letter-spacing:1.2px}
.logo-img{height:48px;width:48px;object-fit:contain;border-radius:12px;margin-right:.5rem;background:var(--branco);border:2px solid var(--amarelo)}
.navbar-nav .nav-link{display:inline-flex;align-items:center;gap:.45rem;color:var(--azul-escuro);font-weight:700;border-radius:30px;padding:.45rem 1rem;transition:background .15s ease}
.navbar-nav .nav-link:hover,.navbar-nav .nav-link:focus-visible{background:rgba(255,255,255,.6)}
.navbar-nav .nav-link.active{background:var(--amarelo); color:var(--azul-escuro); box-shadow:0 4px 10px rgba(0,0,0,.08)}

/* -------- Banner -------- */
.container{max-width:960px}
.banner{background:var(--branco); border-radius:var(--radius); box-shadow:var(--shadow); padding:1rem 1.25rem; margin:1rem auto 2rem}
.banner h1{font-family:'Fredoka One', cursive; font-size:clamp(1.6rem,4vw,2.2rem); margin:.1rem 0 .25rem}

/* -------- Seletor -------- */
.rotina-seletor{display:flex;justify-content:center;gap:1rem;margin-bottom:2rem}
.btn-seletor{background:var(--branco); border:2px solid var(--amarelo); color:var(--azul); padding:.6rem 1rem; border-radius:12px; font-family:'Fredoka One', cursive; cursor:pointer; transition:transform .08s ease, box-shadow .18s ease}
.btn-seletor:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn-seletor.active{background:var(--amarelo); color:var(--azul-escuro); box-shadow:0 4px 10px rgba(0,0,0,.12)}

/* -------- Adicionar tarefa -------- */
.rotina-add{background:linear-gradient(180deg,#cfe8ff 0%, #bfe0f8 100%); border-radius:16px; padding:1.2rem; margin-bottom:2rem; box-shadow:var(--shadow); text-align:center}
.rotina-add h2{font-family:'Fredoka One', cursive; font-size:1.1rem; margin:0 0 1rem}
#form-tarefa{display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem}
.rotina-add input[type="text"], .rotina-add input[type="time"]{padding:.6rem 1rem; border-radius:10px; border:1.5px solid var(--borda); background:var(--branco); min-width:220px}
.btn-adicionar{background:var(--amarelo); color:var(--azul-escuro); border:0; border-radius:10px; padding:.6rem 1.25rem; font-family:'Fredoka One', cursive; cursor:pointer; transition:background .18s ease, box-shadow .18s ease}
.btn-adicionar:hover{background:var(--azul); color:#fff; box-shadow:var(--shadow-hover)}
.btn-sugerir{background:var(--branco); border:1.5px solid var(--borda); border-radius:10px; padding:.35rem .6rem; cursor:pointer}

/* -------- Lista -------- */
.rotina-list{display:flex; flex-direction:column; gap:1.1rem}
.rotina-card{background:var(--branco); border-radius:16px; box-shadow:var(--shadow); display:flex; align-items:center; gap:1rem; padding:1rem 1.2rem; border:1.5px solid var(--borda); min-height:70px}
.rotina-card:hover{box-shadow:var(--shadow-hover)}
.rotina-card.completed{opacity:.6}
.rotina-card.completed .rotina-title{text-decoration:line-through}
.rotina-check{width:28px;height:28px;border:2.5px solid var(--amarelo); border-radius:8px; background:none; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s ease}
.rotina-check.checked{background:var(--amarelo)}
.rotina-check.checked::after{content:'✔'; color:var(--azul); font-size:1.2rem}
.rotina-icon{font-size:1.7rem; color:var(--azul)}
.rotina-content{flex:1; min-width:0}
.rotina-title{font-family:'Fredoka One', cursive; font-size:1.1rem; color:var(--azul-escuro); margin-bottom:2px}
.rotina-time{font-size:.98rem; color:#8a90a9; font-style:italic; cursor:pointer}
.rotina-edit,.rotina-delete{background:none; border:none; font-size:1.3rem; margin-left:7px; cursor:pointer; opacity:.78}
.rotina-edit:hover{color:var(--azul); opacity:1}
.rotina-delete:hover{color:var(--vermelho); opacity:1}

/* -------- Destaque piscando (título + horário) -------- */
@keyframes pulseBlink{
  0%,100%{background:transparent; box-shadow:none}
  50%{background:#fff7cc; box-shadow:0 0 0 4px rgba(255,214,0,.35)}
}
.blink{animation:pulseBlink .9s ease-in-out 2; border-radius:10px;}

/* respeita preferências do usuário */
@media (prefers-reduced-motion:reduce){
  .blink{animation:none; background:#fff7cc}
}

/* -------- Footer -------- */
.rotina-footer{background:var(--azul-claro); color:var(--azul-escuro); border-top-left-radius:18px; border-top-right-radius:18px}

/* -------- Responsivo -------- */
@media (max-width:600px){
  .banner{padding:.9rem 1rem}
  .rotina-add{padding:1rem .6rem}
}