/* ============================================================
   tramits.snassessors.com — Styles
   Coherent amb www.snassessors.com
   ============================================================ */

/* ─── Reset i variables ──────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --clr-bg:        #faf9f7;
  --clr-surface:   #ffffff;
  --clr-text:      #2c2c2c;
  --clr-text-mid:  #5a5a5a;
  --clr-text-low:  #8a8a8a;
  --clr-accent:    #b08d5a;       /* oro sèptic — accent principal */
  --clr-accent-lt: #f0e6d3;       /* accent molt lleuger, per a fons */
  --clr-border:    #e4e0db;
  --clr-danger-bg: #fef2f2;
  --clr-danger-bd: #f5c2c2;
  --clr-danger-tx: #7a2d2d;
  --clr-ok-bg:     #f0faf4;
  --clr-ok-bd:     #a8ddb8;
  --clr-ok-tx:     #1e6b3e;

  --font-head: 'Playfair Display', Georgia, serif;
  --font-body: 'Source Sans 3', system-ui, sans-serif;

  --max-w:   680px;
  --radius:  6px;
  --shadow:  0 2px 12px rgba(44,44,44,.08);
}

/* ─── Tipografia ─────────────────────────────────────────────── */
html { font-size: 16px; }

body {
  font-family: var(--font-body);
  background: var(--clr-bg);
  color:      var(--clr-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-head); font-weight: 600; line-height: 1.25; }
h1 { font-size: 2rem;   color: var(--clr-text); }
h2 { font-size: 1.35rem; margin-bottom: .4em; }
h3 { font-size: 1.1rem;  margin-bottom: .3em; }

p  { margin-bottom: 1em; }
ol, ul { margin-bottom: 1em; padding-left: 1.5em; }
li { margin-bottom: .35em; }
strong { font-weight: 600; }

/* ─── Layout ─────────────────────────────────────────────────── */
.page-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

header {
  background:    var(--clr-surface);
  border-bottom: 1px solid var(--clr-border);
  padding:       1rem 1.5rem;
}

header .logo-bar {
  max-width: var(--max-w);
  margin:    0 auto;
  display:   flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;              /* ✅ permet que el selector baixi a la 2a línia en mòbil */
}

header .logo-bar a {
  color: var(--clr-text);
  text-decoration: none;
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 600;
}

header .logo-bar .sep {
  color: var(--clr-border);
  font-size: .85rem;
}

header .logo-bar .breadcrumb {
  font-family: var(--font-body);
  font-size:   .85rem;
  color:       var(--clr-text-low);
}

/* ─── Selector d'idioma ─────────────────────────────────────── */
header .logo-bar .lang-switcher {
  margin-left: auto;            /* ✅ empeny a la dreta */
  display: flex;
  align-items: center;
  gap: .5rem;
}

header .logo-bar .lang-switcher label {
  font-family: var(--font-body);
  font-size: .82rem;
  color: var(--clr-text-low);
}

header .logo-bar .lang-switcher select {
  font-family: var(--font-body);
  font-size: .85rem;
  padding: .32rem .55rem;
  border: 1px solid var(--clr-border);
  border-radius: 999px;
  background: var(--clr-surface);
  color: var(--clr-text-mid);
}

header .logo-bar .lang-switcher select:focus {
  outline: 2px solid var(--clr-accent);
  outline-offset: 2px;
}



main {
  flex: 1;
  max-width: var(--max-w);
  margin:    2.5rem auto;
  padding:   0 1.5rem;
  width:     100%;
}

footer {
  margin-top: auto;
  padding:    2rem 1.5rem;
  border-top: 1px solid var(--clr-border);
  background: var(--clr-surface);
  
}

footer .footer-inner {
  max-width: var(--max-w);
  margin:    0 auto;
  display:   flex;
  justify-content: space-between;
  align-items:     flex-end;
  gap:             1rem;
  flex-wrap: wrap;
}
footer .footer-legal { display: inline-block; margin-top: .35rem; opacity: .85; }
footer .footer-legal .sep { margin: 0 .4rem; opacity: .7; }
footer .footer-legal a { text-decoration: none; }
footer .footer-legal a:hover { text-decoration: underline; }

footer .footer-left  { font-size: .85rem; color: var(--clr-text-low); }
footer .footer-right { font-size: .82rem; color: var(--clr-text-low); text-align: right; }
footer a { color: var(--clr-accent); text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* ─── Card (contenedor principal del contenido) ──────────────── */
.card {
  background: var(--clr-surface);
  border:     1px solid var(--clr-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:    2rem 2.25rem;
}

/* ─── Notices ────────────────────────────────────────────────── */
.notice {
  border:        1px solid var(--clr-border);
  border-radius: var(--radius);
  background:    var(--clr-accent-lt);
  padding:       1rem 1.25rem;
  margin-bottom: 1.25rem;
  font-size:     .93rem;
}

.notice p { margin-bottom: .5em; }
.notice p:last-child { margin-bottom: 0; }

.notice--danger {
  background: var(--clr-danger-bg);
  border-color: var(--clr-danger-bd);
  color:        var(--clr-danger-tx);
}

.notice--ok {
  background: var(--clr-ok-bg);
  border-color: var(--clr-ok-bd);
  color:        var(--clr-ok-tx);
}

.notice--ok .notice-icon { margin-right: .35em; }

/* ─── Botones ────────────────────────────────────────────────── */
.btn {
  display:         inline-block;
  margin-top:      .75rem;
  padding:         .7rem 1.75rem;
  background:      var(--clr-accent);
  color:           #fff;
  font-family:     var(--font-body);
  font-size:       .95rem;
  font-weight:     600;
  letter-spacing:  .02em;
  text-decoration: none;
  border-radius:   var(--radius);
  border:          none;
  cursor:          pointer;
  transition:      background .2s, box-shadow .2s;
  box-shadow:      0 2px 6px rgba(176,141,90,.25);
}

.btn:hover {
  background: #9a7a4a;
  box-shadow: 0 3px 10px rgba(176,141,90,.35);
}

.btn--secondary {
  background: var(--clr-surface);
  color:      var(--clr-accent);
  border:     1.5px solid var(--clr-accent);
  box-shadow: none;
}

.btn--secondary:hover {
  background: var(--clr-accent-lt);
  box-shadow: none;
}

/* ─── Separador ──────────────────────────────────────────────── */
.divider {
  border: none;
  border-top: 1px solid var(--clr-border);
  margin: 1.75rem 0;
}

/* ─── Pasos numerats ─────────────────────────────────────────── */
.steps {
  list-style: none;
  padding-left: 0;
  counter-reset: step;
}

/* Fix: evita justificat i espais gegants dins dels passos */
.steps li,
.steps li p,
.steps li span,
.steps li strong {
  text-align: left;
  text-justify: auto;
}

.steps li {
  counter-increment: step;
  display:  flex;
  gap:      1rem;
  align-items: flex-start;
  margin-bottom: 1rem;
  position: relative;
}

.steps li::before {
  content:    counter(step);
  flex-shrink: 0;
  width:  2rem;
  height: 2rem;
  line-height: 2rem;
  text-align:  center;
  background:  var(--clr-accent-lt);
  color:       var(--clr-accent);
  border-radius: 50%;
  font-weight: 700;
  font-size:   .9rem;
}

/* ─── Secció de confirmació (success) ────────────────────────── */
.success-header {
  text-align: center;
  margin-bottom: 2rem;
}

.success-header .icon {
  font-size: 2.5rem;
  margin-bottom: .25rem;
}

.success-header h1 { margin-bottom: .2em; }
.success-header p  { color: var(--clr-text-mid); margin-bottom: 0; }

/* ─── Estat error ───────────────────────────────────────────── */
.error-page {
  text-align: center;
  padding:    4rem 1.5rem;
  max-width:  520px;
  margin:     0 auto;
}

.error-page .icon { font-size: 2.5rem; margin-bottom: 1rem; }
.error-page h1   { margin-bottom: .5em; }
.error-page p    { color: var(--clr-text-mid); }

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 600px) {
  main        { margin: 1.5rem auto; padding: 0 1rem; }
  .card       { padding: 1.5rem 1.25rem; }
  h1          { font-size: 1.6rem; }
  footer .footer-inner { flex-direction: column; align-items: flex-start; }
  footer .footer-right { text-align: left; }
}