/*
 * La web de comandes: un albarà de mercat al mòbil. Paper càlid i tinta, un verd per a tot el que fa comanda i un
 * ambre per al que cal aclarir. Es fa servir a la cuina o al magatzem, amb una mà: text gran, contrast alt i zones de
 * toc de 48 px. La lletra és la del sistema a propòsit: res per baixar en un Android barat amb 4G.
 */

:root {
  --paper: #f4efe4;
  --paper-fosc: #e9e1d0;
  --targeta: #fffdf8;
  --tinta: #1d1a16;
  --tinta-suau: #5c544a;
  --ratlla: #d8cdb8;
  --verd: #1f6b3a;
  --verd-fort: #164f2b;
  --verd-clar: #dcebdc;
  --sobre-verd: #ffffff;
  --ambre: #8a4b07;
  --ambre-clar: #fbe9c6;
  --vermell: #a1261b;
  --focus: #1d5fd1;

  --lletra: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --text-petit: 0.875rem;
  --text-base: 1.0625rem;
  --text-gran: 1.25rem;
  --text-titol: clamp(1.5rem, 1.2rem + 1.4vw, 1.875rem);

  --toc: 3rem;
  --marge: 1rem;
  --radi: 0.75rem;
  --radi-petit: 0.5rem;
  --ombra: 0 1px 0 rgb(29 26 22 / 0.06), 0 6px 18px -8px rgb(29 26 22 / 0.25);
  --durada: 160ms;
  --corba: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #16130f;
    --paper-fosc: #221d17;
    --targeta: #1f1b16;
    --tinta: #f3ecdf;
    --tinta-suau: #b7ab98;
    --ratlla: #3a3229;
    --verd: #4fb173;
    --verd-fort: #6cc58c;
    --verd-clar: #1d3324;
    --sobre-verd: #0d1a11;
    --ambre: #f0b35a;
    --ambre-clar: #3a2a12;
    --vermell: #ff8a7e;
    --focus: #8ab4ff;
    --ombra: 0 1px 0 rgb(0 0 0 / 0.4), 0 8px 20px -10px rgb(0 0 0 / 0.7);
  }
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--tinta);
  font-family: var(--lletra);
  font-size: var(--text-base);
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
}

[hidden] {
  display: none !important;
}

a {
  color: var(--verd-fort);
  text-underline-offset: 0.18em;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* La capçalera: l'empresa, el client i fins quan es pot confirmar. */

.cap {
  padding: calc(var(--marge) + env(safe-area-inset-top)) var(--marge) 0.75rem;
  max-width: 42rem;
  margin: 0 auto;
}

.cap-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.empresa {
  margin: 0;
  font-size: var(--text-gran);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.cap-accions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--text-petit);
}

.cap-accions form {
  margin: 0;
}

.cap-accions a,
.cap-accions button {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.6rem;
  border: 0;
  border-radius: var(--radi-petit);
  background: none;
  color: var(--tinta-suau);
  text-decoration: none;
}

.cap-accions a:hover,
.cap-accions button:hover {
  background: var(--paper-fosc);
  color: var(--tinta);
}

.client {
  margin: 0.25rem 0 0;
  color: var(--tinta-suau);
}

.client strong {
  color: var(--tinta);
}

.repartiment {
  margin: 0.125rem 0 0;
  font-size: var(--text-petit);
  color: var(--tinta-suau);
}

/* La llista. */

.llista,
.resum,
.rebuda,
.historial,
.entrada {
  max-width: 42rem;
  margin: 0 auto;
  padding: 0 var(--marge) calc(6rem + env(safe-area-inset-bottom));
}

.avisos-dalt:empty {
  display: none;
}

.avisos-dalt {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.avis-caducada,
.avis-dubtes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radi);
  background: var(--ambre-clar);
  color: var(--ambre);
  font-weight: 650;
}

.avis-caducada p {
  margin: 0;
}

.avis-caducada button {
  min-height: var(--toc);
  padding: 0 1rem;
  border: 2px solid currentColor;
  border-radius: 999px;
  background: none;
  font-weight: 700;
  white-space: nowrap;
}

.avis-dubtes {
  text-decoration: none;
}

.avis-dubtes::after {
  content: "→";
  font-size: var(--text-gran);
}

.boto-repeteix {
  display: block;
  width: 100%;
  min-height: 3.5rem;
  margin-bottom: 0.75rem;
  padding: 0.75rem 1rem;
  border: 2px dashed var(--verd);
  border-radius: var(--radi);
  background: var(--verd-clar);
  color: var(--verd-fort);
  font-weight: 700;
  text-align: left;
  transition: transform var(--durada) var(--corba);
}

.boto-repeteix::before {
  content: "↻ ";
}

.boto-repeteix:active {
  transform: scale(0.98);
}

.cerca {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0 calc(-1 * var(--marge));
  padding: 0.5rem var(--marge);
  background: var(--paper);
}

.cerca input {
  width: 100%;
  min-height: var(--toc);
  padding: 0 1rem;
  border: 2px solid var(--ratlla);
  border-radius: 999px;
  background: var(--targeta);
  font-size: var(--text-base);
  -webkit-appearance: none;
  appearance: none;
}

.cerca input:focus {
  border-color: var(--verd);
  outline: none;
}

.families {
  display: flex;
  gap: 0.5rem;
  margin: 0 calc(-1 * var(--marge)) 0.5rem;
  padding: 0.25rem var(--marge) 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.families::-webkit-scrollbar {
  display: none;
}

.families a {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 0.9rem;
  border: 1px solid var(--ratlla);
  border-radius: 999px;
  background: var(--targeta);
  color: var(--tinta);
  font-size: var(--text-petit);
  font-weight: 600;
  text-decoration: none;
}

.families a:first-child {
  border-color: var(--verd);
  color: var(--verd-fort);
}

.seccio {
  scroll-margin-top: 4.5rem;
  margin-top: 1.25rem;
}

.seccio h2 {
  margin: 0 0 0.25rem;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid var(--tinta);
  font-size: var(--text-petit);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#potser h2 {
  color: var(--verd-fort);
  border-color: var(--verd);
}

.articles,
.linies {
  margin: 0;
  padding: 0;
  list-style: none;
}

.article,
.linia {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 4rem;
  padding: 0.5rem 0;
  border-bottom: 1px dashed var(--ratlla);
}

.article.a-la-comanda .article-nom {
  color: var(--verd-fort);
}

.article.a-la-comanda .article-nom::before {
  content: "● ";
  font-size: 0.7em;
  vertical-align: 0.15em;
}

.article-text {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 0.1rem;
}

.article-nom {
  font-weight: 650;
  overflow-wrap: anywhere;
}

.article-detall {
  color: var(--tinta-suau);
  font-size: var(--text-petit);
}

.article-unitat {
  justify-self: start;
  max-width: 100%;
  min-height: 2.25rem;
  padding: 0 1.75rem 0 0.6rem;
  border: 1px solid var(--ratlla);
  border-radius: var(--radi-petit);
  background: var(--targeta)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235c544a'/%3E%3C/svg%3E")
    no-repeat right 0.6rem center;
  color: var(--tinta-suau);
  font-size: var(--text-petit);
  -webkit-appearance: none;
  appearance: none;
}

/* El «Afegeix» i el «− 2 +». */

.control {
  flex: none;
  display: flex;
  align-items: center;
}

.afegeix {
  min-width: 6.5rem;
  min-height: var(--toc);
  padding: 0 1rem;
  border: 2px solid var(--verd);
  border-radius: 999px;
  background: var(--targeta);
  color: var(--verd-fort);
  font-weight: 750;
  transition:
    transform var(--durada) var(--corba),
    background-color var(--durada);
}

.afegeix:hover {
  background: var(--verd-clar);
}

/* Una línia amb un dubte, a la llista: no es toca amb «−» i «+», s'aclareix al resum. */
.aclareix {
  display: inline-flex;
  align-items: center;
  min-height: var(--toc);
  padding: 0 1rem;
  border-radius: 999px;
  background: var(--ambre-clar);
  color: var(--ambre);
  font-weight: 750;
  text-decoration: none;
}

.aclareix::after {
  content: "→";
  margin-left: 0.4rem;
}

.afegeix:active,
.pas:active {
  transform: scale(0.94);
}

.pas {
  width: var(--toc);
  height: var(--toc);
  border: 0;
  border-radius: 50%;
  background: var(--verd);
  color: var(--sobre-verd);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  transition: transform var(--durada) var(--corba);
}

.quantitat {
  min-width: 3.25rem;
  min-height: var(--toc);
  padding: 0 0.4rem;
  border: 0;
  background: none;
  font-size: var(--text-gran);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-decoration: underline dotted var(--ratlla);
  text-underline-offset: 0.3em;
}

.quantitat-camp {
  width: 6.5rem;
  min-height: var(--toc);
  padding: 0 0.75rem;
  border: 2px solid var(--verd);
  border-radius: var(--radi-petit);
  background: var(--targeta);
  font-size: var(--text-gran);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.buit,
.preus {
  color: var(--tinta-suau);
}

.preus {
  margin-top: 1.5rem;
  font-size: var(--text-petit);
}

/* La barra de baix. */

.barra {
  position: fixed;
  inset: auto 0 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem var(--marge) calc(0.75rem + env(safe-area-inset-bottom));
  background: var(--tinta);
  color: var(--paper);
  box-shadow: 0 -8px 24px -12px rgb(0 0 0 / 0.45);
}

.recompte {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.boto-principal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0 1.4rem;
  border: 0;
  border-radius: 999px;
  background: var(--verd);
  color: var(--sobre-verd);
  font-weight: 800;
  text-decoration: none;
  transition: transform var(--durada) var(--corba);
}

.boto-principal:hover {
  background: var(--verd-fort);
}

.boto-principal:active {
  transform: scale(0.97);
}

.boto-principal:disabled {
  opacity: 0.6;
}

@media (prefers-color-scheme: dark) {
  .barra {
    background: var(--paper-fosc);
    color: var(--tinta);
    border-top: 1px solid var(--ratlla);
  }
}

/* El resum. */

.resum,
.rebuda {
  padding-top: 0.5rem;
}

.torna {
  display: inline-flex;
  align-items: center;
  min-height: var(--toc);
  font-weight: 650;
  text-decoration: none;
}

.resum h2,
.rebuda h2,
.historial h1,
.entrada h1 {
  margin: 0.25rem 0 0.75rem;
  font-size: var(--text-titol);
  font-weight: 850;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.per-aclarir {
  margin-bottom: 1.25rem;
  padding: 1rem;
  border-left: 6px solid var(--ambre);
  border-radius: var(--radi);
  background: var(--ambre-clar);
}

.per-aclarir h3 {
  margin: 0;
  color: var(--ambre);
  font-size: var(--text-petit);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.per-aclarir > p {
  margin: 0.25rem 0 0.75rem;
}

.dubte + .dubte {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--ambre);
}

.dubte-pregunta {
  margin: 0 0 0.5rem;
  font-weight: 700;
}

.dubte-opcions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.dubte-opcions button,
.dubte-escriu button {
  min-height: var(--toc);
  padding: 0 1rem;
  border: 2px solid var(--tinta);
  border-radius: 999px;
  background: var(--targeta);
  font-weight: 650;
}

.dubte-opcions button:last-child:not(:first-child) {
  border-style: dashed;
  color: var(--tinta-suau);
}

.dubte-escriu {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.dubte-escriu input {
  width: 7rem;
  min-height: var(--toc);
  padding: 0 0.75rem;
  border: 2px solid var(--ratlla);
  border-radius: var(--radi-petit);
  background: var(--targeta);
  font-weight: 700;
}

.linia .treu {
  min-height: var(--toc);
  padding: 0 0.6rem;
  border: 0;
  background: none;
  color: var(--vermell);
  font-size: var(--text-petit);
  font-weight: 650;
}

.termini {
  font-weight: 700;
}

.resum .boto-principal,
.rebuda .boto-principal {
  width: 100%;
  margin-top: 0.5rem;
}

/* Rebuda. */

.rebuda h2::before {
  content: "✓";
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 0.75rem;
  border-radius: 50%;
  background: var(--verd);
  color: var(--sobre-verd);
  font-size: 1.75rem;
}

.numero {
  display: inline-block;
  margin: 0 0 1rem;
  padding: 0.35rem 0.75rem;
  border: 2px dashed var(--tinta);
  border-radius: var(--radi-petit);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.rebuda .linies li,
.comanda-linies li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0;
  border-bottom: 1px dashed var(--ratlla);
}

.quantitat-text {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rebuda .enllac {
  display: block;
  margin-top: 1rem;
  text-align: center;
}

/* Les meves comandes. */

.historial {
  padding-top: 0.5rem;
}

.comandes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

.comanda {
  padding: 1rem;
  border-radius: var(--radi);
  background: var(--targeta);
  box-shadow: var(--ombra);
}

.comanda-cap {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 0 0 0.5rem;
  font-weight: 700;
}

.comanda-data {
  font-variant-numeric: tabular-nums;
}

.estat {
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  font-size: var(--text-petit);
}

.estat-rebuda {
  background: var(--verd-clar);
  color: var(--verd-fort);
}

.estat-revisant,
.estat-caducada {
  background: var(--ambre-clar);
  color: var(--ambre);
}

.comanda-linies li:last-child,
.rebuda .linies li:last-child {
  border-bottom: 0;
}

.comanda-linies {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* L'entrada. */

.entrada {
  padding-top: calc(3rem + env(safe-area-inset-top));
}

.entrada .empresa {
  color: var(--verd-fort);
}

.entrada .error {
  color: var(--vermell);
  font-weight: 650;
}

.enganxa form {
  display: grid;
  gap: 0.5rem;
  margin-top: 1rem;
}

.enganxa input {
  min-height: var(--toc);
  padding: 0 1rem;
  border: 2px solid var(--ratlla);
  border-radius: var(--radi-petit);
  background: var(--targeta);
}

/* L'avís de baix, amb «Desfés». */

.avis {
  position: fixed;
  left: var(--marge);
  right: var(--marge);
  bottom: calc(5.5rem + env(safe-area-inset-bottom));
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 40rem;
  margin: 0 auto;
  padding: 0.75rem 1rem;
  border-radius: var(--radi);
  background: var(--tinta);
  color: var(--paper);
  box-shadow: var(--ombra);
}

.avis button {
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border: 0;
  border-radius: var(--radi-petit);
  background: none;
  color: #8fd6a5;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (prefers-color-scheme: dark) {
  .avis {
    background: var(--tinta);
    color: var(--paper);
  }

  .avis button {
    color: var(--verd);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .avis:not([hidden]) {
    animation: puja var(--durada) var(--corba);
  }
}

@keyframes puja {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}