/* ============================================================
   The AutonomIA - Libro de Reclamaciones Virtual
   ------------------------------------------------------------
   Se carga DESPUÉS de global.css. Tarjeta translúcida clara sobre
   el fondo del formulario, con formulario legible. Las variables
   heredan del branding global (global.css); el valor a la derecha
   de var() es solo respaldo.
   ============================================================ */

:root {
  --lr-azul-cyber: var(--accent, #1f7aec);
  --lr-azul-profundo: #0a1b3d;
  --lr-tinta: #1b2433;
  --lr-tinta-suave: #4a5568;
  --lr-superficie: #ffffff;
  --lr-superficie-velo: rgba(255, 255, 255, 0.94);
  --lr-borde: rgba(31, 122, 236, 0.20);
  --lr-borde-input: #c3cede;
  --lr-aviso-fondo: rgba(31, 122, 236, 0.07);
  --lr-ok: #1f9d57;
  --lr-error: #d8413a;

  --lr-fuente-titulo: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --lr-fuente-texto: 'Manrope', 'Segoe UI', system-ui, sans-serif;

  --lr-radio: 14px;
  --lr-radio-input: 10px;
  --lr-ancho-lectura: 820px;
  --lr-nav-h: 74px;
}

/* ====== Lienzo con el fondo del formulario ====== */
.lr-page {
  background-image: url("fondo_formulario.png");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-height: 100vh;
  padding: calc(var(--lr-nav-h) + clamp(1.5rem, 5vw, 3rem)) 1.25rem clamp(1.5rem, 5vw, 4rem);
  color: var(--lr-tinta);
  font-family: var(--lr-fuente-texto);
  line-height: 1.6;
}

.lr-shell {
  max-width: var(--lr-ancho-lectura);
  margin: 0 auto;
}

.lr-card {
  background: var(--lr-superficie-velo);
  backdrop-filter: blur(6px);
  border: 1px solid var(--lr-borde);
  border-radius: var(--lr-radio);
  padding: clamp(1.5rem, 4vw, 3rem);
  box-shadow: 0 24px 60px rgba(10, 27, 61, 0.18);
}

/* ====== Encabezado ====== */
.lr-header { text-align: center; border-bottom: 1px solid var(--lr-borde); padding-bottom: 1.4rem; margin-bottom: 1.8rem; }
.lr-eyebrow { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lr-azul-cyber); font-weight: 600; margin: 0 0 0.55rem; }
.lr-title { font-family: var(--lr-fuente-titulo); font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.15; color: var(--lr-azul-profundo); margin: 0; }

/* ====== Aviso legal (Ley 29571) ====== */
.lr-aviso {
  display: flex; gap: 0.9rem; align-items: flex-start;
  background: var(--lr-aviso-fondo);
  border: 1px solid var(--lr-borde);
  border-left: 4px solid var(--lr-azul-cyber);
  border-radius: var(--lr-radio);
  padding: 1.1rem 1.3rem; margin-bottom: 1.5rem;
}
.lr-aviso svg { width: 26px; height: 26px; color: var(--lr-azul-cyber); flex: none; margin-top: 2px; }
.lr-aviso p { margin: 0; font-size: 0.97rem; }

/* ====== Datos del proveedor ====== */
.lr-proveedor { margin-bottom: 1.5rem; font-size: 0.95rem; }
.lr-proveedor h2,
.lr-info h2 { font-family: var(--lr-fuente-titulo); font-size: 1.05rem; color: var(--lr-azul-profundo); margin: 0 0 0.55rem; }
.lr-proveedor dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 0.9rem; margin: 0; }
.lr-proveedor dt { font-weight: 600; color: var(--lr-tinta); }
.lr-proveedor dd { margin: 0; color: var(--lr-tinta-suave); }

/* ====== Bloque informativo (reclamo vs queja + plazo) ====== */
.lr-info { margin-bottom: 2rem; }
.lr-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.lr-info-box { background: #fff; border: 1px solid var(--lr-borde); border-radius: var(--lr-radio); padding: 1rem 1.15rem; }
.lr-info-box h3 { font-family: var(--lr-fuente-titulo); font-size: 0.95rem; color: var(--lr-azul-cyber); margin: 0 0 0.4rem; }
.lr-info-box p { margin: 0; font-size: 0.9rem; color: var(--lr-tinta-suave); }
.lr-plazo { margin: 1rem 0 0; font-size: 0.92rem; color: var(--lr-tinta); background: rgba(31,157,87,.08); border: 1px solid rgba(31,157,87,.25); border-radius: var(--lr-radio); padding: 0.8rem 1.1rem; }
.lr-plazo b { color: var(--lr-azul-profundo); }

/* ====== Formulario ====== */
.lr-fieldset { border: none; padding: 0; margin: 0 0 1.8rem; }
.lr-fieldset > legend { font-family: var(--lr-fuente-titulo); font-size: 1.12rem; color: var(--lr-azul-profundo); font-weight: 600; padding: 0; margin-bottom: 1rem; width: 100%; border-bottom: 1px solid var(--lr-borde); padding-bottom: 0.5rem; }

.lr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; }
.lr-field { display: flex; flex-direction: column; gap: 0.35rem; }
.lr-field--full { grid-column: 1 / -1; }
.lr-field label { font-weight: 600; font-size: 0.88rem; color: var(--lr-tinta); }
.lr-field .req { color: var(--lr-error); margin-left: 2px; }
.lr-field .opt { color: var(--lr-tinta-suave); font-weight: 500; font-size: 0.82rem; }

.lr-field input,
.lr-field select,
.lr-field textarea {
  font-family: var(--lr-fuente-texto); font-size: 0.95rem; color: var(--lr-tinta);
  background: #fff; border: 1px solid var(--lr-borde-input); border-radius: var(--lr-radio-input);
  padding: 0.7em 0.85em; width: 100%; line-height: 1.4;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.lr-field textarea { resize: vertical; min-height: 96px; }
.lr-field input:focus,
.lr-field select:focus,
.lr-field textarea:focus { outline: none; border-color: var(--lr-azul-cyber); box-shadow: 0 0 0 3px rgba(31,122,236,.16); }
.lr-field input::placeholder,
.lr-field textarea::placeholder { color: #9aa6b6; }

/* estado de error por campo */
.lr-field.has-error input,
.lr-field.has-error select,
.lr-field.has-error textarea { border-color: var(--lr-error); box-shadow: 0 0 0 3px rgba(216,65,58,.14); }
.lr-error-msg { display: none; color: var(--lr-error); font-size: 0.8rem; }
.lr-field.has-error .lr-error-msg { display: block; }

/* radios y checkboxes */
.lr-choice { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.lr-choice label { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 500; cursor: pointer; }
.lr-choice input { width: auto; }
.lr-radiogroup.has-error { border: 1px solid var(--lr-error); border-radius: var(--lr-radio-input); padding: 0.6rem 0.8rem; }

.lr-check { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0.4rem 0 0.2rem; }
.lr-check input { width: auto; margin-top: 3px; flex: none; }
.lr-check label { font-size: 0.92rem; }
.lr-check a { color: var(--lr-azul-cyber); text-decoration: underline; }
.lr-check.has-error label { color: var(--lr-error); }

/* sub-bloque condicional (menor de edad) */
.lr-conditional { display: none; margin-top: 0.4rem; grid-column: 1 / -1; }
.lr-conditional.show { display: block; }
.lr-conditional .lr-subnote { font-size: 0.85rem; color: var(--lr-tinta-suave); margin: 0 0 0.7rem; }

/* acciones */
.lr-actions { margin-top: 1.6rem; }
.lr-submit { width: 100%; justify-content: center; font-size: 1.05rem; padding: 1em; }
.lr-submit[disabled] { opacity: .6; cursor: wait; }
.lr-formerror { display: none; margin-top: 1rem; color: var(--lr-error); background: rgba(216,65,58,.08); border: 1px solid rgba(216,65,58,.3); border-radius: var(--lr-radio-input); padding: 0.85rem 1.1rem; font-size: 0.92rem; }
.lr-formerror.show { display: block; }

/* ====== Confirmación ====== */
.lr-confirm { display: none; text-align: center; }
.lr-confirm.show { display: block; }
.lr-confirm__icon { width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%; display: grid; place-items: center; background: rgba(31,157,87,.12); color: var(--lr-ok); }
.lr-confirm__icon svg { width: 34px; height: 34px; }
.lr-confirm h2 { font-family: var(--lr-fuente-titulo); color: var(--lr-azul-profundo); font-size: 1.6rem; margin: 0 0 0.6rem; }
.lr-confirm p { margin: 0 0 0.8rem; color: var(--lr-tinta-suave); }
.lr-codigo { display: inline-block; font-family: var(--lr-fuente-titulo); font-size: 1.4rem; font-weight: 700; color: var(--lr-azul-profundo); background: #fff; border: 1px dashed var(--lr-azul-cyber); border-radius: var(--lr-radio); padding: 0.6rem 1.4rem; margin: 0.4rem 0 1rem; letter-spacing: .04em; }
.lr-confirm__meta { background: rgba(31,122,236,.06); border: 1px solid var(--lr-borde); border-radius: var(--lr-radio); padding: 1rem 1.2rem; text-align: left; margin: 1.2rem 0; font-size: 0.92rem; }
.lr-confirm__meta p { margin: 0 0 0.5rem; color: var(--lr-tinta); }
.lr-confirm__meta p:last-child { margin: 0; }
.lr-confirm__btns { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; margin-top: 1.2rem; }

/* ====== Hoja de impresión (solo visible al imprimir) ====== */
.lr-print { display: none; }
.lr-print h1 { font-family: var(--lr-fuente-titulo); font-size: 1.4rem; margin: 0 0 0.2rem; }
.lr-print h2 { font-family: var(--lr-fuente-titulo); font-size: 1rem; margin: 1.2rem 0 0.4rem; border-bottom: 1px solid #000; padding-bottom: 0.2rem; }
.lr-print .row { display: flex; gap: 0.6rem; margin-bottom: 0.3rem; font-size: 0.9rem; }
.lr-print .row b { min-width: 180px; display: inline-block; }
.lr-print .lr-print__head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #000; padding-bottom: 0.5rem; }

/* ====== Responsive ====== */
@media (max-width: 640px) {
  .lr-grid { grid-template-columns: 1fr; }
  .lr-info-grid { grid-template-columns: 1fr; }
  .lr-page { background-attachment: scroll; }
  .lr-proveedor dl { grid-template-columns: 1fr; gap: 0.1rem 0; }
  .lr-proveedor dt { margin-top: 0.4rem; }
}

/* ====== Impresión: solo la hoja de reclamación ====== */
@media print {
  body * { visibility: hidden; }
  .lr-print, .lr-print * { visibility: visible; }
  .lr-print { display: block; position: absolute; left: 0; top: 0; width: 100%; padding: 1.5rem; color: #000; background: #fff; }
}