/* ============================================================
   pages/libro.css — Libro de Reclamaciones (Hoja de Reclamación)
   ============================================================ */

.lr-head {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.lr-head h1 { margin: 0; }
.lr-book {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  background: var(--color-brand-blue);
}
.lr-book svg { width: 26px; height: 26px; fill: #fff; }

.lr-intro {
  color: var(--color-text-muted);
  font-size: .95rem;
  line-height: 1.6;
  max-width: 66ch;
  margin-bottom: var(--space-lg);
}


/* ---- Formulario ---- */
/* El resto del formulario (campos, avisos, casillas) vive en
   components/form.css. Aquí solo la separación entre bloques, que es
   mayor porque el Libro va en fieldsets, no en campos sueltos.

   Va con doble clase a propósito: el CSS de los componentes se enlaza
   DESPUÉS del de la página (lo empuja `<x-field>` desde el cuerpo), así
   que `.lr-form` a secas perdía contra `.form` por orden de aparición. */
.form.lr-form { gap: var(--space-xl); }

.lr-fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  padding: var(--space-lg);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.lr-fieldset legend {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-ink);
  font-size: 1.05rem;
  padding: 0 .5rem;
  margin-left: -.5rem;
}


.lr-radios { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.lr-radios--stack { flex-direction: column; gap: .6rem; }
.lr-radios label { font-weight: 400; display: flex; gap: .5ch; align-items: baseline; }
.lr-radios input { accent-color: var(--color-brand-green); }


/* ---- Confirmación ---- */
.lr-done { text-align: center; max-width: 52ch; margin-inline: auto; padding-block: var(--space-xl); }
.lr-done__check {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin: 0 auto var(--space-md);
  border-radius: var(--radius-pill);
  background: var(--color-brand-green);
}
.lr-done__check svg { width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.lr-done h1 { margin: 0 0 .3rem; }
.lr-done__code {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--color-brand-green-text);
  margin: 0 0 var(--space-md);
}
.lr-done p { color: var(--color-text-muted); }
.lr-done__actions { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; margin-top: var(--space-lg); }

@media print {
  .site-header, .site-footer, .lr-done__actions, .lr-intro { display: none; }
}