:root{
  --c-primary:#8E5BE6; --c-accent:#4FC3F7; --c-bg:#FFFFFF; --c-muted:#F2F4F7;
  --c-text:#111; --c-overdue:#FFF3CD;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;background:var(--c-bg);color:var(--c-text)}
a{color:#000}

/* Header en gris claro sólido */
.header{
  position: relative;
 /* background: var(--c-muted);       usa el gris claro de la paleta (#F2F4F7) */
  /* o si prefieres fijo:*/
  background-color: #F2F4F7;
  
  padding: 28px 16px 28px;
}

/* Nav a la derecha y centrado verticalmente */
.header__top{
  position:absolute; top:0; right:16px; bottom:0;
  display:flex; align-items:center;
}
.header__nav{display:flex; gap:10px; flex-wrap:wrap}
.header__nav a{
  background:#fff; padding:6px 12px; border-radius:10px; text-decoration:none; border:1px solid #e6e8eb
}
/* Marca centrada */
.header__brand{
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
}
.header__logo{height:110px; width:auto; object-fit:contain; filter:drop-shadow(0 2px 4px rgba(0,0,0,.18))}
.header__tagline{font-size:28px; font-weight:700; color:#0f172a}

/* Layout general */
.container{max-width:960px;margin:0 auto;padding:16px}
.card{background:#fff;border:1px solid #e6e8eb;border-radius:12px;padding:16px;margin-bottom:16px;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.grid{display:grid;gap:12px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}

/* Botones (centrado del texto y sin subrayado en links con clase .btn) */
.btn{
  background:var(--c-primary); color:#fff; border:none; padding:10px 14px; border-radius:10px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; text-decoration:none; gap:8px;
}
.btn.secondary{background:var(--c-accent); color:#000}
/* Variante para ocupar todo el ancho (la usamos en el login) */
.btn-block{ width:100%; }

/* Inputs */
.input, select, textarea{width:100%;padding:10px;border:1px solid #d7dbe0;border-radius:10px}

/* Formulario de nueva tarea: botón en fila propia para no taparlo el calendario */
.task-form{display:grid;gap:12px;grid-template-columns: 1fr 280px; align-items:start}
.task-form .title{grid-column:1/2}
.task-form .due{grid-column:2/3}
.task-form .notes{grid-column:1/-1}
.task-form .actions{grid-column:1/-1}

/* Lista y filtros */
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filters button{
  border:1px solid #e6e8eb;background:#fff;border-radius:999px;padding:6px 10px;cursor:pointer
}
.filters button.active{
  background:var(--c-primary);
  color:#fff;
  border-color:var(--c-primary);
}

.task-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-bottom:1px dashed #e5e7eb}
.task-title.done{text-decoration:line-through;opacity:.6}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;background:#eee}
.badge.overdue{background:var(--c-overdue);color:#6b4d00}