/* =========================
   VARIABLES DE COLOR
========================= */
:root {
  --primary: #357abd;
  --secondary: #ffd700;
  --bg: #f4f6fa;
  --text: #222;
  --card-bg: #fff;
  --header-bg: #357abd;
  --footer-bg: #111;
}
body.dark {
  --bg: #121212;
  --text: #eee;
  --card-bg: #1e1e1e;
  --header-bg: #222;
  --footer-bg: #000;
}
* { box-sizing: border-box; margin:0; padding:0; }
body {
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--text);
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
.container { width:90%; max-width:1100px; margin:auto; }
a { text-decoration:none; transition: all 0.3s ease; }
button { transition: all 0.3s ease; }

/* =========================
   HEADER
========================= */
.header {
  background:var(--header-bg);
  color:white;
  padding:1rem;
  position:sticky;
  top:0;
  z-index:100;
  box-shadow:0 2px 6px rgba(0,0,0,0.15);
}
.header .container {
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.header .logo {
  font-size:1.6rem;
  font-weight:700;
  letter-spacing:1px;
}
.header .logo span {
  color:var(--secondary);
}
.header nav ul {
  list-style:none;
  display:flex;
  gap:1rem;
}
.header nav a,
.header nav button {
  color: white;
  font-weight: 600;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  display: inline-block;
  overflow: hidden;
  transform: scale(1);
  transition: transform 0.4s ease, color 0.4s ease;
}

/* Afegim un span al contingut per controlar el moviment del text */
.header nav a span,
.header nav button span {
  display: inline-block;
  transition: transform 0.4s ease;
}

.header nav a:hover,
.header nav button:hover {
  transform: scale(1.25);   /* Zoom */
  color: var #1e90ff;    /* Canvi de color si vols destacar */
}

.header nav a:hover span,
.header nav button:hover span {
  transform: translateX(-6px); /* Text cap a l'esquerra */
}

.header nav a:hover,
.header nav button:hover {
  background:rgba(255,255,255,0.15);
  transform:scale(1.15);
}

/* =========================
   HERO
========================= */
.hero {
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  color:white;
  text-align:center;
  padding:3rem 1rem;
  border-radius:0 0 12px 12px;
  box-shadow:0 4px 10px rgba(0,0,0,0.2);
}
.hero h2 { font-size:2.2rem; margin-bottom:0.5rem; }
.hero p { font-size:1.1rem; opacity:0.9; }

/* =========================
   TASK FORM
========================= */
.task-form {
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  margin:2rem 0;
}
.task-form input,
.task-form select,
.task-form button {
  padding:0.7rem;
  border-radius:6px;
  border:1px solid #ccc;
  font-size:0.95rem;
  box-shadow:0 1px 3px rgba(0,0,0,0.1);
}
.task-form input[type="text"] { flex:1; }
.task-form button {
  background:var(--primary);
  color:white;
  border:none;
  cursor:pointer;
}
.task-form button:hover {
  background:#285a8c;
  transform:scale(1.05);
  box-shadow:0 4px 12px rgba(0,0,0,0.25);
}

/* =========================
   FILTERS
========================= */
.filters {
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  margin-bottom:1.5rem;
}
.filters input,
.filters select,
.filters button {
  padding:0.6rem;
  border-radius:6px;
  border:1px solid #ccc;
  font-size:0.9rem;
  box-shadow:0 1px 3px rgba(0,0,0,0.1);
}
.filters button {
  background:var(--secondary);
  border:none;
  cursor:pointer;
}
.filters button:hover {
  background:#e6c200;
  transform:scale(1.05);
  box-shadow:0 4px 12px rgba(0,0,0,0.25);
}

/* =========================
   TASK LIST
========================= */
#task-list { list-style:none; padding:0; }
#task-list li {
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:var(--card-bg);
  padding:0.9rem 1rem;
  border-radius:8px;
  margin-bottom:0.8rem;
  box-shadow:0 2px 6px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}
#task-list li:hover {
  transform:scale(1.01);
  box-shadow:0 4px 15px rgba(0,0,0,0.25);
}
#task-list li span { flex:1; }
#task-list li.low { border-left:5px solid green; }
#task-list li.medium { border-left:5px solid orange; }
#task-list li.high { border-left:5px solid red; }
#task-list li.completed { text-decoration:line-through; opacity:0.6; }

/* Avisos d'alarma */
.task.warning { background:#fff3cd; border-left:5px solid orange; }
.task.alarm { background:#f8d7da; border-left:5px solid red; animation:pulse 1s infinite; }
@keyframes pulse {
  0%{transform:scale(1);}
  50%{transform:scale(1.02);}
  100%{transform:scale(1);}
}
.task-actions button {
  margin-left:0.5rem;
  background:none;
  border:none;
  cursor:pointer;
  font-size:1.1rem;
  color:var(--primary);
  transition:all 0.3s ease;
}
.task-actions button:hover {
  color:var(--secondary);
  transform:scale(1.2);
}

/* =========================
   EXPORT/IMPORT
========================= */
.export-import { margin-top:1.5rem; display:flex; gap:1rem; }
.export-import button,
.export-import input {
  padding:0.7rem;
  border-radius:6px;
  border:1px solid #ccc;
  font-size:0.95rem;
}
.export-import button {
  background:var(--primary);
  color:white;
  border:none;
  cursor:pointer;
}
.export-import button:hover {
  background:#285a8c;
  transform:scale(1.05);
  box-shadow:0 4px 12px rgba(0,0,0,0.25);
}

/* =========================
   FOOTER
========================= */
.footer {
  background:var(--footer-bg);
  color:#ccc;
  text-align:center;
  padding:1rem;
  margin-top:auto; /* Manté el footer a baix sempre */
  border-top:1px solid rgba(255,255,255,0.1);
}
.footer a { color:var(--secondary); }
.footer a:hover { color:white; }

/* =========================
   COOKIE BANNER
========================= */
.cookie-banner {
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:#222;
  color:white;
  padding:1rem;
  display:none;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  z-index:200;
  box-shadow:0 -2px 6px rgba(0,0,0,0.3);
}
.cookie-banner button {
  background:var(--secondary);
  border:none;
  padding:0.5rem 1rem;
  border-radius:6px;
  cursor:pointer;
}
.cookie-banner button:hover {
  background:#e6c200;
  transform:scale(1.05);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width:768px) {
  .task-form, .filters, .export-import { flex-direction:column; }
  #task-list li { flex-direction:column; align-items:flex-start; }
  .task-actions { margin-top:0.5rem; }
}