/* ============================================================
   PLEC · Full d'estils — LC CLOUD / LC PACK
   Font de la veritat: lc-cloud.md (v1.5)
   Regles estrictes:
     - CAP border-radius enlloc (excepte .lc-spinner)
     - Escala tipogràfica de 5 nivells
     - Fons blanc/quasi blanc. Capçalera verd bosc.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;600&family=Covered+By+Your+Grace&display=swap');

:root {
  /* Colors de marca */
  --lc-forest:       #054f3a;
  --lc-recycled:     #16a17a;
  --lc-mint:         #a6d2bf;
  --lc-tech-green:   #16a17a;

  /* Neutres */
  --lc-white:        #ffffff;
  --lc-grey:         #f8f8f8;
  --lc-sand:         #faf8f5;
  --lc-text:         #333333;
  --lc-text-dim:     #666666;
  --lc-text-muted:   #999999;
  --lc-border:       #cccccc;
  --lc-border-light: #e5e5e5;

  /* Accents (només visualització de dades) */
  --lc-accent-sand:  #e8dfcc;
  --lc-accent-ochre: #c4955a;
  --lc-accent-sky:   #d6e4ec;

  /* Semàntics */
  --lc-danger:       #c0392b;
  --lc-danger-bg:    #fde8e8;
  --lc-warning:      #856404;
  --lc-warning-bg:   #fff3cd;
  --lc-success:      #16a17a;

  /* Fonts */
  --font-main:    'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-heading: 'DM Sans', 'Helvetica Neue', sans-serif;
  --font-mono:    'IBM Plex Mono', Consolas, monospace;
  --font-hand:    'Covered By Your Grace', cursive;

  /* Escala tipogràfica (5 nivells estrictes) */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   20px;
  --text-xl:   28px;

  /* Elevació */
  --shadow-card:       0 1px 4px rgba(0,0,0,0.04);
  --shadow-card-hover: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-login:      0 8px 40px rgba(0,0,0,0.25);

  --header-h: 56px;
  --subnav-h: 42px;
}

@media (max-width: 767px) {
  :root {
    --text-xs:   14px;
    --text-sm:   16px;
    --text-base: 18px;
    --text-lg:   22px;
    --text-xl:   32px;
  }
}

*, *::before, *::after { border-radius: 0 !important; box-sizing: border-box; }
.lc-spinner, .lc-spinner * { border-radius: 50% !important; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--lc-white);
  color: var(--lc-text);
  font-family: var(--font-main);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

::selection { background: var(--lc-mint); color: var(--lc-forest); }

body.sense-scroll { overflow: hidden; }

/* ===== Capçalera (header verd bosc) ===== */
.capcalera-barra {
  background: var(--lc-forest);
  height: var(--header-h);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 14px;
  position: relative;
  z-index: 40;
}
.capcalera-logo { height: 30px; display: block; }
.capcalera-separador { width: 1px; height: 24px; background: rgba(255,255,255,0.3); }
.capcalera-nomapp {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: default;
}
.capcalera-nomapp-word, .capcalera-nomapp-rotador {
  font-size: 17px; /* +20% */
  font-weight: 300;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
  /* Degradat de blanc a taronja butà clar pintat sobre el propi text */
  background: linear-gradient(135deg, #ffffff 0%, #ffa45f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.capcalera-nomapp-word { transition: opacity .4s ease; }
.capcalera-nomapp.is-hover .capcalera-nomapp-word { opacity: 0; }
.capcalera-nomapp-rotador {
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  font-size: 12px; /* ~30% més petit */
  letter-spacing: 0.08em;
  opacity: 0; pointer-events: none;
}
.capcalera-nomapp-rotador.lg-frase-anim { animation: lg-frase-fade 2s ease both; }

/* Botó i ítem de nav en gris clar (Importar de BC · «Vectors de cost») */
.boto-gris { background: var(--lc-grey); border: 1px solid var(--lc-border); color: var(--lc-text); }
.boto-gris:hover { background: #f0f0f0; }
.subnav-menu-item.nav-gris, .menu-mobil-item.nav-gris { background: var(--lc-grey); }

/* Botó verd bosc ple (Import.de BC) */
.boto-forest { background: var(--lc-forest); border: 1px solid var(--lc-forest); color: #fff; }
.boto-forest:hover { background: #043c2c; border-color: #043c2c; }
/* Botó verd bosc de contorn (Nou producte): fons blanc, text i vora verd fosc */
.boto-forest-contorn { background: #fff; border: 1px solid var(--lc-forest); color: var(--lc-forest); }
.boto-forest-contorn:hover { background: var(--lc-grey); }

/* Modal ample (assistent «Importar de BC») */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow: auto; }
.modal-overlay[hidden] { display: none; }
.modal-panel { background: #fff; width: 100%; max-width: min(1150px, 96vw); box-shadow: var(--shadow-login); }
.modal-cap { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--lc-border-light); }
.modal-cap h2 { margin: 0; font-size: var(--text-lg); font-weight: 600; }
.modal-tanca { background: none; border: none; font-size: 20px; line-height: 1; cursor: pointer; color: var(--lc-text-dim); }
.modal-cos { padding: 20px; }
.bc-caixa { border: 1px solid var(--lc-border-light); background: var(--lc-grey); padding: 12px; margin-top: 12px; line-height: 2; }
.bc-pas2-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 12px; }
.bc-pas2-barra.dreta { justify-content: flex-end; margin: 12px 0 0; }
.bc-obsolet { font-size: 11px; padding: 4px 8px; border: 1px solid var(--lc-border); background: #fff; cursor: pointer; text-transform: uppercase; letter-spacing: .04em; }
tr.es-obsolet .bc-obsolet { background: #7b1e1e; color: #fff; border-color: #7b1e1e; }
tr.es-obsolet td:not(:first-child) { opacity: .4; }
#taulaBc select { padding: 6px 8px; }

/* Fila-marca «AVALUAT» a Validació comandes (separador de lot de sincronització) */
.fila-avaluat td { padding: 2px 8px; background: #fffbe6; line-height: 1.2; border-bottom: none; }
.fila-avaluat td[colspan] { font-size: 10px; font-weight: 700; letter-spacing: .04em; color: #8a6d00; }

/* Barra d'accions compacta de la BBDD de productes (a la dreta de les pestanyes) */
.productes-barra { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.productes-accions { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; padding-bottom: 4px; }
.productes-accions .boto { padding: 5px 9px; font-size: 12px; display: inline-flex; align-items: center; gap: 5px; }
.ico-inline { flex: none; vertical-align: middle; }

/* Control «OBS» (checkbox) de l'assistent Importar de BC */
.bc-obsolet { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 3px 7px; border: 1px solid var(--lc-border); background: #fff; color: var(--lc-text); cursor: pointer; }
.bc-check { width: 12px; height: 12px; border: 1.5px solid var(--lc-border); display: inline-block; position: relative; background: #fff; flex: none; }
tr.es-obsolet .bc-obsolet { background: #7b1e1e; color: #fff; border-color: #7b1e1e; }
tr.es-obsolet .bc-check { background: #fff; border-color: #fff; }
tr.es-obsolet .bc-check::after { content: ''; position: absolute; left: 3px; top: 0; width: 4px; height: 8px; border: solid #7b1e1e; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.capcalera-espai { flex: 1; }
.capcalera-salutacio { color: #fff; font-size: 14px; white-space: nowrap; }

.boto-sortir {
  color: #ffffff;
  font-size: 12px;
  border: 1px solid #ffffff;
  padding: 5px 10px;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.boto-sortir:hover { opacity: 0.85; }

.boto-menu {
  display: none;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  padding: 8px 10px 8px 0;
}
.icona-menu, .icona-menu::before, .icona-menu::after {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background: #fff;
  position: relative;
  transition: transform 0.2s;
}
.icona-menu::before { position: absolute; top: -6px; }
.icona-menu::after { position: absolute; top: 6px; }
.boto-menu[aria-expanded="true"] .icona-menu { background: transparent; }
.boto-menu[aria-expanded="true"] .icona-menu::before { transform: translateY(6px) rotate(45deg); }
.boto-menu[aria-expanded="true"] .icona-menu::after { transform: translateY(-6px) rotate(-45deg); }

/* ===== Sub-nav (mint) ===== */
.subnav {
  background: rgba(166, 210, 191, 0.72); /* mint translúcid, frosted glass */
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.55), 0 3px 8px rgba(0, 0, 0, 0.10);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  height: var(--subnav-h);
  display: flex;
  align-items: center;
  padding: 0 20px;
  overflow: visible; /* necessari perquè el desplegable de Pricing surti del subnav */
}
.subnav-item {
  color: #333333;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5; /* iguala la línia base dels <button> (Pricing) amb la dels <a> */
  text-decoration: none;
  padding: 11px 16px 8px;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 3px solid transparent;
}
.subnav-item.actiu { border-bottom-color: var(--lc-tech-green); }
.subnav-item:hover { opacity: 0.8; }
.subnav-extern { font-size: 10px; opacity: 0.7; }

/* Desplegable del subnav (Pricing) */
.subnav-grup { position: relative; }
.subnav-desplegable {
  background: transparent;
  border: none;
  font-family: var(--font-main);
  cursor: pointer;
  padding-top: 9px;    /* apuja ~2px la línia base dels ítems amb desplegable */
  padding-bottom: 10px;
}
.subnav-caret { font-size: 10px; opacity: 0.7; }
.subnav-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: #fff;
  border: 1px solid var(--lc-border-light);
  box-shadow: var(--shadow-card-hover);
  z-index: 70;
  flex-direction: column;
}
.subnav-grup.obert .subnav-menu { display: flex; }
.subnav-menu-item {
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--lc-text);
  text-decoration: none;
  border-left: 3px solid transparent;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.subnav-menu-item.actiu { border-left-color: var(--lc-tech-green); }
.subnav-menu-item:hover { background: var(--lc-grey); }
.nav-icona { flex: none; opacity: 0.85; }
.menu-mobil-item, .menu-mobil-grup { display: flex; align-items: center; gap: 10px; }

/* ===== Menú mòbil ===== */
.menu-mobil {
  position: absolute;
  top: var(--header-h);
  left: 0; right: 0;
  background: #fff;
  border-bottom: 1px solid var(--lc-border-light);
  box-shadow: var(--shadow-card-hover);
  z-index: 60;
  display: flex;
  flex-direction: column;
}
.menu-mobil-item {
  padding: 14px 20px;
  font-size: 16px;
  color: var(--lc-text);
  text-decoration: none;
  border-bottom: 1px solid var(--lc-border-light);
  display: flex;
  align-items: center;
  gap: 8px;
}
.menu-mobil-item.actiu { color: var(--lc-forest); font-weight: 700; background: var(--lc-grey); }
.menu-mobil-peu { padding: 12px 20px; font-size: 14px; color: var(--lc-text-dim); }
.menu-mobil-grup {
  padding: 12px 20px 4px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--lc-text-muted);
}
.menu-mobil-subitem { padding-left: 36px; }

header { position: sticky; top: 0; z-index: 50; }

/* ===== Pàgina ===== */
.plec-principal { flex: 1; display: flex; flex-direction: column; }
.plec-pagina { padding: 32px 24px; max-width: 1280px; margin: 0 auto; width: 100%; }

.plec-sectionhead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.plec-titol {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--lc-text);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.plec-subtitol { font-size: 14px; color: var(--lc-text-dim); }

.plec-h2 {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--lc-text);
  margin: 0;
}

/* ===== Peu ===== */
.plec-peu {
  border-top: 1px solid var(--lc-border-light);
  padding: 24px 20px 20px;
  text-align: center;
  margin-top: 40px;
  background: #fff;
}
.peu-eslogan { font-size: 14px; color: var(--lc-text-dim); margin-bottom: 16px; }
.peu-avui {
  font-family: var(--font-hand);
  font-size: 15px;
  color: var(--lc-tech-green);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.peu-copy { font-size: 9px; color: var(--lc-text-muted); }
.peu-pantalles { margin-top: 8px; font-size: 11px; }
.peu-pantalles a {
  color: var(--lc-text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ===== Targetes / KPI ===== */
.lc-targeta {
  background: #fff;
  border: 1px solid var(--lc-border-light);
  padding: 24px;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.2s;
}
.lc-targeta:hover { box-shadow: var(--shadow-card-hover); }

.plec-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
}
.kpi { padding: 20px; }
.kpi-etiqueta {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--lc-tech-green);
  margin-bottom: 8px;
}
.kpi-valor {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  color: var(--lc-text);
  line-height: 1;
}
.kpi-valor.oee-tech { color: var(--lc-tech-green); }
.kpi-valor.oee-warning { color: #b07c0a; }
.kpi-valor.oee-danger { color: var(--lc-danger); }
.kpi-sub { font-family: var(--font-mono); font-size: 11px; color: var(--lc-text-dim); margin-top: 6px; }

/* Franja de color subtil a la part superior dels KPI d'inici */
.kpis-inici .kpi { border-top: 3px solid var(--lc-tech-green); }
.kpis-inici .kpi:nth-child(6n+1) { border-top-color: #16a17a; }
.kpis-inici .kpi:nth-child(6n+2) { border-top-color: #5b8db8; }
.kpis-inici .kpi:nth-child(6n+3) { border-top-color: #c4955a; }
.kpis-inici .kpi:nth-child(6n+4) { border-top-color: #a3589b; }
.kpis-inici .kpi:nth-child(6n+5) { border-top-color: #4ea8a0; }
.kpis-inici .kpi:nth-child(6n+6) { border-top-color: #d07f4e; }

/* ===== Barra de filtres ===== */
.plec-filterbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.filtre-cerca { position: relative; flex: 1 1 240px; max-width: 360px; }
.filtre-cerca .icona-cerca {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  pointer-events: none;
  color: var(--lc-text-muted);
}
.filtre-cerca input {
  width: 100%;
  padding: 9px 14px 9px 34px;
  border: 1px solid var(--lc-border);
  background: #fff;
  font-family: var(--font-main);
  font-size: 14px;
  color: var(--lc-text);
  outline: none;
  transition: border-color 0.2s;
}
.filtre-select {
  padding: 9px 32px 9px 14px;
  border: 1px solid var(--lc-border);
  background: #fff;
  font-family: var(--font-main);
  font-size: 14px;
  color: var(--lc-text);
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%23666666'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.filtre-cerca input:focus, .filtre-select:focus { border-color: var(--lc-tech-green); }
.filtre-netejar {
  background: transparent;
  border: none;
  color: var(--lc-tech-green);
  font-size: 12px;
  font-family: var(--font-main);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0 4px;
  white-space: nowrap;
}

/* ===== Botons ===== */
.boto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  border: none;
  transition: opacity 0.2s;
  text-decoration: none;
}
.boto:hover:not(:disabled) { opacity: 0.85; }
.boto:disabled { opacity: 0.5; cursor: not-allowed; }

.boto-primari { background: var(--lc-forest); color: #fff; }
.boto-secundari { background: transparent; color: var(--lc-forest); border: 1px solid var(--lc-border); }
.boto-perill { background: var(--lc-danger); color: #fff; }
.boto-fantasma { background: transparent; color: var(--lc-tech-green); padding: 10px 12px; }
.boto-contorn { background: transparent; color: var(--lc-tech-green); border: 1px solid var(--lc-tech-green); }
/* «☑ Accions»: fons groc clar quan no està actiu (en actiu agafa .boto-primari verd) */
.boto-accions:not(.boto-primari) { background: var(--lc-warning-bg); color: var(--lc-text); border-color: #e6d98f; }
.boto-accions:not(.boto-primari):hover { background: #ffeeba; }

/* ===== Taules ===== */
.taula-envolcall { overflow-x: auto; background: #fff; border: 1px solid var(--lc-border-light); }
.taula {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-family: var(--font-main);
}
.taula th {
  background: var(--lc-forest);
  color: #fff;
  padding: 10px 14px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.taula th.dreta, .taula td.dreta { text-align: right; }
.taula th.centrat, .taula td.centrat { text-align: center; }
.taula td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--lc-border-light);
  white-space: nowrap;
}
.taula td.embolcall { white-space: normal; }
.taula tbody tr:nth-child(even) { background: var(--lc-grey); }
.taula tbody tr.clicable { cursor: pointer; }
.taula tbody tr.clicable:hover { background: var(--lc-sand); }
.taula .mono { font-family: var(--font-mono); font-size: 12px; color: var(--lc-text-dim); }
.taula .mono-fort { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--lc-text); }
.taula-buida {
  padding: 32px 20px;
  text-align: center;
  color: var(--lc-text-muted);
  font-size: 14px;
}

/* ===== Grups plegables (categories del mestre, comandes de validació) ===== */
.taula tbody tr.cat-fila { background: var(--lc-mint); cursor: pointer; }
.taula tbody tr.cat-fila:hover { background: #97c8b3; }
.taula tbody tr.cat-fila td.cat-cella {
  padding: 8px 14px;
  border-bottom: 1px solid var(--lc-border-light);
}
.cat-chevro { display: inline-block; width: 16px; color: var(--lc-forest); font-size: 12px; }
.cat-nom { color: var(--lc-forest); letter-spacing: 0.03em; }
.cat-recompte { margin-left: 10px; font-size: 12px; color: var(--lc-forest); opacity: 0.7; }
.cat-accions { float: right; display: inline-flex; gap: 4px; }

/* Validació comandes: files pare en gris clar i client emmarcat */
#taulaValidacio tbody tr.cat-fila { background: var(--lc-grey); }
#taulaValidacio tbody tr.cat-fila:hover { background: #efefef; }
#taulaValidacio .cat-recompte { color: var(--lc-text-dim); opacity: 1; }
#taulaValidacio .cat-client {
  display: inline-block;
  padding: 1px 7px;
  margin-right: 3px;
  background: #fff;
  border: 1px solid var(--lc-border);
  color: var(--lc-text);
  font-weight: 600;
}

/* Semàfor: punt il·luminat (verd/groc/vermell) o caixa apagada N/D (lila) */
td.semafor-cella { width: 26px; text-align: center; padding: 10px 4px 10px 12px; }
.semafor-punt { display: inline-block; width: 13px; height: 13px; border-radius: 50% !important; vertical-align: middle; }
.semafor-punt.sf-verd    { background: #16a17a; box-shadow: 0 0 0 2px rgba(22, 161, 122, .22), 0 0 5px 1px rgba(22, 161, 122, .75); }
.semafor-punt.sf-groc    { background: #e0a800; box-shadow: 0 0 0 2px rgba(224, 168, 0, .22), 0 0 5px 1px rgba(224, 168, 0, .8); }
.semafor-punt.sf-vermell { background: #c0392b; box-shadow: 0 0 0 2px rgba(192, 57, 43, .22), 0 0 5px 1px rgba(192, 57, 43, .75); }
.semafor-punt.sf-lila {
  width: auto; height: auto; border-radius: 0 !important; box-shadow: none;
  padding: 1px 3px; font-size: 9px; font-weight: 700; line-height: 1.2;
  background: #ece7f5; color: #8f78c0; border: 1px solid #cdbce9;
}
.cat-boto {
  background: transparent;
  border: 1px solid transparent;
  color: var(--lc-forest);
  font-size: 13px;
  cursor: pointer;
  padding: 1px 7px;
  line-height: 1.4;
}
.cat-boto:hover { border-color: var(--lc-forest); }
.cat-boto-ok { color: #fff; background: var(--lc-forest); }
.cat-input {
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--lc-forest);
  border: 1px solid var(--lc-forest);
  background: #fff;
  padding: 2px 8px;
  margin-right: 6px;
  width: min(260px, 50vw);
}
.taula tbody tr.plegada { display: none; }

/* Estadístiques de rendibilitat */
.est-graella {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.est-titol { font-size: 15px; font-weight: 700; color: var(--lc-forest); margin-bottom: 12px; }
.est-taula th { background: transparent; color: var(--lc-text-dim); font-size: 11px; }
.est-barra {
  height: 10px;
  background: var(--lc-grey);
  overflow: hidden;
}
.est-barra > div { height: 100%; }

/* Desglossament de costos («D'on surt») */
.desglossament-detall { font-size: 12px; color: var(--lc-text-dim); }
.desglossament tr.desglossament-suau td { color: var(--lc-text-dim); }
.desglossament tr.desglossament-subtotal td { border-top: 2px solid var(--lc-border); background: var(--lc-grey); }
.desglossament tr.desglossament-total td {
  border-top: 2px solid var(--lc-forest);
  background: var(--lc-mint);
  color: var(--lc-forest);
  font-weight: 700;
}
.desglossament tr.desglossament-preu td { background: var(--lc-forest); color: #fff; }
.desglossament tr.desglossament-preu td .desglossament-detall { color: rgba(255,255,255,0.7); }
.desglossament-mancances {
  background: #efe9f9;
  color: #7b5fb5;
  border-left: 3px solid #7b5fb5;
  padding: 12px 16px;
  font-size: 13px;
  margin-bottom: 14px;
}
.desglossament-mancances ul, .desglossament-avisos ul { margin: 6px 0 0 18px; }
.desglossament-avisos {
  background: var(--lc-warning-bg);
  color: var(--lc-warning);
  border-left: 3px solid var(--lc-warning);
  padding: 12px 16px;
  font-size: 13px;
  margin-bottom: 14px;
}
.model-transport { display: flex; gap: 24px; padding: 8px 0; font-size: 14px; }
.model-transport label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }

/* Insígnia lila (falten dades) */
.insignia-lila { background: #efe9f9; color: #7b5fb5; }

/* Vectors de cost */
.vc-input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--lc-border);
  background: #fff;
  font-family: var(--font-main);
  font-size: 13px;
  color: var(--lc-text);
  outline: none;
}
.vc-input:focus { border-color: var(--lc-tech-green); }
.vc-input.dreta { text-align: right; }
.vc-input[readonly], .vc-input[disabled] { background: var(--lc-grey); color: var(--lc-text-dim); }
/* Barra de període (any · mes · avís) a l'amplada de la taula */
.vc-periode {
  display: flex;
  align-items: stretch;
  gap: 8px;
  max-width: 760px;
  width: 100%;
  margin-bottom: 16px;
}
.vc-periode .filtre-select { flex: 0 0 auto; }
.vc-info {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  padding: 6px 12px;
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffe69a;
  font-size: 12px;
  line-height: 1.35;
}
/* Fila d'accions al peu de cada secció (Afegir · Desar · Copia) */
.vc-accions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  max-width: 760px;
}
/* Frase introductòria de secció, sobre la barra de període */
.vc-intro { margin: 0 0 12px; max-width: 760px; }

/* Multi-selecció */
.taula th.sel-cella, .taula td.sel-cella { width: 34px; padding: 10px 6px 10px 14px; }
.sel-cella input[type="checkbox"] { cursor: pointer; width: 15px; height: 15px; }
.sel-comptador { font-size: 13px; color: var(--lc-text-dim); white-space: nowrap; align-self: center; }

/* ===== Insígnies ===== */
.insignia {
  display: inline-block;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.insignia-primari { background: var(--lc-forest); color: #fff; }
.insignia-mint { background: var(--lc-mint); color: var(--lc-forest); }
.insignia-tech { background: var(--lc-tech-green); color: #fff; }
.insignia-warning { background: var(--lc-warning-bg); color: var(--lc-warning); }
.insignia-danger { background: var(--lc-danger-bg); color: var(--lc-danger); }
.insignia-gris { background: #eeeeee; color: var(--lc-text-dim); }

.insignia-oee {
  display: inline-block;
  min-width: 52px;
  text-align: center;
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
}
.insignia-oee.tech { background: var(--lc-tech-green); color: #fff; }
.insignia-oee.warning { background: var(--lc-warning-bg); color: var(--lc-warning); }
.insignia-oee.danger { background: var(--lc-danger-bg); color: var(--lc-danger); }

/* ===== Formularis ===== */
.camp { display: flex; flex-direction: column; gap: 6px; }
.camp-etiqueta {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--lc-text-dim);
}
.camp input, .camp select, .camp textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--lc-border);
  background: #fff;
  font-family: var(--font-main);
  font-size: 14px;
  color: var(--lc-text);
  outline: none;
  transition: border-color 0.2s;
}
.camp select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%23666666'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  cursor: pointer;
}
.camp input:focus, .camp select:focus, .camp textarea:focus { border-color: var(--lc-tech-green); }
.camp input:disabled, .camp select:disabled { background: var(--lc-grey); color: var(--lc-text-muted); cursor: not-allowed; }
.camp .mono, .camp input.mono { font-family: var(--font-mono); }
.camp-error { font-size: 11px; color: var(--lc-danger); }
.camp-pista { font-size: 11px; color: var(--lc-text-muted); }

.form-fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-fila-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.formulari { display: flex; flex-direction: column; gap: 16px; }

/* Commutador horitzontal de 3 opcions (p. ex. Impressió: Cap / En línia / A part) */
.toggle-horitzontal { display: flex; border: 1px solid var(--lc-border); overflow: hidden; }
.toggle-horitzontal button {
  flex: 1;
  padding: 9px 10px;
  background: #fff;
  border: 0;
  border-left: 1px solid var(--lc-border);
  color: var(--lc-text);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
  white-space: nowrap;
}
.toggle-horitzontal button:first-child { border-left: 0; }
.toggle-horitzontal button[hidden] { display: none; }
.toggle-horitzontal button:hover { background: var(--lc-grey); }
.toggle-horitzontal button.actiu { background: var(--lc-forest); color: #fff; }

.form-calcul {
  background: var(--lc-grey);
  border: 1px solid var(--lc-border-light);
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
.form-calcul .calc-etiqueta {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--lc-text-dim);
}
.form-calcul .calc-valor { font-family: var(--font-mono); font-size: 14px; color: var(--lc-text); }

.form-avis {
  font-size: 12px;
  color: var(--lc-text-dim);
  background: var(--lc-grey);
  border: 1px solid var(--lc-border-light);
  padding: 12px;
}

/* Subtítol de secció dins un formulari (drawer del mestre de productes) */
.form-subtitol {
  margin: 16px 0 4px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lc-forest);
  background: linear-gradient(to right, var(--lc-mint), rgba(166, 210, 191, 0.18));
  border-left: 3px solid var(--lc-tech-green);
}

/* Camp amb casella de verificació (ex. Peu d'imprenta) */
.camp-casella .casella {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--lc-text);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  padding: 8px 0;
}
.camp-casella .casella input { width: auto; }

/* Editor de l'operativa: seqüència ordenada de màquines */
.operativa-llista {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  counter-reset: pas;
}
.operativa-pas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--lc-grey);
  border: 1px solid var(--lc-border-light);
  padding: 6px 10px;
}
.operativa-pas::before {
  counter-increment: pas;
  content: counter(pas) ".";
  font-family: var(--font-mono);
  color: var(--lc-text-muted);
  margin-right: 6px;
}
.operativa-nom { flex: 1; font-weight: 600; color: var(--lc-text); }
.operativa-accions { display: flex; gap: 2px; }
.operativa-afegir { display: flex; gap: 8px; }
.operativa-afegir select { flex: 1; }

.form-accions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 8px;
}
.form-accions .boto-perill { margin-right: auto; }

/* ===== Drawer (panell lateral) ===== */
.drawer-fons { position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 90; }
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(440px, 100vw);
  background: #fff;
  z-index: 91;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 40px rgba(0,0,0,0.18);
  border-left: 1px solid var(--lc-border-light);
}
.drawer-capcalera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--lc-border-light);
  background: var(--lc-grey);
}
.drawer-titol { font-family: var(--font-heading); font-size: 20px; font-weight: 600; color: var(--lc-text); margin: 0; }
.drawer-tancar {
  background: transparent;
  border: none;
  font-size: 18px;
  color: var(--lc-text-dim);
  cursor: pointer;
  padding: 6px;
  line-height: 1;
}
.drawer-cos { flex: 1; overflow-y: auto; padding: 24px; }

/* ===== Confirmació ===== */
.confirm-fons {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.confirm-fons[hidden] { display: none; }
.confirm-caixa {
  background: #fff;
  border-top: 4px solid var(--lc-danger);
  box-shadow: var(--shadow-login);
  padding: 24px;
  width: min(400px, 100%);
}
.confirm-titol { font-family: var(--font-heading); font-size: 20px; font-weight: 600; margin: 0 0 8px; color: var(--lc-text); }
.confirm-cos { font-size: 14px; color: var(--lc-text-dim); margin: 0 0 20px; line-height: 1.5; }
.confirm-accions { display: flex; gap: 8px; justify-content: flex-end; }

/* ===== Avisos (toast) ===== */
.toasts {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 200;
  width: min(420px, calc(100vw - 32px));
}
.toast {
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  box-shadow: var(--shadow-login);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s, transform 0.25s;
  text-align: center;
  font-family: var(--font-main);
}
.toast.visible { opacity: 1; transform: translateY(0); }
.toast-exit { background: var(--lc-tech-green); }
.toast-error { background: var(--lc-danger); }

/* ===== Gràfics ===== */
.plec-grafics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 40px;
}
.grafic-caixa { padding: 20px 24px 16px; }
.grafic-caixa .plec-h2 { margin-bottom: 16px; font-size: var(--text-lg); }
.grafic { width: 100%; display: block; }
.grafic-buit { color: var(--lc-text-muted); font-size: 14px; text-align: center; padding: 40px 0; margin: 0; }

/* ===== Estat buit ===== */
.estat-buit { text-align: center; padding: 64px 24px; }
.estat-buit-icona { font-size: 24px; color: var(--lc-mint); margin-bottom: 16px; display: block; }
.estat-buit-titol { font-family: var(--font-heading); font-size: 20px; font-weight: 600; color: var(--lc-text); margin-bottom: 8px; }
.estat-buit-cos { font-size: 14px; color: var(--lc-text-dim); max-width: 420px; margin: 0 auto; line-height: 1.6; }

/* ===== Pestanyes (Configuració) ===== */
.pestanyes { display: flex; gap: 0; margin-bottom: 24px; border-bottom: 1px solid var(--lc-border-light); flex-wrap: wrap; }
.pestanya {
  padding: 10px 18px;
  border: none;
  background: transparent;
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 600;
  color: var(--lc-text-dim);
  cursor: pointer;
  border-bottom: 3px solid transparent;
}
.pestanya.actiu { color: var(--lc-forest); border-bottom-color: var(--lc-tech-green); }

/* ===== Login (fons corporatiu a tota pantalla) ===== */
@keyframes lc-login-gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes lc-spin { to { transform: rotate(360deg); } }

.lg-body { min-height: 100vh; margin: 0; }
.lg-bg {
  position: fixed; inset: 0; z-index: -2;
  background: linear-gradient(135deg, #001a0e, #00261a, #003328, #00352e, #002e2b, #002418, #001a0e);
  background-size: 400% 400%;
  animation: lc-login-gradient 20s ease infinite;
}
/* Fons aleatori de la biblioteca corporativa, cobrint tota la pantalla */
.lg-bg.is-wallpaper {
  animation: none;
  background-color: #00271b;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.lg-bg::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(125% 125% at 50% 35%, rgba(0,20,12,.12), rgba(0,14,8,.6));
}
.lg-wrap {
  position: relative; min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1rem;
}
.lg-stack { width: min(370px, 92vw); }

/* Plafó de vidre gebrat sobre la vora superior de la targeta, amb el logo */
.lg-frost {
  height: 96px; /* ajustat per JS al 40 % de la targeta */
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 58, 38, .34);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.22);
  border-bottom: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 -6px 26px rgba(0,0,0,.18);
}
.lg-frost img { max-width: 47.6%; max-height: 49.3%; object-fit: contain; opacity: .9; }

/* Targeta blanca sòlida */
.lg-card {
  background: #fff;
  padding: 1.7rem 1.6rem 1.5rem;
  box-shadow: 0 26px 60px rgba(0,0,0,.36), 0 4px 16px rgba(0,0,0,.22);
}

/* Títol amb rotació de frases en passar-hi el cursor per sobre */
.lg-title {
  position: relative; margin: 0; text-align: center;
  cursor: default; min-height: 1.5em;
  display: flex; align-items: center; justify-content: center;
}
.lg-title-word, .lg-title-rotador {
  font-family: 'DM Sans', 'Inter', sans-serif; font-weight: 300;
  background: linear-gradient(95deg, #002616 0%, #0a6b43 52%, #0b9c84 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.lg-title-word {
  font-size: 1.5rem;
  letter-spacing: .46em; text-indent: .46em; /* manté el centrat òptic */
  transition: opacity .4s ease;
}
.lg-title.is-hover .lg-title-word { opacity: 0; }
.lg-title-rotador {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; /* un 30 % més petit que PLEC */
  font-weight: 400; letter-spacing: .06em;
  white-space: nowrap; opacity: 0; pointer-events: none;
}
.lg-title-rotador.lg-frase-anim { animation: lg-frase-fade 2s ease both; }
@keyframes lg-frase-fade {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

.lg-sep { border: none; border-top: 1px solid rgba(0,0,0,.13); width: 100%; margin: calc(1.25rem - 5px) 0 calc(1.25rem + 5px); }
.lg-form { display: block; }
.lg-hint { margin: 0 0 1rem; text-align: center; font-size: .82rem; color: var(--lc-text-dim); }
.lg-hint strong { color: var(--lc-forest); font-weight: 600; }
.lg-input {
  width: 100%; border: 1px solid var(--lc-border); border-radius: 0;
  padding: 13px 14px; font-size: .98rem; text-align: center; background: #fff;
  font-family: var(--font-main); color: var(--lc-text);
}
.lg-input:focus { outline: none; border-color: var(--lc-tech-green); box-shadow: 0 0 0 2px rgba(22,161,122,.16); }
.lg-pin { letter-spacing: .4em; font-size: 1.4rem !important; font-family: var(--font-mono); }
.lg-btn {
  width: 100%; margin-top: .7rem; border: none; cursor: pointer;
  background: var(--lc-forest); color: #fff;
  padding: 13px; font-weight: 600; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .09em;
  transition: background .2s;
}
.lg-btn:hover { background: #00482c; }
.lg-btn:disabled { opacity: .6; cursor: default; }
.lg-error {
  margin: .7rem 0 0; padding: 8px 12px; text-align: center;
  font-size: .8rem; color: var(--lc-danger); background: var(--lc-danger-bg);
}
.lg-back { margin: .85rem 0 0; text-align: center; }
.lg-back a { font-size: .78rem; color: var(--lc-text-dim); text-decoration: none; cursor: pointer; }
.lg-back a:hover { color: var(--lc-forest); }
.lg-copyright {
  margin: 15px 0 0; text-align: center;
  font-size: .66rem; letter-spacing: .02em; color: rgba(255,255,255,.82);
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}

/* Frase descriptiva de la imatge, a baix a la dreta: blanca amb un glow
   exterior gris fosc discret que simula ombra per a la llegibilitat */
.lg-caption {
  position: fixed; right: 1.6rem; bottom: 1.3rem; margin: 0;
  max-width: 42ch; text-align: right; pointer-events: none;
  color: #fff; font-size: .92rem; font-weight: 500; line-height: 1.4;
  text-shadow: 0 0 5px rgba(38,38,38,.92), 0 0 13px rgba(28,28,28,.6), 0 1px 2px rgba(0,0,0,.55);
}
@media (max-width: 520px) {
  .lg-caption { position: static; max-width: none; text-align: center; margin: 1.5rem auto 0; }
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 860px) {
  .boto-menu { display: block; }
  .subnav { display: none; }
  .capcalera-salutacio { display: none; }
}

@media (min-width: 861px) {
  .menu-mobil { display: none !important; }
}

@media (max-width: 767px) {
  .plec-pagina { padding: 24px 16px; }
  .plec-filterbar > * { flex: 1 1 100%; max-width: none !important; }
  .plec-filterbar input, .plec-filterbar select { min-height: 48px; }
  .plec-grafics { grid-template-columns: 1fr; }
  .form-fila-2, .form-fila-3 { grid-template-columns: 1fr; }
  .form-calcul { grid-template-columns: 1fr 1fr 1fr; }
}

/* ============================================================
   Planning de producció per línia (Programacions) i ordre
   productiu de categories (Mestre productes)
   ============================================================ */

.pestanyes-linia { margin-bottom: 16px; }
/* Cada pestanya de màquina porta la barra inferior del seu color
   (inline style); la inactiva queda atenuada i l'activa ressalta. */
.pestanyes-linia .pestanya { opacity: 0.5; }
.pestanyes-linia .pestanya:hover { opacity: 0.8; }
.pestanyes-linia .pestanya.actiu {
  opacity: 1;
  color: var(--lc-forest);
  background: var(--lc-grey);
}

/* ----- Barra d'eines del planning ----- */
.planning-barra {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
/* Tots els botons de la barra amb la mateixa alçada */
.planning-barra .boto { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.planning-nou { position: relative; }
.planning-nou-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 30;
  background: var(--lc-white);
  border: 1px solid var(--lc-border);
  box-shadow: var(--shadow-card-hover);
  min-width: 280px;
}
.planning-nou-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--lc-border-light);
  padding: 10px 14px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--lc-forest);
  cursor: pointer;
}
.planning-nou-menu button:last-child { border-bottom: 0; }
.planning-nou-menu button:hover { background: var(--lc-grey); }
.planning-nou-menu button span {
  display: block;
  font-weight: 400;
  font-size: var(--text-xs);
  color: var(--lc-text-dim);
}
.planning-anticipacio {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--lc-border);
  background: var(--lc-grey);
  font-size: var(--text-sm);
  color: var(--lc-text-dim);
}
.planning-anticipacio input {
  width: 70px;
  padding: 6px 8px;
  border: 1px solid var(--lc-border);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.planning-exclosos-boto {
  background: var(--lc-warning-bg);
  color: var(--lc-warning);
  border: 1px solid var(--lc-warning);
  padding: 6px 10px;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
}
.planning-noplan-boto { background: var(--lc-danger-bg); color: var(--lc-danger); border-color: var(--lc-danger); }
.planning-generat { margin-left: auto; font-size: var(--text-xs); color: var(--lc-text-muted); }

/* Desglossament del càlcul de quantitat + total editable (detall del bloc) */
.planning-calcul { margin: 12px 0; border: 1px solid var(--lc-border-light); background: var(--lc-grey); padding: 10px 12px; }
.planning-calcul-titol { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--lc-text-dim); margin-bottom: 6px; }
.planning-calcul-taula { width: 100%; border-collapse: collapse; font-size: 13px; }
.planning-calcul-taula td { padding: 3px 0; }
.planning-calcul-taula td.dreta { text-align: right; }
.planning-calcul-taula tr.calc-fort td { border-top: 1px solid var(--lc-border); font-weight: 700; padding-top: 6px; color: var(--lc-forest); }
.planning-total-edit { display: flex; align-items: center; gap: 8px; margin: 12px 0; }
.planning-total-edit .calc-etiqueta { flex: 1; }
.planning-total-input { width: 120px; padding: 8px 10px; border: 1px solid var(--lc-border); font-family: var(--font-mono); text-align: right; }

/* ===== Detalls de la producció (barra lateral en clicar un bloc) ===== */
.detall-fila { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--lc-border-light); }
.detall-fila:last-child { border-bottom: none; }
.detall-et { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--lc-text-dim); padding-top: 2px; }
.detall-cos { min-width: 0; }
.detall-cos .mono, .detall-comanda .mono { font-family: var(--font-mono); font-size: 12px; }
.detall-cos .mono-fort { font-family: var(--font-mono); font-weight: 700; color: var(--lc-forest); }
.detall-fitxa { display: inline-block; margin-left: 8px; font-size: 12px; padding: 2px 10px; vertical-align: middle; }
.detall-linia { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; font-size: 13px; }
.detall-linia > span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.detall-sub { display: flex; justify-content: space-between; gap: 12px; font-weight: 700; padding: 0 0 4px; border-bottom: 1px dashed var(--lc-border-light); margin-bottom: 4px; }
.detall-comanda { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--lc-text-dim); padding: 1px 0 1px 10px; }
.detall-comanda.fora { color: var(--lc-danger); text-decoration: line-through; }
.detall-nd { color: var(--lc-text-muted); font-style: italic; }
.detall-total { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding: 10px 12px; background: var(--lc-mint); border-left: 4px solid var(--lc-forest); }
.detall-total-et { flex: 1 1 100%; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--lc-forest); }
.detall-total .planning-total-input { flex: 1; width: auto; min-width: 100px; }
.detall-total-valor { flex: 1; font-family: var(--font-mono); font-size: 22px; font-weight: 700; color: var(--lc-forest); text-align: right; }
.detall-mat { border: 1px solid var(--lc-border-light); padding: 8px 10px; margin-bottom: 8px; }
.detall-mat:last-child { margin-bottom: 0; }
.detall-mat-cap { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.detall-mat-sub { font-size: 12px; color: var(--lc-text-dim); margin-bottom: 6px; }

/* Requadres de programacions enllaçades (fabricació ↔ impressió) al drawer */
.prog-vincle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: #efe9f9;
  border: 1px solid #d9cef2;
  border-left: 3px solid #7b5fb5;
  color: #5f4a97;
  font-size: var(--text-sm);
  font-weight: 600;
}
.prog-vincle-dalt { margin: 0 0 18px; }
.prog-vincle-baix { margin: 18px 0 0; }
.prog-vincle .boto { white-space: nowrap; }

/* Drawer de programació: camps de només lectura (línia, grup, timings, vel. real) */
.prog-form input[readonly] { background: var(--lc-grey); color: var(--lc-text); cursor: default; }
/* Files dinàmiques (bobines gastades, trams de temps real) */
.prog-files { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.prog-fila { display: flex; gap: 8px; align-items: center; }
.prog-fila .prog-inp { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--lc-border); background: #fff; font: inherit; font-size: var(--text-sm); }
.prog-fila .prog-inp:focus { border-color: var(--lc-tech-green); outline: none; }
.prog-treu { flex: none; width: 32px; height: 32px; border: 1px solid var(--lc-border); background: #fff; color: var(--lc-danger); cursor: pointer; font-size: 13px; line-height: 1; }
.prog-treu:hover { background: var(--lc-danger-bg); }
.prog-afegir { align-self: flex-start; }

/* Fitxa vertical de comanda no planificada (substitueix la taula amb scroll) */
.noplan-fitxa {
  border: 1px solid var(--lc-border-light);
  border-left: 3px solid var(--lc-danger);
  padding: 8px 14px;
  margin-bottom: 12px;
}
.noplan-linia {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--lc-border-light);
}
.noplan-linia:last-child { border-bottom: none; }
.noplan-et { color: var(--lc-text-muted); font-size: var(--text-sm); }
.noplan-val { text-align: right; font-variant-numeric: tabular-nums; }
.noplan-motiu { color: var(--lc-danger); }

/* ===== Planificació · Totes les línies (graella de torns) ===== */
.pg-envolcall { overflow-x: auto; border: 1px solid var(--lc-border-light); background: #fff; }
.pg-taula { border-collapse: collapse; font-size: 12px; width: max-content; }
.pg-taula th, .pg-taula td { border: 1px solid var(--lc-border-light); }
.pg-taula thead th { background: var(--lc-forest); color: #fff; }
.pg-dia { text-align: center; padding: 6px 8px; font-weight: 700; white-space: nowrap; }
.pg-torn { text-align: center; padding: 4px 6px; font-size: 11px; font-weight: 600; white-space: nowrap; cursor: pointer; min-width: 96px; background: var(--lc-mint) !important; color: var(--lc-forest) !important; }
.pg-torn:hover { background: #93c5b1 !important; }
.pg-avui { background: #f4c20d !important; color: var(--lc-text) !important; }
/* Cap de setmana: dia granate; torns i cel·les en vermell clar */
.pg-cap-dia { background: #7b1e1e !important; color: #fff !important; }
.pg-cap-torn { background: #f7d9d4 !important; color: #7b1e1e !important; }
.pg-cap-cel { background-color: #fbeae7 !important; }
/* Separador entre dies, més gruixut que el que separa torns del mateix dia */
.pg-dia-inici { border-left: 3px solid #b8b8b8 !important; }
/* Columna fixa de línia */
.pg-cantonada, .pg-linia { position: sticky; left: 0; text-align: left; white-space: nowrap; padding: 6px 12px; font-weight: 700; min-width: 118px; }
.pg-cantonada { z-index: 4; background: var(--lc-forest); color: #fff; }
.pg-linia { z-index: 3; background: var(--pg-bg); color: var(--pg-c); border-left: 3px solid var(--pg-c); }
/* Cel·les de torn */
.pg-cel { height: 46px; vertical-align: top; padding: 2px; cursor: pointer; background-color: var(--pg-bg, #fff); }
.pg-cel-plena { background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0) 0 4px, rgba(0, 0, 0, .06) 4px 9px); }
.pg-bloc { display: block; font-size: 10px; line-height: 1.25; padding: 2px 4px; margin: 0 0 2px; background: #fff; border-left: 3px solid var(--pg-c, #888); color: var(--lc-text); }
.pg-of { font-family: var(--font-mono); color: var(--pg-c, #666); font-weight: 700; }
/* Codi de color per tipus de línia */
.pg-tipus-bosses    { --pg-c: #1c5a8f; --pg-bg: #e9f2fb; }
.pg-tipus-impressio { --pg-c: #b25a12; --pg-bg: #fdf0e4; }
.pg-tipus-bobinetes { --pg-c: #3a7d44; --pg-bg: #ecf6ed; }
/* Selecció de torn */
.pg-cel.pg-sel { box-shadow: inset 0 0 0 2px var(--lc-tech-green); }
.pg-torn.pg-sel { background: var(--lc-tech-green) !important; color: #fff !important; }
/* Etiquetes de línia a la taula de producció */
.pg-badge { display: inline-block; padding: 2px 8px; font-size: 11px; font-weight: 700; }
.pg-badge.t-bosses    { background: #e9f2fb; color: #1c5a8f; }
.pg-badge.t-impressio { background: #fdf0e4; color: #b25a12; }
.pg-badge.t-bobinetes { background: #ecf6ed; color: #3a7d44; }

/* ----- Graella de dies: 1 columna = 1 dia ----- */
.planning-envolcall {
  border: 1px solid var(--lc-border-light);
  background: var(--lc-white);
  overflow-x: auto;
  overflow-y: hidden; /* els calendaris només fan scroll horitzontal */
}
.planning-graella { display: flex; min-width: max-content; position: relative; }
.planning-graella .taula-buida { width: 100%; }
/* Selecció de dies consecutius (mode «Accions») */
.planning-dia { position: relative; }
.planning-dia-cap { position: relative; }
.dia-sel { position: absolute; top: 2px; right: 2px; z-index: 4; }
.dia-sel input { cursor: pointer; }
.planning-dia.seleccionat .planning-dia-cap { box-shadow: inset 0 0 0 2px var(--lc-tech-green); }
.planning-seleccio-barra { display: flex; align-items: center; gap: 14px; background: #fff3cd; border: 1px solid #ffe08a; border-top: none; padding: 8px 14px; }
.planning-dia {
  width: 150px;
  min-width: 150px;
  border-right: 1px solid var(--lc-border-light);
}
.planning-dia-cap {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--lc-sand);
  border-bottom: 1px solid var(--lc-border-light);
  padding: 6px 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-xs);
  color: var(--lc-forest);
  text-transform: capitalize;
}
.planning-dia.avui .planning-dia-cap { background: var(--lc-mint); }
.planning-dia-cos {
  position: relative;
  /* línia subtil cada 6 h (480 px/dia → 120 px per 6 h) */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0, transparent 119px,
    var(--lc-border-light) 119px, var(--lc-border-light) 120px
  );
}
.planning-aturada {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  background: repeating-linear-gradient(
    45deg, #ececec 0, #ececec 6px, #dddddd 6px, #dddddd 12px
  );
  overflow: hidden;
  cursor: pointer;
  border-top: 1px solid var(--lc-border);
  border-bottom: 1px solid var(--lc-border);
}
.planning-bloc {
  position: absolute;
  left: 4px;
  right: 4px;
  z-index: 2;
  color: #fff;
  font-size: 15px;
  line-height: 1.2;
  padding: 3px 6px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow-card);
}
.planning-bloc:hover { filter: brightness(1.08); }
.planning-bloc.bloc-sel { outline: 3px solid var(--lc-tech-green); outline-offset: -3px; box-shadow: 0 0 0 3px rgba(22, 161, 122, .35); z-index: 4; }
.mode-seleccio .planning-bloc { cursor: pointer; }
.planning-bloc b { display: block; font-family: var(--font-mono); font-size: 15px; }
.planning-bloc span { display: block; opacity: 0.9; }
.planning-bloc.no-fabricable {
  outline: 2px solid var(--lc-danger);
  outline-offset: -2px;
  opacity: 0.75;
}
.planning-bloc.fabricable-dubte { opacity: 0.85; }
.planning-avis {
  position: absolute;
  top: 2px;
  right: 4px;
  font-style: normal;
  color: #fff;
  background: var(--lc-danger);
  padding: 0 4px;
  font-size: 11px;
}
.planning-manual-marca {
  position: absolute;
  bottom: 2px;
  right: 4px;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10px;
  background: rgba(0,0,0,0.35);
  padding: 0 4px;
}
.planning-falta-mat {
  position: absolute;
  bottom: 2px;
  right: 4px;
  z-index: 3;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: var(--lc-danger);
  padding: 1px 4px;
  font-size: 12px;
  box-shadow: 0 0 0 1px #fff;
}
/* Si el bloc també porta la marca «M» (manual), desplaça el «‼» a la seva esquerra */
.planning-manual-marca ~ .planning-falta-mat { right: 24px; }
/* Dependència d'impressió sense rotllo imprès (bossa «Imprès a part») */
.planning-falta-imp {
  position: absolute;
  bottom: 2px;
  right: 4px;
  z-index: 3;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  color: var(--lc-warning);
  background: var(--lc-warning-bg);
  padding: 1px 4px;
  font-size: 10px;
  letter-spacing: .03em;
  box-shadow: 0 0 0 1px #fff;
}
.planning-manual-marca ~ .planning-falta-imp { right: 24px; }
/* Distintiu «VINCULADA»: mateix estil que «EN LINIA» però en lila */
.planning-vinculada {
  color: #fff;
  background: #7b5fb5;
  border: 0;
}
/* Programació: distintiu «PROG XXXYY» a baix a l'esquerra (clicable) ·
   recuadre lila amb fina línia blanca interior i ombra exterior difusa grisa */
.planning-prog-marca {
  position: absolute;
  bottom: 2px;
  left: 4px;
  z-index: 5;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  font-family: var(--font-mono);
  color: #fff;
  background: #7b5fb5;
  padding: 1px 5px;
  font-size: 10px;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px #fff, 0 2px 6px 1px rgba(90, 90, 90, .5);
}
.planning-prog-marca:hover { filter: brightness(1.1); }
.planning-transicio {
  position: absolute;
  left: 4px;
  right: 4px;
  z-index: 2;
  background: repeating-linear-gradient(
    -45deg, #555555 0, #555555 5px, #777777 5px, #777777 10px
  );
}
.planning-buit {
  position: absolute;
  inset: 40px 0 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 16px;
  color: var(--lc-text-muted);
  font-size: var(--text-sm);
  z-index: 3;
  pointer-events: none;
  text-align: center;
}

/* ----- Llegenda: mateixa categoria → mateix color ----- */
.planning-llegenda {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 10px;
  font-size: var(--text-xs);
  color: var(--lc-text-dim);
}
.planning-llegenda-item { display: inline-flex; align-items: center; gap: 6px; }
.planning-llegenda-item i {
  display: inline-block;
  width: 12px;
  height: 12px;
}
.planning-llegenda-item .llegenda-aturada {
  background: repeating-linear-gradient(45deg, #ececec 0, #ececec 3px, #cccccc 3px, #cccccc 6px);
}
.planning-llegenda-item .llegenda-transicio {
  background: repeating-linear-gradient(-45deg, #555555 0, #555555 3px, #777777 3px, #777777 6px);
}
.planning-detall-cap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
}
.planning-detall-cap i { display: inline-block; width: 14px; height: 14px; }

/* ----- Mestre productes: color de categoria i mode ordre producció ----- */
.cat-color {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  vertical-align: baseline;
}
.cat-ordre-accions { margin-left: 14px; }
.cat-ordre-accions .cat-boto { font-size: 13px; }
.cat-boto-transicio { font-size: 11px !important; letter-spacing: 0.04em; }
.cat-transicio-resum {
  margin-left: 12px;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--lc-forest);
  opacity: 0.8;
}

@media (max-width: 767px) {
  .planning-dia { width: 120px; min-width: 120px; }
  .planning-generat { margin-left: 0; }
}

/* ============================================================
   Combobox (desplegable filtrable), toggle segmentat, barra de
   composició del cost, menú lateral de vectors i consum de tintes
   ============================================================ */

/* ----- Combobox ----- */
.combobox { position: relative; flex: 1; }
.combobox-text {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--lc-border);
  background: #fff;
  font-family: var(--font-main);
  font-size: var(--text-sm);
  color: var(--lc-text);
  outline: none;
}
.combobox-text:focus { border-color: var(--lc-tech-green); }
.combobox-llista {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 80;
  max-height: 260px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--lc-border);
  border-top: 0;
  box-shadow: var(--shadow-card-hover);
}
.combobox-opcio {
  padding: 9px 12px;
  font-size: var(--text-sm);
  cursor: pointer;
}
.combobox-opcio:hover, .combobox-opcio.activa { background: var(--lc-grey); }
.combobox-opcio.seleccionada { background: var(--lc-mint); color: var(--lc-forest); }
.combobox-opcio-buida { color: var(--lc-text-muted); font-style: italic; }
.combobox-amb-boto { display: flex; gap: 8px; align-items: stretch; }
.combobox-amb-boto .boto { white-space: nowrap; }

/* ----- Toggle segmentat (transport del modelitzador) ----- */
.toggle-seg { display: inline-flex; border: 1px solid var(--lc-border); background: #fff; }
.toggle-seg label { cursor: pointer; }
.toggle-seg input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-seg span {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 18px;
  box-sizing: border-box;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--lc-text-dim);
  border-right: 1px solid var(--lc-border);
  transition: background 0.15s, color 0.15s;
}
.toggle-seg label:last-child span { border-right: 0; }
.toggle-seg input:checked + span { background: var(--lc-forest); color: #fff; }
.toggle-seg input:focus-visible + span { outline: 2px solid var(--lc-tech-green); }

/* ----- Modelitzar preu: formulari en una línia ----- */
.model-linia {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.model-linia .camp { margin: 0; }
.model-camp-producte { flex: 1 1 340px; min-width: 260px; }
.model-linia select { min-width: 90px; }

/* Calcula: mateixa alçada que el toggle, amb degradat taronja butà */
.boto-calcula {
  height: 44px; /* 42 px del toggle + el seu border */
  padding: 0 26px;
  color: #fff;
  border: none;
  background: linear-gradient(135deg, #f97316, #ffa45f);
}

/* Botó + d'impressió: verd fosc sobre blanc amb contorn verd fosc */
.boto-afegir-impressio {
  height: 44px;
  width: 44px;
  background: #fff;
  color: var(--lc-forest);
  border: 1px solid var(--lc-forest);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s;
}
.boto-afegir-impressio:hover { background: var(--lc-grey); }

/* Fila d'impressió del modelitzador */
.model-fila-impressio {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--lc-border-light);
}
.model-imp-info {
  font-size: var(--text-xs);
  color: var(--lc-text-dim);
  align-self: center;
  max-width: 360px;
}

/* ----- Barra horitzontal de composició del cost ----- */
.cost-barra-titol {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--lc-forest);
  margin-bottom: 12px;
}
.cost-barra {
  display: flex;
  width: 100%;
  height: 44px;
  border: 1px solid var(--lc-border-light);
  overflow: hidden;
}
.cost-barra-seg {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  min-width: 2px;
}
.cost-barra-llegenda {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 12px;
  font-size: var(--text-xs);
  color: var(--lc-text-dim);
}
.cost-barra-llegenda span { display: inline-flex; align-items: center; gap: 6px; }
.cost-barra-llegenda i { display: inline-block; width: 11px; height: 11px; }
.cost-barra-llegenda b { color: var(--lc-text); font-family: var(--font-mono); font-weight: 600; }

/* ----- Vectors de cost: menú lateral amb seccions ----- */
.vc-disposicio { display: flex; gap: 28px; align-items: flex-start; }
.vc-menu {
  flex: 0 0 220px;
  border: 1px solid var(--lc-border-light);
  background: #fff;
  position: sticky;
  top: 16px;
}
.vc-menu-seccio {
  padding: 12px 14px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lc-text-muted);
  border-bottom: 1px solid var(--lc-border-light);
}
.vc-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-left: 3px solid transparent;
  padding: 10px 14px;
  font-family: var(--font-main);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--lc-text-dim);
  cursor: pointer;
}
.vc-menu-item:hover { background: var(--lc-grey); }
.vc-menu-item.actiu {
  border-left-color: var(--lc-tech-green);
  color: var(--lc-forest);
  background: var(--lc-grey);
}
.vc-contingut { flex: 1; min-width: 0; }
/* Totes les seccions amb el mateix ample */
.vc-contingut .taula-envolcall,
.vc-contingut .lc-targeta { max-width: 760px !important; width: 100%; }

@media (max-width: 860px) {
  .vc-disposicio { flex-direction: column; }
  .vc-menu { position: static; flex: none; width: 100%; }
}

/* ----- Consum de tintes: processat del fitxer del dispensing ----- */
.tintes-drop {
  border: 3px dashed var(--lc-forest);
  background: #fff;
  padding: 48px 24px;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s;
  margin-bottom: 16px;
}
.tintes-drop:hover { background: var(--lc-mint); }
.tintes-drop-icona { font-size: 44px; display: block; margin-bottom: 10px; color: var(--lc-forest); }
.tintes-drop b { font-family: var(--font-heading); color: var(--lc-forest); }
.tintes-drop .info { font-size: var(--text-xs); color: var(--lc-text-dim); margin-top: 6px; }
.tintes-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--lc-border-light);
  padding: 10px 16px;
  margin-bottom: 20px;
  font-size: var(--text-sm);
}
.tintes-controls label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.tintes-controls input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--lc-forest); }
.tintes-recompte { margin-left: auto; font-size: var(--text-xs); color: var(--lc-text-dim); }
.tintes-accions { display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 12px; }

/* ----- Pastilla de secció al títol (Bosses / Impressió / Bobinetes) -----
   Mateixa mida que el títol i un color únic per secció, per detectar
   d'un cop d'ull si s'està a la secció equivocada. */
.pastilla-seccio {
  display: inline-block;
  vertical-align: baseline;
  margin-left: 10px;
  padding: 0 16px;
  font-size: inherit;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
}