/**
 * Estilos del formulario público del Libro de Reclamaciones.
 * Todo el CSS está encapsulado dentro de .lr-book-container.
 * Sin Bootstrap. Sin floats. CSS Grid + Flexbox.
 * Prefijo lr- en todas las clases.
 *
 * @package LibroReclamaciones
 */

/* ── Variables ─────────────────────────────────────────────────────────────── */
.lr-book-container {
  --lr-primary:      #02529B;
  --lr-primary-dark: #013d73;
  --lr-success:      #00a32a;
  --lr-error:        #d63638;
  --lr-text:         #1d2327;
  --lr-text-light:   #646970;
  --lr-border:       #c3c4c7;
  --lr-bg:           #f6f7f7;
  --lr-bg-card:      #ffffff;
  --lr-radius:       8px;
  --lr-radius-sm:    4px;
  --lr-shadow:       0 1px 4px rgba(0,0,0,.08);
  --lr-font:         system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --lr-transition:   0.2s ease;
}

/* ── Reset interno ─────────────────────────────────────────────────────────── */
.lr-book-container *,
.lr-book-container *::before,
.lr-book-container *::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

.lr-book-container {
  font-family: var(--lr-font);
  color:       var(--lr-text);
  line-height: 1.5;
  width:       100%;
  max-width:   550px;  /* ancho máximo uniforme para todos los fieldsets */
  margin:      0 auto;
  padding:     16px;
}

/* ── Encabezado ──────────────────────────────────────────────────────────────*/
.lr-form-header {
  text-align:    center;
  margin-bottom: 22px;
}

.lr-form-title {
  font-size:     1.6rem;
  font-weight:   700;
  color:         var(--lr-primary);
  margin-bottom: 6px;
}

.lr-form-subtitle {
  font-size: 0.95rem;
  color:     var(--lr-text-light);
}

.lr-form-legal {
  font-size:  0.78rem;
  color:      var(--lr-text-light);
  margin-top: 4px;
  font-style: italic;
}

/* ── Alertas ─────────────────────────────────────────────────────────────────*/
.lr-alert {
  padding:       10px 14px;
  border-radius: var(--lr-radius-sm);
  margin-bottom: 16px;
  font-size:     0.875rem;
  line-height:   1.5;
  border-left:   4px solid;
}

.lr-alert--error   { background: #fce8e8; border-color: var(--lr-error);   color: #6d1516; }
.lr-alert--success { background: #edfaef; border-color: var(--lr-success); color: #00521a; }

.lr-alert ul {
  margin:     5px 0 0 1.2em;
  padding:    0;
  list-style: disc;
}

.lr-alert ul li {
  margin-bottom: 2px;
  font-size:     0.85rem;
}

/* ── Fieldsets ───────────────────────────────────────────────────────────────
   width:100% + box-sizing:border-box garantiza que todos los pasos (1-4)
   tengan exactamente el mismo ancho, igual al del contenedor.
*/
.lr-fieldset {
  width:         100%;
  box-sizing:    border-box;
  border:        1px solid var(--lr-border);
  border-radius: var(--lr-radius);
  padding:       16px 16px 20px;
  margin-bottom: 16px;
  background:    var(--lr-bg-card);
  box-shadow:    var(--lr-shadow);
}

.lr-legend {
  display:       flex;
  align-items:   center;
  gap:           8px;
  font-size:     0.95rem;
  font-weight:   600;
  color:         var(--lr-text);
  padding:       0 4px;
  margin-bottom: 16px;
}

.lr-legend__number {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           24px;
  height:          24px;
  background:      var(--lr-primary);
  color:           #fff;
  border-radius:   50%;
  font-size:       0.75rem;
  font-weight:     700;
  flex-shrink:     0;
}

.lr-subsection-title {
  font-size:      0.8rem;
  font-weight:    600;
  color:          var(--lr-text-light);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin:         14px 0 10px;
  padding-bottom: 6px;
  border-bottom:  1px dashed var(--lr-border);
}

/* ── Grid de filas ───────────────────────────────────────────────────────────*/
.lr-row {
  display:       grid;
  gap:           14px;
  margin-bottom: 14px;
}

.lr-row:last-child { margin-bottom: 0; }

.lr-row--1 { grid-template-columns: 1fr; }
.lr-row--2 { grid-template-columns: repeat(2, 1fr); }
.lr-row--3 { grid-template-columns: repeat(3, 1fr); gap: 10px; }

/* ── Columnas ────────────────────────────────────────────────────────────────
   Flex column simple. Los labels están acortados para no romper línea en
   las filas de 3 columnas dentro del ancho máximo de 550px.
*/
.lr-col {
  display:        flex;
  flex-direction: column;
  gap:            4px;
}

/* ── Labels ──────────────────────────────────────────────────────────────────*/
.lr-label {
  font-size:   0.82rem;
  font-weight: 600;
  color:       var(--lr-text);
  line-height: 1.3;
}

.lr-label--required::after {
  content: ' *';
  color:   var(--lr-error);
}

/* ── Inputs, Selects y Textareas ─────────────────────────────────────────────*/
.lr-input,
.lr-select,
.lr-textarea {
  width:         100%;
  padding:       8px 11px;
  border:        1.5px solid var(--lr-border);
  border-radius: var(--lr-radius-sm);
  font-size:     0.875rem;
  font-family:   var(--lr-font);
  color:         var(--lr-text);
  background:    #fff;
  transition:    border-color var(--lr-transition), box-shadow var(--lr-transition);
  appearance:    none;
  -webkit-appearance: none;
}

.lr-input:focus,
.lr-select:focus,
.lr-textarea:focus {
  outline:      none;
  border-color: var(--lr-primary);
  box-shadow:   0 0 0 3px rgba(2, 82, 155, .15);
}

.lr-input::placeholder,
.lr-textarea::placeholder {
  color:      var(--lr-text-light);
  font-style: italic;
  font-size:  0.8rem;
}

.lr-select {
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23646970' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 10px center;
  padding-right:       30px;
  cursor:              pointer;
}

.lr-select:disabled {
  background-color: var(--lr-bg);
  cursor:           not-allowed;
  opacity:          0.65;
}

.lr-textarea {
  resize:      vertical;
  min-height:  76px;
  line-height: 1.5;
}

.lr-input--number { text-align: right; }

.lr-input.lr-has-error,
.lr-select.lr-has-error,
.lr-textarea.lr-has-error {
  border-color: var(--lr-error);
  background:   #fff8f8;
}

.lr-field-error {
  font-size:  0.73rem;
  color:      var(--lr-error);
  min-height: 1em;
  line-height: 1.3;
}

/* ── Contador de caracteres ──────────────────────────────────────────────────*/
.lr-char-count {
  font-size:  0.73rem;
  color:      var(--lr-text-light);
  text-align: right;
}

/* ── Radio simple (Sí / No y Tipo de Reclamo / Consumo) ─────────────────────*/
.lr-radio-group {
  display:    flex;
  flex-wrap:  wrap;
  gap:        16px;
  margin-top: 2px;
}

.lr-radio-label {
  display:     flex;
  align-items: center;
  gap:         6px;
  cursor:      pointer;
  font-size:   0.875rem;
  font-weight: 500;
}

.lr-radio {
  accent-color: var(--lr-primary);
  width:        16px;
  height:       16px;
  cursor:       pointer;
  flex-shrink:  0;
}

/* ── Checkboxes ──────────────────────────────────────────────────────────────*/
.lr-checkbox-group { margin-bottom: 10px; }

.lr-checkbox-label {
  display:     flex;
  align-items: flex-start;
  gap:         8px;
  cursor:      pointer;
  font-size:   0.855rem;
  line-height: 1.5;
}

.lr-checkbox {
  accent-color: var(--lr-primary);
  width:        16px;
  height:       16px;
  flex-shrink:  0;
  margin-top:   2px;
  cursor:       pointer;
}

.lr-checkbox-text a { color: var(--lr-primary); }

/* ── Sección condicional (tutor de menor) ────────────────────────────────────*/
.lr-conditional-section {
  margin-top:    14px;
  padding:       14px;
  background:    var(--lr-bg);
  border:        1px dashed var(--lr-border);
  border-radius: var(--lr-radius-sm);
}

/* ── Botón de envío ──────────────────────────────────────────────────────────*/
.lr-form-submit {
  text-align: center;
  margin-top: 20px;
}

.lr-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  padding:       12px 36px;
  border:        none;
  border-radius: var(--lr-radius-sm);
  font-size:     0.95rem;
  font-weight:   600;
  font-family:   var(--lr-font);
  cursor:        pointer;
  transition:    background var(--lr-transition), transform var(--lr-transition), box-shadow var(--lr-transition);
}

.lr-btn--primary {
  background: var(--lr-primary);
  color:      #fff;
  box-shadow: 0 2px 8px rgba(2, 82, 155, .3);
}

.lr-btn--primary:hover {
  background: var(--lr-primary-dark);
  box-shadow: 0 4px 12px rgba(2, 82, 155, .4);
  transform:  translateY(-1px);
}

.lr-btn--primary:active { transform: translateY(0); }

.lr-btn--primary:disabled,
.lr-btn--primary[disabled] {
  background: #a7aaad;
  box-shadow: none;
  cursor:     not-allowed;
  transform:  none;
}

.lr-btn__spinner {
  display:          none;
  width:            16px;
  height:           16px;
  border:           2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius:    50%;
  animation:        lr-spin .7s linear infinite;
}

.lr-btn.lr-loading .lr-btn__spinner { display: block; }

@keyframes lr-spin { to { transform: rotate(360deg); } }

.lr-form-note {
  font-size:  0.78rem;
  color:      var(--lr-text-light);
  margin-top: 8px;
}

/* ── Éxito con código ────────────────────────────────────────────────────────*/
.lr-success-code {
  font-size:      1.7rem;
  font-weight:    700;
  color:          var(--lr-primary);
  letter-spacing: 2px;
  display:        block;
  margin:         8px 0;
}

/* ── Honeypot ────────────────────────────────────────────────────────────────*/
.lr-hp-field {
  position: absolute !important;
  left:     -9999px !important;
  top:      -9999px !important;
  opacity:  0 !important;
  height:   0 !important;
  overflow: hidden !important;
}

/* ── Responsive ──────────────────────────────────────────────────────────────*/
@media (max-width: 520px) {
  .lr-row--2,
  .lr-row--3 {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .lr-form-title { font-size: 1.3rem; }

  .lr-fieldset { padding: 14px; }

  .lr-btn {
    width:           100%;
    justify-content: center;
  }
}

/* ── Print ───────────────────────────────────────────────────────────────────*/
@media print {
  .lr-btn, .lr-hp-field { display: none !important; }
  .lr-book-container     { padding: 0; }
  .lr-fieldset           { border: 1px solid #ccc; box-shadow: none; }
}