/* Calculadora de refrendo anual.
   Reutiliza el CSS de la de emplacamiento para lo comun (.empl-form, .empl-campo,
   .empl-total, .empl-fuente, .empl-tabla): la plantilla carga los dos archivos.
   Aqui solo lo que el refrendo aniade: el desglose, el periodo de pago y los avisos. */

.refr-desglose {
  margin: 0 0 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
}

.refr-linea {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .7rem 1rem;
  font-size: .95rem;
}

.refr-linea + .refr-linea { border-top: 1px solid #edf2f7; }
.refr-linea strong { white-space: nowrap; }
.refr-linea.refr-extra { background: #f8fafc; color: #4a5568; }

.refr-periodo {
  margin: 0 0 .75rem;
  padding: .85rem 1rem;
  border-left: 4px solid #2563eb;
  background: #eff6ff;
  border-radius: 0 8px 8px 0;
  font-size: .95rem;
}

/* Cuando el periodo de pago aun no esta verificado en fuente oficial se dice,
   en vez de callarlo: pagar fuera de plazo tiene recargo. */
.refr-periodo.refr-falta {
  border-left-color: #d97706;
  background: #fffbeb;
  color: #78350f;
}

.refr-avisos {
  margin: 0 0 .75rem;
  padding-left: 1.2rem;
  font-size: .9rem;
  color: #4a5568;
}

.refr-avisos li { margin-bottom: .35rem; }

.refr-nota {
  margin: 0 0 .75rem;
  font-size: .88rem;
  color: #64748b;
  font-style: italic;
}

@media (max-width: 480px) {
  .refr-linea { flex-direction: column; gap: .15rem; }
  .refr-linea strong { align-self: flex-end; }
}