/* Portal de clients Javajan — full d'estils únic */

:root {
  --blau: #1f3a5f;
  --blau-clar: #2d5286;
  --fons: #f3f5f7;
  --vora: #d9dee4;
  --text: #24292f;
  --text-suau: #5b6570;
  --blanc: #ffffff;
  --ok-fons: #e6f4ea;
  --ok-text: #1e6d38;
  --error-fons: #fdecea;
  --error-text: #a1332a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fons);
  color: var(--text);
  font: 15px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

a { color: var(--blau-clar); }

/* ---- capçalera ---- */
.topbar { background: var(--blau); color: var(--blanc); }
.topbar-inner {
  max-width: 960px; margin: 0 auto; padding: 14px 20px;
  display: flex; align-items: center; gap: 16px;
}
.marca { font-size: 18px; font-weight: 700; letter-spacing: .3px; }
.marca-sub { font-size: 13px; font-weight: 400; opacity: .75; margin-left: 4px; }
.empresa { margin-left: auto; font-size: 14px; opacity: .9; }
.logout {
  color: var(--blanc); font-size: 13px; text-decoration: none;
  border: 1px solid rgba(255,255,255,.4); border-radius: 4px; padding: 4px 10px;
}
.logout:hover { background: rgba(255,255,255,.12); }

/* ---- menú ---- */
.menu { background: var(--blanc); border-bottom: 1px solid var(--vora); }
.menu-inner { max-width: 960px; margin: 0 auto; padding: 0 12px; display: flex; flex-wrap: wrap; }
.menu a {
  display: block; padding: 10px 12px; text-decoration: none;
  color: var(--text-suau); font-size: 14px; border-bottom: 2px solid transparent;
}
.menu a:hover { color: var(--blau); }
.menu a.actiu { color: var(--blau); border-bottom-color: var(--blau); font-weight: 600; }

/* ---- contingut ---- */
.contingut { max-width: 960px; margin: 0 auto; padding: 24px 20px 48px; }
h1 { font-size: 22px; margin: 0 0 18px; color: var(--blau); }
h2 { font-size: 16px; margin: 24px 0 10px; }

.caixa {
  background: var(--blanc); border: 1px solid var(--vora); border-radius: 6px;
  padding: 20px; margin-bottom: 20px;
}

/* ---- taules ---- */
table.llistat { width: 100%; border-collapse: collapse; background: var(--blanc); }
.llistat th {
  text-align: left; font-size: 13px; padding: 8px 10px;
  background: var(--fons); border-bottom: 2px solid var(--vora); white-space: nowrap;
}
.llistat td { padding: 8px 10px; border-bottom: 1px solid var(--vora); font-size: 14px; vertical-align: top; }
.llistat tr:hover td { background: #fafbfc; }
.num { text-align: right; white-space: nowrap; }
.total-fila td { font-weight: 700; background: var(--fons); }
p.total-fila {
  font-weight: 700; background: var(--fons); display: inline-block;
  padding: 8px 12px; border-radius: 4px;
}

/* ---- formularis ---- */
label { display: block; font-size: 13px; color: var(--text-suau); margin-bottom: 4px; }
input[type=text], input[type=password], select {
  width: 100%; max-width: 320px; padding: 8px 10px; font-size: 14px;
  border: 1px solid var(--vora); border-radius: 4px; background: var(--blanc);
}
input:focus, select:focus { outline: 2px solid var(--blau-clar); outline-offset: 0; }
.camp { margin-bottom: 14px; }
.camp-inline { display: inline-block; margin-right: 16px; vertical-align: top; }
.boto {
  display: inline-block; background: var(--blau); color: var(--blanc);
  font-size: 14px; font-weight: 600; border: 0; border-radius: 4px;
  padding: 9px 18px; cursor: pointer; text-decoration: none;
}
.boto:hover { background: var(--blau-clar); }

/* ---- avisos ---- */
.avis { border-radius: 4px; padding: 10px 14px; margin-bottom: 16px; font-size: 14px; }
.avis-ok { background: var(--ok-fons); color: var(--ok-text); }
.avis-error { background: var(--error-fons); color: var(--error-text); }

/* ---- login ---- */
.login-caixa { max-width: 380px; margin: 60px auto 0; }
.login-caixa h1 { text-align: center; }
.login-caixa input { max-width: none; }

/* ---- utilitats ---- */
.paginacio { display: flex; justify-content: space-between; margin-top: 14px; font-size: 14px; }
.dades-contacte dt { font-size: 13px; color: var(--text-suau); margin-top: 10px; }
.dades-contacte dd { margin: 0; }
.buit { color: var(--text-suau); font-style: italic; padding: 18px 0; }

/* ---- peu ---- */
.peu { border-top: 1px solid var(--vora); background: var(--blanc); }
.peu-inner {
  max-width: 960px; margin: 0 auto; padding: 14px 20px;
  font-size: 13px; color: var(--text-suau);
}