/* ===== libro-de-reclamaciones ===== */
/* ==========================================================================
   Página LIBRO DE RECLAMACIONES — libro oficial de quejas y reclamos.
   Conforme a la Ley N° 29571 y al DS 011-2011-PCM.
   Prefijo de clases: lrec-  ·  Usa tokens de css/tokens.css.
   Grises neutros de UI (page bg, labels, bordes) y verdes/rojos de estado del
   formulario no cubiertos por los tokens de marca → variables locales --lrec-*.
   ========================================================================== */
.lrec{
  /* Paleta local (neutros UI + estados del form, iguales al componente React) */
  --lrec-page-bg:var(--sx-gris-fondo);
  --lrec-ink:var(--sx-text);
  --lrec-gray:var(--sx-text-muted);
  --lrec-label:#374151;
  --lrec-border:var(--sx-input-border);
  --lrec-hair:#F3F4F6;
  --lrec-req:var(--sx-rojo);
  --lrec-ok-1:#10B981;
  --lrec-ok-2:#059669;
  --lrec-err-bg:#FEF2F2;
  --lrec-err-border:#FECACA;
  --lrec-err-ink:#B91C1C;
  --lrec-info-bg:#F1F5F9;
  --lrec-consent-ink:#4B5563;
  --lrec-disabled:var(--sx-gris-sobre);

  display:block;
  background:var(--lrec-page-bg);
  min-height:100vh;
}

/* ---- Encabezado ---- */
/* Contenedor estándar del sitio (1200 + padding clamp) alineado a la izquierda. */
.lrec-head{
  max-width:1200px;margin-inline:auto;
  padding-block:clamp(96px,12vh,128px) 24px;
  padding-inline:clamp(20px,4vw,24px);
}
.lrec-eyebrow{
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
}
.lrec-eyebrow-tag{
  font-family:var(--sx-font-body);
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--sx-blue-texto);
}
.lrec-eyebrow-dot{
  width:4px;height:4px;border-radius:var(--sx-r-pill);background:var(--sx-gris-0);
}
.lrec-eyebrow-meta{
  font-family:var(--sx-font-body);
  font-size:11px;font-weight:500;color:var(--lrec-gray);
}
.lrec-title{
  font-family:var(--sx-font-title);
  font-weight:800;font-size:clamp(2.1rem,4.2vw,3.4rem);line-height:1.05;letter-spacing:-.01em;
  color:var(--lrec-ink);margin:0 0 14px;
}
.lrec-lede{
  font-family:var(--sx-font-body);
  font-size:clamp(15px,1.6vw,18px);font-weight:400;line-height:1.55;
  color:#4B5563;margin:0;max-width:62ch;
}

/* ---- Cuerpo (banners + tarjeta del form) ---- */
.lrec-body{
  max-width:1200px;margin-inline:auto;
  padding-block:16px 64px;
  padding-inline:clamp(20px,4vw,24px);
}
/* La columna del formulario se limita en ancho pero queda alineada a la izquierda
   (no centrada) para que su borde coincida con el título. */
.lrec-card,.lrec-banner,.lrec-info{max-width:760px}

/* Banners de estado */
.lrec-banner[hidden]{display:none}
.lrec-banner{animation:lrec-drop .32s var(--sx-ease-smooth)}
@keyframes lrec-drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

.lrec-banner--ok{
  background:linear-gradient(135deg,var(--lrec-ok-1),var(--lrec-ok-2));
  color:var(--sx-white);
  border-radius:20px;
  padding:28px 32px;margin-bottom:20px;
  box-shadow:0 8px 24px rgba(16,185,129,.28);
}
.lrec-banner-title{
  font-family:var(--sx-font-title);
  font-weight:700;font-size:24px;letter-spacing:-.02em;color:var(--sx-white);
  margin:0 0 6px;
}
.lrec-banner-code{
  font-family:var(--sx-font-body);
  font-size:15px;margin:0 0 10px;opacity:.95;line-height:1.55;
}
.lrec-banner-code strong{font-weight:700}
.lrec-banner-code strong span{font-size:18px;letter-spacing:.02em}
.lrec-banner-note{
  font-family:var(--sx-font-body);
  font-size:13px;margin:0;opacity:.88;line-height:1.5;
}

.lrec-banner--err{
  background:var(--lrec-err-bg);
  border:1px solid var(--lrec-err-border);
  border-radius:14px;
  padding:14px 18px;margin-bottom:18px;
}
.lrec-banner-errmsg{
  font-family:var(--sx-font-body);
  font-size:14px;font-weight:500;color:var(--lrec-err-ink);margin:0;line-height:1.5;
}

/* ---- Tarjeta del formulario ---- */
.lrec-card{
  background:var(--sx-white);
  border:1px solid var(--lrec-border);
  border-radius:24px;
  padding:36px;
  box-shadow:0 4px 20px rgba(0,0,0,.04);
  transition:opacity .3s var(--sx-ease);
}
.lrec-card.is-done{opacity:.5;pointer-events:none}

.lrec-form{display:flex;flex-direction:column;gap:22px}

/* Divisor sobre cada grupo salvo el primero. */
.lrec-form > .lrec-group + .lrec-group{border-top:1px solid var(--lrec-hair);padding-top:22px}

.lrec-group-title{
  font-family:var(--sx-font-title);
  font-weight:700;font-size:18px;color:var(--lrec-ink);margin:0 0 18px;
}
.lrec-group-title--tight{margin-bottom:4px}
.lrec-group-hint{
  font-family:var(--sx-font-body);
  font-size:13px;font-weight:400;color:var(--lrec-gray);margin:0 0 18px;
}

.lrec-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lrec-stack{display:flex;flex-direction:column;gap:16px}

/* Los grupos de persona (natural / jurídica) son transparentes a la grilla:
   sus 3 campos fluyen como celdas del .lrec-grid padre. Al ocultarse (hidden)
   desaparecen por completo. El [hidden] gana en especificidad al display:contents. */
.lrec-persona-fields{display:contents}
.lrec-persona-fields[hidden]{display:none}

.lrec-field{display:flex;flex-direction:column}
.lrec-label{
  font-family:var(--sx-font-body);
  font-size:13px;font-weight:600;color:var(--lrec-label);margin-bottom:6px;
}
.lrec-req{color:var(--lrec-req)}

/* Inputs / select / textarea */
.lrec-input{
  width:100%;height:48px;padding:0 14px;
  font-family:var(--sx-font-body);font-size:16px;font-weight:400;
  color:var(--lrec-ink);background:var(--sx-white);
  border:1.5px solid var(--lrec-border);border-radius:12px;
  outline:none;box-sizing:border-box;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.lrec-input:focus{border-color:var(--sx-blue);box-shadow:0 0 0 3px rgba(var(--sx-blue-rgb),.12)}
.lrec-input::placeholder{color:var(--sx-text-muted)}

.lrec-select-wrap{position:relative}
.lrec-select{appearance:none;-webkit-appearance:none;padding-right:36px;cursor:pointer}
.lrec-select-caret{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  color:var(--lrec-label);pointer-events:none;
}

.lrec-textarea{
  height:auto;min-height:140px;padding:14px;line-height:1.5;resize:vertical;
}

/* Consentimiento */
.lrec-consent{
  display:flex;gap:10px;align-items:flex-start;margin-bottom:18px;cursor:pointer;
}
.lrec-check{margin-top:4px;accent-color:var(--sx-blue);flex-shrink:0}
.lrec-consent-text{
  font-family:var(--sx-font-body);
  font-size:13px;font-weight:400;color:var(--lrec-consent-ink);line-height:1.55;
}
.lrec-consent-text a{color:var(--sx-blue-texto);text-decoration:none}
.lrec-consent-text a:hover{text-decoration:underline}

/* Botón de envío: usa .sx-btn.sx-btn--primary (hover reveal unificado, igual que
   "Cambiar ahora"). A ancho completo; solo conservamos el estado disabled. */
.lrec-submit{width:100%}
.lrec-submit:disabled{
  background-color:var(--lrec-disabled);background-image:none;
  box-shadow:none;cursor:wait;transform:none;
}

/* Info: queja vs reclamo */
.lrec-info{
  margin-top:32px;
  background:var(--lrec-info-bg);
  border-radius:16px;
  padding:22px 26px;
  display:grid;grid-template-columns:1fr 1fr;gap:18px;
}
.lrec-info-title{
  font-family:var(--sx-font-title);
  font-weight:700;font-size:14px;color:var(--lrec-ink);margin:0 0 6px;
}
.lrec-info-text{
  font-family:var(--sx-font-body);
  font-size:13px;font-weight:300;color:var(--lrec-consent-ink);line-height:1.55;margin:0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:900px){
  .lrec-body{padding-block:12px 48px}
}
@media (max-width:560px){
  .lrec-card{padding:20px;border-radius:20px}
  .lrec-banner--ok{padding:22px;border-radius:18px}
  .lrec-banner-title{font-size:20px}
  .lrec-grid{grid-template-columns:1fr}
  .lrec-info{grid-template-columns:1fr;padding:18px 20px}
}