/* ---------- COLORS CORPORATIUS ---------- */
:root {
  --primary-color: #0d6efd;    /* Blau corporatiu */
  --secondary-color: #1d2d50;  /* Blau fosc */
  --light-color: #f8f9fa;      /* Fons clar */
  --dark-color: #333333;       /* Text fosc */
  --accent-color: #00bfa6;     /* Verd turquesa */
  --button-hover: #0056b3;     /* Blau fosc hover */
}

/* ---------- GENERAL ---------- */
body {
  font-family: 'Segoe UI', sans-serif;
  background-color: var(--light-color);
  color: var(--dark-color);
  line-height: 1.6;
  transition: background 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5 {
  font-weight: 600;
  color: var(--secondary-color);
}

a {
  text-decoration: none;
  color: var(--primary-color);
  transition: color 0.3s ease;
}
a:hover {
  color: var(--accent-color);
  text-decoration: none;
}

/* ---------- NAVBAR ---------- */
.navbar {
  background: var(--primary-color);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: background 0.3s ease, color 0.3s ease;
}
.navbar-brand .logo {
  max-height: 40px;
  width: auto;
  object-fit: contain;
}
.navbar .btn {
  border-radius: 30px;
  transition: 0.3s ease;
}
.navbar .btn:hover {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: white;
}

/* ---------- HERO / SECCIONS ---------- */
.hero {
  padding: 100px 20px;
  text-align: center;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
  transition: background 0.3s ease, color 0.3s ease;
}
.hero h1 {
  font-size: 2.8rem;
  font-weight: 700;
}
.hero p {
  font-size: 1.2rem;
  opacity: 0.9;
}
.hero .btn {
  border-radius: 50px;
  font-weight: 600;
  transition: 0.3s ease;
}
.hero .btn:hover {
  background-color: var(--button-hover);
  color: white;
}

/* ---------- SECCIONS ---------- */
section.py-5 h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
}
section.py-5 p {
  font-size: 1.1rem;
  color: #333; /* clar en mode normal */
  transition: color 0.3s ease;
}

/* ---------- EQUIP ---------- */
.team {
  padding: 60px 0;
}
.team img {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 15px;
  border: 4px solid var(--primary-color);
  box-shadow: 0 5px 20px rgba(0,0,0,0.15);
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.team img:hover {
  transform: translateY(-5px) scale(1.05);
}
.team h5 {
  margin-top: 10px;
  font-weight: 600;
  color: var(--secondary-color);
}
.team p {
  color: #666;
  transition: color 0.3s ease;
}

/* ---------- FOOTER ---------- */
.footer {
  background-color: #e9ecef;
  color: #666;
  font-size: 0.9rem;
  border-top: 1px solid #ddd;
  transition: background 0.3s ease, color 0.3s ease;
}

/* ---------- TEXTOS MENORS ---------- */
.text-muted {
  color: #666 !important;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2rem;
  }
  .team img {
    width: 140px;
    height: 140px;
  }
}

/* ---------- MODE NIT ---------- */
body.dark-mode {
  background-color: #121212;
  color: #e0e0e0;
}

body.dark-mode h1, 
body.dark-mode h2, 
body.dark-mode h3, 
body.dark-mode h4, 
body.dark-mode h5 {
  color: #cfd8dc;
}

/* Navbar i botons */
body.dark-mode .navbar {
  background-color: #1e1e1e !important;
}
body.dark-mode .navbar .btn {
  border-color: #bbb;
  color: #f1f1f1;
}
body.dark-mode .navbar .btn:hover {
  background-color: var(--accent-color);
  color: white;
  border-color: var(--accent-color);
}

/* Card i seccions */
body.dark-mode .card,
body.dark-mode .hero,
body.dark-mode section {
  background-color: #1a1a1a !important;
  color: #e0e0e0;
  border-color: #333;
}

/* Textos secundaris */
body.dark-mode .text-muted,
body.dark-mode .team p,
body.dark-mode section.py-5 p,
body.dark-mode .hero p {
  color: #f1f1f1 !important;
  opacity: 0.9;
}

/* Enllaços */
body.dark-mode a {
  color: #80bfff;
}
body.dark-mode a:hover {
  color: #00bfa6;
}

/* Imatges de l’equip */
body.dark-mode .team img {
  border-color: var(--accent-color);
}
/* ---------- TAULES EN MODE NIT ---------- */
body.dark-mode table.table,
body.dark-mode table.table th,
body.dark-mode table.table td {
  background-color: #1a1a1a !important; /* fons fosc general */
  color: #e0e0e0 !important;           /* text clar */
  border-color: #444 !important;
}

/* Filas alternes (striped) */
body.dark-mode table.table-striped tbody tr:nth-of-type(odd) {
  background-color: #1e1e1e !important;
}
body.dark-mode table.table-striped tbody tr:nth-of-type(even) {
  background-color: #232323 !important;
}

/* Capçalera */
body.dark-mode table.table thead {
  background-color: #111111 !important;
  color: #fff !important;
}

/* Botons dins taula */
body.dark-mode table a.btn {
  color: #fff !important;
}
body.dark-mode table a.btn.btn-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}
body.dark-mode table a.btn.btn-primary:hover {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: #fff !important;
}
body.dark-mode table a.btn.btn-danger {
  background-color: #d9534f !important;
  border-color: #d9534f !important;
}
body.dark-mode table a.btn.btn-danger:hover {
  background-color: #c9302c !important;
  border-color: #c9302c !important;
  color: #fff !important;
}
/* Navbar-brand hover coherent amb ambdós modes */
.navbar-brand {
  transition: color 0.3s ease;
}

/* Mode clar: hover verd turquesa */
body:not(.dark-mode) .navbar-brand:hover {
  color: var(--accent-color);
}

/* Mode nit: hover verd turquesa */
body.dark-mode .navbar-brand:hover {
  color: var(--accent-color);
}
/* Hero button "Comença ara" en mode nit */
body.dark-mode .hero .btn-light {
  background-color: #444 !important;  /* fosc */
  color: #e0e0e0 !important;          /* text clar */
  border-color: #555 !important;      /* opcional, per definir contorn */
}

body.dark-mode .hero .btn-light:hover {
  background-color: var(--accent-color) !important; /* verd turquesa al hover */
  color: #fff !important;
  border-color: var(--accent-color) !important;
}
/* Footer en mode nit */
body.dark-mode .footer {
  background-color: #1a1a1a !important; /* fosc */
  color: #e0e0e0 !important;            /* text clar */
  border-top-color: #333 !important;    /* contorn suau */
}

/* Si hi ha enllaços dins el footer */
body.dark-mode .footer a {
  color: #80bfff !important;            /* blau clar */
  text-decoration: none;
}
body.dark-mode .footer a:hover {
  color: #00bfa6 !important;            /* verd turquesa al hover */
}
/* Mode clar: secció "Qui som" lleugerament més fosc que el blanc */
section.team.bg-light {
  background-color: #f1f3f5 !important;  /* gris molt clar */
  transition: background 0.3s ease, color 0.3s ease;
}

/* Mode nit: secció "Qui som" una mica més clara que el fons fosc */
body.dark-mode section.team.bg-light {
  background-color: #222222 !important;  /* fosc lleugerament més clar que el fons general */
  color: #e0e0e0 !important;             /* text clar */
}
/* Botó principal amb text blanc sempre */
.btn-primary {
  color: #fff !important; /* text blanc */
}

/* Mode nit: assegura text blanc i fons adequat */
body.dark-mode .btn-primary {
  background-color: var(--primary-color) !important; /* blau corporatiu fosc */
  color: #fff !important;
  border-color: var(--primary-color) !important;
}

body.dark-mode .btn-primary:hover {
  background-color: var(--accent-color) !important; /* verd turquesa al hover */
  border-color: var(--accent-color) !important;
  color: #fff !important;
}
/* Display en mode nit */
body.dark-mode #display {
  background-color: #1e1e1e !important;  /* fons fosc */
  color: #d6d6d6 !important;             /* lletra gris clara */
  border: 1px solid #333 !important;     /* lleu contorn */
}

/* Botó “Tornar al panell” en mode nit */
body.dark-mode .btn-secondary {
  background-color: #3a3a3a !important;
  border-color: #555 !important;
  color: #e6e6e6 !important;
}

body.dark-mode .btn-secondary:hover {
  background-color: #5a5a5a !important;
}