:root {
  --primary-color: #4a6da7;
  --primary-dark: #3a5687;
  --secondary-color: #f1f3f8;
  --text-color: #2a2f45;
  --text-muted: #6b7280;
  --border-color: #dde1ea;
  --highlight-color: #f8fafc;
  --success-color: #16a34a;
  --danger-color: #dc2626;
  --warning-color: #f59e0b;
  --font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --radius: 10px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow: 0 2px 4px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
}

.theme-classic  { --primary-color:#4a6da7; --primary-dark:#3a5687; --secondary-color:#eef1f8; --highlight-color:#f5f7fc; --border-color:#dde1ea; }
.theme-modern   { --primary-color:#2563eb; --primary-dark:#1d4ed8; --secondary-color:#eff6ff; --highlight-color:#f0f7ff; --border-color:#dbeafe; }
.theme-colorful { --primary-color:#9333ea; --primary-dark:#7e22ce; --secondary-color:#f5ecfb; --highlight-color:#faf5ff; --border-color:#e9d5ff; }
.theme-bw       { --primary-color:#1f2937; --primary-dark:#111827; --secondary-color:#f3f4f6; --highlight-color:#fafafa; --border-color:#e5e7eb; }
.theme-fun      { --primary-color:#e11d48; --primary-dark:#be123c; --secondary-color:#ffe4e6; --highlight-color:#fff1f2; --border-color:#fecdd3; }

/* === Contenidor principal === */
.contenidor-planificador {
  max-width: 1200px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 32px;
  font-family: var(--font-family);
  color: var(--text-color);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.contenidor-planificador *, .contenidor-planificador *::before, .contenidor-planificador *::after {
  box-sizing: border-box;
}

.titol-planificador {
  color: var(--primary-color);
  margin: 0 0 20px 0;
  text-align: center;
  font-size: 1.75rem;
  font-weight: 700;
}

/* === Pestanyes === */
.pestanyes {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--border-color);
  overflow-x: auto;
}

.pestanya {
  padding: 10px 18px;
  background: transparent;
  cursor: pointer;
  color: var(--text-muted);
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  font-weight: 500;
  font-size: 0.95rem;
  white-space: nowrap;
  border-radius: 0;
  transition: all 0.15s;
}

.pestanya:hover {
  color: var(--primary-color);
  background: transparent;
}

.pestanya.activa {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
  font-weight: 600;
  background: transparent;
}

/* Número de pas dins de cada pestanya */
.pestanya-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--border-color);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}
.pestanya.activa .pestanya-num {
  background: var(--primary-color);
  color: #fff;
}

.contingut-pestanya { display: none; }
.contingut-pestanya.activa { display: block !important; animation: fadeIn 0.2s ease; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* === Tipografia === */
.contenidor-planificador h2 {
  font-size: 1.4rem;
  color: var(--text-color);
  margin: 0 0 18px 0;
  font-weight: 600;
}
.contenidor-planificador h3 {
  font-size: 1.05rem;
  color: var(--text-color);
  margin: 0 0 12px 0;
  font-weight: 600;
}
.contenidor-planificador h4 {
  font-size: 0.95rem;
  color: var(--primary-color);
  margin: 0 0 10px 0;
  font-weight: 600;
}
.contenidor-planificador p {
  margin: 0 0 14px 0;
}

/* === Formularis === */
.contenidor-planificador label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  font-size: 0.88rem;
  color: var(--text-color);
}

.contenidor-planificador input[type="text"],
.contenidor-planificador input[type="number"],
.contenidor-planificador input[type="file"],
.contenidor-planificador select,
.contenidor-planificador textarea {
  width: 100%;
  padding: 9px 12px;
  margin-bottom: 0;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.95rem;
  background: white;
  color: var(--text-color);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.contenidor-planificador input[type="text"]:focus,
.contenidor-planificador input[type="number"]:focus,
.contenidor-planificador textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(74,109,167,0.15);
}

.grup-formulari { margin-bottom: 20px; }

/* Camp amb etiqueta editable al davant (ex. «Classe» + «1r A») */
.camp-amb-etiqueta {
  display: flex;
  gap: 8px;
  align-items: center;
}
.camp-amb-etiqueta .etiqueta-mini {
  flex: 0 0 30%;
  min-width: 80px;
  background: var(--highlight-color);
  font-weight: 600;
}
.camp-amb-etiqueta input { margin-bottom: 0; }
.fila-formulari {
  display: flex;
  gap: 18px;
  margin-bottom: 14px;
}
.fila-formulari:last-child { margin-bottom: 0; }
.columna-formulari { flex: 1; min-width: 0; }

.previsualitzacio-logotip {
  max-width: 100px;
  max-height: 100px;
  margin-top: 10px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 4px;
  background: white;
}

/* === Configuració franges (taula) === */
.configuracio-franges {
  margin: 0 0 20px 0;
  padding: 16px;
  background-color: var(--highlight-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
}

.taula-config-franges {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 6px;
  overflow: hidden;
  margin: 0;
}

.taula-config-franges th,
.taula-config-franges td {
  padding: 10px 8px;
  text-align: center;
  border: 1px solid var(--border-color);
}

.taula-config-franges th {
  background: var(--primary-color);
  color: white;
  font-weight: 600;
  font-size: 0.88rem;
}

.taula-config-franges tr:nth-child(even) td {
  background-color: var(--highlight-color);
}

.taula-config-franges td:first-child {
  text-align: left;
  background: var(--secondary-color);
  font-weight: 600;
  width: 22%;
  color: var(--text-color);
}

.taula-config-franges input[type="number"] {
  width: 55px;
  padding: 6px 4px;
  text-align: center;
  margin: 0;
  font-weight: 500;
}

.configuracio-separadors {
  margin: 0 0 20px 0;
  padding: 16px;
  background-color: var(--highlight-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
}

/* Caselles de verificació en línia (mostrar/amagar, opcions) */
.check-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  margin-bottom: 8px;
  cursor: pointer;
}
.check-inline input[type="checkbox"] {
  width: auto;
  margin: 0;
  flex: 0 0 auto;
  cursor: pointer;
}
.check-inline strong { color: var(--primary-dark); }

/* === Selector tema === */
.selector-tema {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.opcio-tema {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.15s;
  position: relative;
}
.opcio-tema:hover { transform: scale(1.1); }
.opcio-tema.seleccionat {
  border-color: var(--text-color);
  box-shadow: 0 0 0 2px white, 0 0 0 4px var(--primary-color);
}
.opcio-tema-classic  { background: #4a6da7 !important; }
.opcio-tema-modern   { background: #2563eb !important; }
.opcio-tema-colorful { background: #9333ea !important; }
.opcio-tema-bw       { background: #1f2937 !important; }
.opcio-tema-fun      { background: #e11d48 !important; }

/* Evita que :hover del botó genèric sobreescrigui el color propi del tema */
.opcio-tema-classic:hover  { background: #3a5687 !important; }
.opcio-tema-modern:hover   { background: #1d4ed8 !important; }
.opcio-tema-colorful:hover { background: #7e22ce !important; }
.opcio-tema-bw:hover       { background: #111827 !important; }
.opcio-tema-fun:hover      { background: #be123c !important; }

/* === Botons === */
.contenidor-planificador button {
  background: var(--primary-color);
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 500;
  font-family: inherit;
  margin: 0;
  transition: all 0.15s;
  box-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.2;
}

.contenidor-planificador button:hover {
  background: var(--primary-dark);
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.contenidor-planificador button:active {
  transform: translateY(0);
}

.botons-planificador,
.botons-exportacio {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.botons-planificador button,
.botons-exportacio button {
  flex: 0 1 auto;
  padding: 11px 20px;
}

#previsualitzar-planificador,
#desar-planificador {
  background: var(--primary-color);
}

#netejar-activitats {
  background: transparent;
  color: var(--text-color);
  border: 1px solid var(--border-color);
}
#netejar-activitats:hover {
  background: var(--highlight-color);
  color: var(--danger-color);
  border-color: var(--danger-color);
}

#descarregar-pdf-planner,
#descarregar-pdf {
  background: var(--danger-color);
}
#descarregar-pdf-planner:hover,
#descarregar-pdf:hover {
  background: #b91c1c;
}

/* === Taula del planificador === */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  table-layout: fixed;
  background: white;
}

#taula-planificador,
#taula-previsualitzacio {
  border-radius: 6px;
  overflow: hidden;
}

#taula-planificador th,
#taula-previsualitzacio th {
  background: var(--primary-color);
  color: white;
  padding: 10px 8px;
  text-align: center;
  font-weight: 600;
  font-size: 0.88rem;
  border: 1px solid var(--primary-dark);
}

.columna-franja {
  width: 14%;
  background-color: var(--secondary-color);
}

#taula-planificador td,
#taula-previsualitzacio td {
  padding: 0;
  vertical-align: top;
  height: 85px;
  border: 1px solid var(--border-color);
}

/* Cel·les buides que s'han de fusionar visualment amb la veïna del mateix dia */
#taula-planificador td.sense-vora-superior,
#taula-previsualitzacio td.sense-vora-superior {
  border-top-color: transparent;
}

#taula-planificador td.sense-vora-inferior,
#taula-previsualitzacio td.sense-vora-inferior {
  border-bottom-color: transparent;
}

#taula-planificador td.columna-franja-cel,
#taula-previsualitzacio td.columna-franja-cel {
  background-color: var(--secondary-color);
  font-weight: 600;
  text-align: center;
  color: var(--primary-dark);
  font-size: 0.85rem;
  padding: 4px;
  vertical-align: middle;
}

.columna-franja-cel .nom-franja-editable {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Selector de durada dins la columna d'horari */
.select-durada {
  display: block;
  margin: 4px auto 0 auto;
  width: auto;
  min-width: 62px;
  padding: 2px 4px !important;
  font-size: 0.75rem !important;
  text-align: center;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: white;
  color: var(--text-muted);
  cursor: pointer;
}

/* Cel·les */
.cel-dia { position: relative; min-height: 85px; }

.capçalera-assignatura,
.capçalera-assignatura-preview {
  background-color: var(--secondary-color);
  padding: 6px 8px;
  font-weight: 600;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.85rem;
  min-height: 24px;
  color: var(--primary-dark);
  /* Sense text-transform: es mostra EXACTAMENT com s'escriu (majúscules o no),
     igual que sortirà al PDF. Així l'usuari decideix i veu el que tindrà. */
  letter-spacing: 0.02em;
}

.capçalera-assignatura[data-placeholder]:empty:before,
.contingut-activitat[data-placeholder]:empty:before,
.vigilancia-editable[data-placeholder]:empty:before {
  content: attr(data-placeholder);
  color: #aab1bd;
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* Fila de vigilància de pati, al lloc del separador de PATI (una casella per dia) */
tr.fila-vigilancia td {
  height: auto;
  vertical-align: middle;
  background: var(--highlight-color);
}
.cel-vigilancia {
  padding: 6px 8px;
  text-align: center;
  font-size: 0.85rem;
}
.vigilancia-editable {
  min-height: 22px;
  text-align: center;
}
.columna-franja-cel.etiqueta-vigilancia {
  font-style: italic;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.05em;
}

.contingut-activitat,
.contingut-activitat-preview {
  padding: 8px;
  min-height: 55px;
  font-size: 0.9rem;
}

.editable {
  min-height: 28px;
  border: 1px dashed transparent;
  outline: none;
  transition: background 0.1s;
}
.editable:hover {
  background-color: var(--highlight-color);
}
.editable:focus {
  background-color: #fffbe6;
  border-color: var(--primary-color);
}

/* Noms de franges editables */
.nom-franja-editable {
  width: 100%;
  min-height: 24px;
  padding: 6px 4px;
  outline: none;
  cursor: text;
  font-weight: 600;
  text-align: center;
  border: 1px dashed transparent;
  border-radius: 4px;
  transition: all 0.15s;
  color: var(--primary-dark);
}
.nom-franja-editable:hover {
  background: white;
  border-color: var(--border-color);
}
.nom-franja-editable:focus {
  background: #fffbe6;
  border-color: var(--primary-color);
}

/* Separadors PATI / MIGDIA */
.etiqueta-pati,
.etiqueta-pati-preview {
  background: var(--highlight-color);
  text-align: center;
  padding: 4px 8px !important;
  height: 22px !important;
  line-height: 14px !important;
  border-top: 1px dashed var(--border-color);
  border-bottom: 1px dashed var(--border-color);
  font-style: italic;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}

tr.fila-baixa {
  height: 22px !important;
  max-height: 22px !important;
}

/* === Instruccions === */
.instruccions {
  margin: 18px 0;
  padding: 14px 18px;
  background-color: var(--highlight-color);
  border-left: 3px solid var(--primary-color);
  border-radius: 4px;
  font-size: 0.9rem;
}
.instruccions p { margin: 0 0 6px 0; }
.instruccions ul { margin: 4px 0 0 20px; padding: 0; }
.instruccions li { margin-bottom: 4px; }
.instruccions-nota {
  margin: 10px 0 0 0 !important;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Text d'ajuda sota camps i seccions */
.ajuda {
  font-size: 0.85rem;
  color: var(--text-muted);
}
.camp-ajuda {
  margin: 6px 0 0 0;
}

.instruccions-planner {
  background: var(--highlight-color);
  padding: 10px 14px;
  border-radius: 6px;
  margin-bottom: 14px;
  font-size: 0.88rem;
  color: var(--text-muted);
}

/* === Previsualització === */
.previsualitzacio-planificador {
  margin-top: 8px;
  padding: 24px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background-color: white;
  display: block !important;
}

.capçalera-planificador {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--primary-color);
}

.info-planificador { flex: 1; }

.titol-previsualitzacio {
  margin: 0 0 8px 0;
  font-size: 1.35rem;
  color: var(--primary-color);
  font-weight: 700;
}

.meta-previsualitzacio {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 6px;
  font-size: 0.9rem;
  color: var(--text-color);
}

.meta-previsualitzacio span { font-weight: 500; }

.logotip-previsualitzacio {
  max-height: 70px;
  max-width: 120px;
  object-fit: contain;
}

/* === Toast === */
.pd-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--text-color);
  color: white;
  padding: 12px 22px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-family: var(--font-family);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  opacity: 0;
  transition: all 0.25s;
  pointer-events: none;
  z-index: 99999;
}
.pd-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.pd-toast.success { background: var(--success-color); }
.pd-toast.error { background: var(--danger-color); }
.pd-toast.warning { background: var(--warning-color); }

/* === Responsive === */
@media (max-width: 768px) {
  .contenidor-planificador { padding: 18px; }
  .fila-formulari { flex-direction: column; gap: 12px; }
  .capçalera-planificador { flex-direction: column; align-items: stretch; }
  .pestanya { padding: 10px 12px; font-size: 0.88rem; }

  .botons-planificador,
  .botons-exportacio {
    flex-direction: column;
    align-items: stretch;
  }
  .botons-planificador button,
  .botons-exportacio button {
    width: 100%;
  }

  .taula-config-franges { font-size: 0.85rem; }
  .taula-config-franges th,
  .taula-config-franges td { padding: 6px 4px; }
  .taula-config-franges input[type="number"] { width: 48px; padding: 4px 2px; }
}

/* === Impressió === */
@media print {
  body { background-color: white; padding: 0; margin: 0; }
  .contenidor-planificador {
    box-shadow: none;
    padding: 0;
    margin: 0;
    max-width: 100%;
    width: 100%;
  }
  .pestanyes,
  .contingut-pestanya:not(.previsualitzacio-pestanya),
  .contenidor-planificador button,
  .selector-tema,
  .titol-planificador,
  .pd-toast { display: none !important; }

  .contingut-pestanya.previsualitzacio-pestanya {
    display: block !important;
    padding: 0;
    margin: 0;
  }

  h2:not(.titol-previsualitzacio) { display: none; }

  .previsualitzacio-planificador {
    margin: 0;
    padding: 10mm;
    border: none;
  }

  #taula-previsualitzacio th {
    background-color: #4a6da7 !important;
    color: white !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  #taula-previsualitzacio .columna-franja-cel,
  .capçalera-assignatura-preview {
    background-color: #e6e6e6 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .etiqueta-pati-preview {
    background-color: #f5f5f5 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  @page { size: landscape; margin: 10mm; }
}